/* ─────────────────────────────────────────────────────────────────────────────
   Booking tile — "Book a walk-through" / "Book a call"
   A single <dialog> carrying two steps: pick a location, then pick a time.

   It is a MODAL OVER THE PAGE, not a page of its own. That is the whole point:
   the person stays on the page they were reading, and the booking happens on
   top of it rather than in a tab they navigate away into.

   The location step is the referral page's chooser, not a new design: same
   <dialog> + scrim-blur + card-scale entrance, same .loc card, same type scale.
   It was signed off there; a second dialect of the same question would be a
   second design language on one site.

   Everything here is painted from home.css tokens (--ink/--paper/--surface/
   --sage/--line/--disp). No literal colours, so the studio's warm greyscale
   stays in one place.
   ──────────────────────────────────────────────────────────────────────────── */

.cs-book{
  --dur-in:280ms; --dur-out:190ms;
  --ease-expo-out:cubic-bezier(.16,1,.3,1);
  --ease-overlay-out:cubic-bezier(.4,0,1,1);
  position:fixed; inset:0; width:100vw; height:100dvh; max-width:none; max-height:none;
  border:none; margin:0; padding:clamp(16px,3vw,40px); background:transparent;
}
.cs-book[open]{display:flex; align-items:center; justify-content:center}
.cs-book::backdrop{
  background:rgba(20,18,15,0); -webkit-backdrop-filter:blur(0); backdrop-filter:blur(0);
  transition:background var(--dur-in) ease, backdrop-filter var(--dur-in) ease;
}
.cs-book.is-open::backdrop{
  background:rgba(20,18,15,.58); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
}
.cs-book__card{
  position:relative; width:min(860px,100%); max-height:90vh; overflow:auto;
  background:var(--surface); border-radius:22px; box-shadow:0 30px 90px rgba(20,18,15,.42);
  padding:0 clamp(26px,3.6vw,46px) clamp(26px,3.6vw,46px);
  opacity:0; transform:scale(.96) translateY(10px);
  transition:opacity var(--dur-out) var(--ease-overlay-out), transform var(--dur-out) var(--ease-overlay-out);
}
.cs-book.is-open .cs-book__card{
  opacity:1; transform:none;
  transition:opacity var(--dur-in) var(--ease-expo-out), transform var(--dur-in) var(--ease-expo-out);
}
.cs-book__card:focus{outline:none}
.cs-book__step[hidden]{display:none}

/* The close lives in a STICKY bar, not absolutely positioned in the card.
   Absolute inside an overflow:auto card scrolls out of reach, and on a phone
   the scrim is only a 16px strip with no Esc key, so once you scrolled to the
   form there was no way left to shut the dialog at all. */
.cs-book__bar{
  position:sticky; top:0; z-index:3; display:flex; justify-content:flex-end;
  padding-top:clamp(14px,2vw,18px); margin-bottom:clamp(2px,1vw,8px);
  background:linear-gradient(var(--surface) 78%, rgba(255,253,248,.86) 92%, rgba(255,253,248,0));
}
.cs-book__x{
  width:44px; height:44px; display:grid; place-items:center; border-radius:999px;
  border:1px solid var(--line); background:var(--surface); color:var(--mid);
  cursor:pointer; transition:color .2s, border-color .2s, transform .16s var(--ease);
}
@media(hover:hover){.cs-book__x:hover{color:var(--ink); border-color:var(--ink); transform:scale(1.06)}}
.cs-book__x:focus-visible{outline:2px solid var(--ink); outline-offset:2px}

.cs-book-head .eyebrow{
  font-size:11.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--soft); margin:0 0 14px;
}
/* text-wrap:balance rather than a ch measure. A fixed max-width has to be
   retuned for every string it ever holds, and it strands the last word when the
   copy changes: "Pick a time to come in." was leaving "in." alone on a line at
   the largest type in the component. Balance splits the lines evenly whatever
   the copy says, and degrades to a normal wrap where it is unsupported. */
.cs-book-title{
  font-family:var(--disp); font-weight:600; font-size:clamp(30px,5vw,56px);
  line-height:1.02; letter-spacing:-.03em; margin:0; max-width:19ch;
  text-wrap:balance;
}
#csbTitle2{max-width:none}
.cs-book-sub{
  font-size:clamp(15px,1.7vw,18px); color:var(--mid);
  margin:12px 0 clamp(26px,4vh,38px); max-width:50ch; line-height:1.6;
}

/* ── step 1: location ─────────────────────────────────────────────────────── */
/* minmax(0,1fr), never a bare 1fr: the studio names are set at up to 58px and
   a bare 1fr is minmax(auto,1fr), which lets a long unbreakable word push the
   column past the container. That is exactly how the referral chooser
   overflowed and put Geelong on top of Ballarat at a narrower viewport. */
.cs-book-cards{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(14px,2vw,22px)}
@media(max-width:600px){.cs-book-cards{grid-template-columns:minmax(0,1fr)}}
.cs-loc{
  position:relative; display:flex; flex-direction:column; text-align:left; min-height:250px;
  padding:24px 24px 22px; border:1px solid transparent; border-radius:16px;
  background:var(--char); color:var(--paper); cursor:pointer; font-family:inherit;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
@media(hover:hover){.cs-loc:hover{transform:translateY(-6px); box-shadow:0 24px 48px rgba(28,26,22,.32)}}
.cs-loc:focus-visible{outline:none; box-shadow:0 0 0 3px rgba(28,26,22,.45)}
.cs-loc-tag{
  align-self:flex-start; font-size:11px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; border-radius:999px; padding:6px 12px;
  background:var(--paper); color:var(--char);
}
.cs-loc-name{
  font-family:var(--disp); font-weight:600; font-size:clamp(40px,5.4vw,58px);
  letter-spacing:-.03em; line-height:1; color:var(--paper); margin-top:auto; padding-top:26px;
}
/* A studio whose hours are not published yet. Still a real, clickable card: it
   explains and hands over a phone number, rather than being a dead tile. The
   tag inverts so the difference reads at a glance against "Open now". */
.cs-loc-tag.soon{background:transparent; border:1px solid rgba(244,240,232,.42); color:rgba(244,240,232,.86)}
.cs-loc--soon{background:#2b2823}
.cs-loc-foot{display:block; margin-top:18px; padding-top:15px; border-top:1px solid rgba(244,240,232,.16)}
.cs-loc-addr{display:block; font-size:14px; font-weight:600; color:var(--paper)}
.cs-loc-sub{display:block; font-size:12.5px; color:rgba(244,240,232,.64); margin-top:3px}
.cs-loc-go{display:block; font-size:13px; font-weight:600; color:var(--paper); margin-top:13px}

/* ── step 2: the picker ───────────────────────────────────────────────────── */
/* The only route back to the location step on a phone, so it has to be a real
   target. The underline moves to an inner span so the 44px hit area does not
   drag a 44px-tall underline with it. */
.cs-book-back{
  display:inline-flex; align-items:center; gap:5px; margin:0 0 10px; padding:0;
  min-height:44px; font:inherit; font-size:12.5px; font-weight:600; color:var(--soft);
  background:none; border:none; cursor:pointer;
}
.cs-book-back span{text-decoration:underline; text-underline-offset:3px}
@media(hover:hover){.cs-book-back:hover{color:var(--ink)}}
.cs-book-back:focus-visible{outline:2px solid var(--ink); outline-offset:2px; border-radius:8px}

.cs-bk-lab{
  margin:clamp(18px,2.4vw,24px) 0 9px; font-size:11.5px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--soft);
}
.cs-bk-lab:first-of-type{margin-top:0}
.cs-bk-tz{margin-left:8px; font-weight:500; letter-spacing:0; text-transform:none; color:var(--mid)}
.cs-bk-sum{
  margin:0 0 clamp(18px,2.4vw,24px); padding:12px 15px; border-radius:12px;
  background:var(--sage); font-size:14.5px; color:var(--ink); line-height:1.5;
}
.cs-bk-sum b{font-weight:700}
.cs-bk-sum a{color:var(--ink); font-weight:600; text-decoration:underline; text-underline-offset:3px}
.cs-bk-lab[hidden],.cs-bk-days-wrap[hidden],.cs-bk-parts[hidden],.cs-bk-who[hidden]{display:none}

/* Every chip in the picker shares one shape, so who / day / period / time read
   as one control rather than four different widgets stacked up.
   Block padding is 12px, not 10: at 14px/1 that is the difference between a
   40px and a 44px target, and this is a component people use on a phone. */
.cs-chip{
  font:inherit; font-size:14px; font-weight:600; color:var(--ink);
  background:var(--surface); border:1px solid var(--line); border-radius:12px;
  padding:12px 15px; min-height:44px; cursor:pointer;
  transition:background .2s, border-color .2s, color .2s, transform .16s var(--ease);
}
@media(hover:hover){.cs-chip:hover:not([aria-pressed="true"]):not(:disabled){background:var(--sage); border-color:rgba(33,30,26,.28)}}
.cs-chip:active:not(:disabled){transform:scale(.97)}
.cs-chip[aria-pressed="true"]{background:var(--ink); border-color:var(--ink); color:var(--paper)}
/* A solid muted token, not opacity. Compounding .42 opacity with the sub-label's
   own .7 put the word carrying the information ("none") at 1.88:1, which is
   unreadable even though WCAG exempts disabled controls from the ratio. */
/* Derived from --ink so it cannot drift when the greys are retuned. The literal
   is only the fallback for engines without color-mix. */
.cs-chip:disabled{background:var(--surface); border-color:var(--line); cursor:not-allowed;
  color:#8d857a; color:color-mix(in srgb, var(--ink) 52%, var(--surface))}
.cs-chip:disabled small{color:inherit}
.cs-chip:focus-visible{outline:2px solid var(--ink); outline-offset:2px}

.cs-bk-who{display:flex; flex-wrap:wrap; gap:8px}

/* days scroll sideways rather than wrapping into a block: a fortnight of dates
   wrapped over three rows buries the times under a wall of chips */
.cs-bk-days-wrap{position:relative}
.cs-bk-days{display:flex; gap:8px; overflow-x:auto; scroll-behavior:smooth; padding-bottom:4px; scrollbar-width:none}
.cs-bk-days::-webkit-scrollbar{display:none}
.cs-bk-day{flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:1px; min-width:60px; padding:9px 12px}
.cs-bk-day b{font-size:17px; font-weight:700; line-height:1.1}
.cs-bk-day span{font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; opacity:.72}
/* the fade only appears when there is genuinely more to scroll to, so it is a
   signal rather than permanent decoration */
.cs-bk-days-wrap[data-more="true"]::after{
  content:""; position:absolute; top:0; bottom:4px; right:0; width:56px; pointer-events:none;
  background:linear-gradient(90deg,rgba(255,253,248,0),var(--surface));
}
.cs-bk-more{
  position:absolute; top:50%; right:0; transform:translateY(-50%); z-index:1;
  width:44px; height:44px; display:none; place-items:center; border-radius:999px;
  border:1px solid var(--line); background:var(--surface); color:var(--ink); cursor:pointer;
}
.cs-bk-days-wrap[data-more="true"] .cs-bk-more{display:grid}
.cs-bk-more:focus-visible{outline:2px solid var(--ink); outline-offset:2px}

.cs-bk-parts{display:flex; flex-wrap:wrap; gap:8px}
.cs-bk-part{display:flex; flex-direction:column; align-items:flex-start; gap:2px; padding:9px 15px}
.cs-bk-part small{font-size:11px; font-weight:500; opacity:.7}

/* The period chips FILTER; the time chips BOOK. They were 8px apart in
   identical styling, which is the same gap as between chips inside each row, so
   a selected "Morning" and a selected "8:00 am" read as two peers in one mass.
   Between-group spacing has to beat within-group spacing or the grouping is
   not communicated at all. */
.cs-bk-slots{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(88px,1fr)); gap:8px;
  margin-top:20px;
}
.cs-bk-slot{padding:12px 8px; text-align:center}

.cs-bk-empty{margin:2px 0 0; font-size:14.5px; color:var(--mid); line-height:1.6}

/* ── details ──────────────────────────────────────────────────────────────── */
.cs-bk-form{margin-top:clamp(22px,3vw,30px); padding-top:clamp(20px,2.6vw,26px); border-top:1px solid var(--line)}
.cs-bk-form[hidden]{display:none}
.cs-bk-fields{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px}
@media(max-width:560px){.cs-bk-fields{grid-template-columns:minmax(0,1fr)}}
.cs-bk-f{display:block}
.cs-bk-f--wide{grid-column:1 / -1}
.cs-bk-f span{display:block; margin-bottom:6px; font-size:12.5px; font-weight:600; color:var(--soft)}
.cs-bk-f input{
  display:block; width:100%; font:inherit; font-size:16px; color:var(--ink);
  padding:12px 14px; border-radius:10px; border:1px solid var(--line);
  background:var(--surface); -webkit-appearance:none; appearance:none;
  transition:border-color .2s, box-shadow .2s;
}
/* 16px, not 15: iOS Safari zooms the whole page on focus for anything under
   16px, and it does not zoom back out. */
.cs-bk-f input:focus{outline:none; border-color:var(--ink); box-shadow:0 0 0 3px rgba(33,30,26,.12)}
.cs-bk-go{width:100%; justify-content:center; margin-top:18px}
.cs-bk-go:disabled{opacity:.6; cursor:not-allowed}
.cs-bk-err{
  margin:14px 0 0; padding:11px 14px; border-radius:10px; font-size:14px; line-height:1.5;
  background:rgba(33,30,26,.06); border:1px solid rgba(33,30,26,.22); color:var(--ink);
}
.cs-bk-err[hidden]{display:none}
.cs-bk-foot{margin-top:20px; font-size:13px; color:var(--mid); line-height:1.65}
.cs-bk-foot a{text-decoration:underline; text-underline-offset:3px; color:var(--ink); font-weight:600}

/* ── times not published yet ──────────────────────────────────────────────── */
.cs-bk-tbc[hidden]{display:none}
.cs-bk-tbc__lead{
  margin:0 0 10px; font-family:var(--disp); font-weight:600;
  font-size:clamp(20px,2.4vw,26px); letter-spacing:-.02em; line-height:1.1; color:var(--ink);
}
.cs-bk-tbc__body{margin:0 0 4px; font-size:15.5px; color:var(--mid); line-height:1.65; max-width:52ch}
.cs-bk-tbc__body a{color:var(--ink); font-weight:600; text-decoration:underline; text-underline-offset:3px}

/* ── booked ───────────────────────────────────────────────────────────────── */
.cs-bk-done[hidden]{display:none}
.cs-bk-done:focus{outline:none}
.cs-bk-done__tick{
  width:52px; height:52px; display:grid; place-items:center; border-radius:999px;
  background:var(--ink); color:var(--paper); margin:0 0 20px;
}
.cs-bk-done h3{font-family:var(--disp); font-weight:600; font-size:clamp(26px,3.6vw,38px); letter-spacing:-.025em; line-height:1.06; margin:0 0 10px}
.cs-bk-done p{margin:0 0 8px; font-size:15.5px; color:var(--mid); line-height:1.6}
.cs-bk-done p strong{color:var(--ink); font-weight:600}

/* The nav is untouched by this component: the pill keeps its Make a Referral
   chip exactly as it was, and the booking actions live in the hero and the
   closing band instead. An earlier pass put them in the pill, which is
   centre-anchored, so the extra width pushed it through the wordmark at 1366
   and forced the burger handoff up to 1359. All of that is gone with them.

   hero + closing band: the same pairing, in the .btn language already on the page */
.btn-outline{background:transparent; color:var(--ink); border-color:rgba(33,30,26,.32)}
@media(hover:hover){.btn-outline:hover{background:var(--ink); color:var(--paper); border-color:var(--ink)}}
/* .btn-ghost was written for an <a>, which has no background of its own, so it
   never sets one. As a <button> it inherits the user agent's light grey button
   face, and on the dark closing band that painted a pale pill with pale text on
   it: the "Book a call" action was invisible. */
button.btn-ghost{background:transparent}

/* A referral is still how a support coordinator sends someone in; it has left
   the pill to make room, so every place a booking is offered names it too
   rather than leaving it to the footer alone. */
.cs-refer-aside{margin-top:14px; font-size:13.5px; color:var(--mid)}
.cs-refer-aside a{color:var(--ink); font-weight:600; text-decoration:underline; text-underline-offset:3px}
.cta .cs-refer-aside{color:rgba(244,240,232,.72)}
.cta .cs-refer-aside a{color:var(--paper)}

@media(prefers-reduced-motion:reduce){
  .cs-book__card,.cs-book::backdrop,.cs-loc,.cs-chip,.cs-book__x{transition:none}
  .cs-loc:hover,.cs-book__x:hover{transform:none}
  .cs-bk-days{scroll-behavior:auto}
}