/* ============================================================
   Pagina Prenota

   Chi arriva qui ha gia' deciso. Il compito della pagina e' non
   fargli cambiare idea: campi grandi, nessuna scelta superflua,
   e la conferma visiva che il modulo ha capito prima che prema.

   Sul telefono i campi sono almeno 48px: sotto quella misura il
   dito sbaglia, e sbagliare qui significa perdere una prenotazione.
   ============================================================ */
.prn-hero{padding:64px 32px 4px;text-align:center}
.prn-mark{width:104px;height:104px;object-fit:contain;display:block;margin:0 auto 26px}
.prn-hero h1{font-size:clamp(30px,4.4vw,46px);line-height:1.15;max-width:780px;margin:14px auto 20px}
.prn-hero p.lead{font-size:17px;color:var(--slate);max-width:600px;margin:0 auto;line-height:1.7;text-wrap:balance}

.prn-wrap{max-width:680px;margin:0 auto;padding:0 32px 100px}

/* ---------- il modulo ---------- */
.prn-form{background:var(--white);border:.5px solid var(--sage-light);border-radius:16px;
  padding:30px 28px;margin-top:44px;box-shadow:0 30px 70px -55px rgba(46,58,55,.6)}

.prn-riga{display:grid;gap:16px;margin-bottom:18px}
.prn-riga.due{grid-template-columns:1fr 1fr}
.prn-riga.tre{grid-template-columns:1fr 1fr 1.4fr}

.prn-campo{margin-bottom:18px;min-width:0}
.prn-riga .prn-campo{margin-bottom:0}
.prn-campo label{display:block;font-family:var(--sans);font-size:12px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--slate);margin-bottom:7px}
.prn-campo label .opz{font-weight:400;text-transform:none;letter-spacing:0;
  /* --sage non si usa per il testo: 2,1:1, sotto la soglia leggibile */
  font-size:12px;color:var(--slate);margin-left:5px}

.prn-campo input,
.prn-campo select,
.prn-campo textarea{
  width:100%;font-family:var(--sans);font-size:16px;   /* 16px: sotto, iOS zooma da solo */
  padding:13px 14px;border-radius:10px;border:.5px solid var(--sage);
  background:var(--white);color:var(--ink);min-height:48px}
.prn-campo textarea{min-height:88px;resize:vertical;line-height:1.6}
/* Le date su iPhone (16 settembre 2026): Safari disegna il campo data
   come una scatola larga quanto il suo contenuto e ignora width:100%,
   così «Partenza» sforava la scheda a destra. Gli si toglie l'aspetto
   nativo e la larghezza minima, e diventa un campo come gli altri. */
.prn-campo input[type="date"]{appearance:none;-webkit-appearance:none;display:block;min-width:0;
  max-width:100%;text-align:left}
.prn-campo input[type="date"]::-webkit-date-and-time-value{text-align:left;min-height:1.3em}
.prn-campo select{appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%234C5A57' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:11px;
  padding-right:36px}
.prn-campo input:focus,
.prn-campo select:focus,
.prn-campo textarea:focus{outline:2px solid var(--terracotta);outline-offset:1px;border-color:var(--terracotta)}

.prn-aiuto{font-family:var(--sans);font-size:13px;line-height:1.55;color:var(--terracotta-dark);
  background:#FCF3EF;border-left:2px solid var(--terracotta);border-radius:0 7px 7px 0;
  padding:9px 12px;margin:9px 0 0}


/* ---------- azioni ---------- */
.prn-azioni{display:grid;grid-template-columns:1.5fr 1fr;gap:11px}
.prn-btn{font-family:var(--sans);font-size:15px;font-weight:600;padding:15px 18px;border-radius:11px;
  border:.5px solid var(--sage);background:var(--white);color:var(--ink);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;text-decoration:none;
  min-height:52px;transition:background .18s ease,border-color .18s ease,transform .18s ease}
.prn-btn svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.8;flex-shrink:0}
.prn-btn:hover{transform:translateY(-1px)}
.prn-btn.primario{background:var(--terracotta);border-color:var(--terracotta);color:var(--stone)}
.prn-btn.primario:hover{background:var(--terracotta-dark);border-color:var(--terracotta-dark)}
.prn-btn:not(.primario):hover{background:var(--sage-light);border-color:var(--slate)}
.prn-btn.ok{background:var(--green);border-color:var(--green);color:var(--stone)}
.prn-btn:focus-visible{outline:2px solid var(--terracotta);outline-offset:2px}

/* L'azione principale della pagina. Fino al 28 agosto 2026 queste
   due classi esistevano nel markup ma non in nessun foglio: il
   bottone che manda la richiesta era quello grigio di sistema,
   13px e alto 19. Le classi c'erano, lo stile no, e non se ne
   accorgeva nessuno perche' la pagina "funzionava". */
.prn-invia{width:100%;margin-top:12px;font-family:var(--sans);font-size:16px;font-weight:600;
  padding:16px 20px;border-radius:11px;border:.5px solid var(--terracotta);
  background:var(--terracotta);color:var(--stone);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;min-height:54px;
  transition:background .18s ease,border-color .18s ease,transform .18s ease}
.prn-invia:hover{background:var(--terracotta-dark);border-color:var(--terracotta-dark);
  transform:translateY(-1px)}
.prn-invia:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.prn-invia:disabled{background:var(--sage);border-color:var(--sage);color:var(--stone);
  cursor:default;transform:none}

.prn-sotto-invia{font-family:var(--sans);font-size:12.5px;line-height:1.6;
  color:var(--slate);text-align:center;margin:11px 0 0}

/* ---------- anteprima: nessuno manda al buio ---------- */
.prn-anteprima{margin-top:18px;border-top:.5px solid var(--sage-light);padding-top:14px}
.prn-anteprima summary{font-family:var(--sans);font-size:13.5px;color:var(--slate);cursor:pointer;
  list-style:none;display:inline-flex;align-items:center;gap:7px;
  /* 44px pieni: e un bersaglio da toccare, non una scritta */
  min-height:44px;padding:4px 2px}
.prn-anteprima summary::-webkit-details-marker{display:none}
.prn-anteprima summary::before{content:"›";font-size:17px;line-height:1;transition:transform .18s ease;display:inline-block}
.prn-anteprima[open] summary::before{transform:rotate(90deg)}
.prn-anteprima summary:hover{color:var(--terracotta-dark)}
.prn-anteprima pre{font-family:var(--sans);font-size:13.5px;line-height:1.7;color:var(--slate);
  background:var(--stone);border-radius:10px;padding:16px 18px;margin:12px 0 0;
  white-space:pre-wrap;word-break:break-word;overflow-x:auto}

/* ---------- telefono ---------- */
.prn-tel{background:var(--stone);border:.5px solid var(--sage-light);border-radius:14px;
  padding:26px 24px;margin-top:20px;text-align:center}
.prn-tel h2{font-size:18px;margin:0 0 4px}
.prn-tel p{font-family:var(--sans);font-size:13.5px;color:var(--slate);margin:0 0 18px}
.prn-numeri{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.prn-numeri a{display:flex;flex-direction:column;align-items:center;gap:3px;padding:12px 8px;
  border-radius:10px;border:.5px solid var(--sage);background:var(--white);text-decoration:none;min-height:60px;justify-content:center}
.prn-numeri a:hover{background:var(--sage-light);border-color:var(--slate)}
.prn-numeri .chi{font-family:var(--sans);font-size:11.5px;font-weight:600;color:var(--slate)}
.prn-numeri .num{font-family:var(--sans);font-size:13.5px;color:var(--terracotta-dark);white-space:nowrap}

/* ---------- coda ---------- */
.prn-cond{margin-top:20px;padding:16px 20px;border-left:2px solid var(--sage);background:var(--stone);border-radius:0 10px 10px 0}
.prn-cond p{font-family:var(--sans);font-size:14px;line-height:1.65;color:var(--slate);margin:0}
.prn-cond a{color:var(--terracotta-dark)}

@media (max-width:620px){
  .prn-hero{padding-top:44px}
  .prn-mark{width:84px;height:84px}
  .prn-wrap{padding-left:20px;padding-right:20px}
  .prn-form{padding:24px 20px;border-radius:14px}
  /* le tre colonne non ci stanno: adulti e bambini restano
     affiancati, l'eta' va sotto a tutta larghezza */
  .prn-riga.tre{grid-template-columns:1fr 1fr}
  .prn-riga.tre .eta{grid-column:1 / -1;margin-top:16px}
  /* due date affiancate in 335 px: con 14 px di lato la cifra dell'anno
     restava tagliata; con 10 ci sta tutta */
  .prn-campo input[type="date"]{padding-left:10px;padding-right:8px}
  .prn-azioni{grid-template-columns:1fr}
  .prn-numeri{grid-template-columns:1fr}
  .prn-numeri a{flex-direction:row;justify-content:space-between;padding:13px 16px;min-height:52px}
}

@media (prefers-reduced-motion:reduce){
  .prn-btn:hover{transform:none}
  .prn-invia:hover{transform:none}
  .prn-anteprima summary::before{transition:none}
}

/* collegamento alle domande frequenti, sopra il modulo: chi ha un
   dubbio deve trovarlo PRIMA di scrivere, non dopo aver mandato */
.prn-faq{margin:44px 0 -22px;text-align:center}
.prn-faq a{font-family:var(--sans);font-size:14px;color:var(--terracotta-dark);
  text-decoration:none;border-bottom:1px solid rgba(168,86,58,.35);padding-bottom:2px}
.prn-faq a:hover{border-bottom-color:var(--terracotta)}
.prn-faq + .prn-form{margin-top:34px}

/* ============================================================
   Il preventivo aperto

   Deve leggersi come una ricevuta, non come un annuncio: voci
   allineate a sinistra, cifre incolonnate a destra, e una
   gerarchia netta fra le righe di dettaglio e il totale.

   font-variant-numeric:tabular-nums e' quello che fa incolonnare
   le cifre. Senza, le virgole ballano da una riga all'altra e il
   blocco sembra approssimativo proprio dove serve precisione.
   ============================================================ */
.prn-conto{background:var(--stone);border:.5px solid var(--sage-light);border-radius:12px;
  padding:20px 22px;margin:24px 0 20px}
.prn-conto:empty{display:none}
.prn-conto-vuoto{font-family:var(--sans);font-size:14px;color:var(--slate);
  margin:0;text-align:center;padding:10px 0}

.prn-conto-testa{font-family:var(--sans);font-size:13px;font-weight:600;color:var(--ink);
  padding-bottom:14px;margin-bottom:12px;border-bottom:.5px solid var(--sage-light)}

.prn-riga-c{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:7px 0;font-family:var(--sans);font-size:14.5px;color:var(--slate)}
.prn-riga-c .et{display:flex;flex-direction:column;gap:1px;min-width:0}
.prn-riga-c .et .sub{font-size:12px;color:var(--slate)}
.prn-riga-c .v{font-variant-numeric:tabular-nums;white-space:nowrap;
  color:var(--ink);font-weight:500}
.prn-riga-c.sconto .et,
.prn-riga-c.sconto .et .sub,
.prn-riga-c.sconto .v{color:var(--green);font-weight:600}

/* il totale del soggiorno: la cifra che si va davvero a cercare */
.prn-tot{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  margin-top:10px;padding-top:14px;border-top:1px solid var(--sage)}
.prn-tot .et{font-family:var(--sans);font-size:15px;font-weight:600;color:var(--ink);
  display:flex;flex-direction:column;gap:2px}
.prn-tot .et .sub{font-size:12px;font-weight:400;color:var(--green)}
.prn-tot .v{font-family:var(--serif);font-size:26px;color:var(--ink);line-height:1;
  font-variant-numeric:tabular-nums;white-space:nowrap}

/* quanto ora e quanto dopo: e' la prima domanda che si fa chi
   legge una cifra grossa, e lasciarla senza risposta ferma la mano */
.prn-quando{margin-top:14px;padding-top:12px;border-top:.5px dashed var(--line, var(--sage-light))}
.prn-quando .prn-riga-c{padding:5px 0;font-size:13.5px}

/* La tassa in un riquadro suo: non e' nostra, non entra nel totale
   e si paga la'. Metterla in mezzo al conto la farebbe sembrare
   parte del prezzo; ometterla la farebbe comparire all'arrivo,
   che e' esattamente la sorpresa che vogliamo evitare. */
.prn-loco{margin-top:16px;background:var(--white);border:.5px solid var(--sage);
  border-radius:10px;padding:13px 15px}
.prn-loco-h{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--terracotta);margin:0 0 4px}
.prn-loco .prn-riga-c{padding:4px 0}

.prn-stima{font-family:var(--sans);font-size:12.5px;line-height:1.6;color:var(--slate);
  margin:16px 0 0;padding-top:12px;border-top:.5px solid var(--sage-light)}

@media (max-width:620px){
  .prn-conto{padding:18px 16px}
  .prn-tot .v{font-size:23px}
  .prn-riga-c{font-size:14px}
}

/* ---------- lo sconto, reso visibile ---------- */
/* Il prezzo pieno barrato sopra a quello vero. Senza, la riga di
   sconto resta in mezzo alle altre e l'ospite non percepisce di
   aver risparmiato: uno sconto che non si vede e' regalato. */
.prn-tot .v-blocco{display:flex;flex-direction:column;align-items:flex-end;gap:1px}
.prn-tot .pieno{font-family:var(--sans);font-size:14px;color:var(--slate);
  text-decoration:line-through;text-decoration-thickness:1px;
  font-variant-numeric:tabular-nums;opacity:.75}

.prn-risparmio{font-family:var(--sans);font-size:13px;font-weight:700;color:var(--green);
  background:#EAF1EC;border:.5px solid #C6DACD;border-radius:20px;
  padding:5px 13px;margin:10px 0 0;display:inline-block}

/* avviso sulle case in offerta, prima che l'ospite scelga */
.prn-offerte{font-family:var(--sans);font-size:13px;line-height:1.55;color:var(--green);
  background:#EAF1EC;border-left:2px solid var(--green);border-radius:0 7px 7px 0;
  padding:9px 12px;margin:9px 0 0}

/* L'addebito automatico va detto qui, col giorno preciso. Se la
   data si sa prima e' un servizio; se si scopre dall'estratto
   conto e' un prelievo non autorizzato. */
.prn-avviso-saldo{font-family:var(--sans);font-size:12.5px;line-height:1.6;
  color:var(--terracotta-dark);background:#FCF3EF;
  border-left:2px solid var(--terracotta);border-radius:0 7px 7px 0;
  padding:10px 13px;margin:12px 0 0}

/* ============================================================
   Il confronto fra le quattro case

   Compare quando nessuna casa e' stata scelta. Qui NON si mostra
   un preventivo: un totale dettagliato senza una casa precisa
   sembra una cifra ferma e non lo e'. Si mostra il paragone e
   basta, e ogni riga e' la scelta.
   ============================================================ */
.prn-conf-h{font-family:var(--sans);font-size:13px;color:var(--slate);
  margin:0 0 12px;text-align:center}

.prn-confronto{display:flex;flex-direction:column;gap:7px}
.prn-casa{display:flex;align-items:center;justify-content:space-between;gap:14px;
  width:100%;text-align:left;cursor:pointer;
  background:var(--white);border:.5px solid var(--sage);border-radius:10px;
  padding:13px 15px;min-height:60px;font-family:var(--sans);
  transition:border-color .16s ease,background .16s ease}
.prn-casa:hover{border-color:var(--terracotta);background:#FFFDFB}
.prn-casa:focus-visible{outline:2px solid var(--terracotta);outline-offset:2px}

.prn-casa .c-n{display:flex;flex-direction:column;gap:2px;min-width:0;
  font-size:15px;font-weight:600;color:var(--ink)}
.prn-casa .c-m{font-size:12px;font-weight:400;color:var(--slate)}

.prn-casa .c-p{display:flex;flex-direction:column;align-items:flex-end;gap:1px;
  flex:none;text-align:right}
.prn-casa .c-p s{font-size:12px;color:var(--slate);text-decoration:line-through;
  font-variant-numeric:tabular-nums}
.prn-casa .c-p b{font-size:16px;color:var(--ink);font-variant-numeric:tabular-nums;
  white-space:nowrap}
.prn-casa .c-p em{font-style:normal;font-size:11px;font-weight:700;color:var(--green);
  background:#EAF1EC;border-radius:20px;padding:1px 7px;margin-top:2px}
.prn-casa .c-no{font-size:12.5px;color:var(--slate)}

/* la casa che non contiene il gruppo resta visibile e cliccabile:
   nasconderla lascerebbe l'ospite a chiedersi perche' le case sono
   tre, e forse la vuole comunque per un'altra data */
.prn-casa.stretta{background:var(--stone);border-style:dashed}
.prn-casa.stretta .c-n{color:var(--slate)}

.prn-conf-nota{font-family:var(--sans);font-size:12.5px;line-height:1.6;
  color:var(--slate);margin:14px 0 0;padding-top:12px;
  border-top:.5px solid var(--sage-light)}

@media (max-width:620px){
  .prn-casa{padding:12px 13px;gap:10px}
  .prn-casa .c-n{font-size:14.5px}
  .prn-casa .c-p b{font-size:15px}
}

/* ---------- date gia' prese ---------- */
/* Il tono e' quello di un avviso, non di un errore: l'ospite non
   ha sbagliato niente, e' solo arrivato dopo qualcun altro. */
.prn-occupata{background:#FCF3EF;border:.5px solid #E4C9BD;border-radius:12px;
  padding:16px 18px;margin:0}
.prn-occ-h{font-family:var(--sans);font-size:15px;font-weight:600;
  color:var(--terracotta-dark);margin:0 0 6px}
.prn-occ-p{font-family:var(--sans);font-size:13.5px;line-height:1.6;
  color:var(--slate);margin:0 0 6px}
.prn-occ-p:last-child{margin-bottom:0}

/* nel confronto: visibile e ancora cliccabile, come la casa
   troppo piccola. Nasconderla lascerebbe l'ospite a chiedersi
   perche' le case sono tre. */
.prn-casa.occupata{background:var(--stone);border-style:dashed}
.prn-casa.occupata .c-n{color:var(--slate)}

/* il bottone spento si vede che e' spento */
.prn-invia:disabled{background:var(--sage);border-color:var(--sage);
  color:var(--stone);cursor:not-allowed;transform:none}
.prn-invia:disabled:hover{background:var(--sage);border-color:var(--sage)}

/* La nota sul telefono: si legge, non grida. Sta sotto il campo
   come un consiglio, non come un errore — il campo resta
   facoltativo e non deve sembrare che manchi qualcosa. */
.prn-nota-tel{font-family:var(--sans);font-size:12.5px;line-height:1.55;
  color:var(--slate);margin:7px 0 0}