/* =============================================================================
   La Querce — Moduli v2 (campi, etichette, caselle, mostra password)

   Caricato da tpl/login.html e dai template user-*.html (accesso,
   registrazione, recupero e cambio password, area utente), dopo v2-base.css,
   pagina-v2.css e il CSS della pagina (auth.css o account.css).

   Viene dalla "PARTE 1 — BASE" di forms.css del negozio di riferimento,
   ricolorata con i token v2. La "PARTE 2 — ADATTAMENTI AL TEMA" non c'e':
   serviva a neutralizzare etichette flottanti e Select2 di un tema che qui non
   esiste.

   COME SI ATTIVA: classe `formstyled` sul <form> (o su un suo contenitore).
   Fuori da li' non si applica nulla: il login a tendina nell'header ha il suo
   stile in style.css e non va toccato.

   Ogni campo e' un `.frm-field` con l'etichetta PRIMA del campo nel markup:
   l'etichetta sta sopra e ci resta. Le etichette flottanti sparivano appena si
   scriveva, e a modulo compilato non si sapeva piu' che cosa fosse ogni campo.
   ========================================================================== */

.v2 .formstyled {
    --frm-bordo:        rgba(28, 27, 23, .2);
    --frm-bordo-attivo: var(--gold);
    --frm-testo:        var(--text);
    --frm-etichetta:    var(--text-soft);   /* 7:1 su bianco */
    --frm-errore:       #9b2c1f;
    --frm-raggio:       .5rem;
    text-align: left;
}

/* Distanza fra le righe del modulo: una regola sola per qualunque riga, campo
   singolo o griglia che sia. Con un margine anche sul campo le due misure si
   sommavano in modo diverso e gli stacchi risultavano irregolari. */
.v2 .formstyled > * + * {
    margin-top: 1rem;
}

/* I campi nascosti (token, sezione) stanno in cima al modulo: il primo campo
   vero non deve prendere lo stacco come se ci fosse una riga sopra. */
.v2 .formstyled > input[type="hidden"] + *:not([type="hidden"]) {
    margin-top: 0;
}

/* -- Campo con la sua etichetta --------------------------------------------- */

.v2 .formstyled .frm-field {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    min-width: 0;
}

.v2 .formstyled .form-label {
    display: block;
    font-size: .78rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--frm-etichetta);
}

/* `.cbx__native` e' il <select> che combobox.js nasconde dietro al campo
   digitabile: deve restare da 1px (combobox.css), non allargarsi alla riga. */
.v2 .formstyled input.form-input,
.v2 .formstyled select.form-input:not(.cbx__native),
.v2 .formstyled textarea.form-input {
    display: block;
    width: 100%;
    margin: 0;
    padding: .75rem .9rem;
    border: 1px solid var(--frm-bordo);
    border-radius: var(--frm-raggio);
    background-color: var(--surface);
    color: var(--frm-testo);
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.4;
    transition: border-color .2s ease, box-shadow .2s ease;
}

/* La freccia del <select> la disegniamo noi: quella nativa cambia aspetto e
   altezza da un browser all'altro e il campo non si allineava agli input. */
.v2 .formstyled select.form-input:not(.cbx__native) {
    -webkit-appearance: none;
    appearance: none;
    padding-right: 2.5rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236e6237' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 18px 18px;
}

/* style.css azzera outline e box-shadow su ogni :focus con !important: il
   segno del fuoco qui e' il bordo oro con l'alone, che quella regola non tocca. */
.v2 .formstyled input.form-input:focus,
.v2 .formstyled select.form-input:focus,
.v2 .formstyled textarea.form-input:focus {
    border-color: var(--frm-bordo-attivo);
    box-shadow: 0 0 0 3px rgba(170, 150, 75, .2) !important;
}

.v2 .formstyled .form-input::placeholder {
    color: #8a867c;
    opacity: 1;
}

.v2 .formstyled input.form-input[disabled],
.v2 .formstyled input.form-input[readonly] {
    background-color: var(--paper);
    color: var(--text-soft);
}

/* Errori: solo dopo che l'utente ha toccato il campo (`:user-invalid`), non
   all'apertura della pagina con i campi obbligatori ancora vuoti. */
.v2 .formstyled .has-error input.form-input,
.v2 .formstyled input.form-input:user-invalid {
    border-color: var(--frm-errore);
}

/* Nota sotto o sopra un campo (es. i requisiti della password). */
.v2 .formstyled .frm-note {
    font-size: .82rem;
    line-height: 1.5;
    color: var(--text-soft);
}

/* -- Password con il pulsante mostra/nascondi ------------------------------- */

.v2 .frm-pass {
    position: relative;
}

.v2 .formstyled .frm-pass input.form-input {
    padding-right: 3.25rem;
}

.v2 .frm-pass__toggle {
    position: absolute;
    top: 50%;
    right: .35rem;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 44x44: l'occhio da solo e' un bersaglio di pochi millimetri. */
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--text-soft);
    cursor: pointer;
    transition: color .2s ease, background-color .2s ease;
}

.v2 .frm-pass__toggle:hover {
    color: var(--gold-dark);
    background-color: rgba(170, 150, 75, .1);
}

/* Le due icone sono entrambe nel markup: lo stato lo dice `aria-pressed`, che
   e' anche quello che legge lo screen reader. Una sola fonte di verita'. */
.v2 .frm-pass__toggle .frm-pass__off,
.v2 .frm-pass__toggle[aria-pressed="true"] .frm-pass__on {
    display: none;
}

.v2 .frm-pass__toggle[aria-pressed="true"] .frm-pass__off {
    display: block;
}

/* -- Caselle di spunta ------------------------------------------------------ */

.v2 .formstyled .frm-check {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    font-size: .92rem;
    line-height: 1.5;
    color: var(--text);
    text-transform: none;
    letter-spacing: normal;
    font-weight: 400;
    cursor: pointer;
}

.v2 .formstyled .frm-check__input {
    flex: 0 0 auto;
    width: 1.15rem;
    height: 1.15rem;
    margin: .15rem 0 0;
    accent-color: var(--gold);
    cursor: pointer;
}

.v2 .formstyled .frm-check a {
    color: var(--gold-dark);
    text-decoration: underline;
    text-underline-offset: .2em;
}

/* -- Combobox (assets/js/combobox.js) ----------------------------------------
   Il campo nazione/comune viene avvolto in un `.cbx`: senza larghezza piena il
   wrapper resta stretto dentro la colonna flex e il campo si accorcia rispetto
   agli altri. Il padding del modulo deve vincere su quello di combobox.css,
   che viene caricato dopo: serve una specificita' piu' alta, non l'ordine. */
.v2 .formstyled .cbx {
    width: 100%;
}

.v2 .formstyled .cbx .form-input.cbx__input {
    padding: .75rem .9rem;
    min-height: 0;
}

.v2 .formstyled .cbx:not(.cbx--libero) .form-input.cbx__input {
    padding-right: 2.75rem;
}

/* -- Telefono ---------------------------------------------------------------- */

@media screen and (max-width: 667px) {

    .v2 .formstyled input.form-input,
    .v2 .formstyled select.form-input:not(.cbx__native),
    .v2 .formstyled textarea.form-input,
    .v2 .formstyled .cbx .form-input.cbx__input {
        /* Area di tocco piena e MAI sotto i 16px: Safari su iOS ingrandisce
           da solo la pagina su un campo con testo piu' piccolo. */
        min-height: 44px;
        font-size: 16px;
    }
}

@media (prefers-contrast: more) {
    .v2 .formstyled {
        --frm-bordo: #000;
        --frm-etichetta: #000;
    }
}