/* Foglio di stile condiviso per la libreria shortcode del tema (Sessione 86, distinzione
   cromatica colonne + IVA in Sessione 87, allineamento campi + due prezzi indipendenti in
   Sessione 88, stili per il secondo shortcode "gestione" in Sessione 99 — vedi
   SHORTCODES.md). Caricato SOLO nelle pagine dove almeno uno shortcode della libreria e'
   effettivamente presente nel contenuto (has_shortcode(), vedi functions.php) — non su
   ogni pagina. Usa le variabili CSS definite in global.css (--orange, --ink, --border,
   --r, ecc.), che e' sempre in coda prima di questo foglio. Mobile-first: colonna singola
   di default, due colonne solo da 640px in su. */

/* ── [ab-calcolatore-commissione] ── */

.ab-calc-commissione {
	background: var(--warm);
	border: 1px solid var(--border);
	border-radius: var(--r);
	padding: 1.5rem;
	margin: 2rem 0;
}

.ab-calc-title {
	font-family: 'Playfair Display', serif;
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--ink);
	margin: 0 0 .4rem;
	line-height: 1.3;
}

.ab-calc-lead {
	font-family: 'Inter', sans-serif;
	font-size: .95rem;
	color: var(--ink-soft);
	margin: 0 0 1.25rem;
	line-height: 1.5;
}

/* Input: colonna singola sotto i 480px, affiancati (con wrap) da 480px in su — 3 campi dalla
   Sessione 88/100 (due prezzi indipendenti + aliquota; il selettore partita IVA e' stato
   rimosso in Sessione 100), non tutti stanno su una riga sola su schermi medi, quindi vanno
   a capo invece di stringersi illeggibili. */
.ab-calc-controls {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin-bottom: 1.25rem;
}

@media (min-width: 480px) {
	.ab-calc-controls { flex-direction: row; flex-wrap: wrap; }
	.ab-calc-field { flex: 1 1 160px; }
}

/* Ogni campo e' a sua volta una colonna flex (etichetta sopra, input/select sotto): serve
   solo per l'allineamento sotto, non cambia l'aspetto quando i campi sono impilati su
   mobile (nessuna altezza extra da distribuire in quel caso). */
.ab-calc-field {
	min-width: 0; /* i flex item hanno min-width:auto di default: senza questo, da 480px in
	                 su un campo col contenuto piu' largo potrebbe spingere gli altri fuori
	                 dalla riga invece di dividersi lo spazio disponibile */
	display: flex;
	flex-direction: column;
}

.ab-calc-field label {
	display: block;
	font-family: 'Inter', sans-serif;
	font-size: .82rem;
	font-weight: 600;
	color: var(--ink-soft);
	margin-bottom: .35rem;
}

/* Allineamento in fondo (Sessione 88): da 480px in su ogni .ab-calc-field viene stirato
   (align-items:stretch, default di .ab-calc-controls) all'altezza del campo piu' alto della
   riga — es. l'etichetta "Prezzo attualmente pubblicato (€)" va a capo su due righe mentre
   "Aliquota cedolare secca applicata" resta su una sola, quindi senza questo margin-top:auto
   le caselle di input/select partirebbero ciascuna subito sotto la propria etichetta, a
   altezze diverse.
   Con margin-top:auto sull'input/select (ultimo figlio della colonna flex del campo), ognuno
   viene spinto in fondo al proprio campo — che ha gia' l'altezza del campo piu' alto — cosi'
   tutte le caselle si allineano sulla stessa linea di base, indipendentemente da quante
   righe occupa l'etichetta sopra. Su mobile (colonna singola, nessuno stiramento tra campi)
   non ha alcun effetto visibile: ogni campo resta alto quanto il proprio contenuto. */
.ab-calc-field input,
.ab-calc-field select {
	margin-top: auto;
	width: 100%;
	box-sizing: border-box;
	padding: .6em .8em;
	border: 1px solid var(--border-md);
	border-radius: 8px;
	font-family: 'Inter', sans-serif;
	font-size: 1rem;
	color: var(--ink);
	background: var(--white);
}

.ab-calc-field input:focus,
.ab-calc-field select:focus {
	outline: 2px solid var(--orange);
	outline-offset: 1px;
	border-color: var(--orange);
}

/* Le due colonne di risultati: impilate sotto i 640px (mobile-first), affiancate sopra —
   la distinzione cromatica sotto (fondo diverso, bordo superiore su "dal 13 ottobre") resta
   identica in entrambi i layout, perche' non dipende da flex-direction. */
.ab-calc-columns {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin-bottom: 1.25rem;
}

@media (min-width: 640px) {
	.ab-calc-columns { flex-direction: row; }
	.ab-calc-col { flex: 1; }
}

/* Distinzione cromatica tra le due colonne (Sessione 87): prima erano visivamente identiche
   (entrambe su fondo bianco) e il lettore non capiva a colpo d'occhio quale stesse
   guardando. "Oggi" resta su un fondo neutro attenuato (situazione in scadenza, tono
   dimesso); "Dal 13 ottobre" passa a un fondo arancio chiaro con una barra superiore piena
   nell'arancio del brand (situazione nuova, in evidenza). */
.ab-calc-col {
	background: var(--warm);
	border: 1px solid var(--border);
	border-radius: 10px;
	padding: 1.1rem;
	min-width: 0; /* bug reale trovato con uno screenshot in Sessione 86: essendo un flex
	                 item di .ab-calc-columns, il min-width:auto di default lo forzava largo
	                 quanto il valore piu' lungo e non spezzabile (il range "paga l'ospite"
	                 qui sotto, white-space:nowrap), allargando l'intera card oltre il
	                 viewport invece di andare semplicemente a capo su schermi stretti */
}

.ab-calc-col-nuovo {
	background: var(--orange-lt);
	border-color: var(--border-str);
	border-top-width: 4px;
	border-top-color: var(--orange);
	/* border-color sopra imposterebbe il colore su tutti e 4 i lati, incluso il top: le due
	   proprieta' border-top-* vanno dichiarate DOPO per vincere sulla sola cima (larghezza
	   4px, colore arancio pieno), altrimenti il top erediterebbe solo la larghezza qui sotto
	   ma il colore da border-color sopra. */
}

.ab-calc-col-title {
	font-family: 'Playfair Display', serif;
	font-size: 1rem;
	font-weight: 700;
	color: var(--orange-deep);
	margin: 0 0 .75rem;
}

.ab-calc-list {
	list-style: none;
	margin: 0;
	padding: 0;
	font-family: 'Inter', sans-serif;
}

.ab-calc-list li {
	display: flex;
	flex-wrap: wrap; /* se label+valore non ci stanno affiancati (schermi molto stretti), il
	                     valore va a capo sotto invece di spingere il layout in overflow */
	justify-content: space-between;
	align-items: baseline;
	gap: .3rem .75rem;
	padding: .4rem 0;
	border-bottom: 1px solid var(--border);
	font-size: .88rem;
}

.ab-calc-list li:last-child { border-bottom: none; }

/* L'attributo [hidden] (usato dal JS del secondo shortcode, [ab-calcolatore-commissione-
   gestione], per le righe "+ IVA"/"Commissione lorda" in gestione autonoma e per la riga
   "Commissione di gestione" quando l'immobile e' gestito) va reso esplicito: senza questa
   regola perderebbe contro la specificita' di ".ab-calc-list li { display:flex }" qui sopra
   e la riga resterebbe visibile lo stesso. */
.ab-calc-list li[hidden] { display: none; }

.ab-calc-list li span { color: var(--ink-soft); }

.ab-calc-list li strong {
	color: var(--ink);
	font-weight: 700;
	white-space: nowrap;
}

/* Righe di dettaglio IVA (Sessione 87, "+ IVA 22%" e "Commissione lorda"): in questo
   shortcode (dalla Sessione 100) sempre visibili — l'IVA sulla commissione e' sempre
   applicata, nessun toggle. Nel secondo shortcode, [ab-calcolatore-commissione-gestione],
   restano invece condizionali (visibili solo con gestione autonoma). Leggermente rientrate
   e piu' piccole per leggersi come il dettaglio della riga "Commissione host" sopra, non
   come una voce di pari livello. */
.ab-calc-row-iva {
	font-size: .82rem;
}

.ab-calc-row-iva span { padding-left: .9rem; color: var(--ink-soft); }

.ab-calc-row-lorda {
	border-top: 1px dashed var(--border-md);
	font-weight: 600;
}

.ab-calc-row-lorda span { color: var(--ink); }

/* Riquadro "Netto finale" evidenziato in ENTRAMBE le colonne (e' il numero che il lettore
   cerca): NON e' l'ultima riga dell'elenco (segue sempre "paga l'ospite"), quindi niente
   margini negativi/bleed-to-edge — un margine negativo qui trascinerebbe verso l'alto la
   riga successiva, sovrapponendola visivamente (bug reale trovato con uno screenshot in
   Sessione 86, corretto prima del deploy). */
.ab-calc-list-net {
	background: var(--orange-lt);
	margin: .3rem 0 !important;
	padding: .5rem .6rem !important;
	border-radius: 6px;
	border-bottom: none !important;
}

.ab-calc-list-net strong {
	color: var(--orange-deep);
	font-size: 1rem;
}

/* Sessione 87: dentro la colonna "Dal 13 ottobre" il fondo della card e' gia' arancio
   chiaro (.ab-calc-col-nuovo sopra) — lo stesso arancio chiaro sul riquadro "Netto finale"
   sparirebbe per mancanza di contrasto. Qui il riquadro diventa bianco con un bordo arancio
   medio: resta un "pop" leggibile sopra il fondo colorato della card, invece di fondersi. */
.ab-calc-col-nuovo .ab-calc-list-net {
	background: var(--white);
	border: 1px solid var(--orange-mid);
}

.ab-calc-highlight {
	background: var(--orange-lt);
	border-left: 4px solid var(--orange);
	border-radius: 0 8px 8px 0;
	padding: 1rem 1.2rem;
	margin-bottom: 1.25rem;
	font-family: 'Inter', sans-serif;
}

.ab-calc-highlight p {
	margin: 0 0 .8rem;
	font-size: .95rem;
	color: var(--ink);
	line-height: 1.55;
}

.ab-calc-highlight strong { color: var(--orange-deep); }

/* Pulsante "Usa questo prezzo" (Sessione 88): applica il prezzo suggerito al campo "dal 13
   ottobre" con un click, invece di dover ricopiare il numero a mano — la funzione piu'
   utile del calcolatore, quindi in evidenza (stesso linguaggio visivo delle altre CTA a
   pillola del tema) subito sotto il testo del suggerimento. */
.ab-calc-usa-prezzo {
	display: inline-block;
	margin: 0;
	background: var(--orange);
	color: var(--white);
	font-family: 'Inter', sans-serif;
	font-weight: 700;
	font-size: .82rem;
	padding: .5em 1.3em;
	border: none;
	border-radius: 999px;
	cursor: pointer;
	transition: background .15s, transform .12s;
}

.ab-calc-usa-prezzo:hover { background: var(--orange-deep); transform: translateY(-1px); }
.ab-calc-usa-prezzo:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* Avviso di cautela fiscale (style-guide.md, sezione 12): sempre visibile, mai in fondo
   in caratteri minuscoli — stesso peso visivo delle colonne di risultato sopra. */
.ab-calc-disclaimer {
	border: 1px solid var(--border-str);
	border-radius: 8px;
	padding: .9rem 1.1rem;
	font-family: 'Inter', sans-serif;
	font-size: .85rem;
	color: var(--ink-soft);
	line-height: 1.55;
}

.ab-calc-disclaimer strong { color: var(--ink); }

/* ── [ab-calcolatore-commissione-gestione] (Sessione 99) ──────────────────────────────
   Stessa identita' visiva del calcolatore sopra (stesso contenitore ".ab-calc-commissione",
   nessuno stile duplicato) — qui solo la riga aggiuntiva che quel markup non ha mai avuto:
   "Commissione di gestione (30%)", visibile solo quando l'immobile e' gestito da terzi,
   speculare a .ab-calc-row-iva sopra (mai visibili insieme: o c'e' il dettaglio IVA sulla
   commissione Airbnb — gestione autonoma — o c'e' la commissione di gestione, mai entrambi). */
.ab-calc-row-gestione span { padding-left: .9rem; color: var(--ink-soft); }