/* =========================================================================
   SvetX Popup Studio — stili lato sito
   Tutto è isolato sotto .svps-root / .svps-trigger per non toccare il tema.
   ========================================================================= */

.svps-root {
	--svps-bg: #ffffff;
	--svps-text: #101828;
	--svps-accent: #0a84ff;
	--svps-border: #e4e7ec;
	--svps-radius: 16px;
	--svps-padding: 28px;
	--svps-font: 16px;
	--svps-width: 560px;
	--svps-maxh: 80vh;
	--svps-shadow: 0 24px 56px -16px rgba(16, 24, 40, .34);
	--svps-ov-color: #101828;
	--svps-ov-alpha: .55;
	--svps-ov-blur: 2px;
	--svps-z: 100000;
	--svps-speed: 280ms;
	--svps-ease: cubic-bezier(.22, .9, .3, 1);

	position: fixed;
	inset: 0;
	z-index: var(--svps-z);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	font-size: var(--svps-font);
	line-height: 1.55;
	color: var(--svps-text);
	-webkit-font-smoothing: antialiased;
}

.svps-root[hidden] {
	display: none !important;
}

.svps-root *,
.svps-root *::before,
.svps-root *::after {
	box-sizing: border-box;
}

/* ---------------------------------------------------------------- Sfondo */

.svps-overlay {
	position: absolute;
	inset: 0;
	background: var(--svps-ov-color);
	opacity: 0;
	transition: opacity var(--svps-speed) ease;
}

.svps-root.is-open .svps-overlay {
	opacity: var(--svps-ov-alpha);
	backdrop-filter: blur(var(--svps-ov-blur));
	-webkit-backdrop-filter: blur(var(--svps-ov-blur));
}

/* --------------------------------------------------------------- Riquadro */

.svps-dialog {
	position: relative;
	width: 100%;
	max-width: var(--svps-width);
	max-height: var(--svps-maxh);
	display: flex;
	flex-direction: column;
	overflow: auto;
	overscroll-behavior: contain;
	background: var(--svps-bg);
	color: var(--svps-text);
	border: 1px solid var(--svps-border);
	border-radius: var(--svps-radius);
	box-shadow: var(--svps-shadow);
	opacity: 0;
	transition: opacity var(--svps-speed) ease, transform var(--svps-speed) var(--svps-ease);
	will-change: transform, opacity;
}

.svps-root.is-open .svps-dialog {
	opacity: 1;
	transform: none;
}

.svps-body {
	padding: var(--svps-padding);
}

.svps-title {
	margin: 0 0 12px;
	font-size: 1.45em;
	line-height: 1.25;
	font-weight: 700;
	color: inherit;
}

.svps-content > *:first-child { margin-top: 0; }
.svps-content > *:last-child { margin-bottom: 0; }

.svps-content img {
	max-width: 100%;
	height: auto;
}

.svps-content a {
	color: var(--svps-accent);
}

.svps-content table {
	width: 100%;
	border-collapse: collapse;
}

.svps-content th,
.svps-content td {
	padding: 8px 10px;
	border-bottom: 1px solid var(--svps-border);
	text-align: left;
}

.svps-content ul,
.svps-content ol {
	padding-left: 1.2em;
}

.svps-content iframe,
.svps-content video {
	max-width: 100%;
}

/* Elenchi lunghi (es. paesi) su più colonne */
.svps-content .svps-cols,
.svps-content ul.columns {
	columns: 2;
	column-gap: 28px;
	list-style: none;
	padding-left: 0;
}

/* ------------------------------------------------------------- Immagine */

.svps-media img {
	display: block;
	width: 100%;
	height: auto;
}

.svps-img-top .svps-media img {
	border-radius: calc(var(--svps-radius) - 1px) calc(var(--svps-radius) - 1px) 0 0;
}

.svps-img-left .svps-dialog,
.svps-img-right .svps-dialog {
	flex-direction: row;
	align-items: stretch;
}

.svps-img-right .svps-dialog {
	flex-direction: row-reverse;
}

.svps-img-left .svps-media,
.svps-img-right .svps-media {
	flex: 0 0 42%;
	overflow: hidden;
}

.svps-img-left .svps-media img,
.svps-img-right .svps-media img {
	height: 100%;
	object-fit: cover;
}

.svps-img-left .svps-media img {
	border-radius: calc(var(--svps-radius) - 1px) 0 0 calc(var(--svps-radius) - 1px);
}

.svps-img-right .svps-media img {
	border-radius: 0 calc(var(--svps-radius) - 1px) calc(var(--svps-radius) - 1px) 0;
}

.svps-img-left .svps-body,
.svps-img-right .svps-body {
	flex: 1 1 auto;
}

/* --------------------------------------------------------------- Chiusura */

.svps-close {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 34px;
	height: 34px;
	padding: 0 10px;
	border: 1px solid transparent;
	border-radius: 999px;
	background: rgba(127, 127, 127, .16);
	color: inherit;
	font: inherit;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	transition: background-color .15s ease;
}

.svps-close:hover {
	background: rgba(127, 127, 127, .3);
}

.svps-close:focus-visible {
	outline: 2px solid var(--svps-accent);
	outline-offset: 2px;
}

.svps-close-outside .svps-close {
	top: -46px;
	right: 0;
	background: rgba(255, 255, 255, .92);
	color: #101828;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .2);
}

.svps-close-text .svps-close {
	font-size: .8em;
	font-weight: 600;
	border-color: var(--svps-border);
	background: transparent;
}

/* --------------------------------------------------------------- Pulsanti */

.svps-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 20px;
}

.svps-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 11px 20px;
	border: 1px solid transparent;
	border-radius: 10px;
	background: var(--svps-accent);
	color: #fff;
	font: inherit;
	font-size: .95em;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: filter .15s ease;
}

.svps-btn:hover {
	filter: brightness(1.08);
	color: #fff;
}

.svps-btn-ghost {
	background: transparent;
	border-color: var(--svps-border);
	color: inherit;
}

.svps-btn-ghost:hover {
	color: inherit;
	filter: none;
	border-color: var(--svps-accent);
}

.svps-btn-link {
	background: none;
	border: 0;
	padding: 11px 4px;
	color: var(--svps-accent);
	text-decoration: underline;
}

.svps-btn-link:hover {
	color: var(--svps-accent);
}

/* ------------------------------------------------------ Tipi di layout */

.svps-layout-center { align-items: center; }
.svps-layout-center.svps-pos-top { align-items: flex-start; padding-top: 6vh; }
.svps-layout-center.svps-pos-bottom { align-items: flex-end; padding-bottom: 6vh; }

/* Pannelli laterali */
.svps-layout-drawer-right,
.svps-layout-drawer-left {
	padding: 0;
	align-items: stretch;
}

.svps-layout-drawer-right { justify-content: flex-end; }
.svps-layout-drawer-left { justify-content: flex-start; }

.svps-layout-drawer-right .svps-dialog,
.svps-layout-drawer-left .svps-dialog {
	height: 100%;
	max-height: 100%;
	border-radius: 0;
	border-top: 0;
	border-bottom: 0;
}

.svps-layout-drawer-right .svps-dialog { border-right: 0; }
.svps-layout-drawer-left .svps-dialog { border-left: 0; }

/* Foglio dal basso */
.svps-layout-bottom-sheet {
	padding: 0;
	align-items: flex-end;
}

.svps-layout-bottom-sheet .svps-dialog {
	max-width: min(var(--svps-width), 100%);
	margin: 0 auto;
	border-radius: var(--svps-radius) var(--svps-radius) 0 0;
	border-bottom: 0;
}

/* Barre */
.svps-layout-top-banner,
.svps-layout-bottom-banner {
	padding: 0;
	pointer-events: none;
}

.svps-layout-top-banner { align-items: flex-start; }
.svps-layout-bottom-banner { align-items: flex-end; }

.svps-layout-top-banner .svps-dialog,
.svps-layout-bottom-banner .svps-dialog {
	pointer-events: auto;
	max-width: 100%;
	border-radius: 0;
	border-left: 0;
	border-right: 0;
}

.svps-layout-top-banner .svps-body,
.svps-layout-bottom-banner .svps-body {
	max-width: 1200px;
	margin: 0 auto;
	width: 100%;
	padding-block: calc(var(--svps-padding) * .6);
}

.svps-layout-top-banner .svps-actions,
.svps-layout-bottom-banner .svps-actions {
	margin-top: 12px;
}

/* Riquadro d'angolo: non blocca la pagina */
.svps-layout-corner {
	padding: 0;
	pointer-events: none;
	inset: auto 20px 20px auto;
}

.svps-layout-corner.svps-corner-br { inset: auto 20px 20px auto; }
.svps-layout-corner.svps-corner-bl { inset: auto auto 20px 20px; }
.svps-layout-corner.svps-corner-tr { inset: 20px 20px auto auto; }
.svps-layout-corner.svps-corner-tl { inset: 20px auto auto 20px; }

.svps-layout-corner .svps-dialog {
	pointer-events: auto;
	max-width: min(var(--svps-width), calc(100vw - 40px));
	max-height: min(var(--svps-maxh), calc(100vh - 40px));
}

/* Schermo intero */
.svps-layout-fullscreen { padding: 0; }

.svps-layout-fullscreen .svps-dialog {
	max-width: 100%;
	width: 100%;
	height: 100%;
	max-height: 100%;
	border: 0;
	border-radius: 0;
}

.svps-layout-fullscreen .svps-body {
	max-width: 820px;
	margin: 0 auto;
	width: 100%;
}

/* Ancorato all'elemento cliccato (posizione calcolata dal JavaScript) */
.svps-layout-inline {
	inset: 0;
	pointer-events: none;
	padding: 0;
	display: block;
}

.svps-layout-inline .svps-overlay {
	pointer-events: auto;
	background: transparent;
}

.svps-root.svps-layout-inline.is-open .svps-overlay {
	opacity: 1;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

.svps-layout-inline .svps-dialog {
	position: absolute;
	pointer-events: auto;
	max-width: min(var(--svps-width), calc(100vw - 24px));
	max-height: min(var(--svps-maxh), 70vh);
}

/* ----------------------------------------------------------- Animazioni */

.svps-anim-none .svps-dialog,
.svps-anim-none .svps-overlay { transition: none; }

/* Lo stato di partenza vale solo finché il popup non è aperto:
   così “aperto = nessuna trasformazione” non entra mai in conflitto. */

.svps-anim-zoom:not(.is-open) .svps-dialog { transform: scale(.94); }
.svps-anim-zoom-out:not(.is-open) .svps-dialog { transform: scale(1.08); }
.svps-anim-slide-up:not(.is-open) .svps-dialog { transform: translateY(32px); }
.svps-anim-slide-down:not(.is-open) .svps-dialog { transform: translateY(-32px); }
.svps-anim-slide-right:not(.is-open) .svps-dialog { transform: translateX(48px); }
.svps-anim-slide-left:not(.is-open) .svps-dialog { transform: translateX(-48px); }
.svps-anim-flip:not(.is-open) .svps-dialog { transform: perspective(1200px) rotateX(-14deg) scale(.96); }
.svps-anim-swing:not(.is-open) .svps-dialog { transform: perspective(1200px) rotateY(16deg) translateX(28px); }
.svps-anim-newspaper:not(.is-open) .svps-dialog { transform: rotate(-12deg) scale(.5); }
.svps-anim-bounce:not(.is-open) .svps-dialog { transform: translateY(40px) scale(.96); }

.svps-anim-bounce .svps-dialog,
.svps-anim-newspaper .svps-dialog {
	transition-timing-function: cubic-bezier(.34, 1.56, .64, 1);
}

/* I pannelli entrano sempre dal proprio lato, qualunque animazione. */
.svps-layout-drawer-right:not(.svps-anim-none):not(.is-open) .svps-dialog { transform: translateX(40px); }
.svps-layout-drawer-left:not(.svps-anim-none):not(.is-open) .svps-dialog { transform: translateX(-40px); }
.svps-layout-drawer-right.svps-anim-slide-right:not(.is-open) .svps-dialog { transform: translateX(100%); }
.svps-layout-drawer-left.svps-anim-slide-left:not(.is-open) .svps-dialog { transform: translateX(-100%); }

.svps-layout-bottom-sheet:not(.svps-anim-none):not(.is-open) .svps-dialog { transform: translateY(48px); }
.svps-layout-bottom-sheet.svps-anim-slide-up:not(.is-open) .svps-dialog { transform: translateY(100%); }

.svps-layout-top-banner:not(.svps-anim-none):not(.is-open) .svps-dialog { transform: translateY(-100%); }
.svps-layout-bottom-banner:not(.svps-anim-none):not(.is-open) .svps-dialog { transform: translateY(100%); }

@media (prefers-reduced-motion: reduce) {
	.svps-root.svps-motion-safe .svps-dialog,
	.svps-root.svps-motion-safe .svps-overlay {
		transition: none;
		transform: none;
	}
}

/* --------------------------------------------------------------- Stili */

.svps-preset-glass .svps-dialog {
	background: color-mix(in srgb, var(--svps-bg) 78%, transparent);
	backdrop-filter: blur(18px) saturate(1.4);
	-webkit-backdrop-filter: blur(18px) saturate(1.4);
	border-color: color-mix(in srgb, var(--svps-text) 12%, transparent);
}

.svps-preset-outline .svps-dialog {
	border-width: 2px;
	border-color: var(--svps-accent);
}

.svps-preset-minimal .svps-dialog {
	border-color: transparent;
}

.svps-preset-naked .svps-dialog {
	border: 0;
	background: var(--svps-bg);
}

/* Tema scuro di sistema, solo se l'autore lo ha chiesto */
@media (prefers-color-scheme: dark) {
	.svps-root.svps-dark-ok:not(.svps-preset-dark) {
		--svps-bg: #16181d;
		--svps-text: #eceef2;
		--svps-border: #2c313a;
	}
}

/* ------------------------------------------------- Adattamento a telefono */

@media (max-width: 640px) {
	.svps-root { padding: 12px; }

	.svps-m-hide { display: none !important; }

	.svps-dialog { max-height: min(var(--svps-maxh), 88vh); }

	.svps-body { padding: clamp(18px, 5vw, var(--svps-padding)); }

	.svps-title { font-size: 1.3em; }

	.svps-actions .svps-btn { flex: 1 1 auto; }

	/* L'immagine a lato passa sopra al testo. */
	.svps-img-left .svps-dialog,
	.svps-img-right .svps-dialog { flex-direction: column; }
	.svps-img-left .svps-media,
	.svps-img-right .svps-media { flex: 0 0 auto; }
	.svps-img-left .svps-media img,
	.svps-img-right .svps-media img {
		height: auto;
		max-height: 180px;
		border-radius: calc(var(--svps-radius) - 1px) calc(var(--svps-radius) - 1px) 0 0;
	}

	/* Layout scelto apposta per il telefono */
	.svps-m-center { padding: 12px; align-items: center; justify-content: center; }
	.svps-m-center .svps-dialog { height: auto; max-height: 85vh; border-radius: var(--svps-radius); border-width: 1px; }

	.svps-m-bottom-sheet { padding: 0; align-items: flex-end; justify-content: center; }
	.svps-m-bottom-sheet .svps-dialog {
		height: auto;
		width: 100%;
		max-width: 100%;
		max-height: 88vh;
		border-radius: var(--svps-radius) var(--svps-radius) 0 0;
		border-bottom: 0;
	}
	.svps-m-bottom-sheet:not(.is-open) .svps-dialog { transform: translateY(40px); }

	.svps-m-fullscreen { padding: 0; }
	.svps-m-fullscreen .svps-dialog {
		width: 100%;
		height: 100%;
		max-width: 100%;
		max-height: 100%;
		border: 0;
		border-radius: 0;
	}

	.svps-m-top-banner { padding: 0; align-items: flex-start; }
	.svps-m-bottom-banner { padding: 0; align-items: flex-end; }
	.svps-m-top-banner .svps-dialog,
	.svps-m-bottom-banner .svps-dialog {
		max-width: 100%;
		height: auto;
		border-radius: 0;
		border-left: 0;
		border-right: 0;
	}

	.svps-m-drawer-right,
	.svps-m-drawer-left { padding: 0; align-items: stretch; }
	.svps-m-drawer-right { justify-content: flex-end; }
	.svps-m-drawer-left { justify-content: flex-start; }
	.svps-m-drawer-right .svps-dialog,
	.svps-m-drawer-left .svps-dialog {
		width: min(92vw, var(--svps-width));
		height: 100%;
		max-height: 100%;
		border-radius: 0;
	}

	.svps-m-corner { inset: auto 10px 10px auto; }

	/* Su telefono un riquadro ancorato diventa un foglio dal basso. */
	.svps-layout-inline:not([class*="svps-m-"]) {
		display: flex;
		align-items: flex-end;
		justify-content: center;
		padding: 0;
		pointer-events: auto;
	}
	.svps-layout-inline:not([class*="svps-m-"]) .svps-dialog {
		position: static;
		width: 100%;
		max-width: 100%;
		border-radius: var(--svps-radius) var(--svps-radius) 0 0;
	}
	.svps-layout-inline:not([class*="svps-m-"]) .svps-overlay {
		background: var(--svps-ov-color);
	}
}

/* Larghezza intermedia: i pannelli larghi non superano lo schermo */
@media (max-width: 900px) {
	.svps-layout-drawer-right .svps-dialog,
	.svps-layout-drawer-left .svps-dialog {
		width: min(92vw, var(--svps-width));
	}
}

/* ------------------------------------------------- Elementi di apertura */

.svps-trigger {
	font: inherit;
	cursor: pointer;
}

.svps-trigger-link,
.svps-trigger-plain {
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
}

.svps-trigger-block {
	display: block;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	width: 100%;
	text-align: inherit;
}

.svps-trigger-link {
	color: var(--svps-trigger-color, #0a84ff);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-style: dotted;
	text-underline-offset: 3px;
}

.svps-trigger-link:hover,
.svps-trigger-link:focus-visible {
	text-decoration-style: solid;
}

.svps-trigger-link .svps-trigger-icon::after {
	content: "\2139";
	margin-left: 4px;
	font-size: .8em;
	opacity: .75;
}

.svps-trigger-button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 20px;
	border: 1px solid transparent;
	border-radius: 10px;
	background: var(--svps-trigger-color, #0a84ff);
	color: #fff;
	font-weight: 600;
	text-decoration: none;
}

.svps-trigger-button:hover {
	filter: brightness(1.08);
	color: #fff;
}

.svps-trigger img {
	display: block;
	max-width: 100%;
	height: auto;
}

.svps-block { margin: 1em 0; }
.svps-block.has-text-align-center { text-align: center; }
.svps-block.has-text-align-right { text-align: right; }

/* Blocca lo scorrimento della pagina mentre il popup è aperto */
html.svps-locked,
body.svps-locked {
	overflow: hidden !important;
}