/* ============================================================
   Pagina di ricerca camere.
   Sta accanto a style.css e non lo tocca: colori, caratteri e pulsanti
   arrivano da li', qui solo la barra di ricerca e le righe dei risultati.
   ============================================================ */

/* L'attributo hidden arriva dal foglio di stile del browser, quindi
   qualsiasi regola scritta qui lo scavalca. Senza questa riga la scheda
   della struttura (display:flex) restava aperta e vuota sopra la pagina,
   e i filtri comparivano prima ancora di aver cercato. */
[hidden]{display:none !important;}

/* ---------- barra di ricerca ---------- */
/* Fissa in alto solo dove e' una riga sola. Su telefono i tre campi si
   impilano e la barra diventa alta 500 pixel: appiccicata mangerebbe
   mezzo schermo mentre si scorrono i risultati.

   Si ferma SOTTO l'intestazione del sito, che e' appiccicata anche lei a
   zero: con top:0 la barra scivolava dietro l'intestazione e scompariva.
   L'altezza vera la misura prenota.js a ogni ridisegno; 95px e' il
   valore di riserva, quello che l'intestazione ha oggi. */
:root{--testata:95px;}
.cerca{border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:var(--stone);padding:30px 0;z-index:40;}
@media (min-width:760px){
  /* meno imbottitura da appiccicata: sopra c'e' gia' l'intestazione, e
     insieme non devono mangiare un terzo dello schermo */
  .cerca{position:sticky;top:var(--testata);backdrop-filter:blur(8px);
    padding:18px 0;}
}
.cerca-barra{display:grid;gap:18px;align-items:end;}
@media (min-width:760px){
  .cerca-barra{grid-template-columns:1fr 1fr 1fr auto;gap:22px;}
}
.campo-cerca{display:flex;flex-direction:column;gap:8px;min-width:0;}
.campo-cerca label{
  font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mist-dim);
}
.campo-cerca input,.campo-cerca select{
  width:100%;min-width:0;background:transparent;border:none;
  border-bottom:1px solid var(--line-strong);color:var(--white);
  font-family:var(--sans);font-size:1.05rem;padding:9px 2px;min-height:44px;
}
.campo-cerca select{appearance:none;-webkit-appearance:none;border-radius:0;
  background-image:linear-gradient(45deg,transparent 50%,var(--amber) 50%),
                   linear-gradient(135deg,var(--amber) 50%,transparent 50%);
  background-position:calc(100% - 14px) 50%,calc(100% - 8px) 50%;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:28px;}
.campo-cerca select option{background:var(--stone);color:var(--white);}
.campo-cerca input:focus,.campo-cerca select:focus{outline:none;border-bottom-color:var(--amber);}
/* il calendario del browser e' bianco su fondo scuro: si inverte l'icona */
.campo-cerca input[type="date"]::-webkit-calendar-picker-indicator{filter:invert(1);opacity:.6;cursor:pointer;}

/* ---------- filtri ---------- */
.cerca-filtri{display:flex;flex-wrap:wrap;gap:16px 24px;align-items:center;
  justify-content:space-between;margin-top:24px;}
@media (min-width:760px){.cerca-filtri{margin-top:16px;}}
.filtro-zone{display:flex;flex-wrap:wrap;gap:10px;}
.filtro-ordine{display:flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mist-dim);}
.filtro-ordine select{background:transparent;border:1px solid var(--line-strong);
  color:var(--white);font-family:var(--sans);font-size:.9rem;padding:7px 10px;
  text-transform:none;letter-spacing:0;}
.filtro-ordine select option{background:var(--stone);color:var(--white);}

/* ---------- risultati ---------- */
.esiti{padding:54px 0 90px;}
.esiti-stato{font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--amber2);margin-bottom:26px;}
.esiti-nota{margin-top:30px;font-size:.82rem;color:var(--mist-dim);line-height:1.6;}

/* Un riquadro vero, non una riga separata da un filo: in un elenco di
   dieci strutture l'occhio deve capire dove finisce una e comincia
   l'altra senza doverlo cercare. */
.esito{display:grid;gap:20px;align-items:start;
  background:var(--stone);border:1px solid var(--line);border-radius:4px;
  padding:20px;margin-bottom:18px;
  transition:border-color .2s ease,transform .2s ease;}
.esito:hover{border-color:var(--line-strong);}
@media (hover:hover){
  .esito:hover{transform:translateY(-2px);}
}
@media (min-width:700px){
  .esito{grid-template-columns:auto 1fr auto;gap:28px;padding:24px;align-items:center;}
}

/* Striscia di fotografie: una grande, le altre di fianco, si scorre in
   orizzontale. Ogni scatto e' un pulsante perche' apre la lente: un div
   cliccabile non lo raggiungerebbe chi naviga da tastiera. */
.esito-foto{display:flex;gap:8px;overflow-x:auto;min-width:0;
  scroll-snap-type:x mandatory;scrollbar-width:thin;padding-bottom:6px;
  scrollbar-color:var(--line-strong) transparent;}
.esito-foto::-webkit-scrollbar{height:6px;}
.esito-foto::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:3px;}
.esito-scatto{flex:0 0 auto;padding:0;border:none;background:none;cursor:zoom-in;
  scroll-snap-align:start;line-height:0;border-radius:2px;overflow:hidden;}
.esito-scatto img{width:150px;aspect-ratio:4/3;object-fit:cover;display:block;
  background:var(--stone2);transition:opacity .2s ease;}
.esito-scatto:focus-visible{outline:2px solid var(--amber);outline-offset:2px;}
.esito-scatto:first-child img{width:270px;aspect-ratio:16/10;}
.esito-scatto:hover img,.esito-scatto:focus-visible img{opacity:.82;}
@media (min-width:700px){
  .esito-foto{max-width:420px;}
}
.esito-testo{min-width:0;}
.esito-riga{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;}
/* la tipologia sta accanto alla zona: due informazioni dello stesso peso */
.esito-tipologia{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mist-dim);
  border:1px solid var(--line-strong);padding:3px 8px;border-radius:2px;}
.esito h3{font-size:1.15rem;margin:8px 0 4px;}
/* il voto: il numero pesa, il resto e' contorno */
.esito-voto{display:inline-flex;align-items:baseline;gap:8px;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mist-dim);}
.esito-voto b{font-family:var(--display);font-size:1rem;color:var(--amber2);letter-spacing:0;}
.esito-breve{margin-top:10px;font-size:.92rem;color:var(--mist);line-height:1.55;max-width:56ch;}
.esito-camera{margin-top:10px;font-size:.92rem;color:var(--mist-dim);}
.esito-servizi{margin-top:12px;}
/* si dice solo quando resta davvero una camera sola, e mai sugli
   appartamenti interi, dove sarebbe sempre vero */
.esito-ultima{margin-top:12px;font-family:var(--mono);font-size:.66rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ember);}

.esito-prezzo{display:flex;flex-direction:column;align-items:flex-start;gap:6px;}
@media (min-width:700px){.esito-prezzo{align-items:flex-end;text-align:right;}}
.esito-etichetta{font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mist-dim);}
.esito-totale{font-family:var(--display);font-size:1.5rem;color:var(--white);line-height:1;}
.esito-notte{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mist-dim);}
/* per quante persone vale la cifra: piu' chiaro dell'ambra, che qui
   griderebbe, ma staccato dal resto perche' e' la chiave di lettura */
.esito-per{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--amber2);}
.esito-prezzo .btn{margin-top:10px;}

/* ---------- scheda della struttura ----------
   Il passaggio fra l'elenco e il motore: qui si guarda la struttura per
   intero. Non e' un pannello laterale ma una finestra al centro, perche'
   il contenuto e' lungo e va letto, non sbirciato. */
/* Sopra l'intestazione del sito, che e' appiccicata in alto con z-index
   200: sotto, la finestra ci finiva dietro e il pulsante di chiusura
   restava mezzo coperto. Resta sotto la lente (9000), che si apre da
   dentro questa finestra e deve stare piu' in alto. */
.scheda{position:fixed;inset:0;z-index:8800;display:flex;align-items:flex-start;
  justify-content:center;background:rgba(10,11,12,.82);backdrop-filter:blur(3px);
  overflow-y:auto;padding:24px 16px;}
/* Centrata solo in orizzontale. Con margin:auto anche in verticale il
   browser centra il pannello pure quando e' piu' alto dello schermo, e
   la parte che esce sopra non si raggiunge piu' scorrendo: le foto e la
   chiusura restavano tagliate. */
.scheda-pannello{position:relative;width:100%;max-width:760px;
  background:var(--stone);border:1px solid var(--line-strong);border-radius:4px;
  padding:26px;margin:0 auto;}
@media (max-width:600px){.scheda-pannello{padding:18px;}}
/* La chiusura resta ferma in alto anche su schede lunghe. L'involucro e'
   alto zero e appiccicato: non occupa spazio, e si ferma a 26px dal
   bordo della zona che scorre, cioe' esattamente dove starebbe da fermo.
   Cosi' non c'e' nessun salto quando comincia a stare fermo. */
.scheda-testa{position:sticky;top:26px;height:0;z-index:3;}
.scheda-chiudi{position:absolute;top:-14px;right:-14px;
  background:var(--void);border:1px solid var(--line-strong);color:var(--white);
  width:36px;height:36px;border-radius:50%;cursor:pointer;font-size:.9rem;line-height:1;
  box-shadow:0 6px 18px -6px rgba(0,0,0,.9);}
/* sul telefono il pannello ha meno imbottitura: l'aggancio la segue */
@media (max-width:600px){
  .scheda-testa{top:18px;}
  .scheda-chiudi{top:-8px;right:-8px;}
}
.scheda-chiudi:hover{border-color:var(--amber);color:var(--amber2);}

.scheda-foto{margin-bottom:20px;}
.scheda h2{font-size:1.5rem;margin:8px 0 6px;}
.scheda-titolo{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--amber2);margin:26px 0 12px;
  padding-top:18px;border-top:1px solid var(--line);}

.scheda-righe{display:grid;gap:8px 20px;margin:0;}
@media (min-width:560px){.scheda-righe{grid-template-columns:auto 1fr;}}
.scheda-righe dt{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--mist-dim);align-self:center;}
.scheda-righe dd{margin:0;font-size:.95rem;color:var(--mist);}
.scheda-chip{margin-top:16px;}

.scheda-camere{list-style:none;margin:0;padding:0;}
.scheda-camere li{display:flex;justify-content:space-between;gap:16px;
  align-items:baseline;padding:11px 0;border-bottom:1px solid var(--line);}
.scheda-camera{font-size:.95rem;color:var(--mist);}
/* la capienza, dove non fa confusione con il prezzo */
.scheda-camera em{font-style:normal;font-family:var(--mono);font-size:.64rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--mist-dim);
  white-space:nowrap;margin-left:8px;}
.scheda-prezzo{font-family:var(--display);font-size:1.05rem;color:var(--white);white-space:nowrap;}

.scheda-azioni{margin-top:26px;}
.scheda-nota{margin-top:12px;font-size:.82rem;color:var(--mist-dim);line-height:1.55;}

/* il nome e' un pulsante: deve sembrare un titolo, non un modulo */
.esito-nome{background:none;border:none;padding:0;margin:0;cursor:pointer;
  font:inherit;color:inherit;text-align:left;}
.esito-nome:hover{color:var(--amber2);}
.esito-dettagli{margin-top:10px;background:none;border:none;padding:0;cursor:pointer;
  font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--mist-dim);text-decoration:underline;text-underline-offset:3px;}
.esito-dettagli:hover{color:var(--amber2);}

/* ---------- l'attesa fra una data e l'altra ----------
   I dati sono gia' nel browser, quindi il filtro e' istantaneo: le
   schede cambiavano di colpo e sembrava un difetto. Queste sono le
   sagome che tengono il posto mentre si "cerca", e l'ingresso delle
   schede vere. Geometria identica a .esito, cosi' la pagina non
   sobbalza quando le une sostituiscono le altre. */
.esito-finto{pointer-events:none;}
.ef-blocco{display:block;border-radius:2px;
  background:linear-gradient(90deg,var(--stone2) 0%,var(--line) 50%,var(--stone2) 100%);
  background-size:200% 100%;animation:ef-onda 1.15s linear infinite;}
@keyframes ef-onda{from{background-position:200% 0;}to{background-position:-200% 0;}}

.ef-foto{display:flex;gap:8px;overflow:hidden;min-width:0;padding-bottom:6px;}
.ef-grande{flex:0 0 auto;width:270px;aspect-ratio:16/10;}
.ef-piccola{flex:0 0 auto;width:150px;aspect-ratio:4/3;}
@media (min-width:700px){.ef-foto{max-width:420px;}}

.ef-testo{min-width:0;display:flex;flex-direction:column;gap:10px;}
.ef-riga{height:11px;width:100%;max-width:46ch;}
.ef-titolo{height:19px;max-width:16ch;}
.ef-corta{height:9px;max-width:9ch;}
.ef-media{max-width:30ch;}

.ef-prezzo{display:flex;flex-direction:column;gap:8px;}
@media (min-width:700px){.ef-prezzo{align-items:flex-end;}}
.ef-cifra{height:26px;width:92px;}

/* cambio di ordinamento o di zona: nessuna sagoma, solo un velo */
#risultati.in-attesa{opacity:.38;transition:opacity .15s ease;}

@keyframes esito-entra{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:none;}}
#risultati.entra .esito{animation:esito-entra .4s ease both;}
#risultati.entra .esito:nth-child(2){animation-delay:.05s;}
#risultati.entra .esito:nth-child(3){animation-delay:.1s;}
#risultati.entra .esito:nth-child(4){animation-delay:.15s;}
#risultati.entra .esito:nth-child(5){animation-delay:.2s;}
#risultati.entra .esito:nth-child(6){animation-delay:.25s;}
#risultati.entra .esito:nth-child(7){animation-delay:.3s;}
#risultati.entra .esito:nth-child(n+8){animation-delay:.35s;}

/* Chi ha chiesto meno animazioni non aspetta e non vede muoversi niente:
   il codice in prenota.js salta del tutto la pausa. */
@media (prefers-reduced-motion:reduce){
  .ef-blocco{animation:none;}
  #risultati.entra .esito{animation:none;}
  #risultati.in-attesa{transition:none;}
}

/* ---------- Tripadvisor e codice identificativo ----------
   Tripadvisor ce l'hanno due strutture su dieci: la riga sta sotto a
   quella di Booking, piu' piccola, perche' e' un di piu' e non deve
   sembrare che le altre otto abbiano un voto in meno. */
.esito-ta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:6px;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--mist-dim);}
.esito-ta b{font-family:var(--display);font-size:.9rem;color:var(--mist);letter-spacing:0;}
.ta-marca{color:var(--mist);}
/* Il marchio ufficiale, nella variante chiara. Altezza allineata al
   testo accanto: sta in riga, non grida. */
.ta-logo{height:13px;width:auto;display:block;opacity:.9;flex:0 0 auto;}
.ta-premio{border:1px solid var(--line-strong);border-radius:2px;padding:2px 7px;
  color:var(--amber2);letter-spacing:.08em;}
.ta-classifica{text-transform:none;letter-spacing:0;font-family:var(--sans);font-size:.82rem;}

/* Il CIN chiude la scheda: obbligatorio, ma non e' quello che l'ospite
   sta cercando. */
.scheda-cin{margin:22px 0 0;padding-top:14px;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;color:var(--mist-dim);
  word-break:break-all;}

/* Il testo della struttura nella scheda: qui c'e' spazio per leggerlo
   tutto, mentre nella riga dei risultati ne va una frase sola. */
.scheda-testo{margin-top:10px;}
.scheda-testo .esito-breve{max-width:68ch;}
.scheda-testo .esito-breve + .esito-breve{margin-top:10px;}