/**
 * Skin di tutelatrader.it: solo variabili.
 *
 * Il plugin la accoda dopo `form.css` quando il codice del sito nel
 * catalogo (Impostazioni → Siti nel CRM) è `tutelatrader`. Qui non ci
 * sono selettori oltre a `.li-form`: la struttura è di `form.css`, i
 * contenitori (card dell'hero, riquadro della pagina broker, popup) sono
 * del tema o del plugin che li stampa. Un selettore in più qui sarebbe
 * grafica di un contenitore infilata nel plugin.
 *
 * I valori vengono dal rifacimento dei tre form fatto con Claude Design
 * (`docs/references/Form tutelatrader.dc.html`, «Token visivi»), che
 * dichiara di tenere colori e grafica dell'attuale:
 *
 *   navy #0f2b5b · blu #0f7bd1 (CTA, focus, avanzamento) · hover #0b68b4
 *   testo campi #1c2b41 · etichette #31415a · secondario #6b7a8f
 *   bordi #d8e0ea · superficie #f4f6f9 · errore #d1332e · successo #157f4d
 *   raggio 10px · campi 50px · pulsanti 52px
 *
 * ⚠️ Il carattere è quello del sito (`inherit`): il disegno usa Hanken
 * Grotesk solo come segnaposto, e dice di sostituirlo con quello in uso.
 *
 * ⚠️ **Un blu solo, deciso: `#0f7bd1`, hover `#0b68b4`**, ovunque — CTA,
 * focus, avanzamento, e anche il popup (TT Popup usa questa skin, e il
 * pulsante del suo primo pannello ha lo stesso blu). Prima convivevano
 * `#066aab` nell'avanzamento del WPForms e `#0080d5` nel popup: tre blu
 * per lo stesso gesto. Cambiarlo è `--li-accent`, `--li-accent-hover`,
 * `--li-focus`, `--li-focus-border`, `--li-check-accent` e
 * `--li-progress-fill`, qui sotto, più il pulsante CTA del popup.
 */

.li-form {
    /* misure */
    --li-gap: 18px;
    --li-field-col-gap: 20px;
    --li-radius: 10px;
    --li-max-width: none;
    --li-input-padding: 13px 14px;
    --li-input-min-height: 50px;
    --li-input-border-width: 1.5px;
    --li-button-padding: 0 26px;
    --li-button-min-height: 52px;
    --li-textarea-min-height: 104px;
    --li-field-gap: 7px;
    --li-check-size: 20px;

    /* due colonne dove ci stanno (hero, pagina broker), una sul telefono */
    --li-field-min: 210px;
    --li-row-display: contents;

    /* caratteri */
    --li-font: inherit;
    --li-input-font-size: 16px;   /* 16px: sotto, iOS ingrandisce la pagina al tocco */
    --li-label-size: 14px;
    --li-label-weight: 600;
    --li-small-size: 13px;
    --li-label-line-height: 1.3;
    --li-error-line-height: 1.35;  /* l'interlinea del tema spezzava gli errori su due righe larghe */
    --li-button-font-size: 16px;
    --li-button-weight: 700;
    --li-step-title-size: 17px;
    --li-step-title-weight: 700;
    --li-step-title-gap: 18px;

    /* colori */
    --li-text: #41536e;
    --li-label-color: #31415a;
    --li-input-text: #1c2b41;
    --li-check-text: #4a5a72;
    --li-step-title-color: #0f2b5b;
    --li-muted: #8494a8;
    --li-border: #d8e0ea;
    --li-input-bg: #ffffff;
    --li-accent: #0f7bd1;
    --li-accent-hover: #0b68b4;
    --li-accent-text: #ffffff;
    --li-focus: #0f7bd1;
    --li-focus-border: #0f7bd1;
    --li-check-accent: #0f7bd1;
    --li-required: #d1332e;
    --li-error: #d1332e;
    --li-error-bg: #fdf2f1;
    --li-error-text: #8d2a26;
    --li-error-border: #f3cdca;
    --li-success: #157f4d;
    --li-success-bg: #f3faf6;
    --li-success-border: #cfe9da;
    --li-message-bg: #f4f6f9;

    /* stati e dettagli */
    --li-focus-outline: none;
    --li-focus-ring: 0 0 0 3px rgba(15, 123, 209, 0.18);
    --li-select-appearance: none;
    --li-select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%236b7a8f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --li-select-padding-right: 40px;
    --li-button-shadow: 0 6px 16px rgba(15, 123, 209, 0.24);
    --li-button-grow: 1000 1 220px;   /* prende lo spazio; a capo, largo quanto il form */
    --li-ghost-grow: 1 1 auto;
    --li-actions-wrap: wrap-reverse;   /* a capo, il principale sta sopra */
    --li-button-disabled-opacity: 1;
    --li-button-loading-bg: #6fa8d8;
    --li-ghost-bg: #ffffff;
    --li-ghost-text: #41536e;
    --li-ghost-border: #d8e0ea;
    --li-ghost-hover-bg: #f4f6f9;
    --li-ghost-hover-text: #41536e;
    --li-ghost-hover-border: #c3cfdd;
    --li-next-suffix: "→";
    --li-prev-prefix: "←";
    --li-message-border-width: 1px;
    --li-message-accent-width: 4px;
    --li-success-icon: "✓";

    /* avanzamento: tre segmenti, colorati fino al passaggio corrente */
    --li-progress-display: grid;
    --li-progress-gap: 8px;
    --li-progress-margin: 0 0 -8px;
    --li-progress-bar: 4px;
    --li-progress-bar-display: block;
    --li-progress-track: #e3e9f1;
    --li-progress-fill: #0f7bd1;
    --li-progress-step-direction: column;
    --li-progress-num-display: none;
    --li-progress-label-display: none;
}