/*
 * Elahouse Check-in · sistema grafico ospite (Fase 2)
 *
 * Fedele al check-in Amenitiz mostrato dal committente in
 * grafica_da_copiare/*.png: banner blu in cima, barra bianca sticky,
 * contenuto, piè di pagina blu, su ogni schermata.
 *
 * Nessun font esterno: solo la pila di sistema. Nessuna dipendenza.
 * Il progetto resta leggibile anche a telefono in modalità scura: qui si
 * sceglie deliberatamente di restare "chiari" (color-scheme:light) invece
 * di lasciare che il browser inverta a metà componenti non pensati per
 * quello, che è la cosa che rende una pagina illeggibile.
 */

:root {
  --g-blue: #4C6BE0;
  --g-navy: #16223C;
  --g-green: #3ECF9A;
  --g-mint: #EAF9F3;
  --g-lavender: #EBEEFD;
  --g-red: #F2456B;
  --g-field: #F3F5FA;
  --g-border: #E5E9F2;
  --g-text: #16223C;
  --g-muted: #6B7386;
  --g-radius-card: 14px;
  --g-max: 560px;
  /* Quanto la tastiera dello schermo sta occultando in questo momento,
     aggiornata da initKeyboardAvoidance() in guest.js via
     window.visualViewport. 0 quando la tastiera e' chiusa (o su un
     browser che non supporta l'API): i fogli restano ancorati a bottom:0
     come sempre. */
  --g-kb-offset: 0px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  color-scheme: light;
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  background: #fff;
  color: var(--g-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; }
p { margin: 0 0 12px; }

/* ---------------------------------------------------------------- */
/* Guscio della pagina                                               */
/* ---------------------------------------------------------------- */

.g-app {
  max-width: var(--g-max);
  margin: 0 auto;
  min-height: 100vh;
  background: #fff;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow-x: hidden;
}

@media (min-width: 600px) {
  .g-app { box-shadow: 0 0 0 1px var(--g-border); }
}

/* Banner blu marchio, in cima a ogni schermata. Nome struttura centrato,
   grassetto, va a capo su piu' righe se serve. */
.g-banner {
  background: var(--g-blue);
  color: #fff;
  text-align: center;
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.28;
  padding: 28px 24px;
}
.g-banner h1 { margin: 0; font: inherit; }

/* Barra bianca sticky sotto il banner: sinistra nome camera (o icona
   casa, o "‹ Indietro"), centro titolo facoltativo, destra hamburger. */
.g-bar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: #fff;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  min-height: 32px;
}
.g-bar-side { display: flex; align-items: center; min-width: 32px; }
.g-bar-left { flex: 1; justify-content: flex-start; min-width: 0; gap: 10px; }
.g-bar-right { justify-content: flex-end; }
.g-bar-title {
  flex: 0 0 auto;
  font-weight: 700;
  color: var(--g-text);
  text-align: center;
}
.g-bar-room {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--g-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.g-bar-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--g-blue);
  font-weight: 600;
}
.g-chevron {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-left: 2px solid var(--g-blue);
  border-bottom: 2px solid var(--g-blue);
  transform: rotate(45deg);
}
.g-bar-home { display: inline-flex; color: var(--g-text); }
.g-bar-home svg { width: 22px; height: 22px; }
.g-bar-close { display: inline-flex; color: var(--g-text); }
.g-bar-close svg { width: 22px; height: 22px; }
.g-bar-menu {
  border: 0;
  background: none;
  padding: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.g-burger { display: flex; flex-direction: column; gap: 5px; width: 22px; }
.g-burger span {
  display: block;
  height: 2px;
  background: var(--g-text);
  border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}
body.g-drawer-open .g-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.g-drawer-open .g-burger span:nth-child(2) { opacity: 0; }
body.g-drawer-open .g-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Contenuto, largo al massimo quanto .g-app (560px), centrato. Sotto quella
   soglia occupa tutta la larghezza disponibile. */
.g-content { flex: 1; padding: 20px 20px 40px; width: 100%; }
.g-content-standalone { display: flex; align-items: center; justify-content: center; min-height: 60vh; }

/* ---------------------------------------------------------------- */
/* Componenti                                                        */
/* ---------------------------------------------------------------- */

/* Card generica */
.g-card {
  background: #fff;
  border: 1px solid var(--g-border);
  border-radius: var(--g-radius-card);
  box-shadow: 0 1px 3px rgba(22, 34, 60, .05);
  overflow: hidden;
}

/* Fascia date, blu notte, in cima a una .g-card */
.g-dates {
  background: var(--g-navy);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-radius: var(--g-radius-card) var(--g-radius-card) 0 0;
}
.g-dates-col { text-align: center; }
.g-dates-label { font-size: .8rem; opacity: .75; margin: 0 0 4px; }
.g-dates-value { font-size: 1rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; margin: 0; }
.g-dates-arrow { opacity: .8; font-size: 1.2rem; padding: 0 8px; }

/* Riga attività: avatar tondo, titolo, stato, chevron. Variante
   completata: verde menta con bordo verde. */
.g-task {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border-radius: 12px;
  color: inherit;
}
.g-task-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #EEF1F8;
  color: var(--g-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.g-task-avatar svg { width: 22px; height: 22px; }
.g-task-body { flex: 1; min-width: 0; }
.g-task-title { font-weight: 700; color: var(--g-text); margin: 0 0 2px; }
.g-task-status { font-size: .9rem; color: var(--g-muted); display: flex; align-items: center; gap: 4px; }
.g-task-chevron { flex: 0 0 auto; color: var(--g-muted); }
.g-task.is-done { background: var(--g-mint); border: 1px solid var(--g-green); }
.g-task.is-done .g-task-status { color: #1FAE7E; font-weight: 600; }

/* Foglio dal basso, con maniglia grigia */
.g-sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(22, 34, 60, .45);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
  z-index: 40;
}
.g-sheet-backdrop.is-open { opacity: 1; pointer-events: auto; }
.g-sheet {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 100%);
  width: 100%;
  max-width: var(--g-max);
  background: #fff;
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -8px 24px rgba(22, 34, 60, .18);
  padding: 12px 24px calc(24px + env(safe-area-inset-bottom, 0px));
  z-index: 41;
  transition: transform .25s ease, bottom .15s ease;
}
/* Solo il foglio APERTO risponde a --g-kb-offset (aggiornata da
   initKeyboardAvoidance() in guest.js quando la tastiera dello schermo
   occulta parte della pagina): applicarla a bottom:0 di TUTTI i .g-sheet,
   anche quelli chiusi, farebbe "sbucare" dal basso un foglio chiuso ma
   piu' corto dell'offset (es. il foglio kebab di una riga) quando la
   tastiera e' molto alta - un foglio chiuso resta sempre ancorato a
   bottom:0, il suo stesso transform lo tiene comunque fuori schermo. */
.g-sheet.is-open { transform: translate(-50%, 0); bottom: var(--g-kb-offset, 0px); }
.g-sheet-handle { width: 40px; height: 4px; border-radius: 4px; background: var(--g-border); margin: 0 auto 18px; }
.g-sheet-title { text-align: center; font-weight: 700; font-size: 1.15rem; margin: 0 0 20px; color: var(--g-text); }

/* Pulsanti completamente arrotondati, pieni e contornati */
.g-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 14px 20px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1rem;
  border: 1.5px solid var(--g-blue);
  background: var(--g-blue);
  color: #fff;
  cursor: pointer;
}
.g-pill-outline { background: #fff; color: var(--g-blue); }
.g-pill:disabled { opacity: .4; cursor: default; }
/* Azione distruttiva (conferma eliminazione ospite, Fase 3): rosso
   d'errore pieno, stessa forma della pillola normale - va cercata di
   proposito, non e' l'azione su cui il pollice cade per sbagno. */
.g-pill-danger { background: var(--g-red); border-color: var(--g-red); color: #fff; }

/* Campo di modulo: fondo #F3F5FA, etichetta che sale sopra al bordo. La
   variante di errore ha bordo e etichetta rossi e una riga "(!) messaggio"
   sotto il campo. */
.g-field { position: relative; margin: 0 0 16px; }
.g-field input,
.g-field select,
.g-field textarea {
  width: 100%;
  background: var(--g-field);
  border: 1px solid var(--g-border);
  border-radius: 10px;
  height: 52px;
  padding: 16px 14px 0;
  font-size: .95rem;
  color: var(--g-text);
  font-family: inherit;
  appearance: none;
  -webkit-appearance: none;
}
.g-field textarea { height: auto; min-height: 96px; padding-top: 18px; resize: vertical; }
.g-field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%236B7386' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 34px;
}
.g-field label {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--g-muted);
  font-size: .95rem;
  pointer-events: none;
  background: transparent;
  padding: 0 4px;
  transition: top .15s ease, font-size .15s ease, background .15s ease;
  max-width: calc(100% - 28px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.g-field input:focus,
.g-field input:not(:placeholder-shown),
.g-field select:focus,
.g-field select.has-value,
.g-field textarea:focus,
.g-field textarea:not(:placeholder-shown) { padding-top: 22px; }
.g-field input:focus + label,
.g-field input:not(:placeholder-shown) + label,
.g-field select:focus + label,
.g-field select.has-value + label,
.g-field textarea:focus + label,
.g-field textarea:not(:placeholder-shown) + label {
  top: 0;
  font-size: .7rem;
  background: var(--g-field);
}
.g-field.is-error input,
.g-field.is-error select,
.g-field.is-error textarea {
  border-color: var(--g-red);
  border-width: 1.5px;
  background: #fff;
}
.g-field.is-error label { color: var(--g-red); }
.g-field.is-error input:focus + label,
.g-field.is-error input:not(:placeholder-shown) + label,
.g-field.is-error select:focus + label,
.g-field.is-error select.has-value + label { background: #fff; }
.g-field-msg {
  display: none;
  align-items: center;
  gap: 6px;
  color: var(--g-red);
  font-size: .8rem;
  margin-top: 6px;
  font-weight: 600;
}
.g-field.is-error .g-field-msg { display: flex; }
.g-field-msg-icon {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.5px solid var(--g-red);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .65rem;
  line-height: 1;
  flex: 0 0 auto;
}
.g-field-row { display: grid; grid-template-columns: 100px 1fr; gap: 10px; }

/* Fisarmonica con "+" e "−" */
.g-acc-item { border-bottom: 1px solid var(--g-border); }
.g-acc-item:last-child { border-bottom: 0; }
.g-acc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 0;
  cursor: pointer;
  background: none;
  border: 0;
  width: 100%;
  font-weight: 700;
  color: var(--g-text);
  text-align: left;
}
.g-acc-toggle {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--g-muted);
  font-size: 1.1rem;
  transition: transform .15s ease;
}
.g-acc-toggle::before { content: "+"; }
.g-acc-item.is-open .g-acc-toggle::before { content: "\2212"; }
.g-acc-body { display: none; padding: 0 0 16px; color: var(--g-muted); line-height: 1.5; }
.g-acc-item.is-open .g-acc-body { display: block; }

/* Stepper numerico. Quadrati arrotondati con bordo blu (IMG_0746), non
   cerchi grigi: verificato a video la prima volta che il componente e'
   stato davvero usato (Task 6, foglio "Numero di ospiti") - nessun
   contenitore esterno a pillola, solo i tre elementi affiancati. */
.g-stepper { display: inline-flex; align-items: center; gap: 18px; }
.g-stepper button {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1.5px solid var(--g-blue);
  background: #fff;
  color: var(--g-blue);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}
.g-stepper button:disabled { opacity: .35; cursor: default; }
.g-stepper-value { min-width: 20px; text-align: center; font-weight: 700; font-size: 1.1rem; color: var(--g-navy); }

/* ---------------------------------------------------------------- */
/* Schermata Home check-in (Fase 2, Task 3) - IMG_0729/IMG_0740/IMG_0746   */
/* ---------------------------------------------------------------- */

.g-checkin-body { padding: 20px; }
.g-checkin-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 14px;
}
.g-checkin-title { margin: 0; font-size: 1.6rem; font-weight: 800; color: var(--g-text); }
.g-checkin-share {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: none;
  padding: 0;
  color: var(--g-blue);
  font-weight: 700;
  font-size: .95rem;
  cursor: pointer;
}
.g-checkin-share svg { width: 18px; height: 18px; }
.g-checkin-status { margin: 0 0 18px; color: var(--g-muted); line-height: 1.5; }

/* Fisarmonica "attività" (una sola voce per ora): stessa struttura
   .g-acc-item/.g-acc-head/.g-acc-body della fisarmonica generica, ma con
   un'icona a sinistra dell'intestazione e uno chevron (non +/-) a destra:
   nello screenshot di riferimento questa fisarmonica è diversa da quella
   delle FAQ (Task 4). Essendo l'unica voce del gruppo non le serve un
   bordo inferiore. */
.g-acc-outer { border-bottom: 0; }
.g-acc-head-outer { padding: 0 0 14px; }
.g-acc-head-left { display: flex; align-items: center; gap: 10px; }
.g-acc-status-icon { display: inline-flex; color: var(--g-muted); }
.g-acc-status-icon svg { width: 20px; height: 20px; }
.g-acc-status-icon.is-done { color: var(--g-green); }
.g-acc-chevron { flex: 0 0 auto; display: inline-flex; color: var(--g-muted); }
.g-acc-chevron svg { width: 18px; height: 18px; transition: transform .15s ease; }
.g-acc-item.is-open .g-acc-chevron svg { transform: rotate(180deg); }
.g-acc-body-outer { padding: 0; display: none; }
.g-acc-item.is-open .g-acc-body-outer { display: block; }

/* Riga attività "Registrazione Ospiti": non completata, bordo neutro (la
   variante completata, .g-task.is-done, è già definita sopra). Nessuno
   screenshot di riferimento mostra questo stato (tutti gli screenshot col
   task visibile lo mostrano già completato): bordo e sfondo neutri sono
   una scelta di continuità con lo stile card del resto del sistema. */
.g-task:not(.is-done) { border: 1px solid var(--g-border); }
.g-task-status svg { width: 15px; height: 15px; }

/* Menu laterale: nello screenshot di riferimento (IMG_0730) il banner e la
   barra NON cambiano quando il menu si apre - solo l'hamburger diventa una
   X (sopra) - e l'area del contenuto viene sostituita dal menu, che occupa
   lo stesso spazio. Percio' .g-drawer e' un fratello di .g-content, non un
   pannello sovrapposto: nascosto di default, mostrato al posto del
   contenuto quando body porta la classe g-drawer-open. */
.g-drawer {
  display: none;
  flex: 1;
  flex-direction: column;
  gap: 4px;
  padding: 12px 20px 40px;
}
body.g-drawer-open .g-content { display: none; }
body.g-drawer-open .g-drawer { display: flex; }
.g-menu-item { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--g-radius-card); color: var(--g-text); font-weight: 600; }
.g-menu-item svg { width: 20px; height: 20px; flex: 0 0 auto; }
.g-menu-item.is-active { background: var(--g-lavender); color: var(--g-blue); }
.g-menu-item-button { width: 100%; border: 0; background: none; text-align: left; font: inherit; cursor: pointer; }
.g-menu-divider { border: 0; border-top: 1px solid var(--g-border); margin: 10px 0; }

/* ---------------------------------------------------------------- */
/* Selettore lingua (Fase 2, Task 4) - foglio dal basso con le otto lingue */
/* ---------------------------------------------------------------- */
.g-lang-sheet { max-height: 70vh; overflow-y: auto; }
.g-lang-item { justify-content: flex-start; }

/* ---------------------------------------------------------------- */
/* Schermata FAQ (Fase 2, Task 4) - IMG_0732..IMG_0739                */
/* ---------------------------------------------------------------- */
.g-faq-back {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--g-blue);
  font-weight: 700;
  padding: 4px 0 20px;
}
.g-faq-card { margin-bottom: 14px; }
.g-faq-card .g-acc-item { border-bottom: 0; padding: 2px 18px; }
.g-faq-card .g-acc-body p { margin: 0; }

/* Piè di pagina blu, presente su ogni schermata */
.g-footer {
  background: var(--g-blue);
  color: #fff;
  padding: 32px 24px calc(28px + env(safe-area-inset-bottom, 0px));
  margin-top: auto;
}
.g-footer-name { font-weight: 700; font-size: 1.35rem; line-height: 1.25; margin: 0 0 6px; }
.g-footer-country { font-size: .9rem; opacity: .85; margin: 0 0 18px; }
.g-footer-mail { display: flex; align-items: center; gap: 8px; font-size: .9rem; margin: 0 0 10px; }
.g-footer-mail svg { width: 16px; height: 16px; flex: 0 0 auto; }
.g-footer-mail a { color: #fff; }
.g-footer-powered { font-size: .85rem; opacity: .85; }
.g-footer-powered strong { font-weight: 700; opacity: 1; }

/* Dati legali (collaudo cliente 20/08): ragione sociale, partita IVA,
   indirizzo, link privacy - sotto al resto del piè di pagina (invariato
   sopra), CENTRATI come chiesto ("tutto centrato"). Bordo superiore
   sottile per staccare visivamente il blocco dal resto senza una vera
   riga vuota, coerente con l'opacita' gia' usata da .g-footer-country/
   .g-footer-powered per il testo "secondario" su sfondo blu. */
.g-footer-legal {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .2);
  text-align: center;
}
.g-footer-legal-name { font-size: .82rem; font-weight: 700; opacity: .9; margin: 0 0 2px; }
.g-footer-legal-vat,
.g-footer-legal-address { font-size: .78rem; opacity: .78; margin: 0 0 2px; }
.g-footer-legal-privacy {
  display: inline-block;
  margin-top: 6px;
  color: #fff;
  font-size: .78rem;
  font-weight: 600;
  text-decoration: underline;
  opacity: .9;
}

/* ---------------------------------------------------------------- */
/* Foglio Condividi (Fase 2, Task 5) - IMG_0741                       */
/* ---------------------------------------------------------------- */

.g-share-field {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--g-border);
  border-radius: 12px;
  padding: 6px 6px 6px 16px;
  margin: 0 0 22px;
}
.g-share-input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  font-size: .9rem;
  color: var(--g-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.g-share-input:focus { outline: none; }
.g-share-copy {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border: 1px solid var(--g-border);
  border-radius: 8px;
  background: #fff;
  color: var(--g-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.g-share-copy svg { width: 18px; height: 18px; }
.g-share-copy .g-copy-done { display: none; color: var(--g-green); }
.g-share-copy.is-copied .g-copy-icon { display: none; }
.g-share-copy.is-copied .g-copy-done { display: inline-flex; }
.g-share-or { margin: 0 0 16px; color: var(--g-muted); font-size: .95rem; }
.g-share-via { display: flex; margin-bottom: 14px; }
.g-share-via:last-child { margin-bottom: 0; }

/* Pagina di gettone non valido: sobria, un solo messaggio, nessun dettaglio
   sul motivo. */
.g-invalid { padding: 28px; text-align: center; max-width: 420px; margin: 0 auto; }
.g-invalid p { margin: 0 0 12px; color: var(--g-muted); line-height: 1.5; }
.g-invalid a { color: var(--g-blue); font-weight: 600; }

/* ---------------------------------------------------------------- */
/* Riepilogo degli ospiti (Fase 2, Task 6) - IMG_0742/0743/0746        */
/* ---------------------------------------------------------------- */

.g-ospiti-flash {
  margin: 0 0 18px;
  padding: 12px 16px;
  border-radius: 10px;
  background: #FDEBEF;
  border: 1px solid var(--g-red);
  color: var(--g-red);
  font-size: .9rem;
  font-weight: 600;
}
.g-ospiti-counter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: none;
  padding: 0;
  margin: 4px 0 26px;
  font-weight: 800;
  font-size: 1.2rem;
  color: var(--g-text);
  cursor: pointer;
}
.g-ospiti-counter svg { width: 16px; height: 16px; color: var(--g-muted); }
.g-guest-section {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 24px 0 10px;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--g-muted);
}
.g-guest-section:first-of-type { margin-top: 0; }
.g-guest-section svg { width: 18px; height: 18px; }
.g-guest-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px;
  margin: 0 0 14px;
}
.g-guest-name { margin: 0 0 4px; font-weight: 700; color: var(--g-text); }
.g-guest-status {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: .88rem;
  font-weight: 700;
  color: var(--g-muted);
}
.g-guest-status svg { width: 14px; height: 14px; }
.g-guest-status.is-done { color: #1FAE7E; }
/*
 * Elenco dei campi mancanti sotto una card non completa (Riepilogo/Invio,
 * fix "banner rosso sopra a card verdi"): un rigo in piu', piccolo e
 * discreto, nello stesso colore muto del testo "Da completare" - non e' un
 * errore da segnalare in rosso (non c'e' nessun invio in corso qui), solo
 * un'informazione in piu' sulla stessa card gia' approvata dal cliente.
 */
.g-guest-missing {
  margin: 2px 0 0;
  font-size: .78rem;
  font-weight: 500;
  color: var(--g-muted);
}
.g-guest-kebab {
  flex: 0 0 auto;
  border: 0;
  background: none;
  padding: 6px;
  color: var(--g-blue);
  cursor: pointer;
}
.g-guest-kebab svg { width: 20px; height: 20px; }
.g-sheet-action {
  display: block;
  width: 100%;
  border: 0;
  background: none;
  padding: 14px 4px;
  font: inherit;
  font-weight: 700;
  color: var(--g-text);
  text-align: left;
  cursor: pointer;
}
.g-sheet-note { margin: 4px 4px 0; color: var(--g-muted); font-size: .9rem; line-height: 1.5; }
.g-count-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 4px 0 30px;
}
.g-count-row-label { font-weight: 600; color: var(--g-text); }

/* ---------------------------------------------------------------- */
/* Modulo dati ospite (Fase 2, Task 7) - IMG_0747/0749/0750            */
/* ---------------------------------------------------------------- */

.g-dati-heading { margin: 6px 0 8px; font-size: 1.55rem; font-weight: 800; color: var(--g-text); }
.g-dati-subtitle { margin: 0 0 22px; color: var(--g-muted); line-height: 1.5; }

.g-mrz-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 18px;
  margin: 0 0 28px;
  border: 1px solid var(--g-border);
  border-radius: 16px;
  opacity: .55;
}
.g-mrz-icon { flex: 0 0 auto; color: var(--g-text); }
.g-mrz-icon svg { width: 26px; height: 26px; }
.g-mrz-title { margin: 0 0 4px; font-weight: 800; color: var(--g-text); }
.g-mrz-desc { margin: 0; color: var(--g-muted); font-size: .88rem; line-height: 1.4; }
.g-mrz-note {
  display: inline-block;
  margin-top: 8px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--g-lavender);
  color: var(--g-blue);
  font-size: .74rem;
  font-weight: 700;
}

.g-section-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin: 28px 0 10px;
}
.g-section-row:first-of-type { margin-top: 6px; }
.g-section-label { font-weight: 800; font-size: 1.02rem; color: var(--g-text); }
.g-section-hr { border: 0; border-top: 1px solid var(--g-border); margin: 0 0 18px; }
.g-help-link { display: inline-flex; align-items: center; gap: 5px; color: var(--g-blue); font-weight: 700; font-size: .82rem; white-space: nowrap; }
.g-help-link svg { width: 15px; height: 15px; }

.g-uline { margin: 0 0 24px; }
.g-uline-label { display: block; margin: 0 0 10px; font-weight: 800; color: var(--g-text); }
.g-uline input {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--g-border);
  background: transparent;
  padding: 6px 2px 10px;
  font-size: 1rem;
  color: var(--g-text);
  font-family: inherit;
}
.g-uline input:focus { outline: none; border-bottom-color: var(--g-blue); }
.g-uline.is-error input { border-bottom-color: var(--g-red); border-bottom-width: 1.5px; }
.g-uline.is-error .g-uline-label { color: var(--g-red); }

/* Messaggio di errore "fuori" da un .g-field (Nome/Cognome legale, riga
   prefisso+telefono): stessa identica resa visiva di .g-field-msg, ma
   sempre visibile invece di dipendere dalla classe is-error di un
   antenato - qui l'antenato giusto puo' essere un .g-uline o una coppia di
   .g-field affiancati, non un singolo campo. */
.g-field-msg-standalone { display: flex; margin: -10px 0 16px; }

/* Il campo "Data di nascita" e' un input[type=date] ma deve avere lo stesso
   aspetto (e la stessa freccina) dei <select> del modulo: stessa immagine di
   sfondo di .g-field select, indicatore nativo del calendario reso invisibile
   ma allargato su tutto il campo cosi' l'intera casella resta cliccabile. */
.g-field input[type="date"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%236B7386' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 34px;
}
.g-field input[type="date"]::-webkit-calendar-picker-indicator {
  position: absolute;
  inset: 0;
  width: 100%;
  opacity: 0;
  margin: 0;
  padding: 0;
  cursor: pointer;
}

/* Selettore prefisso telefonico (IMG_0750): a differenza degli altri
   select del modulo, questo NON ha un'etichetta separata che sale sopra -
   la casella mostra sempre e solo "+00" o il prefisso scelto, niente
   altro. Un .g-field con label avrebbe sovrapposto le due scritte nello
   stesso spazio quando vuoto (bug trovato confrontando col browser): per
   questo e' un componente a parte, stessa resa a scatola ma senza la
   logica dell'etichetta flottante - l'etichetta accessibile resta,
   solo come aria-label sul <select>, non come testo visibile. */
.g-select-plain select,
.g-select-plain .g-prefix-trigger {
  width: 100%;
  height: 52px;
  background: var(--g-field);
  border: 1px solid var(--g-border);
  border-radius: 10px;
  padding: 0 34px 0 14px;
  font-size: .95rem;
  color: var(--g-text);
  font-family: inherit;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%236B7386' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
}
.g-select-plain.is-error select,
.g-select-plain.is-error .g-prefix-trigger { border-color: var(--g-red); border-width: 1.5px; background-color: #fff; }
/* Il pulsante che apre il selettore prefisso (Fase 3): stessa scatola del
   <select> che sostituisce, ma e' un <button> - testo allineato a
   sinistra, cursore a mano, nessun bordo/sfondo di default del browser. */
.g-prefix-trigger {
  display: block;
  text-align: left;
  border: 1px solid var(--g-border);
  cursor: pointer;
}

/* ---------------------------------------------------------------- */
/* Autoregistrazione (Fase 3) - correzioni cliente (collaudo telefono,  */
/* 20 agosto 2026). Il modulo di ricerca (g/register.php) condivide     */
/* .g-field col modulo dati ospite (g/steps/dati.php), gia' approvato   */
/* dal committente sugli screenshot di riferimento: le regole qui sotto */
/* sono scoped a .g-selfreg / .g-selfreg-dates apposta, per non         */
/* toccare l'aspetto di dati.php.                                       */
/* ---------------------------------------------------------------- */

/* "Arrivo" e "Partenza" affiancati sulla stessa riga, come chiesto dal
   committente ("a fianco partenza") - a 390px restano comodamente
   tappabili (due colonne uguali, gap 10px, oltre 150px di larghezza
   ciascuna). */
.g-selfreg-dates {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* Il valore del campo sembrava "storto" rispetto all'etichetta sopra
   (segnalato dal committente): senza un line-height esplicito un
   <select> e un <input> centrano il proprio contenuto in modo
   leggermente diverso a parita' di padding, un quirk nativo del
   browser, non un errore di padding. Un line-height fisso uguale per
   entrambi allinea il bordo sinistro e la posizione verticale del
   valore sulla stessa riga per select, testo e data. Scoped qui (non su
   .g-field globale) apposta per non toccare dati.php. */
.g-selfreg .g-field input,
.g-selfreg .g-field select,
.g-selfreg .g-field textarea {
  line-height: 20px;
}

/* Calendario "Arrivo"/"Partenza" (collaudo cliente 20/08, secondo giro):
   il primo passaggio aveva tolto la freccina finta da <select> ma, insieme
   ad essa, anche l'unico indicatore visibile che il campo apra un
   calendario - il committente lo ha segnalato di nuovo ("non hai messo il
   calendario"). Qui si disegna un'icona calendario propria (stesso stile a
   contorno delle altre icone dell'app, colore muto #6B7386 come la
   freccina dei <select>), diversa apposta dalla freccina da tendina
   rimossa la volta scorsa - non e' un ripristino di quella, e' un'icona
   nuova con un significato proprio. L'indicatore nativo del browser resta
   nel campo ma invisibile (opacity:0, dimensione naturale, non piu'
   allargato su tutta la casella come nel primo giro): l'apertura del
   selettore non dipende piu' da quel trucco, la gestisce
   initDatePickers() in assets/js/guest.js con showPicker()/focus() su
   QUALUNQUE punto del campo - vedi il commento li' per il perche'
   (Safari iOS non apre in modo affidabile un indicatore nativo allargato
   via CSS). Scoped a .g-selfreg-dates apposta per non toccare l'aspetto
   del campo "Data di nascita" di dati.php (che tiene la sua freccina da
   <select>, approvata cosi' com'e' dal committente): il comportamento
   JS invece e' applicato a TUTTI i campi data dell'area ospite, dati.php
   compreso, perche' e' un comportamento e non un aspetto - beneficia
   anche quel campo (apertura piu' affidabile) senza cambiarne la resa. */
.g-selfreg-dates .g-field input[type="date"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%236B7386' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='3'/%3E%3Cpath d='M3 10h18'/%3E%3Cpath d='M8 3v4M16 3v4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 42px;
  cursor: pointer;
}
.g-selfreg-dates .g-field input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0;
  cursor: pointer;
}

/* Collaudo cliente 20/08 (terzo giro) - "porta tutto piu' in alto in modo
   che ci sta tutto sullo schermo": a 390x844 il modulo (intestazione, intro,
   tutti i campi, pulsante, piè di pagina col blocco dati legali) superava
   l'altezza dello schermo. Qui si stringe il ritmo verticale, MAI le
   dimensioni tappabili dei campi/pulsante (restano gli stessi .g-field/
   .g-pill del resto dell'app, altezza minima 52px/44px+ invariata - si
   riduce solo lo spazio FRA gli elementi).
   Due livelli di scoping, per non toccare nessun'altra schermata ospite:
   - ".g-selfreg ..." per l'intro/le sezioni/i campi/il pulsante, tutti
     dentro il contenitore del modulo (gia' il pattern in uso sopra per
     .g-selfreg-dates e la riga line-height);
   - ".g-app.g-selfreg-shell ..." per banner/contenuto/piè di pagina, che
     stanno FUORI da .g-selfreg (sono fratelli di .g-content nel guscio
     condiviso, g/_shell.php) - la classe 'g-selfreg-shell' la aggiunge SOLO
     index.php alla radice (vedi ck_guest_shell_open()), quindi queste
     regole non toccano mai Home/Riepilogo/Dati/FAQ/Privacy. */
.g-app.g-selfreg-shell .g-banner {
  padding: 16px 24px;
}
.g-app.g-selfreg-shell .g-content {
  padding: 8px 20px 12px;
}
.g-selfreg .g-dati-subtitle {
  margin-bottom: 12px;
}
.g-selfreg .g-section-row {
  margin: 16px 0 8px;
}
.g-selfreg .g-section-row:first-of-type {
  margin-top: 0;
}
.g-selfreg .g-section-hr {
  margin-bottom: 10px;
}
.g-selfreg .g-field {
  margin-bottom: 8px;
}
.g-selfreg-submit {
  margin-top: 8px;
}
.g-app.g-selfreg-shell .g-footer {
  padding: 18px 24px calc(14px + env(safe-area-inset-bottom, 0px));
}
.g-app.g-selfreg-shell .g-footer-country {
  margin-bottom: 10px;
}
.g-app.g-selfreg-shell .g-footer-legal {
  margin-top: 10px;
  padding-top: 10px;
}
.g-app.g-selfreg-shell .g-footer-legal-privacy {
  margin-top: 4px;
}

/* ---------------------------------------------------------------- */
/* Foglio selettore prefisso telefonico (Fase 3) - IMG_0750             */
/* ---------------------------------------------------------------- */
.g-prefix-sheet { max-height: 78vh; display: flex; flex-direction: column; }
.g-prefix-search { flex: 0 0 auto; margin: 0 0 14px; }
.g-prefix-search-input {
  width: 100%;
  height: 46px;
  border: 1px solid var(--g-border);
  border-radius: 10px;
  background: var(--g-field);
  padding: 0 14px;
  font-size: .95rem;
  color: var(--g-text);
  font-family: inherit;
}
.g-prefix-search-input:focus { outline: none; border-color: var(--g-blue); }
.g-prefix-list { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: 8px; }
.g-prefix-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  border: 0;
  background: none;
  padding: 12px 6px;
  font: inherit;
  color: var(--g-text);
  text-align: left;
  cursor: pointer;
  border-radius: 10px;
}
.g-prefix-item.is-current { background: var(--g-lavender); }
.g-prefix-item-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-prefix-item-dial { flex: 0 0 auto; color: var(--g-muted); font-weight: 600; }
.g-prefix-divider { border: 0; border-top: 1px solid var(--g-border); margin: 6px 6px 10px; }
.g-prefix-empty { text-align: center; color: var(--g-muted); padding: 24px 0 8px; margin: 0; }

/* ---------------------------------------------------------------- */
/* Privacy, consenso e blocco (Fase 2, Task 8)                        */
/* ---------------------------------------------------------------- */

/* Casella di consenso: non un .g-field (niente etichetta flottante, e' un
   checkbox non un campo di testo), riusa lo stesso registro visivo (fondo
   grigio chiaro, bordo, radius) del resto del modulo. */
.g-checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--g-border);
  border-radius: 12px;
  background: var(--g-field);
  cursor: pointer;
  font-size: .92rem;
  color: var(--g-text);
  line-height: 1.5;
}
.g-checkbox-row input { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--g-blue); }
.g-checkbox-row.is-error { border-color: var(--g-red); border-width: 1.5px; background: #fff; }

/* ---------------------------------------------------------------- */
/* Foto del documento (Fase 2, Task 9)                                 */
/* ---------------------------------------------------------------- */

.g-doc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 0 0 22px; }
@media (max-width: 420px) { .g-doc-grid { grid-template-columns: 1fr; } }
.g-doc-capture {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 140px;
  border: 1.5px dashed var(--g-border);
  border-radius: 14px;
  background: var(--g-field);
  color: var(--g-muted);
  text-align: center;
  padding: 10px;
  overflow: hidden;
}
.g-doc-capture input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.g-doc-capture svg { width: 26px; height: 26px; }
.g-doc-capture-label { font-size: .8rem; font-weight: 600; }
.g-doc-capture img.g-doc-preview {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.g-doc-capture.has-existing .g-doc-capture-label,
.g-doc-capture.has-existing svg { display: none; }
.g-doc-capture.has-existing img.g-doc-preview { display: block; }
.g-doc-retake {
  position: absolute;
  bottom: 6px;
  right: 6px;
  z-index: 2;
  display: none;
  padding: 4px 10px;
  border-radius: 999px;
  border: 0;
  background: rgba(22, 34, 60, .72);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  cursor: pointer;
}
.g-doc-capture.has-existing .g-doc-retake { display: inline-flex; }
.g-doc-field-label { display: block; margin: 0 0 8px; font-weight: 700; font-size: .85rem; color: var(--g-text); }
.g-doc-capture.is-error { border-color: var(--g-red); border-style: solid; }

/* Collaudo su iPhone: due vuoti da chiudere sul modulo di autoregistrazione.
   1) fra intestazione e testo restava la barra bianca del guscio, che qui e'
      vuota (niente nome camera, niente menu): si nasconde;
   2) dopo il pulsante restavano 73px perche' .g-app e' alto 100vh e il pie'
      di pagina veniva spinto in fondo allo schermo. Qui deve seguire il
      contenuto: tolto il vincolo di altezza, e lo sfondo della pagina passa
      al blu del pie' di pagina, cosi' lo spazio sotto sembra il pie' stesso
      invece di una striscia bianca.
   Tutto scoped a .g-selfreg-shell: le altre schermate ospite non cambiano. */
body:has(.g-selfreg-shell) {
  background: #4C6BE0;
}
.g-app.g-selfreg-shell {
  min-height: 0;
}
.g-app.g-selfreg-shell .g-bar {
  display: none;
}
.g-app.g-selfreg-shell .g-content {
  flex: 0 0 auto;
  padding-top: 16px;
}
.g-selfreg .g-dati-subtitle {
  margin-top: 0;
}