/* ============================================================================
   Booking page — visual mockup only, no backend wired up.
   ========================================================================== */

.bhero{ background:var(--ink); padding:calc(var(--hdr-h) + clamp(52px,7vw,104px)) 0 clamp(38px,5vw,64px); }
.bhero__h1{ font-size:clamp(42px,7vw,104px); text-transform:uppercase; letter-spacing:-.015em; line-height:.96; }
.bhero__lead{ margin-top:26px; max-width:34em; font-size:clamp(16px,1.25vw,19px); color:var(--on-dark-mute); }

.bk{ background:var(--bone); color:var(--on-bone); padding:clamp(46px,6vw,86px) 0 var(--pv); }
.bk__grid{ display:grid; grid-template-columns:1.55fr .9fr; gap:clamp(30px,4.5vw,72px); align-items:start; }

.fs{ border:0; margin:0 0 clamp(34px,4vw,52px); padding:0; }
.fs .lbl{ color:var(--on-bone-mute); padding:0; }

/* ── service chips ───────────────────────────────────────────────────────── */
.chips{ display:flex; flex-wrap:wrap; gap:10px; }
.chip{ position:relative; }
.chip input{ position:absolute; opacity:0; width:0; height:0; }
.chip span{
  display:block; padding:13px 22px; border-radius:60px;
  border:1px solid rgba(16,18,21,.22); font-size:15px; font-weight:600;
  cursor:pointer; user-select:none;
  transition:background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.chip span:hover{ border-color:rgba(16,18,21,.5); }
.chip input:checked + span{ background:var(--ink); border-color:var(--ink); color:var(--bone); }
.chip input:focus-visible + span{ outline:2px solid var(--copper); outline-offset:3px; }

/* ── calendar ────────────────────────────────────────────────────────────── */
.cal{ border:1px solid rgba(16,18,21,.16); border-radius:14px; padding:clamp(16px,2vw,26px); background:rgba(255,255,255,.42); }
.cal__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.cal__head p{ font-family:var(--display); font-size:22px; font-weight:600; }
.cal__nav{
  width:42px; height:42px; border-radius:50%; border:1px solid rgba(16,18,21,.2);
  display:grid; place-items:center;
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.cal__nav svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.7; }
.cal__nav:hover{ background:var(--ink); border-color:var(--ink); color:var(--bone); }

.cal__days{ display:grid; grid-template-columns:repeat(7,1fr); gap:8px; margin-bottom:22px; }
.day{
  border:1px solid rgba(16,18,21,.16); border-radius:10px; padding:12px 4px;
  display:grid; gap:4px; text-align:center;
  transition:background .28s var(--ease), border-color .28s var(--ease), color .28s var(--ease), transform .28s var(--ease);
}
.day em{ font-style:normal; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--on-bone-mute); }
.day b{ font-family:var(--display); font-size:21px; font-weight:600; }
.day:hover:not(.is-off){ border-color:var(--ink); transform:translateY(-2px); }
.day.is-on{ background:var(--ink); border-color:var(--ink); color:var(--bone); }
.day.is-on em{ color:rgba(241,236,228,.62); }
.day.is-off{ opacity:.34; cursor:not-allowed; }

.slots{ display:flex; flex-wrap:wrap; gap:10px; }
.slot{
  padding:12px 20px; border-radius:60px; border:1px solid rgba(16,18,21,.2);
  font-size:14px; font-weight:600;
  transition:background .28s var(--ease), border-color .28s var(--ease), color .28s var(--ease);
}
.slot:hover:not(.is-off){ border-color:var(--ink); }
.slot.is-on{ background:linear-gradient(120deg,var(--copper-l),var(--copper)); border-color:transparent; color:#14100C; }
.slot.is-off{ opacity:.34; cursor:not-allowed; text-decoration:line-through; }

/* ── fields ──────────────────────────────────────────────────────────────── */
.fields{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.fld{ display:grid; gap:8px; }
.fld--wide{ grid-column:1 / -1; }
.fld span{ font-size:13px; font-weight:600; letter-spacing:.04em; color:var(--on-bone-mute); }
.fld input,.fld textarea{
  font:inherit; font-size:16px; color:var(--on-bone);
  background:rgba(255,255,255,.55);
  border:1px solid rgba(16,18,21,.2); border-radius:10px;
  padding:14px 16px; width:100%; resize:vertical;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.fld input::placeholder,.fld textarea::placeholder{ color:rgba(16,18,21,.36); }
.fld input:focus,.fld textarea:focus{ outline:none; border-color:var(--copper); background:#fff; }

.bk__submit{ width:100%; margin-top:6px; }
.bk__small{ margin-top:16px; font-size:14px; color:var(--on-bone-mute); text-align:center; }

/* ── aside ───────────────────────────────────────────────────────────────── */
.bk__aside{ display:grid; gap:20px; position:sticky; top:calc(var(--hdr-h) + 16px); }
.panel{ background:var(--ink); color:var(--on-dark); border-radius:14px; padding:clamp(22px,2.4vw,30px); }
.panel .lbl{ color:var(--copper-l); }
.panel__tel{ display:block; font-family:var(--display); font-size:clamp(28px,3vw,40px); font-weight:700; line-height:1; }
.panel__tel:hover{ color:var(--copper-l); }
.panel__p{ margin-top:16px; font-size:15px; color:var(--on-dark-mute); }
.panel__p strong{ color:var(--on-dark); }
.panel--img{ padding:0; overflow:hidden; aspect-ratio:4/3; }
.panel--img img{ width:100%; height:100%; object-fit:cover; }

.ticks{ display:grid; gap:12px; }
.ticks li{ position:relative; padding-left:30px; font-size:15px; color:var(--on-bone-mute); }
.ticks li::before{
  content:""; position:absolute; left:4px; top:.55em;
  width:9px; height:9px; border-radius:50%;
  background:linear-gradient(120deg,var(--copper-l),var(--copper));
}

@media (max-width:1000px){
  .bk__grid{ grid-template-columns:1fr; }
  .bk__aside{ position:static; }
}
@media (max-width:700px){
  .cal__days{ grid-template-columns:repeat(4,1fr); }
  .fields{ grid-template-columns:1fr; }
  .day b{ font-size:19px; }
}