/* Lunatika Factory — gpfb-overrides.css
   VESTE CANONICA dei form GP Form Builder — FONTE UNICA, theme-aware.

   ARCHITETTURA A 3 LIVELLI (frontend hardening, agosto 2026):
     THEME     → token (core.css + tokens-demo-alias.css): colori, raggi, motion.
     CONTAINER → varianti di contesto per SOLO layout/densità (.mag-nl qui;
                 .lf-modal in components.css; .ev-book-form in single-evento.css).
     GPFB      → questa sezione canonica, scope .gpfb-frontend-wrapper: veste
                 completa di OGNI controllo, valida ovunque un form appaia,
                 senza wrapper dedicato (es. candidature nel format hub).

   ORDINE GARANTITO: questo foglio dichiara la base del plugin
   (gpfb-frontend-css) come DIPENDENZA (inc/enqueue.php) → stampa sempre dopo
   frontend.css. !important solo dove il plugin lo impone (submit, checkbox,
   captcha input). VIETATI selettori per pagina o per form-id: le differenze di
   contesto vivono nei container, l'identità dei form nei data del markup.

   Dark/light: i token del tema e gli alias flippano da soli; i blocchi
   [data-theme="light"] coprono solo i valori composti (alpha su fondi chiari).
   NB: mai scrivere asterisco-slash nei commenti (chiude il blocco a meta' e il
   parser scarta la regola successiva). */

/* ============================================================
   LIVELLO GPFB — VESTE CANONICA (ogni form, ovunque)
   ============================================================ */

/* Contenitore-anchor degli esiti (#gpfb-form-{id}): l'atterraggio del
   fallback no-JS non deve finire sotto l'header sticky. */
.gpfb-form-scope { scroll-margin-top: 90px; }

.gpfb-frontend-wrapper {
	background: var(--bg-card);
	border: 1px solid var(--lf-card-border-strong);
	border-radius: var(--r-xl);
	padding: clamp(24px, 4vw, 40px);
	color: var(--fg);
	font-family: var(--font-body);
}

.gpfb-form-heading {
	font-family: var(--font-display);
	font-weight: 600;
	text-transform: none;
	letter-spacing: 0;
	font-size: clamp(24px, 3vw, 30px);
	color: var(--fg);
	border-bottom: 1px solid var(--lf-divider);
}

.gpfb-row { margin-bottom: 20px; }

.gpfb-row label {
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--fg);
	margin-bottom: 8px;
}
.gpfb-req-mark {
	color: var(--accent-2);
	margin-left: 0; /* la spaziatura è lo spazio non separabile nel markup */
}

/* Controlli testuali: tutti i type del renderer + select + textarea. */
.gpfb-frontend-wrapper input[type="text"],
.gpfb-frontend-wrapper input[type="email"],
.gpfb-frontend-wrapper input[type="number"],
.gpfb-frontend-wrapper input[type="tel"],
.gpfb-frontend-wrapper input[type="date"],
.gpfb-frontend-wrapper select,
.gpfb-frontend-wrapper textarea {
	background: rgba(var(--fg-rgb), 0.05);
	border: 1px solid rgba(var(--accent-2-rgb), 0.7); /* >=3:1 su card (gate contrasto) */
	border-radius: var(--r-sm);
	color: var(--fg);
	font-family: var(--font-body);
	font-size: 16px; /* ≥16px: niente zoom auto su iOS */
	transition: border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), background-color var(--t-base) var(--ease);
}
.gpfb-frontend-wrapper ::placeholder { color: var(--fg-muted); }

.gpfb-frontend-wrapper input:focus,
.gpfb-frontend-wrapper select:focus,
.gpfb-frontend-wrapper textarea:focus {
	outline: none;
	border-color: var(--accent-2);
	box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.22);
}

.gpfb-frontend-wrapper textarea { height: 140px; }

/* Select: freccia on-theme (avorio nel dark; controparte light sotto). */
.gpfb-frontend-wrapper select {
	background-color: rgba(var(--fg-rgb), 0.05);
	background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23c4956a%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-13%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2013l131.3%20131.3c3.6%203.6%207.9%205.4%2013%205.4s9.3-1.8%2013-5.4L287%2095.2a17.6%2017.6%200%200%200%205.4-13%2017.6%2017.6%200%200%200-5.4-13z%22%2F%3E%3C%2Fsvg%3E");
}
.gpfb-frontend-wrapper select option {
	background: var(--bg-card);
	color: var(--fg);
}

/* Captcha matematica. */
.gpfb-captcha-wrap {
	background: rgba(var(--fg-rgb), 0.04);
	border: 1px solid var(--lf-card-border-strong);
	border-radius: var(--r-sm);
}
.gpfb-captcha-q { color: var(--fg); }
.gpfb-frontend-wrapper .gpfb-captcha-input { color: var(--fg) !important; /* vince sul viola !important del plugin */ }
.gpfb-help-text { color: var(--fg-muted); }
/* Testo di AIUTO per campo (proprieta' help_text): sotto l'etichetta, peso e
   dimensione minori — testo di servizio, mai maiuscoletto ne' grassetto. */
.gpfb-field-help {
	display: block;
	margin: -2px 0 8px;
	font-size: 12.5px;
	font-weight: 400;
	line-height: 1.5;
	text-transform: none;
	letter-spacing: 0;
	color: var(--fg-muted);
}
/* Nel blocco consenso l'aiuto sta sotto testo e link, distanziato. */
.gpfb-consent-text .gpfb-field-help { margin: 6px 0 0; }

/* Consenso (Accettazione/GDPR): il testo è spezzato in più etichette con i
   link in mezzo, così cliccare il link non cambia la spunta. Le parti devono
   ricomporsi come un unico paragrafo, non come blocchi separati. */
.gpfb-consent-wrap { align-items: flex-start; }
.gpfb-consent-text {
	font-size: 13px;
	line-height: 1.5;
	color: var(--fg-muted);
}
/* Specificità pari a .gpfb-row label, che altrimenti imporrebbe il maiuscolo
   delle etichette di campo: il consenso è testo da LEGGERE (e contiene un
   link), non un'etichetta. */
.gpfb-row .gpfb-consent-part,
.gpfb-consent-text .gpfb-consent-part {
	display: inline !important;
	margin: 0 !important;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
	cursor: pointer;
}
.gpfb-consent-text a {
	color: var(--fg);
	text-decoration: underline;
	text-decoration-color: var(--accent-2);
	text-underline-offset: 2px;
}
.gpfb-consent-text a:hover { color: var(--accent-2); }
/* Link privacy STRUTTURALE (proprieta' del campo, non markup nella label):
   su RIGA PROPRIA sotto il testo del consenso — due bersagli interattivi
   visivamente e semanticamente distinti, nessun separatore necessario. */
.gpfb-privacy-link {
	display: block;
	margin-top: 4px;
	width: fit-content;
}
.gpfb-consent-text a:focus-visible {
	outline: 2px solid var(--accent-2);
	outline-offset: 2px;
	border-radius: 2px;
}

/* Checkbox (GDPR + gruppi). */
.gpfb-checkbox-wrap input[type="checkbox"] {
	width: 16px !important; /* vince sul 18px !important del plugin */
	height: 16px;
	accent-color: var(--accent);
}
.gpfb-checkbox-wrap label {
	color: var(--fg-muted);
	font-size: 13px;
	line-height: 1.5;
}

/* Campo file: il BOTTONE NATIVO ("Scegli file") vestito col design system.
   Il controllo resta quello del browser — niente picker custom, niente input
   nascosto: tastiera, screen reader, nome file e FormData invariati.
   Le due regole sono SEPARATE di proposito: standard e WebKit legacy sono
   pseudo-elementi diversi, e un browser che non riconosce l'uno non deve
   scartare l'altro (in una selector list unica basterebbe un selettore ignoto
   a invalidare l'intera regola). */
.gpfb-frontend-wrapper input[type="file"]::file-selector-button {
	margin: 0 12px 0 0;
	padding: 8px 16px;
	background: rgba(var(--accent-2-rgb), 0.14);
	border: 1px solid rgba(var(--accent-2-rgb), 0.7);
	border-radius: var(--r-sm);
	color: var(--fg);
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.gpfb-frontend-wrapper input[type="file"]::-webkit-file-upload-button {
	margin: 0 12px 0 0;
	padding: 8px 16px;
	background: rgba(var(--accent-2-rgb), 0.14);
	border: 1px solid rgba(var(--accent-2-rgb), 0.7);
	border-radius: var(--r-sm);
	color: var(--fg);
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.gpfb-frontend-wrapper input[type="file"]:hover::file-selector-button {
	background: rgba(var(--accent-2-rgb), 0.24);
	border-color: var(--accent-2);
}
.gpfb-frontend-wrapper input[type="file"]:hover::-webkit-file-upload-button {
	background: rgba(var(--accent-2-rgb), 0.24);
	border-color: var(--accent-2);
}
/* Focus da tastiera: il focus ring vive sull'INPUT (il bottone nativo non e'
   un tab stop separato), quindi qui basta rinforzare il bordo del bottone. */
.gpfb-frontend-wrapper input[type="file"]:focus-visible::file-selector-button {
	border-color: var(--accent-2);
}
.gpfb-frontend-wrapper input[type="file"]:focus-visible::-webkit-file-upload-button {
	border-color: var(--accent-2);
}

/* Campo file. */
.gpfb-frontend-wrapper input[type="file"] {
	background: rgba(var(--fg-rgb), 0.03);
	border: 1px dashed rgba(var(--accent-2-rgb), 0.75); /* >=3:1 su card (gate contrasto) */
	border-radius: var(--r-sm);
	color: var(--fg-muted);
}
.gpfb-frontend-wrapper input[type="file"]:hover {
	background: rgba(var(--fg-rgb), 0.06);
	border-style: solid;
	border-color: var(--accent-2);
}
.gpfb-frontend-wrapper input[type="file"]:focus {
	outline: none;
	border-style: solid;
	border-color: var(--accent-2);
	box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.22);
}
.gpfb-file-msg { color: var(--fg-muted); }
.gpfb-file-msg.is-ok {
	display: flex;
	align-items: center;
	gap: 8px;
}
/* Stati del messaggio file via CLASSE (il JS non scrive più colori inline). */
.gpfb-file-msg.is-ok    { color: var(--lf-seats-ok); }
.gpfb-file-msg.is-error { color: var(--lf-seats-crit); }

/* Submit: borgogna pieno — vince sul #fff/#000 !important del plugin. */
.gpfb-submit-btn {
	background: var(--accent) !important;
	border: 1px solid var(--accent) !important;
	border-radius: var(--r-sm);
	color: var(--lf-on-accent) !important;
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.14em;
	transition: background-color var(--t-base) var(--ease), border-color var(--t-base) var(--ease), transform var(--t-base) var(--ease), opacity var(--t-base) var(--ease);
}
.gpfb-submit-btn:hover {
	background: var(--accent-hover) !important;
	border-color: var(--accent-hover) !important;
	color: var(--lf-on-accent) !important;
	transform: translateY(-1px);
}
.gpfb-submit-btn:active {
	background: var(--accent-hover) !important;
	border-color: var(--accent-hover) !important;
	color: var(--lf-on-accent) !important;
}
.gpfb-submit-btn:focus-visible {
	outline: 2px solid var(--accent-2);
	outline-offset: 2px;
}
.gpfb-submit-btn:disabled,
.gpfb-submit-btn[aria-busy="true"] {
	opacity: 0.6;
	cursor: default;
	transform: none;
}

/* Esiti (successo / errore) — on-theme, AA su card. */
.gpfb-success-msg {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	background: rgba(var(--lf-seats-ok-rgb), 0.12);
	border: 1px solid var(--lf-seats-ok);
	border-radius: var(--r-md);
	color: var(--fg);
	font-family: var(--font-body);
}
/* Il segno di conferma (spunta CSS pura, nessuna emoji) e' definito nella base
   del plugin: qui prende il colore d'esito del tema. */
.gpfb-success-msg::before,
.gpfb-file-msg.is-ok::before { border-color: var(--lf-seats-ok); }
.gpfb-error-msg {
	background: rgba(var(--lf-seats-crit-rgb), 0.10);
	border-left: 3px solid var(--lf-seats-crit);
	border-radius: var(--r-md);
	color: var(--fg);
	font-family: var(--font-body);
}

/* Errore per-campo (Constraint Validation API, presentazione JS). */
.gpfb-field-error {
	display: block;
	margin-top: 6px;
	font-size: 12.5px;
	line-height: 1.45;
	color: var(--lf-seats-crit);
}
.gpfb-frontend-wrapper input[aria-invalid="true"],
.gpfb-frontend-wrapper select[aria-invalid="true"],
.gpfb-frontend-wrapper textarea[aria-invalid="true"] {
	border-color: var(--lf-seats-crit);
}

/* Microcopy riselezione file (old input: i file non sono ripopolabili). */
.gpfb-reselect-note {
	display: block;
	margin-top: 6px;
	font-size: 12.5px;
	color: var(--lf-seats-warn);
}

/* Riga limiti sotto il campo: il LAYOUT (flex, gap, min-height anti-salto)
   vive nella base del plugin — qui solo i colori del tema. */
.gpfb-char-counter { color: var(--fg-muted); }
.gpfb-char-min { color: var(--fg-muted); }
.gpfb-char-counter.is-near-max { color: var(--lf-seats-warn); }
.gpfb-char-counter.is-warning  { color: var(--lf-seats-crit); }

/* Sold-out (solo prenotazioni). */
.gpfb-soldout-msg { color: var(--fg-muted); font-family: var(--font-body); }

/* Nota Mailchimp. */
.gpfb-mailchimp-notice {
	background: rgba(var(--fg-rgb), 0.04);
	border-left: 3px solid var(--accent-2);
	border-radius: var(--r-sm);
}
.gpfb-mailchimp-notice p { color: var(--fg-muted); }
.gpfb-mailchimp-notice a { color: var(--fg); text-decoration-color: var(--accent-2); }
.gpfb-mailchimp-notice a:hover { color: var(--accent-2); text-decoration-color: var(--accent-2); }

/* Viewport stretti (375px): densità senza perdere i 16px anti-zoom. */
@media (max-width: 420px) {
	.gpfb-frontend-wrapper { padding: 20px 16px; border-radius: var(--r-lg); }
	.gpfb-row { margin-bottom: 16px; }
}

/* Light: solo i valori composti che non flippano bene via alpha su fondo chiaro. */
[data-theme="light"] .gpfb-frontend-wrapper input[type="text"],
[data-theme="light"] .gpfb-frontend-wrapper input[type="email"],
[data-theme="light"] .gpfb-frontend-wrapper input[type="number"],
[data-theme="light"] .gpfb-frontend-wrapper input[type="tel"],
[data-theme="light"] .gpfb-frontend-wrapper input[type="date"],
[data-theme="light"] .gpfb-frontend-wrapper select,
[data-theme="light"] .gpfb-frontend-wrapper textarea {
	background: #fff;
	border-color: rgba(var(--accent-2-rgb), 0.8); /* >=3:1 su card light */
}
[data-theme="light"] .gpfb-frontend-wrapper select {
	background-color: #fff;
	background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%238f6240%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-13%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2013l131.3%20131.3c3.6%203.6%207.9%205.4%2013%205.4s9.3-1.8%2013-5.4L287%2095.2a17.6%2017.6%200%200%200%205.4-13%2017.6%2017.6%200%200%200-5.4-13z%22%2F%3E%3C%2Fsvg%3E");
}
[data-theme="light"] .gpfb-frontend-wrapper input:focus,
[data-theme="light"] .gpfb-frontend-wrapper select:focus,
[data-theme="light"] .gpfb-frontend-wrapper textarea:focus {
	border-color: var(--accent);
	box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.15);
}
[data-theme="light"] .gpfb-frontend-wrapper input[type="file"] {
	background: #fff;
}

/* ============================================================
   LIVELLO CONTAINER — .mag-nl (sidebar Taccuino, sidebar Hall of
   Fame, box bando Edizione): variante COMPATTA a pillola.
   Solo layout/densità: i COLORI vengono dalla veste canonica.
   ============================================================ */

.mag-nl .gpfb-frontend-wrapper {
	background: transparent;
	border: 0;
	box-shadow: none;
	padding: 0;
	margin: 0;
	max-width: none;
}
.mag-nl .gpfb-form-heading,
.mag-nl .gpfb-form-description { display: none; }
.mag-nl .gpfb-row { margin: 0 0 10px; }
.mag-nl .gpfb-frontend-wrapper label {
	font-size: 11.5px;
	color: var(--fg-muted);
	text-transform: none;
	letter-spacing: 0;
	font-weight: 600;
}
.mag-nl .gpfb-frontend-wrapper input[type="text"],
.mag-nl .gpfb-frontend-wrapper input[type="email"] {
	padding: 12px 18px;
	border-radius: var(--r-pill);
	font-size: 13px;
}
/* Consenso GDPR compatto (neutralizza il margin-left inline del plugin). */
.mag-nl .gpfb-checkbox-wrap {
	gap: 8px;
	font-size: 10.5px;
	line-height: 1.45;
}
.mag-nl .gpfb-checkbox-wrap input[type="checkbox"] {
	width: 15px !important;
	height: 15px;
	margin: 1px 0 0;
}
.mag-nl .gpfb-checkbox-wrap label { margin-left: 0 !important; font-weight: 400; font-size: 10.5px; }
.mag-nl .gpfb-submit-btn {
	width: 100%;
	margin-top: 4px;
	padding: 12px 20px;
	border-radius: var(--r-pill);
	font-size: 11px;
	letter-spacing: 0.16em;
}