/* Scheda /viaggi v2 — ridisegno 01/09/2026.
   Caricato SOLO da templates/public/viaggi/detail_v2.html, che si serve
   con ?v2=1 a flag VIAGGI_SCHEDA_V2 acceso. `viaggi-detail.css` resta la
   produzione e non si tocca: i suoi gate (modal stacking, dock senza
   prezzo) continuano a valere sulla v1.

   Prefisso `v2-` su tutto per non collidere con le `.vd-*` esistenti, che
   convivono nella stessa pagina finche' il porting non e' finito.

   I valori vengono dalla scheda vera e dal motore della home
   (_search_v2_styles.html), non da scelte fatte a occhio. */

/* ── card della selezione ─────────────────────────────────────────── */
.v2-sel {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(30, 60, 114, .12);
    padding: 17.6px;
    margin-bottom: 14px;
}
.v2-sel__bar {
    display: flex; align-items: flex-start; gap: 12px;
    margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid #eef1f6;
}
.v2-sel__bar .vd-bar-icon { color: var(--primary, #1e3c72); font-size: 1.1rem; display: flex; margin-top: 1px; }
/* Il JS riappende i segmenti in ordine: data, aeroporto, persone. Dando
   al primo tutta la riga, gli altri scendono INSIEME sotto — con qualunque
   nome di scalo. Nessuna dipendenza dall'ordine oltre «il primo e' la
   data», che e' garantito dal JS. */
/* GRIGLIA, non flex-wrap. Nell'artboard mobile la barra e' fatta di due
   contenitori — riga 1 «data + Modifica», riga 2 «scalo, persone» — ma i
   tre segmenti li rigenera il JS della v1 dentro un solo `#vdBarSummary`,
   e spostarli nel DOM significherebbe vederli cancellare al primo render.
   Col flex-wrap il risultato erano TRE righe (misurato a 360px: allo
   scalo e alle persone restano ~188px e ne servono 192, e il wrap ha la
   precedenza sullo shrink, quindi non si accorciavano — andavano a capo).
   Con due colonne la seconda riga esiste per costruzione: lo scalo prende
   quel che avanza e si accorcia se serve, le persone restano intere. */
.v2-sum {
    flex: 1; min-width: 0;
    /* `minmax(0, 1fr) auto`, non colonne a contenuto: il primo segmento
       attraversa entrambe le colonne e, se queste si dimensionano sul
       contenuto, la sua larghezza viene ripartita fra loro — misurato:
       lo scalo collassava a 0 e «2 adulti» diventava largo 184px. Con
       `1fr` la prima colonna prende quel che avanza a prescindere da chi
       la attraversa, e `minmax(0, …)` le toglie il minimo automatico che
       impedirebbe l'ellissi. */
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    align-items: center; row-gap: 7px; column-gap: 14px;
    font-size: 13.1px; font-weight: 600; color: #1a1a1a;
}
.v2-sum > .vd-bar-seg:first-child { grid-column: 1 / -1; min-width: 0; padding: 0; border: 0; }
.v2-sum > .vd-bar-seg { padding: 0; border: 0; }
/* Perche' gli altri due sono comprimibili. Nell'artboard mobile la barra
   e' fatta di DUE contenitori: riga 1 = data + «Modifica», riga 2 = scalo
   e persone a tutta larghezza. Qui non si puo' riprodurre quella
   struttura, perche' i tre segmenti li rigenera il JS della v1 dentro un
   solo `#vdBarSummary` e spostarli li' farebbe cancellare tutto al primo
   render. Conseguenza: il tasto sottrae larghezza anche alla seconda
   riga, e con uno scalo lungo («da Roma Fiumicino») le righe diventano
   TRE invece di due — misurato a 360px. Rendendoli comprimibili tornano
   due: con uno scalo corto si legge tutto, con uno lungo si accorcia
   quello — mai il numero di persone, che e' l'informazione piu' densa.
   Vale per «tutti tranne il primo», non per posizione: cosi' non dipende
   dall'ordine oltre a «il primo e' la data», che il gate gia' difende. */
/* `block`, non l'`inline-flex` che la v1 da' ai segmenti. Due ragioni,
   misurate a 360px:
   - `text-overflow: ellipsis` NON si applica a un contenitore flex: lo
     scalo veniva tagliato netto a meta' parola («da Roma Fiumic») invece
     di finire con i puntini;
   - nel primo segmento data e «8 notti» sono due figli flex, quindi la
     data andava a capo su due righe mentre «8 notti» restava appeso a
     destra. Da blocco scorrono come testo — il JS fra i due mette uno
     spazio vero (`createTextNode(' ')`), quindi la spaziatura resta.
   Non ci sono icone dentro i segmenti (l'icona del calendario e' fuori,
   in `.vd-bar-icon`), quindi non si perde niente. */
.v2-sum > .vd-bar-seg { display: block; }
.v2-sum > .vd-bar-seg:not(:first-child) {
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Il QUARTO segmento. Quando restano pochi posti la v1 appende un
   `.vd-bar-seg--seats` («Ultimi 2 posti», viaggi-detail.js:1031-1037): con
   quattro figli la griglia a due colonne fa una terza riga, e il testo rosso
   dell'urgenza finirebbe stretto in mezza colonna. Riga intera: e' la voce
   che deve leggersi, e non ha senso comprimerla per stare in due righe.
   ⚠️ Quindi «due righe per costruzione» vale con TRE segmenti; con la
   scarsita' sono tre, ed e' voluto. */
.v2-sum > .vd-bar-seg--seats { grid-column: 1 / -1; }
/* Stesso pill che la scheda usa gia' per «Modifica selezione». */
.v2-mod {
    flex: 0 0 auto; border: 1.5px solid var(--primary, #1e3c72);
    color: var(--primary, #1e3c72); background: #fff; border-radius: 999px;
    padding: 7.2px 16px; font-weight: 600; font-size: 13.6px;
    font-family: inherit; cursor: pointer; white-space: nowrap;
}
.v2-mod:hover { background: var(--primary, #1e3c72); color: #fff; }

/* ── contatori (stessi valori di .vd-step-btn) ────────────────────── */
.v2-tondo {
    width: 36px; height: 36px; flex: 0 0 36px; border-radius: 50%;
    border: 1.5px solid #dbe2ee; background: #fff; color: var(--primary, #1e3c72);
    font-size: 18.4px; font-weight: 700; font-family: inherit; cursor: pointer;
    display: flex; align-items: center; justify-content: center; line-height: 1;
}
.v2-tondo:hover:not(:disabled) { border-color: var(--primary, #1e3c72); background: #f4f7fc; }
.v2-tondo:disabled { opacity: .4; cursor: default; }
@keyframes v2-pulsa {
    0%, 100% { box-shadow: 0 6px 16px rgba(164, 198, 57, .45); }
    50%      { box-shadow: 0 6px 26px rgba(164, 198, 57, .95), 0 0 0 4px rgba(164, 198, 57, .25); }
}

/* ── calendario delle partenze ────────────────────────────────────────
   Vista sulle `.vd-date-row`, non una seconda copia dei dati. L'elenco
   resta nel DOM (e' il bersaglio dei clic) ma non si vede. */
.v2-elenco-nascosto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.v2-cal { margin-bottom: .6rem; }
.v2-cal__nav { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.v2-cal__frec { width: 32px; height: 32px; flex: 0 0 32px; font-size: 15px; }
.v2-cal__mese { flex: 1; text-align: center; font-size: 15.2px; font-weight: 800; color: #1a1a1a; }
.v2-cal__gg {
    display: grid; grid-template-columns: repeat(7, 1fr); text-align: center;
    font-size: 11.5px; font-weight: 700; color: #6b7280; text-transform: uppercase;
    letter-spacing: .5px; padding-bottom: 6px;
}
.v2-cal__griglia { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.v2-cal__vuoto {
    height: 48px; display: flex; align-items: center; justify-content: center;
    font-size: 13.4px; color: #c3c7d0;
}
/* Il prezzo DENTRO la casella: su /viaggi la data e' il prezzo (632÷994,
   il 57%), quindi un calendario verde/grigio direbbe «si puo'» e non
   «quanto». I colori sono gli stessi che la scheda nativa usa per le
   disponibilita', copiati (vedi la nota sui valori diretti qui sotto). */
.v2-cal__g {
    height: 48px; border: 0; border-radius: 10px; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 1px; font-family: inherit;
    /* Valori diretti, non `var(--ii-cal-avail-*)`: quei token vivono in
       hotel-detail.css, che questa pagina NON carica (extra_css qui prende
       solo viaggi-detail.css e _gallery_lightbox.css). La var non risolveva
       mai e valeva sempre il fallback — cioe' dichiarava una dipendenza che
       non esisteva, e il prossimo lettore l'avrebbe presa per vera. I colori
       restano quelli della scheda nativa, copiati. */
    background: #e8f3ee; color: #2a6a47;
}
.v2-cal__g b { font-size: 14.4px; font-weight: 700; line-height: 1; }
.v2-cal__g i { font-size: 9.8px; font-weight: 700; line-height: 1; font-style: normal; }
.v2-cal__g.is-scelto {
    background: var(--primary, #1e3c72); color: #fff;
    box-shadow: 0 4px 12px rgba(30, 60, 114, .35);
}

/* ── riepilogo: «La quota comprende» ──────────────────────────────────
   Un bottone, non una lista sempre aperta: nel foglio il cliente sta
   guardando prezzo e scadenze, e le inclusioni servono solo a chi le
   cerca. */
/* Misure e colori dal prototipo (`tastoIncluso` / `tipIncluso`). Il
   fumetto e' assoluto sopra il tasto: il contenitore gli da' il riferimento
   e la card ha `overflow` libero, quindi puo' sbordare verso l'alto. */
.v2-incl-wrap { position: relative; margin: 14px 18px 0; }
.v2-incl-btn {
    display: flex; align-items: center; gap: 9px; width: 100%;
    background: #f0f8f1; border: 1px solid #d7ebda; border-radius: 10px;
    padding: 11px 13px; text-align: left; cursor: pointer;
    font-family: inherit; font-size: 13.4px; font-weight: 700; color: #1a1a1a;
}
.v2-incl-check {
    width: 20px; height: 20px; flex: 0 0 20px; border-radius: 50%;
    background: #2e7d32; color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 800;
}
.v2-incl-testo { flex: 1; min-width: 0; }
.v2-incl-i {
    flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%;
    border: 1.5px solid #2e7d32; color: #2e7d32;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 800; font-style: normal;
}
.v2-incl {
    position: absolute; left: 0; right: 0; bottom: calc(100% + 9px); z-index: 5;
    background: #1a2235; color: #fff; border-radius: 12px; padding: 13px 15px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .32);
}
.v2-incl::after {
    content: ''; position: absolute; left: 26px; bottom: -7px;
    width: 14px; height: 14px; background: #1a2235;
    transform: rotate(45deg); border-radius: 2px;
}
.v2-incl-x {
    position: absolute; top: 6px; right: 8px;
    background: none; border: 0; color: rgba(255, 255, 255, .7);
    font-size: 22px; line-height: 1; padding: 4px 8px; cursor: pointer;
}
.v2-incl-x:hover { color: #fff; }
.v2-incl-occhiello {
    font-size: 11.6px; font-weight: 800; letter-spacing: .6px;
    text-transform: uppercase; color: rgba(255, 255, 255, .6); margin-bottom: 7px;
}
.v2-incl .vd-quota-box { margin: 0; padding: 0; background: none; border: 0; }
.v2-incl .vd-quota-list { margin: 0; padding-left: 17px; }
.v2-incl .vd-quota-list li {
    font-size: 13px; line-height: 1.62; color: rgba(255, 255, 255, .92);
}

/* ── pannello a tre campi (01/09) ─────────────────────────────────────
   «Modifica» apre un pannello compatto; ogni campo apre la sua sezione. */
.v2-riep {
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px;
    margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid #eef1f6;
}
.v2-riep:empty { display: none; border: 0; margin: 0; padding: 0; }
.v2-riep__r {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 13.4px; font-weight: 600; color: #1a1a1a;
}
.v2-riep__r:first-child { flex: 1 0 100%; font-weight: 700; }
.v2-riep__r .bi { color: var(--primary, #1e3c72); font-size: 13px; }
.v2-campo {
    display: block; width: 100%; text-align: left; margin-bottom: 10px;
    background: #fff; border: 1.5px solid #dbe2ee; border-radius: 10px;
    padding: 9px 12px; font-family: inherit; cursor: pointer;
}
.v2-campo:last-of-type { margin-bottom: 4px; }
/* Il campo che ospita la tendina VERA della v1: aspetto nativo, niente
   freccia disegnata da noi (owner: «mi va bene come era prima»). */
.v2-campo--menu { padding-bottom: 5px; }
.v2-campo__slot { display: block; }
.v2-campo__slot .vd-airport {
    display: block; width: 100%; max-width: 100%; border: 0; padding: 0;
    background: none; font-family: inherit; font-size: 15.2px;
    font-weight: 600; color: #1a1a1a; cursor: pointer;
}
.v2-campo__eti { display: block; font-size: 11.6px; color: #6b7280; font-weight: 600; margin-bottom: 1px; }
.v2-campo__val {
    display: block; font-size: 15.2px; font-weight: 600; color: #1a1a1a;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.v2-nota {
    display: flex; align-items: flex-start; gap: 7px; margin: 10px 0 0;
    font-size: 12.5px; line-height: 1.35; color: #778;
}
.v2-nota .bi { flex: 0 0 auto; margin-top: 2px; }
.v2-form[hidden] { display: none; }

/* La nota vive DENTRO il calendario: chi vede una griglia di giorni si
   aspetta di segnare un intervallo, e qui si sceglie solo la partenza. */
.v2-cal__nota { margin: 12px 0 0; font-size: 12.5px; line-height: 1.35; color: #6b7280; }
.v2-cal__nota strong { color: #1a1a1a; }

/* Eta' da confermare: si MARCA, non si svuota — un select senza valore
   creerebbe uno stato `null` che il resto della catena non sa leggere. */
.v2-eta-da-dire {
    border-color: #e08b1a !important;
    box-shadow: 0 0 0 3px rgba(224, 139, 26, .16);
}
.v2-eta-avviso {
    display: flex; align-items: center; gap: 7px; margin: 0 0 8px;
    font-size: 12.6px; font-weight: 600; color: #9a5b00;
    background: #fdf1dc; border-radius: 10px; padding: 8px 11px;
}

/* «Chi viaggia» E' l'editor delle camere: la comitiva globale resta nel
   DOM — la v1 ci lavora — ma fuori dagli occhi. Solo i FIGLI DIRETTI
   della card: `renderSplitEditor` usa la stessa classe `.vd-pax` per le
   righe dentro ogni camera, e col selettore largo sparivano anche quelle. */
#vdPanel.v2-solo-camere > .vd-panel-card > .vd-pax,
#vdPanel.v2-solo-camere > .vd-panel-card > #vdAges,
#vdPanel.v2-solo-camere > .vd-panel-card > #vdPaxNote { display: none !important; }
#vdSplitEditor[hidden] { display: none; }
/* Via «Annulla» e «Applica» (owner 02/09). Erano i tasti della vecchia
   finestra separata: nel pannello sono un doppione di «Fatto», e avere tre
   comandi per uscire dalla stessa schermata confonde — «Fatto» sembrava non
   fare niente perche' la scelta andava confermata con «Applica».
   «Aggiungi camera» e «Torna alla divisione automatica» restano: quelli
   fanno cose diverse. */
#vdPanel #vdSplitCancel,
#vdPanel #vdSplitApply { display: none !important; }

/* ── La carta dei voli ────────────────────────────────────────────────
   Il disegno impila andata e ritorno separate da un filo tratteggiato; la
   v1 le affianca in due colonne. Qui si torna a una colonna sempre: e' la
   disposizione che il filo richiede, e su schermo largo i puntini si
   allungano invece di sprecare spazio.

   Il filo e' un elemento vuoto che si allunga (`flex: 1`): non si puo'
   fare con un bordo sul contenitore, perche' deve stare FRA i due estremi
   e fermarsi dove comincia il testo. */
.vd-flight-legs { grid-template-columns: 1fr; gap: 0; }
.v2-leg { padding: 0; }
.v2-leg + .v2-leg,
.v2-flight-piede {
    border-top: 1px dashed #e3e8f0;
    padding-top: .75rem;
    margin-top: .75rem;
}
.v2-leg .vd-flight-leg-body { flex: 1; }
.v2-leg .vd-flight-leg-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .1rem .6rem;
    margin-bottom: .25rem;
}
.v2-leg-eti {
    text-transform: uppercase;
    letter-spacing: .4px;
    font-weight: 700;
    font-size: .775rem;
    color: #667;
    white-space: nowrap;
}
.v2-leg-coda {
    margin-left: auto;
    text-align: right;
    font-size: .79rem;
    font-weight: 500;
    color: #667;
    /* puo' stringersi e andare a capo: senza `min-width: 0` un flex item
       resta largo quanto il suo testo, e «Ethiopian Airlines · 1 scalo a
       Addis Ababa» spingeva la pagina oltre il bordo su mobile — la pagina
       «si muove a destra e a sinistra» (owner 02/09) */
    min-width: 0;
    flex: 1 1 auto;
}
.v2-leg .vd-flight-route {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-weight: 600;
}
/* Gli estremi della tratta preferiscono restare su una riga, ma se lo
   schermo e' stretto vanno a capo DENTRO invece di sbordare. */
.v2-leg-cap { min-width: 0; flex: 0 1 auto; }
.v2-leg .vd-flight-leg-head,
.v2-leg .vd-flight-route { min-width: 0; }
.v2-leg-filo {
    flex: 1;
    min-width: 12px;
    border-top: 1px dashed #d5dce8;
}
.v2-flight-piede { font-weight: 600; color: #4a4a4a; font-size: .84rem; }

/* ── Il foglio del riepilogo ──────────────────────────────────────────
   Testata navy col totale, quattro passi spuntati, i voli, il dettaglio.
   Le misure vengono dal prototipo approvato
   (`ai-workspace/dc-viaggi/prova-scheda-viaggi.html`, righe 210-235 e
   336-350), non da stime. */
/* ── la gemella desktop della sidebar (>=992px) ───────────────────────
   La sidebar della v1 resta nel DOM, nascosta: e' la sorgente in cui la
   v1 scrive e da cui il foglio mobile clona. La gemella `.v2-side` ha la
   base della card (viaggi-detail.css riga 162 e 457) senza il padding e
   il gap interni: nel prototipo ogni blocco porta il suo. */
#vdSide .v2-sorgente { display: none; }
#vdSide .v2-side {
    background: #fff; border-radius: 16px; overflow: hidden;
    border: 1px solid var(--hair, #e5e1d8);
    box-shadow: 0 8px 30px rgba(30, 60, 114, .10);
    display: flex; flex-direction: column; padding: 0; gap: 0;
}
/* `.vd-side-head` nella sidebar ha `margin: -18px -18px 2px` per uscire
   dal padding della card: qui il padding non c'e' piu', e il margine
   negativo farebbe sbordare la testata. */
#vdSide .v2-side .v2-riep-head {
    margin: 0; align-items: flex-start; padding-top: 2rem;
    /* navy come il prototipo: la skin HoEscape colora `.vd-side-head`
       di verde con `[data-skin="hoe"] .vd-side-head`, che batte una
       classe sola. */
    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
}
#vdSide .v2-side .v2-riep-head .v2-riep-occhiello { margin-bottom: .25rem; }

 Nel
   foglio il contenuto supera sempre l'altezza disponibile, quindi il
   browser prova a mandarlo in una seconda colonna e nel farlo gonfia i
   blocchi: misurato, la griglia dei passi passava da 147px a 230, con un
   vuoto di 84px sotto le celle. Il foglio scorre in verticale — le colonne
   non le vuole nessuno. */
.v2-riep { flex-wrap: nowrap; }
/* E ogni blocco a tutta larghezza: la card ha `align-items: center`, e
   sopra i 576px la v1 non forza piu' `width: 100%` sui bottoni — «Prenota
   ora» e «Chiama» restavano stretti al centro. */
.v2-riep > * { align-self: stretch; }

.v2-riep-head {
    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    /* Il respiro in alto lascia posto al tasto di chiusura, che sta
       fuori flusso in un angolo: senza, si sovrappone a «TOTALE».
       `align-self: stretch` perche' `.vd-side-card` e' un flex con
       `align-items: center` — senza, ogni blocco si restringe al proprio
       contenuto e resta incolonnato in mezzo alla card. */
    padding: 2rem 1.1rem .85rem;
    position: relative;
    align-self: stretch;
    flex: 0 0 auto;
}
/* `flex-start`, non `center`: il blocco del totale e' piu' basso di quello
   del nome, e centrato SALE fin sotto la x (misurato a 516px: la x
   finiva sopra «TOTALE»). In alto restano tutti e due, e la x ha la sua
   striscia. Specificita' alzata apposta: la testata porta anche la classe
   `.vd-side-head` della v1, la cui regola di padding vinceva sulla mia
   (misurato: 13.6px invece di 32). La regola della v1 e'
   `[data-skin="hoe"] .vd-dock-body .vd-side-head` — tre classi — quindi
   qui ce ne vogliono tre, e questo file viene dopo. */
.vd-dock-body .v2-riep .v2-riep-head { align-items: flex-start; padding-top: 2rem; }
/* Il nome ha la precedenza sullo spazio: il blocco del totale non puo'
   schiacciarlo a una parola per riga («Stiamo quotando…», owner 02/09). */
.v2-riep-head-sx { min-width: 0; flex: 1 1 auto; }
.v2-riep-head-dx { text-align: right; flex: 0 1 auto; max-width: 48%; padding-right: .35rem; }
.v2-riep-head .vd-total-val.v2-totale-testo { font-size: .8rem; font-weight: 700; color: #fff; line-height: 1.3; }
.v2-riep--vuoto .v2-riep-head .vd-total-val { color: rgba(255, 255, 255, .7); }
.v2-riep-avviso {
    align-self: stretch; flex: 0 0 auto;
    padding: 10px 18px; font-size: 12.8px; line-height: 1.5; color: #7a4b00;
    background: #fff8e6; border-bottom: 1px solid #e9ecef;
}
.v2-riep-occhiello {
    display: block;
    font-size: .655rem;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .78);
    margin-bottom: .25rem;
}
.v2-riep-titolo {
    display: block;
    font-size: .94rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.3;
}
.v2-riep-head .vd-side-total {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
}
.v2-riep-head .vd-total-row { margin: 0; padding: 0; border: 0; justify-content: flex-end; }
.v2-riep-head .vd-total-val { font-size: 1.375rem; font-weight: 800; color: #f5a623; line-height: 1; }
.v2-riep-head .vd-ms-close {
    position: absolute;
    top: .35rem;
    right: .5rem;
    background: none;
    border: 0;
    color: rgba(255, 255, 255, .8);
    /* Nel disegno e' una x in un angolo. Il testo si azzera invece di
       sparire con `display:none` perche' il tasto e' quello della v1 e la
       sua etichetta accessibile («Chiudi il riepilogo») deve restare. */
    font-size: 0;
    line-height: 1;
    padding: .1rem .35rem;
}
.v2-riep-head .vd-ms-close::before {
    content: '\00d7';
    font-size: 1.25rem;
    line-height: 1;
}
.v2-riep-head .vd-ms-close .bi { display: none; }

/* I quattro passi — `passo()` del prototipo: spunta tonda 22px a
   sinistra (sfondo #e6f6e6, segno #2e7d32), etichetta 10.5px sopra il
   valore 13.4px, filo tratteggiato verticale a destra della prima
   colonna. SEMPRE due colonne: il prototipo usa `auto-fit`, ma a 600px ne
   venivano tre piu' una a capo, e la forma approvata e' 2x2. */
.v2-passi {
    align-self: stretch;
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    padding: 14px 18px;
    border-bottom: 1px solid #e9ecef;
}
.v2-passo {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 12px 6px 0; min-width: 0;
}
.v2-passo:nth-child(odd) { border-right: 1px dashed #e5e1d8; }
.v2-passo:nth-child(even) { padding-left: 12px; }
.v2-passo-check {
    width: 22px; height: 22px; flex: 0 0 22px; border-radius: 50%;
    background: #e6f6e6; color: #2e7d32;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 800;
}
.v2-passo--spento .v2-passo-check { background: #f1f3f5; border: 1.5px dashed #c5c9d3; }
.v2-passo--spento .v2-passo-val { color: #8a8a8a; font-weight: 600; }
.v2-passo-testo { min-width: 0; }
.v2-passo-eti {
    font-size: 10.5px; font-weight: 800; letter-spacing: .6px;
    text-transform: uppercase; color: #8a8a8a;
}
.v2-passo-val { font-size: 13.4px; font-weight: 700; color: #1a2235; }

/* La riga del volo: una frase, ✈ davanti, la seconda riga in grigio. */
.v2-riep-volo {
    align-self: stretch; flex: 0 0 auto;
    display: flex; align-items: flex-start; gap: 9px;
    padding: 12px 18px; background: #f7f8fb;
    font-size: 12.8px; color: #4a4a4a; line-height: 1.5;
    border-bottom: 1px solid #e9ecef;
}
.v2-riep-volo-ico { flex: 0 0 auto; margin-top: 1px; }
.v2-riep-volo-corpo { min-width: 0; }
.v2-riep-volo-nota { color: #8a8a8a; }

/* I conti — `conto()` del prototipo: etichetta a sinistra, cifra a
   destra in grassetto, filo sottile sopra; il totale in ambra. */
.v2-conti { align-self: stretch; flex: 0 0 auto; padding: 12px 18px 0; }
.v2-conto {
    display: flex; justify-content: space-between; align-items: center; gap: 10px;
    padding: 6px 0; font-size: 13px; color: #1a2235;
    border-top: 1px dashed #f1f3f5;
}
.v2-conto > span:first-child { color: #4a4a4a; min-width: 0; }
.v2-conto > span:last-child { font-weight: 800; white-space: nowrap; }
.v2-conto--forte > span:first-child { color: #1a2235; font-weight: 700; }
.v2-conto--forte > span:last-child { color: #e08b1a; }

/* Pagamenti: il riquadro del prototipo. La riga del saldo e' scritta
   qui; acconto e rate sono i nodi della v1. */
.v2-riep .vd-paybox {
    background: #f7f8fb; border-radius: 10px; padding: 11px 13px;
    margin: 12px 18px 0; border: 0;
}
.v2-riep .vd-paybox-row {
    font-size: 13.4px; background: none; border: 0; border-radius: 0;
    padding: 0; margin: 0; display: flex; justify-content: space-between; gap: 10px;
}
.v2-riep .vd-paybox-row > span { color: #4a4a4a; font-weight: 600; }
.v2-riep .vd-paybox-row > strong { color: #e08b1a; }
.v2-riep .v2-paybox-saldo { margin-top: 5px; }
.v2-riep .v2-paybox-saldo > strong { color: #4a4a4a; }
.v2-riep .vd-paybox-rate { font-size: 12.4px; color: #8a8a8a; margin-top: 5px; }

/* Il piede: «Prenota» pieno, sotto «Salva preventivo» (contorno navy,
   prende lo spazio) e il telefono in un quadrato da 48. Sticky al fondo
   dello scroll del foglio: nel prototipo il corpo scorre e il piede no. */
.v2-riep-piede {
    position: sticky; bottom: 0; z-index: 2;
    align-self: stretch; flex: 0 0 auto; margin-top: auto;
    background: #fff; border-top: 1px solid #ececf1;
    padding: 12px 16px 16px;
}
.v2-riep .vd-cta { margin: 0; }
.v2-riep .vd-side-duo,
.v2-riep .vd-ms-actions { display: flex; gap: 9.6px; align-items: stretch; margin: 9px 0 0; padding: 0; }
.v2-riep .vd-ms-actions > * { margin: 0; }
.v2-salva {
    flex: 1; display: inline-flex; align-items: center; justify-content: center;
    min-height: 44px; background: #fff; color: #1e3c72;
    border: 1.5px solid #1e3c72; border-radius: 12px;
    font-size: 14.4px; font-weight: 700; text-decoration: none;
    font-family: inherit; cursor: pointer; padding: 0 12px;
}
.v2-salva .bi { display: none; }   /* il prototipo non ha l'icona della busta */
.v2-riep .v2-tel {
    flex: 0 0 48px; width: 48px; min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 12px; background: #1e3c72; color: #fff;
    font-size: 0;          /* il testo «Chiama» resta per gli screen reader nell'aria-label */
    padding: 0;
}
.v2-riep .v2-tel .bi { font-size: 18px; }

/* ═══════════════════════════════════════════════════════════════════
   BREAKPOINT
   Il resto del file e' mobile-first: sotto i 768px vale cosi' com'e'.
   I due scaglioni qui sotto seguono i breakpoint del progetto (576 /
   768 / 992) e le misure vengono dagli artboard desktop del design
   (`ai-workspace/dc-viaggi/DesktopRicerca.dc.html`), non da stime.
   ═══════════════════════════════════════════════════════════════════ */

/* ── ≥768px: c'e' spazio per la riga unica ────────────────────────────
   Su mobile il primo segmento prende tutta la riga perche' «ven 16 ott →
   ven 23 ott» piu' scalo e persone non ci stanno. Da qui in su ci stanno,
   e il design li vuole in fila con i separatori — che sono gia' quelli
   della v1 (`.vd-bar-seg + .vd-bar-seg { border-left }`), quindi qui si
   smette di sopprimerli invece di ridisegnarli. */
@media (min-width: 768px) {
    .v2-sel__bar { align-items: center; }
    .v2-sum { display: flex; flex-wrap: nowrap; font-size: 14.4px; row-gap: 0; column-gap: 0; }
    .v2-sum > .vd-bar-seg { display: inline-flex; }
    .v2-sum > .vd-bar-seg,
    .v2-sum > .vd-bar-seg:first-child {
        flex: 0 1 auto; padding: 0 .9rem; min-width: 0;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .v2-sum > .vd-bar-seg:first-child { padding-left: 0; flex: 0 0 auto; }
    .v2-sum > .vd-bar-seg + .vd-bar-seg { border-left: 1px solid #e3e8f0; }
    /* Le caselle crescono con la colonna: a 63px di larghezza una casella
       alta 48 sembrava schiacciata. */
    .v2-cal__g, .v2-cal__vuoto { height: 54px; }
    .v2-cal__g b { font-size: 15.2px; }
    .v2-cal__g i { font-size: 10.6px; }
}

/* ── ≥992px: desktop ─────────────────────────────────────────────────
   Misure dell'artboard: corpo 15.2px, padding 13.6/17.6, il «Modifica»
   a pillola in coda.

   Il tasto sta al BORDO DESTRO, non attaccato al testo: e' cosi' nella
   v1 (`#vdBarSummary` ha `flex: 1 1 0%`, misurato: sommario 1056px e
   tasto a 13px) ed e' cosi' nell'artboard (`flex: 1` sul sommario). Il
   vuoto in mezzo e' voluto in entrambi, quindi qui si usa lo stesso
   `flex: 1 1 auto` invece di inventare un allineamento diverso. */
@media (min-width: 992px) {
    .v2-sel { padding: 13.6px 17.6px; }
    .v2-sel__bar { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; gap: 12.8px; }
    .v2-sum { font-size: 15.2px; flex: 1 1 auto; }
    .v2-cal__g, .v2-cal__vuoto { height: 58px; }
    .v2-cal__mese { font-size: 16.4px; }
    .v2-cal__frec { width: 36px; height: 36px; flex: 0 0 36px; }
}

/* ── il puntatore fine ────────────────────────────────────────────────
   L'hover si dichiara per CAPACITA', non per larghezza: un tablet largo
   1024 non ha il passaggio del mouse, e uno stato :hover che resta
   incollato dopo il tocco e' peggio di nessun hover. */
@media (hover: hover) and (pointer: fine) {
    .v2-cal__g:hover { filter: brightness(.96); }
    .v2-cal__g.is-scelto:hover { filter: none; }
    .v2-incl-btn:hover { border-color: #2e7d32; }
}

/* L'avviso della camera fuori tetto, quando «Fatto» non puo' applicare. */
.v2-avviso-forte {
    background: #fdf1dc; border-radius: 10px; padding: 9px 12px;
    color: #9a5b00 !important; font-weight: 600;
}

/* «Modifica la divisione» sotto le camere: dal 02/09 la divisione si fa nel
   pannello, in «Persone / Camere», quindi qui e' una seconda porta per la
   stessa cosa. Si NASCONDE, non si toglie dal DOM: lo strato v2 lo preme
   come ripiego se `window.vdSplit` non c'e'. */
.vd-split-edit { display: none !important; }

/* Il tasto del dock si nasconde davvero: `.vd-dock-cta` porta un `display`
   suo, che vincerebbe sull'attributo `hidden`. */
.vd-dock-cta[hidden] { display: none !important; }
.vd-split-note[hidden] { display: none !important; }

/* ── card della camera a tre righe (owner 02/09) ──────────────────────
   Titolo a tutta larghezza, nome camera a capo, e in fondo i chip a
   sinistra col prezzo a destra. Il pallino resta nella sua colonna. */
.v2-room--righe .vd-room-main { min-width: 0; flex: 1; }
.v2-room--righe .vd-room-name--who { display: block; width: 100%; }
.v2-room--righe .vd-room-sub--name { display: block; width: 100%; }
.v2-room--righe .v2-room-foot {
    display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px;
    margin-top: 7px; width: 100%;
}
/* Il prezzo si stacca a destra e cresce: nella riga in fondo condivide lo
   spazio con due chip piccoli, quindi 1.5rem non bastava piu' a farne la
   cosa che si legge per prima. */
.v2-room--righe .v2-room-foot .vd-room-price {
    margin-left: auto; white-space: nowrap; font-size: 1.75rem;
}
@media (min-width: 768px) {
    .v2-room--righe .v2-room-foot .vd-room-price { font-size: 1.9rem; }
}