/* RG — Hero booking bar
   ------------------------------------------------------------------------
   ONE component, identical on all four property pages (the group parent and
   the three child hotels). Fields, in DOM order:

     Our Hotels · Check In · Check Out · Rooms & Guests · Promo Code
     Why Book Direct? · From-rate · Book Now · Manage Booking

   That DOM order IS the mobile order — the stacked phone panel reads exactly
   top to bottom. Desktop then lifts the five fields and the CTA onto a single
   line and pins the row of links underneath, purely with grid placement.

   The hotel <select> is the single source of truth for where Book Now goes:
   each option's value is that property's booking-engine URL, and site.js
   bookingForm() appends the dates, guests and promo code to it. Every page
   lists all three hotels with its own pre-selected, so a guest can switch
   property without leaving the page.

   Laid out mobile-first here, unlike the rest of the sheet: the phone panel
   is the base and the two min-width blocks below build up to the one-liner. */

/* Base = the stacked phone panel: in normal flow under the hero, full width,
   near-opaque so the fields read against whatever the hero video is doing. */
.rg-bookbar{ position:static; width:100%; margin:0; padding:20px;
  background:rgba(26,23,20,0.92);
  border:1px solid rgba(201,163,106,0.30); border-left:0; border-right:0;
  display:grid; grid-template-columns:1fr; column-gap:clamp(1rem,2vw,1.8rem); row-gap:1.05rem;
  align-items:end; scroll-margin-top:calc(var(--rg-nav-h, 88px) + 1rem); }

/* ---- Tablet: pinned into the hero, fields two-up ---------------------- */
@media (min-width:821px){
  /* bottom:20px lifts the panel clear of the hero's bottom edge, so the video
     shows for 20px beneath it rather than the bar sitting flush. */
  .rg-bookbar{ position:absolute; left:50%; bottom:20px; z-index:3; transform:translateX(-50%);
    width:min(1180px, calc(100% - 2 * clamp(1rem,4vw,3rem)));
    background:rgba(26,23,20,0.44); -webkit-backdrop-filter:blur(12px) saturate(130%);
    backdrop-filter:blur(12px) saturate(130%);
    border:1px solid rgba(201,163,106,0.30);
    grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:0.9rem; }
  /* every position is explicit — the DOM order is the phone order, so the
     links would otherwise auto-flow into the wrong rows here */
  .rg-bookfield--hotel{ grid-column:1 / -1; grid-row:1; }
  .rg-bookfield--in{     grid-column:1; grid-row:2; }
  .rg-bookfield--out{    grid-column:2; grid-row:2; }
  .rg-bookfield--guests{ grid-column:1; grid-row:3; }
  .rg-bookfield--promo{  grid-column:2; grid-row:3; }
  .rg-bookrate{          grid-column:1 / -1; grid-row:4; justify-self:center; }
  .rg-bookbar__cta{      grid-column:1 / -1; grid-row:5; }
  /* .rg-bookwhy, not the link itself: the trigger is wrapped so its panel can
     be positioned against it, which makes the wrapper the grid item. */
  .rg-bookwhy{            grid-column:1; grid-row:6; justify-self:start; }
  .rg-booklink--manage{  grid-column:2; grid-row:6; justify-self:end; }
  .rg-booknote{          grid-column:1 / -1; grid-row:7; }
}

/* ---- Desktop: the whole form on one line ------------------------------ */
@media (min-width:1181px){
  /* Hotel carries the longest text ("RG Royal Hotel & Convention,
     Mahalakshmi Layout"), so it gets the widest track; Promo the narrowest. */
  .rg-bookbar{ grid-template-columns:minmax(0,1.75fr) minmax(0,1fr) minmax(0,1fr)
      minmax(0,1.1fr) minmax(0,0.85fr) auto;
    column-gap:clamp(0.9rem,1.8vw,1.8rem); row-gap:0.75rem;
    /* Row 1 is floored at 76px so the from-rate and the Book Now button, which
       share the last cell, do not touch. A label plus a 44px field only needs
       64px, and two items in one cell size independently — neither pushes the
       other — so the clearance has to come from the row, not from a margin. */
    grid-template-rows:minmax(76px, auto) auto auto; }
  .rg-bookfield--hotel{  grid-column:1; grid-row:1; }
  .rg-bookfield--in{     grid-column:2; grid-row:1; }
  .rg-bookfield--out{    grid-column:3; grid-row:1; }
  .rg-bookfield--guests{ grid-column:4; grid-row:1; }
  .rg-bookfield--promo{  grid-column:5; grid-row:1; }
  .rg-bookbar__cta{      grid-column:6; grid-row:1; }
  .rg-bookwhy{            grid-column:1; grid-row:2; justify-self:start; }
  /* The from-rate shares the CTA's cell rather than sitting on the links row:
     it sells the button, so it belongs directly above it. Two items in one
     cell, one pinned to the top of the row and one to the bottom — the row is
     as tall as a label-plus-field, which is exactly the space they need. */
  /* start, not center: the price reads as a label on the button, so its left
     edge lines up with the button's left edge whatever the price is. Centring
     made it drift as the number changed width between properties. */
  .rg-bookrate{          grid-column:6; grid-row:1; align-self:start; justify-self:start; }
  .rg-bookbar__cta{      grid-column:6; grid-row:1; align-self:end; }
  .rg-booklink--manage{  grid-column:6; grid-row:2; justify-self:center; }
  .rg-booknote{          grid-column:1 / -1; grid-row:3; }
}

/* "From 10,999 INR/Night". site.js fetches this from the engine's own
   /content/<propertyId>/data, the same endpoint the continue-booking nudge
   reads, and re-fetches when the guest switches hotel. It stays hidden unless
   a real price comes back, so no invented number can reach a guest. */
.rg-bookrate{ margin:0; font-family:var(--font-sans); font-size:0.78rem; font-weight:300;
  letter-spacing:0.02em; line-height:1.2; white-space:nowrap; color:var(--rg-ivory); }
/* All one ivory: the hierarchy comes from size and from the display face on
   the number, not from colour, so the whole line reads white on the bar. */
.rg-bookrate__num{ font-family:var(--font-display); font-size:1.05rem; font-weight:500;
  color:var(--rg-ivory); }
.rg-bookrate__unit{ font-size:0.72rem; color:var(--rg-ivory); }
.rg-bookrate[hidden]{ display:none; }

/* Show More / Show Less — a hairline circle with a + or − rule inside.
   No page renders this any more: every field is on the bar at all times now.
   Kept, with its JS, in case a longer form ever needs to collapse again. */
.rg-booktoggle{ display:inline-flex; align-items:center; gap:0.6rem; padding:0; border:0;
  background:transparent; cursor:pointer; justify-self:start; min-height:24px;
  font-family:var(--font-sans); font-size:0.78rem; font-weight:300; color:var(--rg-ivory);
  opacity:0.82; transition:opacity var(--dur-base) var(--ease-out); }
.rg-booktoggle:hover{ opacity:1; }
.rg-booktoggle__ring{ position:relative; flex:none; width:19px; height:19px; border-radius:50%;
  border:1px solid rgba(244,236,223,0.6); }
.rg-booktoggle__ring::before,
.rg-booktoggle__ring::after{ content:''; position:absolute; left:50%; top:50%; width:9px; height:1px;
  margin:-0.5px 0 0 -4.5px; background:currentColor; }
/* the vertical stroke turns the − into a +, and is dropped when open */
.rg-booktoggle__ring::after{ transform:rotate(90deg); transition:opacity var(--dur-base) var(--ease-out); }
.rg-bookbar--stay.is-open .rg-booktoggle__ring::after{ opacity:0; }

.rg-bookfield{ display:flex; flex-direction:column; gap:0.3rem; min-width:0; }
.rg-bookfield__label{ font-family:var(--font-sans); font-size:0.66rem; font-weight:500;
  letter-spacing:0.2em; text-transform:uppercase; color:var(--rg-gold-soft); }
.rg-bookfield__ctl{ position:relative; display:block; }
/* .rg-guests-trigger rides these rules so the Rooms & Guests button is the
   same control as the selects beside it — it only stops being a <select>
   because a select cannot hold per-room steppers and child ages. */
.rg-bookfield select, .rg-bookfield input, .rg-bookfield .rg-guests-trigger{ -webkit-appearance:none; appearance:none; width:100%;
  min-height:44px; padding:0.15rem 1.9rem 0.35rem 0; margin:0; border:0;
  border-bottom:1px solid rgba(244,236,223,0.42); border-radius:0; background:transparent;
  color:var(--rg-ivory); font-family:var(--font-sans); font-size:1rem; font-weight:300;
  line-height:1.4; color-scheme:dark; cursor:pointer;
  transition:border-color var(--dur-base) var(--ease-out); }
.rg-bookfield .rg-guests-trigger{ text-align:left; }
.rg-bookfield select:focus, .rg-bookfield input:focus, .rg-bookfield .rg-guests-trigger:focus{ outline:none; border-bottom-color:var(--rg-gold); }
.rg-bookfield select:hover, .rg-bookfield input:hover, .rg-bookfield .rg-guests-trigger:hover{ border-bottom-color:rgba(244,236,223,0.75); }
.rg-bookfield option{ color:var(--rg-espresso); background:var(--rg-ivory); }
/* caret / calendar glyph */
.rg-bookfield__ctl::after{ content:''; position:absolute; right:0.2rem; top:50%; width:9px; height:9px;
  margin-top:-7px; border-right:1.5px solid var(--rg-gold-soft); border-bottom:1.5px solid var(--rg-gold-soft);
  transform:rotate(45deg); pointer-events:none; }
.rg-bookfield__ctl--date::after{ display:none; }
/* The field sets color-scheme:dark, so Chrome already draws this glyph light —
   the old invert(1) flipped it straight back to black. brightness(0) flattens
   it to a known black first, then the chain tints it to --rg-gold-soft so the
   calendar icon matches the caret on the select fields. */
.rg-bookfield input[type="date"]::-webkit-calendar-picker-indicator{
  filter:brightness(0) saturate(100%) invert(88%) sepia(22%) saturate(420%)
         hue-rotate(332deg) brightness(96%) contrast(88%);
  opacity:0.9; cursor:pointer; }

.rg-bookbar__cta{ display:flex; align-items:center; }
/* Deliberately identical to .rg-navbook in rg-navhero.css — same copper fill,
   radius, type and arrow — so the two Book Now buttons on a page read as one
   component rather than two. Keep the two rules in step if either changes. */
.rg-bookbtn{ display:inline-flex; align-items:center; justify-content:center; gap:0.85em;
  width:100%; min-height:44px; padding:0.7em 1.8em;
  border-radius:var(--radius-sm); border:1px solid var(--rg-copper);
  background:var(--rg-copper); color:var(--rg-ivory); cursor:pointer;
  font-family:var(--font-sans); font-size:0.8125rem; font-weight:var(--w-medium);
  letter-spacing:var(--ls-button); text-transform:uppercase; white-space:nowrap; text-decoration:none;
  transition:background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out); }
.rg-bookbtn .rg-btn__arrow{ display:inline-block;
  transition:transform var(--dur-base) var(--ease-out); }
.rg-bookbtn:hover .rg-btn__arrow{ transform:translateX(5px); }
.rg-bookbtn:hover{ background:var(--rg-copper-deep); border-color:var(--rg-copper-deep);
  background:color-mix(in srgb, var(--rg-copper) 80%, #000);
  border-color:color-mix(in srgb, var(--rg-copper) 80%, #000);
  color:var(--rg-ivory); transform:translateY(-1px); }

/* padding/background/border resets so a <button> can wear this too — the
   "Why Book Direct?" trigger is a button, not a link: it opens a panel rather
   than going anywhere. */
.rg-booklink{ font-family:var(--font-sans); font-size:0.78rem; font-weight:300; color:var(--rg-ivory);
  text-decoration:none; opacity:0.82; justify-self:start; min-height:24px;
  padding:0; background:transparent; border:0; cursor:pointer; text-align:left;
  border-bottom:1px solid transparent; transition:opacity var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out); }
.rg-booklink:hover{ opacity:1; border-bottom-color:currentColor; }
.rg-booklink:focus-visible{ outline:2px solid var(--rg-gold); outline-offset:3px; }
/* No grid-column here on purpose: the base grid is a single column (phone),
   and the two min-width blocks above place both links explicitly. */
/* inline feedback (e.g. "choose a hotel") */
.rg-booknote{ grid-column:1 / -1; margin:0; font-family:var(--font-sans); font-size:0.78rem;
  font-weight:300; color:var(--rg-gold-soft); }
.rg-booknote:empty{ display:none; }

/* the panel needs a deeper scrim under it — pair with .rg-hhero__foot */
.rg-hhero__foot{ position:absolute; left:0; right:0; bottom:0; height:46%; z-index:1; pointer-events:none;
  background:linear-gradient(to top, rgba(20,16,12,0.72) 0%, rgba(20,16,12,0.28) 55%, rgba(20,16,12,0) 100%); }

/* arrives with the parent's preloader hand-off */
body[data-has-preloader]:not(.rails-in) .rg-bookbar{ opacity:0; }
body[data-has-preloader] .rg-bookbar{ transition:opacity 0.9s 0.2s var(--ease-out); }

/* ---- Phone (the base grid) -------------------------------------------
   A hairline underline is enough on a wide desktop bar, but on a dark
   stacked panel it gives a thumb nothing to aim at. Below 821px each control
   becomes a bordered box — the same trick the reference booking widget uses —
   while keeping the ivory-on-charcoal palette and the gold caret. */
@media (max-width:820px){
  .rg-bookbar{ row-gap:1.05rem; }
  .rg-bookfield{ gap:0.45rem; }
  .rg-bookfield select, .rg-bookfield input, .rg-bookfield .rg-guests-trigger{
    padding:0.55rem 2.2rem 0.55rem 0.9rem; min-height:48px;
    border:1px solid rgba(201,163,106,0.34); border-radius:var(--radius-sm);
    background:rgba(244,236,223,0.05); }
  .rg-bookfield select:focus, .rg-bookfield input:focus, .rg-bookfield .rg-guests-trigger:focus{ border-color:var(--rg-gold); }
  .rg-bookfield__ctl::after{ right:1rem; }
  .rg-bookfield input[type="date"]::-webkit-calendar-picker-indicator{ margin-right:0.15rem; }
  /* the links bracket the button the way the reference panel does */
  .rg-booklink{ justify-self:start; }
  .rg-bookrate{ justify-self:center; }
  /* matches .rg-navbook's 20%-darker touch state */
  .rg-bookbtn{ min-height:52px; background:var(--rg-copper-deep); border-color:var(--rg-copper-deep);
    background:color-mix(in srgb, var(--rg-copper) 80%, #000);
    border-color:color-mix(in srgb, var(--rg-copper) 80%, #000); }
}

@media (max-width:480px){
  .rg-bookbar{ padding:20px; }
  .rg-bookfield select, .rg-bookfield input, .rg-bookfield .rg-guests-trigger{ font-size:0.95rem; }
}

@media (prefers-reduced-motion: reduce){
  .rg-bookbtn, .rg-booklink{ transition:none !important; }
  /* opacity only — the bar's translateX(-50%) is what centres it */
  body[data-has-preloader] .rg-bookbar{ opacity:1 !important; }
}


/* ======================================================================
   Rooms & Guests popover
   Glass panel in the bar's own idiom: the desktop bar is rgba(26,23,20,0.44)
   behind a blur, and this is the same espresso glass much further up. The
   panel carries small labels and numbers over whatever the hero is doing, so
   it needs the blur for the material and the opacity for the legibility —
   0.78 let the building show through and the text lost its ground.
   ====================================================================== */
.rg-bookfield--guests{ position:relative; }

/* One two-column rhythm for the whole panel: labels in column 1, controls in
   column 2. Column 2 is exactly --gp-w wide and every control is exactly
   --gp-w wide, so all of them share a left edge AND a right edge, and that
   right edge is the panel's right padding. Two equal 1fr halves looked wrong
   for exactly this reason: the track was wider than the control in it, so the
   panel had ~18px of dead space down the right and none down the left. */
.rg-guests-total,
.rg-guests-room__grid,
.rg-guests-age,
.rg-guests-pop__foot{ display:grid; grid-template-columns:minmax(0,1fr) var(--gp-w); gap:0.75rem 1rem; }
/* Descendant, not child: the rooms stepper is rendered inside the
   [data-step-rooms] span, so a > combinator misses it. The age select is sized
   in its own rule further down, where it can outrank `.rg-bookfield select`. */
.rg-guests-total .rg-stepper,
.rg-guests-cell .rg-stepper,
.rg-guests-pop__foot .rg-guests-done{ width:var(--gp-w); }

.rg-guests-pop{ position:absolute; z-index:12; top:calc(100% + 0.65rem); left:0;
  /* --gp-w is the one width every control in column 2 uses, and it is also the
     column-2 track, so the controls' right edge IS the panel's right padding.
     The panel is then just: pad + labels + gap + --gp-w + pad, which makes the
     left and right insets equal. */
  --gp-w:130px;
  width:min(328px, calc(100vw - 2.5rem));
  padding:1.15rem;
  background:rgba(26,23,20,0.94);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
  backdrop-filter:blur(20px) saturate(140%);
  border:1px solid rgba(201,163,106,0.34); border-radius:var(--radius-md);
  box-shadow:var(--shadow-lg), 0 2px 10px rgba(26,23,20,0.28);
  color:var(--rg-ivory); text-align:left; }
/* the bar is bottom-anchored on desktop, so the panel opens upward there and
   is never clipped by the hero's bottom edge */
@media (min-width:821px){
  .rg-guests-pop{ top:auto; bottom:calc(100% + 0.65rem); }
}

.rg-guests-pop__title{ margin:0 0 0.85rem; font-family:var(--font-display);
  font-size:1.2rem; font-weight:400; letter-spacing:var(--ls-display); color:var(--rg-ivory); }

.rg-guests-total{ align-items:center;
  padding-bottom:0.9rem; border-bottom:1px solid rgba(244,236,223,0.16); }
.rg-guests-total__label{ font-family:var(--font-sans); font-size:0.9rem; font-weight:300; }

.rg-guests-room{ padding:0.9rem 0; border-bottom:1px solid rgba(244,236,223,0.16); }
.rg-guests-room:last-child{ border-bottom:0; }
.rg-guests-room__title{ margin:0 0 0.6rem; font-family:var(--font-sans); font-size:0.66rem;
  font-weight:500; letter-spacing:0.2em; text-transform:uppercase; color:var(--rg-gold-soft); }
/* grid-template lives in the shared rule above — do not re-declare it here, or
   the two columns go back to equal halves and column 2 stops matching --gp-w. */
.rg-guests-cell{ display:flex; flex-direction:column; gap:0.45rem; min-width:0; }
.rg-guests-cell__label{ font-family:var(--font-sans); font-size:0.82rem; font-weight:300;
  color:rgba(244,236,223,0.82); }

/* — stepper — */
.rg-stepper{ display:inline-flex; align-items:center; align-self:start;
  border:1px solid rgba(201,163,106,0.34); border-radius:var(--radius-sm); overflow:hidden; }
.rg-stepper__btn{ width:38px; min-height:38px; padding:0; border:0; background:transparent;
  color:var(--rg-ivory); font-family:var(--font-sans); font-size:1.05rem; line-height:1; cursor:pointer;
  transition:background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.rg-stepper__btn:hover:not(:disabled){ background:var(--rg-copper); }
.rg-stepper__btn:focus-visible{ outline:2px solid var(--rg-gold); outline-offset:-2px; }
.rg-stepper__btn:disabled{ opacity:0.34; cursor:not-allowed; }
.rg-stepper__val{ min-width:40px; padding:0 0.15rem; font-family:var(--font-sans); font-size:0.95rem;
  font-weight:400; text-align:center; font-variant-numeric:tabular-nums;
  border-left:1px solid rgba(201,163,106,0.34); border-right:1px solid rgba(201,163,106,0.34); }

/* — per-child age selects —
   One row per child, label left and select right, sitting under that room's
   steppers. */
.rg-guests-ages{ display:flex; flex-direction:column; gap:0.5rem; margin-top:0.85rem; }
.rg-guests-age{ align-items:center; min-width:0; }
.rg-guests-age__label{ font-family:var(--font-sans); font-size:0.82rem; font-weight:300;
  white-space:nowrap; color:rgba(244,236,223,0.82); }
/* .rg-bookfield-scoped so this outranks `.rg-bookfield select` above, which is
   the more specific selector and would otherwise stretch the age box to the
   full width of the panel as an underlined field. Sized to --gp-w like every
   other column-2 control, so it fills its track exactly. */
.rg-bookfield .rg-age-select{ -webkit-appearance:none; appearance:none; width:var(--gp-w); min-width:0; min-height:40px;
  padding:0.35rem 1.7rem 0.35rem 0.6rem; margin:0;
  border:1px solid rgba(201,163,106,0.34); border-radius:var(--radius-sm);
  background:rgba(244,236,223,0.06); color:var(--rg-ivory);
  font-family:var(--font-sans); font-size:0.92rem; font-weight:300; line-height:1.3;
  color-scheme:dark; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--rg-gold-soft) 50%),
                   linear-gradient(135deg,var(--rg-gold-soft) 50%,transparent 50%);
  background-position:calc(100% - 15px) calc(50% + 1px), calc(100% - 10px) calc(50% + 1px);
  background-size:5px 5px, 5px 5px; background-repeat:no-repeat;
  transition:border-color var(--dur-base) var(--ease-out); }
.rg-bookfield .rg-age-select:hover{ border-color:rgba(244,236,223,0.6); }
.rg-bookfield .rg-age-select:focus{ outline:none; border-color:var(--rg-gold); }
.rg-bookfield .rg-age-select option{ color:var(--rg-espresso); background:var(--rg-ivory); }

/* — footer — */
.rg-guests-pop__foot{ align-items:center;
  margin-top:1rem; padding-top:0.9rem; border-top:1px solid rgba(244,236,223,0.16); }
/* nowrap + a slightly smaller size: at 0.86rem this label is exactly as wide as
   column 1, so it broke onto two lines and threw the footer off balance. */
.rg-guests-add{ padding:0.35rem 0; border:0; background:transparent; color:var(--rg-gold);
  text-align:left; white-space:nowrap;
  font-family:var(--font-sans); font-size:0.8rem; font-weight:400; cursor:pointer;
  transition:color var(--dur-fast) var(--ease-out); }
.rg-guests-add:hover:not(:disabled){ color:var(--rg-ivory); }
.rg-guests-add:disabled{ opacity:0.34; cursor:not-allowed; }
.rg-guests-done{ min-height:40px; padding:0.5rem 1.5rem;
  border:1px solid var(--rg-copper); border-radius:var(--radius-sm);
  background:var(--rg-copper); color:var(--rg-ivory);
  font-family:var(--font-sans); font-size:0.78rem; font-weight:500;
  letter-spacing:var(--ls-button); text-transform:uppercase; cursor:pointer;
  transition:background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); }
.rg-guests-done:hover{ background:var(--rg-copper-deep); border-color:var(--rg-copper-deep); }

/* Phone: the bar is near-opaque here, so the panel matches rather than
   blurring a hero video behind it. Full-width, and tap targets go to 44px. */
@media (max-width:820px){
  .rg-guests-pop{ top:calc(100% + 0.5rem); bottom:auto; width:100%;
    background:rgba(26,23,20,0.96); }
  .rg-stepper__btn{ width:44px; min-height:44px; }
  .rg-bookfield .rg-age-select{ min-height:44px; }
  .rg-guests-done{ min-height:44px; }
  .rg-guests-add{ min-height:44px; }
}
@media (max-width:480px){
  .rg-guests-room__grid{ grid-template-columns:1fr; }
  /* Adults and Children have stacked, so there is no second column left for
     the age box to line up with. Bracket the row instead — label left, select
     right, both content-sized. Two equal columns would give each about 113px
     on a 320px screen, which the 118px select would overflow. */
  .rg-guests-age{ grid-template-columns:auto auto; justify-content:space-between; gap:0.5rem 0.75rem; }
  .rg-bookfield .rg-age-select{ justify-self:end; }
}

@media (prefers-reduced-motion: reduce){
  .rg-stepper__btn, .rg-age-select, .rg-guests-add, .rg-guests-done{ transition:none !important; }
}

/* ======================================================================
   Book Now popup
   The same booking bar, lifted into a centred modal. Opened by the navbar
   Book Now on every page, and by the hero bar's own Book Now on the four
   homepages that carry one (the hero bar then hands its values across, so
   nothing is retyped).

   Styled as the SAME frosted glass the bar wears over the hero video -
   rgba(26,23,20,0.44) behind blur(12px) saturate(130%) with a copper
   hairline. Because the card keeps the bar's own dark ground, the fields,
   the Rooms & Guests panel, the steppers and the age selects all render in
   their native styling: no light-theme overrides, nothing to keep in step.
   Only the things a modal genuinely needs are set below.
   ====================================================================== */
.rg-bookmodal{ position:fixed; inset:0; z-index:120; display:none; }
.rg-bookmodal.is-open{ display:block; }
.rg-bookmodal[hidden]{ display:none; }

/* A lighter dim than a normal modal scrim: the point of the glass is that the
   page reads through it, so the blur does the separating, not the darkness. */
.rg-bookmodal__scrim{ position:absolute; inset:0; background:rgba(20,16,12,0.42);
  -webkit-backdrop-filter:blur(7px) saturate(115%); backdrop-filter:blur(7px) saturate(115%); }

/* overflow MUST stay visible: the Rooms & Guests panel is absolutely
   positioned inside this card, and clipping it put its Done button outside the
   card where the scrim swallowed the click. The card's own content is one row
   of fields, so there is nothing here that needs to scroll. */
.rg-bookmodal__card{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(1260px, calc(100vw - 2rem)); overflow:visible;
  padding:clamp(1.6rem,3vw,2.2rem) clamp(1.4rem,2.4vw,2rem);
  background:rgba(26,23,20,0.44);
  -webkit-backdrop-filter:blur(12px) saturate(130%); backdrop-filter:blur(12px) saturate(130%);
  border:1px solid rgba(201,163,106,0.30); border-radius:var(--radius-md);
  box-shadow:0 30px 80px rgba(12,9,6,0.45); }

/* Safari/Firefox without backdrop-filter would show the fields on a 44%
   wash of whatever is behind - deepen the ground so they stay legible. */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .rg-bookmodal__card{ background:rgba(26,23,20,0.94); }
  .rg-bookmodal__scrim{ background:rgba(20,16,12,0.70); }
}

.rg-bookmodal__close{ position:absolute; top:0.8rem; right:0.8rem; z-index:2;
  width:34px; height:34px; display:flex; align-items:center; justify-content:center;
  padding:0; border:1px solid rgba(201,163,106,0.34); border-radius:50%; cursor:pointer;
  background:rgba(244,236,223,0.06); color:var(--rg-ivory);
  font-family:var(--font-sans); font-size:1.1rem; line-height:1;
  transition:background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); }
.rg-bookmodal__close:hover{ background:rgba(244,236,223,0.16); border-color:var(--rg-gold); }
.rg-bookmodal__close:focus-visible{ outline:2px solid var(--rg-gold); outline-offset:2px; }

/* ---- the bar inside the card ------------------------------------------
   Only its positioning is undone: the bar pins itself to the hero's bottom
   edge above 821px, which would tear it out of the card. Everything visual
   is inherited. */
.rg-bookmodal .rg-bookbar{ position:static; left:auto; right:auto; bottom:auto; transform:none;
  width:100%; margin:0; padding:0; background:transparent; border:0; box-shadow:none;
  -webkit-backdrop-filter:none; backdrop-filter:none; opacity:1; }

/* The bar opens this UPWARD on desktop, because the bar is pinned to the
   hero's bottom edge. In the popup there is nothing above the card to avoid,
   and opening up would run it off the top of the screen - so it drops. */
.rg-bookmodal .rg-guests-pop{ top:calc(100% + 0.5rem); bottom:auto;
  width:min(360px, calc(100vw - 4rem)); }

/* "1 Room, 2 Guests" must hold one line rather than wrap the field taller
   than the ones beside it. */
.rg-bookmodal .rg-bookfield .rg-guests-trigger{ white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; }

/* ---- phone ------------------------------------------------------------ */
@media (max-width:820px){
  .rg-bookmodal__card{ width:calc(100vw - 1.5rem); max-height:calc(100vh - 1.5rem);
    overflow-y:auto; padding:1.5rem 1.1rem 1.2rem; }
  /* the panel is already static at this width, so it cannot be clipped and
     the card is free to scroll a tall stacked form */
  .rg-bookmodal .rg-guests-pop{ position:static; width:100%; margin-top:0.6rem; }
}

@media (prefers-reduced-motion: reduce){
  .rg-bookmodal__close{ transition:none; }
}


/* ======================================================================
   "Why Book Direct" panel
   Same glass, gold hairline, Cormorant title and copper accents as the
   Rooms & Guests picker above, so the two things that open off this bar
   read as one component family. Opens upward: the links row sits at the
   foot of a bar that is itself pinned to the bottom of the hero.
   ====================================================================== */
.rg-bookwhy{ position:relative; justify-self:start; }

.rg-why-pop{ position:absolute; z-index:12; left:0; bottom:calc(100% + 0.65rem);
  width:min(320px, calc(100vw - 2.5rem));
  padding:1.15rem;
  background:rgba(26,23,20,0.94);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
  backdrop-filter:blur(20px) saturate(140%);
  border:1px solid rgba(201,163,106,0.34); border-radius:var(--radius-md);
  box-shadow:var(--shadow-lg), 0 2px 10px rgba(26,23,20,0.28);
  color:var(--rg-ivory); text-align:left;
  opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity var(--dur-base) var(--ease-out),
             transform var(--dur-base) var(--ease-out),
             visibility var(--dur-base) var(--ease-out); }
.rg-bookwhy.is-open .rg-why-pop{ opacity:1; visibility:visible; transform:translateY(0); }

.rg-why-pop__title{ margin:0 0 0.85rem; font-family:var(--font-display);
  font-size:1.2rem; font-weight:400; letter-spacing:var(--ls-display); color:var(--rg-ivory); }

.rg-why-list{ list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:0.7rem; }
.rg-why-list li{ display:flex; align-items:flex-start; gap:0.7rem;
  font-family:var(--font-sans); font-size:0.85rem; font-weight:300; line-height:1.45;
  color:rgba(244,236,223,0.9); }
/* width/height rather than the shared svg.lucide 18px: these read as bullets
   beside the text, not as standalone icons. */
.rg-why-list svg{ flex:none; width:16px; height:16px; margin-top:0.14rem;
  color:var(--rg-gold); stroke-width:1.5; }

/* Phone: the bar is static and near-opaque here, and the trigger sits above
   the CTA rather than below it, so the panel drops instead of rising. */
@media (max-width:820px){
  /* the wrapper spans the bar so the panel's 100% is the bar's width — left
     shrink-wrapped it was as narrow as the label, about 99px. The trigger
     itself stays label-sized so the tap target is the words, not the row. */
  .rg-bookwhy{ justify-self:stretch; width:100%; }
  .rg-bookwhy .rg-booklink--why{ display:inline-block; }
  .rg-why-pop{ bottom:auto; top:calc(100% + 0.5rem); width:100%;
    background:rgba(26,23,20,0.96); }
}

@media (prefers-reduced-motion: reduce){
  .rg-why-pop{ transition:none !important; }
}