/* ==========================================================================
   LOCAL HOST FLOW (2026-10-29). Prefix .lh-. Loads after flight-flow.css
   (--fx-* tokens, .fx-chip, .fx-steps, .fx-sheet) and hotel-flow.css (.hx-*
   cards, buttons, head, bar), and reuses their pieces. Three pages:
   /local-hosts (buddies.html), the profile (buddy_profile.html) and the
   review step (review_booking.html). Choose host · Your day · Confirm.
   Rules: two colours (blue action, navy ink), green only for "free" and
   "included", no red, no strikethrough, nothing pre-ticked, light only.
   Phone first (390), fits 320 to 1440 with nothing wider than the screen.
   ========================================================================== */

/* --- Page frame ----------------------------------------------------------- */
body.lh-body { background: var(--fx-soft); }
.lh { --pad: 16px; --hx-pad: 16px; max-width: 1180px; padding-top: 0; overflow-wrap: anywhere; }
.lh img { max-width: 100%; }
.lh .hx-head { top: var(--nav-h, 0px); z-index: 25; }
.lh-sec { margin: 20px 0 0; }
.lh-sec > h2, .lh-h2 { margin: 0 0 8px; font-weight: 800; color: var(--fx-ink); }
.lh-muted { color: var(--fx-muted); }
.lh-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.lh-row--between { justify-content: space-between; }
.lh-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* The compact header: the search in words, a Filters chip with its count. */
.lh-head .hx-head__open { background: none; border: 0; padding: 4px 6px; margin: 0; font: inherit; text-align: left; cursor: pointer; align-items: flex-start; min-height: 44px; border-radius: 10px; }
.lh-head .hx-head__open:hover { background: var(--fx-soft); }
.lh-head .hx-head__open b { max-width: 100%; display: block; }
.lh-head .hx-head__open small { display: block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lh-head .fx-chip { flex: none; }

/* --- The search and filter sheet ------------------------------------------ */
.lh-sheet .hx-sheet__body { padding-top: 12px; padding-bottom: 12px; }
.lh .lh-filters.bd-filters, .lh-sheet .lh-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; border-radius: 0; background: none; box-shadow: none; }
.lh-sheet .lh-filters .bd-filter { min-height: 0; padding: 8px 10px; border-radius: 10px; background: #fff; }
.lh-sheet .lh-filters .bd-filter::before { display: none; }
.lh-filters .hx-field { cursor: default; }
.lh-filters .hx-field--wide { grid-column: 1 / -1; }
.lh-filters select, .lh-filters input {
    width: 100%; min-width: 0; min-height: 28px; border: 0; padding: 0; margin: 0; background: transparent;
    font: inherit; font-weight: 700; color: var(--fx-ink); appearance: auto; }
.lh-filters select:focus, .lh-filters input:focus { outline: none; box-shadow: none; }
.lh-filters .hx-field:focus-within { border-color: var(--fx-blue); box-shadow: 0 0 0 1px var(--fx-blue) inset; }
.lh-filters .is-set { color: var(--fx-blue-deep); }
.lh-sheet__level { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px 0 0; margin-top: 12px; border-top: 1px solid var(--fx-line); }
.lh-sheet__level > b { order: 1; }
.lh-sheet__level > .lvl-filter { order: 2; padding: 0; background: none; }
.lh-sheet__level > #lvlWhat { order: 3; min-height: 32px; }
.lh-sheet__level > .lvl-explain { order: 4; align-self: stretch; }
.lh-sheet__level .lvl-filter { display: flex; flex-wrap: wrap; gap: 6px; }
.lh-sheet__level .lvl-filter button { display: inline-flex; align-items: center; gap: 5px; min-height: 38px; padding: 0 12px; border: 1px solid var(--fx-line); border-radius: 999px; background: #fff; font: inherit; font-weight: 600; color: var(--fx-ink); cursor: pointer; }
.lh-sheet__level .lvl-filter button[aria-pressed="true"] { background: var(--fx-blue); border-color: var(--fx-blue); color: #fff; }
.lh-sheet__level .lvl-explain { display: grid; gap: 8px; }
.lh-sheet__level .lvl-explain[hidden] { display: none; }
.lh-sheet__level .lvl-explain > div { background: #fff; border: 1px solid var(--fx-line); border-radius: 12px; padding: 10px 12px; }
.lh-sheet__level .lvl-explain-title { margin: 6px 0 2px; font-weight: 800; }
.lh-sheet__level .lvl-explain p { margin: 0; color: var(--fx-muted); }
.lh-sheet .hx-sheet__foot .hx-btn { flex: 1; }
.lh-reset { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border: 0; background: none; font: inherit; font-weight: 700; color: var(--fx-blue); cursor: pointer; }
.lh-reset[hidden] { display: none; }

/* --- Chips, count line, the experience note ------------------------------- */
.lh-chips { margin-top: 10px; }
.lh-chips .fx-chip .et-i, .lh-chips .fx-chip .hx-i { width: 15px; height: 15px; }
.lh-chips__sep { width: 1px; height: 22px; background: var(--fx-line); flex: none; }
.lh-count { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 12px 0 0; color: var(--fx-muted); }
.lh-count b { color: var(--fx-ink); }
.lh-note { display: flex; gap: 10px; align-items: flex-start; margin: 12px 0 0; padding: 10px 12px; }
.lh-note .et-i { color: var(--fx-blue); flex: none; margin-top: 2px; }
.lh-note a { font-weight: 700; color: var(--fx-blue); }
.lh-note--warn { background: var(--fx-warn-soft); border-color: transparent; color: var(--fx-warn); }
.lh-note--warn .et-i { color: var(--fx-warn); }

/* --- Host cards: photo first, then name, checks, languages, price --------- */
html:not(#et):not(#et) body .lh-price .fx-price { font-size: 18px !important; }
.lh-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 10px 0 0; padding: 0; list-style: none; }
.lh-card { position: relative; display: flex; flex-direction: column; overflow: hidden; background: #fff; border: 1px solid var(--fx-line); border-radius: var(--fx-r); color: var(--fx-ink); min-width: 0; }
.lh-card:hover { border-color: #cfd6e2; box-shadow: 0 6px 18px rgba(15, 26, 44, .08); }
.lh-card__photo { position: relative; display: block; aspect-ratio: 4 / 3; background: var(--fx-blue-soft); overflow: hidden; }
.lh-card__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; display: block; }
.lh-card__photo .no-photo, .lh-noimg { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--fx-blue); background: var(--fx-blue-soft); }
.lh-noimg b { width: 72px; height: 72px; border-radius: 50%; background: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; color: var(--fx-blue); }
.lh-card__checked { position: absolute; left: 10px; top: 10px; display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; background: rgba(255, 255, 255, .94); color: var(--fx-ink); font-weight: 700; box-shadow: 0 1px 4px rgba(15, 26, 44, .12); }
.lh-card__checked .et-i, .lh-card__checked .hx-i { color: var(--fx-blue); width: 14px; height: 14px; }
.lh-card .hx-heart { top: 10px; right: 10px; z-index: 2; }
.lh-card .iv-play { position: absolute; left: 10px; bottom: 10px; right: auto; top: auto; z-index: 2; }
.lh-card .iv-play-label { left: 58px; bottom: 18px; right: auto; top: auto; }
.lh-card__body { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px 12px; color: var(--fx-ink); text-decoration: none; flex: 1; min-width: 0; }
.lh-card__body:hover { color: var(--fx-ink); }
.lh-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; min-width: 0; }
.lh-card__name { font-weight: 800; line-height: 1.25; min-width: 0; }
.lh-card .lvl-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.lh-card__meta { display: flex; align-items: flex-start; gap: 6px; color: var(--fx-muted); min-width: 0; }
.lh-card__meta .et-i, .lh-card__meta .hx-i { flex: none; margin-top: 1px; width: 15px; height: 15px; color: var(--fx-blue); }
.lh-card__meta span { min-width: 0; }
.lh-card .hx-tags { gap: 5px; }
.lh-card__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 8px; border-top: 1px solid var(--fx-line); }
.lh-price { display: flex; flex-direction: column; min-width: 0; }
.lh-price small { color: var(--fx-muted); }
.lh-price .fx-price { white-space: nowrap; }
.lh-card__go { flex: none; display: inline-flex; align-items: center; min-height: 38px; padding: 0 14px; border-radius: 12px; background: var(--fx-blue); color: #fff; font-weight: 800; white-space: nowrap; }
.lh-card:hover .lh-card__go { background: var(--fx-blue-deep); }
.lh-new { background: var(--fx-blue-soft); color: var(--fx-blue-deep); }

/* Rating badge: the hotel score style, out of 5. */
.lh-rate { display: inline-flex; align-items: center; gap: 6px; flex: none; color: var(--fx-muted); white-space: nowrap; }
.lh-rate .hx-score { min-width: 0; }

/* Skeletons while the first list loads (database slow or down). */
.lh-skel { min-height: 320px; }
.lh-skel .lh-card__photo { background: #eceff3; }
.lh-skel__lines { display: grid; gap: 8px; padding: 12px; }

/* Empty and failed states: calm, one reason, one door. */
.lh-empty { grid-column: 1 / -1; display: grid; gap: 6px; justify-items: start; padding: 16px; background: #fff; border: 1px solid var(--fx-line); border-radius: var(--fx-r); }
.lh-empty b, .lh-empty strong { font-weight: 800; color: var(--fx-ink); }
.lh-empty p { margin: 0; color: var(--fx-muted); }
.lh-empty .hx-btn, .lh-empty .pg-btn { margin-top: 4px; }

/* Host Match and "still deciding". */
.lh-match { display: flex; align-items: center; gap: 10px; margin: 12px 0 0; padding: 10px 12px; color: var(--fx-ink); text-decoration: none; }
.lh-match:hover { border-color: var(--fx-blue); color: var(--fx-ink); }
.lh-match__ico { width: 36px; height: 36px; border-radius: 50%; background: var(--fx-blue-soft); color: var(--fx-blue); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.lh-match small { display: block; color: var(--fx-muted); }
.lh-match .hx-i { margin-left: auto; color: var(--fx-muted); }
.lh-help { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.lh-help a { display: flex; align-items: center; gap: 10px; padding: 12px; color: var(--fx-ink); text-decoration: none; }
.lh-help a:hover { border-color: var(--fx-blue); color: var(--fx-ink); }
.lh-help small { display: block; color: var(--fx-muted); }
.lh-help .et-ico { flex: none; }

/* The trust row: four promises true of every Local Host booking. */
.lh-trust { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.lh-trust li { display: flex; gap: 8px; align-items: flex-start; padding: 10px; font-weight: 700; }
.lh-trust li > .et-i, .lh-trust li > .hx-i { flex: none; color: var(--fx-blue); margin-top: 1px; }
.lh-trust li > span { display: flex; flex-direction: column; min-width: 0; }
.lh-trust small { display: block; font-weight: 500; color: var(--fx-muted); }

/* --- The Local Host story, compact under the list ------------------------- */
.lh-story { margin: 24px calc(-1 * var(--pad)) 0; }
.lh-story .host-story .ap-chapter { padding-top: 28px; padding-bottom: 28px; }
.lh-story .host-story .ap-wrap { padding-left: var(--pad); padding-right: var(--pad); }
.lh-story .host-story .hm-row-head { margin-bottom: 10px; }
.lh-story .host-story .hm-day__total { margin-top: 14px; }
.lh-story .host-story .stats-bar { padding-top: 20px; padding-bottom: 20px; }
/* On a phone the two picture rows scroll sideways instead of stacking eight
   tall cards: the story stays, the list stays first. */
@media (max-width: 899px) {
    .lh .lh-story .host-story .hm-do .hm-picks__grid, .lh .lh-story .host-story .svc-track {
        display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
        margin: 0 calc(-1 * var(--pad)); padding: 2px var(--pad) 8px; }
    .lh .lh-story .host-story .hm-do .hm-picks__grid::-webkit-scrollbar, .lh .lh-story .host-story .svc-track::-webkit-scrollbar { display: none; }
    .lh .lh-story .host-story .hm-pick, .lh .lh-story .host-story .svc-slide { flex: 0 0 72%; max-width: 280px; scroll-snap-align: start; }
}
.lh-crumbs { margin: 16px 0 0; }
.lh-title { margin: 16px 0 2px; font-weight: 800; color: var(--fx-ink); }
.lh-lead { margin: 0; line-height: 1.5; }

/* --- Profile ------------------------------------------------------------- */
.lh-profile .pf-loading { padding: 64px 0; }
.lh-profile .profile-grid.pf-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 0; }
.lh-profile .pf-main { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.lh-profile .pf-intro { display: flex; flex-direction: column; gap: 12px; }
.lh-hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin: 0 calc(-1 * var(--pad)); }
.lh-profile .pf-gallery { position: relative; min-width: 0; }
.lh-profile .pf-gallery .pf-photo-main { position: relative; aspect-ratio: 4 / 3; border-radius: 0; box-shadow: none; overflow: hidden; background: var(--fx-blue-soft); }
.lh-profile .pf-gallery .pf-photo-main img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; display: block; }
.lh-profile .pf-photo-main .bcard-verify { position: absolute; top: 12px; left: 12px; display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, .94); color: var(--fx-ink); font-weight: 700; box-shadow: 0 1px 4px rgba(15, 26, 44, .12); }
.lh-profile .pf-photo-main .bcard-verify .et-i { color: var(--fx-blue); }
.lh-profile .pf-premier { top: 12px; right: 12px; }
.lh-profile .pf-thumbs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 8px var(--pad) 0; }
.lh-profile .pf-thumbs:empty { display: none; }
.lh-profile .pf-thumbs::-webkit-scrollbar { display: none; }
.lh-profile .pf-thumbs img { width: 56px; height: 56px; flex: none; object-fit: cover; border-radius: 10px; border: 2px solid transparent; cursor: pointer; }
.lh-profile .pf-thumbs img.on { border-color: var(--fx-blue); }
.lh-profile .pf-who { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px var(--pad) 0; min-width: 0; }
.lh-profile .pf-who > * { max-width: 100%; }
.lh-profile .pf-rating .chip { display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: 6px; background: var(--fx-blue-soft); color: var(--fx-blue-deep); font-weight: 700; }
.lh-profile .pf-thumbs:has(img:only-child) { display: none; }
.lh-profile .lvl-row:empty { display: none; }
.lh-profile .pf-name { margin: 0; font-weight: 800; color: var(--fx-ink); line-height: 1.2; }
.lh-profile .pf-rating { display: inline-flex; align-items: center; gap: 6px; color: var(--fx-muted); }
.lh-profile .pf-langs { display: flex; align-items: flex-start; gap: 6px; color: var(--fx-ink); }
.lh-profile .pf-langs .et-i { color: var(--fx-blue); margin-top: 1px; }
.lh-profile .pf-bio { margin: 0; color: var(--fx-ink); line-height: 1.55; }
.lh-profile .pf-who .stat-pills, .lh-about .stat-pills { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.lh-about .stat-pills:empty { display: none; }
.lh-about .stat-pills .chip { display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px; border-radius: 999px; background: var(--fx-soft); border: 1px solid var(--fx-line); color: var(--fx-ink); font-weight: 600; }
.lh-profile .iv-btn { min-height: 40px; }

/* The three facts under the name. */
.lh-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
.lh-facts li { display: flex; flex-direction: column; gap: 4px; padding: 8px; background: #fff; border: 1px solid var(--fx-line); border-radius: 12px; font-weight: 700; line-height: 1.3; }
.lh-facts .et-i, .lh-facts .hx-i { color: var(--fx-blue); }
.lh-facts li > span { display: flex; flex-direction: column; min-width: 0; }
.lh-facts small { display: block; color: var(--fx-muted); font-weight: 500; }

/* In-page tabs under the header. */
.lh-tabs { position: sticky; top: calc(var(--nav-h, 0px) + 53px); z-index: 20; display: flex; gap: 18px; margin: 0 calc(-1 * var(--pad)); padding: 0 var(--pad); background: #fff; border-bottom: 1px solid var(--fx-line); overflow-x: auto; scrollbar-width: none; }
.lh-tabs::-webkit-scrollbar { display: none; }
.lh-tabs a { flex: none; padding: 10px 0; font-weight: 700; color: var(--fx-muted); border-bottom: 2px solid transparent; text-decoration: none; white-space: nowrap; }
.lh-tabs a.is-on, .lh-tabs a:hover { color: var(--fx-blue); border-color: var(--fx-blue); }

/* Profile sections as white cards. */
.lh-box { background: #fff; border: 1px solid var(--fx-line); border-radius: var(--fx-r); padding: 14px; scroll-margin-top: calc(var(--nav-h, 0px) + 100px); }
.lh-box > h2 { margin: 0 0 10px; font-weight: 800; color: var(--fx-ink); }
.lh-profile .pf-card.pg-card { background: #fff; border: 1px solid var(--fx-line); border-radius: var(--fx-r); padding: 14px; }
.lh-profile .pf-h2 { margin: 0 0 10px; font-weight: 800; }
.lh-profile .pf-cards { gap: 12px; }
.lh-profile .pf-card .trust-list { grid-template-columns: minmax(0, 1fr); gap: 10px; }
.lh-profile .pf-card .trust-list { display: grid; }
.lh-profile .pf-card .trust-item { display: flex; flex-direction: row; gap: 10px; align-items: flex-start; padding: 0; background: none; }
.lh-profile .pf-card .trust-item > div:last-child { min-width: 0; }
.lh-profile .trust-item h3 { margin: 0; font-weight: 800; }
.lh-profile .trust-item p { margin: 0; color: var(--fx-muted); }
.lh-profile .trust-item .t-ico { width: 32px; height: 32px; flex: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--fx-blue-soft); color: var(--fx-blue); }
.lh-profile .trust-item .t-ico.muted { background: var(--fx-soft); color: var(--fx-muted); }
.lh-profile .review-card { padding: 10px 0; border-top: 1px solid var(--fx-line); background: none; border-radius: 0; margin: 0; }
.lh-profile .review-card:first-child { border-top: 0; padding-top: 0; }
.lh-profile .review-card p { margin: 4px 0; }
.lh-do { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.lh-do li { display: flex; align-items: center; gap: 8px; padding: 10px; border: 1px solid var(--fx-line); border-radius: 12px; font-weight: 700; min-width: 0; }
.lh-do li .lh-do__ico { width: 32px; height: 32px; flex: none; border-radius: 50%; background: var(--fx-blue-soft); color: var(--fx-blue); display: inline-flex; align-items: center; justify-content: center; }
.lh-do li small { display: block; color: var(--fx-muted); font-weight: 500; }
.lh-do:empty { display: none; }

/* The booking card. */
.lh-profile .profile-col-book { min-width: 0; }
.lh-profile .book-box { position: static; background: #fff; border: 1px solid var(--fx-line); border-radius: var(--fx-r); padding: 14px; box-shadow: none; scroll-margin-top: calc(var(--nav-h, 0px) + 100px); }
.lh-profile .pf-book-title { margin: 0 0 4px; font-weight: 800; color: var(--fx-ink); }
.lh-profile .pf-rate { margin: 0 0 12px; padding: 0 0 12px; border-bottom: 1px solid var(--fx-line); color: var(--fx-muted); }
.lh-profile .pf-rate b { color: var(--fx-blue); font-weight: 800; }
.lh-profile .book-box .field { margin: 0 0 12px; }
.lh-profile .book-box .field > label, .lh-profile .pf-label { display: block; margin: 0 0 6px; font-weight: 700; color: var(--fx-ink); }
.lh-profile .book-box select, .lh-profile .book-box input[type=date], .lh-profile .book-box input[type=text] {
    width: 100%; min-width: 0; min-height: 44px; padding: 0 10px; border: 1px solid var(--fx-line); border-radius: 10px; background: #fff; font: inherit; font-weight: 600; color: var(--fx-ink); }
.lh-profile .book-box select:focus, .lh-profile .book-box input:focus { outline: none; border-color: var(--fx-blue); box-shadow: 0 0 0 1px var(--fx-blue) inset; }
.lh-profile .pf-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.lh-profile .slot-grid { position: relative; display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; max-height: 196px; overflow-y: auto; padding: 2px; }
.lh-profile .slot { min-height: 40px; border: 1px solid var(--fx-line); border-radius: 10px; background: #fff; font: inherit; font-weight: 700; color: var(--fx-ink); cursor: pointer; }
.lh-profile .slot.usual { border-color: #b9cdf6; background: var(--fx-blue-soft); }
.lh-profile .slot.on, .lh-profile .slot[aria-pressed="true"] { background: var(--fx-blue); border-color: var(--fx-blue); color: #fff; }
.lh-profile .slot-advice { margin-top: 6px; color: var(--fx-muted); }
.lh-profile .pkg-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.lh-profile .pkg-list[hidden] { display: none; }
.lh-profile .pkg { position: relative; }
.lh-profile .pkg { flex-wrap: nowrap; align-items: center; gap: 10px; }
.lh-profile .pkg-main { flex: 1 1 auto; align-items: flex-start; }
.lh-profile .pkg-check { position: static; }
.lh-profile .pkg-badge { position: static; margin-top: 3px; padding: 1px 8px; border-radius: 6px; background: var(--fx-blue-soft); color: var(--fx-blue-deep); font-weight: 700; }
.lh-profile .pkg { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 8px 12px; border: 1px solid var(--fx-line); border-radius: 12px; background: #fff; font: inherit; color: var(--fx-ink); text-align: left; cursor: pointer; }
.lh-profile .pkg[aria-pressed="true"] { border-color: var(--fx-blue); box-shadow: 0 0 0 1px var(--fx-blue) inset; background: var(--fx-blue-soft); }
.lh-profile .pkg-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lh-profile .pkg-hours { font-weight: 800; }
.lh-profile .pkg-name { color: var(--fx-muted); }
.lh-profile .pkg-price { font-weight: 800; color: var(--fx-blue); white-space: nowrap; }
.lh-profile .pkg-check { color: var(--fx-blue); opacity: 0; }
.lh-profile .pkg[aria-pressed="true"] .pkg-check { opacity: 1; }
.lh-profile .avail-line { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 12px; padding: 8px 10px; border-radius: 10px; background: var(--fx-blue-soft); color: var(--fx-blue-deep); font-weight: 600; }
.lh-profile .avail-line[hidden] { display: none; }
.lh-profile .price-row.total { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 12px 0 0; border-top: 1px solid var(--fx-line); font-weight: 800; }
.lh-profile #estTotal { color: var(--fx-blue); text-align: right; }
.lh-profile .pf-go { width: 100%; min-height: 48px; border-radius: 12px; background: var(--fx-blue); border-color: var(--fx-blue); color: #fff; font-weight: 800; }
.lh-profile .pf-go:hover { background: var(--fx-blue-deep); }
.lh-profile .protect-note, .lh-profile .scope-note, .lh-profile .pf-wa { margin: 12px 0 0; color: var(--fx-muted); line-height: 1.5; }
.lh-profile .scope-note { display: flex; gap: 8px; align-items: flex-start; }
.lh-profile .pkg-note { margin: 8px 0 0; }
.lh-profile .pkg-note summary { cursor: pointer; font-weight: 700; color: var(--fx-blue); min-height: 32px; display: flex; align-items: center; }
.lh-profile .pkg-note-body { color: var(--fx-muted); }
.lh-cash { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 12px; padding: 8px 10px; border-radius: 10px; background: var(--fx-ok-soft); color: var(--fx-ok); font-weight: 600; }
.lh-cash .et-i, .lh-cash .hx-i { flex: none; margin-top: 1px; }

/* The bottom bar on a phone: the price and "Book this host". */
.lh-pbar.m-tabbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--fx-line); }
.lh-pbar .pf-bar-price { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; color: var(--fx-muted); }
.lh-pbar .pf-bar-price b { color: var(--fx-blue); font-weight: 800; white-space: nowrap; }
.lh-pbar .hx-btn { flex: none; min-height: 46px; }

/* --- Review step ----------------------------------------------------------- */
.lh-review .fx-steps { margin: 0 calc(-1 * var(--pad)); }
.lh-review .lh-review__intro { margin: 12px 0 0; color: var(--fx-muted); line-height: 1.5; }
.lh-review .lh-h1 { margin: 14px 0 0; font-weight: 800; color: var(--fx-ink); }
.lh-review .bk-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 12px; padding: 0; max-width: none; }
.lh-review .bk-main { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.lh-review .bk-card { background: #fff; border: 1px solid var(--fx-line); border-radius: var(--fx-r); padding: 14px; box-shadow: none; margin: 0; }
.lh-review .bk-card__title { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-weight: 800; color: var(--fx-ink); }
.lh-review .bk-card__title .et-i { color: var(--fx-blue); }
.lh-review .bk-card__sub { margin: 0 0 10px; color: var(--fx-muted); }
.lh-review .bk-who { display: flex; align-items: center; gap: 12px; margin: 0 0 10px; }
.lh-review .bk-who img { width: 64px; height: 64px; border-radius: 14px; object-fit: cover; object-position: 50% 28%; flex: none; }
.lh-review .bk-who__name { margin: 0; font-weight: 800; color: var(--fx-ink); }
.lh-review .bk-verified { display: inline-flex; align-items: center; gap: 4px; color: var(--fx-blue-deep); font-weight: 700; }
.lh-review .bk-body { padding: 0; background: none; }
.lh-review .bk-rows { display: grid; gap: 0; margin-top: 8px; border-top: 1px solid var(--fx-line); }
.lh-review .bk-card > .bk-rows:first-child { border-top: 0; margin-top: 0; }
.lh-review .bk-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 9px 0; border-top: 0; border-bottom: 1px solid var(--fx-line); }
.lh-review .bk-row:last-child { border-bottom: 0; }
.lh-review .bk-row > span:first-child { color: var(--fx-muted); }
.lh-review .bk-row > span:last-child { text-align: right; font-weight: 700; color: var(--fx-ink); min-width: 0; }
.lh-review .bk-row--fine > span:last-child { font-weight: 500; }
.lh-review .bk-total { display: flex; flex-direction: column; gap: 2px; padding: 12px 0; border-top: 1px solid var(--fx-line); }
.lh-review .bk-total__lbl { font-weight: 700; color: var(--fx-ink); }
.lh-review .bk-total__amt { color: var(--fx-blue); font-weight: 800; line-height: 1.1; }
.lh-review .bk-total__sub { color: var(--fx-muted); }
.lh-review .et-note { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--fx-soft); color: var(--fx-ink); border: 0; }
.lh-review .et-note--success { background: var(--fx-ok-soft); color: var(--fx-ok); }
.lh-review .et-note .et-i { flex: none; margin-top: 1px; }
.lh-review .bk-fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.lh-review .et-field { display: flex; flex-direction: column; gap: 4px; margin: 0; }
.lh-review .et-field label { font-weight: 700; color: var(--fx-ink); }
.lh-review .et-input { width: 100%; min-width: 0; min-height: 46px; padding: 0 12px; border: 1px solid var(--fx-line); border-radius: 10px; background: #fff; font: inherit; color: var(--fx-ink); }
.lh-review .et-input:focus { outline: none; border-color: var(--fx-blue); box-shadow: 0 0 0 1px var(--fx-blue) inset; }
.lh-review .et-hint { color: var(--fx-muted); }
.lh-review .bk-wa-on { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border-radius: 10px; background: var(--fx-soft); }
.lh-review .bk-wa-on button { border: 0; background: none; padding: 0; min-height: 36px; font: inherit; font-weight: 700; color: var(--fx-blue); cursor: pointer; }
.lh-review .bk-signin { margin: 10px 0 0; color: var(--fx-muted); }
.lh-review .bk-signin a { color: var(--fx-blue); font-weight: 700; }
.lh-review .agree { display: flex; gap: 10px; align-items: flex-start; margin: 12px 0 0; padding: 12px; border: 1px solid var(--fx-line); border-radius: 12px; background: #fff; cursor: pointer; line-height: 1.5; }
.lh-review .agree.on { border-color: var(--fx-blue); background: var(--fx-blue-soft); }
.lh-review .agree input { width: 20px; height: 20px; flex: none; margin: 1px 0 0; accent-color: var(--fx-blue); }
.lh-review .scope-note { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0 0; color: var(--fx-muted); line-height: 1.5; }
.lh-review .bk-quiet { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 10px 0 0; }
.lh-review .bk-quiet a { color: var(--fx-blue); font-weight: 600; min-height: 32px; display: inline-flex; align-items: center; }
.lh-review .bk-hint { margin: 6px 0 0; color: var(--fx-muted); }
.lh-review .xp-note { display: flex; gap: 8px; align-items: flex-start; }
.lh-review .lh-cashsteps { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; counter-reset: lhc; }
.lh-review .lh-cashsteps li { display: flex; gap: 10px; align-items: flex-start; }
.lh-review .lh-cashsteps b.lh-n { width: 24px; height: 24px; border-radius: 50%; background: var(--fx-blue); color: #fff; display: inline-flex; align-items: center; justify-content: center; flex: none; font-weight: 800; }
.lh-review .lh-cashsteps small { display: block; color: var(--fx-muted); }
.lh-review .toast-inline:empty { display: none; }

/* The sticky confirm bar: the total and the one action. */
.lh-cbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; align-items: center; gap: 12px; padding: 10px 16px calc(12px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--fx-line); }
.lh-cbar__total { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.15; }
.lh-cbar__total small { color: var(--fx-muted); }
.lh-cbar__total b { color: var(--fx-blue); font-weight: 800; white-space: nowrap; }
.lh-cbar .hx-btn { flex: none; max-width: 62%; }
.lh-cbar #btnRequest { width: auto; margin: 0; min-height: 48px; }
.lh-cbar #btnRequest[disabled] { opacity: 1; background: #b9c3d3; cursor: not-allowed; }
.lh-cbar .hx-btn .et-i { flex: none; }
.lh-cbar .hx-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body:has(.lh-cbar) .al-fab, body:has(.lh-pbar) .al-fab { bottom: calc(96px + env(safe-area-inset-bottom)); }

/* --- Wider screens --------------------------------------------------------- */
@media (min-width: 600px) {
    .lh-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lh-card__photo { aspect-ratio: 4 / 4.2; }
    .lh-help { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lh-review .bk-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
    .lh { --pad: 24px; --hx-pad: 24px; }
    .lh-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
    .lh-trust { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .lh-profile .profile-grid.pf-layout { grid-template-columns: minmax(0, 1fr) 380px; gap: 24px; align-items: start; margin-top: 16px; }
    .lh-profile .profile-col-book { position: sticky; top: calc(var(--nav-h, 0px) + 112px); }
    .lh-profile .pf-intro.lh-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 20px; margin: 0; align-items: start; }
    .lh-profile .pf-gallery .pf-photo-main { aspect-ratio: 4 / 5; border-radius: var(--fx-r); }
    .lh-profile .pf-thumbs { padding: 8px 0 0; }
    .lh-profile .pf-who { padding: 0; }
    .lh-profile .pf-card .trust-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lh-do { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .lh-facts { grid-template-columns: minmax(0, 1fr); }
    .lh-facts li { flex-direction: row; align-items: flex-start; gap: 8px; }
    .lh-pbar.m-tabbar { display: none; }
    .lh-review .bk-grid { grid-template-columns: minmax(0, 1fr) 380px; gap: 24px; align-items: start; }
    .lh-review .bk-side { position: sticky; top: calc(var(--nav-h, 0px) + 16px); }
    .lh-review .fx-steps { margin: 4px 0 0; padding: 10px 0; border: 0; background: transparent; max-width: 420px; }
    .lh-cbar { position: static; margin: 12px 0 0; padding: 0; border: 0; background: none; }
    .lh-cbar__total { display: none; }
    .lh-cbar .hx-btn, .lh-cbar #btnRequest { flex: 1; max-width: none; width: 100%; }
    .lh-story { margin-left: 0; margin-right: 0; }
}
@media (min-width: 1200px) {
    .lh-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 360px) {
    .lh-facts { grid-template-columns: minmax(0, 1fr); }
    .lh-trust { grid-template-columns: minmax(0, 1fr); }
    .lh-do { grid-template-columns: minmax(0, 1fr); }
    .lh-card__foot { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) { .lh-card { transition: none; } }