/* ============================================================
   FORMULAUTO — TEMA
   Un foglio solo per tutto il sito pubblico. Va caricato DOPO lo
   <style> di ogni pagina: così vince sulle regole già scritte e
   nessuna pagina va riscritta per cambiare vestito.

   COSA FA, IN ORDINE
   1. la tipografia: Figtree, in pesi diversi, su tutto
   2. i colori: le pagine usano due famiglie di variabili, qui sono
      ridefinite entrambe in chiave scura
   3. i punti in cui il bianco era scritto a mano nelle pagine e
      quindi nessuna variabile poteva coprirlo

   ⚠️ NON tocca la struttura, gli id, né i punti in cui il server
   scrive dentro la pagina. È solo colore e carattere.
   ============================================================ */

:root{
  /* ---- caratteri ----
     Figtree su tutto, come fanno i grandi portali dell'usato: un
     carattere solo, in pesi diversi, invece di due che litigano.
     È una grottesca geometrica — lettere aperte, terminali netti,
     numeri larghi e stabili — che è esattamente quello che serve
     quando in pagina ci sono trenta prezzi uno sotto l'altro.
     Le due variabili restano separate: se un domani i titoli
     dovranno avere un carattere loro, si cambia solo la prima. */
  --font-sport:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-testo:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif;

  /* ---- fondo e superfici ---- */
  --sfondo:#080B12;      /* la pagina */
  --carta:#080B12;       /* nelle pagine-documento era il foglio chiaro */
  --carta-alta:#0D121C;  /* pannelli, schede, riquadri */
  --carta-2:#111827;

  /* ---- testo ---- */
  --nero:#EDEFF3;        /* nelle pagine chiare era il testo scuro */
  --nero-2:#FFFFFF;
  --inchiostro:#EDEFF3;
  --grigio:#9AA0AD;
  --grigio-3:#828A99;
  --linea:rgba(255,255,255,.14);

  /* ---- accenti ----
     Il blu resta quello Formulauto, schiarito quanto basta per stare
     su fondo scuro senza sparire. Gli altri colori d'accento erano
     pensati per la carta: qui vanno alzati o diventano fango. */
  --blu:#1E5BD6;
  --blu-alto:#4D8BFF;
  --banda:#1E5BD6;
  --banda-scuro:#123C93;
  --verde:#3FD08A;
  --ambra:#F0B849;
  --oro:#F0B849;
  --timbro:#FF6B81;
}

/* ============ 1. TIPOGRAFIA ============ */
body{font-family:var(--font-testo);letter-spacing:-.005em}

h1,h2,h3,h4,h5,h6,
.marchio b,.pillola,.pill,.btn,.v-btn,.b,.b-1,.b-2,.b-3,
.prezzo,.p-ora,.p-pri,.s-prezzo,.s-nome,.s-marca,.v-h1,.lt-modello,
.f,.f.on,.tag,.eti,.timbro,.doc-rif,.passo-n,.p-n,.conto,.sez-t,
.hero h1,.t-big,.invia,.e1,.f1,.adm-esporta{
  font-family:var(--font-sport)}

/* i titoli grossi: stretti, maiuscoli dove già lo erano, con lo
   spessore alto che Figtree regge bene */
h1,h2{letter-spacing:-.042em;font-weight:800}
h3,h4{letter-spacing:-.028em;font-weight:700}

/* i numeri: tabulari ovunque, così prezzi e chilometri restano
   incolonnati mentre la giostra gira e le schede si ricaricano */
.prezzo,.p-ora,.p-pri,.s-prezzo,.s-dati,.dati,.t-riga dd,.conto{
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* i prezzi sono il dato che si cerca: vanno visti da lontano */
.p-ora,.prezzo,.s-prezzo{font-weight:800;letter-spacing:-.035em}

/* le etichette piccole in maiuscolo: a 9-10px il grassetto è quello
   che le tiene leggibili, più della dimensione */
.s-marca,.sez-t,.sl-t,.marca,.lt-marca,.conto{font-weight:700}

/* ============ 2. FONDO E SUPERFICI ============ */
body{background:var(--sfondo);color:var(--nero)}
:focus-visible{outline-color:var(--blu-alto)}
::selection{background:rgba(77,139,255,.32)}

/* barre in vetro: erano bianche traslucide, ora scure traslucide */
.nav,.filtri,.top{background:rgba(8,11,18,.78);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--linea)}

/* schede, pannelli, riquadri */
.scheda,.modale,.card,.pannello,.riquadro,.s-carica,.lastra,.lastra-tipo,
.q-corpo,.blocco,.box,.pan{background:var(--carta-alta)}
.scheda,.lastra-tipo{border-color:var(--linea)}
.scheda:hover{box-shadow:0 18px 44px rgba(0,0,0,.55)}

/* bordi e separatori: la stessa riga sottile ovunque */
.riga,.divisore,hr{border-color:var(--linea)}

/* pastiglie dei filtri */
.f{background:transparent;border-color:var(--linea);color:var(--nero)}
.f:hover{border-color:var(--blu-alto)}
.f.on{background:var(--blu);border-color:transparent;color:#fff}
.f select,.f option{background:var(--carta-alta);color:var(--nero)}
.cerca{border-color:var(--linea)}
.cerca input{color:var(--nero)}
.cerca input::placeholder{color:var(--grigio-3)}

/* bottoni pieni */
.pillola,.pill,.s-1,.b-1,.invia,.e1,.f1,.dec-2,.mini-cta{
  background:var(--blu);color:#fff;border-color:transparent}
.pillola:hover,.pill:hover,.s-1:hover,.b-1:hover,.invia:hover{background:var(--blu-alto)}
.s-2,.b-2,.b-3,.dec-1{background:transparent;border:1px solid var(--linea);color:var(--nero)}
.s-2:hover,.b-2:hover,.b-3:hover{border-color:var(--blu-alto)}

/* pastiglie informative */
.d,.s-dati span,.dati span,.tag.chiaro{
  background:rgba(255,255,255,.05);border:1px solid var(--linea);color:var(--grigio)}
.tag{color:#fff}

/* ============ 3. I BIANCHI SCRITTI A MANO ============
   Qui sotto i punti che nessuna variabile poteva coprire, perché
   nelle pagine il colore era scritto per esteso. */
.gal-nav{background:rgba(13,18,28,.82);color:var(--nero)}
.gal-nav:hover{background:var(--carta-alta)}
.s-del{background:rgba(13,18,28,.9)}
.dove code{background:var(--carta-alta);color:var(--nero)}
.passo::before{background:var(--carta-alta)}
.dec-1{background:transparent;border:1px solid rgba(255,255,255,.55);color:#fff}
.s-vuota{background:var(--carta-alta);color:var(--grigio-3)}
.m-sede.sel{background:rgba(77,139,255,.10)}
.maschera svg path{fill:var(--sfondo)}

/* le fotografie su fondo scuro: un filo di contrasto in meno,
   altrimenti stonano contro il nero */
.scheda img,.lastra img,.card img,.gal-grande img{filter:saturate(1.03) contrast(.98)}

/* i campi dei moduli */
input,select,textarea{background:var(--carta-alta);color:var(--nero);
  border-color:var(--linea)}
input::placeholder,textarea::placeholder{color:var(--grigio-3)}

/* ============ 4. CARTA VERA ============
   Il Certificato di Trasparenza si stampa e si allega alla proposta:
   su carta deve restare nero su bianco, non un rettangolo di toner. */
@media print{
  :root{--carta:#fff;--carta-alta:#fff;--inchiostro:#16181C;--nero:#16181C;
        --grigio:#5b6069;--linea:#D3D5CC;--banda:#0A2E8F;--verde:#2F6350;
        --timbro:#7A2E3B;--ambra:#8A6A17;--sfondo:#fff}
  body{background:#fff;color:#16181C}
  .scheda,.modale,.card,.pannello{background:#fff}
}

/* ============ 5. LE SUPERFICI RIMASTE BIANCHE ============
   Trovate leggendo una per una le regole delle pagine: qui il bianco
   era scritto per esteso, quindi nessuna variabile poteva coprirlo.
   Sono quasi tutte del percorso d'acquisto, dove ogni riquadro era
   un foglio su cui si firma. */
.targa,.modulo,.nota,.cert,.scelta,.vin-box,.doc,.somma,
.blocco-carta,.stato-pratica,.spunta.evidenza,.tag.chiaro,.s-carica{
  background:var(--carta-alta);border-color:var(--linea);color:var(--nero)}
.g-nav:hover{background:var(--carta-alta)}
.campo input,.campo select,.otp-cifre input,.spunta input{
  background:var(--carta-2);color:var(--nero);border-color:var(--linea)}
.s-barra.on{background:#fff}          /* la barretta della galleria resta bianca: è un indicatore */

/* la proposta firmata e la carta di credito restano fogli bianchi:
   sono la riproduzione di un documento e di una carta vera, non
   pannelli dell'interfaccia. Dentro a quei due riquadri le variabili
   tornano ai valori da carta: così il testo resta nero e un titolo
   blu resta blu, invece di essere appiattito a un colore solo. */
.pdf-vero,.carta-mock{
  --carta:#fff;--carta-alta:#fff;--inchiostro:#16181C;--nero:#16181C;
  --grigio:#5b6069;--grigio-3:#8a8f98;--linea:#D3D5CC;--banda:#0A2E8F;
  background:#fff;color:#16181C}

/* il riquadro chiaro dentro la fascia blu del Certificato */
.dec-1{background:#fff;color:var(--banda-scuro);border-color:#fff}


/* ============ 6. PESI DEL CARATTERE ============
   Cinque file di un'unica famiglia: meno da scaricare prima che la
   pagina si veda, e nessun salto fra due caratteri diversi mentre
   arrivano. L'800 chiesto da qualche pagina non lo carico: qui sotto
   è riportato sul 900 e sul 700, così il browser non se lo inventa
   allargando le lettere — che è quello che fa quando un peso manca. */
h1,h2,.v-h1,.p-ora,.prezzo,.s-prezzo{font-weight:900}
h3,h4,.s-nome,.nome{font-weight:700}
.pillola,.pill,.btn,.v-btn,.f,.tag,.invia{font-weight:600}


/* ============ 7. LA DIRECTORY DEGLI ELENCHI ============
   Le voci di /auto-usate/ sono collegamenti in griglia, non bottoni:
   il tema non deve riempirli di blu. La regola sta qui e non nello
   stampo perché è il tema a doversi trattenere. */
.voci-el,.voci-el a{background:transparent;border-radius:0;color:var(--nero)}
.voci-el a{border:0;border-bottom:1px solid var(--linea)}
.voci-el a:hover{background:transparent;border-bottom-color:var(--blu-alto)}