/* =========================================================
   Beauty Clinic Booking Pro — Luminance Design System
   v6.0 · All CSS custom properties on [data-sb-theme]
   ========================================================= */

/* ─── Font imports (self-hosted) ─────────────────────────── */
/* @font-face rules are in fonts.css */

/* ─── Theme tokens (Luminance defaults) ─────────────────── */
[data-sb-theme] {
  --sb-porcelain: #FBF8F4;
  --sb-mist:      #EDE7E0;
  --sb-ink:       #221C24;
  --sb-aubergine: #5A2F50;
  --sb-blush:     #E9C9C2;
  --sb-champagne: #C9A36B;

  /* Derived */
  --sb-success:   #4F7A5B;
  --sb-warning:   #C98A3B;
  --sb-danger:    #A14545;
  --sb-muted:     color-mix(in srgb, var(--sb-ink) 60%, transparent);
  --sb-line:      color-mix(in srgb, var(--sb-ink) 12%, transparent);

  /* Spacing (8px grid) */
  --sb-space-1: 4px;
  --sb-space-2: 8px;
  --sb-space-3: 12px;
  --sb-space-4: 16px;
  --sb-space-5: 24px;
  --sb-space-6: 32px;
  --sb-space-7: 48px;
  --sb-space-8: 64px;

  /* Typography */
  --sb-font-display: 'Fraunces', 'Georgia', serif;
  --sb-font-body:    'Hanken Grotesk', 'Inter', system-ui, sans-serif;

  /* Radius */
  --sb-radius-card:   16px;
  --sb-radius-button: 24px;
  --sb-radius-pill:   999px;

  /* Motion */
  --sb-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --sb-dur-fast: 120ms;
  --sb-dur-mid:  220ms;
  --sb-dur-slow: 300ms;

  /* Glow */
  --sb-glow: radial-gradient(circle,
    color-mix(in srgb, var(--sb-blush) 55%, transparent),
    transparent 70%
  );

  /* Elevation scale — soft, premium shadows */
  --sb-shadow-xs: 0 1px 2px color-mix(in srgb, var(--sb-ink) 6%, transparent);
  --sb-shadow-sm: 0 2px 8px color-mix(in srgb, var(--sb-ink) 7%, transparent),
                  0 1px 2px color-mix(in srgb, var(--sb-ink) 5%, transparent);
  --sb-shadow-md: 0 8px 24px color-mix(in srgb, var(--sb-ink) 9%, transparent),
                  0 2px 6px color-mix(in srgb, var(--sb-ink) 5%, transparent);
  --sb-shadow-lg: 0 20px 48px color-mix(in srgb, var(--sb-ink) 12%, transparent),
                  0 6px 16px color-mix(in srgb, var(--sb-ink) 6%, transparent);
  --sb-shadow-brand: 0 8px 24px color-mix(in srgb, var(--sb-aubergine) 28%, transparent);

  /* Surfaces */
  --sb-surface:      #fff;
  --sb-surface-soft: color-mix(in srgb, var(--sb-mist) 50%, var(--sb-porcelain));

  /* Layout */
  --sb-max-width:  1080px;
  --sb-step-width: 640px;
  --sb-card-width: 340px;

  /* Font sizes */
  --sb-text-display: 2.75rem;
  --sb-text-h2:      2.1rem;
  --sb-text-h3:      1.5rem;
  --sb-text-body:    1rem;
  --sb-text-sm:      0.875rem;
  --sb-text-xs:      0.75rem;

  font-family: var(--sb-font-body);
  color: var(--sb-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Dark surfaces */
[data-sb-theme][data-sb-dark] {
  --sb-surface:      #211A21;
  --sb-surface-soft: #1E181E;
}

/* Dark mode */
[data-sb-theme][data-sb-dark] {
  --sb-porcelain: #181318;
  --sb-mist:      #261F26;
  --sb-ink:       #FBF8F4;
}

/* ─── Reset (scoped) ─────────────────────────────────────── */
.bcb-wizard *, .bcb-wizard *::before, .bcb-wizard *::after,
.bcb-customer-panel *, .bcb-staff-panel * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Neutralise theme/Elementor button chrome so it can't leak into the wizard.
   Components below re-apply their own intended look. */
.bcb-wizard button,
.bcb-customer-panel button,
.bcb-staff-panel button {
  -webkit-appearance: none;
  appearance: none;
  border: none;
  background: none;
  box-shadow: none;
  font: inherit;
  color: inherit;
  line-height: normal;
  text-transform: none;
  letter-spacing: normal;
  min-height: 0;
  cursor: pointer;
}

/* ─── Focus ring ─────────────────────────────────────────── */
.bcb-wizard :focus-visible,
.bcb-customer-panel :focus-visible,
.bcb-staff-panel :focus-visible {
  outline: 2px solid var(--sb-aubergine);
  outline-offset: 2px;
}

/* ─── Wizard layout ──────────────────────────────────────── */
.bcb-wizard {
  padding: var(--sb-space-6) var(--sb-space-5) var(--sb-space-8);
  max-width: var(--sb-max-width);
  margin: 0 auto;
  position: relative;
  background:
    radial-gradient(1200px 480px at 12% -8%, color-mix(in srgb, var(--sb-blush) 26%, transparent), transparent 60%),
    radial-gradient(1000px 420px at 100% 0%, color-mix(in srgb, var(--sb-champagne) 16%, transparent), transparent 55%),
    var(--sb-porcelain);
  border-radius: var(--sb-space-5);
}

/* ─── Premium header ─────────────────────────────────────── */
.bcb-wizard__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sb-space-6);
}

.bcb-wizard__brand {
  display: flex;
  align-items: center;
  gap: var(--sb-space-3);
}

.bcb-wizard__mark {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: linear-gradient(140deg, var(--sb-aubergine), color-mix(in srgb, var(--sb-aubergine) 65%, var(--sb-champagne)));
  color: var(--sb-porcelain);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--sb-shadow-brand);
  flex-shrink: 0;
}

.bcb-wizard__mark svg { width: 24px; height: 24px; }

/* When a real clinic logo is uploaded, show it cleanly (no brand gradient). */
.bcb-wizard__mark--img {
  background: var(--sb-surface);
  border: 1px solid var(--sb-line);
  padding: 4px;
  overflow: hidden;
}
.bcb-wizard__mark--img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Step 1 — service-list view */
.bcb-step1-back { padding-left: 0; margin-bottom: var(--sb-space-2); }
.bcb-step1-cat-name {
  font-family: var(--sb-font-display);
  font-size: var(--sb-text-h3);
  margin-bottom: var(--sb-space-4);
}

.bcb-wizard__clinic {
  font-family: var(--sb-font-display);
  font-size: 1.25rem;
  line-height: 1.1;
  font-weight: 600;
}

.bcb-wizard__tagline {
  font-size: var(--sb-text-xs);
  color: var(--sb-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: 2px;
}

/* ─── Stepped indicator ──────────────────────────────────── */
.bcb-stepper {
  margin-bottom: var(--sb-space-6);
  overflow-x: auto;
  scrollbar-width: none;
}
.bcb-stepper::-webkit-scrollbar { display: none; }

.bcb-stepper__list {
  display: flex;
  align-items: center;
  list-style: none;
  min-width: max-content;
  gap: 0;
}

.bcb-stepper__item {
  display: flex;
  align-items: center;
  gap: var(--sb-space-2);
  position: relative;
  padding-right: var(--sb-space-4);
}

/* Connector line */
.bcb-stepper__item:not(:last-child)::after {
  content: '';
  width: 28px;
  height: 2px;
  background: var(--sb-line);
  margin-left: var(--sb-space-2);
  border-radius: 2px;
  transition: background var(--sb-dur-mid) var(--sb-ease-out);
}

.bcb-stepper__item.is-complete:not(:last-child)::after {
  background: var(--sb-aubergine);
}

.bcb-stepper__dot {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--sb-surface);
  border: 1.5px solid var(--sb-line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  transition: background var(--sb-dur-mid), border-color var(--sb-dur-mid), transform var(--sb-dur-fast);
}

.bcb-stepper__num {
  font-size: var(--sb-text-xs);
  font-weight: 700;
  color: var(--sb-muted);
  font-variant-numeric: tabular-nums;
}

.bcb-stepper__tick {
  position: absolute;
  width: 14px; height: 14px;
  stroke: var(--sb-porcelain);
  fill: none; stroke-width: 3;
  stroke-linecap: round; stroke-linejoin: round;
  opacity: 0;
}

.bcb-stepper__label {
  font-size: var(--sb-text-sm);
  font-weight: 600;
  color: var(--sb-muted);
  white-space: nowrap;
  transition: color var(--sb-dur-mid);
}

/* Active state */
.bcb-stepper__item.is-active .bcb-stepper__dot {
  background: var(--sb-aubergine);
  border-color: var(--sb-aubergine);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--sb-aubergine) 14%, transparent);
}
.bcb-stepper__item.is-active .bcb-stepper__num { color: var(--sb-porcelain); }
.bcb-stepper__item.is-active .bcb-stepper__label { color: var(--sb-ink); }

/* Complete state */
.bcb-stepper__item.is-complete .bcb-stepper__dot {
  background: var(--sb-aubergine);
  border-color: var(--sb-aubergine);
}
.bcb-stepper__item.is-complete .bcb-stepper__num { opacity: 0; }
.bcb-stepper__item.is-complete .bcb-stepper__tick { opacity: 1; }
.bcb-stepper__item.is-complete .bcb-stepper__label { color: var(--sb-ink); }

/* Hide labels on small screens (keep dots) */
@media (max-width: 640px) {
  .bcb-stepper__item:not(.is-active) .bcb-stepper__label { display: none; }
  .bcb-stepper__item:not(:last-child)::after { width: 16px; }
}

.bcb-wizard__body {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sb-space-6);
  margin-top: var(--sb-space-5);
}

@media (min-width: 768px) {
  .bcb-wizard__body {
    grid-template-columns: var(--sb-step-width) var(--sb-card-width);
    align-items: start;
  }
  .bcb-treatment-card {
    position: sticky;
    top: var(--sb-space-5);
  }
}

/* ─── Progress bar (visually hidden, retained for a11y) ──── */
.bcb-progress {
  height: 0;
  overflow: hidden;
}

.bcb-progress__bar {
  height: 100%;
  background: var(--sb-aubergine);
  transition: width var(--sb-dur-slow) var(--sb-ease-out);
}

/* ─── Step headings ──────────────────────────────────────── */
.bcb-step__title {
  font-family: var(--sb-font-display);
  font-size: var(--sb-text-h2);
  font-optical-sizing: auto;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin-bottom: var(--sb-space-5);
}

.bcb-step__subtitle {
  font-size: var(--sb-text-sm);
  color: var(--sb-muted);
  margin-top: calc(-1 * var(--sb-space-4));
  margin-bottom: var(--sb-space-5);
}

/* ─── Step transitions ───────────────────────────────────── */
.bcb-step-leave {
  animation: bcb-step-out var(--sb-dur-mid) var(--sb-ease-out) forwards;
}
.bcb-step-enter {
  animation: bcb-step-in var(--sb-dur-slow) var(--sb-ease-out) forwards;
}

@keyframes bcb-step-out {
  to { opacity: 0; transform: translateY(8px); }
}
@keyframes bcb-step-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .bcb-step-leave, .bcb-step-enter { animation: bcb-fade var(--sb-dur-fast) linear forwards; }
  @keyframes bcb-fade { to { opacity: 0; } from { opacity: 0; } }
  .bcb-step-enter { animation: none; opacity: 1; }
}

/* ─── Category grid (Step 1) ─────────────────────────────── */
.bcb-category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--sb-space-4);
  align-items: start; /* each card sizes to its own content — no empty stretch */
}

.bcb-card {
  position: relative;
  background: var(--sb-surface);
  border-radius: var(--sb-radius-card);
  border: 1px solid var(--sb-line);
  box-shadow: var(--sb-shadow-sm);
  padding: var(--sb-space-5);
  cursor: pointer;
  transition:
    transform var(--sb-dur-mid) var(--sb-ease-out),
    box-shadow var(--sb-dur-mid) var(--sb-ease-out),
    border-color var(--sb-dur-mid) var(--sb-ease-out);
  overflow: hidden;
}

/* Glow layer (behind content) */
.bcb-card::before {
  content: '';
  position: absolute;
  inset: -20%;
  background: var(--sb-glow);
  opacity: 0;
  transition: opacity var(--sb-dur-slow) var(--sb-ease-out);
  pointer-events: none;
  z-index: 0;
}

.bcb-card > * { position: relative; z-index: 1; }

.bcb-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--sb-shadow-md);
  border-color: color-mix(in srgb, var(--sb-aubergine) 25%, var(--sb-line));
}

.bcb-card--selected {
  border-color: var(--sb-aubergine);
  box-shadow: var(--sb-shadow-md), 0 0 0 1px var(--sb-aubergine);
}

.bcb-card--selected::before {
  opacity: 1;
}

.bcb-card--disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.bcb-card__check {
  position: absolute;
  top: var(--sb-space-3);
  right: var(--sb-space-3);
  width: 20px;
  height: 20px;
  background: var(--sb-aubergine);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--sb-dur-mid) var(--sb-ease-out);
}

.bcb-card--selected .bcb-card__check {
  opacity: 1;
}

.bcb-card__check svg {
  width: 11px;
  height: 11px;
  stroke: var(--sb-porcelain);
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bcb-card__name {
  font-family: var(--sb-font-display);
  font-size: 1.25rem;
  line-height: 1.25;
  margin-bottom: var(--sb-space-2);
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: none;
}

.bcb-card__meta {
  font-size: var(--sb-text-sm);
  color: var(--sb-muted);
}

.bcb-card__price {
  font-size: var(--sb-text-body);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--sb-aubergine);
  margin-top: var(--sb-space-2);
}

.bcb-card__payment-label {
  font-size: var(--sb-text-xs);
  color: var(--sb-muted);
  margin-top: var(--sb-space-1);
}

/* Payment plan pill */
.bcb-plan-pill {
  display: inline-block;
  background: color-mix(in srgb, var(--sb-aubergine) 15%, transparent);
  color: var(--sb-aubergine);
  border-radius: var(--sb-radius-pill);
  padding: 2px 10px;
  font-size: var(--sb-text-xs);
  font-weight: 600;
  margin-top: var(--sb-space-2);
}

/* ─── Service list (Step 1 sub-view) ─────────────────────── */
.bcb-service-list {
  display: flex;
  flex-direction: column;
  gap: var(--sb-space-3);
}

.bcb-service-card {
  display: flex;
  align-items: center;
  gap: var(--sb-space-4);
  background: var(--sb-surface);
  border-radius: var(--sb-radius-card);
  border: 1px solid var(--sb-line);
  box-shadow: var(--sb-shadow-xs);
  padding: var(--sb-space-5);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: border-color var(--sb-dur-mid), box-shadow var(--sb-dur-mid), transform var(--sb-dur-fast);
}

.bcb-service-card::before {
  content: '';
  position: absolute;
  inset: -30%;
  background: var(--sb-glow);
  opacity: 0;
  transition: opacity var(--sb-dur-slow);
  pointer-events: none;
}

.bcb-service-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--sb-shadow-md);
  border-color: color-mix(in srgb, var(--sb-aubergine) 22%, var(--sb-line));
}

.bcb-service-card--selected {
  border-color: var(--sb-aubergine);
  box-shadow: var(--sb-shadow-md), 0 0 0 1px var(--sb-aubergine);
}
.bcb-service-card--selected::before { opacity: 1; }

/* Chevron affordance */
.bcb-service-card__body { flex: 1; position: relative; z-index: 1; }
.bcb-service-card__name { font-weight: 600; font-size: 1.05rem; }
.bcb-service-card__desc { font-size: var(--sb-text-sm); color: var(--sb-muted); margin-top: 2px; }
.bcb-service-card__price {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--sb-aubergine);
  white-space: nowrap;
  position: relative;
  z-index: 1;
}
.bcb-service-card__duration {
  font-size: var(--sb-text-sm);
  color: var(--sb-muted);
  white-space: nowrap;
}
.bcb-service-card__meta-right {
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

/* ─── Therapist cards (Step 2) ───────────────────────────── */
.bcb-therapist-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--sb-space-3);
}

.bcb-therapist-card {
  text-align: center;
  padding: var(--sb-space-5) var(--sb-space-4);
  background: var(--sb-surface);
  border-radius: var(--sb-radius-card);
  border: 1px solid var(--sb-line);
  box-shadow: var(--sb-shadow-sm);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: border-color var(--sb-dur-mid), box-shadow var(--sb-dur-mid), transform var(--sb-dur-fast);
}

.bcb-therapist-card::before {
  content: '';
  position: absolute;
  inset: -30%;
  background: var(--sb-glow);
  opacity: 0;
  transition: opacity var(--sb-dur-slow);
  pointer-events: none;
}

.bcb-therapist-card--selected {
  border-color: var(--sb-aubergine);
  box-shadow: var(--sb-shadow-md), 0 0 0 1px var(--sb-aubergine);
}
.bcb-therapist-card--selected::before { opacity: 1; }
.bcb-therapist-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--sb-shadow-md);
  border-color: color-mix(in srgb, var(--sb-aubergine) 22%, var(--sb-line));
}

.bcb-therapist-card__photo {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto var(--sb-space-3);
  display: block;
  position: relative;
  z-index: 1;
  box-shadow: 0 0 0 4px var(--sb-surface), 0 4px 12px color-mix(in srgb, var(--sb-ink) 12%, transparent);
}

.bcb-therapist-card__avatar {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--sb-aubergine), color-mix(in srgb, var(--sb-aubergine) 60%, var(--sb-champagne)));
  color: var(--sb-porcelain);
  font-family: var(--sb-font-display);
  font-size: 1.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--sb-space-3);
  position: relative;
  z-index: 1;
  box-shadow: 0 0 0 4px var(--sb-surface), 0 4px 12px color-mix(in srgb, var(--sb-aubergine) 25%, transparent);
}

.bcb-therapist-card__name {
  font-family: var(--sb-font-display);
  font-size: var(--sb-text-body);
  position: relative;
  z-index: 1;
}

.bcb-therapist-card__bio {
  font-size: var(--sb-text-xs);
  color: var(--sb-muted);
  margin-top: var(--sb-space-2);
  position: relative;
  z-index: 1;
}

.bcb-therapist-card__bio-toggle {
  background: none;
  border: none;
  color: var(--sb-aubergine);
  font-size: var(--sb-text-xs);
  cursor: pointer;
  text-decoration: underline;
}

/* ─── Date picker (Step 2) — self-contained calendar ────── */
.bcb-cal {
  background: var(--sb-surface);
  border: 1px solid var(--sb-line);
  border-radius: var(--sb-radius-card);
  box-shadow: var(--sb-shadow-md);
  padding: var(--sb-space-4);
  max-width: 380px;
  margin: 0 auto;
}

.bcb-cal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sb-space-3);
}

.bcb-cal__title {
  font-family: var(--sb-font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--sb-ink);
}

.bcb-cal__nav {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--sb-line);
  background: var(--sb-surface);
  color: var(--sb-aubergine);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--sb-dur-fast), border-color var(--sb-dur-fast), opacity var(--sb-dur-fast);
}

.bcb-cal__nav:hover:not(:disabled) {
  background: color-mix(in srgb, var(--sb-aubergine) 10%, var(--sb-surface));
  border-color: var(--sb-aubergine);
}

.bcb-cal__nav:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.bcb-cal__dow {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--sb-space-1);
  margin-bottom: var(--sb-space-2);
}

.bcb-cal__dow span {
  text-align: center;
  font-size: var(--sb-text-xs);
  font-weight: 700;
  color: var(--sb-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.bcb-cal__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--sb-space-1);
}

.bcb-cal__cell {
  aspect-ratio: 1 / 1;
  width: 100%;
  display: flex !important;
  align-items: center;
  justify-content: center;
  border: 1.5px solid transparent !important;
  border-radius: 50% !important;
  background: transparent;
  color: var(--sb-ink);
  font-family: var(--sb-font-body);
  font-size: var(--sb-text-sm);
  font-weight: 500;
  padding: 0 !important;
  cursor: pointer;
  transition: background var(--sb-dur-fast), color var(--sb-dur-fast), transform var(--sb-dur-fast), border-color var(--sb-dur-fast);
}

.bcb-cal__cell--empty {
  cursor: default;
  background: transparent;
  border-color: transparent !important;
  pointer-events: none;
}

.bcb-cal__cell:not(.bcb-cal__cell--empty):not(.bcb-cal__cell--disabled):hover {
  background: color-mix(in srgb, var(--sb-aubergine) 10%, var(--sb-surface));
  transform: scale(1.08);
}

.bcb-cal__cell--today {
  border-color: var(--sb-champagne) !important;
  font-weight: 700;
}

.bcb-cal__cell--selected,
.bcb-cal__cell--selected:hover {
  background: var(--sb-aubergine) !important;
  border-color: var(--sb-aubergine) !important;
  color: var(--sb-porcelain) !important;
  box-shadow: var(--sb-shadow-brand);
}

.bcb-cal__cell--disabled {
  opacity: 0.35;
  cursor: not-allowed;
  color: var(--sb-muted);
  background: transparent !important;
}

/* ─── Time slots (Step 3) — grouped by period ────────────── */
.bcb-slots {
  display: flex;
  flex-direction: column;
  gap: var(--sb-space-5);
  margin-top: var(--sb-space-4);
}

.bcb-slots__group { display: flex; flex-direction: column; gap: var(--sb-space-3); }

.bcb-slots__heading {
  display: flex;
  align-items: center;
  gap: var(--sb-space-2);
  font-size: var(--sb-text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sb-muted);
}

.bcb-slots__heading-icon { font-size: 0.95rem; filter: saturate(0.85); }

.bcb-slots__count {
  margin-left: auto;
  background: var(--sb-mist);
  color: var(--sb-muted);
  border-radius: var(--sb-radius-pill);
  padding: 1px 9px;
  font-size: 0.66rem;
  letter-spacing: 0;
}

/* Even, tidy grid of equal-width time chips */
.bcb-slots__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: var(--sb-space-2);
}

.bcb-slot-pill {
  width: 100%;
  padding: var(--sb-space-3) var(--sb-space-2);
  border-radius: var(--sb-radius-card);
  border: 1.5px solid var(--sb-line);
  background: var(--sb-surface);
  box-shadow: var(--sb-shadow-xs);
  color: var(--sb-ink);
  font-variant-numeric: tabular-nums;
  font-size: var(--sb-text-sm);
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: background var(--sb-dur-fast), border-color var(--sb-dur-fast),
              color var(--sb-dur-fast), transform var(--sb-dur-fast), box-shadow var(--sb-dur-fast);
}

.bcb-slot-pill:hover {
  border-color: var(--sb-aubergine);
  background: color-mix(in srgb, var(--sb-aubergine) 7%, var(--sb-surface));
  transform: translateY(-2px);
  box-shadow: var(--sb-shadow-sm);
}

.bcb-slot-pill--selected {
  background: var(--sb-aubergine);
  border-color: var(--sb-aubergine);
  color: var(--sb-porcelain);
  box-shadow: var(--sb-shadow-brand);
}

/* Taken / already-booked — visible but not selectable */
.bcb-slot-pill--taken {
  background: var(--sb-mist);
  border-color: transparent;
  color: var(--sb-muted);
  box-shadow: none;
  cursor: not-allowed;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  opacity: 0.7;
}
.bcb-slot-pill--taken:hover { transform: none; box-shadow: none; }

/* Legend */
.bcb-slots__legend {
  display: flex;
  align-items: center;
  gap: var(--sb-space-1);
  font-size: var(--sb-text-xs);
  color: var(--sb-muted);
  margin-top: var(--sb-space-2);
}
.bcb-slots__legend-dot {
  width: 12px; height: 12px;
  border-radius: 4px;
  display: inline-block;
  vertical-align: middle;
}
.bcb-slots__legend-dot--free  { background: var(--sb-surface); border: 1.5px solid var(--sb-line); }
.bcb-slots__legend-dot--taken { background: var(--sb-mist); }

/* Empty state */
.bcb-slots-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sb-space-2);
  padding: var(--sb-space-7) var(--sb-space-5);
  background: var(--sb-surface);
  border: 1px solid var(--sb-line);
  border-radius: var(--sb-radius-card);
  box-shadow: var(--sb-shadow-sm);
  margin-top: var(--sb-space-4);
  color: var(--sb-ink);
}

.bcb-slots-empty__icon {
  width: 48px;
  height: 48px;
  color: var(--sb-champagne);
}
.bcb-slots-empty__icon svg { width: 100%; height: 100%; }
.bcb-slots-empty__hint { font-size: var(--sb-text-sm); color: var(--sb-muted); }

/* ─── Slot-hold timer ────────────────────────────────────── */
.bcb-slot-timer {
  display: flex;
  align-items: center;
  gap: var(--sb-space-3);
  padding: var(--sb-space-4) var(--sb-space-5);
  background: linear-gradient(120deg, color-mix(in srgb, var(--sb-champagne) 14%, var(--sb-surface)), var(--sb-surface));
  border: 1px solid color-mix(in srgb, var(--sb-champagne) 30%, var(--sb-line));
  border-radius: var(--sb-radius-card);
  box-shadow: var(--sb-shadow-sm);
  margin-top: var(--sb-space-4);
}

.bcb-slot-timer__ring {
  position: relative;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}

.bcb-slot-timer__ring svg {
  transform: rotate(-90deg);
  width: 100%;
  height: 100%;
}

.bcb-slot-timer__track {
  fill: none;
  stroke: var(--sb-line);
  stroke-width: 3;
}

.bcb-slot-timer__fill {
  fill: none;
  stroke: var(--sb-champagne);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 113.1; /* 2π × 18 */
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1s linear, stroke 0.5s;
}

.bcb-slot-timer--urgent .bcb-slot-timer__fill {
  stroke: var(--sb-warning);
  animation: bcb-timer-pulse 1.2s ease-in-out infinite;
}

@keyframes bcb-timer-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.5; }
}

@media (prefers-reduced-motion: reduce) {
  .bcb-slot-timer--urgent .bcb-slot-timer__fill { animation: none; }
  .bcb-slot-timer__fill { transition: none; }
}

.bcb-slot-timer__count {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--sb-text-xs);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--sb-ink);
}

.bcb-slot-timer__label {
  font-size: var(--sb-text-sm);
}

/* ─── Form inputs (Step 5) ───────────────────────────────── */
.bcb-form {
  display: flex;
  flex-direction: column;
  gap: var(--sb-space-4);
}

.bcb-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sb-space-4);
}

@media (max-width: 480px) {
  .bcb-form-row { grid-template-columns: 1fr; }
}

.bcb-field {
  display: flex;
  flex-direction: column;
  gap: var(--sb-space-2);
}

.bcb-field label {
  font-size: var(--sb-text-sm);
  font-weight: 600;
}

.bcb-input,
.bcb-textarea {
  width: 100%;
  background: var(--sb-surface);
  border: 1.5px solid var(--sb-line);
  border-radius: var(--sb-radius-card);
  padding: var(--sb-space-4);
  font-family: var(--sb-font-body);
  font-size: var(--sb-text-body);
  color: var(--sb-ink);
  outline: none;
  box-shadow: var(--sb-shadow-xs);
  transition: border-color var(--sb-dur-fast), box-shadow var(--sb-dur-fast);
}

.bcb-input::placeholder,
.bcb-textarea::placeholder { color: color-mix(in srgb, var(--sb-ink) 38%, transparent); }

.bcb-input:focus,
.bcb-textarea:focus {
  border-color: var(--sb-aubergine);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sb-aubergine) 15%, transparent);
}

.bcb-input.error,
.bcb-textarea.error {
  border-color: var(--sb-danger);
}

.bcb-field__error {
  font-size: var(--sb-text-xs);
  color: var(--sb-danger);
  min-height: 1.2em;
}

.bcb-privacy-notice {
  font-size: var(--sb-text-xs);
  color: var(--sb-muted);
  margin-top: var(--sb-space-2);
}

.bcb-privacy-notice a {
  color: var(--sb-aubergine);
}

/* ─── Treatment card ─────────────────────────────────────── */
.bcb-treatment-card {
  background: var(--sb-surface);
  border-radius: var(--sb-radius-card);
  border: 1px solid var(--sb-line);
  box-shadow: var(--sb-shadow-md);
  padding: var(--sb-space-5);
  position: relative;
  overflow: hidden;
}

/* Subtle brand accent bar at top of summary card */
.bcb-treatment-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--sb-aubergine), var(--sb-champagne));
}

.bcb-treatment-card__eyebrow {
  font-size: var(--sb-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sb-muted);
  margin-bottom: var(--sb-space-2);
}

.bcb-treatment-card__service {
  font-family: var(--sb-font-display);
  font-size: var(--sb-text-h3);
  line-height: 1.2;
  margin-bottom: var(--sb-space-4);
}

.bcb-treatment-card__divider {
  height: 1px;
  background: var(--sb-line);
  margin: var(--sb-space-4) 0;
}

.bcb-treatment-card__details {
  display: flex;
  flex-direction: column;
  gap: var(--sb-space-2);
}

.bcb-treatment-card__row {
  display: flex;
  justify-content: space-between;
  font-size: var(--sb-text-sm);
}

.bcb-treatment-card__row dt { color: var(--sb-muted); }
.bcb-treatment-card__row dd { font-weight: 500; }

.bcb-treatment-card__payment {
  margin-top: var(--sb-space-4);
  padding-top: var(--sb-space-4);
  border-top: 1px solid var(--sb-line);
}

.bcb-treatment-card__due-now {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.bcb-treatment-card__due-now strong {
  font-size: var(--sb-text-h3);
  font-variant-numeric: tabular-nums;
  color: var(--sb-aubergine);
}

.bcb-treatment-card__balance {
  display: flex;
  justify-content: space-between;
  font-size: var(--sb-text-sm);
  color: var(--sb-muted);
  margin-top: var(--sb-space-2);
}

.bcb-treatment-card__plan {
  margin-top: var(--sb-space-4);
  padding: var(--sb-space-3) var(--sb-space-4);
  background: color-mix(in srgb, var(--sb-aubergine) 8%, transparent);
  border-radius: calc(var(--sb-radius-card) - 4px);
}

.bcb-treatment-card__plan-label {
  font-size: var(--sb-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sb-aubergine);
  font-weight: 700;
  margin-bottom: var(--sb-space-2);
}

.tcr-plan-schedule {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--sb-space-1);
}

.tcr-plan-schedule li {
  font-size: var(--sb-text-xs);
  font-variant-numeric: tabular-nums;
  display: flex;
  justify-content: space-between;
}

/* ─── Review summary (Step 6) ────────────────────────────── */
.bcb-review {
  display: flex;
  flex-direction: column;
  gap: var(--sb-space-4);
}

.bcb-review-section {
  background: var(--sb-surface);
  border: 1px solid var(--sb-line);
  box-shadow: var(--sb-shadow-sm);
  border-radius: var(--sb-radius-card);
  padding: var(--sb-space-5);
}

.bcb-review-section__heading {
  font-size: var(--sb-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sb-muted);
  margin-bottom: var(--sb-space-3);
}

.bcb-review-row {
  display: flex;
  justify-content: space-between;
  padding: var(--sb-space-2) 0;
  border-bottom: 1px solid var(--sb-line);
  font-size: var(--sb-text-sm);
}

.bcb-review-row:last-child { border-bottom: none; }
.bcb-review-row dt { color: var(--sb-muted); }
.bcb-review-row dd { font-weight: 500; }

/* ─── Stripe Payment Element wrapper ─────────────────────── */
#bcb-payment-element {
  margin-top: var(--sb-space-4);
  padding: var(--sb-space-5);
  background: var(--sb-surface);
  border-radius: var(--sb-radius-card);
  border: 1px solid var(--sb-line);
  box-shadow: var(--sb-shadow-sm);
}

/* ─── Buttons ─────────────────────────────────────────────── */
.bcb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sb-space-2);
  padding: var(--sb-space-4) var(--sb-space-7);
  border-radius: var(--sb-radius-button);
  border: none;
  font-family: var(--sb-font-body);
  font-size: var(--sb-text-body);
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition:
    transform var(--sb-dur-fast) var(--sb-ease-out),
    box-shadow var(--sb-dur-mid) var(--sb-ease-out),
    background var(--sb-dur-fast);
  text-decoration: none;
}

.bcb-btn--primary {
  background: var(--sb-aubergine);
  color: var(--sb-porcelain);
  box-shadow: var(--sb-shadow-brand);
}

.bcb-btn--primary:hover {
  transform: translateY(-2px);
  background: color-mix(in srgb, var(--sb-aubergine) 90%, #000);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--sb-aubergine) 38%, transparent);
}

.bcb-btn--primary:active { transform: translateY(0); }

.bcb-btn--secondary {
  background: var(--sb-surface);
  color: var(--sb-aubergine);
  border: 1.5px solid color-mix(in srgb, var(--sb-aubergine) 40%, var(--sb-line));
  box-shadow: var(--sb-shadow-xs);
}

.bcb-btn--secondary:hover {
  border-color: var(--sb-aubergine);
  box-shadow: var(--sb-shadow-sm);
  transform: translateY(-1px);
}

.bcb-btn--ghost {
  background: transparent;
  color: var(--sb-muted);
  padding-left: 0;
}

.bcb-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
}

.bcb-btn__spinner {
  width: 18px;
  height: 18px;
  border: 2.5px solid color-mix(in srgb, currentColor 30%, transparent);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: bcb-spin 0.7s linear infinite;
}

@keyframes bcb-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .bcb-btn__spinner { animation: none; opacity: 0.6; }
}

/* ─── Step navigation ────────────────────────────────────── */
.bcb-step-nav {
  display: flex;
  align-items: center;
  gap: var(--sb-space-4);
  margin-top: var(--sb-space-6);
  flex-wrap: wrap;
}

/* ─── Confirmation screen (Step 7) ──────────────────────── */
.bcb-confirmation {
  text-align: center;
  padding: var(--sb-space-7) var(--sb-space-5);
  background: var(--sb-surface);
  border: 1px solid var(--sb-line);
  border-radius: var(--sb-radius-card);
  box-shadow: var(--sb-shadow-md);
  position: relative;
  overflow: hidden;
}

.bcb-confirmation::before {
  content: '';
  position: absolute;
  top: -40%; left: 50%;
  width: 480px; height: 360px;
  transform: translateX(-50%);
  background: var(--sb-glow);
  opacity: 0.6;
  pointer-events: none;
}

.bcb-confirmation > * { position: relative; z-index: 1; }

.bcb-confirmation__icon {
  width: 76px;
  height: 76px;
  background: linear-gradient(140deg, color-mix(in srgb, var(--sb-success) 22%, var(--sb-surface)), color-mix(in srgb, var(--sb-success) 10%, var(--sb-surface)));
  border: 1px solid color-mix(in srgb, var(--sb-success) 30%, transparent);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--sb-space-5);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--sb-success) 25%, transparent);
  animation: bcb-pop var(--sb-dur-slow) var(--sb-ease-out);
}

@keyframes bcb-pop {
  from { transform: scale(0.6); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .bcb-confirmation__icon { animation: none; }
}

.bcb-confirmation__icon svg {
  width: 36px;
  height: 36px;
  stroke: var(--sb-success);
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bcb-confirmation__ref {
  font-size: var(--sb-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--sb-muted);
  margin-top: var(--sb-space-3);
}

.bcb-confirmation__details {
  max-width: 480px;
  margin: var(--sb-space-5) auto;
  text-align: left;
}

.bcb-confirmation__rebook {
  margin-top: var(--sb-space-6);
}

/* ─── Inline messages ────────────────────────────────────── */
.bcb-message {
  padding: var(--sb-space-3) var(--sb-space-4);
  border-radius: var(--sb-radius-card);
  font-size: var(--sb-text-sm);
  margin-top: var(--sb-space-4);
}

.bcb-message--error {
  background: color-mix(in srgb, var(--sb-danger) 12%, transparent);
  color: var(--sb-danger);
  border: 1px solid color-mix(in srgb, var(--sb-danger) 30%, transparent);
}

.bcb-message--warning {
  background: color-mix(in srgb, var(--sb-warning) 12%, transparent);
  color: var(--sb-warning);
  border: 1px solid color-mix(in srgb, var(--sb-warning) 30%, transparent);
}

.bcb-message--success {
  background: color-mix(in srgb, var(--sb-success) 12%, transparent);
  color: var(--sb-success);
  border: 1px solid color-mix(in srgb, var(--sb-success) 30%, transparent);
}

/* ─── Loading spinner ────────────────────────────────────── */
.bcb-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sb-space-4);
  padding: var(--sb-space-7) 0;
  color: var(--sb-muted);
}

.bcb-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--sb-line);
  border-top-color: var(--sb-aubergine);
  border-radius: 50%;
  animation: bcb-spin 0.8s linear infinite;
}

/* ─── Status badges ──────────────────────────────────────── */
.bcb-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: var(--sb-radius-pill);
  font-size: var(--sb-text-xs);
  font-weight: 600;
  text-transform: capitalize;
}

.bcb-status-badge--confirmed      { background: color-mix(in srgb, var(--sb-success) 15%, transparent); color: var(--sb-success); }
.bcb-status-badge--pending_payment{ background: color-mix(in srgb, var(--sb-warning) 15%, transparent); color: var(--sb-warning); }
.bcb-status-badge--completed      { background: color-mix(in srgb, #2D6A9F 15%, transparent); color: #2D6A9F; }
.bcb-status-badge--cancelled      { background: color-mix(in srgb, var(--sb-muted) 20%, transparent); color: var(--sb-muted); }
.bcb-status-badge--no_show        { background: color-mix(in srgb, var(--sb-danger) 15%, transparent); color: var(--sb-danger); }

/* ─── Customer panel ─────────────────────────────────────── */
.bcb-customer-panel {
  max-width: 760px;
  margin: 0 auto;
  padding: var(--sb-space-6) var(--sb-space-5) var(--sb-space-8);
  background:
    radial-gradient(900px 360px at 0% -8%, color-mix(in srgb, var(--sb-blush) 22%, transparent), transparent 60%),
    var(--sb-porcelain);
  border-radius: var(--sb-space-5);
}

.bcb-panel-gate {
  max-width: 460px;
  margin: 0 auto;
  text-align: center;
  padding: var(--sb-space-7) var(--sb-space-6);
  background: var(--sb-surface);
  border: 1px solid var(--sb-line);
  border-radius: var(--sb-radius-card);
  box-shadow: var(--sb-shadow-md);
}

.bcb-panel-gate h2 {
  font-family: var(--sb-font-display);
  font-size: var(--sb-text-h2);
  margin-bottom: var(--sb-space-3);
}

.bcb-panel-access-form {
  display: flex;
  flex-direction: column;
  gap: var(--sb-space-3);
  margin-top: var(--sb-space-5);
  text-align: left;
}

.bcb-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--sb-space-5);
}

.bcb-panel-logout {
  background: none;
  border: none;
  color: var(--sb-muted);
  font-size: var(--sb-text-sm);
  cursor: pointer;
  text-decoration: underline;
}

/* Booking list items */
.bcb-booking-item {
  display: flex;
  gap: var(--sb-space-4);
  align-items: flex-start;
  padding: var(--sb-space-5);
  background: var(--sb-surface);
  border: 1px solid var(--sb-line);
  box-shadow: var(--sb-shadow-sm);
  border-radius: var(--sb-radius-card);
  margin-bottom: var(--sb-space-3);
  transition: box-shadow var(--sb-dur-mid), transform var(--sb-dur-fast);
}

.bcb-booking-item:hover {
  box-shadow: var(--sb-shadow-md);
  transform: translateY(-1px);
}

.bcb-booking-item__date-block {
  background: linear-gradient(150deg, color-mix(in srgb, var(--sb-aubergine) 8%, var(--sb-surface)), var(--sb-surface));
  border: 1px solid var(--sb-line);
  border-radius: calc(var(--sb-radius-card) - 6px);
  padding: var(--sb-space-3);
  text-align: center;
  min-width: 56px;
}

.bcb-booking-item__day {
  display: block;
  font-family: var(--sb-font-display);
  font-size: 1.75rem;
  line-height: 1;
}

.bcb-booking-item__month {
  display: block;
  font-size: var(--sb-text-xs);
  text-transform: uppercase;
  color: var(--sb-muted);
}

.bcb-booking-item__body { flex: 1; }
.bcb-booking-item__service { font-weight: 600; }
.bcb-booking-item__meta { font-size: var(--sb-text-sm); color: var(--sb-muted); }

.bcb-booking-item__actions {
  display: flex;
  gap: var(--sb-space-2);
  margin-top: var(--sb-space-3);
  flex-wrap: wrap;
}

/* ─── Staff panel ────────────────────────────────────────── */
.bcb-staff-panel {
  max-width: 860px;
  margin: 0 auto;
  padding: var(--sb-space-6) var(--sb-space-5) var(--sb-space-8);
  background:
    radial-gradient(900px 360px at 100% -8%, color-mix(in srgb, var(--sb-champagne) 14%, transparent), transparent 60%),
    var(--sb-porcelain);
  border-radius: var(--sb-space-5);
}

.bcb-staff-panel__header {
  margin-bottom: var(--sb-space-6);
}

.bcb-staff-panel__header h2 {
  font-family: var(--sb-font-display);
  font-size: var(--sb-text-h2);
}

.bcb-timeline {
  display: flex;
  flex-direction: column;
  gap: var(--sb-space-2);
}

.bcb-timeline__item {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: var(--sb-space-3);
  align-items: start;
  padding: var(--sb-space-4) var(--sb-space-5);
  background: var(--sb-surface);
  border: 1px solid var(--sb-line);
  box-shadow: var(--sb-shadow-xs);
  border-radius: var(--sb-radius-card);
  border-left: 4px solid var(--sb-line);
  transition: box-shadow var(--sb-dur-mid), transform var(--sb-dur-fast);
}

.bcb-timeline__item:hover {
  box-shadow: var(--sb-shadow-sm);
  transform: translateX(2px);
}

.bcb-timeline__item--confirmed      { border-left-color: var(--sb-success); }
.bcb-timeline__item--pending_payment{ border-left-color: var(--sb-warning); }
.bcb-timeline__item--completed      { border-left-color: #2D6A9F; }
.bcb-timeline__item--cancelled      { border-left-color: var(--sb-muted); opacity: 0.6; }
.bcb-timeline__item--no_show        { border-left-color: var(--sb-danger); }

.bcb-timeline__time {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: var(--sb-text-sm);
  padding-top: 2px;
}

.bcb-timeline__service { font-weight: 600; }
.bcb-timeline__customer { font-size: var(--sb-text-sm); color: var(--sb-muted); }
.bcb-timeline__notes {
  font-size: var(--sb-text-xs);
  color: var(--sb-muted);
  margin-top: var(--sb-space-1);
  font-style: italic;
}

.bcb-timeline__duration {
  font-size: var(--sb-text-xs);
  color: var(--sb-muted);
  white-space: nowrap;
}

/* ─── Utility ────────────────────────────────────────────── */
[hidden] { display: none !important; }

.bcb-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ─── Responsive: mobile treatment card sticky bar ──────── */
@media (max-width: 767px) {
  .bcb-treatment-card {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: var(--sb-radius-card) var(--sb-radius-card) 0 0;
    box-shadow: 0 -4px 24px color-mix(in srgb, var(--sb-ink) 10%, transparent);
    z-index: 100;
    transform: translateY(calc(100% - 72px));
    transition: transform var(--sb-dur-slow) var(--sb-ease-out);
  }

  .bcb-treatment-card--expanded {
    transform: translateY(0);
  }

  .bcb-treatment-card__toggle {
    text-align: center;
    padding: var(--sb-space-3) 0;
    cursor: pointer;
  }

  .bcb-treatment-card__toggle-icon {
    display: inline-block;
    width: 32px;
    height: 3px;
    background: var(--sb-line);
    border-radius: var(--sb-radius-pill);
  }
}