/* ── Lesson booking page (book.html) ── */

/* .is-hidden is NOT a generic display:none utility in this codebase — it's
   scoped to .nav-auth/.nav-links only (see styles.css) and uses
   visibility:hidden there, not display:none. Scoping a real display:none
   rule to #bk-app avoids any risk of it leaking into that nav-specific
   usage elsewhere on the page. */
#bk-app .is-hidden { display: none; }

.bk-hero { padding-bottom: 24px; }

.bk-status { text-align: center; color: var(--ink-soft); padding: 24px 0; }
.bk-status-error { color: #c0413f; }

/* Slot picker — days run left-to-right as columns (like a week calendar),
   times stacked vertically within each column. Horizontally scrollable
   since the booking window is up to 4 weeks (can be 20+ day columns). */
#bk-slots-days { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 8px; }
.bk-day { flex: 0 0 120px; display: flex; flex-direction: column; align-items: stretch; }
.bk-day h3 { font-family: var(--font-serif); font-size: .92rem; color: var(--ink); margin: 0 0 10px; text-align: center; line-height: 1.3; }
.bk-times { display: flex; flex-direction: column; gap: 8px; }
.bk-time-btn {
  font-family: inherit; font-size: .9rem; font-weight: 600; color: var(--ink);
  background: var(--surface); border: 2px solid var(--line); border-radius: 10px;
  padding: 10px 14px; cursor: pointer; transition: border-color .15s, background .15s;
  width: 100%;
}
.bk-time-btn:hover { border-color: var(--brand); background: var(--paper); }
.bk-time-btn-selected, .bk-time-btn-selected:hover {
  background: var(--brand); border-color: var(--brand); color: #fff;
}

.bk-multi-hint { color: var(--ink-soft); font-size: .88rem; margin: 0 0 16px; }

@media (max-width: 640px) {
  .bk-day { flex-basis: 96px; }
}

/* Selection summary bar — sticks to the bottom of the viewport once at
   least one slot is selected, so it's always visible while scrolling
   through the day columns to pick more times. */
.bk-summary-bar {
  position: sticky; bottom: 0; z-index: 5; margin: 20px -16px -1px;
  background: var(--surface); border-top: 2px solid var(--line);
  box-shadow: 0 -6px 18px rgba(27,42,74,.08); padding: 14px 16px;
}
.bk-summary-list { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; max-height: 90px; overflow-y: auto; }
.bk-summary-item {
  display: flex; align-items: center; gap: 6px; background: var(--paper);
  border: 1px solid var(--line); border-radius: 20px; padding: 5px 6px 5px 12px;
  font-size: .82rem; font-weight: 600; color: var(--ink);
}
.bk-summary-remove {
  border: none; background: var(--line); color: var(--ink); width: 20px; height: 20px;
  border-radius: 50%; cursor: pointer; font-size: 1rem; line-height: 1; display: grid; place-items: center;
}
.bk-summary-remove:hover { background: var(--brand); color: #fff; }
.bk-summary-footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.bk-summary-total { font-weight: 700; color: var(--ink); font-size: .95rem; }

/* Booking form */
.bk-form-panel {
  max-width: 460px; margin: 20px auto 0; background: var(--surface);
  border: 2px solid var(--line); border-radius: var(--radius); padding: 28px;
}
.bk-form-panel h2 { font-family: var(--font-serif); font-size: 1.3rem; margin: 0 0 10px; color: var(--ink); }
.bk-form-slots { margin: 0 0 4px; }
.bk-form-slot { font-weight: 600; color: var(--brand); margin: 0 0 4px; }
.bk-form-price { font-family: var(--font-serif); font-size: 1.6rem; color: var(--ink); margin: 0 0 20px; }
.bk-form-price span { font-family: var(--font-sans); font-size: .9rem; color: var(--ink-soft); font-weight: 500; }
.bk-field { display: block; margin-bottom: 14px; }
.bk-field span { display: block; font-size: .85rem; font-weight: 600; color: var(--ink-soft); margin-bottom: 5px; }
.bk-field input[type="text"], .bk-field input[type="email"] {
  width: 100%; padding: 10px 12px; border: 2px solid var(--line); border-radius: 8px;
  font-size: .95rem; font-family: var(--font-sans); background: var(--surface); color: var(--ink); outline: none;
}
.bk-field input[type="text"]:focus, .bk-field input[type="email"]:focus { border-color: var(--brand); }

/* Course choice (radio group styled as selectable rows) */
.bk-course-choices { display: flex; flex-direction: column; gap: 8px; }
.bk-course-choice {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px;
  border: 2px solid var(--line); border-radius: 8px; font-size: .88rem; font-weight: 500;
  color: var(--ink); cursor: pointer; transition: border-color .15s, background .15s;
}
.bk-course-choice:has(input:checked) { border-color: var(--brand); background: var(--paper); font-weight: 600; }
.bk-course-choice input { accent-color: var(--brand); flex-shrink: 0; }

/* Terms checkbox */
.bk-terms-field {
  display: flex; align-items: flex-start; gap: 10px; margin: 4px 0 18px;
  font-size: .85rem; color: var(--ink-soft); line-height: 1.5; cursor: pointer;
}
.bk-terms-field input { accent-color: var(--brand); flex-shrink: 0; margin-top: 3px; }
.bk-terms-field a { color: var(--brand); }

.bk-pay-btn { width: 100%; margin-top: 6px; padding: 13px; font-size: 1rem; }

@media (max-width: 640px) {
  .bk-form-panel { padding: 22px; }
}