/* ══════════════════════════════════════════════════════════
   RIO'S BARBERSHOP — booking page styles (loaded on book.html)
   ══════════════════════════════════════════════════════════ */

.bkdemo{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:10px 13px; margin-bottom:20px;
  border:1px solid rgba(215,25,32,.45); border-left:3px solid var(--red);
  background:rgba(215,25,32,.07); border-radius:2px;
  font-size:12px; color:var(--dim);
}
.bkdemo b{color:var(--white); font-size:10px; letter-spacing:.18em; text-transform:uppercase}
.bkdemo a{color:var(--white); text-decoration:underline; text-underline-offset:3px}

.bk{display:grid; grid-template-columns:minmax(0,1fr) 272px; gap:clamp(16px,2.2vw,30px); align-items:start}
.bk > *{min-width:0}

/* ── step rail ─────────────────────────────────────────── */
.bkrail{display:flex; gap:6px; margin-bottom:22px; flex-wrap:wrap}
.bkrail__i{
  display:flex; align-items:center; gap:8px; padding:7px 12px;
  border:1px solid var(--line); border-radius:2px; background:rgba(255,255,255,.02);
  font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
  transition:border-color .25s var(--ease), color .25s var(--ease), background .25s var(--ease);
}
.bkrail__n{
  display:grid; place-items:center; width:18px; height:18px; flex:none;
  border:1px solid currentColor; border-radius:50%; font-size:9px; letter-spacing:0;
}
.bkrail__i.is-now{border-color:var(--red); color:var(--white); background:rgba(215,25,32,.12)}
.bkrail__i.is-now .bkrail__n{background:var(--red); border-color:var(--red); color:#fff}
.bkrail__i.is-done{color:var(--dim); cursor:pointer}
.bkrail__i.is-done:hover{border-color:rgba(255,255,255,.4); color:var(--white)}
.bkrail__i.is-done .bkrail__n{color:var(--red); border-color:var(--red)}

/* ── option cards ──────────────────────────────────────── */
.bkgrid{display:grid; gap:8px; margin-top:18px}
.bkopt{
  display:flex; align-items:center; gap:13px; width:100%; text-align:left;
  padding:11px 14px; border:1px solid var(--line); border-radius:3px;
  background:var(--card); color:var(--white);
  transition:border-color .25s var(--ease), background .25s var(--ease), transform .25s var(--ease);
}
.bkopt:hover{border-color:rgba(255,255,255,.36); background:#0C1119; transform:translateX(3px)}
.bkopt.is-sel{border-color:var(--red); background:rgba(215,25,32,.09)}
.bkopt img{height:27px; width:auto; flex:none}
.bkopt__face{width:38px; height:38px; border-radius:50%; object-fit:cover; object-position:center 35%; border:1px solid var(--line)}
.bkopt__av{
  display:grid; place-items:center; width:38px; height:38px; flex:none; border-radius:50%;
  border:1px dashed rgba(255,255,255,.32); color:var(--red); font-size:14px;
}
.bkopt__b{display:flex; flex-direction:column; gap:1px; flex:1; min-width:0}
.bkopt__t{font-family:"Barlow Condensed",sans-serif; font-size:15px; font-weight:700; letter-spacing:.02em; text-transform:uppercase}
.bkopt__s{font-size:11.5px; color:var(--muted)}

/* ── day strip ─────────────────────────────────────────── */
.bkdays{display:flex; gap:6px; margin:18px 0 4px; padding-bottom:9px; overflow-x:auto; scrollbar-width:thin}
.bkday{
  display:flex; flex-direction:column; align-items:center; gap:1px; flex:none;
  width:50px; padding:7px 4px; border:1px solid var(--line); border-radius:3px;
  background:var(--card); color:var(--white);
  transition:border-color .22s var(--ease), background .22s var(--ease), transform .22s var(--ease);
}
.bkday:hover:not(:disabled){border-color:rgba(255,255,255,.4); transform:translateY(-2px)}
.bkday.is-sel{border-color:var(--red); background:rgba(215,25,32,.12)}
.bkday.is-off{opacity:.3; cursor:not-allowed}
.bkday__d{font-size:9px; font-weight:700; letter-spacing:.14em; color:var(--muted)}
.bkday__n{font-family:"Barlow Condensed",sans-serif; font-size:17px; font-weight:700; line-height:1}
.bkday__m{font-size:9px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.bkday.is-sel .bkday__d,.bkday.is-sel .bkday__m{color:#F2A0A4}

/* ── time slots ────────────────────────────────────────── */
.bkgroup{margin-top:18px}
.bkgroup__t{font-size:10px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--chrome); margin-bottom:8px}
.bkslots{display:grid; grid-template-columns:repeat(auto-fill,minmax(82px,1fr)); gap:6px}
.bkslot{
  padding:8px 5px; border:1px solid var(--line); border-radius:2px;
  background:var(--card); color:var(--white);
  font-size:11.5px; font-weight:600; font-variant-numeric:tabular-nums;
  display:flex; flex-direction:column; gap:1px;
  transition:border-color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease);
}
.bkslot em{font-style:normal; font-size:9.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.bkslot:hover:not(:disabled){border-color:var(--white); transform:translateY(-2px)}
.bkslot.is-sel{border-color:var(--red); background:var(--red); color:#fff}
.bkslot.is-sel em{color:rgba(255,255,255,.78)}
.bkslot.is-taken{opacity:.28; text-decoration:line-through; cursor:not-allowed}
.bknote{margin-top:14px; font-size:11.5px; color:var(--muted); display:flex; align-items:center; gap:8px}
.bkkey{width:20px; height:10px; border:1px solid var(--line); background:var(--card); opacity:.3; display:inline-block}
.bkempty{margin-top:20px; padding:18px; border:1px dashed var(--line); border-radius:3px; color:var(--muted); font-size:13.5px}

/* ── details form ──────────────────────────────────────── */
.bkform{display:grid; grid-template-columns:1fr 1fr; gap:13px; margin-top:20px}
.bkf{display:flex; flex-direction:column; gap:6px}
.bkf--wide{grid-column:1/-1}
.bkf > span{font-size:10px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--chrome)}
.bkf i{color:var(--red); font-style:normal}
.bkf input,.bkf textarea{
  font:inherit; font-size:13px; color:var(--white);
  padding:10px 12px; border:1px solid var(--line); border-radius:2px; background:var(--card);
  transition:border-color .25s var(--ease), background .25s var(--ease);
}
.bkf input::placeholder,.bkf textarea::placeholder{color:#5C636C}
.bkf input:focus,.bkf textarea:focus{outline:0; border-color:var(--red); background:#0C1119}
.bkf textarea{resize:vertical; min-height:72px}
.bkerr{grid-column:1/-1; margin:0; padding:9px 12px; border-left:3px solid var(--red); background:rgba(215,25,32,.1); font-size:12.5px; color:#F2A0A4}

/* ── confirmation ──────────────────────────────────────── */
.bkdone__tick{
  display:grid; place-items:center; width:48px; height:48px; margin-bottom:16px;
  border-radius:50%; background:var(--red); color:#fff; font-size:22px;
  box-shadow:0 8px 24px rgba(215,25,32,.4);
}
.bkrecap{display:grid; grid-template-columns:auto 1fr; gap:8px 20px; margin:22px 0 24px; border-top:1px solid var(--line); padding-top:18px}
.bkrecap dt{font-size:10px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); padding-top:2px}
.bkrecap dd{font-size:13px; font-weight:500}

/* ── summary column ────────────────────────────────────── */
.bksum{position:sticky; top:calc(var(--hdr-h) + 14px); display:grid; gap:11px}
.bksum__card{padding:16px; border:1px solid var(--line); border-radius:3px; background:var(--card)}
.bksum__list{display:grid; gap:1px; margin:14px 0 16px}
.bksum__list dt{font-size:9.5px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-top:9px}
.bksum__list dt:first-of-type{margin-top:0}
.bksum__list dd{font-size:12.5px; font-weight:600}
.bksum__list dd.is-empty{color:#4E555E; font-weight:400}
.bksum__act{display:grid; grid-template-columns:auto 1fr; gap:7px}
.bksum__act .btn{padding:10px 13px; font-size:11px}
.bksum__act .btn[disabled]{opacity:.35; pointer-events:none}
.bksum__hours{margin-top:12px; font-size:10.5px; letter-spacing:.08em; color:var(--muted); text-align:center}

.bkmine{padding:15px 16px; border:1px solid var(--line); border-radius:3px; background:var(--card)}
.bkmine ul{display:grid; gap:7px; margin-top:12px}
.bkmine li{display:flex; align-items:center; gap:10px; justify-content:space-between; padding-bottom:7px; border-bottom:1px solid var(--line-soft); font-size:12.5px}
.bkmine li:last-child{border-bottom:0; padding-bottom:0}
.bkmine li > span{display:flex; flex-direction:column; gap:1px; min-width:0}
.bkmine em{font-style:normal; font-size:11px; color:var(--muted)}
.bkx{width:23px; height:23px; flex:none; border:1px solid var(--line); border-radius:2px; color:var(--muted); font-size:14px; line-height:1}
.bkx:hover{border-color:var(--red); background:var(--red); color:#fff}

.bknudge{
  position:fixed; left:50%; bottom:22px; transform:translateX(-50%); z-index:110;
  padding:10px 18px; border-radius:3px; background:var(--red); color:#fff;
  font-size:12.5px; font-weight:600; box-shadow:0 10px 30px rgba(0,0,0,.5);
}

@media (max-width:900px){
  .bk{grid-template-columns:1fr}
  .bksum{position:static}
  .bkform{grid-template-columns:1fr}
  .bkslots{grid-template-columns:repeat(auto-fill,minmax(84px,1fr))}
  .callbar{display:none}
  .bknudge{bottom:14px; width:calc(100% - 30px); text-align:center}
}

/* deep link from the services menu */
.menu__book{
  margin-top:3px; font-size:10px; font-weight:700; letter-spacing:.15em;
  text-transform:uppercase; color:var(--red); white-space:nowrap;
  transition:color .2s var(--ease);
}
.menu__book:hover{color:var(--red-hi); text-decoration:underline; text-underline-offset:3px}