/* Schema di massima per seuqenza props
.component {

  --- ( 1. Layout ) ---
  display: flex;  
  flex-direction: column;            

  --- ( 2. Size ) ---    
  width: 100%;
  min-height: 50px;   

  --- ( 3. Box model ) --- 
  padding: 16px;
  margin: 8px 0;
  
  --- ( 4. Visual ) --- 
  background: white;
  border: 1px solid #ddd;     
  
  --- ( 5. Typography ) --- 
  font-size: 14px; 
  color: #333; 

  --- ( 6. Interactions ) --- 
  transition: background 0.2s;   
  
  --- ( Hover & Pseudos ) --- 
  &:hover { 
    background: #f0f0f0;
  }

}
*/

/* TOC
-- Primitives
    .Header
    .Footer

-- Blog Block

-- Global
    .Common Button
    .Common Underline Link
    .Divider

    .common-paragraph

-- On Page
    .Review Card
    .Aside Counter
    .Form #form
*/

/* ----------------------------------------------------- */
/* --[ PRIMITIVES ]------------------------------------- */

/* -- [ Footer ] --- */

.the-footer {
    --mb: 8px;
}
/*
.the-footer-links__item--secondary:not(:first-child) {
    margin-inline-end: var(--mb);
}
*/

.the-footer-links__item:first-child {
    cursor: default; 
    /*
    @media  (min-width: 991px) {
        margin-bottom: .5em;
    }*/
}


/* -- [/ Footer ] --- */

/* -- [/ PRIMITIVES ] ------------------------------------ */
/* ------------------------------------------------------- */




/* -------------------------------------------------- */
/* ---[ GLOBAL ]------------------------------------- */
/* -------------------------------------------------- */

/* -- [ . Common Button     ] --- */

/* Annulla il BG di default solo al tag button */
button:is(.common-button-wrapper) {
  background-color: unset;
}

/* Size */
.common-button {
    max-width: 230px;
    width: fit-content;
    align-items: center;

}

/* --- */
/* Switch presente nelle proprieta del componente
per definire colore testo + border
in base alla variante da usare */
.common-button[data-color-scheme='light'] {
    --border-color: var(--color-primary-light);
    color: var(--border-color);
    border-color: var(--border-color);
}
.common-button[data-color-scheme='common'] {
    --border-color: var(--color-accent-high);
    color: var(--border-color);
    border-color: var(--border-color);

    span {
        color: var(--color-primary-dark);
    }
}
/* --- */

/* Stili per effetto mask-button nel componente */
.common-button {
    --bg: transparent;
    --fg: var(--color-accent-low);
    --button-bg: var(--bg);
    --button-fg: var(--fg);
    

    & .bc-mask-button__title{
    position: relative;
    mix-blend-mode: unset;
    }

    & .bc-mask-button__back > span {
        background-color: var(--button-fg);
    }
}

/* Forzatura del overflow visible su SVG Icon */
.common-button__svg-icon:is(svg:not(:root)) {
  overflow: visible;
} 



/* Distanziamento tra [ ico | testo-button ] */
.common-button--content {
    display: inline-flex;
    column-gap: var(--common-button-gap);
}

.divider--v-full {
    width: 1px;
    /*height: 100%;
    min-height: unset;*/
    border-right-width: 1px;
    border-right-style: solid;
    border-color: var(--border-color);
}
/* -- [/ . Common Button       ] --- */


/* -- [ . Common Underline Link       ] --- */
/*  Stato: NORMALE / 
    Fatto sia per .common-underline-link-box
    che per l'item su chi sono */
:root {
    --common-underline-link-box-border-width: 1px;
    --common-underline-link-box-border-color: var(--color-primary-dark--3);
    --common-underline-link-box-padding-inline-end: 2rem;
}

.common-underline-link-box {
    display: inline-flex;
    flex-direction: column;
}
/* Puntatore -*PRIMO*- elemento */

 
/* Puntatore -*ALTRI*- elementi */
.common-underline-link-box {
    cursor: pointer;
    position: relative;
} 

.common-underline-link-box::after {
    content: '';

    display: flex;

    width: 100%;
    height: 1px;
    margin-bottom: 0px;
    padding-bottom: 4px;

    border-bottom-width: var(--common-underline-link-box-border-width);
    border-bottom-style: solid;
    border-bottom-color: var(--common-underline-link-box-border-color);

    transform: scaleX(0); /* Trasformazione principale */

    /* In questo modo entra da sinistra .. */
    transform-origin: 100% 50%;

    /* Velocita quando ESCE il mouse */
    transition: transform 0.75s cubic-bezier(0.61, 0.13, 0.44, 1.05) /*cubic-bezier(0.82, 0.11, 0.55, 0.95)*/;
}

/* Stato: HOVER */

.common-underline-link-box:hover::after {
    cursor: pointer;
    transform: scaleX(1); /* Trasformazione principale */

    /* .. e esce a destra  */
    transform-origin: 0% 50%;

    /* Velocita quando ENTRA il mouse */
    transition: transform 0.45s cubic-bezier(0.79, 0.09, 0.59, 0.89);
}
/* -- [/ . Common Underline Link  ] --- */


/* ------------------------------ */
/* -- [ . Common Paragraph  ] --- */
/* -- [   ] --- */

/* --( Spacing )-- */
/* --spacing-common-paragraph: var(--spacing-xxs); */

.common-paragraph.common-paragraph--spacing {
    .common-paragraph-heading {
        margin-bottom: var(--spacing-small);
    }
    .common-paragraph-body {
        display: flex;
        flex-direction: column;
        row-gap: calc(var(--spacing-xs) / 2);
        
    }
}


/* Spaziatura tra paragrafi-body */
.common-paragraph {
    .common-paragraph-body + .common-paragraph-body {
        margin-top: var(--spacing-xs); 
    }
}
/* Spaziatura impostata su 
attr[var-paragraph-row-gap]
nel componente: Common Paragraph Body */
.common-paragraph--row-gap[var-paragraph-row-gap="spacing-small"] {
  --paragraph-spacing: var(--spacing-small);
}
.common-paragraph--row-gap[var-paragraph-row-gap="spacing-xs"] {
  --paragraph-spacing: var(--spacing-xs);
}
.common-paragraph--row-gap[var-paragraph-row-gap="spacing-xxs"] {
  --paragraph-spacing: var(--spacing-xxs);
}

/* --( Typography )-- */

[component-color='light'] {
    color: var(--color-primary-light);
}

.common-paragraph [component-color='light'] {
    color: var(--color-primary-light);
}



/* --------------------------- */
/* -- [ . Aside Counter  ] --- */

.aside-counter {
    text-align: end;
    line-height: 1.15;
    /*width: var(--aside-counter-width);*/
    padding-block-end: 0.5ch;
    border-block-end: 1px solid var(--color-accent-high);
}
.aside-counter[data-component-scope='counter'] {
    text-align: start;
    width: var(--aside-counter-width);

    .aside-counter__label {
        color: var(--color-accent-high);
        font-weight: 700;
    }
}

.aside-counter__label {
    color: var(--color-primary-dark);
    font-family: 'Geist Mono';
    font-variation-settings: "wght" 450;
    font-size: var(--aside-counter-fs);
    /* Variable
    --aside-counter-fs: var(--text-lead--md); */
}
/* -- [/ . Aside Counter  ] --- */
/* ---------------------------- */

/* ---------------------------------------------------- */
/* REVIEW CARD / Pagina: Chi Sono                       */
/* ---------------------------------------------------- */

.rating-star-polygon {
    fill: var(--color-accent-high);
    stroke: var(--color-accent-high);
    stroke-width: 0.5px;
    stroke-miterlimit: 10;
}

/* -------------------------------------------------------- 
    In base all'attributo assegnato al contenitore che tiene
    l'svg rating star (.about-me-review-card-rating-stars),
    le stelline si spengono
        ------------------------------------------------------- */
[data-class='rating-1stars'] .rating-star-polygon:nth-last-of-type(-n + 4) {
    fill: none;
}
[data-class='rating-2stars'] .rating-star-polygon:nth-last-of-type(-n + 3) {
    fill: none;
}
[data-class='rating-3stars'] .rating-star-polygon:nth-last-of-type(-n + 2) {
    fill: none;
}
[data-class='rating-4stars'] .rating-star-polygon:nth-last-of-type(-n + 1) {
    fill: none;
}
/* END REVIEW CARD  -------------------------------------- */

/* ---------------------------------------------------- */
/* Form                                                 */
/* ---------------------------------------------------- */

/* ============================================
   FORM STYLES - OBELIN V2
   ============================================
   
   Struttura del file:
   1. VARIABILI GLOBALI
   2. INPUT FIELDS - Border Bottom Animato
   3. CHECKBOX - Stili Custom Generici
   4. FORM SPECIFIC - Adattamenti per il builder
   5. NAVIGAZIONE - Pulsanti Avanti/Indietro
   6. UTILITIES & FALLBACKS
   
   Note:
   - Il JS 'effetti-form.js' si aspetta:
     * --_text-width per la larghezza del border animato
     * .input-has-text per lo stato "ha testo"
     * #form .form-step__common-field come selettore base
   ============================================ */

/* ============================================
   1. VARIABILI GLOBALI
   ============================================ */

#form {
    /* Colore accent per il form */
    --nav-after-color: var(--color-accent-high);

    /* ============================================
	   Variabili per Checkbox (da DeepSeek)
	   ============================================ */
    --s-xsmall: 0.625em;
    --s-small: 1.2em;
    --border-width: 1px;
    --c-primary: var(--color-accent-high, #5f11e8);
    --c-primary-20-percent-opacity: color-mix(
        in srgb,
        var(--c-primary) 20%,
        transparent
    );
    --c-primary-10-percent-opacity: color-mix(
        in srgb,
        var(--c-primary) 10%,
        transparent
    );

    /* Timing functions */
    --t-base: 0.4s;
    --t-fast: 0.2s;
    --e-in: ease-in;
    --e-out: cubic-bezier(0.11, 0.29, 0.18, 0.98);

    /* ============================================
	   Variabili per Input Fields
	   ============================================ */
    --_transition-base: 0.3s ease;
    --_transition-fast: 0.2s ease;
    --_border-height: 2px;
    --_label-delay: 100ms;
}

/* ============================================
   2. INPUT FIELDS - Border Bottom Animato
   ============================================
   
   Effetto: sottolineatura che si espande dal testo
   al focus, e si contrae quando si perde focus.
   
   Richiede: effetti-form.js per calcolare --_text-width
   ============================================ */

#form .form-step__common-field {
    position: relative;
    display: flex;
    flex-direction: column;
    margin-bottom: 0.5rem;
}
/* Descrizione in minuscolo per common-field--checkboxed */
#form .form-step__common-field--checkboxed .form-step__common-field {
    label {
        text-transform: unset;
    }
}
/* Label per common fields (esclude checkbox/radio labels) */
#form .form-step__common-field label {
    margin-block-start: 0.5rem;
    order: 2;
    margin-bottom: 0.25rem;
    transition: color var(--_transition-fast);
    transition-delay: 0ms;
}

/* Stile base dell'input */
#form .form-step__common-field input {
    width: 100%;
    padding: 0.5rem 0;

    border: none;
    outline: none;

    /* Border bottom di base (grigio) */
    border-bottom: 1px solid #ccc;

    /* Sottolineatura animata */
    background-image: linear-gradient(
        to right,
        var(--color-accent-high, hsl(14, 100%, 59%)),
        var(--color-accent-high, hsl(14, 100%, 59%))
    );
    background-repeat: no-repeat;
    background-position: bottom left;
    background-size: var(--_text-width, 0%) var(--_border-height);
    transition: background-size var(--_transition-base);
}

/* Espansione completa al focus */
#form .form-step__common-field input:focus {
    background-size: 100% var(--_border-height);
}

/* Stato: input ha testo (JS aggiunge classe .input-has-text) */
#form .form-step__common-field.input-has-text input {
    background-size: var(--_text-width, 0%) var(--_border-height);
}

/* Stato: input vuoto e non in focus (chiude verso destra) */
#form .form-step__common-field:not(.input-has-text) input:not(:focus) {
    background-position: bottom right;
    background-size: 0% var(--_border-height);
}

/* Label colorato al focus */
#form .form-step__common-field:focus-within label {
    color: var(--color-accent-high, hsl(14, 100%, 59%));
    transition-delay: var(--_label-delay);
}

/* Label colorato quando c'è testo */
#form .form-step__common-field:has(input:not(:placeholder-shown)) label {
    color: var(--color-accent-high, hsl(14, 100%, 59%));
    transition-delay: var(--_label-delay);
    letter-spacing: -.2px;

}

/* Fallback per browser senza :has() */
#form .form-step__common-field.input-has-text label {
    color: var(--color-accent-high, hsl(14, 100%, 59%));
    transition-delay: var(--_label-delay);
}

/* Stato disabled */
#form .form-step__common-field input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

#form .form-step__common-field input:disabled ~ label {
    opacity: 0.5;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    #form .form-step__common-field label,
    #form .form-step__common-field input {
        transition: none;
    }
}

/* ============================================
   3. CHECKBOX - Stili Custom Generici
   ============================================
   
   Classe base: .checkbox-custom
   Struttura HTML attesa:
   <div class="checkbox-custom">
     <input type="checkbox" id="...">
     <label for="...">Testo</label>
   </div>
   
   Caratteristiche:
   - Input nascosto ma accessibile
   - Quadrato custom con ::before
   - Spunta con ::after (Unicode ✓)
   - Animazione ripple al check
   - Supporto disabled e reduced motion
   ============================================ */

/* Container della singola checkbox */
.checkbox-custom {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: var(--s-small);
}

.checkbox-custom:last-child {
    margin-bottom: 0;
}

/* Nascondi l'input nativo ma mantienilo accessibile */
.checkbox-custom input[type='checkbox'] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
    opacity: 0;
}

/* Label come container flex */
.checkbox-custom label {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    cursor: pointer;
    position: relative;
    padding-left: calc(1.5em + var(--s-small) * 0.7);
    min-height: 1.5em;
    line-height: 1.5;
    font-weight: 300;
    font-size: 14px;
    text-transform: unset;
}

.checkbox-custom--required {
    --checkbox-required-size: 20px;
}

/* Quadrato della checkbox - ::before */
.checkbox-custom label::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1.5em;
    height: 1.5em;
    border: var(--border-width) solid var(--c-primary);
    border-radius: 3px;
    background-color: transparent;
    transition:
        box-shadow var(--t-base) var(--e-out),
        background-color var(--t-base),
        border-color var(--t-base);
    box-shadow: 0 0 0 0 var(--c-primary-10-percent-opacity);
}

/* Segno di spunta - ::after */
.checkbox-custom label::after {
    content: '✓';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%) scale(0.8);
    width: 1.5em;
    height: 1.5em;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c-primary);
    font-size: 1em;
    font-weight: bold;
    line-height: 1;
    opacity: 0;
    transition:
        opacity var(--t-fast) var(--e-in),
        transform var(--t-base) var(--e-out);
    pointer-events: none;
}

#form .checkbox-custom.checkbox-custom--required label {
    font-weight: 300;
    font-size: 14px;
    text-transform: unset;
    padding-left: 0px;
}

/* Eccezione per privacy */
.checkbox-custom.checkbox-custom--required label::before {
    content: '';
    /*position: absolute;transform: translateY(-50%);
    left: 0;
    top: 50%;*/
    position: static;
    transform: translateY(0%);
    min-width: var(--checkbox-required-size);
    min-height: var(--checkbox-required-size);
    align-self: flex-start;
    margin-right: 12px;
    border: var(--border-width) solid var(--c-primary);
    border-radius: 3px;
    background-color: transparent;
    transition:
        box-shadow var(--t-base) var(--e-out),
        background-color var(--t-base),
        border-color var(--t-base);
    box-shadow: 0 0 0 0 var(--c-primary-10-percent-opacity);
}

.checkbox-custom.checkbox-custom--required label::after {
    content: '✓';
    /*position: absolute;
    left: 0;
    top: 50%;*/
    position: absolute;
    top: 0%;
    transform: translateY(0%) scale(0.8);
    min-width: var(--checkbox-required-size);
    min-height: var(--checkbox-required-size);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c-primary);
    font-size: 1em;
    font-weight: bold;
    line-height: 1;
    opacity: 0;
    transition:
        opacity var(--t-fast) var(--e-in),
        transform var(--t-base) var(--e-out);
    pointer-events: none;
}

/*.checkbox-custom.checkbox-custom--required label::before, .checkbox-custom.checkbox-custom--required label::before {
    align-self: flex-start;
    margin-right: 12px;
}*/

/* Stato :checked - mostra spunta */
.checkbox-custom input[type='checkbox']:checked + label::after {
    opacity: 1;
    transform: translateY(-50%) scale(1);
}
.checkbox-custom.checkbox-custom--required
    input[type='checkbox']:checked
    + label::after {
    opacity: 1;
    transform: translateY(0%) scale(1);
}

/* Stato :checked - label in grassetto e colorato */
.checkbox-custom input[type='checkbox']:checked + label,
#form
    .checkbox-custom.checkbox-custom--required
    input[type='checkbox']:checked
    + label {
    font-weight: 400;
    color: var(--color-accent-high); /*qui*/
}

/* Stato :checked - sfondo del quadrato */
.checkbox-custom input[type='checkbox']:checked + label::before {
    background-color: var(--c-primary-10-percent-opacity);
    border-color: var(--c-primary);
}

/* Stato :focus - effetto glow */
.checkbox-custom input[type='checkbox']:focus + label::before {
    box-shadow: 0 0 0 0.25em var(--c-primary-20-percent-opacity);
}

/* Animazione ripple all'attivazione */
.checkbox-custom input[type='checkbox']:checked + label::before {
    animation: checkbox-ripple 1.5s var(--e-out);
}

@keyframes checkbox-ripple {
    0% {
        box-shadow: 0 0 0 0 var(--c-primary-20-percent-opacity);
    }

    50% {
        box-shadow: 0 0 0 0.5em var(--c-primary-20-percent-opacity);
    }

    100% {
        box-shadow: 0 0 0 0 var(--c-primary-10-percent-opacity);
    }
}

/* Stato hover */
.checkbox-custom label:hover::before {
    box-shadow: 0 0 0 0.125em var(--c-primary-10-percent-opacity);
}

/* Stato disabled */
.checkbox-custom input[type='checkbox']:disabled + label {
    opacity: 0.5;
    cursor: not-allowed;
}

.checkbox-custom input[type='checkbox']:disabled + label::before {
    border-color: color-mix(in srgb, var(--c-primary) 50%, transparent);
    background-color: color-mix(in srgb, var(--c-primary) 5%, transparent);
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .checkbox-custom label::before,
    .checkbox-custom label::after,
    .checkbox-custom input[type='checkbox']:checked + label::before {
        transition: none;
        animation: none;
    }
}

/* ============================================
   4. FORM SPECIFIC - Adattamenti per il builder
   ============================================
   
   Questi stili adattano le classi generiche 
   alla struttura specifica del builder WordPress.
   ============================================ */

/* Wrapper per gruppi di checkbox */
.form-step-fields-checkbox-wrapper {
    row-gap: 0.25rem;
}

/* Reset lista per options wrapper */
.form-step-fields-checkbox-wrapper .options-wrapper {
    list-style: none;
    padding: 0;
    margin: 0;
    row-gap: 0.75rem;
}
/* Lettere minuscole per la label di Whatsapp Telegram - eccezione */
#form .form-step-fields-checkbox-wrapper.capslock-off li label {
    text-transform: unset;
}

#form #checkbox-wrapper--message-choice {
    margin-top: var(--spacing-xs);
}
#form .form-step-fields-checkbox-wrapper--single {
    width: max-content;
}

/* Mappa le classi del builder a .checkbox-custom */
.form-step-fields__checkbox {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Applica stili .checkbox-custom ai checkbox del builder */
.form-step-fields__checkbox input[type='checkbox'] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
    opacity: 0;
}

.form-step-fields__checkbox label {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    cursor: pointer;
    position: relative;
    padding-left: calc(1.5em + var(--s-small) * 0.7);
    min-height: 1.5em;
    line-height: 1.5;
    font-weight: 300;
    font-size: 14px;
    text-transform: unset;
}

.form-step-fields__checkbox label::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1.5em;
    height: 1.5em;
    border: var(--border-width) solid var(--c-primary);
    border-radius: 3px;
    background-color: transparent;
    transition:
        box-shadow var(--t-base) var(--e-out),
        background-color var(--t-base),
        border-color var(--t-base);
    box-shadow: 0 0 0 0 var(--c-primary-10-percent-opacity);
}

.form-step-fields__checkbox label::after {
    content: '✓';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%) scale(0.8);
    width: 1.5em;
    height: 1.5em;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c-primary);
    font-size: 1em;
    font-weight: bold;
    line-height: 1;
    opacity: 0;
    transition:
        opacity var(--t-fast) var(--e-in),
        transform var(--t-base) var(--e-out);
    pointer-events: none;
}

.form-step-fields__checkbox input[type='checkbox']:checked + label::after {
    opacity: 1;
    transform: translateY(-50%) scale(1);
}
#form .form-step-fields__checkbox input[type='checkbox'] + label {
    font-weight: 400;
}
#form .form-step-fields__checkbox input[type='checkbox']:checked + label {
    color: var(--color-accent-high);
}

.form-step-fields__checkbox input[type='checkbox']:checked + label::before {
    background-color: var(--c-primary-10-percent-opacity);
    border-color: var(--c-primary);
}

.form-step-fields__checkbox input[type='checkbox']:focus + label::before {
    box-shadow: 0 0 0 0.25em var(--c-primary-20-percent-opacity);
}

.form-step-fields__checkbox input[type='checkbox']:checked + label::before {
    animation: checkbox-ripple 1.5s var(--e-out);
}

.form-step-fields__checkbox label:hover::before {
    box-shadow: 0 0 0 0.125em var(--c-primary-10-percent-opacity);
}

.form-step-fields__checkbox input[type='checkbox']:disabled + label {
    opacity: 0.5;
    cursor: not-allowed;
}

.form-step-fields__checkbox input[type='checkbox']:disabled + label::before {
    border-color: color-mix(in srgb, var(--c-primary) 50%, transparent);
    background-color: color-mix(in srgb, var(--c-primary) 5%, transparent);
}

/* Variante single checkbox (es. Gruppo Whatsapp/TG) */
.form-step-fields-checkbox-wrapper--single {
    align-items: center;
    display: flex;
    width: max-content;
}
/*
.form-step-fields-checkbox-wrapper--single .form-step-fields__checkbox {
    width: 50px;
}*/

/* "aggiusta l'altezza del singolo checkbox */
.form-step-fields-checkbox-wrapper--single .form-step-fields__checkbox label {
    transform: translate(-65%, -100%);
}

/* Textarea 3 step - classe */

/* Textarea 3 step - Place holder in minuscolo*/
#form .form-group.form-step__textarea label {
    text-transform: unset;
}
/* Textaarea 3 step - interno e il suo contorno quando ci focusi */
#form
    .form-group.form-step__textarea
    textarea:not(.form-step__common-field textarea) {
    background-color: inherit;
    border-bottom: 0px solid transparent;
    font-variation-settings: 'wght' 500;
    font-size: var(--text-body);
    padding: 0.5rem;
}
/* Textaarea 3 step - interno e il suo contorno quando ci focusi */
#form
    .form-group.form-step__textarea
    textarea:focus:not(.form-step__common-field textarea) {
    outline: 1px solid var(--color-primary-dark--3);
    border-radius: 4px;
}
/* Textaarea 3 step - DIV esterna che comprende anche il label dentro */
#form .form-group.form-step__textarea:not(.form-step__common-field textarea) {
    background-color: var(--color-primary-light--1);
    padding: 0.75rem;
    border: 1px solid var(--color-primary-dark--2);
    border-radius: 4px;
    /*font-variation-settings: "wght" 500;
    font-size: var(--text-body);
    margin-bottom: calc(var(--form-step-header-spacing) * 4);*/
}

/* Reduced motion per checkbox del builder */
@media (prefers-reduced-motion: reduce) {
    .form-step-fields__checkbox label::before,
    .form-step-fields__checkbox label::after,
    .form-step-fields__checkbox input[type='checkbox']:checked + label::before {
        transition: none;
        animation: none;
    }
}

/* ============================================
   5. NAVIGAZIONE - Pulsanti Avanti/Indietro
   ============================================ */

.form-step-navigation-wrapper {
    display: flex;
    flex-flow: row nowrap;
    margin-top: var(--spacing-xs);
}
.form-step-navigation__button {
    position: relative;
    display: flex;
    align-items: center;
    column-gap: 0.75ch;
}

.form-step-navigation__button--next {
    margin-left: auto;
    order: 1;
}

.form-step-navigation__button--next::after {
    content: '↗';
    color: var(--nav-after-color);
}

.form-step-navigation__button--prev::before {
    content: '↙';
    color: var(--nav-after-color);
}

/* ============================================
   6. UTILITIES & FALLBACKS
   ============================================ */

/* Label esclusione per checkbox/radio 
    
    #form label:not(.options-wrapper label,
        .form-step-fields-checkbox-wrapper label) {
        /* Stili specifici per label non-checkbox se necessario 
    }
    
*/