/* ==========================================================================
   Greenwood BCC — Visual Booking Grid
   Loaded on /book (public) and /portal/book (members). Extends the v2 design
   system in site.css and reuses its tokens; nothing here redefines a brand
   colour, so a future palette change in site.css flows through automatically.

   ACCESSIBILITY NOTE ON GREEN/RED
   ------------------------------
   The brief asks for green = available and red = booked. Colour alone is not
   sufficient — roughly 1 in 12 men has a red/green colour vision deficiency,
   and to them a pure green/red grid is two identical greys. Every slot state
   therefore carries THREE cues: colour, a distinct pattern/opacity treatment,
   and a text label exposed to screen readers via aria-label. Booked slots also
   use a diagonal hatch so they remain distinguishable in greyscale and when
   printed.
   ========================================================================== */

:root {
  --bk-available:       #2f6b4f;
  --bk-available-bg:    #e8f1ec;
  --bk-available-hover: #d3e7dc;
  --bk-booked:          #a8402c;
  --bk-booked-bg:       #fbeae5;
  --bk-buffer:          #9a6a1f;
  --bk-buffer-bg:       #fdf1dc;
  --bk-inactive:        rgba(43, 48, 51, 0.35);
  --bk-inactive-bg:     rgba(43, 48, 51, 0.05);
  --bk-selected:        var(--gw-dark, #2b3033);
  --bk-slot-h:          38px;
  --bk-label-w:         210px;
}

/* -------------------------------------------------- shell */
.bk-app { display: grid; grid-template-columns: 1fr 340px; gap: 28px; align-items: start; }
@media (max-width: 1080px) { .bk-app { grid-template-columns: 1fr; } }

.bk-panel {
  background: var(--gw-white, #ffffff);
  border: 1px solid var(--gw-border-soft, rgba(43,48,51,0.10));
  border-radius: var(--gw-radius-lg, 16px);
  box-shadow: var(--gw-shadow-sm, 0 2px 8px rgba(43,48,51,0.08));
  padding: 22px;
}
.bk-panel + .bk-panel { margin-top: 20px; }
.bk-panel h3 { font-size: 1.02rem; margin: 0 0 14px; }

/* -------------------------------------------------- toolbar */
.bk-toolbar {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end;
  margin-bottom: 20px; padding-bottom: 18px;
  border-bottom: 1px solid var(--gw-border-soft, rgba(43,48,51,0.10));
}
.bk-field { display: flex; flex-direction: column; gap: 6px; min-width: 150px; }
.bk-field label { font-size: 0.76rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--gw-text-soft, rgba(43,48,51,0.68)); }
.bk-field select, .bk-field input {
  font: 400 0.92rem var(--gw-font-sans, "Host Grotesk",system-ui,sans-serif);
  padding: 9px 11px; border: 1px solid var(--gw-border, rgba(43,48,51,0.16)); border-radius: var(--gw-radius-sm, 4px);
  background: var(--gw-white, #ffffff); color: var(--gw-dark, #2b3033);
}
.bk-field select:focus, .bk-field input:focus { outline: 2px solid var(--gw-taupe, #9f8781); outline-offset: 1px; }

/* -------------------------------------------------- calendar
   A four-week grid, not a scrolling strip: a single horizontal row hides most
   of the month behind a drag gesture, which is awkward with a mouse and worse
   on touch. Seven columns also let the customer read the shape of a week and
   spot weekends at a glance. */
.bk-datestrip { display: block; padding: 4px 0 10px; }

.bk-cal-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.bk-cal-title {
  font-family: var(--gw-font-serif, "Gowun Batang", Georgia, serif);
  font-size: 1.02rem; font-weight: 600; color: var(--gw-dark, #2b3033);
}
.bk-cal-nav {
  width: 32px; height: 32px; flex: 0 0 auto; cursor: pointer; font-size: 1.15rem; line-height: 1;
  border: 1px solid var(--gw-border, rgba(43,48,51,0.16)); border-radius: var(--gw-radius-sm, 4px);
  background: var(--gw-white, #fff); color: var(--gw-dark, #2b3033);
}
.bk-cal-nav:hover:not(:disabled) { border-color: var(--gw-taupe, #9f8781); background: var(--gw-cream-light, #fff5eb); }
.bk-cal-nav:disabled { opacity: .3; cursor: not-allowed; }

.bk-cal-dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 6px; }
.bk-cal-dow span {
  text-align: center; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--gw-text-soft, rgba(43,48,51,0.68));
}

.bk-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.bk-cal-day {
  position: relative; padding: 9px 4px 7px; text-align: center; cursor: pointer;
  border: 1px solid var(--gw-border, rgba(43,48,51,0.16)); border-radius: var(--gw-radius-md, 8px);
  background: var(--gw-white, #fff); transition: background .12s ease, border-color .12s ease;
  font-family: var(--gw-font-sans, "Host Grotesk", system-ui, sans-serif); min-height: 46px;
}
.bk-cal-day:hover:not(:disabled) { border-color: var(--gw-taupe, #9f8781); background: var(--gw-cream-light, #fff5eb); }
.bk-cal-day:focus-visible { outline: 2px solid var(--gw-dark, #2b3033); outline-offset: 1px; }
.bk-cal-num { display: block; font-size: 0.98rem; font-weight: 600; line-height: 1.15; }
.bk-cal-mon {
  display: block; font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--gw-taupe, #9f8781); font-weight: 600;
}
.bk-cal-day.is-today { border-color: var(--gw-taupe, #9f8781); border-width: 2px; }
.bk-cal-day[aria-pressed="true"] {
  background: var(--gw-dark, #2b3033); border-color: var(--gw-dark, #2b3033); color: var(--gw-white, #fff);
}
.bk-cal-day[aria-pressed="true"] .bk-cal-mon { color: rgba(255,255,255,0.78); }
.bk-cal-day:disabled { opacity: .34; cursor: not-allowed; background: var(--bk-inactive-bg); }
.bk-cal-day .bk-dot { display: block; width: 5px; height: 5px; border-radius: 50%; margin: 4px auto 0; background: var(--bk-available); }
.bk-cal-day .bk-dot.limited { background: var(--bk-buffer); }
.bk-cal-day .bk-dot.none    { background: var(--bk-booked); }
.bk-cal-day[aria-pressed="true"] .bk-dot { background: var(--gw-white, #fff); }

/* -------------------------------------------------- legend */
.bk-legend { display: flex; flex-wrap: wrap; gap: 16px; margin: 16px 0; font-size: 0.8rem; color: var(--gw-text-soft, rgba(43,48,51,0.68)); }
.bk-legend span { display: inline-flex; align-items: center; gap: 7px; }
.bk-swatch { width: 15px; height: 15px; border-radius: 3px; border: 1px solid rgba(0,0,0,.12); flex: 0 0 auto; }
.bk-swatch.available { background: var(--bk-available-bg); border-color: var(--bk-available); }
.bk-swatch.booked    { background: var(--bk-booked-bg); border-color: var(--bk-booked);
  background-image: repeating-linear-gradient(45deg, transparent, transparent 3px, rgba(168,64,44,.32) 3px, rgba(168,64,44,.32) 5px); }
.bk-swatch.buffer    { background: var(--bk-buffer-bg); border-color: var(--bk-buffer); }
.bk-swatch.inactive  { background: var(--bk-inactive-bg); border-color: var(--bk-inactive); }
.bk-swatch.selected  { background: var(--bk-selected); border-color: var(--bk-selected); }

/* -------------------------------------------------- grid */
.bk-gridwrap { overflow-x: auto; border: 1px solid var(--gw-border-soft, rgba(43,48,51,0.10)); border-radius: var(--gw-radius-md, 8px); }
.bk-grid { min-width: 760px; }
.bk-emptyrow { flex: 1 1 auto; min-width: 0; }

/* The hour ruler MUST use the identical three-column flex structure as a data
   row -- label gutter, elastic slot track, free-count gutter -- or the times
   drift away from the cells they label. It previously faked the label gutter
   with `padding-left` and ignored the free-count column entirely, so the ruler
   track was 62px wider than the slot track; the drift accumulated left-to-right
   and a click under the "8pm" caption landed on 10pm. Spacer elements, not
   padding, keep the two tracks identical by construction. */
.bk-hours {
  display: flex; background: var(--gw-cream-light, #fff5eb);
  border-bottom: 1px solid var(--gw-border-soft, rgba(43,48,51,0.10));
  position: sticky; top: 0; z-index: 3;
}
/* Mirrors .bk-rowlabel's box exactly. */
.bk-hours-gutter {
  width: var(--bk-label-w); flex: 0 0 var(--bk-label-w); min-width: 0;
  border-right: 1px solid var(--gw-border-soft, rgba(43,48,51,0.10));
  background: var(--gw-cream-light, #fff5eb);
  position: sticky; left: 0; z-index: 2;
}
/* Mirrors .bk-slots. */
.bk-hours-track { display: flex; flex: 1 1 auto; min-width: 0; }
/* Mirrors .bk-freecount. */
.bk-hours-tail { flex: 0 0 62px; }
.bk-hour {
  flex: 1 0 0; min-width: 0; font-size: 0.68rem; color: var(--gw-text-soft, rgba(43,48,51,0.68));
  padding: 7px 0 6px 5px;
  border-left: 1px solid var(--gw-border-soft, rgba(43,48,51,0.10)); white-space: nowrap;
}
/* Labels are drawn only on the hour, but every half-hour cell still needs to
   exist so the ruler has the same cell count as the slot row. Let the caption
   overflow its own cell instead of squeezing the cells unevenly. */
.bk-hour > span { display: inline-block; pointer-events: none; }

.bk-row { display: flex; border-bottom: 1px solid var(--gw-border-soft, rgba(43,48,51,0.10)); transition: background .1s ease; }
.bk-row:hover { background: rgba(255,235,213,0.28); }
.bk-row:last-child { border-bottom: none; }
/* This block used to be written as `.bk-row:hover .bk-rowlabel`, which meant the
   label had NO width at all until the pointer was over the row: it shrank to fit
   the facility name, so every row started its slot track at a different x and
   none of them lined up with the ruler. The width is structural, not a hover
   affordance. */
.bk-rowlabel {
  width: var(--bk-label-w); flex: 0 0 var(--bk-label-w); padding: 9px 14px;
  border-right: 1px solid var(--gw-border-soft, rgba(43,48,51,0.10)); background: var(--gw-white, #fff);
  position: sticky; left: 0; z-index: 2; min-width: 0;
}
.bk-row:hover .bk-rowlabel { background: var(--gw-cream-light, #fff5eb); }
/* Single line, ellipsised. The previous two-line wrap ("Private Room / Focus
   Cabin (1-2) - up to 2") made every row 3 lines tall, which is what turned a
   long facility list into an endless page. */
.bk-rowlabel .bk-name {
  font-weight: 600; font-size: 0.88rem; display: block; line-height: 1.35;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bk-rowlabel .bk-sub {
  display: flex; align-items: center; gap: 6px; margin-top: 3px; min-width: 0;
}
.bk-rowlabel .bk-type {
  font-size: 0.72rem; color: var(--gw-text-soft, rgba(43,48,51,0.68));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Capacity as a compact chip rather than the words "up to N". */
.bk-rowlabel .bk-cap {
  flex: 0 0 auto; font-size: 0.68rem; font-weight: 600; line-height: 1;
  padding: 3px 6px; border-radius: 3px;
  background: var(--gw-cream, #ffebd5); color: var(--gw-dark, #2b3033);
}
.bk-rowlabel .bk-cap::before { content: '\2264 '; opacity: .65; }
.bk-rowlabel .bk-tag {
  display: inline-block; margin-top: 4px; font-size: 0.6rem; text-transform: uppercase;
  letter-spacing: 0.05em; padding: 2px 5px; border-radius: 3px;
  background: var(--bk-buffer); color: #4A3105; font-weight: 600;
}

/* Free-slot count: lets a customer scan a long list without reading the timeline. */
.bk-freecount {
  flex: 0 0 62px; display: flex; align-items: center; justify-content: flex-end;
  padding-right: 12px; font-size: 0.72rem; font-weight: 600;
  color: var(--bk-available-ink); white-space: nowrap;
}
.bk-freecount.is-none { color: var(--gw-text-soft, rgba(43,48,51,0.68)); font-weight: 400; }

/* -------------------------------------------------- session blocks
   A session-mode facility is sold as whole blocks (8am-12pm and so on). Each block
   still occupies one cell per ruler tick -- that is what keeps the hour ruler aligned
   -- so the "single bar" look is achieved by suppressing the dividers BETWEEN cells of
   the same block, not by making one wide cell. */
.bk-slot--sess { border-left-color: transparent; }
.bk-slot--sess.is-sess-start {
  border-left: 1px solid var(--gw-border-soft, rgba(43,48,51,0.10));
  border-top-left-radius: 4px; border-bottom-left-radius: 4px;
}
.bk-slot--sess.is-sess-end {
  border-right: 1px solid var(--gw-border-soft, rgba(43,48,51,0.10));
  border-top-right-radius: 4px; border-bottom-right-radius: 4px;
}
/* The block name is printed once, at the start cell, and allowed to overflow across
   its own block. pointer-events:none so it never swallows the click. */
.bk-sesslabel {
  position: absolute; left: 8px; top: 50%; transform: translateY(-50%);
  font-size: 0.72rem; font-weight: 600; white-space: nowrap;
  pointer-events: none; color: var(--gw-dark, #2b3033);
}
.bk-slot--sess[data-status="booked"] .bk-sesslabel,
.bk-slot--sess[data-selected="1"] .bk-sesslabel { color: #fff; }
.bk-slot--sess[data-status="closed"] .bk-sesslabel { display: none; }
/* Hovering any cell of a block should light the WHOLE block, because clicking any of
   them selects the whole block. Handled by the row-level hover plus the shared status. */
@media (max-width: 700px) { .bk-sesslabel { display: none; } }

.bk-slots { display: flex; flex: 1 1 auto; }
.bk-slot {
  flex: 1 0 0; height: var(--bk-slot-h); border-left: 1px solid var(--gw-border-soft, rgba(43,48,51,0.10));
  padding: 0; cursor: pointer; position: relative; transition: background .1s ease;
  background: var(--bk-available-bg); font: inherit;
}
.bk-slot:hover:not(:disabled) { background: var(--bk-available-hover); }
.bk-slot:focus-visible { outline: 2px solid var(--gw-dark, #2b3033); outline-offset: -2px; z-index: 3; }

.bk-slot[data-status="booked"] {
  background: var(--bk-booked-bg); cursor: not-allowed;
  background-image: repeating-linear-gradient(45deg, transparent, transparent 4px, rgba(168,64,44,.28) 4px, rgba(168,64,44,.28) 7px);
}
.bk-slot[data-status="buffer"] { background: var(--bk-buffer-bg); cursor: not-allowed; }
.bk-slot[data-status="past"],
.bk-slot[data-status="closed"],
.bk-slot[data-status="too_far"],
.bk-slot[data-status="blocked"] { background: var(--bk-inactive-bg); cursor: not-allowed; }
.bk-slot[data-status="blocked"] {
  background-image: repeating-linear-gradient(-45deg, transparent, transparent 4px, rgba(43,48,51,.14) 4px, rgba(43,48,51,.14) 7px);
}
.bk-slot[data-own="1"]::after {
  content: ''; position: absolute; inset: 3px; border: 2px solid var(--bk-booked);
  border-radius: 2px; pointer-events: none;
}
.bk-slot[data-selected="1"] { background: var(--bk-selected) !important; background-image: none !important; }

.bk-emptyrow { padding: 12px 14px; font-size: 0.82rem; color: var(--gw-text-soft, rgba(43,48,51,0.68)); flex: 1 1 auto; }

/* -------------------------------------------------- summary panel */
.bk-summary dl { display: grid; grid-template-columns: auto 1fr; gap: 7px 14px; margin: 0 0 16px; font-size: 0.9rem; }
.bk-summary dt { color: var(--gw-text-soft, rgba(43,48,51,0.68)); }
.bk-summary dd { margin: 0; font-weight: 600; text-align: right; }
.bk-price { font-family: var(--gw-font-serif, "Gowun Batang",Georgia,serif); font-size: 1.7rem; line-height: 1.2; }
.bk-price small { font-size: 0.72rem; color: var(--gw-text-soft, rgba(43,48,51,0.68)); font-family: var(--gw-font-sans, "Host Grotesk",system-ui,sans-serif); display: block; font-weight: 400; }
.bk-empty { color: var(--gw-text-soft, rgba(43,48,51,0.68)); font-size: 0.88rem; text-align: center; padding: 26px 8px; }

.bk-note { font-size: 0.8rem; color: var(--gw-text-soft, rgba(43,48,51,0.68)); line-height: 1.5; margin-top: 12px; }
.bk-alert { padding: 11px 13px; border-radius: var(--gw-radius-sm, 4px); font-size: 0.85rem; margin-bottom: 14px; }
.bk-alert.warn  { background: var(--bk-buffer-bg); color: var(--bk-buffer); border: 1px solid rgba(154,106,31,.3); }
.bk-alert.error { background: var(--gw-error-bg, #fbeae5); color: var(--gw-error, #a8402c); border: 1px solid rgba(168,64,44,.3); }
.bk-alert.info  { background: var(--gw-cream-light, #fff5eb); color: var(--gw-dark, #2b3033); border: 1px solid var(--gw-border-soft, rgba(43,48,51,0.10)); }

.bk-loading { position: relative; opacity: .55; pointer-events: none; }
.bk-loading::after {
  content: ''; position: absolute; inset: 0; margin: auto; width: 26px; height: 26px;
  border: 3px solid var(--gw-border, rgba(43,48,51,0.16)); border-top-color: var(--gw-dark, #2b3033);
  border-radius: 50%; animation: bk-spin .7s linear infinite;
}
@keyframes bk-spin { to { transform: rotate(360deg); } }

/* Respect a user's reduced-motion preference — the spinner is decorative. */
@media (prefers-reduced-motion: reduce) {
  .bk-loading::after { animation: none; }
  .bk-cal-day:hover:not(:disabled) { transition: none; }
}

/* -------------------------------------------------- mobile */
@media (max-width: 700px) {
  :root { --bk-label-w: 132px; --bk-slot-h: 42px; }
  .bk-panel { padding: 16px; }
  .bk-rowlabel .bk-meta { display: none; }
  .bk-cal-grid, .bk-cal-dow { gap: 4px; }
  .bk-cal-day { padding: 7px 2px 6px; min-height: 42px; }
  .bk-cal-num { font-size: 0.88rem; }
  .bk-toolbar { gap: 10px; }
  .bk-field { min-width: 118px; flex: 1 1 auto; }
}

/* Sticky summary on desktop so the price stays visible while scrolling a long grid. */
@media (min-width: 1081px) {
  .bk-side { position: sticky; top: 96px; }
}

/* ==========================================================================
   Result bar, pagination and filter chrome
   Added when the facility list grew past what one screen can hold.
   ========================================================================== */

/* -------------------------------------------------- toolbar refinements */
.bk-field-check { justify-content: flex-end; padding-bottom: 2px; }
.bk-switch {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  font-size: 0.86rem; color: var(--gw-dark, #2b3033); white-space: nowrap;
  padding: 9px 12px; border: 1px solid var(--gw-border, rgba(43,48,51,0.16));
  border-radius: var(--gw-radius-sm, 4px); background: var(--gw-white, #fff);
  transition: border-color .12s ease, background .12s ease;
}
.bk-switch:hover { border-color: var(--gw-taupe, #9f8781); }
.bk-switch input { accent-color: var(--bk-available); width: 15px; height: 15px; }
.bk-switch:has(input:checked) { border-color: var(--bk-available); background: rgba(63,125,52,0.07); }

/* -------------------------------------------------- result bar */
.bk-resultbar {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: 10px; margin: 14px 0 10px; min-height: 24px;
}
.bk-count { font-size: 0.88rem; color: var(--gw-text-soft, rgba(43,48,51,0.68)); }
.bk-count strong { color: var(--gw-dark, #2b3033); font-weight: 600; }
.bk-fchips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.bk-fchip {
  font-size: 0.72rem; font-weight: 500; padding: 3px 9px; border-radius: 999px;
  background: var(--gw-cream, #ffebd5); color: var(--gw-dark, #2b3033);
}
.bk-clearf {
  font: inherit; font-size: 0.74rem; background: none; border: none; cursor: pointer;
  color: var(--gw-text-soft, rgba(43,48,51,0.68)); text-decoration: underline;
  text-underline-offset: 2px; padding: 3px 4px;
}
.bk-clearf:hover { color: var(--gw-dark, #2b3033); }

/* -------------------------------------------------- pagination */
.bk-pagerbar {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: 12px; margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--gw-border-soft, rgba(43,48,51,0.10));
}
.bk-pagerbar:empty { display: none; }
.bk-pager { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.bk-pager:empty { display: none; }
.bk-pgbtn {
  min-width: 34px; height: 34px; padding: 0 9px; cursor: pointer;
  font: 500 0.84rem/1 var(--gw-font-sans, "Host Grotesk", system-ui, sans-serif);
  color: var(--gw-dark, #2b3033); background: var(--gw-white, #fff);
  border: 1px solid var(--gw-border, rgba(43,48,51,0.16)); border-radius: var(--gw-radius-sm, 4px);
  transition: all .12s ease;
}
.bk-pgbtn:hover:not(:disabled):not(.is-current) {
  border-color: var(--gw-taupe, #9f8781); background: var(--gw-cream-light, #fff5eb);
}
.bk-pgbtn:focus-visible { outline: 2px solid var(--gw-dark, #2b3033); outline-offset: 1px; }
/* Current page is filled, not merely tinted — at a glance you should not have to
   compare shades to know where you are. */
.bk-pgbtn.is-current {
  background: var(--gw-dark, #2b3033); border-color: var(--gw-dark, #2b3033);
  color: #fff; font-weight: 600; cursor: default;
}
.bk-pgbtn:disabled { opacity: .32; cursor: not-allowed; }
.bk-pgdots { padding: 0 2px; color: var(--gw-text-soft, rgba(43,48,51,0.68)); user-select: none; }

.bk-perpage {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 0.8rem; color: var(--gw-text-soft, rgba(43,48,51,0.68));
}
.bk-perpage select {
  font: inherit; font-size: 0.82rem; padding: 5px 8px;
  border: 1px solid var(--gw-border, rgba(43,48,51,0.16)); border-radius: var(--gw-radius-sm, 4px);
  background: var(--gw-white, #fff); color: var(--gw-dark, #2b3033);
}

/* -------------------------------------------------- empty + loading states */
.bk-noresults { padding: 44px 24px; text-align: center; }
.bk-nr-title { font-family: var(--gw-font-serif, "Gowun Batang", Georgia, serif); font-size: 1.06rem; margin: 0 0 6px; }
.bk-nr-hint { font-size: 0.86rem; color: var(--gw-text-soft, rgba(43,48,51,0.68)); margin: 0 0 16px; }

/* Skeleton mirrors the real row shape so the layout does not jump when data lands. */
.bk-skeleton { padding: 0; }
.bk-skrow {
  display: flex; align-items: center; gap: 0; height: 42px;
  border-bottom: 1px solid var(--gw-border-soft, rgba(43,48,51,0.10));
}
.bk-skrow:last-child { border-bottom: none; }
.bk-skcell {
  width: var(--bk-label-w); flex: 0 0 var(--bk-label-w); height: 100%;
  border-right: 1px solid var(--gw-border-soft, rgba(43,48,51,0.10));
  background: linear-gradient(90deg, rgba(43,48,51,0.05) 12px, transparent 12px) no-repeat 14px center/120px 11px;
}
.bk-skbar {
  flex: 1 1 auto; height: 26px; margin: 0 6px; border-radius: 3px;
  background: linear-gradient(90deg, rgba(43,48,51,0.045) 25%, rgba(43,48,51,0.085) 37%, rgba(43,48,51,0.045) 63%);
  background-size: 400% 100%; animation: bk-shimmer 1.3s ease-in-out infinite;
}
@keyframes bk-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .bk-skbar { animation: none; } }

/* -------------------------------------------------- mobile */
@media (max-width: 700px) {
  .bk-resultbar { margin: 12px 0 8px; }
  /* Keep these two together: hiding one without the other desynchronises the
     ruler from the slot track by exactly the free-count width. */
  .bk-freecount { display: none; }
  .bk-hours-tail { display: none; }
  .bk-pagerbar { justify-content: center; }
  .bk-perpage { width: 100%; justify-content: center; }
  .bk-field-check { justify-content: flex-start; }
}


/* ==================================================================================
   Member panel
   Shown only to a signed-in member. Two credit pools are reported separately because
   they behave differently: the plan allowance resets and does not roll over, while
   top-up credit carries a per-purchase expiry. One combined number would hide the
   part the member is about to lose.
   ================================================================================== */
.bk-member {
  border: 1px solid var(--gw-border-soft, rgba(43,48,51,0.10));
  border-left: 3px solid var(--bk-available, #2f6b4f);
  border-radius: 6px; background: var(--gw-white, #fff);
  padding: 16px 18px; margin: 0 0 18px;
}
.bk-member-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.bk-member-badge {
  flex: 0 0 auto; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; padding: 3px 7px; border-radius: 3px;
  background: var(--bk-available, #2f6b4f); color: #fff;
}
.bk-member-hello { font-size: 0.86rem; color: var(--gw-text-soft, rgba(43,48,51,0.68)); }

.bk-member-grid { display: flex; gap: 10px; flex-wrap: wrap; }
.bk-mcard {
  flex: 1 1 150px; min-width: 0; display: flex; flex-direction: column; gap: 2px;
  padding: 10px 12px; border-radius: 5px;
  background: var(--gw-cream-light, #fff5eb);
}
.bk-mcard-k { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em;
              color: var(--gw-text-soft, rgba(43,48,51,0.68)); }
.bk-mcard-v { font-size: 1.28rem; font-weight: 700; line-height: 1.2;
              font-variant-numeric: tabular-nums; }
.bk-mcard-v.is-total { color: var(--bk-available, #2f6b4f); }
.bk-mcard-s { font-size: 0.72rem; color: var(--gw-text-soft, rgba(43,48,51,0.68)); }
.bk-mcard-s.is-warn { color: var(--bk-booked, #a8402c); font-weight: 600; }

.bk-member-warn {
  margin: 12px 0 0; padding: 9px 11px; border-radius: 4px;
  background: var(--bk-buffer-bg, #fdf1dc); border-left: 3px solid var(--bk-buffer, #9a6a1f);
  font-size: 0.8rem;
}

.bk-mine { margin-top: 16px; padding-top: 14px;
           border-top: 1px solid var(--gw-border-soft, rgba(43,48,51,0.10)); }
.bk-mine-h { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em;
             color: var(--gw-text-soft, rgba(43,48,51,0.68)); margin: 0 0 8px; font-weight: 600; }
.bk-mine-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.bk-mine-item { display: flex; align-items: baseline; gap: 10px; font-size: 0.84rem; flex-wrap: wrap; }
.bk-mine-when { flex: 0 0 auto; font-weight: 600; font-variant-numeric: tabular-nums; }
.bk-mine-time { margin-left: 7px; font-weight: 400;
                color: var(--gw-text-soft, rgba(43,48,51,0.68)); }
.bk-mine-where { flex: 1 1 auto; min-width: 0; overflow: hidden;
                 text-overflow: ellipsis; white-space: nowrap; }
.bk-mine-status {
  flex: 0 0 auto; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 2px 6px; border-radius: 3px; font-weight: 600;
  background: var(--bk-buffer-bg, #fdf1dc); color: #6b4a12;
}

/* Member saving shown next to a price, so the discount is visible at the point of sale
   rather than being silently substituted. */
.bk-price-public { text-decoration: line-through; opacity: .6; margin-left: 6px; font-weight: 400; }
.bk-price-save   { color: var(--bk-available, #2f6b4f); font-weight: 600; margin-left: 6px; }

@media (max-width: 700px) {
  .bk-member { padding: 13px 14px; }
  .bk-mcard { flex: 1 1 100%; }
}