/* ==========================================================================
   CLIENTE — il foglio delle pagine che apre un CLIENTE, non chi lavora qui.
   (A8.5, 13/10/2026)

   ⚠️ NON È `movee.css`, ED È IL PUNTO. `movee.css` veste il gestionale: è
      fatto per chi sta al banco otto ore, denso e silenzioso. Qui dall'altra
      parte c'è una persona che due minuti prima stava sul booking di
      movee.it — se la pagina cambia faccia, sembra un'altra azienda.
      Il founder, guardandola dal telefono: «a livello grafico è troppo
      basso, poca UX, poco moderno». Aveva ragione: era il gestionale.

   📌 I TOKEN SONO QUELLI DI `movee.it` (`public/css/style.css`), copiati coi
      loro valori veri, e le forme vengono da `_bozze/booking/css/prenota.css`
      — il booking disegnato col founder il 09/10: barra ciano, testata scura,
      card con ombra, quattro riquadri con icona, prezzo grande.
      ⚠️ È una DUPLICAZIONE DICHIARATA: il sito e il gestionale sono due
         programmi diversi, su due macchine diverse, e non condividono un
         foglio. Se il sito cambia i suoi colori, vanno cambiati anche qui.

   📌 IL CARATTERE È BERGEN SANS, quello del marchio e del sito — non il
      Plus Jakarta del gestionale (02/10). `bergen.css` era stato tolto quel
      giorno ed è tornato per queste pagine: è `font-display:swap`, quindi la
      pagina si disegna subito e il carattere arriva dopo.

   Mobile first: questa pagina si apre da un messaggio WhatsApp, e lo schermo
   normale è largo 375px. Le soglie restano quelle del sistema (640, 1024).
   ========================================================================== */

:root{
  --cyan:#11B3CE; --cyan-2:#0FA1B9; --cyan-3:#0D8DA3;
  --cyan-soft:rgba(17,179,206,.10); --cyan-border:rgba(17,179,206,.28);
  --bg:#fff; --bg-2:#f7f9fb; --bg-3:#f1f4f7; --bg-4:#eaeef2;
  --ink:#0a0d10; --ink-2:#2a2f36; --muted:#5a626c; --muted-2:#8b94a0;
  --line:rgba(10,13,16,.08); --line-2:rgba(10,13,16,.14);
  --ok:#1f9d55; --ok-soft:#f0faf4; --ko:#b42318; --ko-soft:#fff4f2;
  --font:'Bergen Sans','Outfit',system-ui,-apple-system,sans-serif;
  --shadow:0 4px 12px rgba(10,13,16,.06), 0 2px 4px rgba(10,13,16,.04);
  --shadow-lg:0 8px 24px rgba(10,13,16,.06);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg-2);color:var(--ink);font:400 15px/1.5 var(--font);
     -webkit-font-smoothing:antialiased}
a{color:inherit}

/* La barra in testa, ciano come il booking del sito */
.cl-nav{background:var(--cyan);height:60px;display:flex;align-items:center;
        padding:0 18px;position:sticky;top:0;z-index:50}
.cl-nav img{height:22px;width:auto;filter:brightness(0) invert(1)}
.cl-nav .r{margin-left:auto;font-size:13px;font-weight:600;color:rgba(255,255,255,.92);
           text-decoration:none}

.cl{max-width:900px;margin:0 auto;padding:18px 16px 56px}
@media (min-width:1024px){ .cl{padding:28px 32px 72px} }

h1,h2,h3{font-family:var(--font);margin:0}
.h2c{font-size:19px;font-weight:800;letter-spacing:-.2px;margin:26px 0 12px}
@media (min-width:1024px){ .h2c{font-size:22px} }

/* ── la testata: stato + riferimento, come la conferma del booking ─────── */
.cf-top{display:flex;justify-content:space-between;align-items:center;gap:10px;
        background:var(--ink);color:#fff;border-radius:18px 18px 0 0;
        padding:13px 18px;font-size:13.5px}
.cf-top .st{font-weight:800;color:#7be3a3}
.cf-top.ko{background:var(--ko)} .cf-top.ko .st{color:#fff}
.cf-top .n{font-weight:700;letter-spacing:.04em;color:rgba(255,255,255,.72)}

.cf-card{background:#fff;border:1px solid var(--line);border-top:0;
         border-radius:0 0 18px 18px;padding:18px;box-shadow:var(--shadow)}

/* ritiro → riconsegna */
.cf-rr{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center}
.cf-rr small,.cl small.lbl{display:block;font-size:11px;color:var(--muted-2);
        font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.cf-rr b{display:block;font-size:16px;font-weight:800;margin:3px 0 1px}
.cf-rr span{font-size:13px;color:var(--muted);display:block;line-height:1.35}
.cf-rr .r{text-align:right}
.cf-rr .mid{color:var(--muted-2);font-size:18px}
@media (max-width:420px){ .cf-rr{grid-template-columns:1fr 1fr} .cf-rr .mid{display:none} }

/* l'auto */
.cf-car{display:flex;justify-content:space-between;align-items:center;gap:12px;
        margin-top:16px;background:var(--bg-2);border-radius:14px;padding:14px 16px}
.cf-car b{display:block;font-size:16px;font-weight:800}
.cf-car span{font-size:13px;color:var(--muted)}
.cf-car .pz{text-align:right;white-space:nowrap}
.cf-car .pz b{font-size:24px;font-weight:800;letter-spacing:-.5px}
.cf-car .pz span{font-size:12px}

/* il riquadro della verifica: ciano se manca, verde se è fatta */
.cf-ver{display:flex;gap:14px;align-items:center;justify-content:space-between;
        flex-wrap:wrap;margin-top:16px;background:#fff;border:1px solid var(--cyan-border);
        border-radius:16px;padding:16px 18px;box-shadow:var(--shadow-lg)}
.cf-ver small{color:var(--cyan-3)}
.cf-ver b{display:block;font-size:17px;font-weight:800;margin:3px 0}
.cf-ver p{margin:0;font-size:14px;color:var(--ink-2)}
.cf-ver.ok{border-color:var(--ok);background:var(--ok-soft);box-shadow:none}
.cf-ver.ok small,.cf-ver.ok b{color:var(--ok)}
.cf-ver .btn{flex:none}

/* ── le quattro cose che il cliente può fare ───────────────────────────── */
.gvg{display:grid;grid-template-columns:1fr 1fr;gap:12px}
/* Le azioni in evidenza sono TRE (date, protezione, extra): l'annullamento
   sta in fondo, nelle informazioni — non si invoglia (13/10). Con tre card
   la terza si prende la riga intera invece di restare spaiata. */
.gvg>*:nth-child(3):last-child{grid-column:1/-1;flex-direction:row;align-items:center;gap:14px;min-height:0}
.gvg>*:nth-child(3):last-child .gi{margin-bottom:0}
@media (min-width:1024px){
  .gvg{grid-template-columns:repeat(3,1fr);gap:14px}
  .gvg>*:nth-child(3):last-child{grid-column:auto;flex-direction:column;align-items:flex-start;gap:4px;min-height:112px}
  .gvg>*:nth-child(3):last-child .gi{margin-bottom:8px}
}
.gv{text-align:left;background:#fff;border:1px solid var(--line);border-radius:16px;
    padding:15px;cursor:pointer;font:inherit;box-shadow:0 6px 18px rgba(10,13,16,.05);
    min-height:112px;display:flex;flex-direction:column;gap:4px;
    transition:border-color .18s,transform .18s}
.gv:hover{border-color:var(--ink)}
.gv:active{transform:scale(.985)}
.gv .gi{width:38px;height:38px;border-radius:50%;background:var(--bg-3);
        display:flex;align-items:center;justify-content:center;margin-bottom:8px}
.gv .gi svg{width:20px;height:20px;fill:none;stroke:var(--ink);stroke-width:1.7;
            stroke-linecap:round;stroke-linejoin:round}
.gv b{font-size:15px;font-weight:800}
.gv small{font-size:12.5px;color:var(--muted);line-height:1.35}
.gv.ko .gi{background:var(--ko-soft)} .gv.ko .gi svg{stroke:var(--ko)} .gv.ko b{color:var(--ko)}

/* il totale */
.pay2{background:#fff;border:1px solid var(--line);border-radius:18px;
      padding:18px;margin-top:14px;box-shadow:var(--shadow)}
.pay2 .tot{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.pay2 .tot b{font-size:16px;font-weight:800}
.pay2 .tot small{display:block;font-size:12.5px;color:var(--muted);font-weight:400;
                 letter-spacing:0;text-transform:none}
.pay2 .tot .v{font-size:30px;font-weight:800;letter-spacing:-.8px;white-space:nowrap}
.pay2 .vv{margin-top:12px;padding-top:12px;border-top:1px solid var(--bg-3);
          font-size:13.5px;color:var(--ink-2);display:grid;gap:7px}
.pay2 .vv .r{display:flex;justify-content:space-between;gap:12px}
.pay2 .vv .r span:last-child{color:var(--muted);white-space:nowrap}

/* le informazioni, a soffietto */
.acc{background:#fff;border:1px solid var(--line);border-radius:14px;margin-bottom:9px}
.acc summary{padding:14px 16px;font-size:15px;font-weight:700;cursor:pointer;
             list-style:none;display:flex;justify-content:space-between;gap:10px;
             align-items:center;min-height:48px}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"⌄";color:var(--muted-2);font-size:15px}
.acc[open] summary::after{content:"⌃"}
.acc .ab{padding:0 16px 15px;font-size:14px;color:var(--ink-2);line-height:1.55}
.acc .ab a{color:var(--cyan-3);font-weight:700}

/* ── bottoni ───────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
     background:#fff;color:var(--ink);border:1px solid var(--line-2);
     border-radius:12px;padding:0 20px;min-height:48px;font:700 15px var(--font);
     cursor:pointer;text-decoration:none;white-space:nowrap}
.btn:hover{border-color:var(--ink)}
.btn.primary{background:var(--ink);border-color:var(--ink);color:#fff}
.btn.primary:hover{background:#262b31}
.btn.cyan{background:var(--cyan);border-color:var(--cyan);color:#fff}
.btn.cyan:hover{background:var(--cyan-2)}
/* Il modo per annullare c'è e si legge, ma non chiama: niente rosso pieno,
   niente bottone grande — è un'uscita, non un'offerta. */
.ann-lnk{background:transparent;border-color:transparent;color:var(--muted);
         text-decoration:underline;text-underline-offset:3px;padding:0 6px;font-weight:600}
.ann-lnk:hover{color:var(--ink);border-color:transparent}
.btn.ko{color:var(--ko);border-color:#f3c2bc}
.btn.ko:hover{border-color:var(--ko)}
.btn[disabled]{opacity:.5;cursor:default}
.btn.largo{width:100%}

/* ── il pannello che si apre dalle quattro card ────────────────────────── */
.scrim{position:fixed;inset:0;background:rgba(10,13,16,.45);z-index:80;
       opacity:0;pointer-events:none;transition:opacity .18s}
.scrim.on{opacity:1;pointer-events:auto}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:81;background:#fff;
       border-radius:20px 20px 0 0;padding:20px 18px calc(20px + env(safe-area-inset-bottom));
       max-height:92vh;overflow:auto;transform:translateY(100%);transition:transform .22s ease}
.sheet.on{transform:none}
@media (min-width:640px){
  .sheet{left:50%;right:auto;bottom:auto;top:50%;width:520px;max-width:calc(100vw - 32px);
         border-radius:20px;transform:translate(-50%,-46%) scale(.98);opacity:0}
  .sheet.on{transform:translate(-50%,-50%);opacity:1}
}
.sheet h3{font-size:19px;font-weight:800;margin-bottom:4px}
.sheet .sub{font-size:14px;color:var(--muted);margin:0 0 16px}
.sheet .x{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:50%;
          border:1px solid var(--line);background:#fff;font-size:17px;cursor:pointer;color:var(--muted)}

/* campi */
.campi{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.campi>*{min-width:0}
.campo label{display:block;font-size:12px;font-weight:700;color:var(--muted);margin-bottom:5px}
.campo input,.campo select{width:100%;min-width:0;font:500 16px var(--font);color:var(--ink);
  background:#fff;border:1px solid var(--line-2);border-radius:11px;padding:0 12px;min-height:50px}
.campo input:focus,.campo select:focus{outline:2px solid var(--cyan-border);border-color:var(--cyan)}

/* le scelte: copertura ed extra */
.scelta{display:flex;gap:12px;align-items:flex-start;padding:13px 14px;border:1px solid var(--line);
        border-radius:13px;margin-bottom:9px;cursor:pointer;min-height:56px;background:#fff}
.scelta.on{border-color:var(--ink);box-shadow:0 6px 16px rgba(10,13,16,.06)}
.scelta.gia{opacity:.6;cursor:default;background:var(--bg-2)}
.scelta input{margin-top:3px;flex:0 0 auto;width:20px;height:20px;accent-color:var(--cyan)}
.scelta .n{font-size:15px;font-weight:700;display:block}
.scelta .d{font-size:12.5px;color:var(--muted);display:block;margin-top:2px}
.scelta .p{margin-left:auto;font-size:14.5px;font-weight:800;white-space:nowrap;padding-left:8px}

/* la riga del nuovo totale */
.nuovo{background:var(--cyan-soft);border-radius:12px;padding:13px 14px;margin:16px 0;
       font-size:14px;color:var(--ink-2)}
.nuovo b{font-size:20px;font-weight:800;color:var(--ink);letter-spacing:-.4px}
.esito{font-size:13.5px;color:var(--muted);margin-top:10px}
.esito.ko{color:var(--ko)}
.esito .btn{margin-top:10px}

/* la schermata finale */
.fatto{text-align:center;padding:48px 16px}
.fatto .segno{font-size:48px;line-height:1;margin-bottom:8px}
.fatto h1{font-size:24px;font-weight:800;margin-bottom:8px}
.fatto p{color:var(--muted);font-size:15px;max-width:420px;margin:0 auto 20px}

.vuoto{background:#fff;border:1px solid var(--line);border-radius:16px;padding:28px 18px;
       text-align:center;color:var(--muted);font-size:14.5px}

/* ── il ponte fra le due pagine del cliente (A8.11, 13/10/2026) ──────────
   Founder: «la pagina inserimento dati è scollegata dalla pagina della
   gestione prenotazioni». Chi ha in mano un link si aspetta di arrivare
   all'altro: le due pagine sono due facce della stessa prenotazione. */
.ponte{display:flex;gap:12px;align-items:center;justify-content:space-between;
       flex-wrap:wrap;margin:22px 0 0;padding:16px 18px;background:var(--bg-2);
       border:1px solid var(--line);border-radius:16px}
.ponte span{font-size:14px;color:var(--muted);line-height:1.4}
.ponte .btn{flex:none}

/* ── il MODULO: la verifica per il ritiro è l'unica pagina del cliente che
      chiede di scrivere (A8.11, 13/10/2026). Fino a oggi `verifica.html`
      vestiva `movee.css`, cioè il GESTIONALE, mentre `viaggio.html` vestiva
      questo: due pagine della stessa prenotazione con due facce diverse —
      ed è il motivo vero per cui il founder le ha viste «scollegate».
   ⚠️ I campi stanno QUI e non in una copia dentro la pagina: se nasce una
      terza pagina del cliente che chiede qualcosa, la trova già fatta. */
.fld label{display:block;font-size:12.5px;font-weight:700;color:var(--ink-2);
           margin-bottom:5px}
.fld input,.fld select{width:100%;min-width:0;background:#fff;color:var(--ink);
  border:1px solid var(--line-2);border-radius:12px;padding:0 14px;min-height:48px;
  font:400 15px var(--font);appearance:none}
.fld input:focus,.fld select:focus{outline:none;border-color:var(--cyan);
  box-shadow:0 0 0 3px var(--cyan-soft)}
.fld .aiuto{font-size:12px;color:var(--muted);margin-top:5px;line-height:1.45}
.manca input,.manca select{border-color:var(--ko);background:var(--ko-soft)}