/* V.1.168.0 — the app's booking page in the approved design (mock-up C1–C15):
   one step at a time (What · When · Who · Check), a summary bar that always
   shows what, when and how much, and two columns on a tablet. Only applied
   in the app view (html.view-app → html.bk-v2); the website's /book is
   untouched. The page's own logic is unchanged — this restyles and arranges
   what is already there. */
html.bk-v2 { --bg:#FCF9F8; --ink:#2B2224; --ink2:#5E4E4F; --muted:#9A8585; --line:#F3E8E5; --line2:#EBDAD5; --bd:#F0DFD9; --accent:#B9837A; --accent2:#9A6A62; --soft:#F7EAE6; --sel:#B9837A; --rgd:linear-gradient(125deg,#D9AE9F 0%,#B9857A 45%,#93645B 100%); }
html.bk-v2 body { background:var(--bg) !important; font-feature-settings:"lnum" 1; }
html.bk-v2 nav.nav, html.bk-v2 .app-book-bar, html.bk-v2 #booking .section-head, html.bk-v2 #booking .step-label { display:none !important; }
html.bk-v2 #booking { padding:calc(8px + env(safe-area-inset-top,0px)) 0 170px !important; background:var(--bg) !important; }
html.bk-v2 #booking > .wrap { max-width:560px !important; padding:0 18px !important; }
html.bk-v2 #booking .booking-card { margin-bottom:14px !important; opacity:1 !important; }
html.bk-v2 #booking .booking-card.wz-off { display:none !important; }

/* header */
.wz-head { display:flex; align-items:center; gap:12px; padding:4px 0 6px; }
.wz-head h1 { font-family:"Cormorant Garamond",Georgia,serif; font-weight:500; font-size:34px; line-height:1.05; margin:0; flex:1; color:var(--ink); }
.wz-head .bkb { width:40px; height:40px; border-radius:50%; background:#fff; border:1px solid #F0DFDA; box-shadow:0 4px 12px rgba(185,131,122,.12); display:flex; align-items:center; justify-content:center; color:var(--accent); flex:none; cursor:pointer; padding:0; }
.wz-head .bkb svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.wz-head .bkb[hidden] { display:none; }
.wz-stp { display:flex; align-items:center; gap:10px; padding:0 0 14px; }
.wz-stp .n { font:600 12px Jost,sans-serif; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); }
.wz-stp .dots { display:flex; gap:5px; margin-left:auto; }
.wz-stp .dots i { width:22px; height:4px; border-radius:4px; background:#EBDAD5; }
.wz-stp .dots i.on { background:var(--accent); }
html.bk-v2.wz-done .wz-head, html.bk-v2.wz-done .wz-stp, html.bk-v2.wz-done .wz-cta, html.bk-v2.wz-done .wz-side { display:none !important; }

/* the summary bar */
.wz-cta { position:fixed; left:0; right:0; bottom:calc(76px + env(safe-area-inset-bottom,0px)); padding:10px 12px; z-index:140; pointer-events:none; }
.wz-cta[hidden] { display:none; }
.wz-sumf { pointer-events:auto; max-width:540px; margin:0 auto; display:flex; align-items:center; gap:10px; background:var(--rgd); color:#fff; border-radius:20px; padding:10px 10px 10px 16px; box-shadow:0 12px 26px -10px rgba(140,95,88,.7); font-family:Jost,sans-serif; }
.wz-sumf .tx { flex:1; min-width:0; }
.wz-sumf b { font-size:15.5px; font-weight:600; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wz-sumf span { font-size:12px; opacity:.9; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wz-sumf button { border:0; background:#fff; color:var(--accent2); border-radius:99px; padding:11px 20px; font:600 14.5px Jost,sans-serif; cursor:pointer; white-space:nowrap; }
.wz-sumf button.dis { opacity:.55; }

/* step 1: who for, salon/home, categories and treatments */
html.bk-v2 #booking .party-label, html.bk-v2 #booking .party-hint { font:600 11.5px Jost,sans-serif !important; letter-spacing:.12em !important; text-transform:uppercase !important; color:var(--muted) !important; margin:0 2px 8px !important; }
html.bk-v2 #booking .party-choice { display:flex; gap:8px !important; }
html.bk-v2 #booking .party-btn { flex:1; border:1.5px solid var(--line2) !important; border-radius:14px !important; padding:11px 6px !important; background:#fff !important; color:var(--ink2) !important; font:500 14px Jost,sans-serif !important; box-shadow:none !important; text-transform:none !important; letter-spacing:0 !important; }
html.bk-v2 #booking .party-btn.selected { border-color:var(--sel) !important; background:var(--sel) !important; color:#fff !important; }
html.bk-v2 #booking #venueChoice { background:#F5EAE7; border-radius:12px; padding:3px; gap:2px !important; }
html.bk-v2 #booking #venueChoice .party-btn { border:0 !important; border-radius:9px !important; background:transparent !important; color:#7e6a6a !important; padding:8px 6px !important; }
html.bk-v2 #booking #venueChoice .party-btn.selected { background:#fff !important; color:var(--ink) !important; box-shadow:0 1px 3px rgba(60,35,25,.12) !important; }
html.bk-v2 #bookingAccordion .accordion-item { background:#fff !important; border:1px solid var(--bd) !important; border-radius:18px !important; overflow:hidden; margin-bottom:9px !important; box-shadow:none !important; }
html.bk-v2 #bookingAccordion .accordion-header { padding:10px 12px !important; gap:12px !important; background:#fff !important; }
html.bk-v2 #bookingAccordion .accordion-icon, html.bk-v2 #bookingAccordion .accordion-icon img { width:44px !important; height:44px !important; border-radius:50% !important; box-shadow:0 0 0 1px var(--bd); }
html.bk-v2 #bookingAccordion .accordion-title { font:600 21px "Cormorant Garamond",Georgia,serif !important; color:var(--ink) !important; letter-spacing:0 !important; text-transform:none !important; }
html.bk-v2 #bookingAccordion .accordion-info { font:600 10.5px Jost,sans-serif !important; letter-spacing:.1em !important; text-transform:uppercase; color:var(--accent) !important; border:1px solid #EED7D0 !important; border-radius:99px !important; padding:4px 9px !important; background:#fff !important; }
html.bk-v2 #bookingAccordion .accordion-item.open .accordion-header { border-bottom:1px solid var(--line); }
html.bk-v2 #bookingAccordion .option-grid { display:block !important; gap:0 !important; }
html.bk-v2 #bookingAccordion .option { display:flex !important; align-items:center; gap:12px; border:0 !important; border-radius:0 !important; margin:0 !important; padding:12px 14px !important; background:#fff !important; box-shadow:none !important; min-height:56px; }
html.bk-v2 #bookingAccordion .option + .option { border-top:1px solid var(--line) !important; }
html.bk-v2 #bookingAccordion .option .opt-name { flex:1; font:500 15px Jost,sans-serif !important; color:var(--ink) !important; }
html.bk-v2 #bookingAccordion .option .opt-name small { display:block; font-size:12.5px; color:var(--muted); font-weight:400; }
html.bk-v2 #bookingAccordion .option .opt-dur-inline { display:none; }
html.bk-v2 #bookingAccordion .option .meta { font-size:14px !important; color:var(--ink2) !important; text-align:right; white-space:nowrap; }
html.bk-v2 #bookingAccordion .option .opt-tick { order:-1; width:22px !important; height:22px !important; border-radius:7px !important; border:2px solid #DCC9C6 !important; background:#fff !important; flex:none; position:relative; }
html.bk-v2 #bookingAccordion .option.selected { background:#FCF5F3 !important; }
html.bk-v2 #bookingAccordion .option.selected .opt-tick { background:var(--sel) !important; border-color:var(--sel) !important; }
html.bk-v2 #bookingAccordion .option.selected .opt-tick:after { content:""; position:absolute; left:6px; top:2px; width:5px; height:10px; border:solid #fff; border-width:0 2.5px 2.5px 0; transform:rotate(45deg); }
html.bk-v2 #chosenServices { background:var(--soft) !important; border:0 !important; border-radius:16px !important; padding:12px 14px !important; color:var(--accent2); font-size:14px; }
html.bk-v2 .party-people .person-box, html.bk-v2 .party-people > * { border-radius:16px !important; }
html.bk-v2 #optOverlay .opt-card { border-radius:16px !important; border:1.5px solid var(--line2) !important; }
html.bk-v2 #optOverlay .opt-card:hover { border-color:var(--sel) !important; }

/* step: when */
html.bk-v2 .day-strip-month { font:600 16px Jost,sans-serif !important; }
html.bk-v2 .day-strip-more { border:1px solid var(--bd) !important; border-radius:99px !important; padding:6px 12px !important; background:#fff !important; color:var(--accent2) !important; }
html.bk-v2 .ds-day { flex:0 0 calc((100% - 54px) / 7) !important; gap:0 !important; background:#fff !important; border:1px solid var(--line2) !important; border-radius:14px !important; padding:7px 0 6px !important; }
html.bk-v2 .ds-day .ds-wd { font-size:10.5px !important; letter-spacing:.04em; }
html.bk-v2 .ds-day .ds-num { width:auto !important; aspect-ratio:auto !important; border:0 !important; background:none !important; box-shadow:none !important; font-size:17px !important; font-weight:600 !important; height:auto !important; }
html.bk-v2 .day-strip { gap:9px !important; }
html.bk-v2 .ds-day.selected { background:var(--sel) !important; border-color:var(--sel) !important; }
html.bk-v2 .ds-day.selected .ds-wd, html.bk-v2 .ds-day.selected .ds-num { color:#fff !important; }
html.bk-v2 .ds-day.disabled, html.bk-v2 .ds-day.blocked { background:transparent !important; border-style:dashed !important; }
html.bk-v2 .ds-day.today:not(.selected) .ds-num { color:var(--accent2) !important; }
html.bk-v2 #slotsWrap .slot-group-label { font:600 12px Jost,sans-serif !important; letter-spacing:.08em !important; color:var(--muted) !important; }
html.bk-v2 #slotsWrap .slot { border-radius:12px !important; background:#fff !important; border:1px solid var(--line2) !important; color:var(--ink) !important; font:500 14px Jost,sans-serif !important; box-shadow:none !important; padding:11px 0 !important; }
html.bk-v2 #slotsWrap .slot.selected, html.bk-v2 #slotsWrap .slot[aria-pressed="true"] { background:var(--sel) !important; border-color:var(--sel) !important; color:#fff !important; }
html.bk-v2 #slotsWrap > p.empty { background:#fff; border:1px solid var(--bd); border-radius:18px; padding:22px 16px !important; text-align:center; color:var(--ink2) !important; }
html.bk-v2 .pin-wrap .link-btn { border:1px solid var(--bd) !important; border-radius:99px !important; background:#fff !important; padding:8px 14px !important; color:var(--accent2) !important; text-decoration:none !important; font:500 13.5px Jost,sans-serif !important; }

/* step: who */
html.bk-v2 #staffList, html.bk-v2 #staffAtWrap .option-grid, html.bk-v2 .pin-picker { display:grid; grid-template-columns:1fr 1fr !important; gap:9px !important; }
html.bk-v2 #step-staff .option, html.bk-v2 .pin-picker .option { flex-direction:column !important; align-items:center !important; text-align:center !important; gap:2px !important; background:#fff !important; border:1.5px solid var(--line2) !important; border-radius:18px !important; padding:14px 10px !important; position:relative; box-shadow:none !important; min-height:0 !important; }
html.bk-v2 #step-staff .option > span:first-of-type, html.bk-v2 .pin-picker .option > span:first-of-type { font:600 15px Jost,sans-serif !important; color:var(--ink) !important; }
html.bk-v2 #step-staff .option .meta, html.bk-v2 .pin-picker .option .meta { display:flex !important; flex-direction:column; align-items:center; font-size:12px !important; color:var(--muted) !important; gap:1px; }
html.bk-v2 #step-staff .option .staff-first, html.bk-v2 #step-staff .option .staff-next { color:#2F8A5B !important; font-weight:600 !important; font-size:11.5px !important; margin-top:4px; }
html.bk-v2 #step-staff .option.selected, html.bk-v2 .pin-picker .option.selected { border-color:var(--sel) !important; background:var(--soft) !important; }
html.bk-v2 #step-staff .option.staff-busy { opacity:.5 !important; }
.wz-av { width:58px; height:58px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font:600 20px Jost,sans-serif; margin:0 auto 7px; background-size:cover; background-position:center 30%; flex:none; }
.wz-av.any { background:var(--soft) !important; color:var(--accent); }
.wz-av svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.wz-fav { position:absolute; top:8px; right:8px; width:30px; height:30px; border:0; background:none; color:#D9C3BF; display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0; }
.wz-fav svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.9; }
.wz-fav.on { color:var(--accent); } .wz-fav.on svg { fill:var(--accent); }
.wz-favtag { display:inline-block; font:600 10.5px Jost,sans-serif; letter-spacing:.06em; color:var(--accent); margin-top:3px; }
.wz-note { font-size:12.5px; color:var(--muted); text-align:center; margin:10px 4px 0; line-height:1.45; }

/* step: check */
html.bk-v2 #bookingSummary { background:#fff !important; border:1px solid var(--bd) !important; border-radius:20px !important; padding:14px 16px !important; }
html.bk-v2 #bookingSummaryBody { font-size:14px !important; }
html.bk-v2 #step-details label { font:500 12.5px Jost,sans-serif !important; color:var(--ink2) !important; letter-spacing:0 !important; text-transform:none !important; margin:12px 4px 6px !important; display:block; }
html.bk-v2 #booking input[type=text], html.bk-v2 #booking input[type=email], html.bk-v2 #booking input[type=tel], html.bk-v2 #booking input[type=password], html.bk-v2 #booking textarea { border-radius:14px !important; border:1px solid var(--line2) !important; background:#fff !important; font:400 16px Jost,sans-serif !important; padding:13px 14px !important; }
html.bk-v2 #booking .account-choice-option { border-radius:16px !important; border:1.5px solid var(--line2) !important; background:#fff !important; }
html.bk-v2 #booking .account-choice-option:has(input:checked) { border-color:var(--sel) !important; background:var(--soft) !important; }
html.bk-v2 #booking .terms-notice, html.bk-v2 #booking .late-notice { text-align:left; }

/* the full-day card ("tell me if a time opens") */
.wz-wait { background:#fff; border:1px solid var(--bd); border-radius:18px; padding:13px 14px; margin-top:10px; display:flex; align-items:center; gap:12px; font-family:Jost,sans-serif; }
.wz-wait b { display:block; font-size:15px; font-weight:600; color:var(--ink); } .wz-wait span { font-size:13px; color:var(--muted); }
.wz-tg { width:51px; height:31px; border-radius:16px; background:#EADCD9; position:relative; flex:none; cursor:pointer; border:0; padding:0; }
.wz-tg:after { content:""; position:absolute; top:2px; left:2px; width:27px; height:27px; border-radius:50%; background:#fff; box-shadow:0 2px 4px rgba(0,0,0,.18); transition:left .2s; }
.wz-tg.on { background:#C08E83; } .wz-tg.on:after { left:22px; }

/* request sent */
html.bk-v2 #confirmCard { background:transparent !important; border:0 !important; box-shadow:none !important; padding:18px 4px 0 !important; }
html.bk-v2 #confirmCard .tick { width:92px !important; height:92px !important; line-height:92px !important; background:var(--soft) !important; color:var(--accent) !important; box-shadow:0 0 0 10px rgba(247,234,230,.5) !important; font-size:40px !important; margin-top:24px !important; }
html.bk-v2 #confirmCard h2 { font:500 36px "Cormorant Garamond",Georgia,serif !important; }
.wz-next { text-align:left; background:#fff; border:1px solid var(--bd); border-radius:20px; padding:16px; margin:18px 0 14px; font-family:Jost,sans-serif; }
.wz-next .tl { position:relative; padding-left:22px; }
.wz-next .tl:before { content:""; position:absolute; left:6px; top:6px; bottom:6px; width:2px; background:var(--line2); }
.wz-next .tl div { position:relative; font-size:13.5px; padding:0 0 12px; color:var(--ink2); }
.wz-next .tl div:before { content:""; position:absolute; left:-21px; top:3px; width:12px; height:12px; border-radius:50%; background:#fff; border:2px solid var(--line2); }
.wz-next .tl div.on:before { background:var(--accent); border-color:var(--accent); }
.wz-next .tl b { display:block; color:var(--ink); font-weight:500; }
.wz-btns { display:flex; gap:9px; margin-bottom:9px; }
.wz-btns a, .wz-btns button { flex:1; display:flex; align-items:center; justify-content:center; gap:7px; border-radius:99px; padding:13px; font:500 15px Jost,sans-serif; text-decoration:none; cursor:pointer; border:1px solid #EBD8D2; background:#fff; color:var(--ink); }
.wz-btns a.p { background:var(--rgd); color:#fff; border-color:var(--accent); }
.wz-btns svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }

/* tablet: the steps on the left, the booking building up on the right */
.wz-side { display:none; }
@media (min-width:761px) {
  html.bk-v2 #booking > .wrap { max-width:1080px !important; padding:24px 34px 0 !important; display:grid; grid-template-columns:minmax(0,1fr) 340px; column-gap:24px; align-items:start; }
  html.bk-v2 #booking > .wrap > * { grid-column:1; }
  html.bk-v2 #booking > .wrap > .wz-side { grid-column:2; grid-row:1 / span 30; display:block; position:sticky; top:24px; }
  .wz-cta { display:none !important; }
  .wz-head h1 { font-size:40px; }
  .wz-side .card { background:#fff; border:1px solid rgba(243,232,229,.9); border-radius:20px; padding:18px 20px; box-shadow:0 1px 2px rgba(60,35,25,.05),0 6px 18px rgba(60,35,25,.06); font-family:Jost,sans-serif; }
  .wz-side .eyb { font:600 11.5px Jost,sans-serif; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); }
  .wz-side h3 { font:600 28px "Cormorant Garamond",Georgia,serif; margin:2px 0 8px; color:var(--ink); }
  .wz-side .st { display:flex; gap:12px; padding:10px 0; border-top:1px solid var(--line); }
  .wz-side .st:first-of-type { border-top:0; }
  .wz-side .st i { width:26px; height:26px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center; font:600 12.5px Jost,sans-serif; font-style:normal; background:var(--bg2,#F7EEEB); color:var(--muted); }
  .wz-side .st i.done { background:var(--accent); color:#fff; } .wz-side .st i.cur { background:var(--soft); color:var(--accent2); box-shadow:0 0 0 2px var(--accent); }
  .wz-side .st b { font-size:14.5px; font-weight:600; display:block; color:var(--ink); } .wz-side .st span { font-size:13px; color:var(--muted); }
  .wz-side .st a { margin-left:auto; font-size:13px; color:var(--accent2); font-weight:500; cursor:pointer; }
  .wz-side .tot { display:flex; justify-content:space-between; border-top:1px dashed var(--line2); margin-top:8px; padding-top:12px; font-size:17px; font-weight:600; color:var(--ink); }
  .wz-side button.go { width:100%; margin-top:12px; border:0; border-radius:99px; padding:13px; background:var(--rgd); color:#fff; font:500 15px Jost,sans-serif; cursor:pointer; }
  .wz-side button.go.dis { opacity:.5; }
  .wz-side .foot { font-size:12.5px; color:var(--muted); text-align:center; margin-top:8px; }
  html.bk-v2 #booking { padding-bottom:60px !important; }
}
html.bk-v2 #submitBtn { display:none !important; }
html.bk-v2 .app-booked .bk-acts, html.bk-v2 .app-booked .bk-main { display:none !important; }