/* ═══════════════════════════════════════════════════════════════════════════
   MR CUT — the booking flow (/book only).
   ---------------------------------------------------------------------------
   Four steps, one visible at a time, with a persistent summary rail so the
   client can always see who / what / when / how much before committing.

   Structure is Align's (sites/align/booking.css) and is deliberately unchanged:
   the flow was measured on a phone and the step order, the 2-up barber grid and
   the sticky summary are the results of that. The surface is this shop's — cream
   cards with a hard ink border and an offset shadow, red for the current choice,
   the way the sign is built.
   ═══════════════════════════════════════════════════════════════════════════ */

.booklayout{display:grid;grid-template-columns:1fr 348px;gap:42px;align-items:start}
@media(max-width:980px){.booklayout{grid-template-columns:1fr;gap:28px}}

/* ── step rail ─────────────────────────────────────────────────────────── */
.steps-nav{display:flex;gap:0;margin-bottom:36px;border:2px solid var(--ink);background:var(--card)}
.steps-nav button{
  flex:1;background:none;border:0;border-right:2px solid var(--ink);
  padding:15px 12px;cursor:pointer;color:var(--mute);font-family:var(--cond);
  font-size:.95rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  display:flex;align-items:center;justify-content:center;gap:9px;transition:color .2s,background .2s;
}
.steps-nav button:last-child{border-right:0}
.steps-nav button .n{
  width:23px;height:23px;border:2px solid currentColor;border-radius:50%;
  display:grid;place-items:center;font-size:.78rem;flex:none;
}
.steps-nav button[data-state="done"]{color:var(--blue)}
.steps-nav button[data-state="done"] .n{background:var(--blue);border-color:var(--blue);color:#fff}
.steps-nav button[data-state="active"]{color:#fff;background:var(--red)}
.steps-nav button[data-state="active"] .n{border-color:#fff;color:#fff}
.steps-nav button:disabled{cursor:not-allowed;opacity:.55}
@media(max-width:700px){
  .steps-nav button .lbl{display:none}
  .steps-nav button{padding:13px 8px}
}

.panel{display:none;animation:panelIn .34s cubic-bezier(.2,.8,.3,1) both}
.panel.on{display:block}
@keyframes panelIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.panel h2{font-size:clamp(1.7rem,2.8vw,2.3rem);margin-bottom:6px}
.panel .hint{color:var(--mute);font-size:.96rem;margin-bottom:26px}

/* ── step 1: pick a barber ─────────────────────────────────────────────── */
.pickgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.pick{
  background:var(--card);border:2px solid var(--ink);padding:22px 18px;cursor:pointer;
  text-align:left;font-family:var(--sans);color:var(--ink);
  display:flex;flex-direction:column;gap:11px;align-items:flex-start;position:relative;
  box-shadow:5px 5px 0 var(--stucco);
  transition:transform .18s cubic-bezier(.2,.8,.3,1),box-shadow .18s,background .18s;
}
.pick:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--rule-2)}
.pick[aria-pressed="true"]{background:var(--red-wash);box-shadow:5px 5px 0 var(--red);transform:none}
.pick[aria-pressed="true"]::after{
  content:"✓";position:absolute;top:10px;right:13px;color:#fff;font-size:.85rem;font-weight:700;
  background:var(--red);width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
}
.pick .av{
  width:64px;height:64px;border-radius:50%;flex:none;overflow:hidden;
  background:var(--blue-wash);display:grid;place-items:center;
  font-family:var(--display);font-size:1.35rem;color:var(--red);box-shadow:0 0 0 3px var(--rule-2);
}
.pick[aria-pressed="true"] .av{box-shadow:0 0 0 3px var(--red)}
.pick .av img{width:100%;height:100%;object-fit:cover;transform:scale(1.05)}
.pick .nm{font-family:var(--display);font-size:1.25rem;text-transform:uppercase;line-height:1.15}
.pick .rl{font-family:var(--cond);font-size:.88rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--blue);margin-top:-5px}
.pick .sub{font-size:.86rem;color:var(--mute)}
/* the monogram for a barber with no photo yet — see renderBarbers() */
.pick .av .mono{font-family:var(--display);line-height:1}

/* ── step 2: pick a service ────────────────────────────────────────────── */
.svcgroup{margin-bottom:28px}
.svcgroup > h4{font-family:var(--cond);font-size:1rem;font-weight:700;letter-spacing:.24em;
  text-transform:uppercase;color:var(--blue);margin-bottom:12px}
.svcpick{
  width:100%;background:var(--card);border:2px solid var(--ink);padding:16px 20px;cursor:pointer;
  display:flex;align-items:center;gap:16px;text-align:left;font-family:var(--sans);color:var(--ink);
  margin-bottom:9px;position:relative;box-shadow:4px 4px 0 var(--stucco);
  transition:transform .16s,box-shadow .16s,background .16s;
}
.svcpick:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--rule-2)}
.svcpick[aria-pressed="true"]{background:var(--red-wash);box-shadow:4px 4px 0 var(--red);transform:none}
/* Both of these are flex COLUMNS, not plain boxes. Every child is a <span>: as
   plain boxes the price and duration rendered side by side as "$1530 MIN", and
   the description ran inline off the end of the service name. margin-top on an
   inline element does nothing, which is why it read as deliberate-but-broken. */
.svcpick .info{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.svcpick .nm{font-family:var(--display);font-size:1.22rem;text-transform:uppercase;line-height:1.2}
.svcpick .ds{font-size:.88rem;color:var(--mute);line-height:1.45}
.svcpick .side{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.svcpick .pr{font-family:var(--display);font-size:1.45rem;color:var(--red);line-height:1}
.svcpick .du{font-family:var(--cond);font-size:.86rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--mute);line-height:1;white-space:nowrap}

/* ── step 3: date + time ───────────────────────────────────────────────── */
.caltime{display:grid;grid-template-columns:340px 1fr;gap:38px}
@media(max-width:820px){.caltime{grid-template-columns:1fr;gap:28px}}
.cal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.cal-head button{
  background:var(--card);border:2px solid var(--ink);color:var(--ink);width:38px;height:38px;
  cursor:pointer;font-size:1rem;transition:background .18s,color .18s;
}
.cal-head button:hover{background:var(--red);border-color:var(--red);color:#fff}
#calMonth{font-family:var(--display);font-size:1.35rem;text-transform:uppercase}
.cal-dow{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin-bottom:7px}
.cal-dow span{text-align:center;font-family:var(--cond);font-size:.85rem;font-weight:700;
  letter-spacing:.1em;color:var(--mute);text-transform:uppercase}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.cal-day{
  aspect-ratio:1;display:grid;place-items:center;font-size:.95rem;font-weight:500;cursor:pointer;
  border:2px solid var(--rule);background:var(--card);color:var(--ink-2);
  transition:border-color .16s,color .16s,background .16s;
}
.cal-day:hover{border-color:var(--ink);color:var(--ink)}
.cal-day.muted{opacity:.3;cursor:default;background:transparent;border-color:transparent}
.cal-day.muted:hover{border-color:transparent;color:var(--ink-2)}
.cal-day.today{border-color:var(--blue)}
.cal-day.sel{background:var(--red);color:#fff;font-weight:700;border-color:var(--red)}

.slotwrap{min-height:200px}
.slotgroup{margin-bottom:24px}
.slotgroup h4{font-family:var(--cond);font-size:.95rem;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--mute);margin-bottom:11px;
  display:flex;align-items:center;gap:12px}
.slotgroup h4::after{content:"";flex:1;height:2px;background:var(--rule)}
.slots{display:flex;flex-wrap:wrap;gap:8px}
.slot{
  border:2px solid var(--ink);background:var(--card);color:var(--ink);
  padding:10px 16px;font-family:var(--cond);font-size:1.02rem;font-weight:600;cursor:pointer;
  transition:background .16s,color .16s,border-color .16s;
}
.slot:hover{background:var(--stucco)}
.slot.sel{background:var(--red);color:#fff;border-color:var(--red);box-shadow:3px 3px 0 var(--red-d)}
.slot.full{opacity:.3;cursor:not-allowed;text-decoration:line-through;border-color:var(--rule)}
.slot.full:hover{background:var(--card)}
.slotnote{color:var(--mute);font-size:.95rem;padding:16px 0}
.slotnote .btn{margin-top:12px}

/* ── step 4: details ───────────────────────────────────────────────────── */
.field{margin-bottom:16px}
.field label{display:block;font-family:var(--cond);font-size:.95rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);margin-bottom:7px}
.field label .opt{text-transform:none;letter-spacing:.01em;color:var(--mute);font-weight:400;font-size:.9rem}
.field input,.field textarea{
  width:100%;background:var(--card);border:2px solid var(--rule-2);color:var(--ink);
  padding:13px 15px;font-family:var(--sans);font-size:1rem;transition:border-color .18s;
}
.field input:focus,.field textarea:focus{outline:0;border-color:var(--blue)}
.field input[aria-invalid="true"]{border-color:#C0392B}
.field .err{color:#A5281A;font-size:.85rem;margin-top:6px;display:none;font-weight:500}
.field input[aria-invalid="true"] ~ .err{display:block}
.two{display:grid;grid-template-columns:1fr 1fr;gap:15px}
@media(max-width:560px){.two{grid-template-columns:1fr}}
.check{display:flex;gap:11px;align-items:flex-start;font-size:.9rem;color:var(--ink-2);margin:6px 0 20px}
.check input{width:auto;margin-top:4px;accent-color:var(--red)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ── summary rail ──────────────────────────────────────────────────────── */
.summary{
  background:var(--card);border:2px solid var(--ink);padding:26px 24px;
  box-shadow:7px 7px 0 var(--blue);
  position:sticky;top:calc(var(--nav-h) + 22px);
}
.summary h3{font-family:var(--cond);font-size:1rem;font-weight:700;letter-spacing:.26em;
  color:var(--blue);margin-bottom:18px}
.summary .line{display:flex;justify-content:space-between;gap:16px;padding:12px 0;
  border-bottom:1px solid var(--rule);font-size:.96rem}
.summary .line .k{font-family:var(--cond);color:var(--mute);font-size:.92rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase}
.summary .line .v{text-align:right;color:var(--ink);font-weight:500}
.summary .line .v.empty{color:var(--rule-2);font-weight:400}
.summary .total{display:flex;justify-content:space-between;align-items:baseline;padding:18px 0 4px}
.summary .total .k{font-family:var(--cond);font-size:.95rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--mute)}
.summary .total .v{font-family:var(--display);font-size:2.1rem;color:var(--red)}
.summary .note{font-size:.86rem;color:var(--mute);line-height:1.55;margin-top:12px;
  padding-top:14px;border-top:1px solid var(--rule)}
@media(max-width:980px){.summary{position:static}}

.formnav{display:flex;justify-content:space-between;gap:15px;margin-top:30px;flex-wrap:wrap}

/* ── messages + confirmation ───────────────────────────────────────────── */
.msg{padding:15px 18px;font-size:.96rem;margin-top:18px;display:none;border:2px solid}
.msg.show{display:block}
.msg.err{background:#FCEDEA;border-color:#C0392B;color:#8C2419}
.confirm{text-align:center;padding:32px 20px}
.confirm .tick{
  width:76px;height:76px;border-radius:50%;margin:0 auto 24px;display:grid;place-items:center;
  background:var(--red);color:#fff;font-size:2rem;box-shadow:5px 5px 0 var(--red-d);
}
.confirm h2{margin-bottom:12px}
.confirm .det{
  background:var(--card);border:2px solid var(--ink);padding:24px;box-shadow:6px 6px 0 var(--stucco);
  max-width:420px;margin:26px auto;text-align:left;
}
.confirm .det .line{display:flex;justify-content:space-between;gap:16px;padding:10px 0;
  border-bottom:1px solid var(--rule);font-size:.97rem}
.confirm .det .line:last-child{border-bottom:0}
.confirm .det .k{font-family:var(--cond);color:var(--mute);font-size:.92rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase}

.loading{color:var(--mute);font-size:.94rem;padding:20px 0;display:flex;align-items:center;gap:12px}
.loading::before{
  content:"";width:15px;height:15px;border:2px solid var(--rule-2);border-top-color:var(--red);
  border-radius:50%;animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── step 1 on a phone: two barbers per row ───────────────────────────────
   minmax(210px,1fr) fits exactly one column in ~334px of content width, so a
   five-barber roster was five full rows and step 1 became a scroll before a
   choice. Two-up puts four on screen at once, which is what makes it a
   comparison rather than a list — and it matters most here: this is the moment
   a walk-up picks whose chair they sit in, and nobody should be below the fold
   just for being fourth. */
@media (max-width:560px){
  .pickgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .pick{padding:15px 10px;align-items:center;text-align:center;gap:7px}
  .pick:hover{transform:none}
  .pick .av{width:58px;height:58px;font-size:1.15rem}
  .pick .nm{font-size:1.02rem}
  .pick .rl{font-size:.78rem;letter-spacing:.1em;margin-top:-4px}
  .pick .sub{font-size:.8rem;line-height:1.35}
  .pick[aria-pressed="true"]::after{top:6px;right:7px;width:20px;height:20px;font-size:.72rem}
}