/* ════════════════════════════════════════════════════════════════════
   PRENOTAZIONE  —  si carica dopo lds-home.css e ne usa i colori
   ════════════════════════════════════════════════════════════════════
   Cosa fanno i migliori, e perche' qui si fa lo stesso.

   Blacklane e Wheely mettono i due indirizzi per primi e grandi, e
   tengono tutto il resto sotto. Non e' vezzo: chi arriva su una pagina
   di prenotazione ha in testa un percorso, non un modulo. Se la prima
   cosa che vede e' "Nome e cognome" deve cambiare pensiero prima di
   cominciare, e una parte se ne va.

   Da qui le tre scelte di questa pagina:
   1. Prima DOVE e QUANDO. Poi CHI.
   2. La mappa compare da sola quando i due capi hanno un nome vero.
      Non e' decorazione: e' la prova che ci siamo capiti sull'indirizzo.
   3. Nessun prezzo, da nessuna parte. Il preventivo arriva a voce.
   ════════════════════════════════════════════════════════════════════ */

/* ── Le tre porte ────────────────────────────────────────────────────
   Modulo, WhatsApp, telefono. Chi ha fretta non deve compilare niente:
   due delle tre porte portano fuori dalla pagina in un colpo. */
.doors{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:1px;background:var(--hair);
  max-width:var(--frame-w);margin-inline:auto;border:1px solid var(--hair);
}
.door{
  background:var(--cream);padding:1.8rem 1.6rem;text-align:left;
  display:flex;flex-direction:column;gap:.5rem;
  transition:background .4s var(--e);
}
.door:hover{background:var(--cream-2)}
.door .dn{font-family:var(--disp);font-size:1.35rem;font-weight:300;line-height:1.2}
.door .dd{font-size:12.5px;color:var(--ink-2);line-height:1.7}
.door .dk{
  font-family:var(--sans);font-size:10px;font-weight:300;letter-spacing:.3em;
  text-transform:uppercase;color:var(--ink-3);
}
/* La porta principale si distingue con un filetto in alto, non con un
   fondo scuro: le altre due non devono sembrare ripieghi. */
.door.main{border-top:2px solid var(--ink);margin-top:-1px}

/* ── Il modulo ───────────────────────────────────────────────────── */
.form{max-width:var(--frame-w);margin-inline:auto;padding-inline:var(--gut)}
.act{border-top:1px solid var(--hair);padding-top:1.6rem;margin-top:clamp(2.5rem,6vh,4rem)}
.act-h{
  display:flex;align-items:baseline;gap:1rem;margin-bottom:1.8rem;
  font-family:var(--sans);font-size:10.5px;font-weight:300;letter-spacing:.3em;
  text-transform:uppercase;color:var(--ink-3);
}
.act-h b{font-weight:300;color:var(--ink)}

.row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0 1.6rem}
.f{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1.5rem}
.f > label,.leg{
  font-family:var(--sans);font-size:10.5px;font-weight:300;letter-spacing:.26em;
  text-transform:uppercase;color:var(--ink-3);
}
/* Campi senza cornice: solo il filetto sotto, come una riga su cui si
   scrive. La cornice completa moltiplicata per quindici campi fa una
   griglia di scatole, ed e' quello che rende un modulo faticoso. */
.f input,.f select,.f textarea{
  background:none;border:none;border-bottom:1px solid var(--hair);
  padding:.6rem 0;font-family:var(--sans);font-size:15px;font-weight:300;
  color:var(--ink);outline:none;width:100%;
  transition:border-color .35s ease;
}
.f input:focus,.f select:focus,.f textarea:focus{border-bottom-color:var(--ink)}
.f input::placeholder,.f textarea::placeholder{color:var(--ink-3)}
.f textarea{resize:vertical;min-height:76px;line-height:1.75}
.f select{cursor:pointer}
.f .hint{font-size:11.5px;color:var(--ink-3);line-height:1.6}
.f.bad input,.f.bad select{border-bottom-color:var(--bad,#9B3B34)}
.f .err{font-size:11.5px;color:#9B3B34;min-height:0}

/* ── Le tappe ─────────────────────────────────────────────────────── */
.stop{display:grid;grid-template-columns:auto 1fr auto;gap:.9rem;align-items:center;
  padding:.2rem 0}
.stop .let{
  font-family:var(--sans);font-size:10.5px;font-weight:300;letter-spacing:.2em;
  color:var(--ink-3);width:1.2rem;
}
.stop .rm{font-size:1rem;line-height:1;color:var(--ink-3);padding:.3rem;
  transition:color .3s ease}
.stop .rm:hover{color:#9B3B34}
/* ── Suggerimenti d'indirizzo ─────────────────────────────────────
   Il cliente sceglie da un elenco di posti che esistono davvero. E'
   quello che fanno i migliori, e non e' comodita': e' l'unico modo di
   sapere con certezza dove passare a prenderlo. Se scrive a mano
   "Aeroporto di Malpensa Terminal 1" nessun archivio lo riconosce;
   se lo sceglie da un elenco, arrivano anche le coordinate. */
.stop{position:relative}
.sugg{
  position:absolute;top:100%;left:2.1rem;right:0;z-index:40;
  background:var(--white);border:1px solid var(--hair);border-top:none;
  max-height:16rem;overflow-y:auto;display:none;
}
.sugg.on{display:block}
.sugg button{
  display:block;width:100%;text-align:left;padding:.65rem .9rem;
  font-family:var(--sans);font-size:13px;font-weight:300;line-height:1.45;
  color:var(--ink);border-bottom:1px solid var(--hair-2,rgba(26,26,24,.07));
  transition:background .2s ease;
}
.sugg button:last-child{border-bottom:none}
.sugg button:hover,.sugg button[aria-selected="true"]{background:var(--cream-2)}
.sugg .q{display:block;font-size:11.5px;color:var(--ink-3);margin-top:.15rem}
.stop input[data-ok]{border-bottom-color:var(--ink)}

/* align-self: dentro una colonna flex un bottone si stira per tutta la
   larghezza, e il filetto sotto diventa una riga da un bordo all'altro. */
.addstop{
  align-self:flex-start;
  font-family:var(--sans);font-size:11.5px;font-weight:300;letter-spacing:.1em;
  color:var(--ink-2);border-bottom:1px solid var(--hair);padding-bottom:.2rem;
  margin-top:.9rem;transition:border-color .3s ease,color .3s ease;
}
.addstop:hover{border-bottom-color:var(--ink);color:var(--ink)}

/* ── La mappa ─────────────────────────────────────────────────────
   Chiusa finche' i due capi non hanno un nome riconosciuto. Si apre
   sull'altezza, cosi' la pagina non salta sotto il dito. */
.mapwrap{
  max-height:0;overflow:hidden;opacity:0;
  transition:max-height .7s var(--e),opacity .5s ease,margin .7s var(--e);
  margin-top:0;
}
.mapwrap.on{max-height:620px;opacity:1;margin-top:2rem}
#mappa{width:100%;height:clamp(240px,38vh,380px);background:var(--cream-2)}
.leaflet-container{font-family:var(--sans)!important;background:var(--cream-2)!important}
.leaflet-control-attribution{
  background:rgba(252,251,248,.86)!important;font-size:10px!important;color:var(--ink-3)!important;
}
.leaflet-control-attribution a{color:var(--ink-2)!important}
.mapfacts{
  display:flex;flex-wrap:wrap;gap:.6rem 2.6rem;align-items:baseline;
  border-bottom:1px solid var(--hair);padding:1rem 0;
}
.mapfacts .mf-i{display:flex;flex-direction:column;gap:.3rem}
.mapfacts .mf-l{font-size:10.5px;font-weight:300;letter-spacing:.26em;
  text-transform:uppercase;color:var(--ink-3)}
.mapfacts .mf-v{font-family:var(--sans);font-size:1.25rem;font-weight:200;
  font-variant-numeric:lining-nums tabular-nums;color:var(--ink)}
.mapfacts .mf-n{font-size:11.5px;color:var(--ink-3);margin-left:auto;max-width:34ch;line-height:1.6}
.mapstate{font-size:12px;color:var(--ink-3);padding-top:.6rem;min-height:1.2rem}

/* ── Scelta a filetti (preferenza di contatto, veicolo) ───────────
   Non pastiglie colorate: rettangoli affiancati, uno acceso. Si vede
   quale e' scelto anche stampando la pagina in bianco e nero. */
.pick{display:flex;flex-wrap:wrap;gap:0;border:1px solid var(--hair);width:max-content;max-width:100%}
.pick button{
  font-family:var(--sans);font-size:12px;font-weight:300;letter-spacing:.12em;
  color:var(--ink-2);padding:.7rem 1.1rem;border-right:1px solid var(--hair);
  transition:background .3s ease,color .3s ease;
}
.pick button:last-child{border-right:none}
.pick button:hover{background:var(--cream-2);color:var(--ink)}
.pick button[aria-pressed="true"]{background:var(--ink);color:var(--cream)}
.pick button:disabled{color:var(--ink-3);cursor:not-allowed;opacity:.6}
.pick button:disabled:hover{background:none}

/* ── Invio ───────────────────────────────────────────────────────── */
.send{
  display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center;
  margin-top:clamp(2rem,5vh,3rem);padding-top:1.8rem;border-top:1px solid var(--hair);
}
.send .note{font-size:12.5px;color:var(--ink-2);max-width:44ch;line-height:1.7}
.solid[disabled]{opacity:.45;cursor:not-allowed}
.solid .sp{display:inline-block;width:11px;height:11px;margin-left:.6rem;
  border:1px solid currentColor;border-top-color:transparent;border-radius:50%;
  animation:spin .8s linear infinite;vertical-align:-1px}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── Esito ───────────────────────────────────────────────────────── */
.outcome{display:none;padding:clamp(2.5rem,7vh,5rem) 0;text-align:center}
.outcome.on{display:block}
.outcome h2{margin-top:0}
.outcome p{margin:1.2rem auto 0;max-width:46ch;color:var(--ink-2);line-height:1.85}
.recap{
  text-align:left;max-width:34rem;margin:2.4rem auto 0;
  border-top:1px solid var(--hair);
}
.recap .r{display:grid;grid-template-columns:minmax(0,10ch) 1fr;gap:1rem;
  padding:.8rem 0;border-bottom:1px solid var(--hair);align-items:baseline}
.recap .rl{font-size:10.5px;font-weight:300;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink-3)}
.recap .rv{font-size:13.5px;color:var(--ink)}

@media(max-width:640px){
  .pick{width:100%}
  .pick button{flex:1 1 auto;text-align:center}
  .mapfacts .mf-n{margin-left:0;flex-basis:100%}
  .send{flex-direction:column;align-items:stretch}
  .send .solid{text-align:center}
}
@media(prefers-reduced-motion:reduce){
  .mapwrap{transition:none}
}

/* ── Quello che era gia' stato scritto ────────────────────────────
   Compare solo se c'e' davvero qualcosa da riprendere. Nessun pannello
   modale che chiede il permesso: i campi sono gia' pieni, e chi vuole
   ricominciare ha il suo bottone. */
.ripresa{
  display:none;max-width:var(--frame-w);margin:0 auto;
  padding:.9rem var(--gut);border-left:2px solid var(--ink);
  background:var(--cream-2);font-size:13px;color:var(--ink-2);line-height:1.7;
}
.ripresa.on{display:block}
.ripresa button{
  font-family:var(--sans);font-size:12px;font-weight:300;letter-spacing:.08em;
  color:var(--ink);border-bottom:1px solid var(--hair);margin-left:.4rem;
  transition:border-color .3s ease;
}
.ripresa button:hover{border-bottom-color:var(--ink)}

/* ── Il passo zero: quando ────────────────────────────────────────
   Sta sopra le tre porte perche' e' la sola decisione che il visitatore
   ha gia' preso prima di arrivare. Chiedergli quella per prima, e solo
   quella, costa un secondo e cambia quanti arrivano in fondo. */
.quando{
  border:1px solid var(--hair);padding:clamp(1.4rem,3vw,2rem);
  margin-bottom:clamp(1.6rem,4vh,2.4rem);
  display:flex;flex-direction:column;gap:1.1rem;
}
.q-t{font-family:var(--disp);font-size:clamp(1.4rem,2.8vw,1.9rem);font-weight:300;line-height:1.2}
.q-c{display:flex;flex-wrap:wrap;gap:1.4rem;align-items:flex-end}
.q-f{display:flex;flex-direction:column;gap:.4rem;flex:1 1 11rem;min-width:0}
.q-f label{
  font-family:var(--sans);font-size:10.5px;font-weight:300;letter-spacing:.26em;
  text-transform:uppercase;color:var(--ink-3);
}
.q-f input{
  background:none;border:none;border-bottom:1px solid var(--hair);
  padding:.55rem 0;font-family:var(--sans);font-size:16px;font-weight:300;
  color:var(--ink);outline:none;width:100%;transition:border-color .35s ease;
}
.q-f input:focus{border-bottom-color:var(--ink)}
.q-c .solid{flex:0 0 auto;align-self:flex-end}
.q-n{font-size:12.5px;color:var(--ink-3);transition:color .3s ease}
.q-n.ok{color:var(--ink-2)}
@media(max-width:560px){
  .q-c{gap:1rem}
  .q-c .solid{width:100%;text-align:center}
}

/* ── La fotografia del veicolo scelto ─────────────────────────────
   Compare solo dopo la scelta: un riquadro vuoto in attesa e' peggio
   del nulla. Serve a capire se ci stanno le valigie, non a decorare. */
.veic-f{max-height:0;overflow:hidden;opacity:0;
  transition:max-height .5s cubic-bezier(.22,1,.36,1),opacity .35s ease,margin .5s ease}
.veic-f.on{max-height:16rem;opacity:1;margin-top:.8rem}
.veic-f img{width:100%;max-width:22rem;aspect-ratio:4/3;object-fit:cover;display:block;
  background:var(--cream-2)}
.veic-f span{display:block;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);margin-top:.5rem}
@media(prefers-reduced-motion:reduce){.veic-f{transition:none}}