/* Pagina Disponibilità e preventivo.
   Due colonne come la scheda casa: calendario a sinistra, conto a destra
   che resta agganciato mentre si scorre. */

.av{max-width:var(--wrap);margin:0 auto;padding:34px 22px 64px}
.av-head{text-align:center;margin-bottom:30px}
.av-title{font-family:var(--f-display);font-weight:700;
  font-size:clamp(1.9rem,4vw,2.7rem);margin:0 0 .2em}
.av-sub{color:var(--c-ink-soft);margin:0 auto;max-width:640px}

.av-cols{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
  gap:44px;align-items:start}
.av-main{min-width:0}

.av-field{display:block;border:1px solid var(--s-line);border-radius:12px;
  padding:10px 14px;margin-bottom:22px;background:#fff}
.av-field span{display:block;font-size:11px;text-transform:uppercase;
  letter-spacing:.1em;color:var(--c-ink-soft);margin-bottom:3px}
/* min-height 44 e font 16: sotto i 16 px iOS ingrandisce la pagina da solo
   quando si tocca il campo, e l'ospite si ritrova la schermata spostata. */
.av-field select{border:0;width:100%;min-width:0;min-height:44px;font:inherit;font-size:16px;
  color:var(--c-ink);background:transparent;cursor:pointer}
.av-field select:focus{outline:none}
.av-field:focus-within{border-color:var(--c-sea);box-shadow:0 0 0 3px rgba(28,110,140,.18)}

/* ---------------------------------------------------------- calendario */
.av-cal-head{display:flex;align-items:center;justify-content:center;gap:20px;margin-bottom:14px}
.av-cal-head strong{font-family:var(--f-display);font-size:18px;text-transform:capitalize}
.av-nav{flex:0 0 44px;width:44px;height:44px;border:1px solid var(--s-line);background:#fff;border-radius:50%;
  font-size:22px;line-height:1;cursor:pointer;color:var(--c-ink)}
.av-nav:hover{border-color:var(--c-sea);color:var(--c-sea-deep)}
.av-nav:focus-visible,.av-day:focus-visible{outline:3px solid var(--c-sea);outline-offset:2px}

.av-cal{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.av-month{min-width:0}
.av-dow,.av-days{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.av-dow span{text-align:center;font-size:11px;text-transform:uppercase;
  letter-spacing:.06em;color:var(--c-ink-soft);padding-bottom:6px}

.av-day{aspect-ratio:1;border:0;background:none;font:inherit;font-size:14px;
  border-radius:9px;cursor:pointer;color:var(--c-ink);padding:0;
  display:flex;align-items:center;justify-content:center}
.av-empty{visibility:hidden}
.av-day.is-free:hover{background:rgba(28,110,140,.12)}
/* Occupato e passato si distinguono anche senza colore: il barrato resta
   leggibile a chi non distingue bene le tinte. */
/* I giorni disattivati sono esentati dalla regola sul contrasto, ma un
   ospite deve comunque poter LEGGERE quali date sono occupate: portati a
   4,85 su fondo sabbia e 4,49 su bianco. Il barrato resta, così
   l'informazione non passa dal solo colore. */
.av-day.is-busy{color:#6F675C;text-decoration:line-through;cursor:not-allowed;background:#f2efe9}
.av-day.is-past{color:#77706A;cursor:not-allowed}
.av-day.is-from,.av-day.is-to{background:var(--c-sea-deep);color:#fff;font-weight:700}
.av-day.is-mid{background:rgba(28,110,140,.14)}

.av-legend{display:flex;flex-wrap:wrap;gap:18px;justify-content:center;
  margin:20px 0 0;font-size:13px;color:var(--c-ink-soft)}
.av-legend span{display:inline-flex;align-items:center;gap:7px}
.av-legend i{width:12px;height:12px;border-radius:4px;display:inline-block}
.av-legend .lg-free{background:#fff;border:1px solid var(--s-line)}
.av-legend .lg-busy{background:#f2efe9;border:1px solid #ddd6ca}
.av-legend .lg-past{background:#f7f5f1;border:1px dashed #d9d3c8}

.av-source{text-align:center;font-size:12.5px;color:var(--c-ink-soft);margin:12px 0 0;opacity:.85}
.av-source.is-stale{color:var(--c-terra-deep);opacity:1}

/* ---------------------------------------------------------- preventivo */
.av-side{position:sticky;top:92px;min-width:0}
.av-quote{border:1px solid var(--s-line);border-radius:var(--r-md);padding:24px;
  background:#fff;box-shadow:0 14px 40px rgba(18,33,47,.10)}
.av-quote-title{font-family:var(--f-display);font-size:1.2rem;margin:0 0 .6em}

.av-msg{color:var(--c-ink-soft);margin:0;font-size:15px}
.av-warn{color:var(--c-terra-deep)}

.av-state{margin:0 0 14px;font-weight:600;font-size:15px}
.av-state.is-ok{color:var(--c-olive)}
.av-state.is-no{color:var(--c-terra-deep)}
/* Terzo stato: non lo sappiamo. Va detto in tono neutro, non allarmato. */
.av-state.is-unknown{color:var(--c-ink-soft);font-weight:400;font-size:14.5px;line-height:1.6}
.av-state em{display:block;font-style:normal;font-weight:400;font-size:13.5px;
  color:var(--c-ink-soft);margin-top:5px}

.av-dates{margin:0 0 16px;color:var(--c-ink-soft);font-size:14.5px}
.av-row{display:flex;justify-content:space-between;gap:14px;padding:9px 0;
  border-bottom:1px solid var(--s-line);font-size:15px}
.av-row.is-discount{color:var(--c-olive)}
.av-row.is-total{border-bottom:0;padding-top:14px;font-weight:700;font-size:18px;
  font-family:var(--f-display)}
.av-avg{margin:2px 0 0;font-size:13px;color:var(--c-ink-soft);text-align:right}

.av-quote .btn-block{margin-top:18px}

/* Chi ha chiesto al sistema operativo di ridurre le animazioni ha spesso
   un motivo medico: il movimento gli dà nausea o vertigini. Va rispettato. */
@media (prefers-reduced-motion:reduce){
  .av-nav,.av-day,.av-field{transition:none}
}

@media (max-width:960px){
  .av-cols{grid-template-columns:1fr;gap:30px}
  .av-side{position:static}
}
@media (max-width:640px){
  .av{padding:24px 14px 44px}
  /* Due mesi affiancati su telefono diventano illeggibili: uno sotto l'altro. */
  .av-cal{grid-template-columns:1fr;gap:22px}
}

/* Riga informativa sotto al totale: la tassa di soggiorno non si paga qui,
   quindi non deve pesare come una voce del conto. */
.av-row.is-note{border-bottom:0;padding-top:6px;font-size:13px;color:var(--c-ink-soft)}
.av-row.is-note span:first-child{max-width:74%}

/* Soggiorno minimo non raggiunto. Spiega perché manca il pulsante di
   richiesta, quindi deve vedersi senza dover cercare. */
.av-minstay{margin:12px 0 0;padding:10px 12px;border-radius:10px;
  background:#FDF6E3;border:1px solid #E8D9A8;color:#7A5C12;
  font-weight:600;font-size:14px;line-height:1.45}

/* Giorno occupato che può però essere la PARTENZA: resta barrato, perché
   quella notte è presa davvero, ma si vede che è cliccabile. Senza questo
   segno l'ospite non capirebbe perché un giorno barrato risponde al clic. */
.av-day.is-checkout{cursor:pointer;color:var(--c-ink-soft);
  box-shadow:inset 0 0 0 2px rgba(28,110,140,.5)}
.av-day.is-checkout:hover{box-shadow:inset 0 0 0 2px var(--c-sea);background:#eae5db}
/* Una volta scelto come partenza torna pieno come le altre estremità */
.av-day.is-to{text-decoration:none;box-shadow:none}
.av-legend .lg-checkout{background:#f2efe9;box-shadow:inset 0 0 0 2px rgba(28,110,140,.5)}
