/* Booking pages (home search, rooms, tours, review, thanks, terms). Shared components live in styles.css. */
.dl { display: none; }
.m-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.fs { border: 0; padding: 0; margin: 0; min-width: 0; }
.fs > legend { padding: 0; margin-bottom: 8px; }
.cap-s { font-size: 13px; font-weight: 600; color: var(--muted); letter-spacing: .02em; text-transform: uppercase; }
.lrow { display: flex; align-items: center; justify-content: space-between; height: 24px; } /* same height as a plain label row, so side-by-side fields line up */
.lrow .pill { height: 22px; border-radius: 11px; }

/* Hero */
.hero { position: relative; height: 250px; overflow: hidden; }
.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero .shade { position: absolute; inset: auto 0 0 0; padding: 64px 20px; background: linear-gradient(180deg, rgba(11, 27, 52, 0) 0%, rgba(11, 27, 52, .88) 55%); }
.hero h1 { margin: 0; font-size: 28px; line-height: 1.2; font-weight: 700; letter-spacing: -.015em; color: #fff; text-wrap: pretty; }
.hero p { margin: 6px 0 0; font-size: 16px; color: #E3EAF5; }

/* Search card */
.search { position: relative; margin: -44px 12px 0; background: #fff; border-radius: 18px; box-shadow: var(--shadow-card); }
.tabs { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--line); }
.tab { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 60px; padding: 0 6px; border: 0; background: none; color: var(--muted); font-size: 16px; font-weight: 600; line-height: 1.2; }
.tab[aria-selected="true"] { color: var(--blue); font-weight: 700; box-shadow: inset 0 -3px 0 var(--blue); }
.tab:focus-visible { outline-offset: -3px; }
.panes { display: grid; } /* both tab panels share one cell, so the card keeps the taller one's height: no jump on switching */
.panes > .panel { grid-area: 1 / 1; }
.panes > .panel[hidden] { display: flex !important; visibility: hidden; } /* beats the global [hidden] rule: kept in layout, invisible, not focusable */
.panel { padding: 18px 16px; display: flex; flex-direction: column; gap: 16px; }
.panel:focus-visible { outline-offset: -3px; }
.search .tile { flex-direction: row; min-height: 52px; border-radius: 10px; font-size: 16px; gap: 6px; }
.search .tile .i { font-size: 20px; color: inherit; }
.strip { display: none; }

/* Joined check-in / check-out box. The real <input type=date> is an invisible overlay. */
.dates { display: grid; grid-template-columns: 1fr 1fr; border: 1.5px solid var(--field); border-radius: var(--r); }
.half { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 2px; min-height: 68px; padding: 0 14px; min-width: 0; cursor: pointer; }
.half + .half { border-left: 1px solid var(--line); padding-left: 22px; }
.half:first-child { border-radius: 11px 0 0 11px; } .half:last-child { border-radius: 0 11px 11px 0; }
.half:focus-within { box-shadow: inset 0 0 0 2px var(--blue); }
.dv { font-size: 17px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dv .yr { display: none; }
.dti { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; }
.input.dt { position: relative; display: flex; align-items: center; gap: 12px; }
.input.dt .i { color: var(--muted); }
.input.dt .dv { flex: 1; font-weight: 400; }
.input.dt:focus-within { border: 2px solid var(--blue); box-shadow: 0 0 0 4px var(--blue-soft); }

/* Select with a leading icon */
.sel { position: relative; }
.sel > .i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.sel .select { padding-left: 48px; }

/* From / To box */
.route { position: relative; display: flex; flex-direction: column; border: 1.5px solid var(--field); border-radius: var(--r); background: #fff; }
.route .row { position: relative; display: block; min-height: 64px; cursor: text; }
.route .row:first-child { border-radius: 11px 11px 0 0; } .route .row:last-of-type { border-radius: 0 0 11px 11px; }
.route .row ~ .row { border-top: 1px solid var(--line); }
.route .row { scroll-margin-top: 112px; }
.route .row > .i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; } .route .row > .i.to { color: var(--blue); }
.route .row:focus-within { box-shadow: inset 0 0 0 2px var(--blue); }
.route .col { display: contents; }
.route .cap-s { position: absolute; left: 48px; top: 11px; pointer-events: none; }
.route input { display: block; width: 100%; height: 64px; padding: 29px 14px 9px 48px; border: 0; border-radius: inherit; background: transparent; font-size: 17px; font-weight: 700; }
.route input::placeholder { color: var(--faint); font-weight: 500; }
.route input:focus { outline: none; }
.route.swap input { padding-right: 72px; }
.swapb { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 24px; background: #fff; border: 1.5px solid var(--field); color: var(--blue); display: flex; align-items: center; justify-content: center; }
.field.bad .route, .field.bad .dates { border: 2px solid var(--red); box-shadow: 0 0 0 4px var(--red-soft); }
.field.bad .input.dt { border: 2px solid var(--red); }

/* Place suggestions under From / To (js/places.js) */
.pl-list { position: absolute; z-index: 12; min-width: min(280px, calc(100vw - 32px)); margin: 0; padding: 4px; list-style: none; background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-card); max-height: min(392px, 55vh); overflow-y: auto; }
.pl-opt { display: flex; flex-direction: column; justify-content: center; min-height: 48px; padding: 4px 12px; border-radius: 8px; cursor: pointer; }
.pl-opt b { font-size: 16px; font-weight: 700; line-height: 1.3; }
.pl-opt span { font-size: 14px; line-height: 1.3; color: var(--muted); }
.pl-opt mark { background: none; color: var(--blue); }
.pl-opt[aria-selected="true"] { background: var(--blue-soft); }
.pl-use b { font-weight: 600; }
.pl-wait { cursor: default; min-height: 40px; }
.pl-wait span { font-style: normal; }
.route:has(.pl-list:not([hidden])) .swapb { visibility: hidden; }
@media (hover: hover) and (pointer: fine) { .pl-opt:not([aria-selected="true"]):hover { background: var(--bg); } }

/* Trust points (mobile card; desktop strip inside the search card) */
.trust, .strip { list-style: none; margin: 0; }
.trust { margin: 16px 12px 0; padding: 6px 16px; background: #fff; border-radius: 16px; border: 1px solid var(--line); }
.trust li { display: flex; align-items: center; gap: 14px; min-height: 56px; font-size: 16px; font-weight: 600; }
.trust li + li { border-top: 1px solid var(--line-soft); }
.trust .i, .strip .i { color: var(--blue); font-size: 24px; }

/* What guests say */
.guests { padding: 32px 20px 0; }
.gh2 { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.avg { display: flex; align-items: center; gap: 8px; font-size: 16px; color: var(--text-2); }
.avg .stars { font-size: 17px; }
.all { display: flex; align-items: center; min-height: 48px; color: var(--blue); font-weight: 700; font-size: 16px; text-decoration: none; white-space: nowrap; }
.all .m { display: flex; align-items: center; gap: 2px; } .all .m .i { font-size: 20px; } .all .d { display: none; }
.rgrid { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.rcard { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.rcard:nth-child(3) { display: none; }
.rtop { display: flex; justify-content: space-between; align-items: center; }
.rtop .stars { font-size: 17px; }
.pin { display: flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 700; color: var(--muted); }
.pin .i { font-size: 16px; color: var(--blue); }
.rcard p { margin: 0; font-size: 16px; line-height: 1.5; color: var(--text); display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.rcard .meta { font-size: 14px; color: var(--muted); } .rcard .meta b { color: var(--ink); }

/* Photo gallery */
.gallery { padding: 28px 0 0; }
.gallery .h2 { padding: 0 20px; }
.strip-g, .dgrid { margin-top: 12px; display: flex; gap: 10px; overflow-x: auto; padding: 0 20px 4px; scroll-snap-type: x mandatory; scroll-padding: 0 20px; scrollbar-width: thin; overscroll-behavior-x: contain; }
.strip-g > *, .dgrid > * { scroll-snap-align: start; }
.gi { position: relative; flex: none; width: 150px; height: 150px; border-radius: 14px; overflow: hidden; display: block; }
.gi:not(.ph) { background: var(--line); }
.gi img, .gi video { width: 100%; height: 100%; object-fit: cover; }
.play { position: absolute; inset: 0; margin: auto; width: 48px; height: 48px; border-radius: 24px; background: rgba(15, 27, 45, .75); color: #fff; display: flex; align-items: center; justify-content: center; }
.play .i { font-size: 30px; }
.home { padding-bottom: 28px; }

/* Popular destinations + How it works */
.sec { padding: 32px 0 0; }
.sec > .h2 { padding: 0 20px; }
.dgrid { list-style: none; margin-bottom: 0; }
.dgrid li { flex: none; width: 164px; }
.dcard { display: flex; flex-direction: column; gap: 2px; text-decoration: none; border-radius: 14px; }
.dimg { display: block; aspect-ratio: 4 / 5; border-radius: 14px; overflow: hidden; margin-bottom: 8px; }
.dimg img { width: 100%; height: 100%; object-fit: cover; }
.dcard b { font-size: 16px; }
.dcard > span:last-child { font-size: 14px; line-height: 1.4; color: var(--muted); }
.gi.ph img { width: 100%; height: 100%; object-fit: cover; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Quiet, fast state changes (150–200 ms). styles.css switches all motion off for prefers-reduced-motion. */
:is(.home, .bk, .bk-sum, .bk-home) :is(.btn, .tile, .stepper button, .swapb, .seg label, .tab, .dcard, .check) { transition: transform 160ms var(--ease-out), background-color 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 180ms ease; }
:is(.home, .bk, .bk-sum, .bk-home) :is(.btn, .stepper button):active:not(:disabled) { transform: scale(.97); }
:is(.home, .bk) :is(.tile, .seg label, .check):active { transform: scale(.98); }
.swapb:active { transform: translateY(-50%) scale(.94); }
@media (hover: hover) and (pointer: fine) {
  :is(.home, .bk) .tile:not(:has(input:checked)):hover, :is(.home, .bk) .stepper button:not(:disabled):hover, .swapb:hover { border-color: var(--off); }
  .tab:not([aria-selected="true"]):hover { color: var(--text); }
  .dcard:hover b { color: var(--blue); }
  .dcard img { transition: transform 200ms var(--ease-out); }
  .dcard:hover img { transform: scale(1.03); }
}
.stepper output { transition: color 160ms ease; }
.alert { animation: bk-in 180ms var(--ease-out); }
.done .ring { animation: bk-pop 240ms var(--ease-out) both; }
.done .ring span { animation: bk-pop 240ms 60ms var(--ease-out) both; }
@keyframes bk-in { from { opacity: 0; transform: translateY(-4px); } }
@keyframes bk-pop { from { opacity: 0; transform: scale(.9); } }
:is(.home, .bk) ::selection { background: var(--blue-line); color: var(--ink); }
:is(.home, .bk) input { caret-color: var(--blue); }
:root { --ease-out: cubic-bezier(.23, 1, .32, 1); }

/* Forms */
.okw { position: relative; }
.okw .input { padding-right: 46px; }
.okw .ok { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); display: none; }
.field.good .okw .ok { display: block; }
.tile .st { font-size: 14px; letter-spacing: 1px; color: var(--muted); }
.tile:has(input:checked) .st { color: inherit; }
.tile.tr { min-height: 84px; font-size: 16px; gap: 6px; }
.tile.tr > .i { font-size: 28px; }
.tile .tick { position: absolute; top: 6px; right: 6px; font-size: 18px; display: none; }
.tile:has(input:checked) .tick { display: block; }
.tile.meal { flex-direction: row; justify-content: flex-start; gap: 10px; min-height: 56px; padding: 0 14px; font-size: 17px; }
.tile.meal:has(input:checked) { color: var(--ink); }
.vm { flex: none; width: 18px; height: 18px; border: 2px solid #188038; display: flex; align-items: center; justify-content: center; }
.vm::after { content: ''; width: 8px; height: 8px; border-radius: 4px; background: #188038; }
.vm.nv { border-color: #A1260D; }
.vm.nv::after { width: 0; height: 0; border-radius: 0; background: none; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid #A1260D; }
.stack > .stepper { min-height: 62px; }
.ss { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; padding: 8px 14px; border: 1.5px solid var(--field); border-radius: var(--r); }
.ss .col { display: flex; flex-direction: column; min-width: 0; }
.ss .nm { font-size: 17px; font-weight: 600; }
.you-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.link.quiet { color: var(--muted); font-weight: 600; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }
.sc { gap: 8px; padding: 12px 16px; }
.sc-row { display: flex; align-items: center; gap: 12px; }
.sc-row .t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sc-row b { font-size: 17px; overflow-wrap: anywhere; }
.sc-row .t span { font-size: 14px; color: var(--muted); }
.hint.moved { color: var(--blue-ink); }
.lead-in { margin: 2px 6px 0; font-size: 16px; line-height: 1.5; color: var(--muted); }
.opt { font-weight: 400; color: var(--muted); }
.dates:has(> .half:only-child) { grid-template-columns: 1fr; }
.dates > .half:only-child { border-radius: 11px; }
.field.bad .ss { border: 2px solid var(--red); box-shadow: 0 0 0 4px var(--red-soft); }
.field > .ss { min-height: 60px; }
.bk-sum { flex-wrap: wrap; row-gap: 8px; }
.sum-trust { flex: 1 0 100%; margin: 0; display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--green-ink); }
.sum-trust .i { font-size: 16px; }
.hours { margin: -4px 4px 0; display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); }
.hours .i { font-size: 18px; }
.gh h2 { margin: 0; font-size: 17px; font-weight: 700; }
.jump { gap: 4px; padding-bottom: 8px; }
.jump .cap { margin: 0 0 4px; }
.jump ol { list-style: none; margin: 0; padding: 0; }
.jump li + li { border-top: 1px solid var(--line-soft); }
.jump a { display: flex; align-items: center; gap: 10px; min-height: 44px; text-decoration: none; font-size: 16px; }
.jump .k { flex: none; min-width: 22px; color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.jump .t { flex: 1; }
.jump a .i { color: var(--off); font-size: 20px; }
.tsec .card-head { scroll-margin-top: 96px; }
.tsec .card-head:focus { outline: none; }
.credit { margin: 8px 6px 0; font-size: 13px; color: var(--muted); }
.credit a { color: inherit; }
.t-end { display: flex; flex-direction: column; gap: 10px; padding-top: 4px; }
.bk-sum { padding-left: max(16px, calc((100% - 616px) / 2)); padding-right: max(16px, calc((100% - 616px) / 2)); }

/* Review */
.rv { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.rv-head { display: flex; align-items: center; gap: 12px; padding: 16px; background: var(--navy); color: #fff; }
.rv-head .ic { flex: none; width: 40px; height: 40px; border-radius: 10px; background: rgba(255, 255, 255, .12); display: flex; align-items: center; justify-content: center; }
.rv-head .t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rv-head b { font-size: 17px; overflow-wrap: anywhere; }
.rv-head .t span { font-size: 14px; color: var(--navy-text); }
.rv-head a { display: flex; align-items: center; min-height: 48px; padding: 0 4px; color: #fff; font-weight: 700; font-size: 16px; }
.rows { margin: 0; padding: 4px 16px 8px; }
.rows > div { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line-soft); font-size: 16px; }
.rows dt { flex: 1; display: flex; align-items: center; gap: 12px; color: var(--muted); }
.rows dt .i { font-size: 20px; color: var(--muted); }
.rows dd { margin: 0; font-weight: 700; text-align: right; overflow-wrap: anywhere; }
.rows.g { padding: 0 16px 10px; }
.rows.g > div { border-bottom: 0; border-top: 1px solid var(--line-soft); }
.rows.g dt { flex: none; }
.rows.g dd { flex: 1; font-weight: 600; text-align: left; word-break: break-all; }
.gh { display: flex; justify-content: space-between; align-items: center; padding: 4px 16px 0; }
.gh .cap { margin: 0; }
.gh .link { font-size: 16px; }
.send { display: flex; flex-direction: column; gap: 10px; }
.send .btn.ghost .i { color: var(--muted); }
.send .btn:disabled .i { color: inherit; }
/* Confirm booking request: idle → Confirming… (spinner) → Confirmed (green, check draws in). Full width, so no jump. */
.cfm { min-height: 58px; }
.cfm-ic { display: none; width: 22px; height: 22px; align-items: center; justify-content: center; }
.cfm.is-busy .cfm-ic, .cfm.is-done .cfm-ic { display: inline-flex; }
.cfm .spin { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid rgba(255, 255, 255, .4); border-top-color: #fff; animation: bk-spin 700ms linear infinite; }
.cfm .ck { display: none; }
.cfm .ck path { fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.cfm.is-done .spin { display: none; }
.cfm.is-done .ck { display: block; }
.cfm.is-done .ck path { animation: bk-draw 300ms var(--ease-out) 60ms forwards; }
.cfm.is-busy, .cfm.is-done { cursor: default; }
.cfm.is-done { background: var(--green); box-shadow: var(--shadow-green); }
:is(.home, .bk) .cfm:active:not(:disabled) { transform: scale(.98); }
@keyframes bk-spin { to { transform: rotate(360deg); } }
@keyframes bk-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .cfm .ck path { stroke-dashoffset: 0; } } /* animations are off: show the check as drawn */
.lock { margin: 0; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 14px; color: var(--muted); }
.lock .i { font-size: 18px; }
.lock.off { visibility: hidden; } /* hidden but still taking its line, so nothing jumps when the box is ticked */
.alert { display: flex; gap: 10px; padding: 14px 16px; border-radius: 14px; background: var(--red-soft); border: 1px solid #F5C2B3; color: var(--red-text); font-size: 16px; line-height: 1.45; }
.alert p { margin: 0; font-weight: 600; }
.alert-acts { display: flex; flex-wrap: wrap; column-gap: 20px; }

/* Thank you */
.thanks { padding-top: 16px; }
.thanks .cap { margin: 0 0 -2px; }
.tl { list-style: none; margin: 0; padding: 0; }
.tl li { display: flex; gap: 14px; }
.tl .rail { display: flex; flex-direction: column; align-items: center; }
.tl .dot { flex: none; width: 26px; height: 26px; border-radius: 13px; border: 2px solid var(--field); display: flex; align-items: center; justify-content: center; }
.tl .dot.ok { background: var(--green); border-color: var(--green); color: #fff; }
.tl .dot.ok .i { font-size: 18px; }
.tl .dot.cur { border-color: var(--blue); background: var(--blue-soft); }
.tl .line { flex: 1; width: 2px; min-height: 16px; background: var(--line); }
.tl .tx { display: flex; flex-direction: column; padding-bottom: 16px; }
.tl li:last-child .tx { padding-bottom: 0; }
.tl b { font-size: 16px; text-wrap: balance; } .tl b.soft { color: var(--text-2); }
.tl .tx span { font-size: 14px; color: var(--muted); }
.note { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: #fff; border-radius: 16px; border: 1px solid var(--line); font-size: 16px; line-height: 1.45; color: var(--text-2); overflow-wrap: anywhere; }
.note .i { color: var(--muted); }
.wa-open { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 12px; margin-top: 6px; }
.wa-open p { font-size: 16px; color: var(--text-2); }
.bk-home { display: flex; flex-direction: column; gap: 10px; }
.bk-home { padding: 4px 12px 28px; max-width: var(--page); margin: 0 auto; }

/* Terms */
.terms { padding-top: 16px; }
.intro { margin: 4px 6px; font-size: 16px; line-height: 1.6; color: var(--text-2); }
.keys { background: var(--navy); color: #fff; border-radius: 16px; padding: 18px 16px; display: flex; flex-direction: column; gap: 12px; }
.keys .cap { margin: 0; color: #9FB0C8; }
.keys ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.keys li { display: flex; gap: 12px; font-size: 16px; line-height: 1.45; }
.keys .i { font-size: 20px; line-height: 1.2; color: #8DB6F5; }
.tsec { gap: 10px; }
.tsec .card-head { gap: 12px; letter-spacing: -.01em; }
.num { flex: none; width: 32px; height: 32px; border-radius: 8px; background: var(--blue-soft); color: var(--blue); font-weight: 700; font-size: 16px; display: flex; align-items: center; justify-content: center; }
.term { display: flex; flex-direction: column; gap: 6px; }
.term p { margin: 0; display: flex; gap: 10px; font-size: 16px; line-height: 1.6; color: var(--text); }
.term .k { flex: none; min-width: 18px; color: var(--muted); font-weight: 600; }
.term ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.term li { margin-left: 28px; display: flex; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--bg); font-size: 16px; line-height: 1.5; }
.term li::before { content: ''; flex: none; width: 6px; height: 6px; margin-top: 9px; border-radius: 3px; background: var(--blue); }

@media (min-width: 900px) {
  .dl { display: inline; }
  .m-sr { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; }
  .hero { height: 380px; background: repeating-linear-gradient(135deg, #9FB4CF 0 14px, #AFC2DA 14px 28px); }
  .hero .shade { inset: 0; padding: 0 24px 70px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; background: linear-gradient(180deg, rgba(11, 27, 52, .2), rgba(11, 27, 52, .8)); }
  .hero h1 { font-size: 46px; letter-spacing: -.02em; }
  .hero p { margin: 0; font-size: 17px; }
  .search { width: min(var(--wrap), calc(100% - 48px)); margin: -96px auto 0; box-shadow: 0 16px 40px rgba(15, 27, 45, .16); }
  .tabs { display: flex; gap: 4px; padding: 0 20px; }
  .tab { padding: 0 18px; font-size: 17px; }
  .panel { display: grid; gap: 14px; align-items: end; padding: 24px; }
  .panes > .panel[hidden] { display: grid !important; }
  .panel.room { grid-template-columns: 2fr 1fr 1fr auto; }
  .panel.tour { grid-template-columns: 1fr 1fr 1.2fr .9fr auto; }
  .panel > .btn { min-height: 64px; padding: 0 28px; width: auto; }
  .half { min-height: 64px; padding: 0 14px; }
  .half + .half { padding-left: 16px; }
  .sel .select { min-height: 64px; }
  .search .stepper { min-height: 64px; padding: 0 8px; }
  .search .stepper .name { display: none; }
  .search .stepper .ctl { flex: 1; justify-content: space-between; }
  .panel .label { line-height: 24px; }
  .search .tiles { gap: 6px; }
  .search .tile { flex-direction: column; min-height: 64px; font-size: 14px; gap: 0; }
  .search .tile .i { font-size: 22px; }
  .search .route { display: contents; }
  .search .route .row { border: 1.5px solid var(--field); border-radius: var(--r); min-height: 64px; }
  .strip { border-radius: 0 0 18px 18px; display: flex; gap: 32px; padding: 14px 24px; background: #F8FAFC; border-top: 1px solid var(--line-soft); font-size: 16px; font-weight: 600; color: var(--text-2); }
  .strip li { display: flex; align-items: center; gap: 8px; }
  .strip .i { font-size: 20px; }
  .trust { display: none; }
  .guests, .gallery { width: min(var(--wrap), calc(100% - 48px)); margin: 0 auto; }
  .guests { padding: 64px 0 0; }
  .guests .h2 { font-size: 28px; letter-spacing: -.015em; }
  .gh2 { align-items: flex-end; }
  .avg { margin-top: 6px; font-size: 17px; } .avg .stars { font-size: 19px; }
  .all { padding: 0 18px; border-radius: 10px; border: 1.5px solid var(--field); background: #fff; color: var(--ink); }
  .all .m { display: none; } .all .d { display: inline; }
  .rgrid { margin-top: 24px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .rcard { padding: 22px; gap: 10px; }
  .rcard:nth-child(3) { display: flex; }
  .rtop .stars { font-size: 17px; }
  .rcard p { font-size: 17px; line-height: 1.55; }
  .rcard .meta { font-size: 14px; }
  .gallery { padding-top: 40px; }
  .gallery .h2 { padding: 0; font-size: 28px; letter-spacing: -.015em; }
  .strip-g { margin-top: 14px; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 14px; padding: 0; overflow: visible; }
  .sec { width: min(var(--wrap), calc(100% - 48px)); margin: 0 auto; padding-top: 64px; }
  .sec > .h2 { padding: 0; font-size: 28px; letter-spacing: -.015em; }
  .dgrid { margin-top: 20px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px 20px; padding: 0; overflow: visible; }
  .dgrid li { width: auto; }
  .dcard b { font-size: 17px; } .dcard > span:last-child { font-size: 14px; }
        .gi { width: auto; height: 180px; }
  .play { width: 56px; height: 56px; border-radius: 28px; } .play .i { font-size: 34px; }
  .home { padding-bottom: 56px; }
}
@media (min-width: 1200px) { .dv .yr { display: inline; } .half { padding: 0 16px; } .half + .half { padding-left: 24px; } }