/* The resort booking page — resort.mybills.co.in/<name> and /q/<token>.
   Built on the guest design system's tokens (`/mb.css`, `/a11y.css`); this
   file is the page's own layout. It replaces ~450 lines of inline rules that
   were a legacy token block with aliases painted over it.

   Two rules this file keeps:
   - one column of reading width on a phone, never a horizontal scroll;
   - the next action is always on screen — a bar pinned to the bottom. */

:root {
  --ok-ink: #146B48; --ok-bg: #E3F2EA; --ok-line: #A9D5BE;
  --warn-ink: #8A4B00; --warn-bg: #FFF4E0; --warn-line: #F0C98A;
  --page: 1080px; --col: 640px;
  --bar-h: 76px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--mb-bg); color: var(--mb-text);
  font-family: var(--mb-font); font-size: var(--mb-fs-body); line-height: 1.5;
}
body.lb-open { overflow: hidden; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
.muted { color: var(--mb-text-muted); }
.sm { font-size: var(--mb-fs-sm); }
.num { font-variant-numeric: tabular-nums; }
.h1 { font: 800 28px/1.15 var(--mb-font-display); letter-spacing: -.02em; margin: 0; }
.h2 { font: 800 21px/1.25 var(--mb-font-display); letter-spacing: -.015em; margin: 0 0 12px; }
.h3 { font: 700 17px/1.3 var(--mb-font-display); margin: 0; }
.lede { color: var(--mb-text-muted); margin: 0 0 4px; }
.linkbtn {
  background: none; border: 0; padding: 0; color: var(--mb-accent-ink);
  font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.card {
  /* Named so anything that full-bleeds out of a card reads the same number.
     The review photo hardcoded `calc(100% + 36px)` and `-18px`, which is the
     kind of duplication that survives a padding change and then looks like a
     rendering bug. */
  --card-pad: 18px;
  background: var(--mb-surface); border: 1px solid var(--mb-border);
  border-radius: var(--mb-r-lg); padding: var(--card-pad); box-shadow: var(--mb-e1);
}
.tag {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px;
  border-radius: var(--mb-r-pill); font-size: 12px; font-weight: 700; white-space: nowrap;
}
.tag--ok { background: var(--ok-bg); color: var(--ok-ink); }
.note {
  display: flex; gap: 10px; align-items: flex-start; margin: 0;
  padding: 12px 14px; border-radius: var(--mb-r-md);
  background: var(--mb-surface-2); border: 1px solid var(--mb-border);
  font-size: var(--mb-fs-sm); color: var(--mb-text-muted);
}
.note svg { flex: none; margin-top: 2px; }
.note--ok { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok-ink); font-weight: 600; }
.note--warn { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn-ink); font-weight: 600; }
.alert {
  padding: 12px 14px; border-radius: var(--mb-r-md); background: var(--warn-bg);
  border: 1px solid var(--warn-line); color: var(--warn-ink); font-weight: 600;
}
.chipcount {
  position: absolute; right: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px; border-radius: var(--mb-r-pill); background: rgba(10, 17, 40, .72);
  color: #fff; font-size: 12px; font-weight: 700;
}

/* ================================================================= HOME */
.home { padding-bottom: calc(var(--bar-h) + 24px); }

/* The gallery: a swipe strip on a phone — one photograph at a time, full
   width, which is what a phone does well — and a mosaic on a desktop. */
.hero { position: relative; background: var(--mb-surface-2); }
.hero__track {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; height: min(72vw, 440px);
}
.hero__track::-webkit-scrollbar { display: none; }
.hero__shot {
  flex: 0 0 100%; scroll-snap-align: start; border: 0; padding: 0; margin: 0;
  background: var(--mb-surface-2); cursor: zoom-in;
}
.hero__shot img { width: 100%; height: 100%; object-fit: cover; }
.hero__count, .hero__all {
  position: absolute; bottom: 12px; padding: 6px 11px; border-radius: var(--mb-r-pill);
  background: rgba(10, 17, 40, .72); color: #fff; font-size: 13px; font-weight: 700; border: 0;
}
.hero__count { right: 12px; }
.hero__all { left: 12px; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.hero--none {
  height: 180px; display: grid; place-items: center; font: 800 22px var(--mb-font-display);
  color: var(--mb-text-muted);
}

.home__cols { max-width: var(--page); margin: 0 auto; padding: 0 16px; }
.home__side { display: none; }

.intro { padding: 20px 0 6px; }
.intro__name { font: 800 30px/1.12 var(--mb-font-display); letter-spacing: -.025em; margin: 0; text-wrap: balance; }
.intro__where { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; color: var(--mb-text-muted); font-weight: 600; }
.intro__tag { margin: 12px 0 0; font-size: 16px; color: var(--mb-text); text-wrap: pretty; }
.facts { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 16px; }
.fact { display: inline-flex; align-items: center; gap: 7px; font-size: var(--mb-fs-sm); font-weight: 600; color: var(--mb-text); }
.fact svg { color: var(--mb-accent-ink); flex: none; }

.sec { padding: 26px 0 0; border-top: 1px solid var(--mb-border); margin-top: 26px; }
.intro + .sec { margin-top: 20px; }

.stays { display: grid; gap: 16px; }
.stay {
  display: grid; grid-template-columns: 1fr; border: 1px solid var(--mb-border);
  border-radius: var(--mb-r-lg); overflow: hidden; background: var(--mb-surface); box-shadow: var(--mb-e1);
}
.stay__img { position: relative; border: 0; padding: 0; background: var(--mb-surface-2); aspect-ratio: 16 / 10; cursor: zoom-in; }
.stay__img img { width: 100%; height: 100%; object-fit: cover; }
.stay__img--none { display: grid; place-items: center; color: var(--mb-text-subtle); cursor: default; }
.stay__b { padding: 14px 16px 16px; }
.stay__n { font: 800 18px/1.25 var(--mb-font-display); margin: 0; }
.stay__f { margin: 4px 0 0; font-size: var(--mb-fs-sm); color: var(--mb-text-muted); }
.stay__d { margin: 8px 0 0; font-size: var(--mb-fs-sm); color: var(--mb-text); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.stay__p { margin: 10px 0 0; }
.stay__p b, .homebar__p b, .side__p b { font: 800 19px var(--mb-font-display); }

.about p { margin: 0; white-space: pre-wrap; }
.about.is-clamped { max-height: 7.5em; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent); mask-image: linear-gradient(180deg, #000 60%, transparent); }
.about + .linkbtn { margin-top: 8px; }

.amen { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.amen li { display: flex; align-items: center; gap: 10px; font-size: var(--mb-fs-sm); }
.amen svg { flex: none; color: var(--mb-text-muted); }
.more { margin-top: 14px; }
.more summary {
  cursor: pointer; font-weight: 700; color: var(--mb-accent-ink); list-style: none;
  text-decoration: underline; text-underline-offset: 3px;
}
.more summary::-webkit-details-marker { display: none; }
.more[open] summary { margin-bottom: 12px; }

.near { list-style: none; margin: 0; padding: 0; }
.near li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--mb-border); }
.near li:last-child { border-bottom: 0; }

.facts2 { margin: 0; display: grid; gap: 0; }
.facts2 > div { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--mb-border); }
.facts2 > div:last-child { border-bottom: 0; }
.facts2 dt { color: var(--mb-text-muted); font-size: var(--mb-fs-sm); }
.facts2 dd { margin: 0; font-weight: 600; }
.terms { font-size: var(--mb-fs-sm); color: var(--mb-text); }
.terms h2, .terms h3 { font-size: 15px; margin: 12px 0 4px; }
.terms img { max-width: 100%; height: auto; border-radius: var(--mb-r-sm); }
.powered { margin: 36px 0 0; text-align: center; font-size: 12px; color: var(--mb-text-muted); }

/* The action, pinned to the bottom on a phone. */
.homebar, .ff {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  background: var(--mb-surface); border-top: 1px solid var(--mb-border);
  box-shadow: var(--mb-e-up); padding-bottom: env(safe-area-inset-bottom);
}
.homebar__in { max-width: var(--page); margin: 0 auto; padding: 12px 16px; display: flex; align-items: center; gap: 12px; justify-content: space-between; }
.homebar__in .mb-btn { flex: none; }

@media (min-width: 900px) {
  .hero { max-width: var(--page); margin: 20px auto 0; border-radius: var(--mb-r-xl); overflow: hidden; }
  /* A mosaic: the first photograph large, four beside it. */
  .hero__track {
    display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr;
    gap: 6px; height: 440px; overflow: hidden;
  }
  .hero__shot { min-height: 0; }
  .hero__shot:first-child { grid-row: span 2; }
  .hero__shot:nth-child(n+6) { display: none; }
  .hero__count { display: none; }
  .home__cols { display: grid; grid-template-columns: 1fr 340px; gap: 48px; }
  .home__side { display: block; }
  .side {
    position: sticky; top: 24px; margin-top: 24px; padding: 22px;
    border: 1px solid var(--mb-border); border-radius: var(--mb-r-xl);
    background: var(--mb-surface); box-shadow: var(--mb-e2); display: grid; gap: 12px;
  }
  .side p { margin: 0; }
  .side__pol { display: flex; gap: 8px; font-size: var(--mb-fs-sm); color: var(--ok-ink); font-weight: 600; }
  .side__pol svg { flex: none; margin-top: 3px; }
  .homebar { display: none; }
  .home { padding-bottom: 40px; }
  .stays { grid-template-columns: 1fr 1fr; }
  .intro__name { font-size: 38px; }
}

/* ================================================================= FLOW */
/* Every step shares one frame: a header that says where you are, the step,
   and a footer with the running total and the one next action. */
.fh { position: sticky; top: 0; z-index: 20; background: var(--mb-surface); border-bottom: 1px solid var(--mb-border); }
.fh__in { max-width: var(--col); margin: 0 auto; display: flex; align-items: center; gap: 10px; padding: 10px 12px; min-height: 60px; }
.fh__back {
  width: 44px; height: 44px; flex: none; display: grid; place-items: center;
  border: 0; border-radius: var(--mb-r-pill); background: transparent; cursor: pointer;
}
.fh__back:hover { background: var(--mb-surface-2); }
.fh__name { font-size: 12px; font-weight: 700; color: var(--mb-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fh__step { font: 800 17px/1.25 var(--mb-font-display); }
.fh__t { min-width: 0; }
.fh__bar { height: 3px; background: var(--mb-surface-3); }
.fh__bar span { display: block; height: 100%; background: var(--mb-accent); transition: width var(--mb-dur) var(--mb-ease); }

.flow {
  max-width: var(--col); margin: 0 auto; padding: 16px 16px calc(var(--bar-h) + 56px);
  display: flex; flex-direction: column; gap: 14px;
}
.ff__in { max-width: var(--col); margin: 0 auto; padding: 10px 16px 12px; display: flex; align-items: center; gap: 14px; }
.ff__sum { flex: 1 1 auto; min-width: 0; }
.ff__top { font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ff__top b { font: 800 19px var(--mb-font-display); }
.ff__bot { font-size: 12px; color: var(--mb-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ff__go { flex: 0 0 auto; display: flex; flex-direction: column; align-items: stretch; max-width: 60%; }
.ff__go .mb-btn { white-space: nowrap; }
/* A press that did nothing says why, under the button — never a dead button. */
.ff__why { font-size: 12px; font-weight: 600; color: var(--warn-ink); margin-top: 5px; text-align: right; }
.ff__why:empty { display: none; }

/* The live capacity gauge, on the rooms step only.
   It sits INSIDE the pinned footer, above the money row, because that is the
   surface on screen while somebody scrolls the cards — the same count above
   the list was invisible at the exact moment a room was being added. Full
   bleed, so the tint reads as a state of the step rather than as a chip. */
.cap {
  display: flex; align-items: center; gap: 10px;
  max-width: var(--col); margin: 0 auto;
  padding: 7px 16px;
  border-bottom: 1px solid var(--mb-border);
}
.cap__i { flex: none; display: flex; }
.cap__t { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 1px 8px; }
.cap__l { font-size: 13px; line-height: 17px; font-weight: 700; }
.cap__s { font-size: 12px; line-height: 16px; color: var(--mb-text-muted); }
/* Narrow and fixed: this is a glance, not a chart, and the words beside it
   carry the actual figures. */
.cap__bar {
  flex: none; width: 64px; height: 6px; border-radius: 3px;
  background: var(--mb-surface-3); overflow: hidden;
}
.cap__bar > span {
  display: block; height: 100%; border-radius: 3px;
  background: var(--mb-text-muted); transition: width .18s ease;
}
.cap--short { background: var(--warn-bg); border-bottom-color: var(--warn-line); color: var(--warn-ink); }
.cap--short .cap__s { color: var(--warn-ink); }
.cap--short .cap__bar > span { background: var(--warn-ink); }
.cap--ok { background: var(--ok-bg); border-bottom-color: var(--ok-line); color: var(--ok-ink); }
.cap--ok .cap__s { color: var(--ok-ink); }
.cap--ok .cap__bar > span { background: var(--ok-ink); }
@media (prefers-reduced-motion: reduce) { .cap__bar > span { transition: none; } }
.mb-btn.is-blocked { opacity: 1; filter: saturate(.55); }
.is-shake { animation: shake .32s var(--mb-ease); }
@keyframes shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@media (prefers-reduced-motion: reduce) { .is-shake { animation: none; } }

/* When and who */
.who { display: grid; gap: 4px; }
.who__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--mb-border); }
.who__row:first-of-type { border-top: 0; }
.who__row > div:first-child { display: flex; flex-direction: column; }
.when { padding: 4px 0 0; }
.calwrap { background: var(--mb-surface); border: 1px solid var(--mb-border); border-radius: var(--mb-r-lg); padding: 0 10px 14px; }
.caldow {
  position: sticky; top: 63px; z-index: 5; background: var(--mb-surface);
  padding: 10px 0 4px; border-bottom: 1px solid var(--mb-border); margin-bottom: 4px;
}
.calwrap .mb-calmonth { padding-top: 10px; }

/* Rooms */
.pill-sum {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 14px; border-radius: var(--mb-r-md); background: var(--mb-surface-2);
  font-size: var(--mb-fs-sm); font-weight: 700;
}
.pill-sum > span { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.loading { color: var(--mb-text-muted); }
.rooms { display: grid; gap: 16px; }
.room { border: 1px solid var(--mb-border); border-radius: var(--mb-r-lg); background: var(--mb-surface); overflow: hidden; box-shadow: var(--mb-e1); }
.room__img { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; padding: 0; background: var(--mb-surface-2); cursor: zoom-in; }
.room__img img { width: 100%; height: 100%; object-fit: cover; }
.room__b { padding: 14px 16px 16px; }
.room__h { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.room__n { font: 800 19px/1.25 var(--mb-font-display); margin: 0; }
.room__f { margin: 4px 0 0; font-size: var(--mb-fs-sm); color: var(--mb-text-muted); }
.room__inc { margin: 8px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: var(--mb-fs-sm); color: var(--ok-ink); font-weight: 600; }
.room__inc:empty { display: none; }
.room__inc .left { color: var(--warn-ink); }
.room__sold { margin: 10px 0 0; color: var(--mb-text-muted); font-size: var(--mb-fs-sm); }
.room.is-sold { opacity: .72; }
.room.is-sold .room__img { filter: grayscale(.7); }
.opts { margin-top: 12px; display: grid; gap: 8px; }
.opt {
  /* A fourth area for the ceiling note, which only appears at the maximum. */
  display: grid; grid-template-columns: 1fr auto;
  grid-template-areas: "l r" "c c" "n n"; gap: 10px 12px;
  padding: 12px; border: 1px solid var(--mb-border-strong); border-radius: var(--mb-r-md);
}
.opt.is-on { border-color: var(--mb-accent); box-shadow: 0 0 0 1px var(--mb-accent); background: var(--mb-accent-soft); }
.opt__l { grid-area: l; display: flex; flex-direction: column; }
.opt__r { grid-area: r; display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.opt__p { font: 800 18px var(--mb-font-display); }
.opt__c { grid-area: c; display: flex; justify-content: flex-end; }
/* Spoken only when somebody reaches the limit, so it sits under the stepper
   rather than taking a line the rest of the time. */
.opt__note { grid-area: n; margin-top: -4px; }
.alt {
  width: 100%; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 10px;
  text-align: left; padding: 12px 14px; margin-top: 8px; border: 1px solid var(--mb-border-strong);
  border-radius: var(--mb-r-md); background: var(--mb-surface); cursor: pointer;
}
.alt span { grid-column: 1; }
.alt svg { grid-row: 1 / span 2; grid-column: 2; }

/* Food */
.meal { display: grid; gap: 6px; }
.meal__h { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.meal .sm { margin: 0; }
.choices { display: grid; gap: 8px; margin-top: 8px; }
.choice {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; min-height: 56px;
  border: 1px solid var(--mb-border-strong); border-radius: var(--mb-r-md); cursor: pointer;
}
.choice input { width: 20px; height: 20px; accent-color: var(--mb-accent); flex: none; margin: 0; }
.choice__t { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.choice__p { white-space: nowrap; }
.choice.is-on { border-color: var(--mb-accent); box-shadow: 0 0 0 1px var(--mb-accent); background: var(--mb-accent-soft); }

/* Details */
.form { display: grid; gap: 14px; }
.opt-l { font: 600 12px var(--mb-font); color: var(--mb-text-muted); margin-left: 6px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mb-inputwrap:has(select) { position: relative; }
.mb-inputwrap:has(select) > svg { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.mb-select { appearance: none; -webkit-appearance: none; width: 100%; background: transparent; border: 0; font: inherit; color: inherit; padding-right: 32px; min-height: 44px; }

/* Review */
.rv { display: grid; gap: 14px; }
/* One card per unit type booked, scrolling sideways. Full-bleeds off
   `--card-pad`, and its inline padding puts the first card on the same left
   edge as the text beneath, so the row reads as part of the card rather than
   a strip bolted on top. */
.rvgal {
  display: flex; gap: 10px; overflow-x: auto; overscroll-behavior-x: contain;
  /* `proximity` snapping on content that overflowed by only 8px left the
     strip resting at scrollLeft 8 on load, so the first card sat 8px left of
     the text beneath it and read as a misalignment rather than a scroller.
     The cards are wide enough now that the next one clearly peeks. */
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
  /* Snapping aligns a card to the CONTAINER's edge, which ignores the padding
     that puts the first card in line with the text beneath — so the strip
     rested at scrollLeft 18 and the first card sat a padding's width left of
     everything else. `scroll-padding` tells snapping where the start really
     is. */
  scroll-padding-left: var(--card-pad);
  margin: calc(var(--card-pad) * -1) calc(var(--card-pad) * -1) 0;
  padding: var(--card-pad) var(--card-pad) 2px;
  scrollbar-width: none;
}
.rvgal::-webkit-scrollbar { display: none; }
.rvgal__c {
  flex: 0 0 auto; width: min(72%, 250px); scroll-snap-align: start;
  position: relative; display: block; overflow: hidden;
  padding: 0; border: 0; background: var(--mb-surface-2); cursor: pointer;
  font: inherit; color: inherit; text-align: left;
  /* The guest system's own card radius, not a smaller one — these sit inside
     a 22px card and a tighter corner reads as a different family. */
  border-radius: var(--mb-r-lg);
  box-shadow: var(--mb-e1);
  transition: transform 160ms ease, box-shadow 160ms ease;
}
/* One type booked is not a gallery — let it fill rather than leaving a gap
   that looks like a card failed to load. */
.rvgal__c:only-child { width: 100%; }
.rvgal__c[disabled] { cursor: default; }
.rvgal__c:not([disabled]):hover { transform: translateY(-2px); box-shadow: var(--mb-e2); }
.rvgal__c:not([disabled]):active { transform: translateY(0); }
/* Explicit width beats the `img { max-width: 100% }` at the top of this file,
   which is what silently clamped the old full-bleed photo. */
.rvgal__c img, .rvgal__ph {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block;
}
.rvgal__ph {
  display: flex; align-items: center; justify-content: center;
  background: var(--mb-surface-3); color: var(--mb-text-muted);
}
/* The caption sits ON the photograph, under a scrim from the system's own
   token, which is how the gallery hero and the offer media are captioned.
   A tall-ish crop leaves room for it without covering the room itself. */
.rvgal__cap {
  position: absolute; inset: auto 0 0 0; display: flex; flex-direction: column; gap: 1px;
  padding: 30px 12px 12px;
  /* The scrim has to be DENSE for the whole height the glyphs occupy, not just
     at the very bottom. The first version faded to .45 partway up the text and
     measured **3.48:1** against a white-walled interior — below the 4.5 floor,
     and the same failure this file records for `.mb-gal__all` over a sunlit
     pool. A photograph has no computable background, so this was measured off
     the rendered pixels with the glyphs hidden. */
  background: linear-gradient(to top,
    rgba(6, 10, 24, .90) 0%, rgba(6, 10, 24, .86) 58%,
    rgba(6, 10, 24, .48) 80%, transparent 100%);
  color: #fff;
}
.rvgal__nm {
  font: 800 15px/19px var(--mb-font-display); letter-spacing: -.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rvgal__sub { font-size: 12px; line-height: 16px; color: rgba(255, 255, 255, .88); }
.rvgal__n {
  position: absolute; right: 9px; top: 9px; display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 8px; border-radius: var(--mb-r-pill); font: 700 11px var(--mb-font);
  background: rgba(6, 10, 24, .58); color: #fff;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.rvgal__c:focus-visible { outline: 2px solid var(--mb-accent); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .rvgal__c { transition: none; } }
.rv__dates { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rv__dates > div { display: flex; flex-direction: column; padding: 10px 12px; border-radius: var(--mb-r-md); background: var(--mb-surface-2); }
.rv__dates b { font: 800 17px var(--mb-font-display); }
.rv__who { margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-weight: 600; }
.rowh { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.lines { display: grid; }
.line { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--mb-border); }
.line span { display: flex; flex-direction: column; min-width: 0; }
.line small { font-size: 12px; color: var(--mb-text-muted); }
.line b { white-space: nowrap; }
.line--total { border-bottom: 0; font-size: 17px; }
.line--total b { font: 800 20px var(--mb-font-display); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.split > div { display: flex; flex-direction: column; padding: 12px; border-radius: var(--mb-r-md); background: var(--mb-surface-2); }
.split > div:first-child { background: var(--mb-accent-soft); }
.split b { font: 800 19px var(--mb-font-display); }
.pol { display: flex; gap: 8px; margin: 8px 0 0; }
.pol svg { flex: none; margin-top: 3px; color: var(--ok-ink); }
.kv { margin: 0; line-height: 1.7; }

/* Pay */
.timer {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--mb-r-md);
  background: var(--warn-bg); border: 1px solid var(--warn-line); color: var(--warn-ink); font-weight: 600;
}
.timer b { font-variant-numeric: tabular-nums; }
.pay { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.pay__amt { font: 800 40px/1.1 var(--mb-font-display); letter-spacing: -.02em; }
.upi { display: flex; flex-direction: column; gap: 2px; padding: 14px; margin: 10px 0 12px; border-radius: var(--mb-r-md); background: var(--mb-surface-2); border: 1px solid var(--mb-border); }
.upi b { font: 800 19px var(--mb-font-display); word-break: break-all; }
.card > .sm.muted:last-child { margin: 10px 0 0; }

/* Done */
.solo { max-width: 520px; margin: 0 auto; padding: 32px 16px 40px; display: flex; flex-direction: column; gap: 14px; }
.done { text-align: center; }
.done .lines, .done .card { text-align: left; }
.done__ic { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 4px; background: var(--ok-bg); color: var(--ok-ink); }
.done__ref { display: flex; flex-direction: column; align-items: center; text-align: center !important; }
.done__ref b { font: 800 30px var(--mb-font-display); letter-spacing: .02em; }

/* Lightbox */
.lb { position: fixed; inset: 0; z-index: 50; background: rgba(6, 10, 24, .96); display: flex; flex-direction: column; }
.lb__stage { flex: 1; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.lb__stage::-webkit-scrollbar { display: none; }
.lb__stage img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: contain; scroll-snap-align: center; }
.lb__cap { color: #fff; text-align: center; padding: 12px 16px calc(16px + env(safe-area-inset-bottom)); font-size: 14px; }
.lb__x, .lb__nav {
  position: absolute; z-index: 2; width: 48px; height: 48px; border-radius: 50%; border: 0;
  background: rgba(255, 255, 255, .14); color: #fff; display: grid; place-items: center; cursor: pointer;
}
.lb__x { top: 12px; right: 12px; }
.lb__nav { top: 50%; transform: translateY(-50%); }
.lb__prev { left: 12px; } .lb__next { right: 12px; }
.lb__nav[hidden] { display: none; }

/* Wider than a phone: the room photograph sits beside its rows, so a card is
   one glance rather than a screen of picture before the price. */
@media (min-width: 700px) {
  .room { display: grid; grid-template-columns: 240px 1fr; }
  .room__img { aspect-ratio: auto; height: 100%; min-height: 200px; }
  .flow { padding-top: 24px; }
}


/* A hold that turned out to be a booking already. It sits at the very top of
   the page it interrupts, so it takes the accent wash rather than a warning
   tone — this is good news the guest came back for, not a fault. */
.resumed { border-color: var(--mb-accent); background: var(--mb-accent-soft); }
.resumed .h3 { color: var(--mb-accent-ink); }