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

/* toast sociale (richieste reali) dentro l'hero */
.vl-toast {
    position: absolute; top: 74px; left: 16px; right: 16px; z-index: 4;
    display: flex; align-items: center; gap: 10px;
    background: #fff; color: var(--vl-navy); border-radius: 14px;
    padding: 10px 14px; box-shadow: 0 10px 30px rgba(13, 28, 51, .35);
    opacity: 0; transform: translateY(12px); pointer-events: none;
    transition: opacity .45s ease, transform .45s ease;
}
.vl-toast.is-on { opacity: 1; transform: translateY(0); }
.vl-toast-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--vl-lime); flex-shrink: 0; animation: vl-blink 1.6s ease-in-out infinite; }
.vl-toast-text { font-size: 13.5px; font-weight: 700; line-height: 1.35; }
.vl-toast-meta { font-size: 12px; font-weight: 600; color: var(--vl-muted); margin-left: auto; white-space: nowrap; }

/* 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 — */
.vl-promise-kicker {
    display: inline-block; font-size: 10px; font-weight: 800;
    letter-spacing: .09em; text-transform: uppercase;
    color: var(--vl-lime); margin-bottom: 8px;
}
.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); }
.vl-promise-sub {
    font-size: 14.5px; font-weight: 500; line-height: 1.45; margin: 9px 0 0;
    color: rgba(255, 255, 255, .93); max-width: 30ch;
}
/* le prove restano fuori dallo schermo stretto: la card viva ha priorità */
.vl-promise-proof { display: none; }

/* — offerta viva: una card per slot, sovrapposte —
   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 su fondo bianco. */
.vl-live { position: relative; }
.vl-hero--sell .vl-live-card {
    display: none; text-decoration: none; color: var(--vl-navy);
    background: #fff; border-radius: var(--vl-radius);
    padding: 16px 17px 17px; box-shadow: var(--vl-shadow-float);
    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;
    background: var(--vl-tint); color: var(--vl-navy);
}
/* il colore del badge dice CHE TIPO di leva è, a colpo d'occhio */
.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; }
.vl-live-place {
    display: block; font-size: 24.5px; font-weight: 800; line-height: 1.12;
    letter-spacing: -.02em;
}
.vl-live-facts {
    display: flex; flex-wrap: wrap; gap: 5px 12px; margin-top: 8px;
    font-size: 13.5px; font-weight: 600; line-height: 1.4; color: var(--vl-muted);
}
.vl-live-price {
    display: flex; align-items: baseline; gap: 6px; margin-top: 11px;
    /* «Scopri →» è in position:absolute in basso a destra: senza questa
       corsia riservata un prezzo a 4 cifre ci finisce sotto */
    padding-right: 96px;
}
.vl-live-price-from { font-size: 13px; font-weight: 700; color: var(--vl-muted); }
.vl-live-price-val { font-size: 32px; font-weight: 800; line-height: 1; color: var(--vl-navy); }
.vl-live-price-unit { font-size: 12px; font-weight: 700; color: var(--vl-muted); }
.vl-live-proof {
    display: block; margin-top: 4px; font-size: 12.5px; font-weight: 700;
    color: var(--vl-muted); padding-right: 96px;
}
.vl-live-cta {
    position: absolute; right: 17px; bottom: 17px;
    font-size: 14px; font-weight: 800; color: var(--vl-navy);
}

/* 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: 17px; line-height: 1.22; color: #fff; text-shadow: 0 1px 6px rgba(13, 28, 51, .5); }
.vl-dest-count { display: block; font-size: 12.5px; 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-kicker { font-size: 11.5px; margin-bottom: 14px; }
    .vl-promise-title { font-size: 54px; letter-spacing: -.035em; }
    .vl-promise-sub { font-size: 16px; margin-top: 14px; max-width: 34ch; }
    .vl-promise-proof {
        display: flex; flex-wrap: wrap; gap: 8px 22px;
        list-style: none; margin: 20px 0 0; padding: 0;
        font-size: 13.5px; font-weight: 600; color: rgba(255, 255, 255, .9);
    }
    .vl-promise-proof li::before {
        content: '✓'; color: var(--vl-lime); font-weight: 800;
        margin-right: 7px;
    }
    .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 { right: 20px; bottom: 20px; }
    .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; }
    .vl-toast { top: 92px; left: auto; right: max(24px, calc(50% - 576px)); width: 340px; }

    /* 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 */
    .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: 18px; }
    .vl-dest-count { font-size: 12px; }

    /* 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;
}
/* 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 (syncCalendarEmptyState) 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;
}
/* Fetch di /viaggi/partenze-date in volo (owner 03/08, Clarity: tap su un
   giorno appena diventato valido/morto DURANTE il fetch → dead/rage click
   perché l'enable è ancora quello vecchio). Spegniamo i tap sui giorni
   finché la risposta non è applicata — viaggi-landing.js (calLoading). */
.vl-fp.vl-fp-loading .flatpickr-days,
.vl-fp.vl-fp-loading .dayContainer { opacity: .45; pointer-events: none; transition: opacity .15s; }
.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; }

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