/* ==========================================================================
   Book now — Figma node 977:422 (2000px frame, same scaling as the landing:
   values are exact Figma px * var(--px)). Navy page (site default).
   ========================================================================== */
.bk {
  color: var(--white);
}

/* --- Section 1: hero --- */
.bk-hero {
  text-align: center;
  padding-top: calc(92 * var(--px));
  padding-bottom: calc(120 * var(--px));
}
.bk-hero__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: calc(82.046 * var(--px));
  line-height: 1.05;
}
.bk-hero__lead {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: calc(25.259 * var(--px));
  line-height: 1.3;
  max-width: calc(966 * var(--px));
  margin: calc(28 * var(--px)) auto 0;
}

/* --- shared step scaffolding --- */
.bk-rule {
  width: calc(926 * var(--px));
  max-width: 92%;
  height: 0;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.45);
  margin: calc(60 * var(--px)) auto;
}
.bk-step { text-align: center; padding-top: calc(78.6 * var(--px)); }   /* first text 65px from section top (standard) */
/* clear the sticky nav (~209px) when scrolling a section/control into view */
.bk-step, .bk-fieldswrap { scroll-margin-top: calc(300 * var(--px)); }
.bk-step__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: calc(46.043 * var(--px));
}
.bk-wrap {
  width: calc(890 * var(--px));
  max-width: 92%;
  margin: calc(56 * var(--px)) auto 0;
}
.bk-label {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: calc(25.808 * var(--px));
  text-align: center;               /* centred over the venues, on every width */
  margin-bottom: calc(30 * var(--px));
}

/* --- Step 1: venue picker --- */
.bk-venues {
  display: grid;
  grid-template-columns: repeat(2, calc(290 * var(--px)));   /* two venues, centred */
  justify-content: center;
  gap: calc(40 * var(--px));
}
.bk-venue {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(22 * var(--px));
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
}
.bk-venue__name {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: calc(61.977 * var(--px));
  background: var(--navy);
  border: calc(5 * var(--px)) solid #fff;
  border-radius: calc(35 * var(--px));
  font-family: var(--font-display);
  font-size: calc(26 * var(--px));
  color: #fff;
}
.bk-venue__addr {
  font-family: var(--font-sans);
  font-size: calc(22 * var(--px));
  opacity: 0.9;
}
.bk-venue__name { transition: background .15s ease, border-color .15s ease; }
.bk-venue:hover .bk-venue__name { border-color: #244D1C; }            /* hover: green border */
.bk-venue.is-active .bk-venue__name {                                  /* selected: green fill, stays */
  background: #244D1C;
  border-color: #244D1C;
  color: #fff;
}

/* --- Step 2: plan your visit --- */
.bk-plan { position: relative; }
.bk-fieldswrap {
  position: relative;
  width: calc(846 * var(--px));
  max-width: 100%;
  margin-inline: auto;
}
.bk-fields {
  display: grid;
  /* 4 columns: people | length | [Today/Tomorrow] | [Preferred date]. The Date
     header spans the last two so it still sits over both date cells. */
  grid-template-columns: repeat(4, 1fr);
  width: 100%;
  /* a background-colour gap between the header row and the value cells, so the
     white header reads as a separate strip sitting above the choice cells */
  row-gap: calc(7 * var(--px));
}
.bk-fhead:nth-child(3) { grid-column: span 2; }   /* Date header over both date cells */
.bk-fhead, .bk-fval {
  text-align: center;
  font-family: var(--font-sans);
  font-weight: 700;
  border: calc(3.86 * var(--px)) solid #fff;
  padding: calc(18 * var(--px)) calc(10 * var(--px));
}
.bk-fhead {
  background: #fff;
  color: #000;
  font-size: calc(20.997 * var(--px));
}
.bk-fhead:first-child  { border-top-left-radius: calc(25 * var(--px)); }
.bk-fhead:nth-child(3) { border-top-right-radius: calc(25 * var(--px)); }
.bk-fval {
  background: none;
  color: #fff;
  font-size: calc(17.935 * var(--px));
  cursor: pointer;
}
.bk-fval.is-set { background: #244D1C; border-color: #244D1C; }   /* choice made → cell stays green */
/* No. of people: DESKTOP keeps the original "N people" trigger (opens the stepper
   popover); MOBILE shows an inline +/- stepper in the cell (see the mobile block). */
.bk-fval--people, .bk-fval--length, .bk-fval--quickdate { padding: 0; }

/* Quick date: two Today/Tomorrow buttons filling the cell, split by a divider. */
.bk-fval--quickdate { display: flex; cursor: default; }
.bk-quickdate {
  flex: 1 1 0;
  min-width: 0;
  background: none;
  border: 0;
  color: #fff;
  font: inherit;
  font-size: calc(17.935 * var(--px));
  padding: calc(18 * var(--px)) calc(6 * var(--px));
  cursor: pointer;
}
.bk-quickdate + .bk-quickdate { border-left: calc(3.86 * var(--px)) solid #fff; }
.bk-quickdate:hover:not(:disabled) { background: rgba(255, 255, 255, 0.08); }
.bk-quickdate.is-sel { background: #244D1C; }        /* picked → green */
.bk-quickdate:disabled { opacity: 0.4; cursor: default; }   /* no venue yet / closed / past */
.bk-people-open, .bk-length-open {
  display: block; width: 100%;
  padding: calc(18 * var(--px)) calc(10 * var(--px));
  background: none; border: 0; color: inherit; font: inherit; cursor: pointer;
}
.bk-people-stepper, .bk-length-stepper { display: none; }

/* --- Step 2 popovers (open under the relevant field) --- */
.bk-pop {
  position: absolute;
  top: calc(100% + (10 * var(--px)));
  z-index: 20;
  background: #fff;
  color: #1a1933;
  border-radius: calc(16 * var(--px));
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.28);
}
.bk-pop[hidden] { display: none; }
/* Align each popover to its cell in the 4-column grid (people | length |
   Today/Tomorrow | date), i.e. quarters — not the old thirds. */
.bk-pop--people { left: 0;   width: 25%; }   /* under "No. of people" (col 1) */
.bk-pop--length { left: 25%; width: 25%; }   /* under "Length" (col 2) */
.bk-pop--date   { right: 0; background: none; box-shadow: none; border-radius: 0; }

.bk-pop--people { display: flex; align-items: center; justify-content: space-evenly; gap: calc(12 * var(--px)); padding: calc(14 * var(--px)) calc(12 * var(--px)); }
.bk-stepbtn {
  width: calc(42 * var(--px)); height: calc(42 * var(--px));
  border: 0; border-radius: 50%; background: #244D1C; color: #fff;
  font-size: calc(24 * var(--px)); line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  touch-action: manipulation;   /* stop iOS double-tap-to-zoom on the +/- buttons */
  -webkit-user-select: none; user-select: none;
}
/* Same double-tap-zoom guard on every Step 2 tap target (fields, dropdown
   options, calendar) — not just the +/- buttons. */
.bk-people-stepper, .bk-length-stepper,
.bk-fval, .bk-people-open, .bk-length-open, .bk-opt,
.bk-cal__arrow, .bk-cal__month, .bk-cal__mcell, .bk-cal__day { touch-action: manipulation; }
.bk-stepval { font-family: var(--font-sans); font-weight: 700; font-size: calc(22 * var(--px)); min-width: calc(44 * var(--px)); text-align: center; }

.bk-pop--length { display: flex; flex-direction: column; padding: calc(8 * var(--px)); }
.bk-opt {
  background: none; border: 0; text-align: left; cursor: pointer;
  font-family: var(--font-sans); font-size: calc(17 * var(--px)); color: #1a1933;
  padding: calc(11 * var(--px)) calc(16 * var(--px)); border-radius: calc(9 * var(--px));
}
.bk-opt:hover { background: #eef0f3; }

/* date-picker card */
.bk-cal {
  width: calc(404 * var(--px));
  max-width: 88vw;
  background: #fff;
  color: #1a1933;
  border-radius: calc(20 * var(--px));
  padding: calc(28 * var(--px));
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.28);
}
.bk-cal__nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: calc(18 * var(--px)); }
.bk-cal__month {
  font-family: var(--font-sans); font-weight: 700; font-size: calc(21 * var(--px));
  background: none; border: 0; color: inherit; cursor: pointer;
  padding: calc(4 * var(--px)) calc(12 * var(--px)); border-radius: calc(8 * var(--px));
}
.bk-cal__month:hover { background: #eef0f3; }
.bk-cal__arrow {
  font-size: calc(28 * var(--px)); color: #8a8a8a; line-height: 1; cursor: pointer;
  background: none; border: 0; padding: 0 calc(8 * var(--px));
}
.bk-cal__arrow:hover { color: #244D1C; }
/* forward arrow at the 3-month cap */
.bk-cal__arrow:disabled { color: #d5d5d5; cursor: default; }
.bk-cal__arrow:disabled:hover { color: #d5d5d5; }

/* animated swap between the days grid and the months grid */
.bk-cal__view { transition: opacity .18s ease, transform .18s ease; transform-origin: center 42%; }
.bk-cal__view.is-leaving  { opacity: 0; transform: scale(.8); }
.bk-cal__view.is-entering { opacity: 0; transform: scale(1.15); }

.bk-cal__mgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(10 * var(--px)); }
.bk-cal__mcell {
  padding: calc(18 * var(--px)) 0; border: 0; border-radius: calc(10 * var(--px));
  background: #eef0f3; color: #1a1933; cursor: pointer;
  font-family: var(--font-sans); font-weight: 600; font-size: calc(15 * var(--px));
}
.bk-cal__mcell:hover, .bk-cal__mcell.is-cur { background: #244D1C; color: #fff; }
/* months beyond the 3-month cap */
.bk-cal__mcell.is-muted, .bk-cal__mcell:disabled { background: #f4f5f7; color: #cfcfcf; cursor: default; }
.bk-cal__mcell.is-muted:hover, .bk-cal__mcell:disabled:hover { background: #f4f5f7; color: #cfcfcf; }

.bk-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: calc(4 * var(--px)); text-align: center; }
.bk-cal__dow { font-size: calc(12.5 * var(--px)); font-weight: 700; color: #9a9a9a; padding-bottom: calc(8 * var(--px)); }
.bk-cal__day {
  font-family: var(--font-sans); font-size: calc(16 * var(--px)); font-weight: 600;
  padding: calc(7 * var(--px)) 0; border: 0; background: none; color: #1a1933; cursor: pointer;
  border-radius: 50%;
}
.bk-cal__day:hover:not(.is-muted) { background: #eef0f3; }
.bk-cal__day.is-muted, .bk-cal__day:disabled { color: #cfcfcf; cursor: default; background: none; }
.bk-cal__day.is-sel { background: #244D1C; color: #fff; }

/* --- Step 3: choose the slot --- */
.bk-info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(14 * var(--px));
  font-family: var(--font-sans);
  font-size: calc(20 * var(--px));
  margin-top: calc(40 * var(--px));
}
.bk-info__i {
  flex: 0 0 auto;
  width: calc(26 * var(--px));
  height: calc(26 * var(--px));
  border-radius: 50%;
  border: 1px solid #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-style: italic;
  font-size: calc(15 * var(--px));
}
/* the "may continue after midnight into the next day" warning — red, with a filled
   info badge, so customers don't miss that a slot can run past midnight */
.bk-info--alert { color: #f22233; text-align: center; }
.bk-info--alert strong { font-weight: 700; }
.bk-info--alert .bk-info__i {
  background: #f22233;
  border-color: #f22233;
  color: #fff;
  font-weight: 700;
  font-style: normal;
}
.bk-browsing {
  text-align: center;
  font-family: var(--font-sans);
  font-size: calc(24 * var(--px));
  line-height: 1.5;
  margin-top: calc(44 * var(--px));
}
.bk-browsing strong { font-weight: 700; }
.bk-browsing__next { color: #fff; margin-left: calc(10 * var(--px)); }

.bk-rooms {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(56 * var(--px));
  width: calc(926 * var(--px));
  max-width: 96%;
  margin: calc(50 * var(--px)) auto 0;
  align-items: start;
}
.bk-rooms--single { grid-template-columns: calc(290 * var(--px)); justify-content: center; }
.bk-room { text-align: center; position: relative; }
.bk-room__name {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: calc(21.914 * var(--px));
  margin-bottom: calc(22 * var(--px));
}
.bk-room__thumb {
  width: calc(225 * var(--px));
  height: calc(164 * var(--px));
  max-width: 100%;
  margin-inline: auto;
  border: calc(2 * var(--px)) solid #fff;
  border-radius: calc(20 * var(--px));
}
.bk-room__slots {
  /* flex (not inline-flex) + auto margins: the card stacks slots -> price -> Select
     instead of letting the pills flow onto one line */
  display: flex;
  width: fit-content;
  margin-inline: auto;
  align-items: center;
  gap: calc(10 * var(--px));
  margin-top: calc(24 * var(--px));
  background: #fff;
  color: #000;
  border: 0;
  border-radius: calc(14.934 * var(--px));
  padding: calc(7 * var(--px)) calc(22 * var(--px));
  font-family: var(--font-sans);
  font-size: calc(15.266 * var(--px));
  cursor: pointer;
}
/* wraps the "Available slots" button + its list so the list can take the button's
   exact width — it should read as the button expanding, not a separate panel */
.bk-room__picker {
  position: relative;
  width: fit-content;
  margin-inline: auto;
}
.bk-slotlist {
  position: absolute;          /* overlay the items below instead of pushing them down */
  left: 0;
  right: 0;                    /* = the button's width (the picker hugs the button) */
  z-index: 20;
  margin-top: calc(6 * var(--px));
  background: rgba(255, 255, 255, 0.9);   /* 10% transparent */
  color: #1a1933;
  border: calc(2 * var(--px)) solid #fff;
  border-radius: calc(14.934 * var(--px));   /* same radius as the button */
  padding: calc(12 * var(--px));
  display: flex;
  flex-direction: column;
  gap: calc(4 * var(--px));
  font-family: var(--font-sans);
  font-size: calc(15 * var(--px));
  text-align: center;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
  max-height: calc(280 * var(--px));
  overflow-y: auto;
}
.bk-slotlist[hidden] { display: none; }
.bk-slot {
  background: none; border: 0; cursor: pointer; font: inherit; color: #1a1933;
  padding: calc(7 * var(--px)) 0; border-radius: calc(8 * var(--px));
}
.bk-slot:hover { background: #eef0f3; }
.bk-slot.is-sel { background: #244D1C; color: #fff; }
.bk-slot--label { font-weight: 700; color: #8a8a8a; padding: calc(6 * var(--px)) 0; }
.bk-rooms__hint { opacity: 0.85; grid-column: 1 / -1; }   /* span the grid so it centres on one line */
.bk-room__none { margin-top: calc(18 * var(--px)); opacity: 0.7; font-family: var(--font-sans); font-size: calc(15 * var(--px)); }

/* chosen room: green thumb border + green "Available slots" pill showing the time */
.bk-room.is-picked .bk-room__thumb { border-color: #244D1C; }
.bk-room__slots.is-set { background: #244D1C; color: #fff; }

/* ---- browse a time -> price this card -> Select commits it ----
   Browsing prices the card only; the customer can price several rooms before
   committing, and only Select drives the Calculation section. */
.bk-room__browse {
  margin: calc(20 * var(--px)) 0 0;
  font-family: var(--font-sans);
  font-size: calc(15.266 * var(--px));
  color: rgba(255, 255, 255, 0.75);
}
.bk-room__browse + .bk-room__slots { margin-top: calc(10 * var(--px)); }
.bk-room__price {
  display: block;
  width: fit-content;
  margin: calc(20 * var(--px)) auto 0;
  padding: calc(7 * var(--px)) calc(20 * var(--px));
  border: calc(1.5 * var(--px)) solid rgba(255, 255, 255, 0.65);
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: calc(15.266 * var(--px));
  color: #fff;
  white-space: nowrap;
}
.bk-room__price[hidden] { display: none; }
/* Per-card note, on two lines so it fits the card. Rendered only when the party is
   smaller than the room (booking.js) — that's when the per-person price is higher. */
.bk-room__premium {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(8 * var(--px));
  width: fit-content;
  max-width: 100%;
  margin: calc(16 * var(--px)) auto 0;
  font-family: var(--font-sans);
  font-size: calc(13.5 * var(--px));
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.85);
  text-align: center;
}
.bk-premium__i {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: calc(18 * var(--px)); height: calc(18 * var(--px));
  border: 1px solid currentColor; border-radius: 50%;
  font-size: calc(11 * var(--px)); font-style: italic; line-height: 1;
}
.bk-room__select {
  display: block;
  margin: calc(12 * var(--px)) auto 0;
  padding: calc(8 * var(--px)) calc(30 * var(--px));
  background: #5c7ba6;
  color: #fff;
  border: 0;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: calc(15.266 * var(--px));
  cursor: pointer;
}
.bk-room__select[hidden] { display: none; }
.bk-room__select:hover:not(:disabled) { background: #6d8cb7; }
.bk-room__select:disabled { opacity: 0.55; cursor: default; }   /* until a time is browsed */
.bk-room.is-picked .bk-room__select { background: #244D1C; opacity: 1; }

/* --- Confirm + preview modal --- */
.bk-confirm {
  display: block;
  margin: calc(44 * var(--px)) auto 0;
  background: #244D1C; color: #fff; border: 0; border-radius: 999px;
  padding: calc(16 * var(--px)) calc(44 * var(--px));
  font-family: var(--font-sans); font-weight: 700; font-size: calc(18 * var(--px));
  cursor: pointer;
}
.bk-confirm:hover:not(:disabled) { background: var(--red); }
.bk-confirm:disabled { opacity: 0.4; cursor: not-allowed; }
.bk-confirm--summary {
  width: 100%;
  margin: calc(32 * var(--px)) 0 0;
}

.bk-checkout {
  display: flex;
  flex-direction: row;
  align-items: stretch;      /* Your Details grows to the height of Summary + jukebox */
  gap: calc(40 * var(--px));
  width: 100%;
  margin-top: calc(34 * var(--px));
}
.bk-checkout__left,
.bk-checkout__form {
  flex: 1 1 0;
  min-width: 0;
  text-align: left;
}
/* left column: Summary panel, then the jukebox panel under it */
.bk-checkout__left {
  display: flex;
  flex-direction: column;
  gap: calc(28 * var(--px));
}
.bk-checkout__summary {
  border: calc(2 * var(--px)) solid #fff;
  border-radius: calc(16 * var(--px));
  padding: calc(34 * var(--px));
}

/* ---- Your jukebox (optional): three artist/track request rows ---- */
.bk-jukebox {
  border: calc(2 * var(--px)) solid #fff;
  border-radius: calc(16 * var(--px));
  padding: calc(34 * var(--px));
  text-align: left;
}
.bk-jukebox .bk-calc__head { margin-top: 0; }   /* no dead space above the heading */
.bk-jukebox__lead {
  margin: calc(16 * var(--px)) 0 calc(22 * var(--px));
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: calc(16 * var(--px));
}
.bk-jukebox__grid {
  display: grid;
  grid-template-columns: 1fr 1.6fr;      /* Track is the wider field, as in the design */
  gap: calc(14 * var(--px)) calc(24 * var(--px));
  align-items: center;
}
.bk-jukebox__head {
  font-family: var(--font-sans);
  font-size: calc(17 * var(--px));
  color: rgba(255, 255, 255, 0.9);
}
/* outlined, like the Your Details fields — not filled */
.bk-jukebox__in {
  width: 100%;
  box-sizing: border-box;
  padding: calc(10 * var(--px)) calc(14 * var(--px));
  border: calc(2 * var(--px)) solid #fff;
  border-radius: calc(10 * var(--px));
  background: transparent;
  color: #fff;
  font-family: var(--font-sans);
  font-size: calc(16 * var(--px));
}
.bk-jukebox__in::placeholder { color: rgba(255, 255, 255, 0.55); }
.bk-jukebox__in:focus {
  outline: none;
  border-color: #244D1C;
  background: rgba(36, 77, 28, 0.15);
}
.bk-checkout__summary .bk-calc__head,
.bk-checkout__form .bk-calc__head {
  margin-top: 0;
}
.bk-checkout__form {
  border: calc(2 * var(--px)) solid #fff;
  border-radius: calc(16 * var(--px));
  background: #253B5B;
  color: #fff;
  padding: calc(34 * var(--px));
  font-family: var(--font-sans);
  position: relative;
  transition: opacity 0.2s ease;
  /* the panel now matches the height of Summary + jukebox, so spread the form's
     rows down the column instead of leaving a block of empty space at the bottom */
  display: flex;
  flex-direction: column;
}
.bk-checkout__form .bk-modal__form {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
/* a step up in size now there's room for it */
.bk-checkout__form .bk-modal__label { flex-basis: calc(108 * var(--px)); font-size: calc(16 * var(--px)); }
.bk-checkout__form .bk-modal__input { font-size: calc(16 * var(--px)); padding: calc(10 * var(--px)) calc(14 * var(--px)); }
.bk-checkout__form .bk-modal__check { font-size: calc(15 * var(--px)); }
.bk-checkout__form .bk-modal__btn { font-size: calc(16 * var(--px)); }
.bk-checkout__form.is-inactive {
  opacity: 0.72;
}
.bk-checkout__form.is-inactive .bk-modal__form {
  pointer-events: none;
}
.bk-checkout__lock {
  margin: 0 0 calc(18 * var(--px));
  padding: calc(12 * var(--px)) calc(14 * var(--px));
  border-radius: calc(10 * var(--px));
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(0, 0, 0, 0.2);
  font-family: var(--font-sans);
  font-size: calc(14 * var(--px));
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.9);
}
.bk-checkout__form.is-active .bk-checkout__lock {
  display: none;
}
.bk-checkout__form.is-inactive .bk-modal__input,
.bk-checkout__form.is-inactive .bk-modal__select,
.bk-checkout__form.is-inactive .bk-modal__check input {
  opacity: 0.65;
}
.bk-modal__field {
  position: relative;   /* anchor for the .field-error validation tooltip */
  display: flex;
  align-items: center;
  gap: calc(10 * var(--px));
  margin-bottom: calc(10 * var(--px));
}
.bk-modal__label {
  flex: 0 0 calc(96 * var(--px));
  margin-bottom: 0;
  font-weight: 700;
  font-size: calc(14 * var(--px));
  color: #fff;
  white-space: nowrap;
}
.bk-modal__input {
  flex: 1 1 0;
  min-width: 0;
  width: auto;
  padding: calc(8 * var(--px)) calc(12 * var(--px));
  border: calc(2 * var(--px)) solid #fff;
  border-radius: calc(10 * var(--px));
  font-family: var(--font-sans);
  font-size: calc(14 * var(--px));
  color: #fff;
  box-sizing: border-box;
  background: transparent;
}
.bk-modal__input::placeholder { color: rgba(255, 255, 255, 0.55); }
.bk-modal__input:focus {
  outline: none;
  border-color: #244D1C;
  background: rgba(36, 77, 28, 0.15);
}
.bk-modal__select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23fff' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right calc(14 * var(--px)) center;
  padding-right: calc(36 * var(--px));
}
.bk-modal__select option { color: #1a1933; background: #fff; }
.bk-modal__terms {
  margin: calc(18 * var(--px)) 0 calc(22 * var(--px));
  padding: calc(14 * var(--px));
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: calc(10 * var(--px));
}
.bk-modal__check {
  display: flex;
  align-items: flex-start;
  gap: calc(10 * var(--px));
  cursor: pointer;
}
.bk-modal__check + .bk-modal__check { margin-top: calc(14 * var(--px)); }
.bk-modal__check input {
  margin-top: calc(4 * var(--px));
  flex-shrink: 0;
  width: calc(16 * var(--px));
  height: calc(16 * var(--px));
  accent-color: #244D1C;
}
.bk-modal__check-copy { display: block; }
.bk-modal__check-label {
  display: block;
  font-weight: 700;
  font-size: calc(16 * var(--px));
  color: #fff;
  line-height: 1.35;
}
.bk-modal__check-label a { color: #fff; text-decoration: underline; }
.bk-modal__check-hint {
  display: block;
  margin-top: calc(4 * var(--px));
  font-size: calc(13 * var(--px));
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.35;
  font-weight: 400;
}
.bk-modal__error {
  margin: 0 0 calc(14 * var(--px));
  padding: calc(10 * var(--px)) calc(12 * var(--px));
  border-radius: calc(8 * var(--px));
  border: 1px solid rgba(255, 120, 120, 0.6);
  background: rgba(120, 20, 20, 0.35);
  color: #fff;
  font-size: calc(14 * var(--px));
}
.bk-modal__ready {
  margin: 0 0 calc(14 * var(--px));
  padding: calc(10 * var(--px)) calc(12 * var(--px));
  border-radius: calc(8 * var(--px));
  border: 1px solid #244D1C;
  background: rgba(36, 77, 28, 0.45);
  color: #fff;
  font-size: calc(14 * var(--px));
}
.bk-modal__actions {
  display: flex;
  gap: calc(12 * var(--px));
  justify-content: stretch;
  flex-wrap: nowrap;
}
.bk-modal__actions--pay .bk-modal__btn--pay {
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
}
.bk-modal__btn {
  border: 0;
  border-radius: 999px;
  padding: calc(12 * var(--px)) calc(28 * var(--px));
  font-family: var(--font-sans);
  font-size: calc(16 * var(--px));
  font-weight: 700;
  cursor: pointer;
}
.bk-modal__btn--cancel {
  background: transparent;
  color: #fff;
  border: calc(2 * var(--px)) solid #fff;
}
.bk-modal__btn--cancel:hover { background: rgba(255, 255, 255, 0.1); }
.bk-modal__btn--pay {
  background: #244D1C;
  color: #fff;
}
.bk-modal__btn--pay:hover:not(:disabled) { background: var(--red); }
.bk-modal__btn:disabled { opacity: 0.45; cursor: not-allowed; }
.bk-modal__btn--pay:disabled { opacity: 0.4; cursor: not-allowed; }
.bk-modal__actions--pay { flex-wrap: wrap; gap: calc(10 * var(--px)); }

/* --- Blocking notice (slot taken / no longer bookable) -------------------
   The inline .bk-modal__error sits above the pay button and is easy to walk
   past, so anything that invalidates the chosen slot is raised here instead:
   it covers the page and has to be acknowledged. Desktop sizes off --px like
   the rest of the 2000px frame; the mobile block below switches type to real
   px (same approach as the checkout form). */
.bk-notice[hidden] { display: none; }
.bk-notice {
  position: fixed;
  inset: 0;
  z-index: 100;                       /* above the sticky nav (z-index 20) */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(24 * var(--px));
}
.bk-notice__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 12, 30, 0.72);
}
.bk-notice__panel {
  position: relative;                 /* above the backdrop */
  width: min(calc(560 * var(--px)), 100%);
  box-sizing: border-box;
  padding: calc(32 * var(--px));
  border-radius: calc(12 * var(--px));
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: var(--navy);            /* page navy, lifted off the dimmed backdrop */
  box-shadow: 0 calc(18 * var(--px)) calc(48 * var(--px)) rgba(0, 0, 0, 0.45);
  text-align: center;
}
.bk-notice__title {
  margin: 0 0 calc(12 * var(--px));
  font-size: calc(26 * var(--px));
  line-height: 1.2;
  font-weight: 700;
  color: var(--white);
}
.bk-notice__body {
  margin: 0 0 calc(24 * var(--px));
  font-size: calc(16 * var(--px));
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.82);
}
.bk-notice__ok {
  /* .bk-modal__btn is unstyled on its own — the fill comes from a modifier.
     Match the primary action (--pay) so OK reads as the button it is. */
  min-width: calc(160 * var(--px));
  font-size: calc(16 * var(--px));
  background: #244D1C;
  color: #fff;
}
.bk-notice__ok:hover { background: var(--red); }

@media (max-width: 760px) {
  /* Type back to real px (as with the checkout form), panel sized to the
     viewport, and OK given a proper tap target. Desktop rules above unchanged. */
  .bk-notice { padding: 20px; }
  .bk-notice__panel {
    width: min(92vw, 420px);
    padding: 22px 20px;
    border-radius: 12px;
  }
  .bk-notice__title { font-size: 20px; margin-bottom: 10px; }
  .bk-notice__body  { font-size: 15px; margin-bottom: 20px; }
  /* OK deliberately has no size rules here: the shared mobile .bk-modal__btn
     rule further down already makes buttons full width at 15px/14px padding
     (a ~49px tap target), so the notice matches every other button on mobile.
     Only the desktop --px min-width needs clearing. */
  .bk-notice__ok { min-width: 0; }
}

@media (max-width: 760px) {
  .bk-checkout {
    flex-direction: column;
    gap: calc(36 * var(--px));
  }
  .bk-checkout__summary,
  .bk-jukebox,
  .bk-checkout__form { padding: calc(24 * var(--px)); }
  /* the columns are stacked now, so the form shouldn't stretch its rows apart;
     and its --px-sized type (fine on desktop) must go back to real px here, or the
     scoped rules above would shrink these fields to a few pixels */
  .bk-checkout__form .bk-modal__form { justify-content: flex-start; }
  .bk-checkout__form .bk-modal__label { flex-basis: auto; font-size: 15px; }
  .bk-checkout__form .bk-modal__input { font-size: 16px; padding: 11px 12px; }
  .bk-checkout__form .bk-modal__check { font-size: 15px; }
  .bk-checkout__form .bk-modal__btn { font-size: 16px; }
  .bk-modal__field {
    flex-direction: column;
    align-items: stretch;
    gap: calc(6 * var(--px));
  }
  .bk-modal__label { flex: none; }
  .bk-modal__actions { justify-content: stretch; }
  .bk-modal__btn { flex: 1 1 auto; text-align: center; }
}
.bk-note {
  text-align: center;
  font-family: var(--font-sans);
  font-size: calc(20 * var(--px));
  margin-top: calc(32 * var(--px));
}
.bk-callus__cta { color: #3fdb4c; font-weight: 700; }
.bk-callus__cta a { color: inherit; text-decoration: none; }
.bk-callus__cta a:hover { text-decoration: underline; }

/* --- Calculation: discounts + summary + cost --- */
.bk-calc__wrap {
  width: calc(1200 * var(--px));
  max-width: 96%;
  margin: calc(56 * var(--px)) auto calc(120 * var(--px));
  text-align: left;
}
.bk-calc .bk-calc__wrap {
  text-align: left;
}
.bk-calc__head {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: calc(21 * var(--px));
  margin: calc(34 * var(--px)) 0 calc(14 * var(--px));
}
.bk-calc__wrap > .bk-calc__head:first-child { margin-top: 0; }
.bk-check {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: calc(12 * var(--px));
  font-family: var(--font-sans);
  font-size: calc(21 * var(--px));
  margin-bottom: calc(12 * var(--px));
}
.bk-tag {
  background: #000;
  color: #fff;
  border-radius: 999px;
  padding: calc(4 * var(--px)) calc(16 * var(--px));
  font-size: calc(16 * var(--px));
}
.bk-check__break { display: none; }   /* flex line-break: only used on mobile (see below) */
.bk-i {
  width: calc(22 * var(--px));
  height: calc(22 * var(--px));
  border-radius: 50%;
  border: 1px solid #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-style: italic;
  font-size: calc(13 * var(--px));
}
.bk-summary {
  display: grid;
  grid-template-columns: calc(220 * var(--px)) 1fr;
  gap: calc(6 * var(--px)) calc(24 * var(--px));
  font-family: var(--font-sans);
  font-size: calc(21 * var(--px));
}
.bk-summary__k { font-weight: 700; }
.bk-summary--cost { margin-top: calc(26 * var(--px)); }
.bk-summary__k--discount,
.bk-summary__v--discount { color: #a8e6a0; }

/* ==========================================================================
   MOBILE (<=760px). The whole page is sized with proportional var(--px)
   (= min(100vw,1140px)/1400, ~0.28 at 390px), so on a phone every value is
   microscopic. Below we swap in readable FIXED sizes and make Step 1 (venues),
   Step 2 (fields) and the details form + pay buttons usable on a phone.
   ========================================================================== */
@media (max-width: 760px) {
  /* --- Readability: hero + step scaffolding --- */
  .bk-hero { padding-top: 30px; padding-bottom: 17px; }
  .bk-hero__title { font-size: clamp(34px, 11vw, 52px); }
  .bk-hero__lead { font-size: 15px; max-width: none; margin-top: 12px; padding-inline: 20px; }

  .bk-rule { margin: 17px auto; max-width: 88%; }
  .bk-step { padding-top: 11px; }          /* desktop's calc(78.6 * --px) is ~22px here */
  .bk-step__title { font-size: 24px; }
  .bk-wrap { width: 100%; max-width: 100%; margin-top: 26px; padding-inline: 20px; }
  .bk-label { font-size: 15px; margin-bottom: 16px; text-align: center; }

  /* --- Step 1: venues stack as big, tappable full-width cards --- */
  .bk-venues { grid-template-columns: 1fr; gap: 14px; }
  .bk-venue { gap: 6px; }
  .bk-venue__name { height: 52px; border-width: 2px; border-radius: 16px; font-size: 18px; }
  .bk-venue__addr { font-size: 14px; }

  /* --- Step 2: stack the three fields as label-left / choice-right rows --- */
  .bk-fieldswrap { width: 100%; }
  .bk-fields {
    grid-template-columns: auto 1fr;   /* label | choice */
    gap: 12px 16px;
    align-items: center;
  }
  /* DOM is 3 headers then 4 values (date splits into quick + preferred); place
     each label left of its choice. The Date label spans the two date rows. */
  .bk-fields > :nth-child(1) { grid-area: 1 / 1; }         /* No. of people */
  .bk-fields > :nth-child(2) { grid-area: 2 / 1; }         /* Length */
  .bk-fields > :nth-child(3) { grid-area: 3 / 1 / 5 / 2; } /* Date (spans rows 3-4) */
  .bk-fields > :nth-child(4) { grid-area: 1 / 2; }         /* people choice */
  .bk-fields > :nth-child(5) { grid-area: 2 / 2; }         /* length choice */
  .bk-fields > :nth-child(6) { grid-area: 3 / 2; }         /* Today/Tomorrow */
  .bk-fields > :nth-child(7) { grid-area: 4 / 2; }         /* Preferred date */

  .bk-fhead {                          /* label: keep the white block, left column */
    background: #fff;
    color: #000;
    border: 0;
    border-radius: 12px;
    padding: 12px 14px;
    text-align: center;
    font-size: 15px;
    white-space: nowrap;
  }
  .bk-fval {                           /* choice: bordered pill, right column */
    border: 2px solid #fff;
    border-radius: 12px;
    padding: 12px 16px;
    font-size: 15px;
    text-align: center;
  }
  /* People & Length: hide the desktop trigger, show the inline stepper; keep the
     cell bordered (not green) so the green +/- buttons stay visible. */
  .bk-people-open, .bk-length-open { display: none; }
  .bk-people-stepper, .bk-length-stepper { display: flex; align-items: center; justify-content: space-between; width: 100%; }
  .bk-fval--people.is-set, .bk-fval--length.is-set { background: none; border-color: #fff; }
  /* quick date: two buttons filling the pill, padding on the buttons not the cell */
  .bk-fval--quickdate { padding: 0; }
  .bk-quickdate { padding: 12px 6px; font-size: 15px; }
  .bk-quickdate + .bk-quickdate { border-left: 2px solid #fff; }

  /* Only the DATE picker opens in-flow (it was cramped/overlapping); the Length
     dropdown stays a floating overlay menu, as before. */
  .bk-pop { border-radius: 12px; }
  .bk-pop--date { position: static; left: auto; right: auto; width: 100%; margin-top: 12px; }
  .bk-pop--length { left: 0; right: 0; width: 100%; }
  .bk-stepbtn { width: 38px; height: 38px; font-size: 22px; }
  .bk-stepval { font-size: 18px; min-width: 40px; }
  .bk-opt { font-size: 15px; padding: 12px 16px; }
  .bk-cal { width: 100%; max-width: none; border-radius: 16px; padding: 16px; }
  .bk-cal__month { font-size: 16px; }
  .bk-cal__arrow { font-size: 24px; }
  .bk-cal__mcell { font-size: 14px; padding: 14px 0; }
  .bk-cal__dow { font-size: 11px; }
  .bk-cal__day { font-size: 15px; padding: 7px 0; }

  /* --- Step 3 --- */
  .bk-info { font-size: 14px; gap: 8px; margin-top: 24px; }
  .bk-info__i { width: 20px; height: 20px; }
  .bk-browsing { font-size: 15px; }
  .bk-note { font-size: 14px; margin-top: 20px; }

  /* Search results: stack the rooms one under the other and make them bigger. */
  .bk-rooms, .bk-rooms--single {
    grid-template-columns: 1fr;
    gap: 34px;
    width: 100%;
    max-width: 100%;
    padding-inline: 20px;
    margin-top: 28px;
  }
  .bk-room__name { font-size: 19px; margin-bottom: 14px; }
  .bk-room__thumb { width: 100%; max-width: 340px; height: 220px; border-width: 2px; border-radius: 18px; }
  .bk-room__slots { font-size: 16px; padding: 13px 28px; margin-top: 16px; border-radius: 12px; }
  .bk-slotlist { font-size: 16px; margin-top: 6px; padding: 12px; width: auto; max-width: none; max-height: 300px; border-width: 2px; border-radius: 12px; }
  .bk-slot { font-size: 17px; padding: 13px 0; }
  .bk-slot--label { font-size: 13px; padding: 8px 0; }
  .bk-room__none { font-size: 14px; }
  .bk-room__browse { font-size: 15px; margin-top: 16px; }
  .bk-room__browse + .bk-room__slots { margin-top: 8px; margin-inline: auto; }
  .bk-room__price { font-size: 16px; margin-top: 16px; padding: 10px 22px; border-width: 1.5px; }
  .bk-room__select { font-size: 16px; margin-top: 12px; padding: 12px 34px; }
  .bk-room__premium { font-size: 13px; margin-top: 14px; gap: 8px; }
  .bk-premium__i { width: 18px; height: 18px; font-size: 11px; }

  /* --- Calculation: discounts + summary --- */
  .bk-calc__wrap { width: 100%; max-width: 100%; margin: 30px auto 60px; padding-inline: 20px; }
  .bk-calc__head { font-size: 17px; }
  .bk-check { font-size: 15px; gap: 8px; }
  .bk-tag { font-size: 12px; padding: 4px 12px; }
  .bk-check__break { display: block; flex-basis: 100%; width: 100%; height: 0; }   /* pill drops to next line */
  .bk-i { width: 20px; height: 20px; font-size: 12px; }
  .bk-summary { grid-template-columns: 1fr auto; gap: 6px 16px; font-size: 14px; }

  /* --- Details form: readable fields (>=16px stops iOS zoom-on-focus) --- */
  .bk-checkout { gap: 24px; }
  .bk-checkout__summary, .bk-checkout__form, .bk-jukebox { padding: 18px; }
  .bk-checkout__summary { border: 0; padding: 0; }   /* no border/box around Summary on mobile */
  .bk-checkout__left { gap: 24px; }
  .bk-jukebox__lead { font-size: 14px; margin: 12px 0 16px; }
  .bk-jukebox__head { font-size: 14px; }
  .bk-jukebox__in { font-size: 16px; padding: 11px 12px; border-width: 1.5px; border-radius: 10px; }   /* >=16px stops iOS zoom-on-focus */
  .bk-jukebox__grid { gap: 10px 14px; }
  .bk-modal__field { gap: 4px; margin-bottom: 12px; }
  .bk-modal__label { flex: none; font-size: 14px; }
  .bk-modal__input { font-size: 16px; padding: 11px 12px; border-width: 1.5px; border-radius: 10px; }
  .bk-modal__select { background-position: right 14px center; padding-right: 36px; }
  .bk-modal__terms { padding: 14px; margin: 16px 0 20px; }
  .bk-modal__check input { width: 18px; height: 18px; margin-top: 3px; }
  .bk-modal__check-label { font-size: 15px; }
  .bk-modal__check-hint { font-size: 13px; }
  .bk-modal__error, .bk-modal__ready { font-size: 14px; }

  /* --- Pay buttons: full-width, stacked --- */
  .bk-modal__actions--pay { flex-direction: column; align-items: stretch; gap: 10px; }
  .bk-modal__btn { flex: 0 0 auto; width: 100%; font-size: 15px; padding: 14px 20px; }
}

/* Per-field validation states (client-side). */
.bk-modal__input.is-invalid {
  border-color: var(--color-error);
  outline-color: var(--color-error);
}

/* Hidden for now (client request): the "Are you bringing first-timers?" discount.
   Two classes so it wins regardless of rule order, and the markup stays in place
   - remove bk-check--hidden from the label to bring it back. */
.bk-check.bk-check--hidden { display: none; }

/* Too late to book online tonight. The site only sells 2- and 3-hour slots, so
   in this window there is nothing bookable at all and phoning is the only route —
   hence the alert treatment and a proper tap target for the number. */
/* "Too late to book online tonight" notice. It renders INSIDE .bk-rooms, which is a
   3-column grid — so without spanning every column the text was squeezed into one
   narrow column and wrapped after three words. One bordered box, full width, message
   on its own line, call button beneath. */
.bk-closing {
  grid-column: 1 / -1;
  box-sizing: border-box;
  width: 100%;
  max-width: calc(760 * var(--px));
  margin: 0 auto;
  border: 2px solid #f22233;
  border-radius: 12px;
  padding: 22px 24px;
  text-align: center;
}
.bk-closing__msg {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0;
  color: #f22233;
  font-family: var(--font-sans);
  font-size: calc(20 * var(--px));
  text-align: center;
}
.bk-closing__msg strong { font-weight: 700; }
.bk-closing__msg .bk-info__i { background: #f22233; border-color: #f22233; color: #fff; font-weight: 700; font-style: normal; }
/* Real pixels, not the --px frame unit: that unit is tied to the desktop frame and
   shrank this to a 66x15 target on a phone. This is a CALL button — the only route to
   a booking in this window — so it stays thumb-sized on the device people hold. */
.bk-closing__tel {
  display: inline-block;
  margin-top: 16px;
  background: #3fdb4c;
  color: #10233f;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: .04em;
  text-decoration: none;
  min-height: 44px;
  line-height: 44px;
  padding: 0 26px;
  border-radius: 26px;
}
.bk-closing__tel:hover, .bk-closing__tel:focus { background: #35c441; }
@media (max-width: 600px) {
  /* Desktop is left exactly as it is. Mobile only: the max-width above is in --px,
     the DESKTOP frame unit, which collapses to a narrow column here — that is what
     squeezed the phone number onto two lines. Use the width actually available, and
     never let the number break. */
  .bk-closing { max-width: 100%; padding: 18px 14px; }
  .bk-closing__msg { font-size: 15px; gap: 10px; }
  .bk-closing__tel { white-space: nowrap; font-size: 16px; padding: 0 20px; letter-spacing: .02em; }
}