/* ============================================================
   sk-globals.css — site-wide UX hardening
   Auto-injected by sk-nav.js on every page.
   Keep this file small and additive — overrides only.
   ============================================================ */

/* Accessible focus ring — replaces `outline:none` everywhere
   without nuking keyboard accessibility. Only shows on keyboard
   focus thanks to :focus-visible. */
:focus-visible {
  outline: 2px solid var(--gold, #d4a017) !important;
  outline-offset: 2px !important;
  border-radius: 3px;
}
button:focus:not(:focus-visible),
a:focus:not(:focus-visible),
input:focus:not(:focus-visible),
textarea:focus:not(:focus-visible),
select:focus:not(:focus-visible) { outline: none; }

/* Wallet address / ENS / NFT name ellipsis utility.
   Add class="addr" to any wallet-string container to prevent
   long strings from breaking mobile layouts. */
.addr, .ens-name, .wallet-str, .sk-trunc {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  vertical-align: bottom;
}

/* Consistent disabled-button visual across all pages.
   Catches every <button disabled> + .btn:disabled regardless of theme. */
button:disabled,
button[disabled],
.btn:disabled,
[role="button"][aria-disabled="true"] {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
  filter: grayscale(0.4);
  pointer-events: none;
}

/* Tighten skeleton/spinner consistency (kept under .sk-spinner) */
.sk-spinner, .purchase-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(46, 204, 113, 0.25);
  border-top-color: var(--emerald, #2ecc71);
  border-radius: 50%;
  animation: sk-spin 0.7s linear infinite;
  vertical-align: middle;
}
@keyframes sk-spin { to { transform: rotate(360deg); } }

/* Print-friendly defaults — KOKO orb hidden when printing */
@media print {
  .koko-orb-wrap, .koko-panel, .sk-wallet-widget, .toast-container { display: none !important; }
}

/* Reduced-motion — kill heavy animations for users who opt out */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Mobile baseline — applies to any page that doesn't define its own
   <768px breakpoint. Keeps padding sane and prevents horizontal scroll. */
@media (max-width: 480px) {
  body { font-size: 14px; }
  /* Generic container fall-through */
  .container, main, .wrap, .page-wrap {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}

/* ============================================================
   2026-05-12: PFP selector — Kong-only.
   Every page that ships the PFP picker modal had Banana + Mutant Banana
   tabs. Hiding them globally here is one rule that covers all 15 pages.
   The "Supreme Kong" tab becomes the only option; the row also collapses
   to that single tab visually instead of looking like an orphan.
   ============================================================ */
.pfp-tab[data-collection="banana"],
.pfp-tab[data-collection="mutant"] { display: none !important; }
.pfp-modal-tabs:has(.pfp-tab[data-collection="kong"]) .pfp-tab[data-collection="kong"]{
  border-bottom: none !important;
}