/**
 * Stile del form di default: la struttura, comune a tutti i siti.
 *
 * ⚠️ Solo per il form dello shortcode. I temi con form propri non
 * caricano questo file: lo stile è del tema, e questo plugin non deve
 * avere opinioni su come appare un sito.
 *
 * ⚠️⚠️ **Qui non c'è nessun colore scritto a mano, e le misure che un
 * sito vuole cambiare passano da una variabile `--li-*`.** Restano fissi
 * solo bordi da 1px, i piccoli spazi interni e l'honeypot: struttura. I
 * valori sotto sono i predefiniti; ogni sito li sovrascrive nella sua
 * skin, `assets/css/skins/<codice-del-sito>.css`, che è solo un blocco di
 * variabili e viene accodata dopo questo file. Un colore scritto qui
 * direttamente sarebbe un colore che nessuna skin può cambiare, e lo si
 * scoprirebbe sul quinto sito.
 *
 * ⚠️⚠️ **Ogni variabile nuova nasce con il predefinito che riproduce la
 * resa di prima.** Le skin accendono le cose — ombre, barre di
 * avanzamento, due colonne — i predefiniti le lasciano spente. Così
 * aggiungere una possibilità per un sito non cambia l'aspetto degli altri
 * quattro, che lo scoprirebbero solo guardandosi.
 *
 * Tutto sotto `.li-form`, così niente esce dal form e va a toccare la
 * pagina intorno.
 *
 * ⚠️⚠️ **Campi, bottoni e caselle hanno il prefisso `.li-form` anche per
 * pesare di più.** GeneratePress, come quasi ogni tema, scrive le sue
 * regole su `input[type="text"]`, `select`, `button` — un elemento più un
 * attributo — che battono una classe sola: sulla home di TutelaTrader i
 * campi di testo uscivano con gli angoli vivi e il bordo del tema accanto
 * alle tendine arrotondate. Con due classi vince il form, su qualsiasi
 * tema. Un tema che vuole cambiarlo lo fa con un selettore suo più
 * specifico, come fa la landing di avvocatoaiello (`.lp-card .li-*`),
 * dichiarato dopo questo file.
 */

.li-form {
    /* --- misure ------------------------------------------------------- */
    --li-gap: 1rem;
    --li-radius: 6px;
    --li-max-width: 42rem;
    --li-input-padding: 0.6rem 0.7rem;
    --li-input-min-height: 0;
    --li-input-border-width: 1px;
    --li-button-padding: 0.7rem 1.4rem;
    --li-button-min-height: 0;
    --li-textarea-min-height: 6rem;
    --li-field-gap: 0.35rem;
    --li-check-size: auto;

    /* Le colonne dei campi dentro un passaggio. `100%` = una colonna sola,
       com'era. Una larghezza minima (es. `210px`) dà due colonne dove ci
       stanno e una dove non ci stanno: nessuna media query. */
    --li-field-min: 100%;
    --li-field-col-gap: var(--li-gap);
    /* `contents` fa entrare Nome e Cognome nella griglia del passaggio,
       accanto agli altri campi, invece di stare in una riga loro. */
    --li-row-display: flex;

    /* --- caratteri ---------------------------------------------------- */
    --li-font: inherit;
    --li-font-size: inherit;
    --li-input-font-size: inherit;
    --li-label-size: 0.9rem;
    --li-label-weight: 500;
    --li-small-size: 0.85rem;
    --li-label-line-height: inherit;
    --li-error-line-height: inherit;
    --li-button-font-size: inherit;
    --li-button-weight: 600;
    --li-step-title-size: inherit;
    --li-step-title-weight: 600;
    --li-step-title-gap: 0;

    /* --- colori ------------------------------------------------------- */
    --li-text: inherit;
    --li-label-color: inherit;
    --li-input-text: inherit;
    --li-check-text: inherit;
    --li-step-title-color: inherit;
    --li-muted: #c9ced6;
    --li-border: #c9ced6;
    --li-input-bg: #fff;
    --li-accent: #1a3d6d;
    --li-accent-hover: #1a3d6d;
    --li-accent-text: #fff;
    --li-focus: #1a3d6d;
    --li-focus-border: var(--li-border);
    --li-check-accent: inherit;
    --li-required: var(--li-error);
    --li-error: #b3261e;
    --li-error-bg: #fdecea;
    --li-error-text: var(--li-error);
    --li-error-border: transparent;
    --li-success: #1b5e20;
    --li-success-bg: #e8f5e9;
    --li-success-border: transparent;
    --li-message-bg: #eef1f5;

    /* --- stati e dettagli (spenti per predefinito) --------------------- */
    --li-focus-outline: 2px solid var(--li-focus);
    --li-focus-ring: none;
    --li-select-appearance: auto;
    --li-select-arrow: none;
    --li-select-padding-right: 0.7rem;
    --li-button-shadow: none;
    --li-button-grow: 0 1 auto;
    --li-ghost-grow: 0 1 auto;
    --li-actions-wrap: wrap;
    --li-button-disabled-opacity: 0.6;
    --li-button-loading-bg: var(--li-accent);
    --li-ghost-bg: transparent;
    --li-ghost-text: var(--li-accent);
    --li-ghost-border: var(--li-accent);
    --li-ghost-hover-bg: transparent;
    --li-ghost-hover-text: var(--li-accent-hover);
    --li-ghost-hover-border: var(--li-accent-hover);
    --li-next-suffix: none;
    --li-prev-prefix: none;
    --li-message-border-width: 0;
    --li-message-accent-width: 0;
    --li-success-icon: none;

    /* --- avanzamento --------------------------------------------------- */
    --li-progress-display: flex;
    --li-progress-gap: 0.5rem 1.25rem;
    --li-progress-margin: 0 0 0.5rem;
    --li-progress-bar: 0;
    --li-progress-bar-display: none;
    --li-progress-track: var(--li-muted);
    --li-progress-fill: var(--li-accent);
    --li-progress-step-direction: row;
    --li-progress-num-display: inline-flex;
    --li-progress-label-display: inline;
    --li-progress-label-transform: inherit;
    --li-progress-label-spacing: inherit;

    display: flex;
    flex-direction: column;
    gap: var(--li-gap);
    max-width: var(--li-max-width);
    font-family: var(--li-font);
    font-size: var(--li-font-size);
    color: var(--li-text);
}

.li-title {
    margin: 0;
}

/*
 * ⚠️ Il passaggio è una griglia, anche con una colonna sola: con
 * `--li-field-min: 100%` si comporta come la colonna flex di prima, e una
 * skin ottiene le due colonne cambiando una variabile. Il `min(100%, …)`
 * impedisce a una colonna minima più larga del contenitore di far
 * sforare il form su un telefono.
 *
 * ⚠️ Un browser che non sa fare griglia su un `fieldset` (Safari molto
 * vecchi) lo tratta come blocco: campi uno sotto l'altro, che è la resa
 * di sempre. Nessun campo va perso.
 */
.li-step {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--li-field-min)), 1fr));
    gap: var(--li-gap) var(--li-field-col-gap);
    align-items: start;
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

.li-step[hidden] {
    display: none;
}

/* Quello che in due colonne deve restare largo quanto il passaggio. */
.li-step > .li-actions,
.li-step > .li-check,
.li-step > .li-hp,
.li-step > .li-field-textarea,
.li-step-messaggio > .li-field {
    grid-column: 1 / -1;
}

.li-step-title {
    padding: 0;
    margin: 0 0 var(--li-step-title-gap);
    font-size: var(--li-step-title-size);
    font-weight: var(--li-step-title-weight);
    color: var(--li-step-title-color);
}

.li-row {
    display: var(--li-row-display);
    flex-wrap: wrap;
    gap: var(--li-gap) var(--li-field-col-gap);
}

.li-row .li-field {
    flex: 1 1 12rem;
}

.li-field {
    display: flex;
    flex-direction: column;
    gap: var(--li-field-gap);
    min-width: 0;
}

.li-form .li-label {
    font-size: var(--li-label-size);
    font-weight: var(--li-label-weight);
    line-height: var(--li-label-line-height);
    color: var(--li-label-color);
}

.li-required {
    color: var(--li-required);
}

.li-form .li-input {
    width: 100%;
    box-sizing: border-box;
    min-height: var(--li-input-min-height);
    padding: var(--li-input-padding);
    border: var(--li-input-border-width) solid var(--li-border);
    border-radius: var(--li-radius);
    font: inherit;
    font-size: var(--li-input-font-size);
    background-color: var(--li-input-bg);
    color: var(--li-input-text);
}

.li-form .li-input:focus-visible {
    outline: var(--li-focus-outline);
    outline-offset: 1px;
    box-shadow: var(--li-focus-ring);
    border-color: var(--li-focus-border);
}

/*
 * ⚠️ La freccia della tendina è un'immagine di sfondo della skin: con
 * `appearance: none` il browser toglie la sua, e senza una al suo posto
 * la tendina sembrerebbe un campo di testo. Le due variabili vanno
 * cambiate insieme.
 */
.li-form select.li-input {
    appearance: var(--li-select-appearance);
    -webkit-appearance: var(--li-select-appearance);
    background-image: var(--li-select-arrow);
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 14px;
    padding-right: var(--li-select-padding-right);
}

.li-form .li-textarea {
    resize: vertical;
}

/* Senza `.li-form`: due classi bastano a battere `input[type="text"]` del
   tema, e un tema che ridisegna i campi (`.lp-card .li-input`) decide lui
   anche il bordo dell'errore. */
.li-has-error .li-input {
    border-color: var(--li-error);
}

.li-form .li-error {
    color: var(--li-error);
    font-size: var(--li-small-size);
    line-height: var(--li-error-line-height);
}

.li-check {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    font-size: var(--li-label-size);
    line-height: 1.4;
    color: var(--li-check-text);
}

.li-form .li-check input {
    margin-top: 0.2rem;
    flex: 0 0 auto;
    width: var(--li-check-size);
    height: var(--li-check-size);
    accent-color: var(--li-check-accent);
}

/*
 * ⚠️ Con `--li-actions-wrap: wrap-reverse` e i due `flex` della skin
 * (principale `1000 1 …`, «Indietro» `1 1 auto`) i bottoni stanno su una
 * riga dove ci stanno, col principale che prende quasi tutto lo spazio; sul
 * telefono vanno a capo col principale **sopra** e tutti e due larghi
 * quanto il form. Nessuna media query: decide la larghezza del form.
 */
.li-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: var(--li-actions-wrap);
}

.li-form .li-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    min-height: var(--li-button-min-height);
    padding: var(--li-button-padding);
    border: 1px solid var(--li-accent);
    border-radius: var(--li-radius);
    background: var(--li-accent);
    color: var(--li-accent-text);
    font: inherit;
    font-size: var(--li-button-font-size);
    font-weight: var(--li-button-weight);
    cursor: pointer;
    box-shadow: var(--li-button-shadow);
}

/*
 * ⚠️ Stesso peso delle regole di un tema (`.lp-card .li-button`): se
 * pesasse di più — con un `:not()` dentro, per esempio — scavalcherebbe
 * il `flex: 1` della landing di avvocatoaiello e i suoi bottoni si
 * ridurrebbero alla larghezza del testo. È successo, e l'ha preso il
 * confronto degli stili calcolati, non l'occhio.
 */
.li-form .li-button {
    flex: var(--li-button-grow);
}

.li-form .li-button:hover,
.li-form .li-button:focus-visible {
    background: var(--li-accent-hover);
    border-color: var(--li-accent-hover);
}

.li-form .li-button:disabled {
    opacity: var(--li-button-disabled-opacity);
    cursor: progress;
}

.li-form .li-is-loading {
    background: var(--li-button-loading-bg);
    border-color: var(--li-button-loading-bg);
}

.li-form .li-button-ghost {
    flex: var(--li-ghost-grow);
    background: var(--li-ghost-bg);
    color: var(--li-ghost-text);
    border-color: var(--li-ghost-border);
    box-shadow: none;
}

.li-form .li-button-ghost:hover,
.li-form .li-button-ghost:focus-visible {
    background: var(--li-ghost-hover-bg);
    color: var(--li-ghost-hover-text);
    border-color: var(--li-ghost-hover-border);
}

/* Le frecce di «Continua» e «Indietro», se la skin le vuole. */
.li-form .li-button[data-li-next]::after {
    content: var(--li-next-suffix);
}

.li-form .li-button[data-li-prev]::before {
    content: var(--li-prev-prefix);
}

.li-form .li-button.li-is-loading::after {
    content: "";
    display: inline-block;
    width: 0.75em;
    height: 0.75em;
    margin-left: 0.5em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    vertical-align: -0.1em;
    animation: li-spin 0.7s linear infinite;
}

@keyframes li-spin {
    to { transform: rotate(360deg); }
}

/* ⚠️ Chi ha chiesto meno animazioni non deve vedere una rotella girare. */
@media (prefers-reduced-motion: reduce) {
    .li-button.li-is-loading::after {
        animation: none;
    }
}

.li-message:empty {
    display: none;
}

.li-message {
    margin: 0;
    padding: var(--li-input-padding);
    border-radius: var(--li-radius);
    background: var(--li-message-bg);
}

.li-message-error {
    background: var(--li-error-bg);
    color: var(--li-error-text);
    border: var(--li-message-border-width) solid var(--li-error-border);
    border-left: var(--li-message-accent-width) solid var(--li-error);
}

.li-message-success {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--li-success-bg);
    color: var(--li-success);
    border: var(--li-message-border-width) solid var(--li-success-border);
}

.li-message-success::before {
    content: var(--li-success-icon);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2.25em;
    height: 2.25em;
    border-radius: 50%;
    background: var(--li-success);
    color: var(--li-success-bg);
    font-weight: 700;
}

/**
 * ⚠️ L'honeypot.
 *
 * Nascosto via CSS e **mai** con `type="hidden"`: i bot riconoscono i
 * campi hidden e li lasciano stare, mentre riempiono i campi di testo
 * che trovano nel markup.
 *
 * ⚠️ Niente `display: none` né `visibility: hidden`: sono le due
 * proprietà che un bot un po' sveglio controlla per decidere quali campi
 * saltare. Si toglie dal flusso e lo si manda fuori schermo, che a video
 * è lo stesso risultato e da fuori non si distingue da un campo vero.
 */
.li-hp {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/**
 * L'indicatore di avanzamento.
 *
 * Due forme, scelte dalla skin. Predefinita: numero nel cerchio e
 * etichetta, in fila. Con `--li-progress-display: grid` e una
 * `--li-progress-bar` diversa da zero diventa una barra a segmenti, uno
 * per passaggio, colorati fino a quello corrente.
 *
 * ⚠️ La barra è il `::before` del passaggio e non un bordo: un bordo non
 * si arrotonda come un segmento. Con altezza zero non occupa niente.
 */
.li-progress {
    display: var(--li-progress-display);
    flex-wrap: wrap;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: var(--li-progress-gap);
    margin: var(--li-progress-margin);
    padding: 0;
    list-style: none;
    counter-reset: none;
}

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

.li-progress-step {
    display: flex;
    flex-direction: var(--li-progress-step-direction);
    align-items: center;
    gap: 0.5rem;
    font-size: var(--li-small-size);
    color: var(--li-muted);
}

.li-progress-step::before {
    content: "";
    display: var(--li-progress-bar-display);
    align-self: stretch;
    height: var(--li-progress-bar);
    border-radius: 99px;
    background: var(--li-progress-track);
}

.li-progress-step.li-is-current::before,
.li-progress-step.li-is-done::before {
    background: var(--li-progress-fill);
}

.li-progress-num {
    display: var(--li-progress-num-display);
    align-items: center;
    justify-content: center;
    width: 1.6em;
    height: 1.6em;
    border: 1px solid currentColor;
    border-radius: 50%;
    font-weight: 600;
    flex: 0 0 auto;
}

.li-progress-label {
    display: var(--li-progress-label-display);
    text-transform: var(--li-progress-label-transform);
    letter-spacing: var(--li-progress-label-spacing);
}

.li-progress-step.li-is-current {
    color: var(--li-accent);
    font-weight: 600;
}

.li-progress-step.li-is-done {
    color: var(--li-success);
}

/* I campi configurati dal CRM: stessa forma degli altri, nessuna
   eccezione. Il tema li riconosce da `.li-field-<tipo>` se vuole
   trattarli diversamente. */
.li-field-textarea .li-textarea {
    min-height: var(--li-textarea-min-height);
}