/* Scheda del pacchetto /viaggi/<slug> nella grafica della home HoEscape
 * (owner 17/10/2026, anteprima approvata con 16 modifiche). Solo stile e
 * disposizione: la logica di prenotazione resta quella di viaggi-detail.js
 * e viaggi-detail-v2.js. Vale solo con data-skin="hoe" e viene dopo
 * viaggi-detail.css e viaggi-detail-v2.css, che sovrascrive. */

html[data-skin="hoe"] .vd-page,
html[data-skin="hoe"] .vd-dock,
html[data-skin="hoe"] .vd-page button,
html[data-skin="hoe"] .vd-dock button {
    font-family: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* ── testata: foto in alto, titolo sotto su bianco ─────────────────── */
html[data-skin="hoe"] .vd-hero--foto { display: flex; flex-direction: column; }
html[data-skin="hoe"] .vd-hero--foto .vd-mosaic { order: 1; }
html[data-skin="hoe"] .vd-hero--foto .vd-head--hero { order: 2; }
html[data-skin="hoe"] .vd-head--hero .vd-name { color: var(--hoescape-primary, #1e3c72); font-weight: 800; }
/* «Righe pulite» (owner 17/10/2026): niente badge. Stelle sulla riga della
   località, subito prima; voto in testo; tipo di viaggio e assicurazione
   come voci con icona verde. Al computer voto e voci a destra del nome; al
   telefono il voto sta sulla foto (.vd-mosaic-rev) e le voci sotto il nome. */
html[data-skin="hoe"] .vd-head--hero .vd-kicker { display: none; }
html[data-skin="hoe"] .vd-head--hero .vd-place .vd-stars.vd-only-mobile { display: inline-flex !important; gap: 2px;
    margin-right: 4px; color: #f5a623; font-size: 15px; }
html[data-skin="hoe"] .vd-head--hero .vd-place { color: #4d5966; font-size: 15px; font-weight: 400;
    letter-spacing: 0; text-transform: none; text-shadow: none; }
html[data-skin="hoe"] .vd-head--hero .vd-place .bi-geo-alt-fill { color: var(--hoescape-primary, #1e3c72); }
html[data-skin="hoe"] .vd-head--hero .vd-reviews-chip { display: inline-flex; align-items: baseline; gap: 6px;
    background: none; border: 0; padding: 0; color: #14213d; text-decoration: none; text-shadow: none; }
html[data-skin="hoe"] .vd-head--hero .vd-reviews-score { background: none; color: var(--hoescape-primary, #1e3c72);
    font-size: 20px; font-weight: 800; padding: 0; }
html[data-skin="hoe"] .vd-head--hero .vd-reviews-score small { font-size: 12px; color: #5b6785; font-weight: 700; }
html[data-skin="hoe"] .vd-head--hero .vd-reviews-label { font-size: 15px; color: #14213d; font-weight: 400; }
html[data-skin="hoe"] .vd-head--hero .vd-reviews-label u { color: #5b6785; text-underline-offset: 3px; }
html[data-skin="hoe"] .vd-head-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; }
html[data-skin="hoe"] .vd-head--hero .vd-ptype,
html[data-skin="hoe"] .vd-head--hero .vd-insurance-chip,
html[data-skin="hoe"] .vd-head--hero .vd-adults-only {
    display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 0; border: 0; border-radius: 0;
    background: none; color: #14213d; font-size: 15px; font-weight: 700; letter-spacing: 0; text-transform: none;
    text-decoration: none; text-shadow: none;
}
html[data-skin="hoe"] .vd-head-facts i { color: var(--hoescape-accent-hover, #7fa31f); font-size: 17px; }
html[data-skin="hoe"] .vd-mosaic-rev { display: none; }
@media (min-width: 768px) {
    html[data-skin="hoe"] .vd-hero--foto .vd-head--hero { margin: 16px 0 10px; align-items: flex-end; }
    html[data-skin="hoe"] .vd-head--hero .vd-head-side { display: flex; flex-direction: column; align-items: flex-end;
        gap: 8px; text-align: right; }
    html[data-skin="hoe"] .vd-head-facts { justify-content: flex-end; }
}
@media (max-width: 767.98px) {
    html[data-skin="hoe"] .vd-hero--foto { margin-top: calc(4px - 1.25rem); }
    html[data-skin="hoe"] .vd-hero--foto .vd-mosaic::after { display: none; }
    html[data-skin="hoe"] .vd-hero--foto .vd-head--hero {
        position: static; display: flex; flex-direction: column; align-items: stretch; gap: 0;
        margin: 14px 0 4px; color: inherit; text-shadow: none; pointer-events: auto;
    }
    html[data-skin="hoe"] .vd-hero--foto .vd-head-main { display: flex; flex-direction: column; gap: 6px; }
    html[data-skin="hoe"] .vd-hero--foto .vd-meta { display: block; order: 3; }
    html[data-skin="hoe"] .vd-hero--foto .vd-head-main .vd-name { order: 1; flex-basis: auto; }
    html[data-skin="hoe"] .vd-hero--foto .vd-place .bi-geo-alt-fill { display: inline; }
    html[data-skin="hoe"] .vd-hero--foto .vd-name {
        color: var(--hoescape-primary, #1e3c72); font-size: 26px; line-height: 1.15; text-shadow: none; margin: 0;
    }
    html[data-skin="hoe"] .vd-hero--foto .vd-head-side { display: block; width: auto; margin-top: 12px;
        padding-top: 12px; border-top: 1px solid #e6eaf1; }
    /* il voto è sulla foto */
    html[data-skin="hoe"] .vd-hero--foto .vd-head-side .vd-reviews-chip { display: none; }
    html[data-skin="hoe"] .vd-hero--foto .vd-head-facts { flex-direction: column; align-items: flex-start; gap: 10px; }
    html[data-skin="hoe"] .vd-hero--foto .vd-mosaic { position: relative; }
    html[data-skin="hoe"] .vd-hero--foto .vd-mosaic-rev {
        position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; align-items: baseline; gap: 7px;
        padding: 44px 16px 12px; color: #fff; text-decoration: none; font-size: 14px;
        background: linear-gradient(180deg, rgba(8, 18, 40, 0), rgba(8, 18, 40, .72));
    }
    html[data-skin="hoe"] .vd-mosaic-rev strong { font-size: 22px; font-weight: 800; }
    html[data-skin="hoe"] .vd-mosaic-rev strong small { font-size: 12px; opacity: .85; font-weight: 700; }
    html[data-skin="hoe"] .vd-mosaic-rev b { font-size: 15px; }
    html[data-skin="hoe"] .vd-mosaic-rev u { opacity: .9; text-underline-offset: 3px; }
}

/* «2 adulti» sulla riga di «Camera 1» (owner 17/10/2026) */
html[data-skin="hoe"] .vd-rooms-head .vd-rooms-count.vd-room-party { flex-basis: auto; margin-left: auto; align-self: center; }

/* ── card della pagina ─────────────────────────────────────────────── */
html[data-skin="hoe"] .vd-page .vd-card,
html[data-skin="hoe"] .vd-page .vd-flightinfo,
html[data-skin="hoe"] .vd-page .vd-quota-box {
    border: 1px solid #e3e8f0; border-radius: 16px; box-shadow: none;
}
html[data-skin="hoe"] .vd-page .vd-h2,
html[data-skin="hoe"] .vd-page .vd-step-label { color: var(--hoescape-primary, #1e3c72); font-weight: 800; }
html[data-skin="hoe"] .vd-page .vd-step-n { background: var(--hoescape-primary, #1e3c72); }

/* ── camere e trattamenti: bordo blu e spunta verde ────────────────── */
html[data-skin="hoe"] .vd-page .vd-room,
html[data-skin="hoe"] .vd-page .vd-rt-plan { border: 1.5px solid #dfe4ee; border-radius: 12px; background: #fff; }
html[data-skin="hoe"] .vd-page .vd-room.is-picked,
html[data-skin="hoe"] .vd-page .vd-rt-plan.is-picked {
    border: 2px solid var(--hoescape-primary, #1e3c72); background: #f5f8fd; box-shadow: none;
}
html[data-skin="hoe"] .vd-page .vd-room.is-picked .vd-room-name--who::before,
html[data-skin="hoe"] .vd-page .vd-rt-plan.is-picked .vd-rt-plan-name::before {
    content: '\2713\00a0'; color: var(--hoescape-accent-hover, #7fa31f); font-weight: 900;
}
html[data-skin="hoe"] .vd-page .vd-room-price,
html[data-skin="hoe"] .vd-page .vd-room.is-picked .vd-room-price,
html[data-skin="hoe"] .vd-page .vd-rt-plan-price,
html[data-skin="hoe"] .vd-page .vd-room-price strong { color: var(--hoescape-primary, #1e3c72); }
html[data-skin="hoe"] .vd-page .vd-room.is-picked .vd-room-dot { border-color: var(--hoescape-primary, #1e3c72); }
html[data-skin="hoe"] .vd-page .vd-rt-delta { color: #5b6785; }
/* trattamento unico dentro la card della camera: al telefono sotto il
   nome, al computer sulla stessa riga con un carattere più leggero */
html[data-skin="hoe"] .vd-page .vd-rt-tn { flex-basis: 100%; font-size: .9em; font-weight: 500; color: #5b6785; }
@media (min-width: 768px) {
    html[data-skin="hoe"] .vd-page .vd-rt-tn { flex-basis: auto; }
    html[data-skin="hoe"] .vd-page .vd-rt-tn::before { content: '\00b7'; margin-right: .6rem; color: #9aa6bd; }
}
html[data-skin="hoe"] .vd-page .vd-rt-room[hidden] { display: none !important; }
html[data-skin="hoe"] .vd-page .vd-rt-more {
    align-self: flex-start; background: none; border: 0; padding: .2rem 0; cursor: pointer;
    font: inherit; font-weight: 800; font-size: .88rem; color: var(--hoescape-primary, #1e3c72);
}
html[data-skin="hoe"] .vd-page .vd-rt-only { font-size: .78rem; color: #8a94ab; }
html[data-skin="hoe"] .vd-page .vd-rt-trline {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
    margin-top: .6rem; padding-top: .7rem; border-top: 1px solid #eef1f6;
}
html[data-skin="hoe"] .vd-page .vd-rt-trline-k {
    font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #8a94ab;
}
html[data-skin="hoe"] .vd-page .vd-rt-trline strong { color: #14213d; }
html[data-skin="hoe"] .vd-page .vd-rt-trline-sub { font-size: .8rem; color: #5b6785; }
html[data-skin="hoe"] .vd-page .vd-rt-total { display: flex; justify-content: space-between; align-items: baseline;
    margin-top: .35rem; font-weight: 700; }
html[data-skin="hoe"] .vd-page .vd-rt-total strong { color: var(--hoescape-primary, #1e3c72); font-size: 1.15rem; font-weight: 900; }

/* ── volo: andata e ritorno su due colonne al computer ─────────────── */
@media (min-width: 992px) {
    html[data-skin="hoe"] .vd-page .vd-flight-legs { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
    html[data-skin="hoe"] .vd-page .vd-flight-legs .vd-flight-leg + .vd-flight-leg {
        border-left: 1px solid #e6eaf1; padding-left: 28px; border-top: 0; padding-top: 0; margin-top: 0;
    }
}

/* ── volo: città piccola sopra, orario grande sotto (anteprima 17/10) ─
   Il bagaglio è testo con la spunta verde, niente pillola (owner 17/10:
   niente badge). */
html[data-skin="hoe"] .vd-page .vd-flight-route .v2-leg-cap { display: flex; flex-direction: column; gap: 0;
    font-size: .82rem; font-weight: 600; color: #5b6785; line-height: 1.25; }
html[data-skin="hoe"] .vd-page .vd-flight-route .v2-leg-cap b { font-size: 1.4rem; font-weight: 800; color: #14213d; line-height: 1.15; }
html[data-skin="hoe"] .vd-page .vd-flight-route .v2-leg-cap:last-child { align-items: flex-end; text-align: right; }
html[data-skin="hoe"] .vd-page .vd-flight-route .v2-leg-cap:has(sup) { position: relative; padding-right: 16px; }
html[data-skin="hoe"] .vd-page .vd-flight-route .v2-leg-cap sup { position: absolute; right: 0; top: 19px; color: #e09000; font-size: .7rem; font-weight: 800; }
html[data-skin="hoe"] .vd-page .vd-flight-route .v2-leg-filo { align-self: flex-end; margin-bottom: .7rem; }
html[data-skin="hoe"] .vd-page #vdFlightBag { font-weight: 700; color: #14213d; }
html[data-skin="hoe"] .vd-page #vdFlightBag::before { content: '\2713\00a0'; color: var(--hoescape-accent-hover, #7fa31f); font-weight: 900; }

/* ── la quota: una card sola (anteprima approvata 17/10/2026) ──────────
   «La quota include» una voce per riga con la spunta verde; sotto, nella
   stessa card, «Non include: …» in una riga grigia. */
html[data-skin="hoe"] .vd-page .vd-quota {
    display: block; grid-template-columns: none; gap: 0;
    border: 1px solid #e3e8f0; border-radius: 16px; background: #fff; padding: 18px;
}
html[data-skin="hoe"] .vd-page .vd-quota .vd-quota-box { border: 0; border-radius: 0; background: none; padding: 0; margin: 0; box-shadow: none; }
html[data-skin="hoe"] .vd-page .vd-quota-box--in .vd-quota-title { color: var(--hoescape-primary, #1e3c72); font-size: 1.1rem; font-weight: 800; margin-bottom: 10px; }
html[data-skin="hoe"] .vd-page .vd-quota-box--in .vd-quota-title .bi { display: none; }
html[data-skin="hoe"] .vd-page .vd-quota-box--in .vd-quota-list { list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 6px; }
html[data-skin="hoe"] .vd-page .vd-quota-box--in .vd-quota-list li[hidden] { display: none; }
html[data-skin="hoe"] .vd-page .vd-quota-box--in .vd-quota-list li::before {
    content: '\2713\00a0'; color: var(--hoescape-accent-hover, #7fa31f); font-weight: 900;
}
html[data-skin="hoe"] .vd-page .vd-quota-box--in + .vd-quota-box--out { margin-top: 12px; padding-top: 12px; border-top: 1px solid #eef1f6; }
html[data-skin="hoe"] .vd-page .vd-quota-box--out { font-size: .88rem; color: #6b7280; }
html[data-skin="hoe"] .vd-page .vd-quota-box--out .vd-quota-title {
    display: inline; font-size: 0; color: #14213d; font-weight: 700; margin: 0;
}
html[data-skin="hoe"] .vd-page .vd-quota-box--out .vd-quota-title .bi { display: none; }
html[data-skin="hoe"] .vd-page .vd-quota-box--out .vd-quota-title::before { content: 'Non include:'; font-size: .88rem; }
html[data-skin="hoe"] .vd-page .vd-quota-box--out .vd-quota-list { display: inline; margin: 0; padding: 0; list-style: none; }
html[data-skin="hoe"] .vd-page .vd-quota-box--out .vd-quota-list li { display: inline; }
html[data-skin="hoe"] .vd-page .vd-quota-box--out .vd-quota-list li[hidden] { display: none; }
html[data-skin="hoe"] .vd-page .vd-quota-box--out .vd-quota-list li::before { content: ' '; }
html[data-skin="hoe"] .vd-page .vd-quota-box--out .vd-quota-list li:not([hidden]) ~ li:not([hidden])::before { content: ' \00b7 '; }
html[data-skin="hoe"] .vd-hero--foto .vd-head--hero { margin-bottom: 12px; }

/* ── assicurazione compatta ────────────────────────────────────────── */
html[data-skin="hoe"] .vd-insurance { background: #fff; border: 1px solid #e3e8f0; border-radius: 16px; }
html[data-skin="hoe"] .vd-insurance-title { color: var(--hoescape-primary, #1e3c72); font-weight: 800; }
html[data-skin="hoe"] .vd-insurance-key { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: .8rem; }
html[data-skin="hoe"] .vd-insurance-tile { background: #f3f6fb; border-radius: 12px; padding: .6rem .7rem;
    display: flex; flex-direction: column; gap: 2px; min-width: 0; }
html[data-skin="hoe"] .vd-insurance-tile span { font-size: .72rem; font-weight: 700; color: #5b6785; }
html[data-skin="hoe"] .vd-insurance-tile strong { font-size: .88rem; color: #14213d; line-height: 1.3; }
@media (max-width: 575px) { html[data-skin="hoe"] .vd-insurance-key { grid-template-columns: 1fr; } }
/* tre cifre grandi con la spiegazione sotto, come l'anteprima del 17/10:
   solo titolo sopra, la polizza per esteso resta in «Tutte le coperture» */
html[data-skin="hoe"] .vd-insurance-head > .bi,
html[data-skin="hoe"] .vd-insurance-head .vd-insurance-sub { display: none; }
html[data-skin="hoe"] .vd-insurance-key--big .vd-insurance-tile { align-items: center; text-align: center; gap: 2px; padding: .7rem .5rem; }
html[data-skin="hoe"] .vd-insurance-key--big .vd-insurance-tile strong { font-size: 1.1rem; font-weight: 800; color: #14213d; }
html[data-skin="hoe"] .vd-insurance-key--big .vd-insurance-tile span { font-size: .78rem; font-weight: 500; color: #5b6785; }
@media (max-width: 575px) { html[data-skin="hoe"] .vd-insurance-key.vd-insurance-key--big { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
html[data-skin="hoe"] .vd-insurance-all { margin-top: .7rem; }
html[data-skin="hoe"] .vd-insurance-all > summary {
    cursor: pointer; font-weight: 800; font-size: .88rem; color: var(--hoescape-primary, #1e3c72); list-style: none;
}
html[data-skin="hoe"] .vd-insurance-all > summary::-webkit-details-marker { display: none; }
html[data-skin="hoe"] .vd-insurance-all > summary::after { content: ' \25BE'; }
html[data-skin="hoe"] .vd-insurance-all[open] > summary::after { content: ' \25B4'; }

/* ── contatti e «Ti potrebbe interessare» ──────────────────────────── */
html[data-skin="hoe"] .vd-interest { background: var(--hoescape-primary, #1e3c72); color: #fff; border-radius: 0; border: 0; }
html[data-skin="hoe"] .vd-interest-title { color: #fff; font-weight: 800; }
html[data-skin="hoe"] .vd-interest-sub { color: rgba(255, 255, 255, .85); }
html[data-skin="hoe"] .vd-relwrap .vd-h2 .bi { display: none; }
html[data-skin="hoe"] .vd-rel-grid { display: grid; grid-template-columns: 1fr; gap: 0; }
@media (min-width: 768px) { html[data-skin="hoe"] .vd-rel-grid { grid-template-columns: 1fr 1fr; gap: 0 24px; } }
html[data-skin="hoe"] .vd-rel-card {
    display: grid; grid-template-columns: 38% 1fr; gap: 12px; padding: 12px 0; border: 0;
    border-bottom: 1px solid #e6eaf1; border-radius: 0; box-shadow: none; background: none;
}
html[data-skin="hoe"] .vd-rel-card img { width: 100%; height: 100%; min-height: 110px; max-height: 140px; object-fit: cover; border-radius: 12px; }
html[data-skin="hoe"] .vd-rel-name { color: var(--hoescape-primary, #1e3c72); font-weight: 800; }
html[data-skin="hoe"] .vd-rel-meta { color: var(--hoescape-accent-hover, #7fa31f); font-size: .72rem; font-weight: 800;
    letter-spacing: .05em; text-transform: uppercase; }
html[data-skin="hoe"] .vd-rel-price { display: inline-block; align-self: flex-start; margin-top: auto; background: var(--hoescape-primary, #1e3c72);
    color: #fff; border-radius: 8px; padding: 3px 9px; font-weight: 800; font-size: .85rem; }

/* ── riepilogo: fascia blu, località in piccolo, tabellina ─────────── */
html[data-skin="hoe"] .v2-riep-titolo { font-size: 1rem; font-weight: 800; }

html[data-skin="hoe"] .v2-riep-occhiello { color: #cfe39a; }
html[data-skin="hoe"] .v2-riep-head .vd-total-val { color: #fff; font-weight: 900; }

/* telefono: niente «oggi» sotto il totale, barretta per chiudere al
   posto della ✕ (la riga «Per bloccarlo versi» dice già l'acconto) */
html[data-skin="hoe"] .vd-dock .v2-riep-oggi { display: none; }
html[data-skin="hoe"] .vd-dock .v2-riep-head .vd-ms-close {
    top: 8px; right: auto; left: 50%; transform: translateX(-50%);
    width: 44px; height: 5px; padding: 0; border-radius: 5px; background: rgba(255, 255, 255, .55);
}
html[data-skin="hoe"] .vd-dock .v2-riep-head .vd-ms-close::before { content: none; }
html[data-skin="hoe"] .vd-dock-body .v2-riep .v2-riep-head { padding-top: 1.5rem; }
/* «Cosa comprende la quota»: fumetto chiaro sopra il pulsante */
html[data-skin="hoe"] .v2-incl { background: #fff; color: #14213d; border: 1px solid #d9dfeb;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .14); }
html[data-skin="hoe"] .v2-incl::after { background: #fff; border-right: 1px solid #d9dfeb; border-bottom: 1px solid #d9dfeb; }
html[data-skin="hoe"] .v2-incl-occhiello { color: #1f7a4d; }
html[data-skin="hoe"] .v2-incl .vd-quota-list li { color: #14213d; }
html[data-skin="hoe"] .v2-incl-x { color: #5b6785; }