/* ============================================================
   THE BARBER CENTRE — booking modal
   Same visual world as the page: warm night, bone, amber, Big
   Shoulders in caps, DM Mono on the labels, square corners.
   A poster that opens, not an iframe pasted on top.
   ============================================================ */

.tb{
  position:fixed; inset:0; z-index:200;
  height:100vh; height:100dvh;
  display:flex; align-items:flex-end; justify-content:center;
  overscroll-behavior:contain;
}
.tb[hidden]{display:none}
.tb__scrim{
  position:absolute; inset:0;
  background:rgba(6,5,5,.86);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  animation:tb-fade .18s ease both;
}
@keyframes tb-fade{from{opacity:0}to{opacity:1}}
@keyframes tb-up{from{transform:translateY(6%)}to{transform:translateY(0)}}

.tb__panel{
  position:relative;
  width:100%; max-width:760px;
  /* full screen on the phone: dvh follows the browser chrome */
  height:100vh; height:100dvh;
  max-height:100vh; max-height:100dvh;
  background:var(--night);
  border-top:3px solid var(--amber);
  display:flex; flex-direction:column;
  animation:tb-up .26s cubic-bezier(.22,.8,.3,1) both;
  overflow:hidden;
}
@media (min-width:760px){
  .tb{align-items:center; padding:28px}
  .tb__panel{
    height:auto; max-height:min(88vh,860px); max-height:min(88dvh,860px);
    border:1px solid var(--line); border-top:3px solid var(--amber);
    box-shadow:0 30px 90px rgba(0,0,0,.7);
    animation:tb-fade .2s ease both;
  }
}
@media (prefers-reduced-motion:reduce){
  .tb__panel,.tb__scrim{animation:none}
}

/* ---------- header ---------- */
.tb__head{
  display:flex; align-items:center; gap:11px;
  padding:9px 14px; border-bottom:1px solid var(--line);
  flex:none;
}
@media (min-width:760px){ .tb__head{padding:14px 24px; gap:14px} }
.tb__mark{height:30px; width:auto; flex:none}
@media (min-width:760px){ .tb__mark{height:38px} }
.tb__title{
  font-family:var(--f-display); font-weight:800; text-transform:uppercase;
  font-size:clamp(17px,4.6vw,24px); letter-spacing:.05em; line-height:1;
  margin:0; flex:1 1 auto;
}
.tb__x{
  flex:none; width:44px; height:40px; margin-right:-8px;
  background:transparent; border:0; color:var(--bone-dim);
  font-size:26px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--f-body);
}
.tb__x:hover{color:var(--amber)}

/* ---------- body ---------- */
.tb__body{
  flex:1 1 auto; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:2px 14px 34px;
}
@media (min-width:760px){ .tb__body{padding:4px 24px 28px} }

.tb__step{padding:18px 0; border-bottom:1px solid var(--line)}
.tb__step:last-child{border-bottom:0}
.tb__step[data-off]{opacity:.42; pointer-events:none}
.tb__legend{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--amber);
  margin:0 0 12px; display:flex; align-items:center; gap:9px;
}
.tb__legend b{
  font-weight:500; color:var(--night); background:var(--amber);
  width:19px; height:19px; display:inline-flex; align-items:center; justify-content:center;
  font-size:11px; flex:none;
}

/* ---------- chips ---------- */
.tb__chips{display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; list-style:none}
.tb__chip{
  appearance:none; cursor:pointer;
  background:transparent; color:var(--bone);
  border:1.5px solid rgba(242,236,227,.28);
  border-radius:0; padding:10px 13px; min-height:46px;
  font-family:var(--f-body); font-size:14.5px; line-height:1.15;
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:3px;
  text-align:left; transition:border-color .12s ease, background-color .12s ease, color .12s ease;
}
.tb__chip:hover{border-color:var(--bone)}
.tb__chip[aria-pressed="true"]{
  background:var(--amber); border-color:var(--amber); color:#12100E;
}
.tb__chip b{
  font-family:var(--f-display); font-weight:800; text-transform:uppercase;
  font-size:18px; letter-spacing:.03em; line-height:1; font-weight:800;
}
.tb__chip small{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.06em;
  color:var(--bone-dim); text-transform:uppercase;
}
.tb__chip[aria-pressed="true"] small{color:rgba(18,16,14,.72)}

.tb__chip--time{
  font-family:var(--f-mono); font-variant-numeric:tabular-nums;
  font-size:15px; letter-spacing:.02em;
  align-items:center; justify-content:center; min-width:74px; padding:12px 10px;
}
.tb__chip--day{min-width:92px}
.tb__chip--any b{font-size:16px}

.tb__grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(84px,1fr)); gap:8px}
.tb__scroll{
  display:flex; gap:8px; overflow-x:auto; padding-bottom:6px;
  scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch;
}
.tb__scroll .tb__chip{flex:none; scroll-snap-align:start}

/* ---------- notices ---------- */
.tb__note{
  margin:0; font-size:14px; line-height:1.5; color:var(--bone-dim);
}
.tb__note--wait{
  font-family:var(--f-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase;
}
.tb__alert{
  border-left:3px solid var(--wine); background:var(--night-2);
  padding:13px 15px; margin:0 0 14px;
  font-size:14.5px; line-height:1.45; color:var(--bone);
}
.tb__alert--soft{border-left-color:var(--amber)}

/* ---------- empty and degraded states ---------- */
.tb__fallback{padding:26px 0 8px; display:flex; flex-direction:column; gap:16px}
.tb__fallback h3{
  font-family:var(--f-display); font-weight:900; text-transform:uppercase;
  font-size:clamp(30px,8vw,46px); line-height:.9; margin:0;
}
.tb__fallback p{margin:0; color:var(--bone-dim); font-size:15px; line-height:1.5}

/* ---------- footer ---------- */
.tb__foot{
  flex:none; border-top:1px solid var(--line); background:var(--night);
  padding:9px 14px calc(9px + env(safe-area-inset-bottom));
  display:flex; flex-direction:column; align-items:stretch; gap:7px;
}
.tb__nav{display:flex; align-items:center; justify-content:space-between; gap:12px}
.tb__nav:only-child{justify-content:flex-start}
@media (min-width:760px){ .tb__foot{padding:12px 24px calc(12px + env(safe-area-inset-bottom))} }
.tb__hint{
  flex:1 1 180px; margin:0; min-width:0;
  font-family:var(--f-mono); font-size:11.5px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--bone-dim); line-height:1.4;
}
.tb__hint b{color:var(--amber); font-weight:500}
.tb__hint:empty{display:none}
.tb__foot .btn{flex:0 0 auto; min-height:46px}
.tb__foot--wa{gap:9px}
.tb__foot--wa .btn{flex:1 1 auto; width:100%}
.tb__foot .btn[disabled]{opacity:.34; cursor:not-allowed; transform:none}
.tb__back{
  background:transparent; border:0; cursor:pointer; color:var(--bone-dim);
  font-family:var(--f-mono); font-size:11.5px; letter-spacing:.14em;
  text-transform:uppercase; padding:11px 2px; min-height:44px; flex:none;
}
.tb__back:hover{color:var(--amber)}

/* ---------- identity ---------- */
.tb__id{padding:16px 0 6px; display:flex; flex-direction:column; gap:13px; max-width:420px}
.tb__help{
  margin:-4px 0 0; font-size:13px; line-height:1.4; color:var(--bone-dim);
}
.tb__label{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--amber); margin:0 0 8px;
}
.tb__phone{display:flex; align-items:stretch; border:1.5px solid rgba(242,236,227,.28); background:var(--night-2)}
.tb__phone span{
  font-family:var(--f-mono); font-size:16px; color:var(--bone-dim);
  display:flex; align-items:center; padding:0 12px; border-right:1px solid var(--line);
  flex:none;
}
.tb__input{
  appearance:none; width:100%; min-width:0;
  background:transparent; border:0; color:var(--bone);
  font-family:var(--f-mono); font-size:18px; letter-spacing:.1em;
  padding:14px 12px; min-height:52px;
}
.tb__input::placeholder{color:rgba(201,192,180,.45); letter-spacing:.06em}
.tb__input:focus{outline:none}
.tb__phone:focus-within{border-color:var(--amber)}
.tb__field{border:1.5px solid rgba(242,236,227,.28); background:var(--night-2)}
.tb__field:focus-within{border-color:var(--amber)}
.tb__field .tb__input{font-family:var(--f-body); letter-spacing:0; font-size:17px}
.tb__code .tb__input{
  font-size:26px; letter-spacing:.42em; text-align:center; padding:16px 8px;
}
.tb__resend{
  background:transparent; border:0; padding:10px 0; min-height:44px; cursor:pointer;
  font-family:var(--f-mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--amber); align-self:flex-start;
}
.tb__resend[disabled]{color:var(--bone-dim); cursor:default}

/* ---------- chosen appointment summary ---------- */
.tb__summary{
  font-family:var(--f-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--bone-dim); line-height:1.7; margin:0;
  border-left:3px solid var(--amber); padding-left:13px;
}
.tb__summary b{display:block; color:var(--bone); font-weight:500}

/* ---------- spinner ---------- */
.tb__spin{
  width:15px; height:15px; border:2px solid rgba(18,16,14,.3); border-top-color:#12100E;
  border-radius:50%; animation:tb-spin .7s linear infinite; display:inline-block;
}
@keyframes tb-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){ .tb__spin{animation-duration:2s} }

html.tb-locked, body.tb-locked{overflow:hidden}

/* ============================================================
   LIVE SECTIONS — team, prices, hours and today's free slots are
   painted from the API in the same language as the page.
   ============================================================ */

/* EXAMPLE pill */
.tbx-pill{
  align-self:flex-start; margin:2px 0 0;
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--amber); border:1px solid var(--amber); padding:6px 11px; line-height:1.3;
}
.tbx-pill[hidden]{display:none}

/* ---------- prices ---------- */
.tbx-svcs{display:grid; gap:0}
@media (min-width:820px){ .tbx-svcs{grid-template-columns:1fr 1fr; column-gap:48px} }
.tbx-svc{
  display:flex; align-items:baseline; gap:12px;
  padding:15px 0; border-bottom:1px solid var(--line);
}
.tbx-svc__n{
  font-family:var(--f-display); font-weight:800; text-transform:uppercase;
  font-size:clamp(21px,5.4vw,27px); line-height:1; letter-spacing:.03em; flex:0 1 auto;
}
.tbx-svc__d{
  flex:1 1 auto; height:1px; background:var(--line); transform:translateY(-4px); min-width:12px;
}
.tbx-svc__t{
  font-family:var(--f-mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--bone-dim); flex:none;
}
.tbx-svc__p{
  font-family:var(--f-mono); font-size:16px; color:var(--amber); flex:none;
  font-variant-numeric:tabular-nums; letter-spacing:.02em;
}
.tbx-svc__p small{font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--bone-dim)}

/* ---------- team ---------- */
.tbx-team{display:grid; gap:2px; grid-template-columns:repeat(2,1fr)}
@media (min-width:640px){ .tbx-team{grid-template-columns:repeat(3,1fr)} }
@media (min-width:980px){ .tbx-team{grid-template-columns:repeat(4,1fr)} }
.tbx-b{background:var(--night); padding:0 0 16px; display:flex; flex-direction:column; gap:12px}
.tbx-b__ph{
  aspect-ratio:1/1; width:100%; background:var(--night-2); overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.tbx-b__ph img{width:100%; height:100%; object-fit:cover; filter:contrast(1.05) saturate(.9)}
.tbx-b__ini{
  font-family:var(--f-display); font-weight:900; text-transform:uppercase;
  font-size:clamp(34px,9vw,52px); color:var(--amber); line-height:1; letter-spacing:.04em;
}
.tbx-b__n{
  font-family:var(--f-display); font-weight:800; text-transform:uppercase;
  font-size:clamp(19px,4.6vw,24px); line-height:1; letter-spacing:.04em; margin:0; padding:0 14px;
}
.tbx-b__r{
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--bone-dim); margin:-6px 0 0; padding:0 14px;
}

/* ---------- next free slots ---------- */
.tbx-next{
  border-left:3px solid var(--amber); background:var(--night-2);
  padding:16px 18px; display:flex; flex-direction:column; gap:12px;
}
.tbx-next[hidden]{display:none}
.tbx-next__top{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.tbx-next__lbl{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--amber); margin:0;
}
.tbx-next__rows{display:flex; flex-direction:column; gap:10px}
.tbx-row{display:flex; align-items:flex-start; gap:10px}
.tbx-row__t{display:flex; flex-wrap:wrap; gap:8px; flex:1 1 auto; min-width:0}
.tbx-row__d{
  font-family:var(--f-display); font-weight:800; text-transform:uppercase;
  font-size:18px; letter-spacing:.04em; min-width:74px; flex:none; padding-top:11px; line-height:1;
}
.tbx-t{
  appearance:none; cursor:pointer; background:transparent; color:var(--bone);
  border:1.5px solid rgba(242,236,227,.28); border-radius:0;
  font-family:var(--f-mono); font-size:14px; font-variant-numeric:tabular-nums;
  padding:11px 12px; min-height:44px; min-width:66px;
  transition:background-color .12s ease, color .12s ease, border-color .12s ease;
}
.tbx-t:hover{background:var(--amber); border-color:var(--amber); color:#12100E}
.tbx-next__cta{
  font-family:var(--f-display); font-weight:800; text-transform:uppercase; font-size:18px;
  letter-spacing:.04em; background:transparent; border:0; cursor:pointer; color:var(--amber);
  border-bottom:3px solid var(--amber); padding:4px 0 3px; align-self:flex-start; min-height:44px;
}
.tbx-next__none{margin:0; font-size:14px; color:var(--bone-dim)}

/* ---------- hours: open-now chip ---------- */
.tbx-hh{display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.tbx-open{
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:7px; padding:6px 11px; border:1px solid currentColor;
}
.tbx-open[hidden]{display:none}
.tbx-open::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor}
.tbx-open.is-open{color:var(--amber)}
.tbx-open.is-closed{color:var(--bone-dim)}

/* ============================================================
   WIZARD — one screen per step
   ============================================================ */
.tb__steps{
  flex:none; padding:8px 14px; border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:12px;
}
@media (min-width:760px){ .tb__steps{padding:14px 24px 12px} }
.tb__steps[hidden]{display:none}
.tb__dots{list-style:none; margin:0; padding:0; display:flex; align-items:center; gap:0}
.tb__dots li{display:flex; align-items:center}
.tb__dots i{
  font-family:var(--f-mono); color:rgba(242,236,227,.28); padding:0 5px; font-style:normal; font-size:12px;
}
.tb__dot{
  font-family:var(--f-mono); font-size:12px; line-height:1;
  width:28px; height:28px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid rgba(242,236,227,.28); background:transparent; color:var(--bone-dim);
  border-radius:0; padding:0;
}
button.tb__dot{cursor:pointer}
button.tb__dot:hover{border-color:var(--amber); color:var(--amber)}
.tb__dot.is-done{color:var(--amber); border-color:rgba(240,138,44,.5)}
.tb__dot.is-now{background:var(--amber); border-color:var(--amber); color:#12100E; font-weight:500}
.tb__stepname{
  margin:0; font-family:var(--f-mono); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--bone-dim); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; min-width:0;
}

.tb__screen{padding:16px 0 6px; display:flex; flex-direction:column; gap:14px}
.tb__q{
  font-family:var(--f-display); font-weight:900; text-transform:uppercase;
  font-size:clamp(23px,6vw,44px); line-height:1.08; margin:0; letter-spacing:.01em;
}
.tb__screen .tb__note{margin:-6px 0 0}
.tb__chip--big{min-height:56px; padding:13px 16px; flex:1 1 auto; min-width:44%}
@media (min-width:560px){ .tb__chip--big{min-width:0; flex:0 1 auto} }
.tb__chip--big b{font-size:21px}
.tb__grid--day{grid-template-columns:repeat(auto-fill,minmax(102px,1fr))}
.tb__grid--day .tb__chip{min-width:0}
.tb__other{
  align-self:flex-start; background:transparent; border:0; cursor:pointer; color:var(--amber);
  font-family:var(--f-display); font-weight:800; text-transform:uppercase; font-size:19px;
  letter-spacing:.04em; border-bottom:3px solid var(--amber); padding:4px 0 3px; min-height:44px;
}

/* summary line, every item goes back to its own step */
.tb__sum + .tb__sum{margin-top:3px}
.tb__sum{
  margin:0; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  line-height:1.2; min-width:0; padding-right:4px;
}
.tb__sum i{font-family:var(--f-mono); color:rgba(242,236,227,.3); padding:0 7px; font-style:normal}
.tb__sum__i{
  display:inline; background:transparent; border:0; cursor:pointer; padding:0;
  font-family:var(--f-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--bone); border-bottom:1px dashed rgba(240,138,44,.55);
}
.tb__sum__i:hover{color:var(--amber); border-bottom-color:var(--amber)}


/* ============================================================
   MULTI-SERVICE — step 1 is ticked, not picked-and-gone
   ============================================================ */
.tb__chip--multi{flex-direction:row; align-items:center; gap:11px; flex:1 1 100%}
@media (min-width:560px){ .tb__chip--multi{flex:0 1 auto} }
.tb__chip__tx{display:flex; flex-direction:column; align-items:flex-start; gap:3px; min-width:0}
.tb__tick{
  width:20px; height:20px; flex:none; border:1.5px solid rgba(242,236,227,.42);
  display:flex; align-items:center; justify-content:center;
}
.tb__chip[aria-pressed="true"] .tb__tick{background:#12100E; border-color:#12100E}
.tb__chip[aria-pressed="true"] .tb__tick::after{
  content:"✓"; color:var(--amber); font-size:13px; line-height:1; font-family:var(--f-body);
}
.tb__chip[disabled]{opacity:.4; cursor:not-allowed}
.tb__chip[disabled]:hover{border-color:rgba(242,236,227,.28)}
.tb__why{color:var(--wine) !important; letter-spacing:.08em}
.tb__sum__t{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--bone-dim);
}

/* price row on the page: opens the modal with that service ticked */
button.tbx-svc{
  width:100%; font:inherit; color:inherit; background:transparent; cursor:pointer;
  border:0; border-bottom:1px solid var(--line); text-align:left;
}
button.tbx-svc:hover .tbx-svc__n{color:var(--amber)}
button.tbx-svc:hover .tbx-svc__d{background:rgba(240,138,44,.5)}