/* Alcostream Configurator — Frontend CSS */

/* ---------------- Schermata di benvenuto (nome progetto) --------------- */
.ac-configurator .ac-welcome {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	padding: 40px 20px;
	text-align: center;
}
.ac-configurator .ac-welcome-logo {
	max-width: 150px;
	max-height: 90px;
	object-fit: contain;
}
.ac-configurator .ac-welcome-title {
	margin: 0;
	font-size: 24px;
color: var(--ac-primary);
}
.ac-configurator .ac-welcome-field {
	display: flex;
	align-items: baseline;
	gap: 8px;
	flex-wrap: wrap;
	justify-content: center;
}
.ac-configurator .ac-welcome-input {
	box-sizing: border-box;
	width: min(320px, 70vw);
	padding: 10px 14px;
	border: 2px solid var(--ac-border);
	border-radius: 8px;
	font: inherit;
	font-size: 15px;
}
.ac-configurator .ac-welcome-input:focus {
	outline: none;
	border-color: var(--ac-primary);
}
.ac-configurator .ac-welcome-input.is-error {
	border-color: #b32d2e;
}
.ac-configurator .ac-welcome-suffix {
	font-size: 15px;
	font-weight: 600;
	color: var(--ac-muted);
}
.ac-configurator .ac-welcome-hint {
	margin: 0;
	font-size: 12px;
	color: var(--ac-muted);
}
/* In welcome mode: nasconde tutto il resto finché non si preme Start. */
.ac-configurator.ac-welcome .ac-progress-area,
.ac-configurator.ac-welcome .ac-main,
.ac-configurator.ac-welcome .ac-extras-area,
.ac-configurator.ac-welcome .ac-summary-area {
	display: none;
}

/* ---------------- Icona YouTube sul canvas ---------------- */
.ac-configurator .ac-yt-icon {
	position: absolute;
	z-index: 95;
	width: 56px;
	height: 40px;
	padding: 0 !important;
	border: none;
	background: transparent;
	cursor: pointer;
	transition: transform 0.18s ease, filter 0.18s ease;
}
.ac-configurator .ac-yt-icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}
/* Glow on hover: segnala che è cliccabile. */
.ac-configurator .ac-yt-icon:hover {
	transform: scale(1.1);
	filter: drop-shadow(0 0 10px rgba(240, 165, 0, 0.9)) drop-shadow(0 0 22px rgba(240, 165, 0, 0.5));
}
.ac-configurator .ac-yt-pos-tl { top: 12px; left: 12px; }
.ac-configurator .ac-yt-pos-tr { top: 12px; right: 12px; }
.ac-configurator .ac-yt-pos-bl { bottom: 12px; left: 12px; }
.ac-configurator .ac-yt-pos-br { bottom: 12px; right: 12px; }

/* ---------------- Overlay video YouTube ---------------- */
.ac-yt-overlay {
	position: fixed;
	inset: 0;
	z-index: 10000;
	background: rgba(0, 0, 0, 0.82);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}
.ac-configurator .ac-yt-inner,
.ac-yt-overlay .ac-yt-inner {
	position: relative;
	width: min(920px, 92vw);
}
.ac-yt-overlay .ac-yt-frame {
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #000;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}
.ac-yt-overlay iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}
.ac-yt-overlay .ac-yt-close {
	position: absolute;
	top: -42px;
	right: 0;
	width: 5px;
	height: 5px;
	border-radius: unset;
	border: 1px solid rgba(255, 255, 255, 0);
	background: red;
	color: #fff;
	font-size: 30px;
	line-height: 1;
	cursor: pointer;
	font-family: arial black;
	padding-left:15px;
	padding-right: 15px;
}
.ac-yt-overlay .ac-yt-close:hover {
	background: rgba(255, 255, 255, 0.15);
}

/* ---------------- Popup conferma "Start over" -------------------------- */
/* Appeso a body (fuori da .ac-configurator): palette del plugin hardcoded,
 * variante premium quando il configuratore è in modalità black/gold. */
.ac-confirm {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba(10, 10, 14, 0.55);
	animation: ac-confirm-fade 0.18s ease;
}
.ac-confirm-box {
	box-sizing: border-box;
	width: min(92vw, 380px);
	padding: 26px 26px 22px;
	border-radius: 14px;
	border: 1px solid #dcdcde;
	background: #fff;
	color: #2c3338;
	box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
	text-align: center;
	animation: ac-confirm-pop 0.2s ease;
}
.ac-confirm-title {
	margin: 0 0 8px;
	font-size: 20px;
	font-weight: 800;
}
.ac-confirm-text {
	margin: 0 0 20px;
	font-size: 14px;
	line-height: 1.5;
	opacity: 0.75;
}
.ac-confirm-actions {
	display: flex;
	gap: 10px;
	justify-content: center;
}
.ac-confirm .ac-btn {
	display: inline-block;
	padding: 10px 18px;
	border-radius: 8px;
	border: 1px solid transparent;
	cursor: pointer;
	font: inherit;
	font-weight: 600;
	font-size: 14px;
	transition: background 0.15s ease, opacity 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.ac-confirm .ac-btn-primary {
	background: #2271b1;
	border-color: #2271b1;
	color: #fff;
}
.ac-confirm .ac-btn-primary:hover {
	background: #135e96;
}
.ac-confirm .ac-btn-ghost {
	background: transparent;
	border-color: #dcdcde;
	color: #2c3338;
}
.ac-confirm .ac-btn-ghost:hover {
	border-color: #2271b1;
	color: #2271b1;
}
@keyframes ac-confirm-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}
@keyframes ac-confirm-pop {
	from { opacity: 0; transform: translateY(10px) scale(0.96); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}
/* Premium: box scuro con accento oro. */
.ac-confirm.ac-premium .ac-confirm-box {
	background: #101014;
	border-color: #3a3a44;
	color: #f2f2f5;
}

/* ---------------- Pannello "Offer pronta" (Save the offer) ------------- */
/* Anteprima + azioni: su mobile "Save to Photos" apre lo share sheet
 * nativo (Web Share API con file) → l'immagine finisce nel rullino.
 * Su desktop (niente share con file) → solo Download. */
.ac-offer-sheet {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(10, 10, 14, 0.6);
	animation: ac-confirm-fade 0.18s ease;
}
.ac-offer-box {
	box-sizing: border-box;
	width: min(92vw, 420px);
	max-height: 88vh;
	overflow: auto;
	padding: 20px;
	border-radius: 14px;
	border: 1px solid #dcdcde;
	background: #fff;
	color: #2c3338;
	box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
	text-align: center;
	animation: ac-confirm-pop 0.2s ease;
}
.ac-offer-title {
	margin: 0 0 12px;
	font-size: 18px;
	font-weight: 800;
}
.ac-offer-preview {
	display: block;
	width: 100%;
	max-height: 46vh;
	object-fit: contain;
	border: 1px solid var(--ac-border, #dcdcde);
	border-radius: 10px;
	background: repeating-conic-gradient(#f0f0f1 0 25%, #ffffff 0 50%) 50% / 16px 16px;
}
.ac-offer-actions {
	display: flex;
	gap: 10px;
	justify-content: center;
	flex-wrap: wrap;
	margin-top: 14px;
}
.ac-offer-hint {
	margin: 10px 0 0;
	font-size: 12px;
	color: #66707a;
}
/* Premium: box scuro con accento oro. */
.ac-offer-sheet.ac-premium .ac-offer-box {
	background: #101014;
	border-color: #3a3a44;
	color: #f2f2f5;
}
.ac-offer-sheet.ac-premium .ac-offer-preview {
	border-color: #3a3a44;
	background: repeating-conic-gradient(#141419 0 25%, #191920 0 50%) 50% / 16px 16px;
}
.ac-offer-sheet.ac-premium .ac-offer-hint {
	color: #a9a9b5;
}
.ac-confirm.ac-premium .ac-btn-primary {
	background: linear-gradient(135deg, #f0d078, #b8860b);
	border-color: #d4a938;
	color: #1a1405;
}
.ac-confirm.ac-premium .ac-btn-primary:hover {
	background: linear-gradient(135deg, #f6dd90, #d4a938);
}
.ac-confirm.ac-premium .ac-btn-ghost {
	background: rgba(16, 16, 20, 0.85);
	border-color: #3a3a44;
	color: #f2f2f5;
}
.ac-confirm.ac-premium .ac-btn-ghost:hover {
	border-color: #d4a938;
	color: #f0d078;
}

.ac-configurator {
	--ac-primary: #2271b1;
	--ac-border: #dcdcde;
	--ac-text: #2c3338;
	--ac-muted: #66707a;
	font-family: inherit;
	color: var(--ac-text);
	max-width: 1600px;
	margin: 0 auto;
}

.ac-configurator .ac-notice {
	padding: 10px 14px;
	border-radius: 6px;
	background: #f0f0f1;
	color: var(--ac-muted);
	font-size: 14px;
}
.ac-configurator .ac-notice-error {
	background: #fcf0f1;
	color: #b32d2e;
}

/* Layout principale */
.ac-configurator .ac-main {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 28px;
	align-items: start;
}
/* Responsive: colonna singola, canvas (ac-right) in cima.
 * Restiamo su GRID (niente flex column-reverse, che nascondeva la colonna
 * canvas in alcuni contesti) usando order per riordinare. */
@media (max-width: 900px) {
	.ac-configurator .ac-main {
		grid-template-columns: 1fr;
	}
	.ac-configurator .ac-right {
		order: -1;
	}
	.ac-configurator .ac-canvas-wrap {
		max-height: 72vh;
	}
}

/* ---------------- Canvas / stack layer ---------------- */
.ac-configurator .ac-canvas-wrap {
	position: relative;
	width: 100%;
	aspect-ratio: var(--ac-ar, 1 / 1);
	border: 1px solid var(--ac-border);
	border-radius: 10px;
	overflow: hidden;
	/* checkerboard: fa intuire la trasparenza dei layer */
	background: repeating-conic-gradient(#f0f0f1 0 25%, #ffffff 0 50%) 50% / 24px 24px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}
.ac-configurator .ac-layer-stack {
	position: absolute;
	inset: 0;
}
.ac-configurator .ac-layer {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: unset;
	justify-content: center;
	
}
.ac-configurator .ac-layer img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	pointer-events: none;
	user-select: none;
}
.ac-configurator .ac-layer canvas {
	width: 100%;
	height: 100%;
	display: block;
	pointer-events: none;
}
/* Video sorgente luma-matte: FUORI schermo (mai visibile) ma in
 * riproduzione attiva — è solo la sorgente per il compositing sul canvas.
 * Il frame side-by-side (colore + matte) non deve MAI apparire a schermo. */
.ac-configurator .ac-layer-video {
	position: absolute;
	left: -9999px;
	top: 0;
	width: 2px;
	height: 2px;
	opacity: 0;
	pointer-events: none;
}
/* Video NORMALE (senza alpha): visibile, si comporta come un'immagine. */
.ac-configurator .ac-layer video.ac-layer-video-plain {
	width: 100%;
	height: 100%;
	object-fit: contain;
	pointer-events: none;
	user-select: none;
}
.ac-configurator .ac-layer.is-positioned video.ac-layer-video-plain {
	width: 100%;
	height: auto;
}

/* ---------------- Layer posizionato (regole posizioni condizionali) --- */
/* Il layer extra con coordinate X/Y/L% smette di coprire tutto il canvas:
 * si aggancia all'angolo dato e l'immagine mantiene le sue proporzioni. */
.ac-configurator .ac-layer.is-positioned {
	inset: auto;
}
.ac-configurator .ac-layer.is-positioned img {
	width: 100%;
	height: auto;
	object-fit: contain;
}
.ac-configurator .ac-layer.is-positioned canvas {
	width: 100%;
	height: auto;
}

/* ---------------- Targhette toggle sul canvas (Facecam / Overlay) ------ */
.ac-configurator .ac-canvas-toggles {
	position: absolute;
	top: 10px;
	left: 10px;
	right: 10px;
	z-index: 10;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	pointer-events: none; /* il container non blocca il canvas */
}
.ac-configurator .ac-canvas-toggle {
	pointer-events: auto;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	padding: 4px 12px !important;
	min-height: 0;
	border-radius: 999px;
	border: 1px solid var(--ac-border);
	background: rgba(255, 255, 255, 0.9);
	color: var(--ac-text);
	font: 600 12px/1.2 inherit;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.ac-configurator .ac-canvas-toggle:hover {
	border-color: var(--ac-primary);
	color: var(--ac-primary);
}
.ac-configurator .ac-canvas-toggle.is-active {
	background: var(--ac-primary);
	border-color: var(--ac-primary);
	color: #fff;
}
/* Premium: pill scure con accento oro. */
.ac-configurator.ac-premium .ac-canvas-toggle {
	background: rgba(16, 16, 20, 0.85);
	border-color: #3a3a44;
	color: #f2f2f5;
}
.ac-configurator.ac-premium .ac-canvas-toggle.is-active {
	background: linear-gradient(135deg, #f0d078, #b8860b);
	border-color: #d4a938;
	color: #1a1405;
}

/* ---------------- Preview 2 (flip card 3D + switch centrale) --------- */
/* Il canvas è una flip card: fronte = preview 1 (layer accumulati),
 * retro = preview 2 (vergine, solo il layer dell'opzione dello step
 * corrente). La classe ac-preview2 sul root ruota la card di 180°. */
.ac-configurator .ac-canvas-wrap {
	perspective: 1200px;
}
.ac-configurator .ac-flip {
	position: absolute;
	inset: 0;
	transform-style: preserve-3d;
	transition: transform 0.8s ease;
}
.ac-configurator.ac-preview2 .ac-flip {
	transform: rotateY(180deg);
}
.ac-configurator .ac-layer-stack,
.ac-configurator .ac-layer-stack-alt {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	/* BACKUP MOBILE: backface-visibility è inaffidabile su diversi browser
	 * mobile — l'altra faccia restava VISIBILE e SPECCHIATA durante/after
	 * il flip (layer preview1 riflessi, targhette Facecam/Overlay capovolte)
	 * e Back/Next sembravano non switchare. La faccia non attiva viene
	 * nascosta ESPLICITAMENTE (fade 0.35s in sincrono con il flip 0.8s). */
	transition: opacity 0.35s ease, visibility 0.35s ease;
}
.ac-configurator .ac-layer-stack-alt {
	transform: rotateY(180deg);
	opacity: 0;
	visibility: hidden;
}
.ac-configurator.ac-preview2 .ac-layer-stack {
	opacity: 0;
	visibility: hidden;
}
.ac-configurator.ac-preview2 .ac-layer-stack-alt {
	opacity: 1;
	visibility: visible;
}
/* Icona switch rotonda al centro delle targhette toggle. */
.ac-configurator .ac-preview-switch {
	pointer-events: auto;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	padding: 0 !important;
	border-radius: 50%;
	border: 1px solid var(--ac-border);
	background: rgba(255, 255, 255, 0.92);
	color: var(--ac-text);
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.ac-configurator .ac-preview-switch:hover {
	border-color: var(--ac-primary);
	color: var(--ac-primary);
	transform: scale(1.08);
}
.ac-configurator .ac-preview-switch.is-active {
	background: var(--ac-primary);
	border-color: var(--ac-primary);
	color: #fff;
}
/* Doppia freccia animata (arrow-4): colore = currentColor, quindi segue
 * i colori del programma (testo, primario quando attiva, oro premium). */
.ac-configurator .ac-preview-switch .arrow-4 {
	width: 40px;
	height: 30px;
	display: grid;
	transform: scale(0.62);
}
.ac-configurator .ac-preview-switch .arrow-4:before,
.ac-configurator .ac-preview-switch .arrow-4:after {
	content: "";
	grid-area: 1/1;
	background: currentColor;
	clip-path: polygon(0 10px, calc(100% - 15px) 10px, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, calc(100% - 15px) calc(100% - 10px), 0 calc(100% - 10px));
	animation: ac-a4 0.5s infinite alternate;
}
.ac-configurator .ac-preview-switch .arrow-4:after {
	--s: -1;
}
@keyframes ac-a4 {
	0%   { transform: scale(var(--s, 1)) translate(12px, -6px) translate(4px); }
	100% { transform: scale(var(--s, 1)) translate(12px, -6px) translate(-4px); }
}
/* Premium: switch scuro con accento oro quando attivo. */
.ac-configurator.ac-premium .ac-preview-switch {
	background: rgba(16, 16, 20, 0.85);
	border-color: #3a3a44;
	color: #f2f2f5;
}
.ac-configurator.ac-premium .ac-preview-switch.is-active {
	background: linear-gradient(135deg, #ffe190, #ffb500);
	border-color: #d4a938;
	color: #1a1405;
}

/* ---------------- Step corrente ---------------- */
.ac-configurator .ac-step-block {
	margin-bottom: 24px;
}
.ac-configurator .ac-step-title {
	margin: 0 0 6px;
	font-size: 30px;
		margin-bottom:25px;
		color: var(--ac-primary);
}
.ac-configurator .ac-step-desc {
	margin: 0 0 14px;
	color: var(--ac-muted);
	font-size: 16px;
	/* Rispetta gli a capo scritti nel back-end. */
	white-space: pre-line;
}
.ac-configurator .ac-complete .ac-step-title {
	color: #2c7d2c;
}

/* ---------------- Card opzioni ---------------- */
.ac-configurator .ac-options-grid {
	display: grid;
	/* grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); */
	gap: 12px;
	margin-top: 20px;
}
.ac-configurator .ac-option-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 10px;
	background: #fff;
	border: 2px solid var(--ac-border);
	border-radius: 10px;
	cursor: pointer;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
	font: inherit;
	color: inherit;
	text-align: left;
		padding-bottom:30px;
}
.ac-configurator .ac-option-card:hover {
	border-color: var(--ac-primary);
	transform: translateY(-1px);
}
.ac-configurator .ac-option-card.is-selected {
	border-color: var(--ac-primary);
	box-shadow: 0 0 0 3px rgba(34, 113, 177, 0.18);
	background: #f6faff;
}
.ac-configurator .ac-card-thumb {
	width: auto;
	/* aspect-ratio: 1 / 1; */
	display: flex;
	align-items: start;
	justify-content: center;
	border-radius: 6px;
	overflow: hidden;
	position: relative;
	/*background: repeating-conic-gradient(#f0f0f1 0 25%, #ffffff 0 50%) 50% / 16px 16px;*/
}
/* Icona YouTube dentro la thumb delle opzioni con video collegato. */
.ac-configurator .ac-yt-thumb-icon {
	position: absolute;
	bottom: 6px;
	right: 6px;
	z-index: 2;
	width: 38px;
	height: 27px;
	cursor: pointer;
	transition: transform 0.15s ease, filter 0.15s ease;
}
.ac-configurator .ac-yt-thumb-icon img {
	width: 80%;
	height: 80%;
	object-fit: contain;
	display: block;
}
.ac-configurator .ac-yt-thumb-icon:hover {
	transform: scale(1.12);
	filter: drop-shadow(0 0 8px rgba(240, 165, 0, 0.9));
}
.ac-configurator .ac-card-thumb img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}
.ac-configurator .ac-card-thumb-empty {
	color: #999;
	font-size: 18px;
}
/* Premium: senza immagine il placeholder sparisce del tutto. */
.ac-configurator.ac-premium .ac-card-thumb-empty {
	display: none;
}
.ac-configurator .ac-card-label {
	font-size: 28px;
	font-weight: 600;
	line-height: 1.25;
	padding-bottom: 10px;
	padding-top: 30px;
}
/* Dimensioni font per-step (CSS vars impostate dal blocco step). */
.ac-configurator .ac-step-block {
	--ac-label-px: 28px;
	--ac-desc-px: 14px;
	--ac-label-pt: 30px;
	--ac-label-pr: 0px;
	--ac-label-pb: 10px;
	--ac-label-pl: 0px;
}
.ac-configurator .ac-step-block .ac-card-label {
	font-size: var(--ac-label-px);
	padding-top: var(--ac-label-pt);
	padding-right: var(--ac-label-pr);
	padding-bottom: var(--ac-label-pb);
	padding-left: var(--ac-label-pl);
}
.ac-configurator .ac-card-desc {
	font-size: 14px;
	color: var(--ac-muted);
	line-height: 1.35;
	max-width: 100%;
	/* Rispetta gli a capo scritti nel back-end. */
	white-space: pre-line;
}
.ac-configurator .ac-step-block .ac-card-desc {
	font-size: var(--ac-desc-px);
}
.ac-configurator .ac-card-delta {
	font-size: 12px;
	color: var(--ac-muted);
}
.ac-configurator .ac-option-card.is-selected .ac-card-delta {
	color: var(--ac-primary);
	font-weight: 700;
}

/* ---------------- Opzione in evidenza (highlight) ---------------- */
.ac-configurator .ac-option-card.is-highlight {
	position: relative;
	border-color: #f0a500;
	background: linear-gradient(180deg, #fffdf5 0%, #ffffff 40%);
	box-shadow: 0 3px 14px rgba(240, 165, 0, 0.28);
	transform: translateY(-2px);
}
.ac-configurator .ac-option-card.is-highlight:hover {
	border-color: #d18f00;
	transform: translateY(-3px);
	box-shadow: 0 5px 18px rgba(240, 165, 0, 0.38);
}
.ac-configurator .ac-option-card.is-highlight.is-selected {
	border-color: #f0a500;
	box-shadow: 0 0 0 3px rgba(240, 165, 0, 0.35), 0 3px 14px rgba(240, 165, 0, 0.3);
}
/* Wrapper targhette (POPULAR/BENEFIT/NEW): su desktop è display:contents
 * (le targhette restano assolute esattamente come prima); su mobile
 * (≤ 600px) diventa una riga flex e le affianca. */
.ac-configurator .ac-card-ribbons {
	display: contents;
}
.ac-configurator .ac-card-ribbon {
	position: absolute;
	top: -1px;
	right: 12px;
	z-index: 2;
	background: #f0a500;
	color: #fff;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.08em;
	padding: 3px 10px;
	border-radius: 0 0 8px 8px;
	box-shadow: 0 2px 6px rgba(240, 165, 0, 0.45);
}
.ac-configurator .ac-option-card.is-highlight .ac-card-label {
	color: #996800;
}
.ac-configurator .ac-option-card.is-highlight .ac-card-thumb {
	background: #fffaf0;
}

/* ---------------- Targhetta BENEFIT (blu) ---------------- */
.ac-configurator .ac-card-ribbon.ac-card-ribbon-benefit {
	background: #2271b1;
	box-shadow: 0 2px 6px rgba(34, 113, 177, 0.45);
}
.ac-configurator .ac-card-ribbon.ac-r2 {
	right: 96px;
}
/* Terza targhetta (NEW quando ci sono anche POPULAR e BENEFIT). */
.ac-configurator .ac-card-ribbon.ac-r3 {
	right: 185px;
}
/* Su schermi/card stretti le targhette non restano sospese in absolute
 * (che le faceva uscire dalla card): diventano badge inline in cima. */
@media (max-width: 600px) {
	/* Wrapper: riga flex → le targhette stanno UNA DI FIANCO ALL'ALTRA. */
	.ac-configurator .ac-card-ribbons {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 6px;
	}
	.ac-configurator .ac-card-ribbon,
	.ac-configurator .ac-card-ribbon.ac-r2,
	.ac-configurator .ac-card-ribbon.ac-r3 {
		position: static;
		right: auto;
		display: inline-block;
		border-radius: 0px 0px 6px 6px;
		margin: 0;
	}
	.ac-configurator .ac-option-card.is-highlight,
	.ac-configurator .ac-option-card.is-benefit,
	.ac-configurator .ac-option-card.is-new {
		transform: none;
	}
}
.ac-configurator .ac-option-card.is-benefit {
	border-color: #5b9bd5;
}
.ac-configurator .ac-option-card.is-benefit .ac-card-label {
	color: #1d6fa5;
}

/* ---------------- Targhetta NEW (viola) ---------------- */
.ac-configurator .ac-card-ribbon.ac-card-ribbon-new {
	background: #8e44ad;
	box-shadow: 0 2px 6px rgba(142, 68, 173, 0.45);
}
.ac-configurator .ac-option-card.is-new {
	border-color: #a86bc4;
}
.ac-configurator .ac-option-card.is-new .ac-card-label {
	color: #7b2d8e;
}

/* ---------------- Stile per-step (layout / larghezza / colonne) -------- */
.ac-configurator .ac-step-block.ac-layout-flex .ac-options-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
}
.ac-configurator .ac-step-block.ac-layout-flex .ac-option-card {
	flex: 1 1 170px;
	max-width: 240px;
	justify-content: flex-start;
}
.ac-configurator .ac-step-block.ac-width-full {
	max-width: none;
	width: 100%;
}
.ac-configurator .ac-step-block[style*="--ac-cols"] .ac-options-grid {
	grid-template-columns: repeat(var(--ac-cols), minmax(0, 1fr));
}

/* ---------------- Quantità extra (stepper) ---------------- */
.ac-configurator .ac-extra-cell {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}
.ac-configurator .ac-extra-cell .ac-option-card {
	flex: 1;
}
.ac-configurator .ac-extra-qty {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 3px;
	margin-top: 2px;
	align-self: center;
	padding-bottom:5px;
}
/* Lo stepper è SEMPRE nel DOM: visibile solo sulla cella selezionata.
 * Così la selezione non ricostruisce la gallery (su mobile resetterebbe
 * lo scroll e causerebbe glitch/resize). */
.ac-configurator .ac-extra-cell .ac-extra-qty {
	display: none;
}
.ac-configurator .ac-extra-cell.is-selected .ac-extra-qty {
	display: inline-flex;
}
.ac-configurator .ac-qty-btn {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	min-width: 34px;
	min-height: 34px;
	padding: 0 !important;
	border-radius: 8px;
	border: 1px solid var(--ac-border);
	background: #fff;
	cursor: pointer;
	font: 700 18px/1 inherit;
	line-height: 1;
	color: var(--ac-text);
	transition: border-color 0.15s ease, color 0.15s ease;
	overflow: hidden;
	flex: 0 0 auto;
	padding-bottom: 5px !important;
}
.ac-configurator .ac-qty-btn:hover {
	border-color: var(--ac-primary);
	color: var(--ac-primary);
}
.ac-configurator .ac-qty-input {
	box-sizing: border-box;
	width: 56px;
	height: 34px;
	padding: 0 4px !important;
	text-align: center;
	border: 1px solid var(--ac-border);
	border-radius: 8px;
	font: 600 16px/1 inherit;
	appearance: textfield;
	-moz-appearance: textfield;
}
.ac-configurator .ac-qty-input::-webkit-outer-spin-button,
.ac-configurator .ac-qty-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* ---------------- Extra ---------------- */
/* Extras e riepilogo stanno SOTTO la griglia (ac-main): margine di stacco. */
.ac-configurator .ac-extras-area {
	margin-top: 28px;
}
.ac-configurator .ac-summary-area {
	margin-top: 28px;
}
.ac-configurator .ac-extras-block {
	margin-bottom: 24px;
	padding: 16px;
	border: 1px dashed var(--ac-border);
	border-radius: 10px;
}

.ac-configurator .ac-extras-title {
	margin: 0 0 10px;
	font-size: 16px;
	margin-bottom: 40px;
	margin-top: 10px;
color: var(--ac-primary);
}

.ac-configurator .ac-extra-group {
	margin-bottom: 42px;
}

.ac-configurator .ac-extra-group-title {
	margin: 0 0 20px;
	font-size: 22px;
	color: var(--ac-muted);
	font-weight: 600;
}

/* Descrizione del gruppo extra (campo "Descrizione" del nodo extra). */
.ac-configurator .ac-extra-group-desc {
	margin: 4px 0 30px;
	font-size: 14px;
	color: var(--ac-muted);
	line-height: 1.4;
	white-space: pre-line;
}

.ac-configurator .ac-extra-group-tiers {
	margin: -4px 0 8px;
	font-size: 12px;
	color: var(--ac-primary);
	font-weight: 600;
}

/* =====================================================
 * EXTRAS - Layout professionale e gerarchia uniforme
 * Struttura:
 * 1. Titolo con area fissa
 * 2. Descrizione allineata a sinistra
 * 3. Spazio flessibile
 * 4. Prezzo sempre in fondo
 * ===================================================== */
.ac-configurator .ac-extras-grid {
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	gap: 30px;
	align-items: stretch;
}

/* Card: struttura verticale coerente e contenuto sempre a sinistra. */
.ac-configurator .ac-extras-grid .ac-option-card {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-start;
	text-align: left;
	min-height: 210px;
	padding: 8px 18px 18px;
	gap: 0;
}

/* Eventuale thumbnail sempre allineata a sinistra. */
.ac-configurator .ac-extras-grid .ac-card-thumb {
	align-self: flex-start;
	margin: 0 0 14px;
}

/*
 * TITOLO
 * Area fissa per due righe: tutte le descrizioni iniziano
 * alla stessa altezza, anche con titoli più corti.
 */
.ac-configurator .ac-extras-grid .ac-card-label {
	display: block;
	width: 100%;
	min-height: 40px;
	margin: 0 0 12px;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.25;
	text-align: left;
}

/* DESCRIZIONE: lettura naturale, sempre allineata a sinistra. */
.ac-configurator .ac-extras-grid .ac-card-desc {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	font-size: 14px;
	line-height: 1.45;
	text-align: left;
}

/*
 * PREZZO
 * margin-top:auto crea lo spazio flessibile tra descrizione e prezzo,
 * mantenendo il prezzo ordinato nella parte bassa della card.
 */
.ac-configurator .ac-extras-grid .ac-card-delta {
	display: block;
	width: 100%;
	margin-top: auto;
	padding-top: 18px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	text-align: left;
	color: var(--ac-muted);
}

/* Mantiene il colore del prezzo quando la card è selezionata. */
.ac-configurator .ac-extras-grid .ac-option-card.is-selected .ac-card-delta {
	color: var(--ac-primary);
	font-weight: 700;
}

/* ---------------- Riepilogo ---------------- */
/* STANDARD (default): nel flusso, larghezza piena. */
.ac-configurator .ac-left {
	position: relative;
}
.ac-configurator .ac-summary-block {
	padding: 16px;
	border: 1px solid var(--ac-border);
	border-radius: 10px;
	background: #fff;
	position: relative;
	width: 100%;
	z-index: 5;
	box-shadow: none;
}

/* FLOAT (classe ac-summary-float da impostazioni): il riepilogo sta a destra
 * SENZA coprire il canvas — la griglia si restringe (padding-right), il canvas
 * viene rimpicciolito e il riepilogo occupa la fascia liberata a destra.
 * Attivo solo da 1024px in su: sotto, il canvas avrebbe troppo spazio. */
.ac-configurator.ac-summary-float {
	position: relative;
}
@media (min-width: 1024px) {
	.ac-configurator.ac-summary-float .ac-main {
		padding-right: 340px;
	}
	.ac-configurator.ac-summary-float .ac-summary-block {
		position: absolute;
		top: 76px;
		right: 0;
		width: 310px;
		max-width: 340px;
		box-shadow: 0 6px 22px rgba(0, 0, 0, 0.10);
	}
}
/* Sotto 1024px il riepilogo torna nel flusso (niente sovrapposizioni). */
@media (max-width: 1023px) {
	.ac-configurator.ac-summary-float .ac-main {
		padding-right: 0;
	}
	.ac-configurator.ac-summary-float .ac-summary-block {
		position: static;
		width: 100%;
		box-shadow: none;
		margin-top: 24px;
	}
}
.ac-configurator .ac-summary-title {
	margin: 0 0 10px;
	font-size: 22px;
color: var(--ac-primary);
}
.ac-configurator .ac-summary-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	padding: 7px 0;
	border-bottom: 1px dashed var(--ac-border);
	font-size: 13px;
}
.ac-configurator .ac-summary-row em {
	color: var(--ac-muted);
	font-style: normal;
	font-size: 12px;
}
.ac-configurator .ac-free-tag {
	background: #edf7ed;
	color: #2c7d2c;
	border-radius: 8px;
	padding: 1px 8px;
	font-weight: 700;
	font-size: 11px;
	margin-left: 4px;
	display: inline-block;
}
.ac-configurator .ac-summary-total {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-top: 12px;
	font-size: 15px;
}
.ac-configurator .ac-total-price {
	font-size: 24px;
	font-weight: 800;
	color: var(--ac-primary);
}

/* ---------------- Bottoni ---------------- */
.ac-configurator .ac-btn {
	display: inline-block;
	padding: 10px 18px;
	border-radius: 8px;
	border: 1px solid transparent;
	cursor: pointer;
	font: inherit;
	font-weight: 600;
	font-size: 14px;
	transition: background 0.15s ease, opacity 0.15s ease;
}
.ac-configurator .ac-btn-primary {
	background: var(--ac-primary);
	color: #fff;
}
.ac-configurator .ac-btn-primary:hover:not(:disabled) {
	background: #135e96;
}
.ac-configurator .ac-btn-primary:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}
.ac-configurator .ac-btn-ghost {
	background: transparent;
	border-color: var(--ac-border);
	color: var(--ac-text);
}
.ac-configurator .ac-btn-ghost:hover {
	border-color: var(--ac-primary);
	color: var(--ac-primary);
}
.ac-configurator .ac-btn-small {
	padding: 4px 10px;
	font-size: 12px;
	font-weight: 500;
}
.ac-configurator .ac-skip {
	margin-top: 12px;
}
.ac-configurator .ac-cart-area {
	margin-top: 14px;
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}
.ac-configurator .ac-cart-status {
	font-size: 13px;
	color: var(--ac-muted);
}

/* ---------------- Barra di progressione + navigazione ---------------- */
.ac-configurator .ac-progress {
	margin-bottom: 20px;
}
/* Riga navigazione: [Back] [barra] [Next]. */
.ac-configurator .ac-progress-nav {
	display: flex;
	align-items: center;
	gap: 12px;
}
.ac-configurator .ac-progress-nav .ac-progress-track {
	flex: 1;
}
.ac-configurator .ac-progress-back,
.ac-configurator .ac-progress-next {
	flex: 0 0 auto;
	padding: 16px 16px !important;
	font-size: 16px;
	white-space: nowrap;
}
.ac-configurator .ac-progress-spacer {
	flex: 0 0 auto;
	width: 1px;
}
.ac-configurator .ac-progress-track {
	height: 16px;
	border-radius: 999px;
	background: #e7e9ea;
	overflow: hidden;
}
.ac-configurator .ac-progress-fill {
	height: 100%;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--ac-primary), #4a9ce0);
	transition: width 0.3s ease;
}
.ac-configurator .ac-progress-label {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	font-size: 12px;
	color: var(--ac-muted);
	margin-top: 4px;
}

/* ---------------- Navigazione step (Indietro / Avanti) ---------------- */
.ac-configurator .ac-step-nav {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	align-items: center;
	margin-top: 16px;
}
.ac-configurator .ac-step-nav .ac-btn-primary {
	margin-left: auto;
}

/* ---------------- "NO image": canvas nascosto, layout centrato -------- */
.ac-configurator.ac-hide-canvas .ac-right {
	display: none;
}
.ac-configurator.ac-hide-canvas .ac-main {
	grid-template-columns: 1fr;
}
.ac-configurator.ac-hide-canvas .ac-left {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}
@media (max-width: 900px) {
	.ac-configurator.ac-hide-canvas .ac-main {
		display: block;
	}
}

/* =====================================================================
 * Animazione "bump" sul totale (quando il prezzo cambia)
 * ===================================================================== */
.ac-configurator .ac-total-price.ac-bump {
	animation: acBump 0.45s ease;
}
@keyframes acBump {
	0% { transform: scale(1); }
	35% { transform: scale(1.22); filter: brightness(1.3); }
	100% { transform: scale(1); }
}

/* =====================================================================
 * PREMIUM VISUAL (attivabile da impostazioni: "Premium visual")
 * Tema black premium con animazioni leggere.
 * ===================================================================== */
.ac-configurator.ac-premium {
	--ac-primary: #e3ba62;
	--ac-border: #3a3a44;
	--ac-text: #f2f2f5;
	--ac-muted: #a9a9b5;
	background: linear-gradient(160deg, #0d0d12 0%, #16161d 60%, #1a1a22 100%);
	padding: 10px;
	border-radius: 16px;
	box-shadow: 0 14px 44px rgba(0, 0, 0, 0.55);
	border: 1px solid rgba(227, 186, 98, 0.18);
}

/* Notifiche */
.ac-configurator.ac-premium .ac-notice {
	background: #232329;
	color: var(--ac-muted);
}

/* Canvas: cornice scura elegante */
.ac-configurator.ac-premium .ac-canvas-wrap {
	border-color: #3a3a44;
	background: repeating-conic-gradient(#141419 0 25%, #191920 0 50%) 50% / 24px 24px;
	box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(227, 186, 98, 0.1);
}

/* Card opzioni: vetro scuro */
.ac-configurator.ac-premium .ac-option-card {
	background: linear-gradient(180deg, #1e1e26 0%, #181820 100%);
	border-color: #34343e;
	color: var(--ac-text);
	transition: border-color 0.2s ease, box-shadow 0.25s ease, transform 0.2s ease;
}
.ac-configurator.ac-premium .ac-option-card:hover {
	border-color: rgba(227, 186, 98, 0.65);
	transform: translateY(-2px);
	box-shadow: 0 6px 22px rgba(227, 186, 98, 0.14);
}
.ac-configurator.ac-premium .ac-option-card.is-selected {
	border-color: var(--ac-primary);
	background: linear-gradient(180deg, #26240f 0%, #1b1a10 100%);
	box-shadow: 0 0 0 3px rgba(227, 186, 98, 0.22), 0 6px 24px rgba(227, 186, 98, 0.18);
}

.ac-configurator.ac-premium .ac-card-thumb-empty {
	color: #55555f;
}

/* POPULAR / BENEFIT animati (glow pulsante) */
.ac-configurator.ac-premium .ac-card-ribbon {
	animation: acRibbonGlow 2.2s ease-in-out infinite;
}
.ac-configurator.ac-premium .ac-card-ribbon.ac-card-ribbon-benefit {
	animation-name: acRibbonGlowB;
}
.ac-configurator.ac-premium .ac-card-ribbon.ac-card-ribbon-new {
	animation-name: acRibbonGlowN;
}
@keyframes acRibbonGlow {
	0%, 100% { box-shadow: 0 0 5px rgba(240, 165, 0, 0.45); }
	50% { box-shadow: 0 0 16px rgba(240, 165, 0, 0.95); }
}
@keyframes acRibbonGlowB {
	0%, 100% { box-shadow: 0 0 5px rgba(63, 145, 210, 0.45); }
	50% { box-shadow: 0 0 16px rgba(63, 145, 210, 0.95); }
}
@keyframes acRibbonGlowN {
	0%, 100% { box-shadow: 0 0 5px rgba(168, 107, 196, 0.45); }
	50% { box-shadow: 0 0 16px rgba(168, 107, 196, 0.95); }
}
.ac-configurator.ac-premium .ac-option-card.is-highlight {
	background: linear-gradient(180deg, #2b230d 0%, #1b180f 100%);
	box-shadow: 0 4px 18px rgba(240, 165, 0, 0.22);
}
.ac-configurator.ac-premium .ac-option-card.is-benefit {
	background: linear-gradient(180deg, #101b28 0%, #12161e 100%);
	box-shadow: 0 4px 18px rgba(63, 145, 210, 0.20);
}
.ac-configurator.ac-premium .ac-option-card.is-new {
	background: linear-gradient(180deg, #1d1024 0%, #141019 100%);
	box-shadow: 0 4px 18px rgba(168, 107, 196, 0.22);
}

/* Extra */
.ac-configurator.ac-premium .ac-extras-block {
	border-color: #34343e;
	background: none;
}
.ac-configurator.ac-premium .ac-extra-group-tiers {
	color: var(--ac-primary);
}
.ac-configurator.ac-premium .ac-qty-btn,
.ac-configurator.ac-premium .ac-qty-input {
	background: #1d1d24;
	border-color: #3a3a44;
	color: var(--ac-text);
	margin: -1px;
}

/* Riepilogo */
.ac-configurator.ac-premium .ac-summary-block {
	background: linear-gradient(180deg, #1b1b22 0%, #15151b 100%);
	border-color: #34343e;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(227, 186, 98, 0.08);
}
.ac-configurator.ac-premium .ac-summary-row {
	animation: acFadeIn 0.3s ease;
}
@keyframes acFadeIn {
	from { opacity: 0; transform: translateY(-3px); }
	to { opacity: 1; transform: translateY(0); }
}
.ac-configurator.ac-premium .ac-free-tag {
	background: rgba(46, 125, 46, 0.18);
	color: #7ed07e;
}
.ac-configurator.ac-premium .ac-total-price {
	color: var(--ac-primary);
	text-shadow: 0 0 18px rgba(227, 186, 98, 0.35);
}

/* Bottoni: gold con riflesso animato */
.ac-configurator.ac-premium .ac-btn {
	transition: background 0.2s ease, box-shadow 0.25s ease, transform 0.15s ease, color 0.2s ease;
}
.ac-configurator.ac-premium .ac-btn-primary {
	background: linear-gradient(135deg, #f0d078 0%, #d4a938 55%, #b8860b 100%);
	color: #1a1405;
	box-shadow: 0 4px 16px rgba(227, 186, 98, 0.25);
	background-size: 160% 160%;
	animation: acBtnSheen 3.5s ease-in-out infinite, acBtnGlow 3.5s ease-in-out infinite;
}
@keyframes acBtnGlow {
	0%, 100% { box-shadow: 0 4px 16px rgba(227, 186, 98, 0.25); }
	50% { box-shadow: 0 4px 26px rgba(227, 186, 98, 0.55); }
}
.ac-configurator.ac-premium .ac-btn-primary:hover:not(:disabled) {
	background: linear-gradient(135deg, #f7dd97 0%, #e3ba62 55%, #cc9a1f 100%);
	transform: translateY(-1px);
	box-shadow: 0 6px 24px rgba(227, 186, 98, 0.4);
}
@keyframes acBtnSheen {
	0%, 100% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
}
.ac-configurator.ac-premium .ac-btn-ghost {
	border-color: #3a3a44;
	color: var(--ac-text);
	background: rgba(255, 255, 255, 0.02);
}
.ac-configurator.ac-premium .ac-btn-ghost:hover {
	border-color: var(--ac-primary);
	color: var(--ac-primary);
	box-shadow: 0 0 14px rgba(227, 186, 98, 0.15);
}

/* Barra di progressione animata */
.ac-configurator.ac-premium .ac-progress-track {
	background: #232329;
	box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.5);
}
.ac-configurator.ac-premium .ac-progress-fill {
	background: linear-gradient(259deg, #ffe3b1, #fbca52, #ffdc83);
	background-size: 220% 100%;
	animation: acShimmer 4s linear(1.3 5.88%, 0.14 77.45%) infinite;
}
@keyframes acShimmer {
	0% { background-position: 0% 0; }
	100% { background-position: 220% 0; }
}

/* Titoli */
.ac-configurator.ac-premium .ac-step-title {
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}
.ac-configurator.ac-premium .ac-complete .ac-step-title {
	color: #7ed07e;
}

/* =====================================================================
 * Pulse in loop sull'icona YouTube nelle thumb delle opzioni
 * ===================================================================== */
.ac-configurator .ac-yt-thumb-icon img {
	animation: acYtPulse 2s ease-in-out infinite;
}
@keyframes acYtPulse {
	0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(240, 165, 0, 0)); }
	50% { transform: scale(1.08); filter: drop-shadow(0 0 8px rgba(240, 165, 0, 0.75)); }
}
/* Rispetta prefers-reduced-motion. */
@media (prefers-reduced-motion: reduce) {
	.ac-configurator .ac-yt-thumb-icon img {
		animation: none;
	}
}

/* =====================================================================
 * Effetto "fiamma" in loop sullo sfondo delle card selezionate
 * (solo premium + checkbox "Effetto fiamma" attivo → classe ac-flame)
 * ===================================================================== */
.ac-configurator.ac-premium.ac-flame .ac-option-card.is-selected {
	background: linear-gradient(115deg,
		#1b1a10 0%, #2b230d 18%, #4a2c08 32%, #7a3d05 45%,
		#b3541e 55%, #e07b28 63%, #7a3d05 72%, #2b230d 88%, #1b1a10 100%);
	background-size: 300% 300%;
	animation: acFlame 3.2s ease-in-out infinite;
	border-color: #e07b28;
	box-shadow: 0 0 0 3px rgba(224, 123, 40, 0.25), 0 6px 26px rgba(224, 123, 40, 0.35);
}
@keyframes acFlame {
	0% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}
@media (prefers-reduced-motion: reduce) {
	.ac-configurator.ac-premium.ac-flame .ac-option-card.is-selected {
		animation: none;
	}
}

/* Summary INSERITO dentro ac-left nello step finale (sotto "Start over"). */
.ac-configurator .ac-summary-inside {
	margin-top: 24px;
}
.ac-configurator .ac-summary-inside .ac-summary-block {
	margin-top: 0;
}

/* =====================================================================
 * MODALITÀ CATTURA (Save the offer) — classe ac-capture-mode sul
 * riepilogo durante html2canvas. html2canvas non risolve affidabilmente
 * le CSS variables (var(--ac-text) ecc.): il testo usciva GRIGIO invece
 * che bianco. Qui i colori sono ESPLICITI (hex), tema chiaro e premium.
 * ===================================================================== */
.ac-capture-mode,
.ac-capture-mode .ac-summary-label,
.ac-capture-mode .ac-summary-value,
.ac-capture-mode .ac-summary-row {
	color: #2c3338;
}
.ac-capture-mode .ac-summary-row em {
	color: #66707a;
}
.ac-premium .ac-capture-mode,
.ac-premium .ac-capture-mode .ac-summary-label,
.ac-premium .ac-capture-mode .ac-summary-value,
.ac-premium .ac-capture-mode .ac-summary-row {
	color: #f2f2f5;
}
.ac-premium .ac-capture-mode .ac-summary-row em {
	color: #a9a9b5;
}

/* =====================================================================
 * Hint "Check the Optionals" — flottante FISSO in basso al viewport
 * (si vede sempre senza scrollare; sparisce quando gli extra sono
 * diventati visibili a schermo o non sono disponibili)
 * ===================================================================== */
.ac-configurator .ac-scroll-hint {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 999;
	display: flex;
	justify-content: center;
	pointer-events: none; /* non blocca i click sotto */
	margin: 0;
}
.ac-configurator .ac-scroll-hint:empty {
	display: none;
}
.ac-configurator .ac-scroll-hint-inner {
	pointer-events: auto;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 9px 22px;
	border-radius: 14px 14px 0 0;
	/* Gradient animato leggero: evidenza soft in loop. */
	background: linear-gradient(110deg,
		rgba(255, 255, 255, 0.96) 0%,
		rgba(230, 242, 252, 0.96) 25%,
		rgba(255, 255, 255, 0.96) 50%,
		rgba(230, 242, 252, 0.96) 75%,
		rgba(255, 255, 255, 0.96) 100%);
	background-size: 250% 100%;
	animation: acHintGradient 5s ease-in-out infinite;
	border: 1px solid var(--ac-border);
	border-bottom: none;
	box-shadow: 0 -6px 22px rgba(0, 0, 0, 0.14);
	transition: background 0.15s ease;
}
.ac-configurator .ac-scroll-hint-inner:hover {
	animation-play-state: paused;
	background: #fff;
}
@keyframes acHintGradient {
	0%, 100% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
}
.ac-configurator .ac-hint-text {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.05em;
	color: var(--ac-primary);
	text-transform: uppercase;
	white-space: nowrap;
}
/* Doppio chevron IMPILATO in verticale (icona "double chevron down"). */
.ac-configurator .ac-hint-chevrons {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.ac-configurator .ac-chevron {
	width: 13px;
	height: 13px;
	border-right: 3px solid var(--ac-primary);
	border-bottom: 3px solid var(--ac-primary);
	transform: rotate(45deg);
	animation: acChevronBounce 1.5s ease-in-out infinite;
}
.ac-configurator .ac-chevron-2 {
	animation-delay: 0.15s;
	opacity: 0.5;
}
@keyframes acChevronBounce {
	0%, 100% { transform: rotate(45deg) translate(-1px, -1px); opacity: 0.45; }
	50% { transform: rotate(45deg) translate(2px, 2px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
	.ac-configurator .ac-chevron {
		animation: none;
	}
}

/* Premium: pill scura con gradient dorato animato. */
.ac-configurator.ac-premium .ac-scroll-hint-inner {
	background: linear-gradient(110deg, rgba(16, 16, 20, 0.94) 0%, rgb(91 74 25 / 94%) 25%, rgba(16, 16, 20, 0.94) 50%, rgb(102 82 27 / 94%) 75%, rgba(16, 16, 20, 0.94) 100%);
	background-size: 250% 100%;
	animation: acHintGradient 5s ease-in-out infinite;
	border-color: rgba(227, 186, 98, 0.35);
	box-shadow: 0 -6px 22px rgba(0, 0, 0, 0.5);
}
.ac-configurator.ac-premium .ac-hint-text {
	color: var(--ac-primary);
	text-shadow: 0 0 12px rgba(227, 186, 98, 0.35);
}

/* =====================================================================
 * "CONFIGURATION COMPLETE" (classe ac-complete-mode sul root)
 * Extra nascosti; riepilogo sotto la navigazione Back / Start over.
 * ===================================================================== */
.ac-configurator.ac-complete-mode .ac-extras-area {
	display: none;
}
/* Anche in versione summary-float, al completamento il riepilogo torna
 * nel flusso a larghezza piena, sotto i pulsanti (e il canvas si allarga). */
.ac-configurator.ac-complete-mode.ac-summary-float .ac-main {
	padding-right: 0;
}
.ac-configurator.ac-complete-mode.ac-summary-float .ac-summary-block {
	position: static;
	width: 100%;
	max-width: none;
	margin-top: 20px;
	box-shadow: none;
}

/* =====================================================================
 * Confetti (canvas overlay full-screen, generato via JS al completamento)
 * ===================================================================== */
.ac-confetti {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;
	pointer-events: none;
}

/* =====================================================================
 * MOBILE (≤ 640px) — layout Apple-style
 * - Welcome: SOLO la schermata iniziale
 * - Ordine: steps (gallery) → extra (gallery) → canvas → riepilogo
 * - Progress bar compatta
 * - Opzioni/extra in gallery orizzontale con scroll snap (ac-right escluso)
 * - Variabili stile mobile (--ac-m-*) con fallback ai valori desktop
 * ===================================================================== */
@media (max-width: 640px) {

/* Sicurezza: nessun overflow orizzontale del configuratore (lo swipe
 * della gallery non deve mai trascinare l'intera pagina).
 * NOTA: niente touch-action restrittivo qui — il touch-action si
 * INTERSECA lungo la catena dei padri e pan-y qui BLOCCHEREBBE il
 * pan-x delle gallery figlie (le swipe orizzontali morivano). */
.ac-configurator {
overflow-x: hidden;
overflow-x: clip;
}
/* La pagina che contiene il configuratore non scrolla orizzontalmente:
 * elimina la barra orizzontale inferiore del browser su mobile.
 * Su html (non solo body:has) per i browser senza supporto :has(). */
html {
overflow-x: hidden;
}
body:has(.ac-configurator) {
overflow-x: hidden;
}

/* 1. Welcome: solo la schermata iniziale (rinforzo con !important:
 *    alcune regole successive possono vincere per ordine/specificità). */
.ac-configurator.ac-welcome .ac-progress-area,
.ac-configurator.ac-welcome .ac-main,
.ac-configurator.ac-welcome .ac-extras-area,
.ac-configurator.ac-welcome .ac-summary-area {
display: none !important;
}

/* 5. Ordine verticale: display:contents promuove ac-left/ac-right a
 *    figli diretti del configuratore, così possono interlevarsi con
 *    ac-extras-area (che è fuori da ac-main). */
.ac-configurator .ac-main {
display: contents;
}
.ac-configurator .ac-left {
order: 1;
}
.ac-configurator .ac-extras-area {
order: 2;
}
.ac-configurator .ac-right {
order: 3;
}
.ac-configurator .ac-summary-area {
order: 4;
}

/* Canvas: mantiene le PROPORZIONI impostate (es. 9:16) con l'altezza
 * limitata a 72vh — prima max-height forzava la larghezza 100% e
 * deformava il riquadro (non più 9:16). Larghezza derivata dall'altezza
 * via aspect-ratio, centrato. */
.ac-configurator .ac-canvas-wrap {
width: auto;
max-width: 100%;
height: 72vh;
aspect-ratio: var(--ac-ar, 9 / 16);
margin-inline: auto;
}

/* Titoli step: dimensioni mobile (i 30px desktop sono enormi). */
.ac-configurator .ac-step-title {
font-size: 22px;
margin-bottom: 12px;
}
.ac-configurator .ac-step-desc {
font-size: 14px;
margin-bottom: 10px;
}

/* 2. Progress bar: bottoni compatti. */
.ac-configurator .ac-progress-nav {
gap: 8px;
}
.ac-configurator .ac-progress-back,
.ac-configurator .ac-progress-next {
padding: 8px 12px !important;
font-size: 13px;
}
.ac-configurator .ac-progress-track {
height: 10px;
}
.ac-configurator .ac-refresh-btn {
font-size: 11px;
padding: 3px 8px;
}

/* 3. GALLERY ORIZZONTALE (opzioni degli step + extra).
 *    Scroll nativo + snap, nessuna scrollbar, card grande con la
 *    successiva parzialmente visibile. ac-right NON è toccato. */
.ac-configurator .ac-options-grid {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
/* Lo swipe orizzontale resta DENTRO la gallery: a fine slide non
 * trascina la pagina (scroll-chaining). pan-x + pan-y: il browser
 * blocca la direzione al primo movimento — orizzontale = gallery,
 * verticale = scroll della pagina (si può risalire swipando in giù). */
overscroll-behavior-x: contain;
touch-action: pan-x pan-y;
gap: 24px;
padding: 0px;
padding-top:5px;
scroll-padding-inline: 24px;
scrollbar-width: none;
-ms-overflow-style: none;
}
.ac-configurator .ac-options-grid::-webkit-scrollbar {
display: none;
}
.ac-configurator .ac-options-grid .ac-option-card,
.ac-configurator .ac-options-grid .ac-extra-cell {
flex: 0 0 auto;
width: calc(80vw - 80px);
max-width: none;
scroll-snap-align: start;
scroll-snap-stop: always;
}
/* Card SENZA immagine: più compatte (entrano meglio nella gallery;
 * :has() è supportato da tutti i browser mobile moderni). */
.ac-configurator .ac-options-grid .ac-option-card:has(.ac-card-thumb-empty) {
width: min(62vw, 260px);
}
/* Fless layout: su mobile diventa gallery a tutti gli effetti. */
.ac-configurator .ac-step-block.ac-layout-flex .ac-options-grid {
flex-wrap: nowrap;
justify-content: flex-start;
}
.ac-configurator .ac-step-block.ac-layout-flex .ac-option-card {
flex: 0 0 auto;
max-width: none;
}

/* Extra: il blocco tratteggiato diventa un contenitore pulito e le
 * card scorrono in gallery (stessa classe .ac-options-grid). */
.ac-configurator .ac-extras-area .ac-extras-block {
padding: 0;
border: none;
}
.ac-configurator .ac-extras-area .ac-extra-group-title,
.ac-configurator .ac-extras-area .ac-extra-group-desc,
.ac-configurator .ac-extras-area .ac-extra-group-tiers {
padding-inline: 24px;
}

/* 4. Variabili stile MOBILE per-step (fallback: valori desktop). */
.ac-configurator .ac-step-block .ac-card-label {
font-size: var(--ac-m-label-px, var(--ac-label-px));
padding-top: var(--ac-m-label-pt, var(--ac-label-pt));
padding-right: var(--ac-m-label-pr, var(--ac-label-pr));
padding-bottom: var(--ac-m-label-pb, var(--ac-label-pb));
padding-left: var(--ac-m-label-pl, var(--ac-label-pl));
}
.ac-configurator .ac-step-block .ac-card-desc {
font-size: var(--ac-m-desc-px, var(--ac-desc-px));
}

/* "Colonne mobile" (2-6): opt-OUT dalla gallery → grid compatta. */
.ac-configurator .ac-step-block[style*="--ac-m-cols"] .ac-options-grid {
display: grid;
grid-template-columns: repeat(var(--ac-m-cols), minmax(0, 1fr));
overflow-x: visible;
gap: 12px;
padding-inline: 0;
margin-inline: 0;
}
.ac-configurator .ac-step-block[style*="--ac-m-cols"] .ac-options-grid .ac-option-card,
.ac-configurator .ac-step-block[style*="--ac-m-cols"] .ac-options-grid .ac-extra-cell {
width: auto;
}

/* Riduci il "jump" dello snap rispettando reduced-motion. */
@media (prefers-reduced-motion: reduce) {
.ac-configurator .ac-options-grid {
scroll-behavior: auto;
}
}
}