/* Booking app additions on top of the main site's design system (site.css). */

/* header ----------------------------------------------------------------- */
.bk-header { background: var(--surface); border-bottom: 1px solid var(--line); }
.bk-header__inner { display: flex; align-items: center; gap: var(--s-4); min-height: 4rem; }
.bk-logo img { height: 40px; width: auto; }
.bk-logo .logo-dark { display: none; }
.bk-header__label { color: var(--muted); font-weight: 600; font-size: var(--step--1); padding-left: var(--s-4); border-left: 1px solid var(--line); }
.bk-header__back { margin-left: auto; font-size: var(--step--1); font-weight: 600; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .bk-logo .logo-light { display: none; }
  :root:not([data-theme='light']) .bk-logo .logo-dark { display: block; }
}
:root[data-theme='dark'] .bk-logo .logo-light { display: none; }
:root[data-theme='dark'] .bk-logo .logo-dark { display: block; }

.bk-main { padding-bottom: var(--section); }
.bk-intro { padding-block: clamp(2rem, 1.25rem + 3vw, 3.5rem); }
.bk-intro .wrap > * + * { margin-top: var(--s-3); }
.bk-intro h1, .bk-h1 { font-size: var(--step-4); }
.bk-crumb { font-size: var(--step--1); font-weight: 600; color: var(--muted); }
.bk-step { padding-top: var(--s-7); }
.bk-step > * + * { margin-top: var(--s-4); }
.bk-h { font-size: var(--step-1); margin-top: var(--s-7) !important; }
.bk-h:first-child { margin-top: 0 !important; }
.bk-small { font-size: var(--step--1); }

.bk-notice { padding: var(--s-3) var(--s-4); border-radius: var(--radius); background: var(--blue-tint); }
.bk-notice--error { background: color-mix(in srgb, var(--closed) 14%, var(--surface)); color: var(--ink); }
.bk-error { color: var(--closed); font-size: var(--step--1); font-weight: 600; }

/* choices: video/voice, wallets -------------------------------------------- */
.bk-choice { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.bk-pill {
  display: inline-flex; align-items: center; gap: 0.5em;
  min-height: 48px; padding: 0 var(--s-5);
  border: 1.5px solid var(--line-strong); border-radius: var(--radius-pill);
  background: var(--surface); color: var(--ink); font-weight: 600; text-decoration: none; cursor: pointer;
}
.bk-pill:hover { border-color: var(--ink); color: var(--ink); }
.bk-pill[aria-checked='true'], .bk-pill:has(input:checked) { border-color: var(--blue); background: var(--blue); color: var(--btn-fg); }
.bk-pill input { accent-color: var(--blue); }

/* days and slots ------------------------------------------------------------ */
.bk-days { display: grid; grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); gap: var(--s-2); }
.bk-day {
  display: grid; gap: 2px; padding: var(--s-3) var(--s-4);
  border: 1.5px solid var(--line-strong); border-radius: var(--radius);
  background: var(--surface); color: var(--ink); text-decoration: none; font-weight: 600;
}
.bk-day small { font-weight: 500; color: var(--muted); font-size: 0.8125rem; }
a.bk-day:hover { border-color: var(--ink); color: var(--ink); }
.bk-day[aria-current='true'] { border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); }
.bk-day--off { opacity: 0.5; background: transparent; }

.bk-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr)); gap: var(--s-2); }
.bk-slot {
  display: grid; place-items: center; min-height: 48px;
  border: 1.5px solid var(--line-strong); border-radius: var(--radius-pill);
  background: var(--surface); color: var(--ink); font-weight: 650; font-variant-numeric: tabular-nums; text-decoration: none;
}
.bk-slot:hover { border-color: var(--blue); background: var(--blue); color: var(--btn-fg); }

/* forms ---------------------------------------------------------------------- */
.bk-form { padding-top: var(--s-6); display: grid; gap: var(--s-6); max-width: 40rem; }
.bk-form--inline { padding-top: 0; }
.bk-form fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: var(--s-4); }
.bk-form legend { font-weight: 700; font-size: var(--step-1); margin-bottom: var(--s-2); }
.bk-field { display: grid; gap: var(--s-1); }
.bk-field > span { font-weight: 600; font-size: var(--step--1); }
.bk-field input, .bk-field textarea, .bk-field select {
  width: 100%; min-height: 48px; padding: 0.6em 0.8em;
  border: 1.5px solid var(--line-strong); border-radius: 10px;
  background: var(--surface); color: var(--ink); font: inherit;
}
.bk-field textarea { min-height: 6rem; resize: vertical; }
.bk-field input:focus, .bk-field textarea:focus { outline: 2px solid var(--blue); outline-offset: 1px; border-color: var(--blue); }
.bk-field.has-error input, .bk-field.has-error textarea { border-color: var(--closed); }
.bk-check { display: flex; gap: 0.6em; align-items: center; font-weight: 500; cursor: pointer; }
.bk-check--top { align-items: flex-start; }
.bk-check input { width: 1.25rem; height: 1.25rem; flex: none; accent-color: var(--blue); margin-top: 0.15em; }
.bk-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.bk-cancel { padding-top: var(--s-6); margin-top: var(--s-6) !important; border-top: 1px solid var(--line); }

/* payment wallets -------------------------------------------------------------- */
.bk-wallets { display: grid; gap: 0; max-width: 28rem; }
.bk-wallets li { display: flex; justify-content: space-between; gap: var(--s-4); padding-block: var(--s-3); border-bottom: 1px solid var(--line); }
.bk-wallets strong { font-variant-numeric: tabular-nums; font-size: var(--step-1); }

/* admin ------------------------------------------------------------------------ */
.ad-nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-5); font-weight: 600; }
.ad-nav a[aria-current='page'] { color: var(--ink); text-decoration: none; }
.ad-nav span { margin-left: auto; font-weight: 400; }
.ad-list { display: grid; }
.ad-row {
  display: grid; grid-template-columns: 9rem minmax(0, 1fr) auto; align-items: center; gap: var(--s-1) var(--s-4);
  padding-block: var(--s-3); border-top: 1px solid var(--line); color: var(--ink); text-decoration: none;
}
.ad-row:hover .ad-row__who { color: var(--blue); }
.ad-row__who { display: grid; font-weight: 600; }
.ad-row__exp { grid-column: 2 / -1; color: var(--closed); font-weight: 600; }
.ad-badge { display: inline-block; padding: 0.15em 0.7em; border-radius: var(--radius-pill); font-size: var(--step--1); font-weight: 650; background: var(--blue-tint); color: var(--ink); white-space: nowrap; }
.ad-badge--requested { background: #FFE9A8; color: #3D2E00; }
.ad-badge--confirmed { background: #CDEFD9; color: #0E3B22; }
.ad-badge--declined, .ad-badge--expired, .ad-badge--cancelled, .ad-badge--no_show { background: var(--line); color: var(--ink); }
.ad-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--s-4) var(--s-6); padding-block: var(--s-5); border-block: 1px solid var(--line); }
.ad-facts dt { font-size: var(--step--1); font-weight: 600; color: var(--muted); }
.ad-facts dd { margin: 0; font-weight: 500; }
.ad-facts__wide { grid-column: 1 / -1; }
.ad-decide { padding-top: 0; }
.ad-block-form { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); max-width: none; align-items: end; }
.ad-block { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); padding-block: var(--s-3); border-top: 1px solid var(--line); }
@media (max-width: 40rem) {
  .ad-row { grid-template-columns: 1fr auto; }
  .ad-row__when { grid-column: 1 / -1; }
}

/* member number only when a medical aid is chosen */
.bk-form fieldset:has(input[name='medicalAid'][value='']:checked) label:has(input[name='memberNo']):not(.has-error),
.bk-form fieldset:not(:has(input[name='medicalAid']:checked)) label:has(input[name='memberNo']):not(.has-error) { display: none; }

.bk-fees { border-collapse: collapse; margin-top: var(--s-4); font-variant-numeric: tabular-nums; }
.bk-fees th, .bk-fees td { padding: 0.45em 1.25em 0.45em 0; text-align: left; vertical-align: bottom; }
.bk-fees thead th { font-weight: 600; font-size: var(--step--1); color: var(--muted); }
.bk-fees tbody th { font-weight: 500; }
.bk-fees tbody td { font-weight: 650; }
.bk-fees tbody tr + tr > * { border-top: 1px solid var(--line); }

/* show the guardian / second WhatsApp fields only when they apply (CSS-only; older browsers just show both) */
.bk-form fieldset:has(input[name='forChild']:not(:checked)) label:has(input[name='guardianName']):not(.has-error),
.bk-form fieldset:has(input[name='whatsappSame']:checked) label:has(input[name='whatsapp']):not(.has-error) { display: none; }
.bk-actions .btn { white-space: normal; text-align: left; max-width: 100%; }