/* Popup promozionali — generati dal pannello admin (admin/popups.php).
   I valori per singolo popup arrivano da variabili CSS impostate inline
   sull'elemento, quindi questo foglio è statico e cacheabile. */
.mda-popup { position: fixed; inset: 0; z-index: 99000; display: none; align-items: center; justify-content: center; padding: 20px; }
.mda-popup.is-open { display: flex; }
.mda-popup__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.6); animation: mdaPopupFade .25s ease; }
.mda-popup__box {
  position: relative; width: min(var(--mda-popup-width, 640px), 100%);
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--mda-popup-radius, 18px); overflow: hidden; background: #111; color: var(--mda-popup-color, #fff);
  box-shadow: 0 30px 80px rgba(0,0,0,.45); animation: mdaPopupIn .3s cubic-bezier(.2,.8,.3,1);
  max-height: calc(100vh - 40px);
  max-height: calc(100dvh - 40px);
}
/* Con immagine il riquadro prende un'altezza fissa rapportata alla finestra, così la
   foto si vede sempre per intero e non dipende dalla lunghezza del testo.
   dvh (dove supportato) esclude la barra indirizzi mobile: senza, su iOS il popup
   verrebbe tagliato. La riga vh resta come fallback per i browser più vecchi. */
.mda-popup__box[data-has-image="1"] {
  height: calc(var(--mda-popup-height, 80) * 1vh);
  height: calc(var(--mda-popup-height, 80) * 1dvh);
}
/* Larghezza proporzionale all'immagine: si parte dall'altezza voluta e si ricava la
   larghezza dal rapporto della foto, così l'immagine non viene mai tagliata ai lati.
   Se lo spazio orizzontale non basta comanda il 100%, e l'aspect-ratio fa scendere
   l'altezza di conseguenza mantenendo le proporzioni. Deve stare DOPO la regola
   [data-has-image] perché ha la stessa specificità e ne sovrascrive l'altezza. */
.mda-popup__box[data-fit="image"] {
  width: min(calc(var(--mda-popup-ratio, 1.5) * var(--mda-popup-height, 80) * 1vh), 100%);
  width: min(calc(var(--mda-popup-ratio, 1.5) * var(--mda-popup-height, 80) * 1dvh), 100%);
  aspect-ratio: var(--mda-popup-ratio, 1.5);
  height: auto;
}
/* Immagine e velo scuro in un unico pseudo-elemento: così il contenuto non ha
   bisogno di z-index per stare sopra, e quindi non crea uno stacking context.
   È ciò che permette ai bottoni di restare sopra al link a tutta area. */
.mda-popup__box[data-has-image="1"]::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(0,0,0,var(--mda-popup-overlay, .45)), rgba(0,0,0,var(--mda-popup-overlay, .45))),
    var(--mda-popup-image);
  background-size: cover; background-position: center;
}
.mda-popup__box:not([data-has-image="1"])::before {
  content: ''; position: absolute; inset: 0;
  background: rgba(0,0,0,var(--mda-popup-overlay, .45));
}
/* min-height:0 è necessario perché un figlio flex possa davvero scrollare.
   NIENTE z-index qui: lo creerebbe uno stacking context che imprigionerebbe i
   bottoni sotto al link a tutta area. Sta sopra all'immagine per ordine nel DOM. */
.mda-popup__content {
  position: relative; width: 100%; min-height: 0; max-height: 100%; overflow-y: auto;
  padding: clamp(28px, 6vw, 56px) clamp(20px, 5vw, 48px); text-align: center;
  box-sizing: border-box; -webkit-overflow-scrolling: touch;
}
.mda-popup__title { margin: 0 0 .75rem; font-size: clamp(1.4rem, 3.4vw, 2.1rem); line-height: 1.2; color: inherit; }
.mda-popup__text { margin: 0 auto; max-width: 46ch; font-size: clamp(.95rem, 2vw, 1.05rem); line-height: 1.6; color: inherit; }
.mda-popup__text p { margin: 0 0 .6rem; }
.mda-popup__text a { color: inherit; text-decoration: underline; }
.mda-popup__actions { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; margin-top: 1.6rem; }
/* Link a tutta area: sta sopra al contenuto per intercettare i click ovunque, ma
   essendo trasparente il testo resta visibile. Bottoni e X hanno z-index più alto
   così continuano a funzionare. */
.mda-popup__link { position: absolute; inset: 0; z-index: 4; cursor: pointer; }
.mda-popup__btn {
  position: relative; z-index: 6;
  display: inline-block; padding: .8rem 1.6rem; border-radius: 999px; border: 1px solid currentColor;
  font: inherit; font-weight: 600; font-size: .92rem; letter-spacing: .02em; cursor: pointer;
  text-decoration: none; transition: transform .18s ease, opacity .18s ease;
}
.mda-popup__btn:hover { transform: translateY(-2px); opacity: .9; }
/* X di chiusura senza cerchio: solo il glifo, nel colore scelto in admin. */
.mda-popup__close {
  position: absolute; top: 12px; right: 14px; z-index: 6; width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border: none; border-radius: 0; background: none; padding: 0;
  color: var(--mda-popup-close-color, #fff);
  font-size: 1.75rem; line-height: 1; cursor: pointer;
  transition: opacity .18s ease;
  -webkit-tap-highlight-color: transparent;
}
.mda-popup__close:hover { opacity: .7; }
/* Col mouse (o col focus dato dal JS all'apertura) niente contorno: l'anello azzurro
   del browser attorno alla X è sgradevole ora che non c'è più il cerchio.
   Il :not(:focus-visible) fa sì che nei browser senza focus-visible la regola venga
   ignorata, così l'indicatore da tastiera non sparisce mai. */
.mda-popup__close:focus:not(:focus-visible) { outline: none; }
.mda-popup__close:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
/* Il riquadro riceve il focus all'apertura solo per portare tastiera e screen reader
   dentro al dialog: non deve mostrare alcun contorno. */
.mda-popup__box:focus { outline: none; }
body.mda-popup-open { overflow: hidden; }
@keyframes mdaPopupFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes mdaPopupIn { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: none; } }
@media (max-width: 520px) {
  .mda-popup { padding: 12px; }
  .mda-popup__box { max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); }
  .mda-popup__actions { flex-direction: column; }
  .mda-popup__btn { width: 100%; box-sizing: border-box; }
}
/* Schermi bassi (mobile in orizzontale): l'altezza in vh lascerebbe pochissimo spazio
   al testo, quindi si torna all'altezza naturale del contenuto. */
@media (max-height: 480px) {
  .mda-popup__box[data-has-image="1"] { height: auto; }
}
@media (prefers-reduced-motion: reduce) { .mda-popup__backdrop, .mda-popup__box { animation: none; } }