/* ==========================================================================
   §E23 — Template ospite "Essenziale" (guest_template = utility)
   Bianco e blu, denso, header sticky, strip delle categorie e tab bar fissa.

   Stessa impostazione degli altri template: prima i token (che ritematizzano da
   soli tutta l'app ospite, perché application.css disegna con var(--c-*) /
   var(--sb-*)), poi le regole con colori letterali e le strutture nuove.
   ========================================================================== */

/* --- Font self-hosted (niente CDN: residenza dati UE, cfr. ADR-0005) ------- */
@font-face{font-family:'Archivo';font-style:normal;font-weight:400 700;font-display:swap;src:url("/assets/Archivo-400-700-latin-ext-4e7e2dd1.woff2") format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Archivo';font-style:normal;font-weight:400 700;font-display:swap;src:url("/assets/Archivo-400-700-latin-7a918f31.woff2") format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 700;font-display:swap;src:url("/assets/JetBrainsMono-400-700-latin-ext-b0c48b7a.woff2") format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 700;font-display:swap;src:url("/assets/JetBrainsMono-400-700-latin-68dbce1c.woff2") format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

/* --- Token ---------------------------------------------------------------- */
.g-body[data-guest-template="utility"] {
  --gt-bg: #FFFFFF;
  --gt-surface: #FFFFFF;
  --gt-surface-2: #F5F5F8;
  --gt-tint: #EEF2FE;
  --gt-accent: #2F5BEA;
  --gt-ink: #0B0B0C;
  --gt-muted: #6E6E77;
  --gt-muted-2: #8A8A93;
  --gt-line: #EBEBEE;
  --gt-line-2: #F1F1F4;
  /* §E67 — the page around the column from 768px: the column is white, so
     the page takes the grey of the secondary surface. And the side padding the
     content keeps from the column edge (the one value the tablet enlarges). */
  --g-backdrop: var(--gt-surface-2);
  --g-gutter: 16px;
  --gt-sans: 'Archivo', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --gt-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;

  --c-white: var(--gt-surface);
  --c-ink: var(--gt-ink);
  --c-ink-soft: var(--gt-muted);
  --c-azure-50: var(--gt-surface-2);
  --c-azure-100: var(--gt-line);
  --c-blue-900: var(--gt-ink);
  --c-blue-700: var(--gt-accent);
  --c-blue-500: var(--gt-accent);
  --c-blue-300: #B9C4E8;

  --sb-ink: var(--gt-ink);
  --sb-muted: var(--gt-muted);
  --sb-muted-2: var(--gt-muted-2);
  --sb-line: var(--gt-line);
  --sb-line-2: var(--gt-line-2);
  --sb-bg: var(--gt-bg);
  --sb-bg-2: var(--gt-surface-2);
  --sb-page: var(--gt-bg);
  --sb-chip: var(--gt-tint);
  --sb-chip-line: #D6DEFB;
  --sb-primary: var(--gt-accent);
  --sb-primary-2: #1E42BC;
  --sb-primary-300: #B9C4E8;
  --sb-grad: linear-gradient(135deg, #2F5BEA, #1E42BC);
  --sb-shadow: none;
  --sb-shadow-h: 0 4px 14px rgba(11, 11, 12, 0.08);
  --sb-r-card: 12px;
  --sb-r-btn: 10px;
  --sb-sans: var(--gt-sans);
  --sb-display: var(--gt-sans);

  --radius: 12px;
  --shadow: none;
  --font: var(--gt-sans);

  background: var(--gt-bg);
  color: var(--gt-ink);
  font-family: var(--gt-sans);
}

.g-body[data-guest-template="utility"] .g-app { background: var(--gt-bg); }
/* Room for the fixed tab bar, safe area included — only where there IS one.
   `_tabbar` renders nothing with a single section, and the pre check-in layout
   (§E66.2.1) never renders it: both used to end on 74px of empty page. */
.g-body[data-guest-template="utility"]:has(> .gu-tabbar) .g-app {
  padding-bottom: calc(74px + env(safe-area-inset-bottom));
}
.g-body[data-guest-template="utility"] h1,
.g-body[data-guest-template="utility"] h2,
.g-body[data-guest-template="utility"] h3 {
  font-family: var(--gt-sans); font-weight: 700; letter-spacing: -.02em;
}

/* --- Topbar sticky --------------------------------------------------------- */
.g-body[data-guest-template="utility"] .g-topbar {
  background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(8px); box-shadow: none;
  border-bottom: 1px solid var(--gt-line); color: var(--gt-ink);
  padding: 12px var(--g-gutter); position: sticky; top: 0; z-index: 30;
}
.g-body[data-guest-template="utility"] .g-topbar__brand {
  color: var(--gt-ink); font-family: var(--gt-sans); font-weight: 700;
  font-size: 0.78rem; letter-spacing: .08em; text-transform: uppercase;
}
.g-body[data-guest-template="utility"] .g-topbar__plate {
  background: transparent; box-shadow: none; padding: 0; text-transform: none;
}
.g-body[data-guest-template="utility"] .g-topbar__room {
  background: var(--gt-tint); color: var(--gt-accent); font-weight: 600;
}
.g-body[data-guest-template="utility"] .g-topbar__action { color: var(--gt-accent); }
.g-body[data-guest-template="utility"] .g-lang__current {
  background: transparent; border: none; color: var(--gt-accent);
  font: 500 0.72rem/1 var(--gt-mono);
}
.g-body[data-guest-template="utility"] .g-lang__current .g-lang__code { color: inherit; }
.g-body[data-guest-template="utility"] .g-lang__menu { background: #fff; border-color: var(--gt-line); }
.g-body[data-guest-template="utility"] .g-lang__code { color: var(--gt-accent); }

/* --- Hero ------------------------------------------------------------------ */
/* L'apertura sta in `.g-app` (fuori da `.g-main`) per essere a tutta larghezza
   senza margini negativi: il padding orizzontale lo portano `.g-main` e i
   blocchi che non sono a tutta larghezza. */
.g-body[data-guest-template="utility"] .g-main { padding: 0 var(--g-gutter); }
.g-body[data-guest-template="utility"] .g-flash { margin: 8px var(--g-gutter) 0; }

.g-body[data-guest-template="utility"] .gt-hero--cover {
  position: relative; height: 170px; overflow: hidden; background: var(--gt-surface-2);
}
.g-body[data-guest-template="utility"] .gt-hero--cover .gt-hero__img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* Riga identità: logo che scavalca la copertina, nome e camera accanto. */
.g-body[data-guest-template="utility"] .gt-idcard {
  display: flex; gap: 12px; align-items: center;
  margin: 0 var(--g-gutter); padding: 14px 0; border-bottom: 1px solid var(--gt-line);
}
.g-body[data-guest-template="utility"] .gt-hero--cover + .gt-idcard {
  margin-top: -30px; position: relative; z-index: 5;
}
.g-body[data-guest-template="utility"] .gt-idcard__logo {
  width: 56px; height: 56px; flex: none; border-radius: 14px; overflow: hidden;
  background: #fff; border: 1px solid #E4E4EA; display: grid; place-items: center;
  font-weight: 700; color: var(--gt-accent);
}
.g-body[data-guest-template="utility"] .gt-idcard__logo-img { max-width: 100%; max-height: 100%; }
.g-body[data-guest-template="utility"] .gt-hero--cover + .gt-idcard .gt-idcard__body { padding-top: 22px; }
.g-body[data-guest-template="utility"] .gt-idcard__name {
  margin: 0; font-weight: 700; font-size: 1.1rem; line-height: 1.15; letter-spacing: -.02em;
}
.g-body[data-guest-template="utility"] .gt-idcard__sub { margin: 2px 0 0; font-size: 0.75rem; color: var(--gt-muted); }
/* Con la riga fatti sotto il bordo lo porta lei: due filetti a 12px di distanza
   si leggono come un errore di stampa. */
.g-body[data-guest-template="utility"] .gt-idcard:has(+ .gu-facts) { border-bottom: 0; }

/* §E23/UX — senza copertina l'apertura era due righe di testo su bianco, e la
   seconda ripeteva il nome della struttura già scritto nella testata. Ora ospita
   la stessa riga identità del ramo con copertina, su fondo tinto: un blocco
   definito invece di una pagina bianca. La riga fatti sotto porta il proprio
   bordo, quindi qui il border-bottom cadrebbe doppio. */
.g-body[data-guest-template="utility"] .gt-hero--plain {
  padding: 0; background: var(--gt-tint); border-bottom: 1px solid var(--gt-line);
}
.g-body[data-guest-template="utility"] .gt-hero--plain .gt-idcard { border-bottom: 0; }
.g-body[data-guest-template="utility"] .gt-hero__title {
  margin: 0; font-weight: 700; font-size: 1.35rem; line-height: 1.15; letter-spacing: -.02em;
}
.g-body[data-guest-template="utility"] .gt-hero__sub { margin: 5px 0 0; font-size: 0.82rem; color: var(--gt-muted); }

/* --- Fatti pratici dell'intestazione (camera, check-out) --------------------
   Prefisso `gu-` come gu-quick e gu-tabs: sono strutture di questo solo
   template. Griglia e non flex: con un fatto solo la card occupa tutta la riga
   invece di lasciare metà schermo vuoto accanto a sé. */
.g-body[data-guest-template="utility"] .gu-facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px;
  margin: 0 var(--g-gutter); padding: 12px 0 14px; list-style: none;
  border-bottom: 1px solid var(--gt-line);
}
.g-body[data-guest-template="utility"] .gu-fact {
  display: flex; align-items: center; gap: 9px; min-width: 0;
  padding: 10px 12px; border: 1px solid #E4E4EA; border-radius: 12px; background: #fff;
}
.g-body[data-guest-template="utility"] .gu-fact__icon {
  width: 30px; height: 30px; flex: none; border-radius: 8px; display: grid; place-items: center;
  background: var(--gt-tint); color: var(--gt-accent);
}
.g-body[data-guest-template="utility"] .gu-fact__body {
  display: flex; flex-direction: column; min-width: 0;
}
.g-body[data-guest-template="utility"] .gu-fact__label {
  font-size: 0.66rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--gt-muted-2);
}
.g-body[data-guest-template="utility"] .gu-fact__value {
  font-size: 0.82rem; font-weight: 600; color: var(--gt-ink); overflow-wrap: anywhere;
}

/* --- Scorciatoie a due colonne (assistente / Wi-Fi / info / richieste) ------ */
.g-body[data-guest-template="utility"] .gu-quick {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  margin: 0; padding: 14px 0; list-style: none; border-bottom: 1px solid var(--gt-line);
}
.g-body[data-guest-template="utility"] .gu-quick__item {
  display: flex; align-items: center; gap: 9px; padding: 12px;
  border: 1px solid #E4E4EA; border-radius: 12px;
  text-decoration: none; color: var(--gt-ink); font-size: 0.79rem; font-weight: 600;
}
.g-body[data-guest-template="utility"] .gu-quick__item:hover { border-color: var(--gt-accent); }
.g-body[data-guest-template="utility"] .gu-quick__icon {
  width: 30px; height: 30px; flex: none; border-radius: 8px; display: grid; place-items: center;
  background: var(--gt-tint); color: var(--gt-accent);
}

/* --- Strip categorie (scorrevole) ------------------------------------------ */
/* `position: relative`, as on every guest scroller: whatever is absolutely
   positioned inside stays inside, instead of widening the page. */
.g-body[data-guest-template="utility"] .gu-tabs {
  position: relative;
  display: flex; gap: 16px; overflow-x: auto; scrollbar-width: none;
  margin: 0 calc(-1 * var(--g-gutter)); padding: 0 var(--g-gutter); list-style: none;
  border-bottom: 1px solid var(--gt-line);
}
.g-body[data-guest-template="utility"] .gu-tabs::-webkit-scrollbar { display: none; }
.g-body[data-guest-template="utility"] .gu-tabs__link {
  display: block; padding: 13px 0; white-space: nowrap; text-decoration: none;
  font-size: 0.79rem; font-weight: 600; color: var(--gt-muted-2); border-bottom: 2px solid transparent;
}
.g-body[data-guest-template="utility"] .gu-tabs__link--active { color: var(--gt-ink); border-bottom-color: var(--gt-accent); }

/* --- Servizi: righe dense --------------------------------------------------- */
.g-body[data-guest-template="utility"] .g-section { margin: 0; }
.g-body[data-guest-template="utility"] .g-section__head { margin: 0; padding: 20px 0 10px; }
/* §E23/UX — l'etichetta di categoria stava a 0.95rem/700 contro i nomi dei
   servizi a 0.85rem/600: dieci centesimi di rem e un peso di scarto non bastano
   a far leggere due cose come cose diverse, e l'elenco diventava una poltiglia.
   Ora la gerarchia è netta: 1.5rem il titolo di pagina, 1.05 la categoria, 0.85
   il servizio. */
.g-body[data-guest-template="utility"] .g-section__title {
  margin: 0; font-weight: 700; font-size: 1.05rem; letter-spacing: -.02em;
}
/* Titolo che apre DIRETTAMENTE una sezione (elenco servizi, Informazioni,
   Wi-Fi, contatti): fascia tinta a tutta larghezza, così l'inizio di un gruppo
   si vede prima di leggerlo. In questo template `.g-section` ha margine zero e
   le sezioni si toccano: senza, la categoria finiva incollata al filetto
   dell'ultima riga di quella precedente.

   Margine negativo pari al gutter con `padding` orizzontale che lo compensa: è il modo con
   cui esce dal padding di `.g-main` e arriva ai bordi della colonna, lo stesso
   già usato da `.gu-tabs`. La tinta è quella dell'intestazione e delle chip:
   in questo tema `--gt-tint` significa "superficie", non "contenuto".

   Dove il titolo sta dentro `.g-section__head` lo stacco ce l'ha già quello e
   la fascia non serve, quindi qui serve il selettore di figlio DIRETTO. */
.g-body[data-guest-template="utility"] .g-section > .g-section__title {
  margin: 18px calc(-1 * var(--g-gutter)) 0;
  padding: 11px var(--g-gutter);
  background: var(--gt-tint);
  border-block: 1px solid var(--sb-chip-line);
}
/* Qualunque cosa segua la fascia si stacca da essa: il sottotitolo dei contatti,
   la card del Wi-Fi, l'elenco dei servizi. Una regola sola sul fratello
   adiacente invece di una per blocco, così un blocco nuovo non nasce incollato.

   Serve anche a scavalcare il `margin-top: -6px` con cui `.g-section__sub`
   si stringe sotto un titolo SEMPLICE: sotto una fascia quel valore lo
   porterebbe DENTRO la barra. */
.g-body[data-guest-template="utility"] .g-section > .g-section__title + * {
  margin-top: 14px;
}
.g-body[data-guest-template="utility"] .g-section__count {
  font: 500 0.62rem/1 var(--gt-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--gt-muted-2);
}
.g-body[data-guest-template="utility"] .g-link { color: var(--gt-accent); }

.g-body[data-guest-template="utility"] .g-grid { grid-template-columns: 1fr; gap: 0; }

.g-body[data-guest-template="utility"] .g-service {
  flex-direction: row; align-items: center; gap: 12px;
  padding: 14px 0; border: none; border-bottom: 1px solid var(--gt-line-2);
  border-radius: 0; background: transparent; box-shadow: none;
}
.g-body[data-guest-template="utility"] .g-service:hover { transform: none; box-shadow: none; }
/* Il filetto di chiusura dell'ultima riga è decorazione: l'elenco finisce dove
   finiscono le righe. Con la fascia di categoria subito sotto sarebbero tre
   linee in trenta pixel. */
.g-body[data-guest-template="utility"] .g-grid > .g-service:last-child { border-bottom: 0; }
.g-body[data-guest-template="utility"] .g-service__media {
  flex: 0 0 56px; width: 56px; aspect-ratio: 1 / 1;
  border-radius: 10px; overflow: hidden; background: var(--gt-surface-2);
}
.g-body[data-guest-template="utility"] .g-service__body { flex: 1; min-width: 0; padding: 0; }
.g-body[data-guest-template="utility"] .g-service__cat {
  font-size: 0.62rem; letter-spacing: .04em; color: var(--gt-muted); font-weight: 500;
}
.g-body[data-guest-template="utility"] .g-service__name {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-weight: 600; font-size: 0.85rem; line-height: 1.25; margin: 2px 0 3px;
}
.g-body[data-guest-template="utility"] .g-service__hours { font-size: 0.72rem; color: var(--gt-muted); }
.g-body[data-guest-template="utility"] .g-service__price { font-size: 0.82rem; font-weight: 600; color: var(--gt-ink); }
.g-body[data-guest-template="utility"] .g-badge {
  border-radius: 5px; font: 500 0.6rem/1.5 var(--gt-mono); letter-spacing: 0;
}
.g-body[data-guest-template="utility"] .g-badge--featured,
.g-body[data-guest-template="utility"] .g-badge--popular { background: var(--gt-tint); color: var(--gt-accent); }
.g-body[data-guest-template="utility"] .g-service__placeholder { color: var(--gt-accent); font-size: 1.2rem; }

/* --- Categorie: righe con filetto ------------------------------------------ */
.g-body[data-guest-template="utility"] .g-cat {
  flex-direction: row; align-items: center; gap: 12px;
  padding: 13px 0; border: none; border-top: 1px solid var(--gt-line-2);
  border-radius: 0; background: transparent; box-shadow: none;
}
.g-body[data-guest-template="utility"] .g-cat:hover { transform: none; box-shadow: none; }
.g-body[data-guest-template="utility"] .g-cat__media {
  flex: 0 0 34px; width: 34px; height: 34px; aspect-ratio: 1 / 1; border-radius: 9px; overflow: hidden;
}
.g-body[data-guest-template="utility"] .g-cat__body { flex: 1; min-width: 0; padding: 0; }
.g-body[data-guest-template="utility"] .g-cat__name { font-weight: 600; font-size: 0.85rem; }
.g-body[data-guest-template="utility"] .g-cat__desc { margin: 1px 0 0; font-size: 0.72rem; color: var(--gt-muted); }
.g-body[data-guest-template="utility"] .g-cat__count {
  margin: 0; flex: none; font: 500 0.62rem/1 var(--gt-mono); color: var(--gt-muted-2);
}

/* --- CTA, liste, dettaglio, form ------------------------------------------- */
/* Le superfici a card dell'app ospite: in application.css condividono una
   regola sola, qui perdono ombra e raggio grande — Wi-Fi e Contatti compresi. */
.g-body[data-guest-template="utility"] .g-cta,
.g-body[data-guest-template="utility"] .g-list__item,
.g-body[data-guest-template="utility"] .g-faq,
.g-body[data-guest-template="utility"] .g-facts--card,
.g-body[data-guest-template="utility"] .g-form-card,
.g-body[data-guest-template="utility"] .g-recap,
.g-body[data-guest-template="utility"] .g-wifi,
.g-body[data-guest-template="utility"] .g-contacts,
.g-body[data-guest-template="utility"] .g-assistant {
  background: #fff; border: 1px solid #E4E4EA; border-radius: 12px; box-shadow: none;
}
.g-body[data-guest-template="utility"] .chip {
  background: var(--gt-tint); border-color: #D6DEFB; color: var(--gt-accent); border-radius: 8px;
}
.g-body[data-guest-template="utility"] .chip:hover { background: #E1E8FD; }
.g-body[data-guest-template="utility"] .g-empty {
  background: var(--gt-surface-2); border: 1px dashed var(--gt-line); color: var(--gt-muted);
}
.g-body[data-guest-template="utility"] .g-cta__icon,
.g-body[data-guest-template="utility"] .g-assistant__icon {
  background: var(--gt-tint); color: var(--gt-accent); border-radius: 8px;
}
.g-body[data-guest-template="utility"] .g-cta__title,
.g-body[data-guest-template="utility"] .g-assistant__title { font-weight: 600; font-size: 0.9rem; }
.g-body[data-guest-template="utility"] .g-detail__title,
.g-body[data-guest-template="utility"] .g-page__title,
.g-body[data-guest-template="utility"] .g-chat__title {
  font-weight: 700; letter-spacing: -.02em; color: var(--gt-ink);
}
.g-body[data-guest-template="utility"] .g-detail__cat { color: var(--gt-accent); }
.g-body[data-guest-template="utility"] .g-detail__media,
.g-body[data-guest-template="utility"] .g-cat-head__media { background: var(--gt-surface-2); }
.g-body[data-guest-template="utility"] .g-back { color: var(--gt-accent); }
.g-body[data-guest-template="utility"] .g-file__icon,
.g-body[data-guest-template="utility"] .g-contact__icon { background: var(--gt-tint); color: var(--gt-accent); }

.g-body[data-guest-template="utility"] .form__input,
.g-body[data-guest-template="utility"] .g-chat__input {
  background-color: #fff; border-color: #E4E4EA; color: var(--gt-ink); border-radius: 10px;
}
.g-body[data-guest-template="utility"] .btn--primary {
  background: var(--gt-accent); color: #fff; box-shadow: none; border-radius: 10px; font-weight: 600;
}
.g-body[data-guest-template="utility"] .btn--primary:hover { background: #1E42BC; }
.g-body[data-guest-template="utility"] .btn--ghost {
  background: #fff; border-color: #E4E4EA; color: var(--gt-ink); border-radius: 10px;
}

/* --- Richieste e chat ------------------------------------------------------ */
.g-body[data-guest-template="utility"] .g-req,
.g-body[data-guest-template="utility"] .g-offer {
  background: #fff; border-color: #E4E4EA; border-radius: 12px; box-shadow: none;
}
.g-body[data-guest-template="utility"] .g-chat__log { background: var(--gt-surface-2); }
.g-body[data-guest-template="utility"] .g-msg__bubble { background: #fff; border: 1px solid var(--gt-line); }
.g-body[data-guest-template="utility"] .g-msg--user .g-msg__bubble {
  background: var(--gt-accent); border-color: var(--gt-accent); color: #fff;
}
.g-body[data-guest-template="utility"] .g-offer__cta { background: var(--gt-accent); color: #fff; }
.g-body[data-guest-template="utility"] .g-status--received { background: var(--gt-tint); color: var(--gt-accent); }

/* --- Footer + tab bar fissa ------------------------------------------------- */
.g-body[data-guest-template="utility"] .g-footer {
  margin-top: 6px; padding: 22px var(--g-gutter); border-top: 1px solid var(--gt-line); text-align: center;
}
.g-body[data-guest-template="utility"] .g-footer__name { font-weight: 600; font-size: 0.82rem; }
.g-body[data-guest-template="utility"] .g-footer__line,
.g-body[data-guest-template="utility"] .g-footer__note { font-size: 0.66rem; color: var(--gt-muted-2); }
.g-body[data-guest-template="utility"] .g-footer__link { color: var(--gt-accent); }

/* Barra di navigazione: fissa al fondo della finestra, larga come l'app. */
.gu-tabbar {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 0; z-index: 40;
  width: 100%; max-width: var(--g-app-width);
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  margin: 0; padding: 9px 6px calc(12px + env(safe-area-inset-bottom));
  list-style: none; background: #fff; border-top: 1px solid #EBEBEE;
}
.gu-tabbar__link {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  text-decoration: none; color: #8A8A93; font-size: 0.62rem; font-weight: 500;
}
/* §E27 — il contatore dei non letti si appoggia all'icona, non si impila sotto
   l'etichetta: la barra è una colonna e una terza riga la farebbe crescere in
   altezza a ogni messaggio non letto. */
.gu-tabbar__link .g-navbadge {
  position: absolute; top: -4px; left: 50%; margin-left: 3px;
}
.gu-tabbar__link--active { color: #2F5BEA; font-weight: 600; }
.gu-tabbar__link .icon { width: 20px; height: 20px; }

/* --- Immagini di ripiego ---------------------------------------------------
   Le default sono disegnate nell'indigo storico: qui stonerebbero. Al loro
   posto il riquadro tratteggiato del mockup, nei colori del tema. */
.g-body[data-guest-template="utility"] .g-img--placeholder { display: none; }
.g-body[data-guest-template="utility"] .g-service__media,
.g-body[data-guest-template="utility"] .g-cat__media,
.g-body[data-guest-template="utility"] .g-cat-head__media,
.g-body[data-guest-template="utility"] .g-detail__media {
  background: repeating-linear-gradient(135deg, #ECECF1 0 7px, #F5F5F8 7px 14px);
}

/* Il campo della chat non ha uno stile di focus proprio in application.css e
   ricadrebbe sull'anello azzurro del browser, di un blu diverso da quello del
   tema. */
.g-body[data-guest-template="utility"] .g-chat__input:focus {
  outline: none; border-color: var(--gt-accent);
  box-shadow: 0 0 0 3px rgba(47, 91, 234, 0.22);
}

/* Testata più bassa di quella classica: ricalibra lo stacco delle ancore. */
.g-body[data-guest-template="utility"] { --g-topbar-h: 92px; }

/* §E23/UX — "Le mie richieste" nella testata: pagina corrente marcata.
   Le due scorciatoie della home stanno su una griglia elastica: da quando il
   Wi-Fi è passato fra le voci di navigazione può restarci il solo assistente,
   e una tessera sola non deve lasciare mezza riga vuota. */
.g-body[data-guest-template="utility"] .g-topbar__action--active {
  background: var(--gt-tint); color: var(--gt-accent);
}
.g-body[data-guest-template="utility"] .gu-quick {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

/* ==========================================================================
   §E23/UX — Scheda orari/prezzo, riepilogo e modulo di richiesta.
   ========================================================================== */
.g-body[data-guest-template="utility"] .g-fact + .g-fact { border-top-color: var(--gt-line); }
.g-body[data-guest-template="utility"] .g-fact__icon,
.g-body[data-guest-template="utility"] .g-recap__cat { color: var(--gt-accent); }
.g-body[data-guest-template="utility"] .g-fact__label,
.g-body[data-guest-template="utility"] .g-fact__key,
.g-body[data-guest-template="utility"] .g-fact__note { color: var(--gt-muted); }
.g-body[data-guest-template="utility"] .g-fact__value,
.g-body[data-guest-template="utility"] .g-total { color: var(--gt-ink); }
.g-body[data-guest-template="utility"] .g-recap__name { color: var(--gt-ink); }

/* Card e campo erano entrambi bianchi: il campo scende su `--gt-surface-2` e
   il contorno regge 3.42:1 sul bianco. */
.g-body[data-guest-template="utility"] .form__input {
  background-color: var(--gt-surface-2); border-color: var(--gt-muted-2);
}
.g-body[data-guest-template="utility"] .form__input:focus {
  background-color: #fff; border-color: var(--gt-accent);
  box-shadow: 0 0 0 3px rgba(47, 91, 234, .22);
}
.g-body[data-guest-template="utility"] .g-stepper__btn {
  background: #fff; border-color: var(--gt-muted-2); color: var(--gt-ink); border-radius: 10px;
}
.g-body[data-guest-template="utility"] .g-stepper__btn:hover:not(:disabled) { background: var(--gt-surface-2); }

/* ==========================================================================
   §E67 — tablet (ADR-0089). The shared rules live in application.css; here
   only what this sheet owns at 0-3-0.
   ========================================================================== */
@container guest (min-width: 720px) {
  /* The shortest opening of the five, as on a phone: this theme gets to the
     list quickly. Capped by the window, never shorter than on a phone. */
  .g-body[data-guest-template="utility"] .gt-hero--cover { height: clamp(170px, min(26cqi, 36svh), 260px); }
  .g-body[data-guest-template="utility"] .gt-idcard__logo { width: 64px; height: 64px; }
  .g-body[data-guest-template="utility"] .gt-idcard__name { font-size: 1.35rem; }

  /* Facts and shortcuts keep a tile's width: `auto-fit` stretched two of them
     to ~440px each, and the lone assistant shortcut across the whole column. */
  .g-body[data-guest-template="utility"] .gu-facts,
  .g-body[data-guest-template="utility"] .gu-quick {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }

  /* Dense rows in two columns, the row shape untouched. Paired rows match
     heights, and the photo card's `span 2` (application.css) is undone. */
  .g-body[data-guest-template="utility"] .g-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; align-items: stretch;
  }
  .g-body[data-guest-template="utility"] .g-grid > .g-service { grid-row: auto; }
  /* The closing rule is decoration (see above), and in two columns the last
     line can hold two rows: the one beside the last loses it too. */
  .g-body[data-guest-template="utility"] .g-grid > .g-service:nth-last-child(2):nth-child(odd) { border-bottom: 0; }

  /* The section band reached the column edges by stepping out of the page's
     padding. On a tablet a text page is narrower than the column, and the band
     stopped in mid-air, past the content and short of the edges: it becomes a
     rounded strip as wide as the content, on every page alike. */
  .g-body[data-guest-template="utility"] .g-section > .g-section__title {
    margin-inline: 0; padding-inline: 14px; border-radius: 10px; border: 1px solid var(--sb-chip-line);
  }
}

/* The tab bar is fixed OUTSIDE the column, so it reads the window, not the
   container. It already follows the column's width (`--g-app-width`); here
   its five entries stop stretching to ~190px each and gather in the middle,
   clear of the notch in landscape. */
@media (min-width: 768px) {
  .gu-tabbar {
    grid-auto-columns: minmax(0, 140px); justify-content: center;
    padding-inline: max(6px, env(safe-area-inset-left)) max(6px, env(safe-area-inset-right));
  }
}