/* ================================================================
   SHAHAN STUDIO — Booking page ("afspraak") v2
   Builds on home.css tokens/components (nav, buttons, footer, themes).
   Layout: guided stage flow (left) + live graphite ticket (right).
   ================================================================ */

.bk-page [hidden]{display:none!important}
.bk-page{background:var(--bg);--page-bg:var(--bg)} /* computed here, inherited unchanged into the ticket */

/* ── Nav extras ─────────────────────────────────────────────────── */
.bk-nav-phone{display:none;align-items:center;gap:.45rem;padding:0 .75rem;font-size:.85rem;font-weight:600;color:var(--ink);text-decoration:none}
.bk-nav-phone svg{width:16px;height:16px}
.bk-nav-phone:hover{text-decoration:underline;text-underline-offset:3px}
.bk-nav-back svg{width:16px;height:16px}
.bf-home .bk-nav-back:hover svg{transform:translateX(-3px)}
@media(min-width:900px){.bk-nav-phone{display:inline-flex}}
@media(max-width:520px){.bk-nav-back span{display:none}.bk-nav-back{padding-inline:.8rem}}

/* ── Intro band ─────────────────────────────────────────────────── */
.bk-intro{
  padding:calc(var(--nav-h) + clamp(2.5rem,6vw,4.5rem)) 0 clamp(2.5rem,5vw,3.75rem);
  background:var(--band-bg);color:var(--band-ink);
  background-image:radial-gradient(ellipse 60% 120% at 100% 0%,rgba(216,200,177,.10),transparent 60%);
}
.bk-intro .bf-eyebrow{color:var(--beige-300)}
.bk-intro .bf-eyebrow__num{color:var(--band-ink)}
.bk-intro__inner{display:grid;gap:2rem;align-items:end}
.bk-intro__title{margin:0;font-weight:700;font-size:clamp(2.2rem,1.4rem + 3.4vw,3.9rem);line-height:1.05;letter-spacing:-.015em;color:var(--band-ink)}
.bk-intro__lede{margin:1rem 0 0;max-width:34rem;color:var(--band-muted);font-size:1.05rem;line-height:1.65}
.bk-intro__facts{display:grid;gap:.6rem;margin:0;padding:0;list-style:none}
.bk-intro__facts li{display:flex;align-items:center;gap:.8rem;padding:.75rem 1rem;border:1px solid var(--band-line);border-radius:var(--radius);background:var(--band-bg-2)}
.bk-intro__facts strong{display:block;font-size:.92rem;line-height:1.25}
.bk-intro__facts small{display:block;font-size:.75rem;color:var(--band-muted)}
@media(min-width:900px){
  .bk-intro__inner{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}
}

/* ── Promo (openingsactie) ──────────────────────────────────────── */
.bk-promo{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.5rem;max-width:36rem;margin-top:1.75rem;padding:1.1rem 1.1rem 1.1rem 1.35rem;border-radius:var(--radius-lg);background:var(--beige-300);color:var(--black);box-shadow:0 24px 50px -28px rgba(0,0,0,.7)}
.bk-promo__text{flex:1 1 14rem;min-width:0}
.bk-promo p{margin:0}
.bk-promo__badge{display:inline-flex;align-items:center;gap:.4rem;font-size:.66rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.bk-promo__badge svg{width:14px;height:14px}
.bk-promo .bk-promo__deal{margin-top:.3rem;font-size:clamp(1.3rem,1.1rem + .8vw,1.6rem);font-weight:700;line-height:1.15}
.bk-promo__deal s{margin-right:.2rem;font-weight:500;opacity:.5}
.bk-promo .bk-promo__terms{margin-top:.3rem;font-size:.82rem;opacity:.75}
.bk-promo__code{display:inline-flex;align-items:center;gap:.75rem;padding:.55rem .55rem .55rem 1rem;border:2px dashed rgba(11,11,11,.45);border-radius:var(--radius);background:rgba(255,255,255,.35);color:inherit;font:inherit;font-size:.95rem;font-weight:700;letter-spacing:.12em;cursor:pointer;transition:background .2s}
.bk-promo__code:hover{background:rgba(255,255,255,.6)}
.bk-promo__code:focus-visible{outline:2px solid var(--black);outline-offset:3px}
.bk-promo__copy{padding:.3rem .65rem;border-radius:999px;background:var(--black);color:var(--beige-100);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase}
@media(max-width:520px){.bk-promo__code{width:100%;justify-content:space-between}}

/* ── Layout ─────────────────────────────────────────────────────── */
.bk-main{padding-block:clamp(2rem,5vw,3.5rem) clamp(4rem,8vw,6rem)}
.bk-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:2rem;align-items:start}
@media(min-width:1024px){
  .bk-layout{grid-template-columns:minmax(0,1fr) 360px;gap:2.5rem}
  .bk-ticket{position:sticky;top:calc(var(--nav-h) + 1.5rem)}
}
.bk-flow{display:grid;grid-template-columns:minmax(0,1fr);gap:1rem;min-width:0}

/* ── Stage cards ────────────────────────────────────────────────── */
.bk-stage{
  min-width:0;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),opacity var(--dur) var(--ease)
}
.bk-stage.is-open{border-color:var(--line-strong);box-shadow:var(--shadow-2)}
.bk-stage.is-locked{opacity:.55}
.bk-stage__head{display:flex;align-items:center;gap:1rem;padding:1.15rem clamp(1.1rem,3vw,1.75rem)}
.bk-stage.is-done .bk-stage__head{cursor:pointer}
.bk-stage__num{
  flex:none;position:relative;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;
  font-size:.8rem;font-weight:700;letter-spacing:.04em;color:var(--ink);background:var(--bg-alt);border:1px solid var(--line);
  transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease)
}
.bk-stage__num > *{grid-area:1/1}
.bk-stage__num svg{width:18px;height:18px;opacity:0;transform:scale(.6);transition:opacity var(--dur),transform var(--dur) var(--ease)}
.bk-stage.is-open .bk-stage__num{background:var(--btn-bg);color:var(--btn-fg);border-color:var(--btn-bg)}
.bk-stage.is-done .bk-stage__num{background:var(--beige-300);border-color:var(--beige-300);color:var(--black)}
.bk-stage.is-done .bk-stage__num span{opacity:0}
.bk-stage.is-done .bk-stage__num svg{opacity:1;transform:none}
.bk-stage__titles{flex:1;min-width:0}
.bk-stage__title{margin:0;font-size:1.2rem;font-weight:700;line-height:1.25;color:var(--ink);outline:none}
.bk-stage__summary{margin:.15rem 0 0;font-size:.88rem;font-weight:600;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bk-stage__summary:empty{display:none}
.bk-stage.is-open .bk-stage__summary{display:none}
.bk-stage__edit{
  flex:none;padding:.5rem .95rem;border-radius:999px;border:1px solid var(--line-strong);background:transparent;
  font:700 .75rem/1 var(--font-sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ink);cursor:pointer;
  transition:background-color var(--dur),color var(--dur),border-color var(--dur)
}
.bk-stage__edit:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}
/* Smooth fold: rows animate 0fr <-> 1fr; content fades in slightly later */
.bk-stage__body{
  display:grid;grid-template-rows:0fr;opacity:0;visibility:hidden;
  transition:grid-template-rows .55s cubic-bezier(.65,0,.35,1),opacity .25s ease,visibility 0s linear .55s
}
.bk-stage.is-open .bk-stage__body{
  grid-template-rows:1fr;opacity:1;visibility:visible;
  transition:grid-template-rows .55s cubic-bezier(.65,0,.35,1),opacity .4s ease .15s,visibility 0s
}
.bk-stage__inner{min-height:0;min-width:0;overflow:hidden;padding-inline:clamp(1.1rem,3vw,1.75rem)}
.bk-stage__inner::after{content:"";display:block;height:clamp(1.25rem,3vw,1.75rem)}
.bk-stage.is-settled .bk-stage__inner{overflow:visible}
@keyframes bkIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.bk-stage__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;margin-top:1.75rem;padding-top:1.25rem;border-top:1px solid var(--line)}
.bk-hint{margin:0;font-size:.88rem;color:var(--muted)}
.bk-next:disabled,.bk-confirm:disabled{opacity:.4;cursor:not-allowed;transform:none}
.bk-stage__foot .bf-btn{min-height:52px;padding-inline:1.6rem}
@media(max-width:520px){.bk-stage__foot .bf-btn{width:100%}}

.bk-block + .bk-block{margin-top:2rem}
.bk-block__title{margin:0 0 1rem;font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.bk-block__title small{margin-left:.35rem;font-size:.95em;letter-spacing:.04em;text-transform:none;font-weight:600}

/* ── Barbers ────────────────────────────────────────────────────── */
.bk-barbers{display:grid;gap:.85rem;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.bk-barber{
  position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:.15rem;
  padding:.6rem .6rem 1rem;border-radius:var(--radius);border:1px solid var(--line);background:var(--surface-2);
  text-align:left;cursor:pointer;color:var(--ink);
  transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)
}
.bk-barber:hover{border-color:var(--line-strong);transform:translateY(-2px)}
.bk-barber[aria-checked="true"]{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink),var(--shadow-2)}
.bk-barber__photo{position:relative;display:block;width:100%;aspect-ratio:1;margin-bottom:.7rem;border-radius:calc(var(--radius) - 6px);overflow:hidden;background:var(--bg-sand)}
.bk-barber__photo img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(.25);transition:filter .5s var(--ease),transform .7s var(--ease)}
.bk-barber:hover .bk-barber__photo img,.bk-barber[aria-checked="true"] .bk-barber__photo img{filter:none;transform:scale(1.04)}
.bk-barber__tick{position:absolute;top:.5rem;right:.5rem;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--btn-bg);color:var(--btn-fg);opacity:0;transform:scale(.6);transition:opacity var(--dur),transform var(--dur) var(--ease)}
.bk-barber__tick svg{width:16px;height:16px}
.bk-barber[aria-checked="true"] .bk-barber__tick{opacity:1;transform:none}
.bk-barber__name{padding-inline:.35rem;font-size:1.05rem;font-weight:700}
.bk-barber__role{padding-inline:.35rem;font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.bk-barber__days{display:flex;gap:3px;margin-top:.6rem;padding-inline:.35rem}
.bk-barber__days i{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;font-style:normal;font-size:.6rem;font-weight:700;color:var(--faint);border:1px dashed var(--line-strong)}
.bk-barber__days i.is-on{background:var(--ink);border:1px solid var(--ink);color:var(--bg)}
/* Phones: compact horizontal cards instead of tall photo tiles */
@media(max-width:559px){
  .bk-barbers{grid-template-columns:1fr;gap:.6rem}
  .bk-barber{display:grid;grid-template-columns:72px 1fr;grid-template-rows:auto auto auto;column-gap:.9rem;align-items:center;padding:.6rem}
  .bk-barber__photo{grid-row:1/4;width:72px;margin:0}
  .bk-barber__tick{top:.3rem;right:.3rem;width:24px;height:24px}
  .bk-barber__tick svg{width:13px;height:13px}
  .bk-barber__name,.bk-barber__role,.bk-barber__days{padding-inline:0}
  .bk-barber__days{margin-top:.35rem}
}

/* ── Services (menu list) ───────────────────────────────────────── */
.bk-services{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.bk-service-item{animation:bkIn .4s var(--ease) both;animation-delay:calc(var(--i,0) * 40ms)}
.bk-service{
  display:flex;align-items:center;gap:.9rem;width:100%;padding:.85rem 1.1rem;border-radius:var(--radius);
  border:1px solid var(--line);background:var(--surface);text-align:left;cursor:pointer;color:var(--ink);
  transition:border-color var(--dur) var(--ease),background-color var(--dur) var(--ease)
}
.bk-service:hover{border-color:var(--line-strong);background:var(--surface-2)}
.bk-service[aria-checked="true"]{border-color:var(--ink);background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--ink)}
.bk-radio{flex:none;width:20px;height:20px;border-radius:50%;border:2px solid var(--line-strong);position:relative;transition:border-color var(--dur)}
.bk-radio::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--ink);transform:scale(0);transition:transform var(--dur) var(--ease)}
.bk-service[aria-checked="true"] .bk-radio{border-color:var(--ink)}
.bk-service[aria-checked="true"] .bk-radio::after{transform:scale(1)}
.bk-service__icon{flex:none;width:26px;height:26px;object-fit:contain;opacity:.6;filter:var(--icon-filter)}
.bk-service__main{flex:1;min-width:0;display:flex;flex-direction:column}
.bk-service__name{font-weight:700;font-size:.98rem;line-height:1.3}
.bk-service__meta{font-size:.78rem;font-weight:600;color:var(--faint)}
.bk-service__price{flex:none;font-weight:700;font-size:1.05rem;font-variant-numeric:tabular-nums}
.bk-empty{margin:0;padding:1.25rem;border:1px dashed var(--line-strong);border-radius:var(--radius);color:var(--muted);text-align:center}

/* ── Extras (toggles) ───────────────────────────────────────────── */
.bk-extras{list-style:none;margin:0;padding:0;display:grid;gap:.5rem;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr))}
.bk-extra-item{animation:bkIn .4s var(--ease) both;animation-delay:calc(var(--i,0) * 40ms)}
.bk-extra{
  display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:.75rem;align-items:center;
  width:100%;height:100%;padding:.75rem .9rem;border-radius:var(--radius);border:1px dashed var(--line-strong);
  background:transparent;text-align:left;cursor:pointer;color:var(--ink);
  transition:border-color var(--dur),background-color var(--dur)
}
.bk-extra:hover{background:var(--surface-2)}
.bk-extra[aria-pressed="true"]{border-style:solid;border-color:var(--ink);background:var(--surface-2)}
.bk-extra__toggle{grid-row:span 2;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--bg-alt);color:var(--ink);transition:background-color var(--dur),color var(--dur)}
.bk-extra__toggle svg{grid-area:1/1;width:15px;height:15px;transition:opacity var(--dur),transform var(--dur) var(--ease)}
.bk-extra__toggle svg:last-child{opacity:0;transform:scale(.5)}
.bk-extra[aria-pressed="true"] .bk-extra__toggle{background:var(--btn-bg);color:var(--btn-fg)}
.bk-extra[aria-pressed="true"] .bk-extra__toggle svg:first-child{opacity:0;transform:rotate(90deg) scale(.5)}
.bk-extra[aria-pressed="true"] .bk-extra__toggle svg:last-child{opacity:1;transform:none}
.bk-extra__name{font-weight:700;font-size:.92rem;line-height:1.25}
.bk-extra__meta{font-size:.76rem;font-weight:600;color:var(--faint)}

/* ── Date & time ────────────────────────────────────────────────── */
.bk-when{display:grid;grid-template-columns:minmax(0,1fr);gap:1.5rem;min-width:0}
@media(min-width:760px){.bk-when{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.75rem}}
.bk-cal{min-width:0;padding:clamp(.6rem,2.5vw,1rem);border:1px solid var(--line);border-radius:var(--radius);background:var(--surface-2)}
.bk-cal__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem}
.bk-cal__month{margin:0;font-weight:700;font-size:1rem;color:var(--ink)}
.bk-cal__nav{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);cursor:pointer;transition:background-color var(--dur),color var(--dur)}
.bk-cal__nav svg{width:18px;height:18px}
.bk-cal__nav:hover:not(:disabled){background:var(--ink);color:var(--bg)}
.bk-cal__nav:disabled{opacity:.3;cursor:default}
.bk-cal__dow,.bk-cal__grid{font-size:small;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.bk-cal__dow span{padding:.25rem 0;text-align:center;font-size:.66rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.bk-day{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  aspect-ratio:1;min-width:0;padding:0;border-radius:12px;border:1px solid transparent;background:var(--surface);
  font:700 .92rem/1 var(--font-sans);color:var(--ink);cursor:pointer;font-variant-numeric:tabular-nums;
  transition:background-color var(--dur),color var(--dur),border-color var(--dur),transform .2s var(--ease)
}
.bk-day.is-blank{background:transparent;cursor:default}
.bk-day:hover:not(:disabled){border-color:var(--ink);transform:translateY(-1px)}
.bk-day__bar{display:block;width:56%;height:3px;border-radius:3px;background:var(--line);overflow:hidden}
.bk-day__bar i{display:block;height:100%;width:0;border-radius:inherit;background:var(--ink);transition:width .5s var(--ease)}
.bk-day.is-busy .bk-day__bar i{background:var(--beige-400)}
.bk-day.is-today .bk-day__n{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px}
.bk-day.is-out,.bk-day.is-full{background:transparent;color:var(--faint);cursor:not-allowed;font-weight:500}
.bk-day.is-out .bk-day__bar,.bk-day.is-full .bk-day__bar{visibility:hidden}
.bk-day.is-full .bk-day__n{text-decoration:line-through;text-decoration-thickness:1px}
.bk-day.is-loading .bk-day__bar{background:linear-gradient(90deg,var(--line) 0%,var(--line-strong) 50%,var(--line) 100%);background-size:200% 100%;animation:bkShimmer 1.1s linear infinite}
@keyframes bkShimmer{from{background-position:200% 0}to{background-position:-200% 0}}
.bk-day.is-selected{background:var(--btn-bg);color:var(--btn-fg);border-color:var(--btn-bg)}
.bk-day.is-selected .bk-day__bar{background:rgba(255,255,255,.25)}
.bk-day.is-selected .bk-day__bar i{background:var(--beige-300)}
.bk-cal__legend{display:flex;flex-wrap:wrap;gap:.35rem 1rem;margin:.85rem 0 0;font-size:.72rem;font-weight:600;color:var(--faint)}
.bk-cal__legend span{display:inline-flex;align-items:center;gap:.4rem}
.bk-cal__legend i{display:inline-block;width:14px;height:3px;border-radius:3px}
.bk-cal__legend .lg-free{background:var(--ink)}
.bk-cal__legend .lg-busy{background:var(--beige-400)}
.bk-cal__legend .lg-none{background:var(--line-strong)}

.bk-times{min-width:0;min-height:220px}
.bk-times__date{margin:0 0 1rem;font-size:1.05rem;font-weight:700;color:var(--ink)}
.bk-times__date::first-letter,.bk-r-big::first-letter,.bk-ticket__value::first-letter{text-transform:uppercase}
.bk-times__date span{margin-left:.4rem;padding:.2rem .55rem;border-radius:999px;background:var(--bg-alt);font-size:.72rem;font-weight:700;text-transform:none;color:var(--muted);vertical-align:2px}
.bk-times__label{margin:0 0 .6rem;font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.bk-times__empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;min-height:220px;padding:1.5rem;border:1px dashed var(--line-strong);border-radius:var(--radius);text-align:center;color:var(--muted);font-size:.92rem}
.bk-times__empty strong{color:var(--ink)}
.bk-times__empty p{margin:0}
.bk-times__icon{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--bg-alt);color:var(--ink)}
.bk-times__icon svg{width:22px;height:22px}
.bk-times__skeleton{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}
.bk-times__skeleton i{height:42px;border-radius:12px;background:linear-gradient(90deg,var(--bg-alt) 0%,var(--surface-2) 50%,var(--bg-alt) 100%);background-size:200% 100%;animation:bkShimmer 1.1s linear infinite}
.bk-hours{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;margin-bottom:1.25rem}
.bk-hours__part{flex-basis:100%;margin-top:.25rem;font-size:.72rem;font-weight:700;color:var(--muted)}
.bk-hours__part:first-child{margin-top:0}
.bk-hour{
  display:inline-flex;align-items:center;gap:.4rem;min-height:40px;padding:.45rem .55rem .45rem .85rem;border-radius:999px;
  border:1px solid var(--line-strong);background:var(--surface);font:700 .88rem/1 var(--font-sans);color:var(--ink);cursor:pointer;font-variant-numeric:tabular-nums;
  transition:background-color var(--dur),color var(--dur),border-color var(--dur)
}
.bk-hour small{display:grid;place-items:center;min-width:1.4rem;height:1.4rem;padding:0 .3rem;border-radius:999px;background:var(--bg-alt);font-size:.66rem;color:var(--muted)}
.bk-hour:hover{border-color:var(--ink)}
.bk-hour[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.bk-hour[aria-pressed="true"] small{background:rgba(255,255,255,.18);color:inherit}
.bk-mins{display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:.45rem}
.bk-min{
  min-height:44px;border-radius:12px;border:1px solid var(--line);background:var(--surface);
  font:700 .92rem/1 var(--font-sans);color:var(--ink);cursor:pointer;font-variant-numeric:tabular-nums;
  animation:bkIn .3s var(--ease) both;animation-delay:calc(var(--i,0) * 18ms);
  transition:background-color var(--dur),color var(--dur),border-color var(--dur)
}
.bk-min:hover{border-color:var(--ink)}
.bk-min[aria-pressed="true"]{border-color:var(--beige-300);color:var(--black);box-shadow:0 0 0 2px var(--ink)}

/* ── Details form ───────────────────────────────────────────────── */
.bk-fields{display:grid;gap:1.1rem}
@media(min-width:640px){.bk-fields{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.bk-field--full{grid-column:1/-1}}
.bk-field label{display:block;margin-bottom:.4rem;font-size:.82rem;font-weight:700;color:var(--ink)}
.bk-field label small{font-weight:600;color:var(--faint)}
.bk-field input,.bk-field textarea,.bk-discount input{
  width:100%;min-height:52px;padding:.85rem 1rem;border-radius:14px;border:1px solid var(--line-strong);
  background:var(--surface);color:var(--ink);font:600 1rem/1.4 var(--font-sans);
  transition:border-color var(--dur),box-shadow var(--dur),background-color var(--dur)
}
.bk-field textarea{resize:vertical;min-height:96px}
.bk-field input::placeholder,.bk-field textarea::placeholder,.bk-discount input::placeholder{color:var(--faint);font-weight:500}
.bk-field input:hover,.bk-field textarea:hover{border-color:var(--ink)}
.bk-field input:focus,.bk-field textarea:focus,.bk-discount input:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 4px rgba(17,17,17,.08)}
[data-theme="dark"] .bk-field input:focus,[data-theme="dark"] .bk-field textarea:focus,[data-theme="dark"] .bk-discount input:focus{box-shadow:0 0 0 4px rgba(233,222,207,.15)}
.bk-field__help{margin:.4rem 0 0;font-size:.78rem;color:var(--faint)}
.bk-field__error{margin:.4rem 0 0;font-size:.8rem;font-weight:700;color:#B3261E}
.bk-field__error:empty{display:none}
[data-theme="dark"] .bk-field__error{color:#F2B8B5}
.bk-field.has-error input{border-color:#B3261E;box-shadow:0 0 0 4px rgba(179,38,30,.1)}
[data-theme="dark"] .bk-field.has-error input{border-color:#F2B8B5}
.bk-field.has-error .bk-field__help{display:none}

/* ── Review ─────────────────────────────────────────────────────── */
.bk-r-grid{display:grid;gap:.75rem}
@media(min-width:640px){.bk-r-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.bk-r-block{position:relative;padding:1.1rem 1.2rem;border-radius:var(--radius);background:var(--surface-2);border:1px solid var(--line)}
.bk-r-block + .bk-r-block,.bk-r-grid + .bk-r-block{margin-top:.75rem}
.bk-r-grid .bk-r-block + .bk-r-block{margin-top:0}
.bk-r-title{margin:0 0 .5rem;font-size:.66rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.bk-r-big{margin:0;font-size:1.2rem;font-weight:700;color:var(--ink)}
.bk-r-sub,.bk-r-line{margin:.15rem 0 0;font-size:.92rem;font-weight:600;color:var(--muted);overflow-wrap:anywhere}
.bk-r-notes{margin:0;font-size:.92rem;color:var(--muted);white-space:pre-line}
.bk-r-edit{position:absolute;top:.8rem;right:.8rem;padding:.3rem .65rem;border-radius:999px;border:1px solid var(--line-strong);background:var(--surface);font:700 .66rem/1 var(--font-sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ink);cursor:pointer}
.bk-r-edit:hover{background:var(--ink);color:var(--bg)}
.bk-r-lines{list-style:none;margin:0;padding:0}
.bk-r-lines li{display:flex;gap:.75rem;align-items:baseline;padding:.45rem 0;border-bottom:1px dashed var(--line);font-weight:600;color:var(--ink)}
.bk-r-lines li > span:first-child{flex:1;min-width:0}
.bk-r-lines li.is-extra{color:var(--muted)}
.bk-r-dur{font-size:.8rem;color:var(--faint)}
.bk-r-price{font-variant-numeric:tabular-nums}
.bk-r-sum{display:flex;justify-content:space-between;gap:1rem;padding-top:.6rem;font-weight:600;color:var(--muted)}
.bk-r-disc{color:#2F7A4B}
[data-theme="dark"] .bk-r-disc{color:#8FD3A8}
.bk-r-total{margin-top:.35rem;padding-top:.8rem;border-top:1px solid var(--ink);font-size:1.1rem;font-weight:700;color:var(--ink)}

/* ── Discount ───────────────────────────────────────────────────── */
.bk-discount{margin-top:1.25rem;padding:1.1rem 1.2rem;border-radius:var(--radius);border:1px dashed var(--line-strong)}
.bk-discount label{display:flex;align-items:center;gap:.5rem;margin-bottom:.6rem;font-size:.82rem;font-weight:700;color:var(--ink)}
.bk-discount label svg{width:16px;height:16px}
.bk-discount label small{font-weight:600;color:var(--faint)}
.bk-discount__row{display:flex;gap:.5rem}
.bk-discount input{min-width:0;min-height:46px;text-transform:uppercase;letter-spacing:.12em;font-weight:700}
.bk-discount__row .bf-btn{flex:none;min-height:46px}
.bk-discount__feedback{margin:.6rem 0 0;font-size:.85rem;font-weight:600}
.bk-discount__feedback.is-success{color:#2F7A4B}
.bk-discount__feedback.is-error{color:#B3261E}
[data-theme="dark"] .bk-discount__feedback.is-success{color:#8FD3A8}
[data-theme="dark"] .bk-discount__feedback.is-error{color:#F2B8B5}
.bk-discount__promo{margin:.7rem 0 0;font-size:.85rem;color:var(--muted)}
.bk-discount__promo button{padding:.1rem .45rem;border:1px dashed var(--line-strong);border-radius:6px;background:none;color:var(--ink);font:inherit;font-weight:700;letter-spacing:.08em;cursor:pointer}
.bk-discount__promo button:hover{border-color:var(--ink)}
.bk-stage__foot--confirm .bk-confirm{min-height:56px;padding-inline:2rem;font-size:.85rem}
.bk-confirm svg{width:18px;height:18px}

/* ── Live ticket (graphite island, same tokens as the home team section) ── */
.bk-ticket{
  --bg:#1E1D1B;--surface:#272623;--surface-2:#302E2B;--ink:#F5F3EF;--muted:#BDB7AE;--faint:#A29B92;
  --line:#3A3834;--line-strong:#55514B;--accent:#D8C8B1;
  color:var(--ink)
}
.bk-ticket__bar{display:none}
.bk-ticket__body{
  position:relative;padding:1.5rem 1.5rem 1.35rem;border-radius:var(--radius-lg);background:var(--bg);
  box-shadow:0 24px 50px -24px rgba(0,0,0,.55);overflow:hidden
}
.bk-ticket__body::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:linear-gradient(90deg,var(--beige-300),var(--beige-400))}
.bk-ticket__eyebrow{margin:0 0 1.1rem;font-size:.68rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--beige-300)}
.bk-ticket__label{margin:0 0 .2rem;font-size:.64rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.bk-ticket__value{margin:0;font-weight:700;font-size:1rem;line-height:1.35;color:var(--ink);text-transform:none}
.bk-ticket__value small{display:block;margin-top:.1rem;font-size:.82rem;font-weight:600;color:var(--muted)}
.bk-ticket__barber{display:flex;align-items:center;gap:.85rem;padding-bottom:1rem;border-bottom:1px solid var(--line)}
.bk-ticket__avatar{flex:none;width:48px;height:48px;border-radius:50%;overflow:hidden;background:var(--surface-2);border:2px solid var(--line-strong)}
.bk-ticket__avatar img{width:100%;height:100%;object-fit:cover;display:block}
.bk-ticket__row{padding:1rem 0;border-bottom:1px solid var(--line)}
.bk-ticket__lines{list-style:none;margin:0;padding:0;display:grid;gap:.3rem}
.bk-ticket__lines li{display:flex;justify-content:space-between;gap:.75rem;font-weight:700;font-size:.95rem}
.bk-ticket__lines li.is-extra{font-weight:600;color:var(--muted);font-size:.88rem}
.bk-ticket__lines li b{font-variant-numeric:tabular-nums}
.bk-ticket__lines .is-placeholder{font-weight:600;color:var(--muted)}
.bk-ticket__perf{position:relative;height:0;margin:1.1rem -1.5rem;border-top:2px dashed var(--line-strong)}
.bk-ticket__perf::before,.bk-ticket__perf::after{content:"";position:absolute;top:-12px;width:22px;height:22px;border-radius:50%;background:var(--page-bg)}
.bk-ticket__perf::before{left:-11px}
.bk-ticket__perf::after{right:-11px}
.bk-ticket__totals{margin:0;display:grid;gap:.35rem}
.bk-ticket__totals > div{display:flex;justify-content:space-between;gap:1rem;font-size:.9rem;font-weight:600;color:var(--muted)}
.bk-ticket__totals dd{margin:0;font-variant-numeric:tabular-nums}
.bk-ticket__totals [data-t="discount"]{color:#8FD3A8}
.bk-ticket__grand{margin-top:.35rem;align-items:baseline}
.bk-ticket__grand dt{font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.bk-ticket__grand dd{font-size:2rem;font-weight:700;color:var(--ink);line-height:1}
.bk-ticket__note{margin:1.1rem 0 0;padding:.8rem .9rem;border-radius:12px;background:var(--surface);font-size:.8rem;line-height:1.5;color:var(--muted)}
.bk-ticket__note a{color:var(--ink);font-weight:700}

/* Mobile: bottom bar + sheet */
@media(max-width:1023px){
  .bk-page{padding-bottom:76px}
  .bk-ticket{position:fixed;left:0;right:0;bottom:0;z-index:46;padding:0 .75rem calc(.75rem + env(safe-area-inset-bottom,0px))}
  .bk-ticket__bar{
    display:flex;align-items:center;gap:.75rem;width:100%;min-height:58px;padding:.6rem .7rem .6rem 1.1rem;
    border:0;border-radius:999px;background:var(--bg);color:var(--ink);cursor:pointer;text-align:left;
    box-shadow:0 0 0 4px rgba(199,175,142,.35),0 18px 40px -12px rgba(0,0,0,.55);font-family:var(--font-sans)
  }
  .bk-ticket__bar-label{font-size:.66rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--beige-300)}
  .bk-ticket__bar-total{flex:1;text-align:right;font-weight:700;font-size:.95rem}
  .bk-ticket__bar-icon{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--beige-300);color:var(--black);transition:transform var(--dur) var(--ease)}
  .bk-ticket__bar-icon svg{width:18px;height:18px}
  .bk-ticket.is-open .bk-ticket__bar-icon{transform:rotate(180deg)}
  .bk-ticket__body{
    position:absolute;left:.75rem;right:.75rem;bottom:calc(100% + .6rem);max-height:min(70vh,560px);overflow:auto;
    opacity:0;visibility:hidden;transform:translateY(16px);
    transition:opacity .3s var(--ease),transform .3s var(--ease),visibility 0s linear .3s
  }
  .bk-ticket.is-open .bk-ticket__body{opacity:1;visibility:visible;transform:none;transition-delay:0s}
  [data-theme="dark"] .bk-ticket__body{border:1px solid #3A3834}
  .bk-ticket__perf::before,.bk-ticket__perf::after{display:none}
}

/* ── Toasts & overlays ──────────────────────────────────────────── */
.bk-toasts{position:fixed;top:calc(var(--nav-h) + 1rem);right:1rem;left:1rem;z-index:10000;display:grid;justify-items:end;gap:.5rem;pointer-events:none}
.bk-toast{
  max-width:380px;padding:.9rem 1.1rem;border-radius:14px;background:#111;color:#F5F3EF;font-weight:600;font-size:.92rem;
  box-shadow:0 16px 40px -16px rgba(0,0,0,.6);border-left:4px solid var(--beige-300);
  opacity:0;transform:translateY(-8px);transition:opacity .3s var(--ease),transform .3s var(--ease);pointer-events:auto
}
.bk-toast--error{border-left-color:#E5735F}
.bk-toast.is-in{opacity:1;transform:none}
[data-theme="dark"] .bk-toast{background:#EADFCF;color:#141312}

.bk-overlay{
  position:fixed;inset:0;z-index:10001;display:grid;place-items:center;padding:1.25rem;
  background:rgba(12,12,11,.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  opacity:0;transition:opacity .3s var(--ease)
}
.bk-overlay.is-in{opacity:1}
.bk-overlay__card{
  width:min(440px,100%);padding:2.25rem 1.75rem;border-radius:var(--radius-lg);background:var(--surface);color:var(--ink);
  text-align:center;box-shadow:0 30px 80px -30px rgba(0,0,0,.7);transform:translateY(10px) scale(.98);transition:transform .4s var(--ease)
}
.bk-overlay.is-in .bk-overlay__card{transform:none}
.bk-overlay h2{margin:1.1rem 0 .4rem;font-size:1.35rem;font-weight:700}
.bk-overlay p{margin:0;color:var(--muted);line-height:1.6}
.bk-overlay .bf-btn{margin-top:1.5rem}
.bk-redirect{display:block;margin-top:.8rem;font-size:.75rem;color:var(--faint)}
.bk-spinner{display:inline-block;width:46px;height:46px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--ink);animation:bkSpin .9s linear infinite}
@keyframes bkSpin{to{transform:rotate(360deg)}}
.bk-success-icon{display:inline-grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--beige-300);color:var(--black);animation:bkPop .5s var(--ease)}
.bk-success-icon svg{width:30px;height:30px}
@keyframes bkPop{0%{transform:scale(.4);opacity:0}70%{transform:scale(1.08)}100%{transform:none;opacity:1}}

/* Footer: no floating CTA here, keep normal spacing */
@media(max-width:767px){.bk-page .bf-footer footer{padding-bottom:7rem!important}}

@media (prefers-reduced-motion:reduce){
  .bk-stage__body,.bk-service-item,.bk-extra-item,.bk-min{animation:none}
  .bk-day.is-loading .bk-day__bar,.bk-times__skeleton i{animation:none}
}

/* ── Date & time: guided sub-steps ──────────────────────────────── */
.bk-substeps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem;margin:0 0 1.25rem;padding:0;list-style:none;counter-reset:none}
.bk-substep{
  position:relative;display:flex;align-items:center;gap:.6rem;min-width:0;padding:.65rem .75rem;
  border-radius:var(--radius);border:1px solid var(--line);background:var(--surface-2);color:var(--faint);
  transition:background-color .35s ease,border-color .35s ease,color .35s ease
}
.bk-substep__n{
  flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;
  border:1px solid var(--line-strong);font-size:.78rem;font-weight:700;color:var(--faint);background:var(--surface);
  transition:background-color .35s ease,color .35s ease,border-color .35s ease
}
.bk-substep__txt{display:flex;flex-direction:column;min-width:0;line-height:1.2}
.bk-substep__txt b{font-size:.82rem;color:inherit}
.bk-substep__txt small{font-size:.74rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bk-substep.is-current{border-color:var(--ink);background:var(--surface);color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.bk-substep.is-current .bk-substep__n{background:var(--btn-bg);border-color:var(--btn-bg);color:var(--btn-fg)}
.bk-substep.is-done{color:var(--ink)}
.bk-substep.is-done .bk-substep__n{background:var(--beige-300);border-color:var(--beige-300);color:var(--black)}
.bk-substep.is-done .bk-substep__txt small{color:var(--muted)}
.bk-substep.is-link{cursor:pointer}
.bk-substep.is-link:hover{border-color:var(--line-strong)}
@media(max-width:559px){
  .bk-substeps{gap:.35rem}
  .bk-substep{flex-direction:column;align-items:flex-start;gap:.35rem;padding:.55rem .6rem}
  .bk-substep__n{width:24px;height:24px;font-size:.7rem}
}

/* Panel for the current sub-step */
.bk-pane{animation:bkPane .35s ease both}
@keyframes bkPane{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:none}}
.bk-pane__step{margin:0;font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.bk-pane__title{margin:.2rem 0 .3rem;font-size:1.15rem;font-weight:700;color:var(--ink)}
.bk-pane__help{margin:0 0 1rem;font-size:.86rem;color:var(--muted);line-height:1.5}
.bk-pane__back{
  display:inline-flex;align-items:center;gap:.35rem;margin:0 0 .9rem;padding:.4rem .75rem .4rem .55rem;border-radius:999px;
  border:1px solid var(--line-strong);background:var(--surface);font:700 .78rem/1 var(--font-sans);color:var(--ink);cursor:pointer
}
.bk-pane__back svg{width:15px;height:15px}
.bk-pane__back:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.bk-pane__part{margin:.9rem 0 .45rem;font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.bk-pane__part:first-of-type{margin-top:0}
.bk-blocks{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,136px),1fr));gap:.5rem}
.bk-blockbtn{
  display:flex;flex-direction:column;align-items:flex-start;gap:.2rem;padding:.75rem .85rem;border-radius:14px;
  border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);cursor:pointer;text-align:left;
  font-family:var(--font-sans);font-variant-numeric:tabular-nums;
  transition:border-color .25s ease,background-color .25s ease,transform .25s ease;
  /* Staggered entrance draws the eye to the blocks; 'backwards' so :hover lift still works afterwards */
  animation:bkIn .4s var(--ease) backwards;animation-delay:calc(.12s + var(--i,0) * 35ms)
}
.bk-blockbtn b{font-size:.98rem}
.bk-blockbtn small{font-size:.74rem;font-weight:600;color:var(--muted)}
.bk-blockbtn:hover{border-color:var(--ink);transform:translateY(-1px)}
.bk-blockbtn[aria-pressed="true"]{background:var(--btn-bg);color:var(--btn-fg);border-color:var(--btn-bg)}
.bk-blockbtn[aria-pressed="true"] small{color:inherit;opacity:.75}
.bk-pane__done{
  display:flex;align-items:center;gap:.6rem;margin:1rem 0 0;padding:.75rem .9rem;border-radius:14px;
  background:var(--surface-2);border:1px solid var(--line);font-size:.88rem;font-weight:600;color:var(--ink)
}
.bk-pane__done svg{flex:none;width:18px;height:18px;padding:3px;border-radius:50%;background:var(--beige-300);color:var(--black);box-sizing:content-box}
.bk-next.is-ready{animation:bkReady 1.6s ease 1}
@keyframes bkReady{0%,100%{box-shadow:0 0 0 0 rgba(199,175,142,0)}40%{box-shadow:0 0 0 6px rgba(199,175,142,.45)}}
@media (prefers-reduced-motion:reduce){
  .bk-stage__body,.bk-stage.is-open .bk-stage__body{transition:none}
  .bk-pane,.bk-blockbtn,.bk-next.is-ready{animation:none}
}