/* ===================================================================
   The Golf Lounge — Booking page stylesheet
   Same brand as the main site: near-black background, lime accent.
   =================================================================== */

:root {
  --color-bg: #121212;
  --color-card: #1a1a1a;
  --color-accent: #d3f357;
  --color-text: #ffffff;
  --color-text-soft: #a8a8a8;
  --color-line: rgba(255,255,255,.08);
  --font-display: 'Poppins', sans-serif;
  --font-body: 'Inter', -apple-system, sans-serif;
  --max-width: 1180px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--color-bg); color: var(--color-text);
  font-family: var(--font-body); line-height: 1.6;
  color-scheme: dark;
}
/* Set directly on every native form control too — some browsers
   don't fully apply an inherited color-scheme to a control's own
   popups (date picker, select dropdown) unless it's declared right
   on the element itself, not just an ancestor. */
input, select, textarea { color-scheme: dark; }
textarea {
  background: var(--color-card); border: 1px solid var(--color-line); color: var(--color-text);
  padding: 13px 16px; border-radius: 8px; font-size: 15px; font-family: var(--font-body);
}
textarea:focus { outline: none; border-color: var(--color-accent); }

/* ---------- Shared form components (used by walk-in form, new-customer
   form, and the calendar page's booking-creation modal) ---------- */
.form-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 560px; }
.form-2col input, .form-2col select, .promo-select {
  background: var(--color-card); border: 1px solid var(--color-line); color: var(--color-text);
  padding: 13px 16px; border-radius: 8px; font-size: 15px; font-family: var(--font-body);
  width: 100%; box-sizing: border-box; height: 48px;
}
.form-2col input:focus, .form-2col select:focus, .promo-select:focus { outline: none; border-color: var(--color-accent); }

.name-autocomplete-wrap { position: relative; }
.phone-split { display: flex; gap: 8px; }
.phone-split .phone-code-input { width: 78px; flex: 0 0 78px; text-align: center; }
.phone-split .name-autocomplete-wrap { flex: 1 1 auto; min-width: 0; }
.name-autocomplete-dropdown {
  display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 50;
  background: var(--color-card); border: 1px solid var(--color-line); border-top: none;
  border-radius: 0 0 8px 8px; max-height: 220px; overflow-y: auto;
}
.name-autocomplete-dropdown.open { display: block; }
.name-autocomplete-item { padding: 10px 16px; cursor: pointer; font-size: 14px; }
.name-autocomplete-item:hover { background: rgba(211,243,87,.08); }
.name-autocomplete-item .ac-phone { color: var(--color-text-soft); font-size: 12px; margin-top: 2px; }

.paid-checkbox {
  display: flex; align-items: center; gap: 10px; color: var(--color-text-soft); font-size: 14.5px;
  white-space: nowrap; padding: 0 4px;
}
.paid-checkbox input { width: 18px; height: 18px; accent-color: var(--color-accent); flex-shrink: 0; cursor: pointer; }

.promo-card { background: var(--color-card); border: 1px solid var(--color-line); border-radius: 10px; padding: 18px; margin-bottom: 14px; }
.promo-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }

.container { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; }

/* ---------- Site header (logo + main nav) ----------
   Same markup/classes as the main site's header (style.css), so the
   customer booking flow keeps the full site nav visible instead of
   just a bare "back to site" link. max-width is hardcoded to 1200px
   here (rather than using this stylesheet's own --max-width, which
   is 1000px for the narrower booking-flow content below it) so the
   header lines up with how it looks everywhere else on the site. */
header.site-header {
  background: var(--color-bg); border-bottom: 1px solid var(--color-line);
  position: sticky; top: 0; z-index: 50;
}
.nav-wrap { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; max-width: 1200px; margin: 0 auto; position: relative; }
.logo { flex-shrink: 0; }
.logo img { height: auto; width: auto; max-height: 44px; max-width: 400px; }
@media (max-width: 480px) {
  .nav-wrap { flex-wrap: wrap; row-gap: 10px; }
  .logo img { max-height: 30px; max-width: 220px; }
}
nav.main-nav { margin: 0 36px; }
nav.main-nav ul { list-style: none; display: flex; gap: 22px; margin: 0; padding: 0; }
nav.main-nav a { font-size: 13px; letter-spacing: .03em; text-transform: uppercase; font-weight: 500; color: var(--color-text); white-space: nowrap; }
nav.main-nav a:hover { color: var(--color-accent); }
.book-now-btn {
  background: transparent; border: 1.5px solid var(--color-accent); color: var(--color-accent);
  padding: 10px 22px; border-radius: 22px; font-size: 14px; text-transform: uppercase; letter-spacing: .04em; font-weight: 600; white-space: nowrap;
}
.book-now-btn:hover { background: var(--color-accent); color: #000; }
.lang-toggle {
  font-size: 14px; font-weight: 600; color: var(--color-text); border: 1px solid var(--color-line);
  border-radius: 20px; padding: 8px 16px; white-space: nowrap; margin-inline-start: 16px;
}
.lang-toggle:hover { border-color: var(--color-accent); color: var(--color-accent); }
.nav-toggle { display: none; background: none; border: none; color: var(--color-text); font-size: 24px; cursor: pointer; }
@media (max-width: 1360px) {
  nav.main-nav { display: none; }
  .nav-toggle { display: block; }
  nav.main-nav.mobile-open {
    display: block; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--color-bg); border-bottom: 1px solid var(--color-line); padding: 8px 0; z-index: 200;
  }
  nav.main-nav.mobile-open ul { flex-direction: column; gap: 0; }
  nav.main-nav.mobile-open li { border-top: 1px solid var(--color-line); }
  nav.main-nav.mobile-open li:first-child { border-top: none; }
  nav.main-nav.mobile-open li a { display: block; padding: 14px 24px; }
}

h1, h2, h3 { font-family: var(--font-display); font-weight: 600; margin: 0; }
a { color: inherit; }

.page-head { text-align: center; padding: 34px 24px 18px; }
.page-head h1 { font-size: clamp(28px, 4vw, 40px); }
.page-head p { color: var(--color-text-soft); margin-top: 10px; }

.booking-type-select { max-width: 640px; margin: 0 auto 40px; }
.type-select-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.type-select-card {
  background: var(--color-card); border: 1px solid var(--color-line); border-radius: 12px;
  padding: 28px 20px; cursor: pointer; text-align: center; display: flex; flex-direction: column;
  align-items: center; gap: 8px; transition: border-color .2s ease, transform .2s ease;
  color: var(--color-text); font-family: var(--font-body);
}
.type-select-card:hover { transform: translateY(-2px); border-color: var(--color-accent); }
.type-select-icon { font-size: 32px; margin-bottom: 4px; }
.type-select-card strong { font-size: 16px; font-family: var(--font-display); }
.back-link { display: inline-block; padding: 24px; color: var(--color-text-soft); font-size: 14px; }
.back-link:hover { color: var(--color-accent); }

/* ---------- Step indicator ---------- */
.steps { display: flex; justify-content: center; gap: 8px; margin: 0 0 26px; flex-wrap: wrap; }
.step-dot {
  padding: 8px 18px; border-radius: 20px; background: var(--color-card);
  border: 1px solid var(--color-line); display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 600; color: var(--color-text-soft); white-space: nowrap;
}
.step-dot.active { background: var(--color-accent); color: var(--color-bg); border-color: var(--color-accent); }
.step-dot.done { background: rgba(211,243,87,.15); color: var(--color-accent); border-color: var(--color-accent); }
.step-dot.clickable { cursor: pointer; }
.step-dot.clickable:hover { border-color: var(--color-accent); }

.booking-step { display: none; padding-bottom: 60px; }
.booking-step.active { display: block; }

/* ---------- Date + bay selection ---------- */
/* These are buttons in function, built as plain divs rather than
   <button> elements (for layout flexibility). Without this, clicking
   them can trigger the browser's native text-selection behavior on
   their emoji/text content — visible as a blinking text cursor
   dropped into the label, since nothing marks this as non-text UI. */
.step-dot.clickable, .date-btn, .bay-card, .hour-btn, .quarter-btn, .cal-cell {
  user-select: none; -webkit-user-select: none;
}

.date-picker { position: relative; margin-bottom: 30px; }
.date-btn {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  background: var(--color-card); border: 1px solid var(--color-line); color: var(--color-text);
  padding: 14px 18px; border-radius: 8px; font-size: 15px; font-family: var(--font-body);
  width: 100%; max-width: 280px; box-sizing: border-box; text-align: left;
}
.date-btn:hover { border-color: var(--color-accent); }
.date-btn .date-icon { font-size: 17px; }
.date-input-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.bay-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(196px, 1fr)); gap: 13px; margin-bottom: 0; }
.bay-card {
  background: var(--color-card); border: 1px solid var(--color-line); border-radius: 12px; overflow: hidden;
  cursor: pointer; transition: border-color .2s ease, transform .2s ease;
}
.bay-card:hover { transform: translateY(-2px); }
.bay-card.selected { border-color: var(--color-accent); background: rgba(211,243,87,.06); }
.bay-card .bay-photo { width: 100%; aspect-ratio: 16/9; object-fit: cover; background: #0d0d0d; display: block; }
.bay-card .bay-photo-placeholder {
  width: 100%; aspect-ratio: 16/9; background: #0d0d0d; display: flex; align-items: center; justify-content: center;
  color: var(--color-text-soft); font-size: 52px; line-height: 1;
}
/* "Any Instructor" cluster: the same golfer icon three times, each
   nudged left over the previous one so they overlap slightly and read
   as a group. The thin dark text-shadow ring gives each figure an edge
   against the one behind it so the overlap stays legible rather than
   merging into a blob. Sized a touch smaller than the single icon so
   the three-wide cluster still fits comfortably in the card. */
.bay-card .bay-photo-placeholder.icon-cluster { gap: 0; }
.bay-card .bay-photo-placeholder.icon-cluster .cluster-icon {
  font-size: 40px; line-height: 1;
  text-shadow: 0 0 4px #0d0d0d, 0 0 4px #0d0d0d, 0 0 4px #0d0d0d;
}
.bay-card .bay-photo-placeholder.icon-cluster .cluster-icon:not(:first-child) { margin-left: -12px; }
.bay-card .bay-card-body { padding: 18px; }
.bay-card .bay-name { font-weight: 600; font-size: 16px; margin-bottom: 4px; }
.bay-card .bay-type { font-size: 12.5px; color: var(--color-accent); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 10px; }
.bay-card .bay-rate { font-size: 14px; color: var(--color-text-soft); }

/* Shown immediately on page load, before the bay list has actually
   arrived — this doesn't make the fetch itself any faster, but a
   blank area for however long that takes reads as "broken," while a
   shape that's clearly "about to be content" reads as "loading." */
.bay-card-skeleton { background: var(--color-card); border: 1px solid var(--color-line); border-radius: 12px; overflow: hidden; }
.bay-card-skeleton .skeleton-photo { width: 100%; aspect-ratio: 16/9; }
.bay-card-skeleton .skeleton-line { height: 14px; border-radius: 4px; margin: 18px 18px 0; }
.bay-card-skeleton .skeleton-line.short { width: 50%; margin-top: 10px; }
.bay-card-skeleton .skeleton-line.shorter { width: 65%; margin: 10px 18px 18px; }
.skeleton-photo, .skeleton-line {
  background: linear-gradient(90deg, var(--color-card) 25%, #262626 50%, var(--color-card) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
}
@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ---------- Time picker: hour, then quarter ---------- */
.hour-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 10px; margin-bottom: 16px; }
.hour-btn {
  background: var(--color-card); border: 1px solid var(--color-line); color: var(--color-text);
  padding: 14px 8px; border-radius: 8px; cursor: pointer; font-size: 14px; font-family: var(--font-body);
  text-align: center; display: flex; flex-direction: column; gap: 2px;
}
.hour-btn:hover:not(.taken) { border-color: var(--color-accent); }
.hour-btn.selected { background: var(--color-accent); color: var(--color-bg); border-color: var(--color-accent); font-weight: 600; }
.hour-btn.taken { opacity: .4; cursor: not-allowed; }
.hour-btn .slot-status { font-size: 10.5px; text-transform: uppercase; letter-spacing: .03em; }
.hour-btn.taken .slot-status { color: #ff8a8a; }
.hour-btn:not(.taken):not(.selected) .slot-status { color: var(--color-text-soft); }

.quarter-row { display: flex; gap: 10px; margin-bottom: 30px; flex-wrap: wrap; }
.quarter-btn {
  background: var(--color-card); border: 1px solid var(--color-line); color: var(--color-text);
  padding: 12px 18px; border-radius: 8px; cursor: pointer; font-size: 14px; font-family: var(--font-body);
}
.quarter-btn:hover:not(.taken) { border-color: var(--color-accent); }
.quarter-btn.selected { background: var(--color-accent); color: var(--color-bg); border-color: var(--color-accent); font-weight: 600; }
.quarter-btn.taken { opacity: .4; cursor: not-allowed; text-decoration: line-through; }
.quarter-btn.placeholder { opacity: .3; cursor: not-allowed; pointer-events: none; }

.duration-row { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.duration-row button {
  width: 36px; height: 36px; border-radius: 8px; background: var(--color-card); border: 1px solid var(--color-line);
  color: var(--color-text); font-size: 18px; cursor: pointer;
}
.duration-row .duration-value { font-size: 16px; font-weight: 600; min-width: 100px; text-align: center; }

.promo-box {
  background: rgba(211,243,87,.08); border: 1px solid rgba(211,243,87,.3); border-radius: 10px;
  padding: 16px 18px; margin-bottom: 30px;
}
.promo-toggle { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; font-size: 14px; color: var(--color-text-soft); }
.promo-toggle input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--color-accent); flex-shrink: 0; }
.promo-toggle strong { color: var(--color-accent); }

/* ---------- Step 2 section indicator ---------- */
/* A thin border around whichever section is currently required,
   toggled via a "current" class in booking.js. Simpler and more
   predictable than a moving arrow — no positioning logic needed. */
.step-section {
  border: 2px solid transparent; border-radius: 12px; padding: 4px;
  margin-bottom: 20px; transition: border-color .2s ease;
}
.step-section.current { border-color: var(--color-accent); }
.step-section .hour-grid, .step-section .quarter-row, .step-section .duration-row { margin-bottom: 0; }

/* The Next button gets a brighter glow once everything required is
   selected, on top of its normal enabled state. */
.btn-primary.ready {
  box-shadow: 0 0 0 3px rgba(211,243,87,.35);
}

/* ---------- Custom calendar dropdown ---------- */
.custom-calendar {
  display: none; position: absolute; top: calc(100% + 6px); inset-inline-start: 0; z-index: 100;
  background: var(--color-card); border: 1px solid var(--color-line); border-radius: 10px;
  padding: 14px; width: 260px; box-shadow: 0 12px 30px rgba(0,0,0,.4);
}
.custom-calendar.open { display: block; }
.cal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.cal-month-label { font-size: 14px; font-weight: 600; }
.cal-nav {
  background: none; border: 1px solid var(--color-line); color: var(--color-text);
  width: 28px; height: 28px; border-radius: 6px; cursor: pointer; font-size: 15px;
}
.cal-nav:hover { border-color: var(--color-accent); color: var(--color-accent); }
.cal-weekdays, .mini-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-weekday { text-align: center; font-size: 11px; color: var(--color-text-soft); padding: 4px 0; }
.cal-cell {
  text-align: center; padding: 7px 0; font-size: 13px; border-radius: 6px; cursor: pointer;
  color: var(--color-text);
}
.cal-cell:hover:not(.disabled):not(.empty) { background: rgba(211,243,87,.12); }
.cal-cell.today { border: 1px solid var(--color-accent); }
.cal-cell.selected { background: var(--color-accent); color: var(--color-bg); font-weight: 700; }
.cal-cell.disabled { color: var(--color-text-soft); opacity: .35; cursor: not-allowed; }
.cal-cell.empty { cursor: default; }

/* ---------- Customer form ---------- */
.form-grid { display: grid; gap: 16px; max-width: 480px; margin-bottom: 24px; }
.form-grid input {
  background: var(--color-card); border: 1px solid var(--color-line); color: var(--color-text);
  padding: 13px 16px; border-radius: 8px; font-size: 15px; font-family: var(--font-body);
}
.form-grid input:focus { outline: none; border-color: var(--color-accent); }

.summary-card { background: var(--color-card); border: 1px solid var(--color-line); border-radius: 12px; padding: 22px; max-width: 480px; margin-bottom: 24px; }

.payment-method-choice { display: flex; flex-direction: column; gap: 10px; max-width: 480px; margin-bottom: 24px; }
.pm-option {
  display: flex; align-items: flex-start; gap: 12px; cursor: pointer;
  background: var(--color-card); border: 1px solid var(--color-line); border-radius: 10px; padding: 16px 18px;
}
.pm-option:has(input:checked) { border-color: var(--color-accent); background: rgba(211,243,87,.06); }
.pm-option input { width: 18px; height: 18px; accent-color: var(--color-accent); margin-top: 2px; flex-shrink: 0; cursor: pointer; }
.pm-sub { font-size: 12.5px; color: var(--color-text-soft); font-weight: 400; }
.summary-row { display: flex; justify-content: space-between; padding: 8px 0; font-size: 14.5px; color: var(--color-text-soft); }
.summary-row.total { border-top: 1px solid var(--color-line); margin-top: 8px; padding-top: 14px; font-size: 17px; font-weight: 600; color: var(--color-text); }
.summary-row.total .amt { color: var(--color-accent); }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 28px; border-radius: 8px; font-weight: 600; font-size: 14.5px; border: 1px solid transparent; cursor: pointer; font-family: var(--font-body); }
.btn-primary { background: var(--color-accent); color: var(--color-bg); }
.btn-primary:hover { transform: translateY(-1px); }
.btn-primary:disabled { opacity: .4; cursor: not-allowed; transform: none; }
.btn-ghost { background: transparent; border-color: var(--color-line); color: var(--color-text); }
.btn-ghost:hover { border-color: var(--color-accent); }

/* Loading state for "Next Step"-style buttons — keeps the button's
   size/text in place (so nothing jumps) but hides the label and shows
   a small spinner, so a slow network response reads as "working" not
   "stuck". Distinct from the plain :disabled look above (used for
   "you haven't picked anything yet" states), which stays as a flat
   dimmed button with no spinner. */
.btn-loading { position: relative; color: transparent !important; pointer-events: none; opacity: 1 !important; transform: none !important; }
.btn-loading::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 16px; height: 16px;
  margin: -8px 0 0 -8px; border-radius: 50%; border: 2px solid transparent;
  animation: btn-spin .65s linear infinite;
}
.btn-primary.btn-loading::after { border-color: color-mix(in srgb, var(--color-bg) 25%, transparent); border-top-color: var(--color-bg); }
.btn-ghost.btn-loading::after { border-color: color-mix(in srgb, var(--color-text) 25%, transparent); border-top-color: var(--color-text); }
@keyframes btn-spin { to { transform: rotate(360deg); } }
.btn-schedule-nav {
  background: var(--color-card); border: 1.5px solid var(--color-accent); color: var(--color-accent);
}
.btn-schedule-nav:hover { background: rgba(211,243,87,.08); transform: translateY(-1px); }
.btn-row { display: flex; gap: 12px; margin-top: 10px; }

/* ---------- Confirmation ---------- */
.confirm-box { text-align: center; padding: 40px 24px; }
.confirm-icon { font-size: 48px; margin-bottom: 16px; }
.confirm-ref { font-family: monospace; background: var(--color-card); padding: 10px 18px; border-radius: 8px; display: inline-block; margin: 16px 0; letter-spacing: .05em; }

.error-msg { background: rgba(220,60,60,.12); border: 1px solid rgba(220,60,60,.3); color: #ff8a8a; padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; font-size: 14px; display: none; }
.inline-hint { color: #ff8a8a; font-size: 13px; margin: -10px 0 16px; }
.error-msg.show { display: block; }

@media (max-width: 640px) {
  .bay-grid, .hour-grid { grid-template-columns: repeat(2, 1fr); }
}


/* ==========================================================================
   Step 1 — toolbar + bottom action bar
   The date control shares a row with the heading instead of taking a block
   of its own, and the action sits in a slim bar pinned to the bottom of the
   viewport, so it's reachable at any scroll position.
   ========================================================================== */
.pick-toolbar { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.pick-toolbar h2 { font-size: 21px; }
.pick-toolbar .date-picker { margin: 0; }
.pick-toolbar .date-btn { max-width: none; width: auto; padding: 9px 16px; }
.toolbar-hint { color: var(--color-text-soft); font-size: 12.5px; margin-left: auto; }

/* Leaves room so the last row of bays is never hidden behind the bar. */
.booking-step { padding-bottom: 104px; }

.action-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  background: rgba(18, 18, 18, .92);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--color-line);
}
.action-bar-inner {
  max-width: var(--max-width); margin: 0 auto; padding: 12px 24px;
  display: flex; align-items: center; gap: 16px;
}
.action-pick { flex: 1; min-width: 0; display: flex; align-items: center; }
.action-pick-empty { color: var(--color-text-soft); font-size: 13.5px; }
.action-pick-photo {
  width: 38px; height: 38px; border-radius: 8px; object-fit: cover;
  margin-right: 11px; flex-shrink: 0; background: #0d0d0d;
}
.action-pick-name { font-family: var(--font-display); font-weight: 600; font-size: 14.5px; }
.action-pick-rate { color: var(--color-accent); font-size: 12.5px; margin-top: 1px; font-variant-numeric: tabular-nums; }
.action-bar-btns { display: flex; gap: 10px; flex-shrink: 0; }

/* ---- Bay cards ---- */
.bay-card .bay-card-body { padding: 12px 13px 13px; }
.bay-card .bay-name { font-family: var(--font-display); font-weight: 600; font-size: 15px; }
.bay-card .bay-type {
  font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--color-text-soft); margin-top: 3px;
}
.bay-card.is-premium .bay-type { color: var(--color-accent); }
.bay-card .bay-rate {
  margin-top: 8px; font-family: var(--font-display); font-weight: 600;
  font-size: 15px; color: var(--color-text); font-variant-numeric: tabular-nums;
}
.bay-card .bay-rate span { font-size: 11.5px; font-weight: 400; color: var(--color-text-soft); }
.bay-card.selected {
  /* Outer ring, not inset: an inset shadow paints under the card's own
     content, so the photo's top corners covered it. */
  box-shadow: 0 0 0 2px var(--color-accent);
}

@media (max-width: 680px) {
  .toolbar-hint { margin-left: 0; width: 100%; }
  .action-bar-inner { padding: 10px 16px; gap: 10px; }
  .action-pick-photo { width: 32px; height: 32px; margin-right: 8px; }
  .action-bar-btns .btn { padding: 10px 14px; font-size: 14px; }
}

/* Shown in place of the bay grid when loading or rendering fails, so the
   page can never sit silently on its loading skeletons. */
.bay-load-error {
  grid-column: 1 / -1;
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  background: var(--color-card); border: 1px solid var(--color-line);
  border-left: 3px solid #C0392B; border-radius: 10px; padding: 18px 20px;
}
.bay-load-error strong { font-family: var(--font-display); font-size: 15px; }
.bay-load-error span { color: var(--color-text-soft); font-size: 13.5px; }
.bay-load-error .btn { margin-top: 4px; }

/* Instructor picks have no photo, so the bottom-bar thumbnail slot shows an
   icon instead of an image. */
.action-pick-icon {
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; background: var(--color-card);
  border: 1px solid var(--color-line);
}

/* ---------- Packages tab: labelled fields that don't cut off their text ---------- */
.pkg-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px 12px; }
.pkg-field { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; color: var(--color-text-soft); min-width: 0; }
.pkg-field > input { width: 100%; }
.pkg-field-wide { grid-column: 1 / -1; }
.btn-sm { padding: 7px 12px; font-size: 13px; }

/* ---------- Lesson packages on the booking page ---------- */
.pkg-card { text-align: left; align-items: stretch; gap: 8px; }
.pkg-card .pkg-price { font-size: 22px; font-weight: 700; color: var(--color-accent); font-family: var(--font-display); }
.pkg-card .pkg-meta { font-size: 13px; color: var(--color-text-soft); }
.pkg-card .pkg-desc { font-size: 13.5px; color: var(--color-text); }
.pkg-card .btn { margin-top: auto; align-self: flex-start; }


/* ---------------------------------------------------------------------------
   The page as the venue built it (booking-page.js)
   Nothing here draws anything by itself: these rules only describe the shapes
   the console can ask for. A venue that turned nothing on matches none of
   them, and the page stays empty.
   --------------------------------------------------------------------------- */
.bp-corners { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 20px 0; max-width:1200px; margin:0 auto; }
.bp-corner { display:flex; align-items:center; min-height:1px; }
.bp-corner:empty { display:none; }
#bp-subs { display:block; }
.bp-sub-line { margin:6px 0 0; color:var(--color-text-soft, var(--text-muted, #a8a8a8)); }
.bp-party { display:inline-flex; align-items:center; gap:8px; font-size:.9rem; color:var(--color-text-soft, #a8a8a8); }
.bp-party-size { background:var(--color-card, #1a1a1a); color:var(--color-text, #fff); border:1px solid var(--line, #3a3a3a); border-radius:8px; padding:7px 10px; font:inherit; min-height:40px; }
.bp-footer { max-width:1200px; margin:30px auto 0; padding:18px 20px 30px; border-top:1px solid var(--line, #3a3a3a); color:var(--color-text-soft, #a8a8a8); font-size:.88rem; text-align:center; }
.bp-footer a { color:inherit; }
.bp-footer-note { margin-top:6px; }

/* What each box shows. The console ticks these; the boxes themselves are
   rendered by booking.js exactly as before. */
.bay-grid.bp-no-photo .bay-photo,
.bay-grid.bp-no-photo .bay-photo-placeholder,
.bay-grid.bp-no-photo .skeleton-photo { display:none; }
.bay-grid.bp-no-name .bay-name { display:none; }
.bay-grid.bp-no-sub .bay-type { display:none; }
.bay-grid.bp-no-price .bay-rate { display:none; }

/* Small boxes: rows of compact tiles, for a room with twenty tables rather
   than four bays. Same markup, same clicks, less of everything else. */
.bay-grid.bp-small { grid-template-columns:repeat(auto-fill, minmax(116px, 1fr)); gap:10px; }
.bay-grid.bp-small .bay-card { min-height:0; }
.bay-grid.bp-small .bay-card-body { padding:12px 10px; text-align:center; }
.bay-grid.bp-small .bay-name { font-size:1rem; }
.bay-grid.bp-small .bay-type { font-size:.72rem; }
.bay-grid.bp-small .bay-rate { font-size:.86rem; }
.bay-grid.bp-small .bay-card-skeleton { min-height:64px; }

/* How many across. Blank in the console means "as many as fit", which is the
   rule above; a number means that many on a wide screen, and the phone still
   decides for itself below 560px, because four boxes across a phone is four
   boxes nobody can read. */
.bay-grid.bp-fixed-row { grid-template-columns:repeat(var(--bp-per-row, 4), minmax(0, 1fr)); }

/* A box too small for the party the customer said they are bringing. Shown
   rather than hidden: "that one seats four" is information, and a box that
   silently disappears looks like a fault. */
.bay-card.is-too-small { opacity:.4; pointer-events:none; filter:saturate(.4); }

/* ---------------------------------------------------------------------------
   Picking a table, and then a time, in one step.

   The two halves sit under one heading: the room (or the grid of cards) and,
   once something is chosen, the times underneath it. The look is deliberate -
   big soft geometry, the venue's own accent used as a material rather than as
   a highlight, and nothing outlined that does not need an outline. A booking
   page is the first thing a customer sees of a venue, so it should look like
   somewhere you would want to eat.
   --------------------------------------------------------------------------- */
.bay-grid.bp-plan-grid { display:block; }

/* --- the card grid --- */
.bay-grid { gap:16px; }
/* The grid of cards, and only the grid. The floor plan's tables are
   .bay-card elements inside a .bay-grid too, so a rule written for the cards
   reaches them: the hover here sets a translucent tint, which on a solid table
   read as the table fading away. The plan draws its own tables below. */
.bay-grid:not(.bp-plan-grid) .bay-card {
  border-radius:22px; border:1.5px solid transparent;
  background:color-mix(in srgb, var(--color-accent, #7c5cff) 9%, transparent);
  transition:transform .18s cubic-bezier(.2,.8,.3,1), background .18s, border-color .18s;
}
.bay-grid:not(.bp-plan-grid) .bay-card:hover { transform:translateY(-4px); background:color-mix(in srgb, var(--color-accent, #7c5cff) 16%, transparent); }
.bay-grid:not(.bp-plan-grid) .bay-card.selected { background:var(--color-accent, #7c5cff); border-color:var(--color-accent, #7c5cff); color:var(--color-bg, #111); }
.bay-grid:not(.bp-plan-grid) .bay-card.selected .bay-name,
.bay-grid:not(.bp-plan-grid) .bay-card.selected .bay-rate,
.bay-grid:not(.bp-plan-grid) .bay-card.selected .bay-type { color:var(--color-bg, #111); }
.bay-grid:not(.bp-plan-grid) .bay-card .bay-card-body { padding:18px 18px 20px; }
.bay-grid:not(.bp-plan-grid) .bay-card .bay-name { font-size:19px; letter-spacing:-.01em; margin-bottom:4px; }
.bay-grid:not(.bp-plan-grid) .bay-card .bay-type { font-size:11px; letter-spacing:.12em; }
.bay-grid:not(.bp-plan-grid) .bay-card .bay-rate { font-size:14px; }

/* --- the room --- */
/* The room is as wide as everything else on the step. It used to be capped
   and centred, which left it narrower than the times underneath it and made
   the two halves read as two different pages. */
.bp-room-live {
  position:relative; width:100%;
  aspect-ratio:100 / var(--bp-ratio, 60);
  border-radius:30px; border:0; overflow:hidden;
  background:color-mix(in srgb, var(--color-accent, #7c5cff) 9%, transparent);
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--color-accent, #7c5cff) 26%, transparent);
}
.bp-room-face { position:absolute; inset:0; z-index:1; }
/* The venue's own picture behind the whole room, slid to wherever it wanted
   it and dimmed so the zones and tables on top stay readable. */
.bp-room-live.has-img { background-size:cover; background-repeat:no-repeat; }
.bp-room-live.has-img::before {
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:rgba(0,0,0,calc(var(--bp-dim, 45) / 100));
}

/* A zone is the quiet layer under the furniture: a soft panel, its name in
   the corner, no outline competing with the tables. */
.bp-zone-live {
  position:absolute; border:0; border-radius:24px;
  background:color-mix(in srgb, var(--color-bg, #111) 42%, transparent);
}
/* A zone the venue gave a colour is tinted with it. The colour tints the zone
   and nothing else - it used to colour the name too, and a dark colour made
   the name unreadable. */
.bp-zone-live.has-tint {
  background:color-mix(in srgb, var(--bp-zone) 20%, color-mix(in srgb, var(--color-bg, #111) 42%, transparent));
}
/* The zone's name sits in a small chip rather than loose on the floor: a
   table placed near the corner used to cut straight through the lettering,
   and a chip under a table reads as two things overlapping instead of as
   broken text. */
.bp-zone-live span {
  position:absolute; top:12px; inset-inline-start:14px; z-index:2;
  padding:3px 10px; border-radius:999px;
  font-family:var(--font-display, inherit); font-size:12px; font-weight:700;
  white-space:nowrap; color:color-mix(in srgb, var(--color-text, #fff) 80%, transparent);
  background:color-mix(in srgb, var(--color-bg, #111) 84%, transparent);
  border:1px solid color-mix(in srgb, var(--color-text, #fff) 14%, transparent);
}
/* A zone can carry the venue's own picture - the terrace, the floor, a plan
   they had drawn. It is dimmed by however much the venue asked for, because a
   photograph at full strength is a lovely picture nobody can book from. */
/* A zone with no picture of its own, standing on a room that has one: the
   quiet fill that reads against a flat floor disappears against a photograph,
   so it is given enough of the page's own background to stay a zone. */
.bp-room-live.has-img .bp-zone-live:not(.has-img) {
  background:color-mix(in srgb, var(--color-bg, #111) 62%, transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--color-text, #fff) 8%, transparent);
}
.bp-zone-live.has-img {
  background-size:cover; background-repeat:no-repeat; overflow:hidden;
  /* Two photographs against each other read as one photograph. A hairline of
     light around the zone and a shadow under it put the zone in front of the
     room rather than in it. */
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--color-text, #fff) 26%, transparent),
    0 18px 34px -18px rgba(0,0,0,.9);
}
.bp-zone-live.has-img::after {
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:rgba(0,0,0,calc(var(--bp-dim, 45) / 100));
}
.bp-zone-live.has-img span { text-shadow:0 1px 6px rgba(0,0,0,.8); color:color-mix(in srgb, var(--color-text, #fff) 85%, transparent); }

/* A table is a piece of furniture: one pale surface with its name on it, the
   seats in a small badge on the corner. The price is not written across it -
   that belongs in the bar at the bottom once a table is chosen. */
.bay-card.bp-table-card {
  position:absolute; transform:translate(-50%,-50%); min-height:0; z-index:2;
  display:flex; align-items:center; justify-content:center;
  padding:0; text-align:center; overflow:visible; border:0; border-radius:16px;
  background:color-mix(in srgb, var(--color-text, #fff) 92%, var(--color-accent, #7c5cff));
  box-shadow:0 8px 18px -10px rgba(0,0,0,.6);
  transition:transform .16s cubic-bezier(.2,.8,.3,1), box-shadow .16s, background .16s;
}
.bay-card.bp-table-card.is-round { border-radius:50%; }
.bay-card.bp-table-card.is-rect { border-radius:20px; }
/* The name is written on the table, so it has to fit the table rather than
   the screen. Sizing it against the viewport is what cut "Table 3" down to
   "Tabl...": a small table on a wide monitor got the big font. Each table is
   its own container instead, so the name is sized from the width of the shape
   it is written on, wraps onto a second line rather than being cut, and a
   circle keeps its text inside the square that fits within it. */
.bay-card.bp-table-card { container-type:inline-size; }
.bay-card.bp-table-card .bay-name {
  font-family:var(--font-display, inherit); font-weight:700; margin:0; letter-spacing:-.02em;
  font-size:clamp(7px, 19cqw, 17px); line-height:1.02;
  padding:0 4px; max-width:96%; text-align:center;
  overflow-wrap:anywhere; word-break:normal; hyphens:auto;
  color:var(--color-bg, #111);
}
/* A wide table has room across and little of it downwards, so its name is
   sized from its height instead of running the width of the top. */
.bay-card.bp-table-card.is-rect .bay-name { font-size:clamp(7px, 11cqw, 17px); max-width:90%; }
/* Only the square inscribed in a circle is usable, which is about seven
   tenths of it. */
.bay-card.bp-table-card.is-round .bay-name { font-size:clamp(7px, 16cqw, 16px); max-width:70%; }
.bay-card.bp-table-card .bp-seats {
  position:absolute; inset-inline-end:-6px; bottom:-6px;
  min-width:21px; height:21px; padding:0 5px; border-radius:999px; border:0;
  display:flex; align-items:center; justify-content:center;
  font-size:.6rem; font-weight:700; line-height:1;
  background:var(--color-bg, #111); color:color-mix(in srgb, var(--color-text, #fff) 80%, transparent);
  box-shadow:0 2px 6px -2px rgba(0,0,0,.8);
}
.bay-card.bp-table-card.is-round .bp-seats { inset-inline-end:-2px; bottom:-2px; }
/* Hovering a table should say "this one", not wash it out: the face keeps its
   colour, the table lifts a little and takes a ring in the venue's accent. */
.bay-card.bp-table-card:hover {
  transform:translate(-50%,-50%) scale(1.04); z-index:3;
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--color-accent, #7c5cff) 45%, transparent),
    0 18px 30px -14px rgba(0,0,0,.75);
}
.bay-card.bp-table-card.selected:hover {
  box-shadow:
    0 0 0 7px color-mix(in srgb, var(--color-accent, #7c5cff) 35%, transparent),
    0 18px 32px -14px rgba(0,0,0,.8);
}
.bay-card.bp-table-card.selected {
  z-index:4; background:var(--color-accent, #7c5cff);
  box-shadow:0 0 0 6px color-mix(in srgb, var(--color-accent, #7c5cff) 30%, transparent), 0 16px 30px -14px rgba(0,0,0,.8);
}
/* The name on the chosen table reads against the accent it is written on:
   white on a lime accent is barely there. The theme says which. */
.bay-card.bp-table-card.selected .bay-name { color:var(--accent-text, #fff); }
.bay-card.bp-table-card.selected .bp-seats { background:var(--accent-text, #fff); color:var(--color-accent, #7c5cff); }

/* Tables the venue has not placed yet are still bookable: a row under the
   room, so a half-drawn plan never hides a table from a customer. */
.bp-waiting-live { display:flex; flex-wrap:wrap; gap:10px; margin:14px 0 0; }
.bp-waiting-live .bay-card.bp-loose {
  position:static; transform:none; min-width:104px; padding:12px 16px; border-radius:16px;
  display:flex; align-items:center; gap:8px;
}
.bp-waiting-live .bay-card.bp-loose .bp-seats { position:static; inset:auto; }

/* The row under the room: the swipe hint on a phone, and a short legend. */
.bp-plan-foot {
  margin:12px 0 0; display:flex; flex-wrap:wrap; gap:8px 18px;
  align-items:center; justify-content:space-between;
  font-size:.82rem; color:color-mix(in srgb, var(--color-text, #fff) 62%, transparent);
}
.bp-legend { display:inline-flex; align-items:center; gap:7px; flex-wrap:wrap; }
.bp-legend i {
  width:13px; height:13px; border-radius:5px; display:inline-block; margin-inline-start:9px; border:0;
  background:color-mix(in srgb, var(--color-text, #fff) 80%, transparent);
}
.bp-legend i:first-child { margin-inline-start:0; }
.bp-legend i.is-picked { background:var(--color-accent, #7c5cff); }
.bp-legend i.is-small { opacity:.35; }

/* The hint only means anything where the room actually scrolls. */
.bp-plan-swipe { display:none; }

/* --- the time half of the step --- */
.pick-time { margin-top:26px; }
.pick-time-title { font-size:24px; letter-spacing:-.02em; margin:0 0 16px; }
.pick-time-sub {
  font-size:14px; font-weight:700; margin:22px 0 12px;
  color:color-mix(in srgb, var(--color-text, #fff) 55%, transparent);
}
.pick-time-note { display:none; }
.pick-time.is-loading { opacity:.45; pointer-events:none; }
/* The boxes that used to be drawn around each part of the time picker are
   gone: they were a wireframe showing through the design. */
.step-section { border:0; padding:0; background:none; margin:0; }
.hour-grid { grid-template-columns:repeat(auto-fill, minmax(96px, 1fr)); gap:10px; }
.hour-btn {
  border:0; border-radius:16px; padding:16px 8px; font-size:15px; font-weight:600;
  background:color-mix(in srgb, var(--color-accent, #7c5cff) 9%, transparent); color:var(--color-text, #fff);
}
.hour-btn:hover:not(.taken) { background:color-mix(in srgb, var(--color-accent, #7c5cff) 16%, transparent); border-color:transparent; }
.hour-btn.selected { background:var(--color-accent, #7c5cff); color:var(--color-bg, #111); }
.hour-btn.taken { opacity:.3; }
.hour-btn .slot-status { font-size:9.5px; letter-spacing:.1em; }
.quarter-row { gap:10px; margin-bottom:0; }
.quarter-btn {
  border:0; border-radius:999px; padding:11px 20px; font-size:14px; font-weight:600;
  background:color-mix(in srgb, var(--color-accent, #7c5cff) 9%, transparent);
}
.quarter-btn.selected { background:var(--color-accent, #7c5cff); color:var(--color-bg, #111); }
.duration-row button {
  width:46px; height:46px; border-radius:16px; border:0; font-size:19px; color:var(--color-text, #fff);
  background:color-mix(in srgb, var(--color-accent, #7c5cff) 9%, transparent);
}
.duration-row .duration-value { font-size:17px; min-width:96px; }
.btn { border-radius:16px; }

/* On a phone a room with twenty tables cannot be squeezed into 360px and
   still be readable, so the room keeps a workable width and the page lets it
   be swiped sideways. The proportions stay exactly as the venue drew them. */
@media (max-width: 560px) {
  .bay-grid.bp-plan-grid { overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .bp-room-live { min-width:520px; border-radius:22px; }
  .bay-card.bp-table-card .bay-name { font-size:.7rem; }
  .bp-plan-swipe { display:block; }
}


/* Free to book: no prices, no totals, nothing about paying. */
html.bp-free .bay-rate,
html.bp-free .summary-row.total,
html.bp-free #confirm-payment-note { display:none; }
/* A venue that books for nothing does not ask how the customer would like to
   pay. The rule is !important because the choice is shown and hidden from
   script elsewhere, and a venue's own setting outranks that. */
html.bp-free #payment-method-choice,
html.bp-free #golf-package-option { display:none !important; }

/* A box with no photo simply has no photo. "No photo yet" is a note to the
   venue about work it has not done, and it was being shown to its customers. */
.bay-photo-placeholder { display:none; }

/* Whatever the venue chose, a phone lays the boxes out one or two across. */
@media (max-width: 560px) {
  .bay-grid.bp-fixed-row { grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); }
}

/* ---------------------------------------------------------------------------
   A centred dialog, for the staff pages
   ---------------------------------------------------------------------------
   admin.js builds the Edit Booking dialog as .modal-backdrop > .modal. Those
   two class names were only ever defined in pos/app.css, which the admin and
   calendar pages do not load, so the dialog arrived as an unstyled block at
   the end of <body>: bottom-left, no overlay, no centring, and nothing to stop
   a second copy appearing behind the first. It lives here instead, in the
   stylesheet both of those pages already load.

   Named for the --color-* tokens themes.css sets, not the --surface/--line
   pair pos/app.css uses, because that is what these pages are themed with.
   --------------------------------------------------------------------------- */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  background: rgba(0, 0, 0, .55);
  overflow-y: auto;
}
.modal {
  background: var(--color-card, #1a1a1a);
  border: 1px solid var(--color-line, #3a3a3a);
  border-radius: 14px; padding: 24px 26px;
  width: 440px; max-width: 100%; max-height: 85vh; overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .45);
}
.modal h3 { margin: 0 0 16px; font-family: var(--font-display, inherit); font-size: 1.15rem; }
.modal .form-row { display: flex; gap: 10px; margin-bottom: 12px; }
.modal .form-row:last-child { margin-bottom: 0; margin-top: 18px; }
.modal input, .modal select, .modal textarea {
  background: var(--color-bg, #121212); color: var(--color-text, #fff);
  border: 1px solid var(--color-line, #3a3a3a); border-radius: 8px;
  padding: 10px 12px; font: inherit; font-size: .95rem; min-width: 0;
}
.modal textarea { resize: vertical; }
@media (max-width: 520px) {
  .modal { padding: 20px 18px; }
  .modal .form-row { flex-wrap: wrap; }
}