/* ============================================================
   Travespert - Hornbill homestay bookings (inc/homestay-booking.php)
   Listing (/hornbill-homestays/), single homestay pages, and the
   "Homestays" tab of the team dashboard. Amber --tv-* tokens.
   ============================================================ */

/* Theme prints its own page-title h1; our pages carry their own. */
body.tv-hs-page #brx-content > h1 { display: none; }
/* Bricks caps #brx-content at the 1100px container; let our pages run edge to edge (the hero is full-bleed, .tv-hs-wrap re-centres the content). */
body.tv-hs-page #brx-content { width: 100%; max-width: none; margin-left: 0; margin-right: 0; }

.tv-hs { --hs-gutter: clamp(16px, 5vw, 40px); color: var(--tv-ink); font-family: var(--tv-font); }
.tv-hs-wrap { max-width: 1120px; margin: 0 auto; padding-left: var(--hs-gutter); padding-right: var(--hs-gutter); box-sizing: border-box; }
.tv-hs-ic { width: 18px; height: 18px; flex: 0 0 auto; }

/* ---- Listing hero ---- */
.tv-hs-hero { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end; min-height: clamp(300px, 34vw, 420px); padding: clamp(40px, 6vw, 72px) 0 clamp(28px, 4vw, 44px); background: #1b1b1b; }
.tv-hs-hero > * { width: 100%; }
.tv-hs-hero::before { content: ''; position: absolute; inset: 0; z-index: -2; background: #1b1b1b var(--tv-hs-hero, none) center / cover no-repeat; }
.tv-hs-hero::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(12,12,12,.30) 0%, rgba(12,12,12,.38) 40%, rgba(12,12,12,.78) 100%); }
.tv-hs-back { display: inline-flex; align-items: center; gap: 8px; font-size: var(--tv-fs-sm); font-weight: 700; color: #fff; text-decoration: none; margin-bottom: 18px; opacity: .92; }
.tv-hs-back:hover { opacity: 1; text-decoration: underline; }
.tv-hs-back .tv-hs-ic { width: 16px; height: 16px; }
.tv-hs-back--dark { color: var(--tv-ink); margin: 24px 0 0; }
.tv-hs-eyebrow { display: flex; align-items: center; gap: 10px; font-size: var(--tv-fs-sm); font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--tv-primary); margin: 0 0 10px; }
.tv-hs-eyebrow::before { content: ''; width: 22px; height: 3px; border-radius: 3px; background: var(--tv-primary); }
.tv-hs-eyebrow--dark { color: var(--tv-primary-hover); }
.tv-hs-eyebrow--dark::before { background: var(--tv-primary); }
.tv-hs-h1 { font-size: clamp(28px, 3.6vw, 42px); font-weight: 800; letter-spacing: var(--tv-ls-display); line-height: var(--tv-lh-tight); color: #fff; margin: 0 0 12px; text-shadow: 0 2px 18px rgba(0,0,0,.45); }
.tv-hs-h1--dark { color: var(--tv-ink); text-shadow: none; margin-bottom: 6px; }
.tv-hs-lead { max-width: 620px; font-size: var(--tv-fs-lead); line-height: 1.6; color: rgba(255,255,255,.92); margin: 0; }

/* ---- Listing grid ---- */
.tv-hs-listsec { padding-top: clamp(28px, 4vw, 44px); padding-bottom: clamp(40px, 6vw, 64px); }
.tv-hs-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--tv-grid-gap); }
.tv-hs-card { display: flex; flex-direction: column; background: var(--tv-canvas); border: 1px solid var(--tv-hairline-soft); border-radius: var(--tv-radius-md); overflow: hidden; box-shadow: var(--tv-shadow-card); transition: transform var(--tv-transition), box-shadow var(--tv-transition); }
.tv-hs-card:hover { transform: translateY(-2px); box-shadow: var(--tv-shadow-float); }
.tv-hs-card__media { position: relative; display: block; aspect-ratio: 16 / 10; background: var(--tv-surface); overflow: hidden; }
.tv-hs-card__media img, .tv-hs-card__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 400ms ease; }
.tv-hs-card:hover .tv-hs-card__media img { transform: scale(1.03); }
.tv-hs-avail { position: absolute; top: 12px; left: 12px; padding: 5px 11px; border-radius: var(--tv-radius-pill); background: var(--tv-ok-bg); color: var(--tv-ok); font-size: var(--tv-fs-xs); font-weight: 800; box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.tv-hs-avail.is-out { background: var(--tv-no-bg); color: var(--tv-no); }
.tv-hs-card__body { display: flex; flex-direction: column; gap: 14px; padding: 20px 20px 22px; flex: 1; }
.tv-hs-card__title { font-size: 21px; font-weight: 800; letter-spacing: -0.3px; line-height: 1.2; margin: 0; }
.tv-hs-card__title a { color: var(--tv-ink); text-decoration: none; }
.tv-hs-card__title a:hover { color: var(--tv-primary-hover); }
.tv-hs-card__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 14px; border-top: 1px solid var(--tv-hairline-soft); }
.tv-hs-from { margin: 0; font-size: var(--tv-fs-sm); color: var(--tv-muted); }
.tv-hs-from b { font-size: 19px; font-weight: 800; color: var(--tv-ink); letter-spacing: -0.3px; }
.tv-hs-fine { font-size: var(--tv-fs-sm); line-height: 1.6; color: var(--tv-muted); margin: 22px 0 0; max-width: var(--tv-prose); }

/* ---- Facts (shared by card + single) ---- */
.tv-hs-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.tv-hs-fact { display: grid; grid-template-columns: 30px 108px minmax(0, 1fr); align-items: center; font-size: var(--tv-fs-body); line-height: 1.35; }
.tv-hs-fact .tv-hs-ic { width: 30px; height: 30px; padding: 6px; box-sizing: border-box; border-radius: 9px; background: var(--tv-primary-tint); color: var(--tv-primary-hover); }
.tv-hs-fact__k { padding-left: 10px; font-size: var(--tv-fs-sm); font-weight: 600; color: var(--tv-muted); }
.tv-hs-fact__v { font-weight: 700; color: var(--tv-ink); }
.tv-hs-fact.is-no .tv-hs-ic { background: var(--tv-no-bg); color: var(--tv-no); }
.tv-hs-fact.is-no .tv-hs-fact__v { color: var(--tv-no); }

/* Photo placeholder */
.tv-hs-ph { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: repeating-linear-gradient(135deg, var(--tv-surface) 0 14px, #f1f1f1 14px 28px); color: var(--tv-muted); font-size: var(--tv-fs-sm); font-weight: 700; text-align: center; padding: 16px; }
.tv-hs-ph .tv-hs-ic { width: 34px; height: 34px; color: var(--tv-muted-soft); }

/* ---- Single homestay ---- */
.tv-hs--single { padding-bottom: clamp(40px, 6vw, 72px); }
.tv-hs-head { margin: 18px 0 20px; }
.tv-hs-sub { display: flex; align-items: center; gap: 6px; margin: 0; font-size: var(--tv-fs-lead); color: var(--tv-muted); font-weight: 600; }
.tv-hs-notice { margin-bottom: 16px; }
.tv-hs-notice .woocommerce-error, .tv-hs-notice .woocommerce-message, .tv-hs-notice .woocommerce-info { margin: 0; padding: 14px 16px; list-style: none; border-radius: var(--tv-radius-sm); background: var(--tv-no-bg); color: var(--tv-no); font-weight: 600; font-size: var(--tv-fs-body); }

/* gallery: big tile + up to 4 small */
.tv-hs-gal { position: relative; display: grid; gap: 8px; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: repeat(2, minmax(0, 1fr)); height: clamp(280px, 40vw, 440px); border-radius: var(--tv-radius-md); overflow: hidden; }
.tv-hs-gal__tile { position: relative; display: block; overflow: hidden; background: var(--tv-surface); }
.tv-hs-gal__tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 400ms ease; }
.tv-hs-gal__tile:hover img { transform: scale(1.04); }
.tv-hs-gal__tile:first-child { grid-row: 1 / span 2; }
.tv-hs-gal--1 { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.tv-hs-gal--2 { grid-template-columns: 2fr 1fr; }
.tv-hs-gal--2 .tv-hs-gal__tile:nth-child(2) { grid-row: 1 / span 2; }
.tv-hs-gal--3 { grid-template-columns: 2fr 1fr; }
.tv-hs-gal--4 .tv-hs-gal__tile:nth-child(4) { grid-row: 1 / span 2; grid-column: 3; }
.tv-hs-gal--empty { display: block; position: relative; height: clamp(200px, 26vw, 280px); }
.tv-hs-gal__all { position: absolute; right: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border: 1px solid var(--tv-ink); border-radius: var(--tv-radius-sm); background: #fff; color: var(--tv-ink); font: 700 var(--tv-fs-sm) / 1 var(--tv-font); cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,.15); }
.tv-hs-gal__all:hover { background: var(--tv-primary-tint); }
.tv-hs-gal__all .tv-hs-ic { width: 16px; height: 16px; }

.tv-hs-about { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 18px 40px; align-items: start; margin: 28px 0 8px; padding-bottom: 28px; border-bottom: 1px solid var(--tv-hairline-soft); }
.tv-hs-intro { font-size: var(--tv-fs-lead); line-height: var(--tv-lh-body); color: var(--tv-body); margin: 0; }
.tv-hs-about .tv-hs-facts { grid-row: span 2; padding: 18px; border: 1px solid var(--tv-hairline-soft); border-radius: var(--tv-radius-md); background: var(--tv-canvas); }
.tv-hs-note { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 12px 14px; border-radius: var(--tv-radius-sm); background: var(--tv-primary-tint); color: var(--tv-ink); font-size: var(--tv-fs-sm); font-weight: 600; line-height: 1.5; }
.tv-hs-note .tv-hs-ic { color: var(--tv-primary-hover); margin-top: 1px; }

.tv-hs-h2 { font-size: var(--tv-fs-h2); font-weight: 800; letter-spacing: -0.3px; margin: 32px 0 6px; color: var(--tv-ink); }
.tv-hs-h2sub { margin: 0 0 18px; color: var(--tv-muted); font-size: var(--tv-fs-body); line-height: 1.6; }

/* ---- Room card + booking widget ---- */
.tv-hs-room { border: 1px solid var(--tv-hairline); border-radius: var(--tv-radius-md); padding: 20px; margin-bottom: 16px; background: var(--tv-canvas); box-shadow: var(--tv-shadow-card); }
.tv-hs-room__head { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-bottom: 16px; border-bottom: 1px solid var(--tv-hairline-soft); }
.tv-hs-room__name { font-size: 19px; font-weight: 800; margin: 0 0 8px; letter-spacing: -0.2px; }
.tv-hs-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.tv-hs-chips li { display: inline-flex; align-items: center; gap: 6px; font-size: var(--tv-fs-sm); color: var(--tv-body); font-weight: 600; }
.tv-hs-chips .tv-hs-ic { width: 16px; height: 16px; color: var(--tv-primary-hover); }
.tv-hs-room__price { margin: 0; text-align: right; display: flex; flex-direction: column; }
.tv-hs-room__price b { font-size: 22px; font-weight: 800; letter-spacing: -0.4px; }
.tv-hs-room__price span { font-size: var(--tv-fs-sm); color: var(--tv-muted); font-weight: 600; }
.tv-hs-room__price em { font-style: normal; font-size: var(--tv-fs-xs); color: var(--tv-muted-soft); }
.tv-hs-soldout { margin: 16px 0 0; padding: 12px 14px; border-radius: var(--tv-radius-sm); background: var(--tv-no-bg); color: var(--tv-no); font-weight: 600; font-size: var(--tv-fs-sm); }

.tv-hs-book { padding-top: 16px; }
.tv-hs-book__lab { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: var(--tv-fs-sm); font-weight: 700; color: var(--tv-ink); }
.tv-hs-book__lab .tv-hs-ic { width: 16px; height: 16px; color: var(--tv-primary-hover); }
.tv-hs-days { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 6px; }
.tv-hs-day { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 2px; border: 1.5px solid var(--tv-hairline-soft); border-radius: var(--tv-radius-sm); background: var(--tv-canvas); cursor: pointer; font-family: var(--tv-font); color: var(--tv-ink); transition: border-color var(--tv-transition), background var(--tv-transition); }
.tv-hs-day:hover:not(:disabled) { border-color: var(--tv-primary); }
.tv-hs-day:focus-visible { outline: 2px solid var(--tv-ink); outline-offset: 2px; }
.tv-hs-day__w { font-size: 11px; font-weight: 600; color: var(--tv-muted); text-transform: uppercase; letter-spacing: .4px; }
.tv-hs-day__n { font-size: 17px; font-weight: 800; line-height: 1.2; }
.tv-hs-day__l { font-size: 11px; font-weight: 700; color: var(--tv-ok); white-space: nowrap; }
.tv-hs-day.is-in { background: var(--tv-primary-tint); border-color: var(--tv-primary); }
.tv-hs-day.is-start { background: var(--tv-primary); border-color: var(--tv-primary); }
.tv-hs-day.is-start .tv-hs-day__w, .tv-hs-day.is-start .tv-hs-day__l { color: var(--tv-on-primary); }
.tv-hs-day:disabled { cursor: not-allowed; background: var(--tv-surface); border-color: var(--tv-surface); }
.tv-hs-day:disabled .tv-hs-day__n { color: var(--tv-muted-soft); text-decoration: line-through; }
.tv-hs-day:disabled .tv-hs-day__l { color: var(--tv-no); }

.tv-hs-room__xb { color: var(--tv-primary-hover) !important; font-weight: 700; }
.tv-hs-xb { display: flex; align-items: flex-start; gap: 10px; margin-top: 16px; padding: 12px 14px; border: 1.5px solid var(--tv-hairline-soft); border-radius: var(--tv-radius-sm); cursor: pointer; font-size: var(--tv-fs-body); line-height: 1.4; transition: border-color var(--tv-transition), background var(--tv-transition); }
.tv-hs-xb:has(input:checked) { border-color: var(--tv-primary); background: var(--tv-primary-tint); }
.tv-hs-xb, .tv-hs-xb span { color: var(--tv-body); }
.tv-hs-xb b { color: var(--tv-ink); font-weight: 800; }
.tv-hs-xb input { width: 20px; height: 20px; margin: 0; flex: 0 0 auto; accent-color: var(--tv-primary-strong); cursor: pointer; }
.tv-hs-xb em { display: block; font-style: normal; font-size: var(--tv-fs-sm); font-weight: 700; color: var(--tv-primary-hover); }
.tv-hs-ctl { display: flex; gap: 12px 32px; flex-wrap: wrap; margin-top: 16px; }
.tv-hs-ctl__row { display: flex; align-items: center; gap: 12px; font-size: var(--tv-fs-body); font-weight: 700; }
.tv-hs-step { display: flex; align-items: center; border: 1px solid var(--tv-hairline); border-radius: var(--tv-radius-pill); overflow: hidden; }
.tv-hs-step button { width: 40px; height: 38px; border: 0; background: none; font-size: 18px; color: var(--tv-ink); cursor: pointer; font-family: var(--tv-font); }
.tv-hs-step button:hover:not(:disabled) { background: rgba(242, 167, 27,.14); }
.tv-hs-step button:disabled { color: var(--tv-muted-soft); cursor: not-allowed; }
.tv-hs-step output { min-width: 34px; text-align: center; font-size: 15px; font-weight: 800; }
/* Stepper: centre the glyphs (theme buttons default to text-align:start) and keep both steppers the same width. */
.tv-hs-step { width: 128px; justify-content: space-between; background: var(--tv-canvas); }
.tv-hs-step button { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 40px; width: 40px; height: 38px; padding: 0; margin: 0; text-align: center; font-size: 20px; font-weight: 600; line-height: 1; border-radius: 0; }
.tv-hs-step output { flex: 1 1 auto; min-width: 0; line-height: 38px; }
.tv-hs-ctl__row > span { min-width: 56px; }

.tv-hs-sum { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--tv-hairline-soft); }
.tv-hs-sum__range { margin: 0 0 2px; font-size: var(--tv-fs-sm); color: var(--tv-muted); font-weight: 600; }
.tv-hs-sum__total { margin: 0; display: flex; align-items: baseline; gap: 8px; }
.tv-hs-sum__total b { font-size: 24px; font-weight: 800; letter-spacing: -0.4px; }
.tv-hs-sum__total span { font-size: var(--tv-fs-sm); color: var(--tv-muted); }
.tv-hs-go { min-width: 170px; }
.tv-hs-go:disabled { opacity: .7; cursor: wait; }
.tv-hs-warn { margin: 12px 0 0; padding: 10px 12px; border-radius: var(--tv-radius-sm); background: var(--tv-no-bg); color: var(--tv-no); font-size: var(--tv-fs-sm); font-weight: 600; }

.tv-hs-how ol { margin: 0; padding-left: 20px; display: grid; gap: 10px; max-width: var(--tv-prose); color: var(--tv-body); line-height: 1.6; }
.tv-hs-how a { color: var(--tv-primary-hover); font-weight: 700; }

/* ---- Responsive ---- */
@media (max-width: 991px) {
  .tv-hs-about { grid-template-columns: minmax(0, 1fr); }
  .tv-hs-about .tv-hs-facts { grid-row: auto; }
}
@media (max-width: 767px) {
  .tv-hs-grid { grid-template-columns: minmax(0, 1fr); }
  .tv-hs-gal { grid-template-columns: 1fr 1fr; grid-template-rows: 2fr 1fr; height: clamp(300px, 90vw, 420px); }
  .tv-hs-gal__tile:first-child { grid-row: auto; grid-column: 1 / span 2; }
  .tv-hs-gal__tile:nth-child(n+4) { display: none; }
  .tv-hs-gal--1 { grid-template-rows: 1fr; }
  .tv-hs-gal--2 { grid-template-rows: 1fr; grid-template-columns: 1fr; }
  .tv-hs-gal--2 .tv-hs-gal__tile:nth-child(2) { display: none; }
  .tv-hs-gal--4 .tv-hs-gal__tile:nth-child(4) { grid-row: auto; grid-column: auto; }
  .tv-hs-days { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .tv-hs-room { padding: 16px; }
  .tv-hs-room__price { text-align: left; }
  .tv-hs-sum { flex-direction: column; align-items: stretch; }
  .tv-hs-go { width: 100%; }
  .tv-hs-fact { grid-template-columns: 30px 96px minmax(0, 1fr); }
}
/* Phones/tablets: fold the date picker behind "Check dates & book" so a
   homestay with several room types doesn't become one very long page. */
.tv-hs-room__toggle { display: none; }
@media (max-width: 991px) {
  .tv-hs-room__head { cursor: pointer; }
  .tv-hs-room.is-open .tv-hs-room__head { cursor: default; }
  .tv-hs-room__toggle { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 14px; padding: 13px 16px; border: 1.5px solid var(--tv-ink); border-radius: var(--tv-radius-pill); background: var(--tv-canvas); color: var(--tv-ink); font: 700 15px / 1 var(--tv-font); cursor: pointer; }
  .tv-hs-room__toggle .tv-hs-ic { width: 18px; height: 18px; }
  .tv-hs-room.is-open .tv-hs-room__toggle { border-color: var(--tv-hairline); color: var(--tv-muted); font-size: 14px; padding: 10px 16px; }
  .tv-hs-room:not(.is-open) .tv-hs-book { display: none; }
  .tv-hs-room:not(.is-open) .tv-hs-room__head { padding-bottom: 0; border-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .tv-hs-card,.tv-hs-card__media img, .tv-hs-gal__tile img { transition: none; }
}

/* ============================================================
   Team dashboard: Homestays tab (.tv-hsd)
   ============================================================ */
.tv-hsd-intro { margin-bottom: 18px; }
.tv-hsd-intro h2 { font-size: 20px; font-weight: 800; margin: 0 0 6px; }
.tv-hsd-intro p { margin: 0 0 6px; color: var(--tv-muted); font-size: var(--tv-fs-sm); line-height: 1.6; max-width: 760px; }
.tv-hsd-draft { display: inline-block; padding: 6px 10px; border-radius: var(--tv-radius-sm); background: var(--tv-primary-tint); color: var(--tv-ink) !important; font-weight: 700; }
.tv-hsd-home { background: var(--tv-canvas); border: 1px solid var(--tv-hairline-soft); border-radius: var(--tv-radius-md); padding: 16px 18px; margin-bottom: 14px; box-shadow: var(--tv-shadow-card); }
.tv-hsd-home__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.tv-hsd-home__head h3 { margin: 0; font-size: 17px; font-weight: 800; }
.tv-hsd-home__head h3 span { font-size: var(--tv-fs-sm); font-weight: 600; color: var(--tv-muted); margin-left: 6px; }
.tv-hsd-home__head a { font-size: var(--tv-fs-sm); font-weight: 700; color: var(--tv-primary-hover); }
.tv-hsd-rate { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; margin: 4px 0 12px; padding: 10px 12px; border-radius: var(--tv-radius-sm); background: var(--tv-primary-tint); }
.tv-hsd-rate label { font-size: var(--tv-fs-sm); font-weight: 700; color: var(--tv-ink); }
.tv-hsd-rate__in { display: inline-flex; align-items: center; gap: 4px; padding: 0 10px; border: 1.5px solid var(--tv-hairline); border-radius: var(--tv-radius-sm); background: #fff; }
.tv-hsd-rate__in span { font-weight: 800; color: var(--tv-muted); }
.tv-hsd-rateval { width: 90px; padding: 8px 0; border: 0; outline: none; background: transparent; font: 800 16px / 1 var(--tv-font); color: var(--tv-ink); -moz-appearance: textfield; }
.tv-hsd-rateval::-webkit-outer-spin-button, .tv-hsd-rateval::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tv-hsd-rate__in:focus-within { border-color: var(--tv-primary); }
.tv-hsd-ratebtn { padding: 9px 16px; border: 0; border-radius: var(--tv-radius-pill); background: var(--tv-primary); color: var(--tv-on-primary); font: 700 13px / 1 var(--tv-font); cursor: pointer; }
.tv-hsd-ratebtn:hover { background: var(--tv-primary-strong); }
.tv-hsd-rate__orig { font-size: var(--tv-fs-xs); color: var(--tv-muted); font-weight: 600; }
.tv-hsd-rp { font-size: inherit; color: var(--tv-ink); }
.tv-hsd-room { padding: 12px 0; border-top: 1px solid var(--tv-hairline-soft); }
.tv-hsd-room__name { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; margin-bottom: 10px; }
.tv-hsd-room__name b { font-size: 15px; }
.tv-hsd-room__name span { font-size: var(--tv-fs-xs); color: var(--tv-muted); font-weight: 600; }
.tv-hsd-grid { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 6px; }
.tv-hsd-cell { display: flex; flex-direction: column; align-items: stretch; gap: 3px; }
.tv-hsd-cell span { font-size: 11px; font-weight: 700; color: var(--tv-muted); text-align: center; text-transform: uppercase; letter-spacing: .3px; }
.tv-hsd-cell input { width: 100%; box-sizing: border-box; padding: 8px 2px; border: 1.5px solid var(--tv-hairline); border-radius: var(--tv-radius-sm); text-align: center; font: 800 16px / 1 var(--tv-font); color: var(--tv-ok); background: var(--tv-ok-bg); -moz-appearance: textfield; }
.tv-hsd-cell input::-webkit-outer-spin-button, .tv-hsd-cell input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tv-hsd-cell input:focus { outline: none; border-color: var(--tv-primary); }
.tv-hsd-cell.is-zero input { color: var(--tv-no); background: var(--tv-no-bg); }
.tv-hsd-all { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; font-size: var(--tv-fs-sm); color: var(--tv-muted); font-weight: 600; }
.tv-hsd-allval { width: 64px; padding: 6px 8px; border: 1px solid var(--tv-hairline); border-radius: var(--tv-radius-sm); font: 700 14px / 1 var(--tv-font); text-align: center; }
.tv-hsd-allbtn { padding: 7px 14px; border: 1px solid var(--tv-ink); border-radius: var(--tv-radius-pill); background: #fff; font: 700 13px / 1 var(--tv-font); color: var(--tv-ink); cursor: pointer; }
.tv-hsd-allbtn:hover { background: var(--tv-primary-tint); }
.tv-hsd-msg { position: sticky; bottom: 12px; margin: 8px 0 0; min-height: 0; font-size: var(--tv-fs-sm); font-weight: 700; }
.tv-hsd-msg.is-ok, .tv-hsd-msg.is-err { display: inline-block; padding: 8px 14px; border-radius: var(--tv-radius-pill); box-shadow: var(--tv-shadow-float); }
.tv-hsd-msg.is-ok { background: var(--tv-ok-bg); color: var(--tv-ok); }
.tv-hsd-msg.is-err { background: var(--tv-no-bg); color: var(--tv-no); }
@media (max-width: 767px) {
  .tv-hsd-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .tv-hsd-home { padding: 14px; }
}

/* Sold-out homestay card button (2026-10-18) */
.tv-hs-card__cta--out { background: var(--tv-no-bg); color: var(--tv-no); border: 0; box-shadow: none; cursor: default; pointer-events: none; }

/* ============================================================
   Listing refresh (2026-10-18): 3-col grid, compact cards, filter chips.
   Overrides the original listing rules above.
   ============================================================ */
.tv-hs-perks { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; }
.tv-hs-perks li { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: var(--tv-radius-pill); background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22); color: #fff; font-size: var(--tv-fs-sm); font-weight: 700; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.tv-hs-perks .tv-hs-ic { width: 16px; height: 16px; color: var(--tv-primary); }

.tv-hs-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; margin-bottom: 22px; }
.tv-hs-bar__sum { margin: 0; font-size: var(--tv-fs-body); color: var(--tv-muted); }
.tv-hs-bar__sum b { color: var(--tv-ink); font-weight: 800; }
.tv-hs-filter { display: flex; flex-wrap: wrap; gap: 8px; }
.tv-hs-filter button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px; padding: 0 14px; border: 1.5px solid var(--tv-hairline); border-radius: var(--tv-radius-pill); background: var(--tv-canvas); color: var(--tv-ink); font: 700 var(--tv-fs-sm) / 1 var(--tv-font); text-align: center; cursor: pointer; box-shadow: none; transition: border-color var(--tv-transition), background var(--tv-transition), color var(--tv-transition); }
.tv-hs-filter button span { min-width: 22px; padding: 3px 6px; box-sizing: border-box; border-radius: var(--tv-radius-pill); background: var(--tv-surface); color: var(--tv-muted); font-size: var(--tv-fs-xs); font-weight: 800; }
.tv-hs-filter button:hover { border-color: var(--tv-primary); }
.tv-hs-filter button[aria-pressed="true"] { background: var(--tv-ink); border-color: var(--tv-ink); color: #fff; }
.tv-hs-filter button[aria-pressed="true"] span { background: rgba(255,255,255,.18); color: #fff; }
.tv-hs-filter button:focus-visible { outline: 2px solid var(--tv-primary); outline-offset: 2px; }

.tv-hs-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.tv-hs-card { position: relative; }
.tv-hs-card[hidden] { display: none; }
.tv-hs-card__media { aspect-ratio: 3 / 2; }
.tv-hs-card__link { color: var(--tv-ink); text-decoration: none; }
.tv-hs-card__link::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.tv-hs-card__link:focus-visible { outline: none; }
.tv-hs-card:has(.tv-hs-card__link:focus-visible) { outline: 3px solid var(--tv-primary); outline-offset: 2px; }
.tv-hs-card:hover .tv-hs-card__title a { color: var(--tv-primary-hover); }
.tv-hs-card__dist, .tv-hs-card__count { position: absolute; bottom: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: var(--tv-radius-pill); background: rgba(17,17,17,.72); color: #fff; font-size: var(--tv-fs-xs); font-weight: 700; line-height: 1.2; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.tv-hs-card__dist { left: 12px; max-width: calc(100% - 90px); }
.tv-hs-card__count { right: 12px; }
.tv-hs-card__dist .tv-hs-ic, .tv-hs-card__count .tv-hs-ic { width: 14px; height: 14px; color: var(--tv-primary); }
.tv-hs-card__body { gap: 10px; padding: 18px 18px 20px; }
.tv-hs-card__title { font-size: 20px; }
.tv-hs-card__loc { display: flex; align-items: center; gap: 6px; margin: -4px 0 2px; font-size: var(--tv-fs-sm); font-weight: 600; color: var(--tv-muted); }
.tv-hs-card__loc .tv-hs-ic { width: 16px; height: 16px; color: var(--tv-primary-hover); }
.tv-hs-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 4px; padding: 0; }
.tv-hs-tags li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: var(--tv-radius-sm); background: var(--tv-surface); color: var(--tv-ink); font-size: var(--tv-fs-xs); font-weight: 700; line-height: 1.25; }
.tv-hs-tags .tv-hs-ic { width: 15px; height: 15px; color: var(--tv-primary-hover); }
.tv-hs-tags li.is-no { background: var(--tv-no-bg); color: var(--tv-no); }
.tv-hs-tags li.is-no .tv-hs-ic { color: var(--tv-no); }
.tv-hs-tags li.is-warn { background: var(--tv-primary-tint); }
.tv-hs-from { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 4px; }
.tv-hs-from small { flex-basis: 100%; margin-top: 2px; font-size: var(--tv-fs-xs); font-weight: 600; color: var(--tv-muted); }
.tv-hs-card__cta { position: relative; z-index: 2; pointer-events: none; }
.tv-hs-card.is-out .tv-hs-card__media img { filter: grayscale(.55); opacity: .82; }
.tv-hs-card.is-out .tv-hs-from b { color: var(--tv-muted); }
.tv-hs-card.is-out:hover { transform: none; }

@media (max-width: 1023px) {
  .tv-hs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 639px) {
  .tv-hs-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .tv-hs-bar { flex-direction: column; align-items: flex-start; }
  .tv-hs-filter { width: 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--hs-gutter) * -1); padding: 0 var(--hs-gutter); width: auto; }
  .tv-hs-filter::-webkit-scrollbar { display: none; }
  .tv-hs-filter button { flex: 0 0 auto; }
  .tv-hs-perks li { font-size: var(--tv-fs-xs); padding: 6px 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .tv-hs-filter button { transition: none; }
}

.tv-hs-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.tv-hs-card__dist { white-space: nowrap; }
@media (max-width: 639px) {
  .tv-hs-perks { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-left: calc(var(--hs-gutter) * -1); margin-right: calc(var(--hs-gutter) * -1); padding: 0 var(--hs-gutter); }
  .tv-hs-perks::-webkit-scrollbar { display: none; }
  .tv-hs-perks li { flex: 0 0 auto; }
}

/* ============================================================
   Single homestay page v2 (2026-10-18): one booking box.
   Desktop: about + how on the left, sticky box on the right.
   <=991px: one column (about, box, how) + bottom bar.
   ============================================================ */
.tv-hs-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 400px); grid-template-areas: "about book" "how book"; gap: 8px 44px; align-items: start; margin-top: 28px; }
.tv-hs-main__about { grid-area: about; }
.tv-hs-main__book { grid-area: book; position: sticky; top: 96px; scroll-margin-top: 96px; }
.tv-hs-main__how { grid-area: how; }
.tv-hs-main .tv-hs-about { grid-template-columns: minmax(0, 1fr); margin: 0; padding-bottom: 8px; border-bottom: 0; }
.tv-hs-main .tv-hs-about .tv-hs-facts { grid-row: auto; }
.tv-hs-main .tv-hs-how .tv-hs-h2 { margin-top: 16px; }

.tv-hs-box { background: var(--tv-canvas); border: 1px solid var(--tv-hairline-soft); border-radius: var(--tv-radius-md); box-shadow: var(--tv-shadow-float); padding: 20px; color: var(--tv-ink); }
.tv-hs-box__head { padding-bottom: 14px; margin-bottom: 4px; border-bottom: 1px solid var(--tv-hairline-soft); }
.tv-hs-box__from { margin: 0; font-size: var(--tv-fs-sm); color: var(--tv-muted); }
.tv-hs-box__from b { font-size: 24px; font-weight: 800; letter-spacing: -0.4px; color: var(--tv-ink); }
.tv-hs-box__sub { margin: 2px 0 0; font-size: var(--tv-fs-xs); color: var(--tv-muted); font-weight: 600; }
.tv-hs-box__fine { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0 0; font-size: var(--tv-fs-xs); line-height: 1.5; color: var(--tv-muted); }
.tv-hs-box__fine .tv-hs-ic { width: 15px; height: 15px; margin-top: 1px; color: var(--tv-primary-hover); }
.tv-hs-box--out { text-align: center; }
.tv-hs-box__out { margin: 0 0 14px; font-weight: 700; color: var(--tv-no); }

.tv-hs-step2 { padding: 16px 0 4px; }
.tv-hs-step2__h { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.tv-hs-step2__h h2 { margin: 0; font-size: 17px; font-weight: 800; letter-spacing: -0.2px; color: var(--tv-ink); }
.tv-hs-step2__n { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--tv-ink); color: #fff; font-size: 13px; font-weight: 800; flex: 0 0 auto; }
.tv-hs-clear { margin-left: auto; padding: 4px 8px; border: 0; background: none; color: var(--tv-primary-hover); font: 700 var(--tv-fs-sm) / 1 var(--tv-font); text-decoration: underline; cursor: pointer; text-align: center; }

.tv-hs-dates { display: grid; grid-template-columns: 1fr 1fr; border: 1.5px solid var(--tv-hairline); border-radius: var(--tv-radius-sm); overflow: hidden; margin-bottom: 12px; }
.tv-hs-dates__f { padding: 9px 12px; min-width: 0; }
.tv-hs-dates__f + .tv-hs-dates__f { border-left: 1.5px solid var(--tv-hairline); }
.tv-hs-dates__f span { display: block; font-size: 11px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--tv-muted); }
.tv-hs-dates__f b { display: block; margin-top: 2px; font-size: 15px; font-weight: 800; color: var(--tv-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tv-hs-dates__f.is-active { background: var(--tv-primary-tint); box-shadow: inset 0 -3px 0 var(--tv-primary); }

.tv-hs-cal__m { margin: 0 0 8px; font-size: var(--tv-fs-sm); font-weight: 800; color: var(--tv-ink); }
.tv-hs-cal__g { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.tv-hs-cal__w { text-align: center; font-size: 11px; font-weight: 700; color: var(--tv-muted); padding-bottom: 2px; }
.tv-hs-cal__d { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; height: 46px; padding: 0; margin: 0; border: 1.5px solid var(--tv-hairline-soft); border-radius: 10px; background: var(--tv-canvas); color: var(--tv-ink); font-family: var(--tv-font); text-align: center; cursor: pointer; box-shadow: none; transition: background var(--tv-transition), border-color var(--tv-transition); }
.tv-hs-cal__d b { font-size: 15px; font-weight: 800; line-height: 1; }
.tv-hs-cal__d small { min-height: 11px; font-size: 10px; font-weight: 700; line-height: 1.1; color: var(--tv-muted); }
.tv-hs-cal__d:hover:not(:disabled) { border-color: var(--tv-primary); }
.tv-hs-cal__d:focus-visible { outline: 2px solid var(--tv-ink); outline-offset: 1px; }
.tv-hs-cal__d:disabled { cursor: not-allowed; background: var(--tv-surface); border-color: transparent; color: var(--tv-muted-soft); }
.tv-hs-cal__d.is-full { background: var(--tv-surface); color: var(--tv-muted-soft); text-decoration: line-through; }
.tv-hs-cal__d.is-full small { color: var(--tv-no); text-decoration: none; }
.tv-hs-cal__d.is-out:disabled { background: transparent; border: 1.5px dashed var(--tv-hairline); }
.tv-hs-cal__d.is-in { background: var(--tv-primary-tint); border-color: var(--tv-primary-tint); }
.tv-hs-cal__d.is-ci, .tv-hs-cal__d.is-co { background: var(--tv-primary); border-color: var(--tv-primary); color: var(--tv-ink); }
.tv-hs-cal__d.is-ci small, .tv-hs-cal__d.is-co small { color: var(--tv-ink); }
.tv-hs-cal__note { margin: 8px 0 0; font-size: var(--tv-fs-xs); color: var(--tv-muted); }

.tv-hs-opts { display: grid; gap: 8px; }
.tv-hs-opt { border: 1.5px solid var(--tv-hairline); border-radius: var(--tv-radius-sm); background: var(--tv-canvas); transition: border-color var(--tv-transition), background var(--tv-transition); }
.tv-hs-opt.is-on { border-color: var(--tv-primary); background: var(--tv-primary-tint); }
.tv-hs-opt.is-off { opacity: .6; }
.tv-hs-opt__row { display: flex; align-items: flex-start; gap: 10px; padding: 12px; margin: 0; cursor: pointer; color: var(--tv-ink); }
.tv-hs-opt.is-off .tv-hs-opt__row { cursor: not-allowed; }
.tv-hs-opt__row input { width: 20px; height: 20px; margin: 2px 0 0; flex: 0 0 auto; accent-color: var(--tv-primary-strong); cursor: inherit; }
.tv-hs-opt__main { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.tv-hs-opt__name { font-size: 15px; font-weight: 800; color: var(--tv-ink); }
.tv-hs-opt__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: var(--tv-fs-xs); font-weight: 600; color: var(--tv-muted); }
.tv-hs-opt__meta .tv-hs-ic { width: 14px; height: 14px; color: var(--tv-primary-hover); }
.tv-hs-opt__left { font-size: var(--tv-fs-xs); font-weight: 700; color: var(--tv-ok); }
.tv-hs-opt.is-off .tv-hs-opt__left { color: var(--tv-no); }
.tv-hs-opt__price { text-align: right; flex: 0 0 auto; }
.tv-hs-opt__price b { display: block; font-size: 16px; font-weight: 800; color: var(--tv-ink); }
.tv-hs-opt__price small { font-size: 11px; font-weight: 600; color: var(--tv-muted); }
.tv-hs-opt .tv-hs-xb { margin: 0 12px 12px; background: var(--tv-canvas); }

.tv-hs-qty { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; padding: 10px 12px; border: 1.5px solid var(--tv-hairline-soft); border-radius: var(--tv-radius-sm); }
.tv-hs-qty[hidden] { display: none; }
.tv-hs-qty__k { font-weight: 800; color: var(--tv-ink); }
.tv-hs-qty__k small { display: block; font-size: var(--tv-fs-xs); font-weight: 600; color: var(--tv-muted); }

.tv-hs-sum2 { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--tv-hairline-soft); }
.tv-hs-sum2[hidden] { display: none; }
.tv-hs-sum2 p { display: flex; justify-content: space-between; gap: 12px; margin: 0; }
.tv-hs-sum2__line { font-size: var(--tv-fs-sm); color: var(--tv-muted); }
.tv-hs-sum2__line b { font-weight: 700; color: var(--tv-ink); white-space: nowrap; }
.tv-hs-sum2__tot { margin-top: 6px !important; align-items: baseline; }
.tv-hs-sum2__tot span { font-weight: 800; color: var(--tv-ink); }
.tv-hs-sum2__tot b { font-size: 22px; font-weight: 800; letter-spacing: -0.3px; color: var(--tv-ink); }
.tv-hs-box .tv-hs-go { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 50px; margin-top: 14px; text-align: center; }
.tv-hs-box .tv-hs-go:disabled { background: var(--tv-surface); border-color: var(--tv-surface); color: var(--tv-muted); box-shadow: none; cursor: not-allowed; opacity: 1; }
.tv-hs-box .tv-hs-warn { margin-top: 12px; }

.tv-hs-mbar { display: none; }

@media (max-width: 991px) {
  .tv-hs-main { grid-template-columns: minmax(0, 1fr); grid-template-areas: "about" "book" "how"; gap: 24px; }
  .tv-hs-main__book { position: static; }
  .tv-hs-box { max-width: 640px; box-shadow: var(--tv-shadow-card); }
  .tv-hs--single.has-mbar { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
  .tv-hs-mbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px var(--hs-gutter) calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--tv-canvas); border-top: 1px solid var(--tv-hairline-soft); box-shadow: 0 -6px 20px rgba(0,0,0,.08); transform: translateY(110%); transition: transform 220ms ease; }
  .tv-hs-mbar.is-on { transform: none; }
  .tv-hs-mbar__p { margin: 0; min-width: 0; line-height: 1.25; }
  .tv-hs-mbar__p b { display: block; font-size: 18px; font-weight: 800; color: var(--tv-ink); }
  .tv-hs-mbar__p span { display: block; font-size: var(--tv-fs-xs); font-weight: 600; color: var(--tv-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tv-hs-mbar__go { flex: 0 0 auto; min-height: 46px; padding-left: 22px; padding-right: 22px; }
  body.tv-hs-mbar-on .tv-wa-fab { bottom: calc(86px + env(safe-area-inset-bottom, 0px)); transition: bottom 220ms ease; }
}
@media (max-width: 400px) {
  .tv-hs-box { padding: 16px 14px; }
  .tv-hs-cal__g { gap: 3px; }
  .tv-hs-cal__d { height: 42px; border-radius: 8px; }
  .tv-hs-dates__f b { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .tv-hs-mbar, .tv-hs-cal__d, .tv-hs-opt { transition: none; }
}

.tv-hs-main { grid-template-rows: auto 1fr; }
.tv-hs-cal__d.is-in { background: rgba(242, 167, 27,.2); border-color: rgba(242, 167, 27,.35); }
@media (max-width: 991px) { .tv-hs-main { grid-template-rows: none; } }
.tv-hs-opt__meta { column-gap: 12px; row-gap: 2px; }
.tv-hs-opt__meta > span { display: inline-flex; align-items: center; gap: 5px; }