/* ============================================================
   /viaggi — landing di vendita HoEscape (Fase 3b)
   Design ricreato dai prototipi ai-workspace/design-viaggi/
   (mobile ≤768px «Landing HoEscape Finale», desktop ≥1024px
   «... Desktop»). Mobile-first, un solo template responsive.
   Token brand riusati da hoescape.css (--hoescape-*) con
   fallback: /viaggi risponde anche quando il portale non
   risolve (dev/test) e html[data-skin="hoe"] è assente.
   Prefisso classi: .vl- (viaggi landing).
   ============================================================ */

.vl-landing {
    --vl-navy: var(--hoescape-primary, #1e3c72);
    --vl-navy-dark: var(--hoescape-primary-dark, #152a4f);
    --vl-navy-hero: #0d1c33;
    --vl-lime: var(--hoescape-accent, #a4c639);
    --vl-lime-hover: var(--hoescape-accent-hover, #8fb02e);
    --vl-orange: #f5a623;
    --vl-alarm: #e4572e;
    --vl-tint: #f6faef;
    --vl-gray-400: #8a94a0; /* era #adb5bd: 2,07:1 su bianco, FAIL AA */
    --vl-gray-500: var(--hoescape-gray-500, #6c757d);
    --vl-gray-700: var(--hoescape-gray-700, #495057);
    /* leggibilità mobile 02/08: i testi secondari (partenza, trattamento,
       «a persona», posti) stavano su --vl-gray-500 = 4,68:1 su bianco —
       passa AA per il corpo, ma NON a 10-11px su uno schermo al sole.
       --vl-muted è lo stesso neutro un gradino più scuro: 7,4:1, AAA.
       Palette invariata: nessun colore nuovo, solo più contrasto. */
    --vl-muted: #4d5966;
    --vl-border: rgba(26, 58, 92, .12);
    --vl-field-border: rgba(26, 58, 92, .18);
    --vl-shadow-card: 0 4px 20px rgba(26, 58, 92, .07);
    --vl-shadow-card-lg: 0 4px 24px rgba(26, 58, 92, .08);
    --vl-shadow-float: 0 14px 44px rgba(13, 28, 51, .22);
    --vl-radius: 16px;
    --vl-radius-field: 12px;
    font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    color: var(--vl-navy);
    background: #fff;
    -webkit-font-smoothing: antialiased;
}
.vl-landing a { color: inherit; text-decoration: none; }

/* Container: fedele al prototipo — colonna 480px sotto i 1024px,
   container 1200px dal breakpoint desktop in su. */
.vl-wrap { width: 100%; max-width: 480px; margin: 0 auto; }

.vl-sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------- keyframes ---------- */
@keyframes vl-marq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes vl-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.028); } }
@keyframes vl-up { from { transform: translateY(130%); } to { transform: translateY(0); } }
@keyframes vl-blink { 0%, 100% { opacity: 1; } 50% { opacity: .2; } }
@keyframes vl-progress { from { width: 0; } to { width: 100%; } }
@media (prefers-reduced-motion: reduce) {
    /* F3: senza animazione il nastro deve restare esplorabile a mano */
    .vl-marquee { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .vl-marquee-track { width: max-content; }
    .vl-landing *, .vl-landing *::before, .vl-landing *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* ---------- hero "storie" ---------- */
.vl-hero { position: relative; height: 460px; overflow: hidden; background: var(--vl-navy-hero); color: #fff; }
.vl-hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.1s ease; }
.vl-hero-slide.is-active { opacity: 1; }
.vl-hero-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vl-hero-shade {
    position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(13, 28, 51, .58) 0%, rgba(13, 28, 51, .22) 32%, rgba(13, 28, 51, .88) 72%, rgba(13, 28, 51, .96) 100%);
}
.vl-hero-bars { position: absolute; top: 14px; left: 16px; right: 16px; display: flex; gap: 6px; z-index: 3; pointer-events: none; }
.vl-hero-bar { flex: 1; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .35); overflow: hidden; }
.vl-hero-bar-fill { display: block; height: 100%; width: 0; border-radius: 2px; background: var(--vl-lime); }
.vl-hero-bar.is-done .vl-hero-bar-fill { width: 100%; }
.vl-hero-bar.is-active .vl-hero-bar-fill { animation: vl-progress 4.5s linear forwards; }
.vl-hero-kicker {
    position: absolute; top: 30px; left: 16px; z-index: 2;
    background: rgba(13, 28, 51, .55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, .35); color: #fff;
    font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
    padding: 7px 12px; border-radius: 999px;
}
.vl-hero-cd {
    position: absolute; top: 30px; right: 16px; z-index: 3;
    background: var(--vl-lime); color: var(--vl-navy);
    font-size: 11.5px; font-weight: 800; letter-spacing: .04em;
    padding: 7px 12px; border-radius: 999px; font-variant-numeric: tabular-nums;
}
.vl-hero-caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 16px 26px; z-index: 2; }
.vl-hero-place { font-size: 52px; font-weight: 800; line-height: .98; letter-spacing: -.035em; margin: 0; color: #fff; text-shadow: 0 2px 18px rgba(13, 28, 51, .55), 0 1px 3px rgba(13, 28, 51, .6); }
.vl-hero-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.vl-hero-dep {
    display: inline-flex; align-items: center; gap: 7px;
    background: rgba(13, 28, 51, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    border: 1px solid rgba(164, 198, 57, .55);
    color: var(--vl-lime); font-size: 11px; font-weight: 800; letter-spacing: .04em;
    padding: 6px 11px; border-radius: 999px;
}
.vl-hero-price { display: flex; align-items: baseline; gap: 7px; }
.vl-hero-price-from { font-size: 13px; font-weight: 700; color: rgba(255, 255, 255, .88); text-shadow: 0 1px 6px rgba(13, 28, 51, .5); }
.vl-hero-price-val { font-size: 34px; font-weight: 800; line-height: 1; color: #fff; text-shadow: 0 1px 10px rgba(13, 28, 51, .55); }
.vl-hero-price-unit { font-size: 11px; font-weight: 700; color: rgba(255, 255, 255, .7); }

/* hero fallback statico (nessuna slide con partenze) */
.vl-hero--static .vl-hero-caption { bottom: 24px; }
.vl-hero--static .vl-hero-place { font-size: 34px; }
.vl-hero-sub { font-size: 15px; font-weight: 500; line-height: 1.45; color: rgba(255, 255, 255, .92); margin: 9px 0 0; }

/* ============================================================
   HERO CHE VENDE — promessa fissa + offerta viva cliccabile
   Spec: docs/superpowers/specs/2026-08-02-viaggi-hero-vendita-design.md
   TUTTO scoped sotto .vl-hero--sell: le regole .vl-hero* di base
   restano condivise con templates/public/viaggi/destinazione.html,
   che NON deve cambiare aspetto.
   Mobile-first: qui ≤768px, il desktop è nella media query in fondo.
   ============================================================ */

.vl-hero--sell { height: 420px; }
.vl-hero--sell .vl-hero-shade {
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(180deg, rgba(13, 28, 51, .78) 0%,
                rgba(13, 28, 51, .30) 38%, rgba(13, 28, 51, .90) 100%);
}
.vl-hero-stage {
    position: absolute; inset: 0; z-index: 2;
    display: flex; flex-direction: column; justify-content: space-between;
    padding: 16px 16px 18px;
}

/* — promessa: non ruota mai. Owner 11/08: via kicker/sottotitolo/punti
   fiducia, resta solo il titolo — meno testo sopra la piega, più spazio
   alla card viva. — */
.vl-promise-title {
    font-size: 29px; font-weight: 800; line-height: 1.06;
    letter-spacing: -.03em; margin: 0; color: #fff;
    text-shadow: 0 2px 18px rgba(13, 28, 51, .55);
}
.vl-promise-title em { font-style: normal; color: var(--vl-lime); }

/* — offerta viva: chip di VETRO sulla foto, non più un riquadro bianco
   opaco (owner 11/08 «troppo pieno... un overlay, non quel mattone»).
   Stesso trattamento del chip .vl-hero-dep già in uso più sopra: sfondo
   navy translucido + blur, testo chiaro — la card si legge come parte
   della foto, non come un pannello incollato sopra.
   Il colore va agganciato al modificatore: `.vl-landing a {color: inherit}`
   (0,1,1) batterebbe `.vl-live-card` (0,1,0) e la card erediterebbe il
   bianco della hero, restando illeggibile. */
.vl-live { position: relative; }
.vl-hero--sell .vl-live-card {
    display: none; text-decoration: none; color: #fff;
    background: rgba(13, 28, 51, .4);
    -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: var(--vl-radius);
    padding: 16px 17px 17px; box-shadow: 0 14px 40px rgba(13, 28, 51, .35);
    position: relative;
}
.vl-hero--sell .vl-live-card.is-active { display: block; }
.vl-live-badge {
    display: inline-block; font-size: 11.5px; font-weight: 800;
    letter-spacing: .04em; text-transform: uppercase;
    padding: 6px 11px; border-radius: 999px; margin-bottom: 10px;
}
/* il colore del badge dice CHE TIPO di leva è, a colpo d'occhio —
   già colori pieni: risaltano da soli sul vetro, niente più tint chiaro */
.vl-live-badge--imminent { background: var(--vl-orange); color: #2b1a00; }
.vl-live-badge--last-seats { background: var(--vl-alarm); color: #fff; }
.vl-live-badge--cheapest,
.vl-live-badge--cheaper-month { background: var(--vl-lime); color: #17240a; }
/* pinnata (owner 11/08): chip di vetro chiaro, non un colore vivido —
   non prova un'urgenza/scarsità/prezzo, è una scelta editoriale */
.vl-live-badge--featured {
    background: rgba(255, 255, 255, .18);
    border: 1px solid rgba(255, 255, 255, .3); color: #fff;
}
.vl-live-place {
    display: block; font-size: 24.5px; font-weight: 800; line-height: 1.12;
    letter-spacing: -.02em; color: #fff;
}
.vl-live-facts {
    display: flex; flex-wrap: wrap; gap: 5px 12px; margin-top: 8px;
    font-size: 13px; font-weight: 600; line-height: 1.4;
    color: rgba(255, 255, 255, .78);
}
.vl-live-proof {
    display: block; margin-top: 6px; font-size: 12px; font-weight: 700;
    color: rgba(255, 255, 255, .68);
}
/* prezzo e CTA su un rigo, non più assoluti: senza pannello bianco sotto
   non serve riservare uno spazio fisso al tasto */
.vl-live-bottom {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; margin-top: 13px;
}
.vl-live-price { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.vl-live-price-from { font-size: 13px; font-weight: 700; color: rgba(255, 255, 255, .72); }
.vl-live-price-val { font-size: 30px; font-weight: 800; line-height: 1; color: #fff; }
.vl-live-price-unit { font-size: 12px; font-weight: 700; color: rgba(255, 255, 255, .72); }
.vl-live-cta {
    flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px;
    background: var(--vl-lime); color: var(--vl-navy);
    font-size: 13px; font-weight: 800;
    padding: 9px 14px; border-radius: 999px;
}

/* barre: dentro la zona card, CLICCABILI (6 slide non si guardano in 27s) */
.vl-hero--sell .vl-hero-bars {
    position: static; margin-top: 12px; pointer-events: auto;
}
.vl-hero--sell .vl-hero-bar {
    padding: 0; border: 0; cursor: pointer; appearance: none;
    min-height: 22px; display: flex; align-items: center;
    background: none; /* l'area cliccabile è alta, la barra resta sottile */
}
.vl-hero--sell .vl-hero-bar::before {
    content: ''; display: block; width: 100%; height: 3px;
    border-radius: 2px; background: rgba(255, 255, 255, .35);
}
.vl-hero--sell .vl-hero-bar .vl-hero-bar-fill { display: none; }
.vl-hero--sell .vl-hero-bar.is-done::before,
.vl-hero--sell .vl-hero-bar.is-active::before { background: var(--vl-lime); }
.vl-hero--sell .vl-hero-bar:focus-visible {
    outline: 2px solid #fff; outline-offset: 3px; border-radius: 4px;
}

/* ---------- motore di ricerca ---------- */
.vl-search {
    /* mobile: box sotto l'hero, niente sovrapposizione (owner 31/07 21:13) */
    position: relative; z-index: 5; margin: 14px 14px 0;
    background: #fff; border: 1px solid rgba(26, 58, 92, .08);
    border-radius: 18px; box-shadow: var(--vl-shadow-float);
    padding: 18px 16px 16px; display: block;
}
.vl-search-head { display: flex; align-items: center; justify-content: space-between; gap: 8px 10px; flex-wrap: wrap; }
.vl-search-title { font-size: 17px; font-weight: 800; letter-spacing: -.01em; }
.vl-search-live { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--vl-muted); }
.vl-live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--vl-lime); display: block; animation: vl-blink 1.6s ease-in-out infinite; }
/* mobile: un campo per riga. In due colonne da 160px nessun corpo
   leggibile fa entrare «Tutti gli aeroporti» dentro il <select> — si
   leggeva «Tutti gli aero…» — e i due tasti −/+ dello stepper restavano
   schiacciati in 75px. Su desktop resta la riga unica a 6 colonne. */
.vl-search-grid { display: grid; grid-template-columns: 1fr; gap: 13px; margin-top: 14px; }
/* un grid item ha min-width:auto e NON scende sotto la larghezza
   intrinseca del contenuto: senza questo il <select> sfonda la colonna */
.vl-search-grid > *, .vl-search-pax > * { min-width: 0; }
.vl-search-pax { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; min-width: 0; }
.vl-field-label { display: block; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; color: var(--vl-muted); margin-bottom: 6px; text-transform: uppercase; }
.vl-field {
    width: 100%; height: 52px; border: 1.5px solid var(--vl-field-border);
    border-radius: var(--vl-radius-field); background: var(--vl-tint); color: var(--vl-navy);
    /* 16px non è estetica: sotto questa soglia Safari iOS zooma la pagina
       al focus del campo e l'utente si ritrova la landing sformata */
    font-family: inherit; font-size: 16px; font-weight: 600; padding: 0 12px;
    outline: none; box-sizing: border-box; appearance: auto;
}
.vl-field:focus { border-color: var(--vl-lime-hover); }
.vl-stepper {
    display: flex; align-items: center; justify-content: space-between;
    height: 52px; border: 1.5px solid var(--vl-field-border);
    border-radius: var(--vl-radius-field); background: var(--vl-tint); padding: 0 5px;
}
.vl-step-btn {
    width: 38px; height: 38px; border-radius: 10px; border: 1px solid rgba(26, 58, 92, .15);
    background: #fff; color: var(--vl-navy); font-family: inherit;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 18px; cursor: pointer; padding: 0; line-height: 1;
}
.vl-step-btn--plus { background: var(--vl-navy); border-color: var(--vl-navy); color: #fff; }
.vl-step-val { font-size: 18px; font-weight: 800; }
.vl-ages {
    grid-column: 1 / -1; /* riga intera della griglia, sopra la CTA */ margin-top: 10px; padding: 12px; background: var(--vl-tint); border: 1.5px dashed rgba(26, 58, 92, .22); border-radius: var(--vl-radius-field); }
.vl-ages[hidden] { display: none; }
.vl-ages-title { display: block; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; color: var(--vl-muted); text-transform: uppercase; }
.vl-ages-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.vl-age-label { display: block; font-size: 12px; font-weight: 700; color: var(--vl-navy); margin-bottom: 4px; }
.vl-age-select {
    width: 100%; height: 46px; border: 1.5px solid var(--vl-field-border); border-radius: 10px;
    background: #fff; color: var(--vl-navy); font-family: inherit;
    font-size: 16px; font-weight: 600; padding: 0 10px; outline: none;
}
.vl-ages-note { display: block; font-size: 12.5px; font-weight: 600; color: var(--vl-muted); margin-top: 9px; line-height: 1.45; }
.vl-search-cta {
    grid-column: 1 / -1; /* mobile: riga intera della griglia 2 col (owner 31/07) */
    display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
    background: var(--vl-lime); color: var(--vl-navy); border: 0; cursor: pointer;
    height: 58px; border-radius: 14px; font-family: inherit; font-size: 17px; font-weight: 800;
    margin-top: 14px; box-shadow: 0 8px 24px rgba(164, 198, 57, .35);
    animation: vl-pulse 2.6s ease-in-out infinite;
}
.vl-search-cta:hover { background: var(--vl-lime-hover); }
.vl-search-summary { text-align: center; font-size: 12.5px; font-weight: 600; color: var(--vl-muted); margin-top: 10px; min-height: 1em; }

/* risultati ricerca: hanno una PAGINA propria dal 01/08
   (/viaggi/risultati → static/css/viaggi-risultati.css, prefisso .vr-). */

/* ---------- carosello offerte (marquee) ---------- */
.vl-week { padding: 30px 0 28px; background: #fff; }
.vl-week-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; padding: 0 18px 16px; }
.vl-pill { display: inline-block; background: rgba(164, 198, 57, .22); color: var(--vl-navy); font-size: 11px; font-weight: 800; letter-spacing: .08em; padding: 6px 10px; border-radius: 999px; text-transform: uppercase; }
.vl-pill--navy { background: var(--vl-navy); color: #fff; }
.vl-week-title { font-size: 28px; font-weight: 800; line-height: 1.14; letter-spacing: -.022em; margin: 10px 0 0; }
.vl-week-hint { font-size: 11.5px; font-weight: 700; color: var(--vl-muted); white-space: nowrap; padding-bottom: 4px; }
.vl-marquee { overflow: hidden; }
.vl-marquee-track { display: flex; gap: 12px; width: max-content; padding: 0 18px; animation: vl-marq 46s linear infinite; }
.vl-marquee:hover .vl-marquee-track { animation-play-state: paused; }
.vl-offer-card {
    display: block; width: 240px; background: #fff; border: 1px solid rgba(26, 58, 92, .1);
    border-radius: var(--vl-radius); overflow: hidden; box-shadow: var(--vl-shadow-card-lg);
}
.vl-offer-media { height: 148px; position: relative; background: var(--vl-tint); }
.vl-offer-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* badge tipo prodotto sulla foto (owner 01/08 sera): lime = Volo + Hotel,
   arancio = Tour, così i due tipi si distinguono a colpo d'occhio */
.vl-offer-badge {
    position: absolute; top: 8px; left: 8px; background: var(--vl-lime); color: var(--vl-navy);
    font-size: 9.5px; font-weight: 800; padding: 4px 9px; border-radius: 999px;
    text-transform: uppercase; letter-spacing: .04em;
}
.vl-offer-badge--tour { background: var(--vl-orange); }
.vl-offer-body { padding: 15px 15px 17px; }
.vl-offer-kicker { font-size: 12.5px; font-weight: 800; letter-spacing: .05em; line-height: 1.35; color: var(--vl-muted); text-transform: uppercase; }
.vl-offer-title { font-weight: 700; font-size: 16px; margin: 7px 0 0; line-height: 1.35; }
/* prezzo + «Scopri» su un rigo unico (owner 01/08 sera); «a persona» può
   andare a capo dentro il blocco prezzo, il tasto non si comprime mai */
.vl-offer-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 14px; }
.vl-offer-price { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.vl-price-from { font-size: 12px; font-weight: 700; color: var(--vl-muted); }
.vl-price-val { font-size: 26px; font-weight: 800; color: var(--vl-navy); letter-spacing: -.015em; }
.vl-price-unit { font-size: 12px; color: var(--vl-muted); font-weight: 600; }

/* ---------- deal list + tabellone ---------- */
.vl-deals { display: flex; flex-direction: column; gap: 14px; padding: 0 14px 26px; }
/* swap AJAX «Partenza da?»: attesa visibile, niente doppi input */
.vl-deals--loading { opacity: .55; pointer-events: none; transition: opacity .15s ease; }
.vl-deals-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.vl-rule { display: flex; align-items: center; gap: 8px; padding: 2px 4px 0; }
.vl-rule-label { font-size: 12.5px; font-weight: 800; letter-spacing: .12em; color: var(--vl-navy); }
.vl-rule-line { flex: 1; height: 1px; background: rgba(26, 58, 92, .15); }
.vl-deal {
    display: flex; flex-wrap: wrap; gap: 13px; padding: 16px;
    background: #fff; border: 1px solid var(--vl-border);
    border-radius: var(--vl-radius); box-shadow: var(--vl-shadow-card);
}
.vl-deal-photo { width: 108px; height: 108px; border-radius: 12px; overflow: hidden; flex-shrink: 0; position: relative; display: block; background: var(--vl-tint); }
.vl-deal-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vl-deal-badge {
    position: absolute; top: 6px; left: 6px; background: var(--vl-orange); color: var(--vl-navy);
    font-size: 9.5px; font-weight: 800; padding: 3px 7px; border-radius: 999px; text-transform: uppercase;
}
.vl-deal-info { flex: 1; min-width: 0; }
/* gerarchia della card: destinazione → hotel → dettagli → prezzo → tasto.
   Il kicker sale a 11,5px e si scurisce: era il primo dato che si legge
   ma il più piccolo di tutti. */
.vl-deal-kicker { display: block; font-size: 11.5px; font-weight: 800; letter-spacing: .07em; color: var(--vl-muted); text-transform: uppercase; }
.vl-deal-title { display: block; font-weight: 700; font-size: 18px; line-height: 1.28; margin: 5px 0 0; letter-spacing: -.01em; }
.vl-deal-stars { color: var(--vl-lime); font-size: .82rem; white-space: nowrap; margin-left: 5px; }
.vl-deal-meta { display: block; font-size: 13px; color: var(--vl-muted); margin-top: 7px; font-weight: 600; line-height: 1.5; }
.vl-deal-price { display: flex; align-items: baseline; gap: 6px; margin-top: 6px; }
/* prezzo nella riga del CTA (owner 01/08 sera): «da … a persona» a sinistra,
   «Prenota» a destra; se sul mobile non ci sta, il tasto scende a capo */
.vl-deal-side {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px 10px; width: 100%; flex-wrap: wrap;
}
/* la riga prezzo+tasto si stacca dai dettagli con un filo: su mobile
   «trattamento» e «da €522 a persona» erano due righe indistinguibili.
   Solo dove il prezzo vive DAVVERO in questa riga: su /viaggi/<meta> il
   prezzo sta nell'info e il filo resterebbe orfano sopra il solo tasto. */
.vl-deal-side:has(.vl-deal-price) {
    border-top: 1px solid var(--vl-border); padding-top: 13px; margin-top: 1px;
}
.vl-deal-side .vl-deal-price { margin-top: 0; }
.vl-deal-side .vl-deal-cta { margin-left: auto; }
.vl-seats { font-size: 12px; font-weight: 700; color: var(--vl-muted); }
.vl-seats--low { color: var(--vl-alarm); }
.vl-deal-cta {
    background: var(--vl-lime); color: var(--vl-navy); font-size: 14.5px; font-weight: 800;
    padding: 14px 20px; border-radius: 12px; white-space: nowrap; display: inline-block;
}
.vl-deal-cta:hover { background: var(--vl-lime-hover); }

/* tabellone partenze — card bianca come le card deal (design 01/08) */
.vl-board {
    background: #fff; border: 1.5px solid var(--vl-border);
    box-shadow: var(--vl-shadow-card); border-radius: var(--vl-radius);
    overflow: hidden; margin-top: 8px; color: var(--vl-navy);
}
.vl-board-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 14px 10px; }
.vl-board-head--tour { border-top: 1px solid var(--vl-border); }
.vl-board-title { font-size: 12px; font-weight: 800; letter-spacing: .1em; line-height: 1.4; color: var(--vl-navy); text-transform: uppercase; }
.vl-board-title--tour { color: var(--vl-orange); }
.vl-board-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--vl-lime); display: block; animation: vl-blink 1.2s steps(1, end) infinite; }
.vl-board-grid { display: block; }
.vl-board-row { display: flex; align-items: center; gap: 11px; padding: 13px 14px; border-top: 1px solid rgba(26, 58, 92, .08); color: var(--vl-navy); }
.vl-board-when { width: 94px; flex-shrink: 0; }
.vl-board-date { display: block; font-size: 12.5px; font-weight: 800; color: var(--vl-lime-hover); text-transform: uppercase; }
.vl-board-row--tour .vl-board-date { color: var(--vl-orange); }
.vl-board-from { display: block; font-size: 11px; font-weight: 700; color: var(--vl-muted); margin-top: 3px; }
.vl-board-main { flex: 1; min-width: 0; }
/* prima: nowrap + ellipsis su una riga sola → «GLAROS BEACH HOTEL …»,
   «TOUR TURCHIA OTTOM…». Su 390px il nome non ci sta MAI: due righe
   piene sono più leggibili di una riga tagliata. */
.vl-board-dest {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    font-size: 14.5px; font-weight: 700; line-height: 1.3; color: var(--vl-navy);
    overflow: hidden; white-space: normal; /* esplicito: annulla il nowrap */
}
a.vl-board-row:hover .vl-board-dest { color: var(--vl-lime-hover); }
.vl-board-right { text-align: right; flex-shrink: 0; }
.vl-board-price { display: block; font-size: 21px; font-weight: 800; color: var(--vl-navy); letter-spacing: -.015em; }
.vl-board-seats { display: block; font-size: 11px; font-weight: 700; color: var(--vl-muted); margin-top: 3px; }
.vl-board-seats--low { color: var(--vl-alarm); }
.vl-board-note { padding: 12px 14px 16px; }
.vl-board-note span { display: block; font-size: 11.5px; font-weight: 600; line-height: 1.45; color: var(--vl-muted); }
.vl-all-btn {
    display: flex; align-items: center; justify-content: center; height: 56px;
    border: 1.5px solid var(--vl-navy); border-radius: 14px; font-size: 15.5px; font-weight: 700;
}
.vl-all-btn:hover { background: var(--vl-tint); }

/* ---------- destinazioni ---------- */
/* full width (owner 01/08 sera): la sezione non ha più padding laterale,
   il collage corre da bordo a bordo; il cappello resta dentro .vl-dest-inner */
.vl-dest { padding: 28px 0 30px; background: var(--vl-tint); }
.vl-dest-inner { padding: 0 18px; }
.vl-dest-title { font-size: 28px; font-weight: 800; line-height: 1.14; letter-spacing: -.022em; margin: 12px 0 0; }
/* collage alla Netflix: mosaico denso, finestre grandi 2×2 fra le piccole */
.vl-dest-collage {
    display: grid; grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 118px; grid-auto-flow: dense; gap: 7px; margin-top: 18px;
}
.vl-dest-collage .vl-dest-card { height: 100%; border-radius: 10px; }
.vl-dest-card--big { grid-column: span 2; grid-row: span 2; }
.vl-dest-card { position: relative; height: 148px; border-radius: 14px; overflow: hidden; display: block; background: var(--vl-navy-dark); }
.vl-dest-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* il velo parte più in alto e chiude più scuro: i nomi delle mete stavano
   su foto chiare (spiagge, cielo) e il bianco ci si perdeva dentro */
.vl-dest-shade { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 28%, rgba(21, 42, 79, .55) 62%, rgba(21, 42, 79, .92)); pointer-events: none; }
.vl-dest-caption { position: absolute; left: 12px; right: 12px; bottom: 11px; pointer-events: none; }
.vl-dest-name { display: block; font-weight: 800; font-size: 19px; line-height: 1.22; color: #fff; text-shadow: 0 1px 6px rgba(13, 28, 51, .5); }
.vl-dest-count { display: block; font-size: 14px; color: var(--vl-lime); font-weight: 700; margin-top: 2px; }

/* ---------- garanzie ---------- */
.vl-why { padding: 30px 18px; background: #fff; }
.vl-why-title { font-size: 28px; font-weight: 800; line-height: 1.14; letter-spacing: -.022em; margin: 0; }
.vl-why-grid { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; }
.vl-why-card { display: flex; gap: 14px; align-items: flex-start; padding: 16px; background: var(--vl-tint); border-radius: 14px; }
.vl-why-num {
    font-size: 16px; font-weight: 800; color: var(--vl-navy); background: var(--vl-lime);
    width: 31px; height: 31px; border-radius: 9px; display: flex; align-items: center;
    justify-content: center; flex-shrink: 0;
}
.vl-why-head { display: block; font-weight: 700; font-size: 16px; line-height: 1.3; }
.vl-why-text { display: block; font-size: 13.5px; line-height: 1.5; color: var(--vl-gray-700); margin-top: 5px; font-weight: 500; }

/* ---------- recensioni (dietro flag show_reviews) ---------- */
.vl-reviews { padding: 26px 0 28px; background: var(--vl-tint); }
.vl-reviews-head { padding: 0 18px 14px; }
.vl-reviews-title { font-size: 24px; font-weight: 800; line-height: 1.15; letter-spacing: -.02em; margin: 8px 0 0; }
.vl-review-card { width: 252px; background: #fff; border-radius: 14px; padding: 16px; box-shadow: var(--vl-shadow-card-lg); flex-shrink: 0; }
.vl-review-stars { color: var(--vl-lime); font-size: 13px; letter-spacing: 2px; }
.vl-review-text { font-size: 13px; line-height: 1.5; margin-top: 8px; font-weight: 500; }
.vl-review-author { font-size: 11px; font-weight: 700; color: var(--vl-gray-500); margin-top: 10px; text-transform: uppercase; }
.vl-reviews .vl-marquee-track { animation-duration: 50s; }

/* ---------- CTA finale ---------- */
.vl-final { padding: 32px 18px 36px; background: var(--vl-navy-dark); color: #fff; text-align: center; }
.vl-final-kicker { font-size: 11.5px; font-weight: 800; letter-spacing: .13em; line-height: 1.4; color: var(--vl-lime); text-transform: uppercase; }
.vl-cd-blocks { display: flex; gap: 8px; justify-content: center; margin-top: 12px; }
.vl-cd-block { background: rgba(255, 255, 255, .08); border-radius: 12px; padding: 11px 14px; min-width: 66px; }
.vl-cd-num { display: block; font-size: 28px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.vl-cd-label { display: block; font-size: 9px; font-weight: 700; letter-spacing: .1em; color: rgba(255, 255, 255, .6); margin-top: 6px; }
.vl-final-title { font-size: 30px; font-weight: 800; line-height: 1.1; letter-spacing: -.025em; margin: 20px 0 0; color: #fff; }
.vl-final-title em { font-style: normal; color: var(--vl-lime); }
.vl-final-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.vl-final-cta {
    display: flex; align-items: center; justify-content: center; height: 58px;
    background: var(--vl-lime); color: var(--vl-navy); border-radius: 14px;
    font-size: 16.5px; font-weight: 800;
}
.vl-final-cta:hover { background: var(--vl-lime-hover); color: var(--vl-navy); }
.vl-final-wa {
    display: flex; align-items: center; justify-content: center; height: 56px;
    border-radius: 14px; font-size: 15.5px; font-weight: 700;
    border: 1.5px solid rgba(255, 255, 255, .45); color: #fff;
}
.vl-final-wa:hover { border-color: var(--vl-lime); color: var(--vl-lime); }

/* ---------- sticky promo ---------- */

/* ============================================================
   Desktop ≥1024px — fedele a «Landing HoEscape Finale Desktop»
   ============================================================ */
@media (min-width: 1024px) {
    .vl-wrap { max-width: 1200px; padding: 0 24px; }

    /* hero */
    .vl-hero { height: 680px; }

    /* ---- hero che vende: due zone affiancate (spec 2026-08-02 §2.1) ----
       560px invece di 680: la vecchia altezza spingeva il motore di
       ricerca sotto la piega su un portatile da 900px. */
    .vl-hero--sell { height: 560px; }
    .vl-hero--sell .vl-hero-shade {
        background: linear-gradient(100deg, rgba(13, 28, 51, .92) 0%,
                    rgba(13, 28, 51, .72) 46%, rgba(13, 28, 51, .32) 100%);
    }
    .vl-hero-stage {
        flex-direction: row; align-items: center; gap: 48px;
        justify-content: flex-start;
        left: 50%; right: auto; transform: translateX(-50%);
        width: 100%; max-width: 1200px; box-sizing: border-box;
        padding: 0 24px 72px;
    }
    .vl-promise { flex: 1 1 auto; max-width: 620px; }
    .vl-promise-title { font-size: 54px; letter-spacing: -.035em; }
    .vl-live { flex: 0 0 340px; }
    .vl-hero--sell .vl-live-card { padding: 18px 20px 20px; }
    .vl-hero--sell .vl-live-card:hover { transform: translateY(-2px); }
    .vl-hero--sell .vl-live-card { transition: transform .2s ease; }
    .vl-live-place { font-size: 26px; }
    .vl-live-price-val { font-size: 34px; }
    .vl-live-cta { padding: 10px 16px; font-size: 13.5px; }
    .vl-hero--sell .vl-hero-bars {
        position: static; transform: none; width: auto; max-width: none;
        margin-top: 14px;
    }

    .vl-hero-bars { top: 18px; left: 24px; right: 24px; gap: 8px; }
    .vl-hero-kicker { top: 38px; left: 24px; font-size: 11.5px; padding: 8px 14px; }
    .vl-hero-cd { top: 38px; right: 24px; font-size: 13px; padding: 8px 16px; }
    .vl-hero-caption { padding: 0 24px 96px; left: 50%; right: auto; transform: translateX(-50%); width: 100%; max-width: 1200px; box-sizing: border-box; }
    .vl-hero-bars { left: 50%; transform: translateX(-50%); width: calc(100% - 48px); max-width: 1152px; }
    /* max(): sotto i 1200px di viewport il calc diventerebbe negativo */
    .vl-hero-kicker { left: max(24px, calc(50% - 576px)); }
    .vl-hero-cd { right: max(24px, calc(50% - 576px)); }
    .vl-hero-place { font-size: 88px; line-height: .96; letter-spacing: -.04em; max-width: 820px; }
    .vl-hero-row { gap: 16px; margin-top: 16px; }
    .vl-hero-dep { font-size: 13px; padding: 8px 14px; }
    .vl-hero-price-val { font-size: 46px; }
    .vl-hero-price-from, .vl-hero-price-unit { font-size: 13px; }

    /* ricerca: 6 campi in una riga */
    .vl-search { max-width: 1152px; margin: -64px auto 0; border-radius: 20px; box-shadow: 0 18px 54px rgba(13, 28, 51, .22); padding: 20px 20px 16px; }
    .vl-search-title { font-size: 16px; }
    .vl-search-live { font-size: 11px; }
    .vl-search-grid { grid-template-columns: 1.15fr 1.15fr .95fr .8fr .8fr 1fr; gap: 10px; margin-top: 14px; align-items: end; }
    .vl-search-pax { display: contents; }
    .vl-field, .vl-stepper { height: 52px; }
    .vl-field { font-size: 14px; padding: 0 12px; }
    .vl-field-label { font-size: 10px; margin-bottom: 5px; }
    .vl-step-btn { width: 34px; height: 34px; font-size: 16px; }
    .vl-step-val { font-size: 16px; }
    .vl-ages { order: 99; } /* desktop: eta in riga sotto, CTA in riga coi campi */
    /* durata (bug 11/08): senza un order esplicito è un 7° grid item
       order:0 in mezzo ai 6 che riempiono la riga — essendo a piena
       larghezza (grid-column:1/-1 qui sotto) l'auto-placement non riesce
       a incastrarlo e spinge la CTA a una riga propria. Con order tra 0
       (i 6 campi) e 99 (età) prende la sua riga SOTTO i campi e SOPRA
       il pannello età, senza spostare nient'altro. */
    .vl-durations { order: 50; }
    .vl-search-cta { grid-column: auto; width: auto; height: 52px; margin-top: 0; border-radius: 12px; font-size: 15px; white-space: nowrap; padding: 0 18px; }
    .vl-ages { margin-top: 12px; padding: 14px; display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
    .vl-ages[hidden] { display: none; }
    .vl-ages-title { padding-bottom: 14px; }
    .vl-ages-grid { display: flex; gap: 12px; margin-top: 0; flex-wrap: wrap; }
    .vl-ages-grid > label { width: 130px; }
    .vl-age-select { height: 42px; font-size: 13.5px; padding: 0 10px; }
    .vl-ages-note { margin-top: 0; padding-bottom: 12px; font-size: 11px; }
    .vl-search-summary { text-align: left; font-size: 11.5px; margin-top: 10px; }

    /* carosello */
    .vl-week { padding: 34px 0 30px; }
    .vl-week-head { max-width: 1200px; margin: 0 auto; padding: 0 24px 18px; }
    .vl-week-title { font-size: 34px; letter-spacing: -.025em; margin-top: 10px; }
    .vl-marquee-track { gap: 14px; padding: 0 24px; }
    .vl-offer-card { width: 250px; }
    .vl-offer-media { height: 150px; }
    .vl-offer-body { padding: 14px 15px 16px; }
    .vl-offer-title { font-size: 15px; }
    .vl-price-val { font-size: 24px; }

    /* sezioni impilate a tutta larghezza, niente colonna sticky
       (design 01/08): MARE 2×2, TOUR affiancati, tabellone sotto con
       le righe su 2 colonne (mare 3+3, tour 2+1) */
    .vl-deals { max-width: 1200px; margin: 0 auto; padding: 8px 24px 34px; display: flex; flex-direction: column; gap: 20px; }
    .vl-deals-col { gap: 12px; }
    .vl-deal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: stretch; }
    .vl-board { margin-top: 0; }
    .vl-deal { gap: 14px; padding: 14px; flex-wrap: wrap; }
    .vl-deal-photo { width: 120px; height: 110px; }
    .vl-deal-title { font-size: 17px; }
    .vl-deal-meta { font-size: 12px; }
    /* riga in fondo come su mobile: posti a sinistra, CTA a destra */
    .vl-seats { font-size: 10.5px; }
    .vl-deal-cta { font-size: 13px; padding: 13px 22px; }
    .vl-board-head { padding: 16px 16px 8px; }
    .vl-board-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; padding: 0 16px 4px; }
    .vl-board-row { padding: 12px 0; }
    .vl-board-when { width: 86px; }
    .vl-board-dest { font-size: 12.5px; }
    .vl-board-price { font-size: 18px; }
    .vl-board-note { padding: 12px 16px 16px; }
    .vl-all-btn { height: 54px; font-size: 14.5px; }

    /* destinazioni 3 colonne */
    .vl-dest { padding: 38px 0 42px; }
    .vl-dest-inner { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
    .vl-dest-title { font-size: 34px; letter-spacing: -.025em; margin-top: 12px; }
    .vl-dest-collage { grid-template-columns: repeat(5, 1fr); grid-auto-rows: 150px; gap: 8px; margin-top: 20px; }
    .vl-dest-card { height: 190px; border-radius: 16px; }
    .vl-dest-caption { left: 14px; right: 14px; bottom: 12px; }
    .vl-dest-name { font-size: 20px; }
    .vl-dest-count { font-size: 13.5px; }

    /* garanzie 3 colonne */
    .vl-why { max-width: 1200px; margin: 0 auto; padding: 36px 24px; }
    .vl-why-title { font-size: 30px; }
    .vl-why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 18px; }
    .vl-why-card { padding: 18px; gap: 14px; }
    .vl-why-num { width: 30px; height: 30px; font-size: 16px; }
    .vl-why-head { font-size: 15px; }
    .vl-why-text { font-size: 12.5px; margin-top: 4px; }

    /* recensioni */
    .vl-reviews { padding: 32px 0 36px; }
    .vl-reviews-head { max-width: 1200px; margin: 0 auto; padding: 0 24px 18px; }
    .vl-reviews-title { font-size: 30px; }
    .vl-review-card { width: 300px; padding: 18px; }

    /* CTA finale */
    .vl-final { padding: 48px 24px 52px; }
    .vl-final-inner { max-width: 760px; margin: 0 auto; }
    .vl-cd-blocks { gap: 10px; margin-top: 14px; }
    .vl-cd-block { padding: 13px 18px; min-width: 78px; }
    .vl-cd-num { font-size: 34px; }
    .vl-cd-label { font-size: 10px; margin-top: 7px; }
    .vl-final-title { font-size: 40px; letter-spacing: -.03em; margin-top: 24px; }
    .vl-final-actions { flex-direction: row; gap: 12px; justify-content: center; margin-top: 24px; }
    .vl-final-cta { height: 58px; padding: 0 34px; font-size: 16px; }
    .vl-final-wa { height: 58px; padding: 0 28px; font-size: 15px; }

    /* sticky full-width, contenuto in container */
}


/* F2 (review): fra 481px e 1023px la colonna mobile resta centrata a 480px
   invece di stirarsi — il breakpoint desktop parte a 1024. */
@media (min-width: 481px) and (max-width: 1023px) {
    .vl-search, .vl-week, .vl-deals, .vl-board, .vl-dest-inner,
    .vl-why, .vl-final-inner { max-width: 480px; margin-left: auto; margin-right: auto; }
}

/* Calendario landing (flatpickr .vl-fp) — tema brand HoEscape (owner
   01/08: «mettiamo stili nostri»): card bianca coi token del sito, mese
   navy, giorni con partenze reali in lime, selezionato navy. Il popup è
   appeso a <body>, fuori da .vl-landing: font e colori vanno espliciti.
   Owner 03/08: il popup deve avere la STESSA larghezza del campo "Scegli
   le date" ed essere allineato sotto di esso, non una card più stretta
   ancorata a sinistra — viaggi-landing.js (syncCalendarToField) misura il
   campo reale e scrive width/left qui sotto ad ogni apertura. La griglia
   quindi dev'essere fluida (%), non a pixel fissi, per adattarsi a
   qualunque larghezza il JS le assegni. */
.vl-fp.flatpickr-calendar {
    font-family: 'Poppins', system-ui, sans-serif;
    border: 1.5px solid rgba(26, 58, 92, .12); border-radius: 16px;
    box-shadow: 0 14px 44px rgba(13, 28, 51, .22); padding: 8px 6px 10px;
    box-sizing: border-box;
    width: calc(322px + 12px); /* fallback prima del primo onOpen */
}
.vl-fp .flatpickr-days { margin: 0 auto; }
.vl-fp.flatpickr-calendar .flatpickr-days,
.vl-fp.flatpickr-calendar .dayContainer {
    width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box;
}
.vl-fp .flatpickr-months { position: relative; }
.vl-fp .flatpickr-months .flatpickr-prev-month,
.vl-fp .flatpickr-months .flatpickr-next-month {
    top: 50%; transform: translateY(-50%); /* frecce centrate col mese */
}
.vl-fp.flatpickr-calendar::before, .vl-fp.flatpickr-calendar::after { display: none; } /* niente freccetta */
.vl-fp .flatpickr-months { padding: 4px 4px 6px; align-items: center; }
.vl-fp .flatpickr-current-month { font-size: 15px; }
.vl-fp .flatpickr-current-month .flatpickr-monthDropdown-months,
.vl-fp .flatpickr-current-month input.cur-year {
    font-family: inherit; font-weight: 800; color: #1e3c72;
}
.vl-fp .flatpickr-months .flatpickr-prev-month,
.vl-fp .flatpickr-months .flatpickr-next-month { fill: #1e3c72; padding: 8px; }
.vl-fp .flatpickr-months .flatpickr-prev-month:hover svg,
.vl-fp .flatpickr-months .flatpickr-next-month:hover svg { fill: #8fb02e; }
.vl-fp span.flatpickr-weekday {
    font-size: 10px; font-weight: 800; letter-spacing: .08em;
    text-transform: uppercase; color: #6c757d;
}
.vl-fp .flatpickr-day {
    font-weight: 600; color: #8a94a0; border-radius: 10px; border: 1px solid transparent;
    /* il default flatpickr CDN impone max-width:39px sopra al
       flex-basis:14.2857% (7 colonne): con un dayContainer ora fluido (%)
       quel tetto fisso torna a scombinare le colonne su qualunque
       larghezza diversa da 273px (39×7). Toglierlo lascia comandare solo
       il flex-basis percentuale, sempre coerente con le 7 colonne. */
    max-width: none;
}
.vl-fp .flatpickr-day.flatpickr-disabled,
.vl-fp .flatpickr-day.flatpickr-disabled:hover,
.vl-fp .flatpickr-day.prevMonthDay, .vl-fp .flatpickr-day.nextMonthDay { color: #c9cfd6; background: none; }
/* SOLO i giorni con partenze reali sono cliccabili → pill lime brand */
.vl-fp .flatpickr-day:not(.flatpickr-disabled):not(.prevMonthDay):not(.nextMonthDay) {
    background: rgba(164, 198, 57, .22); border-color: rgba(143, 176, 46, .5);
    color: #1e3c72; font-weight: 800;
}
.vl-fp .flatpickr-day:not(.flatpickr-disabled):not(.prevMonthDay):not(.nextMonthDay):hover {
    background: rgba(164, 198, 57, .5); border-color: #8fb02e;
}
.vl-fp .flatpickr-day.today:not(.selected) { border-color: rgba(26, 58, 92, .35); }
.vl-fp .flatpickr-day.selected, .vl-fp .flatpickr-day.selected:hover {
    background: #1e3c72; border-color: #1e3c72; color: #fff;
}
/* Legenda «partenze disponibili» in cima al popup (owner 07/08, Clarity
   12 ore: 15 dead click sui numeri dei giorni spenti solo su
   /viaggi/sharm). Il quadratino ripete ESATTAMENTE la pill dei giorni
   cliccabili: è l'associazione colore→significato a spegnere il click a
   vuoto, non il testo. Alternativa esclusiva di .vl-fp-empty-msg —
   viaggi-landing.js (syncCalendarNotice) monta l'uno o l'altro. */
.vl-fp-legend {
    display: flex; align-items: center; gap: 8px;
    margin: 2px 4px 8px; padding: 7px 10px; border-radius: 10px;
    background: rgba(164, 198, 57, .16);
    border: 1px solid rgba(143, 176, 46, .45);
    color: #1e3c72; font-size: 12px; font-weight: 700; line-height: 1.35;
}
.vl-fp-legend-dot {
    width: 14px; height: 14px; flex: 0 0 14px; border-radius: 5px;
    background: rgba(164, 198, 57, .22); border: 1px solid rgba(143, 176, 46, .5);
}
/* Avviso «nessuna partenza» DENTRO il popup (owner 03/08, Clarity: rage
   click sui giorni spenti perché #vlDateHint sotto il campo resta coperto
   dal popup aperto). Ripetuto qui, unico punto visibile a calendario
   aperto — viaggi-landing.js (syncCalendarNotice) lo inserisce/toglie. */
.vl-fp-empty-msg {
    margin: 2px 4px 8px; padding: 8px 10px; border-radius: 10px;
    background: rgba(228, 87, 46, .1); border: 1px solid rgba(228, 87, 46, .3);
    color: var(--vl-alarm); font-size: 12px; font-weight: 700; line-height: 1.35;
}
.vl-search-reset {
    border: 1.5px solid var(--vl-field-border); border-radius: 999px;
    background: #fff; color: var(--vl-navy); cursor: pointer;
    font-family: inherit; font-size: 12px; font-weight: 700;
    padding: 7px 13px; white-space: nowrap;
}
.vl-search-reset:hover { background: var(--vl-tint); border-color: var(--vl-lime-hover); }

/* Tendine custom destinazione/aeroporto (owner 01/08: «non lasciamo
   quella base») — SOLO desktop con mouse: il <select> nativo resta la
   fonte di verità (submit, pruneOptions) e viene nascosto dal JS. */
.vl-dd { position: relative; }
.vl-dd select.vl-dd-native { display: none; }
button.vl-dd-btn { display: flex; align-items: center; justify-content: space-between; gap: 8px; text-align: left; cursor: pointer; }
button.vl-dd-btn:focus-visible { border-color: var(--vl-lime-hover); }
.vl-dd-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vl-dd-chevron {
    width: 8px; height: 8px; flex: none; margin-top: -4px;
    border-right: 2px solid var(--vl-navy); border-bottom: 2px solid var(--vl-navy);
    transform: rotate(45deg); transition: transform .15s ease;
}
.vl-dd-btn[aria-expanded="true"] .vl-dd-chevron { transform: rotate(-135deg); margin-top: 4px; }
.vl-dd-panel {
    position: absolute; z-index: 60; top: calc(100% + 6px); left: 0;
    /* pannello compatto con scrollbar SEMPRE visibile (owner 01/08):
       su macOS la barra overlay appare solo durante lo scroll e pare
       che non ci sia. Le regole ::-webkit-scrollbar la forzano fissa —
       ATTENZIONE: con scrollbar-width/color standard Chrome 121+ le
       ignorerebbe, quindi qui NIENTE proprietà standard. */
    min-width: 100%; max-height: min(380px, 55vh); overflow-y: auto;
    background: #fff; border: 1.5px solid var(--vl-border); border-radius: 14px;
    box-shadow: var(--vl-shadow-float); padding: 6px;
}
.vl-dd-panel::-webkit-scrollbar { width: 9px; }
.vl-dd-panel::-webkit-scrollbar-thumb {
    background: rgba(26, 58, 92, .32); border-radius: 5px;
    border: 2px solid #fff; /* stacco dal bordo del pannello */
}
.vl-dd-panel::-webkit-scrollbar-thumb:hover { background: rgba(26, 58, 92, .5); }
.vl-dd-panel::-webkit-scrollbar-track { background: transparent; }
.vl-dd-opt {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    width: 100%; text-align: left; padding: 10px 12px; border: 0; border-radius: 9px;
    background: none; cursor: pointer; font-family: inherit; font-size: 13.5px;
    font-weight: 600; color: var(--vl-navy); white-space: nowrap;
}
.vl-dd-opt:hover { background: var(--vl-tint); }
.vl-dd-opt.is-current { background: rgba(164, 198, 57, .18); font-weight: 800; }
.vl-dd-opt.is-current::after { content: '✓'; color: var(--vl-lime-hover); font-weight: 800; }
.vl-dd-opt.is-dead { color: var(--vl-gray-400); cursor: not-allowed; }
.vl-dd-opt.is-dead:hover { background: none; }

/* hint combinazione senza partenze (owner 31/07 22:16) */
.vl-date-hint { display: block; font-size: 10.5px; font-weight: 700; color: var(--vl-alarm); margin-top: 5px; line-height: 1.35; }
/* `display:block` e l'`[hidden]` dello user agent pesano UGUALE (0,1,0):
   decide l'ordine dei <link>. In produzione a spegnere gli avvisi è
   `[hidden]` dentro dist/assets/common-*.css, caricato dopo; dove quel
   bundle non c'è (mirror locale) il form si apre con «Nessuna partenza»
   già in rosso sotto un calendario pieno di giorni verdi. Lo stato del
   componente lo decide il foglio del componente. */
.vl-date-hint[hidden] { display: none; }

/* tasto «Scopri» nelle card offerte della settimana (owner 01/08; dal
   01/08 sera vive in .vl-offer-foot, sullo stesso rigo del prezzo) */
.vl-offer-cta {
    display: inline-flex; align-items: center; flex-shrink: 0; white-space: nowrap;
    margin-left: auto; /* a destra anche quando la card non ha prezzo */
    background: var(--vl-lime); color: var(--vl-navy);
    font-size: 13.5px; font-weight: 800; padding: 10px 15px; border-radius: 10px;
}
.vl-offer-card:hover .vl-offer-cta { background: var(--vl-lime-hover); }

/* sezioni deal: titolo più grande + «Partenza da?» (owner 01/08) */
.vl-rule--big { flex-wrap: wrap; row-gap: 10px; }
.vl-rule--big .vl-rule-label { font-size: 20px; letter-spacing: .02em; }
.vl-rule-from {
    display: flex; align-items: center; gap: 8px; margin: 0;
    font-size: 12.5px; font-weight: 700; color: var(--vl-muted); white-space: nowrap;
}
.vl-rule-select {
    height: 44px; max-width: 200px; border: 1.5px solid var(--vl-field-border);
    border-radius: 10px; background: var(--vl-tint); color: var(--vl-navy);
    font-family: inherit; font-size: 15px; font-weight: 700; padding: 0 10px; outline: none;
}
@media (min-width: 1024px) {
    .vl-rule--big .vl-rule-label { font-size: 20px; }
}

/* Durata: appare solo quando per la partenza scelta esistono rientri di
   durata diversa (owner 06/08, una sola data nel form). Con una durata
   sola il campo non esiste — il rientro è un dato, non una domanda. */
.vl-durations {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
    margin-top: 8px;
    grid-column: 1 / -1; /* riga intera quando è un grid item (.vl-search-grid) */
}
.vl-durations[hidden] { display: none; }
.vl-durations-label {
    color: var(--vl-navy); font-size: 12px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em;
}
.vl-duration {
    display: inline-flex; align-items: center; gap: 6px;
    border: 1.5px solid var(--vl-field-border); border-radius: 999px;
    background: #fff; color: var(--vl-navy); cursor: pointer;
    font-size: 13px; font-weight: 700; padding: 6px 12px;
}
.vl-duration:hover { border-color: var(--vl-lime-hover); }
.vl-duration:has(input:checked) {
    background: var(--vl-tint); border-color: var(--vl-lime-hover);
}