/* ==========================================================================
   HOTEL PAGE (C1-C28), 2026-10-30. Prefix .hp-. Loads after hotel-flow.css
   and only adds what the kit does not have: the hero overlays, the title
   block, the desk card, the dates bar, room captions, the rate sheet, the
   amenity chips, the surroundings list, the weather card, the question
   form, the nearby cards and the desktop side column. Template:
   templates/travel/hotel_live.html. JS: static/js/hotel_page.js.
   ========================================================================== */

/* --- Hero (C1) --- */
.hp-hero__back, .hp-hero__acts { position: absolute; top: 10px; z-index: 2; }
.hp-hero__back { left: 10px; width: 36px; height: 36px; border-radius: 50%; background: #fff; display: inline-flex; align-items: center; justify-content: center; color: var(--fx-ink); box-shadow: 0 2px 8px rgba(15, 26, 44, .15); }
.hp-hero__acts { right: 10px; display: flex; gap: 6px; }
.hp-hero .hx-icon-btn { border: 0; box-shadow: 0 2px 8px rgba(15, 26, 44, .15); }
.hp-hero .hx-icon-btn[aria-pressed="true"] .hx-i { fill: var(--fx-blue); stroke: var(--fx-blue); }
.hp-hero .hx-photos__strip img { cursor: zoom-in; }

/* --- Title block (C2-C6, C26, C27) --- */
.hp-title { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.hp-title__row { align-items: flex-start; }
.hp-title__name { flex: 1; min-width: 0; }
.hp-title h1 { margin: 0 0 2px; font-weight: 800; line-height: 1.2; }
.hp-stars { letter-spacing: 1px; color: var(--fx-ink); }
.hp-title__score { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; color: var(--fx-ink); text-decoration: none; }
.hp-addr { margin: 0; }
.hp-link { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; color: var(--fx-blue); cursor: pointer; min-height: 24px; }
.hp-quote { margin: 0; padding: 8px 10px; font-style: italic; }
.hp-hl .hx-card { display: flex; flex-direction: column; gap: 4px; }
.hp-hl .hx-i { color: var(--fx-blue); }
.hp-hl small { font-weight: 500; }
.hp-line { margin: 0; display: flex; gap: 6px; align-items: center; }
.hp-video { align-self: flex-start; }
.hp-desk { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.hp-desk__i { width: 34px; height: 34px; border-radius: 50%; background: var(--fx-blue-soft); color: var(--fx-blue); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.hp-desk__t { flex: 1; min-width: 0; }
.hp-note { margin-top: 12px; }

/* --- Tabs (C7) sit at the very top: this page has no sticky header. --- */
.hp .hx-tabs { top: 0; }
.hp .hx-tabs a { min-height: 44px; display: inline-flex; align-items: center; }
.hp section { scroll-margin-top: 52px; }

/* --- Dates bar (C8) and its sheet --- */
.hp-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; width: 100%; min-height: 44px; padding: 10px 12px; font: inherit; color: var(--fx-ink); text-align: left; cursor: pointer; }
.hp-bar b { font-weight: 700; }
.hp-bar__g { margin-left: auto; }
.hp-stay { display: grid; gap: 8px; padding: 12px 0 16px; }
.hp-cap { margin: 6px 0 0; }
.hx-strip a.is-full b { color: var(--fx-muted); font-weight: 400; }

/* --- Rooms (C9-C14, G3) --- */
.hx-room__shots button { position: relative; }
.hx-room__shots b { position: absolute; left: 6px; bottom: 6px; background: rgba(15, 26, 44, .7); color: #fff; border-radius: 6px; padding: 2px 6px; font-weight: 600; }
.hp-fold summary { cursor: pointer; list-style: none; }
.hp-fold summary::-webkit-details-marker { display: none; }
.hp-fold p { margin: 8px 0 0; line-height: 1.55; }
.hp-amen { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.hp-amen li { background: var(--fx-soft); border-radius: 999px; padding: 3px 10px; }
.hx-rate .hx-btn { width: 100%; min-height: 44px; }
.hx-qty select { min-height: 44px; }
.hp-soldout { opacity: .65; }
.hp-soldout .hx-room__body { padding: 12px; }
.hp-soldout p { margin: 0; }
.hp-sheet { display: grid; gap: 6px; padding: 12px 0 16px; }
.hp-sheet h3 { margin: 8px 0 0; font-weight: 800; }
.hp-sheet p { margin: 0; }
.hp-list { margin: 0; padding-left: 18px; }

/* --- Amenities (C15) --- */
.hp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.hp-chip { cursor: default; }
.hp-chip[hidden] { display: none; }

/* --- Location (C16, C25) --- */
.hp .hx-map { margin-top: 8px; }
.hp-poi { margin-top: 8px; }
.hp-poi .hx-pol[hidden] { display: none; }
.hp-poi a { font-weight: 700; white-space: nowrap; }
.hp-weather { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.hp-weather__days { width: 100%; display: flex; gap: 12px; overflow-x: auto; scrollbar-width: none; }
.hp-weather__days span { display: inline-flex; flex-direction: column; flex: none; }

/* --- Reviews (C17) --- */
.hp-rev-head { align-items: flex-start; margin-bottom: 8px; }
.hp-sum { margin: 8px 0; }
.hx-rev[hidden] { display: none; }
.hp-empty { padding: 10px 12px; margin: 0; }

/* --- Questions (C18) --- */
.hp-ask { flex-direction: column; align-items: stretch; gap: 8px; }
.hp-ask__row { display: flex; gap: 6px; }
.hp-ask__row input[type=text] { flex: 1; min-width: 0; min-height: 44px; border: 1px solid var(--fx-line); border-radius: 10px; padding: 0 10px; font: inherit; background: #fff; color: var(--fx-ink); }
.hp-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* --- Host, about, policies, notices (C19, C20) --- */
.hp-about p { margin: 0 0 10px; line-height: 1.6; }
.hp-pol-more { margin-top: 8px; }
.hp-pol-more h3 { margin: 10px 0 2px; font-weight: 800; }
.hp-notice p { margin: 4px 0 0; line-height: 1.55; }
.hp-notice b { display: block; margin-top: 6px; }
.hp-notice b:first-child { margin-top: 0; }

/* --- Nearby (C21) --- */
.hp-near-skel { width: 160px; }
.hp-near-skel__img { height: 80px; border-radius: 0; }
.hx-near img { width: 100%; height: 80px; object-fit: cover; display: block; background: var(--fx-soft); }
.hx-near a > div { padding: 8px; }
.hx-near b { display: block; }
.hp-fine { margin: 18px 0 0; }

/* --- Photo viewer (kept from the first page) --- */
.hp-viewer { position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0; background: #0b1220; color: #fff; overflow-y: auto; overscroll-behavior: contain; }
.hp-viewer::backdrop { background: #0b1220; }
.hp-viewer header { position: sticky; top: 0; display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; background: #0b1220; z-index: 1; }
.hp-viewer header button { background: none; border: 0; color: #fff; font: inherit; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; min-height: 44px; }
.hp-viewer__list { display: grid; gap: 8px; max-width: 1000px; margin: 0 auto; padding: 0 0 40px; }
.hp-viewer__list img { width: 100%; height: auto; display: block; background: #1a2333; min-height: 200px; }

/* --- Desktop: the rates on the left, the stay card sticky on the right. --- */
.hp-side { display: none; }
@media (min-width: 900px) {
    .hp-side { display: block; }
    .hp-side .hx-card { padding: 14px; display: grid; gap: 8px; }
    .hp-side .hx-total { font-weight: 800; color: var(--fx-blue); }
    .hx-bar { display: none; }   /* this sheet loads on the hotel page only: the side card replaces the bottom bar */
    .hx-room__shots { height: 220px; }
    .hp-hero__back { display: none; }
}

/* --- Dark --- */