/* ===== Booking modal ===== */
.bk-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: color-mix(in oklab, var(--bg) 78%, black);
  backdrop-filter: blur(6px);
  display: grid; place-items: center;
  padding: 20px;
  animation: bk-fade 220ms ease;
}
@keyframes bk-fade { from { opacity: 0; } }

.bk-modal {
  width: min(680px, 100%); max-height: min(860px, 94vh);
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  box-shadow: 0 40px 120px -30px rgba(0,0,0,0.7);
  display: flex; flex-direction: column;
  position: relative; overflow: hidden;
  animation: bk-pop 320ms cubic-bezier(.16,.84,.32,1);
}
@keyframes bk-pop { from { transform: translateY(18px) scale(.98); opacity: 0; } }

.bk-x {
  position: absolute; top: 16px; right: 16px; z-index: 5;
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; font-size: 14px;
  color: var(--ink-soft); border: 1px solid var(--line);
  transition: background var(--t-fast), color var(--t-fast);
}
.bk-x:hover { background: var(--surface); color: var(--ink); }

.bk-steps {
  display: flex; gap: 4px; padding: 22px 26px 18px;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
}
.bk-step { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; opacity: 0.5; transition: opacity var(--t-med); }
.bk-step.active, .bk-step.done { opacity: 1; }
.bk-step:not(:last-child)::after { content: ""; width: 16px; height: 1px; background: var(--line-2); margin-left: 4px; }
.bk-step-dot {
  width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  font-size: 12px; font-weight: 700; border: 1px solid var(--line-2); color: var(--ink-soft);
  transition: all var(--t-fast);
}
.bk-step.active .bk-step-dot { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.bk-step.done .bk-step-dot { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.bk-step-label { font-size: 12px; font-weight: 600; letter-spacing: 0.04em; }
@media (max-width: 560px) { .bk-step-label { display: none; } }

.bk-body { padding: 26px; overflow-y: auto; flex: 1; }
.bk-pane { animation: bk-slide 300ms cubic-bezier(.16,.84,.32,1); }
@keyframes bk-slide { from { opacity: 0; transform: translateX(14px); } }
.bk-h { font-family: var(--serif); font-weight: 700; font-size: 26px; letter-spacing: -0.01em; margin-bottom: 18px; }
.bk-hint { color: var(--ink-mute); font-size: 14px; margin-top: 16px; }

/* services */
.bk-services { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 560px) { .bk-services { grid-template-columns: 1fr; } }
.bk-svc {
  text-align: left; padding: 16px; border-radius: var(--r-md);
  border: 1px solid var(--line); background: var(--surface);
  transition: border-color var(--t-fast), transform var(--t-fast), background var(--t-fast);
}
.bk-svc:hover { border-color: var(--line-2); transform: translateY(-2px); }
.bk-svc.sel { border-color: var(--accent); background: var(--accent-soft); }
.bk-svc-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.bk-svc-name { font-weight: 700; font-size: 15px; }
.bk-svc-price { font-family: var(--cond); letter-spacing: 0.04em; color: var(--accent); font-size: 18px; }
.bk-svc-desc { color: var(--ink-soft); font-size: 13px; line-height: 1.45; margin: 6px 0 10px; }
.bk-svc-mins { font-family: "Spline Sans Mono", monospace; font-size: 11px; color: var(--ink-mute); letter-spacing: 0.1em; }

/* barbers */
.bk-barbers { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.bk-barber {
  text-align: center; padding: 18px 12px; border-radius: var(--r-md);
  border: 1px solid var(--line); background: var(--surface);
  transition: border-color var(--t-fast), transform var(--t-fast);
}
.bk-barber:hover { border-color: var(--line-2); transform: translateY(-2px); }
.bk-barber.sel { border-color: var(--accent); background: var(--accent-soft); }
.bk-barber-av { width: 56px; height: 56px; border-radius: 50%; margin: 0 auto 10px; }
.bk-barber-av.any { background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font-size: 22px; }
.bk-barber-av.ph::after { font-size: 9px; padding: 3px 6px; }
.bk-barber-name { font-weight: 700; font-size: 14px; }
.bk-barber-role { font-size: 12px; color: var(--ink-mute); margin-top: 2px; }

/* date + time */
.bk-dayrow { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px; }
.bk-day {
  flex: 0 0 auto; width: 62px; padding: 12px 0; border-radius: var(--r-md);
  border: 1px solid var(--line); background: var(--surface);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  transition: border-color var(--t-fast), transform var(--t-fast);
}
.bk-day:hover { border-color: var(--line-2); }
.bk-day.sel { border-color: var(--accent); background: var(--accent-soft); }
.bk-day-dow { font-size: 11px; color: var(--ink-mute); text-transform: uppercase; letter-spacing: 0.1em; }
.bk-day-num { font-family: var(--serif); font-size: 22px; line-height: 1; }
.bk-day-mon { font-size: 10px; color: var(--ink-mute); text-transform: uppercase; }
.bk-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; margin-top: 18px; }
.bk-slot {
  padding: 11px 0; border-radius: var(--r-sm); border: 1px solid var(--line);
  background: var(--surface); font-size: 14px; font-weight: 600;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.bk-slot:hover:not(.taken) { border-color: var(--accent); }
.bk-slot.sel { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.bk-slot.taken { opacity: 0.3; text-decoration: line-through; cursor: not-allowed; }

/* form */
.bk-form { display: flex; flex-direction: column; gap: 14px; }
.bk-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 480px) { .bk-field-row { grid-template-columns: 1fr; } }
.bk-field { display: flex; flex-direction: column; gap: 6px; }
.bk-field > span { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-soft); }
.bk-field > span em { font-style: normal; color: var(--ink-mute); font-weight: 500; text-transform: none; letter-spacing: 0; }
.bk-field input, .bk-field textarea {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 12px 14px; color: var(--ink); font-family: var(--body); font-size: 15px;
  transition: border-color var(--t-fast);
}
.bk-field input:focus, .bk-field textarea:focus { outline: none; border-color: var(--accent); }
.bk-field textarea { resize: vertical; }
.bk-err { color: #e0734f; font-size: 13px; }

/* confirm */
.bk-confirm { text-align: center; padding: 14px 0; }
.bk-check {
  width: 64px; height: 64px; border-radius: 50%; margin: 8px auto 18px;
  background: var(--accent); color: var(--on-accent); display: grid; place-items: center;
  font-size: 30px; animation: bk-check 480ms cubic-bezier(.16,.84,.32,1);
}
@keyframes bk-check { from { transform: scale(0); } 60% { transform: scale(1.15); } }
.bk-confirm-sub { color: var(--ink-soft); margin-bottom: 22px; }
.bk-summary { text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 6px 18px; max-width: 440px; margin: 0 auto; }
.bk-srow { display: flex; justify-content: space-between; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.bk-srow:last-child { border-bottom: none; }
.bk-srow-k { color: var(--ink-mute); font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; }
.bk-srow-v { font-weight: 600; text-align: right; }

/* footer */
.bk-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 26px; border-top: 1px solid var(--line); background: var(--surface); }
.bk-back { font-weight: 600; font-size: 14px; color: var(--ink-soft); }
.bk-back:hover:not(:disabled) { color: var(--ink); }
.bk-foot-right { display: flex; align-items: center; gap: 16px; }
.bk-runtotal { font-size: 13px; color: var(--ink-mute); }
@media (max-width: 480px) { .bk-runtotal { display: none; } }
.btn.is-off { opacity: 0.4; cursor: not-allowed; }