/* =========================================================
   LEGALESS — I POPUP DEI FORM
   =========================================================
   Il popup e' tre strati sovrapposti, e finora ne era pettinato uno solo:

     #awb-oc-XXXX            guscio off-canvas di Avada
     └─ .awb-off-canvas      il pannello
        └─ .off-canvas-content
           ├─ [forminator_form]        markup di Forminator
           └─ .legaless-auth-container il nostro blocco di accesso

   PERIMETRO — si legge prima di aggiungere una riga qui dentro.

   Si tocca:  il guscio, il pannello, l'intestazione che aggiunge il nostro
              JS, e le NOSTRE classi auth-*.
   Non si tocca: il markup interno di Forminator. Di suo si regolano solo
              spaziatura e anello di focus, con selettori generici. Entrare
              nella sua struttura e' il modo classico di rompere un form
              multi-passo senza accorgersene — i campi condizionali vivono
              nel database, fuori portata da qui.

   DOVE STAVA PRIMA. In hero-new.css, che e' caricato SOLO sulla home:
   su /seleziona-servizi/ gli stessi popup si aprivano senza stile. Ora sta
   in un foglio suo, accodato da legaless-front.php dovunque servano.

   .lgp-popup lo aggiunge legaless-popup.js ai popup che il registro
   conosce. Le misure essenziali del pannello NON dipendono da quella
   classe: le stampa PHP sugli ID veri (vedi legaless_front_popup_css()),
   cosi' se il JavaScript non parte il popup resta comunque una finestra
   e non diventa una pagina a tutto schermo.
   ========================================================= */

.lgp-popup {
    --lgp-accent: #02b1ae;
    --lgp-navy: #0f1826;
    --lgp-testo: #2b3540;
    --lgp-tenue: #667180;
    --lgp-bordo: rgba(11, 31, 51, 0.12);
    --lgp-fondo: #f4f7f8;
}


/* ---------------------------------------------------------
   1. IL FONDO DIETRO
   ---------------------------------------------------------
   IL VELO E' IL CONTENITORE STESSO, non un elemento a parte. Lo dice
   seleziona-servizi-new.js, che chiude il popup con

       if (event.target === popupWrap) { ... }

   cioe' trattando il contenitore come lo sfondo cliccabile. La prima
   stesura di questo file cercava .awb-off-canvas-bg e
   .awb-off-canvas-overlay: due elementi che non esistono, quindi non
   coloravano niente.

   Si dipinge solo quando e' aperto: a popup chiuso il contenitore non
   deve avere fondo, o resterebbe un velo scuro sopra la pagina.
   backdrop-filter e' progressivo — dove manca resta il colore, che da
   solo basta. */
.lgp-popup.awb-show {
    background: rgba(6, 12, 22, 0.62) !important;
    -webkit-backdrop-filter: blur(4px) saturate(0.9);
    backdrop-filter: blur(4px) saturate(0.9);
}


/* ---------------------------------------------------------
   2. IL PANNELLO
   --------------------------------------------------------- */
.lgp-popup.awb-show .awb-off-canvas {
    background: #ffffff !important;
    border: 1px solid var(--lgp-bordo) !important;
    /* Raggio delle schede, non quello di serie. */
    border-radius: 1.5rem !important;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.06),
        0 40px 90px rgba(6, 12, 22, 0.48) !important;
}

/* L'apertura: sale e cresce di pochissimo, 220ms. Le schede fanno lo
   stesso movimento — e' quello che le fa sembrare la stessa cosa.
   Si animano solo opacity e transform: nessun'altra proprieta' e'
   gratis da animare. */
/* ⚠️ NIENTE opacity:0 COME STATO DI PARTENZA, e il motivo va capito.
   La prima stesura la metteva, ed era il modo sbagliato di fallire: se un
   domani qualcuno aprisse un popup senza mettere .awb-show sul contenitore,
   il selettore qui sotto non scatterebbe e l'utente si troverebbe davanti un
   popup APERTO E INVISIBILE. Animando solo il transform, lo stesso guasto
   produce al massimo una finestra spostata di 14px: si vede, si usa, e si
   corregge con comodo.
   Regola generale: un effetto decorativo non deve poter nascondere il
   contenuto se il suo interruttore non arriva. */
@media (prefers-reduced-motion: no-preference) {
    .lgp-popup .awb-off-canvas {
        transform: translateY(14px) scale(0.985);
        transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
    }

    .lgp-popup.awb-show .awb-off-canvas,
    .lgp-popup .awb-off-canvas.awb-show {
        transform: translateY(0) scale(1);
    }
}


/* ---------------------------------------------------------
   3. L'INTESTAZIONE — la aggiunge legaless-popup.js
   ---------------------------------------------------------
   Nome dell'area, prezzo di partenza, e una X vera. Prima non c'era
   niente: il form cominciava di colpo e per chiudere bisognava indovinare
   dove cliccare. */
.lgp-testata {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: clamp(1.1rem, 3vw, 1.6rem) clamp(1.2rem, 4vw, 2.2rem);
    border-bottom: 1px solid var(--lgp-bordo);
    background: linear-gradient(180deg, #ffffff 0%, var(--lgp-fondo) 100%);
    border-radius: 1.5rem 1.5rem 0 0;
}

.lgp-testata__testi { flex: 1 1 auto; min-width: 0; }

.lgp-testata__titolo {
    margin: 0;
    font-size: clamp(1.15rem, 2.4vw, 1.5rem);
    line-height: 1.2;
    font-weight: 700 !important;
    color: var(--lgp-navy) !important;
    -webkit-text-fill-color: var(--lgp-navy) !important;
}

.lgp-testata__nota {
    margin: 0.3rem 0 0;
    font-size: clamp(0.82rem, 1.6vw, 0.95rem);
    line-height: 1.45;
    font-weight: 500 !important;
    color: var(--lgp-tenue) !important;
    -webkit-text-fill-color: var(--lgp-tenue) !important;
}

/* La X: tonda, 44px, che e' la misura minima toccabile con un dito.
   Sotto quella si sbaglia mira, e su un popup che si vuole chiudere
   sbagliare mira e' irritante. */
.lgp-chiudi {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--lgp-bordo);
    border-radius: 999px;
    background: #ffffff;
    color: var(--lgp-navy);
    cursor: pointer;
    transition: background 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.lgp-chiudi svg { width: 18px; height: 18px; display: block; }

@media (hover: hover) {
    .lgp-chiudi:hover {
        background: var(--lgp-navy);
        border-color: var(--lgp-navy);
        color: #ffffff;
    }
}

.lgp-chiudi:active { transform: scale(0.94); }

.lgp-chiudi:focus-visible {
    outline: 3px solid rgba(2, 177, 174, 0.55);
    outline-offset: 2px;
}

/* La chiusura di serie di Avada sparisce: due X nello stesso angolo sono
   peggio di nessuna.

   ⚠️ LA CLASSE E' .off-canvas-close, senza prefisso. La prima stesura
   cercava .awb-off-canvas-close e .fusion-off-canvas-close, che non
   esistono: il pulsante di Avada restava, e accanto compariva il nostro.
   Il nome vero si legge in seleziona-servizi-new.js, che ci aggancia un
   listener per risincronizzare il blocco dello scorrimento.

   Nasconderlo e' sicuro: quel codice ASCOLTA il pulsante, non lo preme
   mai. E la sua funzione e' comunque coperta, perche' osserva anche le
   classi del contenitore con un MutationObserver — e la nostra X toglie
   proprio awb-show da li'.

   E' anche a prova di guasto da solo: questa regola vive dentro
   .lgp-popup, e .lgp-popup lo mette il nostro JavaScript. Se non parte,
   non c'e' la nostra X ma resta la loro. Non si resta mai senza. */
.lgp-popup .off-canvas-close,
.lgp-popup .awb-off-canvas-close,
.lgp-popup .fusion-off-canvas-close { display: none !important; }


/* ---------------------------------------------------------
   4. IL CORPO CHE SCORRE
   ---------------------------------------------------------
   Il gradiente in fondo dice che sotto c'e' dell'altro. Su un form a
   piu' passi e' l'unica cosa che lo dice, e senza la gente non scorre. */
.lgp-popup .off-canvas-content {
    background:
        linear-gradient(#ffffff 30%, rgba(255, 255, 255, 0)) top / 100% 28px no-repeat,
        linear-gradient(rgba(255, 255, 255, 0), #ffffff 70%) bottom / 100% 28px no-repeat,
        #ffffff;
    background-attachment: local, local, scroll;
    scrollbar-width: thin;
}


/* ---------------------------------------------------------
   4-bis. LA BARRA DI AVANZAMENTO DI FORMINATOR
   ---------------------------------------------------------
   Di serie e' azzurra — il blu di Forminator — e su questa pagina stona
   con tutto il resto. Qui passa ai colori di casa.

   Forminator disegna l'avanzamento in DUE modi diversi a seconda di come
   e' configurato il form: numeri collegati da una linea
   (.forminator-pagination-steps) oppure una barra piena
   (.forminator-progress-bar). Non so quale sia acceso su ciascun form —
   il markup lo genera lui e la configurazione sta nel database — quindi
   si coprono tutti e due. Quello inutilizzato non fa danno.

   ⚠️ Se dopo il caricamento la barra fosse ancora azzurra, vuol dire che
   Forminator la disegna in un terzo modo che da qui non si vede: serve
   uno sguardo in "Ispeziona" su quell'elemento. Il modo di fallire e'
   comunque innocuo — resta il blu, non si rompe niente. */

/* --- numeri collegati --- */
.lgp-popup .forminator-pagination-steps .forminator-step {
    color: var(--lgp-tenue) !important;
}

.lgp-popup .forminator-pagination-steps .forminator-step::before,
.lgp-popup .forminator-pagination-steps .forminator-step > span:first-child {
    background-color: rgba(11, 31, 51, 0.10) !important;
    border-color: rgba(11, 31, 51, 0.14) !important;
    color: var(--lgp-tenue) !important;
}

.lgp-popup .forminator-pagination-steps .forminator-step.forminator-current,
.lgp-popup .forminator-pagination-steps .forminator-step.forminator-complete {
    color: var(--lgp-navy) !important;
    font-weight: 700 !important;
}

.lgp-popup .forminator-pagination-steps .forminator-step.forminator-current::before,
.lgp-popup .forminator-pagination-steps .forminator-step.forminator-current > span:first-child,
.lgp-popup .forminator-pagination-steps .forminator-step.forminator-complete::before,
.lgp-popup .forminator-pagination-steps .forminator-step.forminator-complete > span:first-child {
    background-color: var(--lgp-accent) !important;
    border-color: var(--lgp-accent) !important;
    color: #ffffff !important;
}

/* La linea che unisce i passi. */
.lgp-popup .forminator-pagination-steps .forminator-step::after {
    background-color: rgba(11, 31, 51, 0.12) !important;
}

.lgp-popup .forminator-pagination-steps .forminator-step.forminator-complete::after {
    background-color: var(--lgp-accent) !important;
}

/* --- barra piena --- */
.lgp-popup .forminator-progress-bar,
.lgp-popup .forminator-pagination-progress .forminator-progress-bar {
    background-color: rgba(11, 31, 51, 0.10) !important;
    border-radius: 999px !important;
    overflow: hidden !important;
    height: 8px !important;
}

.lgp-popup .forminator-progress-bar > span,
.lgp-popup .forminator-progress-bar > div,
.lgp-popup .forminator-progress-bar .forminator-progress {
    background: linear-gradient(90deg, #02b1ae, #7bdcda) !important;
    border-radius: 999px !important;
    /* La larghezza la scrive Forminator inline: qui si anima soltanto,
       cosi' il passaggio di passo si vede invece di saltare. */
    transition: width 320ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.lgp-popup .forminator-progress-label,
.lgp-popup .forminator-pagination-progress .forminator-progress-label {
    color: var(--lgp-navy) !important;
    -webkit-text-fill-color: var(--lgp-navy) !important;
    font-weight: 600 !important;
}

/* Un po' d'aria sotto l'avanzamento, e basta.
   NIENTE position:sticky, ed e' una rinuncia ragionata: dentro
   .off-canvas-content, che ha fino a 42px di padding, un elemento
   appiccicato a top:0 si ferma DOPO il padding — e sopra di lui
   resterebbe una striscia in cui il contenuto scorre a vista. Non
   avendo modo di verificarlo da qui, non si consegna. E non serve:
   legaless-popup.js riporta gia' in cima a ogni cambio di passo, quindi
   la barra si rivede comunque. */
.lgp-popup .forminator-pagination-steps,
.lgp-popup .forminator-pagination-progress {
    margin-bottom: 1.1rem;
}


/* ---------------------------------------------------------
   5. FORMINATOR — solo spaziatura e focus
   ---------------------------------------------------------
   Niente colori, niente dimensioni, niente struttura: solo l'aria fra i
   campi e un anello di focus che si vede. Il resto e' roba sua. */
.lgp-popup .forminator-row { margin-bottom: 1.1rem; }

.lgp-popup .forminator-input:focus-visible,
.lgp-popup .forminator-textarea:focus-visible,
.lgp-popup select:focus-visible,
.lgp-popup input:focus-visible,
.lgp-popup textarea:focus-visible {
    outline: 3px solid rgba(2, 177, 174, 0.45);
    outline-offset: 1px;
}


/* ---------------------------------------------------------
   6. IL BLOCCO DI ACCESSO — questo e' nostro
   --------------------------------------------------------- */
.lgp-popup .legaless-auth-container {
    margin-top: 1.4rem;
    padding: clamp(1.1rem, 3vw, 1.6rem);
    border: 1px solid var(--lgp-bordo);
    border-radius: 1.1rem;
    background: var(--lgp-fondo);
}

.lgp-popup .auth-title {
    font-size: clamp(1.05rem, 2vw, 1.25rem) !important;
    font-weight: 700 !important;
    color: var(--lgp-navy) !important;
    -webkit-text-fill-color: var(--lgp-navy) !important;
}

.lgp-popup .auth-subtitle {
    font-size: 0.92rem !important;
    line-height: 1.5 !important;
    color: var(--lgp-tenue) !important;
    -webkit-text-fill-color: var(--lgp-tenue) !important;
}

/* Accedi / Registrati: due linguette vere, con la riga sotto quella
   attiva. Prima si distinguevano a fatica, e chi non capisce di essere
   sulla linguetta sbagliata pensa che le sue credenziali non funzionino. */
.lgp-popup .auth-tabs,
.lgp-popup .auth-role-tabs {
    display: flex;
    gap: 0.4rem;
    margin-bottom: 1.1rem;
    border-bottom: 1px solid var(--lgp-bordo);
}

.lgp-popup .auth-tab,
.lgp-popup .auth-role-tab {
    flex: 1 1 auto;
    padding: 0.7rem 0.6rem;
    border: 0;
    background: transparent;
    border-bottom: 3px solid transparent;
    font-size: 0.95rem;
    font-weight: 600 !important;
    color: var(--lgp-tenue) !important;
    -webkit-text-fill-color: var(--lgp-tenue) !important;
    cursor: pointer;
    transition: color 160ms ease, border-color 160ms ease;
}

.lgp-popup .auth-tab.active,
.lgp-popup .auth-role-tab.active {
    border-bottom-color: var(--lgp-accent);
    color: var(--lgp-navy) !important;
    -webkit-text-fill-color: var(--lgp-navy) !important;
    font-weight: 700 !important;
}

.lgp-popup .auth-field { margin-bottom: 0.9rem; }

.lgp-popup .auth-field input[type="text"],
.lgp-popup .auth-field input[type="email"],
.lgp-popup .auth-field input[type="password"],
.lgp-popup .auth-field input[type="tel"] {
    width: 100%;
    box-sizing: border-box;
    min-height: 48px;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--lgp-bordo);
    border-radius: 0.7rem;
    background: #ffffff;
    font-size: 1rem;
    color: var(--lgp-testo);
}

.lgp-popup .auth-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
}

.lgp-popup .auth-col-6 { flex: 1 1 220px; min-width: 0; }

.lgp-popup .auth-error {
    border-radius: 0.6rem;
    padding: 0.7rem 0.9rem;
    font-size: 0.9rem;
    line-height: 1.45;
}

/* La spunta dei T&C: il bersaglio deve essere grande. E' il punto dove
   si ferma chi ha fretta, ed e' anche un obbligo, non un dettaglio. */
.lgp-popup .auth-acceptance-field {
    padding: 0.85rem;
    border: 1px solid var(--lgp-bordo);
    border-radius: 0.8rem;
    background: #ffffff;
}

.lgp-popup .auth-acceptance-check {
    width: 22px;
    height: 22px;
    accent-color: var(--lgp-accent);
}

.lgp-popup .auth-acceptance-link {
    color: var(--lgp-accent) !important;
    -webkit-text-fill-color: var(--lgp-accent) !important;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.lgp-popup .legaless-social-divider {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin: 1.2rem 0;
    font-size: 0.82rem;
    color: var(--lgp-tenue) !important;
    -webkit-text-fill-color: var(--lgp-tenue) !important;
}

.lgp-popup .legaless-social-divider::before,
.lgp-popup .legaless-social-divider::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--lgp-bordo);
}


/* ---------------------------------------------------------
   7. TELEFONO — un foglio che sale dal basso
   ---------------------------------------------------------
   Stesso movimento delle schede. Su uno schermo alto e stretto una
   finestra centrata e' la scelta sbagliata: il pollice sta in basso. */
/* ⚠️ QUI NON CI SONO PIU' LE MISURE, ed e' voluto.
   width/height/inset del foglio dal basso li stampa PHP sugli ID veri
   (legaless_front_popup()). Motivo: un ID vale (1,2,1) e .lgp-popup vale
   (0,3,1), quindi le misure scritte qui NON avrebbero mai vinto contro
   quelle della struttura — il foglio dal basso non sarebbe mai comparso.
   Qui resta la sola decorazione, che non compete con niente. */
@media (max-width: 900px) {
    .lgp-popup.awb-show .awb-off-canvas {
        border-radius: 1.4rem 1.4rem 0 0 !important;
        border-bottom: 0 !important;
    }

    .lgp-testata {
        position: relative;
        border-radius: 1.4rem 1.4rem 0 0;
        padding-top: 1.5rem;
    }

    /* Su telefono resta il solo titolo. I quattro punti separati dal
       pallino sono giusti su desktop, ma sopra il primo campo di un form,
       su uno schermo stretto, diventano tre righe di roba da leggere prima
       di poter cominciare — cioe' un ostacolo, non una rassicurazione.
       Richiesta dell'utente, 14/08 sera. */
    .lgp-testata__nota { display: none !important; }

    /* La maniglia: dice "questo si trascina" prima ancora che si provi. */
    .lgp-testata::before {
        content: "";
        position: absolute;
        top: 0.55rem;
        left: 50%;
        transform: translateX(-50%);
        width: 42px;
        height: 4px;
        border-radius: 999px;
        background: rgba(11, 31, 51, 0.18);
    }

    @media (prefers-reduced-motion: no-preference) {
        .lgp-popup .awb-off-canvas {
            transform: translateY(100%);
            transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
        }
        .lgp-popup.awb-show .awb-off-canvas,
        .lgp-popup .awb-off-canvas.awb-show { transform: translateY(0); }
    }

    /* Il padding del corpo su telefono lo stampa PHP, per la stessa
       ragione di specificita' spiegata sopra. */
    .lgp-popup .auth-row { gap: 0.6rem; }
}


/* ---------------------------------------------------------
   8. MOVIMENTO RIDOTTO
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .lgp-popup .awb-off-canvas,
    .lgp-chiudi {
        transition: none !important;
        transform: none !important;
    }
}