/* Programmable buttons, project cards, the Wallet page shell. Colors come from the theme variables (style.css). */

.mm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  text-decoration: none;
}
.mm-btn:not([class*="bg-"]):not([class*="mm-btn-"]):not(.mm-tab) {
  background: var(--mm-surface);
  color: var(--mm-text);
  border: 1px solid var(--mm-border);
  border-radius: 999px;
  padding: 10px 20px;
  font-weight: 700;
  font-size: 14px;
}
.mm-btn:not([class*="bg-"]):not([class*="mm-btn-"]):not(.mm-tab):hover { border-color: var(--mm-accent); color: var(--mm-accent-strong); }
.mm-btn-primary {
  background: var(--mm-accent-strong);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 11px 22px;
  font-weight: 700;
  font-size: 14px;
  box-shadow: 0 8px 20px rgba(34, 197, 94, 0.22);
}
.mm-btn-primary:hover { filter: brightness(.95); }
.mm-btn:focus-visible { outline: 2px solid var(--mm-accent); outline-offset: 2px; }

/* Wallet page: the market app sits inside the card, so it should not draw a second panel */
.mm-wallet .mm-wallet-app .yoh-balances { background: transparent; padding: 0; border-radius: 0; box-shadow: none; }
.mm-wallet .mm-tabs { overflow-x: auto; scrollbar-width: none; }
.mm-wallet .mm-tabs button { white-space: nowrap; }

/* Projects: paging and the line clamp the cards use */
.mm-projects .line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mm-pager { display: flex; gap: 6px; justify-content: center; margin: 28px 0 8px; flex-wrap: wrap; }
.mm-pager-link {
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid var(--mm-border);
  background: var(--mm-surface);
  font-weight: 700;
  font-size: 14px;
}
.mm-pager-link:hover { border-color: var(--mm-accent); }
.mm-pager-link.is-active { background: var(--mm-accent-strong); border-color: var(--mm-accent-strong); color: #fff; }

/* Launch page: the chosen image name */
[data-launch-image-name] { display: inline-block; vertical-align: middle; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Wallet page: the theme's hero and tabs are the only ones (the market app's own pill tabs and total card are hidden here) */
.mm-wallet .mm-wallet-app #balances .nav-tabs,
.mm-wallet .mm-wallet-app #balances nav:has(> .nav-tabs) { display: none !important; } /* duplicate tabs */
.mm-wallet .mm-wallet-app #balances .balances-component > div > .container > .row.mb-3:first-child { display: none !important; }
.mm-wallet .mm-wallet-app #balances .tab-content > .tab-pane > .row:first-child h3 { margin-top: 0; }

/* Wallet hero: the big total */
[data-mm-wallet-total] { font-size: clamp(2.4rem, 5vw, 3.75rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; color: var(--mm-text); font-variant-numeric: tabular-nums; }

/* Wallet tabs: six of them, so they scroll sideways on narrow screens (mm-tabs scroll) */
.mm-wallet .mm-tabs { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.mm-wallet .mm-tabs::-webkit-scrollbar { display: none; }
.mm-wallet .mm-tabs .mm-tab { flex: 0 0 auto; white-space: nowrap; }

/* Icon fonts keep their own font: demo-pages.css sets the theme font on ".mm-theme *" with !important,
   which turned every Font Awesome icon (Unpublish, search, stars, ...) into an empty box. */
.mm-theme .fa,
.mm-theme .fas,
.mm-theme .far,
.mm-theme .fa::before,
.mm-theme .fas::before,
.mm-theme .far::before { font-family: "Font Awesome 5 Free", "FontAwesome" !important; }
.mm-theme .fa,
.mm-theme .fas { font-weight: 900; }
.mm-theme .far { font-weight: 400; }
.mm-theme .fab,
.mm-theme .fab::before { font-family: "Font Awesome 5 Brands" !important; font-weight: 400; }
.mm-theme .dashicons,
.mm-theme .dashicons::before { font-family: dashicons !important; }
.mm-theme .glyphicon,
.mm-theme .glyphicon::before { font-family: "Glyphicons Halflings" !important; }
