/* =====================================================================
 *  THEME 2026 — PREMIUM EDITION · MrAccountShop
 *  v3 — look premium "tocco gaming" + FIX click bloccati
 *
 *  NOVITÀ rispetto alla versione precedente:
 *   • FIX IMPORTANTE: il widget WhatsApp non blocca più i click sulle
 *     card/opzioni d'acquisto (era invisibile ma copriva l'angolo basso).
 *   • Palette premium: arancio brand riscaldato verso l'ambra-oro,
 *     superfici con profondità, bordi a doppio livello.
 *   • Card prodotto: vetro scuro, hover con sollevamento + bagliore ambra.
 *   • Tipografia con più respiro (titoli Oxanium con tracking).
 *   • Bottoni "Compra Ora" con micro-interazione premium.
 *   • Placeholder copertine elegante.
 *   • Mobile: tap-target generosi, niente elementi che coprono i bottoni.
 *
 *  Non tocca: logo, struttura, font. Reversibile: togli il file e torna prima.
 * ===================================================================== */


/* =====================================================================
 *  0. ⛑️  FIX CRITICO — CLICK BLOCCATI DAL WIDGET WHATSAPP
 *  Il contenitore WhatsApp era fixed con z-index massimo e copriva
 *  un'area invisibile sopra le card in basso a destra, "mangiando" i
 *  click sulle opzioni d'acquisto (peggio nella sezione Software).
 *  Soluzione: il CONTENITORE lascia passare i click; solo il BOTTONE
 *  tondo e il fumetto VISIBILE li ricevono.
 * ===================================================================== */
.contact-wa,
.whatsapp-container {
  pointer-events: none !important;   /* l'area attorno NON intercetta più i click */
  gap: 10px !important;
}

.contact-wa__btn,
.whatsapp-btn,
.contact-wa__text,
.whatsapp-text {
  pointer-events: auto !important;   /* il bottone e il fumetto restano cliccabili */
}

/* Il fumetto di testo appare solo al passaggio del mouse: a riposo è
   invisibile E non cliccabile, così non copre mai i prezzi/bottoni */
.contact-wa__text,
.whatsapp-text {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateX(12px) !important;
  animation: none !important;        /* stop al lampeggio continuo */
  transition: opacity .25s ease, transform .25s ease !important;
}

.contact-wa:hover .contact-wa__text,
.contact-wa:focus-within .contact-wa__text,
.whatsapp-container:hover .whatsapp-text {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateX(0) !important;
}

/* Su mobile il fumetto resta sempre nascosto: spazio prezioso, dito grosso */
@media (max-width: 768px) {
  .contact-wa__text,
  .whatsapp-text { display: none !important; }
}


/* =====================================================================
 *  1. PALETTE PREMIUM
 * ===================================================================== */
:root {
  /* Sfondi a strati — profondità "premium dark" */
  --dark-bg: #0b0e14 !important;
  --surface-1: #141922;        /* card */
  --surface-2: #1a212c;        /* sezioni sopraelevate */
  --surface-3: #232c39;        /* bordi/divisori */
  --surface-glass: rgba(20, 25, 34, .72);

  /* Testi */
  --text-primary-new: #f2f6fc;
  --text-secondary-new: #9aa6b6;
  --text-muted-new: #6b7686;

  /* Brand — arancio riscaldato verso l'ambra-oro (più premium) */
  --orange: #ff9d2f !important;
  --orange-deep: #ff7a00;
  --orange-soft: #ffb259;
  --orange-glow: rgba(255, 157, 47, .28) !important;
  --card-bg: #141922 !important;

  /* Accent freddo */
  --accent-cyan: #38e1ff;
  --accent-cyan-soft: rgba(56, 225, 255, .14);
  --accent-cyan-glow: rgba(56, 225, 255, .38);

  --success-new: #3fb950;
  --danger-new: #f85149;
  --warning-new: #d29922;

  /* Ombre premium riutilizzabili */
  --shadow-card: 0 1px 2px rgba(0,0,0,.4), 0 12px 28px -16px rgba(0,0,0,.7);
  --shadow-hover: 0 18px 44px -18px rgba(255,157,47,.45), 0 0 0 1px rgba(255,157,47,.28);
}


/* =====================================================================
 *  2. SFONDO BASE — vignettatura ambra molto tenue in alto
 * ===================================================================== */
body, html {
  background-color: #0b0e14 !important;
}
body {
  background-image:
    radial-gradient(1100px 520px at 72% -8%, rgba(255,157,47,.06), transparent 60%),
    radial-gradient(900px 480px at 8% 0%, rgba(56,225,255,.04), transparent 55%) !important;
  background-attachment: fixed !important;
}


/* =====================================================================
 *  3. CARD PRODOTTO — vetro scuro premium + hover sollevato
 * ===================================================================== */
.game-card,
.product-card,
.card-game,
[class*="game-card"] {
  background: linear-gradient(180deg, #161c26 0%, #121720 100%) !important;
  border: 1px solid #232c39 !important;
  border-radius: 16px !important;
  box-shadow: var(--shadow-card) !important;
  transition: transform .28s cubic-bezier(.2,.7,.2,1),
              border-color .28s ease,
              box-shadow .28s ease !important;
}

.game-card:hover,
.product-card:hover,
.card-game:hover,
[class*="game-card"]:hover {
  transform: translateY(-6px) !important;
  border-color: rgba(255,157,47,.55) !important;
  box-shadow: var(--shadow-hover) !important;
}

/* Copertina con angoli arrotondati coerenti */
.game-card img,
.product-card img,
.card-game img {
  border-top-left-radius: 15px !important;
  border-top-right-radius: 15px !important;
}


/* =====================================================================
 *  4. PLACEHOLDER copertine mancanti
 * ===================================================================== */
.game-card .game-image,
.product-card .product-image,
.card-game .game-image {
  background: linear-gradient(135deg, #1a212c 0%, #141922 50%, #0b0e14 100%) !important;
  position: relative;
}


/* =====================================================================
 *  5. BOTTONI — gerarchia premium
 * ===================================================================== */

/* CTA primaria "Compra Ora" — gradiente ambra, micro-lift */
.btn-primary,
.cta-primary,
.btn-cta-main,
.hero-cta,
[class*="scopri-giochi"],
.compra-ora-btn,
button[class*="primary"] {
  background: linear-gradient(135deg, #ffb259 0%, #ff7a00 100%) !important;
  border: none !important;
  color: #1a1205 !important;
  font-weight: 800 !important;
  letter-spacing: .015em !important;
  box-shadow: 0 6px 22px -6px rgba(255,122,0,.55) !important;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease !important;
}
.btn-primary:hover,
.cta-primary:hover,
.btn-cta-main:hover,
.hero-cta:hover,
.compra-ora-btn:hover {
  transform: translateY(-2px) !important;
  filter: brightness(1.05) !important;
  box-shadow: 0 12px 30px -8px rgba(255,122,0,.7) !important;
}
.btn-primary:active,
.compra-ora-btn:active {
  transform: translateY(0) scale(.985) !important;
}

/* CTA secondaria — contorno pulito */
.btn-secondary,
.cta-secondary,
button[class*="secondary"] {
  background: transparent !important;
  border: 1px solid #2b3543 !important;
  color: #f2f6fc !important;
  box-shadow: none !important;
  transition: border-color .2s ease, background .2s ease !important;
}
.btn-secondary:hover,
.cta-secondary:hover {
  border-color: var(--accent-cyan) !important;
  background: var(--accent-cyan-soft) !important;
}


/* =====================================================================
 *  6. OPZIONI D'ACQUISTO (radio Primario/Secondario, edizioni, software)
 *  Tap-target ampi e chiari: niente più "non riesco a cliccare".
 * ===================================================================== */
.game-card label,
.product-card label,
[name^="version_"] + *,
[name^="edition_"] + *,
[name^="software_"] + * {
  cursor: pointer !important;
}

/* Riga opzione: area cliccabile generosa */
.game-card label,
.product-card label {
  min-height: 42px !important;
  border-radius: 10px !important;
  transition: background .15s ease, border-color .15s ease !important;
}
.game-card label:hover,
.product-card label:hover {
  background: rgba(56,225,255,.06) !important;
}

/* Opzione NON disponibile: chiaramente disabilitata, ma non blocca le altre */
.unavailable-option {
  opacity: .5 !important;
  cursor: not-allowed !important;
}
.unavailable-option * { pointer-events: none !important; }


/* =====================================================================
 *  7. TRUST / STATS — bordi sottili, niente neon
 * ===================================================================== */
.stats-bar, .trust-bar, .trust-row,
[class*="stats"], [class*="trust-row"] {
  border: 1px solid #232c39 !important;
  box-shadow: none !important;
  background: var(--surface-1) !important;
  border-radius: 16px !important;
}
.trust-icon, .trust-item i, [class*="trust-icon"] {
  color: var(--accent-cyan) !important;
}
.stat-number, .stats-number, [class*="stat-number"] {
  color: #f2f6fc !important;
  font-weight: 800 !important;
}


/* =====================================================================
 *  8. FILTRI "In Promozione / Prossimamente"
 * ===================================================================== */
.filter-pill, .filter-toggle,
[class*="filter-promo"], [class*="filter-upcoming"], .btn-filter {
  border: 1px solid #232c39 !important;
  background: var(--surface-1) !important;
  box-shadow: none !important;
  transition: all .2s ease !important;
}
.filter-pill.active, .filter-toggle.active, .btn-filter.active {
  border-color: var(--accent-cyan) !important;
  background: var(--accent-cyan-soft) !important;
  color: var(--accent-cyan) !important;
}


/* =====================================================================
 *  9. DROPDOWN / SELECT
 * ===================================================================== */
.sort-dropdown, .order-by-wrapper, [class*="ordina-per"], .dropdown-wrapper {
  border: 1px solid #232c39 !important;
  box-shadow: none !important;
  background: var(--surface-1) !important;
  border-radius: 12px !important;
}
select {
  background: var(--surface-1) !important;
  color: #f2f6fc !important;
  border: 1px solid #232c39 !important;
  border-radius: 10px !important;
}
select:focus { border-color: var(--accent-cyan) !important; outline: none !important; }


/* =====================================================================
 *  10. BADGE
 * ===================================================================== */
.upcoming-badge, .badge-upcoming, .prossimamente-badge,
[class*="prossimamente"], [class*="upcoming"] {
  background: linear-gradient(135deg, #38e1ff 0%, #0288d1 100%) !important;
  color: #04141c !important;
  font-weight: 800 !important;
  letter-spacing: .04em !important;
}
.promo-banner, .badge-promo, .offerte-badge, [class*="promo-banner"] {
  background: linear-gradient(135deg, #ffb259 0%, #ff7a00 100%) !important;
  color: #1a1205 !important;
  font-weight: 800 !important;
}


/* =====================================================================
 *  11. PREZZI — ambra brand, punto focale
 * ===================================================================== */
.product-price, .game-price, .prezzo,
[class*="product-price"], [class*="game-price"] {
  color: var(--orange) !important;
  font-weight: 800 !important;
  letter-spacing: .005em !important;
}


/* =====================================================================
 *  12. BOLLA WHATSAPP — stile premium (la logica click è nel blocco 0)
 * ===================================================================== */
.contact-wa__btn, .whatsapp-btn {
  box-shadow: 0 8px 24px -6px rgba(37,211,102,.45) !important;
  transition: transform .2s ease, box-shadow .2s ease !important;
}
.contact-wa__btn:hover, .whatsapp-btn:hover {
  transform: scale(1.06) !important;
  box-shadow: 0 12px 30px -6px rgba(37,211,102,.6) !important;
}


/* =====================================================================
 *  13. FAB CHIAVE INGLESE (admin) — discreta sul pubblico
 * ===================================================================== */
.admin-menu-container, #admin-menu-container,
.admin-menu-toggle, #admin-menu-toggle {
  opacity: .35 !important;
  transition: opacity .25s ease !important;
}
.admin-menu-container:hover, #admin-menu-container:hover,
.admin-menu-toggle:hover, #admin-menu-toggle:hover { opacity: 1 !important; }


/* =====================================================================
 *  14. HEADER — vetro premium
 * ===================================================================== */
.site-header, header, [class*="site-header"] {
  background: rgba(11,14,20,.86) !important;
  backdrop-filter: blur(14px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.2) !important;
  border-bottom: 1px solid #1d242f !important;
}
.site-logo, .logo-wrapper, [class*="site-logo"],
header img[alt*="MR"], header img[alt*="Mr.Account"] {
  background: transparent !important;
  border: none !important;
}


/* =====================================================================
 *  15. SEZIONI CATEGORIA — più respiro, titoli con tracking
 * ===================================================================== */
.games-section, .category-section, [class*="games-section"] {
  padding-top: 60px !important;
  padding-bottom: 60px !important;
}
.section-title, .category-title, [class*="section-title"] {
  margin-bottom: 30px !important;
  letter-spacing: .03em !important;
}


/* =====================================================================
 *  16. INPUT / SEARCH — focus ambra premium
 * ===================================================================== */
input[type="text"], input[type="email"], input[type="search"],
.search-bar, #search-bar, #search-bar-mobile {
  background: var(--surface-1) !important;
  border: 1px solid #232c39 !important;
  color: #f2f6fc !important;
  border-radius: 12px !important;
  transition: border-color .2s ease, box-shadow .2s ease !important;
}
input[type="text"]:focus, input[type="email"]:focus, input[type="search"]:focus,
.search-bar:focus, #search-bar:focus, #search-bar-mobile:focus {
  border-color: var(--orange) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(255,157,47,.16) !important;
}


/* =====================================================================
 *  17. SUGGERIMENTI RICERCA
 * ===================================================================== */
#search-suggestions, #search-suggestions-mobile, .suggestion-item {
  background: var(--surface-1) !important;
  border-color: #232c39 !important;
  color: #f2f6fc !important;
}
.suggestion-item:hover { background: rgba(255,157,47,.08) !important; }


/* =====================================================================
 *  18. FOOTER
 * ===================================================================== */
footer, .site-footer, [class*="site-footer"] {
  background: #080a0f !important;
  border-top: 1px solid #1d242f !important;
}


/* =====================================================================
 *  19. MOBILE — tap-target ampi, niente coperture
 * ===================================================================== */
@media (max-width: 768px) {
  .game-card, .product-card { margin-bottom: 16px !important; }

  button, .btn, a.btn, [role="button"] { min-height: 46px !important; }

  /* bottoni opzione ben distanziati per il dito */
  .game-card label, .product-card label { min-height: 46px !important; }

  .stat-number, [class*="stat-number"] { font-size: 1.6em !important; }

  .games-section, .category-section {
    padding-top: 34px !important;
    padding-bottom: 34px !important;
  }
  .search-bar, #search-bar, #search-bar-mobile { width: 100% !important; }

  /* bolla WhatsApp un filo più piccola e staccata dal bordo */
  .contact-wa, .whatsapp-container {
    bottom: 86px !important;   /* sopra la barra di navigazione inferiore */
    right: 14px !important;
  }
  .contact-wa__btn, .whatsapp-btn {
    width: 52px !important;
    height: 52px !important;
  }
  /* spazio extra in fondo così l'ultima fila di card non finisce sotto la bolla */
  .games-section:last-of-type,
  .category-section:last-of-type {
    padding-bottom: 120px !important;
  }
}


/* =====================================================================
 *  20. SAFETY NET — attenua bordi/glow arancioni inline troppo accesi
 * ===================================================================== */
[style*="border: 2px solid #ff8c00"],
[style*="border: 2px solid rgba(255, 140, 0"],
[style*="border:2px solid #ff8c00"] {
  border-color: #232c39 !important;
}
[style*="box-shadow: 0 0 20px"][style*="255, 140, 0"],
[style*="box-shadow: 0 0 15px"][style*="255, 140, 0"] {
  box-shadow: none !important;
}


/* =====================================================================
 *  21. LINK INLINE
 * ===================================================================== */
a { transition: color .2s ease !important; }
p a, .description a, [class*="description"] a {
  color: var(--orange) !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(255,157,47,.3) !important;
  padding-bottom: 1px !important;
}
p a:hover, .description a:hover { border-bottom-color: var(--orange) !important; }


/* =====================================================================
 *  22. ACCESSIBILITÀ — focus visibile + reduce motion
 * ===================================================================== */
a:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible, [role="button"]:focus-visible {
  outline: 2px solid var(--accent-cyan) !important;
  outline-offset: 2px !important;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

/* =====================================================================
 *  23. 🎯 CLASSI REALI DEL SITO — qui si vede davvero il cambiamento
 *  (i nomi veri usati dalle card: .prezzo .versioni .buy-btn .cart-btn
 *   .info-btn .promo-banner .upcoming-banner .color-box)
 * ===================================================================== */

/* Prezzo grande, ambra, in evidenza */
.game-card .prezzo,
.prezzo {
  color: var(--orange) !important;
  font-weight: 800 !important;
  font-size: 1.5rem !important;
  letter-spacing: .005em !important;
  text-shadow: 0 0 18px rgba(255,157,47,.25) !important;
}

/* Riquadro opzioni: pannello vetro scuro */
.game-card .versioni,
.versioni,
.game-card .edition-options,
.edition-options {
  background: rgba(8,11,16,.55) !important;
  border: 1px solid #232c39 !important;
  border-radius: 14px !important;
  padding: 7px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 7px !important;
  overflow: visible !important;
}

/* Ogni opzione = riga selezionabile pulita (tutta la riga è il bottone) */
.versioni label,
.edition-options label {
  display: flex !important;
  align-items: center !important;
  gap: 11px !important;
  padding: 13px 15px !important;
  min-height: 50px !important;
  border-radius: 11px !important;
  border: 1.5px solid #232c39 !important;
  background: #11161f !important;
  cursor: pointer !important;
  font-size: .98rem !important;
  font-weight: 600 !important;
  color: #f2f6fc !important;
  position: relative !important;
  line-height: 1.25 !important;
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .12s ease !important;
}
.versioni label:hover,
.edition-options label:hover {
  background: #161d28 !important;
  border-color: rgba(255,157,47,.5) !important;
  transform: translateY(-1px) !important;
}

/* CERCHIO doppio via: nascondiamo il radio nativo (resta funzionante) e
   teniamo il PALLINO COLORATO come indicatore di tipo/piano (dà vita). */
.versioni input[type="radio"],
.edition-options input[type="radio"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.versioni .color-box,
.edition-options .color-box {
  display: inline-block !important;
  width: 13px !important;
  height: 13px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
  box-shadow: 0 0 0 3px rgba(255,255,255,.04) !important;
  transition: box-shadow .18s ease, transform .18s ease !important;
}

/* RIGA SELEZIONATA: si illumina d'oro + spunta ✓ a destra (il "wow") */
.versioni label:has(input:checked),
.edition-options label:has(input:checked) {
  background: linear-gradient(135deg, rgba(255,157,47,.18), rgba(255,122,0,.06)) !important;
  border-color: rgba(255,157,47,.7) !important;
  box-shadow: 0 0 0 1px rgba(255,157,47,.3), inset 0 1px 16px rgba(255,157,47,.07),
              0 6px 18px -10px rgba(255,157,47,.5) !important;
}
.versioni label:has(input:checked) .color-box,
.edition-options label:has(input:checked) .color-box {
  box-shadow: 0 0 0 3px rgba(255,157,47,.25), 0 0 10px rgba(255,157,47,.4) !important;
  transform: scale(1.12) !important;
}
.versioni label:has(input:checked)::after,
.edition-options label:has(input:checked)::after {
  content: "✓" !important;
  margin-left: auto !important;
  padding-left: 8px !important;
  color: var(--orange) !important;
  font-weight: 900 !important;
  font-size: 1.05rem !important;
  text-shadow: 0 0 10px rgba(255,157,47,.6) !important;
}

/* OPZIONE NON DISPONIBILE: compatta, grigia, lucchetto + testo centrati */
.versioni label.unavailable-option,
.edition-options label.unavailable-option,
label.unavailable-option {
  opacity: .6 !important;
  cursor: not-allowed !important;
  font-size: .84rem !important;
  font-weight: 600 !important;
  letter-spacing: .02em !important;
  color: #6b7686 !important;
  background: #0d1219 !important;
  border-color: #1b222d !important;
  justify-content: center !important;
  gap: 7px !important;
}
.unavailable-option * { pointer-events: none !important; }
.unavailable-option .color-box { display: none !important; }
.unavailable-option::after { content: none !important; }
.unavailable-option .fa-lock { font-size: .85rem !important; color: #6b7686 !important; }

/* BOTTONE COMPRA ORA — il pezzo forte, ambra-oro */
.buy-btn {
  background: linear-gradient(135deg, #ffb259 0%, #ff7a00 100%) !important;
  color: #1a1205 !important;
  border: none !important;
  font-weight: 800 !important;
  letter-spacing: .015em !important;
  border-radius: 12px !important;
  min-height: 48px !important;
  box-shadow: 0 8px 22px -8px rgba(255,122,0,.6) !important;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease !important;
}
.buy-btn:hover {
  transform: translateY(-2px) !important;
  filter: brightness(1.06) !important;
  box-shadow: 0 14px 32px -8px rgba(255,122,0,.75) !important;
}
.buy-btn:active { transform: translateY(0) scale(.98) !important; }

/* CARRELLO — contorno ambra elegante */
.cart-btn {
  background: transparent !important;
  color: var(--orange) !important;
  border: 1.5px solid var(--orange) !important;
  font-weight: 700 !important;
  border-radius: 12px !important;
  min-height: 46px !important;
  transition: background .18s ease, color .18s ease !important;
}
.cart-btn:hover {
  background: rgba(255,157,47,.12) !important;
}

/* INFO — barra blu più discreta e moderna */
.info-btn {
  background: linear-gradient(135deg, #2563a8 0%, #1d4e87 100%) !important;
  color: #eaf2fb !important;
  border: none !important;
  font-weight: 700 !important;
  border-radius: 10px !important;
  min-height: 42px !important;
}

/* BADGE — angolo card */
.promo-banner {
  background: linear-gradient(135deg, #ffb259 0%, #ff7a00 100%) !important;
  color: #1a1205 !important;
  font-weight: 800 !important;
  letter-spacing: .05em !important;
}
.upcoming-banner {
  background: linear-gradient(135deg, #38e1ff 0%, #0288d1 100%) !important;
  color: #04141c !important;
  font-weight: 800 !important;
  letter-spacing: .05em !important;
}

/* Titolo gioco nelle card — un filo più aperto */
.game-card h3 {
  letter-spacing: .01em !important;
  line-height: 1.3 !important;
}


/* =====================================================================
 *  24. 📱 MENU CATEGORIE SU MOBILE (era nascosto!) + fix opzioni che sforano
 * ===================================================================== */
@media (max-width: 768px) {
  /* Il wrapper era display:none → niente menu categorie. Lo riattiviamo
     e lo rendiamo "appiccicato" in alto mentre si scorre (premium). */
  .header-row-3.categories-scroll-wrapper,
  .categories-scroll-wrapper {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 60 !important;
    border-top: 1px solid #1d242f !important;
    border-bottom: 1px solid #1d242f !important;
    background: rgba(11,14,20,.96) !important;
    -webkit-backdrop-filter: blur(12px) saturate(1.2) !important;
    backdrop-filter: blur(12px) saturate(1.2) !important;
    box-shadow: 0 6px 18px -8px rgba(0,0,0,.6) !important;
  }
  .categories-scroll-bar {
    display: flex !important;
    gap: 8px !important;
    padding: 11px 14px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  /* Chip categoria — stile premium, ben toccabili */
  .categories-scroll-bar a {
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 10px 18px !important;
    min-height: 40px !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, rgba(255,157,47,.14), rgba(255,122,0,.08)) !important;
    border: 1.5px solid rgba(255,157,47,.35) !important;
    color: #f2f6fc !important;
    font-weight: 700 !important;
    font-size: .9rem !important;
    white-space: nowrap !important;
    text-decoration: none !important;
  }
  .categories-scroll-bar a:active {
    background: rgba(255,157,47,.28) !important;
  }

  /* Opzioni: testo "Secondario/Primario" su UNA riga; il pallino colore
     resta piccolo, la spunta ✓ a destra segnala la scelta */
  .versioni,
  .edition-options {
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .versioni label,
  .edition-options label {
    width: 100% !important;
    box-sizing: border-box !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    padding: 14px 14px !important;
    font-size: .96rem !important;
    line-height: 1.2 !important;
    gap: 10px !important;
    min-width: 0 !important;
  }

  /* "NON DISPONIBILE": testo centrato, può andare a capo pulito (2 righe) */
  .versioni label.unavailable-option,
  .edition-options label.unavailable-option {
    font-size: .8rem !important;
    letter-spacing: 0 !important;
    white-space: normal !important;
    text-align: center !important;
    line-height: 1.15 !important;
    text-overflow: clip !important;
  }
}


/* =====================================================================
 *  25. ✨ TOCCHI PREMIUM "WOW" — riflessi e profondità (con misura)
 * ===================================================================== */

/* Card: sottile luce in alto premium. NIENTE overflow:hidden, altrimenti
   la fascia "PROSSIMAMENTE" (che sporge dall'angolo per design) viene tagliata. */
.game-card {
  position: relative !important;
  overflow: visible !important;
  isolation: isolate !important;
}
.game-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: 16px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.05), transparent 38%) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}
.game-card > * { position: relative !important; z-index: 1 !important; }
/* la fascia resta sopra a tutto e ben visibile */
.upcoming-banner, .promo-banner { z-index: 5 !important; }

/* "Compra Ora": riflesso che attraversa il bottone al passaggio del dito/mouse */
.buy-btn {
  position: relative !important;
  overflow: hidden !important;
}
.buy-btn::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: -130% !important;
  width: 80% !important;
  height: 100% !important;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,.45), transparent) !important;
  transform: skewX(-18deg) !important;
  transition: left .6s ease !important;
  pointer-events: none !important;
}
.buy-btn:hover::after { left: 140% !important; }

/* Titolo card: bianco premium con leggera ombra per profondità */
.game-card h3 {
  color: #f4f8fd !important;
  font-weight: 800 !important;
  letter-spacing: .01em !important;
  text-shadow: 0 1px 12px rgba(0,0,0,.35) !important;
}

/* Badge PROSSIMAMENTE / PROMO: micro-ombra per "staccarli" dalla copertina */
.upcoming-banner, .promo-banner {
  box-shadow: 0 4px 14px rgba(0,0,0,.45) !important;
}


/* =====================================================================
 *  26. 📐 CARD ALLINEATE — stessa altezza, bottoni in fondo (ordine!)
 * ===================================================================== */
.games-container {
  align-items: stretch !important;   /* tutte le card della riga = stessa altezza */
}
.game-card {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}
/* Titolo sempre su 2 righe: così il prezzo parte alla stessa altezza ovunque */
.game-card h3 {
  min-height: 2.6em !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}
/* Le opzioni occupano lo spazio centrale; i bottoni vanno in fondo allineati */
.versioni, .edition-options { margin-top: 4px !important; }
.info-btn { margin-top: auto !important; }   /* spinge il blocco bottoni in fondo */


/* =====================================================================
 *  PANNELLI CLIENTE — Promozioni / Prossimamente (modale centrale wow)
 * ===================================================================== */

/* Sfondo sfocato dietro al pannello (profondo, con alone caldo al centro) */
#filter-modal-backdrop{
  position:fixed; inset:0; z-index:99990;
  background:
    radial-gradient(120% 90% at 50% 42%, rgba(255,150,40,.10) 0%, rgba(6,10,18,0) 55%),
    rgba(5,8,15,.78);
  -webkit-backdrop-filter:blur(0px); backdrop-filter:blur(0px);
  opacity:0; visibility:hidden;
  transition:opacity .32s ease, visibility .32s ease,
             backdrop-filter .42s ease, -webkit-backdrop-filter .42s ease;
}
#filter-modal-backdrop.show{
  opacity:1; visibility:visible;
  -webkit-backdrop-filter:blur(9px); backdrop-filter:blur(9px);
}

/* Il pannello: centrato, scuro premium, con scroll interno perfetto */
.filter-modal-panel{
  position:fixed !important;
  top:50% !important; left:50% !important;
  transform:translate(-50%,-50%) !important;
  width:min(460px,93vw) !important;
  max-width:93vw !important;
  min-width:0 !important;
  max-height:min(74vh,660px) !important;
  margin:0 !important;
  padding:0 8px 10px !important;
  background:
    radial-gradient(140% 60% at 50% 0%, rgba(255,160,55,.10) 0%, rgba(255,160,55,0) 60%),
    linear-gradient(180deg,#19212f 0%,#0e141f 100%) !important;
  border:1px solid rgba(255,180,80,.34) !important;
  border-radius:22px !important;
  box-shadow:0 36px 90px rgba(0,0,0,.7),
             0 0 0 1px rgba(255,255,255,.04),
             0 0 60px rgba(255,150,40,.20) !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  overscroll-behavior:contain !important;
  -webkit-overflow-scrolling:touch !important;
  z-index:99991 !important;
  color:#fff !important;
  transform-origin:50% 60%;
  animation:filterModalIn .5s cubic-bezier(.16,1,.3,1) both;
}

/* Sottile riga dorata luminosa in cima (tocco premium) */
.filter-modal-panel::after{
  content:"";
  position:absolute; top:0; left:18px; right:18px; height:2px;
  border-radius:2px;
  background:linear-gradient(90deg,rgba(255,210,122,0),#ffd27a 35%,#ff9a3c 65%,rgba(255,154,60,0));
  opacity:.9; pointer-events:none;
}

/* Animazione d'apertura "wow": sale, si schiarisce e l'alone dorato sboccia */
@keyframes filterModalIn{
  0%{
    opacity:0;
    transform:translate(-50%,calc(-50% + 30px)) scale(.93);
    box-shadow:0 14px 36px rgba(0,0,0,.5),
               0 0 0 1px rgba(255,255,255,.03),
               0 0 0 rgba(255,150,40,0);
  }
  55%{ opacity:1; }
  100%{
    opacity:1;
    transform:translate(-50%,-50%) scale(1);
    box-shadow:0 36px 90px rgba(0,0,0,.7),
               0 0 0 1px rgba(255,255,255,.04),
               0 0 60px rgba(255,150,40,.20);
  }
}

/* Chi preferisce meno animazioni: niente movimento */
@media (prefers-reduced-motion: reduce){
  .filter-modal-panel{ animation-duration:.001s; }
  #filter-modal-backdrop{ transition:opacity .15s ease, visibility .15s ease; }
}

/* Intestazione del pannello, resta in cima mentre si scorre */
.filter-modal-head{
  position:sticky; top:0; z-index:5;
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding:16px 8px 12px;
  margin-bottom:4px;
  background:linear-gradient(180deg,#161d2b 70%,rgba(22,29,43,0));
  border-bottom:1px solid rgba(255,255,255,.06);
}
.filter-modal-title{
  font-family:'Oxanium','Segoe UI',sans-serif;
  font-weight:800; font-size:1.12em; letter-spacing:.3px;
  background:linear-gradient(90deg,#ffd27a,#ff9a3c);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
.filter-modal-close{
  flex-shrink:0;
  width:38px; height:38px; border-radius:50%;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  color:#fff; font-size:1.5em; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .18s ease, transform .18s ease;
}
.filter-modal-close:hover,.filter-modal-close:active{
  background:rgba(255,120,40,.25); transform:scale(1.06);
}

/* Voci più ariose e tap-friendly dentro al pannello */
.filter-modal-panel .dropdown-item{
  padding:12px 10px !important;
  border-radius:12px !important;
  margin:2px 0 !important;
  border-bottom:1px solid rgba(255,255,255,.06) !important;
}
.filter-modal-panel .dropdown-item:active{
  background:rgba(255,150,40,.16) !important;
}
.filter-modal-panel .dropdown-item-image{
  width:48px !important; height:48px !important; border-radius:8px !important;
}
/* Titolo del gioco: nitido e leggibile su qualsiasi sfondo (fino a 2 righe) */
.filter-modal-panel .dropdown-item-title{
  font-size:15px !important;
  font-weight:700 !important;
  color:#ffffff !important;
  letter-spacing:.2px !important;
  line-height:1.25 !important;
  white-space:normal !important;
  text-overflow:clip !important;
  text-shadow:0 1px 3px rgba(0,0,0,.7) !important;
  display:-webkit-box !important;
  -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden !important;
}
.filter-modal-panel .dropdown-empty{ padding:34px 16px !important; }

/* Blocca lo scroll della pagina mentre il pannello è aperto */
html.filter-modal-open, body.filter-modal-open{ overflow:hidden !important; }

/* Nasconde la bolla WhatsApp mentre il pannello è aperto (finestra pulita) */
body.filter-modal-open .contact-wa{
  opacity:0 !important; pointer-events:none !important;
  transition:opacity .2s ease !important;
}

/* =====================================================================
 *  OVERRIDE AD ALTA SPECIFICITÀ (ID+classe) — vince sulle vecchie
 *  regole #promo-dropdown/#upcoming-dropdown di style.css, così il
 *  modale resta centrato e premium su DESKTOP e MOBILE (promo + prossimamente).
 * ===================================================================== */
#promo-dropdown.filter-modal-panel,
#upcoming-dropdown.filter-modal-panel{
  position:fixed !important;
  top:50% !important; left:50% !important; right:auto !important; bottom:auto !important;
  transform:translate(-50%,-50%) !important;
  width:min(460px,93vw) !important; max-width:93vw !important; min-width:0 !important;
  max-height:min(74vh,660px) !important;
  padding:0 8px 10px !important;
  background:
    radial-gradient(140% 60% at 50% 0%, rgba(255,160,55,.10) 0%, rgba(255,160,55,0) 60%),
    linear-gradient(180deg,#19212f 0%,#0e141f 100%) !important;
  border:1px solid rgba(255,180,80,.34) !important;
  border-radius:22px !important;
  box-shadow:0 36px 90px rgba(0,0,0,.7),
             0 0 0 1px rgba(255,255,255,.04),
             0 0 60px rgba(255,150,40,.20) !important;
  overflow-y:auto !important; overflow-x:hidden !important;
  z-index:99991 !important;
}

/* Pulsante rimozione (✕) ordinato e tap-friendly, non più enorme */
.filter-modal-panel .dropdown-remove-btn{
  width:34px !important; height:34px !important;
  font-size:18px !important;
  background:rgba(244,67,54,.95) !important;
  box-shadow:0 2px 8px rgba(0,0,0,.4) !important;
  margin-left:8px !important;
}

/* Rifiniture mobile del modale */
@media (max-width:600px){
  #promo-dropdown.filter-modal-panel,
  #upcoming-dropdown.filter-modal-panel{
    width:94vw !important;
    max-height:80vh !important;
    border-radius:20px !important;
  }
  .filter-modal-panel .dropdown-item{ padding:13px 10px !important; }
  .filter-modal-panel .dropdown-item-image{ width:52px !important; height:52px !important; }
  .filter-modal-panel .dropdown-item-title{ font-size:15.5px !important; }
}

/* =====================================================================
 *  OPZIONI DI ACQUISTO — area di tocco ampia e naturale (mobile + desktop)
 * ===================================================================== */
.versioni label,
.edition-options label{
  padding:11px 12px !important;
  min-height:46px !important;
  gap:10px !important;
  font-size:.92em !important;
  border-radius:10px !important;
  -webkit-tap-highlight-color:rgba(255,140,0,.25);
}
.versioni label:active,
.edition-options label:active{
  background:rgba(255,140,0,.22) !important;
}
.versioni input[type="radio"],
.edition-options input[type="radio"]{
  width:20px !important; height:20px !important;
  margin-right:2px !important; flex-shrink:0;
}
.versioni .color-box,
.edition-options .color-box{
  width:13px !important; height:13px !important; flex-shrink:0;
}
/* La riga effettivamente selezionata risalta (browser moderni) */
.versioni label:has(input[type="radio"]:checked),
.edition-options label:has(input[type="radio"]:checked){
  background:rgba(255,140,0,.16) !important;
  border-color:rgba(255,140,0,.65) !important;
  box-shadow:inset 0 0 0 1px rgba(255,140,0,.35) !important;
}
/* Le non disponibili restano chiaramente diverse anche con i nuovi stili */
.versioni label.unavailable-option,
.edition-options label.unavailable-option{
  min-height:auto !important;
  padding:8px 10px !important;
  background:rgba(255,255,255,.05) !important;
}

/* =====================================================================
 *  FINE THEME 2026 — PREMIUM EDITION v3
 * ===================================================================== */