/* ============================================================
   LISA MILLAR — booking app styles REV01 (layers on lma.css)
   ============================================================ */
[hidden]{display:none!important}
.bk{min-height:70vh;padding:56px 0 90px}
.bk-wrap{max-width:900px}
.bk-head h1{font-size:clamp(34px,5vw,56px);margin:14px 0 16px}
.bk-sub{color:var(--mute);max-width:62ch;font-weight:300}

/* stepper */
.bk-steps{display:flex;gap:8px;list-style:none;margin:34px 0 22px;padding:0}
.bk-steps li{
  flex:1;text-align:center;font-family:var(--sans);font-weight:300;font-size:12px;
  letter-spacing:.22em;color:var(--mute);padding:10px 4px;border-bottom:1px solid var(--line);
  counter-increment:step}
.bk-steps li.on{color:var(--halo);border-color:var(--champagne)}
.bk-steps li.done{color:var(--steel)}

.bk-panel{padding:10px 0 0}
.bk-loading{color:var(--mute);font-style:italic;font-family:var(--serif);font-size:18px}

/* step 1 — treatment picker */
.bk-groups{display:grid;gap:26px}
.bk-group h3{font-size:21px;margin:0 0 12px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.bk-svc{
  display:grid;grid-template-columns:1fr auto;gap:4px 18px;align-items:baseline;
  width:100%;text-align:left;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r);padding:16px 18px;margin-bottom:10px;cursor:pointer;
  color:var(--steel);font-family:var(--sans);font-weight:300;
  transition:border-color .2s, background .2s}
.bk-svc:hover{background:var(--panel-2)}
.bk-svc.sel{border-color:var(--champagne);background:var(--panel-2);
  box-shadow:inset 2px 0 0 var(--champagne)}
.bk-svc .nm{font-family:var(--serif);font-weight:500;font-size:19px;color:var(--white)}
.bk-svc .pr{font-family:var(--serif);font-size:19px;color:var(--halo);white-space:nowrap}
.bk-svc .meta{grid-column:1 / -1;font-size:13px;color:var(--mute);letter-spacing:.04em}
.bk-svc .meta b{color:var(--blush);font-weight:400}

.bk-addons{margin-top:26px;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r);padding:20px 22px}
.bk-addons h3{font-size:19px;margin:0 0 12px}
.bk-addon{display:flex;gap:12px;align-items:baseline;padding:8px 0;cursor:pointer;
  font-weight:300;color:var(--steel)}
.bk-addon input{accent-color:var(--champagne);transform:translateY(1px)}
.bk-addon .pr{margin-left:auto;font-family:var(--serif);font-size:17px;color:var(--halo)}

/* step 2 — calendar + slots */
.bk-timegrid{display:grid;grid-template-columns:1fr 1fr;gap:28px}
@media(max-width:760px){.bk-timegrid{grid-template-columns:1fr}}
.bk-cal{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:18px}
.bk-cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.bk-cal-head b{font-family:var(--serif);font-weight:500;font-size:20px;color:var(--white)}
.bk-cal-btn{background:none;border:1px solid var(--line);border-radius:var(--r);
  color:var(--steel);padding:6px 12px;cursor:pointer}
.bk-cal-btn:hover{color:var(--white);border-color:var(--champagne)}
.bk-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.bk-cal-grid .dow{font-size:10.5px;letter-spacing:.14em;color:var(--mute);
  text-align:center;padding:6px 0;font-weight:300}
.bk-day{aspect-ratio:1;border:1px solid transparent;border-radius:var(--r);
  background:none;color:var(--steel);font-family:var(--sans);font-weight:300;
  font-size:14px;cursor:pointer}
.bk-day:not(:disabled):hover{border-color:var(--line)}
.bk-day.has{color:var(--white);background:rgba(216,167,91,.10)}
.bk-day.sel{background:var(--champagne);color:#211009;font-weight:500}
.bk-day:disabled{color:rgba(168,146,155,.35);cursor:default}
.bk-slots h3{font-size:21px;margin:0 0 14px}
.bk-slotlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(86px,1fr));gap:8px}
.bk-slot{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);
  color:var(--steel);font-family:var(--sans);font-weight:300;letter-spacing:.08em;
  padding:11px 4px;cursor:pointer;transition:border-color .2s}
.bk-slot:hover{border-color:var(--champagne);color:var(--white)}
.bk-slot.sel{background:var(--champagne);border-color:var(--champagne);color:#211009;font-weight:500}
.bk-noslots{color:var(--mute);font-style:italic;font-family:var(--serif);font-size:17px}

/* step 3 — details + summary */
.bk-detgrid{display:grid;grid-template-columns:1.1fr .9fr;gap:34px;align-items:start}
@media(max-width:760px){.bk-detgrid{grid-template-columns:1fr}}
.bk-field{display:block;margin-bottom:16px}
.bk-field span{display:block;font-size:11.5px;letter-spacing:.2em;color:var(--mute);
  margin-bottom:7px;font-weight:300}
.bk-field input,.bk-field textarea{
  width:100%;box-sizing:border-box;background:rgba(23,11,18,.6);border:1px solid var(--line);
  border-radius:var(--r);color:var(--white);font-family:var(--sans);font-weight:300;
  font-size:16px;padding:12px 14px;outline:none;transition:border-color .2s}
.bk-field input:focus,.bk-field textarea:focus{border-color:var(--champagne)}
.bk-summary{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:22px}
.bk-summary h3{font-size:20px;margin:0 0 12px}
.bk-summary .row{display:flex;justify-content:space-between;gap:14px;padding:8px 0;
  border-top:1px solid var(--line-soft);font-size:14.5px;font-weight:300}
.bk-summary .row:first-of-type{border-top:none}
.bk-summary .row b{font-family:var(--serif);font-weight:500;font-size:17px;color:var(--halo);
  text-align:right}
.bk-summary .today{margin-top:12px;padding-top:12px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:baseline}
.bk-summary .today span{letter-spacing:.2em;font-size:11.5px;color:var(--mute)}
.bk-summary .today b{font-family:var(--serif);font-weight:600;font-size:26px;color:var(--white)}
.bk-summary .plan{margin-top:8px;font-size:13.5px;color:var(--blush);font-style:italic;
  font-family:var(--serif);font-size:16px}

.bk-nav{display:flex;justify-content:space-between;gap:14px;margin-top:30px}
.bk-error{color:#F0A8A0;font-weight:400;margin-top:16px}
.bk-small{margin-top:18px;font-size:13px;color:var(--mute);font-weight:300}
.bk-small a{color:var(--halo)}

/* confirmation */
.bk-done-in{text-align:center;padding:40px 0}
.bk-tick{font-size:44px;color:var(--champagne);text-shadow:0 0 30px rgba(216,167,91,.6)}
.bk-done h2{font-size:clamp(30px,4vw,44px);margin:14px 0 14px}
.bk-done p{color:var(--steel);max-width:52ch;margin:0 auto 10px;font-weight:300}