/*
 * Logicoo Form — foglio di stile frontend di base.
 *
 * Un solo file, enqueued una sola volta per pagina (Frontend\Assets, docs/ARCHITECTURE.md §4.14),
 * indipendentemente da quante volte lo shortcode compare nella pagina.
 *
 * Token dinamici (impostazioni di stile globale, Settings\SettingsSchema) iniettati come custom
 * property CSS su .logicoo-form da Frontend\Assets::style_variables() (wp_add_inline_style). I
 * valori di default qui sotto sono usati solo come fallback var(--x, default) se, per qualunque
 * motivo, il blocco inline non fosse presente.
 *
 * Eredita di default lo stack di font del tema ospitante (nessun font-family forzato qui), confermato
 * in docs/UX-SPECIFICATION.md §3.1.
 *
 * Breakpoint: un solo valore (640px) per tutte le regole responsive di questo file
 * (docs/UX-SPECIFICATION.md §3.3/§4).
 */

.logicoo-form {
	--lf-accent: #2271b1;
	--lf-accent-contrast: #ffffff;
	--lf-border: #c3c4c7;
	--lf-radius: 6px;
	--lf-error: #b32d2e;
	--lf-error-bg: #fbeaea;
	--lf-success: #1e6b3c;
	--lf-success-bg: #eaf6ee;
	--lf-warning: #8a6100;
	--lf-warning-bg: #fcf3d9;

	box-sizing: border-box;
	max-width: 100%;
}

.logicoo-form *,
.logicoo-form *::before,
.logicoo-form *::after {
	box-sizing: inherit;
}

.logicoo-form--sent .logicoo-form-form {
	opacity: 0.4;
	pointer-events: none;
	user-select: none;
}

/*
 * Entrambi i notice di esito (`.logicoo-form-notice`, fallback POST
 * classico, e `.logicoo-form-ajax-notice`, percorso JS) vivono fuori da
 * `.logicoo-form-form` (vedi `Frontend\FormRenderer::render()`) e non
 * dovrebbero mai ereditare la dissolvenza qui sopra. Un `opacity` su un
 * discendente non annulla mai quello di un antenato (per questo
 * `.logicoo-form-ajax-notice` sta fuori dal form). L'`opacity: 1`
 * esplicito sotto li tiene a piena opacità anche se il markup cambiasse.
 */
.logicoo-form--sent .logicoo-form-notice,
.logicoo-form--sent .logicoo-form-ajax-notice {
	opacity: 1;
}

/* ---- Intestazione (titolo/sottotitolo interni) ----------------- */

.logicoo-form-header {
	margin: 0 0 0.5em;
}

.logicoo-form-title {
	margin: 0 0 var(--lf-title-desc-gap, 0px);
	font-size: var(--lf-form-title-size, 22px);
	color: var(--lf-form-title-color, #000000);
	font-weight: var(--lf-form-title-weight, 700);
	font-family: var(--lf-form-title-font-family, inherit);
}

.logicoo-form-subtitle {
	margin: 0;
	font-size: var(--lf-form-subtitle-size, 16px);
	color: var(--lf-form-subtitle-color, #262626);
	font-weight: var(--lf-form-subtitle-weight, 400);
	font-family: var(--lf-form-subtitle-font-family, inherit);
}

/*
 * Separatore dopo titolo/descrizione del modulo — un filo sottile con
 * sfumatura ai bordi invece di una riga piena netta, per un aspetto più
 * leggero.
 * Emesso da `Frontend\FormRenderer::render_header()` solo quando
 * l'intestazione è effettivamente presente (titolo e/o sottotitolo
 * configurati), mai come elemento isolato senza nulla sopra.
 */
.logicoo-form-header-divider {
	border: none;
	height: 1px;
	margin: 0 0 1.25em;
	background: linear-gradient(to right, transparent, var(--lf-border, #c3c4c7) 15%, var(--lf-border, #c3c4c7) 85%, transparent);
}

/* ---- reCAPTCHA ----------------------------------------- */

/*
 * `margin-top` qui, non su `.logicoo-form-nav` sotto, quando il widget è
 * presente: `logicoo_form_nav_btns_margin_top` ("Margine sopra i pulsanti/
 * reCAPTCHA (px)", `Settings\SettingsSchema`) descrive lo spazio sopra il
 * primo dei due elementi che compaiono per ultimi nel form: con reCAPTCHA v2
 * attivo va tra l'ultimo campo e il widget, non tra il widget e i
 * pulsanti. `.logicoo-form-nav` sotto annulla il
 * proprio `margin-top` quando preceduto direttamente da questo elemento, per
 * non sommare due margini. Il reCAPTCHA v3 (input nascosto, nessuna classe
 * `.logicoo-form-recaptcha`) resta invariato: nessun widget visibile,
 * nessun margine da controllare, il margine va normalmente su `.logicoo-form-nav`.
 */
.logicoo-form-recaptcha {
	margin: var(--lf-nav-margin-top, 25px) 0 1em;
}

/* ---- Notice (successo/errore, sia server sia AJAX) ------------------- */

.logicoo-form-notice,
.logicoo-form-ajax-notice {
	margin: 0 0 1em;
	padding: 0.85em 1.1em;
	border-radius: var(--lf-radius);
	font-size: 0.95em;
	line-height: 1.5;
}

.logicoo-form-notice--success,
.logicoo-form-ajax-notice.logicoo-form-ajax-notice--success {
	background: var(--lf-success-bg);
	color: var(--lf-success);
	border: 1px solid currentColor;
}

.logicoo-form-notice--error,
.logicoo-form-ajax-notice.logicoo-form-ajax-notice--error {
	background: var(--lf-error-bg);
	color: var(--lf-error);
	border: 1px solid currentColor;
}

/*
 * "Link non più valido" (SV-006, Salva e Continua,
 * `Frontend\FormRenderer::render_resume_notice()`) — stesso trattamento
 * visivo di successo/errore sopra.
 */
.logicoo-form-notice--warning {
	background: var(--lf-warning-bg);
	color: var(--lf-warning);
	border: 1px solid currentColor;
}

.logicoo-form-ajax-notice[hidden] {
	display: none;
}

.logicoo-form-ajax-notice ul {
	margin: 0.4em 0 0;
	padding-left: 1.2em;
}

.logicoo-form-notice-reference {
	margin: 0.5em 0 0;
	font-weight: 600;
}

/* ---- Barra di avanzamento (popolata/attivata solo da JS) ----- */

.logicoo-form-progress[hidden] {
	display: none;
}

.logicoo-form-progress {
	margin: 0 0 1.5em;
}

.logicoo-form-progress-bar {
	height: 6px;
	border-radius: 999px;
	background: var(--lf-border);
	overflow: hidden;
}

.logicoo-form-progress-bar::after {
	content: "";
	display: block;
	height: 100%;
	width: var(--lf-progress-percent, 0%);
	background: var(--lf-progress-color, var(--lf-accent));
	transition: width 0.25s ease;
}

/*
 * Shimmer/light-sweep applicato solo alla barra della prima pagina di un
 * formulario a tipo "percentuale" (classe alternata da JS in
 * `updateWizardUi()`, mai su formulari a pagina singola dove la barra
 * resta sempre nascosta) — puro effetto decorativo, nessun impatto sul
 * valore/percentuale reale mostrato.
 */
.logicoo-form-progress-bar--shimmer::after {
	background-image: linear-gradient(
		90deg,
		var(--lf-progress-color, var(--lf-accent)) 25%,
		rgba(255, 255, 255, 0.65) 50%,
		var(--lf-progress-color, var(--lf-accent)) 75%
	);
	background-size: 200% 100%;
	animation: logicoo-form-progress-shimmer 1.6s ease-in-out infinite;
}

@keyframes logicoo-form-progress-shimmer {
	0% {
		background-position: 200% 0;
	}

	100% {
		background-position: -200% 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.logicoo-form-progress-bar--shimmer::after {
		animation: none;
		background-image: none;
	}
}

.logicoo-form-progress-text {
	margin: 0.5em 0 0;
	font-size: 0.85em;
	color: inherit;
}

/* ---- Pagine e campi --------------------------------------------------- */

/*
 * `position: relative` incondizionato — innocuo quando nessuna pagina è
 * `position: absolute` (unico stato normale, vedi transizione tra pagine più
 * sotto): serve solo da contenitore di posizionamento per la breve finestra
 * in cui 2 pagine si sovrappongono durante l'animazione di dissolvenza.
 */
.logicoo-form-pages {
	position: relative;
}

/*
 * Dissolvenza tra pagine di un wizard multi-pagina — le classi qui
 * sotto sono applicate/rimosse esclusivamente da `animatePageChange()` in
 * `form-core.js`, solo quando `page_transition` è "fade" (mai con "none", il
 * default, o `prefers-reduced-motion: reduce`: in quei casi il JS applica
 * l'istantaneo toggle di `hidden` di sempre, queste regole non entrano mai
 * in gioco). Le 2 pagine coinvolte diventano `position: absolute` solo per
 * la breve finestra di sovrapposizione, mentre `.logicoo-form-pages`
 * sopra riceve un'altezza esplicita via JS per evitare un salto di layout
 * nel frattempo. Durata fissa a 150ms (a durate più lunghe l'effetto
 * risulta brusco): la rete di sicurezza a timer in `form-core.js` legge la
 * durata applicata via `getComputedStyle()` invece di un valore duplicato
 * a mano, quindi resta sincronizzata se questo valore cambia.
 *
 * Le 2 regole sotto (stato iniziale/finale della classe `--active`) hanno
 * specificità diversa (2 classi vs 3) per costruzione — nessuna dipendenza
 * dall'ordine nel file.
 */
.logicoo-form-page--transition-out,
.logicoo-form-page--transition-in {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	transition: opacity 150ms ease;
}

.logicoo-form-page--transition-fade.logicoo-form-page--transition-out {
	opacity: 1;
}

.logicoo-form-page--transition-fade.logicoo-form-page--transition-in {
	opacity: 0;
}

.logicoo-form-page--transition-fade.logicoo-form-page--transition-out.logicoo-form-page--transition-active {
	opacity: 0;
}

.logicoo-form-page--transition-fade.logicoo-form-page--transition-in.logicoo-form-page--transition-active {
	opacity: 1;
}

.logicoo-form-page-title {
	margin: 0 0 1em;
	font-size: var(--lf-page-title-size, 16px);
	font-weight: var(--lf-page-title-weight, 700);
	color: var(--lf-page-title-color, #3c434a);
	font-family: var(--lf-page-title-font-family, inherit);
}

.logicoo-form-fields {
	display: flex;
	flex-wrap: wrap;
	gap: var(--lf-field-spacing, 18px);
}

.logicoo-form-field-col {
	flex: 0 0 100%;
	max-width: 100%;
}

.logicoo-form-field-col--half {
	flex-basis: calc(50% - (var(--lf-field-spacing, 18px) / 2));
	max-width: calc(50% - (var(--lf-field-spacing, 18px) / 2));
}

.logicoo-form-field-col--third {
	flex-basis: calc(33.3333% - (var(--lf-field-spacing, 18px) * 2 / 3));
	max-width: calc(33.3333% - (var(--lf-field-spacing, 18px) * 2 / 3));
}

@media (max-width: 640px) {
	.logicoo-form-field-col--half,
	.logicoo-form-field-col--third {
		flex-basis: 100%;
		max-width: 100%;
	}
}

.logicoo-form-field {
	display: flex;
	flex-direction: column;
	gap: var(--lf-label-gap, 8px);
	width: 100%;
}

/*
 * `!important` su dimensione e peso: temi come Salient impongono
 * `form label { font-size: 16px !important; font-weight: 500 !important }`,
 * che altrimenti annullerebbe le impostazioni "Etichette" di Stile globale.
 * Vale anche per le etichette sotto.
 */
.logicoo-form-field-label {
	font-size: var(--lf-label-size, 17px) !important;
	font-weight: var(--lf-label-weight, 600) !important;
	color: var(--lf-label-color, inherit);
	text-align: var(--lf-label-align, left);
	font-family: var(--lf-label-font-family, inherit);
}

.logicoo-form-required-mark {
	color: var(--lf-required-mark-color, var(--lf-error));
}

.logicoo-form-field-description {
	/*
	 * `padding: 0` esplicito: questo elemento è un `<p>` (vedi
	 * `Fields\AbstractField::render_description()`) e alcuni temi (Salient)
	 * applicano `p { padding-bottom: ... }`, che il nostro `margin-bottom`
	 * non annulla (margine e padding sono proprietà distinte): "Descrizioni —
	 * margine sotto" a 0 lascerebbe comunque uno spazio. Nessun `!important`
	 * necessario: un selettore di classe ha già specificità maggiore del
	 * selettore di tag del tema.
	 */
	padding: 0;
	margin: 0 0 var(--lf-desc-margin-bottom, 0);
	font-size: var(--lf-desc-size, 12px);
	font-weight: var(--lf-desc-weight, 400);
	color: var(--lf-desc-color, #666666);
	font-family: var(--lf-desc-font-family, inherit);
}

/*
 * Prefisso `.logicoo-form ` (non solo `.logicoo-form-input` ecc.)
 * deliberato: alza la specificità a (0,2,0), sufficiente a vincere contro
 * regole di temi terzi che stilizzano `input[type="text"]`/`select`/
 * `textarea` in modo generico (stessa specificità (0,1,0) di un singolo
 * selettore, ma caricate dopo il nostro foglio e quindi altrimenti vincenti
 * per ordine di cascata, come fa il tema Salient): senza questo prefisso
 * bordo, sfondo e colore del testo dei campi resterebbero quelli del tema.
 * Nessun `!important`: la specificità basta, e resta più facile da
 * sovrascrivere con il CSS personalizzato del formulario.
 */
.logicoo-form .logicoo-form-input,
.logicoo-form .logicoo-form-textarea,
.logicoo-form .logicoo-form-select {
	width: 100%;
	padding: 0.6em 0.75em;
	/*
	 * Longhand separate (`border-width`/`border-style`/`border-color`)
	 * invece della shorthand `border: <width> solid <color>`: una shorthand
	 * con un `var()` non viene scomposta in longhand fino alla risoluzione
	 * finale, e contro la regola di un tema che dichiara `border-top-width`
	 * come longhand lo spessore perderebbe nonostante la specificità
	 * maggiore. Con le longhand il confronto per `border-width` è diretto.
	 */
	border-width: var(--lf-input-border-width, 1px);
	border-style: solid;
	border-color: var(--lf-input-border-color, var(--lf-border));
	border-radius: var(--lf-radius);
	/*
	 * `var(--lf-input-size, 14px)`, non `1em`: `1em` erediterebbe il
	 * font-size del tema, non controllabile da "Stile globale dei form", e su
	 * un tema con un font maggiore di 14px Testo/Area di testo/Selezione
	 * apparirebbero più grandi degli altri testi del form, che hanno tutti
	 * una dimensione propria. Il padding sopra resta in `em`, quindi scala in
	 * proporzione a questo valore.
	 */
	font-family: inherit;
	font-size: var(--lf-input-size, 14px);
	color: var(--lf-input-color, inherit);
	text-align: var(--lf-input-align, left);
	background: var(--lf-input-bg, #fff);
}

/*
 * Bordo rosso su un campo non valido — solo dopo un primo tentativo di
 * avanzamento/invio (`logicoo-form-was-validated` sulla pagina o sul `<form>`
 * validati, aggiunta da `validation.js::validateScope()`), mai prima: senza questa condizione ogni
 * campo obbligatorio ancora vuoto risulterebbe rosso fin dal caricamento
 * della pagina. `:invalid` è lo stato nativo del browser (stessi controlli
 * già validati da `checkValidity()`/`reportValidity()`) — nessuna
 * logica di validazione duplicata qui, solo lo stile.
 */
.logicoo-form-was-validated .logicoo-form-input:invalid,
.logicoo-form-was-validated .logicoo-form-textarea:invalid,
.logicoo-form-was-validated .logicoo-form-select:invalid {
	border-color: var(--lf-error);
}

/*
 * M-17 — errore di un campo dopo un invio senza JavaScript (`AbstractField::render_wrapper()`): testo sotto il
 * controllo, collegato con `aria-describedby`, e bordo rosso sul controllo marcato `aria-invalid`.
 */
.logicoo-form-field-error {
	color: var(--lf-error);
	font-size: 0.9em;
	margin: 4px 0 0;
}

.logicoo-form-field--invalid [aria-invalid="true"] {
	border-color: var(--lf-error);
}

.logicoo-form-notice-errors {
	margin: 8px 0 0 1.2em;
	padding: 0;
}

/*
 * 15px di margine tra la freccia e il bordo destro del campo. La posizione
 * della freccia nativa del browser non
 * è controllabile via CSS in modo affidabile/uniforme tra browser diversi
 * (ogni motore di rendering la disegna con un proprio inset interno fisso,
 * indipendente dal padding) — sostituita con una freccia SVG disegnata come
 * sfondo, posizionata esplicitamente, stesso principio già usato per il
 * segno di spunta delle checkbox admin (`logicoo-form-admin.css`).
 */
/* Stesso prefisso `.logicoo-form ` della regola base sopra, stesso motivo (specificità (0,2,0) contro regole generiche di temi terzi su `select`). */
.logicoo-form .logicoo-form-select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	padding-right: calc(15px + 0.75em + 10px);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23555555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 15px center;
	background-size: 10px 10px;
}

/* Pulsante "×" per svuotare un campo Selezione (select-search.js::addClearButton). */
.logicoo-form-select-wrap {
	position: relative;
}

.logicoo-form-has-clear .logicoo-form-select {
	padding-right: calc(15px + 0.75em + 10px + 26px);
}

.logicoo-form .logicoo-form-select-clear {
	position: absolute;
	top: 50%;
	right: calc(15px + 0.75em + 10px);
	transform: translateY(-50%);
	width: 22px;
	height: 22px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent !important;
	color: var(--lf-label-color, #555555) !important;
	font-family: inherit;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	opacity: 0.7;
}

.logicoo-form .logicoo-form-select-clear[hidden] {
	display: none;
}

.logicoo-form .logicoo-form-select-clear:hover,
.logicoo-form .logicoo-form-select-clear:focus-visible {
	opacity: 1;
	background: rgba(0, 0, 0, 0.08) !important;
}

.logicoo-form-has-clear--multiple .logicoo-form-select-clear {
	top: 6px;
	right: 20px;
	transform: none;
}

/* Selezione multipla: lista scorrevole, nessuna freccia a discesa decorativa. */
.logicoo-form .logicoo-form-select[multiple] {
	background-image: none;
	padding-right: 0.75em;
}

.logicoo-form-input:focus,
.logicoo-form-textarea:focus,
.logicoo-form-select:focus,
.logicoo-form-file-input:focus-visible {
	outline: 2px solid var(--lf-accent);
	outline-offset: 1px;
}

/*
 * ---- Widget combobox del campo Selezione ---------------------------------
 * Costruito da `select-search.js` solo quando l'impostazione per campo è
 * attiva (`data-searchable="1"` sul `<select>`). Vedi il docblock di
 * `select-search.js` per
 * l'architettura completa (il `<select>` nativo resta la fonte di verità
 * per submission/validazione, reso invisibile ma posizionato esattamente
 * sopra il pulsante — non rimosso né `hidden` — perché `reportValidity()`
 * possa ancora ancorare il proprio popup nativo alla posizione corretta).
 */
.logicoo-form-combobox {
	position: relative;
}

/*
 * Il `<select>` nativo sovrapposto esattamente al pulsante — invisibile
 * (`opacity: 0`) ma con una propria posizione/dimensione reale, mai
 * `display: none`/`hidden` (vedi il commento sopra). `pointer-events: none`
 * lascia che ogni click raggiunga il pulsante sopra di lui nello stesso
 * stacking context, mai lui stesso. **Selettore per tag `select` (non solo
 * `.logicoo-form-select`) deliberato**: il pulsante innescante sotto porta
 * anch'esso la classe `.logicoo-form-select` (per ereditarne box/bordo/
 * freccia) — senza il tag, questa stessa regola renderebbe invisibile e
 * inerte anche il pulsante, non solo il `<select>` reale.
 */
.logicoo-form-combobox select.logicoo-form-select {
	position: absolute;
	inset: 0;
	opacity: 0;
	pointer-events: none;
}

/*
 * Il pulsante innescante porta già le due classi `.logicoo-form-select`
 * (box/bordo/sfondo/freccia SVG condivisi con ogni `<select>` del plugin,
 * comprese le regole di specificità gonfiata contro il tema — vedi sopra) —
 * qui solo il layout testuale specifico di un `<button>`, che di default
 * centrerebbe il testo in alcuni browser.
 */
.logicoo-form-combobox-trigger {
	display: block;
	cursor: pointer;
	text-align: left;
}

/* Stesso sfondo e testo di un `<select>` del plugin, anche con un tema che colora ogni `<button>` (P-07). */
.logicoo-form .logicoo-form-select.logicoo-form-combobox-trigger {
	background-color: var(--lf-input-bg, #fff) !important;
	color: var(--lf-input-color, inherit) !important;
}

.logicoo-form-combobox-trigger-value {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.logicoo-form-combobox-trigger-value--placeholder {
	opacity: 0.6;
}

/*
 * 3 classi (non solo `.logicoo-form-combobox-trigger--invalid`)
 * deliberato: il pulsante porta già `.logicoo-form-select`, la cui regola
 * condivisa più sopra (`.logicoo-form .logicoo-form-select`, 2 classi)
 * dichiara anch'essa `border-color` — a parità/minore specificità questa
 * regola perderebbe silenziosamente contro quella, indipendentemente
 * dall'ordine nel file.
 */
.logicoo-form-select.logicoo-form-combobox-trigger.logicoo-form-combobox-trigger--invalid {
	border-color: var(--lf-error);
}

.logicoo-form-combobox-popup {
	position: absolute;
	z-index: 20;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	display: flex;
	flex-direction: column;
	max-height: 280px;
	overflow: hidden;
	background: var(--lf-input-bg, #fff);
	border-width: var(--lf-input-border-width, 1px);
	border-style: solid;
	border-color: var(--lf-input-border-color, var(--lf-border));
	border-radius: var(--lf-radius);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.logicoo-form-combobox-popup[hidden] {
	display: none;
}

/*
 * Prefisso `.logicoo-form ` (non solo `.logicoo-form-combobox-search`),
 * stesso motivo/pattern già in uso sopra per `.logicoo-form-input`/
 * `-textarea`/`-select`: specificità (0,2,0) contro `input[type="text"], ...`
 * di temi come Salient (0,1,1). Senza il prefisso il `padding-left` che
 * lascia spazio all'icona lente perderebbe contro il `padding` del tema, e
 * il segnaposto "Cerca…" inizierebbe sotto l'icona.
 */
.logicoo-form .logicoo-form-combobox-search {
	flex: 0 0 auto;
	width: 100%;
	padding: 0.6em 0.75em 0.6em calc(15px + 14px + 8px);
	border: none;
	border-bottom: 1px solid var(--lf-input-border-color, var(--lf-border));
	font-family: inherit;
	font-size: var(--lf-input-size, 14px);
	color: var(--lf-input-color, inherit);
	background-color: transparent;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23555555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='7' cy='7' r='5'/%3E%3Cpath d='M11 11l3.5 3.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: 15px center;
	background-size: 14px 14px;
}

.logicoo-form .logicoo-form-combobox-search:focus {
	outline: 2px solid var(--lf-accent);
	outline-offset: -2px;
}

/*
 * Icona lente e segnaposto "Cerca…" spariscono non appena si inizia a
 * scrivere. `:placeholder-shown` è vero solo a campo
 * vuoto (il browser nasconde già da solo il testo del segnaposto appena c'è
 * un valore) — `:not(:placeholder-shown)` nasconde qui anche l'icona nello
 * stesso identico istante, nessuno stato duplicato via JS.
 */
.logicoo-form .logicoo-form-combobox-search:not(:placeholder-shown) {
	background-image: none;
}

.logicoo-form-combobox-listbox {
	flex: 1 1 auto;
	overflow-y: auto;
	margin: 0;
	padding: 4px 0;
	list-style: none;
}

.logicoo-form-combobox-option {
	padding: 0.5em 0.75em;
	cursor: pointer;
}

.logicoo-form-combobox-option[hidden] {
	display: none;
}

.logicoo-form-combobox-option--active {
	background: rgba(0, 0, 0, 0.06);
}

.logicoo-form-combobox-option[aria-selected="true"] {
	background: var(--lf-accent);
	color: #fff;
}

.logicoo-form-combobox-empty {
	padding: 0.5em 0.75em;
	color: var(--lf-desc-color, #666666);
	font-size: 0.9em;
}

.logicoo-form-textarea {
	min-height: 6em;
	resize: vertical;
}

.logicoo-form-file-field {
	display: flex;
	flex-direction: column;
	gap: 0.4em;
}

.logicoo-form-file-input {
	display: block;
	width: 100%;
}

/*
 * Testo informativo (estensioni/numero massimo/dimensione), renderizzato
 * server-side (`Fields\FileField::build_hint_text()`) — visibile anche
 * senza JS. Allineamento a sinistra qui (percorso base, sotto un input
 * normale); ricentrato dentro la dropzone quando l'enhancement JS è attivo,
 * vedi sotto.
 */
.logicoo-form-file-hint {
	margin: 0;
	font-size: 0.8em;
	/* Colore pieno invece di `opacity` (che su sfondi colorati scendeva sotto 4,5:1, WCAG AA). */
	color: var(--lf-file-hint-color, #50575e);
}

.logicoo-form-choice-group {
	display: flex;
	flex-direction: column;
	gap: 0.5em;
	font-size: var(--lf-choice-size, 16px);
}

.logicoo-form-choice-option {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	font-size: inherit !important; /* dimensione dal gruppo (`--lf-choice-size`), non dal `form label` del tema. */
	font-weight: normal !important;
}

/*
 * Dimensione riquadro/cerchio checkbox/radio: l'elemento nativo del
 * browser non risponde a `font-size` per il proprio `width`/`height`
 * (a differenza del testo dell'opzione accanto, già configurabile via
 * `--lf-choice-size` sopra) — variabile distinta e dedicata.
 */
.logicoo-form-choice-input {
	width: var(--lf-choice-input-size, 13px);
	height: var(--lf-choice-input-size, 13px);
	flex-shrink: 0;
}

/*
 * Formattazione del campo Totale: i valori di ripiego qui sotto
 * riproducono il testo ereditato dal contesto.
 */
.logicoo-form-total-value {
	font-size: var(--lf-total-size, 14px);
	font-weight: var(--lf-total-weight, 400);
	font-family: var(--lf-total-font-family, inherit);
	color: var(--lf-total-color, #595959);
}

.logicoo-form-quantity-input {
	max-width: 8em;
}

.logicoo-form-quantity-limits {
	margin-left: 0.5em;
	font-size: 0.85em;
	opacity: 0.75;
}

.logicoo-form-field--quantity .logicoo-form-field-label,
.logicoo-form-quantity-input,
.logicoo-form-quantity-limits {
	display: inline-flex;
	align-items: center;
}

.logicoo-form-quantity-stepper {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
}

.logicoo-form-quantity-stepper-btn {
	width: 2em;
	height: 2em;
	border-radius: var(--lf-radius);
	border: 1px solid var(--lf-border);
	background: #fff !important;
	color: var(--lf-input-color, #1e1e1e) !important;
	cursor: pointer;
	font-size: 1em;
	line-height: 1;
}

.logicoo-form-quantity-stepper-btn:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

/*
 * Alcuni temi (Salient/Nectar) applicano
 * `.row .col h3, .row .col h4 { margin-bottom: var(--nectar-heading-bottom-spacing, -5px); }`,
 * che vincerebbe su `margin: 0` qui sotto e renderebbe imprevedibile lo
 * spazio prima del divisore di sezione. `!important` sul solo
 * `margin-bottom` (non l'intero `margin`, per restare mirati) fa vincere
 * il nostro valore con qualunque tema.
 */
.logicoo-form-field--section .logicoo-form-section-title {
	margin: 0;
	margin-bottom: 0 !important;
	font-size: 1.1em;
}

/*
 * Linea divisoria opzionale del campo Sezione (`show_divider`) — stesso
 * trattamento visivo "leggero" di `.logicoo-form-header-divider` (filo
 * sottile con sfumatura ai due estremi). `margin-top: 0`: il titolo `<h3>`
 * eredita dal tema un `line-height` più generoso di un paragrafo, quindi
 * lo spazio visivo resta simile a quello tra la descrizione del modulo e
 * il suo separatore, anche se i due `margin` non sono uguali in cifra.
 */
.logicoo-form-section-divider {
	border: none;
	height: 1px;
	margin: 0;
	background: linear-gradient(to right, transparent, var(--lf-border, #c3c4c7) 15%, var(--lf-border, #c3c4c7) 85%, transparent);
}

.logicoo-form-field-subcolumns {
	display: flex;
	gap: var(--lf-field-spacing, 18px);
}

.logicoo-form-field-subcolumn {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	gap: var(--lf-label-gap, 8px);
}

@media (max-width: 640px) {
	.logicoo-form-field-subcolumns {
		flex-direction: column;
	}
}

/*
 * ---- Campo "Numero di telefono" con prefisso --------------------------
 * Prefisso (`<select>` o riquadro fisso in sola lettura) + numero, 2
 * controlli affiancati che condividono lo stesso wrapper `.logicoo-form-field`
 * (a differenza di `text2col`, che ha 2 sotto-campi indipendenti con propria
 * etichetta) — un solo campo dal punto di vista dell'utente.
 */
.logicoo-form-tel-group {
	display: flex;
	gap: var(--lf-field-spacing, 18px);
}

/*
 * Selettore qualificato con `.logicoo-form-tel-group` (3 classi, non solo
 * `.logicoo-form-tel-prefix` da sola) — necessario per vincere la
 * specificità di `.logicoo-form .logicoo-form-input, ...,
 * .logicoo-form .logicoo-form-select { width: 100% }` più sopra in
 * questo file (2 classi): `flex: 0 0 auto` ha `flex-basis: auto`, quindi per
 * il dimensionamento sull'asse principale il browser ricade su `width` — se
 * quella regola generica vince, il menu a tendina del prefisso si allarga a
 * riempire l'intera riga flex, schiacciando il campo numero accanto. È un
 * conflitto interno al plugin, non con il tema.
 */
/*
 * Testo del menu a tendina formattato come `.logicoo-form-field-label`:
 * il `<select>` del prefisso
 * mostra un valore scelto dall'utente stesso (es. "FR (+33)"), non un
 * placeholder statico come gli altri campi, quindi ha senso che assomigli
 * più a un'etichetta che a un valore di input generico. `font-size: 1em`
 * della regola generica `.logicoo-form .logicoo-form-select` (più sopra
 * in questo file) viene sovrascritto qui: stessa specificità (3 classi),
 * ma questa regola viene dopo nel foglio.
 */
.logicoo-form .logicoo-form-tel-group .logicoo-form-tel-prefix {
	flex: 0 0 auto;
	width: 12em;
	font-size: var(--lf-label-size, 17px);
	font-weight: var(--lf-label-weight, 600);
	color: var(--lf-label-color, inherit);
	font-family: var(--lf-label-font-family, inherit);
}

.logicoo-form-tel-number {
	flex: 1 1 0;
}

.logicoo-form-tel-prefix-fixed {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	padding: 0.6em 0.75em;
	border-width: var(--lf-input-border-width, 1px);
	border-style: solid;
	border-color: var(--lf-input-border-color, var(--lf-border));
	border-radius: var(--lf-radius);
	background: var(--lf-input-bg, #fff);
	color: var(--lf-input-color, inherit);
}

@media (max-width: 640px) {
	.logicoo-form-tel-group {
		flex-direction: column;
	}

	.logicoo-form .logicoo-form-tel-group .logicoo-form-tel-prefix {
		width: 100%;
	}
}

/*
 * ---- Campo "Ora" -----------------------------------------------------------
 * 2-3 controlli affiancati (ora/minuti[/AM-PM]) che condividono lo stesso
 * wrapper `.logicoo-form-field` — stesso principio del campo Telefono con
 * prefisso sopra.
 */
.logicoo-form-time-group {
	display: flex;
	align-items: center;
	gap: calc(var(--lf-field-spacing, 18px) / 3);
}

.logicoo-form-time-part {
	flex: 1 1 0;
	min-width: 0;
}

@media (max-width: 640px) {
	.logicoo-form-time-group {
		flex-wrap: wrap;
	}

	.logicoo-form-time-part {
		flex: 1 1 30%;
	}
}

/*
 * ---- Dropzone (enhancement JS, file-upload.js) -------------------------
 *
 * `.logicoo-form-dropzone-input` è l'`<input type="file">` REALE
 * (`Fields\FileField::render()`), spostato qui dentro da `file-upload.js` e
 * reso un overlay trasparente a piena dimensione — mai `display:none`/
 * `visibility:hidden` (`opacity:0` soltanto: resta pienamente presente/
 * attivabile per tastiera e screen reader, REQ-T-05). Cliccare in
 * qualunque punto del riquadro attiva quindi l'input nativo direttamente,
 * nessun listener di click sintetico necessario. `.logicoo-form-
 * dropzone-content` è puramente decorativo (`aria-hidden`, icona + testo).
 */
.logicoo-form-dropzone {
	position: relative;
	margin-top: 0.5em;
	padding: 2em 1.5em;
	background: rgba(0, 0, 0, 0.02);
	border: 2px dashed var(--lf-border);
	border-radius: var(--lf-radius);
	text-align: center;
}

.logicoo-form-dropzone-input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.logicoo-form-dropzone-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.6em;
	pointer-events: none;
}

.logicoo-form-dropzone-icon {
	display: inline-flex;
	color: #8c8f94;
}

.logicoo-form-dropzone-text {
	margin: 0;
	font-size: 0.95em;
}

.logicoo-form-dropzone-browse {
	/*
	 * Accent scurito (25% di nero): l'accent puro (#2271b1) su uno sfondo
	 * chiaro colorato di pagina (es. #E8EFE6) scende a ~4,2:1, sotto il
	 * minimo WCAG AA di 4,5:1 per il testo piccolo. Il fallback fisso copre i
	 * browser senza `color-mix()`.
	 */
	color: #135e96;
	color: color-mix(in srgb, var(--lf-accent) 75%, #000);
	text-decoration: underline;
	font-weight: 600;
}

.logicoo-form-dropzone .logicoo-form-file-hint {
	margin-top: 0.6em;
	text-align: center;
	pointer-events: none;
}

.logicoo-form-dropzone:focus-within {
	outline: 2px solid var(--lf-accent);
	outline-offset: 2px;
}

.logicoo-form-dropzone--dragover {
	border-color: var(--lf-accent);
	background: rgba(34, 113, 177, 0.06);
}

.logicoo-form-file-list {
	list-style: none;
	margin: 0.6em 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.35em;
	font-size: 0.85em;
}

.logicoo-form-file-list li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5em;
	padding: 0.3em 0.6em;
	background: rgba(0, 0, 0, 0.04);
	border-radius: var(--lf-radius);
}

.logicoo-form-file-remove {
	border: none;
	background: none !important;
	color: var(--lf-error) !important;
	cursor: pointer;
	font-size: 1em;
	line-height: 1;
	padding: 0;
}

/*
 * ---- Campo "Valutazione" (rating), 2 modalità ---------------------------
 * Utility "nascosto ma focalizzabile" (mai `display:none`/`visibility:hidden`
 * — REQ-T-05): usata sia sul radio nativo di ogni stella sia sul testo
 * accessibile del suo `<label>` (`5 stelle`, ecc.). Nessun overlay, a
 * differenza del pattern già in uso per `.logicoo-form-dropzone-input`: lì
 * serviva intercettare i click su un'area intera, qui la stella visibile è
 * l'intera `<label for="...">`, che attiva il radio nativamente al click
 * senza bisogno di alcun posizionamento assoluto sopra un altro elemento.
 */
.logicoo-form-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.logicoo-form-rating {
	display: flex;
	align-items: center;
	gap: 0.6em;
}

/*
 * Tecnica CSS-only nota per una valutazione a stelle interamente
 * funzionante/accessibile senza JavaScript: `Fields\RatingField::render_stars()`
 * genera il markup in ordine discendente (stella 5 per prima, poi 4, 3, 2,
 * 1) — `flex-direction: row-reverse` la visualizza da sinistra (1 stella) a
 * destra (5 stelle), l'ordine giusto per un lettore occidentale. Il
 * combinatore fratello generale `~` di seguito sfrutta lo stesso ordine
 * discendente: un `:checked` colora se stesso e ogni fratello SUCCESSIVO nel
 * markup, che per costruzione sono esattamente le stelle di valore
 * inferiore (visivamente più a sinistra, "già incluse" nella valutazione
 * scelta) — un solo selettore copre l'intero effetto di riempimento, nessun
 * calcolo JS di quante stelle colorare.
 */
/*
 * `width: 50%`: il gruppo di stelle è per natura stretto — senza questo
 * vincolo occuperebbe il 100% della riga per lo `stretch` predefinito di
 * `.logicoo-form-field` (flex a colonna). Con "Larghezza intera"
 * (`col_width: 1/1`, il default) l'override sotto,
 * `.logicoo-form-field-col--full .logicoo-form-rating--stars`, porta il
 * gruppo al 100% della propria colonna; per "Metà larghezza"/"Un terzo"
 * resta il 50%. Lo slider (`.logicoo-form-rating--slider`, sotto) è
 * sempre al 100%.
 */
/*
 * `justify-content: var(--lf-rating-star-align, left)`: allineamento
 * configurabile del gruppo (sinistra/centro/destra, `SettingsSchema::align_field()`,
 * stesso helper di ogni altro allineamento del progetto). `left`/`center`/
 * `right` sono qui valori **fisici** di `justify-content` (CSS Box Alignment,
 * supportati da ogni browser moderno) — funzionano correttamente così come
 * sono anche dentro un contenitore `row-reverse`, a differenza dei valori
 * *logici* `flex-start`/`flex-end` (che si invertono con la direzione):
 * nessuna traduzione server-side necessaria tra il valore salvato
 * (`left`/`center`/`right`) e quello CSS, sono la stessa identica stringa.
 */
/*
 * `gap: var(--lf-rating-star-gap, 4px)`: `gap` e non `margin-right`, che
 * lascerebbe uno spazio residuo dopo l'ultima stella. 4px di default
 * (circa `0.15em` della stella di default, 25px), fisso in px: non scala
 * con la dimensione della stella.
 */
.logicoo-form-rating--stars {
	flex-direction: row-reverse;
	justify-content: var(--lf-rating-star-align, left);
	gap: var(--lf-rating-star-gap, 4px);
	width: 50%;
}

.logicoo-form-field-col--full .logicoo-form-rating--stars {
	width: 100%;
}

.logicoo-form-rating-star-icon {
	display: inline-block;
	font-size: var(--lf-rating-star-size, 25px) !important;
	line-height: 1;
	color: var(--lf-border, #c3c4c7);
	cursor: pointer;
}

.logicoo-form-rating-star-icon::before {
	content: "\2605"; /* ★ */
}

.logicoo-form-rating-star-input:checked ~ .logicoo-form-rating-star-icon {
	color: var(--lf-rating-star-color, #f5a623);
}

/*
 * Anteprima al passaggio del mouse: solo quando NESSUNA stella è ancora
 * selezionata — altrimenti allontanare il mouse dal gruppo dopo aver già
 * scelto una valutazione farebbe "sparire" temporaneamente il colore reale
 * (`:checked` da solo, senza `:hover` sul contenitore, resta comunque
 * sempre vero e vincerebbe per cascata: nessun conflitto reale, ma la
 * condizione è scritta esplicitamente per chiarezza — l'anteprima hover
 * è puramente aggiuntiva, mai l'unico modo di vedere lo stato scelto).
 */
.logicoo-form-rating--stars:hover .logicoo-form-rating-star-icon:hover,
.logicoo-form-rating--stars:hover .logicoo-form-rating-star-icon:hover ~ .logicoo-form-rating-star-icon {
	color: var(--lf-rating-star-color, #f5a623);
}

.logicoo-form-rating-star-input:focus-visible + .logicoo-form-rating-star-icon {
	outline: 2px solid var(--lf-accent);
	outline-offset: 2px;
	border-radius: 2px;
}

/* `width: 100%`: lo slider occupa tutta la larghezza disponibile nella riga. */
.logicoo-form-rating--slider {
	gap: 0.75em;
	width: 100%;
}

/*
 * Slider completamente ristilizzato (barra + pallino), non solo il colore:
 * i browser non espongono una proprietà CSS unificata per colorare la sola
 * barra/il solo pallino di un `<input type="range">` nativo — l'unica via
 * cross-browser è `appearance: none` più gli pseudo-elementi proprietari di
 * ciascun motore (`::-webkit-slider-runnable-track`/`-thumb`,
 * `::-moz-range-track`/`-thumb`), stessa tecnica richiesta da qualunque
 * slider con colori personalizzati. `cursor` esplicito su ogni pseudo
 * elemento: `appearance: none` fa perdere anche il cursore nativo "resize"
 * di alcuni browser.
 *
 * "Trattino a ogni punto" (mostra come si dividono i 10 valori possibili):
 * disegnato come sfondo
 * della sola barra con un `repeating-linear-gradient` invece di affidarsi ai
 * tick nativi di `<input list="...">` — quei tick nativi non sono garantiti
 * renderizzare in modo coerente una volta che la barra è già `appearance:
 * none` (comportamento diverso da motore a motore), un gradiente disegnato a
 * mano resta invece identico ovunque. 9 intervalli uguali (10 valori
 * possibili, min 1 - max 10) coprono l'intera larghezza: un trattino di 2px
 * ogni `100% / 9`, colore fisso semi-trasparente (non legato al colore barra
 * configurabile, sempre visibile sopra qualunque colore scelto).
 */
.logicoo-form-rating-slider-input {
	flex: 1 1 auto;
	width: 100%;
	height: 6px;
	margin: 0;
	appearance: none;
	-webkit-appearance: none;
	background: transparent;
	cursor: pointer;
}

.logicoo-form-rating-slider-input:focus-visible {
	outline: 2px solid var(--lf-accent);
	outline-offset: 2px;
}

.logicoo-form-rating-slider-input::-webkit-slider-runnable-track {
	height: 6px;
	border-radius: 999px;
	background-color: var(--lf-rating-track-color, #c3c4c7);
	background-image: repeating-linear-gradient(to right, rgba(0, 0, 0, 0.25) 0, rgba(0, 0, 0, 0.25) 2px, transparent 2px, transparent calc(100% / 9));
}

.logicoo-form-rating-slider-input::-moz-range-track {
	height: 6px;
	border-radius: 999px;
	background-color: var(--lf-rating-track-color, #c3c4c7);
	background-image: repeating-linear-gradient(to right, rgba(0, 0, 0, 0.25) 0, rgba(0, 0, 0, 0.25) 2px, transparent 2px, transparent calc(100% / 9));
}

/*
 * Solo WebKit/Blink (Chrome, Edge, Safari) richiede questo aggiustamento:
 * il pallino, a differenza di Firefox, non si centra automaticamente
 * sull'altezza della barra quando le due dimensioni differiscono — un
 * `margin-top` negativo pari a metà della differenza lo ricentra. Barra
 * fissa a 6px (sopra), pallino di dimensione configurabile: la formula resta
 * corretta per qualunque valore scelto dall'utente in Impostazioni.
 */
.logicoo-form-rating-slider-input::-webkit-slider-thumb {
	appearance: none;
	-webkit-appearance: none;
	width: var(--lf-rating-thumb-size, 20px);
	height: var(--lf-rating-thumb-size, 20px);
	margin-top: calc((6px - var(--lf-rating-thumb-size, 20px)) / 2);
	border: none;
	border-radius: 50%;
	background: var(--lf-rating-thumb-color, #2271b1);
	cursor: pointer;
}

.logicoo-form-rating-slider-input::-moz-range-thumb {
	width: var(--lf-rating-thumb-size, 20px);
	height: var(--lf-rating-thumb-size, 20px);
	border: none;
	border-radius: 50%;
	background: var(--lf-rating-thumb-color, #2271b1);
	cursor: pointer;
}

/*
 * `hidden` di default lato server (`Fields\RatingField::render_slider()`) —
 * `assets/frontend/js/rating-field.js` lo rivela solo dopo aver popolato il
 * valore corrente: senza JS resta assente (mai un numero non aggiornato
 * mostrato accanto allo slider mentre l'utente lo trascina, il che sarebbe
 * fuorviante — più onesto nessun numero che uno sbagliato). Lo slider nativo
 * resta comunque interamente funzionante senza JS in ogni caso.
 */
/*
 * `font-size`/`font-weight` configurabili, default 24px/600.
 */
.logicoo-form-rating-slider-value {
	min-width: 2em;
	text-align: center;
	font-weight: var(--lf-rating-value-weight, 600);
	font-size: var(--lf-rating-value-size, 24px);
}

/*
 * ---- Campo "Firma digitale" (SG-002/SG-003) ------------------------------
 * Colore/spessore del tratto, sfondo e altezza configurabili
 * (`docs/ARCHITECTURE.md` §17.2.2), come lo stile del pulsante "Cancella"
 * (dimensione/peso/font/allineamento/margine interno, sotto).
 */
.logicoo-form-signature-canvas {
	display: block;
	width: 100%;
	height: var(--lf-signature-height, 150px);
	border-width: var(--lf-input-border-width, 1px);
	border-style: solid;
	border-color: var(--lf-input-border-color, var(--lf-border));
	border-radius: var(--lf-radius);
	background: var(--lf-signature-bg-color, #ffffff);
	/* Impedisce lo scroll della pagina mentre si disegna su schermo touch — senza questo il
	 * browser intercetterebbe il gesto come scroll prima che il JS lo veda (Pointer Events). */
	touch-action: none;
	cursor: crosshair;
}

/*
 * Allineamento del pulsante "Cancella": `text-align` sul contenitore, non
 * `justify-content` su un flex — più semplice qui perché non c'è bisogno di
 * un contesto flex per un solo elemento inline-block (`<button>`, display
 * nativo), stesso principio già in uso per `.logicoo-form-label`/
 * `.logicoo-form-input` (`--lf-label-align`/`--lf-input-align`) più sopra
 * in questo file. Il canvas resta `width:100%` indipendentemente da questo
 * valore (dichiarazione esplicita, non influenzata da `text-align`).
 */
.logicoo-form-signature {
	text-align: var(--lf-signature-clear-align, left);
}

/*
 * Aspetto in sintonia con i pulsanti di navigazione (`.logicoo-form-button`/
 * `--prev`, stesso raggio angoli condiviso, stesso bordo/schema colore
 * "secondario" di default) ma con controlli di dimensione/spaziatura
 * interamente indipendenti: questo pulsante deve restare visibilmente
 * più piccolo di Avanti/Indietro/Invia,
 * mai condividerne le impostazioni globali (`Settings\SettingsSchema`,
 * gruppo "Campo Firma digitale", non "Pulsanti di navigazione"). Colori
 * (sfondo/testo/hover) invece per-formulario, stesso schema di
 * Avanti/Indietro/Invia (`Form\FormMetaSchema`, gruppo `buttons`,
 * `Frontend\FormRenderer::render_form_style()`).
 *
 * `!important` su `font-size`/`font-weight`/`padding` come per
 * `.logicoo-form-button--next`/`--prev`/`--submit` più sotto: stesso
 * elemento (`<button>`), quindi stessa regola generica del tema (Salient)
 * da battere.
 */
.logicoo-form-signature-clear {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 8px;
	border: 1px solid var(--lf-border);
	border-radius: var(--lf-button-radius, var(--lf-radius));
	background: var(--lf-clear-bg, #ffffff) !important;
	color: var(--lf-clear-text-color, #464646) !important;
	font-family: var(--lf-signature-clear-font-family, inherit);
	font-size: var(--lf-signature-clear-size, 12px) !important;
	font-weight: var(--lf-signature-clear-weight, 400) !important;
	padding: var(--lf-signature-clear-padding-v, 6px) var(--lf-signature-clear-padding-h, 14px) !important;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

/*
 * Stesso rinforzo di specificità di `.logicoo-form-button` sopra, stesso
 * motivo: questo `<button type="button">` non condivide la classe
 * `.logicoo-form-button`, e senza questa regola il tema (Salient) gli
 * imporrebbe il proprio `border-radius`.
 */
.logicoo-form-signature-clear.logicoo-form-signature-clear.logicoo-form-signature-clear.logicoo-form-signature-clear {
	border-radius: var(--lf-button-radius, var(--lf-radius)) !important;
}

.logicoo-form-signature-clear:hover,
.logicoo-form-signature-clear:focus-visible {
	background: var(--lf-clear-bg-hover, var(--lf-clear-bg, #ffffff)) !important;
	color: var(--lf-clear-text-hover, var(--lf-clear-text-color, #464646)) !important;
}

.logicoo-form-signature-noscript {
	color: var(--lf-error, #b32d2e);
	font-size: 0.9em;
}

/* ---- Navigazione / pulsanti -------------------------------------------- */

.logicoo-form-nav {
	display: flex;
	align-items: center;
	justify-content: var(--lf-submit-align, flex-start);
	gap: var(--lf-nav-gap, 10px);
	margin-top: var(--lf-nav-margin-top, 25px);
	flex-wrap: wrap;
}

/*
 * `:not([hidden])`: in un form multi-pagina il
 * widget reCAPTCHA resta **sempre presente nel DOM** (un solo elemento,
 * condiviso da tutte le pagine, non uno per pagina) — `form-core.js`
 * (`updateWizardUi()`) lo nasconde con l'attributo `hidden` su ogni pagina
 * tranne l'ultima, non lo rimuove. Senza `:not([hidden])` questo selettore
 * sarebbe puramente strutturale e azzererebbe il margine di
 * `.logicoo-form-nav` su **ogni** pagina del wizard, non solo sull'ultima.
 */
.logicoo-form-recaptcha:not([hidden]) + .logicoo-form-nav {
	margin-top: 0;
}

.logicoo-form-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid transparent;
	border-radius: var(--lf-button-radius, var(--lf-radius));
	font-family: var(--lf-nav-btn-font-family, inherit);
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

/*
 * Selettore con specificità gonfiata deliberatamente (stessa tecnica dello
 * stato `:hover` di `.logicoo-form-button--submit` più sotto). Il tema
 * Salient usa `body[data-form-submit="regular"] .container-wrap
 * button[type="submit"], ...`, specificità (0,3,2) con `!important`: un
 * `!important` a (0,1,0), o anche a (0,3,0), perde (a parità di classi
 * vincono i suoi 2 elementi in più). 4 ripetizioni (0,4,0) vincono già
 * sulla colonna delle classi. Vale per `padding` e `border-radius`.
 */
.logicoo-form-button.logicoo-form-button.logicoo-form-button.logicoo-form-button {
	padding: var(--lf-btn-margin-v, 12px) var(--lf-btn-margin-h, 24px) !important;
	border-radius: var(--lf-button-radius, var(--lf-radius)) !important;
}

/*
 * `!important` deliberato su alcune proprietà qui sotto (solo su questi
 * pulsanti): temi e page builder applicano ai pulsanti di invio regole con
 * specificità/ordine sufficienti a vincere su `width` ("Pulsante 'Invia' a
 * larghezza piena"), `background`, `font-size` e `font-weight` (per
 * esempio un `font-weight: 600` generico su ogni `<button>`).
 *
 * Sfondo e colore del testo con `!important` su ogni pulsante a cui il plugin dà colori propri (Invia, Avanti,
 * Indietro, Cancella della firma, Salva e continua, "×" della Selezione, pulsante del combobox, stepper della
 * Quantità, rimozione di un file, "Modifica" della revisione), a riposo e al passaggio del mouse (P-07):
 * Twenty Twenty-One colora ogni `<button>` (`button:not(:hover):not(:active):not(.has-text-color)` e
 * `:not(.has-background)`, specificità 0,3,1) con sfondo scuro e testo chiaro, e con una sola delle due
 * proprietà del plugin il pulsante diventa illeggibile. Ogni regola `:hover`/`:focus-visible` è più specifica della regola a riposo dello
 * stesso pulsante, quindi fra le due dichiarazioni `!important` vince ancora il colore al passaggio del mouse.
 */
.logicoo-form-button--submit {
	background: var(--lf-submit-bg, var(--lf-accent)) !important;
	color: var(--lf-submit-text-color, var(--lf-accent-contrast)) !important;
	font-size: var(--lf-submit-size, 14px) !important;
	font-weight: var(--lf-submit-weight, 700) !important;
	width: var(--lf-submit-width, auto) !important;
}

/*
 * Colore testo a riposo con specificità (0,3,0), sopra un eventuale `!important` meno specifico del tema
 * (Salient: `button[type="submit"]`, 0,1,1). Resta sotto la regola `:hover` più sotto (0,5,0).
 */
.logicoo-form-form .logicoo-form-button--submit.logicoo-form-button--submit {
	color: var(--lf-submit-text-color, var(--lf-accent-contrast)) !important;
}

/*
 * Selettore con specificità gonfiata deliberatamente (`.logicoo-form-form`
 * come scope + la classe target ripetuta 3 volte: stesso identico effetto di
 * `.logicoo-form-button--submit`, ma conta 3 volte ai fini della
 * specificità CSS — tecnica nota, nessuna classe reale da aggiungere al
 * markup). La regola `:hover` di alcuni temi usa un selettore più
 * specifico (elemento + più classi) **e** `!important`: tra due
 * dichiarazioni `!important` vince quella con specificità maggiore, non
 * l'ultima dichiarata, quindi il solo `!important` non basta.
 */
.logicoo-form-form .logicoo-form-button--submit.logicoo-form-button--submit.logicoo-form-button--submit:hover,
.logicoo-form-form .logicoo-form-button--submit.logicoo-form-button--submit.logicoo-form-button--submit:focus-visible {
	background: var(--lf-submit-bg-hover, var(--lf-submit-bg, var(--lf-accent))) !important;
	color: var(--lf-submit-text-hover, var(--lf-submit-text-color, var(--lf-accent-contrast))) !important;
}

.logicoo-form-button--next {
	background: var(--lf-next-bg, var(--lf-accent)) !important;
	color: var(--lf-next-text-color, var(--lf-accent-contrast)) !important;
	/* `!important` deliberato — stesso conflitto di tema di `.logicoo-form-button--submit` sopra (stesso elemento `<button>`, stessa regola generica del tema). */
	font-size: var(--lf-next-size, 14px) !important;
	font-weight: var(--lf-next-weight, 700) !important;
	width: var(--lf-next-width, auto) !important;
}

.logicoo-form-button--next:hover,
.logicoo-form-button--next:focus-visible {
	background: var(--lf-next-bg-hover, var(--lf-next-bg, var(--lf-accent))) !important;
	color: var(--lf-next-text-hover, var(--lf-next-text-color, var(--lf-accent-contrast))) !important;
}

.logicoo-form-button--prev {
	background: var(--lf-prev-bg, transparent) !important;
	color: var(--lf-prev-text-color, inherit) !important;
	border-color: var(--lf-border);
	/* `!important` deliberato — stesso conflitto di tema di `.logicoo-form-button--submit` sopra. */
	font-size: var(--lf-prev-size, 14px) !important;
	font-weight: var(--lf-prev-weight, 400) !important;
}

.logicoo-form-button--prev:hover,
.logicoo-form-button--prev:focus-visible {
	background: var(--lf-prev-bg-hover, var(--lf-prev-bg, transparent)) !important;
	color: var(--lf-prev-text-hover, var(--lf-prev-text-color, inherit)) !important;
}

/*
 * `--lf-next-submit-margin-v`/`-h` ("Pulsanti 'Avanti'/'Invia' affiancati —
 * margine verticale/orizzontale", `Settings\SettingsSchema`), generate da
 * `Frontend\Assets::style_variables()`. Distinto da `--lf-btn-margin-v`/`-h` (padding generico
 * di ogni pulsante, sopra): questa coppia deve sovrascriverlo specificamente
 * quando "Avanti"/"Invia" sono affiancati a "Indietro" (NON a larghezza
 * piena) — mai quando sono da soli a piena larghezza, caso in cui il
 * padding generico resta quello giusto. `data-full-submit`/`data-full-next`
 * su `.logicoo-form-nav` (emessi da `Frontend\FormRenderer::render()`,
 * sempre presenti indipendentemente dalla pagina corrente del wizard — a
 * differenza della classe `--prev-link` sotto, che invece riflette lo stato
 * dinamico) bastano per il selettore, nessun nuovo markup necessario.
 *
 * Classe target ripetuta 3 volte (stessa tecnica del blocco
 * `.logicoo-form-button` sopra): senza questo, a parità di specificità
 * con la regola generica del padding sopra deciderebbe l'ordine nel
 * foglio, fragile a future modifiche.
 */
.logicoo-form-nav[data-full-submit="0"] .logicoo-form-button--submit.logicoo-form-button--submit.logicoo-form-button--submit,
.logicoo-form-nav[data-full-next="0"] .logicoo-form-button--next.logicoo-form-button--next.logicoo-form-button--next {
	padding: var(--lf-next-submit-margin-v, 12px) var(--lf-next-submit-margin-h, 24px) !important;
}

/*
 * Quando il pulsante adiacente a "Indietro" è a larghezza piena — "Invia"
 * sull'ultima pagina (`submit_full_width`) o "Avanti" su una pagina
 * intermedia (`next_full_width`), entrambe per-formulario — "Indietro" va da
 * solo su una riga sopra di esso (flex-wrap, dato che i due non stanno più
 * affiancati): qui diventa un link testuale sottolineato invece di un
 * pulsante bordato. **Non** un
 * attributo statico lato server: quale dei due pulsanti (Avanti/Invia) sia
 * effettivamente visibile dipende dalla pagina corrente del wizard, uno
 * stato che solo `assets/frontend/js/form-core.js` conosce
 * (`updateWizardUi()`) — la classe `--prev-link` è quindi applicata/rimossa
 * da lì, mai da qui. Su una pagina intermedia con "Avanti" **non** a
 * larghezza piena, "Indietro" resta un normale pulsante bordato, invariato.
 */
.logicoo-form-button--prev.logicoo-form-button--prev-link {
	background: none !important;
	border-color: transparent;
	padding: 0;
	text-decoration: underline;
	/*
	 * `width: 100%` (non `flex-basis`, che in `flex-direction: column` —
	 * media query mobile sotto — governerebbe l'altezza invece della
	 * larghezza: `flex-basis: auto`, il default qui, delega a `width` come
	 * dimensione sull'asse principale in riga, senza quell'effetto
	 * collaterale in colonna) costringe questo pulsante a occupare da solo
	 * l'intera riga di `.logicoo-form-nav` (flex-wrap), spingendo il
	 * fratello successivo (Avanti/Invia) a capo — **sempre**, non solo
	 * quando quel fratello è già a larghezza piena per conto suo: "Indietro"
	 * sta sopra Avanti/Invia anche su una pagina intermedia con "Avanti a
	 * larghezza piena" disattivato.
	 */
	width: 100%;
	/*
	 * Senza questo, il testo si centra nella riga intera (eredita
	 * `justify-content: center` dalla regola base `.logicoo-form-button`,
	 * pensata per un pulsante pieno) invece di restare allineato a sinistra
	 * come un link, dato che l'elemento occupa l'intera riga (`width: 100%`
	 * sopra).
	 */
	justify-content: flex-start;
}

/*
 * `padding: 0` sopra perderebbe contro
 * `.logicoo-form-button.logicoo-form-button.logicoo-form-button.logicoo-form-button`
 * (padding a specificità (0,4,0) con `!important`, vedi sopra) con
 * qualunque tema: "Indietro" terrebbe un padding invisibile (area di click
 * più larga del testo, scostamento dal margine) invece di aderire al testo
 * come un link. Stessa tecnica, un livello sopra (5 ripetizioni), solo per
 * la proprietà in conflitto.
 */
.logicoo-form-button--prev.logicoo-form-button--prev-link.logicoo-form-button--prev-link.logicoo-form-button--prev-link.logicoo-form-button--prev-link {
	padding: 0 !important;
}

.logicoo-form-button--prev.logicoo-form-button--prev-link:hover,
.logicoo-form-button--prev.logicoo-form-button--prev-link:focus-visible {
	background: none !important;
	color: var(--lf-prev-text-hover, var(--lf-prev-text-color, inherit)) !important;
}

.logicoo-form-button:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/*
 * Senza questa regola l'attributo `hidden` impostato da `form-core.js` su
 * Indietro/Avanti/Invia (`updateWizardUi()`) non ha alcun effetto visivo:
 * `display: inline-flex` sopra è una regola author-CSS, che nel cascade
 * vince sempre sullo stile di default del browser per `[hidden]`
 * (`display: none`), indipendentemente da specificità/ordine — stesso
 * principio di `.logicoo-form-page[hidden]` più sotto.
 */
.logicoo-form-button[hidden] {
	display: none;
}

.logicoo-form-button--submit[data-logicoo-form-sending] {
	opacity: 0.75;
	cursor: progress;
}

@media (max-width: 640px) {
	.logicoo-form-nav {
		flex-direction: column;
		align-items: stretch;
	}

	.logicoo-form-button {
		width: 100%;
	}
}

/* ---- Stato "pagina non attiva" applicato da form-core.js -------------- */

.logicoo-form-page[hidden] {
	display: none;
}

/*
 * ---- Riepilogo dal vivo (RD-001) --------------------------------------
 *
 * Costruito e inserito interamente da `assets/frontend/js/summary.js` (mai
 * emesso da `Frontend\FormRenderer`: puro enhancement JS, §12.4). Posizione
 * "In linea" (default) è normale flusso a piena larghezza, nessuna regola
 * dedicata necessaria oltre lo spazio verticale sotto; "Colonna laterale"
 * usa un semplice `float` sullo stesso contenitore form esistente (nessuna
 * nuova griglia CSS) alla stessa soglia di 640px usata per
 * `.logicoo-form-field-col--half`/`--third` sopra — sotto quella soglia
 * il float si disattiva e il box degrada automaticamente a "In linea" in
 * cima al form (`docs/ARCHITECTURE.md` §12.4).
 */

.logicoo-form-summary {
	/* margin-top:50px — separa visivamente il riepilogo dal resto dei campi del form sopra di esso. */
	margin: 50px 0 1.5em;
	padding: 1em 1.25em;
	border: 1px solid var(--lf-summary-border, var(--lf-border));
	border-radius: var(--lf-radius);
	background: var(--lf-summary-bg, #f6f7f7);
}

.logicoo-form-summary-title {
	margin: 0 0 0.6em;
	font-size: var(--lf-summary-title-size, 1em);
	font-weight: var(--lf-summary-title-weight, 700);
	font-family: var(--lf-summary-title-font-family, inherit);
	color: var(--lf-summary-title-color, inherit);
}

.logicoo-form-summary-empty {
	margin: 0;
	font-size: 0.9em;
	color: #646970;
}

.logicoo-form-summary-list {
	margin: 0;
}

.logicoo-form-summary-list[hidden] {
	display: none;
}

.logicoo-form-summary-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1em;
	padding: 0.4em 0;
	border-top: 1px solid var(--lf-summary-border, var(--lf-border));
}

.logicoo-form-summary-row:first-child {
	border-top: none;
}

.logicoo-form-summary-row dt,
.logicoo-form-review-row dt {
	font-size: var(--lf-summary-label-size, inherit);
	font-weight: var(--lf-summary-label-weight, 600);
	font-family: var(--lf-summary-label-font-family, inherit);
	color: var(--lf-summary-label-color, inherit);
}

.logicoo-form-summary-row dd,
.logicoo-form-review-row dd {
	font-size: var(--lf-summary-value-size, inherit);
	font-weight: var(--lf-summary-value-weight, 400);
	font-family: var(--lf-summary-value-font-family, inherit);
	color: var(--lf-summary-value-color, inherit);
}

.logicoo-form-summary-row dd {
	margin: 0;
	text-align: right;
	word-break: break-word;
}

@media (min-width: 641px) {
	.logicoo-form-summary--sidebar {
		float: right;
		width: min(280px, 35%);
		margin: 50px 0 1.5em 1.5em;
	}

	/*
	 * Senza questo clearfix, se il box (float) è più alto del resto del
	 * contenuto della pagina corrente del wizard, l'altezza di
	 * `.logicoo-form-form` collassa attorno al solo contenuto non-float e
	 * il float "esce" oltre il suo bordo inferiore — nessun impatto in
	 * modalità "In linea" (nessun elemento float in quel caso, questa
	 * regola non ha alcun effetto visivo).
	 */
	.logicoo-form-form::after {
		content: "";
		display: table;
		clear: both;
	}
}

/*
 * ---- Pagina di revisione prima dell'invio (RD-002) --------------------
 *
 * Inserita da `assets/frontend/js/summary.js` come `.logicoo-form-page`
 * reale (§12.5): eredita già titolo/spaziatura da `.logicoo-form-page`/
 * `.logicoo-form-page-title` sopra, qui solo le righe etichetta/valore e
 * il pulsante "Modifica" per riga. Stesso pattern visivo del box RD-001
 * (`.logicoo-form-summary-row` sopra), volutamente non condiviso via
 * classe comune: i 2 contesti hanno margini/contenitori diversi (un box
 * autonomo vs. una sezione di pagina già stilizzata).
 */

.logicoo-form-review-empty {
	margin: 0;
	color: inherit;
}

.logicoo-form-review-list {
	margin: 0;
}

.logicoo-form-review-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.5em 1em;
	padding: 0.6em 0;
	border-top: 1px solid var(--lf-summary-border, var(--lf-border));
}

.logicoo-form-review-row:first-child {
	border-top: none;
}

.logicoo-form-review-row dd {
	margin: 0;
	display: flex;
	align-items: baseline;
	gap: 0.75em;
	text-align: right;
}

.logicoo-form-review-value {
	word-break: break-word;
}

.logicoo-form-review-edit {
	background: none !important;
	border: none;
	padding: 0;
	color: var(--lf-accent) !important;
	text-decoration: underline;
	cursor: pointer;
	font-size: 0.9em;
	white-space: nowrap;
}

.logicoo-form-review-edit:hover,
.logicoo-form-review-edit:focus-visible {
	opacity: 0.75;
}

/*
 * ---- Salva e Continua (SV-002/SV-003) ----
 *
 * Stile configurabile come per i campi "Valutazione"/"Firma digitale". Non condivide la
 * classe base `.logicoo-form-button` (a differenza di Avanti/Indietro/
 * Invia): stesso principio già seguito da `.logicoo-form-signature-clear`,
 * ridichiarato qui interamente indipendente — colori per-form
 * (`Form\FormMetaSchema`, gruppo `buttons`), dimensione/peso/font/margine
 * interno globali (`Settings\SettingsSchema`, gruppo `style`, sottogruppo
 * "Pulsante Salva e Continua").
 */

.logicoo-form-button--save-continue {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--lf-border);
	border-radius: var(--lf-button-radius, var(--lf-radius));
	background: var(--lf-save-continue-bg, #ffffff) !important;
	color: var(--lf-save-continue-text-color, #464646) !important;
	font-family: var(--lf-save-continue-font-family, inherit);
	font-size: var(--lf-save-continue-size, 13px) !important;
	font-weight: var(--lf-save-continue-weight, 400) !important;
	padding: var(--lf-save-continue-padding-v, 10px) var(--lf-save-continue-padding-h, 16px) !important;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

/*
 * Stesso rinforzo di specificità di `.logicoo-form-signature-clear` (vedi
 * più sopra in questo file, stesso motivo): questo `<button
 * type="button">` non condivide la classe `.logicoo-form-button`, quindi
 * non beneficia della sua regola `border-radius`.
 */
.logicoo-form-button--save-continue.logicoo-form-button--save-continue.logicoo-form-button--save-continue.logicoo-form-button--save-continue {
	border-radius: var(--lf-button-radius, var(--lf-radius)) !important;
}

.logicoo-form-button--save-continue:hover,
.logicoo-form-button--save-continue:focus-visible {
	background: var(--lf-save-continue-bg-hover, var(--lf-save-continue-bg, #ffffff)) !important;
	color: var(--lf-save-continue-text-hover, var(--lf-save-continue-text-color, #464646)) !important;
}

/*
 * Quando "Invia"/"Avanti" sono a larghezza
 * piena (`data-full-submit`/`data-full-next` su `.logicoo-form-nav`, già
 * emessi da `Frontend\FormRenderer::render()`) e il pulsante "Salva e
 * continua" è presente, i due devono stare sulla stessa riga con una
 * ripartizione 30%/70% invece che il pulsante Avanti/Invia da solo al 100%
 * (comportamento di default, invariato quando "Salva e continua" non è
 * attivo — il selettore non produce alcun effetto se quell'elemento non
 * esiste nel markup). `calc(... - metà del gap)` su entrambi i lati: senza
 * questo, 30% + 70% più il `gap` di `.logicoo-form-nav` fra i due
 * elementi supererebbe il 100% disponibile, facendo andare a capo la coppia
 * nonostante lo spazio dichiarato sembri combaciare esattamente.
 */
.logicoo-form-nav[data-full-submit="1"] .logicoo-form-button--save-continue,
.logicoo-form-nav[data-full-next="1"] .logicoo-form-button--save-continue {
	width: calc(30% - var(--lf-nav-gap, 10px) / 2);
	flex: 0 0 auto;
}

.logicoo-form-nav[data-full-submit="1"] .logicoo-form-button--save-continue ~ .logicoo-form-button--submit,
.logicoo-form-nav[data-full-next="1"] .logicoo-form-button--save-continue ~ .logicoo-form-button--next {
	width: calc(70% - var(--lf-nav-gap, 10px) / 2) !important;
}

/*
 * Sotto i 640px `.logicoo-form-nav` passa a `flex-direction: column`
 * (media query più sopra in questo file), ma "Salva e continua" non
 * condivide la classe base `.logicoo-form-button` (vedi commento JS in
 * `injectButton()`) quindi non riceve `width: 100%` da quella regola e
 * resterebbe al 30% della regola desktop qui sopra; il fratello
 * "Avanti"/"Invia" resterebbe al 70%. Selettori ripetuti identici (stessa
 * specificità di quelli desktop) in una nuova `@media` dichiarata **dopo** in
 * questo file: a parità di specificità e `!important` vince chi viene
 * dichiarato per ultimo nel foglio, indipendentemente dall'annidamento in un
 * media query — un'aggiunta nel blocco `@media` esistente più sopra (che
 * precede queste regole nel file) avrebbe perso comunque.
 */
@media (max-width: 640px) {
	.logicoo-form-button--save-continue {
		width: 100% !important;
	}

	.logicoo-form-nav[data-full-submit="1"] .logicoo-form-button--save-continue ~ .logicoo-form-button--submit,
	.logicoo-form-nav[data-full-next="1"] .logicoo-form-button--save-continue ~ .logicoo-form-button--next {
		width: 100% !important;
	}
}

.logicoo-form-save-continue-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1em;
	z-index: 100000;
}

.logicoo-form-save-continue-backdrop[hidden] {
	display: none;
}

.logicoo-form-save-continue-dialog {
	background: #ffffff;
	color: #1e1e1e;
	border-radius: var(--lf-radius);
	padding: 1.5em;
	max-width: 90vw;
	width: 22em;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
}

.logicoo-form-save-continue-dialog h3 {
	margin: 0 0 0.5em;
	font-size: 1.1em;
}

.logicoo-form-save-continue-dialog p {
	margin: 0 0 1em;
	font-size: 0.9em;
	color: #50575e;
}

.logicoo-form-save-continue-dialog label {
	display: block;
	margin-bottom: 0.4em;
	font-size: 0.9em;
}

.logicoo-form-save-continue-dialog input[type="email"] {
	display: block;
	width: 100%;
	padding: 0.5em 0.7em;
	border: 1px solid var(--lf-border);
	border-radius: var(--lf-radius);
	box-sizing: border-box;
	font-size: 1em;
}

.logicoo-form-save-continue-error {
	margin-top: 0.6em;
	color: var(--lf-error);
	font-size: 0.85em;
}

.logicoo-form-save-continue-actions {
	display: flex;
	justify-content: flex-end;
	gap: 0.6em;
	margin-top: 1.2em;
}

/*
 * "Annulla" e "Invia il link" occupano
 * ciascuno il 50% della riga, insieme la larghezza intera del dialog —
 * `calc(50% - metà del gap)` su entrambi, stesso principio già applicato
 * alla ripartizione 30%/70% di "Salva e continua"/Avanti/Invia nella barra
 * di navigazione: senza sottrarre metà gap per lato, 50% + 50% più il gap
 * fra i due pulsanti supererebbe il 100% disponibile e li manderebbe a capo.
 */
.logicoo-form-save-continue-actions .logicoo-form-button--save-continue-cancel,
.logicoo-form-save-continue-actions .logicoo-form-button--save-continue-confirm {
	flex: 0 0 calc(50% - 0.3em);
}