/* Ensure product images are always visible and not distorted */
.product-thumbnail,
.product-details img {
  width: 100%;
  height: auto;
  max-height: 260px;
  object-fit: contain;
  display: block;
}

/* Fallback images should be centered */
.img-fallback { opacity: 0.98; }
/* Reset & font base */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* DARK GAMING MODE - Corpo pagina con sfondo blu scuro gaming */
body {
  background: #0b0e15; /* Blu molto scuro gaming */
  color: #e2e8f0;  /* Testo grigio chiarissimo per alta leggibilità su sfondo scuro */
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
  overflow-x: hidden;
  padding: 0 20px;
}

/* DARK GAMING MODE - Link standard */
a {
  text-decoration: none;
  color: #e2e8f0; /* Testo chiaro per dark mode */
}

a:hover {
  color: #ff6f00; /* Arancione al hover */
}

/* Immagini responsive */
img {
  max-width: 100%;
  height: auto;
  display: block;
}


/* NEON GAMING MODE - Navbar moderna con glassmorphism e bordo neon */
header {
  position: fixed; /* Mantiene l'header fisso in alto */
  top: 0;
  left: 0;
  width: 100%; /* Occupa tutta la larghezza */
  z-index: 9999; /* Lo mette sopra a tutto il resto */
  background: rgba(0, 0, 0, 0.8) !important; /* Sfondo nero semitrasparente */
  backdrop-filter: blur(10px) !important; /* Effetto sfocatura moderno */
  -webkit-backdrop-filter: blur(10px) !important; /* Supporto Safari */
  padding: 10px 20px;
  display: flex;
  align-items: center;
  min-height: 64px;
  transition: box-shadow 0.18s, background 0.22s;
  border-bottom: 2px solid rgba(255, 111, 0, 0.6) !important; /* Sottile linea luminosa arancione neon */
  box-shadow: 0 0 10px rgba(255, 111, 0, 0.3) inset, 
              0 2px 16px rgba(0, 0, 0, 0.5),
              0 0 20px rgba(255, 111, 0, 0.1); /* Glow interno sul bordo + ombra esterna */
}

body {
  padding-top: 86px; /* spazio per header fisso */
}

/* Logo Mr.Account */
.logo {
  font-size: 32px;
  font-weight: bold;
  color: #ff6f00;  /* Arancione CTA per il logo */
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* DARK GAMING MODE - Logo semplice e visibile (stile originale migliorato) */
.logo img,
#main-logo {
  filter: invert(1) brightness(2) !important; /* Stile originale: scritta bianca */
  border-radius: 8px !important; /* Angoli arrotondati */
  transition: filter 0.3s ease, border-radius 0.3s ease !important;
  background: transparent !important; /* Nessun sfondo aggiuntivo */
  padding: 0 !important; /* Nessun padding extra */
}

.logo img:hover,
#main-logo:hover {
  filter: invert(1) brightness(2.2) !important; /* Leggermente più brillante al hover */
}

/* Navigazione header */
/* Navigazione header */
nav {
  display: flex;
  align-items: center;
  gap: 8px; /* Spazio tra i pulsanti di navigazione */
}

/* Navbar links - Bianchi che diventano arancioni al hover */
nav a {
  color: #ffffff !important; /* Bianco puro per massima visibilità */
  font-weight: 600;
  padding: 10px 18px;
  border-radius: 30px; /* Forma a "pillola" per un look moderno */
  transition: all 0.3s ease;
  background-color: transparent;
  border: 2px solid transparent;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap; /* Impedisce al testo di andare a capo */
}

/* Effetto hover - Link diventano arancioni */
nav a:hover {
  background-color: rgba(255, 111, 0, 0.15); /* Arancione trasparente su sfondo scuro */
  border-color: #ff6f00;
  color: #ff6f00 !important; /* Arancione al hover */
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(255, 111, 0, 0.4); /* Ombra arancione più visibile */
}

/* Stile per le icone dentro i link di navigazione */
.nav-icon {
  height: 20px;
  width: auto;
  opacity: 0.7;
  transition: opacity 0.3s;
}

nav a:hover .nav-icon {
  opacity: 1;
}

/* Icona punto di domanda ("Come Funziona?") */
nav a i.fa-question-circle {
  color: #007bff; /* Mantiene il blu che ti piaceva */
  font-size: 1.1em;
  transition: color 0.3s;
}

nav a:hover i.fa-question-circle {
  color: #ff6f00; /* Diventa arancione quando passi sopra, come gli altri */
}

/* Container logo+nav layout */
.logo-nav-container {
  display: flex;
  align-items: center;
  gap: 30px;
}
.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

/* Selettore lingua (globale) */
.language-switcher {
  position: relative;
  z-index: 1000;
}

.lang-btn {
  background: #1f2937 !important;
  border: 1px solid #ddd !important;
  color: #d1d5db !important;
  font-size: 0.95rem !important;
  cursor: pointer;
  display: flex;
  align-items: center;
  border-radius: 20px;
  padding: 6px 12px;
  box-shadow: none !important;
  font-weight: normal !important;
  gap: 6px;
  transition: background 0.2s, border-color 0.2s;
}
.lang-btn i.fas.fa-globe {
  color: #d1d5db !important;
  font-size: 1em;
  margin-right: 4px;
}
.lang-btn:hover {
  background: #374151 !important;
  border-color: #ff8c00 !important;
  color: #ffffff !important;
}


.lang-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  background: #1f2937;
  border-radius: 8px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  display: none;
  width: 150px;
}
.language-switcher[open] .lang-dropdown {
  display: block;
}
.lang-dropdown a {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  color: #ffffff;
  transition: background 0.2s;
  border-bottom: 1px solid #f0f0f0;
}
.lang-dropdown a:hover {
  background: #1f2937;
  color: #1a73e8;
}
.lang-dropdown a:last-child {
  border-bottom: none;
}


/* HERO SECTION - Banner Neon Gaming (PULITO - SOLO TAG IMG) */
.welcome-section[data-keep-welcome="true"] {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important; /* LARGHEZZA 100% - TOCCA I BORDI */
  max-width: 100% !important;
  margin: 0 !important; /* NESSUN MARGINE - TOCCA I BORDI */
  padding: 0 !important; /* NESSUN PADDING - TOCCA I BORDI */
  /* RIMOSSO COMPLETAMENTE: background-image, background-color, background-size, ecc. */
  /* Il contenitore è un semplice box vuoto - solo l'immagine è visibile */
  border-radius: 0 !important; /* NESSUN BORDO ARROTONDATO */
  position: relative !important;
  overflow: visible !important; /* Visibile per mostrare l'immagine completa */
  box-shadow: none !important; /* NESSUNA OMBRA */
  border: none !important; /* Nessun bordo */
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  z-index: 1 !important;
  pointer-events: auto !important;
}

/* IMMAGINE BANNER - TAG IMG REALE (UNICA IMMAGINE VISIBILE) */
.welcome-banner-img {
  width: 100% !important; /* Larghezza 100% - tocca i bordi */
  height: auto !important; /* Altezza automatica - mantiene proporzioni */
  display: block !important; /* Rimuove spazio sotto l'immagine */
  object-fit: contain !important; /* L'immagine si adatta senza tagli */
  object-position: center center !important; /* Centrata */
  margin: 0 !important; /* NESSUN MARGINE - tocca i bordi */
  padding: 0 !important; /* NESSUN PADDING */
  border: none !important; /* Nessun bordo */
  border-radius: 0 !important; /* Nessun bordo arrotondato */
}

/* FORZA RIMOZIONE SFONDO ARANCIONE - Previene flickering */
/* NOTA: background-color è già impostato sopra a #0b0e15 per evitare flickering */

/* Rimuovo il ::before che aggiungeva un overlay SVG */
.welcome-section[data-keep-welcome="true"]::before {
  display: none !important; /* Rimuovo l'overlay SVG */
}

/* .welcome-content non più necessario - ora usiamo tag img diretto */

.welcome-actions {
  margin: 0 auto !important; /* Nessun margine superiore - attaccato al banner */
  padding: 30px 20px !important; /* Padding per spaziatura */
  max-width: 1024px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  background-color: #050b14 !important; /* Sfondo scuro per fondersi con il sito */
  width: 100% !important;
}

/* Pulsanti CTA sotto l'immagine banner */
.welcome-features,
.scroll-btn {
  position: relative;
  z-index: 3;
}

.scroll-btn {
  background: rgba(255, 111, 0, 0.9) !important; /* Sfondo arancione semitrasparente per visibilità */
  color: #ffffff !important; /* BIANCO PURO per leggibilità su sfondo scuro */
  border: 2px solid rgba(255, 255, 255, 0.5) !important; /* Bordo bianco più visibile */
  padding: 12px 24px !important;
  border-radius: 25px !important;
  font-weight: bold !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 15px rgba(255, 140, 0, 0.5), 
              0 0 20px rgba(255, 111, 0, 0.3) !important; /* Effetto neon */
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.scroll-btn span {
  color: #ffffff !important; /* BIANCO PURO per il testo */
}

.scroll-btn i {
  color: #ffffff !important; /* BIANCO PURO per l'icona */
}

.scroll-btn:hover {
  background: rgba(255, 140, 0, 0.95) !important;
  box-shadow: 0 6px 25px rgba(255, 140, 0, 0.7), 
              0 0 30px rgba(255, 111, 0, 0.5) !important; /* Glow neon più intenso */
  transform: translateY(-2px) !important;
  color: #ffffff !important; /* Mantiene bianco al hover */
}

/* DARK DASHBOARD - Features senza box scuro, layout ORIZZONTALE (Desktop) */
.welcome-features {
  background: transparent !important; /* RIMOSSO box scuro/marrone */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 0 !important; /* Rimosso padding pesante */
  border-radius: 0 !important; /* Rimosso border-radius pesante */
  margin: 0 auto !important;
  max-width: 900px !important; /* Aumentato per layout orizzontale */
  display: flex !important;
  flex-direction: row !important; /* ORIZZONTALE su desktop */
  justify-content: center !important;
  align-items: center !important;
  gap: 24px !important; /* Spazio tra i box (gap-6 equivalente) */
  flex-wrap: wrap !important; /* Permette wrap su schermi molto piccoli */
}

.welcome-content h1 {
  font-size: 2.8rem;
  margin-bottom: 20px;
  text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

.welcome-content p {
  font-size: 1.4rem;
  margin-bottom: 30px;
  opacity: 0.9;
}

/* DARK DASHBOARD - Stile HUD Gamer per singoli elementi feature */
.welcome-features .feature {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.3rem !important; /* Font leggermente più grande */
  background: rgba(0, 0, 0, 0.3) !important; /* Sfondo nero semitrasparente leggero */
  backdrop-filter: blur(8px) !important; /* Effetto vetro moderno */
  -webkit-backdrop-filter: blur(8px) !important;
  padding: 14px 28px !important; /* Padding aumentato */
  border-radius: 12px !important; /* Border-radius più moderno */
  color: #ffffff !important; /* BIANCO PURO LUMINOSO */
  font-weight: 600 !important; /* Font più audace */
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.5), 
               0 0 20px rgba(255, 140, 0, 0.3) !important; /* Glow bianco + arancione */
  transition: all 0.3s ease !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important; /* Bordo sottile bianco */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3), 
              0 0 20px rgba(255, 140, 0, 0.2) !important; /* Ombra + glow arancione */
}

@media (max-width: 768px) {
  .welcome-actions {
    gap: 14px;
    padding: 0 12px;
  }
  .welcome-features {
    flex-direction: column !important;
    gap: 14px !important;
    align-items: center !important;
    width: 100% !important;
  }
  .welcome-features .feature {
    width: 100% !important;
    justify-content: center !important;
  }
}

.welcome-actions .scroll-btn {
  background: rgba(0, 0, 0, 0.32) !important;
  border: 1px solid rgba(255, 140, 0, 0.7) !important;
  box-shadow: 0 4px 18px rgba(255, 140, 0, 0.4), 0 0 16px rgba(255, 140, 0, 0.3) !important;
  padding: 12px 26px !important;
}

.welcome-actions .scroll-btn:hover {
  background: rgba(255, 140, 0, 0.2) !important;
  border-color: #ffb347 !important;
}

/* === DARK MODE FIX: LOGHI SEZIONI PRINCIPALI === */
/* Pulisce contenitore logo sezione */
.section-title-image {
  background: none !important;
  filter: none !important;
  background-image: none !important;
}
/* Mostra solo il logo PNG originale */
.section-main-logo {
  filter: none !important;
  mix-blend-mode: normal !important;
  background: transparent !important;
  display: block;
  background-image: none !important;
}

/* Elimina qualsiasi background residuo sui contenitori header delle sezioni */
.section-header,
.section-header * {
  background: none !important;
  background-image: none !important;
}

/* === DARK MODE FIX: SORT BAR === */
.sort-filter {
  background: #1f2937 !important;
  color: #ffffff !important;
  border: 1px solid #374151 !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35) !important;
}
.sort-filter label {
  color: #ffffff !important;
}
.sort-select {
  background: #111827 !important;
  color: #ffffff !important;
  border: 1px solid #374151 !important;
  box-shadow: inset 0 0 0 1px rgba(55,65,81,0.6) !important;
  padding-right: 45px !important;
  background-position: right 15px center !important;
  background-repeat: no-repeat !important;
}
.sort-select option {
  background: #111827;
  color: #ffffff;
}
.sort-select:focus {
  outline: 2px solid #ff8c00 !important;
  outline-offset: 2px;
}

/* === DARK MODE FIX: GESTIONE PROMO/PROSSIMAMENTE (ADMIN) === */
#mp-promo-actions,
#mp-promo-dropdown,
#mp-upcoming-dropdown,
#dynamic-promo-dropdown {
  background: #0f1419 !important;
  border: 1px solid #1f2937 !important;
  color: #ffffff !important;
}
#mp-promo-actions h4 {
  color: #ffffff !important;
}
#mp-promo-dropdown *,
#mp-upcoming-dropdown *,
#dynamic-promo-dropdown * {
  color: #ffffff !important;
}

/* === DARK MODE FIX: FILTRI PROMO / UPCOMING === */
.filter-btn {
  background: #111827 !important;
  color: #ffffff !important;
  border: 1px solid #374151 !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25) !important;
}
.filter-btn i,
.filter-btn span,
.filter-btn .badge,
.filter-btn .count {
  color: #ffffff !important;
}
#filter-promo-btn {
  border-color: #ff8c00 !important;
}
#filter-upcoming-btn {
  border-color: #4f46e5 !important;
}

.welcome-features .feature:hover {
  background: rgba(0, 0, 0, 0.4) !important; /* Sfondo leggermente più scuro al hover */
  transform: translateY(-3px) !important; /* Leggero sollevamento */
  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.4), 
              0 0 30px rgba(255, 140, 0, 0.4) !important; /* Glow più intenso al hover */
  border-color: rgba(255, 140, 0, 0.5) !important; /* Bordo arancione al hover */
}

.welcome-features .feature span {
  color: #ffffff !important; /* BIANCO PURO LUMINOSO */
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.5), 
               0 0 20px rgba(255, 140, 0, 0.3) !important; /* Glow per testo */
}

.welcome-features .feature i {
  color: #ff8c00 !important; /* ARANCIONE NEON per icone */
  font-size: 1.4rem !important; /* Icone leggermente più grandi */
  text-shadow: 0 0 15px rgba(255, 140, 0, 0.6), 
               0 0 25px rgba(255, 140, 0, 0.4) !important; /* Glow arancione intenso per icone */
  filter: drop-shadow(0 0 8px rgba(255, 140, 0, 0.8)) !important; /* Glow aggiuntivo */
}

.welcome-features .feature:hover i {
  color: #ffaa00 !important; /* Arancione più chiaro al hover */
  text-shadow: 0 0 20px rgba(255, 170, 0, 0.8), 
               0 0 35px rgba(255, 140, 0, 0.6) !important; /* Glow più intenso al hover */
}

/* Rimossa definizione duplicata - usa quella sopra con effetto neon (riga 269) */

/* Rimozione forzata vecchio banner/welcome (solo quelli senza data-keep-welcome) */
.welcome-section:not([data-keep-welcome="true"]),
section#welcome:not([data-keep-welcome="true"]),
section#welcome-banner:not([data-keep-welcome="true"]),
section[class*="welcome-banner"]:not([data-keep-welcome="true"]),
section[data-section="welcome"]:not([data-keep-welcome="true"]),
div[class*="welcome-banner"]:not([data-keep-welcome="true"]) {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Assicura che il welcome con data-keep-welcome abbia i pseudo-elementi */
.welcome-section[data-keep-welcome="true"]::before,
.welcome-section[data-keep-welcome="true"]::after {
  display: none !important;
  content: none !important;
  background: transparent !important;
}

.welcome-section:not([data-keep-welcome="true"])::before,
.welcome-section:not([data-keep-welcome="true"])::after {
  display: none !important;
  content: none !important;
}

/* Guard rail anti-banner - ESCLUSI quelli con data-keep-welcome */
body.no-welcome-banner > [class*="welcome"]:not([data-keep-welcome="true"]),
body.no-welcome-banner > [id*="welcome"]:not([data-keep-welcome="true"]),
body.no-welcome-banner > [data-section*="welcome"]:not([data-keep-welcome="true"]),
body.no-welcome-banner > [data-banner*="welcome"]:not([data-keep-welcome="true"]),
body.no-welcome-banner > [data-welcome]:not([data-keep-welcome="true"]),
body.no-welcome-banner .welcome-section:not([data-keep-welcome="true"]),
body.no-welcome-banner .welcome-features:not([data-keep-welcome="true"]),
body.no-welcome-banner [data-component="welcome"]:not([data-keep-welcome="true"]),
header + .welcome-section:not([data-keep-welcome="true"]),
header + .welcome-banner:not([data-keep-welcome="true"]),
header + section[class*="welcome"]:not([data-keep-welcome="true"]),
header + div[class*="welcome"]:not([data-keep-welcome="true"]),
header + section[data-section*="welcome"]:not([data-keep-welcome="true"]),
header + div[data-section*="welcome"]:not([data-keep-welcome="true"]),
header + *[data-banner="welcome"]:not([data-keep-welcome="true"]),
header + *[data-hero="welcome"]:not([data-keep-welcome="true"]) {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  pointer-events: none !important;
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
}

/* PROTEZIONE DEFINITIVA - Forza visibilità in QUALSIASI contesto */
body.no-welcome-banner .welcome-section[data-keep-welcome="true"],
body .welcome-section[data-keep-welcome="true"],
header + .welcome-section[data-keep-welcome="true"],
.welcome-section[data-keep-welcome="true"],
section.welcome-section[data-keep-welcome="true"],
div.welcome-section[data-keep-welcome="true"],
* .welcome-section[data-keep-welcome="true"],
* > .welcome-section[data-keep-welcome="true"] {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  margin: 20px 15px !important;
  padding: 60px 20px !important;
  overflow: visible !important;
  position: relative !important;
  left: auto !important;
  width: auto !important;
  pointer-events: auto !important;
  border: none !important;
  /* RIMOSSO: background-image - ora usiamo tag img diretto */
  /* background-size, background-position, background-repeat rimossi */
  background-color: transparent !important; /* Nessun colore solido: evita flash arancioni */
  color: white !important;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5) !important; /* Ombra scura */
  z-index: 1 !important;
  max-width: none !important;
  min-height: auto !important;
  transform: none !important;
  clip: auto !important;
  clip-path: none !important;
}

/* Protezione anche per elementi interni */
.welcome-section[data-keep-welcome="true"] * {
  visibility: visible !important;
  opacity: 1 !important;
  display: revert !important;
}

/* Protezione contro classi che nascondono */
.welcome-section[data-keep-welcome="true"].hidden,
.welcome-section[data-keep-welcome="true"].d-none,
.welcome-section[data-keep-welcome="true"].invisible,
.welcome-section[data-keep-welcome="true"][style*="display: none"],
.welcome-section[data-keep-welcome="true"][style*="display:none"] {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

header + *[style*="#FF8C00"],
header + *[style*="#ff8c00"],
header + *[style*="#FF4E00"],
header + *[style*="#ff4e00"],
header + *[style*="#ff6f00"],
header + *[style*="linear-gradient(45deg, #FF4E00, #FF8C00)"],
header + *[style*="linear-gradient(135deg, #FF8C00, #FF6F00)"],
header ~ section:first-of-type,
header ~ div:first-of-type,
header ~ *:first-of-type {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none !important;
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
}

/* Nascondi qualsiasi elemento con gradiente arancione nel background */
*[style*="background"]:has([style*="#FF8C00"]),
*[style*="background"]:has([style*="#ff8c00"]),
*[style*="background"]:has([style*="#FF4E00"]),
*[style*="background"]:has([style*="#ff4e00"]),
*[style*="background"]:has([style*="#ff6f00"]) {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  pointer-events: none !important;
}

/* Bottone "Sfoglia i giochi" */
/* Rimossa definizione duplicata - usa quella sopra con effetto neon (riga 269) */

/* Bottone "Non trovi il gioco?" fisso a sinistra */
.richiesta-btn {
  position: fixed;
  bottom: 30px;
  left: 20px;
  background: linear-gradient(135deg, #007bff, #0056b3);
  color: #fff;
  border: 2px solid white;
  padding: 12px 20px;
  border-radius: 30px;
  cursor: pointer;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 15px rgba(0, 86, 179, 0.4);
  z-index: 9998;
  transition: all 0.3s ease;
  animation: pulse-blue 2.5s infinite;
  visibility: visible;
  opacity: 1;
}

.richiesta-btn:hover {
  background: linear-gradient(135deg, #0056b3, #007bff);
  transform: translateY(-2px) scale(1.05); /* Leggero ingrandimento */
  box-shadow: 0 6px 20px rgba(0, 86, 179, 0.5);
  animation-play-state: paused; /* Ferma l'animazione al passaggio del mouse */
}

/* Animazione per il pulsante di richiesta */
@keyframes pulse-blue {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 123, 255, 0.7);
  }
  70% {
    box-shadow: 0 0 0 12px rgba(0, 123, 255, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0, 123, 255, 0);
  }
}

/* Popup richiesta gioco */
.richiesta-popup {
  display: none;
  position: fixed;
  bottom: 90px;
  left: 20px;
  background: #1f2937;
  padding: 20px;
  border-radius: 15px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
  width: 300px;
  z-index: 100;
}
.richiesta-popup h3 {
  margin-top: 0;
  color: #ffffff;
}
.richiesta-popup p {
  color: #666;
}
.richiesta-popup form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.richiesta-popup input[type="text"] {
  padding: 10px;
  border: 1px solid #374151;
  border-radius: 5px;
  font-size: 1rem;
  background: #111827;
  color: #ffffff;
}
.richiesta-popup input[type="text"]:focus {
  border-color: #ff8c00;
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 140, 0, 0.2);
}
.richiesta-popup button[type="submit"] {
  background: linear-gradient(135deg, #ff8c00, #ff6f00);
  color: #fff;
  border: none;
  padding: 12px;
  border-radius: 5px;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background 0.3s;
}
.richiesta-popup button[type="submit"]:hover {
  background: linear-gradient(135deg, #ff6f00, #ff8c00);
}
.close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #999;
}

/* Sezione console (Switch/PS5) */
.console-buttons {
  display: flex;
  justify-content: center;
  gap: 30px;
  margin: 40px 0;
  flex-wrap: wrap;
}
.console-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  text-decoration: none;
  width: 200px;
  padding: 25px;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}
.console-btn:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}
.console-btn img {
  height: 70px;
  margin-bottom: 15px;
  filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.3));
}
.console-btn span {
  font-size: 1.1rem;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.5px;
}

/* Effetto colore on-hover console specifiche */
.switch-btn::before, .ps5-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.switch-btn::before {
  background: linear-gradient(135deg, rgba(230, 0, 18, 0.1) 0%, rgba(230, 0, 18, 0.05) 100%);
}
.switch-btn:hover::before {
  opacity: 1;
}
.ps5-btn::before {
  background: linear-gradient(135deg, rgba(0, 87, 187, 0.1) 0%, rgba(0, 87, 187, 0.05) 100%);
}
.ps5-btn:hover::before {
  opacity: 1;
}

/* Titoli sezioni giochi */
.section-title {
  font-size: 2rem;
  color: #ff8c00;
  text-align: center;
  margin: 20px 0;
  position: relative;
  text-shadow: 0 0 5px rgba(255, 140, 0, 0.3);
}
.section-title::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 4px;
  background: linear-gradient(to right, #ff8c00, #ff0000, #ff8c00);
  border-radius: 4px;
}

/* Contenitore griglia giochi */
.games-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 280px));
  gap: 20px;
  justify-content: center;
  justify-items: center;
  max-width: 100%;
}

/* GLASSMORPHISM GAMING MODE - Card di ogni gioco */
.game-card {
  position: relative;
  width: 250px;
  max-width: 280px;
  background: rgba(31, 41, 55, 0.7); /* Glassmorphism: grigio scuro/blu semitrasparente */
  backdrop-filter: blur(10px); /* Effetto glassmorphism */
  -webkit-backdrop-filter: blur(10px); /* Supporto Safari */
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
  overflow: visible;
  transition: all 0.3s ease;
  border: 1px solid rgba(100, 150, 255, 0.3); /* Bordo blu neon appena accennato */
  margin: 0 auto;
}
.game-card:hover {
  transform: translateY(-10px) scale(1.03);
  box-shadow: 0 15px 35px rgba(138, 43, 226, 0.6), 
              0 0 30px rgba(100, 150, 255, 0.4); /* Effetto glow blu/viola al hover */
  border-color: rgba(100, 150, 255, 0.6); /* Bordo blu neon più visibile al hover */
  background: rgba(31, 41, 55, 0.85); /* Sfondo leggermente più opaco al hover */
}
.game-card img,
.game-card .game-image {
  width: 100%;
  height: 200px;
  min-height: 200px;
  object-fit: contain;
  display: block;
  padding: 8px;
  background: rgba(15, 20, 25, 0.5); /* Sfondo semitrasparente per glassmorphism */
  transition: transform 0.4s ease;
  border-radius: 8px 8px 0 0;
}
.game-card:hover img {
  transform: scale(1.05);
}
/* DARK GAMING MODE - Titoli dei giochi in grassetto e bianco puro */
.game-card h3 {
  color: #ffffff !important; /* Bianco puro per massima leggibilità */
  font-weight: 700 !important; /* Grassetto */
  font-size: 1.05rem;
  margin: 8px 12px 4px;
  min-height: 35px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.3s;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7); /* Ombra più scura per migliore leggibilità */
}
.game-card:hover h3 {
  color: #ffffff !important; /* Mantiene bianco puro anche al hover */
  text-shadow: 0 2px 8px rgba(138, 43, 226, 0.6); /* Glow viola al hover */
}

/* Stile per le opzioni di acquisto (versioni) */
.versioni, .edition-options {
  padding: 0 12px 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
  max-width: 100%;
  overflow: hidden;
}

/* DARK GAMING MODE - Input Radio (Offline/Online) con sfondo scuro */
.versioni label, .edition-options label {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  font-size: 0.8em;
  padding: 5px 6px;
  border-radius: 4px;
  transition: background 0.3s;
  background: #1f2937 !important; /* Grigio molto scuro invece di bianco */
  color: #ffffff !important; /* Testo bianco per contrasto */
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  border: 1px solid rgba(255, 255, 255, 0.1); /* Bordo sottile per definizione */
}

.versioni label:hover, .edition-options label:hover {
  background: rgba(255, 140, 0, 0.3) !important; /* Arancione trasparente al hover */
  color: #ffffff !important; /* Mantiene bianco al hover */
  border-color: rgba(255, 140, 0, 0.5); /* Bordo arancione al hover */
}

.versioni input[type="radio"], .edition-options input[type="radio"] {
  accent-color: #ff8c00;
  width: 14px;
  height: 14px;
  margin-right: 4px;
}

.color-box {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.color-box.red { background-color: #f44336; }
.color-box.blue { background-color: #2196F3; }
.color-box.green { background-color: #4CAF50; }
.color-box.orange { background-color: #FF9800; }
.color-box.purple { background-color: #9c27b0; } /* Aggiunto per CapCut */

/* Stili per opzioni non disponibili */
/* DARK GAMING MODE - Opzioni non disponibili con sfondo scuro */
.unavailable-option {
  opacity: 0.5 !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px dashed #666 !important;
  color: #888 !important;
  cursor: not-allowed !important;
  white-space: normal !important;
  text-overflow: unset !important;
  overflow: visible !important;
  min-height: auto !important;
  padding: 6px 8px !important;
}

.unavailable-option:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  color: #888 !important;
  cursor: not-allowed !important;
}

.unavailable-option input[type="radio"] {
  display: none !important;
    cursor: not-allowed !important;
    opacity: 0.5;
}

.unavailable-option .color-box {
  display: none !important;
    opacity: 0.4;
}

.info-btn {
  display: block;
  width: 100%;
  padding: 8px;
  background: linear-gradient(135deg, #1976d2, #0d47a1);
  color: #fff;
  text-align: center;
  border: none;
  cursor: pointer;
  font-weight: bold;
  font-size: 0.85rem;
  letter-spacing: 0.3px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  transition: background 0.3s;
}
.info-btn:hover {
  background: linear-gradient(135deg, #0d47a1, #1976d2);
}
/* NEON GAMING MODE - Pulsante "Compra Ora" con effetto neon */
.buy-btn {
  display: block;
  width: 100%;
  padding: 10px;
  background: linear-gradient(135deg, #ff8c00, #ff6f00);
  color: #fff;
  text-align: center;
  border: none;
  cursor: pointer;
  font-weight: bold;
  font-size: 0.9rem;
  border-radius: 12px; /* Bordi arrotondati moderni */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(255, 140, 0, 0.4), 
              0 0 20px rgba(255, 111, 0, 0.3); /* Effetto neon/bagliore arancione */
  position: relative;
  overflow: hidden;
}
.buy-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.5s;
}
.buy-btn:hover::before {
  left: 100%;
}
.buy-btn:hover {
  background: linear-gradient(135deg, #ff6f00, #ff8c00);
  box-shadow: 0 6px 25px rgba(255, 140, 0, 0.6), 
              0 0 30px rgba(255, 111, 0, 0.5); /* Glow neon più intenso al hover */
  transform: translateY(-2px);
}
/* DARK GAMING MODE - Prezzo con colore oro brillante */
.prezzo {
  color: #FFD700 !important; /* Oro brillante per massima visibilità */
  font-weight: bold;
  text-align: center;
  margin: 6px 0;
  font-size: 1.3rem !important; /* Aumentato da 1.1rem a 1.3rem */
  text-shadow: 0 2px 6px rgba(255, 215, 0, 0.6), 
               0 0 10px rgba(255, 215, 0, 0.4); /* Ombra dorata per effetto glow */
}

/* Banner PROMOZIONE (ora con lo stesso stile di Prossimamente) */
.promo-banner {
  position: absolute;
  top: 32px;
  right: -45px;
  background-color: #d32f2f; /* Mantenuto il colore Rosso/Arancione */
  color: white;
  padding: 5px 30px;
  font-size: 0.9em;
  font-weight: bold;
  text-transform: uppercase;
  transform: rotate(45deg);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  z-index: 3;
  text-align: center;
  width: 200px;
  overflow: hidden;
}

/* DARK GAMING MODE - Finestra modale info gioco */
.info-box {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #111827 !important; /* Sfondo scuro */
  backdrop-filter: blur(10px) !important; /* Effetto sfocatura hi-tech */
  -webkit-backdrop-filter: blur(10px) !important; /* Supporto Safari */
  border-radius: 20px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6), 
              0 0 30px rgba(255, 140, 0, 0.2) !important; /* Ombra scura + glow arancione */
  display: none;
  z-index: 10000;
  width: 90%;
  max-width: 600px;
  max-height: 80vh;
  overflow-y: auto;
  padding: 25px !important; /* Padding aumentato */
  border: 2px solid rgba(255, 140, 0, 0.5) !important; /* Bordo luminoso arancione */
}

/* Header modale */
.info-box-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 2px solid rgba(255, 140, 0, 0.4) !important; /* Bordo arancione */
}

/* Titolo principale: grande, grassetto, bianco */
.info-box-title {
  font-size: 2rem !important; /* Aumentato da 1.5rem */
  color: #ffffff !important; /* Bianco puro */
  font-weight: 700 !important; /* Grassetto */
  text-shadow: 0 2px 8px rgba(255, 140, 0, 0.3); /* Leggero glow arancione */
  margin: 0;
}

/* Pulsante chiusura: bianco brillante o arancione, ben visibile */
.info-box .close-btn {
  position: static !important; /* Usa il flex layout dell'header invece di position */
  background: rgba(255, 140, 0, 0.2) !important; /* Sfondo arancione semitrasparente */
  border: 2px solid rgba(255, 140, 0, 0.6) !important; /* Bordo arancione */
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  font-size: 24px !important;
  cursor: pointer;
  color: #ff8c00 !important; /* Arancione brillante */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.3s ease;
  flex-shrink: 0;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  font-weight: 700 !important; /* Grassetto per la X */
}

/* Assicura che il pulsante abbia il contenuto "×" se non presente */
.info-box .close-btn:empty::before {
  content: "×" !important;
  display: block;
  font-size: 28px !important;
  line-height: 1;
}

.info-box .close-btn:hover {
  background: #ff8c00 !important; /* Sfondo arancione solido al hover */
  color: #ffffff !important; /* Testo bianco al hover */
  border-color: #ff8c00 !important;
  transform: scale(1.1) !important; /* Leggero zoom */
  box-shadow: 0 0 15px rgba(255, 140, 0, 0.6) !important; /* Glow arancione */
}

/* Contenuto modale */
.info-box-content {
  color: #d1d5db !important; /* Grigio chiaro per testo generale */
}

/* Metadati (Categoria, Anno, Popolarità): grigio chiaro */
.info-box-content p {
  color: #d1d5db !important; /* Grigio chiaro per leggibilità */
  font-size: 1rem;
  line-height: 1.6;
  margin: 10px 0;
}

.info-box-content p strong {
  color: #ffffff !important; /* Etichette in bianco per contrasto */
  font-weight: 600;
}

/* Immagine gioco */
.info-box-content img {
  border: 2px solid rgba(255, 140, 0, 0.3) !important; /* Bordo arancione sottile */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5) !important; /* Ombra scura */
}

/* DARK GAMING MODE - Info Software */
.software-info {
  margin: 20px 0 !important;
}

.software-info-content {
  white-space: pre-line !important;
  font-family: Arial, sans-serif !important;
  line-height: 1.6 !important;
  color: #d1d5db !important; /* Grigio chiaro per leggibilità */
  padding: 20px !important;
  background: #1f2937 !important; /* Dark gray/blue per contrasto con sfondo modale */
  border-radius: 12px !important;
  margin: 15px 0 !important;
  border: 1px solid rgba(100, 150, 255, 0.3) !important; /* Bordo blu neon sottile */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

/* Titoli dentro software-info */
.software-info-content h3,
.software-info-content h4,
.software-info-content h5,
.software-info-content strong {
  color: #ffffff !important; /* Bianco puro per titoli */
  font-weight: 700 !important; /* Grassetto */
  margin-top: 15px !important;
  margin-bottom: 10px !important;
}

.software-info-content h3:first-child,
.software-info-content h4:first-child,
.software-info-content h5:first-child {
  margin-top: 0 !important;
}

/* Paragrafi e testo normale */
.software-info-content p {
  color: #d1d5db !important; /* Grigio chiaro */
  margin: 10px 0 !important;
  line-height: 1.6 !important;
}

/* Liste */
.software-info-content ul,
.software-info-content ol {
  color: #d1d5db !important; /* Grigio chiaro */
  margin: 10px 0 !important;
  padding-left: 25px !important;
}

.software-info-content li {
  color: #d1d5db !important; /* Grigio chiaro */
  margin: 8px 0 !important;
  line-height: 1.6 !important;
}

.software-info-content li strong {
  color: #ffffff !important; /* Bianco per strong dentro liste */
}

/* Emoji e icone - assicura che siano visibili */
.software-info-content {
  font-size: 1rem !important;
}

/* Sezione "Opzioni disponibili" */
.software-info-content h4,
.software-info-content h5 {
  color: #ffffff !important; /* Bianco puro */
  font-size: 1.3rem !important;
  font-weight: 700 !important;
  margin-top: 25px !important;
  margin-bottom: 15px !important;
  padding-bottom: 10px !important;
  border-bottom: 1px solid rgba(255, 140, 0, 0.3) !important; /* Bordo arancione sottile */
}

/* Voci elenco (Privato/Condiviso) */
.software-info-content ul li,
.software-info-content ol li {
  color: #d1d5db !important; /* Grigio chiaro */
}

/* Hover effect per migliorare l'interattività */
.software-info-content:hover {
  border-color: rgba(255, 140, 0, 0.5) !important; /* Bordo arancione più visibile al hover */
  box-shadow: 0 6px 20px rgba(255, 140, 0, 0.2) !important; /* Glow arancione al hover */
}

/* Container delle card delle edizioni */
.edition-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px; /* Gap aumentato */
  margin-top: 25px;
}

/* Box opzioni (Versione Offline/Online): sfondo grigio scuro */
.edition-card {
  background: #1f2937 !important; /* Grigio scuro per contrasto */
  border-radius: 12px !important; /* Bordi arrotondati */
  padding: 20px !important; /* Padding aumentato */
  border: 1px solid rgba(100, 150, 255, 0.3) !important; /* Bordo blu neon sottile */
  transition: all 0.3s ease;
}

.edition-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(255, 140, 0, 0.4), 
              0 0 15px rgba(255, 140, 0, 0.2) !important; /* Glow arancione al hover */
  border-color: rgba(255, 140, 0, 0.6) !important; /* Bordo arancione al hover */
}

/* Header delle edizioni */
.edition-header {
  display: flex;
  align-items: center;
  gap: 12px; /* Gap aumentato */
  margin-bottom: 12px;
}

/* Pallini colorati brillanti */
.color-box {
  width: 24px !important; /* Leggermente più grandi */
  height: 24px !important;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 10px currentColor, 
              0 0 20px currentColor !important; /* Glow colorato brillante */
  flex-shrink: 0;
}

/* Colori brillanti per i pallini */
.red { 
  background: linear-gradient(135deg, #ff4444, #cc0000) !important; /* Rosso brillante */
  box-shadow: 0 0 10px rgba(255, 68, 68, 0.8), 
              0 0 20px rgba(255, 68, 68, 0.4) !important;
}

.blue { 
  background: linear-gradient(135deg, #00d4ff, #0099cc) !important; /* Ciano brillante */
  box-shadow: 0 0 10px rgba(0, 212, 255, 0.8), 
              0 0 20px rgba(0, 212, 255, 0.4) !important;
}

.green { 
  background: linear-gradient(135deg, #00ff88, #00cc66) !important; /* Verde brillante */
  box-shadow: 0 0 10px rgba(0, 255, 136, 0.8), 
              0 0 20px rgba(0, 255, 136, 0.4) !important;
}

/* Titoli delle opzioni: bianco grassetto */
.edition-name {
  font-size: 1.2rem !important; /* Leggermente aumentato */
  font-weight: 700 !important; /* Grassetto */
  color: #ffffff !important; /* Bianco puro */
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.edition-name strong {
  color: #ffffff !important; /* Mantiene bianco anche per strong */
}

/* Descrizioni: grigio chiaro */
.edition-description {
  font-size: 0.95rem;
  line-height: 1.6; /* Line-height aumentato per leggibilità */
  color: #9ca3af !important; /* Grigio chiaro come richiesto */
}

.edition-description strong {
  color: #ffffff !important; /* Strong in bianco per contrasto */
}

/* Contatore vendite e sezione trust */
/* DARK GAMING MODE - Barra statistiche sospesa con glassmorphism */
.sales-counter {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  background: rgba(17, 24, 39, 0.8) !important; /* Grigio scuro semitrasparente */
  backdrop-filter: blur(8px) !important; /* Effetto sfocatura */
  -webkit-backdrop-filter: blur(8px) !important; /* Supporto Safari */
  padding: 25px 30px !important; /* Spazio interno aumentato */
  margin: 40px 15px;
  border-radius: 20px !important; /* Bordi molto arrotondati (rounded-xl) */
  font-size: 1.1rem;
  flex-wrap: wrap;
  text-align: center;
  border: 1px solid rgba(255, 140, 0, 0.4) !important; /* Bordo sottile con accento arancione */
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 
              0 0 20px rgba(255, 140, 0, 0.1); /* Ombra scura + leggero glow arancione */
}

.counter-item {
  display: flex;
  align-items: center;
  gap: 12px; /* Gap aumentato per migliore spaziatura */
}

/* Icone brillanti e più grandi */
.counter-item i {
  font-size: 2.5rem !important; /* Aumentato da 2rem a 2.5rem */
  transition: transform 0.3s ease, filter 0.3s ease;
}

.counter-item:hover i {
  transform: scale(1.1); /* Leggero zoom al hover */
  filter: drop-shadow(0 0 8px currentColor); /* Glow colorato al hover */
}

/* Icone colorate brillanti per dark mode */
.sales-counter .fa-gamepad {
  color: #ff8c00 !important; /* Arancione brillante invece di verde */
}

.sales-counter .fa-users {
  color: #00d4ff !important; /* Ciano brillante per icona utenti */
}

.sales-counter .fa-lock {
  color: #00d4ff !important; /* Ciano brillante */
}

.sales-counter .fa-star {
  color: #ffd700 !important; /* Oro brillante (mantenuto) */
}

/* Numeri grandi, grassetti e arancioni/bianchi */
.count {
  font-weight: 700 !important; /* Grassetto */
  font-size: 2.2rem !important; /* Aumentato da 1.6rem a 2.2rem per maggiore impatto */
  color: #ff8c00 !important; /* Arancione brillante */
  text-shadow: 0 2px 8px rgba(255, 140, 0, 0.4); /* Ombra arancione per effetto glow */
  display: block;
  line-height: 1.2;
}

/* Etichette grigio chiaro per leggibilità */
.counter-item p {
  color: #d1d5db !important; /* Grigio chiaro per massima leggibilità */
  font-size: 0.95rem;
  margin: 8px 0 0 0 !important; /* Margine superiore per separare dal numero */
  font-weight: 500;
}

/* Footer */
footer {
  padding: 30px 20px;
  background: #1f2937;
  text-align: center;
}
.newsletter {
  margin-bottom: 20px;
}
.newsletter h3 {
  font-size: 1.3rem;
  margin-bottom: 10px;
}
#newsletter-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 300px;
  margin: 0 auto;
}
#newsletter-email {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 1rem;
}
#newsletter-form button[type="submit"] {
  padding: 10px;
  border: none;
  border-radius: 5px;
  background: #ff8c00;
  color: #fff;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.3s;
}
#newsletter-form button[type="submit"]:hover {
  background: #e67600;
}
#newsletter-msg {
  font-size: 0.9rem;
  color: #28a745;
  margin-top: 5px;
}
.footer-info p {
  font-size: 0.9rem;
  color: #555;
}
.footer-info a {
  color: #2196F3;
}

/* Pulsante contatto (WhatsApp) */
.contact-wa__btn,
.whatsapp-btn {
  position: relative !important;
  background: #25d366 !important;
  border-radius: 50% !important;
  box-shadow: 0 8px 32px #25d36699, 0 1.5px 3px #0002 !important;
  padding: 16px !important;
  transition: box-shadow 0.3s, transform 0.2s !important;
  animation: whatsapp-pop 1.3s infinite cubic-bezier(.64,1.59,.11,.81) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  visibility: visible !important;
  opacity: 1 !important;
  flex-shrink: 0 !important;
  width: auto !important;
  height: auto !important;
}

.contact-wa__btn img,
.whatsapp-btn img {
  width: 40px;
  height: 40px;
  transition: filter 0.3s, transform 0.2s;
  filter: drop-shadow(0 0 5px #25d366bb);
}

.contact-wa__btn:hover,
.contact-wa__btn:focus,
.whatsapp-btn:hover,
.whatsapp-btn:focus {
  box-shadow: 0 0 36px #25d366, 0 1.5px 3px #0002;
  transform: scale(1.11) rotate(-5deg);
  background: #1ebe54;
}

.contact-wa__btn:hover img,
.contact-wa__btn:focus img,
.whatsapp-btn:hover img,
.whatsapp-btn:focus img {
  filter: drop-shadow(0 0 12px #fff) brightness(1.2);
  transform: scale(1.14) rotate(8deg);
}

@keyframes whatsapp-pop {
  0%, 100% { transform: scale(1);}
  40%     { transform: scale(1.16) rotate(-7deg);}
  70%     { transform: scale(1.09) rotate(4deg);}
}

/* Container WhatsApp con testo */
.contact-wa,
.whatsapp-container {
  position: fixed !important;
  bottom: 24px !important;
  right: 24px !important;
  z-index: 2147483647 !important; /* z-index massimo possibile */
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-direction: row-reverse !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

.contact-wa__text,
.whatsapp-text {
  background: rgba(37, 211, 102, 0.95) !important;
  color: white !important;
  padding: 10px 16px !important;
  border-radius: 25px !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4) !important;
  animation: whatsapp-text-fade 2s ease-in-out infinite !important;
  pointer-events: none !important;
  opacity: 1 !important;
  transform: translateX(0) !important;
  visibility: visible !important;
  display: block !important;
  transition: opacity 0.3s ease, transform 0.3s ease !important;
}

.contact-wa:hover .contact-wa__text,
.whatsapp-container:hover .whatsapp-text {
  opacity: 1 !important;
  transform: translateX(0) !important;
}

@keyframes whatsapp-text-fade {
  0%, 100% { opacity: 1; }
  50% { opacity: 1; }
}

/* Forza visibilità container WhatsApp */
.contact-wa,
.contact-wa__btn,
.contact-wa__text,
.whatsapp-container,
.whatsapp-btn,
.whatsapp-text {
  visibility: visible !important;
  opacity: 1 !important;
}

.contact-wa,
.whatsapp-container {
  display: flex !important;
}

.contact-wa__btn,
.whatsapp-btn {
  display: flex !important;
}

.contact-wa__text,
.whatsapp-text {
  display: block !important;
}

/* Animazioni apparizione sezioni al scroll */
.games-section {
  opacity: 1 !important;   /* forza visibilità */
  transform: none !important;
  display: block !important;
  transition: none;
  background: transparent !important; /* Rimuove qualsiasi sfondo */
  padding: 20px 0; /* Padding minimo per spaziatura */
}

.games-section.visible {
  opacity: 1 !important;
  transform: none !important;
  display: block !important;
}

/* SEO Intro Block - Stile per il blocco introduttivo SEO */
.seo-intro {
  max-width: 1200px;
  margin: 40px auto;
  padding: 30px 20px;
  background: rgba(31, 41, 55, 0.6);
  border-radius: 12px;
  border: 1px solid rgba(255, 111, 0, 0.2);
  color: #e2e8f0;
}

.seo-intro h2 {
  font-size: 1.8em;
  color: #ffffff;
  margin-bottom: 20px;
  font-weight: 600;
  line-height: 1.3;
}

.seo-intro p {
  font-size: 1.05em;
  line-height: 1.7;
  margin-bottom: 20px;
  color: #d1d5db;
}

.seo-intro strong {
  color: #ff6f00;
  font-weight: 600;
}

.seo-intro ul {
  list-style: none;
  padding-left: 0;
  margin-top: 20px;
}

.seo-intro ul li {
  padding: 10px 0 10px 25px;
  position: relative;
  color: #d1d5db;
  line-height: 1.6;
}

.seo-intro ul li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #ff6f00;
  font-weight: bold;
  font-size: 1.2em;
}

/* Section Description - Stile per le descrizioni delle sezioni */
.section-description {
  max-width: 1200px;
  margin: 0 auto 30px auto;
  padding: 20px 20px;
  background: rgba(31, 41, 55, 0.4);
  border-radius: 8px;
  border-left: 3px solid #ff6f00;
}

.section-description h2 {
  font-size: 1.5em;
  color: #ffffff;
  margin-bottom: 15px;
  font-weight: 600;
  line-height: 1.3;
}

.section-description p {
  font-size: 1em;
  line-height: 1.7;
  color: #d1d5db;
  margin: 0;
}

.section-description strong {
  color: #ff6f00;
  font-weight: 600;
}

/* Responsive styles per blocchi SEO */
@media (max-width: 768px) {
  .seo-intro {
    margin: 30px 10px;
    padding: 20px 15px;
  }
  
  .seo-intro h2 {
    font-size: 1.4em;
    margin-bottom: 15px;
  }
  
  .seo-intro p {
    font-size: 0.95em;
    margin-bottom: 15px;
  }
  
  .seo-intro ul li {
    padding: 8px 0 8px 20px;
    font-size: 0.9em;
  }
  
  .section-description {
    margin: 0 10px 25px 10px;
    padding: 15px;
  }
  
  .section-description h2 {
    font-size: 1.3em;
    margin-bottom: 12px;
  }
  
  .section-description p {
    font-size: 0.95em;
  }
}

/* Media queries per ottimizzazione mobile */
/* RESPONSIVE - Layout Features Verticale su Mobile */
@media (max-width: 768px) {
  /* Features tornano verticali su mobile */
  .welcome-features {
    flex-direction: column !important; /* VERTICALE su mobile */
    gap: 16px !important; /* Spazio ridotto tra i box */
    max-width: 100% !important;
    margin: 20px auto 15px !important;
  }
  
  .welcome-features .feature {
    width: 100% !important; /* Box a larghezza piena su mobile */
    max-width: 300px !important; /* Max width per leggibilità */
    font-size: 1.1rem !important; /* Font leggermente più piccolo */
    padding: 12px 20px !important; /* Padding ridotto */
  }
}

@media (max-width: 768px) {
  header {
    flex-direction: column;
    gap: 15px;
  }
  .logo-nav-container {
    flex-direction: column;
    gap: 15px;
    width: 100%;
  }
  nav {
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 10px;
  }
  .language-switcher {
    position: absolute;
    top: 15px;
    right: 15px;
  }
  .welcome-features {
    flex-direction: column;
    align-items: center;
  }
}
@media (max-width: 576px) {
  .sales-counter {
    flex-direction: column;
    gap: 15px;
  }
}

/* Effetto fade-in su welcome section al load */
/* welcome-section rimossa */

/* Pulsante TELEGRAM */
.footer-info a[href*="t.me"] {
  background: #229ED9;
  color: #fff !important;
  padding: 6px 14px 6px 10px;
  border-radius: 20px;
  display: inline-block;
  margin-top: 6px;
  font-size: 1.1em;
  transition: background 0.25s, box-shadow 0.25s;
  box-shadow: 0 2px 10px #229ed944;
  font-weight: bold;
}
.footer-info a[href*="t.me"]:hover {
  background: #167bb8;
  color: #fff !important;
  box-shadow: 0 4px 22px #229ed999;
  text-decoration: none;
}
.footer-info i.fab.fa-telegram {
  margin-right: 6px;
  font-size: 1.2em;
  vertical-align: middle;
}

/* METODI DI PAGAMENTO */
.payments {
  margin-top: 24px;
  font-size: 1.05em;
  font-weight: 500;
  color: #fff;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.payments img.pay-icon {
  width: 44px;
  height: auto;
  margin: 0 6px;
  border-radius: 7px;
  box-shadow: 0 1px 8px #0004;
  background: #1f2937;
  padding: 3px 8px;
  transition: box-shadow 0.2s, transform 0.2s;
  filter: grayscale(10%);
}
.payments img.pay-icon:hover {
  box-shadow: 0 2px 18px #5bff5b99, 0 2px 18px #229ed988;
  transform: scale(1.12);
  filter: grayscale(0%);
}

.payments-section {
  text-align: center;
  margin-top: 28px;
  margin-bottom: 20px;
  background: #1f2937;
  border-radius: 20px;
  box-shadow: 0 2px 12px #0001;
  padding: 18px 0 12px 0;
}

.payments-section h3 {
  color: #f49117;
  margin-bottom: 10px;
  font-size: 1.3em;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.payments-icons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 9px;
}

.pay-icon {
  width: 46px;
  height: auto;
  background: #1f2937;
  border-radius: 8px;
  box-shadow: 0 2px 8px #0001;
  padding: 6px 8px;
  transition: box-shadow 0.2s, transform 0.2s;
  filter: grayscale(18%);
}

.pay-icon:hover {
  box-shadow: 0 2px 18px #ff9800b3, 0 4px 24px #25d36655;
  transform: scale(1.11) rotate(-2deg);
  filter: none;
}

.payments-note {
  color: #222;
  margin: 8px auto 0;
  font-size: 1em;
  opacity: 0.9;
}

/* AGGIUNGI AL CARRELLO */

/* NEON GAMING MODE - Pulsante Carrello con effetto neon */
.cart-btn {
  background: rgba(255, 255, 255, 0.1); /* Sfondo semitrasparente per dark mode */
  color: #ff6f00;
  border: 2px solid #ff6f00;
  border-radius: 12px; /* Bordi arrotondati moderni */
  font-size: 0.85em;
  font-weight: bold;
  padding: 6px 16px;
  margin-bottom: 6px;
  margin-top: 4px;
  box-shadow: 0 2px 10px rgba(255, 111, 0, 0.3), 
              0 0 15px rgba(255, 140, 0, 0.2); /* Effetto neon arancione */
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
.cart-btn:hover {
  background: linear-gradient(135deg, #ff6f00, #ff8c00);
  color: #fff;
  transform: scale(1.06) translateY(-2px);
  box-shadow: 0 4px 20px rgba(255, 111, 0, 0.6), 
              0 0 30px rgba(255, 140, 0, 0.5); /* Glow neon più intenso al hover */
  border-color: #ff8c00;
}

/* loghi */
.console-logos {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 56px;
  margin: 36px 0 22px 0;
}

.console-logo {
  max-width: 220px;
  height: auto;
  display: block;
  transition: transform 0.22s, box-shadow 0.22s;
  box-shadow: 0 2px 22px #0001;
}

@media (max-width: 600px) {
  .console-logos {
    gap: 22px;
    margin: 18px 0 12px 0;
  }
  .console-logo {
    max-width: 130px;
  }
}

.section-logo {
  text-align: center;
  margin: 24px 0 18px 0;
}
.section-img-logo {
  max-width: 150px;
  height: auto;
  margin: 0 auto;
  display: block;
  filter: drop-shadow(0 3px 18px #0001);
}
@media (max-width: 600px) {
  .section-img-logo {
    max-width: 90px;
  }
}

/* NAVBAR */

.navbar-actions {
  display: flex;
  align-items: center;
  gap: 15px; /* Valore ottimale per distanziare le icone */
  margin-left: auto; /* Mantiene il gruppo di azioni a destra */
}

@media (max-width: 700px) {
  .navbar-actions {
    margin-right: 5vw;
    gap: 15px; /* Aumentato anche su mobile */
  }
}

/* DARK GAMING MODE - Icona carrello ben visibile con sfondo scuro */
.cart-icon-btn {
  background: rgba(17, 24, 39, 0.8) !important; /* Sfondo scuro del sito (dark blue/gray) */
  backdrop-filter: blur(8px) !important; /* Effetto sfocatura */
  -webkit-backdrop-filter: blur(8px) !important;
  border: 2px solid rgba(255, 140, 0, 0.4) !important; /* Bordo arancione sottile */
  padding: 8px !important; /* Padding aumentato per area cliccabile */
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: all 0.3s ease;
  border-radius: 10px !important; /* Bordi arrotondati */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 
              0 0 15px rgba(255, 140, 0, 0.2) !important; /* Ombra scura + glow arancione leggero */
}

.cart-icon-btn:hover {
  background: rgba(31, 41, 55, 0.9) !important; /* Sfondo leggermente più chiaro al hover */
  border-color: rgba(255, 140, 0, 0.7) !important; /* Bordo arancione più intenso */
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4), 
              0 0 25px rgba(255, 140, 0, 0.5) !important; /* Glow arancione più intenso al hover */
  transform: translateY(-2px) !important; /* Leggero sollevamento */
}

.cart-icon-btn:hover .cart-icon-img,
.cart-icon-btn:focus .cart-icon-img {
  transform: scale(1.1) rotate(-8deg) !important;
  filter: drop-shadow(0 0 12px rgba(255, 140, 0, 0.8)) drop-shadow(0 0 20px rgba(255, 140, 0, 0.4)) !important; /* Glow arancione intenso senza alterare i colori originali */
}

.cart-icon-img {
  width: 42px !important; /* Dimensioni aumentate */
  height: 42px !important;
  transition: transform 0.3s ease, filter 0.3s ease !important;
  filter: drop-shadow(0 0 8px rgba(255, 140, 0, 0.5)) drop-shadow(0 3px 10px rgba(0, 0, 0, 0.5)) !important; /* Glow arancione + ombra scura - NON altera i colori originali */
  object-fit: contain;
  display: block;
}
.cart-count-badge {
  background: #f49117;
  color: #fff;
  font-size: 0.92em;
  font-weight: bold;
  border-radius: 16px;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  text-align: center;
  position: absolute;
  top: -7px;
  right: -8px;
  box-shadow: 0 2px 8px #f491174a;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

/* POP-UP CARRELLO MIGLIORATO */
.carrello-popup {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  background: rgba(0,0,0,0.7);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(5px);
}

.carrello-popup-content {
  background: #1f2937;
  padding: 0;
  border-radius: 20px;
  width: 90%;
  max-width: 600px;
  max-height: 85vh;
  overflow: hidden;
  position: relative;
  box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}

.carrello-close-btn {
  position: absolute;
  top: 15px; right: 15px;
  background: rgba(255,255,255,0.9);
  border: 2px solid rgba(255,111,0,0.3);
  width: 35px;
  height: 35px;
  border-radius: 50%;
  font-size: 1.2em;
  color: #ff6f00;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  z-index: 10;
}

.carrello-close-btn:hover {
  background: #ff6f00;
  color: white;
  transform: scale(1.1);
}

.carrello-popup h2 {
  background: linear-gradient(135deg, #ff6f00, #ff8f00);
  color: white;
  margin: 0;
  padding: 20px;
  text-align: center;
  font-size: 1.4em;
  font-weight: 600;
}

.carrello-totale {
  background: linear-gradient(135deg, #ff6f00, #ff8f00);
  color: white;
  padding: 15px 20px;
  text-align: center;
  font-size: 1.3em;
  font-weight: 700;
  margin: 0;
}

/* NEON GAMING MODE - Pulsante Checkout Carrello (arancione) con effetto neon */
.carrello-checkout-btn {
  width: 100%;
  padding: 12px 0;
  background: linear-gradient(135deg, #ff6f00, #ff8c00);
  color: #fff;
  border: none;
  border-radius: 14px; /* Bordi arrotondati moderni */
  font-size: 1.1em;
  font-weight: bold;
  cursor: pointer;
  margin-top: 4px;
  box-shadow: 0 4px 15px rgba(255, 140, 0, 0.4), 
              0 0 20px rgba(255, 111, 0, 0.3); /* Effetto neon/bagliore arancione */
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}
.carrello-checkout-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.5s;
}
.carrello-checkout-btn:hover::before {
  left: 100%;
}
.carrello-checkout-btn:hover {
  background: linear-gradient(135deg, #ff8c00, #ff6f00);
  box-shadow: 0 6px 25px rgba(255, 140, 0, 0.6), 
              0 0 30px rgba(255, 111, 0, 0.5); /* Glow neon più intenso al hover */
  transform: translateY(-2px);
}


.carrello-list {
  padding: 20px;
  max-height: 50vh;
  overflow-y: auto;
}

.carrello-item {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 15px;
  border: 2px solid #f0f0f0;
  border-radius: 12px;
  margin-bottom: 15px;
  background: #fafafa;
  transition: all 0.3s ease;
}

.carrello-item:hover {
  border-color: #ff6f00;
  background: rgba(255, 140, 0, 0.1);
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(255,111,0,0.1);
}

.carrello-item-image {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.carrello-item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carrello-item-details {
  flex: 1;
  min-width: 0;
}

.carrello-item-title {
  font-weight: 600;
  font-size: 1em;
  color: #ffffff;
  margin-bottom: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.carrello-item-option {
  font-size: 0.85em;
  color: #666;
  background: #e8f4fd;
  padding: 2px 8px;
  border-radius: 12px;
  display: inline-block;
  margin-bottom: 8px;
}

.carrello-item-quantity {
  display: flex;
  align-items: center;
  gap: 8px;
}

.quantity-btn {
  width: 25px;
  height: 25px;
  border: 2px solid #ff6f00;
  background: #1f2937;
  color: #ff6f00;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  transition: all 0.2s ease;
}

.quantity-btn:hover {
  background: #ff6f00;
  color: white;
  transform: scale(1.1);
}

.quantity {
  font-weight: 600;
  color: #ffffff;
  min-width: 20px;
  text-align: center;
}

.carrello-item-price {
  text-align: right;
  flex-shrink: 0;
}

.price-per-item {
  font-size: 0.8em;
  color: #666;
  margin-bottom: 2px;
}

.price-total {
  font-weight: 600;
  color: #ff6f00;
  font-size: 1.1em;
}

.carrello-rimuovi-btn {
  background: #ff4444;
  color: white;
  border: none;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  cursor: pointer;
  font-size: 1em;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.carrello-rimuovi-btn:hover {
  background: #cc0000;
  transform: scale(1.1);
}

.carrello-checkout-btn {
  width: calc(100% - 40px);
  margin: 20px;
  background: #25d366;
  color: white;
  border: none;
  padding: 15px 20px;
  border-radius: 12px;
  font-size: 1.1em;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3);
}

.carrello-checkout-btn:hover {
  background: #128c7e;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4);
}


/* ====== MODALE LOGIN/REGISTRAZIONE ====== */
.login-btn {
  background: linear-gradient(135deg, #6c757d, #5a6268);
  color: #fff;
  font-weight: normal;
  font-size: 0.95em;
  border: 1px solid #5a6268;
  padding: 8px 18px;
  border-radius: 20px;
  cursor: pointer !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
  transition: all 0.25s;
  position: relative !important;
  z-index: 999999 !important;
  pointer-events: auto !important;
  user-select: none !important;
  touch-action: manipulation !important;
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
}

.login-btn:hover {
  background: linear-gradient(135deg, #5a6268, #495057);
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.login-btn:active {
  transform: scale(0.98);
}

.login-modal {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.73);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* DARK GAMING MODE - Login modal */
.login-modal-content {
  background: linear-gradient(145deg, #1a1f2e, #0f1419); /* Sfondo scuro per modal */
  color: #e2e8f0; /* Testo chiaro */
  padding: 0;
  border-radius: 20px;
  box-shadow: 0 25px 50px rgba(0,0,0,0.7), 0 0 0 1px rgba(255, 111, 0, 0.2); /* Ombra scura e bordo arancione */
  width: 100%;
  max-width: 400px;
  max-height: 90vh;
  overflow: hidden;
  position: relative;
  animation: modalSlideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 111, 0, 0.3); /* Bordo arancione sottile */
}
.close-login-modal {
  position: absolute; 
  top: 20px; 
  right: 20px;
  background: rgba(255,255,255,0.1); 
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  font-size: 1.2em; 
  color: white; 
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(10px);
}

.close-login-modal:hover {
  background: rgba(255,255,255,0.2);
  transform: scale(1.1);
}
.login-modal-content h2 {
  margin-bottom: 22px;
  color: #ff8c00;
  text-align: center;
}
.login-social {
  width: 100%; padding: 14px 0;
  border: none; border-radius: 12px;
  font-size: 1.1em; font-weight: bold;
  margin-bottom: 13px;
  cursor: pointer; transition: background .22s;
  display: flex; align-items: center; justify-content: center;
  gap: 9px;
}
.login-social.google { background: #1f2937; color: #ffffff; }
.login-social.google:hover { background: #374151; }
.or-divider {
  text-align: center; margin: 18px 0; color: #bbb;
  position: relative;
}
.or-divider span { background: #23263a; padding: 0 10px; position: relative; z-index: 1; }
.or-divider:before {
  content: ""; display: block; width: 100%; height: 1px;
  background: #333; position: absolute; top: 50%; left: 0; z-index: 0;
}
#login-form, #register-form {
  display: flex; flex-direction: column; gap: 13px; margin-bottom: 8px;
}
#login-form input, #register-form input {
  padding: 11px; font-size: 1em; border-radius: 7px;
  border: 1.5px solid #374151; background: #111827; color: #ffffff;
}
/* NEON GAMING MODE - Pulsante Login Submit con effetto neon */
.login-submit {
  background: linear-gradient(135deg, #ff8c00, #ff5500);
  color: #fff;
  border: none;
  border-radius: 13px; /* Bordi arrotondati moderni */
  padding: 15px 0;
  font-weight: bold;
  font-size: 1.18em;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(255, 152, 0, 0.4), 
              0 0 20px rgba(255, 140, 0, 0.3); /* Effetto neon/bagliore arancione */
  margin-top: 8px;
  letter-spacing: 0.5px;
  transition: all 0.3s ease;
  width: 100%;
  min-width: 220px;
  max-width: 100%;
  display: block;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
}
.login-submit::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.5s;
}
.login-submit:hover::before {
  left: 100%;
}
.login-submit:hover {
  background: linear-gradient(135deg, #ff5500, #ff8c00);
  box-shadow: 0 6px 25px rgba(255, 140, 0, 0.6), 
              0 0 30px rgba(255, 111, 0, 0.5); /* Glow neon più intenso al hover */
  transform: translateY(-2px) scale(1.02);
}

/* Pulsante Google Login */
.google-login-btn {
  background: #1f2937;
  color: #ffffff;
  border: 2px solid #ddd;
  border-radius: 13px;
  padding: 15px 0;
  font-weight: bold;
  font-size: 1.1em;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.1);
  margin-top: 15px;
  letter-spacing: 0.5px;
  transition: all 0.24s;
  width: 100%;
  min-width: 220px;
  max-width: 100%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.google-login-btn:hover {
  background: #1f2937;
  border-color: #4285f4;
  box-shadow: 0 2px 26px rgba(66, 133, 244, 0.2);
  transform: translateY(-2px) scale(1.02);
}

.google-login-btn i {
  color: #4285f4;
  margin-right: 8px;
}

.login-msg { min-height: 22px; color: #ff8c00; text-align: center; }
.register-link, .login-link {
  color: #ffffff; font-size: 0.96em; text-align: center; margin-top: 15px;
  display: block;
}

/* Stile per il pulsante di login offline */
.offline-login-btn {
  background: linear-gradient(135deg, #4a90e2, #5c6bc0);
  color: #fff;
  border: none;
  border-radius: 13px;
  padding: 12px 0;
  font-weight: bold;
  font-size: 1em;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(74, 144, 226, 0.3);
  margin-top: 15px;
  margin-bottom: 15px;
  letter-spacing: 0.5px;
  transition: background 0.24s, box-shadow 0.22s, transform 0.15s;
  width: 100%;
  min-width: 220px;
  max-width: 100%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.offline-login-btn:hover {
  background: linear-gradient(135deg, #5c6bc0, #4a90e2);
  box-shadow: 0 2px 26px rgba(74, 144, 226, 0.5);
  transform: translateY(-2px) scale(1.04);
}

/* Stile per i messaggi toast */
.toast-message {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background-color: #333;
  color: white;
  padding: 12px 24px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  z-index: 10000;
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.toast-message.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

.toast-success {
  background-color: #4CAF50;
}

.toast-error {
  background-color: #F44336;
}

.toast-warning {
  background-color: #FF9800;
}
.register-link a, .login-link a {
  color: #ff8c00; font-weight: bold; text-decoration: underline; cursor: pointer;
}

/* ====== ANIMAZIONE ====== */
.sort-filter {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 30px 0 24px 0;
  justify-content: center;
  font-size: 1.1em;
}
.sort-filter label {
  font-weight: 600;
  color: #f49117;
  margin-right: 9px;
}
#sortGames {
  background: rgba(255, 140, 0, 0.1);
  border: 2px solid #f49117;
  color: #f49117;
  font-weight: bold;
  font-size: 1.09em;
  border-radius: 14px;
  padding: 8px 22px;
  outline: none;
  cursor: pointer;
  box-shadow: 0 1px 5px #ff980022;
  transition: border 0.22s;
}
#sortGames:hover,
#sortGames:focus {
  border: 2.5px solid #ff8c00;
  background: rgba(255, 140, 0, 0.1);
}


/* --- BARRA DI RICERCA GIOCHI --- */
.search-bar-container {
  width: 100%;
  display: flex;
  justify-content: center;
  margin: 24px 0 12px 0;
}
.search-bar {
  width: 100%;
  max-width: 480px;
  padding: 12px 18px;
  font-size: 1.1rem;
  border: 1px solid #ddd;
  border-radius: 30px;
  outline: none;
  box-shadow: 0 1px 10px rgba(0,0,0,0.05);
  transition: border-color 0.2s, box-shadow 0.2s;
  background: #1f2937;
}
.search-bar:focus {
  border-color: #999;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* Messaggio quando nessun gioco trovato */
.no-result {
  text-align: center;
  color: #ffffff;
  font-size: 1.2em;
  padding: 40px 0 30px 0;
}
.no-result .highlight-link {
  color: #ff6600;
  font-weight: bold;
  text-decoration: underline;
  cursor: pointer;
}

/* lente interno barra di ricerca */
.search-bar-container {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 24px 0 12px 0;
  position: relative;
}

.search-icon {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-220px, -50%);
  color: #999;
  font-size: 1.2em;
  z-index: 2;
  pointer-events: none;
}

@media (max-width: 600px) {
  .search-icon {
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.08em;
  }
}

.search-bar {
  width: 100%;
  max-width: 480px;
  padding: 12px 18px 12px 42px; /* spazio a sinistra per la lente */
  font-size: 1.1rem;
  border: 1px solid #ddd;
  border-radius: 30px;
  outline: none;
  box-shadow: 0 1px 10px rgba(0,0,0,0.05);
  transition: border-color 0.2s, box-shadow 0.2s;
  background: #1f2937;
}

.search-bar:focus {
  border-color: #999;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* RIMOSSA - Barra arancione non più utilizzata */
.top-notification {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  position: absolute !important;
  left: -9999px !important;
}
@keyframes slideDown {
  from { top: -80px; opacity: 0; }
  to   { top: 0; opacity: 1; }
}
.top-notification .notif-close {
  background: none;
  border: none;
  color: #fff;
  font-size: 1.3em;
  font-weight: bold;
  margin-left: auto;
  cursor: pointer;
  padding: 0 8px;
  transition: color 0.2s;
}
.top-notification .notif-close:hover {
  color: #23263a;
}


/* Form login moderno */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 18px;
  position: relative;
}

.form-group label {
  font-weight: 600;
  color: #374151;
  margin-bottom: 4px;
  font-size: 0.9em;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* DARK GAMING MODE - Input fields */
#login-form input[type="email"],
#login-form input[type="password"],
#register-form input[type="text"],
#register-form input[type="email"],
#register-form input[type="password"] {
  padding: 14px 18px;
  font-size: 1em;
  border-radius: 12px;
  border: 2px solid rgba(255, 111, 0, 0.3); /* Bordo arancione */
  background: #1a1f2e; /* Sfondo scuro */
  color: #e2e8f0; /* Testo chiaro */
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  margin-bottom: 0;
  font-weight: 500;
  position: relative;
}

#login-form input[type="email"]:focus,
#login-form input[type="password"]:focus,
#register-form input[type="text"]:focus,
#register-form input[type="email"]:focus,
#register-form input[type="password"]:focus {
  border: 2px solid #ff6f00; /* Bordo arancione al focus */
  outline: none;
  background: #0f1419; /* Sfondo ancora più scuro al focus */
  box-shadow: 0 0 0 4px rgba(255, 111, 0, 0.2), 0 4px 12px rgba(255, 111, 0, 0.3); /* Ombra arancione */
  transform: translateY(-1px);
}

/* Bottone accedi con icona */
#login-form .login-submit i {
  margin-right: 7px;
  font-size: 1em;
  vertical-align: middle;
}


.orange { background: linear-gradient(135deg, #ff9800, #ffcc80); }


/* ADATTARE A MOBILE*/
@media (max-width: 650px) {
  .header-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 9px;
  }
  .navbar-actions {
    width: 100%;
    margin: 0 0 0 0;
    justify-content: flex-end;
    gap: 7px;
  }
  .logo {
    font-size: 1.7em;
  }
}

.home-btn {
  background: linear-gradient(135deg, #ffecb3, #ffd740);
  border: 2px solid #ffb300;
  color: #ff9800;
  font-size: 1.35em;
  border-radius: 50%;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 9px #ff980050;
  transition: background 0.22s, box-shadow 0.17s, color 0.17s;
}

.home-btn:hover {
  background: linear-gradient(135deg, #ffd740, #ffb300);
  color: #fff;
  box-shadow: 0 4px 22px #ffd740b0;
}
.home-btn i {
  pointer-events: none;
}

/* ========================================
   STILE MENU UTENTE (ASPETTO CORRETTO E SEMPLIFICATO)
   ======================================== */

.user-menu-container {
    position: relative;
}

/* DARK GAMING MODE - Profilo utente */
.user-menu-button {
    background: #1f2937 !important; /* Sfondo scuro */
    border: 2px solid rgba(255, 140, 0, 0.6) !important; /* Bordo sottile arancione */
    color: #ffffff !important; /* Testo bianco */
    font-weight: bold;
    border-radius: 25px;
    padding: 8px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.user-menu-button:hover {
    background: rgba(31, 41, 55, 0.9) !important; /* Sfondo scuro leggermente più chiaro */
    color: #ffffff !important; /* Mantiene bianco */
    border-color: #ff8c00 !important; /* Bordo arancione più intenso */
    box-shadow: 0 0 10px rgba(255, 140, 0, 0.4) !important; /* Glow arancione */
}

.user-menu-button .avatar-circle {
    width: 28px;
    height: 28px;
    background: #ff8c00 !important; /* Arancione per l'icona */
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9em;
    transition: all 0.3s ease;
}

.user-menu-button:hover .avatar-circle {
    background: #ff8c00 !important; /* Mantiene arancione al hover */
    color: white;
    box-shadow: 0 0 8px rgba(255, 140, 0, 0.6) !important; /* Glow arancione */
}

/* DARK DASHBOARD - Menu Dropdown User */
.user-menu-dropdown {
    position: absolute;
    top: 120%; /* Posizione corretta sotto al pulsante */
    right: 0;
    background: #1f2937 !important; /* Blu Notte/Grigio Scuro */
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6), 
                0 0 20px rgba(255, 140, 0, 0.2) !important; /* Ombra scura + glow arancione */
    width: 240px; /* Larghezza adeguata */
    z-index: 10000;
    border: 2px solid rgba(255, 140, 0, 0.4) !important; /* Bordo arancione sottile */
    overflow: hidden;
    padding: 8px;
}

.user-menu-dropdown .user-info {
    padding: 12px;
    border-bottom: 2px solid rgba(255, 140, 0, 0.3) !important; /* Bordo arancione */
    margin-bottom: 8px;
    background: rgba(17, 24, 39, 0.8) !important; /* Sfondo scuro */
    border-radius: 8px;
}

.user-menu-dropdown .user-name {
    font-weight: bold;
    font-size: 1.1em;
    color: #ffffff !important; /* Bianco */
    display: block; /* Va a capo */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-menu-dropdown .user-email {
    font-size: 0.9em;
    color: #d1d5db !important; /* Grigio chiaro */
    display: block; /* Va a capo */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-menu-dropdown .dropdown-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 15px;
    color: #ffffff !important; /* Bianco */
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.2s ease;
    font-weight: 500;
}

.user-menu-dropdown .dropdown-link:hover {
    background: rgba(255, 140, 0, 0.2) !important; /* Sfondo arancione trasparente al hover */
    color: #ffffff !important; /* Mantiene bianco */
    transform: translateX(2px);
}

.user-menu-dropdown .dropdown-link.logout {
    color: #ff6b6b !important; /* Rosso chiaro per logout */
    font-weight: bold;
}

.user-menu-dropdown .dropdown-link.logout:hover {
    background: rgba(255, 107, 107, 0.2) !important; /* Sfondo rosso trasparente al hover */
    color: #ff6b6b !important;
}

.login-inline-container {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.login-help-button {
    background: none;
    border: none;
    color: #f49117;
    font-size: 0.85rem;
    cursor: pointer;
    text-decoration: underline;
    padding: 0;
    align-self: flex-end;
}

.inline-login-fallback {
    background: rgba(255, 140, 0, 0.1);
    border: 2px solid #ffd7a8;
    border-radius: 12px;
    padding: 12px;
    width: 260px;
    box-shadow: 0 8px 18px rgba(0,0,0,0.15);
    position: relative;
    z-index: 1000;
}

.inline-login-fallback form {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.inline-login-fallback label {
    font-size: 0.8rem;
    color: #7c4a03;
    font-weight: 600;
}

.inline-login-fallback input {
    border: 1px solid #f3c27a;
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 0.9rem;
}

.inline-login-submit {
    margin-top: 4px;
    background: #f49117;
    color: white;
    border: none;
    padding: 8px 10px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
}

.inline-google-btn {
    margin-top: 6px;
    width: 100%;
    background: #1f2937;
    border: 1px solid #f49117;
    border-radius: 8px;
    padding: 8px 10px;
    cursor: pointer;
    font-weight: 600;
    color: #f49117;
}

.loyalty-card {
  margin-top: 7px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 140, 0, 0.1);
  border-radius: 12px;
  padding: 3px 11px 3px 6px;
  box-shadow: 0 1px 8px #ffd74022;
}

.progress-bar-outer {
  background: #ffe0b2;
  border-radius: 12px;
  height: 12px;
  width: 100%;
  overflow: hidden;
  margin-left: 8px;
  border: 1.5px solid #ffd740;
  display: inline-block;
  vertical-align: middle;
}
.progress-bar-inner {
  height: 100%;
  background: linear-gradient(90deg,#ff9800,#ffd740 90%);
  width: 0;
  border-radius: 12px;
  transition: width 0.5s;
}

.tessera-img {
  width: 38px;
  height: auto;
  border-radius: 8px;
  border: 1.5px solid #ffd740;
}
.saldo-punti {
  font-weight: bold;
  color: #fbc02d;
  font-size: 1.1em;
  margin-left: 4px;
}




.loyalty-card-num, .loyalty-points, .user-nickname {
  font-size: 0.95em;
  color: #e09e1a;
  background: rgba(255, 140, 0, 0.1);
  padding: 4px 8px;
  border-radius: 8px;
  margin: 4px 0 0 0;
  display: inline-block;
  font-weight: bold;
}

/* PROFILO UTENTE E TESSERA PUNTI */

/* PROFILO UTENTE - DESIGN MODERNO E PULITO */

#profile-modal {
  display: none !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(0,0,0,0.7) !important;
  z-index: 99999 !important;
  justify-content: center !important;
  align-items: center !important;
  backdrop-filter: blur(5px) !important;
  padding: 20px !important;
  box-sizing: border-box !important;
}

#profile-modal[style*="display: flex"],
#profile-modal[style*="display:flex"],
#profile-modal[style*="display: block"],
#profile-modal[style*="display:block"],
#profile-modal.show,
#profile-modal.active,
#profile-modal.force-show,
#profile-modal[class*="show"],
#profile-modal[class*="active"] {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 2147483647 !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(0,0,0,0.8) !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: auto !important;
}

/* DARK GAMING MODE - Profile modal */
.profile-modal-content {
  background: linear-gradient(135deg, #1a1f2e, #0f1419); /* Sfondo scuro */
  padding: 0;
  border-radius: 20px;
  width: 100%;
  max-width: 420px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.7); /* Ombra scura */
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 111, 0, 0.3); /* Bordo arancione */
  color: #e2e8f0; /* Testo chiaro */
}

.profile-modal-content .close-btn {
  position: absolute;
  top: 15px; right: 15px;
  background: rgba(255,255,255,0.95);
  border: 2px solid rgba(255,111,0,0.3);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 1.4em;
  color: #ff6f00;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  z-index: 10;
  font-weight: bold;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.profile-modal-content .close-btn:hover {
  background: #ff6f00;
  color: white;
  border-color: #ff6f00;
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(255,111,0,0.4);
}

/* Header profilo */
.profile-header {
  background: linear-gradient(135deg, #ff6f00, #ff8f00);
  padding: 6px 20px 4px;
  text-align: center;
  color: white;
  position: relative;
  flex-shrink: 0;
}

.profile-header::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: 12px solid #ff8f00;
}

/* Navigazione profilo */
.profile-nav {
  display: flex;
  background: #1f2937;
  border-bottom: 1px solid #e9ecef;
  flex-shrink: 0;
}

.profile-nav-btn {
  flex: 1;
  padding: 12px 8px;
  border: none;
  background: transparent;
  color: #6c757d;
  font-size: 0.9em;
  cursor: pointer;
  transition: all 0.3s ease;
  border-bottom: 3px solid transparent;
}

.profile-nav-btn:hover {
  background: #e9ecef;
  color: #495057;
}

.profile-nav-btn.active {
  color: #ff6f00;
  border-bottom-color: #ff6f00;
  background: #1f2937;
}

.profile-nav-btn i {
  display: block;
  margin-bottom: 4px;
  font-size: 1.1em;
}

/* Contenuto profilo scrollabile */
.profile-content {
  flex: 1;
  overflow-y: auto;
  max-height: 400px;
  padding: 0;
}

.profile-section {
  padding: 20px;
  display: none;
}

.profile-section.active {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Footer profilo */
.profile-footer {
  padding: 15px 20px;
  background: #1f2937;
  border-top: 1px solid #e9ecef;
  flex-shrink: 0;
}

/* Layout modale profilo aggiornato */
.profile-modal-content {
  display: flex;
  flex-direction: column;
  height: 90vh;
  max-height: 600px;
}

.user-avatar {
  width: 30px;
  height: 30px;
  background: rgba(255,255,255,0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 3px;
  font-size: 0.9em;
  border: 1.5px solid rgba(255,255,255,0.3);
}

.user-details .user-name {
  font-size: 0.85em;
  font-weight: 600;
  margin: 0;
  text-shadow: 0 2px 4px rgba(0,0,0,0.1);
  line-height: 1.2;
}

.user-details .user-email {
  font-size: 0.65em;
  opacity: 0.9;
  margin: 0;
  font-weight: 400;
  line-height: 1.2;
}

/* Sezione punti fedeltà */
.loyalty-section {
  padding: 0;
  background: #1f2937;
}

/* Sezione proposte */
.proposals-section {
  background: #1f2937;
}

.proposals-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e9ecef;
}

.proposals-header h4 {
  color: #e65100;
  margin: 0;
}

.refresh-btn {
  background: #ff9800;
  color: white;
  border: none;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.9em;
  transition: all 0.3s ease;
}

.refresh-btn:hover {
  background: #f57c00;
  transform: translateY(-1px);
}

.proposals-list {
  max-height: 300px;
  overflow-y: auto;
}

.proposal-item {
  background: #1f2937;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.proposal-info {
  flex: 1;
}

.proposal-title {
  font-weight: bold;
  color: #495057;
  margin-bottom: 5px;
}

.proposal-details {
  font-size: 0.9em;
  color: #6c757d;
}

.proposal-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.delete-proposal-btn {
  background: #dc3545;
  color: white;
  border: none;
  padding: 6px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.8em;
  transition: all 0.3s ease;
}

.delete-proposal-btn:hover {
  background: #c82333;
  transform: scale(1.05);
}

/* Sezione impostazioni */
.settings-section {
  background: #1f2937;
}

.settings-group {
  margin-bottom: 25px;
  padding-bottom: 20px;
  border-bottom: 1px solid #e9ecef;
}

.settings-group:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.settings-group h5 {
  color: #495057;
  margin-bottom: 15px;
  font-size: 1.1em;
}

.setting-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #f8f9fa;
}

.setting-item:last-child {
  border-bottom: none;
}

.setting-item label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.edit-btn {
  background: #6c757d;
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.8em;
  transition: all 0.3s ease;
}

.edit-btn:hover {
  background: #5a6268;
  transform: translateY(-1px);
}

.access-methods {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.access-method {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: #1f2937;
  border-radius: 8px;
  border: 1px solid #e9ecef;
}

.access-method i {
  width: 20px;
  text-align: center;
  color: #6c757d;
}

.access-method span:first-of-type {
  flex: 1;
  font-weight: 500;
}

.status {
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 0.8em;
  font-weight: bold;
}

.status.active {
  background: #d4edda;
  color: #155724;
}

.status.inactive {
  background: #f8d7da;
  color: #721c24;
}

/* Stili per i campi telefono */
.phone-input-container {
  display: flex;
  gap: 8px;
  align-items: center;
}

.country-select {
  flex-shrink: 0;
  padding: 12px 8px;
  border: 2px solid #374151;
  border-radius: 8px;
  background: #111827;
  color: #ffffff;
  font-size: 0.9em;
  min-width: 100px;
  cursor: pointer;
}

.country-select:focus {
  border-color: #ff8c00;
  outline: none;
}

.phone-input-container input[type="tel"] {
  flex: 1;
  padding: 12px;
  border: 2px solid #374151;
  border-radius: 8px;
  background: #111827;
  color: #ffffff;
  font-size: 1em;
}

.phone-input-container input[type="tel"]:focus {
  border-color: #ff8c00;
  outline: none;
}

/* Pulsanti telefono */
.phone-login-btn,
.phone-register-btn {
  background: #4CAF50;
  color: white;
  border: none;
  padding: 12px 20px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1em;
  font-weight: bold;
  transition: all 0.3s ease;
  width: 100%;
  margin-top: 10px;
}

.phone-login-btn:hover,
.phone-register-btn:hover {
  background: #45a049;
  transform: translateY(-1px);
}

/* Pulsante email alternativa */
.alternative-email-btn {
  background: #9C27B0;
  color: white;
  border: none;
  padding: 12px 20px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1em;
  font-weight: bold;
  transition: all 0.3s ease;
  width: 100%;
  margin-top: 10px;
}

.alternative-email-btn:hover {
  background: #7B1FA2;
  transform: translateY(-1px);
}

.back-to-email-btn {
  background: #6c757d;
  color: white;
  border: none;
  padding: 10px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.9em;
  transition: all 0.3s ease;
  width: 100%;
  margin-top: 10px;
}

.back-to-email-btn:hover {
  background: #5a6268;
  transform: translateY(-1px);
}

/* Animazioni per i form */
#phone-login-form,
#phone-register-form {
  animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ===== NUOVA INTERFACCIA LOGIN/REGISTRAZIONE ===== */

/* Header con tab - Design Moderno */
.auth-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 30px 25px 25px 25px;
  border-radius: 20px 20px 0 0;
  position: relative;
  overflow: hidden;
}

.auth-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="white" opacity="0.1"/><circle cx="75" cy="75" r="1" fill="white" opacity="0.1"/><circle cx="50" cy="10" r="0.5" fill="white" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
  opacity: 0.3;
}

.auth-header h2 {
  color: white;
  margin: 0 0 20px 0;
  font-size: 1.8em;
  font-weight: 700;
  text-align: center;
  position: relative;
  z-index: 1;
  text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.auth-tabs {
  display: flex;
  background: rgba(255,255,255,0.15);
  border-radius: 12px;
  padding: 4px;
  backdrop-filter: blur(10px);
  position: relative;
  z-index: 1;
}

.auth-tab {
  flex: 1;
  padding: 12px 20px;
  border: none;
  background: transparent;
  color: rgba(255,255,255,0.8);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  font-weight: 600;
  font-size: 0.95em;
  position: relative;
}

.auth-tab.active {
  background: rgba(255,255,255,0.25);
  color: white;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  transform: translateY(-1px);
}

.auth-tab:hover:not(.active) {
  background: rgba(255,255,255,0.1);
  color: white;
  transform: translateY(-1px);
}

/* Contenuto tab - Design Moderno */
.auth-tab-content {
  display: none;
  padding: 25px;
  animation: slideInFromRight 0.3s ease-out;
}

.auth-tab-content.active {
  display: block;
}

/* Sezione social login */
.social-login-section {
  margin-bottom: 20px;
}

.google-login-btn {
  width: 100%;
  padding: 14px 20px;
  background: #1f2937;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  color: #2d3748;
  font-size: 1em;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  position: relative;
  overflow: hidden;
}

.google-login-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  transition: left 0.5s;
}

.google-login-btn:hover::before {
  left: 100%;
}

.google-login-btn:hover {
  border-color: #667eea;
  background: linear-gradient(135deg, #f7fafc, #edf2f7);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.15);
}

.or-divider {
  text-align: center;
  margin: 20px 0;
  position: relative;
}

.or-divider::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, #e2e8f0, transparent);
}

.or-divider span {
  background: #1f2937;
  padding: 0 20px;
  color: #64748b;
  font-size: 0.85em;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Pulsanti principali - Design Moderno */
.primary-btn {
  width: 100%;
  padding: 16px 24px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  border-radius: 12px;
  color: white;
  font-size: 1.05em;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.primary-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: left 0.5s;
}

.primary-btn:hover::before {
  left: 100%;
}

.primary-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(102, 126, 234, 0.4);
}

.primary-btn:active {
  transform: translateY(-1px);
}

/* Sezione alternative - Design Moderno */
.alternative-login-section {
  margin-top: 25px;
  padding-top: 20px;
  border-top: 1px solid #e2e8f0;
  position: relative;
}

.alternative-login-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #667eea, transparent);
}

.alternative-text {
  text-align: center;
  color: #64748b;
  margin-bottom: 15px;
  font-size: 0.9em;
  font-weight: 500;
}

.alternative-buttons {
  display: flex;
  gap: 12px;
}

.secondary-btn {
  flex: 1;
  padding: 12px 16px;
  background: linear-gradient(135deg, #f8fafc, #f1f5f9);
  border: 2px solid #e2e8f0;
  border-radius: 10px;
  color: #475569;
  font-size: 0.9em;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
  overflow: hidden;
}

.secondary-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.1), transparent);
  transition: left 0.5s;
}

.secondary-btn:hover::before {
  left: 100%;
}

.secondary-btn:hover {
  background: linear-gradient(135deg, #667eea, #764ba2);
  border-color: #667eea;
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(102, 126, 234, 0.2);
}

/* Modal per telefono */
.phone-auth-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
}

.phone-auth-content {
  background: #1f2937;
  padding: 20px;
  border-radius: 12px;
  max-width: 350px;
  width: 90%;
  position: relative;
}

.close-phone-auth {
  position: absolute;
  top: 15px;
  right: 20px;
  background: none;
  border: none;
  font-size: 1.5em;
  cursor: pointer;
  color: #666;
}

.close-phone-auth:hover {
  color: #ff6f00;
}

/* ===== MENU HAMBURGER MOBILE ===== */
.mobile-menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: space-around;
  width: 30px;
  height: 30px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 1001;
}

.mobile-menu-toggle span {
  width: 100%;
  height: 3px;
  background: #ff6f00;
  border-radius: 2px;
  transition: all 0.3s ease;
  transform-origin: center;
}

.mobile-menu-toggle.active span:nth-child(1) {
  transform: rotate(45deg) translate(6px, 6px);
}

.mobile-menu-toggle.active span:nth-child(2) {
  opacity: 0;
}

.mobile-menu-toggle.active span:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -6px);
}

/* === SISTEMA CAPTCHA === */
.captcha-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
  display: flex;
    justify-content: center;
  align-items: center;
    z-index: 10000;
    animation: fadeIn 0.3s ease;
}

.captcha-modal-content {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 20px;
    padding: 30px;
    max-width: 400px;
    width: 90%;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.captcha-modal-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="75" cy="75" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="50" cy="10" r="0.5" fill="rgba(255,255,255,0.05)"/><circle cx="10" cy="60" r="0.5" fill="rgba(255,255,255,0.05)"/><circle cx="90" cy="40" r="0.5" fill="rgba(255,255,255,0.05)"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
    opacity: 0.3;
    pointer-events: none;
}

.captcha-header {
    margin-bottom: 25px;
    position: relative;
    z-index: 1;
}

.captcha-header h3 {
    color: white;
    font-size: 1.5em;
    margin-bottom: 10px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.captcha-header p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9em;
    margin: 0;
}

.captcha-challenge {
    position: relative;
    z-index: 1;
}

.captcha-question {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 15px;
    padding: 20px;
    margin-bottom: 20px;
    font-size: 1.3em;
    font-weight: bold;
    color: white;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.3);
}

#captcha-answer {
    width: 100%;
    padding: 15px 20px;
    font-size: 1.1em;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.9);
    color: #2d3748;
    font-weight: 600;
    text-align: center;
    margin-bottom: 20px;
    transition: all 0.3s ease;
}

#captcha-answer:focus {
    outline: none;
    border-color: rgba(255, 255, 255, 0.8);
    background: #1f2937;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
}

.captcha-actions {
    display: flex;
    gap: 15px;
    justify-content: center;
}

.refresh-captcha-btn,
.submit-captcha-btn {
    padding: 12px 20px;
    border: none;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.9em;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.refresh-captcha-btn {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.refresh-captcha-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.submit-captcha-btn {
    background: linear-gradient(135deg, #48bb78 0%, #38a169 100%);
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.submit-captcha-btn:hover {
    background: linear-gradient(135deg, #38a169 0%, #2f855a 100%);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.submit-captcha-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

.submit-captcha-btn:hover::before {
    left: 100%;
}

/* ===== RESPONSIVE DESIGN COMPLETO ===== */

/* Tablet e dispositivi medi */
@media (max-width: 1024px) {
  .header-content {
    flex-direction: column;
    gap: 15px;
  }
  
  .logo-nav-container {
    width: 100%;
    justify-content: center;
  }
  
  .navbar-actions {
    width: 100%;
    justify-content: center;
  }
  
  .games-container {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
  }
  
  .profile-modal-content {
    max-width: 90vw;
    height: 85vh;
  }
}

/* Smartphone e dispositivi piccoli */
@media (max-width: 768px) {
  /* Header responsive */
  .header-content {
    padding: 10px 15px;
  }
  
  .logo {
    font-size: 1.5em;
  }
  
  /* Menu hamburger visibile */
  .mobile-menu-toggle {
    display: flex;
  }
  
  /* Navigazione nascosta di default su mobile */
  /* DARK GAMING MODE - Menu mobile principale */
  #main-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.95) !important; /* Sfondo scuro semitrasparente */
    backdrop-filter: blur(10px) !important; /* Effetto blur */
    -webkit-backdrop-filter: blur(10px) !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
    flex-direction: column;
    z-index: 1000;
    border-top: 2px solid rgba(255, 111, 0, 0.6); /* Bordo neon arancione */
  }
  
  #main-nav.active {
    display: flex;
  }
  
  /* DARK GAMING MODE - Menu mobile con link bianchi */
  #main-nav {
    background: rgba(0, 0, 0, 0.95) !important; /* Sfondo scuro per menu mobile */
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
  }
  #main-nav a {
    padding: 15px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 1em;
    text-align: center;
    color: #ffffff !important; /* Bianco per link menu mobile */
  }
  #main-nav a:hover {
    color: #ff6f00 !important; /* Arancione al hover */
    background-color: rgba(255, 111, 0, 0.15);
  }
  
  #main-nav a:last-child {
    border-bottom: none;
  }
  
  .navbar-actions {
    flex-wrap: wrap;
  gap: 10px;
  }
  
  /* Barra di ricerca responsive */
  .search-bar-container {
    margin: 15px;
  }
  
  .search-bar {
    font-size: 16px; /* Previene zoom su iOS */
  }
  
  /* Sezioni giochi responsive */
  .games-container {
    grid-template-columns: repeat(auto-fill, minmax(250px, 280px));
    gap: 15px;
    padding: 15px;
    justify-content: center;
  }
  
  .game-card {
    padding: 15px;
  }
  
  .game-card img {
    height: 150px;
    object-fit: contain;
  }
  
  .game-title {
    font-size: 1em;
  }
  
  .game-price {
    font-size: 1.1em;
  }
  
  /* MODAL RESPONSIVE - DESIGN MODERNO */
  .login-modal-content {
    width: 95vw;
    max-width: 95vw;
    margin: 10px;
    max-height: 90vh;
    border-radius: 16px;
  }
  
  .auth-header {
    padding: 25px 20px 20px 20px;
    border-radius: 16px 16px 0 0;
  }
  
  .auth-header h2 {
    font-size: 1.6em;
    margin-bottom: 15px;
  }
  
  .auth-tabs {
    padding: 3px;
  }
  
  .auth-tab {
    padding: 10px 16px;
    font-size: 0.9em;
  }
  
  .auth-tab-content {
    padding: 20px;
  }
  
  .google-login-btn {
    padding: 12px 16px;
    font-size: 0.95em;
  }
  
  .primary-btn {
    padding: 14px 20px;
    font-size: 1em;
  }
  
  .secondary-btn {
    padding: 10px 14px;
    font-size: 0.85em;
  }
  
  .form-group {
    margin-bottom: 16px;
  }
  
  .form-group input,
  .form-group select {
    font-size: 16px; /* Previene zoom su iOS */
    padding: 12px 16px;
  }
  
  .close-login-modal {
    top: 15px;
    right: 15px;
    width: 35px;
    height: 35px;
    font-size: 1.1em;
  }
  
  /* Profile modal responsive */
  .profile-modal-content {
    width: 95vw;
    max-width: 95vw;
    margin: 10px;
    padding: 15px;
    max-height: 85vh;
  }
  
  .profile-nav {
    flex-direction: column;
  }
  
  .profile-nav-btn {
    padding: 15px;
    border-bottom: 1px solid #e9ecef;
    border-right: none;
  }
  
  .profile-content {
    max-height: 60vh;
  }
  
  /* Carrello responsive */
  .carrello-popup-content {
    width: 95vw;
    max-width: 95vw;
    margin: 10px;
  }
  
  /* Campi telefono responsive */
  .phone-input-container {
    flex-direction: column;
    gap: 8px;
  }
  
  .country-select {
    width: 100%;
    min-width: auto;
    font-size: 16px;
  }
  
  .phone-input-container input[type="tel"] {
    width: 100%;
    font-size: 16px;
  }
  
  /* welcome-section rimossa */
  
  /* Contatori responsive */
  /* DARK GAMING MODE - Statistiche responsive */
  .sales-counter {
    flex-direction: column;
    gap: 20px;
    padding: 25px 20px !important; /* Padding mantenuto per dark mode */
    background: rgba(17, 24, 39, 0.8) !important; /* Mantiene sfondo scuro */
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255, 140, 0, 0.4) !important; /* Mantiene bordo arancione */
  }
  
  .counter-item {
    flex-direction: row;
    text-align: left;
  }
  
  .counter-item i {
    font-size: 2.2rem !important; /* Leggermente ridotto su tablet */
  }
  
  .count {
    font-size: 2rem !important; /* Leggermente ridotto su tablet */
  }
  
  /* DARK CYBERPUNK MODE - Sezione come funziona responsive */
  .how-it-works-section {
    padding: 40px 15px !important;
  }
  
  .how-it-works-section .section-title {
    font-size: 2rem !important; /* Più piccolo su mobile */
  }
  
  .how-it-works-container {
    flex-direction: column;
    gap: 20px;
  }
  
  .explanation-card {
    margin: 0 15px;
  }
  
  .explanation-body {
    padding: 20px 15px !important; /* Padding ridotto su mobile */
  }
  
  /* Footer responsive */
  .newsletter {
    flex-direction: column;
    gap: 15px;
    text-align: center;
  }
  
  .payments-section {
    text-align: center;
  }
  
  .payments-icons {
  justify-content: center;
    flex-wrap: wrap;
  }
  
  /* Admin panel responsive */
  .admin-main-container {
    grid-template-columns: 1fr;
    padding: 15px;
  }
  
  .admin-form {
    flex-direction: column;
    gap: 10px;
  }
  
  .admin-form input {
    width: 100%;
  }
}

/* Dispositivi molto piccoli */
@media (max-width: 480px) {
  /* Header ultra-compatto */
  .header-content {
    padding: 8px 10px;
  }
  
  .logo {
    font-size: 1.3em;
  }
  
  nav a {
    padding: 6px 8px;
    font-size: 0.8em;
  }
  
  /* Giochi in colonna singola */
  .games-container {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 10px;
  }
  
  .game-card {
    padding: 12px;
  }
  
  .game-card img {
    height: 150px;
    object-fit: contain;
  }
  
  /* Modali full-screen - Design Moderno */
  .login-modal-content {
    width: 100vw;
    height: 100vh;
    max-width: 100vw;
    max-height: 100vh;
    margin: 0;
    border-radius: 0;
    padding: 0;
  }
  
  .auth-header {
    padding: 30px 20px 25px 20px;
    border-radius: 0;
  }
  
  .auth-header h2 {
    font-size: 1.5em;
  }
  
  .auth-tab-content {
    padding: 25px 20px;
    height: calc(100vh - 140px);
    overflow-y: auto;
  }
  
  .close-login-modal {
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    font-size: 1.2em;
  }
  
  .profile-modal-content,
  .carrello-popup-content {
    width: 100vw;
    height: 100vh;
    max-width: 100vw;
    max-height: 100vh;
    margin: 0;
    border-radius: 0;
    padding: 15px;
  }
  
  .profile-modal-content {
    display: flex;
    flex-direction: column;
  }
  
  .profile-header {
    padding: 15px;
  }
  
  .profile-nav {
    flex-direction: row;
    overflow-x: auto;
  }
  
  .profile-nav-btn {
    flex-shrink: 0;
    min-width: 80px;
    padding: 10px 8px;
    font-size: 0.8em;
  }
  
  .profile-content {
    flex: 1;
    overflow-y: auto;
  }
  
  /* Form ultra-compatti */
  .form-group input,
  .form-group select {
    padding: 15px;
    font-size: 16px;
  }
  
  /* Pulsanti touch-friendly */
  .login-submit,
  .google-login-btn,
  .phone-login-btn,
  .phone-register-btn,
  .alternative-email-btn,
  .back-to-email-btn {
    padding: 18px 20px;
    font-size: 1.1em;
    min-height: 50px;
  }
  
  /* welcome-section rimossa */
  
  /* Contatori ultra-compatti */
  /* DARK GAMING MODE - Statistiche mobile */
  .sales-counter {
    padding: 20px 15px !important; /* Padding per dark mode */
    background: rgba(17, 24, 39, 0.8) !important; /* Mantiene sfondo scuro */
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255, 140, 0, 0.4) !important; /* Mantiene bordo arancione */
    margin: 30px 10px !important;
  }
  
  .counter-item {
    padding: 15px;
    flex-direction: column !important; /* Stack verticale su mobile */
    text-align: center !important;
    gap: 8px !important;
  }
  
  .counter-item i {
    font-size: 2.2rem !important; /* Mantiene dimensione icona */
    color: #ff8c00 !important; /* Arancione per tutte le icone su mobile */
  }
  
  .count {
    font-size: 1.8rem !important; /* Leggermente ridotto su mobile */
  }
  
  .counter-item p {
    font-size: 0.9rem !important; /* Leggermente ridotto su mobile */
  }
  
  /* Footer ultra-compatto */
  .footer-info {
    padding: 20px 10px;
    text-align: center;
  }
  
  .footer-info p {
    margin: 8px 0;
    font-size: 0.9em;
  }
}

/* Landscape su smartphone */
@media (max-width: 768px) and (orientation: landscape) {
  .profile-modal-content {
    height: 100vh;
  }
  
  .profile-content {
    max-height: 70vh;
  }
  
  .login-modal-content {
    height: 100vh;
    overflow-y: auto;
  }
}

/* Touch devices - miglioramenti per touch */
@media (hover: none) and (pointer: coarse) {
  /* Pulsanti più grandi per touch */
  button, .btn, .login-submit, .google-login-btn, .primary-btn, .secondary-btn {
    min-height: 48px;
    min-width: 48px;
  }
  
  .auth-tab {
    min-height: 48px;
  }
  
  .close-login-modal {
    min-width: 48px;
    min-height: 48px;
  }
  
  /* Hover effects disabilitati su touch */
  .game-card:hover {
    transform: none;
  }
  
  .login-submit:hover,
  .google-login-btn:hover,
  .primary-btn:hover,
  .secondary-btn:hover {
    transform: none;
  }
  
  /* Focus visibile per navigazione da tastiera */
  button:focus,
  input:focus,
  select:focus {
    outline: 3px solid #667eea;
    outline-offset: 2px;
  }
  
  /* Miglioramenti per input touch */
  .form-group input,
  .form-group select {
    min-height: 48px;
    font-size: 16px;
  }
  
  /* Spaziature touch-friendly */
  .alternative-buttons {
    gap: 16px;
  }
  
  .auth-tabs {
    gap: 8px;
  }
}

/* Stili per stampa */
@media print {
  .header,
  .navbar-actions,
  .search-bar-container,
  .login-modal,
  .profile-modal,
  .carrello-popup,
  .contact-wa__btn,
  .contact-wa,
  .contact-wa__text,
  .whatsapp-btn,
  .whatsapp-container,
  .whatsapp-text,
  .admin-menu-container {
    display: none !important;
  }
}

/* Forzatura visibilità modal login */
/* REGOLA MASSIMA SPECIFICITÀ - Deve sovrascrivere tutto */
#login-modal.force-show.show.active,
#login-modal.force-show,
.modal.force-show {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: rgba(0, 0, 0, 0.6) !important;
  z-index: 1000000 !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: auto !important;
  overflow: auto !important;
}

#login-modal.force-show .modal-content,
.modal.force-show .modal-content,
#login-modal .modal-content.force-show {
  display: flex !important;
  flex-direction: column;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 1000001 !important;
  position: relative !important;
  pointer-events: auto !important;
  max-height: 90vh;
  overflow: auto;
}

@media print {
  .games-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  
  .game-card {
    break-inside: avoid;
    box-shadow: none;
    border: 1px solid #ddd;
  }
}

/* ===== ANIMAZIONI MODERNE ===== */
@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes slideInFromRight {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

.loyalty-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.loyalty-header h4 {
  color: #ffffff;
  font-size: 1.2em;
  font-weight: 600;
  margin: 0;
}

.points-display {
  background: linear-gradient(135deg, #ff6f00, #ff8f00);
  color: white;
  padding: 8px 16px;
  border-radius: 20px;
  font-weight: 600;
  font-size: 0.9em;
  box-shadow: 0 4px 15px rgba(255, 111, 0, 0.3);
}

.stars-row {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-bottom: 15px;
}

.filled-star {
  color: #ffd700;
  font-size: 1.5em;
  text-shadow: 0 2px 4px rgba(255, 215, 0, 0.3);
  transition: transform 0.2s ease;
  -webkit-text-stroke: 1.5px #ffd700;
  filter: drop-shadow(0 0 3px rgba(255, 215, 0, 0.5));
}

.filled-star:hover {
  transform: scale(1.1);
}

.empty-star {
  color: transparent;
  font-size: 1.5em;
  -webkit-text-stroke: 1.5px #ffd700;
  filter: drop-shadow(0 0 2px rgba(255, 215, 0, 0.3));
}

.progress-container {
  background: #1f2937;
  height: 8px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
}

.progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #ff6f00, #ff8f00);
  border-radius: 10px;
  transition: width 0.5s ease;
  box-shadow: 0 2px 8px rgba(255, 111, 0, 0.3);
}

/* Sezione congratulazioni */
.congratulations-section {
  margin: 0 20px 20px;
  background: linear-gradient(135deg, #ff6f00, #ff8f00);
  border-radius: 15px;
  padding: 15px;
  text-align: center;
  color: white;
  box-shadow: 0 8px 25px rgba(255, 111, 0, 0.3);
}

.congrats-icon {
  font-size: 2em;
  margin-bottom: 8px;
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-10px); }
  60% { transform: translateY(-5px); }
}

.congratulations-section h4 {
  font-size: 1.1em;
  margin: 0 0 8px 0;
  font-weight: 700;
}

.congratulations-section p {
  margin: 3px 0;
  font-size: 0.9em;
  opacity: 0.95;
}

.free-games-count {
  font-weight: 700;
  font-size: 1.1em;
}

.congrats-subtitle {
  font-size: 0.85em !important;
  opacity: 0.8 !important;
}

/* Rimossa regola duplicata .whatsapp-btn - usa quella principale sopra */

/* Pulsante logout */
.logout-btn {
  width: calc(100% - 40px);
  margin: 0 20px 20px;
  background: #1f2937;
  color: #666;
  border: 2px solid #e0e0e0;
  padding: 10px 16px;
  border-radius: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 0.9em;
}

.logout-btn:hover {
  background: #ff6f00;
  color: white;
  border-color: #ff6f00;
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(255, 111, 0, 0.3);
}

/* Stili per le stelle dei punti */
.filled-star {
  color: #ffd740;
  font-size: 1.2em;
  margin: 0 2px;
  text-shadow: 0 1px 3px rgba(255, 215, 64, 0.3);
  -webkit-text-stroke: 1.5px #ffd700;
  filter: drop-shadow(0 0 3px rgba(255, 215, 0, 0.5));
}

.empty-star {
  -webkit-text-stroke: 1.5px #ffd700;
  filter: drop-shadow(0 0 2px rgba(255, 215, 0, 0.3));
  color: transparent;
  font-size: 1.2em;
  margin: 0 2px;
}

.stars-container {
  margin: 10px 0;
  text-align: center;
}

.progress-bar-loyalty {
  height: 100%;
  background: linear-gradient(90deg, #ff9800, #ffd740);
  border-radius: 12px;
  transition: width 0.5s ease;
  width: 0%;
}

.points-counter {
  font-weight: bold;
  color: #ff8f00;
  font-size: 1.1em;
  margin-top: 8px;
  display: block;
}

/* Animazione per il messaggio gioco gratis */
@keyframes glow {
  from {
    box-shadow: 0 4px 15px rgba(255, 111, 0, 0.3);
  }
  to {
    box-shadow: 0 6px 25px rgba(255, 111, 0, 0.6);
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

.error-message {
  display: block;
  margin-bottom: 6px;
  color: #d32f2f;
}

.progress-bar-outer {
  width: 100%;
  height: 10px;
  background: #eee;
  border-radius: 10px;
  margin: 6px auto;
}

.progress-bar-inner {
  height: 100%;
  width: 0%;
  background: #d32f2f;
  border-radius: 10px;
  transition: width 0.4s ease-in-out;
}

.saldo-punti {
  font-size: 0.95em;
  font-weight: bold;
  color: #d32f2f;
  margin-top: 5px;
}

.stars-container {
  margin-top: 12px;
  font-size: 1.4em;
}

.stars-container .star {
  color: #d32f2f;
  margin: 0 2px;
}

#premio-message {
  margin: 14px 0;
  font-weight: bold;
  color: #4caf50;
}

.logout-btn {
  margin-top: 18px;
  padding: 12px 24px;
  background: #ff8c00;
  color: white;
  border: none;
  border-radius: 12px;
  font-weight: bold;
  font-size: 1em;
  cursor: pointer;
  transition: background 0.2s;
}

.logout-btn:hover {
  background: #e65c00;
}

#user-menu {
  position: absolute;
  top: 64px;
  right: 15px;
  display: none;
  z-index: 99999;
}


/* ====== STILI TESSERA PUNTI E PREMIO ====== */

/* Contenitore principale della tessera nel profilo */
.loyalty-card-display {
  display: block !important;
  align-items: center;
  gap: 15px;
  background: rgba(255, 140, 0, 0.1); /* Sfondo crema chiaro */
  border-radius: 12px;
  padding: 12px;
  border: 2px solid #ffe0b2; /* Bordo arancione chiaro */
  margin: 20px 0;
  box-shadow: 0 4px 15px rgba(255, 183, 77, 0.2);
  visibility: visible !important;
  opacity: 1 !important;
}

/* Assicura che le card nel tab Punti siano sempre visibili */
#profile-tab-points .loyalty-card-display {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Immagine di Mario */
.mario-image {
  width: 70px;
  height: auto;
  border-radius: 8px;
}

/* Contenitore per info punti (stelle, barra, contatore) */
.points-info {
  width: 100%;
  text-align: left;
}

/* Titolo "I tuoi punti" */
.points-title {
  font-weight: bold;
  font-size: 1.1em;
  color: #e65100; /* Arancione scuro */
  display: block;
  margin-bottom: 8px;
}

/* Contenitore delle stelle */
.stars-container {
  font-size: 1.8em; /* Aumenta la dimensione delle stelle */
  line-height: 1;
  margin-bottom: 10px;
}

.stars-container .star {
  color: #ffd54f; /* Colore stella piena (giallo/oro) */
  margin: 0 1px;
  transition: color 0.3s;
}

.stars-container .star.empty {
  color: #e0e0e0; /* Colore stella vuota (grigio chiaro) */
}

/* Barra di progresso */
.progress-bar-container {
  background-color: #e0e0e0;
  border-radius: 20px;
  height: 12px;
  width: 100%;
  overflow: hidden;
  border: 1px solid #ccc;
}

.progress-bar-loyalty {
  height: 100%;
  width: 0%; /* Verrà aggiornato da JavaScript */
  background: linear-gradient(90deg, #ffb300, #ff8f00); /* Gradiente arancione */
  border-radius: 20px;
  transition: width 0.5s ease-in-out;
}

/* Contatore "0/5" */
.points-counter {
  font-size: 0.9em;
  font-weight: bold;
  color: #757575;
  display: block;
  text-align: right;
  margin-top: 4px;
}

/* ====== MODAL PUNTI: CARD DOPPIA (NINTENDO + PLAYSTATION) ====== */
#profile-tab-points {
  padding: 20px;
}

#profile-tab-points .points-shell {
  background: #1f2937;
  border-radius: 16px;
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.45);
  color: #e5e7eb;
}

#profile-tab-points .points-balance {
  text-align: center;
  margin: 0 0 4px;
}

#profile-tab-points .points-balance h3 {
  color: #ff8c00;
  font-size: 2em;
  margin: 0;
  font-weight: 800;
}

#profile-tab-points .points-balance p {
  color: #d1d5db;
  margin: 4px 0 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 0.85em;
}

.points-card {
  position: relative;
  background: #111827;
  border-radius: 14px;
  padding: 14px 18px;
  min-height: 140px;
  display: flex;
  align-items: center;
  border: 2px solid #1d4ed8;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}

.points-card--nintendo {
  border-color: #ffb347;
  box-shadow: 0 6px 22px rgba(255, 140, 0, 0.3);
}

.points-card--ps {
  border-color: #1d8bff;
  box-shadow: 0 6px 22px rgba(29, 139, 255, 0.25);
}

.points-card__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  padding-right: 110px;
}

.points-card__title {
  margin: 0;
  color: #f8fafc;
  font-size: 1.15rem;
  font-weight: 800;
}

.points-card__icons {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.7rem;
  line-height: 1;
}

.points-card--nintendo .points-card__icons .fa-star {
  color: #ffc857;
  -webkit-text-stroke: 1.5px #ffb347;
  filter: drop-shadow(0 0 6px rgba(255, 184, 71, 0.55));
}

.points-card--nintendo .points-card__icons .far.fa-star {
  color: transparent;
}

.points-card__icons--ps i {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.35);
  font-size: 1.4rem;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
}

.points-card__progress {
  background: #2b3545;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35);
}

.points-card__progress-bar {
  height: 100%;
  width: 0;
  border-radius: inherit;
  transition: width 0.35s ease;
}

.points-card__progress-bar--nintendo {
  background: linear-gradient(90deg, #ffb347, #ff8c00);
}

.points-card__progress-bar--ps {
  background: linear-gradient(90deg, #3b82f6, #60a5fa);
}

.points-card__counter {
  text-align: right;
  color: #e5e7eb;
  font-weight: 700;
  font-size: 0.95rem;
}

.points-card__character {
  position: absolute;
  right: 16px;
  top: 38%;
  transform: translateY(-45%);
  width: 110px;
  height: auto;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.45));
  pointer-events: none;
}

.points-card__character--mario {
  animation: float-run 2.6s ease-in-out infinite alternate;
}

.points-card__character--astro {
  animation: float-run 2.6s ease-in-out infinite alternate-reverse;
}

@keyframes float-run {
  from {
    transform: translateY(-50%) translateX(0);
  }
  to {
    transform: translateY(-55%) translateX(6px);
  }
}

@media (max-width: 640px) {
  #profile-tab-points .points-shell {
    padding: 16px;
  }

  .points-card {
    padding: 16px;
    min-height: 150px;
  }

  .points-card__body {
    padding-right: 90px;
  }

  .points-card__character {
    width: 95px;
    top: 34%;
  }
}

/* MODALE PREMIO A SCHERMO INTERO */
.congrats-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(5px);
  z-index: 10001; /* Sopra ogni altra cosa */
  display: flex;
  justify-content: center;
  align-items: center;
  animation: fadeIn 0.5s;
}

.congrats-content {
  background: #1f2937;
  padding: 40px;
  border-radius: 20px;
  text-align: center;
  max-width: 500px;
  width: 90%;
  box-shadow: 0 10px 40px rgba(255, 215, 0, 0.5);
  border: 3px solid #FFD700;
}

.congrats-content h2 {
  color: #ff8f00;
  font-size: 2.5em;
  margin-bottom: 15px;
}

.congrats-content p {
  font-size: 1.2em;
  color: #ffffff;
  margin-bottom: 25px;
}

.congrats-button {
  display: inline-block;
  padding: 15px 30px;
  background-color: #25D366; /* Verde WhatsApp */
  color: white;
  font-size: 1.2em;
  font-weight: bold;
  border-radius: 30px;
  text-decoration: none;
  transition: transform 0.2s, background-color 0.2s;
}

.congrats-button:hover {
  transform: scale(1.05);
  background-color: #128C7E;
}

.congrats-button i {
  margin-right: 10px;
}

.close-congrats-btn {
  background: none;
  border: 2px solid #ccc;
  color: #888;
  padding: 8px 15px;
  border-radius: 20px;
  cursor: pointer;
  margin-top: 20px;
  font-weight: bold;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ========================================
   MEDIA QUERIES PER RESPONSIVE DESIGN (MOBILE)
   ======================================== */

@media (max-width: 992px) {
    nav {
        display: none; /* Nasconde la navigazione classica su schermi medi */
    }
    .logo-nav-container {
        justify-content: center;
        width: 100%;
    }
    .header-content {
        justify-content: center;
    }
    .navbar-actions {
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
    }
}

@media (max-width: 768px) {
    body {
        padding-top: 70px; /* Più spazio per l'header su mobile */
    }

    .header-content {
        flex-direction: column;
        gap: 15px;
        padding-bottom: 10px;
    }

    .logo-nav-container {
        order: 1; /* Il logo va prima */
    }

    .navbar-actions {
        order: 2; /* Le azioni vanno dopo */
        position: static;
        transform: none;
        width: 100%;
        justify-content: space-around;
    }

    .welcome-features {
        flex-direction: column;
        align-items: center;
    }
    
    .games-container {
        grid-template-columns: 1fr; /* Una colonna per i giochi */
        gap: 20px;
    }

    .game-card {
        max-width: 320px; /* Adatta la larghezza delle card */
    }

    .console-logos {
        flex-wrap: wrap;
        gap: 20px;
    }

    .console-logo {
        max-width: 120px;
    }

    .richiesta-btn {
        transform: scale(0.9);
        left: 10px;
        bottom: 15px;
    }
    .contact-wa,
    .whatsapp-container {
        bottom: 15px;
        right: 10px;
    }
    .contact-wa__btn,
    .whatsapp-btn {
        transform: scale(0.9);
    }
}

/* Stile per messaggio "Nessun risultato" */
.no-result {
  text-align: center;
  padding: 40px 20px;
  margin: 20px auto;
  background: rgba(255, 235, 59, 0.1);
  border: 1px solid rgba(255, 235, 59, 0.3);
  border-radius: 12px;
  max-width: 600px;
}
.no-result a {
  color: #ff8c00;
  font-weight: bold;
  text-decoration: underline;
}

/* ========================================
   MEDIA QUERIES PER RESPONSIVE DESIGN (MOBILE)
   ======================================== */

@media (max-width: 992px) {
    nav {
        display: none; /* Nasconde la navigazione classica su schermi medi */
    }
    .logo-nav-container {
        justify-content: center;
        width: 100%;
    }
    .header-content {
        justify-content: center;
    }
    .navbar-actions {
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
    }
}

@media (max-width: 768px) {
    body {
        padding-top: 70px; /* Più spazio per l'header su mobile */
    }

    .header-content {
        flex-direction: column;
        gap: 15px;
        padding-bottom: 10px;
    }

    .logo-nav-container {
        order: 1; /* Il logo va prima */
    }

    .navbar-actions {
        order: 2; /* Le azioni vanno dopo */
        position: static;
        transform: none;
        width: 100%;
        justify-content: space-around;
    }

    .welcome-features {
        flex-direction: column;
        align-items: center;
    }
    
    .games-container {
        grid-template-columns: 1fr; /* Una colonna per i giochi */
        gap: 20px;
    }

    .game-card {
        max-width: 320px; /* Adatta la larghezza delle card */
    }

    .console-logos {
        flex-wrap: wrap;
        gap: 20px;
    }

    .console-logo {
        max-width: 120px;
    }

    .richiesta-btn {
        transform: scale(0.9);
        left: 10px;
        bottom: 15px;
    }
    .contact-wa,
    .whatsapp-container {
        bottom: 15px;
        right: 10px;
    }
    .contact-wa__btn,
    .whatsapp-btn {
        transform: scale(0.9);
    }
}

/* ========================================
   STILE MENU UTENTE (ASPETTO CORRETTO)
   ======================================== */

/* ========================================
   STILE MENU UTENTE (ASPETTO CORRETTO E SEMPLIFICATO)
   ======================================== */

.user-menu-container {
    position: relative;
}

.user-menu-button {
    background: rgba(255, 140, 0, 0.1);
    border: 2px solid #f49117;
    color: #f49117;
    font-weight: bold;
    border-radius: 25px;
    padding: 8px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease; /* Aggiunta transizione */
}

.user-menu-button:hover {
    background: #f49117;
    color: white;
}

.avatar-circle {
    width: 28px;
    height: 28px;
    background: #f49117;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9em;
}

/* Regola duplicata rimossa - usa quella sopra con !important */

/* ========================================
   STILE SUGGERIMENTI RICERCA
   ======================================== */
.search-bar-container {
    position: relative; /* Necessario per posizionare i suggerimenti */
    max-width: 480px;
    margin: 24px auto 12px auto;
}

#search-suggestions {
    display: none; /* Nascosto di default */
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #1f2937;
    border: 1px solid #ddd;
    border-top: none;
    border-radius: 0 0 12px 12px;
    z-index: 999;
    max-height: 300px;
    overflow-y: auto;
    box-shadow: 0 8px 15px rgba(0,0,0,0.1);
}

.suggestion-item {
    display: flex;
    align-items: center;
    padding: 10px;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
}

.suggestion-item:last-child {
    border-bottom: none;
}

.suggestion-item:hover {
    background-color: #1f2937;
}

.suggestion-item img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    margin-right: 12px;
    border-radius: 4px;
}

.suggestion-item span {
    font-size: 1em;
    color: #ffffff;
}

#search-results-count {
    text-align: center;
    padding: 10px;
    font-size: 0.9em;
    color: #008000; /* Verde per indicare successo */
    font-weight: bold;
}

/* Stile per evidenziare le card trovate dalla ricerca */
.game-card.highlight {
  box-shadow: 0 0 25px #ff8c00, 0 0 10px #ff8c00;
  transform: scale(1.03);
  border-color: #ff8c00;
}

/* Stile per il messaggio "risultati trovati" (verde) */
.results-found {
  text-align: center;
  padding: 15px;
  margin: 20px auto;
  background: rgba(76, 175, 80, 0.1);
  border: 1px solid rgba(76, 175, 80, 0.3);
  color: #2e7d32;
  font-weight: bold;
  border-radius: 12px;
  max-width: 600px;
}

/* ========================================
   STILE SUGGERIMENTI RICERCA (STILE AMAZON)
   ======================================== */
.search-bar-container {
    position: relative; /* Necessario per posizionare i suggerimenti */
}

#search-suggestions {
    display: none; /* Nascosto di default */
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #1f2937;
    border: 1px solid #ddd;
    border-top: none;
    border-radius: 0 0 12px 12px;
    z-index: 9999;
    max-height: 350px;
    overflow-y: auto;
    box-shadow: 0 8px 15px rgba(0,0,0,0.1);
}

.suggestion-item {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
}

.suggestion-item:last-child {
    border-bottom: none;
}

.suggestion-item:hover {
    background-color: #1f2937;
}

.suggestion-item img {
    width: 45px;
    height: 45px;
    object-fit: contain;
    margin-right: 15px;
    border-radius: 4px;
}

.suggestion-item span {
    font-size: 1em;
    color: #ffffff;
    font-weight: 500;
}

.suggestion-item-none {
    padding: 15px;
    color: #888;
    text-align: center;
}

/* ========================================
   STILE SUGGERIMENTI RICERCA (STILE AMAZON)
   ======================================== */
.search-bar-container {
    position: relative; /* Necessario per posizionare i suggerimenti */
}

#search-suggestions {
    display: none; /* Nascosto di default */
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #1f2937;
    border: 1px solid #ddd;
    border-top: none;
    border-radius: 0 0 12px 12px;
    z-index: 9999;
    max-height: 350px;
    overflow-y: auto;
    box-shadow: 0 8px 15px rgba(0,0,0,0.1);
}

.suggestion-item {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
}

.suggestion-item:last-child {
    border-bottom: none;
}

.suggestion-item:hover {
    background-color: #1f2937;
}

.suggestion-item img {
    width: 45px;
    height: 45px;
    object-fit: contain;
    margin-right: 15px;
    border-radius: 4px;
}

.suggestion-item span {
    font-size: 1em;
    color: #ffffff;
    font-weight: 500;
}

.suggestion-item-none {
    padding: 15px;
    color: #888;
    text-align: center;
}

/* Stile per il messaggio dei risultati */
#results-message {
  text-align: center;
  padding: 15px;
  margin: 10px auto;
  border-radius: 12px;
  max-width: 600px;
  font-weight: bold;
}
.results-found {
  background: rgba(76, 175, 80, 0.1);
  border: 1px solid rgba(76, 175, 80, 0.3);
  color: #2e7d32;
}
.no-result {
  background: rgba(255, 235, 59, 0.1);
  border: 1px solid rgba(255, 235, 59, 0.3);
  color: #8a6d3b;
}

/* Bottone "Mostra tutti" nel messaggio risultati */
.reset-search-btn {
  display: inline-block;
  margin-left: 8px;
  padding: 6px 12px;
  border: 1px solid #ff8c00;
  background: #1f2937;
  color: #ff8c00;
  border-radius: 20px;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.95em;
}
.reset-search-btn:hover {
  background: #ff8c00;
  color: #fff;
}


/* ========================================
   STILE BANNER COOKIE (GDPR)
   ======================================== */

#cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgba(35, 38, 58, 0.95); /* Sfondo scuro semi-trasparente */
    backdrop-filter: blur(10px);
    color: white;
    padding: 20px;
    box-shadow: 0 -5px 25px rgba(0,0,0,0.2);
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

#cookie-banner p {
    margin: 0;
    font-size: 0.95em;
    flex-grow: 1;
    max-width: 600px;
}

#cookie-accept-btn {
    background-color: #ff8c00;
    color: white;
    border: none;
    padding: 12px 30px;
    border-radius: 25px;
    cursor: pointer;
    font-weight: bold;
    font-size: 1em;
    transition: background-color 0.3s, transform 0.2s;
}

#cookie-accept-btn:hover {
    background-color: #e67e22;
    transform: scale(1.05);
}

/* ========================================
/* ========================================
   DARK CYBERPUNK MODE - SEZIONE "COME FUNZIONA?"
   ======================================== */
.how-it-works-section {
    padding: 60px 20px !important;
    background-color: #050b14 !important; /* Dark Blue come sfondo del sito */
    margin: 40px 0;
}

.how-it-works-section .section-title {
    color: #ff6f00 !important; /* Arancione neon per il titolo */
    font-size: 2.5rem !important; /* Font più grande */
    font-weight: 700 !important; /* Audace */
    text-align: center;
    margin-bottom: 40px !important;
    text-shadow: 0 0 20px rgba(255, 111, 0, 0.5); /* Glow arancione */
}

.how-it-works-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

/* DARK CYBERPUNK MODE - Card informative con glassmorphism */
.explanation-card {
    background: rgba(17, 24, 39, 0.8) !important; /* Grigio scuro/blu semitrasparente */
    border: 1px solid rgba(100, 150, 255, 0.3) !important; /* Bordo sottile blu neon */
    border-radius: 12px !important; /* Bordi arrotondati */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 
                0 0 20px rgba(100, 150, 255, 0.1); /* Ombra scura + leggero glow blu */
    overflow: hidden;
    transition: all 0.3s ease;
    padding: 0 !important; /* Rimuovo padding per gestirlo internamente */
}

.explanation-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.7), 
                0 0 30px rgba(255, 111, 0, 0.3); /* Glow arancione al hover */
    border-color: rgba(255, 111, 0, 0.6) !important; /* Bordo arancione al hover */
}

.explanation-header {
    display: flex;
    align-items: center;
    justify-content: center; /* Centra il logo */
    gap: 15px;
    padding: 30px 25px !important; /* Spazio interno per far respirare */
    background-color: rgba(15, 20, 25, 0.5) !important; /* Sfondo ancora più scuro per header */
    min-height: 100px; /* Imposta un'altezza minima */
}

/* Filtro CSS per rendere i loghi bianchi su sfondo scuro */
/* DARK GAMING MODE - Loghi trasparenti bianchi con CSS blend modes */
.explanation-header img {
    max-height: 60px !important; /* Dimensione uniforme */
    height: auto;
    width: auto;
    max-width: 180px;
    object-fit: contain !important; /* Mantiene proporzioni e centra */
    object-position: center;
    
    /* Inverti i colori e togli la saturazione: trasforma sfondo bianco in NERO e testo nero in BIANCO */
    filter: invert(1) grayscale(1) contrast(1.5) !important;
    
    /* Rendi trasparente il nero: il nero diventa trasparente, lasciando visibile solo la scritta bianca */
    /* Prova prima con screen, se non funziona bene cambia in lighten */
    mix-blend-mode: screen !important;
    
    transition: filter 0.3s ease, transform 0.3s ease;
    display: block;
    margin: 0 auto; /* Centra l'immagine */
}

/* Hover effect: glow arancione */
.explanation-header img:hover {
    filter: invert(1) grayscale(1) contrast(1.5) drop-shadow(0 0 10px rgba(255, 111, 0, 0.6)) !important;
    transform: scale(1.05); /* Leggero zoom al hover */
}

/* Fallback: se mix-blend-mode: screen non funziona perfettamente, usa lighten */
/* Per applicare lighten, commenta la riga mix-blend-mode: screen sopra e decommenta questa: */
/* .explanation-header img { mix-blend-mode: lighten !important; } */

.explanation-header h3 {
    margin: 0;
    font-size: 1.5em;
    color: #ffffff !important; /* Bianco per titoli header */
}

.explanation-body {
    padding: 30px 25px !important; /* Spazio interno per far respirare il testo */
}

.explanation-body p {
    margin-bottom: 15px;
    font-size: 1.05em;
    line-height: 1.6;
    color: #d1d5db !important; /* Grigio chiaro per massima leggibilità */
}

.explanation-body p strong {
    color: #ffffff !important; /* Bianco per testo in grassetto */
    font-weight: 700;
}

.explanation-body ul {
    list-style: none;
    padding-left: 0;
}

.explanation-body li {
    margin-bottom: 12px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: #d1d5db !important; /* Grigio chiaro per massima leggibilità */
    font-size: 1em;
    line-height: 1.6;
}


/* ========================================
   STILE BANNER ORARI DI ATTIVITÀ
   ======================================== */
/* ========================================
   STILE PANNELLO ADMIN
   ======================================== */
#admin-panel {
    margin: 40px auto;
    padding: 30px;
    background: rgba(255, 140, 0, 0.1);
    border: 2px solid #ffe0b2;
    border-radius: 15px;
    max-width: 900px;
    text-align: center;
    box-shadow: 0 5px 25px rgba(0,0,0,0.1);
}

#admin-panel h2 {
    color: #e65100;
    margin-bottom: 20px;
}

/* DARK DASHBOARD - Form Admin */
.admin-form {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

/* Input e select già aggiornati sopra con regole generali */

/* Pulsanti gestione punti */
#admin-add-points-btn,
#admin-remove-points-btn,
#ap-save,
#ap-reset {
    border: none;
    padding: 12px 20px;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 700;
    font-size: .95em;
    transition: transform .15s ease, box-shadow .2s ease, background-color .25s ease;
    box-shadow: 0 3px 10px rgba(0,0,0,.12);
}

#admin-add-points-btn { background-color: #43a047; color: #fff; }      /* Verde */
#admin-add-points-btn:hover { background-color: #388e3c; transform: translateY(-1px); }

#admin-remove-points-btn { background-color: #e53935; color: #fff; }   /* Rosso */
#admin-remove-points-btn:hover { background-color: #c62828; transform: translateY(-1px); }

/* ===== Tabella prodotti (mini restyling) ===== */
/* DARK DASHBOARD - Tabella Prodotti */
#ap-products-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95em;
    background: #111827 !important; /* Sfondo scuro */
    border: 1px solid rgba(255, 140, 0, 0.3) !important; /* Bordo arancione */
    border-radius: 10px;
    overflow: hidden;
}

#ap-products-table thead th {
    background: linear-gradient(135deg, #ff8c00, #ff6f00) !important; /* Arancione per header */
    color: #ffffff !important; /* Bianco */
    padding: 15px 12px;
    text-align: left;
    font-weight: bold;
    font-size: 0.85em;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid rgba(255, 140, 0, 0.5) !important;
}

#ap-products-table tbody td {
    padding: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important; /* Bordo grigio chiaro */
    color: #d1d5db !important; /* Grigio chiaro per testo */
    background: #1f2937 !important; /* Sfondo riga scuro */
}

#ap-products-table tbody tr:hover {
    background: rgba(255, 140, 0, 0.15) !important; /* Sfondo arancione trasparente al hover */
    transform: scale(1.01);
    transition: all 0.2s ease;
}

#ap-products-table tbody tr:hover td {
    color: #ffffff !important; /* Bianco al hover */
}

/* Bottoni Modifica/Elimina nella tabella */
.ap-edit,
.ap-del {
    display: inline-block;
    border: none;
    padding: 8px 14px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 700;
    font-size: .9em;
    color: #fff;
    margin-right: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,.12);
    transition: transform .15s ease, box-shadow .2s ease, background-color .25s ease;
}

/* Modifica = blu */
.ap-edit { background: #1e88e5; }
.ap-edit:hover { background: #1976d2; transform: translateY(-1px); }

/* Elimina = rosso */
.ap-del { background: #e53935; }
.ap-del:hover { background: #c62828; transform: translateY(-1px); }


#admin-remove-points-btn:hover {
    background-color: #b71c1c; /* Rosso più scuro quando ci passi sopra */
}

/* DARK DASHBOARD - Messaggi Admin */
#admin-message {
    margin-top: 15px;
    font-weight: bold;
    color: #ffffff !important; /* Bianco per messaggi */
    padding: 12px;
    background: rgba(255, 140, 0, 0.2) !important; /* Sfondo arancione trasparente */
    border: 1px solid rgba(255, 140, 0, 0.4) !important; /* Bordo arancione */
    border-radius: 8px;
}

/* DARK DASHBOARD - Textarea con stili inline */
#ap-product-info,
#mp-product-info,
#edit-info-textarea,
textarea[id*="product-info"],
textarea[id*="proposal"],
textarea {
    background: #111827 !important; /* Sfondo scuro */
    color: #ffffff !important; /* Testo bianco */
    border: 2px solid #374151 !important; /* Bordo grigio scuro */
    border-radius: 8px;
}

#ap-product-info:focus,
#mp-product-info:focus,
#edit-info-textarea:focus,
textarea[id*="product-info"]:focus,
textarea[id*="proposal"]:focus,
textarea:focus {
    border-color: #ff8c00 !important; /* Arancione al focus */
    box-shadow: 0 0 12px rgba(255, 140, 0, 0.4) !important; /* Glow arancione */
    outline: none !important;
}

#ap-product-info::placeholder,
#mp-product-info::placeholder,
#edit-info-textarea::placeholder,
textarea[id*="product-info"]::placeholder,
textarea[id*="proposal"]::placeholder,
textarea::placeholder {
    color: #9ca3af !important; /* Grigio chiaro per placeholder */
    opacity: 0.7;
}

/* DARK DASHBOARD - Select con stili inline */
#orders-status-filter,
#category-filter,
#availability-category-filter,
select[id*="filter"],
select[id*="status"],
select[id*="category"],
select {
    background: #1f2937 !important; /* Sfondo scuro */
    color: #ffffff !important; /* Testo bianco */
    border: 2px solid #374151 !important; /* Bordo grigio scuro */
}

#orders-status-filter:focus,
#category-filter:focus,
#availability-category-filter:focus,
select[id*="filter"]:focus,
select[id*="status"]:focus,
select[id*="category"]:focus,
select:focus {
    border-color: #ff8c00 !important; /* Arancione al focus */
    box-shadow: 0 0 12px rgba(255, 140, 0, 0.4) !important; /* Glow arancione */
    outline: none !important;
    background: #1f2937 !important; /* Mantiene sfondo scuro */
    color: #ffffff !important; /* Mantiene testo bianco */
}

/* DARK DASHBOARD - Option dentro select - FONDAMENTALE */
select option {
    background-color: #1f2937 !important; /* Sfondo scuro per opzioni */
    color: #ffffff !important; /* Testo bianco */
    padding: 8px 12px;
}

select option:hover,
select option:checked {
    background-color: rgba(255, 140, 0, 0.3) !important; /* Sfondo arancione trasparente quando selezionato */
    color: #ffffff !important; /* Testo bianco */
}

select option:disabled {
    background-color: #111827 !important; /* Sfondo più scuro per opzioni disabilitate */
    color: #9ca3af !important; /* Grigio chiaro per testo disabilitato */
}

/* DARK DASHBOARD - Card Add Product */
#add-product {
    background: #1f2937 !important; /* Card scura */
    border: 1px solid rgba(255, 140, 0, 0.3) !important; /* Bordo arancione */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important; /* Ombra scura */
}

#add-product h3,
#ap-form-title {
    color: #ffffff !important; /* Bianco o Arancione */
}

#add-product h3[style*="color: #495057"] {
    color: #ffffff !important; /* Override inline style */
}

/* DARK DASHBOARD - Small text */
small {
    color: #9ca3af !important; /* Grigio chiaro per small text */
}

/* DARK DASHBOARD - Pannelli Gestione Prezzi e Disponibilità */
#bulk-price-manager,
#availability-manager {
    background: #111827 !important; /* Sfondo scuro */
    color: #ffffff !important; /* Testo bianco */
}

#bulk-price-manager h3,
#availability-manager h3 {
    color: #ffffff !important; /* Titoli bianchi */
}

#bulk-price-manager p,
#availability-manager p,
#prices-initial-message,
#availability-initial-message,
#prices-loading p,
#availability-loading p {
    color: #d1d5db !important; /* Testo grigio chiaro */
}

/* DARK DASHBOARD - Icone nei pannelli (filtro per rendere bianche) */
#bulk-price-manager div[style*="font-size: 3em"],
#availability-manager div[style*="font-size: 3em"],
#prices-initial-message div,
#availability-initial-message div {
    filter: brightness(1.2) !important; /* Aumenta luminosità icone */
}

/* DARK DASHBOARD - Controlli Bulk */
#bulk-selection-controls {
    background: #1f2937 !important; /* Sfondo scuro */
    border-color: #ffd700 !important; /* Bordo oro per prezzi */
}

#bulk-selection-controls label {
    color: #ffffff !important; /* Testo bianco */
}

#bulk-actions-title {
    color: #ffffff !important; /* Titolo bianco */
}

/* DARK DASHBOARD - Bordo identificativo per pannelli */
#bulk-price-manager {
    border-color: #ffd700 !important; /* Bordo Giallo/Oro */
    position: static !important;      /* Stai nel flusso normale */
    z-index: auto !important;
    margin-bottom: 60px !important;   /* Spazio extra per separare dalle disponibilità */
    clear: both !important;
    padding-bottom: 40px !important;  /* Riserva spazio anche quando il container è vuoto */
}

#availability-manager {
    border-color: #4CAF50 !important; /* Bordo Verde Neon */
    position: static !important;
    z-index: 1 !important;
    margin-top: 40px !important;      /* Stacca visivamente dal blocco prezzi */
    clear: both !important;
}

/* Mantieni sempre un'area minima per i prezzi, così il blocco disponibilità non sale quando carichi */
#prices-container {
    min-height: 460px !important;
    margin-bottom: 60px !important;
    max-height: 70vh !important;
    overflow-y: auto !important;
}


/* Stile per le opzioni di acquisto dei software */
.versioni {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 10px 15px; /* Aggiunto margine per distanziare */
    padding: 0;
}

/* DARK GAMING MODE - Versioni label nella sezione admin */
.versioni label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 0.9em;
    padding: 5px; /* Aggiunto un po' di padding */
    border-radius: 5px;
    transition: background-color 0.2s;
    background: #1f2937 !important; /* Grigio scuro per dark mode */
    color: #ffffff !important; /* Testo bianco */
    border: 1px solid rgba(255, 255, 255, 0.1); /* Bordo sottile */
}

.versioni label:hover {
    background-color: rgba(255, 140, 0, 0.3) !important; /* Arancione trasparente al hover */
    color: #ffffff !important; /* Mantiene bianco */
}

.color-box {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%; /* Reso tondo per coerenza */
}

.color-box.red { background-color: #f44336; }
.color-box.blue { background-color: #2196F3; }
.color-box.green { background-color: #4CAF50; }
.color-box.orange { background-color: #FF9800; }


/* ========================================
DARK GAMING MODE - DARK DASHBOARD ADMIN
======================================== */

/* Layout Generale - Sfondo Blu Notte Scuro */
#admin-panel {
    margin: 40px auto;
    padding: 30px;
    background: #0b0f19 !important; /* Blu Notte Scuro */
    border: 2px solid rgba(255, 140, 0, 0.4) !important; /* Bordo arancione */
    border-radius: 15px;
    max-width: 1200px;
    width: 100%;
    text-align: left;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), 
                0 0 20px rgba(255, 140, 0, 0.1) !important; /* Ombra scura + glow arancione */
}

#admin-panel h2 {
    color: #ff8c00 !important; /* Arancione o Bianco */
    margin-bottom: 30px;
    text-align: center;
    font-size: 1.8em;
    border-bottom: 3px solid rgba(255, 140, 0, 0.5) !important; /* Bordo arancione */
    padding-bottom: 15px;
    text-shadow: 0 2px 8px rgba(255, 140, 0, 0.4); /* Glow arancione */
}

#admin-panel h3 {
    color: #ffffff !important; /* Bianco per titoli sezioni */
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.admin-main-container {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 40px;
    margin-top: 30px;
}

/* DARK DASHBOARD - Card Form Container */
#ap-form-container {
    background: #1f2937 !important; /* Card scura */
    padding: 25px;
    border-radius: 12px;
    border: 1px solid rgba(255, 140, 0, 0.3) !important; /* Bordo arancione sottile */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), 
                0 0 15px rgba(255, 140, 0, 0.1) !important; /* Ombra scura + glow arancione */
    max-width: 1000px;
    margin: 0 auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#ap-form-title {
    color: #ff8c00 !important; /* Arancione */
    font-size: 1.4em;
    margin-bottom: 20px;
    text-align: center;
    width: 100%;
    text-shadow: 0 2px 6px rgba(255, 140, 0, 0.3);
}

#ap-product-form {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    font-weight: bold;
}

.form-row {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
}

.form-group {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* DARK DASHBOARD - Labels */
.form-group label {
    font-weight: bold;
    color: #ffffff !important; /* Bianco per leggibilità */
    margin-bottom: 5px;
    font-size: 0.95em;
}

/* DARK DASHBOARD - Input e Select */
.form-group input,
.form-group select,
#admin-panel input,
#admin-panel select {
    padding: 12px !important;
    border: 2px solid #374151 !important; /* Grigio scuro */
    border-radius: 8px;
    font-size: 1em;
    background: #111827 !important; /* Grigio molto scuro/Nero */
    color: #ffffff !important; /* Testo bianco */
    transition: border-color 0.3s, box-shadow 0.3s;
}

.form-group input::placeholder,
.form-group select::placeholder,
#admin-panel input::placeholder,
#admin-panel select::placeholder {
    color: #9ca3af !important; /* Grigio chiaro per placeholder */
    opacity: 0.7;
}

.form-group input:focus,
.form-group select:focus,
#admin-panel input:focus,
#admin-panel select:focus {
    outline: none !important;
    border-color: #ff8c00 !important; /* Arancione al focus */
    box-shadow: 0 0 12px rgba(255, 140, 0, 0.4) !important; /* Glow arancione */
    background: #111827 !important; /* Mantiene sfondo scuro */
    color: #ffffff !important; /* Mantiene testo bianco */
}

/* DARK DASHBOARD - Sezione Prezzi */
.price-section {
    display: block;
    background: #1f2937 !important; /* Card scura */
    padding: 15px;
    border-radius: 8px;
    border-left: 4px solid #ff8c00 !important; /* Bordo arancione */
    border: 1px solid rgba(255, 140, 0, 0.3) !important; /* Bordo completo arancione */
    margin: 15px 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.price-section h4 {
    color: #ff8c00 !important; /* Arancione */
    margin-bottom: 10px;
    font-size: 1.1em;
    text-shadow: 0 2px 4px rgba(255, 140, 0, 0.3);
}

.form-buttons {
    display: flex;
    gap: 10px;
    margin-top: 25px;
    justify-content: center;
}

/* DARK DASHBOARD - Pulsanti Admin */
#ap-save, #ap-reset, #ap-view-promo-btn, #ap-view-upcoming-btn,
#load-proposals-btn, #create-proposal-btn, #test-proposal-btn,
#admin-add-points-btn, #admin-remove-points-btn {
    padding: 12px 25px;
    border: 2px solid transparent !important; /* Bordo trasparente di default */
    border-radius: 10px;
    cursor: pointer;
    font-weight: bold;
    font-size: 1em;
    transition: all 0.3s ease;
    min-width: 120px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important; /* Ombra scura per risaltare */
}

#ap-save {
    background: linear-gradient(135deg, #43a047, #66bb6a) !important;
    color: white;
    border-color: rgba(67, 160, 71, 0.5) !important;
    box-shadow: 0 4px 15px rgba(67, 160, 71, 0.4), 
                0 0 10px rgba(67, 160, 71, 0.2) !important; /* Glow verde */
}

#ap-save:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(67, 160, 71, 0.5), 
                0 0 15px rgba(67, 160, 71, 0.3) !important; /* Glow più intenso */
}

#ap-reset {
    background: linear-gradient(135deg, #ff7043, #ff8a65) !important;
    color: white;
    border-color: rgba(255, 112, 67, 0.5) !important;
    box-shadow: 0 4px 15px rgba(255, 112, 67, 0.4), 
                0 0 10px rgba(255, 112, 67, 0.2) !important; /* Glow arancione */
}

#ap-reset:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 112, 67, 0.5), 
                0 0 15px rgba(255, 112, 67, 0.3) !important; /* Glow più intenso */
}

/* DARK DASHBOARD - Container Tabella */
#ap-table-container {
    background: #1f2937 !important; /* Card scura */
    padding: 25px;
    border-radius: 12px;
    border: 1px solid rgba(255, 140, 0, 0.3) !important; /* Bordo arancione */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), 
                0 0 15px rgba(255, 140, 0, 0.1) !important; /* Ombra scura + glow */
    overflow: hidden;
}

.table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.table-header h3 {
    color: #ff8c00 !important; /* Arancione */
    font-size: 1.4em;
    margin: 0;
    text-shadow: 0 2px 6px rgba(255, 140, 0, 0.3);
}

#products-count {
    color: #d1d5db !important; /* Grigio chiaro */
    font-size: 0.9em;
    font-style: italic;
}

/* Regola duplicata rimossa - usa quella sopra */

.category-badge {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.8em;
    font-weight: bold;
    color: white;
    text-align: center;
    display: inline-block;
    min-width: 80px;
}

.category-badge.nintendo_switch { background: #e60012; }
.category-badge.switch2 { background: #0066cc; }
.category-badge.ps5 { background: #0070d1; }
.category-badge.software { background: #28a745; }

/* DARK DASHBOARD - Statistiche Ordini */
#orders-stats {
    background: #1f2937 !important; /* Card scura */
    border: 1px solid rgba(255, 140, 0, 0.3) !important; /* Bordo arancione */
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

#orders-stats > div {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    text-align: center;
}

#orders-stats > div > div {
    background: #111827 !important; /* Sfondo scuro per card statistiche */
    padding: 15px;
    border-radius: 8px;
    border: 1px solid rgba(255, 140, 0, 0.2) !important; /* Bordo arancione sottile */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

#orders-stats > div > div > div:first-child {
    font-size: 2em;
    font-weight: bold;
    color: #ff8c00 !important; /* Arancione per numeri */
    text-shadow: 0 2px 6px rgba(255, 140, 0, 0.4);
}

#orders-stats > div > div > div:last-child {
    color: #d1d5db !important; /* Grigio chiaro per etichette */
    font-size: 0.9em;
}

/* DARK DASHBOARD - Container Ordini */
#orders-container {
    background: #1f2937 !important; /* Card scura */
    border: 1px solid rgba(255, 140, 0, 0.3) !important; /* Bordo arancione */
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

#orders-loading {
    text-align: center;
    padding: 40px;
}

#orders-loading p {
    color: #d1d5db !important; /* Grigio chiaro */
}

#orders-list {
    padding: 20px;
    color: #d1d5db !important; /* Grigio chiaro per testo */
}

.action-buttons {
    white-space: nowrap;
}

.ap-edit, .ap-del {
    display: inline-block;
    border: none;
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
    font-size: 0.85em;
    margin-right: 5px;
    transition: all 0.2s ease;
    min-width: 80px;
}

.ap-edit {
    background: linear-gradient(135deg, #2196f3, #42a5f5);
    color: white;
    box-shadow: 0 2px 8px rgba(33, 150, 243, 0.3);
}

.ap-edit:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(33, 150, 243, 0.4);
}

.ap-del {
    background: linear-gradient(135deg, #f44336, #ef5350);
    color: white;
    box-shadow: 0 2px 8px rgba(244, 67, 54, 0.3);
}

.ap-del:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(244, 67, 54, 0.4);
}

.message {
    padding: 12px 20px;
    border-radius: 8px;
    margin: 15px 0;
    font-weight: bold;
    text-align: center;
    transition: all 0.3s ease;
}

.message.success {
    background: linear-gradient(135deg, #d4edda, #c3e6cb);
    color: #155724;
    border: 2px solid #c3e6cb;
}

.message.error {
    background: linear-gradient(135deg, #f8d7da, #f1b2b7);
    color: #721c24;
    border: 2px solid #f1b2b7;
}

.message.info {
    background: linear-gradient(135deg, #d1ecf1, #bee5eb);
    color: #0c5460;
    border: 2px solid #bee5eb;
}

@media (max-width: 1024px) {
    .admin-main-container {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .form-row {
        flex-direction: column;
    }
}

/* ====== STILI BARRA RICERCA ADMIN ====== */
/* DARK MODE - Search Result Item */
.search-result-item {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important; /* Bordo grigio chiaro */
    transition: background-color 0.2s;
    background-color: transparent !important; /* Sfondo trasparente di default */
}
.search-result-item:last-child {
    border-bottom: none;
}
.search-result-item:hover {
    background-color: #374151 !important; /* Grigio scuro al hover (bg-gray-700) */
}
.search-result-item img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    margin-right: 12px;
    border-radius: 4px;
}
.search-result-item .product-info {
    display: flex;
    flex-direction: column;
}
/* DARK MODE - Product Title e Category */
.search-result-item .product-title {
    font-weight: bold;
    color: #ffffff !important; /* Testo bianco */
}
.search-result-item .product-category {
    font-size: 0.85em;
    color: #d1d5db !important; /* Grigio chiaro (light gray) */
}
/* DARK MODE - No Results Message (prima occorrenza) */
.ap-search-no-results {
    padding: 15px;
    color: #d1d5db !important; /* Grigio chiaro */
    text-align: center;
}

/* PROMOZIONE e PROSSIMAMENTE - Badge in alto a destra */
.promo-banner,
.upcoming-banner {
  position: absolute;
  top: 30px;
  right: -40px;
  color: white;
  padding: 5px 30px;
  font-size: 0.9em;
  font-weight: bold;
  text-transform: uppercase;
  transform: rotate(45deg);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  z-index: 3;
  text-align: center;
  width: 170px;
}

.promo-banner {
  background-color: #d32f2f; /* Rosso per PROMOZIONE */
}

.upcoming-banner {
  background-color: #0288d1; /* Blu acceso per PROSSIMAMENTE */
}

/* Serve per nascondere la parte della striscia che esce dalla card */
.game-card {
  overflow: hidden;
}

/* ====== STILI PULSANTE PROMO NELLA TABELLA ADMIN ====== */
.ap-promo-toggle {
    border: none;
    padding: 8px 12px;
    border-radius: 20px;
    cursor: pointer;
    font-weight: bold;
    font-size: 0.8em;
    color: white;
    transition: all 0.3s ease;
    width: 100px; /* Larghezza fissa per allineamento */
}

.ap-promo-toggle.ap-promo-on {
    background: linear-gradient(135deg, #d32f2f, #f44336); /* Gradiente Rosso per ATTIVA */
    box-shadow: 0 2px 8px rgba(211, 47, 47, 0.4);
}

.ap-promo-toggle.ap-promo-off {
    background: linear-gradient(135deg, #757575, #9e9e9e); /* Gradiente Grigio per NON ATTIVA */
    box-shadow: 0 2px 8px rgba(117, 117, 117, 0.3);
}

.ap-promo-toggle:hover {
    transform: translateY(-2px);
}

/* ========================================
   STILE MENU ADMIN DROPDOWN
   ======================================== */

.admin-menu-container {
  position: fixed;
  bottom: 95px;
  left: 20px;
  z-index: 999;
}

/* DARK DASHBOARD - Pulsante Toggle Menu Admin */
.admin-menu-toggle {
  background: linear-gradient(135deg, #ff8c00, #ff6f00) !important; /* Arancione */
  color: #fff;
  border: 2px solid rgba(255, 140, 0, 0.6) !important; /* Bordo arancione */
  width: 55px;
  height: 55px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 15px rgba(255, 140, 0, 0.4), 
              0 0 20px rgba(255, 140, 0, 0.2) !important; /* Glow arancione */
  transition: all 0.3s ease;
  font-size: 1.2em;
  position: relative;
}

.admin-menu-toggle i {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  font-size: 1.2em !important;
}

.admin-menu-toggle:hover {
  background: linear-gradient(135deg, #ff6f00, #ff8c00) !important; /* Arancione invertito */
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 6px 20px rgba(255, 140, 0, 0.6), 
              0 0 25px rgba(255, 140, 0, 0.3) !important; /* Glow più intenso */
}

.admin-chevron {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 0.7em;
  transition: transform 0.3s ease;
}

.admin-menu-container.open .admin-chevron {
  transform: rotate(180deg);
}

/* DARK DASHBOARD - Sidebar Admin Dropdown */
.admin-dropdown {
  position: absolute;
  bottom: 5px;
  left: 0;
  background: #1f2937 !important; /* Sfondo scuro */
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), 
              0 0 20px rgba(255, 140, 0, 0.2) !important; /* Ombra scura + glow arancione */
  border: 2px solid rgba(255, 140, 0, 0.4) !important; /* Bordo arancione */
  min-width: 250px;
  max-height: 55vh;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px) scale(0.95);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 10000;
}

.admin-menu-container.open .admin-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

/* DARK DASHBOARD - Header Sidebar */
.admin-dropdown-header {
  background: linear-gradient(135deg, #ff8c00, #ff6f00) !important; /* Arancione */
  color: white;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: bold;
  font-size: 0.9em;
  border-radius: 10px 10px 0 0;
  box-shadow: 0 2px 8px rgba(255, 140, 0, 0.3);
}

/* DARK DASHBOARD - Voci Menu Sidebar */
.admin-dropdown-item {
  width: 100%;
  background: transparent !important; /* Sfondo trasparente di default */
  border: none;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.9em;
  color: #ffffff !important; /* Bianco per voci menu */
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important; /* Bordo grigio chiaro */
}

.admin-dropdown-item:last-child {
  border-bottom: none;
}

.admin-dropdown-item:hover {
  background: rgba(255, 140, 0, 0.2) !important; /* Sfondo arancione trasparente al hover */
  color: #ffffff !important; /* Mantiene bianco */
  transform: translateX(4px);
}

/* DARK DASHBOARD - Voce attiva/selezionata (sovrascrive stili inline) */
.admin-dropdown-item.active,
.admin-dropdown-item[style*="background"],
.admin-dropdown-item[style*="rgba(255, 140, 0"],
.admin-dropdown-item[style*="linear-gradient"] {
  background: rgba(255, 140, 0, 0.3) !important; /* Sfondo arancione trasparente */
  color: #ffffff !important; /* Testo bianco */
  border-left: 3px solid #ff8c00 !important; /* Bordo arancione a sinistra */
}

.admin-dropdown-item i {
  width: 18px;
  text-align: center;
  color: #ff8c00 !important; /* Arancione per icone */
}

.admin-dropdown-item:hover i {
  color: #ffffff !important; /* Bianco al hover */
  transform: scale(1.1);
}

/* DARK DASHBOARD - Testo nelle voci menu */
.admin-dropdown-item span {
  color: #ffffff !important; /* Bianco per testo */
}

.admin-dropdown-item:hover span {
  color: #ffffff !important; /* Mantiene bianco al hover */
}

/* DARK DASHBOARD - Pulsante attivo */
.admin-menu-toggle.active {
  background: linear-gradient(135deg, #ff8c00, #ff6f00) !important; /* Mantiene arancione */
  transform: rotate(180deg);
  box-shadow: 0 6px 25px rgba(255, 140, 0, 0.6), 
              0 0 30px rgba(255, 140, 0, 0.4) !important; /* Glow intenso quando attivo */
}

/* Adattamento per schermi piccoli */
@media (max-width: 768px) {
  .admin-menu-container {
    left: 10px;
    bottom: 85px;
  }
  
  .admin-menu-toggle {
    transform: scale(0.9);
  }
  
  .admin-dropdown {
    min-width: 200px;
    font-size: 0.85em;
  }
}

/* ========================================
   STILI DROPDOWN PROMO/UPCOMING
   ======================================== */

/* DARK MODE - Dropdown Item */
.dropdown-item {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important; /* Bordo grigio chiaro */
  background: transparent !important; /* Sfondo trasparente */
  transition: background-color 0.2s ease;
  color: #ffffff !important; /* Testo bianco */
}

.dropdown-item:hover {
  background-color: #374151 !important; /* Grigio scuro al hover (bg-gray-700) */
}

.dropdown-item:last-child {
  border-bottom: none;
}

.dropdown-item-image {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 4px;
  margin-right: 12px;
  flex-shrink: 0;
}

/* DARK MODE - Dropdown Item Title */
.dropdown-item-title {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
  color: #ffffff !important; /* Testo bianco */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dropdown-remove-btn {
  background: #ff5722;
  color: white;
  border: none;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.dropdown-remove-btn:hover {
  background: #d84315;
  transform: scale(1.1);
}

/* DARK MODE - Dropdown Empty */
.dropdown-empty {
  padding: 20px;
  text-align: center;
  color: #d1d5db !important; /* Grigio chiaro */
  font-style: italic;
  background: transparent !important; /* Sfondo trasparente */
}

#promo-dropdown,
#upcoming-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #1f2937;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  max-height: 300px;
  overflow-y: auto;
  z-index: 1000;
  display: none;
}

/* ========================================
   STILE PULSANTI EXTRA ADMIN (PROMO & DELETE)
   ======================================== */

.edit-actions-container {
  margin-top: 15px;
  padding: 12px;
  border-top: 2px dashed #ffe0b2;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
  max-width: 100%;
  overflow: hidden;
}

.edit-actions-container button {
  padding: 8px 12px;
  border: none;
  border-radius: 8px;
  font-weight: bold;
  font-size: 0.85em;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#ap-promo-toggle-btn {
  background: linear-gradient(135deg, #ffc107, #ff9800);
  color: white;
}

#ap-promo-toggle-btn.on-sale {
  background: linear-gradient(135deg, #8bc34a, #4caf50); /* Verde quando in promo */
}


#ap-delete-btn {
  background: linear-gradient(135deg, #f44336, #d32f2f);
  color: white;
}

.edit-actions-container button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.2);
}

/* ========================================
   STILE LISTA RAPIDA "PROSSIMAMENTE"
   ======================================== */

.upcoming-container {
    position: relative; /* Necessario per posizionare la lista */
    flex: 1;
}

.upcoming-main-button {
    display: flex;
    width: 100%;
}

#ap-upcoming-btn {
    flex-grow: 1; /* Occupa lo spazio disponibile */
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

#ap-view-upcoming-btn {
    padding: 12px;
    border: none;
    border-radius: 0 10px 10px 0;
    background: #0288d1; /* Blu per la freccia */
    color: white;
    cursor: pointer;
    font-size: 0.8em;
    transition: background-color 0.3s;
    width: 40px; /* Larghezza fissa */
}

#ap-view-upcoming-btn:hover {
    background-color: #0277bd;
}

.upcoming-list {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: #1f2937;
    border: 1px solid #ddd;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 8px 15px rgba(0,0,0,0.1);
    z-index: 100;
    max-height: 200px;
    overflow-y: auto;
}

.upcoming-list-item {
    padding: 10px 15px;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    font-size: 0.9em;
    color: #ffffff;
    display: block;
    text-align: left;
}

/* Effetto fade-out per rimozione dalla lista */
.upcoming-list-item.fade-out {
  opacity: 0;
  transform: translateX(6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.upcoming-list-item:hover {
    background-color: #1f2937;
    color: #0288d1;
}

.upcoming-list-item:last-child {
    border-bottom: none;
}

/* ========================================
   STILE PULSANTE E LISTA "PROSSIMAMENTE"
   ======================================== */

#ap-upcoming-btn {
  background: linear-gradient(135deg, #673ab7, #9575cd); /* Viola */
  color: white;
}

#ap-upcoming-btn.is-upcoming {
  background: linear-gradient(135deg, #03a9f4, #4fc3f7); /* Blu/Azzurro quando attivo */
}

.upcoming-container {
    position: relative; /* Necessario per posizionare la lista */
    flex: 1;
}

.upcoming-main-button {
    display: flex;
    width: 100%;
}

#ap-upcoming-btn {
    flex-grow: 1; /* Occupa lo spazio disponibile */
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

#ap-view-upcoming-btn {
    padding: 12px;
    border: none;
    border-radius: 0 10px 10px 0;
    background: #0288d1; /* Blu per la freccia */
    color: white;
    cursor: pointer;
    font-size: 0.8em;
    transition: background-color 0.3s;
    width: 40px; /* Larghezza fissa */
}

#ap-view-upcoming-btn:hover {
    background-color: #0277bd;
}

.upcoming-list {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: #1f2937;
    border: 1px solid #ddd;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 8px 15px rgba(0,0,0,0.1);
    z-index: 100;
    max-height: 200px;
    overflow-y: auto;
}

.upcoming-list-item {
    padding: 10px 15px;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    font-size: 0.9em;
    color: #ffffff;
    display: block;
    text-align: left;
}

.upcoming-list-item:hover {
    background-color: #1f2937;
    color: #0288d1;
}

.upcoming-list-item:last-child {
    border-bottom: none;
}

/* ========================================
   STILI PULSANTI EXTRA ADMIN (PROMO, DELETE, UPCOMING)
   ======================================== */

#ap-promo-toggle-btn.on-sale {
  background: linear-gradient(135deg, #8bc34a, #4caf50); /* Verde quando in promo */
}

/* STILE PULSANTE E LISTA "PROSSIMAMENTE" */

#ap-upcoming-btn {
  background: linear-gradient(135deg, #673ab7, #9575cd); /* Viola */
  color: white;
}

#ap-upcoming-btn.is-upcoming {
  background: linear-gradient(135deg, #03a9f4, #4fc3f7); /* Blu/Azzurro quando attivo */
}

.upcoming-container {
    position: relative; /* Necessario per posizionare la lista */
    flex: 1;
}

.upcoming-main-button {
    display: flex;
    width: 100%;
}

#ap-upcoming-btn {
    flex-grow: 1; /* Occupa lo spazio disponibile */
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

#ap-view-upcoming-btn {
    padding: 12px;
    border: none;
    border-radius: 0 10px 10px 0;
    background: #0288d1; /* Blu per la freccia */
    color: white;
    cursor: pointer;
    font-size: 0.8em;
    transition: background-color 0.3s;
    width: 40px; /* Larghezza fissa */
}

#ap-view-upcoming-btn:hover {
    background-color: #0277bd;
}

.upcoming-list {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: #1f2937;
    border: 1px solid #ddd;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 8px 15px rgba(0,0,0,0.1);
    z-index: 100;
    max-height: 200px;
    overflow-y: auto;
}

.upcoming-list-item {
    padding: 10px 15px;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    font-size: 0.9em;
    color: #ffffff;
    display: block;
    text-align: left;
}

.upcoming-list-item:hover {
    background-color: #1f2937;
    color: #0288d1;
}

.upcoming-list-item:last-child {
    border-bottom: none;
}



/* Etichetta Prossimamente sulle card dei giochi */
.upcoming-banner {
  position: absolute;
  top: 32px; /* MODIFICA FINALE: Calibrato in verticale */
  right: -52px; /* MODIFICA FINALE: Spostato più all'esterno */
  background-color: #0288d1;
  color: white;
  padding: 5px 30px;
  font-size: 0.9em;
  font-weight: bold;
  text-transform: uppercase;
  transform: rotate(45deg);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  z-index: 3;
  text-align: center;
  width: 200px;
  overflow: hidden;
}

.ap-upcoming {
  background-color: #0288d1;
  color: white;
  border: none;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 0.85em;
  cursor: pointer;
  margin-left: 6px;
  transition: background 0.2s;
}
.ap-upcoming:hover {
  background-color: #039be5;
}

.ap-upcoming {
  background-color: #0288d1;
  color: white;
  border: none;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 0.85em;
  cursor: pointer;
  margin-left: 6px;
  transition: background 0.2s;
}

.ap-upcoming:hover {
  background-color: #039be5;
}

/* ========================================
   STILI PER SUGGERIMENTI RICERCA E FILTRI
   ======================================== */

/* Contenitore dei suggerimenti (stile Amazon) */
#search-suggestions {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #1f2937;
    border: 1px solid #ddd;
    border-top: none;
    border-radius: 0 0 12px 12px;
    z-index: 9999;
    max-height: 350px;
    overflow-y: auto;
    box-shadow: 0 8px 15px rgba(0,0,0,0.1);
}

.suggestion-item {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
}

.suggestion-item:last-child {
    border-bottom: none;
}

.suggestion-item:hover {
    background-color: #1f2937;
}

.suggestion-item img {
    width: 45px;
    height: 45px;
    object-fit: contain;
    margin-right: 15px;
    border-radius: 4px;
}

.suggestion-item span {
    font-size: 1em;
    color: #ffffff;
    font-weight: 500;
}

/* Pulsanti di filtro */
.filter-buttons {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}

.filter-btn {
    padding: 10px 20px;
    border: 2px solid transparent;
    border-radius: 20px;
    background-color: #1f2937;
    color: #555;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
}

.filter-btn:hover {
    background-color: #e0e0e0;
    transform: translateY(-2px);
}

.filter-btn.active {
    background-color: rgba(255, 140, 0, 0.1);
    border-color: #ff8c00;
    color: #ff8c00;
}

.filter-btn.reset-btn {
    background-color: #d32f2f;
    color: white;
}

/* "X" per rimuovere badge (visibile solo all'admin) */
.remove-badge-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 20px;
    height: 20px;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 20px;
    z-index: 5;
    opacity: 0;
    transition: opacity 0.3s;
}

.game-card:hover .remove-badge-btn {
    opacity: 1;
}

/* ========================================
   STILI PER CATEGORIA NEI SUGGERIMENTI
   ======================================== */

.suggestion-item .product-details {
    display: flex;
    flex-direction: column;
}

.suggestion-item .product-title {
    font-size: 1em;
    color: #ffffff;
    font-weight: 500;
}

.suggestion-item .product-category {
    font-size: 0.85em;
    color: #888;
    margin-top: 2px;
    font-style: italic;
}

/* Stile anche per i risultati del pannello admin */
#ap-search-results .product-category {
    text-transform: capitalize;
}

/* ========================================
   CODICE PER CHIUDERE INFOBOX CLICCANDO FUORI
   (Senza cambiare l'estetica)
   ======================================== */
.overlay {
    position: fixed; /* Si fissa sullo schermo */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: transparent; /* IMPORTANTE: Lo rende invisibile */
    z-index: 9990; /* Si posiziona dietro la finestra "Info" ma sopra al resto */
    display: none; /* Nascosto di default */
}


/* ========================================
   STILE SUGGERIMENTI RICERCA PANNELLO ADMIN
   ======================================== */

/* DARK MODE - Search Results Container */
#ap-search-results,
#mp-search-results {
    border-top: none;
    border-radius: 0 0 12px 12px;
    box-shadow: 0 8px 15px rgba(0,0,0,0.3) !important;
    max-height: 250px;
    overflow-y: auto;
    background-color: #1f2937 !important; /* Grigio scuro (bg-gray-800) */
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.search-result-item {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    cursor: pointer;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important; /* Bordo grigio chiaro */
    background-color: transparent !important;
    transition: background-color 0.2s;
}

.search-result-item:last-child {
    border-bottom: none;
}

.search-result-item:hover {
    background-color: #374151 !important; /* Grigio scuro al hover (bg-gray-700) */
}

.search-result-item img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    margin-right: 15px;
    border-radius: 4px;
}

.search-result-item .product-info {
    display: flex;
    flex-direction: column;
}

.search-result-item .product-title {
    font-weight: bold;
    color: #ffffff !important; /* Testo bianco */
}

.search-result-item .product-category {
    font-size: 0.85em;
    color: #d1d5db !important; /* Grigio chiaro (light gray) */
    text-transform: capitalize;
}

.ap-search-no-results {
    padding: 15px;
    color: #d1d5db !important; /* Grigio chiaro */
    text-align: center;
}

/* ========================================
   STILE PULSANTI ADMIN ATTIVI (PROMO/UPCOMING)
   ======================================== */

#ap-promo-toggle-btn.on-sale {
  background: linear-gradient(135deg, #8bc34a, #4caf50); /* Gradiente Verde quando in promo */
  color: white;
}

#ap-upcoming-btn.is-upcoming {
  background: linear-gradient(135deg, #03a9f4, #4fc3f7); /* Gradiente Blu/Azzurro quando attivo */
  color: white;
}

/* ========================================
   STILI PER LISTE PROMO/UPCOMING E INDICATORI
   ======================================== */

/* Stile base per i contenitori dei pulsanti speciali */
.promo-container, .upcoming-container {
    position: relative;
    flex: 1;
}

/* Stile base per i pulsanti principali (Promo/Upcoming) */
.promo-main-button, .upcoming-main-button {
    display: flex;
    width: 100%;
}

/* Stile per i pulsanti di azione specifici */
#ap-promo-toggle-btn, #ap-upcoming-btn {
    flex-grow: 1;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

/* Stile per i pulsanti freccia (▼) */
#ap-view-promo-btn, #ap-view-upcoming-btn {
    padding: 12px;
    border: none;
    border-radius: 0 10px 10px 0;
    color: white;
    cursor: pointer;
    font-size: 0.8em;
    transition: background-color 0.3s;
    width: 40px;
}

#ap-view-promo-btn { background: #ff9800; }
#ap-view-promo-btn:hover { background: #e67e22; }

#ap-view-upcoming-btn { background: #673ab7; }
#ap-view-upcoming-btn:hover { background: #512da8; }

/* Stile per le liste a discesa */
.promo-list, .upcoming-list {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: #1f2937;
    border: 1px solid #ddd;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 8px 15px rgba(0,0,0,0.1);
    z-index: 100;
    max-height: 200px;
    overflow-y: auto;
}

/* Stile per gli elementi nelle liste */
.promo-list-item, .upcoming-list-item {
    padding: 10px 15px;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    font-size: 0.9em;
    color: #ffffff;
    display: block;
    text-align: left;
}
.promo-list-item:hover { background-color: #fff8e8; }
.upcoming-list-item:hover { background-color: #f5f5f5; }


/* Stile per le icone di stato nei suggerimenti di ricerca */
.search-result-item .product-status-icons {
    margin-left: auto; /* Spinge le icone a destra */
    display: flex;
    gap: 8px;
    font-size: 1.2em;
}

/* ========================================
   STILI PER SELEZIONE MULTIPLA IN LISTE ADMIN
   ======================================== */

/* Stili specifici per i pulsanti visualizza liste */
#ap-view-promo-btn {
    background: linear-gradient(135deg, #ff9800, #f57c00);
    color: white;
    box-shadow: 0 4px 15px rgba(255, 152, 0, 0.3);
}

#ap-view-promo-btn:hover {
    background: linear-gradient(135deg, #f57c00, #e65100);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 152, 0, 0.4);
}

#ap-view-upcoming-btn {
    background: linear-gradient(135deg, #673ab7, #512da8);
    color: white;
    box-shadow: 0 4px 15px rgba(103, 58, 183, 0.3);
}

#ap-view-upcoming-btn:hover {
    background: linear-gradient(135deg, #512da8, #4527a0);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(103, 58, 183, 0.4);
}

/* Container per i dropdown admin */
#ap-promo-list, #ap-upcoming-list {
    max-height: 400px;
    overflow-y: auto;
    overflow-x: hidden;
    background: #1f2937;
    border: 1px solid #ddd;
    border-radius: 8px;
    margin-top: 10px;
    margin-bottom: 20px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    width: 100%;
    max-width: 650px;
    display: none;
    position: relative;
    z-index: 10;
}

/* Container per i pulsanti di azione bulk */
.bulk-action-container {
    display: flex;
    gap: 10px;
    padding: 15px;
    background: #1f2937;
    border-top: 1px solid #e9ecef;
    border-radius: 0 0 8px 8px;
    justify-content: center;
    flex-wrap: wrap;
}

/* Pulsanti di azione bulk */
.bulk-action-btn {
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9em;
    transition: all 0.3s ease;
    min-width: 120px;
}

.bulk-action-btn.select-all {
    background: linear-gradient(135deg, #17a2b8, #138496);
    color: white;
    box-shadow: 0 2px 8px rgba(23, 162, 184, 0.3);
}

.bulk-action-btn.select-all:hover {
    background: linear-gradient(135deg, #138496, #117a8b);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(23, 162, 184, 0.4);
}

.bulk-action-btn.remove-promo {
    background: linear-gradient(135deg, #dc3545, #c82333);
    color: white;
    box-shadow: 0 2px 8px rgba(220, 53, 69, 0.3);
}

.bulk-action-btn.remove-promo:hover {
    background: linear-gradient(135deg, #c82333, #bd2130);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.4);
}

.promo-list-item, .upcoming-list-item {
    display: block; /* Serve per far funzionare bene le label */
    width: 100%;
}

/* Stile per ogni riga selezionabile (label) */
.selectable-item {
    display: flex !important;
    align-items: center;
    gap: 12px;
    padding: 12px 15px;
    cursor: pointer;
    width: 100%;
    box-sizing: border-box;
    flex-wrap: nowrap;
    overflow: hidden;
}

/* Checkbox sempre a sinistra */
.selectable-item input[type="checkbox"] {
    order: 1;
    flex-shrink: 0;
}

/* Immagine subito dopo il checkbox */
.selectable-item .product-thumbnail {
    order: 2;
}

/* Info prodotto per ultimo */
.selectable-item .product-info {
    order: 3;
}

/* Stili per le immagini dei prodotti nei dropdown admin */
.product-thumbnail {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 8px;
    border: 2px solid #e0e0e0;
    flex-shrink: 0;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.product-info {
    display: flex !important;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    visibility: visible !important;
    opacity: 1 !important;
    min-width: 0;
    overflow: hidden;
}

.product-title {
    font-weight: 600;
    color: #ffffff !important;
    font-size: 0.95em;
    display: block !important;
    visibility: visible !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.product-category {
    font-size: 0.8em;
    color: #d1d5db !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: block !important;
    visibility: visible !important;
    white-space: nowrap;
    transition: background-color 0.2s;
}

.selectable-item:hover {
    background-color: #1f2937;
}

/* Stile per i checkbox */
.selectable-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #ff8c00;
}

/* Contenitore per il pulsante di azione in fondo alla lista */
.bulk-action-container {
    padding: 10px;
    background-color: #1f2937;
    border-top: 1px solid #ddd;
    text-align: center;
}

/* Pulsante per rimuovere in blocco */
.bulk-action-btn {
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    color: white;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s;
    width: 100%;
}

.bulk-action-btn.remove-promo {
    background-color: #d32f2f; /* Rosso per la rimozione */
}

.bulk-action-btn:hover {
    transform: scale(1.02);
}

/* Animazioni per notifiche proposte */
@keyframes notificationPulse {
    0% { 
        box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.7);
        transform: scale(1);
    }
    50% { 
        box-shadow: 0 0 0 10px rgba(76, 175, 80, 0);
        transform: scale(1.02);
    }
    100% { 
        box-shadow: 0 0 0 0 rgba(76, 175, 80, 0);
        transform: scale(1);
    }
}

.proposal-notification {
    animation: notificationPulse 2s infinite;
}

/* Stili per sezione proposte ricevute */
#proposals-received-section {
    transition: all 0.3s ease;
}

#proposals-received-section:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
}

/* ===== STILI SISTEMA DI ORDINAMENTO ===== */

/* Header delle sezioni con controlli di ordinamento */
.section-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    margin-bottom: 80px;
}

.section-header .section-title {
    margin: 0;
}

.section-header .section-logo {
    margin: 0;
}

/* Immagini titolo delle sezioni */
.section-title-image {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
}

.section-main-logo {
    max-width: 300px;
    height: auto;
    object-fit: contain;
    transition: all 0.3s ease;
}

.section-main-logo:hover {
    transform: scale(1.05);
    filter: brightness(1.1);
}

/* Rimozione sfondi per tutte le sezioni dei giochi */
#switch, #switch2, #ps5, #software-section {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

/* Stili specifici per il logo SOFTWARE */
#software-section .section-title-image {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 25px;
    width: 100%;
}

#software-section .section-main-logo {
    max-width: 500px;
    height: auto;
    object-fit: contain;
    filter: contrast(1.1) brightness(1.05);
    transition: all 0.3s ease;
}

#software-section .section-main-logo:hover {
    transform: scale(1.05);
    filter: contrast(1.2) brightness(1.1);
}

/* Stili specifici per il logo PS5 */
#ps5 .section-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
}

#ps5 .section-img-logo {
    max-width: 400px;
    height: auto;
    object-fit: contain;
    filter: contrast(1.2) brightness(1.1);
    transition: all 0.3s ease;
}

#ps5 .section-img-logo:hover {
    transform: scale(1.05);
    filter: contrast(1.3) brightness(1.2);
}

/* Controlli di ordinamento */
.sort-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #1f2937;
    padding: 12px 20px;
    border-radius: 25px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    border: 2px solid #e9ecef;
    transition: all 0.3s ease;
}

.sort-controls:hover {
    border-color: #ff8c00;
    box-shadow: 0 4px 15px rgba(255, 140, 0, 0.2);
}

.sort-controls label {
    font-weight: 600;
    color: #495057;
    font-size: 0.9em;
    white-space: nowrap;
}

.sort-select {
    padding: 8px 45px 8px 15px;
    border: 2px solid #e9ecef;
    border-radius: 20px;
    background: #1f2937;
    font-size: 0.9em;
    font-weight: 500;
    color: #495057;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 180px;
    background-position: right 15px center !important;
    background-repeat: no-repeat !important;
}

.sort-select:focus {
    outline: none;
    border-color: #ff8c00;
    box-shadow: 0 0 0 3px rgba(255, 140, 0, 0.1);
}

.sort-select:hover {
    border-color: #ff8c00;
}

/* Animazione per il riordinamento */
.games-container {
    transition: all 0.5s ease;
}

.game-card {
    transition: all 0.3s ease;
}

/* Responsive per i controlli di ordinamento */
@media (max-width: 768px) {
    .section-header {
        gap: 10px;
    }
    
    .sort-controls {
        flex-direction: column;
        gap: 8px;
        padding: 15px;
        text-align: center;
    }
    
    .sort-select {
        min-width: 200px;
        padding-right: 45px !important;
        background-position: right 15px center !important;
    }
    
    .section-main-logo {
        max-width: 250px;
    }
    
    #ps5 .section-img-logo {
        max-width: 300px;
    }
    
    #software-section .section-main-logo {
        max-width: 350px;
    }
}

/* Animazione glow per icone controller PS5 attive */
/* Animazione glow per icone controller PS5 attive */
@keyframes iconGlow {
    0% {
        filter: drop-shadow(0 0 6px currentColor) drop-shadow(0 0 3px currentColor);
    }
    100% {
        filter: drop-shadow(0 0 12px currentColor) drop-shadow(0 0 6px currentColor) drop-shadow(0 0 3px currentColor);
    }
}

/* Stile per icone controller PS5 vuote - migliora visibilità */
#stars-container-ps5 i {
    min-width: 32px;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Icone PS5 vuote - molto più visibili */
#stars-container-ps5 i[style*="rgba(255, 255, 255, 0.7)"] {
    color: rgba(255, 255, 255, 0.8) !important;
    border: 2px solid rgba(255, 255, 255, 0.7) !important;
    background: rgba(255, 255, 255, 0.25) !important;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.4), inset 0 0 4px rgba(255, 255, 255, 0.2) !important;
}

/* Icone PS5 attive - glow più intenso */
#stars-container-ps5 i[style*="drop-shadow"] {
    filter: drop-shadow(0 0 10px currentColor) drop-shadow(0 0 5px currentColor) drop-shadow(0 2px 4px rgba(0,0,0,0.3)) !important;
}

/* Assicura che le card loyalty siano sempre visibili */
.loyalty-card-display {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

@keyframes iconGlow {
    0% {
        filter: drop-shadow(0 0 4px currentColor) drop-shadow(0 2px 4px rgba(0,0,0,0.3));
    }
    100% {
        filter: drop-shadow(0 0 8px currentColor) drop-shadow(0 0 12px currentColor) drop-shadow(0 2px 4px rgba(0,0,0,0.3));
    }
}

@media (max-width: 480px) {
    .section-main-logo {
        max-width: 200px;
    }
    
    #ps5 .section-img-logo {
        max-width: 250px;
    }
    
    #software-section .section-main-logo {
        max-width: 280px;
    }
}

/* Tooltip per i pulsanti del dashboard sicurezza */
#security-dashboard button[title] {
    position: relative;
}

#security-dashboard button[title]:hover::after {
    content: attr(title);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.9);
    color: white;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 0.8em;
    white-space: nowrap;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    max-width: 300px;
    white-space: normal;
    text-align: center;
    line-height: 1.4;
}

#security-dashboard button[title]:hover::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(100%);
    border: 5px solid transparent;
    border-top-color: rgba(0, 0, 0, 0.9);
    z-index: 1000;
}

/* Stili per il lazy loading */
.load-more-btn {
    position: relative;
    overflow: hidden;
}

.load-more-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
}

.load-more-btn:active {
    transform: translateY(0);
}

.load-more-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

.loading-spinner {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Animazione per i giochi che appaiono */
.game-card {
    animation: fadeInUp 0.5s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* === SISTEMA NEWSLETTER === */
.newsletter-message {
    margin-top: 15px;
    padding: 12px 16px;
    border-radius: 8px;
    font-weight: 500;
    text-align: center;
    display: none;
    transition: all 0.3s ease;
}

.newsletter-success {
    background: linear-gradient(135deg, #4CAF50, #45a049);
    color: white;
    border: 2px solid #4CAF50;
    box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
}

.newsletter-error {
    background: linear-gradient(135deg, #f44336, #d32f2f);
    color: white;
    border: 2px solid #f44336;
    box-shadow: 0 4px 12px rgba(244, 67, 54, 0.3);
}

.newsletter-loading {
    background: linear-gradient(135deg, #ff9800, #f57c00);
    color: white;
    border: 2px solid #ff9800;
    box-shadow: 0 4px 12px rgba(255, 152, 0, 0.3);
}

.newsletter-message:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

/* === LAYOUT PROFESSIONALE PREZZI SOFTWARE === */
.software-prices-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin: 15px 0;
    max-width: 100%;
    overflow-x: hidden;
}

.price-card {
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    border: 2px solid #e3f2fd;
    border-radius: 8px;
    padding: 12px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
    position: relative;
    overflow: hidden;
}

.price-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #2196f3, #21cbf3);
    border-radius: 12px 12px 0 0;
}

.price-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(33, 150, 243, 0.2);
    border-color: #2196f3;
}

.price-header {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid #e0e0e0;
}

.price-icon {
    font-size: 16px;
    margin-right: 8px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.price-title {
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.price-input-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.price-input-group input[type="number"] {
    width: 100%;
    padding: 8px 10px;
    border: 2px solid #e0e0e0;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    text-align: center;
    background: #fafafa;
    transition: all 0.3s ease;
    color: #ffffff;
}

.price-input-group input[type="number"]:focus {
    outline: none;
    border-color: #2196f3;
    background: #1f2937;
    box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);
    transform: scale(1.02);
}

.price-input-group input[type="number"]::placeholder {
    color: #999;
    font-weight: 400;
}

.availability-label {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 6px;
    transition: all 0.3s ease;
    background: #1f2937;
    border: 1px solid #e0e0e0;
    font-size: 12px;
}

.availability-label:hover {
    background: #e3f2fd;
    border-color: #2196f3;
}

.availability-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #2196f3;
    cursor: pointer;
}

.availability-label span {
    font-size: 14px;
    font-weight: 500;
    color: #555;
    user-select: none;
}

.availability-label input[type="checkbox"]:checked + span {
    color: #2196f3;
    font-weight: 600;
}

/* Responsive Design */
@media (max-width: 768px) {
    .software-prices-grid {
        grid-template-columns: 1fr;
        gap: 15px;
        margin: 15px 0;
    }
    
    .price-card {
        padding: 15px;
    }
    
    .price-title {
        font-size: 16px;
    }
    
    .price-input-group input[type="number"] {
        padding: 10px 14px;
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .software-prices-grid {
        gap: 12px;
        margin: 12px 0;
    }
    
    .price-card {
        padding: 12px;
    }
    
    .price-header {
        margin-bottom: 12px;
        padding-bottom: 8px;
    }
    
    .price-icon {
        font-size: 20px;
        margin-right: 10px;
    }
    
    .price-title {
        font-size: 14px;
    }
}

/* Stili per software-prices-grid - Layout compatto e ordinato */
.software-prices-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin-top: 15px;
    max-width: 100%;
    overflow-x: hidden;
}

.price-card {
    background: #1f2937;
    border: 2px solid #e1e5e9;
    border-radius: 12px;
    padding: 16px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    min-height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.price-card:hover {
    border-color: #4CAF50;
    box-shadow: 0 4px 16px rgba(76, 175, 80, 0.15);
    transform: translateY(-2px);
}

.price-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f0f0f0;
}

.price-icon {
    font-size: 18px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.price-title {
    font-weight: 600;
    font-size: 16px;
    color: #ffffff;
    margin: 0;
}

.price-input-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.price-input-group input[type="number"] {
    width: 100%;
    padding: 10px 12px;
    border: 2px solid #e1e5e9;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    transition: border-color 0.3s ease;
    background: #fafafa;
}

.price-input-group input[type="number"]:focus {
    outline: none;
    border-color: #4CAF50;
    background: #1f2937;
    box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
}

.availability-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #666;
    cursor: pointer;
    margin: 0;
}

.availability-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #4CAF50;
    cursor: pointer;
}

.availability-label span {
    font-weight: 500;
    user-select: none;
}

/* Responsive design per schermi piccoli */
@media (max-width: 768px) {
    .software-prices-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .price-card {
        padding: 14px;
        min-height: 110px;
    }
    
    .price-header {
        margin-bottom: 10px;
        padding-bottom: 6px;
    }
    
    .price-icon {
        font-size: 16px;
        width: 20px;
        height: 20px;
    }
    
    .price-title {
        font-size: 15px;
    }
    
    .price-input-group input[type="number"] {
        padding: 8px 10px;
        font-size: 13px;
    }
}

/* Responsive design per schermi molto piccoli */
@media (max-width: 480px) {
    .software-prices-grid {
        gap: 10px;
    }
    
    .price-card {
        padding: 12px;
        min-height: 100px;
    }
    
    .price-header {
        margin-bottom: 8px;
        padding-bottom: 4px;
    }
    
    .price-icon {
        font-size: 14px;
        width: 18px;
        height: 18px;
    }
    
    .price-title {
        font-size: 14px;
    }
    
    .price-input-group input[type="number"] {
        padding: 6px 8px;
        font-size: 12px;
    }
}

/* ===== RESPONSIVE DESIGN COMPLETO ===== */

/* Mobile First - Base styles for mobile devices */
@media (max-width: 768px) {
    /* Header responsive */
    header {
        padding: 8px 12px;
        min-height: 56px;
        flex-wrap: wrap;
    }
    
    body {
        padding-top: 70px;
    }
    
    .logo {
        font-size: 24px;
        margin-right: 10px;
    }
    
    /* Navigation responsive */
    nav {
        flex-wrap: wrap;
        gap: 4px;
    }
    
    nav a {
        padding: 8px 12px;
        font-size: 14px;
        border-radius: 20px;
    }
    
    /* Game cards responsive */
    .games-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        padding: 10px;
    }
    
    .game-card {
        width: 100%;
        margin: 0;
        padding: 12px;
    }
    
    .game-card img {
        height: 150px;
        object-fit: contain;
    }
    
    .game-card h3 {
        font-size: 14px;
        margin: 8px 0 4px 0;
    }
    
    .game-card .price {
        font-size: 18px !important; /* Aumentato per maggiore visibilità */
        margin: 4px 0;
        color: #FFD700 !important; /* Oro brillante invece di bianco */
        text-shadow: 0 2px 6px rgba(255, 215, 0, 0.6), 
                     0 0 10px rgba(255, 215, 0, 0.4) !important; /* Ombra dorata per effetto glow */
    }
    
    /* Purchase options responsive */
    .purchase-options {
        flex-direction: column;
        gap: 6px;
    }
    
    .purchase-options label {
        padding: 8px 12px;
        font-size: 12px;
        border-radius: 15px;
    }
    
    /* Action buttons responsive */
    .game-actions {
        flex-direction: column;
        gap: 8px;
    }
    
    .game-actions button {
        padding: 10px 16px;
        font-size: 14px;
        border-radius: 20px;
    }
    
    /* Admin panel responsive */
    .admin-panel {
        padding: 15px;
        margin: 10px;
    }
    
    .admin-panel h2 {
        font-size: 20px;
        margin-bottom: 15px;
    }
    
    /* Form responsive */
    .form-row {
        flex-direction: column;
        gap: 15px;
    }
    
    .form-group {
        width: 100%;
    }
    
    .form-group input,
    .form-group select,
    /* DARK DASHBOARD - Textarea mobile */
    .form-group textarea {
        width: 100%;
        padding: 12px;
        font-size: 16px; /* Prevents zoom on iOS */
        border-radius: 8px;
        border: 2px solid #374151 !important; /* Grigio scuro */
        transition: border-color 0.3s ease, box-shadow 0.3s ease;
        background: #111827 !important; /* Sfondo scuro */
        color: #ffffff !important; /* Testo bianco */
    }
    
    .form-group textarea::placeholder {
        color: #9ca3af !important; /* Grigio chiaro per placeholder */
    }
    
    .form-group input:focus,
    .form-group select:focus,
    .form-group textarea:focus {
        outline: none !important;
        border-color: #ff8c00 !important; /* Arancione al focus */
        box-shadow: 0 0 12px rgba(255, 140, 0, 0.4) !important; /* Glow arancione */
        background: #111827 !important; /* Mantiene sfondo scuro */
        color: #ffffff !important; /* Mantiene testo bianco */
    }
    
    /* Migliora l'aspetto dei checkbox e radio su mobile */
    input[type="checkbox"],
    input[type="radio"] {
        width: 20px;
        height: 20px;
        margin-right: 8px;
    }
    
    /* Ottimizza i pulsanti per touch */
    button {
        min-height: 44px;
        touch-action: manipulation;
    }
    
    /* Software prices grid responsive */
    .software-prices-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .price-card {
        padding: 12px;
        min-height: 100px;
    }
    
    /* Admin dropdown responsive */
    #admin-dropdown {
        position: fixed;
        top: 60px;
        left: 10px;
        right: 10px;
        width: auto;
        max-height: 70vh;
        overflow-y: auto;
    }
    
    /* Search bar responsive */
    .search-container {
        padding: 10px;
    }
    
    .search-container input {
        width: 100%;
        padding: 12px;
        font-size: 16px;
    }
    
    /* Floating buttons responsive */
    .floating-btn {
        width: 50px;
        height: 50px;
        font-size: 18px;
    }
    
    /* Modal responsive */
    .modal {
        padding: 20px;
        margin: 10px;
        max-height: 90vh;
        overflow-y: auto;
    }
    
    .modal h2 {
        font-size: 20px;
    }
    
    /* Toast messages responsive */
    .toast {
        left: 10px;
        right: 10px;
        width: auto;
        font-size: 14px;
        padding: 12px 16px;
    }
}

/* Tablet styles */
@media (min-width: 769px) and (max-width: 1024px) {
    .games-container {
        grid-template-columns: repeat(3, 1fr);
        gap: 15px;
    }
    
    .game-card {
        width: 100%;
    }
    
    .software-prices-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .admin-panel {
        padding: 20px;
        margin: 15px;
    }
}

/* Large screens optimization */
@media (min-width: 1200px) {
    .games-container {
        grid-template-columns: repeat(auto-fill, minmax(250px, 280px));
        gap: 20px;
        justify-content: center;
    }
    
    .game-card {
        width: 250px;
        max-width: 280px;
    }
    
    .software-prices-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Touch device optimizations */
.touch-device {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.touch-device .game-card,
.touch-device button,
.touch-device .purchase-options label {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
}

@media (hover: none) and (pointer: coarse) {
    /* Larger touch targets */
    nav a {
        padding: 12px 16px;
        min-height: 44px;
    }
    
    .game-actions button {
        padding: 12px 20px;
        min-height: 44px;
    }
    
    .purchase-options label {
        padding: 12px 16px;
        min-height: 44px;
    }
    
    /* Remove hover effects on touch devices */
    nav a:hover {
        background-color: transparent;
        border-color: transparent;
        color: #444;
        transform: none;
        box-shadow: none;
    }
    
    .game-card:hover {
        transform: none;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
}

/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .logo img {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
    
    /* DARK GAMING MODE - Logo semplice e visibile (stile originale) */
    #main-logo {
        filter: invert(1) brightness(2) !important; /* Stile originale: scritta bianca */
        border-radius: 8px !important; /* Angoli arrotondati */
        background: transparent !important; /* Nessun sfondo aggiuntivo */
    }
}

/* Landscape orientation for mobile */
@media (max-width: 768px) and (orientation: landscape) {
    header {
        min-height: 50px;
    }
    
    body {
        padding-top: 60px;
    }
    
    .games-container {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }
    
    .game-card {
        width: 100%;
    }
    
    .software-prices-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ========================================
   STILI FORM AGGIUNTA PRODOTTI
   ======================================== */

#add-product {
    background: #1f2937;
    border-radius: 12px;
    padding: 20px;
    border: 2px solid #e9ecef;
    margin-bottom: 20px;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    box-sizing: border-box;
}

/* DARK DASHBOARD - Card Sezioni (Dettagli Prodotto, ecc.) */
.form-step {
    margin-bottom: 25px;
    padding: 20px;
    background: #1f2937 !important; /* Card scura */
    border-radius: 12px !important;
    border: 1px solid rgba(255, 140, 0, 0.3) !important; /* Bordo arancione sottile */
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important; /* Ombra scura */
}

.form-step h4 {
    color: #ffffff !important; /* Bianco o Arancione */
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    font-weight: 700;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.form-step h5 {
    color: #d1d5db !important; /* Grigio chiaro */
    margin-bottom: 15px;
    width: 100%;
}

/* Griglie responsive per i prezzi */
.form-step .form-row {
    display: grid;
    gap: 20px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Griglia 2 colonne */
.form-step .form-row[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr 1fr;
}

/* Griglia 3 colonne */
.form-step .form-row[style*="grid-template-columns: 1fr 1fr 1fr"] {
    grid-template-columns: 1fr 1fr 1fr;
}

/* Griglia auto-fit per software */
.form-step .form-row[style*="grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))"] {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/* Assicura che le griglie non escano dal contenitore */
.form-step .form-row > div {
    min-width: 0;
    overflow: hidden;
}

/* Stili per i form-group all'interno delle griglie */
.form-step .form-group {
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Etichette dei prezzi */
/* DARK DASHBOARD - Labels form-step */
.form-step .form-group > label:not([for*="available"]) {
    font-weight: 600;
    color: #ffffff !important; /* Bianco per leggibilità */
    margin-bottom: 8px;
    font-size: 14px;
    text-align: center;
    width: 100%;
}

/* DARK DASHBOARD - Input dentro form-step */
.form-step .form-group input,
.form-step .form-group select,
.form-step .form-group textarea {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    text-align: center;
    font-size: 16px;
    padding: 12px;
    border: 2px solid #374151 !important; /* Grigio scuro */
    border-radius: 8px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    background: #111827 !important; /* Grigio molto scuro/Nero */
    color: #ffffff !important; /* Testo bianco */
}

.form-step .form-group input::placeholder,
.form-step .form-group select::placeholder,
.form-step .form-group textarea::placeholder {
    color: #9ca3af !important; /* Grigio chiaro per placeholder */
    opacity: 0.7;
}

.form-step .form-group input:focus,
.form-step .form-group select:focus,
.form-step .form-group textarea:focus {
    outline: none !important;
    border-color: #ff8c00 !important; /* Arancione al focus */
    box-shadow: 0 0 12px rgba(255, 140, 0, 0.4) !important; /* Glow arancione */
    background: #111827 !important; /* Mantiene sfondo scuro */
    color: #ffffff !important; /* Mantiene testo bianco */
}

/* Centra i checkbox e label */
.form-step .form-group label {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin-top: 8px;
    justify-content: center;
    text-align: center;
}

/* DARK DASHBOARD - Etichette disponibilità */
.form-step .form-group label[for*="available"] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    margin-top: 10px;
    padding: 6px 8px;
    background: #111827 !important; /* Sfondo scuro */
    border: 1px solid rgba(255, 140, 0, 0.3) !important; /* Bordo arancione */
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    color: #495057;
    text-align: center;
    min-height: 36px;
    max-height: 36px;
    box-sizing: border-box;
    overflow: hidden;
    white-space: nowrap;
}

/* Checkbox per disponibilità */
.form-step .form-group label[for*="available"] input[type="checkbox"] {
    margin: 0;
    transform: scale(1.1);
}

/* DARK DASHBOARD - Testo disponibilità */
.form-step .form-group label[for*="available"] span {
    flex: 1;
    text-align: center;
    font-weight: 600;
    color: #d1d5db !important; /* Grigio chiaro */
    font-size: 11px;
    letter-spacing: 0.3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* DARK DASHBOARD - Stato checked per disponibilità */
.form-step .form-group label[for*="available"]:has(input:checked) {
    background: rgba(255, 140, 0, 0.3) !important; /* Sfondo arancione quando selezionato */
    border-color: #ff8c00 !important; /* Bordo arancione */
    color: #ffffff !important;
}

.form-step .form-group label[for*="available"]:has(input:checked) span {
    color: #ffffff !important; /* Bianco quando selezionato */
}

/* DARK DASHBOARD - Hover effect per le etichette di disponibilità */
.form-step .form-group label[for*="available"]:hover {
    background: rgba(255, 140, 0, 0.2) !important; /* Sfondo arancione trasparente al hover */
    cursor: pointer;
    transform: translateY(-1px);
    transition: all 0.2s ease;
    border-color: rgba(255, 140, 0, 0.5) !important; /* Bordo arancione più visibile */
}

/* Stili per le etichette di disponibilità nella sezione Gestione Prodotto */
.availability-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    margin-top: 10px;
    padding: 6px 8px;
    background: #1f2937;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    color: #495057;
    text-align: center;
    min-height: 36px;
    max-height: 36px;
    box-sizing: border-box;
    cursor: pointer;
    transition: all 0.2s ease;
    overflow: hidden;
    white-space: nowrap;
}

.availability-label input[type="checkbox"] {
    margin: 0;
    transform: scale(1.1);
}

.availability-label span {
    flex: 1;
    text-align: center;
    font-weight: 600;
    color: #28a745;
    font-size: 11px;
    letter-spacing: 0.3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.availability-label:has(input:checked) {
    background: #d4edda;
    border-color: #28a745;
    color: #155724;
}

.availability-label:has(input:checked) span {
    color: #155724;
}

.availability-label:hover {
    background: #e9ecef;
    transform: translateY(-1px);
}

/* Responsive per mobile */
@media (max-width: 768px) {
    .form-step .form-row[style*="grid-template-columns: 1fr 1fr 1fr"] {
        grid-template-columns: 1fr;
    }
    
    .form-step .form-row[style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr;
    }
    
    .form-step .form-row[style*="grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))"] {
        grid-template-columns: 1fr;
    }
}

/* FORZA CHIUSURA MODALE FLAGS - SEMPRE NASCOSTA */
#flags-modal {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    z-index: -1 !important;
    pointer-events: none !important;
    position: fixed !important;
    top: -9999px !important;
    left: -9999px !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* Print styles */
@media print {
    header,
    .floating-btn,
    .admin-panel,
    .search-container {
        display: none;
    }
    
    body {
        padding-top: 0;
    }
    
    .game-card {
        width: calc(50% - 10px);
        break-inside: avoid;
    }
}

/* ========================================
   FIX MOBILE RESPONSIVE - OTTIMIZZAZIONE COMPLETA PER SMARTPHONE
   ======================================== */

/* Mobile First - Fix completo per smartphone */
@media (max-width: 768px) {
  
  /* Body e padding generale */
  body {
    padding: 0 8px !important;
    padding-top: 60px !important;
    font-size: 14px !important;
  }
  
  /* Header ottimizzato */
  header {
    padding: 8px 10px !important;
    min-height: 50px !important;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
  }
  
  .header-content {
    flex-wrap: wrap;
    gap: 8px !important;
    padding: 0 !important;
  }
  
  .logo {
    font-size: 20px !important;
    margin: 0 !important;
  }
  
  .logo img {
    height: 40px !important;
    width: auto !important;
  }
  
  /* Navigazione mobile */
  nav {
    display: none !important;
  }
  
  .mobile-menu-toggle {
    display: flex !important;
  }
  
  #main-nav.active {
    display: flex !important;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #1f2937;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    z-index: 1000;
    padding: 10px 0;
  }
  
  /* DARK GAMING MODE - Menu mobile responsive */
  #main-nav {
    background: rgba(0, 0, 0, 0.95) !important; /* Sfondo scuro */
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
  }
  #main-nav a {
    padding: 12px 15px;
    font-size: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: #ffffff !important; /* Bianco per link */
  }
  #main-nav a:hover {
    color: #ff6f00 !important; /* Arancione al hover */
    background-color: rgba(255, 111, 0, 0.15);
  }
  
  /* Navbar actions compatte */
  .navbar-actions {
    gap: 6px !important;
    flex-wrap: wrap;
  }
  
  .navbar-actions button,
  .navbar-actions .language-switcher,
  .navbar-actions .user-menu-button {
    padding: 6px 10px !important;
    font-size: 12px !important;
  }
  
  /* DARK GAMING MODE - Icona carrello mobile ben visibile con sfondo scuro */
  .cart-icon-btn {
    width: auto !important;
    height: auto !important;
    padding: 6px !important; /* Padding per area cliccabile */
    background: rgba(17, 24, 39, 0.8) !important; /* Sfondo scuro del sito */
    border: 2px solid rgba(255, 140, 0, 0.4) !important; /* Bordo arancione */
    border-radius: 8px !important;
  }
  
  .cart-icon-img {
    width: 36px !important; /* Dimensioni ottimizzate per mobile */
    height: 36px !important;
    filter: drop-shadow(0 0 6px rgba(255, 140, 0, 0.5)) drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4)) !important; /* Glow arancione + ombra - NON altera i colori originali */
  }
  
  .home-btn {
    width: 32px !important;
    height: 32px !important;
    padding: 6px !important;
    font-size: 14px !important;
  }
  
  /* Barra di ricerca */
  .search-bar-container {
    margin: 10px 8px !important;
    padding: 8px !important;
  }
  
  .search-bar {
    font-size: 14px !important;
    padding: 8px 12px !important;
  }
  
  /* Sezioni giochi */
  .games-section {
    padding: 15px 0 !important;
    margin: 0 !important;
  }
  
  .section-title {
    font-size: 20px !important;
    margin: 15px 0 10px 0 !important;
    padding: 0 8px !important;
  }
  
  .console-logo {
    max-width: 100px !important;
    margin: 10px auto !important;
  }
  
  .console-logo img {
    max-width: 100px !important;
    height: auto !important;
  }
  
  /* Container giochi - 2 colonne compatte */
  .games-container {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    padding: 8px !important;
    margin: 0 !important;
  }
  
  /* Card giochi ottimizzate */
  .game-card {
    width: 100% !important;
    max-width: 100% !important;
    padding: 8px !important;
    margin: 0 !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
  }
  
  .game-card img {
    width: 100% !important;
    height: 150px !important;
    object-fit: contain !important;
    border-radius: 6px !important;
    margin-bottom: 6px !important;
  }
  
  .game-card h3 {
    font-size: 12px !important;
    line-height: 1.3 !important;
    margin: 4px 0 !important;
    font-weight: 600 !important;
    min-height: 32px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  
  /* Opzioni edizione compatte */
  .edition-options {
    margin: 6px 0 !important;
    gap: 4px !important;
  }
  
  .edition-options label {
    font-size: 10px !important;
    padding: 4px 6px !important;
    margin: 2px 0 !important;
    display: flex;
    align-items: center;
    gap: 4px;
  }
  
  .edition-options .color-box {
    width: 10px !important;
    height: 10px !important;
    flex-shrink: 0;
  }
  
  .edition-options input[type="radio"] {
    width: 12px !important;
    height: 12px !important;
    margin: 0 4px 0 0 !important;
  }
  
  .edition-options span {
    font-size: 10px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  /* Prezzo */
  .game-card .prezzo,
  .game-card .price {
    font-size: 16px !important; /* Aumentato da 14px a 16px */
    font-weight: bold !important;
    margin: 4px 0 !important;
    color: #FFD700 !important; /* Oro brillante invece di bianco */
    text-shadow: 0 2px 6px rgba(255, 215, 0, 0.6), 
                 0 0 10px rgba(255, 215, 0, 0.4) !important; /* Ombra dorata per effetto glow */
  }
  
  /* Pulsanti */
  .info-btn {
    padding: 6px 10px !important;
    font-size: 11px !important;
    margin: 4px 0 !important;
    border-radius: 4px !important;
  }
  
  .buy-btn,
  .compra-btn {
    padding: 8px 12px !important;
    font-size: 12px !important;
    margin: 4px 0 !important;
    border-radius: 6px !important;
    width: 100%;
    text-align: center;
  }
  
  /* welcome-section rimossa */
  
  .welcome-features {
    flex-direction: column;
    gap: 10px !important;
    margin: 15px 0 !important;
  }
  
  .welcome-features .feature {
    font-size: 13px !important;
    padding: 8px !important;
  }
  
  /* Contatori vendite */
  /* DARK GAMING MODE - Statistiche mobile ultra-compact */
  .sales-counter {
    padding: 15px 10px !important;
    margin: 20px 8px !important;
    font-size: 12px !important;
    gap: 15px !important;
    flex-wrap: wrap;
    background: rgba(17, 24, 39, 0.8) !important; /* Mantiene sfondo scuro */
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255, 140, 0, 0.4) !important; /* Mantiene bordo arancione */
  }
  
  .counter-item {
    font-size: 12px !important;
    gap: 6px !important;
    flex-direction: column !important; /* Stack verticale */
    text-align: center !important;
  }
  
  .counter-item i {
    font-size: 24px !important; /* Mantiene dimensione icona visibile */
    color: #ff8c00 !important; /* Arancione brillante */
  }
  
  .count {
    font-size: 20px !important; /* Mantiene dimensione numero visibile */
    color: #ff8c00 !important; /* Arancione brillante */
  }
  
  .counter-item p {
    font-size: 11px !important; /* Leggermente ridotto */
    color: #d1d5db !important; /* Grigio chiaro */
  }
  
  /* Modal e popup */
  /* DARK GAMING MODE - Info box responsive */
  .info-box {
    width: 95vw !important;
    max-width: 95vw !important;
    margin: 10px auto !important;
    padding: 20px 15px !important; /* Padding mantenuto per dark mode */
    max-height: 85vh !important;
    overflow-y: auto !important;
    background: #111827 !important; /* Mantiene sfondo scuro */
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 2px solid rgba(255, 140, 0, 0.5) !important; /* Mantiene bordo arancione */
  }
  
  .info-box-header {
    padding: 10px 0 !important;
    margin-bottom: 15px !important;
    border-bottom: 2px solid rgba(255, 140, 0, 0.4) !important; /* Mantiene bordo arancione */
  }
  
  .info-box-title {
    font-size: 1.5rem !important; /* Leggermente ridotto su mobile ma ancora grande */
    color: #ffffff !important; /* Mantiene bianco */
    font-weight: 700 !important;
  }
  
  .info-box .close-btn {
    font-size: 22px !important;
    width: 36px !important;
    height: 36px !important;
    color: #ff8c00 !important; /* Mantiene arancione */
    background: rgba(255, 140, 0, 0.2) !important;
    border: 2px solid rgba(255, 140, 0, 0.6) !important;
  }
  
  .info-box-content p {
    color: #d1d5db !important; /* Mantiene grigio chiaro */
    font-size: 0.95rem !important;
  }
  
  .edition-card {
    padding: 15px !important; /* Padding mantenuto */
    margin-bottom: 15px !important;
    background: #1f2937 !important; /* Mantiene sfondo scuro */
    border: 1px solid rgba(100, 150, 255, 0.3) !important; /* Mantiene bordo blu neon */
  }
  
  .edition-name {
    font-size: 1.1rem !important; /* Leggermente ridotto su mobile */
    color: #ffffff !important; /* Mantiene bianco */
  }
  
  .edition-description {
    font-size: 0.9rem !important; /* Leggermente ridotto su mobile */
    color: #9ca3af !important; /* Mantiene grigio chiaro */
  }
  
  .edition-header {
    margin-bottom: 8px !important;
  }
  
  .edition-name {
    font-size: 14px !important;
  }
  
  .edition-description {
    font-size: 12px !important;
    line-height: 1.4 !important;
  }
  
  /* Login modal */
  .login-modal-content {
    width: 95vw !important;
    max-width: 95vw !important;
    margin: 10px auto !important;
    padding: 15px !important;
    max-height: 90vh !important;
  }
  
  /* Carrello */
  .carrello-container {
    width: 95vw !important;
    max-width: 95vw !important;
    padding: 15px !important;
  }
  
  /* Footer */
  footer {
    padding: 20px 10px !important;
    font-size: 12px !important;
  }
  
  /* Pulsanti fluttuanti */
  .contact-wa,
  .whatsapp-container {
    bottom: 15px !important;
    right: 15px !important;
  }
  .contact-wa__btn,
  .whatsapp-btn {
    width: 50px !important;
    height: 50px !important;
    padding: 12px !important;
  }
  
  .contact-wa__btn img,
  .whatsapp-btn img {
    width: 28px !important;
    height: 28px !important;
  }
  
  .richiesta-btn {
    bottom: 15px !important;
    left: 15px !important;
    padding: 10px 15px !important;
    font-size: 12px !important;
  }
  
  /* Admin panel */
  #admin-panel {
    padding: 10px 8px !important;
    margin: 10px 0 !important;
  }
  
  /* Scroll smooth */
  html {
    scroll-behavior: smooth;
  }
  
  /* Rimuove spazi eccessivi */
  * {
    max-width: 100%;
  }
}

/* Smartphone molto piccoli */
@media (max-width: 480px) {
  
  body {
    padding: 0 5px !important;
    padding-top: 55px !important;
    font-size: 13px !important;
  }
  
  .games-container {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 5px !important;
  }
  
  .game-card {
    padding: 10px !important;
  }
  
  .game-card img {
    height: 150px !important;
    object-fit: contain !important;
  }
  
  .game-card h3 {
    font-size: 13px !important;
    min-height: auto;
  }
  
  .section-title {
    font-size: 18px !important;
  }
  
  /* welcome-section rimossa */
}

/* Landscape mobile */
@media (max-width: 768px) and (orientation: landscape) {
  .games-container {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  
  .game-card img {
    height: 120px !important;
    object-fit: contain !important;
  }
  
  .game-card h3 {
    font-size: 11px !important;
    min-height: 28px;
  }
}

/* MODAL LOGIN - Base: nascosto di default */
.modal {
  display: none !important; /* Cambiato da flex a none per nascondere di default */
  position: fixed;
  z-index: 999999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.6);
  backdrop-filter: blur(5px);
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  align-items: center;
  justify-content: center;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

/* Assicura che #login-modal sia nascosto di default */
#login-modal {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Forza visibilità per #login-modal quando ha le classi attive */
#login-modal.force-show,
#login-modal.show,
#login-modal.active,
#login-modal.force-show.show.active {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Forza visibilità del modal quando è aperto - REGOLE MASSIMA PRIORITÀ */
#login-modal[style*="display: flex"],
#login-modal[style*="display:flex"],
#login-modal[style*="display: block"],
#login-modal[style*="display:block"],
.modal.show,
.modal.active,
#login-modal.show,
#login-modal.active,
#login-modal.force-show,
#login-modal.force-show.show,
#login-modal.force-show.active,
#login-modal.force-show.show.active,
#login-modal[style*="z-index"] {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  width: 100vw !important;
  height: 100% !important;
  height: 100vh !important;
  min-width: 100vw !important;
  min-height: 100vh !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  z-index: 99999999 !important;
  pointer-events: auto !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: rgba(0, 0, 0, 0.6) !important;
  background: rgba(0, 0, 0, 0.6) !important;
  overflow: auto !important;
  transform: none !important;
  will-change: auto !important;
}

/* Assicura che il modal-content sia sempre cliccabile */
#login-modal .modal-content,
.modal.show .modal-content,
.modal.active .modal-content {
  pointer-events: auto !important;
  z-index: 1000000 !important;
  position: relative !important;
}

.modal-content {
  background-color: #1a1a1a !important;
  margin: 5% auto !important;
  padding: 30px !important;
  border: 1px solid #333 !important;
  border-radius: 15px !important;
  width: 90% !important;
  max-width: 450px !important;
  box-shadow: 0 10px 40px rgba(0,0,0,0.5) !important;
  color: white !important;
  position: relative !important;
  z-index: 100000000 !important;
  pointer-events: auto !important;
  display: flex !important;
  flex-direction: column !important;
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
}

.modal-content h2 {
  margin-top: 0;
  color: #ff6f00;
  text-align: center;
  margin-bottom: 20px;
}

.close-btn {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
  line-height: 20px;
}

.close-btn:hover {
  color: #ff6f00;
}

.login-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.tab-btn {
  flex: 1;
  padding: 12px;
  background: transparent;
  border: 2px solid #333;
  color: #aaa;
  cursor: pointer;
  border-radius: 8px;
  font-size: 1rem;
  transition: all 0.3s ease;
}

.tab-btn.active {
  background: #ff6f00;
  border-color: #ff6f00;
  color: white;
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

.modal-content form {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.modal-content input {
  padding: 12px;
  border: 1px solid #333;
  border-radius: 8px;
  background: #2a2a2a;
  color: white;
  font-size: 1rem;
}

.modal-content input:focus {
  outline: none;
  border-color: #ff6f00;
}

.btn-primary {
  padding: 12px;
  background: #ff6f00;
  border: none;
  border-radius: 8px;
  color: white;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-primary:hover {
  background: #ff8c00;
  transform: translateY(-2px);
}

.forgot-password {
  text-align: center;
  margin-top: 10px;
}

.forgot-password a {
  color: #ff6f00;
  text-decoration: none;
}

.social-login {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #333;
  text-align: center;
}

.btn-google {
  width: 100%;
  padding: 12px;
  background: #1f2937;
  border: none;
  border-radius: 8px;
  color: #ffffff;
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 10px;
  transition: all 0.3s ease;
}

.btn-google:hover {
  background: #1f2937;
  transform: translateY(-2px);
}

/* MODAL PROFILO */
.profile-modal {
  display: none;
  position: fixed;
  z-index: 999999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.6);
  backdrop-filter: blur(5px);
}

/* Forza visibilità quando il modal è aperto */
.profile-modal.show,
.profile-modal.active,
.profile-modal.force-show {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.profile-modal-content {
  background-color: #1a1a1a;
  margin: 3% auto;
  padding: 0;
  border: 1px solid #333;
  border-radius: 15px;
  width: 90%;
  max-width: 800px;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 10px 40px rgba(0,0,0,0.5);
  color: white;
}

.profile-header {
  background: linear-gradient(135deg, #ff4e00, #ff6f00);
  padding: 30px;
  text-align: center;
  border-radius: 15px 15px 0 0;
}

.profile-avatar {
  width: 100px;
  height: 100px;
  margin: 0 auto 15px;
  background: rgba(255,255,255,0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.profile-avatar i {
  font-size: 60px;
  color: white;
}

.profile-header h2 {
  margin: 10px 0 5px;
  color: white;
}

.profile-header p {
  color: rgba(255,255,255,0.9);
  font-size: 0.9rem;
}

.profile-tabs {
  display: flex;
  background: #2a2a2a;
  border-bottom: 1px solid #333;
  overflow-x: auto;
}

.profile-tab {
  flex: 1;
  padding: 15px;
  background: transparent;
  border: none;
  color: #aaa;
  cursor: pointer;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.profile-tab:hover {
  background: rgba(255, 111, 0, 0.1);
}

.profile-tab.active {
  background: rgba(255, 111, 0, 0.2);
  color: #ff6f00;
  border-bottom: 3px solid #ff6f00;
}

.profile-tab-content {
  display: none;
}

.profile-tab-content.active {
  display: block !important;
}

/* Assicura che le card nel tab Punti siano sempre visibili */
#profile-tab-points .loyalty-card-display {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.profile-tab-content {
  display: none;
  padding: 30px;
}

.profile-tab-content.active {
  display: block;
}

.profile-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

.stat-card {
  background: #2a2a2a;
  padding: 20px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 15px;
  border: 1px solid #333;
}

.stat-card i {
  font-size: 2rem;
  color: #ff6f00;
}

.stat-card h3 {
  margin: 0;
  color: #ff6f00;
  font-size: 1.8rem;
}

.stat-card p {
  margin: 5px 0 0;
  color: #aaa;
  font-size: 0.9rem;
}

/* Banner immagine sulla stessa linea delle stelle */
.stars-banner-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}

.points-banner-image {
  max-width: 280px;
  width: auto;
  height: auto;
  max-height: 90px;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
  transition: transform 0.3s ease;
  flex-shrink: 0;
}

.points-banner-image:hover {
  transform: scale(1.05);
}

/* Stelle con bordi gialli */
.stars-container .filled-star,
.stars-container .empty-star {
  -webkit-text-stroke: 1.5px #ffd700;
  filter: drop-shadow(0 0 3px rgba(255, 215, 0, 0.5));
}

.stars-container .filled-star {
  color: #ffd700;
}

.stars-container .empty-star {
  color: transparent;
}

@media (max-width: 768px) {
  .stars-banner-container {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  
  .points-banner-image {
    max-width: 220px;
    max-height: 75px;
    margin-left: 0 !important;
  }
  
  #stars-container {
    width: 100%;
    text-align: center;
  }
}

.points-balance {
  background: linear-gradient(135deg, #ff6f00, #ff8c00);
  padding: 30px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
}

.points-balance i {
  font-size: 3rem;
  color: white;
}

.points-balance h3 {
  margin: 0;
  color: white;
  font-size: 2.5rem;
}

.points-balance p {
  margin: 5px 0 0;
  color: rgba(255,255,255,0.9);
}

.points-history,
.proposals-list {
  background: #2a2a2a;
  border-radius: 10px;
  padding: 20px;
  max-height: 400px;
  overflow-y: auto;
}

.empty-state {
  text-align: center;
  color: #666;
  padding: 40px;
  font-style: italic;
}

.settings-section h3 {
  color: #ff6f00;
  margin-bottom: 20px;
}

.setting-item {
  padding: 15px;
  background: #2a2a2a;
  border-radius: 8px;
  margin-bottom: 10px;
}

.setting-item label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  color: #ddd;
}

.setting-item input[type="checkbox"] {
  width: 20px;
  height: 20px;
  cursor: pointer;
}

.btn-danger {
  background: #dc3545;
  color: white;
  border: none;
  padding: 12px 30px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1rem;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  transition: all 0.3s ease;
}

.btn-danger:hover {
  background: #c82333;
  transform: translateY(-2px);
}

/* Responsive */
@media (max-width: 768px) {
  .profile-modal-content {
    width: 95%;
    margin: 5% auto;
  }
  
  .profile-tabs {
    flex-wrap: wrap;
  }
  
  .profile-tab {
    flex: 1 1 50%;
  }
  
  .profile-stats {
    grid-template-columns: 1fr;
  }
}

/* ========================================
   DARK GAMING MODE - REGOLE GENERALI
   ======================================== */

/* Titoli e heading */
h1, h2, h3, h4, h5, h6 {
  color: #e2e8f0 !important; /* Testo chiaro per dark mode */
}

/* Testi generali */
p, span, div, li, td, th {
  color: #e2e8f0; /* Testo chiaro per dark mode */
}

/* Elementi con background bianco/chiaro - convertiti a scuro */
.card, .box, .panel, .container {
  background: #1a1f2e !important; /* Sfondo scuro */
  color: #e2e8f0 !important; /* Testo chiaro */
  border-color: rgba(255, 111, 0, 0.3) !important; /* Bordo arancione */
}

/* Dropdown e menu */
.dropdown, .menu, .lang-dropdown {
  background: #1a1f2e !important; /* Sfondo scuro */
  color: #e2e8f0 !important; /* Testo chiaro */
  border-color: rgba(255, 111, 0, 0.3) !important; /* Bordo arancione */
}

.lang-btn {
  background: #1a1f2e !important; /* Sfondo scuro */
  border: 1px solid rgba(255, 111, 0, 0.3) !important; /* Bordo arancione */
  color: #e2e8f0 !important; /* Testo chiaro */
}

.lang-btn:hover {
  background: rgba(255, 111, 0, 0.15) !important; /* Arancione trasparente al hover */
  border-color: #ff6f00 !important; /* Bordo arancione al hover */
  color: #ff6f00 !important; /* Testo arancione al hover */
}

/* Footer e sezioni */
footer, .footer {
  background: #0f1419 !important; /* Sfondo ancora più scuro */
  color: #e2e8f0 !important; /* Testo chiaro */
  border-top: 1px solid rgba(255, 111, 0, 0.3) !important; /* Bordo arancione */
}

/* Scrollbar personalizzata per dark mode */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: #0f1419; /* Sfondo scuro */
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 111, 0, 0.5); /* Arancione trasparente */
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 111, 0, 0.7); /* Arancione più visibile al hover */
}

/* ========================================
   MOBILE GAMING MODE - Responsive Design
   ======================================== */

@media (max-width: 768px) {
  
  /* ===== 1. NAVBAR & MENU ===== */
  
  /* Nascondi link di navigazione testuali su mobile */
  nav a:not(.mobile-menu-toggle):not(.user-menu-button):not(.cart-icon-btn) {
    display: none !important;
  }
  
  /* Assicura che il pulsante hamburger sia visibile */
  .mobile-menu-toggle {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  /* Menu mobile aperto: sfondo scuro e copertura completa */
  #main-nav.active,
  .mobile-menu.active,
  .mobile-nav.active {
    display: flex !important; /* Coerente con JS che usa flex */
    background: #0b0e15 !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 9999 !important;
    padding: 80px 20px 20px 20px !important;
    overflow-y: auto !important;
    flex-direction: column !important;
  }
  
  #main-nav.active a,
  .mobile-menu.active a,
  .mobile-nav.active a {
    display: block !important; /* I link sono block dentro il flex container */
    color: #ffffff !important;
    padding: 15px 20px !important;
    margin: 10px 0 !important;
    border-radius: 8px !important;
    background: rgba(31, 41, 55, 0.5) !important;
    border: 1px solid rgba(255, 140, 0, 0.3) !important;
    font-size: 1.1em !important;
    text-align: center !important;
  }
  
  #main-nav.active a:hover,
  .mobile-menu.active a:hover,
  .mobile-nav.active a:hover {
    background: rgba(255, 140, 0, 0.2) !important;
    border-color: #ff8c00 !important;
    color: #ff8c00 !important;
  }
  
  /* ===== 2. HERO BANNER (Banner Neon) ===== */
  
  .welcome-section[data-keep-welcome="true"] {
    min-height: 200px !important;
    max-height: 300px !important;
  }
  
  .welcome-banner-img {
    min-height: 200px !important;
    object-fit: cover !important;
    object-position: center center !important;
  }
  
  /* ===== 3. GRIGLIA GIOCHI (Cruciale) ===== */
  
  /* Forza 2 colonne su mobile */
  .games-grid,
  .games-container,
  #games-container,
  .sort-filter + div,
  [class*="games"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  
  /* Riduci font e padding nelle card */
  .game-card {
    padding: 12px !important;
    min-height: auto !important;
  }
  
  .game-card h3 {
    font-size: 0.9rem !important;
    line-height: 1.3 !important;
    margin: 8px 0 4px 0 !important;
  }
  
  .game-card .prezzo,
  .game-card .price {
    font-size: 1.1rem !important;
    margin: 6px 0 !important;
  }
  
  .game-card img {
    height: 120px !important;
    object-fit: cover !important;
  }
  
  /* Riduci dimensioni badge e pulsanti nelle card */
  .game-card .badge,
  .game-card .versioni,
  .game-card .edition-options {
    font-size: 0.75rem !important;
    padding: 4px 8px !important;
  }
  
  .game-card .buy-btn {
    padding: 8px 12px !important;
    font-size: 0.85rem !important;
  }
  
  /* ===== 4. PULSANTI FLUTTUANTI (WhatsApp & Richiesta) ===== */
  
  /* Rimpicciolisci WhatsApp button */
  .whatsapp-container {
    bottom: 20px !important;
    right: 20px !important;
    z-index: 2147483646 !important;
  }
  
  .whatsapp-btn {
    width: 50px !important;
    height: 50px !important;
    padding: 10px !important;
  }
  
  .whatsapp-btn img {
    width: 30px !important;
    height: 30px !important;
  }
  
  .whatsapp-text {
    font-size: 0.75rem !important;
    padding: 6px 10px !important;
    max-width: 140px !important;
  }
  
  /* Rimpicciolisci Richiesta button */
  .richiesta-btn {
    bottom: 20px !important;
    left: 20px !important;
    padding: 10px 14px !important;
    font-size: 0.8rem !important;
    z-index: 2147483646 !important;
  }
  
  /* Assicura che non coprano il carrello */
  .cart-icon-btn {
    z-index: 2147483647 !important;
  }
  
  /* ===== 5. SEZIONE "COME FUNZIONA" ===== */
  
  .how-it-works-container {
    flex-direction: column !important;
    gap: 20px !important;
  }
  
  .explanation-card {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
  
  /* ===== ALTRI AGGIUSTAMENTI MOBILE ===== */
  
  /* Header più compatto */
  header {
    padding: 10px 15px !important;
  }
  
  .logo img {
    height: 50px !important;
  }
  
  /* Statistiche più compatte */
  .sales-counter {
    flex-direction: column !important;
    gap: 15px !important;
    padding: 20px 15px !important;
    font-size: 0.9rem !important;
  }
  
  .counter-item {
    width: 100% !important;
  }
  
  /* Modali più piccole */
  .info-box,
  .modal-content {
    width: 95% !important;
    max-width: 95% !important;
    padding: 20px 15px !important;
    margin: 10px !important;
  }
  
  /* Admin panel responsive */
  .admin-main-container {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  
  /* Form più compatti */
  .form-group input,
  .form-group select,
  .form-group textarea {
    font-size: 16px !important; /* Previene zoom su iOS */
    padding: 10px !important;
  }
  
  /* Tabella prezzi responsive */
  #prices-container {
    overflow-x: auto !important;
  }
  
  /* Welcome features verticali */
  .welcome-features {
    flex-direction: column !important;
    gap: 12px !important;
    max-width: 100% !important;
  }
  
  .welcome-features .feature {
    width: 100% !important;
    max-width: 100% !important;
  }
  
  /* Scroll button più piccolo */
  .scroll-btn {
    padding: 10px 20px !important;
    font-size: 0.9rem !important;
  }
  
  /* ========================================
     PANNELLO ADMIN - MOBILE OPTIMIZATION
     ======================================== */
  
  /* ===== 1. FORM ADMIN (Aggiungi/Modifica Prodotto) ===== */
  
  /* Trasforma tutti i flex row in column */
  #admin-panel .form-group,
  #admin-panel .form-row,
  #admin-panel [style*="flex-direction: row"],
  .admin-main-container,
  #ap-form-container,
  #mp-form-container {
    flex-direction: column !important;
    gap: 15px !important;
  }
  
  /* Input e select al 100% della larghezza */
  #admin-panel input[type="text"],
  #admin-panel input[type="number"],
  #admin-panel input[type="email"],
  #admin-panel input[type="url"],
  #admin-panel select,
  #admin-panel textarea,
  .form-group input,
  .form-group select,
  .form-group textarea {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* Pulsanti Salva e Reset affiancati ma a larghezza piena */
  #ap-save,
  #ap-reset,
  #mp-save,
  #mp-reset,
  .form-group button[type="submit"],
  .form-group button[type="button"] {
    width: 100% !important;
    margin: 5px 0 !important;
    padding: 12px !important;
    font-size: 1rem !important;
  }
  
  /* Container pulsanti affiancati */
  .form-actions,
  .button-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
  }
  
  /* Se ci sono pulsanti affiancati, falli andare a capo */
  .form-actions button,
  .button-group button {
    flex: 1 1 100% !important;
    min-width: 100% !important;
  }
  
  /* ===== 2. CARD PREZZI (Gestione Prezzi Rapida) ===== */
  
  /* Container prezzi responsive */
  #prices-container {
    padding: 10px !important;
  }
  
  /* Card giochi più compatte */
  #prices-container > div > div > div[data-game-id] {
    padding: 12px !important;
    margin-bottom: 10px !important;
  }
  
  /* Header card (immagine + titolo) più compatto */
  #prices-container [style*="display: flex"][style*="align-items: center"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
    padding-bottom: 8px !important;
  }
  
  /* Immagine più piccola su mobile */
  #prices-container img {
    width: 40px !important;
    height: 40px !important;
  }
  
  /* Griglia prezzi: 1 colonna su mobile */
  #prices-container [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  
  /* Input prezzi più compatti */
  #prices-container input[type="number"] {
    width: 100% !important;
    padding: 8px !important;
    font-size: 0.9rem !important;
  }
  
  /* ===== 3. MODALI (Popup) ===== */
  
  /* Tutti i modali al 95% width su mobile */
  .info-box,
  .modal-content,
  .modal,
  #login-modal,
  #profile-modal,
  .order-detail-modal-content,
  .proposal-modal-content,
  #proposal-modal,
  #manage-proposal-modal {
    width: 95% !important;
    max-width: 95% !important;
    margin: 10px auto !important;
    padding: 15px !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
  }
  
  /* Pulsante chiusura (X) più grande per touch */
  .close-btn,
  .info-box .close-btn,
  .modal .close-btn,
  button[onclick*="close"],
  button[aria-label*="close" i] {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    font-size: 24px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
  }
  
  /* Header modali più compatto */
  .info-box-title,
  .modal-header h3,
  .modal-header h4 {
    font-size: 1.3rem !important;
    margin-bottom: 15px !important;
  }
  
  /* ===== 4. TABELLE/LISTE ===== */
  
  /* Container tabelle con scroll orizzontale */
  #ap-table-container,
  #mp-table-container,
  #orders-container,
  #orders-list,
  .table-container,
  [class*="table-wrapper"],
  [class*="table-container"] {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    width: 100% !important;
    max-width: 100vw !important;
  }
  
  /* Tabelle responsive */
  #ap-products-table,
  #mp-products-table,
  table {
    min-width: 600px !important; /* Larghezza minima per mantenere leggibilità */
    width: 100% !important;
    font-size: 0.85rem !important;
  }
  
  /* Celle tabella più compatte */
  #ap-products-table th,
  #ap-products-table td,
  #mp-products-table th,
  #mp-products-table td,
  table th,
  table td {
    padding: 8px 4px !important;
    font-size: 0.8rem !important;
    white-space: nowrap !important;
  }
  
  /* Liste ordini più compatte */
  .order-item,
  .proposal-item {
    padding: 12px !important;
    margin-bottom: 10px !important;
    flex-direction: column !important;
    gap: 8px !important;
  }
  
  /* Pulsanti nelle liste più grandi per touch */
  .order-item button,
  .proposal-item button,
  .order-details-btn {
    padding: 10px 15px !important;
    font-size: 0.9rem !important;
    min-height: 44px !important; /* Dimensione touch-friendly */
  }
  
  /* ===== ALTRI AGGIUSTAMENTI ADMIN MOBILE ===== */
  
  /* Sidebar admin nascosta su mobile */
  .admin-sidebar {
    display: none !important;
  }
  
  /* Container principale admin full width */
  .admin-main-container {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  
  /* Form step più compatti */
  .form-step {
    padding: 15px !important;
    margin-bottom: 15px !important;
  }
  
  /* Label più compatte */
  .form-group label {
    font-size: 0.9rem !important;
    margin-bottom: 5px !important;
  }
  
  /* Checkbox e radio più grandi per touch */
  input[type="checkbox"],
  input[type="radio"] {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
  }
  
  /* Dropdown admin più compatti */
  .admin-dropdown,
  #ap-search-results,
  #mp-search-results {
    width: 100% !important;
    max-width: 100% !important;
    left: 0 !important;
    right: 0 !important;
  }
  
  /* Statistiche admin verticali */
  #orders-stats,
  .admin-stats {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  
  /* Bulk actions verticali */
  #bulk-selection-controls,
  #bulk-actions {
    flex-direction: column !important;
    gap: 10px !important;
  }
  
  /* Filtri verticali */
  #orders-category-filter,
  #orders-status-filter,
  #category-filter {
    width: 100% !important;
    margin-bottom: 10px !important;
  }

}

.seo-intro {
  max-width: 900px;
  margin: 30px auto 40px;
  padding: 0 16px;
  text-align: left;
  color: #e5e7eb;
  font-size: 0.98rem;
  line-height: 1.7;
}

.seo-intro h2 {
  font-size: 1.5rem;
  margin-bottom: 12px;
  color: #f9fafb;
}

.seo-intro ul {
  margin-top: 10px;
  margin-left: 1.2rem;
  list-style: disc;
}

.seo-intro li {
  margin-bottom: 4px;
}

.section-description {
  max-width: 900px;
  margin: 0 auto 24px;
  padding: 0 16px;
  text-align: left;
  color: #e5e7eb;
  font-size: 0.95rem;
  line-height: 1.6;
}

.section-description h2 {
  font-size: 1.3rem;
  margin-bottom: 8px;
  color: #f9fafb;
}

@media (max-width: 768px) {
  .seo-intro,
  .section-description {
    padding: 0 12px;
    font-size: 0.92rem;
  }
}

/* ============================================
   OTTIMIZZAZIONI MOBILE - iPhone e telefoni piccoli
   ============================================ */

@media (max-width: 480px) {
  body {
    font-size: 14px;
  }

  header {
    padding: 8px 10px;
  }

  .header-content {
    gap: 8px;
  }

  .logo img#main-logo {
    height: 52px;
    width: auto;
  }

  .welcome-content h1 {
    font-size: 2rem;
    margin-bottom: 14px;
  }

  .welcome-content p {
    font-size: 1.05rem;
    margin-bottom: 18px;
  }

  .welcome-actions {
    gap: 10px;
    padding: 0 10px;
  }

  section.games-section {
    padding: 32px 12px 28px;
  }

  .games-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .game-card {
    padding: 12px;
  }

  .seo-intro,
  .section-description {
    padding: 0 10px;
    font-size: 0.9rem;
  }

  .seo-intro h2,
  .section-description h2 {
    font-size: 1.2rem;
  }

  /* Overlay di manutenzione ottimizzato per mobile */
  #maintenance-overlay {
    padding: 16px !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    overflow-y: auto !important;
  }

  #maintenance-overlay > div {
    max-width: 100% !important;
  }

  #maintenance-overlay h2 {
    font-size: 1.6rem !important;
    line-height: 1.3 !important;
  }

  #maintenance-overlay p,
  #maintenance-overlay #maintenance-message {
    font-size: 0.98rem !important;
    line-height: 1.6 !important;
  }

  #maintenance-overlay img {
    max-width: 85% !important;
    height: auto !important;
  }

  /* Riduzione icone e spaziature nell'overlay */
  #maintenance-overlay .fa-wrench,
  #maintenance-overlay div[style*="font-size: 48px"] {
    font-size: 32px !important;
  }

  /* Messaggio manutenzione più compatto */
  #maintenance-overlay div[style*="background: rgba(255,255,255,0.1)"] {
    padding: 16px !important;
    margin: 0 auto !important;
  }

  /* Container principale overlay più compatto */
  #maintenance-overlay > div {
    padding: 0 10px !important;
  }

  /* Logo manutenzione più piccolo su mobile */
  #maintenance-logo {
    max-width: 280px !important;
    max-height: 120px !important;
  }

  /* Titolo con icone più compatto */
  #maintenance-overlay div[style*="display: flex"][style*="align-items: center"] {
    gap: 12px !important;
    margin-bottom: 16px !important;
  }

  #maintenance-overlay div[style*="font-size: 48px"] {
    font-size: 28px !important;
  }

  /* Spaziatura logo ridotta */
  #maintenance-overlay div[style*="margin-bottom: 30px"] {
    margin-bottom: 20px !important;
  }
}

/* FIX Z-INDEX ADMIN: Assicura che i menu a tendina stiano sopra a tutto */

/* 1. Alza il livello del contenitore "Gestione Prodotto" */
#product-manager {
    position: relative !important;
    z-index: 50 !important; /* Deve essere più alto del box successivo */
}

/* 2. Abbassa il livello del contenitore "Gestione Disponibilità" */
#availability-manager {
    position: relative !important;
    z-index: 1 !important;
}

/* 3. Forza il menu a tendina dei risultati ad essere in primo piano assoluto */
#mp-search-results, 
.search-results-dropdown {
    z-index: 99999 !important;
    position: absolute !important;
    background-color: #1f2937 !important; /* Assicura sfondo scuro coprente */
    border: 1px solid #4b5563 !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.8) !important;
}

/* === FIX VISIBILITÀ GESTIONE PREZZI === */

#prices-container {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  min-height: 400px !important; /* Forza altezza minima */
  max-height: 70vh !important; /* Limita altezza massima */
  overflow-y: auto !important; /* Abilita scroll */
  background: #111827 !important; /* Sfondo scuro */
  border: 2px solid #ffd700 !important; /* Bordo giallo/oro */
  border-radius: 12px !important;
  margin: 20px 0 60px 0 !important;
  padding: 15px !important;
  position: relative !important;
  z-index: 10 !important;
}

/* Assicura che il contenuto dentro sia visibile */
#prices-container * {
  visibility: visible !important;
  opacity: 1 !important;
}

/* Forza la visualizzazione della griglia interna */
#prices-container > div {
  display: grid !important;
  gap: 15px !important;
}

/* Stile card prezzo singola (fix contrasto) */
#prices-container > div > div {
  background: #1f2937 !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: white !important;
  padding: 15px !important;
  border-radius: 8px !important;
}

/* Fix Input Prezzi */
#prices-container input[type="number"] {
  background: #0b0e15 !important;
  color: #ffffff !important;
  border: 1px solid #4b5563 !important;
  min-width: 80px !important;
  height: 36px !important;
  font-weight: bold !important;
}

/* Feedback visivo quando si modifica un prezzo */
#prices-container input[data-changed="true"] {
  background: rgba(255, 140, 0, 0.2) !important;
  border-color: #ffd700 !important;
  color: #ffd700 !important;
}

/* === GESTIONE PREZZI - RIMOSSA === */

/* Assicura che Gestione Disponibilità stia sotto */
#availability-manager {
  position: relative !important;
  z-index: 1 !important;
  margin-top: 40px !important;
  clear: both !important;
}

/* Gestione Prezzi rimossa - CSS eliminato */

#availability-manager {
  clear: both !important;
  z-index: 1 !important;
  margin-top: 40px !important;
}

/* ========================================
CORREZIONE DEFINITIVA SOVRAPPOSIZIONE
Gestione Prezzi Rapida vs Disponibilità
======================================== */
#bulk-price-manager {
  clear: both !important;
  margin-bottom: 60px !important;
  position: static !important;
  z-index: auto !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

#prices-container {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  max-height: 70vh !important;
  min-height: 400px !important;
  margin-bottom: 60px !important;
  margin-top: 20px !important;
  padding: 20px !important;
  background: #1f2937 !important;
  border: 2px solid #ffd700 !important;
  border-radius: 12px !important;
  clear: both !important;
  position: relative !important;
  z-index: 10 !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

#availability-manager {
  clear: both !important;
  position: static !important;
  z-index: 1 !important;
  margin-top: 40px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Scorri solo all'interno del container */
#prices-container::-webkit-scrollbar {
  width: 8px;
  background: #374151;
}
#prices-container::-webkit-scrollbar-thumb {
  background: #ff8c00;
  border-radius: 4px;
}