/* ==========================================================================
   1. A ZONZO - RESET BROWSER E TIPOGRAFIA GLOBALE
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
}

body,
html {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
    sans-serif;
  background-color: #000;
  color: #fff;
  position: fixed;
}

/* Tipografia Identitaria del Brand */
.product-name-right,
.btn-salvagente,
.menu-btn,
.future-btn,
.btn-reset,
.banner-brand,
.detail-title {
  font-family: "New Serif Demi", Georgia, serif;
  font-weight: bold;
}

.product-ingredients-left {
  font-family: "New Serif Demi", Georgia, serif;
  font-style: italic;
}

.squircle {
  border-radius: 20px;
}

/* ==========================================================================
   2. HEADER GLOBALE E CONTROLLI NAVIGAZIONE BROWSER
   ========================================================================== */
.global-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;
  z-index: 100;

  /* SOSTITUITO: Rimosso il gradiente nero pesante e reso totalmente trasparente */
  background: transparent;

  padding: 15px 20px 0 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  pointer-events: none;
}

.nav-dots {
  display: flex;
  gap: 6px;
  margin: 5px auto;
}

.dot {
  width: 6px;
  height: 6px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
}

.dot.active {
  background: #fff;
  transform: scale(1.2);
}

/* ==========================================================================
   3. STRUTTURA DECK (MOTORE DI SWIPE ORIZZONTALE A 7 CARTE)
   ========================================================================== */
.deck-container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  width: 700%; /* 7 pagine in orizzontale */
  height: 100vh;
  height: 100dvh;
  position: relative;
  transition: transform 0.8s cubic-bezier(0.23, 1, 0.32, 1);
  will-change: transform;
  touch-action: none;
}

.card {
  width: 14.2857%; /* 100% diviso 7 carte */
  flex-shrink: 0;
  height: 100%;
  position: relative;
  box-sizing: border-box;
  padding-top: 8vh !important;
  padding-bottom: 6vh !important;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Filo divisorio verticale sfumato per simulare le pagine del libro */
.card:not(#card7)::after {
  content: "";
  position: absolute;
  top: 8vh;
  right: 0;
  width: 4px;
  height: calc(100% - 14vh);
  background: rgba(255, 255, 255, 0.2);
  z-index: 10;
  border-radius: 4px 0 0 4px;
}

.card-body {
  width: 100%;
  height: auto;
  flex-grow: 1; /* Spinge il contenuto in modo fluido */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  box-sizing: border-box;
}

/* ==========================================================================
   1. STRUTTURA DELLE SLIDE NARRATIVE CON CENTRATURA ASSOLUTA (CARTE 2-6)
   ========================================================================== */

/* Forza TUTTE le carte narrative a bloccare gli sconfinamenti */
#card2,
#card3,
#card4,
#card5,
#card6 {
  padding-top: 100px !important;
  padding-bottom: 75px !important;
  box-sizing: border-box !important;
  overflow: hidden !important; /* Impedisce a scritte o loghi di scivolare nella pagina accanto */
}

/* Allinea perfettamente i box al centro esatto dello schermo del telefono */
#card2 .card-body,
#card3 .card-body,
#card4 .card-body,
#card5 .card-body,
#card6 .card-body {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important; /* Centratura orizzontale millimetrica */
  width: 100% !important;
  height: 100% !important;
  padding: 0 10px !important;
  margin: 0 auto !important;
}

/* Allineamento verticale stabile per il Logo di Carta 2 */
#card2 #btnLogoStoria {
  background: transparent !important; /* Rimuove definitivamente l'arancione o sfondi opaco */
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 auto !important;
  width: 100% !important;
  max-width: 290px !important; /* Dimensione ottimale per coprire lo spazio armoniosamente */
  cursor: pointer;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  align-self: center !important;
}

#card2 #btnLogoStoria img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
}

/* Il Box in Vetro Apple Liquid Glass: perfettamente centrato e contenuto */
#card3 .glass-box,
#card4 .glass-box,
#card5 .glass-box,
#card6 .glass-box {
  width: 90% !important; /* Respiro ai lati su schermi stretti */
  max-width: 340px !important;
  height: auto !important;
  min-height: 52% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 35px 24px !important;
  margin: auto auto !important; /* Centratura verticale e orizzontale automatica */
  border-radius: 38px !important;

  /* Effetto Apple Liquid Glass */
  background: radial-gradient(
    circle at 50% 0%,
    rgba(255, 255, 255, 0.12) 0%,
    rgba(255, 255, 255, 0.02) 60%
  ) !important;
  backdrop-filter: blur(35px) saturate(240%) brightness(102%) !important;
  -webkit-backdrop-filter: blur(35px) saturate(240%) brightness(102%) !important;
  border: 1px solid rgba(255, 255, 255, 0.38) !important;
  box-shadow:
    inset 0 4.5px 6px rgba(255, 255, 255, 0.55),
    inset 0 -2.5px 4px rgba(255, 255, 255, 0.2),
    0 18px 45px rgba(0, 0, 0, 0.35) !important;
}

/* Eccezione di Stile Cristallo Scuro Leggibile per Carta 3 (Nave) */
#card3 .glass-box {
  background: rgba(0, 0, 0, 0.45) !important;
  backdrop-filter: blur(12px) saturate(150%) brightness(100%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(150%) brightness(100%) !important;
}

/* Testo narrativo interno delle schede */
.narrative-text,
.glass-box p {
  font-family:
    -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif !important;
  color: #ffffff !important;
  font-size: 16px !important;
  line-height: 1.65 !important;
  font-weight: 600 !important;
  letter-spacing: -0.2px !important;
  text-align: center !important;
  text-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.65) !important;
  width: 100% !important;
}

/* ==========================================================================
   2. INTERFACCIA E LOGHI SUPERIORI (BANNER PASSAPORTO)
   ========================================================================== */
#card1 .card-body,
#card7 .card-body {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: center !important;
  padding: 85px 20px 40px 20px !important;
  box-sizing: border-box !important;
}

.banner-passaporto {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  width: 92% !important;
  max-width: 380px !important;
  padding: 22px 14px !important;
  margin: 0 auto 22px auto !important;
  box-sizing: border-box !important;
}

.banner-passaporto:active {
  background: rgba(255, 255, 255, 0.22) !important;
  transform: scale(0.97) !important;
}

.banner-brand {
  font-family: "New Serif Demi", Georgia, serif !important;
  font-size: 26px !important;
  font-weight: 900 !important;
  color: #ffd700 !important;
  letter-spacing: 3.5px !important;
  text-transform: uppercase;
  text-shadow:
    0 2px 4px rgba(0, 0, 0, 0.8),
    0 4px 12px rgba(0, 0, 0, 0.9) !important;
}

.banner-sub {
  color: #fdfbf7 !important;
  font-weight: 900 !important;
  font-size: 11px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase;
  text-shadow:
    1px 1px 0px #000,
    -1px -1px 0px #000,
    0px 4px 8px rgba(0, 0, 0, 0.95) !important;
  margin-top: 4px !important;
}

/* ==========================================================================
   3. STRUTTURA DELLE GRIGLIE GENERALI E BOTTONI CICCIOTTI
   ========================================================================== */
.griglia-scacchiera {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 20px !important;
  width: 92% !important;
  max-width: 380px !important;
  margin: 10px auto 0 auto !important;
  transform: translateY(-20px) !important;
  box-sizing: border-box !important;
}

.griglia-scacchiera button,
.griglia-scacchiera .menu-btn,
.griglia-scacchiera .btn-salvagente,
.griglia-scacchiera .btn-seguici-footer {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  flex-direction: column !important;
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 32px !important;
  padding: 16px !important;
  color: #ffffff !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  background: transparent !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 2px solid #c79a35 !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3) !important;
  font-size: 20px !important;
  line-height: 1.2 !important;
  font-weight: 850 !important;
  letter-spacing: -0.5px !important;
  text-shadow:
    0 2px 5px rgba(0, 0, 0, 0.95),
    0 4px 12px rgba(0, 0, 0, 0.8) !important;
  transition:
    background 0.2s ease,
    transform 0.1s ease,
    box-shadow 0.2s !important;
}

.griglia-scacchiera button:active,
.griglia-scacchiera .menu-btn:active,
.griglia-scacchiera .btn-salvagente:active {
  background: rgba(255, 255, 255, 0.22) !important;
  transform: scale(0.95) !important;
  box-shadow:
    inset 0 2px 3px rgba(255, 255, 255, 0.3),
    0 6px 15px rgba(0, 0, 0, 0.3) !important;
}

/* ==========================================================================
   POP-UP DETTAGLIO OVERLAY (SISTEMA DI VETRO FLUIDO CORRETTO)
   ========================================================================== */
.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.45) !important;
  backdrop-filter: blur(15px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(15px) saturate(160%) !important;
  z-index: 99999 !important; /* Spinto sopra a tutto per non essere coperto da blocchi fantasma */
  opacity: 0;
  visibility: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.popup-overlay.open {
  opacity: 1;
  visibility: visible;
}

.popup-container {
  width: 96% !important;
  max-width: 360px !important;
  height: 92% !important;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 28px !important;
  border: 2.5px solid rgba(255, 255, 255, 0.65) !important;
  box-shadow:
    inset 0 4px 4px rgba(255, 255, 255, 0.6),
    0 22px 55px rgba(0, 0, 0, 0.8) !important;
}

.popup-close {
  position: absolute;
  top: 16px !important;
  left: 16px !important;
  background: rgba(0, 0, 0, 0.6);
  border: none;
  color: #fff;
  width: 44px !important;
  height: 44px !important;
  border-radius: 50%;
  font-size: 26px !important;
  z-index: 510;
  cursor: pointer;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.popup-content {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  padding: 35px 22px 45px 22px !important;
  -webkit-overflow-scrolling: touch;
}

/* --------------------------------------------------------------------------
   STRUTTURA TIPOGRAFICA DEL POPUP DI DETTAGLIO
   -------------------------------------------------------------------------- */
.popup-content .detail-title {
  font-size: 26px !important;
  margin-bottom: 20px !important;
  color: #ffd700 !important;
  text-align: center !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8) !important;
}

.popup-content .detail-description {
  font-size: 16.5px !important;
  line-height: 1.65 !important;
  text-align: justify !important;
  color: rgba(255, 255, 255, 0.95) !important;
  margin-bottom: 18px !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9) !important;
}

.popup-back-btn {
  background: none;
  border: none;
  color: #d4af37;
  font-size: 16px !important;
  padding: 10px 16px !important;
  margin-bottom: 22px !important;
  cursor: pointer;
  align-self: flex-start;
}

/* Immagini Prodotto nel Pop-up fluide (Pronte per l'ingrandimento senza blocchi) */
.detail-image-wrapper {
  width: 100% !important;
  height: auto !important; /* Rimosso il blocco a 155px per permettere l'allargamento */
  max-height: 200px !important;
  margin: 10px 0 20px 0 !important;
  overflow: hidden !important;
  border-radius: 20px !important;
}

.detail-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important; /* Mantiene l'immagine intera e definita */
  object-position: center center !important;
}

/* --------------------------------------------------------------------------
   REGOLAZIONI RITRATTI STORICI (SALVA-VISO) E RIGHE HARDWARE SFONDO
   -------------------------------------------------------------------------- */
img[src*="santa_caterina.jpg"],
img[src*="matilde_canossa.jpg"],
img[src*="monna_lisa.jpg"],
img[src*="caterina_sforza.jpg"],
img[src*="ginevra_almieri.jpg"],
img[src*="caterina_medici.jpg"],
img[src*="simonetta_vespucci.jpg"] {
  object-position: center 10% !important;
}
img[src*="salto_limon.jpg"] {
  object-position: center 65% !important;
}

.global-background-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -10;
  overflow: hidden;
}

#bgVideo,
#bgImage {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#bgVideo {
  object-position: top center !important;
}
#bgImage {
  background-size: 98% auto !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

.home-logo-img {
  width: auto !important;
  height: 42px !important;
  max-width: 85% !important;
  object-fit: contain !important;
  mix-blend-mode: multiply !important;
  filter: brightness(140%) contrast(120%) !important;
}

/* ==========================================================================
   CARTA 2: STRUTTURA E LOGO WIDGET IN VETRO DEFINITIVO (NITIDO E BOMBATO)
   ========================================================================== */

/* Allineamento millimetrico verticale pulito */
#card2 .card-body {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 20px !important;
  box-sizing: border-box !important;
  position: relative !important;
  height: 100% !important;
}

/* La Targa in Vetro - Effetto bombatura premium senza sfocare l'immagine */
#btnLogoStoria {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 92% !important;
  max-width: 380px !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 42px !important;
  padding: 20px !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  background-image: none !important;

  /* Vetro lucido tridimensionale */
  background: radial-gradient(
    circle at 50% 15%,
    rgba(255, 255, 255, 0.25) 0%,
    rgba(255, 255, 255, 0.08) 65%,
    rgba(0, 0, 0, 0.15) 100%
  ) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;

  border: 1.5px solid rgba(255, 255, 255, 0.5) !important;
  outline: 1px solid rgba(0, 0, 0, 0.15) !important;

  /* Volume 3D pulito ed eliminazione ombre squadrate obsolete */
  box-shadow:
    inset 0 5px 6px rgba(255, 255, 255, 0.6),
    inset 0 -4px 5px rgba(0, 0, 0, 0.35),
    0 18px 36px rgba(0, 0, 0, 0.5) !important;

  transition:
    background 0.2s ease,
    transform 0.1s ease,
    box-shadow 0.2s !important;
}

/* Il Logo Interno - Forzato nitido e in primo piano */
#btnLogoStoria img {
  width: 90% !important;
  height: 90% !important;
  object-fit: contain !important;
  filter: none !important;
  -webkit-filter: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* Feedback tattile realistico al tocco */
#btnLogoStoria:active {
  background: rgba(255, 255, 255, 0.3) !important;
  transform: scale(0.96) !important;
}

/* Scatola di testo di Carta 2 bilanciata e stabile */
#card2 .glass-box {
  width: 90% !important;
  max-width: 340px !important;
  height: 50vh !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 35px 24px !important;
  border-radius: 38px !important;
  margin: 0 auto !important;

  /* Cristallo scuro protettivo ad alta leggibilità */
  background: rgba(0, 0, 0, 0.5) !important;
  backdrop-filter: blur(15px) saturate(140%) brightness(90%) !important;
  -webkit-backdrop-filter: blur(15px) saturate(140%) brightness(90%) !important;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4) !important;

  /* Spostamento controllato per assecondare il mazzo */
  transform: translateY(-65px) !important;
}

/* ==========================================================================
   STILE CRISTALLO DIOS UNIFICATO (CARTE 2, 3, 4, 5, 6)
   ========================================================================== */
#card2 .glass-box,
#card3 .glass-box,
#card4 .glass-box,
#card5 .glass-box,
#card6 .glass-box,
.glass-box {
  width: 85% !important;
  max-width: 340px !important;
  height: 45vh !important; /* Via di mezzo perfetta stabilità per il testo */
  margin: 0 auto !important;

  /* Trasparenza cristallina senza patine scure fastidiose */
  background-image: none !important;
  background: rgba(255, 255, 255, 0.06) !important;

  /* Sfocatura profonda stile iOS per isolare il testo dallo sfondo */
  backdrop-filter: blur(15px) saturate(140%) brightness(105%) !important;
  -webkit-backdrop-filter: blur(15px) saturate(140%) brightness(105%) !important;

  /* Bordino di luce del cristallo e ombre tridimensionali */
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  border-radius: 38px !important;
  box-shadow:
    inset 0 4.5px 6px rgba(255, 255, 255, 0.35),
    inset 0 -2.5px 4px rgba(255, 255, 255, 0.1),
    0 15px 35px rgba(0, 0, 0, 0.25) !important;
}

/* Sblocco contenitori per evitare ritagli o blocchi invisibili */
#card2,
#card3,
#card4,
#card5,
#card6,
#card2 .card-body {
  background: transparent !important;
  height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
}

/* TESTO EDITORIALE AD ALTA LEGGIBILITÀ */
#card2 .glass-box p,
#card3 .glass-box p,
#card4 .glass-box p,
#card5 .glass-box p,
#card6 .glass-box p,
.narrative-text {
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  line-height: 1.65 !important;
  text-align: center !important;
  /* Ombra protettiva per non far impastare le scritte con le immagini dietro */
  text-shadow:
    0 2px 4px rgba(0, 0, 0, 0.9),
    0 1px 1px rgba(0, 0, 0, 0.95) !important;
}

/* ==========================================================================
   3. GESTIONE CARTE (2, 3, 4, 5, 6)
   ========================================================================== */
#card2 .card-central-interaction,
#card3 .card-central-interaction,
#card4 .card-central-interaction,
#card5 .card-central-interaction,
#card6 .card-central-interaction {
  justify-content: flex-start !important;
  padding-top: 0vh !important;
}

#card2 .glass-box,
#card3 .glass-box,
#card4 .glass-box,
#card5 .glass-box,
#card6 .glass-box {
  margin-top: -40px !important;
  height: 40vh !important;
  margin-bottom: auto !important;
  position: relative !important;
  top: auto !important;
  transform: none !important;
  padding: 15px !important;
}

#card2 .glass-box p,
#card3 .glass-box p,
#card4 .glass-box p,
#card5 .glass-box p,
#card6 .glass-box p {
  max-height: 100% !important;
  overflow-y: auto !important;
}

/* ==========================================================================
   CARTA 1 (HOME) - SCHEMA UNIFICATO E DEFINITIVO (PULITO DAI DOPPIONI)
   ========================================================================== */

#card1 .nuova-struttura-home {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  height: 100% !important;
  box-sizing: border-box !important;
}

/* Griglie orizzontali per i pulsanti affiancati */
#card1 .griglia-pulsanti,
#card1 .griglia-superiore,
#card1 .griglia-inferiore {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 92% !important;
  max-width: 360px !important;
  margin: 15px auto !important;
}

/* 1. REGOLAZIONE POSIZIONAMENTO GRUPPI SULLA PERGAMENA */
#card1 .griglia-superiore {
  margin-top: 3dvh !important; /* Muove il gruppo superiore rispetto al logo in alto */
  margin-bottom: 1dvh !important;
}

#card1 .griglia-inferiore {
  margin-bottom: 4dvh !important; /* Spinge in su i bottoni dal fondo per centrarli */
}

/* 2. IL CONTENITORE CHE TIENE UNITI LEGNO E FOTO (Dà la grandezza ai bottoni) */
#card1 .wrapper-pulsante-foto {
  position: relative !important;
  width: 48% !important;
  max-width: 175px !important; /* INGRANDITO: dà molto più volume visivo sul telefono */
  display: block !important;
}

/* 3. IL CARTELLO IN LEGNO DI BASE (Con le scritte dorate) */
#card1 .nuovo-bottone {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  cursor: pointer !important;
  opacity: 1 !important;
  background: none !important;
  filter: drop-shadow(
    0px 6px 12px rgba(0, 0, 0, 0.6)
  ) !important; /* Ombra premium morbida */
}

/* 4. LA FOTO DEL PIATTO (Sigillata millimetricamente dentro la cornice dorata) */
#card1 .foto-piatto-sovrapposta {
  position: absolute !important;

  /* Centratura geometrica perfetta in percentuale: non scappa mai più */
  top: 4.5% !important;
  left: 4.5% !important;
  width: 91% !important; /* Copre la larghezza esatta lasciando la cornice visibile ai lati */
  height: 60% !important; /* Copre la parte superiore lasciando libera la scritta sotto */

  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  border-radius: 12px 12px 0 0 !important; /* Segue gli angoli alti arrotondati del legno */

  pointer-events: none !important; /* Il click passa sotto sul legno e attiva il JavaScript */
  z-index: 5 !important;
}

/* ==========================================================================
   DA QUI IN POI IL TUO CSS RIMANE IDENTICO A PRIMA (Popup e Funzioni)
   ========================================================================== */

/* Tasto invisibile sopra l'icona esistente */
.tasto-menu-invisibile {
  position: absolute;
  top: 15px;
  left: 15px;
  width: 50px;
  height: 50px;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  cursor: pointer;
  pointer-events: auto;
  z-index: 110;
}

/* Struttura dell'Overlay del Popup */
.menu-popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.75);
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

/* Quando il popup si attiva */
.menu-popup-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.menu-popup-content {
  background-image: url("assets/images/logo_azonzo.jpg") !important;
  background-size: 100% 100% !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  border: none !important;
  border-radius: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 100dvh !important;
  padding: 40px 20px 20px 20px !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  position: relative;
}

.menu-popup-title {
  display: none !important;
}

.popup-grid-btn {
  background: transparent !important;
  border: none !important;
  padding: 8px !important;
  font-family: "New Serif Demi", Georgia, serif !important;
  font-weight: 900 !important;
  font-size: 14px !important;
  cursor: pointer;
  color: #1a120b !important;
  text-shadow:
    -1px -1px 0 #e5c158,
    1px -1px 0 #e5c158,
    -1px 1px 0 #e5c158,
    1px 1px 0 #e5c158,
    0px 2px 5px rgba(0, 0, 0, 0.5) !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

.menu-popup-close {
  position: absolute;
  top: 10px;
  left: 20px;
  background: transparent;
  border: none;
  color: #e5c158;
  font-size: 28px;
  cursor: pointer;
}

.menu-popup-title {
  color: #e5c158;
  font-family: "New Serif Demi", Georgia, serif;
  margin-bottom: 20px;
  font-size: 22px;
  letter-spacing: 1px;
}

.menu-popup-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.popup-grid-btn {
  background: transparent;
  color: #e5c158;
  border: 2px solid #e5c158;
  border-radius: 10px;
  padding: 6px !important;
  font-family: "New Serif Demi", Georgia, serif;
  font-weight: bold;
  font-size: 13px !important;
  cursor: pointer;
  transition: background 0.25s;
}

.popup-grid-btn:active {
  background: rgba(229, 193, 88, 0.2);
}

.menu-cristallo {
  background: rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(5px) saturate(140%) brightness(115%) !important;
  -webkit-backdrop-filter: blur(5px) saturate(140%) brightness(115%) !important;
  border: 1px solid rgba(255, 255, 255, 0.45) !important;
  box-shadow:
    inset 0 4.5px 6px rgba(255, 255, 255, 0.25),
    inset 0 -2.5px 4px rgba(255, 255, 255, 0.05),
    0 10px 25px rgba(0, 0, 0, 0.15) !important;
}
/* ==========================================================================
   CARTA 7 - POSIZIONAMENTO ASSOLUTO MILLIMETRICO PER IL PULSANTE
   ========================================================================== */

.card-end-interaction {
  position: relative !important; /* Diventa l'ancora per il posizionamento del tasto */
  display: block !important; /* Rimuoviamo il flexbox che creava il blocco */
  height: 100vh !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* 1. IL BOTTONE (Svincolato dal flusso, ora puoi muoverlo liberamente) */
#btnResetIstantaneo7 {
  position: absolute !important; /* Si muove liberamente sopra lo schermo */
  bottom: -25px !important; /* REGOLA QUI L'ALTEZZA: più alzi il numero, più sale */
  left: 50% !important; /* Lo sposta al centro orizzontale */
  transform: translateX(-50%) !important; /* Centratura perfetta perfetta */

  width: 240px !important; /* Dimensione leggermente ingrandita come richiesto */
  max-width: 240px !important;
  height: auto !important;
  z-index: 9999 !important;
  pointer-events: auto !important;

  /* Reset stili ereditati */
  background: none !important;
  border: none !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
}

/* 2. L'IMMAGINE INTERNA */
#btnResetIstantaneo7 img {
  width: 100% !important;
  max-width: 240px !important;
  height: auto !important;
  display: block !important;
  object-fit: contain !important;
  filter: drop-shadow(0px 6px 12px rgba(0, 0, 0, 0.6)) !important;
}

/* 3. EFFETTO VISIVO AL TOCCO */
#btnResetIstantaneo7:active {
  transform: translateX(-50%) scale(0.95) !important; /* Mantiene la centratura durante il click */
  opacity: 0.85 !important;
}