/* simpro-booking — generated 2026-04-23 21:38:41 */
:root {
  /* Brand */
  --sb-clay:        #405047;
  --sb-clay-light:  #405047;
  --sb-clay-pale:   #F4F2EF;

  /* Accent */
  --sb-teal:        #FFCE4D;
  --sb-teal-pale:   #E7FAFA;

  /* Neutral */
  --sb-ink:         #405047;
  --sb-stone:       #2E2820;
  --sb-dust:        #5F5F5F;
  --sb-chalk:       #C8C8C8;
  --sb-linen:       #F3F2F0;
  --sb-paper:       #F2F2F1;
  --sb-white:       #FFFFFF;

  /* Semantic */
  --sb-success:     #008374;
  --sb-success-bg:  #E6F3F1;
  --sb-error:       #CC3333;
  --sb-error-bg:    #FAEBEB;
  --sb-warning:     #FFCE4D;
  --sb-warning-bg:  #FFFAED;
  --sb-info:        #2D3832;
  --sb-info-bg:     #F4F2EF;

  /* Typography */
  --sb-font-display: ;
  --sb-font-ui:      ;

  /* Type Scale (base: 16px) */
  --sb-text-xs:    12px;
  --sb-text-sm:    14px;
  --sb-text-base:  16px;
  --sb-text-lg:    18px;
  --sb-text-xl:    20px;
  --sb-text-2xl:   24px;
  --sb-text-3xl:   30px;

  /* 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(64,80,71,0.08), 0 1px 2px rgba(64,80,71,0.04);
  --sb-shadow-md: 0 4px 12px rgba(64,80,71,0.10), 0 2px 4px rgba(64,80,71,0.06);
  --sb-shadow-lg: 0 12px 32px rgba(64,80,71,0.12), 0 4px 8px rgba(64,80,71,0.06);
  --sb-shadow-focus: 0 0 0 3px rgba(64,80,71,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 — Component Styles
   References --sb-* tokens from the generated :root block.
   This file is read by Settings::get_component_css() and
   appended to the generated slot-picker.css.
   ============================================================ */

/* --- Base Reset (scoped) --- */
.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: var(--sb-text-base);
  color: var(--sb-ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* --- Typography --- */
.sb-heading-display {
  font-family: var(--sb-font-display);
  font-size: var(--sb-text-3xl);
  font-weight: 400;
  line-height: 1.2;
  color: var(--sb-ink);
  letter-spacing: -0.01em;
}
.sb-heading-1 {
  font-family: var(--sb-font-display);
  font-size: var(--sb-text-2xl);
  font-weight: 400;
  line-height: 1.3;
  color: var(--sb-ink);
}
.sb-heading-2 {
  font-family: var(--sb-font-ui);
  font-size: var(--sb-text-xl);
  font-weight: 600;
  line-height: 1.35;
  color: var(--sb-ink);
}
.sb-heading-3 {
  font-family: var(--sb-font-ui);
  font-size: var(--sb-text-lg);
  font-weight: 600;
  line-height: 1.4;
  color: var(--sb-ink);
}
.sb-label {
  font-size: var(--sb-text-sm);
  font-weight: 500;
  color: var(--sb-stone);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.sb-body {
  font-size: var(--sb-text-base);
  color: var(--sb-ink);
  line-height: 1.65;
}
.sb-body-sm {
  font-size: var(--sb-text-sm);
  color: var(--sb-stone);
  line-height: 1.55;
}
.sb-caption {
  font-size: var(--sb-text-xs);
  color: var(--sb-dust);
  line-height: 1.5;
}

/* --- Buttons --- */
.sb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sb-space-2);
  padding: var(--sb-space-4) var(--sb-space-8);
  border: 1.5px solid transparent;
  border-radius: var(--sb-radius-md);
  font-family: var(--sb-font-ui);
  font-size: var(--sb-text-sm);
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background var(--sb-duration-base) var(--sb-ease),
              border-color var(--sb-duration-base) var(--sb-ease),
              color var(--sb-duration-base) var(--sb-ease),
              box-shadow var(--sb-duration-base) var(--sb-ease),
              transform var(--sb-duration-fast) var(--sb-ease);
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
}
.sb-btn:focus-visible {
  outline: none;
  box-shadow: var(--sb-shadow-focus);
}
.sb-btn:active { transform: translateY(1px); }

.sb-btn--primary {
  background: var(--sb-clay);
  border-color: var(--sb-clay);
  color: var(--sb-white);
}
.sb-btn--primary:hover {
  background: var(--sb-clay-light);
  border-color: var(--sb-clay-light);
  color: var(--sb-teal);
}
.sb-btn--secondary {
  background: var(--sb-white);
  border-color: var(--sb-chalk);
  color: var(--sb-ink);
}
.sb-btn--secondary:hover {
  border-color: var(--sb-stone);
  background: var(--sb-linen);
}
.sb-btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--sb-clay);
}
.sb-btn--ghost:hover { background: var(--sb-clay-pale); }
.sb-btn--danger {
  background: var(--sb-error-bg);
  border-color: transparent;
  color: var(--sb-error);
}
.sb-btn--danger:hover { background: #f0d8d6; }
.sb-btn--sm {
  padding: var(--sb-space-2) var(--sb-space-4);
  font-size: var(--sb-text-xs);
  border-radius: var(--sb-radius-sm);
}
.sb-btn--lg {
  padding: var(--sb-space-5) var(--sb-space-10);
  font-size: var(--sb-text-base);
}
.sb-btn:disabled,
.sb-btn--disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}
.sb-btn--loading {
  position: relative;
  color: transparent;
  pointer-events: none;
}
.sb-btn--loading::after {
  content: '';
  position: absolute;
  width: 14px; height: 14px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: sb-spin 0.6s linear infinite;
  color: var(--sb-white);
}
@keyframes sb-spin { to { transform: rotate(360deg); } }

/* --- Form Elements --- */
.sb-field {
  display: flex;
  flex-direction: column;
  gap: var(--sb-space-3);
}
.sb-field__label {
  font-size: var(--sb-text-sm);
  font-weight: 500;
  color: var(--sb-ink);
}
.sb-field__label .sb-field__required {
  color: var(--sb-clay);
  margin-left: var(--sb-space-1);
}
.sb-field__hint {
  font-size: var(--sb-text-xs);
  color: var(--sb-stone);
  line-height: 1.5;
}
.sb-field__error {
  font-size: var(--sb-text-xs);
  color: var(--sb-error);
  display: flex;
  align-items: center;
  gap: var(--sb-space-1);
}
.sb-input,
.sb-select,
.sb-textarea {
  width: 100%;
  padding: var(--sb-space-4) var(--sb-space-5);
  background: var(--sb-white);
  border: 1.5px solid var(--sb-chalk);
  border-radius: var(--sb-radius-md);
  font-family: var(--sb-font-ui);
  font-size: var(--sb-text-sm);
  color: var(--sb-ink);
  line-height: 1.5;
  transition: border-color var(--sb-duration-base) var(--sb-ease),
              box-shadow var(--sb-duration-base) var(--sb-ease);
  appearance: none;
}
.sb-input::placeholder,
.sb-textarea::placeholder { color: var(--sb-dust); }
.sb-input:hover,
.sb-select:hover { border-color: var(--sb-stone); }
.sb-input:focus,
.sb-select:focus,
.sb-textarea:focus {
  outline: none;
  border-color: var(--sb-clay);
  box-shadow: var(--sb-shadow-focus);
}
.sb-input--error,
.sb-select--error { border-color: var(--sb-error); }
.sb-input--error:focus,
.sb-select--error:focus {
  box-shadow: 0 0 0 3px rgba(181,64,58,0.2);
}
.sb-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2399A38D' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--sb-space-4) center;
  padding-right: var(--sb-space-10);
  cursor: pointer;
}

/* --- Booker Layout --- */
.sb-booker {
  background: var(--sb-white);
  border-radius: var(--sb-radius-xl);
  overflow: hidden;
  box-shadow: var(--sb-shadow-lg);
  position: relative;
}
.sb-booker__layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  min-height: 640px;
}
.sb-main {
  display: flex;
  flex-direction: column;
}
.sb-calendar-slots {
  display: grid;
  grid-template-columns: 1fr 240px;
  flex: 1;
}
.sb-booker__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sb-space-5) var(--sb-space-8);
  border-top: 1px solid var(--sb-chalk);
  font-size: var(--sb-text-xs);
  color: var(--sb-stone);
}

/* --- Sidebar --- */
.sb-sidebar {
  background: var(--sb-ink);
  padding: var(--sb-space-10) var(--sb-space-8);
  display: flex;
  flex-direction: column;
  gap: var(--sb-space-6);
  position: relative;
  overflow: hidden;
}
.sb-sidebar::before {
  content: '';
  position: absolute;
  bottom: -60px; right: -60px;
  width: 180px; height: 180px;
  background: radial-gradient(circle, rgba(251,201,87,0.12) 0%, transparent 70%);
  pointer-events: none;
}
.sb-sidebar__brand {
  font-size: var(--sb-text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sb-teal);
  position: relative;
}
.sb-sidebar__title {
  font-family: var(--sb-font-display);
  font-size: var(--sb-text-2xl);
  font-weight: 400;
  color: var(--sb-white);
  line-height: 1.25;
  position: relative;
}
.sb-sidebar__meta {
  display: flex;
  flex-direction: column;
  gap: var(--sb-space-3);
  position: relative;
}
.sb-sidebar__meta-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--sb-text-sm);
  color: rgba(255,255,255,0.6);
}
.sb-sidebar__meta-row svg { flex-shrink: 0; color: var(--sb-teal); }
.sb-sidebar__meta-row strong { color: rgba(255,255,255,0.85); font-weight: 500; }
.sb-sidebar__divider {
  height: 1px;
  background: rgba(255,255,255,0.08);
  position: relative;
}

/* --- Consultant Chips --- */
.sb-consultant-chips {
  display: flex;
  flex-direction: column;
  gap: var(--sb-space-3);
  position: relative;
}
.sb-consultant-chip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--sb-radius-md);
  border: 1.5px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
  cursor: pointer;
  transition: background var(--sb-duration-base) var(--sb-ease),
              border-color var(--sb-duration-base) var(--sb-ease);
}
.sb-consultant-chip:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.15);
}
.sb-consultant-chip.active {
  background: rgba(251,201,87,0.12);
  border-color: var(--sb-teal);
}
.sb-consultant-chip__avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--sb-text-sm);
  font-weight: 700;
  color: var(--sb-white);
  flex-shrink: 0;
}
.sb-consultant-chip__name {
  font-size: var(--sb-text-sm);
  font-weight: 500;
  color: rgba(255,255,255,0.85);
}
.sb-consultant-chip__role {
  font-size: 11px;
  color: rgba(255,255,255,0.4);
}
.sb-consultant-chip__check {
  margin-left: auto;
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--sb-duration-base) var(--sb-ease);
}
.sb-consultant-chip.active .sb-consultant-chip__check {
  background: var(--sb-teal);
  border-color: var(--sb-teal);
}

/* --- Month Calendar --- */
.sb-cal {
  padding: var(--sb-space-10) var(--sb-space-8) var(--sb-space-8);
  display: flex;
  flex-direction: column;
}
.sb-cal__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sb-space-5);
}
.sb-cal__month {
  font-family: var(--sb-font-display);
  font-size: var(--sb-text-xl);
  font-weight: 400;
  color: var(--sb-ink);
}
.sb-cal__nav-btn {
  width: 30px; height: 30px;
  border: 1.5px solid var(--sb-chalk);
  border-radius: var(--sb-radius-sm);
  background: var(--sb-white);
  color: var(--sb-stone);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--sb-duration-base) var(--sb-ease);
  font-size: 13px;
}
.sb-cal__nav-btn:hover { border-color: var(--sb-ink); color: var(--sb-ink); }
.sb-cal__nav-btn:disabled { opacity: 0.3; pointer-events: none; }

.sb-cal__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.sb-cal__dow {
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sb-stone);
  padding-bottom: 10px;
}
.sb-cal__cell {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: var(--sb-radius-md);
  cursor: default;
  transition: all var(--sb-duration-base) var(--sb-ease);
  position: relative;
  font-size: var(--sb-text-sm);
  font-weight: 500;
  color: var(--sb-ink);
  gap: 3px;
}
.sb-cal__cell[role="button"] { cursor: pointer; }
.sb-cal__cell[role="button"]:hover { background: var(--sb-linen); }
.sb-cal__cell--empty { pointer-events: none; }
.sb-cal__cell--past { color: var(--sb-chalk); pointer-events: none; }
.sb-cal__cell--today { font-weight: 700; }
.sb-cal__cell--today::before {
  content: '';
  position: absolute;
  inset: 2px;
  border-radius: var(--sb-radius-sm);
  background: var(--sb-linen);
  z-index: 0;
}
.sb-cal__cell--today > * { position: relative; z-index: 1; }
.sb-cal__cell--selected {
  background: var(--sb-clay);
  color: var(--sb-white);
}
.sb-cal__cell--selected:hover { background: var(--sb-clay-light); }
.sb-cal__cell--selected .sb-cal__avail-dots span { background: rgba(255,255,255,0.6); }
.sb-cal__cell--selected::before { background: transparent; }
.sb-cal__cell--no-slots { color: var(--sb-dust); opacity: 0.5; pointer-events: none; }
.sb-cal__cell--weekend { color: var(--sb-dust); pointer-events: none; }

.sb-cal__avail-dots {
  display: flex;
  gap: 2px;
  height: 4px;
}
.sb-cal__avail-dots span {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--sb-teal);
}
.sb-cal__avail-dots--low span { background: var(--sb-error); }

.sb-cal__legend {
  display: flex;
  align-items: center;
  gap: var(--sb-space-4);
  margin-top: auto;
  padding-top: var(--sb-space-3);
  font-size: 11px;
  color: var(--sb-stone);
}
.sb-cal__legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
}
.sb-cal__legend-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
}
.sb-cal__legend-dot--avail { background: var(--sb-teal); }
.sb-cal__legend-dot--low { background: var(--sb-error); }

/* --- Time-Slot Rail --- */
.sb-times {
  border-left: 1px solid var(--sb-chalk);
  display: flex;
  flex-direction: column;
  background: var(--sb-paper);
}
.sb-times__header {
  padding: var(--sb-space-6) var(--sb-space-5) var(--sb-space-4);
  border-bottom: 1px solid var(--sb-chalk);
  background: var(--sb-white);
}
.sb-times__date {
  font-weight: 600;
  font-size: var(--sb-text-sm);
  color: var(--sb-ink);
}
.sb-times__count {
  font-size: 11px;
  color: var(--sb-stone);
  margin-top: 4px;
}
.sb-times__list {
  flex: 1;
  overflow-y: auto;
  padding: var(--sb-space-5);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sb-times__empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--sb-space-6);
  text-align: center;
  color: var(--sb-stone);
  gap: var(--sb-space-2);
  font-size: var(--sb-text-sm);
}
.sb-times__empty svg { opacity: 0.4; }

.sb-time-btn {
  padding: 14px 16px;
  background: var(--sb-white);
  border: 1.5px solid var(--sb-chalk);
  border-radius: var(--sb-radius-md);
  cursor: pointer;
  transition: all var(--sb-duration-base) var(--sb-ease);
  display: flex;
  flex-direction: column;
  gap: 0;
}
.sb-time-btn:hover {
  border-color: var(--sb-clay);
  background: var(--sb-clay-pale);
}
.sb-time-btn:hover .sb-time-btn__time { color: var(--sb-ink); }
.sb-time-btn:hover .sb-time-btn__person { color: var(--sb-stone); }
.sb-time-btn--selected {
  border-color: var(--sb-clay);
  background: var(--sb-clay);
  gap: 10px;
}
.sb-time-btn__time {
  font-size: var(--sb-text-sm);
  font-weight: 600;
  color: var(--sb-ink);
}
.sb-time-btn--selected .sb-time-btn__time { color: var(--sb-white); }
.sb-time-btn__person {
  font-size: 11px;
  color: var(--sb-stone);
  margin-top: 2px;
}
.sb-time-btn--selected .sb-time-btn__person { color: rgba(255,255,255,0.7); }
.sb-time-btn__confirm {
  width: 100%;
  padding: 8px 12px;
  background: var(--sb-white);
  color: var(--sb-clay);
  border: none;
  border-radius: var(--sb-radius-sm);
  font-family: var(--sb-font-ui);
  font-size: var(--sb-text-xs);
  font-weight: 700;
  cursor: pointer;
  transition: background var(--sb-duration-fast) var(--sb-ease);
  text-align: center;
}
.sb-time-btn__confirm:hover {
  background: var(--sb-teal);
  color: var(--sb-ink);
}

/* --- Confirmation Overlay --- */
.sb-confirm-overlay {
  position: absolute;
  inset: 0;
  background: rgba(42,43,42,0.6);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sb-space-6);
  z-index: 10;
}
.sb-confirm-card {
  background: var(--sb-white);
  border-radius: var(--sb-radius-lg);
  box-shadow: var(--sb-shadow-lg);
  padding: var(--sb-space-8);
  max-width: 420px;
  width: 100%;
}
.sb-confirm-card__icon {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--sb-clay-pale);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sb-clay);
  margin-bottom: var(--sb-space-4);
}
.sb-confirm-card__title {
  font-family: var(--sb-font-display);
  font-size: var(--sb-text-xl);
  color: var(--sb-ink);
  margin-bottom: var(--sb-space-1);
}
.sb-confirm-card__desc {
  font-size: var(--sb-text-sm);
  color: var(--sb-stone);
  margin-bottom: var(--sb-space-5);
  line-height: 1.55;
}
.sb-confirm-detail {
  display: flex;
  align-items: center;
  gap: var(--sb-space-3);
  padding: var(--sb-space-3) 0;
  border-top: 1px solid var(--sb-chalk);
}
.sb-confirm-detail__icon {
  width: 36px; height: 36px;
  border-radius: var(--sb-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sb-confirm-detail__icon--date { background: var(--sb-clay-pale); color: var(--sb-clay); }
.sb-confirm-detail__icon--time { background: var(--sb-teal-pale); color: var(--sb-warning); }
.sb-confirm-detail__icon--person { background: var(--sb-linen); color: var(--sb-stone); }
.sb-confirm-detail__label {
  font-size: 11px;
  color: var(--sb-stone);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}
.sb-confirm-detail__value {
  font-size: var(--sb-text-sm);
  font-weight: 600;
  color: var(--sb-ink);
}
.sb-confirm-card__actions {
  display: flex;
  gap: 10px;
  margin-top: var(--sb-space-6);
}
.sb-confirm-card__actions .sb-btn--primary { flex: 1; }

/* --- Loading Overlay --- */
.sb-loading-overlay {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}

/* --- Notices & Badges --- */
.sb-notice {
  display: flex;
  align-items: flex-start;
  gap: var(--sb-space-3);
  padding: var(--sb-space-4) var(--sb-space-5);
  border-radius: var(--sb-radius-md);
  font-size: var(--sb-text-sm);
  line-height: 1.5;
}
.sb-notice--success {
  background: var(--sb-success-bg);
  color: var(--sb-success);
  border-left: 3px solid var(--sb-success);
}
.sb-notice--error {
  background: var(--sb-error-bg);
  color: var(--sb-error);
  border-left: 3px solid var(--sb-error);
}
.sb-notice--warning {
  background: var(--sb-warning-bg);
  color: var(--sb-warning);
  border-left: 3px solid var(--sb-warning);
}
.sb-notice--info {
  background: var(--sb-info-bg);
  color: var(--sb-info);
  border-left: 3px solid var(--sb-info);
}
.sb-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--sb-space-2);
  border-radius: var(--sb-radius-pill);
  font-size: var(--sb-text-xs);
  font-weight: 600;
  line-height: 1.6;
}
.sb-badge--confirmed { background: var(--sb-success-bg); color: var(--sb-success); }
.sb-badge--pending   { background: var(--sb-warning-bg); color: var(--sb-warning); }
.sb-badge--failed    { background: var(--sb-error-bg);   color: var(--sb-error); }

/* --- Loading Skeleton --- */
.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: var(--sb-radius-sm);
}
@keyframes sb-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* --- Responsive: stacked layout below 720px --- */
@media (max-width: 720px) {
  .sb-booker__layout {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .sb-calendar-slots {
    grid-template-columns: 1fr;
  }
  .sb-sidebar {
    padding: var(--sb-space-6) var(--sb-space-5);
  }
  .sb-times {
    border-left: none;
    border-top: 1px solid var(--sb-chalk);
  }
}

/* --- Step Indicator --- */
.sb-steps {
  display: flex;
  align-items: center;
  gap: 0;
  padding: var(--sb-space-5) var(--sb-space-8);
  border-bottom: 1px solid var(--sb-chalk);
  background: var(--sb-white);
}
.sb-step {
  display: flex;
  align-items: center;
  gap: 8px;
}
.sb-step__num {
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1.5px solid var(--sb-chalk);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--sb-stone);
  background: var(--sb-white);
  transition: all var(--sb-duration-base) var(--sb-ease);
  flex-shrink: 0;
}
.sb-step__label {
  font-size: 12px;
  font-weight: 600;
  color: var(--sb-stone);
  transition: color var(--sb-duration-base) var(--sb-ease);
  white-space: nowrap;
}
.sb-step--active .sb-step__num {
  background: var(--sb-clay);
  border-color: var(--sb-clay);
  color: var(--sb-white);
}
.sb-step--active .sb-step__label { color: var(--sb-ink); }
.sb-step--done .sb-step__num {
  background: var(--sb-success);
  border-color: var(--sb-success);
  color: var(--sb-white);
}
.sb-step--done .sb-step__label { color: var(--sb-stone); }
.sb-step__line {
  flex: 1;
  height: 1.5px;
  background: var(--sb-chalk);
  margin: 0 10px;
  transition: background var(--sb-duration-base) var(--sb-ease);
  min-width: 16px;
}
.sb-step__line--done { background: var(--sb-success); }

/* --- Step Panels --- */
.sb-step-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* --- Form (Step 2) --- */
.sb-form {
  padding: var(--sb-space-12) var(--sb-space-12);
  max-width: 660px;
}
.sb-form__title {
  font-family: var(--sb-font-display);
  font-size: var(--sb-text-2xl);
  color: var(--sb-ink);
  margin-bottom: var(--sb-space-2);
}
.sb-form__subtitle {
  font-size: var(--sb-text-sm);
  color: var(--sb-stone);
  margin-bottom: var(--sb-space-10);
  line-height: 1.55;
}
.sb-form__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sb-space-6);
  margin-bottom: var(--sb-space-6);
}
.sb-form__grid--3 {
  grid-template-columns: 1fr 100px 100px;
}
.sb-form__actions {
  display: flex;
  gap: 12px;
  margin-top: var(--sb-space-10);
  padding-top: var(--sb-space-6);
  border-top: 1px solid var(--sb-chalk);
}
.sb-form__actions .sb-btn--primary { flex: 1; }

/* --- Payment (Step 3) --- */
.sb-payment {
  padding: var(--sb-space-12) var(--sb-space-12);
  max-width: 600px;
}
.sb-order-summary {
  background: var(--sb-paper);
  border: 1px solid var(--sb-chalk);
  border-radius: var(--sb-radius-md);
  padding: var(--sb-space-5) var(--sb-space-6);
}
.sb-order-summary__row {
  display: flex;
  justify-content: space-between;
  font-size: var(--sb-text-sm);
  color: var(--sb-ink);
  padding: var(--sb-space-3) 0;
}
.sb-order-summary__row--sub {
  font-size: var(--sb-text-xs);
  color: var(--sb-stone);
  padding-top: 0;
}
.sb-order-summary__divider {
  height: 1px;
  background: var(--sb-chalk);
  margin: var(--sb-space-3) 0;
}
.sb-order-summary__row--total {
  font-weight: 700;
  font-size: var(--sb-text-base);
}
.sb-stripe-card {
  padding: var(--sb-space-4) var(--sb-space-5);
  background: var(--sb-white);
  border: 1.5px solid var(--sb-chalk);
  border-radius: var(--sb-radius-md);
  transition: border-color var(--sb-duration-base) var(--sb-ease), box-shadow var(--sb-duration-base) var(--sb-ease);
}
.sb-stripe-card:focus-within,
.sb-stripe-card.StripeElement--focus {
  border-color: var(--sb-clay);
  box-shadow: var(--sb-shadow-focus);
}
.sb-stripe-card.StripeElement--invalid {
  border-color: var(--sb-error);
}
.sb-payment__secure {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: var(--sb-space-6);
  font-size: 11px;
  color: var(--sb-stone);
}
.sb-payment__secure svg { flex-shrink: 0; opacity: 0.6; }

/* --- Terms Agreement --- */
.sb-terms {
  padding: var(--sb-space-4) var(--sb-space-5);
  background: var(--sb-paper);
  border: 1px solid var(--sb-chalk);
  border-radius: var(--sb-radius-md);
}
.sb-terms__label {
  display: flex;
  align-items: flex-start;
  gap: var(--sb-space-3);
  cursor: pointer;
  line-height: 1.5;
}
.sb-terms__checkbox {
  /* Hide the native checkbox visually but keep it accessible. */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  border: 1.5px solid var(--sb-chalk);
  border-radius: 5px;
  background: var(--sb-white, #fff);
  cursor: pointer;
  position: relative;
  transition: background 0.15s, border-color 0.15s;
}
.sb-terms__checkbox:hover {
  border-color: var(--sb-clay);
}
.sb-terms__checkbox:focus-visible {
  outline: 2px solid var(--sb-clay);
  outline-offset: 2px;
}
.sb-terms__checkbox:checked {
  background: var(--sb-clay);
  border-color: var(--sb-clay);
}
.sb-terms__checkbox:checked::after {
  content: '';
  position: absolute;
  left: 6px;
  top: 2.5px;
  width: 5.5px;
  height: 10px;
  border: solid var(--sb-white, #fff);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.sb-terms__text {
  font-size: var(--sb-text-sm);
  color: var(--sb-ink);
}
.sb-terms__link {
  color: var(--sb-clay);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 500;
  transition: color 0.15s;
}
.sb-terms__link:hover {
  color: var(--sb-clay-light);
}
.sb-terms .sb-field__error {
  margin-top: var(--sb-space-2);
  padding-left: calc(20px + var(--sb-space-3));
}

/* Pay button wrapper — stacked layout for step 3. */
.sb-form__actions--stacked {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sb-space-3);
}
.sb-btn--full {
  width: 100%;
}
.sb-pay-hint {
  font-size: 11px;
  color: var(--sb-stone);
  text-align: center;
  transition: opacity 0.2s;
}

/* Muted / disabled-looking primary button */
.sb-btn--muted {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* --- Deposit Banner --- */
.sb-deposit-banner {
  padding: var(--sb-space-4) var(--sb-space-5);
  background: var(--sb-teal-pale);
  border-left: 3px solid var(--sb-teal);
  border-radius: var(--sb-radius-sm);
  font-size: var(--sb-text-sm);
  color: var(--sb-warning);
  line-height: 1.55;
  font-weight: 500;
}

/* --- Coupon --- */
.sb-coupon__toggle {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--sb-font-ui);
  font-size: var(--sb-text-sm);
  color: var(--sb-clay);
  text-decoration: underline;
  cursor: pointer;
  font-weight: 500;
}
.sb-coupon__toggle:hover { color: var(--sb-clay-light); }
.sb-coupon__form { margin-top: var(--sb-space-3); }
.sb-coupon__success {
  font-size: var(--sb-text-xs);
  color: var(--sb-success);
  margin-top: var(--sb-space-2);
  font-weight: 500;
}

/* --- Discount Row --- */
.sb-order-summary__row--discount {
  color: var(--sb-success);
  font-weight: 500;
}
.sb-order-summary__row--discount > span:last-child::before { content: '-'; }

/* --- Confirmed (Step 4) --- */
.sb-confirmed {
  padding: var(--sb-space-12) var(--sb-space-10);
  text-align: center;
  max-width: 560px;
  margin: 0 auto;
}
.sb-confirmed__icon {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: var(--sb-success-bg);
  color: var(--sb-success);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--sb-space-6);
}
.sb-confirmed__title {
  font-family: var(--sb-font-display);
  font-size: var(--sb-text-2xl);
  color: var(--sb-ink);
  margin-bottom: var(--sb-space-3);
}
.sb-confirmed__desc {
  font-size: var(--sb-text-sm);
  color: var(--sb-stone);
  margin-bottom: var(--sb-space-8);
}
.sb-confirmed__details {
  text-align: left;
  border: 1px solid var(--sb-chalk);
  border-radius: var(--sb-radius-md);
  overflow: hidden;
  margin-bottom: var(--sb-space-8);
}
.sb-confirmed__row {
  display: flex;
  justify-content: space-between;
  gap: var(--sb-space-4);
  padding: var(--sb-space-4) var(--sb-space-5);
  font-size: var(--sb-text-sm);
  border-bottom: 1px solid var(--sb-chalk);
}
.sb-confirmed__row:last-child { border-bottom: none; }
.sb-confirmed__row > span:last-child {
  text-align: right;
  min-width: 0;
}
.sb-confirmed__row--consultant > span:last-child {
  max-width: 30ch;
  text-wrap: balance;
}
.sb-confirmed__row-label {
  font-weight: 600;
  color: var(--sb-stone);
  flex-shrink: 0;
}
.sb-confirmed__note {
  font-size: var(--sb-text-xs);
  color: var(--sb-stone);
  line-height: 1.6;
}
.sb-confirmed__callout {
  margin-top: var(--sb-space-6);
  padding: var(--sb-space-5) var(--sb-space-6);
  background: var(--sb-clay-pale);
  border-top: 10px solid;
  border-image: linear-gradient(90deg, #946d2e, #ffd578, #946d2e) 1;
  text-align: left;
  color: var(--sb-ink);
  font-size: var(--sb-text-sm);
  line-height: 1.6;
}
.sb-confirmed__callout-title {
  font-family: var(--sb-font-display);
  font-size: var(--sb-text-2xl);
  color: var(--sb-ink);
  margin-bottom: var(--sb-space-3);
  line-height: 1.2;
}
.sb-confirmed__callout p { margin: 0; }
.sb-confirmed__callout p + p { margin-top: var(--sb-space-3); }

/* --- Sidebar Summary (Steps 2-4) --- */
.sb-sidebar-summary__rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sb-sidebar-summary__row {
  font-size: var(--sb-text-sm);
  color: rgba(255,255,255,0.75);
  font-weight: 500;
}
.sb-sidebar-summary__edit {
  margin-top: 12px;
  background: none;
  border: 1px solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.5);
  font-family: var(--sb-font-ui);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: var(--sb-radius-sm);
  cursor: pointer;
  transition: all var(--sb-duration-base) var(--sb-ease);
}
.sb-sidebar-summary__edit:hover {
  border-color: rgba(255,255,255,0.3);
  color: rgba(255,255,255,0.8);
}

/* --- Responsive: multi-step mobile --- */
@media (max-width: 720px) {
  .sb-form,
  .sb-payment,
  .sb-confirmed { padding: var(--sb-space-5); }
  .sb-form__grid { grid-template-columns: 1fr; }
  .sb-form__grid--3 { grid-template-columns: 1fr 1fr; }
  .sb-steps { padding: var(--sb-space-3) var(--sb-space-4); }
  .sb-step__label { display: none; }
}

/* =========================================================================
 * Conversational Step 2 Layout
 *
 * Typeform-style micro-step flow inside Step 2. Uses the same field IDs as the
 * classic layout so downstream payload/validation code is mode-agnostic.
 * ======================================================================= */

.sb-convo {
	/* Width, padding and positioning all inherited from .sb-form
	 * (max-width: 660px, padding: 48px all sides). Overriding any of these
	 * here would produce inconsistent gutters between classic and convo
	 * layouts or eat the horizontal padding. */
	display: flex;
	flex-direction: column;
}

.sb-convo__head {
	display: grid;
	grid-template-columns: 36px 1fr 36px;
	align-items: center;
	margin-bottom: var(--sb-space-6);
}

.sb-convo__back {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1px solid var(--sb-chalk);
	background: transparent;
	color: var(--sb-stone);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	transition: background 150ms ease, color 150ms ease, opacity 150ms ease;
}

.sb-convo__back:hover:not(:disabled) {
	background: var(--sb-linen);
	color: var(--sb-ink);
}

.sb-convo__back:disabled {
	opacity: 0.22;
	cursor: not-allowed;
}

.sb-convo__progress {
	display: flex;
	gap: 6px;
	justify-content: center;
	align-items: center;
}

.sb-convo__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--sb-chalk);
	transition: all 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

.sb-convo__dot--done {
	background: var(--sb-clay);
}

.sb-convo__dot--active {
	width: 24px;
	background: var(--sb-clay);
	border-radius: 4px;
}

.sb-convo__screens {
	position: relative;
	flex: 1;
	min-height: 360px;
}

.sb-convo__screen {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 280ms cubic-bezier(0.22, 1, 0.36, 1),
		transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
	pointer-events: none;
}

.sb-convo__screen--active {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

.sb-convo__screen--exit {
	opacity: 0;
	transform: translateY(-16px);
}

.sb-convo__counter {
	font-size: var(--sb-text-xs);
	color: var(--sb-dust);
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	margin-bottom: var(--sb-space-3);
}

.sb-convo__question {
	font-family: var(--sb-font-display);
	font-size: var(--sb-text-2xl);
	color: var(--sb-ink);
	line-height: 1.25;
	margin: 0 0 var(--sb-space-2);
	font-weight: 400;
}

.sb-convo__helper {
	font-size: var(--sb-text-base);
	color: var(--sb-stone);
	margin-bottom: var(--sb-space-5);
	line-height: 1.5;
}

.sb-convo__actions {
	display: flex;
	align-items: center;
	gap: var(--sb-space-2);
	margin-top: var(--sb-space-5);
	flex-wrap: wrap;
}

.sb-convo__hint {
	font-size: var(--sb-text-xs);
	color: var(--sb-dust);
	margin-left: auto;
}

.sb-convo__hint kbd {
	font-family: inherit;
	font-size: 11px;
	padding: 2px 6px;
	background: var(--sb-linen);
	border: 1px solid var(--sb-chalk);
	border-radius: var(--sb-radius-sm);
	color: var(--sb-stone);
}

/* Shake animation for invalid field on advance attempt. */
@keyframes sb-convo-shake {
	0%, 100% { transform: translateX(0); }
	20%      { transform: translateX(-4px); }
	40%      { transform: translateX(4px); }
	60%      { transform: translateX(-3px); }
	80%      { transform: translateX(3px); }
}

.sb-convo__screen--error .sb-input {
	border-color: var(--sb-error);
	animation: sb-convo-shake 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Custom file dropzone used on the Upload screen. Wraps a visually-hidden
 * native <input type="file"> with the same id as the classic layout so the
 * submission payload is identical. */

.sb-dropzone {
	border: 2px dashed var(--sb-chalk);
	border-radius: var(--sb-radius-lg);
	padding: var(--sb-space-6) var(--sb-space-4);
	text-align: center;
	background: var(--sb-linen);
	cursor: pointer;
	transition: border-color 150ms ease, background 150ms ease, color 150ms ease;
	color: var(--sb-stone);
}

.sb-dropzone:hover,
.sb-dropzone:focus-visible,
.sb-dropzone--over {
	border-color: var(--sb-clay);
	background: var(--sb-clay-pale);
	outline: none;
}

.sb-dropzone--filled {
	border-style: solid;
	border-color: var(--sb-clay);
	background: var(--sb-clay-pale);
}

.sb-dropzone__icon {
	display: block;
	margin: 0 auto var(--sb-space-2);
	color: var(--sb-dust);
}

.sb-dropzone--filled .sb-dropzone__icon,
.sb-dropzone:hover .sb-dropzone__icon {
	color: var(--sb-clay);
}

.sb-dropzone__primary {
	font-size: var(--sb-text-base);
	color: var(--sb-ink);
	font-weight: 600;
	margin-bottom: 4px;
}

.sb-dropzone__secondary {
	font-size: var(--sb-text-xs);
	color: var(--sb-dust);
}

/* Mobile adjustments */
@media (max-width: 640px) {
	.sb-convo__question { font-size: var(--sb-text-xl); }
	.sb-convo__screens { min-height: 340px; }
	.sb-convo__hint { display: none; }
}