/* ============================================================
   UMIP — Popup (gestito da Bacheca → Popup)
   La larghezza dell'immagine è calcolata dal suo rapporto
   (--pp-ratio) così immagine + pulsanti stanno sempre nello schermo.
   ============================================================ */

.umip-popup {
	--pp-actions: 4.75rem;   /* altezza barra pulsanti */
	--pp-gap: 1.25rem;       /* margine minimo dal bordo schermo */
	--pp-ratio: .75;         /* larghezza / altezza immagine (dal PHP) */
	--pp-max: 560px;         /* larghezza massima (dal PHP) */
	position: fixed;
	inset: 0;
	z-index: 99990;          /* sotto il banner cookie Complianz (99999) */
	display: grid;
	place-items: center;
	padding: var(--pp-gap);
	font-family: inherit;
}

.umip-popup[hidden] { display: none; }
.umip-popup--no-actions { --pp-actions: 0px; }

.umip-popup__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(25, 33, 54, .72);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	opacity: 0;
	transition: opacity .3s ease;
}

.umip-popup__card {
	position: relative;
	width: min(var(--pp-max), calc(100vw - 2 * var(--pp-gap)), calc((100vh - 2 * var(--pp-gap) - var(--pp-actions)) * var(--pp-ratio)));
	width: min(var(--pp-max), calc(100vw - 2 * var(--pp-gap)), calc((100dvh - 2 * var(--pp-gap) - var(--pp-actions)) * var(--pp-ratio)));
	background: #fff;
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 24px 70px rgba(0, 0, 0, .35);
	opacity: 0;
	transform: translateY(18px) scale(.96);
	transition: opacity .35s ease, transform .45s cubic-bezier(.2, .9, .3, 1.2);
}

.umip-popup__card:focus { outline: none; }

.umip-popup.is-open .umip-popup__backdrop { opacity: 1; }
.umip-popup.is-open .umip-popup__card { opacity: 1; transform: none; }

.umip-popup__title {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	margin: 0;
}

.umip-popup__media[data-umip-popup-media] { cursor: pointer; }

.umip-popup__img {
	display: block;
	width: 100% !important;
	max-width: none !important;
	height: auto !important;
	aspect-ratio: var(--pp-ratio);
	object-fit: cover;
	background: #f2f5f9;
	margin: 0 !important;
}

.umip-popup__x {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .92);
	color: #192136;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
	cursor: pointer;
	transition: transform .2s ease, background .2s ease;
}

.umip-popup__x:hover { background: #fff; transform: rotate(90deg); }

.umip-popup__actions {
	display: flex;
	align-items: center;
	gap: .75rem;
	height: var(--pp-actions);
	padding: 0 1rem;
	background: #fff;
}

.umip-popup__cta {
	flex: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	min-height: 48px;
	padding: 0 1.1rem;
	border-radius: 999px;
	background: #E63755;
	color: #fff !important;
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.1;
	text-align: center;
	text-decoration: none !important;
	box-shadow: 0 6px 18px rgba(230, 55, 85, .35);
	transition: background .2s ease, transform .2s ease;
}

.umip-popup__cta:hover { background: #c92944; transform: translateY(-1px); }
.umip-popup__cta svg { transition: transform .2s ease; }
.umip-popup__cta:hover svg { transform: translateX(3px); }

.umip-popup__later {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 .9rem;
	border: 0;
	background: none;
	color: #5b6780 !important;
	font: inherit;
	font-size: .95rem;
	font-weight: 600;
	text-decoration: none !important;
	cursor: pointer;
}

.umip-popup__later:only-child {
	flex: 1;
	border: 2px solid #d5dce8;
	border-radius: 999px;
}

.umip-popup__later:hover { color: #192136 !important; text-decoration: underline !important; }

/* Il tema dà ai link un font diverso: uniformiamo i due pulsanti */
.umip-popup__cta,
.umip-popup__later {
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
	letter-spacing: 0;
}

.umip-popup__x:focus-visible,
.umip-popup__cta:focus-visible,
.umip-popup__later:focus-visible {
	outline: 3px solid #4481bc;
	outline-offset: 3px;
}

html.umip-popup-lock,
html.umip-popup-lock body { overflow: hidden; }

/* Telefoni: barra più compatta, pulsante sempre su una riga */
@media (max-width: 480px) {
	.umip-popup { --pp-gap: .75rem; --pp-actions: 4.25rem; }
	.umip-popup--no-actions { --pp-actions: 0px; }
	.umip-popup__card { border-radius: 14px; }
	.umip-popup__actions { padding: 0 .6rem; gap: .25rem; }
	.umip-popup__cta { font-size: .95rem; padding: 0 .9rem; white-space: nowrap; min-height: 46px; }
	.umip-popup__later { padding: 0 .5rem; font-size: .9rem; white-space: nowrap; }
}

@media (max-width: 340px) {
	.umip-popup__cta svg { display: none; }
}

/* Telefono in orizzontale: immagine a sinistra, pulsanti a destra */
@media (orientation: landscape) and (max-height: 560px) {
	.umip-popup { --pp-actions: 0px; }
	.umip-popup__card {
		display: flex;
		width: auto;
		max-width: calc(100vw - 2 * var(--pp-gap));
	}
	.umip-popup__media { flex: 0 1 auto; min-width: 0; }
	.umip-popup__img {
		width: auto !important;
		height: calc(100vh - 2 * var(--pp-gap)) !important;
		height: calc(100dvh - 2 * var(--pp-gap)) !important;
		max-width: calc(100vw - 2 * var(--pp-gap) - 220px) !important;
	}
	.umip-popup__actions {
		flex: 0 0 220px;
		flex-direction: column;
		justify-content: center;
		height: auto;
		padding: 3.5rem 1rem 1rem;
	}
	.umip-popup__cta, .umip-popup__later { flex: 0 0 auto; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.umip-popup__backdrop,
	.umip-popup__card,
	.umip-popup__x,
	.umip-popup__cta,
	.umip-popup__cta svg { transition: none; }
	.umip-popup__card { transform: none; }
}