/* simpro-booking — generated 2026-05-08 02:30:53 */
:root {
  /* Brand */
  --sb-clay:        #1A1916;
  --sb-clay-light:  #B09A6E;
  --sb-clay-pale:   #F5F3EF;

  /* Accent */
  --sb-teal:        #B09A6E;
  --sb-teal-pale:   #F5F3EF;

  /* Neutral */
  --sb-ink:         #1A1916;
  --sb-stone:       #6B6560;
  --sb-dust:        #8A8278;
  --sb-chalk:       #E8E4DE;
  --sb-linen:       #F5F3EF;
  --sb-paper:       #FAFAF8;
  --sb-white:       #FFFFFF;

  /* Semantic */
  --sb-success:     #5C6B4E;
  --sb-success-bg:  #EFF0ED;
  --sb-error:       #8C4A3F;
  --sb-error-bg:    #F4EDEC;
  --sb-warning:     #8C6F3D;
  --sb-warning-bg:  #F4F1EC;
  --sb-info:        #12120F;
  --sb-info-bg:     #F5F3EF;

  /* Typography */
  --sb-font-display: 'Cormorant Garamond', Georgia, serif;
  --sb-font-ui:      'Montserrat', system-ui, sans-serif;

  /* Type Scale (base: 14px) */
  --sb-text-xs:    10.5px;
  --sb-text-sm:    12.25px;
  --sb-text-base:  14px;
  --sb-text-lg:    15.75px;
  --sb-text-xl:    17.5px;
  --sb-text-2xl:   21px;
  --sb-text-3xl:   26.25px;

  /* Spacing */
  --sb-space-1:  0.25rem;
  --sb-space-2:  0.5rem;
  --sb-space-3:  0.75rem;
  --sb-space-4:  1rem;
  --sb-space-5:  1.25rem;
  --sb-space-6:  1.5rem;
  --sb-space-8:  2rem;
  --sb-space-10: 2.5rem;
  --sb-space-12: 3rem;

  /* Radius */
  --sb-radius-sm:   1px;
  --sb-radius-md:   2px;
  --sb-radius-lg:   3px;
  --sb-radius-xl:   2px;
  --sb-radius-pill: 9999px;

  /* Shadows */
  --sb-shadow-sm: 0 1px 3px rgba(26,25,22,0.08), 0 1px 2px rgba(26,25,22,0.04);
  --sb-shadow-md: 0 4px 12px rgba(26,25,22,0.10), 0 2px 4px rgba(26,25,22,0.06);
  --sb-shadow-lg: 0 12px 32px rgba(26,25,22,0.12), 0 4px 8px rgba(26,25,22,0.06);
  --sb-shadow-focus: 0 0 0 3px rgba(26,25,22,0.28);

  /* Transitions */
  --sb-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --sb-duration-fast: 120ms;
  --sb-duration-base: 200ms;
  --sb-duration-slow: 350ms;
}
/* ============================================================
   SIMPRO BOOKING — RightFit™ v5 Component Styles (v1.5.0 — Phase 2A)

   References --sb-* tokens from the generated :root block.
   Read by Settings::get_component_css() and appended to slot-picker.css.

   Brand rules (from v5 spec, do not weaken):
   - 0.5px borders throughout. No 1px unless explicitly featured (rare).
   - 2px border-radius cap. 4px maximum on any one element.
   - No gradients. No drop shadows except 0 0 0 Npx focus rings.
   - Aged Brass (--sb-teal in token form) is accent ONLY — never a fill
     larger than a 5px dot or a 1px rule.
   - Cormorant Garamond (--sb-font-display) for display only — never on
     buttons, labels, or body copy.
   - Montserrat (--sb-font-ui) for everything functional.
   ============================================================ */

/* ============================================================
   1. Base reset (scoped to .sb-wrap)
   ============================================================ */
.sb-wrap *,
.sb-wrap *::before,
.sb-wrap *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.sb-wrap {
  font-family: var(--sb-font-ui);
  font-size: 13px;
  color: var(--sb-stone);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.sb-wrap [hidden] {
  /* No !important — the UA stylesheet already maps [hidden] to display:none
     at zero specificity. Keeping this rule (without !important) is purely a
     belt-and-braces guarantee against any class rule that might accidentally
     un-hide a [hidden] element via display:flex or similar. v1.7.2: the
     !important was dropped because it was masking a JS bug — code that did
     `el.style.display = ''` to show an element couldn't beat the !important,
     and the [hidden] attribute kept the element invisible. The fix is to
     toggle the attribute itself via the setHidden() helper in slot-picker.js. */
  display: none;
}
/* The button + input + a resets are wrapped in :where() so they have
   ZERO specificity (0,0,0). Without this, `.sb-wrap button` would
   evaluate to 0,1,1 and silently override any single-class button
   rule (`.sb-cal__nav-btn`, `.sb-optional-trigger`, etc.) — stripping
   their borders, backgrounds, and cursor declarations. With :where()
   any class beats the reset, which is the intuitive behaviour. */
:where(.sb-wrap button) {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}
:where(.sb-wrap input),
:where(.sb-wrap textarea),
:where(.sb-wrap select) {
  font: inherit;
  color: inherit;
}
:where(.sb-wrap a) {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 0.5px;
}
.sb-wrap a:hover { color: var(--sb-teal); }

.sb-link {
  color: var(--sb-teal);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 0.5px;
}
.sb-link:hover { color: var(--sb-stone); }

/* Inline icon helper. Inherits stroke colour via currentColor. */
.sb-icon {
  display: inline-block;
  flex-shrink: 0;
  vertical-align: middle;
}

/* ============================================================
   2. Wrapper & layout shell
   ============================================================ */
.sb-booker {
  background: var(--sb-paper);
  color: var(--sb-stone);
  /* Fluid: fill whatever container the shortcode sits inside.
     No max-width per the listapage.au override of the spec's 960px cap. */
  width: 100%;
  border: 0.5px solid var(--sb-chalk);
  border-radius: 2px;
  overflow: hidden;
}
.sb-booker__layout {
  display: flex;
  align-items: stretch;
  min-height: 540px;
}

/* ============================================================
   3. Sidebar (Ebony, fixed 270px on desktop, top bar on mobile)
   ============================================================ */
.sb-sidebar {
  flex: 0 0 270px;
  width: 270px;
  background: var(--sb-clay); /* Ebony in brand-lock; primary-colour in custom */
  color: #C8B48A; /* Brass Light — sidebar body text on dark */
  padding: 40px 28px;
  display: flex;
  flex-direction: column;
}

.sb-sidebar__brand {
  font-family: var(--sb-font-ui);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sb-teal); /* Aged Brass */
  line-height: 1.2;
}

.sb-sidebar__title {
  font-family: var(--sb-font-display);
  font-weight: 300;
  font-size: 26px;
  line-height: 1.15;
  color: #F0EDE6; /* Near Linen */
  letter-spacing: 0;
  margin-top: 14px;
}
.sb-sidebar__title-mark {
  font-style: italic;
  color: var(--sb-teal);
  font-weight: 300;
}

.sb-sidebar__rule {
  border: 0;
  width: 28px;
  height: 1px;
  background: var(--sb-teal);
  margin: 32px 0;
}

.sb-sidebar__meta {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 0;
  margin: 0;
}
.sb-sidebar__meta-item {
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 12px;
  align-items: start;
  color: var(--sb-teal);
}
.sb-sidebar__meta-item .sb-icon {
  margin-top: 1px;
}
.sb-sidebar__meta-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.sb-sidebar__meta-label {
  font-family: var(--sb-font-ui);
  font-weight: 400;
  font-size: 11px;
  color: #8A8278; /* Smoke — sidebar muted */
  line-height: 1.3;
}
.sb-sidebar__meta-value {
  font-family: var(--sb-font-ui);
  font-weight: 300;
  font-size: 12px;
  color: #C8B48A; /* Brass Light */
  line-height: 1.3;
}

/* Bottom block — pushes founding badge / booking summary to the bottom */
.sb-sidebar__bottom {
  margin-top: auto;
  padding-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Founding (Step 1) ---------------------------------------- */
.sb-sidebar__founding-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border: 0.5px solid rgba(176, 154, 110, 0.4); /* Aged Brass @ 40% */
  border-radius: 2px;
  background: transparent;
  align-self: flex-start;
}
.sb-sidebar__founding-dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--sb-teal);
  flex-shrink: 0;
}
.sb-sidebar__founding-label {
  font-family: var(--sb-font-ui);
  font-weight: 600;
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sb-teal);
}
.sb-sidebar__founding-note {
  font-family: var(--sb-font-ui);
  font-weight: 300;
  font-size: 10px;
  color: #8A8278; /* Smoke on dark */
  line-height: 1.7;
  margin-top: 4px;
}

/* Your booking summary (Steps 2/3) ------------------------- */
.sb-sidebar__summary {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sb-sidebar__summary-label {
  font-family: var(--sb-font-ui);
  font-weight: 600;
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sb-teal);
  margin-bottom: 4px;
}
.sb-sidebar__summary-date {
  font-family: var(--sb-font-display);
  font-weight: 300;
  font-size: 18px;
  color: #F0EDE6; /* Near Linen */
  line-height: 1.25;
}
.sb-sidebar__summary-time {
  font-family: var(--sb-font-ui);
  font-weight: 300;
  font-size: 12px;
  color: #C8B48A; /* Brass Light */
  margin-top: 2px;
}
.sb-sidebar__summary-note {
  font-family: var(--sb-font-ui);
  font-weight: 300;
  font-size: 10px;
  color: #8A8278; /* Smoke */
  line-height: 1.5;
  margin-top: 8px;
}
.sb-sidebar__change {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: 0.5px solid rgba(176, 154, 110, 0.35);
  border-radius: 2px;
  background: transparent;
  font-family: var(--sb-font-ui);
  font-weight: 600;
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sb-teal);
  cursor: pointer;
  margin-top: 12px;
  align-self: flex-start;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.sb-sidebar__change:hover {
  border-color: var(--sb-teal);
  color: #C8B48A;
}

/* ============================================================
   4. Main panel
   ============================================================ */
.sb-main {
  flex: 1;
  background: var(--sb-paper);
  display: flex;
  flex-direction: column;
  min-width: 0; /* allow shrink */
}

/* ============================================================
   5. Step indicator (3 steps — Select / Details / Confirm)
   ============================================================ */
.sb-steps {
  display: flex;
  align-items: center;
  height: 64px;
  padding: 0 28px;
  background: transparent;
  border-bottom: 0.5px solid var(--sb-chalk);
}
.sb-step {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.sb-step__num {
  position: relative;
  width: 22px;
  height: 22px;
  border: 0.5px solid var(--sb-chalk);
  border-radius: 50%;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.sb-step__num-text {
  font-family: var(--sb-font-ui);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.04em;
  color: #8A8278; /* Smoke */
}
.sb-step__num-tick { display: none; color: var(--sb-teal); }

.sb-step__label {
  font-family: var(--sb-font-ui);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #8A8278; /* Smoke — inactive */
  transition: color 0.2s ease;
}

.sb-step__line {
  flex: 0 0 32px;
  height: 0.5px;
  background: var(--sb-chalk);
  margin: 0 14px;
  transition: background-color 0.2s ease;
}

/* States */
.sb-step--active .sb-step__num {
  background: var(--sb-clay); /* Ebony fill */
  border-color: var(--sb-clay);
}
.sb-step--active .sb-step__num-text {
  color: #F0EDE6; /* Near Linen on Ebony */
}
.sb-step--active .sb-step__label {
  color: #3A3530; /* Smoked Oak */
}

.sb-step--done .sb-step__num {
  background: transparent;
  border-color: var(--sb-teal);
}
.sb-step--done .sb-step__num-text { display: none; }
.sb-step--done .sb-step__num-tick { display: inline-block; }
.sb-step--done .sb-step__label { color: var(--sb-teal); }

.sb-step__line--done {
  background: var(--sb-teal);
}

/* ============================================================
   6. Step panel base
   ============================================================ */
.sb-step-panel {
  flex: 1;
  min-width: 0;
}
.sb-step-panel--select {
  display: flex;
  flex-direction: column;
}

/* ============================================================
   7. Calendar + Slot panel (Step 1)
   ============================================================ */
.sb-calendar-slots {
  display: flex;
  flex: 1;
  align-items: stretch;
}

/* Calendar panel */
.sb-cal {
  flex: 1;
  padding: 32px 36px 24px;
  border-right: 0.5px solid var(--sb-chalk);
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.sb-cal__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.sb-cal__month {
  font-family: var(--sb-font-display);
  font-weight: 300;
  font-size: 22px;
  color: var(--sb-ink);
  letter-spacing: 0;
}
.sb-cal__nav-btns {
  display: inline-flex;
  gap: 4px;
}
.sb-cal__nav-btn {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0.5px solid var(--sb-chalk);
  border-radius: 2px;
  background: transparent;
  color: #8A8278; /* Smoke */
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.sb-cal__nav-btn:hover:not(:disabled) {
  border-color: var(--sb-teal);
  color: var(--sb-teal);
}
.sb-cal__nav-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.sb-cal__nav-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(176, 154, 110, 0.25);
}

/* Day-of-week header row */
.sb-cal__dows {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  margin-bottom: 6px;
}
.sb-cal__dows > div {
  font-family: var(--sb-font-ui);
  font-weight: 600;
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #8A8278; /* Smoke */
  padding: 6px 0;
}

/* Day-cell grid */
.sb-cal__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0;
}
.sb-cal__cell {
  position: relative;
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: var(--sb-font-ui);
  font-weight: 300;
  font-size: 13px;
  color: #3A3530; /* Smoked Oak — available */
  border: 0.5px solid transparent;
  border-radius: 2px;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.sb-cal__cell--empty {
  visibility: hidden;
  cursor: default;
}
.sb-cal__cell:hover:not(.sb-cal__cell--past):not(.sb-cal__cell--weekend):not(.sb-cal__cell--no-slots):not(.sb-cal__cell--empty) {
  border-color: var(--sb-teal);
}
.sb-cal__cell--past,
.sb-cal__cell--weekend,
.sb-cal__cell--no-slots {
  color: #C8C4BE; /* inactive */
  pointer-events: none;
  cursor: not-allowed;
}
.sb-cal__cell--today > span {
  /* Optional subtle today underline using a 0.5px brass mark */
  text-decoration: underline;
  text-decoration-color: var(--sb-teal);
  text-decoration-thickness: 0.5px;
  text-underline-offset: 2px;
}
.sb-cal__cell--selected {
  background: var(--sb-clay); /* Ebony */
  color: #F0EDE6; /* Near Linen */
  border-color: var(--sb-clay);
}
.sb-cal__cell--selected:hover {
  border-color: var(--sb-clay);
}

/* Availability dots — 3px Aged Brass below the date number */
.sb-cal__avail-dots {
  display: flex;
  gap: 3px;
  margin-top: 4px;
  height: 3px;
}
.sb-cal__avail-dots > span {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--sb-teal);
}
/* Limited variant — single dot at 40% opacity per spec; we honour the
   visual intent on whatever count the JS produces. */
.sb-cal__avail-dots--low > span {
  opacity: 0.4;
}
.sb-cal__cell--selected .sb-cal__avail-dots > span {
  background: var(--sb-teal);
  opacity: 1;
}

/* Legend */
.sb-cal__legend {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-top: 16px;
  margin-top: 16px;
  border-top: 0.5px solid var(--sb-chalk);
}
.sb-cal__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--sb-font-ui);
  font-weight: 300;
  font-size: 10px;
  color: var(--sb-stone); /* Walnut */
}
.sb-cal__legend-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sb-teal);
}
.sb-cal__legend-dot--low { opacity: 0.4; }
.sb-cal__legend-dot--unavail {
  background: transparent;
  border: 0.5px solid #C8C4BE;
}

/* Timezone note */
.sb-cal__tz {
  font-family: var(--sb-font-ui);
  font-weight: 300;
  font-size: 10px;
  color: #8A8278; /* Smoke */
  margin-top: 8px;
}

/* Slot panel */
.sb-times {
  flex: 0 0 220px;
  width: 220px;
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
}
.sb-times__empty {
  font-family: var(--sb-font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 12px;
  color: #8A8278; /* Smoke */
  line-height: 1.55;
}
.sb-times__header {
  margin-bottom: 12px;
}
.sb-times__date {
  font-family: var(--sb-font-display);
  font-weight: 300;
  font-size: 20px;
  color: var(--sb-ink);
  line-height: 1.2;
}
.sb-times__count {
  font-family: var(--sb-font-ui);
  font-weight: 300;
  font-size: 10px;
  color: #8A8278;
  margin-top: 4px;
}
.sb-times__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Slot card. JS attaches .sb-time-btn--selected to the chosen one; the
   Continue CTA at the foot of the rail (.sb-times__continue) is what
   commits the selection — so the slot card itself is purely a select
   target with no inline confirm button. v1.7.4: explicit flex column
   so external CSS frameworks (ACSS, Bricks Builder) can't accidentally
   make the time/duration lines render inline horizontally. v1.7.5:
   explicit width / align-self / text-align so the selected variant
   keeps the same dimensions as the unselected ones (some frameworks
   apply width:auto or align-self:center to elements with a "selected"
   modifier — these declarations ensure that doesn't happen here). */
.sb-time-btn {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  align-self: stretch;
  width: 100%;
  box-sizing: border-box;
  text-align: left;
  border: 0.5px solid var(--sb-chalk);
  border-radius: 2px;
  padding: 14px 16px;
  background: transparent;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.sb-time-btn:hover { border-color: var(--sb-teal); }
.sb-time-btn:focus,
.sb-time-btn:focus-visible {
  outline: none;
  /* v1.7.6 — match unselected geometry exactly. box-shadow is outside
     the layout box so it doesn't affect height. */
  box-shadow: 0 0 0 2px rgba(176, 154, 110, 0.18);
}
/* v1.7.6 — Selected state. Only colours change; padding, border-width,
   box-sizing, and transform are locked with !important to defend against
   external CSS (Bricks Builder / ACSS / host theme) that may apply
   different values to elements with a "--selected" modifier or :active
   state. The 3px height shrink Gerson observed in v1.7.5 was almost
   certainly an external rule reducing padding by 1-2px on the active
   state; pinning padding here makes the geometry transition-stable. */
.sb-time-btn--selected {
  border-color: var(--sb-teal);
  background: rgba(176, 154, 110, 0.06);
  border-width: 0.5px !important;
  border-style: solid !important;
  padding: 14px 16px !important;
  transform: none !important;
}
.sb-time-btn:active {
  /* Click hold — match selected geometry, no scale, no padding shift. */
  padding: 14px 16px !important;
  transform: none !important;
}
.sb-time-btn__time {
  font-family: var(--sb-font-ui);
  font-weight: 400;
  font-size: 12px;
  color: #3A3530; /* Smoked Oak */
  line-height: 1.4;
}
.sb-time-btn__duration {
  font-family: var(--sb-font-ui);
  font-weight: 300;
  font-size: 10px;
  color: #8A8278; /* Smoke */
  margin-top: 4px;
}

/* v1.7.3 — standalone Continue CTA at the foot of the slot rail.
   Hidden by default ([hidden] in template); JS shows it once a slot is
   selected. Same Ebony→Brass primary-button shape used elsewhere
   (height 44, 9px Montserrat 600, 0.22em letter-spacing). */
.sb-times__continue {
  display: block;
  width: 100%;
  height: 44px;
  margin-top: 12px;
  padding: 0 18px;
  background: var(--sb-clay);
  color: #F0EDE6; /* Near Linen */
  border: 0;
  border-radius: 2px;
  font-family: var(--sb-font-ui);
  font-weight: 600;
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.sb-times__continue:hover { background: var(--sb-teal); }
.sb-times__continue:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(176, 154, 110, 0.25);
}

/* ============================================================
   8. Buttons (shared)
   ============================================================ */
.sb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 24px;
  border-radius: 2px;
  border: 0;
  cursor: pointer;
  font-family: var(--sb-font-ui);
  font-weight: 600;
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.sb-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(176, 154, 110, 0.28);
}
.sb-btn--primary {
  background: var(--sb-clay);
  color: #F0EDE6; /* Near Linen */
}
.sb-btn--primary:hover { background: var(--sb-teal); }
.sb-btn--primary:disabled,
.sb-btn--primary[disabled] {
  background: #C8C4BE;
  cursor: not-allowed;
  color: #F0EDE6;
}
.sb-btn--secondary {
  background: transparent;
  border: 0.5px solid var(--sb-chalk);
  color: var(--sb-stone);
}
.sb-btn--secondary:hover {
  border-color: #8A8278;
  color: #3A3530;
}
.sb-btn--ghost {
  background: transparent;
  border: 0.5px solid var(--sb-chalk);
  color: var(--sb-stone);
}
.sb-btn--ghost:hover {
  border-color: #8A8278;
  color: #3A3530;
}
.sb-btn--full { width: 100%; }
.sb-btn--sm {
  height: 36px;
  padding: 0 16px;
  font-size: 9px;
}
.sb-btn--lg { height: 48px; }
.sb-btn--back { /* Step 2 back: fixed-width, no flex */
  flex: 0 0 auto;
}
.sb-btn--continue { flex: 1; } /* Step 2 next: fills remaining */

/* ============================================================
   9. Form fields (Step 2)
   ============================================================ */
.sb-form--v5 {
  padding: 32px 36px 36px;
  max-width: none;
}
.sb-form__progress {
  position: relative;
  height: 2px;
  background: var(--sb-chalk);
  border-radius: 2px;
  margin-bottom: 28px;
  overflow: hidden;
}
.sb-form__progress-fill {
  display: block;
  height: 100%;
  width: 0;
  background: var(--sb-teal);
  transition: width 0.25s ease;
}
.sb-form__head {
  margin-bottom: 24px;
}
.sb-form__title {
  font-family: var(--sb-font-display);
  font-weight: 300;
  font-size: 22px;
  color: var(--sb-ink);
  line-height: 1.2;
}
.sb-form__subtitle {
  font-family: var(--sb-font-ui);
  font-weight: 300;
  font-size: 12px;
  color: var(--sb-stone);
  margin-top: 6px;
}

/* Sectioned form blocks */
.sb-section {
  /* v1.7.4 — defensive overrides for ACSS / Bricks. ACSS targets
     :where(section:not(section section)) and applies gap +
     display:flex via container-gap variables; both would expand the
     vertical rhythm here. Forcing display:block + gap:0 neutralises
     both regardless of what tokens the host theme defines. */
  display: block;
  gap: 0;
  /* v1.7.3 — tightened from 24px to 16px (section blocks sit closer together). */
  margin-top: 16px;
}
.sb-section:first-of-type { margin-top: 0; }

.sb-section__label {
  font-family: var(--sb-font-ui);
  font-weight: 600;
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sb-teal);
  padding-bottom: 8px;
  border-bottom: 0.5px solid var(--sb-chalk);
  /* v1.7.3 — tightened from 16px to 12px (label sits closer to first grid). */
  margin-bottom: 12px;
}
.sb-section__hint {
  font-family: var(--sb-font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 11px;
  color: #8A8278; /* Smoke */
  line-height: 1.55;
  margin-top: 10px;
}

/* Form grid layouts */
.sb-form__grid {
  display: grid;
  gap: 14px;
  /* v1.7.3 — tightened from 14px to 8px (grids stack closer vertically). */
  margin-bottom: 8px;
}
.sb-form__grid--2 {
  grid-template-columns: 1fr 1fr;
}
.sb-form__grid--addr {
  grid-template-columns: 2fr 1fr 1fr;
}

.sb-field {
  display: flex;
  flex-direction: column;
}
.sb-field__label {
  position: relative;
  font-family: var(--sb-font-ui);
  font-weight: 600;
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sb-stone);
  margin-bottom: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.sb-field__dot {
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--sb-teal);
}

.sb-input {
  height: 40px;
  padding: 0 12px;
  width: 100%;
  background: var(--sb-paper); /* Plaster White */
  border: 0.5px solid var(--sb-chalk);
  border-radius: 2px;
  font-family: var(--sb-font-ui);
  font-weight: 400;
  font-size: 13px;
  color: var(--sb-ink);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.sb-input::placeholder {
  /* v1.7.5 — inherit Montserrat from the input itself, no italic.
     Was Cormorant Garamond italic until now; spec calls for the
     placeholder to match the typed-in input copy. */
  font-family: inherit;
  font-style: normal;
  font-weight: 300;
  color: #8A8278; /* Smoke */
}
.sb-input:hover { border-color: var(--sb-teal); }
.sb-input:focus {
  outline: none;
  border-color: var(--sb-teal);
  box-shadow: 0 0 0 2px rgba(176, 154, 110, 0.1);
}
.sb-input.has-val,
.sb-input:not(:placeholder-shown) {
  border-color: var(--sb-teal);
}
.sb-input--textarea {
  height: auto;
  min-height: 96px;
  padding: 10px 12px;
  resize: vertical;
  font-family: var(--sb-font-ui);
  line-height: 1.55;
}

/* Locked/readonly field — WA state */
.sb-input--locked {
  background: var(--sb-linen); /* Near Limestone */
  color: var(--sb-stone);
  cursor: not-allowed;
}
.sb-input--locked:hover { border-color: var(--sb-chalk); }
.sb-input--locked:focus {
  border-color: var(--sb-chalk);
  box-shadow: none;
}

.sb-input--error { border-color: var(--sb-error); }
.sb-field__error {
  font-family: var(--sb-font-ui);
  font-weight: 400;
  font-size: 11px;
  color: var(--sb-error);
  margin-top: 6px;
}

/* ============================================================
   10. Optional notes / file upload section (Step 2)

   Phase 2A: only the Locked state is fully styled (the trigger card
   sits disabled and the optional panel stays collapsed). Phase 2B
   adds the unlocked + expanded states and the dropzone state machine.
   ============================================================ */
.sb-section--optional {
  /* v1.7.4 — same defensive ACSS / Bricks overrides as .sb-section. */
  display: block;
  gap: 0;
  /* v1.7.3 — tightened from 24px to 16px. */
  margin-top: 16px;
}

.sb-optional-trigger {
  display: grid;
  grid-template-columns: 36px 1fr auto auto;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 16px;
  background: var(--sb-paper);
  border: 0.5px solid var(--sb-chalk);
  border-radius: 2px;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s ease, opacity 0.2s ease, background-color 0.2s ease;
}
.sb-optional-trigger:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(176, 154, 110, 0.18);
}
.sb-optional-trigger__icon {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0.5px solid var(--sb-chalk);
  border-radius: 2px;
  color: #8A8278; /* Smoke */
}
.sb-optional-trigger__text {
  display: flex;
  flex-direction: column;
  /* v1.7.5 — explicit left alignment so external CSS frameworks
     (ACSS, Bricks) can't centre the title + sub when the parent
     flex container has align-items:center applied at the row level. */
  align-items: flex-start;
  text-align: left;
  gap: 2px;
  min-width: 0;
}
.sb-optional-trigger__title {
  font-family: var(--sb-font-ui);
  font-weight: 600;
  font-size: 12px;
  color: var(--sb-ink);
  letter-spacing: 0;
  text-transform: none;
  /* v1.7.5 — defensive left alignment. */
  text-align: left;
}
.sb-optional-trigger__sub {
  font-family: var(--sb-font-ui);
  font-weight: 300;
  font-size: 11px;
  color: #8A8278; /* Smoke */
  /* v1.7.5 — defensive left alignment. */
  text-align: left;
}
.sb-optional-trigger__badge {
  font-family: var(--sb-font-ui);
  font-weight: 600;
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #8A8278;
  padding: 4px 8px;
  border: 0.5px solid var(--sb-chalk);
  border-radius: 2px;
}
.sb-optional-trigger__chev {
  color: #8A8278;
  transition: transform 0.2s ease, color 0.2s ease;
}

/* Locked state — disabled, dimmed */
.sb-optional-trigger--locked {
  opacity: 0.55;
  cursor: not-allowed;
}
.sb-optional-trigger--locked:hover {
  border-color: var(--sb-chalk);
}
.sb-optional-trigger--locked .sb-optional-trigger__icon { color: #C8C4BE; }

/* Unlocked-collapsed state (Phase 2B will toggle this class) */
.sb-optional-trigger--unlocked {
  opacity: 1;
  cursor: pointer;
}
.sb-optional-trigger--unlocked:hover {
  border-color: var(--sb-teal);
}
.sb-optional-trigger--unlocked .sb-optional-trigger__icon {
  color: var(--sb-teal);
  border-color: var(--sb-teal);
}

/* Expanded state */
.sb-optional-trigger--expanded {
  border-color: var(--sb-teal);
  background: rgba(176, 154, 110, 0.03);
}
.sb-optional-trigger--expanded .sb-optional-trigger__chev {
  transform: rotate(180deg);
  color: var(--sb-teal);
}

/* Badge swap when content present */
.sb-optional-trigger__badge--added {
  color: var(--sb-teal);
  border-color: var(--sb-teal);
}

/* Optional panel — content area below the trigger.
   Class-driven collapse: collapsed by default (max-height: 0,
   no padding, faded). When the trigger has --expanded, the panel
   transitions to its full height. The [aria-hidden] attribute is
   kept in sync by the JS so AT honours the visual state. */
.sb-optional-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: hidden;
  max-height: 0;
  padding: 0;
  opacity: 0;
  transition: max-height 0.3s ease-out, padding 0.25s ease-out, opacity 0.2s ease-out;
}
.sb-optional-trigger--expanded + .sb-optional-panel,
.sb-optional-panel[aria-hidden="false"] {
  /* The selectors are equivalent in our flow — we toggle both class
     and aria-hidden together — but supporting either alone keeps the
     CSS resilient to a JS bug. */
  max-height: 800px;
  opacity: 1;
  padding: 16px 0 0;
}

/* Dropzone */
.sb-dropzone {
  display: block;
  border: 0.5px dashed var(--sb-chalk);
  border-radius: 2px;
  padding: 24px 16px;
  text-align: center;
  cursor: pointer;
  background: var(--sb-paper);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.sb-dropzone:hover { border-color: var(--sb-teal); }
.sb-dropzone:focus-visible {
  outline: none;
  border-color: var(--sb-teal);
  box-shadow: 0 0 0 2px rgba(176, 154, 110, 0.18);
}
.sb-dropzone__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.sb-dropzone__icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sb-dropzone__icon { color: #8A8278; }
.sb-dropzone__primary {
  font-family: var(--sb-font-ui);
  font-weight: 600;
  font-size: 12px;
  color: var(--sb-ink);
  /* Long filenames shouldn't blow out the layout. */
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sb-dropzone__secondary {
  font-family: var(--sb-font-ui);
  font-weight: 300;
  font-size: 10px;
  color: #8A8278;
}
.sb-dropzone--over {
  border-color: var(--sb-teal);
  background: rgba(176, 154, 110, 0.03);
}
.sb-dropzone--filled {
  border-style: solid;
  border-color: var(--sb-teal);
  background: rgba(176, 154, 110, 0.03);
}
.sb-dropzone--filled .sb-dropzone__icon { color: var(--sb-teal); }
.sb-dropzone--filled .sb-dropzone__primary { color: var(--sb-ink); }
.sb-dropzone--filled .sb-dropzone__secondary { color: var(--sb-stone); }

/* ============================================================
   11. Form actions (Step 2)
   ============================================================ */
.sb-form__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
}
.sb-form__actions--stacked {
  flex-direction: column;
  align-items: stretch;
}
.sb-form__noobl {
  font-family: var(--sb-font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 10px;
  color: #8A8278;
  line-height: 1.7;
  margin-top: 14px;
}

/* ============================================================
   12. Step 3 — Confirm shells (3A founding + 3B paid)
   ============================================================ */
.sb-confirm {
  padding: 32px 36px 36px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.sb-confirm__head {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sb-confirm__title {
  font-family: var(--sb-font-display);
  font-weight: 300;
  font-size: 22px;
  color: var(--sb-ink);
  line-height: 1.2;
}
.sb-confirm__sub {
  font-family: var(--sb-font-ui);
  font-weight: 300;
  font-size: 12px;
  color: var(--sb-stone);
  line-height: 1.55;
}
.sb-confirm__privacy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: center;
  font-family: var(--sb-font-ui);
  font-weight: 300;
  font-size: 10px;
  color: #8A8278;
  margin-top: 4px;
}
.sb-confirm__privacy .sb-icon { color: #8A8278; }

/* Booking summary card */
.sb-summary-card {
  background: var(--sb-paper);
  border: 0.5px solid var(--sb-chalk);
  border-radius: 2px;
  overflow: hidden;
}
/* v1.7.5 — small Aged Brass eyebrow above the service title.
   Matches the "BOOKING SUMMARY" lockup in the spec. */
.sb-summary-card__eyebrow {
  font-family: var(--sb-font-ui);
  font-weight: 600;
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sb-teal);
  padding: 16px 20px 4px;
}
.sb-summary-card__service {
  font-family: var(--sb-font-display);
  font-weight: 400;
  font-size: 18px;
  color: var(--sb-ink);
  padding: 0 20px 14px;
  border-bottom: 0.5px solid var(--sb-chalk);
}
.sb-summary-card__rows {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
}
.sb-summary-card__row {
  display: grid;
  grid-template-columns: 0.7fr 1.3fr;
  gap: 16px;
  padding: 12px 20px;
  align-items: baseline;
  border-bottom: 0.5px solid var(--sb-chalk);
}
.sb-summary-card__row:last-child { border-bottom: 0; }
.sb-summary-card__row:nth-child(even) {
  background: var(--sb-linen); /* Near Limestone alt */
}
/* v1.7.5 — row labels in regular sentence case (Date / Time / Location)
   instead of uppercase, lighter weight, Smoke colour. Matches the spec
   image where the labels read "Date", "Time", "Location" — not "DATE",
   "TIME", "LOCATION". The total row keeps the original uppercase
   treatment via .sb-summary-card__row--total dt below. */
.sb-summary-card__row dt {
  font-family: var(--sb-font-ui);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0;
  text-transform: none;
  color: #8A8278; /* Smoke */
  text-align: left;
}
/* v1.7.5 — values right-aligned per spec layout. */
.sb-summary-card__row dd {
  font-family: var(--sb-font-ui);
  font-weight: 400;
  font-size: 11px;
  color: var(--sb-ink);
  line-height: 1.5;
  text-align: right;
  margin: 0;
}
.sb-summary-card__place {
  font-family: var(--sb-font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 13px;
  color: var(--sb-teal);
}
.sb-summary-card__row--total {
  background: var(--sb-linen);
  padding-top: 16px;
  padding-bottom: 16px;
  align-items: center;
}
/* Total row label: back to uppercase + bold + letterspace, matching
   the spec's "CONSULTATION FEE" lockup. */
.sb-summary-card__row--total dt {
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sb-stone);
}
.sb-summary-card__row--total dd {
  text-align: right;
}
.sb-summary-card__amount {
  font-family: var(--sb-font-display);
  font-weight: 300;
  font-size: 24px;
  color: var(--sb-ink);
  line-height: 1;
  vertical-align: middle;
}
.sb-summary-card__nocharge {
  font-family: var(--sb-font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 11px;
  color: var(--sb-teal);
  margin-left: 6px;
  vertical-align: middle;
}

/* Discount row treatment */
.sb-summary-card__row--discount dd {
  color: var(--sb-stone);
}
.sb-summary-card__row--discount dt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Before Your Visit card */
.sb-before-visit {
  background: rgba(176, 154, 110, 0.03);
  border: 0.5px solid rgba(176, 154, 110, 0.35);
  border-radius: 2px;
  padding: 20px 22px;
}
.sb-before-visit__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--sb-font-ui);
  font-weight: 600;
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sb-teal);
  margin-bottom: 8px;
}
.sb-before-visit__heading {
  font-family: var(--sb-font-display);
  font-weight: 300;
  font-size: 17px;
  color: var(--sb-ink);
  line-height: 1.3;
}
.sb-before-visit__body {
  font-family: var(--sb-font-ui);
  font-weight: 300;
  font-size: 11px;
  color: var(--sb-stone);
  line-height: 1.7;
  margin-top: 6px;
}
.sb-before-visit__steps {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0;
  margin: 16px 0 0;
}
.sb-before-visit__step {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 12px;
  align-items: start;
}
.sb-before-visit__num {
  width: 18px;
  height: 18px;
  border: 0.5px solid rgba(176, 154, 110, 0.5);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sb-font-ui);
  font-weight: 600;
  font-size: 9px;
  color: var(--sb-teal);
  margin-top: 2px;
}
.sb-before-visit__step-text {
  font-family: var(--sb-font-ui);
  font-weight: 300;
  font-size: 11px;
  color: var(--sb-stone);
  line-height: 1.7;
}
.sb-before-visit__step-text strong {
  font-weight: 600;
  color: #3A3530; /* Smoked Oak */
}

/* Credit note */
.sb-credit-note {
  display: grid;
  grid-template-columns: 14px 1fr;
  align-items: start;
  gap: 10px;
  padding: 14px 16px;
  border: 0.5px solid rgba(176, 154, 110, 0.3);
  border-radius: 2px;
  background: rgba(176, 154, 110, 0.05);
}
.sb-credit-note__icon {
  color: var(--sb-teal);
  margin-top: 1px;
}
.sb-credit-note p {
  font-family: var(--sb-font-ui);
  font-weight: 300;
  font-size: 11px;
  color: var(--sb-stone);
  line-height: 1.6;
}

/* Coupon block (3B) */
.sb-coupon {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sb-coupon__toggle {
  align-self: flex-start;
  font-family: var(--sb-font-ui);
  font-weight: 600;
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sb-teal);
  background: transparent;
  border: 0;
  padding: 6px 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 0.5px;
}
.sb-coupon__toggle:hover { color: var(--sb-stone); }
.sb-coupon__form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sb-coupon__row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.sb-coupon__row .sb-input { flex: 1; }
.sb-coupon__success {
  font-family: var(--sb-font-ui);
  font-weight: 400;
  font-size: 11px;
  color: var(--sb-success);
}

/* Stripe card field */
.sb-field--card { margin-top: 4px; }
.sb-stripe-card {
  height: 44px;
  padding: 12px 14px;
  background: var(--sb-paper);
  border: 0.5px solid var(--sb-chalk);
  border-radius: 2px;
  display: flex;
  align-items: center;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.sb-stripe-card.StripeElement--focus {
  border-color: var(--sb-teal);
  box-shadow: 0 0 0 2px rgba(176, 154, 110, 0.1);
}
.sb-stripe-card.StripeElement--invalid {
  border-color: var(--sb-error);
}

/* Checkbox + Terms */
.sb-checkbox {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 10px;
  align-items: start;
  cursor: pointer;
  padding: 4px 0;
}
.sb-checkbox__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
.sb-checkbox__box {
  width: 18px;
  height: 18px;
  border: 0.5px solid var(--sb-chalk);
  border-radius: 2px;
  background: var(--sb-paper);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s ease, border-color 0.15s ease;
  margin-top: 1px;
}
.sb-checkbox__tick {
  color: #F0EDE6;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.sb-checkbox__input:checked + .sb-checkbox__box {
  background: var(--sb-clay);
  border-color: var(--sb-clay);
}
.sb-checkbox__input:checked + .sb-checkbox__box .sb-checkbox__tick {
  opacity: 1;
}
.sb-checkbox__input:focus-visible + .sb-checkbox__box {
  box-shadow: 0 0 0 2px rgba(176, 154, 110, 0.28);
}
.sb-checkbox__text {
  font-family: var(--sb-font-ui);
  font-weight: 300;
  font-size: 11px;
  color: var(--sb-stone);
  line-height: 1.55;
}

.sb-pay-hint {
  font-family: var(--sb-font-ui);
  font-weight: 300;
  font-size: 10px;
  color: var(--sb-warning);
  text-align: center;
  margin-top: 4px;
}

/* Deposit banner — kept for back-compat with Booking → Deposit Mode */
.sb-deposit-banner {
  display: block;
  padding: 10px 14px;
  border: 0.5px solid rgba(176, 154, 110, 0.3);
  border-radius: 2px;
  background: rgba(176, 154, 110, 0.05);
  font-family: var(--sb-font-ui);
  font-weight: 300;
  font-size: 11px;
  color: var(--sb-stone);
  line-height: 1.5;
}

/* ============================================================
   13. Step 4 — Confirmed (Phase 2B replaces wrapper entirely)
   ============================================================ */
.sb-confirmed {
  padding: 48px 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
}
.sb-confirmed__icon {
  width: 56px;
  height: 56px;
  border: 0.5px solid var(--sb-teal);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--sb-teal);
  margin-bottom: 4px;
}
.sb-confirmed__title {
  font-family: var(--sb-font-display);
  font-weight: 300;
  font-size: 22px;
  color: var(--sb-ink);
  line-height: 1.2;
}
.sb-confirmed__desc {
  font-family: var(--sb-font-ui);
  font-weight: 300;
  font-size: 12px;
  color: var(--sb-stone);
  max-width: 420px;
  line-height: 1.6;
}
.sb-confirmed__details {
  font-family: var(--sb-font-ui);
  font-weight: 300;
  font-size: 12px;
  color: var(--sb-stone);
}
.sb-confirmed__callout {
  margin-top: 16px;
  padding: 16px 20px;
  border: 0.5px solid rgba(176, 154, 110, 0.35);
  border-radius: 2px;
  background: rgba(176, 154, 110, 0.03);
  max-width: 460px;
  text-align: left;
}
.sb-confirmed__callout-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--sb-font-ui);
  font-weight: 600;
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sb-teal);
  margin-bottom: 6px;
}
.sb-confirmed__callout p {
  font-family: var(--sb-font-ui);
  font-weight: 300;
  font-size: 11px;
  color: var(--sb-stone);
  line-height: 1.7;
}

/* ============================================================
   14. Loading + Notices
   ============================================================ */
.sb-loading-overlay {
  position: absolute;
  inset: 0;
  background: rgba(250, 250, 248, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}
.sb-loading-overlay__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.sb-loading-overlay__spinner {
  width: 32px;
  height: 32px;
  border: 0.5px solid var(--sb-chalk);
  border-top-color: var(--sb-teal);
  border-radius: 50%;
  animation: sb-spin 0.9s linear infinite;
}
@keyframes sb-spin {
  to { transform: rotate(360deg); }
}
.sb-loading-overlay__text {
  font-family: var(--sb-font-ui);
  font-weight: 300;
  font-size: 11px;
  color: var(--sb-stone);
}

.sb-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 2px;
  font-family: var(--sb-font-ui);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.5;
  border: 0.5px solid;
}
.sb-notice--success {
  border-color: var(--sb-success);
  color: var(--sb-success);
  background: var(--sb-success-bg);
}
.sb-notice--error {
  border-color: var(--sb-error);
  color: var(--sb-error);
  background: var(--sb-error-bg);
}
.sb-notice--warning {
  border-color: var(--sb-warning);
  color: var(--sb-warning);
  background: var(--sb-warning-bg);
}
.sb-notice--info {
  border-color: var(--sb-info);
  color: var(--sb-info);
  background: var(--sb-info-bg);
}

/* Skeleton (analytics dashboard etc. — retained for back-compat) */
.sb-skeleton {
  background: linear-gradient(90deg, var(--sb-linen) 25%, var(--sb-chalk) 50%, var(--sb-linen) 75%);
  background-size: 200% 100%;
  animation: sb-shimmer 1.4s ease-in-out infinite;
  border-radius: 2px;
}
@keyframes sb-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ============================================================
   14a. Optional trigger — disabled state (v1.6 Phase 2B)
   ============================================================ */
.sb-optional-trigger:disabled,
.sb-optional-trigger[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}
.sb-optional-trigger:disabled:hover,
.sb-optional-trigger[disabled]:hover {
  border-color: var(--sb-chalk);
  background: var(--sb-paper);
}

/* ============================================================
   14b. Optional panel — animated reveal (v1.6 Phase 2B)
   The [hidden] attribute hard-collapses for AT and on first paint
   so SR users get the right state. We layer a CSS-only transition
   on top: when the trigger has --expanded, the panel animates
   max-height from 0 to a generous ceiling. Both states are valid;
   the JS toggles [hidden] before flipping the trigger class so the
   animation runs cleanly.

   We could use grid-template-rows: 1fr / 0fr (newer pattern) but
   max-height is supported everywhere and is easier to debug.
   ============================================================ */
.sb-optional-trigger--expanded + .sb-optional-panel {
  /* belt-and-braces: when the trigger is expanded, force visible
     even if [hidden] is somehow still set (defensive — JS removes
     hidden before adding the class). */
  display: flex;
}

/* ============================================================
   14c. Step 3A "no-fee" amount — visual emphasis tweaks
   (no rule changes; lives in section 12 already)
   ============================================================ */

/* ============================================================
   14d. Confirmation full-panel takeover (v1.6 Phase 2B)
   When .sb-booker--takeover is added to the wrapper on Step 4,
   the sidebar and step indicator vanish and Step 4 fills the
   widget area. Spec: "Widget replaces entirely. No sidebar."
   ============================================================ */
.sb-booker--takeover .sb-sidebar { display: none; }
.sb-booker--takeover .sb-steps   { display: none; }
.sb-booker--takeover .sb-step-panel:not(.sb-step-panel--done) {
  display: none !important;
}
.sb-booker--takeover .sb-step-panel--done { display: block; }
.sb-booker--takeover .sb-main {
  width: 100%;
  background: var(--sb-paper);
}
/* The layout flex-row collapses cleanly because the sidebar is
   display:none — no layout-jolt. */

/* ============================================================
   14e. Step 4 — refined confirmation layout (v1.6 Phase 2B)
   Replaces the v1.4 stack. Centred column with brass-circle tick,
   heading, greeting, booking summary card, before-visit reminder,
   and email-on-its-way line.
   ============================================================ */

/* The .sb-confirmed shell already exists in section 13. Override
   the layout to match the takeover view: wider, centred, more
   breathing room, and stack each block flush with siblings. */
.sb-step-panel--done .sb-confirmed {
  padding: 56px 36px 48px;
  max-width: 640px;
  margin: 0 auto;
  align-items: center;
  text-align: center;
  gap: 16px;
}

/* Brass-circle check icon — 56×56 with a 0.5px brass ring. */
.sb-confirmed__icon {
  width: 56px;
  height: 56px;
  border: 0.5px solid var(--sb-teal);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--sb-teal);
  margin-bottom: 4px;
  background: rgba(176, 154, 110, 0.04);
}
.sb-confirmed__icon .sb-icon { color: var(--sb-teal); }

.sb-confirmed__title {
  font-family: var(--sb-font-display);
  font-weight: 300;
  font-size: 26px;
  color: var(--sb-ink);
  line-height: 1.2;
  letter-spacing: 0;
}

.sb-confirmed__greeting {
  font-family: var(--sb-font-ui);
  font-weight: 300;
  font-size: 13px;
  color: var(--sb-stone);
  line-height: 1.6;
  max-width: 480px;
}

/* The summary card on Step 4 reuses the .sb-summary-card shell
   from section 12 — it's already styled. We just need the
   "--done" modifier to constrain its width inside the takeover. */
.sb-summary-card--done {
  width: 100%;
  max-width: 460px;
  text-align: left;
}

/* Before-visit reminder — same as 3A/3B versions, just bounded
   to the centred takeover column. */
.sb-before-visit--done {
  width: 100%;
  max-width: 460px;
  text-align: left;
}

.sb-confirmed__email {
  font-family: var(--sb-font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 12px;
  color: #8A8278; /* Smoke */
  line-height: 1.6;
  margin-top: 8px;
}

/* ============================================================
   15. Responsive — < 700px
   - Sidebar collapses to a horizontal top bar (brand + founding only)
   - Calendar and slot panels stack
   - Day-cell aspect-ratio relaxes to a fixed min-height
   ============================================================ */
@media (max-width: 700px) {

  .sb-booker__layout {
    flex-direction: column;
  }

  /* Sidebar → top bar */
  .sb-sidebar {
    flex: 0 0 auto;
    width: 100%;
    padding: 16px 20px;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
  }
  .sb-sidebar__title,
  .sb-sidebar__rule,
  .sb-sidebar__meta,
  .sb-sidebar__summary,
  .sb-sidebar__founding-note {
    display: none;
  }
  .sb-sidebar__bottom {
    margin-top: 0;
    padding-top: 0;
    flex-direction: row;
    align-items: center;
  }
  .sb-sidebar__brand {
    flex: 1;
    font-size: 10px;
  }

  /* Calendar / slots stack */
  .sb-calendar-slots {
    flex-direction: column;
  }
  .sb-cal {
    border-right: 0;
    border-bottom: 0.5px solid var(--sb-chalk);
    padding: 24px 20px 20px;
  }
  .sb-cal__cell {
    aspect-ratio: auto;
    min-height: 36px;
    padding: 6px 0;
  }
  .sb-times {
    flex: 1;
    width: 100%;
    padding: 24px 20px;
  }

  /* Step indicator — tighten */
  .sb-steps {
    height: auto;
    padding: 12px 16px;
    gap: 0;
  }
  .sb-step__line {
    flex: 1 1 auto;
    margin: 0 8px;
  }
  .sb-step__label {
    font-size: 9px;
    letter-spacing: 0.14em;
  }

  /* Form / confirm panels */
  .sb-form--v5,
  .sb-confirm,
  .sb-step-panel--details,
  .sb-step-panel--confirm {
    padding: 24px 20px 24px;
  }
  .sb-form__grid--2,
  .sb-form__grid--addr {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .sb-summary-card__service { padding: 14px 16px 10px; }
  .sb-summary-card__row { padding: 10px 16px; grid-template-columns: 1fr; gap: 4px; }
  .sb-summary-card__row dt { font-size: 8px; }
  .sb-summary-card__row dd { font-size: 12px; }

  .sb-before-visit { padding: 16px 18px; }
  .sb-confirmed { padding: 32px 20px; }

  /* v1.6 Phase 2B — refined Step 4 spacing on mobile */
  .sb-step-panel--done .sb-confirmed { padding: 36px 20px 28px; }
  .sb-confirmed__icon { width: 48px; height: 48px; }
  .sb-confirmed__title { font-size: 22px; }

  /* v1.6 Phase 2B — optional trigger reflows on narrow widths.
     The 4-column grid (icon, text, badge, chev) is too tight under
     ~380px; collapse the badge below the text on small screens. */
  .sb-optional-trigger {
    grid-template-columns: 36px 1fr auto;
    gap: 12px;
  }
  .sb-optional-trigger__badge {
    grid-column: 2 / -1;
    justify-self: start;
    margin-top: 6px;
  }
  .sb-optional-trigger__chev {
    grid-row: 1;
    grid-column: 3;
  }
}