/* =====================================================================================
   Booking V2 · temi Moderno e Notturno, mobile first, query di contenitore «bv2».
   Porta il mockup approvato (docs/superpowers/assets/2026-10-20-booking-v2-mockup.html):
   stessi token e nomi di classe, così le impaginazioni si aggiungono senza tradurre.
   Mockup → pagina: #app → .bv2, data-theme-b → data-tema, data-v mix/booking/expedia/airbnb
   → data-layout equilibrio/tariffario/vetrina/galleria. Font e icone sono file di questa cartella.
   ===================================================================================== */

@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/figtree-latin-ext-400-normal.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: 'Figtree'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/figtree-latin-400-normal.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: 'Figtree'; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/figtree-latin-ext-600-normal.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: 'Figtree'; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/figtree-latin-600-normal.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: 'Figtree'; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/figtree-latin-ext-700-normal.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: 'Figtree'; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/figtree-latin-700-normal.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: 'Marcellus'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/marcellus-latin-ext-400-normal.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: 'Marcellus'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/marcellus-latin-400-normal.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: Moderno col colore dell'hotel (variabili --bv2-* da ColoreBooking) ---------- */
.bv2 {
  --bg: #F6F5F2; --surface: #FFFFFF; --sunk: #EFEDE8; --ink: #1E1D1B; --ink-2: #57534D; --line: #E5E1DA; --line-2: #CFC9BF;
  --ok: #10703A; --nr: #8A4B08; --urg: #B42318; --urg-bg: #FDECEA; --warn-bg: #FFF4E0; --warn-ink: #7A4100;
  --p: var(--bv2-primario, #0E7C66); --on-p: var(--bv2-su-primario, #FFFFFF); --p-ink: var(--bv2-primario-testo, #0E7A64);
  --p-soft: var(--bv2-tenue, #E7F2F0); --p-line: var(--bv2-filo, #ABD1C9);
  --f: 'Figtree', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-d: var(--f);
  --r-img: 12px; --r: 8px;
  --sh-1: 0 1px 2px rgba(20, 24, 28, .06), 0 2px 8px rgba(20, 24, 28, .05);
  --sh-2: 0 12px 32px rgba(20, 24, 28, .18);
  --ease: cubic-bezier(.2, .8, .2, 1);
  container: bv2 / inline-size;
  min-height: 100vh; min-height: 100dvh;
  background: var(--bg); color: var(--ink); font: 400 15px/1.5 var(--f);
  -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums;
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  caret-color: var(--p-ink);
}
/* Notturno: fondo inchiostro e oro; il colore dell'hotel vale solo per Moderno. */
.bv2[data-tema="notturno"] {
  --bg: #0E1116; --surface: #161A21; --sunk: #1C2129; --ink: #ECE6DA; --ink-2: #ABA598; --line: #29303A; --line-2: #3A424E;
  --ok: #7DD3A0; --nr: #F0B77A; --urg: #FF9C8F; --urg-bg: #3A1D1B; --warn-bg: #3A2E14; --warn-ink: #F4D28C;
  --p: #D4B26A; --on-p: #19140A; --p-ink: #E0C384; --p-soft: #2A2518; --p-line: #6E5B33;
  --f-d: 'Marcellus', Georgia, serif;
  --sh-1: 0 1px 0 rgba(255, 255, 255, .03); --sh-2: 0 16px 40px rgba(0, 0, 0, .55);
  color-scheme: dark;
}

/* ---------- base ---------- */
html { -webkit-tap-highlight-color: transparent; }
body.bv2-pagina { margin: 0; background: #F6F5F2; }
html:has(.bv2[data-tema="notturno"]) body.bv2-pagina { background: #0E1116; }
html:has(dialog.sh[open]) { overflow: hidden; }
.bv2 *, .bv2 *::before, .bv2 *::after { box-sizing: border-box; }
.bv2 ::selection { background: var(--p); color: var(--on-p); }
:where(.bv2) img { display: block; max-width: 100%; }
:where(.bv2) :where(button, input, select, textarea) { font: inherit; color: inherit; }
:where(.bv2) button { cursor: pointer; touch-action: manipulation; }
:where(.bv2) a { color: var(--p-ink); text-underline-offset: 3px; }
.bv2 :focus-visible { outline: 2px solid var(--p-ink); outline-offset: 2px; }
.bv2 .icb:focus-visible { border-radius: 50%; }
.bv2 h1, .bv2 h2, .bv2 h3 { margin: 0; text-wrap: balance; }
.bv2 p { margin: 0; }
.bv2 { scrollbar-color: var(--line-2) transparent; }
.bv2-vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.wrap { width: 100%; max-width: 1160px; margin: 0 auto; padding-inline: max(16px, env(safe-area-inset-left, 0px)) max(16px, env(safe-area-inset-right, 0px)); }
.main { padding-block: 8px 32px; }

/* salta al contenuto e striscia di anteprima */
.bv2-salta { position: absolute; left: 12px; top: -60px; z-index: 50; padding: 10px 16px; border-radius: var(--r); background: var(--p); color: var(--on-p); font-weight: 700; text-decoration: none; }
.bv2-salta:focus { top: 12px; }
.bv2-anteprima { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 6px 16px; background: var(--warn-bg); color: var(--warn-ink); font-size: 13px; font-weight: 600; text-align: center; }

/* ---------- icone (sprite Lucide icone.svg, BookingV2Renderer::icona) ---------- */
.ic { width: 1.15em; height: 1.15em; flex: none; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.18em; }
/* Righe allineate in alto (testo su più righe): l icona al centro della prima riga (line-height 1.5). */
.bv2-errore .bv2-avviso .ic, .gst-nota .ic, .bv2-tassa .ic, .where .ic, .pol .ic, .sum-d .ic, .pay .ic, .canc .ic, .warn .ic,
.fld-e .ic, .pay-what .ic, .ck-prova .ic, .bv2-err .ic, .gz-all .ic, .gz-garanzia .ic { margin-top: .175em; }

/* ---------- bottoni ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: var(--r); border: 1px solid transparent; font-weight: 700; font-size: 15px; text-decoration: none; transition: background-color .15s, box-shadow .15s, transform .1s; white-space: nowrap; }
.btn:active { transform: translateY(1px); }
.btn-p { background: var(--p); color: var(--on-p); }
.btn-p:hover { box-shadow: inset 0 0 0 100px rgba(0, 0, 0, .1); }
.btn-p:disabled { background: var(--sunk); color: var(--ink-2); cursor: not-allowed; box-shadow: none; }
.btn-s { background: var(--surface); color: var(--ink); border-color: var(--line-2); }
.btn-s:hover { background: var(--sunk); }
.btn-lg { min-height: 50px; font-size: 16px; padding: 0 22px; }
.btn-block { width: 100%; }
.icb { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: transparent; border: 0; color: var(--ink); font-size: 17px; }
.icb:hover { background: var(--sunk); }
.icb:disabled { color: var(--line-2); cursor: not-allowed; background: none; }

/* ---------- barra dell'hotel ---------- */
.tb { background: var(--surface); border-bottom: 1px solid var(--line); }
.tb-in { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 1160px; margin: 0 auto; padding: 10px max(16px, env(safe-area-inset-right, 0px)) 10px max(16px, env(safe-area-inset-left, 0px)); }
.tb-brand { display: flex; align-items: center; gap: 10px; min-width: 0; color: inherit; text-decoration: none; }
.tb-logo { flex: none; width: auto; max-width: 132px; height: 40px; object-fit: contain; object-position: left center; }
.tb-mono { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--p); color: var(--on-p); font: 600 15px/1 var(--f-d); letter-spacing: .04em; }
.tb-name { display: flex; flex-direction: column; min-width: 0; }
.tb-name strong { font: 700 17px/1.15 var(--f-d); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-name small { color: var(--ink-2); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-logo + .tb-name strong { font-size: 15px; }
.tb-act { flex: none; display: flex; align-items: center; gap: 4px; }
.tb-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 44px; height: 44px; padding: 0 10px; border-radius: 22px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-weight: 600; font-size: 14px; text-decoration: none; cursor: pointer; }
.tb-btn:hover { background: var(--sunk); }
.tb-btn .ic { color: var(--p-ink); }
.tb-txt { display: none; }
.tb-lang { position: relative; }
.tb-lang > summary { list-style: none; }
.tb-lang > summary::-webkit-details-marker { display: none; }
.tb-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 200px; max-height: min(70vh, 420px); overflow-y: auto; margin: 0; padding: 6px; list-style: none; border-radius: var(--r-img); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-2); }
.tb-menu a { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 10px; border-radius: var(--r); color: var(--ink); text-decoration: none; font-size: 15px; }
.tb-menu a:hover { background: var(--sunk); }
.tb-menu a[aria-current="true"] { font-weight: 700; }
.tb-menu .ic { margin-left: auto; color: var(--p-ink); }
.tb-code { display: inline-grid; place-items: center; min-width: 30px; height: 22px; border-radius: 4px; background: var(--sunk); color: var(--ink-2); font-size: 12px; font-weight: 700; }

/* ---------- ricerca: pillola (telefono) e barra (computer) ---------- */
.sticky-search { position: sticky; top: 0; z-index: 10; padding-block: 10px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 92%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(8px); backdrop-filter: saturate(1.4) blur(8px); }
.spill { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 8px 8px 8px 10px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line-2); box-shadow: var(--sh-1); color: var(--ink); text-align: left; }
.spill:hover { border-color: var(--p-line); }
.spill-ic { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--p-soft); color: var(--p-ink); }
.spill-t { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.spill-t strong { font-size: 15px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spill-t small { color: var(--ink-2); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spill-edit { flex: none; padding: 8px 12px; border-radius: 999px; color: var(--p-ink); font-weight: 700; font-size: 14px; }
.sbar { display: none; }

/* ---------- stati dei risultati: vuoto, caricamento, errore ---------- */
.bv2-risultati { min-height: 40vh; scroll-margin-top: 96px; }
.bv2-risultati:focus { outline: none; }
.bv2-stato { display: grid; justify-items: center; gap: 10px; max-width: 46ch; margin: 0 auto; padding: 48px 8px 24px; text-align: center; }
.bv2-stato p { color: var(--ink-2); }
.bv2-vuoto h2 { font: 700 22px/1.2 var(--f-d); }
.bv2-vuoto .btn { margin-top: 10px; }
.bv2-vuoto-ic { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--p-soft); color: var(--p-ink); font-size: 26px; }
.bv2-spinner { width: 36px; height: 36px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--p); animation: bv2-gira .8s linear infinite; }
.bv2-errore { justify-items: center; }
.bv2-errore .bv2-avviso { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r); background: var(--warn-bg); color: var(--warn-ink); font-weight: 600; text-align: left; }
@keyframes bv2-gira { to { transform: rotate(360deg); } }

/* ---------- date alternative nello stato vuoto (pezzo 6.5, BookingV2Renderer::nessunRisultato) ----------
   Proposte: section.bv2-alt-on > ul.bv2-alt > li > button.bv2-alt-b (.bv2-alt-d, -s, -p, -st).
   Contatti (senza proposte): p#bv2-alt-c + ul.bv2-alt-c. Le icone sono maschere CSS in --p-ink (Lucide
   chevron-right, phone, mail, ISC): nessun nodo nel markup, il nome accessibile resta il testo visibile.
   Il fuoco è l anello di .bv2 :focus-visible. Punto di rottura della spec: 720 px di contenitore. */
.bv2 {
  --ic-freccia: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
  --ic-tel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.832 16.568a1 1 0 0 0 1.213-.303l.355-.465A2 2 0 0 1 17 15h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2A18 18 0 0 1 2 4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-.8 1.6l-.468.351a1 1 0 0 0-.292 1.233 14 14 0 0 0 6.392 6.384'/%3E%3C/svg%3E");
  --ic-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7'/%3E%3Crect width='20' height='16' x='2' y='4' rx='2'/%3E%3C/svg%3E");
}
/* Lo stato con proposte o con contatti prende tutta la colonna; il testo resta a misura di lettura. */
.bv2-alt-on, .bv2-stato:has(> .bv2-alt-c) { max-width: none; padding: 28px 0 24px; }
.bv2-alt-on > p, .bv2-stato:has(> .bv2-alt-c) > p { max-width: 52ch; }
/* Elenchi a tutta larghezza dentro la griglia centrata dello stato, testo a sinistra; sul telefono una colonna. */
.bv2-alt, .bv2-alt-c { justify-self: stretch; display: grid; gap: 10px; margin: 6px 0 0; padding: 0; list-style: none; text-align: left; }
/* Proposta (telefono): date in alto a tutta riga, scarto e struttura sotto, prezzo a destra, freccia. */
.bv2-alt-b {
  display: grid; grid-template-columns: minmax(0, 1fr) auto 16px; grid-template-areas: "d d c" "s p c" "st p c";
  align-items: center; column-gap: 12px; row-gap: 2px;
  width: 100%; height: 100%; min-width: 0; min-height: 56px; padding: 12px 12px 12px 16px;
  border: 1px solid var(--line-2); border-radius: var(--r-img); background: var(--surface); color: var(--ink);
  box-shadow: var(--sh-1); text-align: left; overflow-wrap: anywhere; transition: border-color .15s, transform .1s;
}
.bv2-alt-b:active { transform: translateY(1px); }
.bv2-alt-b::after { content: ""; grid-area: c; width: 16px; height: 16px; background: var(--p-ink); -webkit-mask: var(--ic-freccia) center / contain no-repeat; mask: var(--ic-freccia) center / contain no-repeat; }
.bv2-alt-d { grid-area: d; font-size: 15.5px; font-weight: 700; line-height: 1.3; }
.bv2-alt-d time { white-space: nowrap; }
.bv2-alt-s { grid-area: s; color: var(--ink-2); font-size: 13.5px; line-height: 1.35; }
.bv2-alt-st { grid-area: st; min-width: 0; color: var(--ink-2); font-size: 13.5px; line-height: 1.35; overflow-wrap: anywhere; }
.bv2-alt-p { grid-area: p; justify-self: end; align-self: end; font-size: 17px; font-weight: 700; line-height: 1.25; white-space: nowrap; }
@media (hover: hover) { .bv2-alt-b:hover { border-color: var(--p-line); } }
/* Contatti: etichetta, poi una voce per struttura; i pulsanti vanno a capo, mai fuori pagina. */
.bv2-stato > #bv2-alt-c { margin-top: 6px; color: var(--ink); font-size: 14px; font-weight: 600; }
/* Con più strutture l etichetta sta a sinistra, allineata ai nomi sotto. */
.bv2-stato > #bv2-alt-c:has(+ .bv2-alt-c b) { justify-self: stretch; text-align: left; }
.bv2-alt-c { gap: 12px; margin-top: 0; }
.bv2-alt-c li { display: grid; gap: 8px; }
.bv2-alt-c li + li { padding-top: 12px; border-top: 1px solid var(--line); }
.bv2-alt-c b { font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.bv2-vuoto .bv2-alt-c a { justify-content: flex-start; width: 100%; min-width: 0; min-height: 44px; margin-top: 0; padding: 11px 16px; line-height: 1.3; white-space: normal; overflow-wrap: anywhere; text-align: left; }
.bv2-alt-c .btn::before { content: ""; flex: none; width: 18px; height: 18px; background: var(--p-ink); -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
.bv2-alt-c a[href^="tel:"] { --ic: var(--ic-tel); }
.bv2-alt-c a[href^="mailto:"] { --ic: var(--ic-mail); }
/* Computer (da 720 px di contenitore): proposte in schede affiancate, contatti su una riga per struttura.
   .bv2-stato.bv2-alt-on vince sul padding-top: 72px di .bv2-stato da 860 px (stesso valore dei contatti). */
@container bv2 (min-width: 720px) {
  .bv2-stato.bv2-alt-on, .bv2-stato:has(> .bv2-alt-c) { max-width: 760px; padding-top: 56px; }
  .bv2-alt { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-top: 10px; }
  /* Con una o due proposte l elenco si stringe e resta centrato: la scheda non si stira a tutta riga. */
  .bv2-alt:not(:has(> li + li)) { justify-self: center; width: 100%; max-width: 236px; }
  .bv2-alt:has(> li + li):not(:has(> li + li + li)) { justify-self: center; width: 100%; max-width: 484px; }
  .bv2-alt-b { grid-template-columns: minmax(0, 1fr) 16px; grid-template-areas: "d d" "s s" "st st" "p c"; grid-template-rows: auto auto 1fr auto; align-items: start; row-gap: 4px; padding: 16px 14px 14px 16px; }
  .bv2-alt-p { justify-self: start; align-self: end; margin-top: 14px; font-size: 19px; }
  .bv2-alt-b::after { align-self: end; margin-bottom: 4px; }
  /* Una struttura: telefono ed email affiancati e centrati. */
  .bv2-alt-c li { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 10px; }
  .bv2-vuoto .bv2-alt-c a { width: auto; }
  /* Più strutture: una tabella a tre colonne (nome, telefono, email) allineate fra le righe con subgrid. */
  .bv2-alt-c:has(b) { grid-template-columns: minmax(120px, 1fr) auto minmax(0, auto); column-gap: 10px; }
  .bv2-alt-c:has(b) li { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: center; justify-content: stretch; }
  .bv2-vuoto .bv2-alt-c:has(b) a { width: 100%; }
  /* Colonne fisse: con una struttura che ha solo l email la busta resta sotto le altre buste. */
  .bv2-alt-c:has(b) a[href^="tel:"] { grid-column: 2; }
  .bv2-alt-c:has(b) a[href^="mailto:"] { grid-column: 3; }
}

/* ---------- foglio date e ospiti (dialog) ---------- */
dialog.sh { margin: auto 0 0; padding: 0; width: 100%; max-width: 100%; max-height: 92vh; max-height: 92dvh; border: 0; border-radius: 18px 18px 0 0; background: var(--surface); color: var(--ink); box-shadow: var(--sh-2); overflow: hidden; }
dialog.sh[open] { display: flex; flex-direction: column; animation: sheet-in .34s var(--ease); }
dialog.sh::backdrop { background: rgba(10, 14, 18, .5); animation: fade .2s ease-out; }
.sh-form { display: flex; flex-direction: column; min-height: 0; flex: 1; margin: 0; }
.sh-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 10px 8px 20px; border-bottom: 1px solid var(--line); }
.sh-head h2 { font: 700 18px/1.2 var(--f-d); }
.sh-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 14px 20px 20px; }
.sh-foot { flex: none; padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); background: var(--surface); }
@keyframes sheet-in { from { transform: translateY(40px); opacity: 0; } }
@keyframes fade { from { opacity: 0; } }

/* ---------- calendario a due mesi ---------- */
.cal-hint { min-height: 2.6em; margin-bottom: 14px; padding-right: 96px; color: var(--ink-2); font-size: 13.5px; }
.cal-hint strong { color: var(--ink); font-weight: 700; }
.cal-hint.err [data-bv2-avviso] { color: var(--warn-ink); font-weight: 700; }
.cal-hint [data-bv2-avviso] { color: var(--ink); font-weight: 600; }
.cal-leg:not(:empty)::before { content: "· "; }
.low-k { color: var(--ok); font-weight: 700; }
.sh-body { position: relative; }
/* Frecce dei mesi in alto a destra, sulla riga dell'avviso (che lascia loro 96px). */
.cal-nav { position: absolute; top: 6px; right: 10px; display: flex; gap: 2px; }
.cal-ms { display: grid; gap: 18px; }
.cal-ms[aria-busy="true"] .day-p { opacity: .4; }
.cal-m h3 { margin-bottom: 8px; font: 700 16px/1.3 var(--f-d); }
.cal-w, .cal-g { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-w span { padding-bottom: 4px; color: var(--ink-2); font-size: 12px; text-align: center; }
.day { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; height: 50px; min-width: 0; padding: 0; border: 0; border-radius: 0; background: none; color: var(--ink); }
.day-n { font-weight: 700; font-size: 15px; line-height: 1.1; }
.day-p { min-height: 13px; color: var(--ink-2); font-size: 11px; line-height: 1.2; white-space: nowrap; }
.day:not([aria-disabled="true"]):hover .day-n { text-decoration: underline; text-underline-offset: 3px; }
.day.in { background: var(--p-soft); }
.day.ci, .day.co { border-radius: var(--r); background: var(--p); color: var(--on-p); }
.day.ci .day-p, .day.co .day-p { color: inherit; }
.day.sold .day-n { text-decoration: line-through; color: var(--ink-2); }
.day[aria-disabled="true"] { cursor: not-allowed; }
.day.past, .day.oltre { opacity: .38; }
.day.low .day-p { color: var(--ok); font-weight: 700; }
.day.ci.low .day-p, .day.co.low .day-p { color: inherit; }
.day:focus-visible { position: relative; z-index: 1; border-radius: var(--r); outline-offset: -2px; }
/* Arrivo e partenza hanno fondo var(--p): l anello in --p-ink può avere lo stesso colore
   (ColoreBooking dà primario_testo == primario quando il primario passa già AA sul bianco;
   in Notturno oro su oro è circa 1.2:1). --on-p è garantito a 4.5:1 sul primario. */
.day.ci:focus-visible, .day.co:focus-visible { outline-color: var(--on-p); outline-offset: -4px; }

/* ---------- ospiti ---------- */
.gst { display: grid; gap: 4px; margin-top: 20px; padding-top: 12px; border-top: 1px solid var(--line); }
.gst-r { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 8px; }
.gst-r > span { display: flex; flex-direction: column; }
.gst-r small { color: var(--ink-2); font-size: 13px; }
.gst-nota { display: flex; gap: 8px; align-items: flex-start; margin-top: 4px; padding: 10px 12px; border-radius: var(--r); background: var(--p-soft); color: var(--ink); font-size: 13.5px; }
.gst-nota .ic { color: var(--p-ink); }
.stp { flex: none; display: inline-flex; align-items: center; height: 44px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--surface); }
.stp button { display: grid; place-items: center; width: 44px; height: 42px; border: 0; border-radius: var(--r); background: none; color: var(--p-ink); }
.stp button:disabled { color: var(--line-2); cursor: not-allowed; }
.stp button:not(:disabled):hover { background: var(--p-soft); }
.stp output { min-width: 28px; font-weight: 700; text-align: center; }

/* ---------- computer ---------- */
@container bv2 (min-width: 860px) {
  .wrap { padding-inline: 32px; }
  .tb-in { padding: 12px 32px; }
  .tb-logo { max-width: 200px; height: 48px; }
  .tb-txt { display: inline; font-weight: 600; }
  .tb-btn { border-color: transparent; }
  .tb-btn:hover { border-color: var(--line); }
  .spill { display: none; }
  .sbar { display: grid; grid-template-columns: 1fr 1fr 1.3fr auto; gap: 0; padding: 4px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line-2); box-shadow: var(--sh-1); }
  .sbar-f { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: 6px 14px; border: 0; border-right: 1px solid var(--line); border-radius: 8px; background: none; color: var(--ink); text-align: left; }
  .sbar-f:hover { background: var(--sunk); }
  .sbar-f:nth-child(3) { border-right: 0; }
  .sbar-l { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); font-size: 12.5px; font-weight: 600; }
  .sbar-f strong { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
  .sbar-go { min-height: 48px; }
  .bv2-stato { padding-top: 72px; }
}
/* Il foglio sta nello strato superiore: la sua forma segue la finestra, non il contenitore. */
@media (min-width: 860px) {
  dialog.sh { margin: auto; width: min(760px, 92vw); max-height: 86vh; max-height: 86dvh; border-radius: 16px; }
  .cal-ms { grid-template-columns: 1fr 1fr; gap: 32px; }
}

/* ---------- elenco: componenti comuni (BookingV2Renderer) ---------- */
.bv2-elenco { display: grid; gap: 4px; }
.rhead { padding-block: 14px 8px; }
/* Passi della prenotazione: una riga compatta sopra il titolo (sul telefono non spinge giù la prima scheda). */
.bv2 .passi ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; padding: 0; list-style: none; color: var(--ink-2); font-size: 12.5px; line-height: 1.3; }
.passo { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.passo + .passo::before { content: ""; width: 14px; height: 1px; background: var(--line-2); }
.passo-n { display: inline-grid; place-items: center; flex: none; width: 18px; height: 18px; border: 1px solid var(--line-2); border-radius: 50%; font-size: 11px; font-weight: 700; }
.passo-fatto .passo-n { border-color: var(--p-line); color: var(--p-ink); }
.passo-ora { color: var(--ink); font-weight: 700; }
.passo-ora .passo-n { border-color: var(--p); background: var(--p); color: var(--on-p); }
.bv2-elenco > .passi { padding-top: 12px; }
.bv2-elenco > .passi + .rhead { padding-top: 8px; }
.ck > .passi { margin: 10px 0 8px; }
.gz > .passi { display: flex; justify-content: center; margin-bottom: 18px; }
@container bv2 (max-width: 559px) {
  .passo-fatto .passo-t, .passo-poi:not(.passo-dopo) .passo-t { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
}
.rhead-t { font: 700 22px/1.2 var(--f-d); }
.rhead-s { margin-top: 4px; color: var(--ink-2); font-size: 14px; }
.bv2-tassa { display: flex; gap: 8px; align-items: flex-start; margin-top: 10px; color: var(--ink-2); font-size: 13.5px; }
.bv2-tassa .ic { color: var(--p-ink); }
.lchips { display: flex; gap: 8px; overflow-x: auto; margin-inline: -16px; padding: 4px 16px 14px; scrollbar-width: none; }
.lchips::-webkit-scrollbar { display: none; }
.chip { display: inline-flex; align-items: center; gap: 6px; flex: none; min-height: 44px; padding: 0 16px; border-radius: 22px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); font-size: 14px; font-weight: 600; }
.chip .ic { color: var(--p-ink); }
.chip:hover { border-color: var(--p-line); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.chip[aria-pressed="true"] .ic { color: inherit; }
/* filtro per dotazione: «Filtri» e i chip attivi vanno a capo (sono pochi e vanno visti tutti). */
.lfilt { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 4px 0 14px; }
.lchips + .lfilt { padding-top: 0; }
.lf-attivi { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.lf-n { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--ink); color: var(--surface); font-size: 12.5px; font-weight: 700; line-height: 1; }
.lf-chip { gap: 8px; max-width: 100%; padding: 0 12px 0 16px; background: var(--p-soft); border-color: var(--p-line); }
.lf-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lf-chip:hover { border-color: var(--p-ink); }
.lf-chip .ic { color: var(--ink); }
.lf-vuoto { display: grid; justify-items: center; gap: 8px; max-width: 46ch; margin: 0 auto; padding: 32px 8px 40px; text-align: center; }
.lf-vuoto-t { font: 700 20px/1.25 var(--f-d); text-wrap: balance; }
.lf-vuoto-s { color: var(--ink-2); }
.lf-vuoto .btn { margin-top: 8px; }
/* Icona neutra (regola delle icone neutre: l accento resta alle azioni); il cerchio del pezzo 1 resta com era. */
.lf-vuoto .bv2-vuoto-ic { background: var(--sunk); color: var(--ink-2); }
.fl { display: grid; gap: 20px; align-content: start; }
.fl-g { min-width: 0; margin: 0; padding: 0; border: 0; }
.bv2 .fl-gh { margin-bottom: 4px; padding: 0; color: var(--ink); font: 600 14px/1.3 var(--f); }
.fl-l { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); column-gap: 20px; }
.fl-o { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 4px 0; border-bottom: 1px solid var(--line); cursor: pointer; overflow-wrap: anywhere; }
.fl-o .ic { flex: none; color: var(--ink-2); }
.fl-c { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--p); cursor: pointer; }
.fl-c:checked ~ span { font-weight: 600; }
.fl-foot { display: flex; gap: 12px; }
.fl-foot .btn { min-width: 0; padding-inline: 14px; white-space: normal; text-align: center; }
.fl-foot .btn-p { flex: 1 1 auto; }
.cols { display: grid; gap: 20px; }
.list { display: grid; gap: 16px; align-content: start; min-width: 0; }
.side { display: none; }
.bv2 [hidden] { display: none !important; }

/* scheda alloggio */
.alloggio { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: var(--sh-1); }
.al-ph { position: relative; }
.al-body { padding: 14px 16px 6px; }
.nm { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.nm h3 { min-width: 0; font: 700 20px/1.2 var(--f-d); overflow-wrap: anywhere; }
.from { flex: none; display: flex; flex-direction: column; align-items: flex-end; color: var(--ink-2); font-size: 13px; line-height: 1.25; text-align: right; }
.from b { color: var(--ink); font-size: 18px; font-weight: 800; white-space: nowrap; }
.from small { font-size: 12.5px; }
.where { display: flex; align-items: flex-start; gap: 8px; margin-top: 6px; color: var(--ink-2); font-size: 14px; }
.where .ic { color: var(--p-ink); }
.where strong { color: var(--ink); font-weight: 600; }
.facts { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 10px 0 0; padding: 0; list-style: none; font-size: 14px; }
.facts li { display: inline-flex; align-items: center; gap: 7px; }
.facts .ic { color: var(--ink-2); }
.al-desc { margin-top: 8px; font-size: 14px; }
.al-desc > summary { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--p-ink); font-weight: 600; cursor: pointer; list-style: none; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.al-desc > summary::-webkit-details-marker { display: none; }
.al-desc > summary .ic { width: 1em; height: 1em; transition: transform .2s var(--ease); }
.al-desc[open] > summary .ic { transform: rotate(180deg); }
.al-desc-t { max-width: 68ch; padding-bottom: 8px; color: var(--ink-2); }
.al-desc-t p + p, .al-desc-t ul, .al-desc-t ol { margin: 8px 0 0; }
.al-desc-t ul, .al-desc-t ol { padding-left: 20px; }

/* dotazioni (pezzo 2): riga delle principali sotto ospiti e letti, 4 sul telefono e 6 sul computer (dot-pc);
   l elenco completo a gruppi in «Tutte le dotazioni». Icone neutre: l accento resta alle azioni. */
.dot { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 8px 0 0; padding: 0; list-style: none; color: var(--ink-2); font-size: 13.5px; }
.dot li { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.dot .dot-pc { display: none; }
/* «Descrizione» e «Tutte le dotazioni» sulla stessa riga; quello aperto va a tutta larghezza. */
.al-more { display: flex; flex-wrap: wrap; align-items: flex-start; column-gap: 20px; margin-top: 4px; }
.al-more > .al-desc { min-width: 0; margin-top: 0; }
.al-more > .al-desc[open] { flex-basis: 100%; }
.dot-all { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px 20px; padding: 2px 0 12px; }
.bv2 .dot-gh { margin: 0 0 6px; color: var(--ink); font: 600 13.5px/1.3 var(--f); }
.dot-gl { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; color: var(--ink); font-size: 14px; line-height: 1.4; }
.dot-gl li { display: flex; align-items: flex-start; gap: 8px; min-width: 0; overflow-wrap: anywhere; }
.dot-gl .ic { margin-top: .125em; color: var(--ink-2); }

/* galleria */
.gal { position: relative; overflow: hidden; aspect-ratio: 16 / 10; background: var(--sunk); }
.gal img { width: 100%; height: 100%; min-width: 0; object-fit: cover; }
.gal-segnaposto { display: grid; place-items: center; aspect-ratio: 16 / 7; color: var(--line-2); font-size: 34px; }
.gal-b { position: absolute; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .94); color: #1B1F24; box-shadow: 0 2px 8px rgba(0, 0, 0, .22); }
.gal-b:hover { background: #FFFFFF; }
.gal-b:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; box-shadow: 0 0 0 5px #1B1F24; }
.gal-prev { left: 8px; }
.gal-next { right: 8px; }
.gal-n { position: absolute; right: 10px; bottom: 10px; padding: 2px 9px; border-radius: 10px; background: rgba(0, 0, 0, .66); color: #FFFFFF; font-size: 12px; font-weight: 600; }

/* righe tariffa */
.tar-l { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.tar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 12px; align-items: center; padding: 14px 16px; }
.tar + .tar { border-top: 1px solid var(--line); }
.tar-t { grid-column: 1 / -1; min-width: 0; }
.tar-n { font-size: 15.5px; font-weight: 700; overflow-wrap: anywhere; }
.pol { display: grid; gap: 4px; margin: 6px 0 0; padding: 0; list-style: none; font-size: 13.5px; }
.pol li { display: flex; gap: 8px; align-items: flex-start; color: var(--ink-2); }
.pol li.ok { color: var(--ok); font-weight: 600; }
/* Cancellazione (pezzo 2): verde se gratuita (li.ok), il tono «non rimborsabile» se non lo è; gratuita già scaduta neutra. */
.pol li.nr { color: var(--nr); font-weight: 600; }
.pol-d { margin-top: 4px; font-size: 13.5px; }
.pol-d > summary { display: inline-flex; align-items: center; min-height: 44px; color: var(--p-ink); font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.pol-d > p { max-width: 68ch; padding-bottom: 4px; color: var(--ink-2); overflow-wrap: anywhere; }
.tar-p { display: flex; flex-direction: column; line-height: 1.2; }
.tar-p b { font-size: 20px; font-weight: 800; white-space: nowrap; }
.tar-p small { color: var(--ink-2); font-size: 13px; }
.tar-p .tar-pn { margin-top: 2px; }
.tar-a { display: flex; justify-content: flex-end; }
.tar-b { min-width: 112px; }

/* riepilogo */
.sum { display: grid; gap: 14px; }
.sum-scelta { display: grid; gap: 14px; }
.sum-h { font: 700 19px/1.2 var(--f-d); }
.sum-d { display: flex; gap: 10px; color: var(--ink-2); font-size: 14px; }
.sum-d strong { color: var(--ink); }
.sum-d .ic { color: var(--p-ink); }
.empty { display: flex; gap: 10px; align-items: center; padding: 14px; border-radius: var(--r); background: var(--sunk); color: var(--ink-2); font-size: 14px; }
.cline { padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.cline-t { display: flex; flex-direction: column; min-width: 0; color: var(--ink-2); font-size: 13px; }
.cline-t strong { color: var(--ink); font-size: 15px; }
.cline-t small { font-size: 13px; }
.pbrk { display: grid; gap: 8px; margin: 0; font-size: 14px; }
.pbrk div { display: flex; justify-content: space-between; gap: 12px; }
.pbrk dt small { display: block; max-width: 28ch; color: var(--ink-2); font-size: 12.5px; }
.pbrk dd { margin: 0; white-space: nowrap; }
.pbrk-tot { padding-top: 10px; border-top: 1px solid var(--line-2); font-size: 18px; font-weight: 800; }
.pbrk-tot small { font-weight: 400; }
/* «Paghi ora» e «In struttura» sotto il totale: la ripartizione, più piccola del totale. */
.pbrk-ora, .pbrk-resto { color: var(--ink-2); }
.pbrk-ora dd, .pbrk-resto dd { color: var(--ink); font-weight: 700; }
.pay { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: var(--r); background: var(--p-soft); color: var(--ink); font-size: 14px; font-weight: 600; }
.pay .ic { color: var(--p-ink); }
/* Cancellazione della scelta (riepilogo, conferma): stessi toni di stato della riga tariffa, senza fondo. */
.canc { display: flex; gap: 8px; align-items: flex-start; color: var(--ink-2); font-size: 14px; }
.canc.ok { color: var(--ok); font-weight: 600; }
.canc.nr { color: var(--nr); font-weight: 600; }

/* barra del prezzo: in fondo alla finestra mentre si scorre l'elenco */
.bbar { position: sticky; bottom: 0; z-index: 8; display: flex; align-items: center; gap: 12px; margin: 16px -16px 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); background: var(--surface); box-shadow: 0 -6px 20px rgba(0, 0, 0, .08); animation: bar-in .32s var(--ease); }
.bbar-t { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.bbar-t small { color: var(--ink-2); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bbar-t strong { font-size: 20px; font-weight: 800; }
@keyframes bar-in { from { transform: translateY(100%); } }

@container bv2 (min-width: 860px) {
  .rhead-t { font-size: 26px; }
  .lchips { margin-inline: 0; padding-inline: 0; flex-wrap: wrap; }
  .cols { grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; align-items: start; }
  .side { display: block; position: sticky; top: 92px; padding: 20px; border: 1px solid var(--line); border-radius: var(--r-img); background: var(--surface); box-shadow: var(--sh-1); }
  .bbar { display: none; }
  .alloggio { display: grid; grid-template-columns: 300px minmax(0, 1fr); }
  .al-ph .gal { height: 100%; min-height: 220px; aspect-ratio: auto; }
  .tar-l { grid-column: 1 / -1; }
  .al-body { padding: 16px 20px 8px; }
  .dot .dot-pc { display: inline-flex; }
  .al-dot-tel { display: none; }
  .tar { grid-template-columns: minmax(0, 1fr) 150px 130px; padding: 12px 20px; }
  .tar-t { grid-column: auto; }
}

/* ---------- impaginazioni ---------- */
/* [data-layout="equilibrio"], [data-layout="tariffario"], [data-layout="vetrina"], [data-layout="galleria"] */

/* comuni alle righe tariffa: numero di alloggi, riga scelta, avviso posti */
.tar-a { gap: 6px; }
.tar-a:has(.tar-q) { flex-direction: column; align-items: stretch; }
.tar-q { min-height: 44px; min-width: 112px; padding: 0 34px 0 12px; border: 1px solid var(--line-2); border-radius: var(--r); color: var(--ink); font-size: 15px; font-weight: 600; -webkit-appearance: none; appearance: none; cursor: pointer;
  /* freccia disegnata con due gradienti: niente immagini fuori da fonts/ */
  background: linear-gradient(45deg, transparent 50%, var(--ink-2) 50%) no-repeat calc(100% - 19px) 50% / 6px 6px,
              linear-gradient(135deg, var(--ink-2) 50%, transparent 50%) no-repeat calc(100% - 13px) 50% / 6px 6px,
              var(--surface); }
.tar-q:hover { border-color: var(--p-line); }
.tar.on { background: var(--p-soft); }
.tar { transition: background-color .2s var(--ease); }
/* Carrello (pezzo 4, mockup approvato 2026-10-28-booking-v2-carrello-mockup.html): «Aggiungi», poi il contatore − n + */
.tar-add { min-width: 132px; }
.tar-add .ic { width: 1.05em; height: 1.05em; stroke-width: 2.25; }
.tar-cnt { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.tar-cnt .stp { border-color: var(--p-line); }
.tar.on .stp { background: var(--surface); }
.tar-max { max-width: 22ch; color: var(--ink-2); font-size: 12.5px; line-height: 1.35; text-align: right; }
.tar-pn { color: var(--ink-2); }
.al-hint { display: flex; gap: 8px; align-items: flex-start; margin-top: 8px; color: var(--ink-2); font-size: 13.5px; }
.al-hint .ic { margin-top: .175em; }
.warn { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: var(--r); background: var(--warn-bg); color: var(--warn-ink); font-size: 13.5px; font-weight: 600; }
.bbar { flex-wrap: wrap; }
.bbar .warn { flex-basis: 100%; order: 3; padding: 6px 10px; font-size: 12.5px; }

/* Equilibrio: foto della struttura in apertura (copertina + prima foto di due alloggi) */
.apertura { display: grid; gap: 6px; height: 132px; margin-top: 12px; overflow: hidden; border-radius: var(--r-img); background: var(--sunk); }
.apertura img { width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: cover; }
.apertura[data-n="2"] { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.apertura[data-n="3"] { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); }
.apertura[data-n="3"] img:first-child { grid-row: span 2; }

/* Tariffario: le tariffe di ogni alloggio in tabella. Sul telefono ogni riga è un blocco (i ruoli
   ARIA nel markup tengono la tabella), l'intestazione resta per i lettori di schermo. */
.bv2[data-layout="tariffario"] .al-ph { padding: 12px 12px 0; }
.bv2[data-layout="tariffario"] .al-ph .gal { aspect-ratio: 16 / 9; border-radius: 6px; }
.bv2[data-layout="tariffario"] .nm h3 { color: var(--p-ink); }
.tt-w { border-top: 1px solid var(--line); }
.tt { width: 100%; border-collapse: collapse; }
.tt, .tt tbody { display: block; }
.tt-h { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.tt tr.tar { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "t t" "q q" "p a"; gap: 10px 12px; align-items: center; padding: 14px 16px; }
.tt tr.tar + tr.tar { border-top: 1px solid var(--line); }
.tt th, .tt td { padding: 0; text-align: left; font-weight: inherit; }
.tt-t { grid-area: t; min-width: 0; }
.tt-p { grid-area: p; }
.tt-q { grid-area: q; }
/* «1 alloggio» fisso: sul telefono lo dice già il prezzo; la cella resta per i lettori di schermo (colonne allineate). */
.tt-q:not(:has(select)) { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tt-q .tar-q { width: 100%; min-width: 0; }
.tt tr.tar:not(:has(select)) { grid-template-areas: "t t" "p a"; }
.tt-a { grid-area: a; display: flex; justify-content: flex-end; }
.tar-q-f { color: var(--ink-2); font-size: 14px; }

@container bv2 (min-width: 860px) {
  .apertura { height: 300px; gap: 8px; margin-top: 20px; }
  .tar-a:has(.tar-q) { justify-content: center; }
  .tar .tar-a .tar-add { width: 100%; }
  .tar-l .tar-cnt { align-items: stretch; }
  .tar-l .tar-cnt .stp { justify-content: space-between; }
  /* colonna della scelta larga quanto «3 accommodations» nel selettore */
  .tar-l .tar { grid-template-columns: minmax(0, 1fr) 140px 176px; }

  .bv2[data-layout="tariffario"] .alloggio { grid-template-columns: 260px minmax(0, 1fr); }
  .bv2[data-layout="tariffario"] .al-ph { padding: 16px 0 16px 16px; }
  .bv2[data-layout="tariffario"] .al-ph .gal { height: auto; min-height: 0; aspect-ratio: 4 / 3; }
  .tt-w { grid-column: 1 / -1; }
  .tt { display: table; table-layout: fixed; }
  .tt tbody { display: table-row-group; }
  .tt-h { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; white-space: normal; display: table-header-group; }
  .tt-h th { padding: 8px 16px; background: var(--p-soft); color: var(--ink); font-size: 13px; font-weight: 700; }
  .tt-h th:nth-child(2) { width: 140px; }
  .tt-h th:nth-child(3) { width: 176px; }
  .tt tr.tar { display: table-row; }
  .tt tr.tar > * { padding: 14px 16px; vertical-align: top; border-top: 1px solid var(--line); }
  .tt tr.tar > .tt-t { padding-left: 20px; }
  .tt tr.tar > .tt-q { padding-right: 20px; }
  .tt tr.tar > .tt-q:not(:has(select)) { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; white-space: normal; padding-top: 18px; }
  .tt-c .tt-q { min-width: 0; }
}

/* Vetrina: ogni tariffa è una scheda con il prezzo a notte grande (mockup: expedia). Sul telefono le
   schede scorrono di lato e la successiva si intravede; sul computer stanno in griglia sotto l'alloggio.
   Niente riepilogo a lato: la barra del prezzo resta in basso anche sul computer. */
.apertura-v { margin-inline: -16px; border-radius: 0; }
.ex-grid { display: grid; gap: 18px; }
.ex-w { padding: 2px 16px 16px; }
.ex-h { margin: 6px 0 0; font: 800 15px/1.3 var(--f); }
.ex-rates { display: grid; grid-auto-flow: column; grid-auto-columns: 82%; gap: 10px; margin: 0 -16px; padding: 16px 16px 8px; list-style: none; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
.bv2 .tar.ex-rate { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 10px; min-width: 0; padding: 16px 14px 14px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--surface); scroll-snap-align: start; }
.bv2 .tar.ex-rate + .tar.ex-rate { border-top: 1px solid var(--line-2); }
.bv2 .tar.ex-rate.on { border-color: var(--p); box-shadow: 0 0 0 1px var(--p); background: var(--p-soft); }
.ex-best { position: absolute; top: -11px; left: 12px; padding: 2px 8px; border-radius: 6px; background: var(--p); color: var(--on-p); font-size: 12px; font-weight: 700; line-height: 1.5; }
.ex-rate .tar-n { font-size: 16px; }
.ex-pr { display: flex; flex-direction: column; margin-top: auto; padding-top: 10px; border-top: 1px dashed var(--line-2); }
.ex-delta { min-height: 19px; color: var(--ink-2); font-size: 12.5px; font-weight: 600; }
.ex-pn { line-height: 1.1; }
.ex-pn b { font-size: 26px; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; }
.ex-pn small { color: var(--ink-2); font-size: 13px; }
.ex-pr .tar-p { display: block; margin-top: 4px; color: var(--ink-2); font-size: 13px; }
.ex-pr .tar-p b { color: var(--ink); font-size: 13px; font-weight: 700; }
.ex-pr .tar-p b::after { content: " "; }
.ex-pr .tar-p small { font-size: 13px; }
.bv2 .ex-rate .tar-a { flex-direction: column; align-items: stretch; }
.ex-rate .tar-add, .ex-rate .tar-q { width: 100%; min-width: 0; }
.ex-rate .tar-cnt { align-items: stretch; }
.ex-rate .tar-cnt .stp { justify-content: space-between; }
.ex-rate .tar-max { max-width: none; text-align: left; }
/* Righe condivise fra le schede (subgrid): condizioni, prezzo e scelta allineati anche quando una
   scheda ha il selettore degli alloggi e un'altra no. */
@supports (grid-template-rows: subgrid) {
  .ex-rates { grid-template-rows: repeat(3, auto); }
  .bv2 .tar.ex-rate { display: grid; grid-template-columns: minmax(0, 1fr); grid-row: span 3; grid-template-rows: subgrid; row-gap: 10px; }
  .ex-rate .ex-pr { margin-top: 0; }
  .bv2 .ex-rate .tar-a { align-self: end; }
}

/* Galleria: foto grandi e poche parole (mockup: airbnb); la tariffa si sceglie nella scheda dell'alloggio
   (dialog). Il nome è un pulsante che copre tutta la scheda. */
.apertura.apertura-g { height: auto; aspect-ratio: 5 / 2; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); margin-inline: -16px; border-radius: 0; }
.apertura-g img:not(:first-child) { display: none; }
.apertura-g img:first-child { grid-row: auto; }
.ab-grid { gap: 26px; }
.ab-room { position: relative; display: grid; gap: 10px; min-width: 0; }
.ab-ph { position: relative; overflow: hidden; aspect-ratio: 3 / 2; border-radius: 14px; background: var(--sunk); }
.ab-ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.ab-ph .gal-segnaposto { height: 100%; aspect-ratio: auto; }
.ab-sel { position: absolute; top: 12px; right: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; background: var(--p); color: var(--on-p); font-size: 13px; font-weight: 700; box-shadow: 0 2px 8px rgba(0, 0, 0, .18); }
.ab-nf { position: absolute; right: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 10px; background: rgba(0, 0, 0, .66); color: #FFFFFF; font-size: 12px; font-weight: 600; }
.ab-t { display: grid; gap: 2px; color: var(--ink-2); font-size: 14.5px; }
.ab-t h3 { color: var(--ink); font: 700 17px/1.3 var(--f-d); overflow-wrap: anywhere; }
.ab-card { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; }
.ab-card::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 14px; }
.ab-card:focus-visible { outline: none; }
.ab-card:focus-visible::after { outline: 2px solid var(--p-ink); outline-offset: 4px; }
.ab-p { margin-top: 2px; color: var(--ink); }
.ab-p b { font-weight: 800; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
@media (hover: hover) {
  .ab-room:hover .ab-ph img { transform: scale(1.03); }
  .ab-room:hover h3 { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
}
/* scheda dell'alloggio (dialog nello strato superiore: forma dalla finestra) */
.rs-ph { margin: -14px -20px 14px; }
.rs-ph .gal { aspect-ratio: 16 / 10; }
.rs-ph .gal-segnaposto { aspect-ratio: 16 / 7; }
.rs-desc { margin-top: 12px; max-width: 62ch; font-size: 14.5px; }
.rs .rs-h { margin: 22px 0 8px; font: 700 16px/1.3 var(--f-d); }
.rs-dot .dot-all { padding-bottom: 0; }
.rs-rates { margin-inline: -20px; }
.sh-alloggio .sh-foot { display: flex; }

@container bv2 (min-width: 600px) {
  .ab-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 20px; }
  .ab-ph { aspect-ratio: 4 / 3; }
}

@container bv2 (min-width: 860px) {
  .apertura-v { margin-inline: 0; border-radius: var(--r-img); }
  .ex-grid { gap: 22px; }
  .bv2[data-layout="vetrina"] .alloggio { grid-template-columns: 340px minmax(0, 1fr); }
  .bv2[data-layout="vetrina"] .al-ph .gal { min-height: 240px; }
  .ex-w { grid-column: 1 / -1; padding: 14px 20px 20px; }
  .ex-rates { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: none; grid-auto-columns: auto; gap: 14px; margin: 0; padding: 18px 0 0; overflow: visible; }
  /* barra in basso anche sul computer, larga quanto la finestra, contenuto allineato all'elenco */
  .bv2[data-layout="vetrina"] .bbar { display: flex; margin-inline: calc(50% - 50cqi); padding-inline: max(32px, calc(50cqi - 548px)); }
  .bv2[data-layout="vetrina"] .bbar-t { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; }
  .bv2[data-layout="vetrina"] .bbar-t strong { order: -1; font-size: 22px; }
  .bv2[data-layout="vetrina"] .bbar .btn { min-width: 220px; }

  .apertura.apertura-g { aspect-ratio: auto; height: 380px; margin-inline: 0; border-radius: var(--r-img); grid-template-rows: repeat(2, minmax(0, 1fr)); }
  .apertura-g img:not(:first-child) { display: block; }
  .apertura-g img:first-child { grid-row: span 2; }
  .apertura-g[data-n="2"] { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  .apertura-g[data-n="2"] img { grid-row: span 2; }
  .apertura-g[data-n="3"] { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  .apertura-g[data-n="4"], .apertura-g[data-n="5"] { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); }
  .apertura-g[data-n="4"] img:nth-child(4) { grid-column: span 2; }
  .ab-grid { gap: 32px 22px; }
  .ab-t h3 { font-size: 18px; }
}
@media (min-width: 860px) {
  dialog.sh-filtri { width: min(640px, 92vw); }
  dialog.sh-alloggio { width: min(720px, 92vw); }
  .rs-ph { margin: -14px -20px 16px; }
  .rs-ph .gal { aspect-ratio: 16 / 9; }
}

/* ---------- passo dati: dati dell'ospite, extra e invio (mockup R.checkout) ---------- */
/* Titoli e paragrafi con .ck davanti: «.bv2 h1/h2/p { margin: 0 }» pesa più di una classe sola. */
.ck { padding-block: 8px 24px; }
.lnk { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 4px; margin-left: -4px; border-radius: var(--r); color: var(--p-ink); font-weight: 700; text-decoration: none; }
.lnk:hover { text-decoration: underline; }
.ck .ck-title { margin: 4px 0 14px; font: 700 26px/1.2 var(--f-d); }
.ck .ck-p { max-width: 60ch; margin: 4px 0 20px; color: var(--ink-2); }
.ck-grid { display: grid; gap: 22px; }
.ck-side .sum { padding: 16px; border: 1px solid var(--line); border-radius: var(--r-img); background: var(--surface); }
.ck-form { margin: 0; min-width: 0; }
.ck .ck-h { margin: 30px 0 12px; font: 700 19px/1.25 var(--f-d); }
.ck .ck-form > .ck-h:first-of-type { margin-top: 0; }
.fgrid { display: grid; gap: 16px; }
.fld { display: grid; gap: 6px; align-content: start; min-width: 0; }
.fld label { font-weight: 650; font-size: 14px; }
.fld label small { font-weight: 400; color: var(--ink-2); }
.fld input, .fld textarea, .fld select, .ck-ex select { width: 100%; min-height: 48px; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--surface); color: var(--ink); font-size: 16px; }
.fld textarea { resize: vertical; min-height: 96px; }
.fld input:focus-visible, .fld textarea:focus-visible, .fld select:focus-visible, .ck-ex select:focus-visible { outline: 2px solid var(--p-ink); outline-offset: 0; border-color: transparent; }
.fld input[aria-invalid="true"] { border-color: var(--urg); box-shadow: 0 0 0 1px var(--urg); }
.fld-e { display: flex; gap: 6px; align-items: flex-start; color: var(--urg); font-size: 13.5px; font-weight: 600; }
.fld-e[hidden] { display: none; }
.fld-h { color: var(--ink-2); font-size: 13px; }
.ck-ex { display: grid; margin: 0; padding: 0; list-style: none; border: 1px solid var(--line); border-radius: var(--r-img); background: var(--surface); }
.ck-ex-r { display: flex; align-items: center; gap: 14px; padding: 12px 14px; }
.ck-ex-r + .ck-ex-r { border-top: 1px solid var(--line); }
.ck-ex-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ck-ex-t label { font-size: 15px; }
.ck-ex-t small { color: var(--ink-2); font-size: 13px; }
.ck-ex-p { color: var(--ink-2); font-size: 13.5px; }
.ck-ex select { flex: none; width: 84px; }
.pay-what { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r); background: var(--p-soft); font-size: 14px; }
.pay-what .ic { color: var(--p-ink); }
.pay-what strong { display: block; margin-bottom: 2px; font-size: 15px; }
.pay-what-t { flex: 1; min-width: 0; display: grid; gap: 10px; }
.pay-what-t p { margin: 0; }
.pay-split { padding-top: 10px; border-top: 1px solid var(--p-line); }
.pay-split:not(:has(> div:not([hidden]))) { display: none; }
.ck .ck-prova { display: flex; gap: 8px; align-items: flex-start; margin-top: 16px; padding: 10px 12px; border-radius: var(--r); background: var(--warn-bg); color: var(--warn-ink); font-size: 14px; font-weight: 600; }
.ck-go { margin-top: 20px; }
/* Riga legale prima dell'invio: i due pulsanti hanno l'aspetto di link e aprono un dialog di testo. */
.ck .ck-legal { margin: 16px 0 0; color: var(--ink-2); font-size: 13.5px; line-height: 1.5; }
.ck-legal + .ck-go { margin-top: 12px; }
.lnk-in { display: inline; margin: 0; padding: 0; border: 0; background: none; color: var(--p-ink); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.lnk-in:hover { text-decoration-thickness: 2px; }
/* Pezzo 6: casella facoltativa del promemoria, ultima riga dei dati dell'ospite. Un filo la separa dai campi (è un
   consenso, non un dato); frase lunga a peso normale, la casella sulla prima riga, la nota allineata al testo. */
.ck-pm { gap: 6px; padding-top: 16px; border-top: 1px solid var(--line); }
.fld .ck-pm-l { display: flex; gap: 12px; align-items: flex-start; min-height: 24px; padding: 2px 0; color: var(--ink); font-size: 14.5px; font-weight: 400; line-height: 1.45; cursor: pointer; overflow-wrap: anywhere; }
/* .fld input darebbe alla casella la forma di un campo di testo: torna la casella da 20px di .fl-c. */
.ck-pm .ck-pm-l .fl-c { width: 20px; height: 20px; min-height: 0; margin: .05em 0 0; padding: 0; border: 0; border-radius: 0; background: none; }
.ck-pm-l .fl-c:checked ~ span { font-weight: inherit; }
.ck-pm .fl-c:focus-visible { outline: 2px solid var(--p-ink); outline-offset: 2px; }
.ck-pm .fld-h { margin: 0; padding-left: 32px; line-height: 1.5; overflow-wrap: anywhere; }
.sh-testo-t { display: grid; gap: 12px; align-content: start; font-size: 14.5px; overflow-wrap: anywhere; }
.sh-testo-t p { margin: 0; max-width: 68ch; }
.sh-testo-t .pol { margin: 0; }
.sh-testo-t h3, .sh-testo-t h4 { margin: 6px 0 0; max-width: 68ch; font-weight: 700; line-height: 1.3; }
.sh-testo-t h3 { font-size: 16px; }
.sh-testo-t h4 { font-size: 15px; }
.sh-testo-t ul, .sh-testo-t ol { margin: 0; padding-left: 1.4em; max-width: 68ch; }
.sh-testo-t li + li { margin-top: 4px; }
.sh-testo-t a { color: var(--p-ink); text-decoration: underline; text-underline-offset: 3px; }
.sh-testo-t a:hover { text-decoration-thickness: 2px; }
.bv2-err { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 18px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--urg) 35%, transparent); border-radius: var(--r); background: var(--urg-bg); color: var(--ink); font-weight: 600; }
.bv2-err .ic { color: var(--urg); }
.bv2-err:focus { outline: none; }
.bv2-err:focus-visible { outline: 2px solid var(--urg); outline-offset: 2px; }
.bv2-nota { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 18px; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--sunk); color: var(--ink); font-weight: 600; }
.bv2-nota p { margin: 0; }
.bv2-nota .ic { color: var(--ink-2); margin-top: .175em; }
.bv2-nota:focus { outline: none; }
.bv2-nota:focus-visible { outline: 2px solid var(--ink-2); outline-offset: 2px; }
@container bv2 (min-width: 600px) {
  .fgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fld.w2 { grid-column: span 2; }
}
@container bv2 (min-width: 860px) {
  .ck .ck-title { font-size: 30px; }
  .ck-grid { grid-template-columns: minmax(0, 1fr) 360px; gap: 40px; align-items: start; }
  .ck-side { grid-column: 2; grid-row: 1; position: sticky; top: 20px; }
  .ck-side .sum { padding: 20px; box-shadow: var(--sh-1); }
  .ck-form { grid-column: 1; grid-row: 1; max-width: 640px; }
  .ck-go { width: auto; padding-inline: 32px; }
}

/* ---------- conferma (grazie.php, Task 17) ---------- */
.gz { padding-block: 20px 4px; }
.gz-top { display: grid; justify-items: center; gap: 8px; padding-bottom: 24px; text-align: center; }
.gz-ok { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--p); color: var(--on-p); font-size: 28px; box-shadow: 0 6px 18px color-mix(in srgb, var(--p) 30%, transparent); animation: gz-pop .4s cubic-bezier(.2, .8, .2, 1) both; }
.bv2 .gz-top h1 { margin-top: 6px; font: 700 26px/1.2 var(--f-d); }
.gz-lead { max-width: 46ch; color: var(--ink-2); }
.bv2 .gz-code { margin-top: 8px; padding: 8px 16px; border-radius: 999px; background: var(--sunk); color: var(--ink-2); font-size: 14px; }
.gz-code strong { color: var(--ink); font-size: 16px; letter-spacing: .04em; overflow-wrap: anywhere; }
.gz-note { max-width: 46ch; color: var(--ink-2); font-size: 13.5px; }
/* Icona in linea col testo centrato: su due righe resta accanto alla prima parola, non sul bordo.
   L indirizzo va a capo intero; si spezza solo se da solo non sta in una riga. */
.gz-mail { text-align: center; }
.gz-mail-a { display: inline-block; max-width: 100%; overflow-wrap: anywhere; }
.gz-mail .ic { margin-right: 6px; color: var(--p-ink); }
.gz-pbrk { margin-top: -6px; }
.gz-pbrk .pbrk-tot { font-size: 17px; }
/* Pezzo 3: la carta a garanzia lasciata (nessun addebito ora), sotto gli importi; come la riga «paghi» del passo dati. */
.gz-garanzia { display: flex; gap: 8px; align-items: flex-start; min-width: 0; padding: 10px 12px; border-radius: var(--r); background: var(--p-soft); color: var(--ink); font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.gz-garanzia .ic { color: var(--p-ink); }
.gz-grid { display: grid; gap: 16px; }
.gz-card { display: grid; gap: 14px; align-content: start; min-width: 0; padding: 18px; border: 1px solid var(--line); border-radius: var(--r-img); background: var(--surface); }
.gz-card h2 { display: flex; gap: 10px; align-items: center; font: 700 18px/1.25 var(--f-d); }
.gz-card h2 .ic { color: var(--p-ink); }
.gz-dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; margin: 0; }
.gz-dl dt { color: var(--ink-2); font-size: 13px; }
.gz-dl dd { margin: 0; font-weight: 700; }
.gz-h3 { padding-top: 14px; border-top: 1px solid var(--line); color: var(--ink-2); font: 600 13px/1.3 var(--f); }
.bv2 .gz-all { display: grid; gap: 8px; margin: -6px 0 0; padding: 0; list-style: none; }
.gz-all li { display: flex; gap: 10px; align-items: flex-start; min-width: 0; overflow-wrap: anywhere; }
.gz-all .ic { color: var(--p-ink); }
/* Pezzo 4: un blocco per alloggio (tipologia · tariffa, poi trattamento, ospiti, struttura) col suo prezzo. */
.gz-all-t { display: grid; gap: 2px; flex: 1; min-width: 0; }
.gz-all-t small { color: var(--ink-2); font-size: 13px; }
.gz-all-p { flex: none; font-weight: 700; white-space: nowrap; }
.gz-act { display: flex; flex-wrap: wrap; gap: 8px; }
.gz-act .btn { white-space: normal; }
.gz-addr { display: grid; gap: 10px; min-width: 0; }
.gz-addr + .gz-addr { padding-top: 14px; border-top: 1px solid var(--line); }
.gz-addr p { display: grid; gap: 2px; overflow-wrap: anywhere; }
.gz-addr p span { color: var(--ink-2); }
.gz-ci { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; align-items: center; padding: 16px 18px; border-radius: var(--r-img); background: var(--p-soft); }
.gz-ci-ic { grid-row: span 2; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--surface); color: var(--p-ink); }
.gz-ci h2 { font: 700 17px/1.25 var(--f-d); }
.gz-p { max-width: 62ch; color: var(--ink); font-size: 14.5px; }
.bv2 .gz-nuova { display: flex; justify-content: center; margin: 28px 0 0; }
.bv2 .gz-stato h1 { font: 700 24px/1.2 var(--f-d); }
@keyframes gz-pop { from { transform: scale(.85); opacity: 0; } }
@container bv2 (min-width: 860px) {
  .gz { padding-top: 36px; }
  .bv2 .gz-top h1 { font-size: 32px; }
  .gz-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 20px; max-width: 960px; margin: 0 auto; }
  .gz-ci { grid-column: 1 / -1; }
}

/* ---------- informazioni utili per struttura (pezzo 2, Task 15) ----------
   Un blocco piatto (filo, niente ombra: il riepilogo resta il pezzo che conta). Sta sotto l elenco sul telefono e
   sul computer, in tutte le impaginazioni (Ruling 6); sul computer le strutture si affiancano e la colonna destra
   resta solo del riepilogo sticky. Icone neutre: l accento resta sulle azioni. */
.iu { display: grid; gap: 14px; align-content: start; min-width: 0; padding: 16px; border: 1px solid var(--line); border-radius: var(--r-img); background: var(--surface); }
.bv2 .iu-h { font: 700 19px/1.2 var(--f-d); }
.iu-s { display: grid; gap: 8px; align-content: start; min-width: 0; }
/* Le parti di una frase («Check-in dalle 14:00 alle 20:00 · Check-out entro le 10:00») vanno a capo intere, non a «Check-». */
.iu-p { display: inline-block; }
/* Filo solo fra parti visibili: una parte nascosta dal chip della struttura non lascia il filo alla successiva. */
.iu-s:not([hidden]) ~ .iu-s:not([hidden]) { padding-top: 14px; border-top: 1px solid var(--line); }
.bv2 .iu-n { color: var(--ink); font: 600 15px/1.3 var(--f); overflow-wrap: anywhere; }
.iu-l, .bv2 .gz-info { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; font-size: 14.5px; line-height: 1.4; }
.iu-l li, .gz-info li { display: flex; gap: 10px; align-items: flex-start; min-width: 0; overflow-wrap: anywhere; }
.iu-l .ic, .gz-info .ic { flex: none; margin-top: .1em; color: var(--ink-2); }
.iu-nota { display: block; margin-top: 2px; color: var(--ink-2); font-size: 13.5px; }
.ex-grid + .iu { margin-top: 20px; }
.sum-ci { font-size: 13.5px; }
.bv2 .gz-info { gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 14px; }
/* Struttura senza nome, indirizzo e telefono: le info stanno da sole, senza il filo di separazione in alto. */
.bv2 .gz-addr > .gz-info:first-child { padding-top: 0; border-top: 0; }
@container bv2 (min-width: 860px) {
  /* Ruling 6: le info stanno sotto l elenco anche qui; la colonna destra è solo del riepilogo, sticky su due righe. */
  .cols-iu { grid-template-rows: auto 1fr; row-gap: 0; }
  .cols-iu > .list { grid-column: 1; grid-row: 1; }
  .cols-iu > .iu { grid-column: 1; grid-row: 2; }
  .cols-iu > .side { grid-column: 2; grid-row: 1 / span 2; }
  .ex-grid + .iu, .cols-iu > .iu { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px 40px; margin-top: 28px; padding: 20px 24px; }
  .ex-grid + .iu .iu-h, .cols-iu > .iu .iu-h { grid-column: 1 / -1; }
  .ex-grid + .iu .iu-s:not([hidden]) ~ .iu-s:not([hidden]), .cols-iu > .iu .iu-s:not([hidden]) ~ .iu-s:not([hidden]) { padding-top: 0; border-top: 0; }
  .ex-grid + .iu .iu-s:only-of-type .iu-l, .cols-iu > .iu .iu-s:only-of-type .iu-l { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); column-gap: 32px; }
}

/* ---------- link all ospite: pagare la penale o lasciare una nuova carta (carta.php, pezzo 3 Task 7) ----------
   Una colonna stretta, la stessa scheda della conferma: in alto l icona e la richiesta, poi il riepilogo come una
   ricevuta (righe con filo, l importo in grande in fondo), il pulsante a tutta larghezza e i contatti dell hotel. */
.bv2 .ct { display: grid; gap: 16px; max-width: 560px; padding-top: 24px; }
.ct-box { display: grid; gap: 22px; min-width: 0; padding: 24px 18px 20px; border: 1px solid var(--line); border-radius: var(--r-img); background: var(--surface); box-shadow: var(--sh-1); }
.ct-top { display: grid; justify-items: center; gap: 10px; text-align: center; }
.ct-ic { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; font-size: 24px; }
.ct-ic-attesa { background: var(--sunk); color: var(--ink-2); }
.ct-ic-ok { background: var(--p); color: var(--on-p); box-shadow: 0 6px 18px color-mix(in srgb, var(--p) 30%, transparent); animation: gz-pop .4s var(--ease) both; }
.ct-ic-avviso { background: var(--warn-bg); color: var(--warn-ink); }
.bv2 .ct-top h1 { margin-top: 4px; font: 700 24px/1.2 var(--f-d); }
.ct-lead { max-width: 44ch; color: var(--ink-2); }
.bv2 .ct-dl { display: grid; margin: 0; border-top: 1px solid var(--line); }
.ct-dl > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; min-width: 0; padding: 12px 0; border-bottom: 1px solid var(--line); }
.ct-dl dt { flex: none; color: var(--ink-2); font-size: 14px; }
.ct-dl dd { min-width: 0; margin: 0; font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.ct-dl > .ct-tot { padding-top: 16px; border-bottom: 0; }
.ct-tot dt { color: var(--ink); font-size: 15px; font-weight: 600; }
.bv2 .ct-tot dd { font: 700 28px/1.1 var(--f); letter-spacing: -.01em; }
.ct-form { display: grid; gap: 12px; }
.ct-form .btn { white-space: normal; text-align: center; }
.ct-form .btn[aria-busy="true"] { cursor: progress; box-shadow: inset 0 0 0 100px rgba(0, 0, 0, .14); }
.ct-nota { display: flex; gap: 8px; align-items: flex-start; color: var(--ink-2); font-size: 13.5px; }
.ct-nota .ic { flex: none; margin-top: .2em; color: var(--ink-2); }
.ct-scade { color: var(--ink-2); font-size: 13px; text-align: center; }
.ct-contatti { display: grid; gap: 6px; min-width: 0; padding: 14px 18px; border-radius: var(--r-img); background: var(--sunk); }
.bv2 .ct-contatti h2 { font: 600 14px/1.3 var(--f); color: var(--ink-2); }
.bv2 .ct-contatti ul { display: grid; margin: 0; padding: 0; list-style: none; }
.ct-contatti a { display: flex; align-items: center; gap: 10px; min-height: 44px; min-width: 0; color: var(--ink); font-weight: 600; text-decoration-color: var(--line-2); overflow-wrap: anywhere; }
.ct-contatti a:hover { text-decoration-color: currentColor; }
.ct-contatti .ic { flex: none; color: var(--p-ink); }
@container bv2 (min-width: 860px) {
  .bv2 .ct { padding-top: 56px; }
  .ct-box { padding: 32px 32px 26px; }
  .bv2 .ct-top h1 { font-size: 28px; }
}

/* =====================================================================================
   Carrello (pezzo 4): riepilogo, foglio, barra e dialog dei limiti. Mockup approvato da Luca
   (docs/superpowers/assets/2026-10-28-booking-v2-carrello-mockup.html), classi crt-*. Nessun colore nuovo.
   ===================================================================================== */

/* Tariffario: tre colonne (tariffa, prezzo, alloggi): il numero di alloggi è la scelta */
.tt-q label { display: block; }
.tt-q .tar-q { width: 100%; }
.tt-c tr.tar { grid-template-areas: "t t" "p q"; }
.tt-c .tt-q { justify-self: end; min-width: 148px; }
.tt-q .tar-max { display: block; margin-top: 4px; }

/* righe del soggiorno (riepilogo e foglio) */
.crt { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.crt-g { display: grid; gap: 2px; padding: 12px 0 4px; }
.crt-g + .crt-r { border-top: 0; }
.crt-gn { color: var(--ink); font-size: 14px; font-weight: 600; }
.crt-ga { display: flex; gap: 6px; align-items: flex-start; color: var(--ink-2); font-size: 13px; }
.crt-ga .ic { flex: none; margin-top: .15em; }
/* frasi di arrivo nel blocco di una struttura (passo dati): la nota dell hotel sotto, un passo più piccola */
.crt-ga > span { min-width: 0; overflow-wrap: anywhere; }
.crt-ga .iu-nota { margin-top: 1px; font-size: 12.5px; }
.crt-r { display: grid; gap: 6px; padding: 12px 0; border-top: 1px solid var(--line); }
.crt-r:first-child { border-top: 0; padding-top: 2px; }
.crt-g ~ .crt-g { margin-top: 4px; border-top: 1px solid var(--line-2); }
.crt-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.crt-n { display: flex; flex-direction: column; min-width: 0; color: var(--ink-2); font-size: 13px; line-height: 1.35; }
.crt-n strong { color: var(--ink); font-size: 15px; line-height: 1.3; overflow-wrap: anywhere; }
.crt-p { flex: none; font-size: 15px; font-weight: 700; white-space: nowrap; transition: opacity .2s var(--ease); }
.crt-al { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; font-size: 13.5px; }
.crt-al li { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; color: var(--ink); }
.crt-al li > span { display: flex; gap: 8px; align-items: flex-start; min-width: 0; }
.crt-al .ic { margin-top: .175em; color: var(--ink-2); }
.crt-al .crt-vuoto { color: var(--ink-2); }
.crt-al li > span:first-child { transition: opacity .2s var(--ease); }
/* segnaposto di un alloggio in più mentre si ricalcola: stessa altezza della riga ospiti che lo sostituirà */
.crt-al .crt-wait, .crt-al .crt-wait .ic { color: var(--ink-2); }
.crt-up { flex: none; color: var(--ink-2); white-space: nowrap; transition: opacity .2s var(--ease); }
.crt-r .canc { font-size: 13px; }
/* Regole diverse nel soggiorno: la riga dice la sua regola senza il tono (vale quella della prenotazione). */
.crt-r .canc.sotto { color: var(--ink-2); font-weight: 400; }
.crt-err { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; border-radius: var(--r); background: var(--urg-bg); color: var(--ink); font-size: 13px; font-weight: 600; }
.crt-err .ic { margin-top: .15em; color: var(--urg); }
.crt-act { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 2px; }
.crt-act .stp { height: 40px; }
.crt-act .stp button { width: 40px; height: 38px; }
.crt-togli { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 4px; border: 0; background: none; color: var(--p-ink); font-size: 14px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; cursor: pointer; }
.crt-togli:hover { text-decoration-thickness: 2px; }

.sum-posti { display: flex; gap: 10px; align-items: flex-start; color: var(--ink-2); font-size: 14px; }
.sum-posti .ic { margin-top: .175em; }
/* «Prenotazione e pagamento con …»: chi incassa quando gli alloggi sono di più strutture */
.sum-inc { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--sunk); color: var(--ink-2); font-size: 13.5px; }
.sum-inc .ic { margin-top: .175em; color: var(--ink-2); }
.sum-inc strong { color: var(--ink); }
/* Regola più restrittiva: una riga di cancellazione come le altre, con la regola nel suo tono. */
.canc-piu { color: var(--ink); }
.canc-piu .ic { color: var(--nr); }
.canc-piu.ok-t .ic { color: var(--ok); }
.canc-piu b { color: var(--nr); }
.canc-piu.ok-t b { color: var(--ok); }
.sum-cta { display: grid; gap: 10px; }
.cta-tot { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 18px; font-weight: 800; }
.cta-tot span { display: flex; flex-direction: column; line-height: 1.2; }
.cta-tot small { color: var(--ink-2); font-size: 12.5px; font-weight: 400; }
.cta-tot b { white-space: nowrap; transition: opacity .2s var(--ease); }
[aria-busy="true"] .cta-tot b { opacity: .45; }
/* Il riepilogo laterale ripete totale e regola nel piede, che resta in vista mentre scorre; il foglio ha il suo piede. */
.sh-cart .cta-tot { display: none; }
/* Computer: con più righe il riepilogo può superare la finestra. Scorre da solo e «Continua» (con il motivo,
   se è spento) resta in fondo, sempre in vista. */
@container bv2 (min-width: 860px) {
  .side { max-height: calc(100vh - 108px); max-height: calc(100dvh - 108px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; padding-bottom: 0; }
  .side .sum-cta { position: sticky; bottom: 0; z-index: 1; margin: 0 -20px; padding: 12px 20px 20px; border-top: 1px solid var(--line); background: var(--surface); }
  .side .sum { padding-bottom: 20px; }
  .side .sum:has(.sum-cta:not([hidden])) { padding-bottom: 0; }
}
.btn-p[aria-disabled="true"] { background: var(--sunk); color: var(--ink-2); cursor: not-allowed; box-shadow: none; transform: none; }
.btn-p[aria-disabled="true"]:hover { background: var(--sunk); }

/* sto ricalcolando: le cifre restano dove sono, attenuate; nessun salto */
.crt-busy { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); font-size: 12.5px; font-weight: 600; }
.crt-busy[hidden] { display: none; }
.crt-spin { width: 14px; height: 14px; flex: none; border-radius: 50%; border: 2px solid var(--line-2); border-top-color: var(--p); animation: bv2-gira .8s linear infinite; }
[aria-busy="true"] .crt-p, [aria-busy="true"] .crt-up, [aria-busy="true"] .pbrk dd, .bbar[aria-busy="true"] .bbar-t strong { opacity: .45; }
/* le ultime righe ospiti restano al loro posto, attenuate meno delle cifre: il testo resta leggibile */
[aria-busy="true"] .crt-al li:not(.crt-wait) > span:first-child { opacity: .65; }
.pbrk-tot dt > .crt-busy { margin-left: 6px; vertical-align: 2px; }
/* al posto di «tassa esclusa»: stessa altezza della riga piccola (misurato a 390px, prima 3px in più a ogni ricalcolo) */
.pbrk dt small > .crt-busy { vertical-align: top; }
/* foglio del soggiorno (cresce verso l'alto): la riga «sto ricalcolando il prezzo» del piede è solo per i lettori di
   schermo, così il piede non cambia altezza; lo stato visibile è accanto a «Totale» */
.sh-cart .sh-foot [data-bv2-busy] { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* barra in basso: la parte sinistra apre il foglio del soggiorno */
.bbar-t.bbar-open { padding: 4px 6px; margin: -4px -6px; border: 0; border-radius: var(--r); background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.bbar-t.bbar-open:hover { background: var(--sunk); }
.bbar-dt { display: inline-flex; align-items: center; gap: 4px; }
.bbar-dt .ic { width: 1em; height: 1em; rotate: 180deg; color: var(--p-ink); }
.bbar-dt b { color: var(--p-ink); font-weight: 700; }

/* foglio del soggiorno e dialog dei limiti (dialog.sh nativi, showModal) */
.sh-cart .sh-body { display: grid; gap: 14px; align-content: start; padding-top: 6px; font-size: 15px; }
.sh-cart .sh-foot { display: grid; gap: 10px; }
.sh-dlg .sh-body { font-size: 15px; }
.dlg-t { font-size: 15px; line-height: 1.5; }
.dlg-pair { display: grid; gap: 8px; margin: 14px 0 2px; padding: 0; list-style: none; }
.dlg-pair li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r); font-size: 14px; }
.dlg-pair li .ic { margin-top: .175em; color: var(--ink-2); }
.dlg-pair li span { display: flex; flex-direction: column; }
.dlg-pair small { color: var(--ink-2); font-size: 13px; }
.dlg-pair .dlg-nuova { border-color: var(--line-2); background: var(--sunk); }
.dlg-nota { margin-top: 12px; color: var(--ink-2); font-size: 14px; }
.dlg-foot { display: flex; flex-direction: column-reverse; gap: 10px; }
.dlg-foot .btn { width: 100%; white-space: normal; text-align: center; }
@media (min-width: 860px) {
  dialog.sh-cart { width: min(560px, 92vw); }
  dialog.sh-dlg { width: min(520px, 92vw); }
  .dlg-foot { flex-direction: row; justify-content: flex-end; }
  .dlg-foot .btn { width: auto; }
}

/* ---------- pezzo 5: banner cookie, «Scegli», informativa e piede (mockup misura, Task 10) ---------- */
/* Banner: popover manuale nel top layer, non modale (la pagina resta usabile). .bv2 è un contenitore, quindi un
   position: fixed dentro non resterebbe fermo sulla finestra: il top layer sì. Telefono: a tutta larghezza; se la barra
   del prezzo è in vista il banner le sta sopra (--bv2-cc-sopra, da misura.js), mai sopra «Continua». Computer: riquadro
   in basso a sinistra, lontano dal riepilogo. Senza popover resta sticky in fondo alla pagina. Nascosto finché misura.js
   non trova una scelta valida (hidden). */
.cc-banner { position: sticky; bottom: var(--bv2-cc-sopra, 0px); z-index: 30; display: grid; gap: 10px; margin: 0; padding: 12px 16px calc(14px + env(safe-area-inset-bottom, 0px)); border: 0; border-top: 1px solid var(--line); background: var(--surface); color: var(--ink); box-shadow: 0 -6px 20px rgba(0, 0, 0, .10); }
.cc-banner[hidden] { display: none; }
.cc-banner:popover-open { position: fixed; inset: auto 0 var(--bv2-cc-sopra, 0px) 0; width: auto; height: auto; max-height: calc(100dvh - var(--bv2-cc-sopra, 0px) - 16px); overflow-y: auto; animation: bar-in .32s var(--ease); }
/* Il piede (ultimo pezzo di ogni pagina) riceve lo spazio del banner: invio del passo dati e link restano raggiungibili. */
.bv2[data-cc-banner] .bv2-piede { padding-bottom: var(--bv2-cc-alto, 0px); }
.cc-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: -4px -10px -2px 0; }
.cc-h { font: 700 16px/1.25 var(--f-d); }
.bv2[data-tema="notturno"] .cc-h, .bv2[data-tema="notturno"] .cc-dlg .sh-head h2 { font-weight: 400; font-synthesis: none; letter-spacing: .01em; }
.cc-txt { font-size: 14px; line-height: 1.45; color: var(--ink-2); max-width: 62ch; }
.cc-txt strong { color: var(--ink); font-weight: 600; }
.cc-a { padding: 0; border: 0; background: none; color: var(--p-ink); font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.cc-a:hover { text-decoration-thickness: 2px; }
/* Tre pulsanti con lo stesso peso visivo (Garante 2021): stessa classe, stessa misura, stessa colonna della griglia. */
.cc-az { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cc-az .btn { min-width: 0; padding: 0 8px; white-space: normal; text-align: center; line-height: 1.15; overflow-wrap: anywhere; hyphens: auto; }
@media (min-width: 860px) {
  .cc-banner, .cc-banner:popover-open { left: 32px; right: auto; bottom: calc(var(--bv2-cc-sopra, 0px) + 24px); width: 432px; padding: 16px 18px 18px; border: 1px solid var(--line); border-radius: var(--r-img); box-shadow: var(--sh-2); }
  .bv2[data-cc-banner] .bv2-piede { padding-bottom: calc(var(--bv2-cc-alto, 0px) + 24px); }
  dialog.cc-scegli { width: min(560px, 92vw); }
}

/* Dialog «Scegli»: Necessari fisso, Statistiche e Pubblicità con interruttore, spenti di default */
.cc-intro { margin: 0 0 6px; font-size: 14.5px; color: var(--ink-2); max-width: 60ch; }
.cc-cats { display: grid; margin: 0; padding: 0; list-style: none; }
.cc-cat { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; align-items: start; padding: 14px 0; border-bottom: 1px solid var(--line); }
.cc-cat:last-child { border-bottom: 0; }
.cc-cat h3 { font-size: 16px; font-weight: 700; line-height: 1.3; }
.bv2 .cc-cat p { grid-column: 1; font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.bv2 .cc-cat .cc-tools { margin-top: 2px; color: var(--ink); font-size: 13.5px; font-weight: 600; }
.cc-cat > .cc-sw, .cc-cat > .cc-fisso { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
.cc-fisso { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--ink-2); font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.cc-fisso .ic { width: 1em; height: 1em; }
/* Interruttore: una casella vera con role="switch"; bordo e pomello reggono 3:1 in tutti e due i temi. Area di tocco 44px. */
.cc-sw { position: relative; flex: none; width: 52px; height: 32px; margin: 6px 0; appearance: none; -webkit-appearance: none; border: 1.5px solid var(--ink-2); border-radius: 999px; background: var(--surface); cursor: pointer; transition: background-color .2s var(--ease), border-color .2s var(--ease); }
.cc-sw::before { content: ""; position: absolute; inset: -8px -4px; }
.cc-sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 23px; height: 23px; border-radius: 50%; background: var(--ink-2); transition: transform .2s var(--ease), background-color .2s var(--ease); }
.cc-sw:checked { background: var(--p); border-color: var(--p); }
.cc-sw:checked::after { transform: translateX(20px); background: var(--on-p); }
.bv2 .cc-sw:focus-visible { outline: 2px solid var(--p-ink); outline-offset: 3px; }
.bv2 .cc-stato { margin-top: 2px; font-size: 13px; font-weight: 600; }
.cc-foot { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cc-foot .btn { min-width: 0; padding: 0 12px; white-space: normal; text-align: center; line-height: 1.15; }
.cc-dlg .sh-body .cc-a { display: inline-flex; align-items: center; min-height: 44px; }

/* Informativa: testo lungo nel foglio, una voce per strumento */
.cc-tool { display: grid; gap: 2px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r); }
.cc-tool b { font-size: 15px; }
.cc-tool span { color: var(--ink-2); font-size: 14px; }
.cc-tool span em { font-style: normal; color: var(--ink); font-weight: 600; }
.cc-tools-l { display: grid; gap: 8px; max-width: 68ch; }
.sh-testo-t .cc-tit { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.cc-tit li { padding: 10px 12px; border-radius: var(--r); background: var(--sunk); font-size: 14px; }
.sh-testo-t .cc-tit li + li { margin-top: 0; }
.cc-tit b { display: block; font-size: 14.5px; }
.cc-tit small { display: block; margin-top: 2px; color: var(--ink-2); font-size: 13px; }

/* Piede delle pagine V2: struttura titolare e due link fissi */
.bv2-piede { border-top: 1px solid var(--line); background: var(--surface); color: var(--ink-2); font-size: 13.5px; }
.bv2-piede .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 24px; padding-block: 14px calc(22px + env(safe-area-inset-bottom, 0px)); }
.bv2-piede p { overflow-wrap: anywhere; }
.bv2-piede strong { color: var(--ink); font-weight: 600; }
.bv2-piede ul { display: flex; flex-wrap: wrap; gap: 0 20px; margin: 0; padding: 0; list-style: none; }
.cc-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0; border: 0; background: none; color: var(--p-ink); font: inherit; font-weight: 700; text-decoration: underline; text-decoration-color: var(--p-line); text-underline-offset: 3px; cursor: pointer; }
.cc-link:hover { text-decoration-color: currentColor; }
.cc-link .ic { width: 1.05em; height: 1.05em; }
.bv2 .cc-link:focus-visible, .bv2 .cc-a:focus-visible { outline: 2px solid var(--p-ink); outline-offset: 2px; border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
  .bv2 *, .bv2 *::before, .bv2 *::after, dialog.sh, dialog.sh::backdrop { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .bv2-spinner { border-top-color: var(--line); border-right-color: var(--p); }
  .crt-spin { border-top-color: var(--line-2); border-right-color: var(--p); }
}