/* Booking DS overrides — LoanBrain-only gaps on top of the vendored tateesq-web CSS.
 *
 * Contract (see VENDOR.md):
 *   - token-reactive values only: var(--…) / color-mix — never raw rgba() colors
 *   - keep small (target < 100 lines); anything bigger belongs upstream in tateesq-web
 */

/* Structural glue for the static (non-React) wizard: one section per screen. */
.bk-wizard-screen { display: none; }
.bk-wizard-screen.is-active { display: block; }

/* .bk-banner/.bk-error set display:flex, which outranks the UA [hidden] rule. */
.bk-banner[hidden],
.bk-error[hidden] { display: none; }

/* Week group label — no upstream equivalent (Gen-2 dropped week grouping). */
.bk-week-label {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 28px 0 10px;
}
.bk-day-groups .bk-week-label:first-child { margin-top: 0; }

/* "See next week" reveal row sits apart from the week list above it. */
.bk-choices-reveal { margin-top: 12px; }

/* React renders the tick only when checked; our static markup keeps it in the DOM. */
.bk-about-check:not(.is-checked) .bk-about-check-tick { display: none; }

/* Single-choice rows use real radios; make them LOOK like radios (round box,
   center dot) so the control's shape matches its behavior. */
.bk-about-check-input[type="radio"] ~ .bk-about-check-box { border-radius: 50%; }
.bk-about-check-input[type="radio"] ~ .bk-about-check-box .bk-about-check-tick { display: none; }
.bk-about-check.is-checked .bk-about-check-input[type="radio"] ~ .bk-about-check-box::after {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--paper);
}

/* Dismiss affordance on the error banner (blocking errors never auto-hide). */
.bk-banner-dismiss {
  flex-shrink: 0;
  align-self: flex-start;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink-3);
  font-size: 16px;
  line-height: 1;
  padding: 6px 8px;
  border-radius: 8px;
}
.bk-banner-dismiss:hover { color: var(--ink); background: var(--accent-wash); }

/* "CONSULTATION" needs more than the vendored 80px label column. */
.bk-trail-label { width: auto; min-width: 96px; }

/* Placeholder text at AA-adjacent contrast, not the input-value color. */
.bk-pay-input::placeholder { color: var(--ink-3); opacity: 1; }

/* Muted suffixes inside the confirm card (upstream used inline style color). */
.bk-confirm-muted { color: var(--ink-3); }

/* Success/info variant of the banner (vendored .bk-banner is danger-tinted). */
.bk-banner.bk-banner-info {
  background: var(--success-tint);
  border-color: var(--success-border);
}
.bk-banner.bk-banner-info .bk-banner-icon { color: var(--success); }
.bk-banner.bk-banner-warn {
  background: var(--warning-tint);
  border-color: var(--warning-border);
}
.bk-banner.bk-banner-warn .bk-banner-icon { color: var(--warning); }

/* In-place selected state for reschedule's pick-then-confirm rows
   (mirrors .bk-about-check.is-checked). */
.bk-choice.is-selected {
  border-color: var(--ink);
  background: var(--accent-wash);
}

/* Numbered "what happens next" list on the confirmed page. */
.bk-next-steps {
  list-style: none;
  counter-reset: step;
  margin: 0;
  padding: 0;
}
.bk-next-steps li {
  counter-increment: step;
  position: relative;
  padding: 0 0 22px 52px;
  font-size: var(--size-small, 15px);
  line-height: 1.5;
}
.bk-next-steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-pill, 999px);
  background: var(--fill-strong);
  color: var(--ink-on-fill-strong);
  font-family: var(--mono);
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bk-next-steps li strong { display: block; color: var(--ink); }
.bk-next-steps li span { color: var(--ink-3); }

/* "What to expect" aside on the confirmed page. */
.bk-expect {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius, 14px);
  padding: 18px 22px;
  font-size: var(--size-small, 15px);
  color: var(--ink-3);
  line-height: 1.55;
}
.bk-expect strong { color: var(--ink); }

/* The intake form reuses .bk-pay-input on selects and textareas. */
textarea.bk-pay-input { min-height: 120px; resize: vertical; }
select.bk-pay-input { appearance: auto; }