/* ============================================================================
   VIAGGIOTANTO — DESIGN SYSTEM
   ----------------------------------------------------------------------------
   Unica fonte di verità per colori, spazi, tipografia e componenti del brand.
   Caricato DOPO style.css: ridefinisce i token legacy --vt-* e ristilizza i
   componenti esistenti senza riscrivere il CSS storico.

   Identità: blu profondo + azzurro vivace + giallo solare, tema chiaro,
   forme morbide, prezzi molto evidenti, tipografia bold.

   REGOLA: nessun colore hardcodato nei componenti. Solo var(--...).
   ============================================================================ */

/* ============================================================================
   1. DESIGN TOKENS
   ============================================================================ */
:root {

    /* --- Colori di brand -------------------------------------------------- */

    /* BLU PROFONDO — titoli, header, testi importanti, CTA primarie */
    --brand-blue:          #123E87;
    --brand-blue-dark:     #0B2A5E;   /* hover CTA primaria, footer */
    --brand-blue-mid:      #1B5BB5;   /* gradienti, secondo stop */

    /* AZZURRO VIVACE — elementi interattivi, icone, dettagli, stati attivi.
       Due varianti perché una sola non basta: quella brillante non ha
       contrasto sufficiente sotto i 18px, quindi il testo usa l'altra. */
    --brand-azure:         #29A9E0;   /* decorativo: icone grandi, bordi, gradienti */
    --brand-azure-ink:     #0B70AB;   /* testuale: link, icone piccole (AA su bianco) */
    --brand-azure-soft:    #EAF5FC;   /* fondi di sezione */
    --brand-azure-tint:    #D3EAF8;   /* bordi tenui, hover */

    /* GIALLO SOLARE — accent color del brand. Prezzi, badge, promo, dettagli.
       Non è un colore di superficie: non deve invadere l'interfaccia. */
    --brand-yellow:        #FFD028;
    --brand-yellow-dark:   #F2B900;   /* hover CTA promo */
    --brand-yellow-soft:   #FFF3C9;   /* highlight, fondi tenui */
    --brand-yellow-tint:   #FFFAE8;

    /* VERDE — solo rassicurazione: cancellazione gratuita, conferme, vantaggi */
    --brand-green:         #0F8F4E;
    --brand-green-soft:    #E6F6ED;

    /* ROSSO — solo errori e urgenza reale (ultime camere) */
    --brand-red:           #C62828;
    --brand-red-soft:      #FDECEC;

    /* --- Superfici e testo ------------------------------------------------ */
    --background:          #FFFFFF;
    --background-soft:     #FFFCF5;   /* bianco caldo / panna */
    --background-blue:     var(--brand-azure-soft);
    --background-sunk:     #F5F8FC;   /* fondo di sezioni "incassate" */

    --text-primary:        #10203A;
    --text-secondary:      #5C6B82;
    --text-soft:           #8494A8;
    --text-on-dark:        #FFFFFF;
    --text-on-yellow:      var(--brand-blue);

    --border:              #E3EAF3;
    --border-strong:       #CBD8E8;

    /* --- Ombre: molto leggere, mai drammatiche --------------------------- */
    --shadow-xs:           0 1px 2px rgba(16, 32, 58, .06);
    --shadow:              0 2px 10px rgba(18, 62, 135, .07);
    --shadow-md:           0 6px 20px rgba(18, 62, 135, .10);
    --shadow-lg:           0 14px 40px rgba(18, 62, 135, .14);
    --shadow-yellow:       0 6px 18px rgba(242, 185, 0, .35);
    --shadow-blue:         0 6px 18px rgba(18, 62, 135, .28);

    /* --- Raggi: generosi, è un tratto distintivo ------------------------- */
    --radius-xs:           8px;
    --radius-sm:           12px;
    --radius:              16px;
    --radius-md:           20px;
    --radius-lg:           28px;
    --radius-xl:           36px;
    --radius-pill:         999px;
    --radius-blob:         46% 54% 52% 48% / 52% 46% 54% 48%;

    /* --- Spaziatura (scala 4px) ------------------------------------------ */
    --space-1:  .25rem;
    --space-2:  .5rem;
    --space-3:  .75rem;
    --space-4:  1rem;
    --space-5:  1.5rem;
    --space-6:  2rem;
    --space-7:  2.5rem;
    --space-8:  3rem;
    --space-9:  4rem;
    --space-10: 5rem;
    --section-y:        clamp(2.5rem, 6vw, 4.5rem);
    --container-width:  1200px;

    /* --- Tipografia ------------------------------------------------------ */
    --font-sans:   'Figtree', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-script: 'Caveat', 'Segoe Script', cursive;

    --fs-hero:   clamp(2.1rem, 6vw, 3.6rem);
    --fs-h1:     clamp(1.75rem, 4.4vw, 2.75rem);
    --fs-h2:     clamp(1.5rem, 3.4vw, 2.15rem);
    --fs-h3:     clamp(1.15rem, 2.2vw, 1.4rem);
    --fs-lg:     1.0625rem;
    --fs-base:   1rem;
    --fs-sm:     .9375rem;
    --fs-xs:     .8125rem;
    --fs-2xs:    .72rem;
    --fs-price:      clamp(1.9rem, 5vw, 2.6rem);
    --fs-price-sm:   1.55rem;

    --fw-regular:  400;
    --fw-medium:   500;
    --fw-semibold: 600;
    --fw-bold:     700;
    --fw-extra:    800;
    --fw-black:    900;

    --lh-tight:  1.1;
    --lh-snug:   1.3;
    --lh-normal: 1.6;

    /* --- Breakpoint (documentati: le media query li scrivono a mano,
       le custom property non sono usabili in @media) --------------------- */
    --bp-sm:  576px;
    --bp-md:  768px;
    --bp-lg:  992px;
    --bp-xl:  1200px;

    --ease:       cubic-bezier(.32, .72, .35, 1);
    --transition: .2s var(--ease);

    /* --- Micro-elementi: pennellata e raggi gialli ----------------------- */
    --brush-yellow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M2 9.5c34-5 63-6.5 96-5.5s67 4 100 1.5' stroke='%23FFD028' stroke-width='7' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");
    /* Ventaglio di 5 raggi che si irradia verso l'alto a destra: e' l'elemento
       che nel logo esce da "tanto", riusato come firma accanto a titoli e prezzi. */
    --rays-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%23000' transform='translate(2.5 21.5)'%3E%3Crect x='7' y='-1.4' width='9.5' height='2.8' rx='1.4' transform='rotate(-11)'/%3E%3Crect x='7' y='-1.4' width='9.5' height='2.8' rx='1.4' transform='rotate(-30)'/%3E%3Crect x='7' y='-1.4' width='9.5' height='2.8' rx='1.4' transform='rotate(-49)'/%3E%3Crect x='7' y='-1.4' width='9.5' height='2.8' rx='1.4' transform='rotate(-68)'/%3E%3Crect x='7' y='-1.4' width='9.5' height='2.8' rx='1.4' transform='rotate(-87)'/%3E%3C/g%3E%3C/svg%3E");

    /* ------------------------------------------------------------------
       PONTE COL PASSATO — i token storici puntano ai nuovi.
       Così le ~200 occorrenze di --vt-orange / --vt-blue nel CSS e nelle
       viste si rebrandizzano senza toccarle una per una.
       --vt-orange era l'accent su fondo chiaro: diventa azzurro testuale
       (leggibile), non giallo, perché molte regole ci mettono testo bianco
       sopra. Sui fondi scuri viene ribaltato a giallo più sotto.
       ------------------------------------------------------------------ */
    --vt-accent:       var(--brand-azure-ink);
    --vt-blue:         var(--brand-blue);
    --vt-blue-dark:    var(--brand-blue-dark);
    --vt-blue-mid:     var(--brand-blue-mid);
    --vt-orange:       var(--vt-accent);
    --vt-orange-light: var(--brand-azure);
    --vt-orange-pale:  var(--brand-azure-soft);
    --vt-success:      var(--brand-green);
    --vt-success-bg:   var(--brand-green-soft);
    --vt-teal:         var(--brand-azure-ink);
    --vt-gray-light:   var(--background-sunk);
    --vt-gray-mid:     var(--border);
    --vt-text-dark:    var(--text-primary);
    --vt-text-muted:   var(--text-secondary);
    --vt-shadow:       var(--shadow-md);
    --vt-shadow-lg:    var(--shadow-lg);
}

/* Contesti scuri: l'accent torna a essere giallo, che è il modo in cui il
   brand vive sul blu. Ridefinire la variabile fa cambiare colore a tutto
   quello che sta dentro, senza riscrivere le singole regole. */
/* Aggiungi qui (o metti .vt-on-dark sul contenitore) ogni blocco con fondo
   scuro: accento giallo e titoli bianchi arrivano insieme. */
.vt-on-dark,
.vt-hero,
.hero-section,
.lp-hero,
.gtl-hero,
.gt-hero,
.partner-hero,
.confirmation-hero,
.footer-vt,
.vt-opbar,
.vt-cta-band,
.vt-checkout-hero,
.vt-promo,
.vt-dest,
.vt-blob,
.vt-price-badge {
    --vt-accent: var(--brand-yellow);
    --vt-orange: var(--brand-yellow);
    --vt-orange-light: var(--brand-yellow-dark);
    --heading-color: #fff;
}

/* ============================================================================
   2. BASE — tipografia e superfici
   ============================================================================ */
body {
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    line-height: var(--lh-normal);
    color: var(--text-primary);
    background: var(--background);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-sans);
    font-weight: var(--fw-extra);
    /* Variabile e non colore fisso: i contenitori scuri la ribaltano a bianco.
       Molti hero storici danno il bianco ai titoli per ereditarieta' (color:#fff
       sul contenitore) e un colore fisso qui li renderebbe illeggibili. */
    color: var(--heading-color, var(--brand-blue));
    line-height: var(--lh-tight);
    letter-spacing: -.02em;
}

a {
    color: var(--brand-azure-ink);
    text-underline-offset: 3px;
}
a:hover { color: var(--brand-blue); }

.text-muted { color: var(--text-secondary) !important; }

::selection { background: var(--brand-yellow); color: var(--brand-blue); }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid var(--brand-azure);
    outline-offset: 2px;
}

.container { max-width: var(--container-width); }

/* ============================================================================
   3. MICRO-ELEMENTI DEL BRAND
   Da usare con moderazione: sono la firma, non la decorazione.
   ============================================================================ */

/* Sottolineatura a pennellata gialla sotto una parola chiave */
.vt-brush {
    position: relative;
    display: inline-block;
}
/* Nessun z-index negativo: su fondo fotografico finirebbe dietro l'overlay
   della hero. La pennellata sta sotto la linea di base, come un evidenziatore. */
.vt-brush::after {
    content: '';
    position: absolute;
    left: -.06em; right: -.06em; bottom: -.1em;
    height: .26em;
    background: var(--brush-yellow) no-repeat center/100% 100%;
    pointer-events: none;
}

/* Evidenziatore: fondo giallo dietro il testo */
.vt-mark {
    background: linear-gradient(transparent 58%, var(--brand-yellow) 58%);
    padding: 0 .12em;
    font-weight: var(--fw-extra);
}

/* Raggi gialli — l'elemento del logo, riusato accanto a titoli e prezzi */
.vt-rays {
    display: inline-block;
    width: 1em; height: 1em;
    flex: 0 0 auto;
    vertical-align: middle;
    background: var(--brand-yellow);
    -webkit-mask: var(--rays-mask) no-repeat center/contain;
            mask: var(--rays-mask) no-repeat center/contain;
}
.vt-rays--lg { width: 1.7em; height: 1.7em; }
.vt-rays--flip { transform: scaleX(-1) rotate(160deg); }

/* Forma morbida blu/azzurra: fondo organico dietro contenuti in evidenza */
.vt-blob {
    border-radius: var(--radius-blob);
    background: linear-gradient(140deg, var(--brand-blue-mid), var(--brand-blue));
    color: var(--text-on-dark);
}

/* Pill: contenitore morbido ricorrente */
.vt-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: .35rem .85rem;
    border-radius: var(--radius-pill);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    line-height: 1.35;
    background: var(--brand-yellow);
    color: var(--brand-blue);
}
.vt-pill--azure   { background: var(--brand-azure-soft); color: var(--brand-azure-ink); }
.vt-pill--blue    { background: var(--brand-blue); color: var(--text-on-dark); }
.vt-pill--green   { background: var(--brand-green-soft); color: var(--brand-green); }
.vt-pill--white   { background: #fff; color: var(--brand-blue); box-shadow: var(--shadow-xs); }
.vt-pill--outline { background: transparent; border: 1.5px solid var(--border-strong); color: var(--text-secondary); }

/* Nota manoscritta — solo su hero e materiali promozionali, mai su UI funzionale */
.vt-script {
    font-family: var(--font-script);
    font-weight: var(--fw-bold);
    font-size: 1.4em;
    line-height: 1.15;
}

/* Raccordi curvi tra sezioni */
.vt-curve-top    { border-radius: var(--radius-xl) var(--radius-xl) 0 0; }
.vt-curve-bottom { border-radius: 0 0 var(--radius-xl) var(--radius-xl); }

/* ============================================================================
   4. BOTTONI
   .vt-btn + una variante. Sempre pill, sempre bold, sempre con micro-movimento.
   ============================================================================ */
.vt-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: .8rem 1.6rem;
    border: 2px solid transparent;
    border-radius: var(--radius-pill);
    font-family: var(--font-sans);
    font-size: var(--fs-sm);
    font-weight: var(--fw-extra);
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--transition), color var(--transition),
                border-color var(--transition), box-shadow var(--transition),
                transform .15s var(--ease);
}
.vt-btn:hover { text-decoration: none; transform: translateY(-2px); }
.vt-btn:active { transform: translateY(0); }
.vt-btn:disabled,
.vt-btn.is-disabled {
    opacity: .55;
    pointer-events: none;
    transform: none;
}

/* PRIMARY — l'azione principale di ogni pagina */
.vt-btn--primary {
    background: var(--brand-blue);
    border-color: var(--brand-blue);
    color: var(--text-on-dark);
    box-shadow: var(--shadow-blue);
}
.vt-btn--primary:hover {
    background: var(--brand-blue-dark);
    border-color: var(--brand-blue-dark);
    color: var(--text-on-dark);
}

/* PROMO — giallo. Solo quando vogliamo attirare fortemente l'attenzione. */
.vt-btn--promo {
    background: var(--brand-yellow);
    border-color: var(--brand-yellow);
    color: var(--brand-blue);
    box-shadow: var(--shadow-yellow);
}
.vt-btn--promo:hover {
    background: var(--brand-yellow-dark);
    border-color: var(--brand-yellow-dark);
    color: var(--brand-blue);
}

/* SECONDARY — bianco, bordo blu */
.vt-btn--secondary {
    background: #fff;
    border-color: var(--brand-blue);
    color: var(--brand-blue);
}
.vt-btn--secondary:hover {
    background: var(--brand-blue);
    color: var(--text-on-dark);
}

/* GHOST — azioni terziarie, filtri, "mostra altro" */
.vt-btn--ghost {
    background: transparent;
    border-color: var(--border-strong);
    color: var(--brand-blue);
}
.vt-btn--ghost:hover {
    background: var(--brand-azure-soft);
    border-color: var(--brand-azure);
    color: var(--brand-blue);
}

/* SUCCESS — solo conferme (es. "prenota ora" a valle del pagamento) */
.vt-btn--success {
    background: var(--brand-green);
    border-color: var(--brand-green);
    color: var(--text-on-dark);
}
.vt-btn--success:hover { background: #0c7742; border-color: #0c7742; color: var(--text-on-dark); }

/* Su fondo scuro la secondaria si inverte */
.vt-on-dark .vt-btn--secondary,
.vt-hero .vt-btn--secondary,
.vt-cta-band .vt-btn--secondary {
    background: transparent;
    border-color: rgba(255, 255, 255, .75);
    color: #fff;
}
.vt-on-dark .vt-btn--secondary:hover,
.vt-hero .vt-btn--secondary:hover,
.vt-cta-band .vt-btn--secondary:hover {
    background: #fff;
    color: var(--brand-blue);
    border-color: #fff;
}

.vt-btn--sm { padding: .5rem 1.1rem; font-size: var(--fs-xs); }
.vt-btn--lg { padding: 1.05rem 2.2rem; font-size: var(--fs-lg); }
.vt-btn--block { width: 100%; }

/* ============================================================================
   5. BADGE
   Etichette tematiche e promozionali sulle card.
   ============================================================================ */
.vt-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem .7rem;
    border-radius: var(--radius-pill);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-extra);
    letter-spacing: .04em;
    text-transform: uppercase;
    line-height: 1.3;
    white-space: nowrap;
}
.vt-badge--promo  { background: var(--brand-yellow); color: var(--brand-blue); }
.vt-badge--theme  { background: var(--brand-blue); color: var(--text-on-dark); }
.vt-badge--azure  { background: var(--brand-azure); color: #fff; }
.vt-badge--green  { background: var(--brand-green); color: #fff; }
.vt-badge--urgent { background: var(--brand-red); color: #fff; }
.vt-badge--soft   { background: rgba(255, 255, 255, .92); color: var(--brand-blue); box-shadow: var(--shadow-xs); }
.vt-badge--glass  { background: rgba(11, 42, 94, .72); color: #fff; backdrop-filter: blur(4px); }

/* Badge posizionato sopra la foto di una card */
.vt-badge--over {
    position: absolute;
    top: var(--space-3);
    left: var(--space-3);
    z-index: 2;
}
.vt-badge--over-right { left: auto; right: var(--space-3); }

/* ============================================================================
   6. PREZZO — l'elemento visivo più forte delle offerte
   ============================================================================ */
.vt-price {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    line-height: 1.05;
}
.vt-price__from,
.vt-price__unit {
    font-size: var(--fs-2xs);
    font-weight: var(--fw-semibold);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: .05em;
}
.vt-price__value {
    display: inline-flex;
    align-items: baseline;
    gap: .1rem;
    font-size: var(--fs-price-sm);
    font-weight: var(--fw-black);
    color: var(--brand-blue);
    letter-spacing: -.03em;
}
.vt-price__currency { font-size: .68em; font-weight: var(--fw-extra); }
.vt-price__strike {
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    color: var(--text-soft);
    text-decoration: line-through;
}
.vt-price--end { align-items: flex-end; text-align: right; }
.vt-price--lg .vt-price__value { font-size: var(--fs-price); }

/* Prezzo sottolineato dal giallo: la variante di default sulle card offerta */
.vt-price--brush .vt-price__value { position: relative; }
.vt-price--brush .vt-price__value::after {
    content: '';
    position: absolute;
    left: -.04em; right: -.04em; bottom: -.02em;
    height: .16em;
    background: var(--brush-yellow) no-repeat center/100% 100%;
}

/* Badge prezzo: forma morbida blu con cifra gialla. Il micro-elemento più
   riconoscibile del brand, da usare su hero e promo, non su ogni card. */
.vt-price-badge {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: .1rem;
    padding: 1.1rem 1.9rem;
    border-radius: var(--radius-blob);
    background: linear-gradient(150deg, var(--brand-blue-mid), var(--brand-blue));
    box-shadow: var(--shadow-lg);
    text-align: center;
    line-height: 1.1;
}
.vt-price-badge__label {
    font-size: var(--fs-xs);
    font-weight: var(--fw-extra);
    color: #fff;
    text-transform: uppercase;
    letter-spacing: .08em;
}
.vt-price-badge__value {
    display: inline-flex;
    align-items: baseline;
    gap: .08em;
    font-size: var(--fs-price);
    font-weight: var(--fw-black);
    color: var(--brand-yellow);
    letter-spacing: -.035em;
}
.vt-price-badge__value .vt-price__currency { font-size: .6em; }
.vt-price-badge__unit {
    font-size: var(--fs-2xs);
    font-weight: var(--fw-bold);
    color: rgba(255, 255, 255, .85);
    text-transform: uppercase;
    letter-spacing: .08em;
}

/* Area prezzo su fondo giallo — alternativa per le card promo */
.vt-price--onyellow {
    background: var(--brand-yellow);
    border-radius: var(--radius-sm);
    padding: .55rem .9rem;
    align-items: center;
}
.vt-price--onyellow .vt-price__from,
.vt-price--onyellow .vt-price__unit { color: var(--brand-blue); opacity: .8; }
.vt-price--onyellow .vt-price__value { color: var(--brand-blue); }

/* ============================================================================
   7. CARD — bianche, angoli morbidi, ombra molto leggera
   ============================================================================ */
.vt-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow);
    overflow: hidden;
    color: inherit;
    text-decoration: none;
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.vt-card--flat { box-shadow: none; }
.vt-card--pad { padding: var(--space-5); }

a.vt-card:hover,
.vt-card--hover:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--brand-azure-tint);
    text-decoration: none;
}

.vt-card__media {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--background-sunk);
    overflow: hidden;
}
.vt-card__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .45s var(--ease);
}
a.vt-card:hover .vt-card__media img { transform: scale(1.06); }

.vt-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4);
    flex: 1 1 auto;
}
.vt-card__foot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4) var(--space-4);
    margin-top: auto;
}
.vt-card__title {
    font-size: var(--fs-lg);
    font-weight: var(--fw-extra);
    color: var(--brand-blue);
    line-height: var(--lh-snug);
    margin: 0;
}
.vt-card__place {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    color: var(--text-secondary);
}
.vt-card__place i { color: var(--brand-azure); }
.vt-card__amenities {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .5rem;
    font-size: var(--fs-2xs);
    color: var(--text-secondary);
}
.vt-card__amenities span {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
}
.vt-card__amenities i { color: var(--brand-azure); }
.vt-card__stars { color: var(--brand-yellow); font-size: var(--fs-xs); letter-spacing: 1px; }
.vt-card__note {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    color: var(--brand-green);
}

/* ============================================================================
   8. DESTINATION CARD — grandi immagini emozionali
   ============================================================================ */
.vt-dest {
    position: relative;
    display: block;
    border-radius: var(--radius-md);
    overflow: hidden;
    min-height: 220px;
    color: #fff;
    text-decoration: none;
    box-shadow: var(--shadow);
    transition: transform var(--transition), box-shadow var(--transition);
}
.vt-dest:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); color: #fff; }
.vt-dest img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .5s var(--ease);
}
.vt-dest:hover img { transform: scale(1.07); }
.vt-dest::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(11, 42, 94, .78) 0%, rgba(11, 42, 94, .12) 55%, transparent 100%);
}
.vt-dest__body {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
    min-height: inherit;
    padding: var(--space-4);
    gap: .15rem;
}
.vt-dest__name {
    font-size: var(--fs-h3);
    font-weight: var(--fw-black);
    color: #fff;
    line-height: var(--lh-tight);
    letter-spacing: -.02em;
    margin: 0;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .3);
}
.vt-dest__meta {
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    color: rgba(255, 255, 255, .88);
}
.vt-dest__go {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-top: var(--space-2);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-extra);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--brand-yellow);
}
.vt-dest__go i { transition: transform var(--transition); }
.vt-dest:hover .vt-dest__go i { transform: translateX(4px); }

/* Ritmo visivo: tessere alte su griglia ordinata */
.vt-dest--tall { min-height: 340px; }
.vt-dest--wide { min-height: 260px; }

/* ============================================================================
   9. TRUST — i tre elementi di fiducia ricorrenti in tutto il sito
   ============================================================================ */
.vt-trust {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: var(--space-3);
}
.vt-trust-card {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-xs);
}
.vt-trust-card__icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 40px; height: 40px;
    border-radius: var(--radius-sm);
    background: var(--brand-azure-soft);
    color: var(--brand-azure-ink);
    font-size: 1.05rem;
}
.vt-trust-card__icon--green  { background: var(--brand-green-soft); color: var(--brand-green); }
.vt-trust-card__icon--yellow { background: var(--brand-yellow-soft); color: var(--brand-blue); }
.vt-trust-card__title {
    font-size: var(--fs-sm);
    font-weight: var(--fw-extra);
    color: var(--brand-blue);
    line-height: var(--lh-snug);
    margin: 0;
}
.vt-trust-card__sub {
    font-size: var(--fs-xs);
    color: var(--text-secondary);
    margin: .1rem 0 0;
    line-height: 1.45;
}

/* Variante compatta in linea (barra sotto la hero, sidebar checkout) */
.vt-trust--inline { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }
.vt-trust--inline .vt-trust-card {
    border: 0; box-shadow: none; background: transparent; padding: 0;
    align-items: center; gap: var(--space-2);
}
.vt-trust--inline .vt-trust-card__icon { width: 30px; height: 30px; font-size: .85rem; }
.vt-trust--inline .vt-trust-card__sub { display: none; }

/* ============================================================================
   10. SECTION HEADER — gerarchia forte, ripetuta identica su tutto il portale
   ============================================================================ */
.vt-sec {
    padding-top: var(--section-y);
    padding-bottom: var(--section-y);
    background: var(--background);
}
.vt-sec--soft { background: var(--background-soft); }
.vt-sec--blue { background: var(--background-blue); }
.vt-sec--sunk { background: var(--background-sunk); }

.vt-sechead {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}
.vt-sechead__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: var(--fs-2xs);
    font-weight: var(--fw-extra);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--brand-azure-ink);
    margin-bottom: .35rem;
}
.vt-sechead__title {
    font-size: var(--fs-h2);
    font-weight: var(--fw-black);
    color: var(--brand-blue);
    line-height: var(--lh-tight);
    letter-spacing: -.025em;
    margin: 0;
}
.vt-sechead__sub {
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    margin: .35rem 0 0;
    max-width: 62ch;
}
.vt-sechead__link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: var(--fs-sm);
    font-weight: var(--fw-extra);
    color: var(--brand-azure-ink);
    text-decoration: none;
    white-space: nowrap;
}
.vt-sechead__link:hover { color: var(--brand-blue); }
.vt-sechead__link i { transition: transform var(--transition); }
.vt-sechead__link:hover i { transform: translateX(3px); }
.vt-sechead--center { flex-direction: column; align-items: center; text-align: center; }
.vt-sechead--center .vt-sechead__sub { margin-left: auto; margin-right: auto; }

/* ============================================================================
   11. BENEFIT CARD — "perché prenotare con Viaggiotanto"
   ============================================================================ */
.vt-benefit {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    height: 100%;
    padding: var(--space-5);
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs);
    transition: transform var(--transition), box-shadow var(--transition);
}
.vt-benefit:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.vt-benefit__icon {
    display: grid;
    place-items: center;
    width: 52px; height: 52px;
    margin-bottom: var(--space-1);
    border-radius: var(--radius-blob);
    background: var(--brand-azure-soft);
    color: var(--brand-azure-ink);
    font-size: 1.35rem;
}
.vt-benefit__icon--yellow { background: var(--brand-yellow-soft); color: var(--brand-blue); }
.vt-benefit__icon--green  { background: var(--brand-green-soft); color: var(--brand-green); }
.vt-benefit__icon--blue   { background: var(--brand-blue); color: var(--brand-yellow); }
.vt-benefit__title {
    font-size: var(--fs-base);
    font-weight: var(--fw-extra);
    color: var(--brand-blue);
    margin: 0;
    line-height: var(--lh-snug);
}
.vt-benefit__desc {
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.55;
}

/* ============================================================================
   12. THEME NAV — striscia gialla di temi (terme, montagna, città d'arte…)
   ============================================================================ */
.vt-themes {
    background: var(--brand-yellow-soft);
    border-radius: var(--radius-lg);
    padding: var(--space-4) var(--space-3);
}
.vt-themes__grid {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: var(--space-2);
    overflow-x: auto;
    scrollbar-width: none;
}
.vt-themes__grid::-webkit-scrollbar { display: none; }
.vt-theme {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .4rem;
    min-width: 92px;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    color: var(--brand-blue);
    text-decoration: none;
    text-align: center;
    transition: background var(--transition), transform var(--transition);
}
.vt-theme:hover { background: rgba(255, 255, 255, .7); transform: translateY(-2px); color: var(--brand-blue); }
.vt-theme__icon { font-size: 1.35rem; color: var(--brand-blue); }
.vt-theme__label {
    font-size: var(--fs-2xs);
    font-weight: var(--fw-extra);
    letter-spacing: .04em;
    text-transform: uppercase;
    line-height: 1.25;
}
.vt-theme + .vt-theme { border-left: 1px solid rgba(18, 62, 135, .12); }

/* ============================================================================
   13. PROMO CARD — offerta editoriale (foto + titolo + prezzo + CTA)
   ============================================================================ */
.vt-promo {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 300px;
    padding: var(--space-5);
    border-radius: var(--radius-lg);
    overflow: hidden;
    color: #fff;
    text-decoration: none;
    box-shadow: var(--shadow-md);
    transition: transform var(--transition), box-shadow var(--transition);
}
.vt-promo:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); color: #fff; }
.vt-promo img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .5s var(--ease);
}
.vt-promo:hover img { transform: scale(1.05); }
.vt-promo::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(11, 42, 94, .88) 0%, rgba(11, 42, 94, .35) 50%, rgba(11, 42, 94, .05) 100%);
}
.vt-promo__inner { position: relative; z-index: 1; }
.vt-promo__kicker {
    display: inline-flex;
    font-size: var(--fs-2xs);
    font-weight: var(--fw-extra);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--brand-yellow);
    margin-bottom: .3rem;
}
.vt-promo__title {
    font-size: var(--fs-h2);
    font-weight: var(--fw-black);
    color: #fff;
    line-height: var(--lh-tight);
    letter-spacing: -.025em;
    margin: 0 0 .35rem;
}
.vt-promo__sub {
    font-size: var(--fs-sm);
    color: rgba(255, 255, 255, .9);
    margin: 0 0 var(--space-4);
}
.vt-promo__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}
.vt-promo .vt-price__from,
.vt-promo .vt-price__unit { color: rgba(255, 255, 255, .8); }
.vt-promo .vt-price__value { color: var(--brand-yellow); }

/* ============================================================================
   14. FAQ — accordion sobrio, usato su tutte le landing
   ============================================================================ */
.vt-faq { display: flex; flex-direction: column; gap: var(--space-3); }
.vt-faq__item {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}
.vt-faq__item[open] { border-color: var(--brand-azure-tint); box-shadow: var(--shadow-xs); }
.vt-faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-4);
    font-size: var(--fs-sm);
    font-weight: var(--fw-extra);
    color: var(--brand-blue);
    cursor: pointer;
    list-style: none;
}
.vt-faq__q::-webkit-details-marker { display: none; }
.vt-faq__q::after {
    content: '\f078';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: .75rem;
    color: var(--brand-azure-ink);
    transition: transform var(--transition);
}
.vt-faq__item[open] .vt-faq__q::after { transform: rotate(180deg); }
.vt-faq__a {
    padding: 0 var(--space-4) var(--space-4);
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    line-height: 1.65;
}

/* ============================================================================
   15. CTA BAND — chiusura di pagina, sempre la stessa su tutto il portale
   ============================================================================ */
.vt-cta-band {
    position: relative;
    overflow: hidden;
    padding: var(--space-8) var(--space-5);
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-blue-mid) 100%);
    color: #fff;
    text-align: center;
}
.vt-cta-band::before,
.vt-cta-band::after {
    content: '';
    position: absolute;
    border-radius: var(--radius-blob);
    background: rgba(255, 208, 40, .16);
    pointer-events: none;
}
.vt-cta-band::before { width: 220px; height: 220px; top: -80px; left: -70px; }
.vt-cta-band::after  { width: 280px; height: 280px; bottom: -130px; right: -90px; background: rgba(41, 169, 224, .22); }
.vt-cta-band__inner { position: relative; z-index: 1; }
.vt-cta-band__title {
    font-size: var(--fs-h2);
    font-weight: var(--fw-black);
    color: #fff;
    letter-spacing: -.025em;
    margin: 0 0 var(--space-2);
}
.vt-cta-band__sub {
    font-size: var(--fs-lg);
    color: rgba(255, 255, 255, .88);
    margin: 0 auto var(--space-5);
    max-width: 56ch;
}

/* ============================================================================
   16. RESTYLING DEI COMPONENTI ESISTENTI
   Il markup non cambia: cambia solo la pelle. Nessun selettore usato da
   Alpine, Flatpickr o dai JS di ricerca viene rinominato.
   ============================================================================ */

/* --- Barra operatore -------------------------------------------------- */
.vt-opbar { background: var(--brand-blue-dark) !important; }

/* --- Header ----------------------------------------------------------- */
.navbar-vt {
    background: #fff !important;
    box-shadow: 0 1px 0 var(--border), 0 4px 18px rgba(18, 62, 135, .06);
    padding: .55rem 0;
}
.navbar-vt .navbar-brand { padding-block: 0; }
.navbar-vt .navbar-brand img { height: 40px; width: auto; display: block; }
.navbar-vt .nav-link {
    color: var(--brand-blue) !important;
    font-weight: var(--fw-bold);
    font-size: var(--fs-sm);
    padding: .5rem .8rem !important;
    border-radius: var(--radius-pill);
    transition: color var(--transition), background var(--transition);
}
.navbar-vt .nav-link:hover {
    color: var(--brand-azure-ink) !important;
    background: var(--brand-azure-soft);
}
.navbar-vt .nav-link.active {
    color: var(--brand-blue) !important;
    background: var(--brand-yellow-soft);
}
.navbar-vt .nav-link i { color: var(--brand-azure); }
.navbar-vt .nav-link:hover i,
.navbar-vt .nav-link.active i { color: var(--brand-azure-ink); }

/* Il link account: secondario, non compete con la CTA di ricerca */
.navbar-vt .btn-login {
    background: #fff !important;
    border: 2px solid var(--brand-blue);
    color: var(--brand-blue) !important;
    font-weight: var(--fw-extra);
    border-radius: var(--radius-pill);
    padding: .42rem 1.05rem !important;
}
.navbar-vt .btn-login:hover {
    background: var(--brand-blue) !important;
    color: #fff !important;
    transform: translateY(-1px);
}
.navbar-vt .btn-login i { color: inherit; }
.navbar-vt .dropdown-menu {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    padding: .4rem;
}
.navbar-vt .dropdown-item {
    border-radius: var(--radius-xs);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--brand-blue);
}
.navbar-vt .dropdown-item:hover { background: var(--brand-azure-soft); color: var(--brand-blue); }
.navbar-toggler { border: 2px solid var(--brand-blue) !important; border-radius: var(--radius-xs); }
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%23123E87' stroke-width='2.4' stroke-linecap='round' d='M5 8h20M5 15h20M5 22h20'/%3E%3C/svg%3E") !important;
}

/* Assistenza in header */
.vt-nav-help {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    color: var(--brand-blue);
    text-decoration: none;
    white-space: nowrap;
}
.vt-nav-help i { color: var(--brand-green); }
.vt-nav-help:hover { color: var(--brand-azure-ink); }
.vt-nav-help__num { font-weight: var(--fw-extra); }

/* --- Hero homepage ---------------------------------------------------- */
.vt-hero {
    position: relative;
    background-position: center;
    background-size: cover;
    padding-top: clamp(2.5rem, 7vw, 4.5rem);
    padding-bottom: clamp(2rem, 5vw, 3.5rem);
}
.vt-hero__overlay {
    background: linear-gradient(180deg, rgba(11, 42, 94, .58) 0%, rgba(11, 42, 94, .42) 45%, rgba(11, 42, 94, .68) 100%);
}
.vt-hero__title {
    font-size: var(--fs-hero);
    font-weight: var(--fw-black);
    color: #fff;
    letter-spacing: -.03em;
    line-height: var(--lh-tight);
    text-shadow: 0 3px 18px rgba(0, 20, 55, .35);
}
.vt-hero__subtitle {
    font-size: clamp(1rem, 2.2vw, 1.2rem);
    font-weight: var(--fw-medium);
    color: rgba(255, 255, 255, .94);
    text-shadow: 0 2px 10px rgba(0, 20, 55, .3);
}

/* --- Search widget: forme morbide, CTA blu --------------------------- */
.vt-search-widget {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    border: 1px solid rgba(255, 255, 255, .6);
}
.vt-search-widget__tabs { border-bottom: 1px solid var(--border); gap: .25rem; padding: .4rem .4rem 0; }
.vt-search-widget__tab {
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    font-weight: var(--fw-bold);
    font-size: var(--fs-sm);
    color: var(--text-secondary);
}
.vt-search-widget__tab--active {
    color: var(--brand-blue);
    background: var(--brand-azure-soft);
    box-shadow: inset 0 -3px 0 var(--brand-azure);
}
.vt-search-field { border-radius: var(--radius); }
.vt-search-field__label {
    font-size: var(--fs-2xs);
    font-weight: var(--fw-extra);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--brand-blue);
}
.vt-search-field__label i { color: var(--brand-azure); }
.vt-search-field__input {
    font-size: var(--fs-base);
    font-weight: var(--fw-semibold);
    color: var(--text-primary);
    border-radius: var(--radius-sm);
}
.vt-search-field__input::placeholder { color: var(--text-soft); font-weight: var(--fw-regular); }
.vt-search-field:focus-within { box-shadow: inset 0 0 0 2px var(--brand-azure); border-radius: var(--radius-sm); }

/* La CTA del motore: blu, pill, la cosa più cliccabile della pagina */
.vt-search-btn {
    background: var(--brand-blue) !important;
    border: 0;
    border-radius: var(--radius-pill) !important;
    font-size: var(--fs-lg);
    font-weight: var(--fw-extra);
    letter-spacing: .01em;
    color: #fff;
    box-shadow: var(--shadow-blue);
    transition: background var(--transition), transform .15s var(--ease);
}
.vt-search-btn:hover { background: var(--brand-blue-dark) !important; transform: translateY(-2px); }

.vt-autocomplete {
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border);
    overflow: hidden;
}
.vt-autocomplete__item { font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.vt-autocomplete__item:hover { background: var(--brand-azure-soft); }
.vt-autocomplete__icon { color: var(--brand-azure); }

.vt-guests-popover { border-radius: var(--radius); box-shadow: var(--shadow-lg); border: 1px solid var(--border); }
.vt-stepper__btn {
    border-radius: var(--radius-pill);
    border: 1.5px solid var(--brand-azure-tint);
    color: var(--brand-azure-ink);
    font-weight: var(--fw-bold);
}
.vt-stepper__btn:hover:not(:disabled) { background: var(--brand-azure-soft); border-color: var(--brand-azure); }
.vt-guests-confirm {
    background: var(--brand-blue);
    border-radius: var(--radius-pill);
    font-weight: var(--fw-extra);
    color: #fff;
}
.vt-guests-confirm:hover { background: var(--brand-blue-dark); }
.vt-guests-add-room {
    border-radius: var(--radius-pill);
    border: 1.5px dashed var(--brand-azure);
    color: var(--brand-azure-ink);
    font-weight: var(--fw-bold);
}
.vt-guests-add-room:hover { background: var(--brand-azure-soft); }

/* --- Trust strip sotto la hero: card bianche arrotondate ------------- */
.vt-trust-strip {
    background: transparent;
    border: 0;
    padding-top: var(--space-5);
    padding-bottom: var(--space-2);
}
.vt-trust-strip__items {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-3);
    border: 0;
}
.vt-trust-divider { display: none !important; }
.vt-trust-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-xs);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--text-primary);
}
.vt-trust-item__icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 36px; height: 36px;
    border-radius: var(--radius-sm);
    background: var(--brand-azure-soft);
    color: var(--brand-azure-ink);
    font-size: .95rem;
}

/* --- Section header legacy → nuova gerarchia ------------------------- */
.vt-section-title {
    font-size: var(--fs-h2);
    font-weight: var(--fw-black);
    color: var(--brand-blue);
    letter-spacing: -.025em;
    line-height: var(--lh-tight);
}
.vt-section-sub { font-size: var(--fs-sm); color: var(--text-secondary); }

/* --- Tab destinazioni / pill filtri --------------------------------- */
.vt-dest-tab {
    border-radius: var(--radius-pill);
    border: 1.5px solid var(--border-strong);
    background: #fff;
    color: var(--brand-blue);
    font-weight: var(--fw-bold);
    font-size: var(--fs-sm);
}
.vt-dest-tab:hover { background: var(--brand-azure-soft); border-color: var(--brand-azure); color: var(--brand-blue); }
.vt-dest-tab--active {
    background: var(--brand-blue);
    border-color: var(--brand-blue);
    color: #fff;
}

/* --- Card hotel homepage / vetrine ---------------------------------- */
.vt-hotel-card {
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
}
.vt-hotel-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--brand-azure-tint);
    transform: translateY(-4px);
}
.vt-hotel-card__stars { color: var(--brand-yellow); }
.vt-hotel-card__stars .vt-star-empty { color: var(--border-strong); }
.vt-hotel-card__name {
    font-size: var(--fs-lg);
    font-weight: var(--fw-extra);
    color: var(--brand-blue);
    line-height: var(--lh-snug);
}
.vt-hotel-card__desc { font-size: var(--fs-sm); color: var(--text-secondary); }
.vt-hotel-card__footer { border-top: 1px solid var(--border); }
.vt-hotel-card__cta {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: var(--fs-2xs);
    font-weight: var(--fw-extra);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--brand-azure-ink);
}
.vt-hotel-card:hover .vt-hotel-card__cta { color: var(--brand-blue); }

/* --- Destination card legacy --------------------------------------- */
.vt-dest-card { border-radius: var(--radius-md); box-shadow: var(--shadow); }
.vt-dest-card:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); }
.vt-dest-card__overlay {
    background: linear-gradient(to top, rgba(11, 42, 94, .8) 0%, rgba(11, 42, 94, .1) 60%, transparent 100%);
}
.vt-dest-card__name {
    font-size: var(--fs-h3);
    font-weight: var(--fw-black);
    letter-spacing: -.02em;
}
.vt-dest-card__count { font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--brand-yellow); }

/* --- Banner "dove vuoi andare" ------------------------------------- */
.vt-banner { border-radius: var(--radius-md); box-shadow: var(--shadow); }
.vt-banner:hover { box-shadow: var(--shadow-md); }
.vt-banner__title { font-weight: var(--fw-black); letter-spacing: -.02em; }
.vt-banner__go { color: var(--brand-yellow); font-weight: var(--fw-extra); }

/* --- Feature / benefit legacy -------------------------------------- */
.vt-feature-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs);
}
.vt-feature-card__icon {
    border-radius: var(--radius-blob);
    background: var(--brand-azure-soft);
    color: var(--brand-azure-ink);
}
.vt-feature-card__title { font-size: var(--fs-base); font-weight: var(--fw-extra); color: var(--brand-blue); }
.vt-feature-card__desc { font-size: var(--fs-sm); color: var(--text-secondary); }
.vt-why__img { border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.vt-why__list li { font-weight: var(--fw-semibold); }
.vt-why__list i { color: var(--brand-green); }

/* --- CTA legacy ---------------------------------------------------- */
.vt-btn-primary {
    background: var(--brand-blue);
    border: 2px solid var(--brand-blue);
    border-radius: var(--radius-pill);
    font-weight: var(--fw-extra);
    color: #fff;
    box-shadow: var(--shadow-blue);
    padding: .8rem 1.6rem;
}
.vt-btn-primary:hover { background: var(--brand-blue-dark); border-color: var(--brand-blue-dark); color: #fff; }

/* --- Risultati di ricerca ----------------------------------------- */
.vt-hotel-result__price-from,
.vt-hotel-result__price-detail {
    font-size: var(--fs-2xs);
    font-weight: var(--fw-semibold);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: .05em;
}
.vt-hotel-result__price {
    font-size: var(--fs-price-sm);
    font-weight: var(--fw-black);
    color: var(--brand-blue);
    letter-spacing: -.03em;
    position: relative;
    display: inline-block;
}
/* Pennellata gialla sotto il prezzo: la firma del brand sui risultati */
.vt-hotel-result__price::after {
    content: '';
    position: absolute;
    left: -.04em; right: -.04em; bottom: -.06em;
    height: .15em;
    background: var(--brush-yellow) no-repeat center/100% 100%;
}
.vt-hotel-result__cta {
    background: var(--brand-blue);
    border: 2px solid var(--brand-blue);
    border-radius: var(--radius-pill);
    font-weight: var(--fw-extra);
    color: #fff;
    box-shadow: var(--shadow-blue);
}
.vt-hotel-result__cta:hover { background: var(--brand-blue-dark); border-color: var(--brand-blue-dark); color: #fff; }
.vt-hotel-result__price-board { color: var(--brand-green); font-weight: var(--fw-bold); }
.vt-hotel-result__lead {
    border-radius: var(--radius-pill);
    border: 2px solid var(--brand-blue);
    color: var(--brand-blue);
    font-weight: var(--fw-extra);
}

/* --- Filtri sidebar ---------------------------------------------- */
.sidebar-filters,
.vt-filters {
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-xs);
}
.filter-pills .btn-pill {
    border-radius: var(--radius-pill);
    border: 1.5px solid var(--border-strong);
    color: var(--brand-blue);
    font-weight: var(--fw-bold);
}
.filter-pills .btn-pill:hover { background: var(--brand-azure-soft); border-color: var(--brand-azure); }

/* --- Pagina dettaglio / prenotazione -----------------------------
   Il prezzo della camera e quello della sidebar passano da <x-vt.price>:
   le vecchie regole .vt-room-opt__amount e .vt-booking__price di style.css
   non hanno piu' un elemento a cui applicarsi. Qui resta solo quello che
   il componente non sa: dove sta e quanto spazio prende. */
.vt-room-opt__price { display: flex; justify-content: flex-end; }
.vt-booking__amount { margin-bottom: .35rem; }

/* L'intestazione della sidebar non e' piu' una promessa inventata ma la
   cancellazione della tariffa scelta: verde del brand, non un gradiente. */
.vt-booking__head {
    background: var(--brand-green);
    font-weight: var(--fw-extra);
    letter-spacing: .06em;
}
.vt-booking {
    border-radius: var(--radius-md);
    border-color: var(--border);
    box-shadow: var(--shadow-md);
}
.vt-booking__cta {
    background: var(--brand-blue);
    border: 2px solid var(--brand-blue);
    border-radius: var(--radius-pill);
    font-weight: var(--fw-extra);
    color: #fff;
    box-shadow: var(--shadow-blue);
}
.vt-booking__cta:hover { background: var(--brand-blue-dark); border-color: var(--brand-blue-dark); color: #fff; }
.vt-booking__btn { border-radius: var(--radius-pill); font-weight: var(--fw-bold); }

/* Contatti: una riga discreta sotto l'unica azione primaria. */
.vt-booking__contact {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1) var(--space-3);
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--border);
    font-size: var(--fs-xs);
}
.vt-booking__contact-label {
    flex: 1 0 100%;
    color: var(--text-secondary);
    font-weight: var(--fw-semibold);
}
.vt-booking__contact a,
.vt-booking__contact button {
    padding: 0;
    border: 0;
    background: none;
    color: var(--brand-azure-ink);
    font-size: inherit;
    font-weight: var(--fw-bold);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.vt-booking__contact a:hover,
.vt-booking__contact button:hover { color: var(--brand-blue); }

/* La barra di fiducia condivisa sostituisce le due righe fatte a mano. */
.vt-booking__trust { padding: var(--space-3) var(--space-4); border-top: 1px solid var(--border); }
.vt-booking__trust .vt-trust--inline { flex-direction: column; gap: var(--space-2); }

/* Badge voto sulle card dei risultati. Piccolo per scelta: il prezzo resta
   l'argomento, il voto e' una conferma. Il credito a Tripadvisor e' un
   requisito dei termini d'uso, non una didascalia. */
.vt-ta-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-1);
    color: var(--text-secondary);
    font-size: var(--fs-2xs);
    line-height: 1;
}
.vt-ta-badge strong { color: var(--brand-blue); font-size: var(--fs-xs); }
.vt-ta-badge__bubbles { height: 13px; width: auto; }
.vt-ta-badge__source {
    padding-left: var(--space-2);
    border-left: 1px solid var(--border);
    color: var(--text-soft);
}

/* --- Recensioni Tripadvisor --------------------------------------
   Sono la prima prova sociale vera che questo sito abbia: si vedono, ma
   non rubano la scena al prezzo. Bollini, date e crediti sono obbligatori
   per i termini d'uso: non si tolgono per fare ordine. */
.vt-reviews {
    padding: var(--space-5);
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow);
}
.vt-reviews__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}
.vt-reviews__title {
    margin: 0 0 var(--space-2);
    color: var(--brand-blue);
    font-size: var(--fs-h3);
    font-weight: var(--fw-extra);
}
.vt-reviews__score {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--brand-blue);
    font-size: var(--fs-lg);
    font-weight: var(--fw-black);
}
.vt-reviews__bubbles { height: 18px; width: auto; }
.vt-reviews__count {
    color: var(--text-secondary);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
}
.vt-reviews__source {
    color: var(--brand-azure-ink);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    white-space: nowrap;
}

.vt-reviews__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--space-4);
}
.vt-review {
    padding: var(--space-4);
    background: var(--background-soft);
    border-radius: var(--radius-sm);
}
.vt-review__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}
.vt-review__bubbles { height: 15px; width: auto; }
.vt-review__date {
    color: var(--text-secondary);
    font-size: var(--fs-2xs);
    text-transform: capitalize;
}
.vt-review__title {
    margin: 0 0 var(--space-2);
    color: var(--brand-blue);
    font-size: var(--fs-sm);
    font-weight: var(--fw-extra);
}
.vt-review__text {
    margin: 0 0 var(--space-3);
    color: var(--text-primary);
    font-size: var(--fs-xs);
    line-height: var(--lh-normal);
    display: -webkit-box;
    -webkit-line-clamp: 6;
    line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.vt-review__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    color: var(--text-secondary);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-semibold);
}
.vt-review__foot a { color: var(--brand-azure-ink); }

/* --- Identità dell'agenzia e pagine legali -----------------------
   Sobrio per scelta: deve trasmettere che i dati ci sono e sono verificabili,
   non gridare. Chi li cerca li trova; chi non li cerca non viene disturbato. */
.vt-company {
    text-align: center;
    color: var(--text-on-dark);
    font-size: var(--fs-2xs);
    line-height: var(--lh-normal);
    opacity: .75;
}
.vt-company__name { font-weight: var(--fw-bold); }
.vt-company__details { display: block; }
.footer-company { margin-bottom: var(--space-2); }

/* Dentro una pagina chiara (checkout, legali) il colore si ribalta. */
.vt-legal .vt-company,
.vt-company--compact {
    color: var(--text-secondary);
    text-align: left;
    opacity: 1;
}

.vt-legal h1 {
    margin-bottom: var(--space-4);
    color: var(--brand-blue);
    font-size: var(--fs-h1);
    font-weight: var(--fw-extra);
}
.vt-legal h2 {
    margin: var(--space-7) 0 var(--space-3);
    color: var(--brand-blue);
    font-size: var(--fs-h3);
    font-weight: var(--fw-extra);
}
.vt-legal h3 {
    margin: var(--space-5) 0 var(--space-2);
    color: var(--text-primary);
    font-size: var(--fs-base);
    font-weight: var(--fw-bold);
}
.vt-legal p,
.vt-legal li {
    max-width: 70ch;
    color: var(--text-primary);
    font-size: var(--fs-base);
    line-height: var(--lh-normal);
}
.vt-legal ul { padding-left: var(--space-5); }
.vt-legal li { margin-bottom: var(--space-2); }
.vt-legal__intro {
    color: var(--text-secondary);
    font-size: var(--fs-lg);
}
.vt-legal__updated {
    margin-top: var(--space-8);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border);
    color: var(--text-soft);
    font-size: var(--fs-xs);
}

/* La barra date delle landing ricarica la pagina puntando a #lp-risultati:
   senza questo margine l'ancora finisce sotto la navbar agganciata e il
   cliente atterra su un titolo tagliato a meta'. */
#lp-risultati { scroll-margin-top: 90px; }

/* --- Errore di ricerca ------------------------------------------
   Non e' un alert giallo con dentro un codice HTTP: e' un blocco che dice
   cosa e' successo e da' sempre due strade. L'API va in throttling nelle
   ore di punta, quindi questa schermata si vede davvero. */
.vt-search-error {
    padding: var(--space-7) var(--space-5);
    background: var(--background-soft);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    text-align: center;
}
.vt-search-error__icon {
    font-size: 1.8rem;
    color: var(--brand-yellow-dark);
}
.vt-search-error__title {
    margin: var(--space-3) 0 var(--space-2);
    color: var(--brand-blue);
    font-size: var(--fs-h3);
    font-weight: var(--fw-extra);
}
.vt-search-error__text {
    max-width: 46ch;
    margin: 0 auto var(--space-5);
    color: var(--text-secondary);
    font-size: var(--fs-sm);
}
.vt-search-error__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-3) var(--space-5);
}
.vt-search-error__support {
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.vt-search-error__support:hover { color: var(--brand-blue); }

/* --- Lista risultati --------------------------------------------
   Stato dichiarato per l'hotel senza foto: e' il caso normale del feed,
   non un errore, e non deve somigliare a un'immagine che non carica. */
.vt-hotel-result__nophoto {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    width: 100%;
    height: 100%;
    min-height: 140px;
    background: var(--background-sunk);
    color: var(--text-secondary);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-semibold);
    text-align: center;
}
.vt-hotel-result__nophoto i { font-size: 1.4rem; color: var(--text-soft); }

/* Una sola azione primaria per card: il sito vende online, non raccoglie
   telefonate. "Vedi camere" e' pieno e a pillola; WhatsApp e preventivo
   scendono a riga di link, come nella sidebar della scheda. */
.vt-hotel-result__cta {
    border-radius: var(--radius-pill);
    font-weight: var(--fw-extra);
    box-shadow: var(--shadow-blue);
}
.vt-hotel-result__contact {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-1) var(--space-3);
    margin-top: var(--space-2);
    font-size: var(--fs-2xs);
}
.vt-hotel-result__contact a,
.vt-hotel-result__contact button {
    padding: 0;
    border: 0;
    background: none;
    color: var(--text-secondary);
    font-size: inherit;
    font-weight: var(--fw-semibold);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.vt-hotel-result__contact a:hover,
.vt-hotel-result__contact button:hover { color: var(--brand-blue); }

/* Il rosso e' per errori e urgenza vera. Una tariffa non rimborsabile e'
   valida: si dice, non si allarma. (Nelle vetrine delle landing la riga
   esiste ancora; qui le si toglie il rosso senza toccarne il markup.) */
.vt-hotel-result__refund--no { color: var(--text-secondary) !important; }
.vt-hotel-result__refund--yes { color: var(--brand-green) !important; }

/* Non rimborsabile e' un fatto, non un errore: sta fra i badge, in grigio. */
.badge-no-cancel {
    display: inline-flex;
    align-items: center;
    padding: .3rem .7rem;
    border-radius: var(--radius-pill);
    background: var(--background-sunk);
    color: var(--text-secondary);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-semibold);
}

/* "Mostra altri N hotel": chiude il blocco, non compete con le card. */
.vt-results-more {
    display: block;
    width: 100%;
    margin-top: var(--space-4);
    padding: var(--space-4);
    background: #fff;
    border: 1.5px solid var(--border-strong);
    border-radius: var(--radius-pill);
    color: var(--brand-blue);
    font-size: var(--fs-sm);
    font-weight: var(--fw-extra);
    transition: background var(--transition), border-color var(--transition);
}
.vt-results-more:hover { background: var(--brand-azure-soft); border-color: var(--brand-azure); }

/* --- Camere raggruppate per tipo -------------------------------
   Un gruppo = una card (raggio 20px come tutte le card del sistema).
   Le tariffe dentro sono righe divise da un filo, non card annidate. */
.vt-rooms__count {
    margin: calc(var(--space-2) * -1) 0 var(--space-4);
    color: var(--text-secondary);
    font-size: var(--fs-sm);
}

.vt-room-group {
    margin-bottom: var(--space-4);
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow);
    overflow: hidden;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.vt-room-group--selected {
    border-color: var(--brand-azure);
    box-shadow: var(--shadow-md);
}

.vt-room-group__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4);
}
.vt-room-group__ident { min-width: 0; }
.vt-room-group__name {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    margin: 0;
    color: var(--brand-blue);
    font-size: var(--fs-h3);
    font-weight: var(--fw-extra);
    line-height: var(--lh-snug);
}
.vt-room-group__name i { color: var(--brand-azure); font-size: .8em; }
.vt-room-group__occupancy {
    margin-top: var(--space-1);
    color: var(--text-secondary);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
}
.vt-room-group__occupancy i { color: var(--brand-azure-ink); margin-right: .35rem; }

.vt-rate + .vt-rate,
.vt-room-group__rates { border-top: 1px solid var(--border); }

.vt-rate__row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 44px;
    padding: var(--space-3) var(--space-4);
    cursor: pointer;
    transition: background var(--transition);
}
.vt-rate__row:hover { background: var(--brand-azure-soft); }
.vt-rate--selected .vt-rate__row { background: var(--brand-azure-soft); }

.vt-rate__radio { flex: 0 0 auto; color: var(--text-soft); font-size: var(--fs-lg); }
.vt-rate--selected .vt-rate__radio { color: var(--brand-blue); }

.vt-rate__info { flex: 1 1 auto; min-width: 0; }
.vt-rate__board {
    color: var(--text-primary);
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
}
.vt-rate__cancel {
    color: var(--brand-green);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
}
.vt-rate__nocancel {
    color: var(--text-secondary);
    font-size: var(--fs-xs);
}
.vt-rate__cancel i,
.vt-rate__nocancel i { margin-right: .3rem; }

.vt-rate__include {
    display: block;
    padding: 0 var(--space-4) var(--space-3);
    margin-left: calc(var(--fs-lg) + var(--space-3));
    border: 0;
    background: none;
    color: var(--brand-azure-ink);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.vt-rate__include:hover { color: var(--brand-blue); }
.vt-rate__include i { margin-right: .3rem; }

.vt-rate__panel { padding: 0 var(--space-4) var(--space-4); }
.vt-rate__panel-list {
    margin: 0;
    padding: var(--space-3) var(--space-4);
    list-style: none;
    background: var(--background-sunk);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: var(--fs-xs);
}
.vt-rate__panel-list li + li { margin-top: var(--space-2); }
.vt-rate__panel-list i { width: 16px; margin-right: .4rem; color: var(--brand-azure-ink); text-align: center; }
.vt-rate__panel-list strong { color: var(--text-primary); }

.vt-room-group__more {
    display: block;
    width: 100%;
    padding: var(--space-3);
    border: 0;
    border-top: 1px solid var(--border);
    background: none;
    color: var(--brand-azure-ink);
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
}
.vt-room-group__more:hover { background: var(--brand-azure-soft); color: var(--brand-blue); }

@media (max-width: 575.98px) {
    .vt-room-group__head { flex-direction: column; gap: var(--space-2); }
    .vt-room-group__head .vt-price { align-items: flex-start; text-align: left; }
}

/* --- Lista risultati su mobile ----------------------------------
   Il prezzo e' l'unico argomento di vendita e stava in fondo alla card,
   dopo 550-650px di contenuto. Non si riordina (il nome dell'hotel deve
   restare prima della cifra): si accorcia tutto quello che sta in mezzo,
   cosi' la cifra entra nella prima schermata. */
@media (max-width: 767.98px) {
    .vt-hotel-result__thumb { height: 150px; }

    /* Due righe bastano: spesso la "descrizione" e' l'indirizzo ripetuto. */
    .vt-hotel-result__desc {
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }

    /* La cifra resta sopra il pavimento di leggibilita' del sistema. */
    .vt-hotel-result__price { font-size: var(--fs-price-sm); }

    .vt-hotel-result__contact { justify-content: flex-start; }

    /* Il bottone filtri e quello WhatsApp occupavano lo stesso angolo, con
       WhatsApp sopra: copriva il badge dei filtri attivi. I filtri sono lo
       strumento di questa pagina e si prendono l'angolo libero. */
    .vt-filter-fab {
        right: auto !important;
        left: 1rem;
        bottom: calc(1.5rem + var(--vt-chrome-bottom)) !important;
    }
}

/* La sidebar si chiamava "sticky" senza esserlo mai: la classe portava solo
   un offset. Da 992px in su ora si aggancia davvero. */
@media (min-width: 992px) {
    .vt-booking.sticky-top-content { position: sticky; }
}

/* --- Barra di prenotazione fissa su mobile -----------------------
   Sotto i 992px la sidebar finisce in fondo alla lista tariffe: la CTA
   viaggia con l'utente invece di aspettarlo due schermate piu' giu'. */
.vt-mobile-cta { display: none; }

/* Quanto stare sopra il bordo inferiore. Dentro il browser in-app di
   Facebook e Instagram va lasciato posto alla barra che disegnano loro (il
   tasto WhatsApp degli annunci): sta fuori dal nostro documento, quindi non
   si puo' coprire, si puo' solo evitare. Il valore e' una stima prudente
   della loro barra: si regola qui, in un posto solo. */
:root { --vt-chrome-bottom: 0px; }
.vt-inapp { --vt-chrome-bottom: 105px; }
/* Tarato guardandolo sul telefono: 64 e 96 erano troppo bassi, 140
   lasciava un buco. La barra e' alta circa 70px, quindi 105 la
   appoggia appena sopra quella di Meta. */
/* 64px non bastavano, verificato sul telefono: la barra di Meta e'
   piu' alta, e su iOS ci si somma l'area del gesto home. */

@media (max-width: 991.98px) {
    .vt-mobile-cta {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        bottom: var(--vt-chrome-bottom);
        z-index: 1040;
        background: var(--background);
        border-top: 1px solid var(--border);
        box-shadow: var(--shadow-lg);
        padding: var(--space-3) var(--space-4);
        padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom));
    }
    .vt-mobile-cta__inner {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        max-width: var(--container-width);
        margin: 0 auto;
    }
    .vt-mobile-cta__info { flex: 1 1 auto; min-width: 0; }
    .vt-mobile-cta__room {
        color: var(--brand-blue);
        font-size: var(--fs-sm);
        font-weight: var(--fw-extra);
        line-height: var(--lh-snug);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .vt-mobile-cta__board {
        color: var(--text-secondary);
        font-size: var(--fs-2xs);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .vt-mobile-cta .vt-price { flex: 0 0 auto; }
    .vt-mobile-cta__btn { flex: 0 0 auto; min-height: 44px; }

    /* Lo spazio in fondo si aggiunge solo quando la barra c'e' davvero:
       __inner esiste nel DOM soltanto a camera selezionata. */
    body:has(.vt-mobile-cta__inner) { padding-bottom: calc(5.5rem + var(--vt-chrome-bottom)); }

    /* La sidebar in fondo ripeterebbe la stessa CTA della barra. */
    body:has(.vt-mobile-cta__inner) .vt-booking__cta { display: none; }

    /* Quando la barra di prenotazione c'e', il bottone WhatsApp le finirebbe
       dietro a meta': in quel momento la pagina ha una sola azione. */
    body:has(.vt-mobile-cta__inner) .wa-fab { display: none; }
}

/* --- Checkout ---------------------------------------------------- */
.btn-confirm {
    background: var(--brand-blue);
    border: 2px solid var(--brand-blue);
    border-radius: var(--radius-pill);
    font-weight: var(--fw-extra);
    color: #fff;
    box-shadow: var(--shadow-blue);
}
.btn-confirm:hover { background: var(--brand-blue-dark); border-color: var(--brand-blue-dark); color: #fff; }
.checkout-summary-card .summary-total-price,
.confirm-total-price { font-weight: var(--fw-black); color: var(--brand-blue); letter-spacing: -.03em; }

/* --- Form Bootstrap: angoli morbidi, focus azzurro -------------- */
.form-control, .form-select {
    border-radius: var(--radius-sm);
    border-color: var(--border-strong);
    font-size: var(--fs-sm);
}
.form-control:focus, .form-select:focus {
    border-color: var(--brand-azure);
    box-shadow: 0 0 0 .2rem rgba(41, 169, 224, .2);
}
.form-label { font-weight: var(--fw-bold); color: var(--brand-blue); font-size: var(--fs-xs); }
.card { border-radius: var(--radius-md); border-color: var(--border); }
.alert { border-radius: var(--radius); border: 0; font-size: var(--fs-sm); }
.alert-success { background: var(--brand-green-soft); color: #0a6b3a; }
.alert-danger  { background: var(--brand-red-soft); color: var(--brand-red); }
.alert-warning { background: var(--brand-yellow-tint); color: #7a5b00; }
.alert-info    { background: var(--brand-azure-soft); color: var(--brand-azure-ink); }
.badge.bg-success { background: var(--brand-green) !important; }
.modal-content { border-radius: var(--radius-md) !important; }

/* --- Footer ------------------------------------------------------ */
.footer-vt {
    background: var(--brand-blue-dark);
    color: rgba(255, 255, 255, .82);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    margin-top: var(--space-8);
}
.footer-vt h6 {
    color: #fff;
    font-size: var(--fs-xs);
    font-weight: var(--fw-extra);
    letter-spacing: .1em;
    text-transform: uppercase;
    position: relative;
    padding-bottom: var(--space-2);
}
.footer-vt h6::after {
    content: '';
    position: absolute;
    left: 0; bottom: 0;
    width: 28px; height: 3px;
    border-radius: var(--radius-pill);
    background: var(--brand-yellow);
}
.footer-vt a { color: rgba(255, 255, 255, .82); text-decoration: none; font-size: var(--fs-sm); }
.footer-vt a:hover { color: var(--brand-yellow); }
.footer-vt .footer-tagline { font-size: var(--fs-sm); color: rgba(255, 255, 255, .72); }
.footer-vt .footer-divider { border-color: rgba(255, 255, 255, .14); }
.footer-vt .footer-copy { font-size: var(--fs-xs); color: rgba(255, 255, 255, .6); }
.footer-vt .footer-contact { font-size: var(--fs-sm); }
.footer-vt .footer-contact i { color: var(--brand-yellow); }

/* --- WhatsApp FAB: verde, non compete col brand ----------------- */
/* Il bottone WhatsApp e' la via d'uscita, non l'invito principale: questo
   sito deve far prenotare. Resta raggiungibile ovunque ma smette di essere
   l'elemento piu' acceso dello schermo, e non passa piu' sopra alla UI
   (z-index 9999 copriva i controlli della pagina). */
.wa-fab {
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow);
    z-index: 1030;
    opacity: .92;
}
.wa-fab:hover { opacity: 1; box-shadow: var(--shadow-md); }

/* Nel browser in-app di Meta il tasto WhatsApp lo mettono loro: due bottoni
   verdi uguali uno sopra l'altro sono confusione, non doppia possibilita'. */
.vt-inapp .wa-fab { display: none; }

/* ============================================================================
   17. RESPONSIVE — mobile first sui componenti nuovi
   ============================================================================ */
@media (max-width: 991.98px) {
    .navbar-vt .navbar-collapse {
        padding: var(--space-3) 0 var(--space-2);
        margin-top: var(--space-2);
        border-top: 1px solid var(--border);
    }
    .navbar-vt .nav-link { padding: .7rem .85rem !important; }
    .navbar-vt .btn-login { display: inline-flex; justify-content: center; margin-top: var(--space-2); }
    .vt-nav-help { padding: .6rem .85rem; }
}

@media (max-width: 767.98px) {
    :root { --section-y: 2.25rem; }

    /* CTA grandi e comode da toccare */
    .vt-btn { padding: .9rem 1.5rem; font-size: var(--fs-base); }
    .vt-btn--lg { padding: 1.05rem 1.6rem; }
    .vt-btn--block-mobile { width: 100%; }

    .vt-search-btn { width: 100%; padding: .95rem 1.2rem; }

    /* Prezzi comunque leggibili */
    .vt-price__value { font-size: 1.45rem; }
    .vt-price-badge { padding: .9rem 1.4rem; }

    /* Card in colonna, foto un po' più basse */
    .vt-card__media { aspect-ratio: 16 / 10; }
    .vt-promo { min-height: 260px; padding: var(--space-4); }
    .vt-dest { min-height: 180px; }
    .vt-dest--tall { min-height: 240px; }
    .vt-dest__name { font-size: 1.15rem; }

    /* Sezioni: niente header a due colonne strette */
    .vt-sechead { flex-direction: column; align-items: flex-start; }
    .vt-sechead__link { align-self: flex-start; }

    .vt-trust-strip__items { grid-template-columns: 1fr; gap: var(--space-2); }
    .vt-trust-item { padding: var(--space-3); font-size: var(--fs-xs); }
    .vt-trust-item__icon { width: 32px; height: 32px; }

    .vt-themes { border-radius: var(--radius-md); padding: var(--space-3) var(--space-2); }
    .vt-theme { min-width: 84px; }
    .vt-theme + .vt-theme { border-left: 0; }

    .vt-cta-band { padding: var(--space-6) var(--space-4); border-radius: var(--radius-md); }
    .footer-vt { border-radius: var(--radius-md) var(--radius-md) 0 0; }
}

/* Chi preferisce meno movimento non lo subisce */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
    }
    .vt-btn:hover, .vt-card:hover, .vt-dest:hover, .vt-promo:hover { transform: none; }
}

/* ============================================================================
   18. LOGO — wordmark costruito in HTML/CSS
   Non e' un'immagine: resta nitido a ogni dimensione, usa i token del brand
   e la stessa font del sito. Vedi partials/_logo.blade.php
   ============================================================================ */
.vt-logo {
    display: inline-flex;
    flex-direction: column;
    gap: .1rem;
    text-decoration: none;
    line-height: 1;
}
.vt-logo:hover { text-decoration: none; }

.vt-logo__mark {
    position: relative;
    display: inline-flex;
    align-items: baseline;
    font-family: var(--font-sans);
    font-size: var(--vt-logo-size, 1.65rem);
    font-weight: var(--fw-black);
    letter-spacing: -.035em;
    color: var(--brand-blue);
    white-space: nowrap;
    padding-right: .62em;   /* spazio per i raggi */
}
.vt-logo__accent { color: var(--brand-azure); }
.vt-logo__tld {
    font-size: .52em;
    font-weight: var(--fw-extra);
    letter-spacing: -.01em;
    color: var(--brand-blue);
    margin-left: .04em;
}
.vt-logo__rays {
    position: absolute;
    top: -.26em;
    right: -.04em;
    width: .8em;
    height: .8em;
    background: var(--brand-yellow);
    -webkit-mask: var(--rays-mask) no-repeat center/contain;
            mask: var(--rays-mask) no-repeat center/contain;
}
.vt-logo__tagline {
    font-size: var(--vt-logo-tagline-size, .5rem);
    font-weight: var(--fw-bold);
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--brand-blue);
    white-space: nowrap;
}

/* Versione su fondo scuro (footer) */
.vt-logo--light .vt-logo__mark,
.vt-logo--light .vt-logo__tld { color: #fff; }
.vt-logo--light .vt-logo__accent { color: var(--brand-azure); }
.vt-logo--light .vt-logo__tagline { color: rgba(255, 255, 255, .7); }

.vt-logo--lg { --vt-logo-size: 2.6rem; --vt-logo-tagline-size: .68rem; }
.vt-logo--sm { --vt-logo-size: 1.3rem; --vt-logo-tagline-size: .44rem; }

@media (max-width: 575.98px) {
    .vt-logo { --vt-logo-size: 1.4rem; --vt-logo-tagline-size: .44rem; }
    .vt-logo--lg { --vt-logo-size: 2rem; --vt-logo-tagline-size: .58rem; }
}

/* Tessera destinazione senza foto: fondo blu del brand con i raggi gialli.
   Meglio una tessera coerente che un'immagine rotta. */
.vt-dest--noimg {
    background:
        radial-gradient(120% 90% at 85% 10%, rgba(41,169,224,.55) 0%, transparent 60%),
        linear-gradient(150deg, var(--brand-blue-mid) 0%, var(--brand-blue-dark) 100%);
}
.vt-dest--noimg::after { background: none; }
.vt-dest--noimg .vt-dest__body::before {
    content: '';
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    width: 2.2rem; height: 2.2rem;
    background: var(--brand-yellow);
    opacity: .9;
    -webkit-mask: var(--rays-mask) no-repeat center/contain;
            mask: var(--rays-mask) no-repeat center/contain;
}

/* Card promo senza foto: stesso fondo del brand delle tessere destinazione. */
.vt-promo--noimg {
    background:
        radial-gradient(120% 90% at 85% 5%, rgba(41,169,224,.5) 0%, transparent 62%),
        linear-gradient(150deg, var(--brand-blue-mid) 0%, var(--brand-blue-dark) 100%);
}
.vt-promo--noimg::after { background: none; }

/* ============================================================================
   19. CORREZIONI DI SPAZIATURA HERO → CONTENUTI
   Il widget storico sporgeva di 60px oltre la hero e uno spacer di 72px
   compensava l'overlap. Con la nuova hero (padding proprio) i due si
   sommavano lasciando un buco vuoto: qui si azzerano entrambi.
   ============================================================================ */
.vt-search-widget { margin-bottom: 0; }
.vt-hero__spacer { display: none; }
.vt-trust-strip { margin-top: 0; }

/* Barra assistenza sotto il motore: agganciata al widget, colori del brand */
.lp-support-bar {
    background: var(--brand-azure-soft);
    border: 1px solid var(--brand-azure-tint);
    border-radius: 0 0 var(--radius) var(--radius);
    padding: .65rem 1.15rem;
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
}
.lp-support-bar__label { color: var(--text-secondary); }
.lp-support-bar__label i { color: var(--brand-azure-ink); }
.lp-support-bar__phone { color: var(--brand-blue); font-weight: var(--fw-extra); }
.lp-support-bar__whatsapp {
    border-radius: var(--radius-pill);
    font-weight: var(--fw-bold);
}

@media (max-width: 991.98px) {
    .lp-support-bar { border-radius: var(--radius); margin-top: .5rem; }
}

/* ============================================================================
   20. LANDING PAGE — stesso sistema della home
   Le landing hanno CSS proprio (lp-*): qui viene riportato sui token del
   brand, senza toccare il markup ne' la logica dei filtri.
   ============================================================================ */
.lp-hero {
    background: linear-gradient(140deg, var(--brand-blue) 0%, var(--brand-blue-dark) 100%);
}
.lp-hero__bg { filter: brightness(.58) saturate(1.05); }
/* Velo blu sopra la foto: tiene il titolo leggibile su qualsiasi immagine */
.lp-hero::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(11,42,94,.35) 0%, rgba(11,42,94,.62) 100%);
    pointer-events: none;
}
.lp-hero__content { position: relative; z-index: 2; }
.lp-hero__title {
    font-size: var(--fs-h1);
    font-weight: var(--fw-black);
    letter-spacing: -.03em;
    text-shadow: 0 3px 16px rgba(0,20,55,.35);
}
.lp-hero__subtitle {
    font-size: clamp(1rem, 2vw, 1.15rem);
    font-weight: var(--fw-medium);
    color: rgba(255,255,255,.92);
}

.lp-search-wrap {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border);
}

.lp-body { font-size: var(--fs-lg); line-height: 1.8; color: var(--text-primary); }
.lp-body h2 {
    font-size: var(--fs-h3); font-weight: var(--fw-extra);
    color: var(--brand-blue); margin-top: var(--space-6);
}
.lp-body h3 { font-size: var(--fs-lg); font-weight: var(--fw-extra); color: var(--brand-blue); }
.lp-body a { color: var(--brand-azure-ink); font-weight: var(--fw-semibold); }

/* Griglia localita' delle pagine "regione": stesso trattamento delle
   destination card della home */
.lp-regions { gap: var(--space-4); }
.lp-region-card {
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.lp-region-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--brand-azure-tint);
}
.lp-region-card__overlay {
    background: linear-gradient(to top, rgba(11,42,94,.8) 0%, rgba(11,42,94,.1) 60%, transparent 100%);
}
.lp-region-card__name {
    font-size: var(--fs-h3);
    font-weight: var(--fw-black);
    letter-spacing: -.02em;
}
.lp-region-card__cta {
    font-size: var(--fs-2xs);
    font-weight: var(--fw-extra);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--brand-yellow);
}

/* Avviso "prezzi indicativi": giallo del brand, non un giallo qualsiasi */
.lp-indicative-banner {
    background: var(--brand-yellow-tint);
    border: 1px solid var(--brand-yellow);
    border-radius: var(--radius);
    color: #6b5200;
    font-size: var(--fs-sm);
}
.lp-indicative-banner i { color: var(--brand-yellow-dark); }
.lp-indicative-banner strong { color: var(--brand-blue); }
.lp-indicative-banner__cta { color: var(--brand-blue); font-weight: var(--fw-bold); }

/* ============================================================================
   21. COMPONENTI LEGACY DI CONVERSIONE
   Classi storiche usate su risultati, dettaglio e checkout. Nessuna
   rinominata (le usano i JS di ricerca): solo ristilizzate.
   ============================================================================ */

/* CTA di selezione tariffa: e' l'azione principale delle card risultato */
.btn-select {
    background: var(--brand-blue);
    border: 2px solid var(--brand-blue);
    border-radius: var(--radius-pill);
    color: #fff;
    font-weight: var(--fw-extra);
    padding: .6rem 1.5rem;
    font-size: var(--fs-sm);
    box-shadow: var(--shadow-blue);
}
.btn-select:hover {
    background: var(--brand-blue-dark);
    border-color: var(--brand-blue-dark);
    color: #fff;
    transform: translateY(-2px);
}

/* Prezzo delle card storiche: cifra blu con pennellata gialla */
.price-tag {
    position: relative;
    display: inline-block;
    font-size: var(--fs-price-sm);
    font-weight: var(--fw-black);
    color: var(--brand-blue);
    letter-spacing: -.03em;
}
.price-tag::after {
    content: '';
    position: absolute;
    left: -.04em; right: -.04em; bottom: -.06em;
    height: .15em;
    background: var(--brush-yellow) no-repeat center/100% 100%;
}
.price-label-small,
.price-nights {
    font-size: var(--fs-2xs);
    font-weight: var(--fw-semibold);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: .05em;
}

/* Indicatore di step del checkout: blu per lo stato corrente,
   verde per gli step completati (il verde qui rassicura) */
.step-item.active .step-circle {
    background: var(--brand-blue);
    border-color: var(--brand-blue);
    color: #fff;
}
.step-item.completed .step-circle {
    background: var(--brand-green);
    border-color: var(--brand-green);
    color: #fff;
}
.step-item.completed:not(:last-child)::after { background: var(--brand-green); }

/* Barra riepilogo ricerca sotto l'header */
.search-bar-compact,
.vt-search-compact { background: var(--brand-blue); }
.search-bar-compact .btn-modify,
.vt-search-compact__modify-btn {
    border-radius: var(--radius-pill);
    font-weight: var(--fw-bold);
}
.vt-search-compact__cta {
    background: var(--brand-yellow);
    color: var(--brand-blue);
    border-radius: var(--radius-pill);
    font-weight: var(--fw-extra);
    border: 0;
}
.vt-search-compact__cta:hover { background: var(--brand-yellow-dark); color: var(--brand-blue); }

/* Breadcrumb */
.breadcrumb-vt, .breadcrumb { font-size: var(--fs-xs); font-weight: var(--fw-semibold); }
.breadcrumb a { color: var(--brand-azure-ink); text-decoration: none; }

/* Pannello filtri */
.sidebar-filters__header,
.vt-filters__header {
    background: var(--brand-blue);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}

/* Header: con sette voci tematiche lo spazio orizzontale e' stretto.
   Tra 992 e 1199px si sacrificano le icone e il numero di telefono,
   che sono decorazione: le voci restano tutte su una riga. */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .navbar-vt .nav-link { padding: .45rem .6rem !important; font-size: var(--fs-xs); }
    .navbar-vt .nav-link i { display: none; }
    .vt-nav-help__num { display: none; }
}

/* "Gli ospiti adorano": era un riquadro pesca ereditato dalla palette
   arancione. Diventa giallo tenue del brand, che e' il colore con cui
   Viaggiotanto evidenzia le cose belle. */
.vt-loved {
    background: var(--brand-yellow-tint);
    border: 1px solid var(--brand-yellow);
    border-radius: var(--radius);
}
.vt-loved__title { color: var(--brand-blue); font-weight: var(--fw-extra); }
.vt-loved__title i { color: var(--brand-yellow-dark); }
.vt-loved__check { color: var(--brand-green); }
.vt-loved__icon { color: var(--brand-azure-ink); }

/* Modale lead: il prezzo segue la gerarchia del brand */
.vt-lead-modal__offer {
    background: var(--brand-azure-soft);
    border: 1px solid var(--brand-azure-tint);
    border-radius: var(--radius);
}
.vt-lead-modal__offer-price { color: var(--brand-blue); font-weight: var(--fw-black); }

/* ============================================================================
   22. ULTIMI RESIDUI DELLA PALETTE ARANCIONE
   Colori scritti a mano nel CSS storico, riportati sui token.
   ============================================================================ */

/* Stelle: sempre il giallo del brand, non un ambra qualsiasi */
.hotel-stars i,
.vt-hotel-card__stars .fa-star,
.vt-show-header__stars,
.vt-hotel-result__stars .fa-star { color: var(--brand-yellow); }

/* Tariffa selezionata: la selezione e' un'azione, quindi azzurro */
.vt-room-opt--selected {
    border-color: var(--brand-azure);
    box-shadow: 0 0 0 3px var(--brand-azure-soft);
    background: var(--brand-azure-soft);
}

/* Riquadri di avviso su policy e checkout: giallo del brand */
.vt-policy__item--warn,
.vt-checkout-reassure--warn {
    background: var(--brand-yellow-tint);
    border-color: var(--brand-yellow);
}
.vt-policy__item--warn i { color: var(--brand-yellow-dark); }
.vt-policy__item--ok { background: var(--brand-green-soft); }

/* Badge dell'hero partner: su fondo blu il badge e' giallo */
.partner-hero__badge {
    background: rgba(255, 208, 40, .18);
    border-color: rgba(255, 208, 40, .45);
    color: var(--brand-yellow);
}

/* ============================================================================
   23. BARRA DATE E OSPITI DELLE LANDING
   Tre campi (check-in, check-out, ospiti) piu' l'azione: qui non c'e' la
   destinazione, perche' cambiarla porterebbe fuori dalla pagina curata.
   Il grid a cinque colonne del motore completo lascerebbe una colonna vuota
   e spingerebbe il bottone fuori dal pannello.
   Scoped da 992px in su: sotto valgono le regole a due colonne dello storico.
   ============================================================================ */
@media (min-width: 992px) {
    .vt-search-form--stay { grid-template-columns: 1fr 1fr 1.3fr auto; }
}
@media (max-width: 991.98px) {
    /* Il contenitore del bottone della barra date si chiama --submit, mentre
       il motore completo usa --vt-search-cta: la regola che manda il bottone
       a tutta larghezza su mobile valeva solo per il secondo. Qui restava
       largo una colonna e il testo, che non va a capo, usciva dalla pillola
       ("Cerca con ques..."). */
    .vt-search-field--submit { grid-column: 1 / -1; }
}

/* I campi devono poter restringersi. In una griglia `1fr` non scende mai
   sotto la larghezza minima del contenuto, e un <input> ne ha una molto
   generosa (deriva dall'attributo `size`, non da `width: 100%`). Senza
   `min-width: 0` il campo check-out usciva dal pannello bianco e la data
   finiva tagliata a meta', con l'etichetta spezzata su due righe.
   Si vede solo dove le colonne sono strette, cioe' su telefono. */
.vt-search-field { min-width: 0; }
.vt-search-field__input,
.vt-guests-trigger { min-width: 0; }

.vt-search-field--submit {
    border-right: 0;
    display: flex;
    align-items: center;
    padding: .5rem;
}
.vt-search-field--submit .vt-search-btn {
    white-space: nowrap;
    padding-inline: 1.4rem;
}

/* Griglia localita' delle pagine regione: auto-fit al posto di auto-fill,
   altrimenti con poche localita' restano tracce vuote e le card non si
   distendono. */
.lp-regions { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

/* Attribuzione delle foto libere: presente ma discreta, non compete col contenuto. */
.vt-credits {
    font-size: var(--fs-2xs);
    color: var(--text-soft);
    line-height: 1.6;
    margin: 0;
}
.vt-credits a { color: var(--text-soft); text-decoration: underline; }
.vt-credits a:hover { color: var(--brand-azure-ink); }

/* ============================================================================
   HOME — hero piu' alta, mete rapide, mosaico offerte
   ============================================================================ */
.vt-hero { min-height: clamp(520px, 62vh, 680px); }
.vt-hero__title { font-size: clamp(2.2rem, 6.2vw, 4rem); }
.vt-hero__copy { padding-bottom: clamp(1.25rem, 3vw, 2.25rem); }

/* Mete rapide sotto il sottotitolo: pillole traslucide su fondo scuro */
.vt-hero__chips {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: .5rem; margin: 1.25rem auto 0; padding: 0; max-width: 46rem;
}
.vt-hero__chips a {
    display: inline-flex; align-items: center; gap: .4rem;
    min-height: 44px; padding: 0 1rem;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .38);
    color: #fff; font-weight: var(--fw-bold); font-size: var(--fs-sm);
    text-decoration: none; backdrop-filter: blur(6px);
    transition: background var(--transition), color var(--transition), transform var(--transition);
}
.vt-hero__chips a:hover, .vt-hero__chips a:focus-visible {
    background: var(--brand-yellow); color: var(--brand-blue); transform: translateY(-2px);
}
.vt-hero__chips i { font-size: .75em; color: var(--brand-yellow); }
.vt-hero__chips a:hover i, .vt-hero__chips a:focus-visible i { color: var(--brand-blue); }

/* La scheda "Viaggi di gruppo" e' un link: stessa forma delle schede */
.vt-search-widget__tab--link { text-decoration: none; display: inline-flex; align-items: center; white-space: nowrap; }
.vt-search-widget__tab--link:hover { color: var(--brand-blue); }
.vt-search-widget__tabs { overflow-x: auto; scrollbar-width: none; }
.vt-search-widget__tabs::-webkit-scrollbar { display: none; }

/* Mosaico offerte: mobile a colonna, da 992px la prima occupa due righe */
.vt-offers__head {
    display: flex; flex-wrap: wrap; align-items: flex-end;
    justify-content: space-between; gap: var(--space-3) var(--space-5);
}
.vt-offers__head > :first-child { flex: 1 1 18rem; min-width: 0; }
.vt-offers__head .vt-gt__all { margin-bottom: 2rem; }
.vt-offers { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
.vt-offers__item { min-height: 260px; }
.vt-offers__item--lead { min-height: 340px; }
.vt-offers__item--lead .vt-promo__title { font-size: clamp(1.6rem, 4vw, 2.2rem); }
@media (min-width: 640px) {
    .vt-offers { grid-template-columns: repeat(2, 1fr); }
    .vt-offers__item--lead { grid-column: 1 / -1; }
}
@media (min-width: 992px) {
    .vt-offers { grid-template-columns: 1.6fr 1fr 1fr; grid-auto-rows: 250px; }
    .vt-offers__item { min-height: 0; }
    .vt-offers__item--lead { grid-column: 1; grid-row: 1 / span 2; }
}

/* Entrata sobria delle sezioni; spenta con prefers-reduced-motion */
@media (prefers-reduced-motion: no-preference) {
    .vt-hero__copy { animation: vt-rise .6s var(--ease) both; }
    .vt-hero__chips li { animation: vt-rise .6s var(--ease) both; }
    .vt-hero__chips li:nth-child(2) { animation-delay: .05s; }
    .vt-hero__chips li:nth-child(3) { animation-delay: .1s; }
    .vt-hero__chips li:nth-child(4) { animation-delay: .15s; }
    .vt-hero__chips li:nth-child(5) { animation-delay: .2s; }
    .vt-hero__chips li:nth-child(6) { animation-delay: .25s; }
}
@keyframes vt-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* Mobile: schede in riga su una linea sola, meno chip per non spingere il motore sotto la piega */
@media (max-width: 575.98px) {
    .vt-search-widget__tabs { padding: 0 .5rem; gap: 0; flex-wrap: nowrap; }
    .vt-search-widget__tab {
        flex: 0 0 auto; white-space: nowrap; min-height: 44px;
        padding: .75rem .8rem; font-size: .88rem;
    }
    .vt-search-widget__tab i { margin-right: .35rem !important; }
    .vt-hero__chips { gap: .4rem; margin-top: 1rem; }
    .vt-hero__chips li:nth-child(n+5) { display: none; }
    .vt-hero__chips a { min-height: 40px; padding: 0 .8rem; }
}


/* ============================================================================
   INTESTAZIONE (2026-10-25) — due righe sul blu del brand: logo e account,
   poi i prodotti come schede. Da telefono le schede scorrono di lato.
   ============================================================================ */
.vt-top {
    background: var(--brand-blue);
    color: #fff;
    position: relative;
    z-index: 1030;
}
.vt-top__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    min-height: 64px;
    padding-block: .5rem;
}
.vt-top__logo { flex-shrink: 0; }
.vt-top__actions { display: flex; align-items: center; gap: .35rem; }

.vt-top__help,
.vt-top__link {
    display: inline-flex; align-items: center; gap: .5rem;
    min-height: 44px; padding: 0 .75rem;
    color: #fff; text-decoration: none;
    font-size: var(--fs-sm); font-weight: var(--fw-semibold);
    border-radius: var(--radius-xs);
    transition: background var(--transition);
}
.vt-top__help:hover,
.vt-top__link:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.vt-top__help i, .vt-top__link i { font-size: 1.05rem; }
.vt-top__help strong { font-weight: var(--fw-extra); }

.vt-top__btn {
    display: inline-flex; align-items: center; gap: .45rem;
    min-height: 40px; padding: 0 1rem;
    border-radius: var(--radius-xs);
    font-size: var(--fs-sm); font-weight: var(--fw-extra);
    text-decoration: none; white-space: nowrap;
    transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.vt-top__btn--light { background: #fff; color: var(--brand-blue); border: 1px solid #fff; }
.vt-top__btn--light:hover { background: var(--brand-azure-soft); color: var(--brand-blue); }
.vt-top__btn--ghost { color: #fff; border: 1px solid rgba(255, 255, 255, .55); }
.vt-top__btn--ghost:hover { background: rgba(255, 255, 255, .12); border-color: #fff; color: #fff; }
.vt-top__crown { color: var(--brand-yellow); }

.vt-top__nav { padding-bottom: .65rem; }
.vt-top__tabs {
    display: flex; gap: .35rem;
    list-style: none; margin: 0; padding: 0;
    overflow-x: auto; scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.vt-top__tabs::-webkit-scrollbar { display: none; }
.vt-top__tab {
    position: relative;
    display: inline-flex; align-items: center; gap: .5rem;
    min-height: 44px; padding: 0 .9rem;
    border: 0; border-radius: var(--radius-xs);
    background: none; color: #fff;
    font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-semibold);
    text-decoration: none; white-space: nowrap; cursor: pointer;
    transition: background var(--transition), border-color var(--transition);
}
.vt-top__tab:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.vt-top__tab i { color: var(--brand-azure); }
/* Scheda attiva: la barretta gialla del brand sotto, non un riquadro */
.vt-top__tab.is-active { font-weight: var(--fw-extra); }
.vt-top__tab.is-active i { color: var(--brand-yellow); }
.vt-top__tab.is-active::after {
    content: ""; position: absolute; left: .9rem; right: .9rem; bottom: 2px;
    height: 4px; border-radius: 4px; background: var(--brand-yellow);
}

/* Iscrizione al Club: la pillola gialla del brand, con la corona */
.vt-top__club {
    display: inline-flex; align-items: center; gap: .5rem;
    min-height: 40px; padding: 0 1.1rem; margin-left: .25rem;
    border-radius: var(--radius-pill);
    background: var(--brand-yellow); color: var(--brand-blue);
    font-size: var(--fs-sm); font-weight: var(--fw-extra);
    text-decoration: none; white-space: nowrap;
    transition: background var(--transition);
}
.vt-top__club:hover { background: var(--brand-yellow-dark); color: var(--brand-blue); }
.vt-top__club:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.vt-top__tab:focus-visible,
.vt-top__btn:focus-visible,
.vt-top__link:focus-visible,
.vt-top__help:focus-visible { outline: 2px solid var(--brand-yellow); outline-offset: 2px; }
.vt-top__menu {
    border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: var(--shadow-md); padding: .4rem;
}
.vt-top__menu .dropdown-item {
    border-radius: var(--radius-xs); font-size: var(--fs-sm);
    font-weight: var(--fw-semibold); color: var(--brand-blue);
}
.vt-top__menu .dropdown-item:hover { background: var(--brand-azure-soft); color: var(--brand-blue); }

/* Sotto i 992 px assistenza e prenotazioni restano solo icone: con il testo
   andavano a capo su tre righe */
@media (max-width: 991.98px) {
    .vt-top__help-text, .vt-top__label { display: none; }
}
@media (max-width: 767.98px) {
    .vt-top__bar { min-height: 56px; gap: .5rem; }
    .vt-top__logo .vt-logo__tagline { display: none; }
    .vt-top__actions { gap: .15rem; }
    .vt-top__help, .vt-top__link { padding: 0 .6rem; }
    .vt-top__btn { padding: 0 .75rem; }
    /* Le schede arrivano al bordo: si capisce che scorrono */
    .vt-top__tabs { scroll-padding-inline: 12px; }
    .vt-top__tabs { margin-inline: calc(var(--bs-gutter-x, 1.5rem) * -.5); padding-inline: calc(var(--bs-gutter-x, 1.5rem) * .5); }
}


/* ViaggioTanto Club (2026-10-25): barra d'invito, prezzo barrato per gli
   iscritti, prezzo Club per chi non ha fatto l'accesso */
.vt-rate__pricebox { display: flex; flex-direction: column; align-items: flex-end; }
.vt-club-bar {
    display: flex;
    align-items: center;
    gap: 12px 16px;
    flex-wrap: wrap;
    background: var(--vt-blue-dark);
    color: #fff;
    border-radius: 12px;
    padding: 14px 18px;
    margin-bottom: 16px;
}
.vt-club-bar__icon { color: var(--brand-yellow); font-size: 1.25rem; }
.vt-club-bar__text { margin: 0; flex: 1 1 280px; }
.vt-club-bar__actions { display: flex; align-items: center; gap: 14px; }
.vt-club-bar__login { color: #fff; font-weight: 600; text-decoration: underline; }
.vt-club-member {
    display: flex; align-items: center; gap: 8px;
    margin: 0 0 16px; font-weight: 600; color: var(--vt-blue-dark);
}
.vt-club-member .fa-crown, .vt-club-price__badge .fa-crown, .vt-club-price__teaser .fa-crown { color: var(--brand-yellow-dark); }
.vt-club-price { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.vt-club-price__was { text-decoration: line-through; color: var(--vt-text-muted); font-size: .9rem; }
.vt-club-price__badge {
    font-size: .75rem; font-weight: 700; color: var(--vt-blue-dark);
    background: var(--brand-yellow-soft); border-radius: 999px; padding: 2px 8px;
}
.vt-club-price__teaser {
    display: block; text-align: right; font-size: .82rem; margin: 4px 0 8px;
    color: var(--vt-blue-dark); text-decoration: none;
}
.vt-club-price__teaser:hover { text-decoration: underline; }

/* L'intestazione non e' piu' fissa: i riquadri laterali che le stavano sotto
   (filtri, riepiloghi) si fermano vicino al bordo della finestra */
.sticky-top-content,
#vtQuoteBuy { top: 16px !important; }

/* ============================================================================
   ACCESSO E ISCRIZIONE (2026-10-25) — a sinistra il Club, a destra il modulo
   ============================================================================ */
.vt-auth { padding: var(--space-7) 0 var(--space-9); background: var(--background-sunk); }
.vt-auth__grid {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: var(--space-5); max-width: 980px; margin: 0 auto; align-items: start;
}
.vt-auth__aside {
    background: var(--brand-blue); color: #fff;
    border-radius: 18px; padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}
.vt-auth__badge { display: inline-flex; align-items: center; gap: .5rem; font-weight: var(--fw-extra); color: var(--brand-yellow); margin-bottom: .75rem; }
.vt-auth__pitch {
    font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); font-weight: var(--fw-black);
    line-height: var(--lh-tight); letter-spacing: -.02em; color: #fff; margin: 0 0 .6rem; text-wrap: balance;
}
.vt-auth__pitch-text { color: rgba(255, 255, 255, .88); margin: 0 0 var(--space-4); }
.vt-auth__list { list-style: none; margin: 0; padding: 0; }
.vt-auth__list li { display: flex; gap: .6rem; padding: .35rem 0; }
.vt-auth__list i { color: var(--brand-yellow); margin-top: .3rem; }

.vt-auth__card {
    background: #fff; border: 1px solid var(--border); border-radius: 18px;
    padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); box-shadow: var(--shadow);
}
.vt-auth__title { font-size: 1.75rem; font-weight: var(--fw-black); color: var(--text-primary); margin: 0 0 .25rem; letter-spacing: -.02em; }
.vt-auth__lead { color: var(--text-secondary); margin: 0 0 var(--space-4); }
.vt-auth__form { display: grid; gap: var(--space-3); }
.vt-auth__row { display: grid; grid-template-columns: minmax(0, 1fr) 7.5rem; gap: var(--space-3); }
.vt-auth__field { display: grid; gap: .35rem; }
.vt-auth__field label { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--text-primary); }
.vt-auth__field label span { font-weight: var(--fw-regular); color: var(--text-secondary); }
.vt-auth__field input {
    width: 100%; min-height: 48px; padding: 0 .9rem;
    border: 1px solid var(--border-strong); border-radius: 10px;
    font: inherit; color: var(--text-primary); background: #fff;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.vt-auth__field input:focus { outline: none; border-color: var(--brand-azure-ink); box-shadow: 0 0 0 3px var(--brand-azure-tint); }
.vt-auth__field small { color: var(--text-secondary); font-size: var(--fs-xs); }
.vt-auth__check { display: flex; align-items: center; gap: .5rem; font-size: var(--fs-sm); color: var(--text-secondary); min-height: 44px; }
.vt-auth__check input { width: 18px; height: 18px; accent-color: var(--brand-blue); }
.vt-auth__check--top { align-items: flex-start; line-height: 1.45; }
.vt-auth__check--top input { flex: none; margin-top: .15rem; }
.vt-auth__submit { width: 100%; justify-content: center; min-height: 52px; margin-top: var(--space-1); }
.vt-auth__alt { margin: var(--space-3) 0 0; font-size: var(--fs-sm); color: var(--text-secondary); }
.vt-auth__alt a { font-weight: var(--fw-bold); color: var(--brand-azure-ink); }
.vt-auth__alert {
    margin-bottom: var(--space-3); padding: .8rem 1rem; border-radius: 10px;
    background: var(--brand-red-soft); color: var(--brand-red); font-size: var(--fs-sm);
}
.vt-auth__alert ul { margin: 0; padding-left: 1.1rem; }
.vt-auth__alert--ok { background: var(--brand-green-soft); color: var(--brand-green); }

@media (max-width: 767.98px) {
    .vt-auth { padding-top: var(--space-5); }
    .vt-auth__grid { grid-template-columns: 1fr; }
    /* Da telefono prima il modulo: chi arriva qui vuole entrare */
    .vt-auth__card { order: -1; }
    .vt-auth__row { grid-template-columns: 1fr; }
}
@media (max-width: 399.98px) {
    .vt-top__help { display: none; }
}

/* Campo destinazione: titoli dei gruppi nel menu (ricerche recenti, mete piu' cercate) */
.vt-autocomplete__group {
    padding: .55rem 1rem .25rem;
    font-size: var(--fs-2xs);
    font-weight: var(--fw-extra);
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-secondary);
}
.vt-autocomplete { max-height: min(60vh, 420px); overflow-y: auto; }
.vt-search-compact__field .vt-autocomplete { left: 0; right: 0; min-width: 280px; }