/* LA PAGINA — gli stili che nel design stavano inline, portati in classi.
 *
 * ⚠️ I VALORI NON SI RITOCCANO QUI A OCCHIO: vengono da design/estratto/markup.html, che è
 * generato dal bundle di Claude Design. Se una misura non torna, la fonte è quel file — questo
 * foglio la TRASPORTA e non la decide. I token (colori, spazi, raggi, ombre) stanno in
 * design-system.css, che è l'altra metà e non va toccato affatto.
 *
 * ⚠️ Il design è disegnato SOLO a 375px e non ha una sola @media: il comportamento su schermo
 * grande è deciso qui, ed è una colonna centrata da 600px su fondo più scuro — non un layout
 * desktop, che non esiste nel design.
 */

/* ══ il foglio ═══════════════════════════════════════════════════════════════
   ⚠️ Su schermo grande il fondo della PAGINA cambia tono e il foglio resta crema: senza questo
   scarto la colonna centrata non si legge come un foglio, si legge come testo che finisce a metà. */
body { background: var(--color-neutral-200); }

.foglio {
  background: var(--color-bg);
  overflow-x: clip; /* le camere scorrono DENTRO la loro fascia, non spingono la pagina */
}

@media (min-width: 640px) {
  .foglio {
    max-width: 600px;
    margin: 28px auto;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
  }
}

/* ══ testa ══════════════════════════════════════════════════════════════════ */
.testa {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 18px;
  background: color-mix(in srgb, var(--color-bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-divider);
}
.marchio {
  font-family: var(--font-heading); font-size: 20px; letter-spacing: .01em;
  margin-right: auto;
}
.testa-checkin {
  font-size: 12px; text-decoration: none;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 11px;
  border: 1px solid var(--color-divider); border-radius: 999px;
  color: var(--color-neutral-800);
}

/* ⚠️ Il menù lingue è un <details>, non un bottone con JavaScript: apre, chiude e si comanda da
   tastiera senza una riga di script, e i cinque link restano link — cioè indicizzabili e
   apribili in una scheda nuova. Nel design era uno stato React, che qui sarebbe stato un
   selettore che il motore di ricerca non vede. */
.lingue { position: relative; }
.lingue > summary {
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  font-size: 11px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .06em; padding: 7px 10px;
  border: 1px solid var(--color-divider); border-radius: 999px;
  color: var(--color-neutral-800); list-style: none;
}
.lingue > summary::-webkit-details-marker { display: none; }
.lingue[open] > summary svg { transform: rotate(180deg); }
.lingue-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 20;
  min-width: 132px; padding: 6px;
  display: flex; flex-direction: column; gap: 2px;
  background: var(--color-bg);
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}
.lingue-menu a {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 10px; border-radius: var(--radius-sm);
  font-size: 13px; color: var(--color-text); text-decoration: none;
}
.lingue-menu a[aria-current="true"] { background: var(--color-accent-100); }
.lingue-menu a:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.lingue-codice {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px; letter-spacing: .08em; color: var(--color-neutral-600);
}

/* ══ hero ═══════════════════════════════════════════════════════════════════ */
.hero { position: relative; height: 460px; overflow: hidden; }
.hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-velo {
  position: absolute; inset: 0;
  background: linear-gradient(to top,
    rgba(32, 30, 29, .82) 0%, rgba(32, 30, 29, .28) 46%, rgba(32, 30, 29, .05) 100%);
}
.hero-testo {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 22px 18px 26px;
  display: flex; flex-direction: column; gap: 10px;
  color: var(--color-bg);
}
.hero-testo h1 { font-size: 44px; margin: 0; letter-spacing: .02em; }
.hero-claim { margin: 0; font-size: 17px; line-height: 1.35; }
.hero-luogo { margin: 0; display: flex; align-items: center; gap: 6px; font-size: 13px; opacity: .85; }

/* ══ sezioni ════════════════════════════════════════════════════════════════ */
.sez { padding: 34px 18px 0; }
.sez-larga { padding: 34px 0 0; }
.sez-larga > .sez { padding: 0 18px; }
.sez h2, .sez-larga h2 { font-size: 28px; margin: 0 0 4px; }
.sez-sotto { margin: 0 0 16px; font-size: 14px; color: var(--color-neutral-700); }

/* ══ ricerca ════════════════════════════════════════════════════════════════ */
.sez-ricerca { padding-top: 22px; }
.cerca { gap: var(--space-3); }
.cerca-date { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.cerca .input { min-height: 44px; }
.passo { display: flex; align-items: center; gap: 12px; }
.passo-btn {
  width: 44px; height: 44px; flex: none; border-radius: 999px;
  border: 1px solid var(--color-divider); background: var(--color-surface);
  font-size: 20px; line-height: 1; color: var(--color-text); cursor: pointer;
}
.passo-btn:disabled { opacity: .4; cursor: not-allowed; }
.passo-valore {
  min-width: 92px; text-align: center;
  font-family: var(--font-heading); font-size: 17px;
}
.btn-prenota { font-size: 15px; padding: 14px 20px; }
.cerca-nota { gap: 7px; }
.serve-data {
  margin: 0; font-size: 13px; font-weight: 600; color: var(--color-accent-700);
}
.serve-data[hidden] { display: none; }

/* ══ WhatsApp ═══════════════════════════════════════════════════════════════
   Il box sotto la card di ricerca. Verde salvia (accent-2) e non arancione: l'arancione è del
   bottone che prenota, e due inviti dello stesso colore competono invece di offrire una scelta. */
.whatsapp {
  margin-top: var(--space-3);
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; border-radius: var(--radius-md);
  background: var(--color-accent-2-100);
  border: 1px solid var(--color-accent-2-300);
  text-decoration: none;
}
.whatsapp:hover { background: var(--color-accent-2-200); }
.whatsapp svg { flex: none; }
.whatsapp-testo { display: flex; flex-direction: column; gap: 2px; }
.whatsapp-titolo {
  font-family: var(--font-heading); font-size: 15px; color: var(--color-text);
}
.whatsapp-sotto { font-size: 12px; color: var(--color-accent-2-800); }

/* La fascia del motore di prenotazione: chiusa finché non si chiede disponibilità. */
.prenota { padding: var(--space-4) 18px 0; }
.prenota[hidden] { display: none; }
.prenota-titolo { font-family: var(--font-heading); font-size: 17px; margin-bottom: var(--space-2); }
/* ⚠️ ALTEZZA FISSA, E LE MISURE SONO PRESE, non scelte a occhio. Il riquadro di Smoobu non si
   ridimensiona da sé: il loro `iframeResizer.contentWindow` aspetta lo script ospite, e quello
   ufficiale se lo porta da cdnjs insieme a jQuery (tre origini di terze parti per l'altezza di un
   rettangolo — e il figlio, senza stretta di mano, non manda NESSUN messaggio: verificato in
   ascolto su `message` per sei secondi, l'11/08/2026).
   Misurato a 375px di larghezza: i risultati con quattro camere sono **1009px**, la risposta
   «nessuna disponibilità» **307px**, la sola casella di ricerca 266px — ma quest'ultima non si
   vede più, perché il riquadro apre sui risultati.
   700px mostra due camere e mezza e per le altre si scorre dentro. È il compromesso fra il caso
   normale (risultati) e quello vuoto: alzarlo riempie meglio i risultati e allarga il vuoto quando
   non c'è disponibilità. Si cambia qui, è una riga. */
.prenota-telaio {
  height: 700px; border-radius: var(--radius-md); overflow: hidden;
  background: var(--color-surface);
}
.prenota-telaio iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Su schermo grande lo scorrimento dentro un riquadro dà più fastidio del vuoto, quindi il telaio
   si alza fino a contenere tutti e quattro i risultati senza scorrere. */
@media (min-width: 640px) {
  .prenota-telaio { height: 1040px; }
}

/* ══ selettore location ═════════════════════════════════════════════════════ */
.loc-scelta {
  margin: 0 18px var(--space-3);
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2);
}
.loc-btn {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  padding: 11px 13px; border-radius: var(--radius-md);
  cursor: pointer; text-align: left;
  border: 1px solid var(--color-divider); background: var(--color-surface);
}
.loc-btn[aria-pressed="true"] {
  border: 1.5px solid var(--color-accent); background: var(--color-accent-100);
}
.loc-nome { font-family: var(--font-heading); font-size: 15px; color: var(--color-text); }
.loc-riga { display: flex; align-items: center; gap: 6px; }
.loc-indirizzo { font-size: 11px; color: var(--color-neutral-700); }
.loc-tag {
  padding: 1px 7px; border-radius: 999px; background: var(--color-neutral-300);
  font-size: 10px; color: var(--color-neutral-700);
}

/* ⚠️ Senza JavaScript il selettore non commuta niente: sparisce, e resta visibile la location
   attiva. Un bottone che non fa niente è peggio di un bottone che non c'è. */
html:not(.con-js) .loc-scelta { display: none; }
html:not(.con-js) [data-loc="gropallo"] { display: none; }

/* ══ mappa ══════════════════════════════════════════════════════════════════ */
.mappa {
  margin: 0 18px; border-radius: var(--radius-lg); overflow: hidden;
  height: 290px; box-shadow: var(--shadow-sm);
}
.mappa iframe { width: 100%; height: 100%; border: 0; display: block; }
.mappa-credito {
  margin: 6px 18px 0; font-size: 11px; color: var(--color-neutral-600);
}

/* ══ distanze ═══════════════════════════════════════════════════════════════ */
.distanze { padding: var(--space-4) 18px 0; display: flex; flex-direction: column; gap: var(--space-2); }
.distanza { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--color-neutral-800); }
.distanza-n {
  width: 20px; height: 20px; flex: none; border-radius: 999px;
  background: var(--color-accent-2); color: var(--color-bg);
  font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.distanza-tempo {
  margin-left: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; color: var(--color-accent-700);
}
.distanze-nota { margin: var(--space-3) 18px 0; font-size: 12px; color: var(--color-neutral-600); }

/* ══ servizi ════════════════════════════════════════════════════════════════ */
.servizi { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.servizio {
  display: flex; flex-direction: column; gap: 10px;
  padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-surface);
}
.servizio span { font-size: 13px; line-height: 1.35; }
.servizio-larga { grid-column: span 2; flex-direction: row; align-items: center; gap: 12px; }
.servizio-larga svg { flex: none; }

/* ══ camere ═════════════════════════════════════════════════════════════════ */
.camere {
  display: flex; gap: var(--space-3); overflow-x: auto;
  padding: 4px 18px 8px;
  scroll-snap-type: x mandatory; scrollbar-width: none;
}
.camere::-webkit-scrollbar { display: none; }
.camera {
  min-width: 232px; scroll-snap-align: start;
  padding: 0; overflow: hidden; gap: 0;
}
.camera img { width: 100%; height: 148px; object-fit: cover; }
.camera-senza-foto {
  height: 148px; display: flex; align-items: center; justify-content: center;
  background: repeating-linear-gradient(135deg,
    var(--color-neutral-200) 0 8px, var(--color-neutral-300) 8px 16px);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--color-neutral-700); text-align: center; padding: 0 10px;
}
.camera-corpo { padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); }
.camera-capienza {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; color: var(--color-neutral-600);
}
.camera-servizi { display: flex; flex-wrap: wrap; gap: 6px; }

/* ══ la location che non ha ancora camere ═══════════════════════════════════ */
.prossima { padding: 0 18px; }
.prossima-riquadro {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-3);
  border: 1px dashed var(--color-neutral-400); border-radius: var(--radius-md);
}
.prossima-testa { display: flex; align-items: center; gap: 8px; }
.prossima-testa .card-meta { margin-left: auto; }
.prossima-nome { font-size: 20px; color: var(--color-neutral-700); }
.prossima-corpo { font-size: 14px; color: var(--color-neutral-700); }
.prossima-avviso { display: flex; gap: 8px; margin-top: 4px; }
.prossima-avviso .input { min-height: 44px; background: var(--color-bg); }
.prossima-avviso .btn { min-height: 44px; white-space: nowrap; background: var(--color-bg); }
.prossima-nota { margin: 0; font-size: 11px; color: var(--color-neutral-600); }
.prossima-camere { padding: var(--space-4) 18px 8px; }
.prossima-fantasma {
  max-width: 232px; border-radius: var(--radius-md); overflow: hidden;
  opacity: .55; filter: grayscale(1);
}
.prossima-fantasma-foto {
  height: 148px; display: flex; align-items: center; justify-content: center;
  background: repeating-linear-gradient(135deg,
    var(--color-neutral-200) 0 8px, var(--color-neutral-300) 8px 16px);
  font-family: var(--font-heading); font-size: 15px; color: var(--color-neutral-700);
}
.prossima-fantasma-corpo { padding: var(--space-3); background: var(--color-surface); }
.prossima-fantasma-corpo div {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; color: var(--color-neutral-700);
}

/* ══ domande ════════════════════════════════════════════════════════════════ */
.sez-domande { margin-top: 34px; padding: 28px 18px; background: var(--color-surface); }
.sez-domande h2 { margin-bottom: 4px; }
.faq-nota { font-size: 13px; }
.faq-elenco { display: flex; flex-direction: column; gap: var(--space-2); }
.faq { padding: var(--space-3); background: var(--color-bg); border-radius: var(--radius-md); }
.faq > summary {
  display: flex; align-items: center; gap: 12px; cursor: pointer;
  font-family: var(--font-heading); font-size: 15px; list-style: none;
}
.faq > summary::-webkit-details-marker { display: none; }
.faq-domanda { flex: 1; }
.faq-piu {
  flex: none; color: var(--color-accent-700); font-size: 18px; line-height: 1;
  transition: transform .18s ease;
}
.faq[open] .faq-piu { transform: rotate(45deg); }
.faq-risposta { margin: var(--space-2) 0 0; font-size: 13px; line-height: 1.55; color: var(--color-neutral-800); }

/* ⚠️ LA LACUNA SI VEDE, e non è un difetto della pagina: è come il design dichiara un dato che
   non abbiamo ancora. Tratteggio e monospazio dicono «qui manca qualcosa» a chi guarda la bozza,
   senza che nessuno possa confonderlo con un contenuto pubblicabile. */
.lacuna {
  margin-top: 8px; display: inline-flex; padding: 6px 10px;
  border: 1px dashed var(--color-accent-2-400); border-radius: var(--radius-sm);
  background: var(--color-accent-2-100);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; color: var(--color-accent-2-800);
}
.lacuna-riga { color: var(--color-neutral-600); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* ══ informazioni (tassa, documento) ════════════════════════════════════════ */
.informazioni {
  margin-top: var(--space-6); padding-top: var(--space-4);
  border-top: 1px solid var(--color-divider);
  display: flex; flex-direction: column; gap: var(--space-4);
}
.info-titolo { font-family: var(--font-heading); font-size: 15px; margin-bottom: 4px; }
.info-testo { margin: 0 0 8px; font-size: 13px; line-height: 1.5; color: var(--color-neutral-800); }
.tassa-importo {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 7px 12px; border-radius: 999px; background: var(--color-accent-2-100);
  font-size: 13px; color: var(--color-accent-2-800);
}
.tassa-importo b { font-family: var(--font-heading); font-weight: 400; font-size: 15px; }
.cta-checkin { margin-top: var(--space-6); background: var(--color-bg); }

/* ══ chiusura ═══════════════════════════════════════════════════════════════ */
.claim-finale { padding: 48px 18px; text-align: center; }
.claim-finale div {
  font-family: var(--font-heading); font-size: 26px; line-height: 1.15;
  color: var(--color-accent-700);
}
.piede {
  padding: 26px 18px 32px; display: flex; flex-direction: column; gap: var(--space-3);
  font-size: 12px; line-height: 1.6; color: var(--color-neutral-700);
  border-top: 1px solid var(--color-divider);
}
.marchio-piede { font-size: 18px; color: var(--color-text); margin-right: 0; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.piede-link {
  display: flex; flex-wrap: wrap; gap: 14px;
  padding-top: var(--space-3); border-top: 1px solid var(--color-divider);
}
.piede-link a { text-decoration: none; }