/**
 * Moduli di contatto — allineamento al design system del tema.
 * v1.0
 *
 * ⚠️ PERCHE ESISTE QUESTO FILE.
 * Ninja Forms porta il proprio foglio di stile e non eredita nulla dal
 * tema: i campi uscivano in Roboto 16px, fondo #f7f7f7, bordo #c4c4c4,
 * dentro un sito in Lora su fondo crema con bordi #F3DCD1. Non era una
 * questione di gusto: era un componente mai collegato al sistema.
 *
 * Tutti i valori qui sotto vengono dai token che il tema gia espone
 * (--theme-color-input_*, --theme-color-text_*), misurati sui campi
 * nativi. Nessun colore inventato, tranne i due dichiarati sotto.
 *
 * ⚠️ DUE SCOSTAMENTI VOLUTI DAL TEMA, ENTRAMBI PER LEGGIBILITA:
 *
 * 1. Il tema colora il passaggio del mouse sui bottoni dei moduli con
 *    --theme-color-text_hover (#ffb6f8, rosa chiarissimo) e testo
 *    bianco: 1,5:1, illeggibile. Qui il passaggio usa il bordeaux di
 *    marca #5b0643, che sta comunque nei token del tema (text_link)
 *    e porta il contrasto a 11:1.
 *
 * 2. Il tema azzera il contorno di fuoco (outline: 0) lasciando solo
 *    un bordo azzurrino: chi naviga da tastiera non vede dove si trova.
 *    Qui il fuoco ha bordo bordeaux piu un alone.
 *
 * PRODUCT.md fissa WCAG AA come standard di lavoro e dice che gli
 * scostamenti si trattano come difetti reali: sono correzioni, non
 * preferenze.
 */

.ch-modulo {
	/* ---- token, presi dal tema ---- */
	--ch-bordo:        var(--theme-color-input_bd_color, #f3dcd1);
	--ch-bordo-hover:  var(--theme-color-input_bd_hover, #b8cad2);
	--ch-marca:        var(--theme-color-text_link, #5b0643);
	--ch-inchiostro:   var(--theme-color-input_dark, #101010);
	--ch-testo:        var(--theme-color-input_text, #787370);
	--ch-fondo:        var(--theme-color-bg_color, #fff);
	--ch-carattere:    var(--theme-font-p_font-family, Lora, Georgia, serif);

	/* ---- valori nostri ---- */
	--ch-errore:       #9d1c2e;   /* 7,1:1 su bianco */
	--ch-segnaposto:   #6f6864;   /* i segnaposto vanno letti, non intuiti */
	/*
	 * ☠️ Il grigio del tema (#787370) da 4,68:1 su bianco ma **4,33:1
	 * sul crema del sito**: sotto il minimo di 4,5. Questo e della
	 * stessa famiglia calda ma legge davvero: 6,81:1 e 6,30:1.
	 */
	--ch-tenue:        #5f5a56;
	--ch-raggio:       4px;
	--ch-altezza:      50px;      /* >= 44px di area di tocco, da PRODUCT.md */
	--ch-tempo:        180ms;
	--ch-curva:        cubic-bezier(0.22, 1, 0.36, 1);

	--ch-icona-errore: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.5 15 14H1L8 1.5z' fill='none' stroke='%23000' stroke-width='1.4' stroke-linejoin='round'/%3E%3Cpath d='M8 6v3.6' stroke='%23000' stroke-width='1.4' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='11.7' r='.85' fill='%23000'/%3E%3C/svg%3E");
}

/* ═══════════ struttura ═══════════ */

.ch-modulo .nf-form-content {
	padding: 0;
	max-width: none;
}

.ch-modulo .nf-field-container {
	margin-bottom: 22px;
}

/* ═══════════ etichette ═══════════ */

.ch-modulo .nf-field-label label {
	display: block;
	margin: 0 0 8px;
	font-family: var(--ch-carattere);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--ch-inchiostro);
	letter-spacing: 0;
	text-transform: none;
}

.ch-modulo .nf-field-label .ninja-forms-req-symbol {
	color: var(--ch-marca);
	font-weight: 400;
	margin-left: 2px;
}

/* ═══════════ campi ═══════════ */

.ch-modulo .nf-form-content input[type="text"],
.ch-modulo .nf-form-content input[type="email"],
.ch-modulo .nf-form-content input[type="tel"],
.ch-modulo .nf-form-content input[type="url"],
.ch-modulo .nf-form-content input[type="number"],
.ch-modulo .nf-form-content textarea,
.ch-modulo .nf-form-content select {
	width: 100%;
	min-height: var(--ch-altezza);
	padding: 13px 16px;
	box-sizing: border-box;
	font-family: var(--ch-carattere);
	font-size: 15px;
	line-height: 1.5;
	color: var(--ch-inchiostro);
	background-color: transparent;
	border: 1px solid var(--ch-bordo);
	border-radius: var(--ch-raggio);
	box-shadow: none;
	transition:
		border-color var(--ch-tempo) var(--ch-curva),
		box-shadow var(--ch-tempo) var(--ch-curva),
		background-color var(--ch-tempo) var(--ch-curva);
}

.ch-modulo .nf-form-content textarea {
	min-height: 160px;
	resize: vertical;
	line-height: 1.6;
}

.ch-modulo .nf-form-content ::placeholder {
	color: var(--ch-segnaposto);
	opacity: 1;
}

.ch-modulo .nf-form-content .nf-field-element input:hover:not(:focus):not([disabled]),
.ch-modulo .nf-form-content .nf-field-element textarea:hover:not(:focus):not([disabled]),
.ch-modulo .nf-form-content .nf-field-element select:hover:not(:focus):not([disabled]) {
	border-color: var(--ch-bordo-hover);
}

/*
 * ⚠️ Il fuoco vuole un livello di specificita in piu degli altri stati.
 * Ninja Forms dichiara `.nf-form-content input:not([type=...]):focus`
 * con bordo #919191: stessa specificita della mia regola, ma arriva
 * dopo nel foglio combinato, quindi vinceva lei. Misurato: al fuoco il
 * bordo restava grigio invece di diventare bordeaux.
 */
.ch-modulo .nf-form-content .nf-field-element input:focus,
.ch-modulo .nf-form-content .nf-field-element textarea:focus,
.ch-modulo .nf-form-content .nf-field-element select:focus {
	outline: none;
	border-color: var(--ch-marca);
	box-shadow: 0 0 0 3px rgba(91, 6, 67, 0.13);
}

/*
 * ⚠️ L'autoriempimento del browser dipinge il campo di giallo e
 * sostituisce il colore del testo. `background-color` viene ignorato:
 * l'unica leva e un'ombra interna spessa piu `-webkit-text-fill-color`.
 */
.ch-modulo input:-webkit-autofill,
.ch-modulo input:-webkit-autofill:hover,
.ch-modulo input:-webkit-autofill:focus,
.ch-modulo textarea:-webkit-autofill {
	-webkit-text-fill-color: var(--ch-inchiostro);
	-webkit-box-shadow: inset 0 0 0 1000px var(--ch-fondo);
	caret-color: var(--ch-inchiostro);
	transition: background-color 100000s ease-in-out 0s;
}

.ch-modulo [disabled],
.ch-modulo [readonly] {
	opacity: .55;
	cursor: not-allowed;
}

/* ═══════════ menu a tendina ═══════════ */

.ch-modulo .nf-form-content select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 44px;
	cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23787370' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
}

/* ═══════════ casella di spunta ═══════════ */

/*
 * ☠️ LA CASELLA VISIBILE NON E L'INPUT.
 * Ninja Forms nasconde l'input vero (`opacity: 0`) e disegna la casella
 * come pseudo-elementi dell'ETICHETTA: `label::after` e il quadrato
 * 18x18 e `label::before` e una spunta in FontAwesome, entrambi
 * posizionati a sinistra del testo. La classe `nf-checked-label`
 * compare sull'etichetta quando e spuntata.
 *
 * Vestire l'input — anche con `appearance: none` — non produce nulla di
 * visibile: si finisce per colorare un elemento trasparente mentre a
 * schermo resta la casella grigia del plugin. Verificato sul campo.
 *
 * Si veste quindi cio che si vede davvero, lasciando al plugin la sua
 * struttura: il click sull'etichetta, la navigazione da tastiera e la
 * lettura da parte degli screen reader restano quelli del browser.
 */

.ch-modulo .nf-form-content .checkbox-wrap label {
	font-family: var(--ch-carattere);
	font-size: 14px;
	line-height: 1.6;
	color: var(--ch-tenue);
	cursor: pointer;
}

/* il quadrato */
.ch-modulo .nf-form-content .checkbox-wrap label::after {
	width: 20px;
	height: 20px;
	left: -30px;
	top: 1px;
	background-color: transparent;
	border: 1px solid var(--ch-bordo);
	border-radius: 3px;
	transition: background-color var(--ch-tempo) var(--ch-curva),
	            border-color var(--ch-tempo) var(--ch-curva);
}

.ch-modulo .nf-form-content .checkbox-wrap label.nf-checked-label::after {
	background-color: var(--ch-marca);
	border-color: var(--ch-marca);
}

/* la spunta: bianca sul bordeaux, invisibile quando non e scelta */
.ch-modulo .nf-form-content .checkbox-wrap label::before {
	width: 20px;
	height: 22px;
	left: -30px;
	top: 1px;
	font-size: 13px;
	line-height: 22px;
	text-align: center;
	color: transparent;
	transition: color var(--ch-tempo) var(--ch-curva);
}

.ch-modulo .nf-form-content .checkbox-wrap label.nf-checked-label::before {
	color: #fff;
}

/*
 * Il fuoco da tastiera sulla casella disegnata: l'input vero e
 * invisibile, quindi il suo contorno non si vedrebbe. `:has()` porta
 * lo stato dell'input sull'elemento che lo rappresenta.
 */
.ch-modulo .nf-form-content .checkbox-wrap:has(input:focus-visible) label::after {
	outline: 2px solid var(--ch-marca);
	outline-offset: 2px;
}

.ch-modulo .nf-form-content .checkbox-wrap label:hover::after {
	border-color: var(--ch-bordo-hover);
}

.ch-modulo .nf-form-content .checkbox-wrap a {
	color: var(--ch-marca);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ═══════════ errori ═══════════ */

.ch-modulo .nf-form-content .nf-error .nf-field-element input,
.ch-modulo .nf-form-content .nf-error .nf-field-element textarea,
.ch-modulo .nf-form-content .nf-error .nf-field-element select,
.ch-modulo .nf-form-content .nf-field-element .ch-non-valido {
	border-color: var(--ch-errore);
}

/*
 * ☠️ IL BLOCCO ROSSO COL PUNTO ESCLAMATIVO.
 * Ninja Forms disegna, su ogni campo sbagliato, un riquadro rosso
 * pieno di 50x48 px appiccicato dentro il campo
 * (`.nf-field-element::after`). E fuori da qualunque sistema, copre
 * parte del testo scritto, e non aggiunge nulla: il bordo colorato e
 * il messaggio sotto dicono gia la stessa cosa, in modo leggibile.
 */
.ch-modulo .nf-form-content .nf-error .nf-field-element::after {
	display: none;
}

/*
 * ⚠️ L'UNICO !important DI QUESTO FOGLIO, E IL MOTIVO.
 * Il plugin dichiara `.nf-error .ninja-forms-field { border-color:
 * #e80000 !important }`. Contro un !important non esiste specificita
 * che basti: l'unica leva e rispondere con !important. Il colore e
 * lo stesso del messaggio d'errore, cosi il campo e la sua spiegazione
 * parlano con la stessa voce invece che con due rossi diversi.
 */
.ch-modulo .nf-form-content .nf-error .ninja-forms-field {
	border-color: var(--ch-errore) !important;
}

.ch-modulo .nf-form-content .nf-error .nf-field-element input:focus,
.ch-modulo .nf-form-content .nf-field-element .ch-non-valido:focus {
	box-shadow: 0 0 0 3px rgba(157, 28, 46, 0.14);
}

.ch-modulo .nf-error-msg,
.ch-modulo .ch-messaggio-errore {
	display: flex;
	align-items: flex-start;
	gap: 7px;
	margin-top: 7px;
	font-family: var(--ch-carattere);
	font-size: 13.5px;
	line-height: 1.45;
	color: var(--ch-errore);
	background: none;
	border: 0;
	padding: 0;
}

.ch-modulo .nf-error-msg::before,
.ch-modulo .ch-messaggio-errore::before {
	content: "";
	flex: 0 0 15px;
	width: 15px;
	height: 15px;
	margin-top: 2px;
	background-color: currentColor;
	-webkit-mask: var(--ch-icona-errore) center / contain no-repeat;
	mask: var(--ch-icona-errore) center / contain no-repeat;
}

/*
 * Riepilogo in cima. Su un modulo da ventitre campi, sapere subito
 * quali mancano evita di scorrere a caccia del bordo rosso.
 */
.ch-riepilogo-errori {
	margin: 0 0 22px;
	padding: 16px 18px;
	border: 1px solid var(--ch-errore, #9d1c2e);
	border-radius: 4px;
	background: rgba(157, 28, 46, 0.045);
	font-family: var(--ch-carattere, Lora, Georgia, serif);
	font-size: 14px;
	line-height: 1.55;
	color: var(--ch-errore, #9d1c2e);
}

.ch-riepilogo-errori p  { margin: 0 0 8px; font-weight: 700; }
.ch-riepilogo-errori ul { margin: 0; padding-left: 18px; }
.ch-riepilogo-errori li { margin: 2px 0; }
.ch-riepilogo-errori a  { color: inherit; text-underline-offset: 2px; }

/* ═══════════ campo valido ═══════════ */

.ch-modulo .ch-valido {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='11' viewBox='0 0 14 11'%3E%3Cpath d='M1 5.6 5 9.6 13 1.4' fill='none' stroke='%235b0643' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	padding-right: 44px;
}

/* ═══════════ bottone d'invio ═══════════ */

.ch-modulo .nf-form-content .submit-wrap .nf-field-element input[type="submit"],
.ch-modulo .nf-form-content .submit-wrap .nf-field-element input[type="button"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: auto;
	min-height: 48px;
	padding: 13px 30px 11px;
	font-family: var(--ch-carattere);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.3;
	text-transform: uppercase;
	letter-spacing: .02em;
	color: #fff;
	/*
	 * ⚠️ Bordeaux, non nero. Il colore dell'azione principale su questo
	 * sito e il bordeaux: lo usano la chiamata in testata, l'accesso e
	 * la registrazione. Un bottone d'invio nero sarebbe lo stesso
	 * comando vestito in due modi diversi in due pagine.
	 */
	background-color: var(--ch-marca);
	border: 1px solid var(--ch-marca);
	border-radius: 0;
	cursor: pointer;
	transition: background-color var(--ch-tempo) var(--ch-curva),
	            border-color var(--ch-tempo) var(--ch-curva),
	            transform var(--ch-tempo) var(--ch-curva);
}

.ch-modulo .nf-form-content .submit-wrap .nf-field-element input[type="submit"]:hover,
.ch-modulo .nf-form-content .submit-wrap .nf-field-element input[type="button"]:hover {
	background-color: var(--theme-color-text_link_blend, #3f0430);
	border-color: var(--theme-color-text_link_blend, #3f0430);
	color: #fff;
}

.ch-modulo .nf-form-content .submit-wrap .nf-field-element input[type="submit"]:focus-visible {
	outline: 2px solid var(--ch-marca);
	outline-offset: 3px;
}

.ch-modulo .nf-form-content .submit-wrap .nf-field-element input[type="submit"]:active {
	transform: translateY(1px);
}

/*
 * Invio in corso: il bottone dice cosa sta succedendo invece di
 * restare identico mentre la richiesta viaggia.
 */
.ch-modulo .submit-wrap.ch-in-invio input[type="submit"] {
	pointer-events: none;
	opacity: .72;
}

.ch-modulo .submit-wrap.ch-in-invio .nf-field-element::after {
	content: "";
	display: inline-block;
	width: 15px;
	height: 15px;
	margin-left: 12px;
	vertical-align: -2px;
	border: 2px solid rgba(91, 6, 67, .25);
	border-top-color: var(--ch-marca);
	border-radius: 50%;
	animation: ch-gira .7s linear infinite;
}

@keyframes ch-gira { to { transform: rotate(360deg); } }

/* ═══════════ conferma d'invio ═══════════ */

.ch-modulo .nf-response-msg {
	padding: 18px 20px;
	border: 1px solid var(--ch-bordo);
	border-radius: var(--ch-raggio);
	background: var(--theme-color-alter_bg_color, #fff4ee);
	font-family: var(--ch-carattere);
	font-size: 15px;
	line-height: 1.6;
	color: var(--ch-inchiostro);
}

/* ═══════════ telefono con bandiera ═══════════ */

.ch-modulo .iti { width: 100%; display: block; }
.ch-modulo .iti input[type="tel"] { width: 100%; }

.ch-modulo .iti--allow-dropdown .iti__country-container { padding: 1px; }

.ch-modulo .iti__selected-country {
	border-radius: var(--ch-raggio) 0 0 var(--ch-raggio);
	transition: background-color var(--ch-tempo) var(--ch-curva);
}

.ch-modulo .iti__selected-country:hover,
.ch-modulo .iti__selected-country[aria-expanded="true"] {
	background-color: rgba(91, 6, 67, .06);
}

.ch-modulo .iti__selected-country-primary:focus-visible {
	outline: 2px solid var(--ch-marca);
	outline-offset: -2px;
}

.ch-modulo .iti__dropdown-content {
	font-family: var(--ch-carattere);
	font-size: 14px;
	border: 1px solid var(--ch-bordo);
	border-radius: var(--ch-raggio);
	box-shadow: 0 12px 30px rgba(16, 16, 16, .12);
	background: var(--ch-fondo);
}

.ch-modulo .iti__search-input {
	font-family: var(--ch-carattere);
	font-size: 14px;
	padding: 11px 14px;
	border-bottom: 1px solid var(--ch-bordo);
	color: var(--ch-inchiostro);
}

.ch-modulo .iti__country.iti__highlight,
.ch-modulo .iti__country:hover {
	background-color: rgba(91, 6, 67, .07);
}

.ch-modulo .iti__country-name { color: var(--ch-inchiostro); }
.ch-modulo .iti__dial-code    { color: var(--ch-testo); }

/* ═══════════ schermi stretti ═══════════ */

@media (max-width: 600px) {
	.ch-modulo .nf-field-container { margin-bottom: 18px; }

	/*
	 * 16px impedisce a iOS di ingrandire la pagina appena si tocca un
	 * campo. ⚠️ Serve la stessa specificita delle regole di base, o
	 * queste perdono contro di esse e il valore non arriva mai:
	 * verificato a 500px, il testo restava a 15px.
	 */
	.ch-modulo .nf-form-content input[type="text"],
	.ch-modulo .nf-form-content input[type="email"],
	.ch-modulo .nf-form-content input[type="tel"],
	.ch-modulo .nf-form-content input[type="number"],
	.ch-modulo .nf-form-content select,
	.ch-modulo .nf-form-content textarea {
		font-size: 16px;
	}

	.ch-modulo .nf-form-content .submit-wrap .nf-field-element input[type="submit"] {
		width: 100%;
	}
}

/* ═══════════ movimento ridotto ═══════════ */

@media (prefers-reduced-motion: reduce) {
	.ch-modulo *,
	.ch-modulo *::before,
	.ch-modulo *::after {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
	}
	.ch-modulo .submit-wrap.ch-in-invio .nf-field-element::after {
		animation: none;
	}
}

/*
 * ☠️ IL SELETTORE DEL PAESE E UN <button>, E IL TEMA LI VESTE TUTTI.
 * Il tema applica lo stile dei bottoni grandi a qualunque `button`
 * dentro un modulo: il selettore della bandiera usciva in Lora 18px,
 * bianco su bordeaux, con padding 18px 57px, dentro il campo. Va
 * riportato a un comando discreto.
 */
.ch-modulo .nf-form-content .iti__selected-country,
.ch-modulo .nf-form-content .iti button {
	min-height: 0;
	/* ⚠️ `height: auto` qui spegne il centraggio: il contenitore della
	   bandiera e alto quanto il campo, il bottone dentro collassava a
	   22px e restava incollato in alto, con prefisso e testo scritto su
	   due linee diverse (misurato: 12,7px di scarto fra i due centri).
	   L'altezza piena e cio che il centraggio della libreria usa. */
	height: 100%;
	display: flex;
	align-items: center;
	padding: 0 10px;
	font-family: var(--ch-carattere);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0;
	text-transform: none;
	color: var(--ch-inchiostro);
	background-color: transparent;
	background-image: none;
	border: 0;
	border-radius: var(--ch-raggio) 0 0 var(--ch-raggio);
	box-shadow: none;
}

.ch-modulo .nf-form-content .iti__selected-country:hover,
.ch-modulo .nf-form-content .iti__selected-country[aria-expanded="true"] {
	background-color: rgba(91, 6, 67, .06);
	color: var(--ch-inchiostro);
}

/* il campo lascia posto alla bandiera senza che il testo ci finisca sotto */
.ch-modulo .nf-form-content .iti--allow-dropdown input[type="tel"] {
	padding-left: 92px;
}

/* la voce dell'elenco paesi non e un bottone del tema */
.ch-modulo .nf-form-content .iti__country {
	padding: 9px 14px;
	text-transform: none;
	letter-spacing: 0;
}

/*
 * ⚠️ IL BOTTONE DISABILITATO.
 * Finche ci sono errori Ninja Forms disabilita l'invio — comportamento
 * giusto — ma il tema colora ogni bottone disabilitato di grigio
 * (`--theme-color-text_light`), e usciva un rettangolo grigio chiaro
 * che non somiglia a nulla del resto della pagina. Meglio lo stesso
 * bottone, spento: si capisce che e lo stesso comando, non un altro
 * elemento.
 */
.ch-modulo .nf-form-content .submit-wrap .nf-field-element input[type="submit"][disabled],
.ch-modulo .nf-form-content .submit-wrap .nf-field-element input[type="submit"]:disabled {
	background-color: var(--ch-marca);
	border-color: var(--ch-marca);
	color: #fff;
	opacity: .38;
	cursor: not-allowed;
}

/*
 * ☠️ IL MENU A TENDINA STA DENTRO UN CONTENITORE DEL PLUGIN.
 * Ninja Forms avvolge ogni `select` in un `div.select_container` e
 * dichiara `.nf-form-content .list-select-wrap > div select { border: 0;
 * background-image: initial }` — che azzera sia il bordo sia la freccia
 * disegnata. Quella regola ha specificita (0,2,2): una regola
 * `.ch-modulo .nf-form-content select` (0,2,1) perde, e il menu resta
 * grigio e senza freccia. Serve salire di un livello di classe.
 */
/*
 * Il contenitore del menu porta il grigio #f7f7f7 del plugin con
 * specificita (0,3,1): serve un livello in piu perche il menu abbia lo
 * stesso fondo trasparente dei campi di testo, invece di sembrare un
 * elemento di un altro sistema.
 */
.ch-modulo .nf-form-content .listselect-wrap .select_container,
.ch-modulo .nf-form-content .list-select-wrap .select_container,
.ch-modulo .nf-form-content .select_container {
	padding: 0;
	border: 0;
	background-color: transparent;
	background-image: none;
}

.ch-modulo .nf-form-content .listselect-wrap .nf-field-element div {
	padding: 0;
}

/*
 * ☠️ IL MENU NON OCCUPA SPAZIO NEL FLUSSO.
 * Ninja Forms posiziona `.select_container` in ASSOLUTO: l'altezza del
 * campo veniva solo dal padding che il plugin mette sul div interno.
 * Azzerando quel padding — necessario per non avere un doppio riquadro
 * — il contenitore restava alto ZERO e il menu finiva sopra l'etichetta
 * del campo successivo, che spariva sotto di esso. Verificato:
 * l'etichetta «Nome» era dipinta a y=199, dentro il riquadro del menu.
 *
 * L'altezza va quindi restituita all'elemento che sta nel flusso.
 */
.ch-modulo .nf-form-content .listselect-wrap .nf-field-element,
.ch-modulo .nf-form-content .list-select-wrap .nf-field-element {
	min-height: var(--ch-altezza);
}

.ch-modulo .nf-form-content .select_container select {
	width: 100%;
	min-height: var(--ch-altezza);
	padding: 13px 44px 13px 16px;
	box-sizing: border-box;
	font-family: var(--ch-carattere);
	font-size: 15px;
	line-height: 1.5;
	color: var(--ch-inchiostro);
	background-color: transparent;
	/*
	 * ⚠️ SECONDO E ULTIMO !important DI QUESTO FOGLIO.
	 * Il TEMA dichiara `.select_container select { background:
	 * var(--theme-color-input_bg_color) !important }`. E la scorciatoia
	 * `background`, che azzera anche `background-image`: la freccia
	 * spariva qualunque specificita avesse la mia regola. Contro un
	 * !important sulla scorciatoia l'unica risposta e un !important
	 * sulla proprieta singola.
	 */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23787370' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 16px center !important;
	border: 1px solid var(--ch-bordo);
	border-radius: var(--ch-raggio);
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	transition: border-color var(--ch-tempo) var(--ch-curva),
	            box-shadow var(--ch-tempo) var(--ch-curva);
}

.ch-modulo .nf-form-content .select_container select:hover:not(:focus) {
	border-color: var(--ch-bordo-hover);
}

.ch-modulo .nf-form-content .select_container select:focus {
	outline: none;
	border-color: var(--ch-marca);
	box-shadow: 0 0 0 3px rgba(91, 6, 67, 0.13);
}

@media (max-width: 600px) {
	.ch-modulo .nf-form-content .select_container select { font-size: 16px; }
}

/* ═══════════ elenco a tendina conforme al tema ═══════════ */

/*
 * ☠️ LA LISTA APERTA DI UN <select> NON SI PUO COLORARE.
 * La disegna il sistema operativo: su Windows la riga evidenziata
 * resta azzurra e le voci prendono colori che non c'entrano nulla col
 * sito, qualunque cosa dica il CSS. L'unico modo di averla nei colori
 * del tema e disegnarla.
 *
 * Il `select` vero resta nel documento come sorgente del dato — solo
 * nascosto alla vista — quindi Ninja Forms continua a leggerlo e, se
 * il JavaScript non parte, il campo funziona lo stesso.
 */

.ch-modulo .nf-form-content .ch-tendina {
	position: relative;
	z-index: 2;
	width: 100%;
}

/*
 * ☠️ IL CONTENITORE DEL PLUGIN RUBA I CLICK.
 * `.select_container` e `position: absolute` con `z-index: 1` e occupa
 * ESATTAMENTE lo stesso riquadro del comando (misurato: 518x50 a y=426,
 * identici): resta quindi sopra e intercetta ogni click, mentre il
 * menu sembra semplicemente non rispondere. Il difetto e invisibile a
 * occhio — si vede solo chiedendo al browser CHI riceve il click in
 * quel punto (`document.elementFromPoint`).
 *
 * Una volta costruito l'elenco nostro quel contenitore e vuoto — il
 * `select` vero e stato spostato dentro il guscio — e va tolto dal
 * flusso. Il `:has()` limita la regola ai soli campi dove l'elenco e
 * stato costruito davvero: su schermi tattili, dove si lascia la lista
 * nativa, il contenitore resta intatto.
 */
.ch-modulo .nf-form-content .nf-field-element:has(> .ch-tendina) .select_container {
	display: none;
}

/* il select vero: fuori dalla vista, ma ancora nel documento */
.ch-modulo .nf-form-content select.ch-tendina-nascosto {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* il comando: identico a un campo di testo, con la freccia */
.ch-modulo .nf-form-content .ch-tendina-comando {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	min-height: var(--ch-altezza);
	padding: 13px 16px;
	box-sizing: border-box;
	font-family: var(--ch-carattere);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0;
	text-align: left;
	text-transform: none;
	color: var(--ch-inchiostro);
	background-color: transparent;
	border: 1px solid var(--ch-bordo);
	border-radius: var(--ch-raggio);
	cursor: pointer;
	transition: border-color var(--ch-tempo) var(--ch-curva),
	            box-shadow var(--ch-tempo) var(--ch-curva);
}

.ch-modulo .nf-form-content .ch-tendina-comando::after {
	content: "";
	flex: 0 0 12px;
	width: 12px;
	height: 8px;
	background-color: var(--ch-testo);
	-webkit-mask: var(--ch-freccia) center / contain no-repeat;
	mask: var(--ch-freccia) center / contain no-repeat;
	transition: transform var(--ch-tempo) var(--ch-curva);
}

.ch-modulo {
	--ch-freccia: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.ch-modulo .nf-form-content .ch-tendina-comando[aria-expanded="true"]::after {
	transform: rotate(180deg);
}

.ch-modulo .nf-form-content .ch-tendina-comando:hover {
	border-color: var(--ch-bordo-hover);
}

.ch-modulo .nf-form-content .ch-tendina-comando:focus-visible,
.ch-modulo .nf-form-content .ch-tendina-comando[aria-expanded="true"] {
	outline: none;
	border-color: var(--ch-marca);
	box-shadow: 0 0 0 3px rgba(91, 6, 67, 0.13);
}

/* la lista */
.ch-modulo .nf-form-content .ch-tendina-lista {
	position: absolute;
	z-index: 20;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	max-height: 264px;
	margin: 0;
	padding: 5px;
	overflow-y: auto;
	list-style: none;
	background-color: var(--ch-fondo);
	border: 1px solid var(--ch-bordo);
	border-radius: var(--ch-raggio);
	box-shadow: 0 14px 34px rgba(16, 16, 16, .13);
}

.ch-modulo .nf-form-content .ch-tendina-lista[hidden] {
	display: none;
}

.ch-modulo .nf-form-content .ch-tendina-voce {
	margin: 0;
	padding: 10px 13px;
	font-family: var(--ch-carattere);
	font-size: 15px;
	line-height: 1.45;
	color: var(--ch-inchiostro);
	border-radius: 3px;
	cursor: pointer;
	transition: background-color 90ms var(--ch-curva);
}

/* la voce sotto il puntatore o raggiunta con le frecce */
.ch-modulo .nf-form-content .ch-tendina-voce.ch-evidenziata {
	background-color: rgba(91, 6, 67, .07);
}

/* la voce gia scelta: bordeaux pieno, come la casella di spunta */
.ch-modulo .nf-form-content .ch-tendina-voce[aria-selected="true"] {
	color: #fff;
	background-color: var(--ch-marca);
}

.ch-modulo .nf-form-content .ch-tendina-voce[aria-disabled="true"] {
	color: var(--ch-testo);
	opacity: .5;
	cursor: not-allowed;
}

/* campo in errore: il comando si colora come gli altri campi */
.ch-modulo .nf-form-content .nf-error .ch-tendina-comando {
	border-color: var(--ch-errore);
}

@media (max-width: 600px) {
	.ch-modulo .nf-form-content .ch-tendina-comando,
	.ch-modulo .nf-form-content .ch-tendina-voce {
		font-size: 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ch-modulo .nf-form-content .ch-tendina-comando::after {
		transition: none;
	}
}

/* ═══════════ moduli di WooCommerce: accesso, registrazione, cassa ═══════════ */

/*
 * Stessa specifica dei moduli di contatto, applicata ai moduli che
 * WooCommerce disegna da se: accesso, registrazione privati,
 * registrazione professionisti, dati di fatturazione.
 *
 * ☠️ IL GRIGIO DEL TEMA E SOTTO LA SOGLIA DI LEGGIBILITA.
 * `--theme-color-text` (#787370) da 4,68:1 su bianco e **4,33:1 sul
 * fondo crema** del sito: sotto il minimo di 4,5 richiesto per il testo
 * normale. Non e una preferenza — PRODUCT.md fissa WCAG AA come
 * standard di lavoro e dice che gli scostamenti sono difetti reali.
 * Qui i testi di servizio (informativa privacy, note) usano #5f5a56:
 * stessa famiglia calda, 6,81:1 su bianco e 6,30:1 su crema.
 */

.woocommerce-form,
.woocommerce form.checkout,
.woocommerce-form-register,
.woocommerce-form-login {
	--ch-bordo:       var(--theme-color-input_bd_color, #f3dcd1);
	--ch-bordo-hover: var(--theme-color-input_bd_hover, #b8cad2);
	--ch-marca:       var(--theme-color-text_link, #5b0643);
	--ch-inchiostro:  var(--theme-color-input_dark, #101010);
	--ch-carattere:   var(--theme-font-p_font-family, Lora, Georgia, serif);
	--ch-tenue:       #5f5a56;
	--ch-raggio:      4px;
	--ch-altezza:     50px;
	--ch-tempo:       180ms;
	--ch-curva:       cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---- etichette ---- */

.woocommerce-form .woocommerce-form__label,
.woocommerce-form .form-row label,
.woocommerce-form label,
.woocommerce form .form-row label {
	display: block;
	margin: 0 0 8px;
	font-family: var(--ch-carattere);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--ch-inchiostro);
	text-align: left;
	text-transform: none;
}

.woocommerce-form .required,
.woocommerce form .required {
	color: var(--ch-marca);
	text-decoration: none;
	border: 0;
}

/* ---- campi ---- */

.woocommerce-form input.woocommerce-Input,
.woocommerce-form input.input-text,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
	width: 100%;
	min-height: var(--ch-altezza);
	padding: 13px 16px;
	box-sizing: border-box;
	font-family: var(--ch-carattere);
	font-size: 15px;
	line-height: 1.5;
	color: var(--ch-inchiostro);
	background-color: transparent;
	border: 1px solid var(--ch-bordo);
	border-radius: var(--ch-raggio);
	box-shadow: none;
	transition: border-color var(--ch-tempo) var(--ch-curva),
	            box-shadow var(--ch-tempo) var(--ch-curva);
}

.woocommerce-form input.woocommerce-Input:hover:not(:focus),
.woocommerce form .form-row input.input-text:hover:not(:focus) {
	border-color: var(--ch-bordo-hover);
}

.woocommerce-form input.woocommerce-Input:focus,
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
	outline: none;
	border-color: var(--ch-marca);
	box-shadow: 0 0 0 3px rgba(91, 6, 67, 0.13);
}

/* l'autoriempimento non deve ridipingere il campo di giallo */
.woocommerce-form input:-webkit-autofill,
.woocommerce form input:-webkit-autofill {
	-webkit-text-fill-color: var(--ch-inchiostro);
	-webkit-box-shadow: inset 0 0 0 1000px #fff;
	caret-color: var(--ch-inchiostro);
	transition: background-color 100000s ease-in-out 0s;
}

.woocommerce-form .form-row,
.woocommerce form .form-row {
	margin-bottom: 22px;
	padding: 0;
}

/* ---- l'occhio che mostra la password ---- */

.woocommerce-form .password-input,
.woocommerce form .password-input {
	display: block;
	position: relative;
	width: 100%;
}

.woocommerce-form .show-password-input,
.woocommerce form .show-password-input {
	top: 50%;
	right: 14px;
	transform: translateY(-50%);
	color: var(--ch-tenue);
}

/* ---- testi di servizio ---- */

.woocommerce-privacy-policy-text,
.woocommerce-privacy-policy-text p,
.woocommerce-form-register > p:not(.form-row),
.woocommerce-form-login .lost_password a,
.woocommerce form .woocommerce-form__label-for-checkbox span {
	font-family: var(--ch-carattere);
	font-size: 14px;
	line-height: 1.6;
	color: var(--ch-tenue);
}

.woocommerce-privacy-policy-text a,
.woocommerce-form-login .lost_password a {
	color: var(--ch-marca);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ---- caselle di spunta ---- */

.woocommerce-form .woocommerce-form__label-for-checkbox,
.woocommerce form .woocommerce-form__label-for-checkbox {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	font-family: var(--ch-carattere);
	font-size: 14px;
	line-height: 1.55;
	color: var(--ch-tenue);
	cursor: pointer;
}

/*
 * ☠️ IL TEMA NASCONDE L'INPUT E DISEGNA UNA CASELLA CHE NON SI SPUNTA.
 * `.woocommerce-form__input-checkbox` e a `display: none` e al suo
 * posto compare un `label::before` di 24x24 con bordo blu scuro — che
 * pero **non cambia fra spenta e accesa**: misurati i due stati, sono
 * identici. Chi la clicca non riceve nessuna conferma visiva.
 *
 * Si spegne quella e si veste l'input vero: cosi il segno di spunta
 * c'e, il fuoco da tastiera si vede, e il controllo resta quello del
 * browser invece di un disegno che finge.
 */
/*
 * ☠️ E UNA TERZA CASELLA, DISEGNATA DA AUTOMATEWOO.
 * Il consenso alle comunicazioni passa da AutomateWoo, che disegna a
 * sua volta una spunta come pseudo-elemento del proprio `span`. Con la
 * casella vera resa visibile ne comparivano due: la nostra bordeaux e
 * un segno nero accanto. Tre plugin che disegnano la stessa casella,
 * e nessuno sa degli altri.
 */
/*
 * ☠️ LA REGOLA PRECEDENTE ERA TROPPO STRETTA.
 * Copriva solo la spunta disegnata da AutomateWoo. Ma il segno viene
 * disegnato sullo `span` dentro l'etichetta da piu di un componente:
 * alla cassa ricompariva accanto a «Creare un account?», dove lo span
 * non ha quella classe. Misurato: uno pseudo-elemento di 4x20 px con
 * due bordi, cioe la solita spunta fatta a mano.
 *
 * Si spengono quindi su TUTTE le etichette con spunta, non su una in
 * particolare: la casella vera e gia vestita e disegna il suo segno.
 */
.woocommerce-form .automatewoo-optin__checkbox-text::before,
.woocommerce-form .automatewoo-optin__checkbox-text::after,
.woocommerce form .automatewoo-optin__checkbox-text::before,
.woocommerce form .automatewoo-optin__checkbox-text::after,
.woocommerce-form .woocommerce-form__label-for-checkbox span::before,
.woocommerce-form .woocommerce-form__label-for-checkbox span::after,
.woocommerce form .woocommerce-form__label-for-checkbox span::before,
.woocommerce form .woocommerce-form__label-for-checkbox span::after,
.woocommerce form .form-row label.checkbox span::before,
.woocommerce form .form-row label.checkbox span::after {
	display: none !important;
	content: none !important;
}

/*
 * ⚠️ Il tema disegna DUE pseudo-elementi sull'etichetta: il quadrato
 * (`::before`) e un segno di spunta (`::after`). Nascondendo solo il
 * primo restava una spunta nera a fianco della nostra.
 */
.woocommerce-form .woocommerce-form__label-for-checkbox::before,
.woocommerce form .woocommerce-form__label-for-checkbox::before,
.woocommerce-form .woocommerce-form__label-for-checkbox::after,
.woocommerce form .woocommerce-form__label-for-checkbox::after {
	display: none !important;
	content: none !important;
}

.woocommerce-form label.woocommerce-form__label-for-checkbox input[type="checkbox"],
.woocommerce form label.woocommerce-form__label-for-checkbox input[type="checkbox"],
.woocommerce-form input[type="checkbox"],
.woocommerce form input[type="checkbox"] {
	/*
	 * ⚠️ Terzo e ultimo !important del foglio, e come gli altri e una
	 * risposta: il tema dichiara
	 * `.woocommerce-form__input-checkbox { display: none !important }`.
	 * Contro un !important nessuna specificita basta.
	 */
	/*
	 * ⚠️ `inline-grid`, non `grid`: un `grid` e un blocco e manda il
	 * testo dell'etichetta a capo. Verificato: «Ricordami» finiva sotto
	 * la casella invece che accanto.
	 */
	display: inline-grid !important;
	appearance: none;
	-webkit-appearance: none;
	display: grid;
	place-content: center;
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
	min-height: 0;
	margin: 1px 0 0;
	padding: 0;
	border: 1px solid var(--ch-bordo);
	border-radius: 3px;
	background-color: transparent;
	cursor: pointer;
	transition: background-color var(--ch-tempo) var(--ch-curva),
	            border-color var(--ch-tempo) var(--ch-curva);
}

.woocommerce-form input[type="checkbox"]::before,
.woocommerce form input[type="checkbox"]::before {
	content: "";
	width: 9px;
	height: 5px;
	margin-top: -3px;
	border-left: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: rotate(-45deg) scale(.5);
	opacity: 0;
	transition: opacity var(--ch-tempo) var(--ch-curva),
	            transform var(--ch-tempo) var(--ch-curva);
}

/*
 * ☠️ LO STATO SPUNTATO PERDEVA CONTRO LO STATO DI BASE.
 * La regola di base include il pezzo `label.woocommerce-form__label-for-checkbox`
 * e arriva a specificita (0,3,3); quella dello stato spuntato si
 * fermava a `.woocommerce form input[type="checkbox"]:checked`, cioe
 * (0,3,2). Il trasparente vinceva sul bordeaux: la casella commutava
 * davvero — il click arrivava, il valore cambiava — ma **restava
 * identica a vedersi**, col segno bianco su fondo trasparente.
 *
 * Un difetto che a occhio sembra «la casella non funziona», mentre
 * funzionava benissimo: non lo diceva.
 */
.woocommerce-form label.woocommerce-form__label-for-checkbox input[type="checkbox"]:checked,
.woocommerce form label.woocommerce-form__label-for-checkbox input[type="checkbox"]:checked,
.woocommerce h3#ship-to-different-address label input[type="checkbox"]:checked,
.woocommerce-form input[type="checkbox"]:checked,
.woocommerce form input[type="checkbox"]:checked {
	background-color: var(--ch-marca, #5b0643);
	border-color: var(--ch-marca, #5b0643);
}

.woocommerce-form label.woocommerce-form__label-for-checkbox input[type="checkbox"]:checked::before,
.woocommerce form label.woocommerce-form__label-for-checkbox input[type="checkbox"]:checked::before,
.woocommerce h3#ship-to-different-address label input[type="checkbox"]:checked::before,
.woocommerce-form input[type="checkbox"]:checked::before,
.woocommerce form input[type="checkbox"]:checked::before {
	opacity: 1;
	transform: rotate(-45deg) scale(1);
}

.woocommerce-form input[type="checkbox"]:focus-visible,
.woocommerce form input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--ch-marca);
	outline-offset: 2px;
}

/* ---- bottoni ---- */

/*
 * Il bordeaux e gia il colore dell'azione principale su questo sito
 * (testata, accesso, registrazione): qui si allineano solo misura,
 * carattere e comportamento al resto dei moduli.
 */
.woocommerce-form button.button,
.woocommerce-form input.button,
.woocommerce form button.button {
	min-height: 48px;
	padding: 13px 30px 11px;
	font-family: var(--ch-carattere);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: #fff;
	background-color: var(--ch-marca);
	border: 1px solid var(--ch-marca);
	border-radius: 0;
	cursor: pointer;
	transition: background-color var(--ch-tempo) var(--ch-curva),
	            border-color var(--ch-tempo) var(--ch-curva),
	            transform var(--ch-tempo) var(--ch-curva);
}

.woocommerce-form button.button:hover,
.woocommerce-form input.button:hover,
.woocommerce form button.button:hover {
	background-color: var(--theme-color-text_link_blend, #3f0430);
	border-color: var(--theme-color-text_link_blend, #3f0430);
	color: #fff;
}

.woocommerce-form button.button:focus-visible,
.woocommerce-form input.button:focus-visible {
	outline: 2px solid var(--ch-marca);
	outline-offset: 3px;
}

.woocommerce-form button.button:active {
	transform: translateY(1px);
}

@media (max-width: 600px) {
	.woocommerce-form input.woocommerce-Input,
	.woocommerce form .form-row input.input-text,
	.woocommerce form .form-row select,
	.woocommerce form .form-row textarea {
		font-size: 16px;
	}
	.woocommerce-form button.button,
	.woocommerce-form input.button {
		width: 100%;
	}
}

/* ═══════════ campo telefono della cassa ═══════════ */

/*
 * Il selettore del paese e un <button>, e il tema veste ogni bottone
 * dei moduli come una chiamata all'azione: senza queste righe esce in
 * Lora 18px bianco su bordeaux, dentro il campo. Stessa correzione gia
 * fatta per i moduli di contatto.
 */
.woocommerce form .form-row .iti {
	display: block;
	width: 100%;
}

.woocommerce form .form-row .iti__selected-country,
.woocommerce form .form-row .iti button {
	min-height: 0;
	height: 100%;
	display: flex;
	align-items: center;
	padding: 0 10px;
	font-family: var(--theme-font-p_font-family, Lora, Georgia, serif);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0;
	text-transform: none;
	color: var(--theme-color-input_dark, #101010);
	background-color: transparent;
	background-image: none;
	border: 0;
	border-radius: 4px 0 0 4px;
	box-shadow: none;
}

.woocommerce form .form-row .iti__selected-country:hover,
.woocommerce form .form-row .iti__selected-country[aria-expanded="true"] {
	background-color: rgba(91, 6, 67, .06);
	color: var(--theme-color-input_dark, #101010);
}

.woocommerce form .form-row .iti--allow-dropdown input[type="tel"] {
	padding-left: 92px;
}

.woocommerce form .form-row .iti__dropdown-content {
	font-family: var(--theme-font-p_font-family, Lora, Georgia, serif);
	font-size: 14px;
	border: 1px solid var(--theme-color-input_bd_color, #f3dcd1);
	border-radius: 4px;
	box-shadow: 0 12px 30px rgba(16, 16, 16, .12);
	background: #fff;
}

.woocommerce form .form-row .iti__search-input {
	font-family: var(--theme-font-p_font-family, Lora, Georgia, serif);
	font-size: 14px;
	padding: 11px 14px;
	border-bottom: 1px solid var(--theme-color-input_bd_color, #f3dcd1);
}

.woocommerce form .form-row .iti__country.iti__highlight,
.woocommerce form .form-row .iti__country:hover {
	background-color: rgba(91, 6, 67, .07);
}

.woocommerce form .form-row .iti__country {
	padding: 9px 14px;
	text-transform: none;
	letter-spacing: 0;
}

/* il messaggio sul numero non valido, con la veste degli altri */
.ch-tel-errore {
	display: block;
	margin-top: 6px;
	font-family: var(--theme-font-p_font-family, Lora, Georgia, serif);
	font-size: 13px;
	line-height: 1.4;
	color: #9d1c2e;
}

/*
 * ☠️ «SPEDIRE A UN INDIRIZZO DIVERSO?» AVEVA LA CASELLA INVISIBILE.
 * Il tema dichiara `h3#ship-to-different-address label .input-checkbox,
 * input[type="checkbox"] { position: absolute }`: la casella finiva
 * SOTTO il testo dell'etichetta, che gliela copriva. Misurato — la
 * casella esisteva, 20x20 a x=98, ma al suo centro il click veniva
 * raccolto dallo `span` del testo.
 *
 * La regola del tema ha specificita (1,1,2) per via dell'identificativo:
 * si sale a (1,1,3) invece di ricorrere a !important.
 */
/*
 * ⚠️ Qui l'!important e una risposta, non una scorciatoia: su questa
 * casella si contendono la posizione **tre** regole gia dichiarate
 * !important — una la vuole assoluta, due statica. Enumerate: contro
 * un !important nessuna specificita basta da sola.
 */
.woocommerce h3#ship-to-different-address label input[type="checkbox"],
.woocommerce form h3#ship-to-different-address label input[type="checkbox"] {
	position: static !important;
	flex: 0 0 20px;
	margin-right: 11px;
}

.woocommerce h3#ship-to-different-address label,
.woocommerce form h3#ship-to-different-address label {
	display: flex;
	align-items: center;
	gap: 0;
	padding-left: 0;
	font-family: var(--theme-font-p_font-family, Lora, Georgia, serif);
	font-size: 15px;
	color: var(--theme-color-input_dark, #101010);
	cursor: pointer;
}

/* ═══════════ avvisi di WooCommerce (carrello e cassa) ═══════════ */

/*
 * ☠️ ERANO L'UNICA COSA DEL PERCORSO D'ACQUISTO SENZA VESTE.
 * Il tema li lascia centrati, senza riquadro, in grigio: sulla cassa
 * l'elenco dei campi mancanti compariva come testo sparso in mezzo alla
 * pagina, con i nomi dei campi in nero e il resto in grigio. Segnalato
 * dal cliente con uno screenshot.
 *
 * ⚠️ La forma non e inventata: e la stessa di `.ch-riepilogo-errori`,
 * il riepilogo che i moduli di contatto mostrano gia in cima quando
 * qualcosa manca. Due riquadri d'errore diversi nello stesso sito
 * sarebbero un difetto, non una scelta.
 *
 * ⚠️ Le regole del tema valgono `.woocommerce .woocommerce-error`, cioe
 * (0,2,0). Qui si aggiunge il nome dell'elemento (`ul`, `div`) e si
 * arriva a (0,2,1): vince senza bisogno di `!important`.
 */

.woocommerce ul.woocommerce-error,
.woocommerce div.woocommerce-error,
.woocommerce ul.woocommerce-message,
.woocommerce div.woocommerce-message,
.woocommerce ul.woocommerce-info,
.woocommerce div.woocommerce-info {
	margin: 0 0 26px;
	padding: 16px 18px 16px 20px;
	border: 1px solid var(--ch-bordo, #f3dcd1);
	border-radius: var(--ch-raggio, 4px);
	background: var(--theme-color-alter_bg_color, #fff4ee);
	font-family: var(--ch-carattere, Lora, Georgia, serif);
	font-size: 15px;
	line-height: 1.55;
	/* ⚠️ a sinistra: un elenco di campi mancanti centrato non si scorre */
	text-align: left;
	list-style: none;
	color: var(--ch-inchiostro, #101010);
}

.woocommerce ul.woocommerce-error {
	border-color: var(--ch-errore, #9d1c2e);
	background: rgba(157, 28, 46, .045);
	color: var(--ch-errore, #9d1c2e);
}

.woocommerce ul.woocommerce-error li,
.woocommerce ul.woocommerce-message li,
.woocommerce ul.woocommerce-info li {
	margin: 0 0 6px;
	padding: 0 0 0 18px;
	text-align: left;
	color: inherit;
	position: relative;
	list-style: none;
}

.woocommerce ul.woocommerce-error li:last-child,
.woocommerce ul.woocommerce-message li:last-child,
.woocommerce ul.woocommerce-info li:last-child {
	margin-bottom: 0;
}

/*
 * Un segno discreto davanti a ogni voce: serve a contarle a colpo
 * d'occhio, e il pallino tipografico dell'elenco qui non si vede
 * perche il tema toglie i marcatori.
 */
.woocommerce ul.woocommerce-error li::before,
.woocommerce ul.woocommerce-message li::before,
.woocommerce ul.woocommerce-info li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: .62em;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: currentColor;
	opacity: .55;
}

/* i nomi dei campi che WooCommerce mette in grassetto restano leggibili */
.woocommerce ul.woocommerce-error li strong,
.woocommerce ul.woocommerce-error strong {
	color: inherit;
	font-weight: 700;
}

.woocommerce .woocommerce-error a,
.woocommerce .woocommerce-message a,
.woocommerce .woocommerce-info a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/*
 * ⚠️ Il comando dentro l'avviso (es. «Visualizza carrello») e un
 * bottone del tema: qui gli si toglie solo l'aria di troppo, il colore
 * resta quello suo.
 */
.woocommerce .woocommerce-message .button,
.woocommerce .woocommerce-info .button {
	float: none;
	margin-left: 12px;
	vertical-align: baseline;
}

/*
 * Il gruppo degli avvisi della cassa non deve aggiungere spazio suo:
 * il riquadro ha gia il proprio margine.
 */
.woocommerce .woocommerce-NoticeGroup {
	margin: 0 0 8px;
}