/* 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-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; }

/* «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; }
:is(#vdSide, #fhSummary) .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. */
:is(#vdSide, #fhSummary) .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%);
}
:is(#vdSide, #fhSummary) .v2-side .v2-riep-head .v2-riep-occhiello { margin-bottom: .25rem; }
/* Lo stato «senza partenza» (owner 04/09) nella gemella: il box
   .vd-side-nodate porta i suoi blocchi col loro padding; la card v2 non
   ne aggiunge. */
#vdSide .v2-side .vd-side-nodate { margin: 0; }

 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; }

/* «Invia a un amico» (owner 05/09): nel riepilogo v2 restava vestito da
   sorella della v1 — largo quanto TUTTA la card, 42px di altezza, incollato
   al tasto «Cosa comprende la quota» sopra. Qui prende le misure di
   «Prenota» (rientro 16px come il piede, 48px di altezza, corpo 1rem) e
   uno stacco sopra e sotto. Si cerca come FIGLIO DIRETTO della card, la
   posizione in cui la v1 lo lascia sia nella gemella desktop sia nel
   clone del foglio mobile. */
.v2-riep > .of-share-btn--side {
    width: auto;
    margin: 12px 16px 14px;
    min-height: 48px;
    padding: 0 24px;
    font-size: 1rem;
}

/* ═══════════════════════════════════════════════════════════════════
   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; }
}