/*
 * Pop-up promozionale (inc/cadel-popup.php).
 * Override per singolo popup: .cadel-popup--{id-campagna} o la classe CSS custom del campo ACF.
 * Le dimensioni dei testi scalano con la larghezza del popup (unità cqi).
 */

html.cadel-popup-open { overflow: hidden; }

.cadel-popup {
	--popup-accent: #ff6d2d;
	--popup-radius: 14px;
	position: fixed;
	inset: 0;
	z-index: 2147483647; /* massimo: sopra il widget chat (il JS sposta anche il popup in fondo al body) */
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	opacity: 0;
	transition: opacity .3s ease;
}
.cadel-popup[hidden] { display: none; }
.cadel-popup.is-open { opacity: 1; }

.cadel-popup__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .6);
	cursor: pointer;
}

.cadel-popup__dialog {
	position: relative;
	container-type: inline-size;
	width: 100%;
	max-width: 540px;
	/* su schermi bassi si rimpicciolisce in proporzione invece di andare in scroll */
	max-width: min(540px, (100dvh - 32px) / 1.14);
	max-height: calc(100vh - 32px);
	max-height: calc(100dvh - 32px);
	overflow-y: auto;
	padding: 10px;
	background: #fff;
	border-radius: var(--popup-radius);
	color: #1d1d1b;
	transform: translateY(12px);
	transition: transform .3s ease;
}
.cadel-popup.is-open .cadel-popup__dialog { transform: none; }
.cadel-popup__dialog:focus { outline: none; }

.cadel-popup__close {
	/* sborda di 2px oltre l'angolo dell'immagine, così non resta il filo di foto attorno */
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 0;
	box-shadow: none;
	border-radius: 0 var(--popup-radius) 0 var(--popup-radius);
	background: #fff;
	color: #000;
	cursor: pointer;
}
.cadel-popup__close:focus-visible,
.cadel-popup__cta:focus-visible { outline: 2px solid var(--popup-accent); outline-offset: 3px; }

/* Immagine con testi sovrapposti */
.cadel-popup__media {
	position: relative;
	aspect-ratio: 520 / 406;
	overflow: hidden;
	border-radius: var(--popup-radius);
	background: #eee;
}
.cadel-popup__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.cadel-popup__overlay {
	position: absolute;
	left: 8%;
	right: 8%;
	bottom: 9%;
	color: #fff;
	font-weight: 700;
	text-shadow: 0 1px 10px rgba(0, 0, 0, .25);
}
.cadel-popup__overlay p { margin: 0; }
.cadel-popup__product {
	font-size: 46px;
	font-size: clamp(28px, 8.8cqi, 46px);
	line-height: 1;
}
.cadel-popup__claim {
	font-size: 30px;
	font-size: clamp(19px, 5.6cqi, 30px);
	line-height: 1.1;
}
.cadel-popup__price {
	padding-top: .5em;
	font-size: 40px;
	font-size: clamp(24px, 7.6cqi, 40px);
	line-height: 1;
}

/* Testi sotto l'immagine */
.cadel-popup__body {
	padding: 22px 12px 12px;
	text-align: center;
}
.cadel-popup__title {
	margin: 0 0 8px;
	font-size: 26px;
	font-size: clamp(22px, 4.9cqi, 26px);
	font-weight: 700;
	line-height: 1.2;
}
.cadel-popup__text {
	margin: 0;
	font-size: 17px;
	font-size: clamp(16px, 3.3cqi, 18px);
	font-weight: 300;
	line-height: 1.35;
}
.cadel-popup__cta {
	display: inline-flex;
	align-items: center;
	gap: .4em;
	margin-top: 18px;
	padding: 14px 24px;
	border-radius: 999px;
	background: var(--popup-accent);
	color: #fff;
	font-size: 18px;
	font-size: clamp(15px, 3.4cqi, 18px);
	font-weight: 700;
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color .2s ease;
}
.cadel-popup__cta:hover,
.cadel-popup__cta:focus { background: #e2561a; color: #fff; text-decoration: none; }

@media (prefers-reduced-motion: reduce) {
	.cadel-popup,
	.cadel-popup__dialog { transition: none; }
}