/* The screens clients book their own time on (/book), and every booking page at a salon.
   Drawn by salon-book.js, which puts class "v2" on <html>; nothing here touches any other page.
   The look is a salon's own printed price list: paper, a serif for names, rules instead of boxes. */

html.v2{
  --paper:#f5f1ea; --sheet:#fbf8f3; --ink:#1f1b16; --ink-2:#4a4239; --muted:#857b6f; --rule:#dcd3c5; --rule-2:#e9e2d6;
  --acc:var(--accent); --acc-ink:#fff;
  --bad:#b23a22;
  --serif:'Instrument Serif',Georgia,'Times New Roman',serif;
  --sans:'Hanken Grotesk',system-ui,-apple-system,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  html.v2{
    --paper:#15130f; --sheet:#1c1915; --ink:#efe8dc; --ink-2:#cfc6b8; --muted:#968c7f; --rule:#37312a; --rule-2:#2a2621;
    --bad:#e0745c;
    color-scheme:dark;
  }
}

html.v2 body{font-family:var(--sans);color:var(--ink);background:var(--paper);font-size:16px;line-height:1.45;
  -webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
html.v2 body::after{opacity:.06}
html.v2 .hdr{display:none}
html.v2 .wrap{max-width:520px;padding-block:0 140px}
html.v2 button,html.v2 input{font-family:inherit}
html.v2 :focus-visible{outline:2px solid var(--acc);outline-offset:2px}

/* ── top bar ── */
.bk-top{position:sticky;top:0;z-index:20;display:grid;grid-template-columns:80px 1fr 80px;align-items:center;min-height:52px;
  margin-inline:-16px;padding:env(safe-area-inset-top,0px) 16px 0;background:var(--paper);transition:box-shadow .2s}
.bk-top.lined{box-shadow:0 1px 0 var(--rule)}
.bk-top-name{text-align:center;font-family:var(--serif);font-size:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;transition:opacity .2s}
.bk-top.lined .bk-top-name{opacity:1}
.bk-back{justify-self:start;display:inline-flex;align-items:center;gap:2px;padding:8px 8px 8px 0;border:none;background:none;color:var(--ink);
  font-size:15px;font-weight:500;cursor:pointer}
.bk-back[hidden]{visibility:hidden;display:inline-flex}
.bk-back:active{opacity:.6}
/* the first screen has nothing to go back to: its bar only shows once the page has scrolled */
.bk-top.bare{position:fixed;left:0;right:0;margin:0;opacity:0;pointer-events:none}
.bk-top.bare.lined{opacity:1;pointer-events:auto}
.bk-top.bare+main{padding-top:calc(env(safe-area-inset-top,0px) + 28px)}

/* ── the salon ── */
.bk-hero{padding:4px 0 24px;border-bottom:1px solid var(--ink)}
.bk-logo{display:block;height:46px;width:auto;max-width:180px;object-fit:contain;margin-bottom:16px;border-radius:4px}
.bk-kicker{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.bk-name{font-family:var(--serif);font-weight:400;font-size:46px;line-height:.98;letter-spacing:-.01em;text-wrap:balance}
.bk-meta{margin-top:12px;font-size:15px;color:var(--ink-2)}
.bk-open::before{content:'';display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--muted);margin-right:7px;vertical-align:2px}
.bk-open.on::before{background:#3b8a5a}
.bk-links{display:flex;gap:20px;margin-top:12px;font-size:15px}
.bk-a{color:var(--ink);font-weight:600;text-decoration:underline;text-decoration-color:var(--acc);text-decoration-thickness:2px;text-underline-offset:4px}
button.bk-a{background:none;border:none;padding:0;font:inherit;font-weight:600;cursor:pointer}

/* next free, and the promise */
.bk-soonest{margin-top:6px;font-size:15px;color:var(--ink-2)}
.bk-soonest b{font-weight:600;color:var(--ink);box-shadow:inset 0 -.45em 0 color-mix(in srgb,var(--acc) 22%,transparent)}
.bk-promise{font-size:14px;color:var(--muted);padding:12px 0 2px;text-wrap:pretty}
.bk-free{color:var(--ink-2)}
.bk-full{color:var(--bad)}

/* booking the next one */
.bk-again{margin-top:30px;padding-top:18px;border-top:1px solid var(--ink)}
.bk-again-text{font-size:15px;color:var(--ink-2);margin:6px 0 12px}
.bk-again-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.bk-again-row .bk-btn{padding:0 8px;min-height:46px;font-size:15px}

/* ── headings ── */
.bk-h1{font-family:var(--serif);font-weight:400;font-size:38px;line-height:1.02;letter-spacing:-.01em;margin:10px 0 6px;text-wrap:balance}
.bk-sub{font-size:15px;color:var(--muted);margin-bottom:20px;text-wrap:pretty}
.bk-label{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* ── groups ── */
.bk-cats{position:sticky;top:calc(env(safe-area-inset-top,0px) + 52px);z-index:15;display:flex;gap:22px;overflow-x:auto;scrollbar-width:none;
  margin:0 -16px;padding:12px 16px 0;background:var(--paper);border-bottom:1px solid var(--rule)}
.bk-cats::-webkit-scrollbar{display:none}
.bk-cat{flex-shrink:0;padding:4px 0 11px;border:none;border-bottom:2px solid transparent;margin-bottom:-1px;background:none;color:var(--muted);
  font-size:15.5px;font-weight:500;cursor:pointer;transition:color .15s,border-color .15s}
.bk-cat.on{color:var(--ink);border-bottom-color:var(--ink)}
.bk-section{scroll-margin-top:calc(env(safe-area-inset-top,0px) + 104px);padding-top:22px}
.bk-sec{font-family:var(--serif);font-style:italic;font-weight:400;font-size:26px;margin-bottom:2px}

/* ── the price list ── */
.bk-row{display:grid;grid-template-columns:auto 1fr auto 26px;grid-template-areas:'name lead price box' 'dur dur dur box';align-items:baseline;column-gap:10px;
  width:100%;padding:15px 0 14px;border:none;border-bottom:1px solid var(--rule-2);background:none;color:var(--ink);text-align:left;cursor:pointer}
.bk-row:last-child{border-bottom:none}
.bk-row-name{grid-area:name;font-size:17px;font-weight:500;line-height:1.3}
.bk-row-lead{grid-area:lead;border-bottom:1.5px dotted var(--rule);transform:translateY(-4px);min-width:16px}
.bk-row-price{grid-area:price;font-size:17px;font-weight:500;font-variant-numeric:tabular-nums}
.bk-row-dur{grid-area:dur;font-size:14px;color:var(--muted);margin-top:2px}
.bk-box{grid-area:box;align-self:center;justify-self:end;width:22px;height:22px;border:1.5px solid var(--ink);border-radius:4px;display:grid;place-items:center;color:transparent;
  transition:background .12s,border-color .12s,transform .1s}
.bk-row.on .bk-row-name{font-weight:650}
.bk-row.on .bk-box{background:var(--acc);border-color:var(--acc);color:var(--acc-ink)}
.bk-row:active .bk-box{transform:scale(.9)}

/* ── bottom bar ── */
.bk-bar{position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--paper);border-top:1px solid var(--ink);
  padding:12px 16px calc(env(safe-area-inset-bottom,0px) + 12px);animation:bk-up .22s ease-out both}
.bk-bar-in{max-width:520px;margin:0 auto;display:flex;align-items:center;gap:14px}
.bk-bar-text{flex:1;min-width:0}
.bk-bar-big{font-family:var(--serif);font-size:27px;line-height:1.05;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.bk-bar-small{font-size:13.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.bk-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 22px;border-radius:6px;border:1.5px solid var(--acc);
  background:var(--acc);color:var(--acc-ink);font-size:16px;font-weight:600;cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:transform .1s,opacity .15s,filter .15s}
.bk-btn:hover:not(:disabled){filter:brightness(1.07)}
.bk-btn:active:not(:disabled){transform:translateY(1px)}
.bk-btn:disabled{opacity:.35;cursor:default}
.bk-btn.full{width:100%}
.bk-btn.line{background:transparent;color:var(--ink);border-color:var(--ink)}

/* ── a day and a time ── */
.bk-picked{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:12px 0;border-top:1px solid var(--ink);border-bottom:1px solid var(--rule);font-size:15px}
.bk-picked b{font-weight:600}
.bk-picked span{color:var(--muted)}
.bk-nw{white-space:nowrap}
.bk-month{margin:24px 0 8px}
.bk-days{display:flex;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:0 10px 6px;scroll-snap-type:x proximity}
.bk-days::-webkit-scrollbar{display:none}
.bk-day{flex:0 0 52px;display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 0;border:none;background:none;color:var(--ink);cursor:pointer;scroll-snap-align:center}
.bk-day small{font-size:12.5px;font-weight:500;color:var(--muted)}
.bk-day b{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-size:18px;font-weight:550;font-variant-numeric:tabular-nums;transition:background .12s,color .12s}
.bk-day.none b{color:var(--muted);text-decoration:line-through;text-decoration-thickness:1px;font-weight:400}
.bk-day.on b{background:var(--ink);color:var(--paper)}
.bk-day.on.none b{background:var(--rule);color:var(--ink-2)}
.bk-slots-head{display:flex;justify-content:space-between;align-items:baseline;margin:22px 0 10px;padding-bottom:6px;border-bottom:1px solid var(--rule)}
.bk-slots-head small{font-size:13px;color:var(--muted)}
.bk-times{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.bk-time{min-height:46px;border-radius:6px;border:1px solid var(--rule);background:var(--sheet);color:var(--ink);font-size:16px;font-weight:500;
  font-variant-numeric:tabular-nums;cursor:pointer;transition:background .12s,border-color .12s,color .12s}
.bk-time:hover{border-color:var(--ink)}
.bk-time.on{background:var(--acc);border-color:var(--acc);color:var(--acc-ink);font-weight:600}
@media (max-width:360px){.bk-times{grid-template-columns:repeat(3,1fr)}}

/* ── plain words ── */
.bk-aside{font-size:14.5px;color:var(--ink-2);padding:2px 0 2px 12px;border-left:2px solid var(--acc);margin:16px 0}
.bk-aside.bad{border-left-color:var(--bad)}
.bk-empty{padding:28px 0;text-align:center}
.bk-empty h3{font-family:var(--serif);font-weight:400;font-size:26px;line-height:1.1;margin-bottom:6px}
.bk-empty p{font-size:15px;color:var(--muted);margin:0 auto 18px;max-width:32ch;text-wrap:pretty}
.bk-page-msg{padding:40px 0 0}
.bk-page-msg h1{font-family:var(--serif);font-weight:400;font-size:40px;line-height:1.02;margin-bottom:10px;text-wrap:balance}
.bk-page-msg p{color:var(--ink-2);font-size:16px;margin-bottom:24px;max-width:36ch}
.bk-wait{height:14px;border-radius:3px;background:var(--rule-2)}

/* ── your details ── */
.bk-form{display:flex;flex-direction:column;gap:18px;margin-top:22px}
.bk-field{display:flex;flex-direction:column;gap:6px}
.bk-field label{font-size:14px;font-weight:600;color:var(--ink)}
.bk-field input{min-height:52px;padding:0 14px;border-radius:6px;border:1px solid var(--rule);background:var(--sheet);color:var(--ink);font-size:17px;outline:none;
  transition:border-color .15s}
.bk-field input::placeholder{color:var(--muted);opacity:.7}
.bk-field input:focus{border-color:var(--ink)}
.bk-field.bad input{border-color:var(--bad)}
.bk-field-err{font-size:14px;color:var(--bad);display:none}
.bk-field.bad .bk-field-err{display:block}
.bk-row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* ── the receipt (review, and once booked) ── */
.bk-receipt{background:var(--sheet);border:1px solid var(--rule);border-radius:4px;padding:22px 20px 18px;font-size:15.5px}
.bk-receipt-shop{font-family:var(--serif);font-size:26px;line-height:1.05}
.bk-receipt-addr{font-size:14px;color:var(--muted);margin-top:4px}
.bk-cut{border:none;border-top:1.5px dashed var(--rule);margin:16px -4px}
.bk-r-when{font-size:16.5px;font-weight:600}
.bk-r-when span{display:block;font-weight:400;color:var(--ink-2);font-size:15.5px;margin-top:2px}
.bk-r-line{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:5px 0}
.bk-r-line small{display:block;font-size:13.5px;color:var(--muted)}
.bk-r-line>span:last-child{font-variant-numeric:tabular-nums;white-space:nowrap}
.bk-r-line.total{font-weight:700;font-size:17px;padding-top:2px}
.bk-r-line.soft{color:var(--muted)}
.bk-r-line.due>span:last-child{font-weight:700}
.bk-ref{font-size:13px;color:var(--muted);letter-spacing:.06em;font-variant-numeric:tabular-nums}

/* ── card payment (the ids are the ones booking.html's mountPayments fills) ── */
html.v2 #card-container{min-height:92px;background:var(--sheet);border:1px solid var(--rule);border-radius:6px;padding:12px}
html.v2 .or-divider{color:var(--muted)}
html.v2 .or-divider::before,html.v2 .or-divider::after{background:var(--rule)}
html.v2 .sq-error{color:var(--bad);font-size:14px}
.bk-secure{font-size:13px;color:var(--muted);margin-top:10px}

/* ── booked ── */
.bk-done-head{padding:12px 0 22px}
.bk-done-head h1{font-family:var(--serif);font-weight:400;font-size:50px;line-height:.96;margin:8px 0 10px;text-wrap:balance}
.bk-done-head p{font-size:16px;color:var(--ink-2)}
.bk-actions{display:flex;flex-direction:column;gap:10px;margin-top:20px}

/* ── motion: quiet ── */
.bk-in{animation:bk-fade .2s ease-out both}
@keyframes bk-fade{from{opacity:0}to{opacity:1}}
@keyframes bk-up{from{transform:translateY(100%)}to{transform:none}}
@media (prefers-reduced-motion:reduce){
  html.v2 *,html.v2 *::before,html.v2 *::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
@media (max-width:360px){
  .bk-name{font-size:38px}
  .bk-btn{padding:0 16px}
  .bk-row2{grid-template-columns:1fr}
}