/**
 * Stili del configuratore Disco Personalizzato.
 *
 * FONT: caricati via Bunny Fonts (fonts.bunny.net), alternativa GDPR-friendly
 * a Google Fonts, dall'enqueue in class-shortcode.php. Per self-hostarli,
 * usa il filtro `disco_pers_fonts_css_url` e definisci qui i tuoi @font-face.
 */

.disco-pers-app {
	--disco-accent: #cc2090;
	--disco-blue: #2c5698;
	--disco-border: #e2e2e2;
	--disco-text: inherit;
	--disco-radius: 0; /* Angoli vivi su bottoni e campi. */

	/* === CALIBRAZIONE DISCO SUL BADGE DELLA MACCHINA ===
	   In % del lato della foto (quadrata). Per rifinire la posizione/dimensione
	   del disco sul badge basta ritoccare SOLO queste tre variabili. */
	--machine-disc-cx: 48%; /* centro badge, orizzontale (misurato dal render) */
	--machine-disc-cy: 23%; /* centro badge, verticale */
	--machine-disc-d: 22%;  /* Ø del cerchio nero interno (ghiera esclusa) */

	/* === INQUADRATURA (default; sovrascritti dalle impostazioni admin) ===
	   Zoom > 1 zooma sulla parte alta della macchina per un disco grande.
	   anchor-x/y = dove il badge (e quindi il disco) appare nel riquadro. */
	--machine-zoom: 2.6;
	--machine-anchor-x: 50%;
	--machine-anchor-y: 40%;
	--machine-view-ar: 1 / 1;

	/* Nessun cap di larghezza: il configuratore riempie il contenitore di
	   Elementor, così margini e spaziature si regolano da lì. */
	max-width: 100%;
	margin: 0 auto;
	/* Tipografia ereditata dal tema: il configuratore si adatta al sito
	   invece di imporre un font proprio. */
	font-family: inherit;
	font-size: inherit;
	color: inherit;
	line-height: 1.5;
}

/* I controlli ereditano il font del tema (i browser non lo fanno da soli
   su input, select, textarea e button). */
.disco-pers-app input,
.disco-pers-app select,
.disco-pers-app textarea,
.disco-pers-app button {
	font-family: inherit;
}

.disco-wrap {
	display: flex;
	flex-wrap: wrap;
	gap: 28px;
	align-items: center;
	justify-content: center;
}

/* Desktop: disco e controlli attaccati ai bordi del contenitore (space-between),
   così la spaziatura si regola con il padding del contenitore Elementor.
   Sotto i 960px resta tutto centrato come prima: i due blocchi vanno a capo e
   con space-between finirebbero allineati a sinistra. */
@media ( min-width: 960px ) {
	.disco-wrap {
		justify-content: space-between;
	}
	/* Senza crescita i controlli non riempiono lo spazio libero,
	   che è quello che space-between distribuisce tra i due blocchi. */
	.disco-controls {
		flex: 0 1 420px;
	}
}

.disco-canvas-col {
	/* Più larga di prima (era 460px): a macchina intera il disco è ~21% della
	   foto, quindi una colonna più ampia lo tiene abbastanza grande da modificare. */
	flex: 0 0 560px;
	max-width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* --- Anteprima sulla macchinetta --- */

/* Finestra visibile: su desktop mostra tutta la foto; su mobile fa da cornice
   di ritaglio (overflow:hidden) per lo zoom sulla zona badge. */
.disco-machine-viewport {
	position: relative;
	width: 100%;
	max-width: 100%;
	overflow: hidden;
	aspect-ratio: var( --machine-view-ar );
}

/* Sistema di coordinate della foto (quadrato). Viene posizionato così che il
   suo punto (cx,cy) — il centro del badge — cada sempre sul punto d'ancoraggio
   del viewport, per qualsiasi zoom: left/top all'ancora, poi si sottrae (cx,cy)
   con la translate (percentuali riferite al box del frame). */
.disco-machine-frame {
	position: absolute;
	left: var( --machine-anchor-x );
	top: var( --machine-anchor-y );
	width: calc( 100% * var( --machine-zoom ) );
	transform: translate( calc( -1 * var( --machine-disc-cx ) ), calc( -1 * var( --machine-disc-cy ) ) );
}

.disco-machine-photo {
	display: block;
	width: 100%;
	height: auto;
	pointer-events: none; /* non intercetta mai il trascinamento del testo */
	user-select: none;
}

/* Il disco in "modalità macchina": posizionato e dimensionato sul badge in % del
   frame (così scala col crop). Via scacchi e ombra; resta il cerchio. */
.disco-machine-frame .disco-stage {
	position: absolute;
	left: var( --machine-disc-cx );
	top: var( --machine-disc-cy );
	width: var( --machine-disc-d );
	height: auto;
	aspect-ratio: 1 / 1;
	max-width: none;
	transform: translate( -50%, -50% );
	background: none;
	box-shadow: none;
	border-radius: 50%;
}

/* Foto macchina assente (asset non ancora caricato): il frame torna quadrato e
   il disco riprende dimensione piena con lo sfondo a scacchi, come prima. Così
   il configuratore resta usabile finché il PNG non viene aggiunto. */
.disco-machine-frame.disco-machine-nophoto {
	position: relative;
	left: 0;
	top: 0;
	width: 100%;
	aspect-ratio: 1 / 1;
	transform: none;
}

.disco-machine-nophoto .disco-stage {
	left: 50%;
	top: 50%;
	width: 100%;
	background:
		repeating-conic-gradient( #f4f4f4 0% 25%, #fbfbfb 0% 50% ) 50% / 24px 24px;
	box-shadow: 0 6px 24px rgba( 0, 0, 0, 0.12 );
}

.disco-upload {
	margin-top: 16px;
}

.disco-stage {
	position: relative;
	width: 460px;
	max-width: 100%;
	aspect-ratio: 1 / 1;
	background:
		repeating-conic-gradient( #f4f4f4 0% 25%, #fbfbfb 0% 50% ) 50% / 24px 24px;
	border-radius: 50%;
	box-shadow: 0 6px 24px rgba( 0, 0, 0, 0.12 );
}

/* Fabric avvolge il canvas in .canvas-container con dimensioni fisse in px:
   lo forziamo a riempire lo stage (che è responsive), altrimenti su mobile
   sfora e copre il pulsante "Carica immagine". */
.disco-stage .canvas-container {
	position: absolute !important;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
}

.disco-stage canvas {
	border-radius: 50%;
	width: 100% !important;
	height: 100% !important;
}

.disco-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	background: rgba( 255, 255, 255, 0.82 );
	border-radius: 50%;
	z-index: 5;
	text-align: center;
	padding: 20px;
}

.disco-overlay-msg {
	font-weight: 600;
	color: var( --disco-text );
}

.disco-overlay-sub {
	font-size: 0.85em;
	opacity: 0.7;
	max-width: 80%;
	text-align: center;
}

.disco-spinner {
	width: 44px;
	height: 44px;
	border: 4px solid rgba( 0, 0, 0, 0.12 );
	border-top-color: var( --disco-accent );
	border-radius: 50%;
	animation: disco-spin 0.9s linear infinite;
}

@keyframes disco-spin {
	to { transform: rotate( 360deg ); }
}

.disco-size-hint {
	text-align: center;
	margin-top: 12px;
	font-size: 13px;
	color: #777;
}

.disco-controls {
	flex: 1 1 320px;
	min-width: 280px;
	text-align: center;
}

/* I titoli ora sono frasi intere ("Scegli la dimensione del testo"), quindi
   niente maiuscolo forzato: in ALL CAPS risulterebbero larghi e urlati.
   Piena opacità e peso 700 per renderli davvero in evidenza. */
.disco-section-title {
	font-weight: 700;
	margin: 1.5em 0 0.6em;
	font-size: 1.15em;
	line-height: 1.3;
	color: var( --disco-accent );
	text-transform: none;
	letter-spacing: 0;
	opacity: 1;
}

.disco-section-title:first-child {
	margin-top: 0;
}

.disco-input,
.disco-select {
	width: 100%;
	padding: 0.7em 0.9em;
	border: 1px solid var( --disco-border );
	border-radius: var( --disco-radius );
	font-size: 1em;
	box-sizing: border-box;
	background: #fff;
	text-align: center;
}

.disco-input:focus,
.disco-select:focus {
	outline: none;
	border-color: var( --disco-accent );
	box-shadow: 0 0 0 3px rgba( 204, 32, 144, 0.12 );
}

.disco-textarea {
	resize: vertical;
	min-height: 60px;
	line-height: 1.3;
	font-family: inherit;
}

.disco-range {
	width: 100%;
	accent-color: var( --disco-accent );
	cursor: pointer;
	margin: 4px 0;
}

.disco-hint {
	font-size: 0.8em;
	color: #888;
	margin-top: 4px;
	min-height: 16px;
}

.disco-hint-flash {
	color: #c0392b;
	font-weight: 600;
}

.disco-style-row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

/* Bottoni stile testo: angoli vivi (border-radius 0). */
.disco-toggle {
	width: 40px;
	height: 40px;
	border: 1px solid var( --disco-border );
	border-radius: 0;
	background: #fff;
	color: var( --disco-text );
	cursor: pointer;
	font-size: 17px;
	line-height: 1;
}

.disco-toggle.is-on {
	background: var( --disco-blue );
	border-color: var( --disco-blue );
	color: #fff;
}

/* Font: chip con anteprima nel rispettivo carattere. */
.disco-fontchips {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}

.disco-fontchip {
	padding: 0.5em 0.9em;
	border: 1px solid var( --disco-border );
	border-radius: var( --disco-radius );
	background: #fff;
	color: inherit;
	cursor: pointer;
	font-size: 1em;
	line-height: 1.2;
	transition: all 0.15s ease;
}

.disco-fontchip:hover:not( .is-on ) {
	border-color: var( --disco-accent );
}

.disco-fontchip.is-on {
	background: var( --disco-accent );
	border-color: var( --disco-accent );
	color: #fff;
}

/* Riga unica: allineamento + stile testo. */
.disco-tool-row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	flex-wrap: wrap;
}

.disco-tool-sep {
	width: 1px;
	height: 28px;
	background: var( --disco-border );
	margin: 0 4px;
}

/* Allineamento testo: 3 bottoni quadrati con icona. */
.disco-align {
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var( --disco-border );
	border-radius: 0;
	background: #fff;
	color: var( --disco-text );
	cursor: pointer;
	padding: 0;
}

.disco-align.is-on {
	background: var( --disco-blue );
	border-color: var( --disco-blue );
	color: #fff;
}

/* Riga unica: colore testo + colore sfondo. */
.disco-colors-row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 24px;
	flex-wrap: wrap;
}

.disco-color-cell {
	display: flex;
	align-items: center;
	gap: 8px;
}

.disco-color-label {
	font-size: 13px;
	color: #555;
}

.disco-color-row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	flex-wrap: wrap;
}

.disco-color {
	width: 48px;
	height: 36px;
	padding: 0;
	border: 1px solid var( --disco-border );
	border-radius: 8px;
	background: none;
	cursor: pointer;
}

.disco-swatch {
	width: 28px;
	height: 28px;
	border-radius: 0;
	border: 2px solid #fff;
	box-shadow: 0 0 0 1px var( --disco-border );
	cursor: pointer;
	padding: 0;
}

.disco-swatch:hover {
	transform: scale( 1.1 );
}

.disco-presets {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}

.disco-preset {
	padding: 0.55em 1.1em;
	border: 1px solid var( --disco-blue );
	border-radius: 0;
	background: var( --disco-blue );
	color: #fff;
	cursor: pointer;
	font-size: 0.85em;
	font-weight: 600;
	transition: all 0.15s ease;
}

.disco-preset:hover:not( :disabled ):not( .is-selected ) {
	filter: brightness( 1.12 );
}

.disco-preset.is-selected {
	background: var( --disco-accent );
	border-color: var( --disco-accent );
}

.disco-preset:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.disco-btn {
	display: inline-block;
	padding: 0.85em 1.4em;
	border: none;
	border-radius: var( --disco-radius );
	cursor: pointer;
	font-size: 1em;
	font-weight: 700;
	text-align: center;
	transition: filter 0.15s ease;
}

.disco-btn:hover:not( :disabled ) {
	filter: brightness( 1.08 );
}

.disco-btn-primary {
	width: 100%;
	margin-top: 1.5em;
	background: var( --disco-accent );
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

/* Fascia "Quantità + Aggiungi", replica di quella del negozio:
   a tutta larghezza sotto il configuratore, tutto su una riga. */
.disco-cart-row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin-top: 1.5em;
	flex-wrap: wrap;
	padding: 1.1em 1.3em;
	background: var( --e-global-color-63975cd, #f2f7ff ); /* azzurrino del tema. */
	border-radius: 0;
}

.disco-qty-label {
	color: var( --disco-blue );
	font-weight: 600;
}

.disco-qty {
	display: inline-flex;
	align-items: stretch;
	height: 38px;
	border: 1px solid var( --disco-border );
	background: #fff;
	overflow: hidden;
	border-radius: 0;
}

/* padding:0 esplicito: senza, i pulsanti ereditano quello globale del tema
   (button { padding: 16px 43px }) e il selettore diventa enorme. */
.disco-qty-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	min-width: 32px;
	padding: 0;
	border: none;
	background: #fff;
	color: #333;
	font-size: 20px; /* + e − più grandi. */
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0;
	cursor: pointer;
}

.disco-qty-btn:hover {
	background: #f2f2f2;
}

/* Selettore ad alta specificità (.disco-pers-app .disco-qty input.disco-qty-input)
   per battere le regole del tema anche quando usano input[type=text] o !important. */
.disco-pers-app .disco-qty input.disco-qty-input {
	width: 38px;
	min-width: 38px;
	height: auto;
	border: none;
	border-left: 1px solid var( --disco-border );
	border-right: 1px solid var( --disco-border );
	text-align: center;
	font-size: 15px; /* non-zero: evita testo invisibile. */
	line-height: 1;
	padding: 0 2px;
	margin: 0;
	background: #fff;
	opacity: 1;
	-webkit-appearance: none;
	appearance: none;
	/* Forza la visibilità del numero: alcuni temi rendono il testo degli input
	   trasparente (color/-webkit-text-fill-color) e la cifra sparisce. */
	color: #333 !important;
	-webkit-text-fill-color: #333 !important;
}

/* Bottone "Aggiungi": replica esatta di quello del negozio.
   Di base è blu (--accent) e in hover fa il "wipe" verso il rosa (--primary)
   da sinistra a destra in 0,5s. Meccanismo identico al tema: un'immagine di
   sfondo blu a background-size:100% (copre tutto) che in hover va a 0,
   scoprendo il background-color rosa sottostante.
   Uso le variabili del tema (--primary/--accent), disponibili sulla pagina,
   così il bottone resta identico anche se il negozio cambia i colori;
   i fallback valgono solo nell'anteprima fuori dal tema. */
.disco-add-to-cart {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	padding: 14px 20px;
	border: none;
	border-radius: 0;
	color: #fff;
	font-size: 12px;
	line-height: 20px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 2px;
	white-space: nowrap;
	cursor: pointer;
	background-color: var( --primary, #cb5599 );
	background-image: linear-gradient( 90deg, transparent 0%, var( --accent, #2c5698 ) 0% );
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: 200%;
	transition: all 0.5s ease;
}

.disco-add-to-cart:hover:not( :disabled ) {
	background-size: 0;
	color: #fff;
}

.disco-add-to-cart:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* "+" più grande del testo, come nel bottone di esempio.
   letter-spacing azzerato: quello del bottone (2px) sfalserebbe il segno. */
.disco-btn-plus {
	font-weight: 700;
	font-size: 1.8em;
	line-height: 1;
	letter-spacing: 0;
}

.disco-cart-icon {
	flex: 0 0 auto;
}

.disco-btn-primary:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.disco-btn-secondary {
	background: #f2f2f2;
	color: #333;
	border: 1px solid var( --disco-border );
}

.disco-btn-link {
	background: none;
	color: var( --disco-accent );
	text-decoration: underline;
	padding: 4px 8px;
	font-weight: 600;
}

.disco-error {
	margin-top: 12px;
	padding: 10px 12px;
	background: #fdecea;
	border: 1px solid #f5c6cb;
	border-radius: 8px;
	color: #a5342a;
	font-size: 14px;
}

@media ( max-width: 640px ) {
	.disco-wrap {
		gap: 20px;
	}
	.disco-canvas-col {
		flex-basis: 100%;
	}
	/* Mobile: la macchina viene "tagliata" (zoom sulla zona badge) così il disco
	   resta grande e usabile. Cambiano solo i knob del crop: il disco resta
	   incollato al badge perché è il frame a scalare/traslare. */
	.disco-pers-app {
		--machine-zoom: 3;      /* più zoom sul telefono per un disco grande */
		--machine-anchor-x: 50%; /* badge centrato in orizzontale */
		--machine-anchor-y: 42%; /* un filo sopra il centro: aria sopra la ghiera */
		--machine-view-ar: 1 / 1;
	}
}