/**
 * Dati per la fattura — cassa e area personale.
 * v1.0
 *
 * ⚠️ I CAMPI NON HANNO STILE PROPRIO.
 * Sono campi di WooCommerce dentro il modulo della cassa: l'aspetto lo
 * danno gia le regole dei moduli. Qui si vestono solo il titolo, la
 * casella che apre il gruppo, il messaggio d'errore e la chiusura —
 * riscrivere il resto vorrebbe dire avere due campi «Partita IVA» e
 * «Provincia» diversi nello stesso modulo.
 */

/* ---- titolo del gruppo (professionisti e area personale) ---- */

/*
 * ⚠️ IL RITMO DEL MODULO E 47 PX, MISURATI.
 * Un'intestazione deve stare piu vicina al suo gruppo di quanto i
 * gruppi stiano fra loro, altrimenti non si capisce cosa introduce.
 * Ma 6 px contro 47 e strozzato: 18 px separano senza staccare.
 * Il `!important` serve perche il tema dichiara il margine delle righe
 * con `!important` a sua volta.
 */
.ch-fiscale-titolo {
	margin-bottom: 18px !important;
}

.ch-fiscale__titolo {
	display: block;
	font-family: var(--theme-font-h5_font-family, Georgia, 'Times New Roman', serif);
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--theme-color-text_dark, #1b1418);
}

.ch-fiscale__nota {
	display: block;
	margin-top: 3px;
	font-family: var(--theme-font-p_font-family, Lora, Georgia, serif);
	font-size: 13px;
	line-height: 1.45;
	color: #5f5a56;                  /* 6,81:1 su bianco */
}

/* ---- la casella che apre il gruppo ---- */

.ch-fiscale-interruttore {
	margin-bottom: 18px !important;   /* vedi la nota sul ritmo, qui sopra */
}

/*
 * L'aspetto della casella (bordeaux da spuntata, segno bianco) arriva
 * da moduli.css: e un checkbox di WooCommerce come gli altri della
 * cassa, e deve restare identico a «Creare un account?».
 */
/*
 * ☠️ QUI IL RIENTRO NON ERA MIO.
 * `.woocommerce form .form-row label.checkbox` dichiara
 * `padding-left: 1.8em` — vale (0,3,2), la mia regola precedente
 * `.ch-fiscale-interruttore label` valeva (0,1,1) e perdeva: il
 * `display: flex` non si applicava proprio e restava un rientro di
 * 32 px senza motivo, perche quel padding serviva a fare spazio a una
 * casella posizionata in assoluto — e questa casella sta nel flusso.
 * Misurato, non guardato: x=68 la riga, x=68 la label, x=100 la
 * casella. Si conta un selettore in piu e si azzera il padding.
 */
.woocommerce form .form-row.ch-fiscale-interruttore label,
.woocommerce-page form .form-row.ch-fiscale-interruttore label,
.woocommerce form .form-row.ch-fiscale-interruttore label.checkbox,
.woocommerce-page form .form-row.ch-fiscale-interruttore label.checkbox {
	display: flex;
	align-items: center;
	gap: 11px;
	margin: 0;
	padding-left: 0;
	cursor: pointer;
	font-family: var(--theme-font-p_font-family, Lora, Georgia, serif);
	font-size: 19px;
	color: var(--theme-color-text_dark, #1b1418);
}

/*
 * ⚠️ VIA IL «(facoltativo)» DAL GRUPPO FISCALE.
 * WooCommerce lo attacca a ogni campo non obbligatorio. Qui diceva
 * «Partita IVA (facoltativo)*» — facoltativo e obbligatorio nella
 * stessa etichetta — e ripeteva la stessa parola cinque volte in
 * mezzo schermo. Il gruppo intero e facoltativo per costruzione: si
 * apre solo se lo chiedi. Dentro, l'asterisco sulla partita IVA dice
 * quello che serve sapere.
 */
.ch-fiscale-campo .optional,
.ch-fiscale-interruttore .optional,
.ch-fiscale-titolo .optional {
	display: none;
}

/* ---- chiusura ---- */

/*
 * ⚠️ `display: none`, non `visibility` o altezza zero.
 * Un campo solo trasparente resta raggiungibile con il tabulatore, e
 * chi naviga da tastiera finisce dentro campi che non ha chiesto di
 * vedere. I campi sono anche disabilitati dal JavaScript, cosi da
 * chiusi non partono nemmeno.
 */
.form-row.ch-fiscale-chiuso {
	display: none !important;
}

/* ---- errore sotto il campo ---- */

.ch-fiscale-errore {
	display: block;
	margin-top: 6px;
	font-family: var(--theme-font-p_font-family, Lora, Georgia, serif);
	font-size: 13px;
	line-height: 1.45;
	color: #a4133c;                  /* 5,86:1 su bianco */
}

.form-row.ch-fiscale-non-valido input.input-text {
	border-color: #a4133c;
}

.form-row.ch-fiscale-non-valido input.input-text:focus {
	border-color: #a4133c;
	box-shadow: 0 0 0 2px rgba(164, 19, 60, .16);
}

/* i valori fiscali si leggono a blocchi: la spaziatura aiuta a rileggerli */
#billing_ch_piva,
#billing_ch_cf,
#billing_ch_sdi,
#shipping_ch_piva {
	letter-spacing: .06em;
	text-transform: uppercase;
}

/*
 * ☠️ IL MAIUSCOLO NON DEVE TOCCARE IL SEGNAPOSTO.
 * `text-transform` vale anche per il testo di suggerimento: si leggeva
 * «SE DIVERSO DALLA PARTITA IVA» e «7 CARATTERI», che urlano e non
 * sono nemmeno uno stile del sito. Il maiuscolo serve al VALORE
 * scritto, che è un codice; il suggerimento è una frase.
 */
#billing_ch_piva::placeholder,
#billing_ch_cf::placeholder,
#billing_ch_sdi::placeholder,
#shipping_ch_piva::placeholder {
	text-transform: none;
	letter-spacing: normal;
}

/*
 * Il «(facoltativo)» sul nome della società sparisce quando il campo
 * diventa obbligatorio: altrimenti l'etichetta direbbe insieme
 * «facoltativo» e «*», come già successo sulla partita IVA.
 */
.form-row.ch-fiscale-serve .optional {
	display: none;
}

/* ---- riepilogo su conferma d'ordine e dettaglio ordine ---- */

.ch-fiscale-riepilogo {
	margin: 26px 0 0;
}

.ch-fiscale-riepilogo h2 {
	margin: 0 0 10px;
	font-family: var(--theme-font-h4_font-family, Georgia, 'Times New Roman', serif);
	font-size: 1.25rem;
	color: var(--theme-color-text_dark, #1b1418);
}

.ch-fiscale-riepilogo ul {
	margin: 0;
	padding: 0;
	list-style: none;
	border: 1px solid #e6dee2;
}

.ch-fiscale-riepilogo li {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 16px;
	justify-content: space-between;
	margin: 0;
	padding: 9px 14px;
	border-bottom: 1px solid #f0e8ec;
	font-family: var(--theme-font-p_font-family, Lora, Georgia, serif);
	font-size: .95rem;
}

.ch-fiscale-riepilogo li:last-child {
	border-bottom: 0;
}

.ch-fiscale-riepilogo li span {
	color: #5f5a56;
}

.ch-fiscale-riepilogo li strong {
	color: var(--theme-color-text_dark, #1b1418);
	letter-spacing: .04em;
}

/* ---- schermi stretti ---- */

/*
 * ☠️ A 390 px IL CODICE FISCALE VENIVA TAGLIATO.
 * Il tema tiene due colonne anche sul telefono: i campi restano a
 * 160 px, e sedici caratteri a 16px con la spaziatura che serve a
 * rileggerli ne chiedono 212. Misurato sul campo:
 * `scrollWidth 212` contro `clientWidth 158` — si scriveva alla cieca.
 *
 * Nome e cognome a 160 px vanno bene, sono corti: qui non si tocca la
 * scelta del tema, si toglie l'eccezione solo per i codici lunghi.
 *
 * Rimpicciolire il carattere non era una strada: sotto i 16 px iOS
 * ingrandisce la pagina da solo appena si tocca il campo.
 *
 * Le regole del tema (`.woocommerce form .form-row-last`) valgono
 * (0,2,1): un selettore da (0,3,1) basta, senza `!important`.
 */
@media (max-width: 600px) {
	.woocommerce form .form-row.ch-fiscale-campo,
	.woocommerce-page form .form-row.ch-fiscale-campo {
		float: none;
		width: 100%;
	}
}


@media (max-width: 700px) {
	.ch-fiscale-riepilogo li {
		flex-direction: column;
		gap: 2px;
	}
}