/*
 * Popup promozionali (core/odq-popup.php, core/js/odq-popup.js — 31 ott. 2026).
 *
 * Tutto `position: fixed`: niente spostamenti del contenuto (CLS). Tre forme:
 *   .is-sheet    mobile, slide-in in basso, al massimo ~25% dell'altezza (mai a schermo intero);
 *   .is-slidein  desktop, in basso a destra, non modale;
 *   .is-modal    desktop, piccolo modale centrato con overlay leggero.
 * Animazione solo con `prefers-reduced-motion: no-preference`.
 *
 * ⚠️ I <button> ereditano dal tema Hello `:focus`/`:hover` magenta (#c36): qui ogni stato è
 * dichiarato con la specificità di `.odq-popup-wrap .odq-popup__…`. Le <a> vanno dichiarate anche
 * in :visited (`.odq-page__content a:visited` del tema). Contrasti: testo #1f1a33 su #fff = 16:1,
 * testo secondario #4b4462 = 9,1:1, pulsante bianco su #5b2bb5 = 8,5:1, link #4a2196 su #fff = 10,8:1.
 */

.odq-popup-wrap {
	--pop-ink: #1f1a33;
	--pop-soft: #4b4462;
	--pop-brand: #5b2bb5;
	--pop-brand-dark: #45208c;
	--pop-link: #4a2196;
	--pop-bg: #fff;
	--pop-edge: #d9d3ea;
	position: fixed;
	z-index: 100000000; /* sopra lo schermo di gioco (#quiz-content: 99999999), sotto i giochi a schermo intero e la banner dei cookie */
	font-family: inherit;
	pointer-events: none;
}

.odq-popup-wrap .odq-popup {
	position: relative;
	box-sizing: border-box;
	pointer-events: auto;
	background: var(--pop-bg);
	color: var(--pop-ink);
	border: 1px solid var(--pop-edge);
	border-radius: 14px;
	box-shadow: 0 10px 32px rgba(31, 26, 51, .22);
	padding: 18px 56px 16px 20px;
	opacity: 0;
	text-align: left;
}

/* Il contenitore riceve il focus solo come punto d'ingresso: l'anello resta sui controlli. */
.odq-popup-wrap .odq-popup:focus,
.odq-popup-wrap .odq-popup:focus-visible { outline: none; }

/* ---------- forme ---------- */

.odq-popup-wrap.is-sheet { left: 0; right: 0; bottom: 0; padding: 0 8px max(8px, env(safe-area-inset-bottom)); }
.odq-popup-wrap.is-sheet .odq-popup { max-height: 25vh; overflow-y: auto; padding: 12px 52px 12px 16px; border-radius: 14px 14px 10px 10px; transform: translateY(110%); }

.odq-popup-wrap.is-slidein { right: 20px; bottom: 20px; width: 360px; max-width: calc(100vw - 40px); }
.odq-popup-wrap.is-slidein .odq-popup { transform: translateY(24px); }

.odq-popup-wrap.is-modal { inset: 0; display: flex; align-items: center; justify-content: center; padding: 16px; }
.odq-popup-wrap.is-modal .odq-popup-overlay { position: absolute; inset: 0; background: rgba(31, 26, 51, .35); pointer-events: auto; opacity: 0; }
.odq-popup-wrap.is-modal.is-open .odq-popup-overlay { opacity: 1; }
.odq-popup-wrap.is-modal .odq-popup { width: 420px; max-width: 100%; padding: 24px 56px 20px 24px; transform: scale(.96); }

/* Aperto: dopo le forme, a parità di specificità vince l'ordine. */
.odq-popup-wrap.is-open .odq-popup { opacity: 1; transform: none; }

@media (prefers-reduced-motion: no-preference) {
	.odq-popup-wrap .odq-popup { transition: opacity .22s ease, transform .26s ease; }
	.odq-popup-wrap .odq-popup-overlay { transition: opacity .22s ease; }
}

/* ---------- contenuto ---------- */

.odq-popup-wrap .odq-popup__title {
	margin: 0 0 6px;
	padding: 0;
	font-size: 18px;
	line-height: 1.3;
	font-weight: 700;
	color: var(--pop-ink);
	letter-spacing: 0;
	text-transform: none;
	border: 0;
}

.odq-popup-wrap .odq-popup__text { margin: 0 0 14px; font-size: 15px; line-height: 1.45; color: var(--pop-soft); }

/* Mobile: tutto deve stare nel 25% dell'altezza, quindi pulsante e link sulla stessa riga. */
.odq-popup-wrap.is-sheet .odq-popup__title { font-size: 15px; margin-bottom: 2px; }
.odq-popup-wrap.is-sheet .odq-popup__text { font-size: 13.5px; line-height: 1.4; margin-bottom: 8px; }
.odq-popup-wrap.is-sheet .odq-popup__actions { flex-wrap: nowrap; gap: 10px; }
.odq-popup-wrap.is-sheet .odq-popup__cta,
.odq-popup-wrap.is-sheet .odq-popup__cta:visited { padding: 0 16px; font-size: 14px; white-space: nowrap; }
.odq-popup-wrap.is-sheet .odq-popup__optout,
.odq-popup-wrap.is-sheet .odq-popup__optout:hover,
.odq-popup-wrap.is-sheet .odq-popup__optout:focus,
.odq-popup-wrap.is-sheet .odq-popup__optout:active { font-size: 13px; text-align: left; line-height: 1.25; }

.odq-popup-wrap .odq-popup__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; }

.odq-popup-wrap .odq-popup__cta,
.odq-popup-wrap .odq-popup__cta:visited {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 20px;
	border-radius: 999px;
	background: var(--pop-brand);
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	border: 0;
	box-shadow: none;
}

.odq-popup-wrap .odq-popup__cta:hover,
.odq-popup-wrap .odq-popup__cta:focus,
.odq-popup-wrap .odq-popup__cta:active { background: var(--pop-brand-dark); color: #fff; text-decoration: none; }
.odq-popup-wrap .odq-popup__cta:focus-visible { outline: 3px solid var(--pop-brand); outline-offset: 2px; }

.odq-popup-wrap .odq-popup__optout,
.odq-popup-wrap .odq-popup__close {
	-webkit-appearance: none;
	appearance: none;
	background: transparent;
	border: 0;
	border-radius: 8px;
	box-shadow: none;
	font: inherit;
	cursor: pointer;
	text-transform: none;
	letter-spacing: 0;
}

.odq-popup-wrap .odq-popup__optout,
.odq-popup-wrap .odq-popup__optout:hover,
.odq-popup-wrap .odq-popup__optout:focus,
.odq-popup-wrap .odq-popup__optout:active {
	min-height: 44px;
	padding: 0 4px;
	color: var(--pop-link);
	background: transparent;
	font-size: 14px;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.odq-popup-wrap .odq-popup__close,
.odq-popup-wrap .odq-popup__close:hover,
.odq-popup-wrap .odq-popup__close:focus,
.odq-popup-wrap .odq-popup__close:active {
	position: absolute;
	top: 4px;
	right: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	color: var(--pop-soft);
	background: transparent;
}

.odq-popup-wrap .odq-popup__close:hover { background: #f1eef8; color: var(--pop-ink); }
.odq-popup-wrap .odq-popup__optout:focus-visible,
.odq-popup-wrap .odq-popup__close:focus-visible { outline: 3px solid var(--pop-brand); outline-offset: 1px; }
.odq-popup-wrap .odq-popup__close svg { display: block; pointer-events: none; }

/* ---------- accento per popup ---------- */

.odq-popup-wrap .odq-popup--qmc { border-top: 4px solid #e2457d; }
.odq-popup-wrap .odq-popup--embed { border-top: 4px solid var(--pop-brand); }

/* ---------- immagine facoltativa (.has-img) ---------- */

.odq-popup-wrap .odq-popup__media { display: block; overflow: hidden; background: #f1eef8; }
.odq-popup-wrap .odq-popup__media img { display: block; width: 100%; height: 100%; max-width: none; margin: 0; border: 0; border-radius: 0; object-fit: cover; }

/* Desktop: testata a filo dei bordi, ritagliata in orizzontale. */
.odq-popup-wrap.is-slidein .odq-popup.has-img,
.odq-popup-wrap.is-modal .odq-popup.has-img { overflow: hidden; }
.odq-popup-wrap.is-slidein .odq-popup__media { height: 140px; margin: -18px -56px 14px -20px; }
.odq-popup-wrap.is-modal .odq-popup__media { height: 160px; margin: -24px -56px 16px -24px; }

/* La ✕ sta sopra l'immagine: fondo bianco per restare leggibile su qualsiasi foto. */
.odq-popup-wrap.is-slidein .odq-popup.has-img .odq-popup__close,
.odq-popup-wrap.is-modal .odq-popup.has-img .odq-popup__close {
	top: 8px;
	right: 8px;
	background: rgba(255, 255, 255, .94);
	color: var(--pop-ink);
	border-radius: 50%;
	box-shadow: 0 1px 4px rgba(31, 26, 51, .25);
}
.odq-popup-wrap.is-slidein .odq-popup.has-img .odq-popup__close:hover,
.odq-popup-wrap.is-modal .odq-popup.has-img .odq-popup__close:hover { background: #fff; }

/* Mobile: miniatura quadrata di 64 px; titolo e testo le scorrono accanto, i pulsanti sotto. */
.odq-popup-wrap.is-sheet .odq-popup__media { float: left; width: 64px; height: 64px; margin: 2px 12px 4px 0; border-radius: 10px; }
.odq-popup-wrap.is-sheet .odq-popup.has-img .odq-popup__actions { clear: both; }