/*!
 * Copyright (c) 2025-2026 Made For Artist. All rights reserved.
 * Proprietary and confidential -- see LICENSE at the repository root.
 *
 * booking-wizard.css — the five-step booking page.
 *
 * Self-contained: this page is a standalone document and must not depend on
 * app.css, bootstrap or the console chrome being loaded. The --th-* tokens come
 * from views/tenant/_theme.php when the shop has a palette; the fallbacks here
 * are the platform blue set.
 */

:root {
  --bkw-bg:      #F6F9FD;
  --bkw-card:    #FFFFFF;
  --bkw-ink:     #1B1F24;
  --bkw-ink-2:   #5E6875;
  --bkw-line:    #E1ECF8;
  --bkw-sky:     #E3F1FF;
  --bkw-sky-2:   #BFDCFB;
  --bkw-brand:   var(--th-primary, #1B75BE);
  --bkw-brand-d: var(--th-primary-dark, #0051A2);
  /* The pressed/hover shade. core/Theme.php already works this out for every
     theme it ships (primary_deep), so a gold shop gets a darker gold rather
     than the dark blue this used to hardcode. */
  --bkw-brand-h: var(--th-primary-deep, #003F7F);
  --bkw-ok:      #2E7D51;
  --bkw-ok-bg:   #E9F6EE;
  --bkw-bad:     #B42318;
  --bkw-bad-bg:  #FBE7E7;
  --bkw-serif:   'Playfair Display', Georgia, serif;
  --bkw-r:       16px;
  --bkw-t:       170ms cubic-bezier(.2,.8,.2,1);
}

*, *::before, *::after { box-sizing: border-box; }

body.bkw {
  margin: 0;
  background: var(--bkw-bg);
  color: var(--bkw-ink);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
.bkw a { color: inherit; }
.bkw img { display: block; max-width: 100%; }

/* Visually hidden, but still focusable and still announced. Not `hidden`:
   the old page put `hidden` on its service checkboxes, which took the entire
   service list out of the tab order and made booking mouse-only. */
.bkw-vh {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.bkw-sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.bkw :focus-visible { outline: 2px solid var(--bkw-brand-d); outline-offset: 2px; }

/* ── Chrome ───────────────────────────────────────────────────────────────── */
.bkw-top {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 12px 18px; background: #fff; border-bottom: 1px solid var(--bkw-line);
}
.bkw-brand { display: flex; align-items: center; gap: 9px; text-decoration: none; }
.bkw-brand img { width: 30px; height: 30px; border-radius: 9px; }
.bkw-brand b {
  font-family: var(--bkw-serif); font-weight: 500; font-size: 14px; line-height: 1.05;
  letter-spacing: .06em; text-transform: uppercase;
}
.bkw-back-shop {
  margin-left: auto; font-size: 13.5px; font-weight: 600; color: var(--bkw-ink-2);
  text-decoration: none;
}
.bkw-back-shop:hover { color: var(--bkw-brand-d); }
.is-embed .bkw-top { display: none; }

.bkw-wrap { max-width: 1080px; margin: 0 auto; padding: 22px 16px 70px; }
.bkw-head { text-align: center; margin-bottom: 20px; }
.bkw-head h1 {
  font-family: var(--bkw-serif); font-weight: 500; letter-spacing: -.015em;
  font-size: clamp(1.5rem, 3.4vw, 2.1rem); margin: 0 0 6px; text-wrap: balance;
}
.bkw-head p { margin: 0; color: var(--bkw-ink-2); font-size: 14px; }
.is-embed .bkw-head h1 { font-size: 1.3rem; }

/* ── The rail ─────────────────────────────────────────────────────────────── */
.bkw-rail { margin: 0 0 20px; }
.bkw-rail ol {
  display: flex; align-items: center; gap: 4px; list-style: none; margin: 0;
  padding: 0; overflow-x: auto; scrollbar-width: none;
}
.bkw-rail ol::-webkit-scrollbar { display: none; }
.bkw-rail__bar { flex: 1 1 14px; min-width: 14px; height: 2px; background: var(--bkw-line); }
.bkw-step {
  display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: 13px;
  font-weight: 600; white-space: nowrap; cursor: pointer; border: 1px solid var(--bkw-line);
  background: #fff; color: var(--bkw-ink-2); border-radius: 999px; padding: 7px 14px 7px 7px;
  transition: border-color var(--bkw-t), color var(--bkw-t), background var(--bkw-t);
}
.bkw-step__n {
  width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  background: var(--bkw-sky); color: var(--bkw-brand-d); font-size: 11.5px; font-weight: 700;
}
.bkw-step:disabled { opacity: .5; cursor: default; }
.bkw-step.is-now { border-color: var(--bkw-brand-d); color: var(--bkw-ink); }
.bkw-step.is-now .bkw-step__n { background: var(--bkw-brand-d); color: #fff; }
.bkw-step.is-done .bkw-step__n { background: var(--bkw-ok-bg); color: var(--bkw-ok); }
@media (max-width: 560px) { .bkw-step__t { display: none; } .bkw-step { padding: 7px; } }

/* ── Flashes ──────────────────────────────────────────────────────────────── */
.bkw-flash {
  display: flex; gap: 10px; border-radius: 12px; padding: 11px 14px; margin-bottom: 14px;
  font-size: 14px;
}
.bkw-flash p { margin: 0 0 3px; }
.bkw-flash p:last-child { margin-bottom: 0; }
.bkw-flash--bad { background: var(--bkw-bad-bg); color: var(--bkw-bad); border: 1px solid #F3CFCF; }

/* ── Layout ───────────────────────────────────────────────────────────────── */
.bkw-grid { display: grid; grid-template-columns: 1fr 304px; gap: 20px; align-items: start; }
@media (max-width: 900px) { .bkw-grid { grid-template-columns: 1fr; } }

.bkw-panel {
  background: var(--bkw-card); border: 1px solid var(--bkw-line);
  border-radius: var(--bkw-r); padding: 20px;
}
/* HIDDEN MEANS HIDDEN, everywhere on this page.

   The attribute, not a class: an element that is hidden is out of the tab
   order and out of the accessibility tree for free, which is the whole of
   "do not trap keyboard users".

   Blanket, and !important, because the browser's own [hidden] rule lives in
   the UA stylesheet and loses to ANY author `display`. This started as
   .bkw-panel[hidden] -- one class, guarded one at a time -- and the next
   element to get a display did not get a guard: .bkw-drop__got is
   display:flex, so the photo preview never hid, and its <img> sat there with
   no src drawing a broken-image icon and its alt text inside the dropzone on
   every booking. One rule for the page is the only version of this that
   cannot rot. */
[hidden] { display: none !important; }
.bkw-panel__h {
  font-family: var(--bkw-serif); font-weight: 500; font-size: 1.32rem; margin: 0 0 5px;
  letter-spacing: -.01em;
}
.bkw-panel__h:focus { outline: none; }
.bkw-panel__h:focus-visible { outline: 2px solid var(--bkw-brand-d); outline-offset: 3px; }
.bkw-panel__sub { margin: 0 0 16px; color: var(--bkw-ink-2); font-size: 13.5px; }
.bkw-cat {
  font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--bkw-ink-2); margin: 18px 0 8px;
}
.bkw-err {
  background: var(--bkw-bad-bg); color: var(--bkw-bad); border: 1px solid #F3CFCF;
  border-radius: 10px; padding: 9px 12px; font-size: 13.5px; margin: 0 0 12px;
}

/* ── Step 1: technicians ──────────────────────────────────────────────────── */
.bkw-techs { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.bkw-tech {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 14px 10px; border: 1px solid var(--bkw-line); border-radius: 14px;
  background: #fff; cursor: pointer; text-align: center;
  transition: border-color var(--bkw-t), transform var(--bkw-t);
}
.bkw-tech:hover { border-color: var(--bkw-sky-2); transform: translateY(-1px); }
.bkw-tech:focus-within { outline: 2px solid var(--bkw-brand-d); outline-offset: 2px; }
.bkw-tech.is-on { border-color: var(--bkw-brand-d); background: var(--bkw-sky); }
.bkw-tech__ph {
  width: 62px; height: 62px; border-radius: 16px; overflow: hidden; background: var(--bkw-sky);
  display: grid; place-items: center;
}
.bkw-tech__ph img { width: 100%; height: 100%; object-fit: cover; }
.bkw-tech__ph--any { background: var(--bkw-brand-d); color: #fff; font-size: 1.1rem; }
.bkw-tech__mono { font-family: var(--bkw-serif); font-size: 1.6rem; color: var(--bkw-brand-d); }
.bkw-tech__name { font-size: 14px; font-weight: 650; }
.bkw-tech__meta { font-size: 12px; color: var(--bkw-ink-2); }
.bkw-tech__tick {
  position: absolute; top: 8px; right: 8px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--bkw-brand-d); color: #fff; display: none; place-items: center; font-size: 10px;
}
.bkw-tech.is-on .bkw-tech__tick { display: grid; }

/* ── Step 2: the menu ─────────────────────────────────────────────────────── */
.bkw-svc {
  display: flex; align-items: flex-start; gap: 12px; padding: 12px; border-radius: 12px;
  border: 1px solid var(--bkw-line); background: #fff; cursor: pointer; margin-bottom: 8px;
  transition: border-color var(--bkw-t), background var(--bkw-t);
}
.bkw-svc:hover { border-color: var(--bkw-sky-2); }
.bkw-svc:focus-within { outline: 2px solid var(--bkw-brand-d); outline-offset: 2px; }
.bkw-svc.is-on { border-color: var(--bkw-brand-d); background: var(--bkw-sky); }
.bkw-svc__tick {
  flex: none; width: 22px; height: 22px; border-radius: 7px; border: 1.5px solid var(--bkw-sky-2);
  background: #fff; display: grid; place-items: center; font-size: 10px; color: transparent;
  margin-top: 1px;
}
.bkw-svc.is-on .bkw-svc__tick { background: var(--bkw-brand-d); border-color: var(--bkw-brand-d); color: #fff; }
.bkw-svc__b { flex: 1; min-width: 0; }
.bkw-svc__n { display: block; font-size: 14.5px; font-weight: 600; }
.bkw-svc__d { display: block; font-size: 12.5px; color: var(--bkw-ink-2); margin-top: 2px; }
.bkw-svc__meta { flex: none; text-align: right; }
.bkw-svc__p { display: block; font-size: 14px; font-weight: 700; }
.bkw-svc__t { display: block; font-size: 12px; color: var(--bkw-ink-2); }

.bkw-opts { display: none; padding: 2px 0 12px 44px; }
.bkw-opts.is-on { display: block; }
.bkw-opts__note { margin: 0 0 7px; font-size: 12.5px; color: var(--bkw-ink-2); }
.bkw-opts label {
  display: flex; align-items: center; gap: 9px; padding: 8px 11px; border-radius: 10px;
  border: 1px solid var(--bkw-line); margin-bottom: 6px; cursor: pointer; font-size: 13.5px;
}
.bkw-opts label.is-off { opacity: .55; cursor: not-allowed; }
.bkw-opts label b { font-weight: 600; }
.bkw-opts label b small { display: block; font-weight: 400; font-size: 11.5px; color: var(--bkw-ink-2); }
.bkw-opts label em { margin-left: auto; font-style: normal; color: var(--bkw-ink-2); font-size: 12.5px; }

.bkw-locked { border: 1px solid var(--bkw-sky-2); background: var(--bkw-sky); border-radius: 14px; padding: 15px; }
.bkw-locked__top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.bkw-locked__eye {
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--bkw-brand-d); background: #fff; border-radius: 999px; padding: 3px 9px;
}
.bkw-locked__top h3 { font-family: var(--bkw-serif); font-weight: 500; font-size: 1.1rem; margin: 0; }
.bkw-locked__p { margin-left: auto; font-size: 1.05rem; font-weight: 700; }
.bkw-locked__l {
  display: flex; gap: 10px; font-size: 13.5px; padding: 5px 0;
  border-top: 1px solid rgba(255,255,255,.7);
}
.bkw-locked__l em { margin-left: auto; font-style: normal; color: var(--bkw-ink-2); }
.bkw-escape { margin: 12px 0 0; font-size: 13px; }
.bkw-escape a { color: var(--bkw-brand-d); font-weight: 600; }

/* ── Step 3: times ────────────────────────────────────────────────────────── */
.bkw-date {
  width: 100%; max-width: 260px; font: inherit; font-size: 15px; padding: 10px 12px;
  border: 1px solid var(--bkw-line); border-radius: 10px; background: #fff; color: var(--bkw-ink);
}
.bkw-slotnote { margin: 14px 0 8px; font-size: 13.5px; color: var(--bkw-ink-2); }
.bkw-slotnote a { color: var(--bkw-brand-d); font-weight: 600; }
.bkw-slots__h {
  font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--bkw-ink-2); margin: 14px 0 7px;
}
.bkw-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; }
.bkw-slot {
  min-height: 44px; font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
  border-radius: 999px; border: 1px solid var(--bkw-line); background: #fff; color: var(--bkw-ink);
  font-variant-numeric: tabular-nums; white-space: nowrap;
  transition: border-color var(--bkw-t), background var(--bkw-t), color var(--bkw-t);
}
.bkw-slot:hover { border-color: var(--bkw-brand); }
.bkw-slot[aria-pressed="true"] {
  background: var(--bkw-brand-d); border-color: var(--bkw-brand-d); color: #fff;
}

/* ── Step 4: details ──────────────────────────────────────────────────────── */
.bkw-fld {
  display: block; font-size: 12.5px; font-weight: 650; color: var(--bkw-ink-2);
  margin: 0 0 5px;
}
.bkw-fld em { font-style: normal; font-weight: 400; }
.bkw-panel textarea, .bkw-panel input[type=text], .bkw-panel input[type=tel],
.bkw-panel input[type=email] {
  width: 100%; font: inherit; font-size: 14.5px; padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--bkw-line); background: #fff; color: var(--bkw-ink); margin-bottom: 4px;
}
.bkw-count { margin: 0 0 16px; font-size: 11.5px; color: var(--bkw-ink-2); text-align: right; }
.bkw-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 520px) { .bkw-two { grid-template-columns: 1fr; } }

.bkw-ask {
  background: var(--bkw-sky); border: 1px solid var(--bkw-sky-2); border-radius: 12px;
  padding: 13px; margin-bottom: 18px;
}
.bkw-ask__l { display: flex; gap: 11px; cursor: pointer; }
.bkw-ask__b b { display: block; font-size: 14px; margin-bottom: 3px; }
.bkw-ask__b span { display: block; font-size: 12.5px; line-height: 1.5; color: var(--bkw-ink-2); }
.bkw-ask__note { margin-top: 5px; font-style: italic; }

.bkw-drop {
  display: block; border: 1.5px dashed var(--bkw-sky-2); border-radius: 14px; padding: 20px 14px;
  text-align: center; cursor: pointer; background: #fff; transition: border-color var(--bkw-t);
}
.bkw-drop:hover, .bkw-drop.is-over { border-color: var(--bkw-brand-d); }
.bkw-drop:focus-within { outline: 2px solid var(--bkw-brand-d); outline-offset: 2px; }
.bkw-drop__idle i { font-size: 1.5rem; color: var(--bkw-brand); display: block; margin-bottom: 7px; }
.bkw-drop__idle b { display: block; font-size: 14px; margin-bottom: 3px; }
.bkw-drop__idle span { display: block; font-size: 12px; color: var(--bkw-ink-2); }
.bkw-drop__got { display: flex; align-items: center; gap: 12px; text-align: left; }
.bkw-drop__got img { width: 58px; height: 58px; border-radius: 10px; object-fit: cover; }
.bkw-drop__meta b { display: block; font-size: 13.5px; }
.bkw-drop__meta span { font-size: 12px; color: var(--bkw-ink-2); }
.bkw-drop__x {
  margin-top: 8px; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
  background: none; border: 0; color: var(--bkw-ink-2); padding: 4px;
}
.bkw-drop__x:hover { color: var(--bkw-bad); }

/* ── Step 5: review ───────────────────────────────────────────────────────── */
.bkw-rev { margin: 0 0 18px; }
.bkw-rev__r { display: flex; gap: 14px; padding: 10px 0; border-top: 1px solid var(--bkw-line); }
.bkw-rev__r:first-child { border-top: 0; }
.bkw-rev dt {
  flex: none; width: 82px; font-size: 11.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--bkw-ink-2); padding-top: 2px;
}
.bkw-rev dd { flex: 1; margin: 0; display: flex; gap: 10px; font-size: 14px; }
.bkw-rev dd span { flex: 1; min-width: 0; }
.bkw-rev__e {
  flex: none; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
  background: none; border: 0; color: var(--bkw-brand-d); padding: 0 2px;
}

.bkw-who {
  display: flex; align-items: center; gap: 11px; padding: 11px 13px; border-radius: 12px;
  background: var(--bkw-bg); border: 1px solid var(--bkw-line); margin-bottom: 10px;
}
.bkw-who__ic {
  width: 34px; height: 34px; border-radius: 50%; background: var(--bkw-sky);
  color: var(--bkw-brand-d); display: grid; place-items: center; flex: none;
}
.bkw-who__t { flex: 1; min-width: 0; }
.bkw-who__t b { display: block; font-size: 14px; }
.bkw-who__t span { display: block; font-size: 12.5px; color: var(--bkw-ink-2); }
.bkw-who__edit {
  font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; background: none;
  border: 0; color: var(--bkw-brand-d);
}
.bkw-policy, .bkw-after { font-size: 12.5px; color: var(--bkw-ink-2); margin: 12px 0 0; }
.bkw-dep {
  display: flex; gap: 10px; background: var(--bkw-sky); border: 1px solid var(--bkw-sky-2);
  border-radius: 12px; padding: 11px 13px; font-size: 12.5px; line-height: 1.5;
  color: var(--bkw-ink-2); margin-top: 14px;
}
.bkw-dep i { color: var(--bkw-brand-d); margin-top: 2px; }

/* ── Navigation ───────────────────────────────────────────────────────────── */
.bkw-nav {
  display: flex; align-items: center; gap: 10px; margin-top: 20px; padding-top: 16px;
  border-top: 1px solid var(--bkw-line);
}
.bkw-back {
  font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; background: none;
  border: 0; color: var(--bkw-ink-2); text-decoration: none; padding: 10px 4px;
}
.bkw-back:hover { color: var(--bkw-ink); }
.bkw-next, .bkw-go {
  margin-left: auto; font: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer;
  border: 0; border-radius: 999px; padding: 12px 24px; background: var(--bkw-brand-d);
  color: #fff; transition: background var(--bkw-t), transform var(--bkw-t);
}
.bkw-next:hover, .bkw-go:hover:not(:disabled) { background: var(--bkw-brand-h); transform: translateY(-1px); }
.bkw-go:disabled { opacity: .5; cursor: not-allowed; transform: none; }

/* ── The aside ────────────────────────────────────────────────────────────── */
.bkw-aside { position: sticky; top: 16px; }
@media (max-width: 900px) { .bkw-aside { position: static; } }
.bkw-sum {
  background: var(--bkw-card); border: 1px solid var(--bkw-line);
  border-radius: var(--bkw-r); padding: 17px;
}
.bkw-sum h2 {
  font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--bkw-ink-2); margin: 0 0 11px;
}
.bkw-sum ul { list-style: none; margin: 0; padding: 0; }
.bkw-sum li { display: flex; gap: 10px; font-size: 13.5px; padding: 5px 0; }
.bkw-sum li span { flex: 1; min-width: 0; }
.bkw-sum li b { font-weight: 650; white-space: nowrap; }
.bkw-sum__none { margin: 0; font-size: 13px; color: var(--bkw-ink-2); }
.bkw-sum__r {
  display: flex; justify-content: space-between; font-size: 13px; color: var(--bkw-ink-2);
  padding: 5px 0; border-top: 1px solid var(--bkw-line); margin-top: 8px;
}
.bkw-sum__r b { color: var(--bkw-ink); }
.bkw-sum__t {
  display: flex; justify-content: space-between; align-items: baseline; margin-top: 10px;
  padding-top: 11px; border-top: 1px solid var(--bkw-line);
}
.bkw-sum__t span {
  font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--bkw-ink-2);
}
.bkw-sum__t b { font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.bkw-sum__hint { margin: 9px 0 0; font-size: 12px; color: var(--bkw-ink-2); }

@media (prefers-reduced-motion: reduce) {
  .bkw *, .bkw *::before, .bkw *::after {
    transition: none !important; animation: none !important; scroll-behavior: auto !important;
  }
  .bkw-tech:hover, .bkw-next:hover, .bkw-go:hover { transform: none; }
}

/* Said only when the technician picked on step 1 has actually hidden
   something -- a permanent "some services may be hidden" line would be
   noise on the many shops that never narrow anybody down. */
.bkw-whonote{
  font-size:.85rem;line-height:1.55;margin:0 0 .9rem;padding:.6rem .8rem;
  border-radius:10px;background:var(--mfa-sky,#E3F1FF);color:var(--mfa-text,#242424);
  border:1px solid var(--mfa-sky-light,#BFDCFB);
}