/* Scheda hotel di hoescape.com nello stile della home (owner 17/10/2026).
 * Spec agent-os/specs/2026-10-17-1650-scheda-hotel-stile-home.
 *
 * Solo body.hdx: la classe la mettono hotel_detail.html, ota_hotel_detail.html
 * e aves_hotel_detail_base.html quando il portale è la radice di HoEscape
 * (portal_is_hoe_root). InfoIschia e i portali con la veste HoEscape non la
 * ricevono e restano col disegno di hotel-detail.css e hoescape.css.
 *
 * Proposta B «Compatta» scelta dall'owner sull'anteprima: carattere Figtree,
 * prezzi e scelta in blu come la scheda pacchetto, riepilogo con testata blu,
 * al telefono il nome sotto la foto, «Aggiungi il viaggio» a righe, servizi
 * a etichette, camere di Diretto e fornitore OTA basse come quelle di Ignas.
 * Solo aspetto: id e classi usati dal JavaScript della scheda restano gli
 * stessi. I !important battono le regole di hotel-detail.css, che ne usa. */

html[data-skin="hoe"] body.hdx,
html[data-skin="hoe"] body.hdx :where(h1,h2,h3,h4,h5,h6,p,span,a,button,input,select,label,div,strong,small,li,dt,dd,b,em) {
    font-family: 'Figtree', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}
html[data-skin="hoe"] body.hdx { color: #14213d; }

/* titolo */
html[data-skin="hoe"] body.hdx .hd-hero-mosaic__name { color: #1e3c72; font-weight: 800; letter-spacing: -0.015em; }
html[data-skin="hoe"] body.hdx .hd-hero-mosaic__address { color: #5b6785; }
html[data-skin="hoe"] body.hdx .hd-hero-mosaic__rating-score { background: #1e3c72; border-radius: 8px 8px 8px 2px; }

/* barra date */
html[data-skin="hoe"] body.hdx .hd-modify-bar { border: 1.5px solid #e6eaf1; box-shadow: none; border-radius: 14px; }
html[data-skin="hoe"] body.hdx .hd-modify-bar__dates,
html[data-skin="hoe"] body.hdx .hd-modify-bar__guests-primary { color: #14213d; font-weight: 800; }
html[data-skin="hoe"] body.hdx .hd-modify-bar__nights-pill { background: #eef2f8; color: #1e3c72; font-weight: 700; }
html[data-skin="hoe"] body.hdx .hd-modify-bar__edit-btn { border: 1.5px solid #1e3c72; color: #1e3c72; font-weight: 800; border-radius: 999px; }

/* riquadri delle sezioni */
html[data-skin="hoe"] body.hdx .booking-main,
html[data-skin="hoe"] body.hdx .info-card,
html[data-skin="hoe"] body.hdx .description-section,
html[data-skin="hoe"] body.hdx .hd-trip-card,
html[data-skin="hoe"] body.hdx .hd-price-summary-card {
    border: 1.5px solid #e6eaf1;
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .03);
}
html[data-skin="hoe"] body.hdx .info-card h5,
html[data-skin="hoe"] body.hdx .hd-step-header__title,
html[data-skin="hoe"] body.hdx .hd-trip-card__title,
html[data-skin="hoe"] body.hdx .hd-reviews__title,
html[data-skin="hoe"] body.hdx .hd-similar-card__title {
    color: #1e3c72;
    font-weight: 800;
    letter-spacing: -0.01em;
}
html[data-skin="hoe"] body.hdx .info-card h5 .bi,
html[data-skin="hoe"] body.hdx .info-card h5 i { color: #1e3c72 !important; }

/* prezzi blu, non arancioni */
html[data-skin="hoe"] body.hdx .room-card-price-big,
html[data-skin="hoe"] body.hdx .treatment-price-big,
html[data-skin="hoe"] body.hdx .hd-price-summary-card__price,
html[data-skin="hoe"] body.hdx .price-big {
    color: #1e3c72 !important;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

/* camere e trattamenti: bordo sottile, la scelta in blu come la scheda pacchetto */
html[data-skin="hoe"] body.hdx .option-card {
    border: 1.5px solid #dfe4ee !important;
    border-radius: 12px !important;
    background: #fff !important;
    box-shadow: none !important;
}
html[data-skin="hoe"] body.hdx .option-card:hover { border-color: #b9c4d8 !important; }
html[data-skin="hoe"] body.hdx .option-card.selected,
html[data-skin="hoe"] body.hdx .option-card.active,
html[data-skin="hoe"] body.hdx .option-card.is-selected {
    border: 2px solid #1e3c72 !important;
    background: #f5f8fd !important;
    box-shadow: 0 0 0 3px rgba(30, 60, 114, .08) !important;
}
html[data-skin="hoe"] body.hdx .room-card-name { color: #14213d; font-weight: 700; }

/* riepilogo: testata blu come «Il tuo viaggio» */
html[data-skin="hoe"] body.hdx .hd-bestprice-box {
    background: #1e3c72 !important;
    background-image: none !important;
    border-radius: 14px 14px 0 0;
}
html[data-skin="hoe"] body.hdx .hd-bestprice-box__title { color: #fff; font-weight: 800; letter-spacing: .06em; }
html[data-skin="hoe"] body.hdx .hd-bestprice-box__icon { background: rgba(255, 255, 255, .14); color: #a4c639; }
html[data-skin="hoe"] body.hdx .hd-pay-mini__total-amount { color: #1e3c72; }

/* «Gli ospiti adorano»: niente arancione */
html[data-skin="hoe"] body.hdx .hd-guests-love {
    background: #f3f7e9;
    border: 1.5px solid #e2ecc9;
    border-radius: 16px;
}
html[data-skin="hoe"] body.hdx .hd-guests-love__title,
html[data-skin="hoe"] body.hdx .hd-guests-love__heart { color: #4f6f12 !important; }
html[data-skin="hoe"] body.hdx .hd-guests-love__icon { color: #1f7a4d; }
html[data-skin="hoe"] body.hdx .hd-guests-love__text { color: #14213d; font-weight: 700; }

/* «Aggiungi il viaggio»: etichetta del prezzo verde */
html[data-skin="hoe"] body.hdx .hd-trip-card__from-pill { background: #eaf3d2; color: #3d5a0a !important; font-weight: 800; }

/* fondo pagina */
html[data-skin="hoe"] body.hdx .cta-bottom-section h4 { color: #1e3c72; font-weight: 800; }

/* gruppo di tariffe RateHawk: bordo neutro, la scelta la dice la riga blu */
html[data-skin="hoe"] body.hdx .room-type-group {
    border: 1.5px solid #e6eaf1 !important;
    border-radius: 14px !important;
    box-shadow: none !important;
}
/* pulsante del telefono in fondo pagina: blu, non arancione */
html[data-skin="hoe"] body.hdx .cta-bottom-section .btn-outline-primary {
    border-color: #1e3c72 !important;
    color: #1e3c72 !important;
}

/* ── Compatta ──────────────────────────────────────────────────────────── */

/* telefono: il nome sotto la foto, su bianco */
@media (max-width: 767.98px) {
    /* la foto torna nel flusso: sotto di lei il nome, non sopra */
    html[data-skin="hoe"] body.hdx .hd-hero-mosaic__grid {
        height: auto !important;
        overflow: visible !important;
    }
    html[data-skin="hoe"] body.hdx .hd-hero-mosaic__cell--1 {
        position: relative !important;
        display: block !important;
        height: 300px !important;
        overflow: hidden;
    }
    html[data-skin="hoe"] body.hdx .hd-hero-mosaic__mobile-overlay {
        position: static !important;
        background: #fff !important;
        background-image: none !important;
        padding: 12px 14px 4px !important;
        color: #14213d !important;
    }
    /* la sfumatura scura serviva a leggere il bianco sulla foto: qui il fondo è bianco */
    html[data-skin="hoe"] body.hdx .hd-hero-mosaic__mobile-overlay::before,
    html[data-skin="hoe"] body.hdx .hd-hero-mosaic__mobile-overlay::after,
    html[data-skin="hoe"] body.hdx .hd-hero-mosaic__grid::before,
    html[data-skin="hoe"] body.hdx .hd-hero-mosaic__grid::after {
        display: none !important;
    }
    html[data-skin="hoe"] body.hdx .hd-hero-mosaic__mobile-overlay__stars,
    html[data-skin="hoe"] body.hdx .hd-hero-mosaic__mobile-overlay__stars .bi {
        color: #f5a623 !important;
        opacity: 1 !important;
        filter: none !important;
        text-shadow: none !important;
    }
    /* schede dei fornitori: località e riga sotto il nome, scritte in bianco sulla foto */
    html[data-skin="hoe"] body.hdx .hd-hero-mosaic__mobile-overlay__topline,
    html[data-skin="hoe"] body.hdx .hd-hero-mosaic__mobile-overlay__meta,
    html[data-skin="hoe"] body.hdx .hd-hero-mosaic__mobile-overlay__address {
        color: #5b6785 !important;
        text-shadow: none !important;
    }
    html[data-skin="hoe"] body.hdx .hd-hero-mosaic__mobile-overlay__name {
        color: #1e3c72 !important;
        font-size: 24px !important;
        font-weight: 800 !important;
        line-height: 1.15 !important;
        text-shadow: none !important;
        margin: 2px 0 0 !important;
    }
    html[data-skin="hoe"] body.hdx .hd-hero-mosaic__mobile-overlay__comune {
        color: #7fa31f !important;
        font-weight: 800 !important;
        text-transform: uppercase;
        letter-spacing: .05em;
        font-size: 12px !important;
        text-shadow: none !important;
    }
}

/* «Aggiungi il viaggio»: elenco a righe invece dei riquadri */
html[data-skin="hoe"] body.hdx .hd-trip-choices {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 0 !important;
}
@media (min-width: 992px) {
    html[data-skin="hoe"] body.hdx .hd-trip-choices { grid-template-columns: 1fr 1fr; column-gap: 24px !important; }
}
html[data-skin="hoe"] body.hdx .hd-trip-choice {
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    grid-template-areas: "i t a" "i d a";
    align-items: center;
    gap: 0 10px;
    min-height: 0 !important;
    padding: 10px 2px !important;
    border: 0 !important;
    border-bottom: 1px solid #eef1f6 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    text-align: left;
}
html[data-skin="hoe"] body.hdx .hd-trip-choice__icon { grid-area: i; margin: 0 !important; width: 34px; height: 34px; display: grid !important; place-items: center; border-radius: 10px; background: #eef2f8; color: #1e3c72; }
html[data-skin="hoe"] body.hdx .hd-trip-choice__title { grid-area: t; margin: 0 !important; color: #14213d; font-weight: 800; font-size: 15px; }
html[data-skin="hoe"] body.hdx .hd-trip-choice__description { grid-area: d; margin: 0 !important; color: #5b6785; font-size: 13px; }
html[data-skin="hoe"] body.hdx .hd-trip-choice__action { grid-area: a; margin: 0 !important; color: #1e3c72; font-weight: 800; white-space: nowrap; }

/* «Servizi e strutture»: etichette in fila invece della griglia di icone */
html[data-skin="hoe"] body.hdx .amenities-grid {
    display: flex !important;
    flex-wrap: wrap;
    gap: 8px !important;
    grid-template-columns: none !important;
}
html[data-skin="hoe"] body.hdx .amenity-item {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 6px;
    width: auto !important;
    min-height: 0 !important;
    padding: 6px 12px 6px 8px !important;
    border: 1.5px solid #e6eaf1 !important;
    border-radius: 999px !important;
    background: #fff !important;
    box-shadow: none !important;
}
html[data-skin="hoe"] body.hdx .amenity-icon {
    width: 26px !important;
    height: 26px !important;
    margin: 0 !important;
    border-radius: 50% !important;
    background: #eef2f8 !important;
    color: #1e3c72;
    font-size: 13px;
}
html[data-skin="hoe"] body.hdx .amenity-label { color: #14213d; font-size: 13.5px !important; font-weight: 600; text-align: left !important; }
/* chiuse: le prime 12 etichette, poi «Mostra tutti» */
html[data-skin="hoe"] body.hdx .amenities-grid.collapsed .amenity-item:nth-child(n+13) { display: none !important; }

/* sezioni con meno aria */
html[data-skin="hoe"] body.hdx .info-card,
html[data-skin="hoe"] body.hdx .description-section { padding: 18px 20px !important; }
html[data-skin="hoe"] body.hdx .hd-trip-card { padding: 16px 18px !important; }

/* fondo pagina: un riquadro bianco compatto */
html[data-skin="hoe"] body.hdx .cta-bottom-section {
    padding: 22px 0 !important;
    background: #f3f6fb !important;
}

/* camere di Diretto e fornitore OTA come quelle di Ignas (owner 17/10/2026):
   al telefono prezzo a destra sulla riga del nome, nome a 14px, margini più stretti */
@media (max-width: 767.98px) {
    html[data-skin="hoe"] body.hdx .option-card:has(> .hd-mr-room) {
        padding: 14px 16px !important;
    }
    html[data-skin="hoe"] body.hdx .hd-mr-room {
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-areas: none !important;
        align-items: center;
        column-gap: 10px !important;
    }
    html[data-skin="hoe"] body.hdx .hd-mr-room__head {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }
    html[data-skin="hoe"] body.hdx .hd-mr-room__price {
        grid-column: 2 !important;
        grid-row: 1 !important;
        align-self: center;
    }
    html[data-skin="hoe"] body.hdx .hd-mr-room .room-card-name {
        display: block;
        font-size: 14px !important;
        margin-bottom: 2px;
    }
}

/* computer: le stelle accanto a indirizzo o località, sotto il nome (owner 17/10/2026) */
@media (min-width: 768px) {
    html[data-skin="hoe"] body.hdx .hd-hero-mosaic__title-block {
        display: flex !important;
        flex-wrap: wrap;
        align-items: center;
        column-gap: 12px;
        row-gap: 4px;
    }
    html[data-skin="hoe"] body.hdx .hd-hero-mosaic__title-block > .hd-hero-mosaic__name {
        order: 0;
        flex-basis: 100%;
        margin: 0 !important;
    }
    html[data-skin="hoe"] body.hdx .hd-hero-mosaic__title-block > .hd-hero-mosaic__stars {
        order: 1;
        margin: 0 !important;
        font-size: 15px;
    }
    html[data-skin="hoe"] body.hdx .hd-hero-mosaic__title-block > .hd-hero-mosaic__meta {
        order: 2;
        margin: 0 !important;
    }
}

/* Tariffe RateHawk al telefono (owner 17/10/2026, proposta B): prezzo accanto al
   trattamento e, sotto, una riga di testo con la cancellazione al posto
   dell'etichetta. La riga è nel markup nascosta (d-none): la mostra solo questa regola. */
@media (max-width: 767.98px) {
    html[data-skin="hoe"] body.hdx .etg-rate-row__layout {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "summary price" "canc canc" "details details";
    }
    html[data-skin="hoe"] body.hdx .hd-room-cards-grid .etg-rate-row.option-card .badge.etg-cancel-badge {
        display: none !important;
    }
    html[data-skin="hoe"] body.hdx .etg-rate-row__cancel {
        grid-area: canc;
        justify-self: start;
        display: inline-flex !important;
        align-items: center;
        gap: 5px;
        font-size: 13px;
        font-weight: 600;
        line-height: 1.3;
    }
    html[data-skin="hoe"] body.hdx .etg-rate-row__cancel--free { color: #2e7d32; }
    html[data-skin="hoe"] body.hdx .etg-rate-row__cancel--nr { color: #6b7280; }
}