/* BarberOne Bookings — light, black & white, minimal */
:root{
  --bg:#fff; --ink:#000; --mute:#767676; --mute2:#a3a3a3;
  --line:rgba(0,0,0,.12); --line2:rgba(0,0,0,.07); --wash:#f5f5f5;
  --f:Inter,"Helvetica Neue",Helvetica,Arial,"Segoe UI",system-ui,sans-serif;
  --r:10px; --rs:8px;
  --ease:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{height:100%;background:var(--bg);-webkit-text-size-adjust:100%}
body{
  font-family:var(--f);background:var(--bg);color:var(--ink);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  min-height:100%;min-height:100dvh;font-size:15px;line-height:1.5;
  letter-spacing:-.011em;
}
::selection{background:#000;color:#fff}
a{color:inherit;text-decoration:none}
button{font-family:inherit;font-size:inherit;color:inherit;background:none;border:0;cursor:pointer;
  touch-action:manipulation;letter-spacing:inherit}

.col{width:100%;max-width:460px;margin:0 auto;padding:0 22px}

/* ---------- top bar ---------- */
.bar{display:flex;align-items:center;justify-content:space-between;max-width:460px;margin:0 auto;
  padding:22px;animation:in .5s var(--ease) both}
.mark{font-size:16px;font-weight:600;letter-spacing:-.02em}
.bar .lbl{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute2);margin-top:3px;font-weight:500}
.bar .switch{font-size:13px;color:var(--mute);transition:color .15s}
.bar .switch:hover{color:var(--ink)}

/* ---------- type ---------- */
h1{font-size:27px;font-weight:600;letter-spacing:-.032em;line-height:1.14}
h2{font-size:18px;font-weight:600;letter-spacing:-.024em}
.sub{font-size:14.5px;color:var(--mute);line-height:1.5;font-weight:400}
.eyebrow{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute2);font-weight:500}

/* ---------- progress ---------- */
.dots{display:flex;gap:5px;margin:0 0 30px}
.dot{height:2px;flex:1;background:var(--line2);transition:background .45s var(--ease)}
.dot.is-done,.dot.is-on{background:var(--ink)}

/* ---------- list rows (no cells) ---------- */
.list{border-top:1px solid var(--line2)}
.row{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;text-align:left;
  padding:17px 2px;border-bottom:1px solid var(--line2);transition:padding .3s var(--ease);
  animation:in .5s var(--ease) both;animation-delay:calc(var(--i,0)*38ms)}
.row:hover{padding-left:8px;padding-right:0}
.row .l{display:flex;align-items:center;gap:14px;min-width:0}
.row .nm{font-size:15.5px;font-weight:500;letter-spacing:-.015em}
.row .mt{font-size:13px;color:var(--mute);margin-top:2px;font-weight:400}
.row .pr{font-size:15px;font-weight:500;white-space:nowrap;display:flex;align-items:center;gap:12px}
.row .arw{opacity:0;transform:translateX(-5px);transition:.3s var(--ease);font-size:14px;color:var(--mute2)}
.row:hover .arw{opacity:1;transform:none}
.av{width:36px;height:36px;border-radius:var(--rs);background:var(--wash);display:grid;place-items:center;
  font-size:14px;font-weight:600;flex:none}

.back{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--mute);margin-bottom:18px;
  transition:gap .25s var(--ease),color .15s}
.back:hover{color:var(--ink);gap:10px}

/* ---------- buttons ---------- */
.btn{width:100%;padding:15px;border-radius:var(--r);font-size:15px;font-weight:500;letter-spacing:-.012em;
  transition:transform .14s var(--ease),background .18s,border-color .18s,opacity .18s}
.btn:active{transform:scale(.985)}
.btn.solid{background:var(--ink);color:#fff}
.btn.solid:hover{background:#222}
.btn.line{border:1px solid var(--line);background:#fff}
.btn.line:hover{border-color:var(--ink)}
.btn.quiet{color:var(--mute)}
.btn.quiet:hover{color:var(--ink)}
.btn:disabled{opacity:.25;pointer-events:none}
.btnrow{display:grid;gap:8px;margin-top:10px}

/* ---------- day + slots ---------- */
.days{display:flex;gap:7px;overflow-x:auto;padding:2px 0 18px;scrollbar-width:none;
  -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
.days::-webkit-scrollbar{display:none}
.day{flex:none;width:54px;border:1px solid var(--line2);border-radius:var(--rs);padding:9px 0;text-align:center;
  transition:.22s var(--ease);animation:in .45s var(--ease) both;animation-delay:calc(var(--i,0)*30ms)}
.day:hover{border-color:var(--ink)}
.day .dn{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute2);font-weight:500}
.day .dd{font-size:16px;font-weight:500;margin-top:3px;letter-spacing:-.02em}
.day.on{background:var(--ink);border-color:var(--ink)}
.day.on .dn{color:rgba(255,255,255,.6)}
.day.on .dd{color:#fff}
.slotgrp{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute2);margin:20px 0 11px;font-weight:500}
.slotgrp:first-of-type{margin-top:2px}
.slots{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.slot{border:1px solid var(--line2);border-radius:var(--rs);padding:13px 0;font-size:14px;font-weight:500;
  letter-spacing:-.01em;transition:.2s var(--ease);animation:in .45s var(--ease) both;animation-delay:calc(var(--i,0)*22ms)}
.slot:hover{border-color:var(--ink);background:var(--ink);color:#fff}
.none{color:var(--mute);font-size:14px;padding:30px 0;text-align:center;border-top:1px solid var(--line2)}

/* ---------- form ---------- */
.fld{margin-bottom:2px;border-bottom:1px solid var(--line2);padding:14px 0;
  animation:in .5s var(--ease) both;animation-delay:calc(var(--i,0)*45ms)}
.fld label{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute2);
  margin-bottom:6px;font-weight:500}
.fld input{width:100%;border:0;background:none;font-size:17px;font-family:var(--f);color:var(--ink);
  letter-spacing:-.02em;padding:0}
.fld input::placeholder{color:#c9c9c9}
.fld input:focus{outline:none}
.fld:focus-within{border-color:var(--ink)}
.chk{display:flex;gap:12px;align-items:flex-start;padding:18px 0;font-size:13.5px;color:var(--mute);
  line-height:1.5;border-bottom:1px solid var(--line2);margin-bottom:22px}
.chk input{margin-top:1px;accent-color:#000;width:17px;height:17px;flex:none}
.chk b{color:var(--ink);font-weight:500}

/* ---------- summary ---------- */
.sum{margin:20px 0 24px;border-top:1px solid var(--line2)}
.sum .sr{display:flex;justify-content:space-between;gap:14px;padding:12px 0;font-size:14.5px;color:var(--mute);
  border-bottom:1px solid var(--line2);animation:in .5s var(--ease) both;animation-delay:calc(var(--i,0)*40ms)}
.sum .sr b{color:var(--ink);font-weight:500;text-align:right}

/* ---------- confirmed ---------- */
.done{padding:26px 0 0}
.tick{width:52px;height:52px;border-radius:50%;background:var(--ink);display:grid;place-items:center;
  margin-bottom:26px;animation:pop .6s var(--ease) both}
.tick svg{width:22px;height:22px;stroke:#fff;stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.tick svg path{stroke-dasharray:26;stroke-dashoffset:26;animation:draw .5s var(--ease) .28s both}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes pop{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}
.chip{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--mute);
  border:1px solid var(--line2);border-radius:100px;padding:7px 13px}

.hint{display:flex;gap:9px;font-size:12.5px;color:var(--mute2);margin-top:18px;line-height:1.5}
.foot{text-align:center;font-size:10px;letter-spacing:.12em;color:#c4c4c4;text-transform:uppercase;
  padding:44px 0 40px;font-weight:500}

/* ---------- motion ---------- */
.step{animation:in .45s var(--ease) both}
@keyframes in{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms !important;transition-duration:.01ms !important}}