/* ============================================================
   Right of Way — dedicated booking route (/book/)
   ------------------------------------------------------------
   Rules this stylesheet must never break:

   1. NOTHING is position:fixed or position:sticky. No site
      element may ever cover a booking button.
   2. NO element in the booking path gets a fixed height, a
      max-height, or overflow:auto/scroll/hidden. The SimplyBook
      frame grows itself and the PAGE is the only scroller.
   3. The only reserved height is the first-load placeholder,
      which exists to avoid layout shift and is released as soon
      as the widget reports its real height.
   ============================================================ */

.bk-page {
  min-height: 100vh;
  background: var(--r-bg, #050a14);
  color: var(--r-text, #fff);
  display: flex;
  flex-direction: column;
}

.bk-shell {
  width: min(980px, 100%);
  margin: 0 auto;
  padding: 0 16px;
}

/* ---------- top bar: static, scrolls away with the page ---------- */

.bk-top {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 14px 0 18px;
}

.bk-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 44px;
}

.bk-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--r-text, #fff);
  font-weight: 800;
  letter-spacing: 0.2px;
  font-size: 15px;
}

.bk-brand img {
  display: block;
  height: 30px;
  width: auto;
}

.bk-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 4px;
  color: var(--r-accent, #00d4ff);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

.bk-back::before {
  content: "\2190";
  font-size: 16px;
  line-height: 1;
}

.bk-back:hover,
.bk-back:focus-visible {
  text-decoration: underline;
}

.bk-eyebrow {
  margin: 14px 0 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--r-accent, #00d4ff);
}

.bk-title {
  margin: 0;
  font-size: clamp(21px, 5vw, 30px);
  line-height: 1.2;
  color: #fff;
}

.bk-meta {
  margin: 8px 0 0;
  font-size: 14px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
}

.bk-note {
  margin: 6px 0 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--r-text-muted, #94a3b8);
}

.bk-note:empty { display: none; }

/* ---------- zone switcher ---------- */

.bk-zones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
}

.bk-zones[hidden] { display: none; }

.bk-zones-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--r-text-muted, #94a3b8);
  margin-right: 2px;
}

.bk-zone {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.86);
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
}

.bk-zone:hover,
.bk-zone:focus-visible {
  border-color: rgba(0, 212, 255, 0.5);
  color: #fff;
}

.bk-zone.is-active {
  background: rgba(0, 212, 255, 0.16);
  border-color: rgba(0, 212, 255, 0.6);
  color: #fff;
  cursor: default;
}

/* ---------- widget host ----------
   No height, no overflow. SimplyBook sets the iframe height. */

.bk-main {
  flex: 1 0 auto;
  padding: 18px 0 8px;
}

/* The stage holds the loading/error state and the widget. Before the
   widget reports a height it reserves a viewport's worth of space, so
   the footer never renders above the fold only to be shoved down when
   the calendar arrives. Released by .is-ready — after which nothing
   here constrains height and the page grows to the widget. */
.bk-stage {
  position: relative;
  width: 100%;
  /* Held for the whole session, not just during load. The reserve can
     therefore never shrink, so the footer can never jump up into view
     between the widget mounting and its first height report — that
     was the only source of layout shift on this page. Every real
     widget state is taller than this, so it adds no visible gap. */
  min-height: calc(100vh - 24px);
}

.bk-stage:not(.is-ready) .bk-state {
  position: absolute;
  inset: 0;
}

.bk-widget {
  width: 100%;
  overflow: visible;
}

/* Hidden, but laid out, until booking-app.js marks the stage ready (see settle() there).
   A fallback shows it after 8 s even if that never happens. */
.bk-stage:not(.is-ready) .bk-widget {
  visibility: hidden;
  animation: bk-reveal 0s linear 8s forwards;
}

.bk-widget iframe {
  display: block;
  width: 100% !important;
  border: 0;
  background: #1b1f25;
}

/* ---------- states ---------- */

.bk-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  min-height: 240px;
  padding: 28px 20px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.02);
}

.bk-state[hidden] { display: none; }

.bk-state-title {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  color: #fff;
}

.bk-state-body {
  margin: 0;
  max-width: 42ch;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--r-text-muted, #94a3b8);
}

.bk-state-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin: 6px 0 0;
}

.bk-state-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 12px;
  border: 1px solid rgba(0, 212, 255, 0.4);
  background: transparent;
  color: #bfefff;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.bk-state-btn--primary {
  background: linear-gradient(180deg, #00d4ff, #0aa6c8);
  border-color: transparent;
  color: #04121a;
}

.bk-state--loading .bk-state-body {
  color: rgba(255, 255, 255, 0.72);
}

/* ---------- footer ---------- */

.bk-foot {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin-top: 22px;
  padding: 20px 0 40px;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--r-text-muted, #94a3b8);
}

.bk-foot p { margin: 0 0 10px; }
.bk-foot p:last-child { margin-bottom: 0; }
.bk-foot a { color: var(--r-accent, #00d4ff); }

.bk-foot-title {
  color: #fff;
  font-weight: 800;
  font-size: 14px;
}

.bk-foot-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 14px;
}

.bk-foot-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 700;
  text-decoration: none;
}

.bk-foot-links a:hover,
.bk-foot-links a:focus-visible { text-decoration: underline; }

.bk-foot-links a[hidden] { display: none; }

.bk-lang-note:empty { display: none; }

/* ---------- accessibility ---------- */

.bk-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10;
  padding: 10px 16px;
  background: #00d4ff;
  color: #04121a;
  font-weight: 800;
  border-radius: 0 0 10px 0;
}

.bk-skip:focus {
  left: 0;
}

.bk-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid #00d4ff;
  outline-offset: 2px;
}

/* ---------- wider screens ---------- */

@media (min-width: 900px) {
  .bk-top { padding: 18px 0 22px; }
  .bk-main { padding: 24px 0 10px; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
}

/* Until booking-app.js has filled the header (it adds .bk-ready to <body>), the main area, the
   footer and the Back link keep their place but stay invisible, so nothing is seen to jump when
   the header grows (audit D-09). If the script never runs, they appear after 2.5 s anyway. */
.bk-page:not(.bk-ready) .bk-main,
.bk-page:not(.bk-ready) .bk-foot,
.bk-page:not(.bk-ready) .bk-back {
  visibility: hidden;
  animation: bk-reveal 0s linear 2.5s forwards;
}
@keyframes bk-reveal { to { visibility: visible; } }