/* ============================================================================
   SimpleSpa Online Booking v6 (BETA) — sspa.online.v6.css
   Host: https://my.simplespa.com/css/sspa.online.v6.css
   - Every rule is scoped to body.sspa-v6, so this file is inert on v5 pages.
   - Selectors are "body.sspa-v6 #sspaOnlineBookingV5 ..." to out-rank the
     "#sspaOnlineBookingV5 ..." rules booking.v5.js injects at runtime.
   - Per-location rich themes (locinfo.v5 applyLocationTheme) still win:
     the v6 tokens fall back to the theme's --ob-* variables first.
   ============================================================================ */

body.sspa-v6 {
  --ob6-accent: var(--ob-primary, #1F5FBF);
  --ob6-on-accent: var(--ob-on-primary, #fff);
  --ob6-ink: var(--ob-text, #14181F);
  --ob6-muted: #5B6472;
  --ob6-line: var(--ob-border, #E3E6EB);
  --ob6-line-strong: #D9DDE3;
  --ob6-bg: var(--ob-bg, #F4F5F7);
  --ob6-surface: var(--ob-surface, #fff);
  --ob6-ok: #1E7A4C;
  --ob6-ok-bg: #EAF5EE;
  --ob6-sale: #9A2E18;
  --ob6-sale-bg: #FCE9E4;
  --ob6-sel-bg: #E8F0FB;
  --ob6-sel-ink: #174A94;
  --ob6-radius: 16px;

  background: var(--ob6-bg);
  color: var(--ob6-ink);
  font-family: var(--ob-font-body, 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif);
}

/* ---------------------------------------------------------------------------
   Business strip (replaces the v5 left sidebar)
   --------------------------------------------------------------------------- */
body.sspa-v6 .ob6-biz {
  background: var(--ob6-surface);
  border-bottom: 1px solid var(--ob6-line);
}
body.sspa-v6 .ob6-biz-in {
  max-width: 1280px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding-top: 12px;
  padding-bottom: 12px;
}
body.sspa-v6 .ob6-biz-txt { flex: 1 1 auto; min-width: 0; }
body.sspa-v6 .ob6-biz-name {
  font-family: var(--ob-font-heading, inherit);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.sspa-v6 .ob6-biz-sub {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 12px;
  margin-top: 2px;
  font-size: 13px;
  color: var(--ob6-muted);
}
body.sspa-v6 .ob6-today { font-weight: 600; color: var(--ob6-ok); }
body.sspa-v6 .ob6-today.is-closed { color: var(--ob6-muted); }
body.sspa-v6 .ob6-today:empty, body.sspa-v6 .ob6-biz-addr:empty { display: none; }

body.sspa-v6 .ob6-biz-actions { display: flex; gap: 8px; flex: 0 0 auto; }
body.sspa-v6 .ob6-ibtn {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid var(--ob6-line);
  background: var(--ob6-surface);
  color: var(--ob6-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  text-decoration: none;
  cursor: pointer;
}
body.sspa-v6 .ob6-ibtn:hover, body.sspa-v6 .ob6-ibtn:focus-visible { background: var(--ob6-bg); color: var(--ob6-ink); }
body.sspa-v6 .ob6-ibtn:focus-visible { outline: 2px solid var(--ob6-accent); outline-offset: 2px; }
body.sspa-v6 .ob6-ibtn[hidden], body.sspa-v6 .ob6-badge[hidden] { display: none; }
body.sspa-v6 .ob6-badge {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ob6-accent);
}

@media (max-width: 575.98px) {
  body.sspa-v6 .ob6-biz-name { font-size: 16px; }
  body.sspa-v6 .ob6-biz-addr { display: none; }
  body.sspa-v6 .ob6-biz-in { gap: 10px; }
}

/* Info drawer */
body.sspa-v6 .ob6-drawer { max-width: 420px; }
body.sspa-v6 .ob6-drawer .offcanvas-title { font-weight: 700; }

/* ---------------------------------------------------------------------------
   Page + root (no outer card in v6)
   --------------------------------------------------------------------------- */
body.sspa-v6 .ob6-wrap { max-width: 1280px; padding-top: 24px; padding-bottom: 48px; }
body.sspa-v6 #sspaOnlineBookingV5 { background: transparent; border: 0; box-shadow: none; }

/* ---------------------------------------------------------------------------
   Stepper
   --------------------------------------------------------------------------- */
body.sspa-v6 .ob6-head { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
body.sspa-v6 .ob6-stepper {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
}
body.sspa-v6 .ob6-step { flex: 0 0 auto; }
body.sspa-v6 .ob6-sep { flex: 1 1 24px; min-width: 12px; height: 2px; border-radius: 2px; background: var(--ob6-line); }
body.sspa-v6 .ob6-sep.is-done { background: var(--ob6-ok); }
body.sspa-v6 .ob6-step-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 4px;
  border: 0;
  background: none;
  border-radius: 10px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--ob6-muted);
  cursor: default;
}
body.sspa-v6 .ob6-step-btn:disabled { opacity: 1; }
body.sspa-v6 .ob6-step-btn:enabled { cursor: pointer; }
body.sspa-v6 .ob6-step-btn:enabled:hover .ob6-lbl { text-decoration: underline; }
body.sspa-v6 .ob6-step-btn:focus-visible { outline: 2px solid var(--ob6-accent); outline-offset: 2px; }
body.sspa-v6 .ob6-dot {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1.5px solid #C9CED6;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}
body.sspa-v6 .ob6-step.is-active .ob6-step-btn,
body.sspa-v6 .ob6-step.is-done .ob6-step-btn { color: var(--ob6-ink); }
body.sspa-v6 .ob6-step.is-active .ob6-dot {
  background: var(--ob6-accent);
  border-color: var(--ob6-accent);
  color: var(--ob6-on-accent);
}
body.sspa-v6 .ob6-step.is-done .ob6-dot {
  background: var(--ob6-ok-bg);
  border-color: var(--ob6-ok-bg);
  color: var(--ob6-ok);
  font-size: 0;
}
body.sspa-v6 .ob6-step.is-done .ob6-dot::after {
  content: "\f00c";              /* FontAwesome 4.7 check */
  font-family: FontAwesome;
  font-size: 12px;
}
@media (max-width: 767.98px) {
  body.sspa-v6 .ob6-step:not(.is-active) .ob6-lbl {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  body.sspa-v6 .ob6-stepper { gap: 6px; }
}

/* Title */
body.sspa-v6 .ob6-title {
  margin: 0 0 16px;
  font-family: var(--ob-font-heading, inherit);
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ob6-ink);
}
@media (max-width: 575.98px) { body.sspa-v6 .ob6-title { font-size: 22px; } }

/* ---------------------------------------------------------------------------
   Step 1 — search, staff, categories, services
   --------------------------------------------------------------------------- */
body.sspa-v6 #sspaOnlineBookingV5 .ob-search-input {
  height: 48px;
  border-radius: 12px;
  border-color: var(--ob6-line-strong);
  font-size: 15px;
  background: var(--ob6-surface);
}

/* v6 uses chips at every width — the v5 mobile dropdown stays in the DOM, hidden */
body.sspa-v6 #sspaOnlineBookingV5 #obCatsMobile { display: none !important; }

/* Neutralise the v5 two-column sidebar rules in sspa.online.css
   (#obCatsCol{flex:0 0 260px !important} desktop / {display:none !important} < 992px,
    #obSvcsCol{flex:1 1 auto / width:100% !important}). v6 stacks chips over the list. */
body.sspa-v6 #sspaOnlineBookingV5 #obCatsCol,
body.sspa-v6 #sspaOnlineBookingV5 #obSvcsCol {
  display: block !important;
  flex: none !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  float: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Staff picker (v5 renderStaffFilter): left-aligned under the v6 title, not centered */
body.sspa-v6 #sspaOnlineBookingV5 #obTopFiltersRow { margin-bottom: 14px; }
body.sspa-v6 #sspaOnlineBookingV5 .ob-staff-cards { justify-content: flex-start !important; }
body.sspa-v6 #sspaOnlineBookingV5 .ob-staff-cards-title { text-align: left !important; }
/* 5.106 per-service "With [staff]" dropdown — service rows + "Your visit" */
body.sspa-v6 #sspaOnlineBookingV5 .ob-svc-staff { font-size: 13px; }
body.sspa-v6 #sspaOnlineBookingV5 .ob-svc-staff .form-select {
  min-height: 40px;
  border-radius: 10px;
  border-color: var(--ob6-line-strong);
  font-size: 14px;
  font-weight: 600;
  color: var(--ob6-ink);
  background-color: var(--ob6-surface);
}
body.sspa-v6 #sspaOnlineBookingV5 .ob-svc-staff .form-select:focus {
  border-color: var(--ob6-accent);
  box-shadow: 0 0 0 3px var(--ob6-sel-bg);
}
body.sspa-v6 #sspaOnlineBookingV5 #obServiceList .ob-svc-staff { cursor: default; }
@media (max-width: 575.98px) {
  body.sspa-v6 #sspaOnlineBookingV5 #obServiceList .ob-svc-staff .form-select { max-width: none !important; flex: 1 1 auto; }
}

body.sspa-v6 #sspaOnlineBookingV5 .ob-staff-locked-banner {
  min-height: 44px;
  border-radius: 12px;
  border-color: var(--ob6-sel-bg);
  background: var(--ob6-sel-bg);
  color: var(--ob6-sel-ink);
  font-size: 14px;
  font-weight: 600;
}

body.sspa-v6 #sspaOnlineBookingV5 .ob6-cats { margin-bottom: 18px; }
body.sspa-v6 #sspaOnlineBookingV5 #obCategoryList {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap;
  gap: 8px;
  max-height: none !important;
  overflow: visible;
  border-radius: 0;
}
body.sspa-v6 #sspaOnlineBookingV5 #obCategoryList .list-group-item {
  flex: 0 0 auto !important;
  width: auto !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: flex-start !important;
  gap: 6px;
  min-height: 40px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 14px !important;
  border: 1px solid var(--ob6-line-strong) !important;
  border-radius: 999px !important;
  background: var(--ob6-surface);
  color: #2A313C;
  font-size: 14px !important;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: none !important;
}
body.sspa-v6 #sspaOnlineBookingV5 #obCategoryList .list-group-item:hover { border-color: #AEB5C0; }
body.sspa-v6 #sspaOnlineBookingV5 #obCategoryList .list-group-item.active {
  background: var(--ob6-ink);
  border-color: var(--ob6-ink);
  color: #fff;
}
body.sspa-v6 #sspaOnlineBookingV5 #obCategoryList .ob-cat-count {
  margin: 0 !important;
  min-width: 0 !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  font-size: 13px !important;
  font-weight: 500;
  line-height: 1.2 !important;
  color: var(--ob6-muted) !important;
}
body.sspa-v6 #sspaOnlineBookingV5 #obCategoryList .list-group-item.active .ob-cat-count { color: #C9CED6 !important; }
body.sspa-v6 #sspaOnlineBookingV5 #obCategoryList .list-group-item.active,
body.sspa-v6 #sspaOnlineBookingV5 #obCategoryList .list-group-item.active * { color: #fff; }
body.sspa-v6 #sspaOnlineBookingV5 #obCategoryList .ob-cat-specials {
  background: #FFF6E0;
  border-color: #F0D9A8 !important;
  color: #6B4700;
}
body.sspa-v6 #sspaOnlineBookingV5 #obCategoryList .ob-cat-specials.active {
  background: var(--ob6-ink) !important;
  border-color: var(--ob6-ink) !important;
  color: #fff !important;
}
@media (max-width: 991.98px) {
  body.sspa-v6 #sspaOnlineBookingV5 #obCategoryList {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  body.sspa-v6 #sspaOnlineBookingV5 #obCategoryList::-webkit-scrollbar { display: none; }
}

/* Staff cards (rendered by v5 renderStaffFilter) */
body.sspa-v6 #sspaOnlineBookingV5 .ob-staff-cards-title { font-size: 14px; font-weight: 600; color: var(--ob6-ink); }
body.sspa-v6 #sspaOnlineBookingV5 .ob-staff-card { border-width: 1.5px; border-color: var(--ob6-line); border-radius: 14px; min-width: 84px; }
body.sspa-v6 #sspaOnlineBookingV5 .ob-staff-card.active { border-color: var(--ob6-accent); background: var(--ob6-sel-bg); }
body.sspa-v6 #sspaOnlineBookingV5 .ob-staff-card-ava.ob-ava-any { background: var(--ob6-sel-bg); color: var(--ob6-accent); }

/* Services */
body.sspa-v6 #sspaOnlineBookingV5 #obServiceList {
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-radius: 0;
}
body.sspa-v6 #sspaOnlineBookingV5 #obServiceList .list-group-item {
  margin: 0;
  padding: 18px 20px;
  border: 1px solid var(--ob6-line);
  border-radius: var(--ob6-radius);
  background: var(--ob6-surface);
}
body.sspa-v6 #sspaOnlineBookingV5 #obServiceList .ob-svc-item {
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}
body.sspa-v6 #sspaOnlineBookingV5 #obServiceList .ob-svc-item:hover { border-color: #AEB5C0; }
/* "in cart" state: v5 renders the Add button disabled */
body.sspa-v6 #sspaOnlineBookingV5 #obServiceList .ob-svc-item:has([data-ob-add][disabled]) {
  border-color: var(--ob6-accent);
  box-shadow: 0 0 0 1px var(--ob6-accent);
}
body.sspa-v6 #sspaOnlineBookingV5 #obServiceList .ob-svc-special {
  border-left-width: 1px !important;
  background: var(--ob6-surface) !important;
}
body.sspa-v6 #sspaOnlineBookingV5 .ob-svc-title { font-size: 16px; font-weight: 700; color: var(--ob6-ink); }
body.sspa-v6 #sspaOnlineBookingV5 .ob-special-badge {
  background: var(--ob6-sale-bg);
  color: var(--ob6-sale);
  font-weight: 700;
}
body.sspa-v6 #sspaOnlineBookingV5 .ob-svc-notes { font-size: 14px; line-height: 1.55; margin-top: 6px; color: var(--ob6-muted); }
body.sspa-v6 #sspaOnlineBookingV5 .ob-svc-notes.ob6-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
body.sspa-v6 #sspaOnlineBookingV5 .ob-svc-notes.ob6-clamp.ob6-open { display: block; -webkit-line-clamp: unset; overflow: visible; }
body.sspa-v6 #sspaOnlineBookingV5 .ob6-more {
  border: 0;
  background: none;
  padding: 4px 0;
  min-height: 32px;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--ob6-accent);
  cursor: pointer;
}
body.sspa-v6 #sspaOnlineBookingV5 .ob-svc-meta { font-size: 14px; margin-top: 8px; }
body.sspa-v6 #sspaOnlineBookingV5 .ob-svc-meta .text-danger { color: var(--ob6-sale) !important; }

body.sspa-v6 #sspaOnlineBookingV5 #obServiceList .ob-svc-btn {
  min-width: 92px;
  min-height: 42px;
  border-radius: 12px;
  font-weight: 700;
}
body.sspa-v6 #sspaOnlineBookingV5 #obServiceList .ob-svc-btn.btn-dark {
  background: var(--ob6-surface);
  color: var(--ob6-ink);
  border: 1px solid var(--ob6-ink);
}
body.sspa-v6 #sspaOnlineBookingV5 #obServiceList .ob-svc-btn.btn-dark:hover {
  background: var(--ob6-ink);
  color: #fff;
}
body.sspa-v6 #sspaOnlineBookingV5 #obServiceList .ob-svc-btn.btn-light[disabled] {
  background: var(--ob6-sel-bg);
  border-color: var(--ob6-sel-bg);
  color: var(--ob6-sel-ink);
  opacity: 1;
}
body.sspa-v6 #sspaOnlineBookingV5 #obServiceList .ob-svc-btn.btn-light[disabled]::before {
  content: "\f00c";
  font-family: FontAwesome;
  margin-right: 6px;
}

/* ---------------------------------------------------------------------------
   Step 2 — date & time
   --------------------------------------------------------------------------- */
body.sspa-v6 #sspaOnlineBookingV5 .ob6-panel {
  background: var(--ob6-surface);
  border: 1px solid var(--ob6-line);
  border-radius: 20px;
  padding: 20px;
}
body.sspa-v6 #sspaOnlineBookingV5 #obWeekStrip { gap: 8px; }
body.sspa-v6 #sspaOnlineBookingV5 #obWeekStrip .ob-daychip {
  min-width: 68px;
  padding: 10px 8px;
  border: 1px solid var(--ob6-line-strong);
  border-radius: 14px;
  background: var(--ob6-surface);
  color: var(--ob6-ink);
}
body.sspa-v6 #sspaOnlineBookingV5 #obWeekStrip .ob-daychip .d1 { font-size: 12px; font-weight: 700; color: var(--ob6-muted); text-transform: uppercase; letter-spacing: .03em; }
body.sspa-v6 #sspaOnlineBookingV5 #obWeekStrip .ob-daychip .d2 { font-size: 14px; font-weight: 700; margin-top: 4px; }
body.sspa-v6 #sspaOnlineBookingV5 #obWeekStrip .ob-daychip.active {
  background: var(--ob6-ink);
  border-color: var(--ob6-ink);
  color: #fff;
}
body.sspa-v6 #sspaOnlineBookingV5 #obWeekStrip .ob-daychip.active .d1 { color: #C9CED6; }
body.sspa-v6 #sspaOnlineBookingV5 #obWeekStrip .ob-daychip-closed { background: var(--ob6-bg); opacity: .6; }

body.sspa-v6 #sspaOnlineBookingV5 #obDateLabel {
  background: var(--ob6-bg);
  border: 0 !important;
  border-radius: 12px;
  color: var(--ob6-ink);
}

body.sspa-v6 #sspaOnlineBookingV5 .ob6-slot-group { margin-bottom: 18px; }
body.sspa-v6 #sspaOnlineBookingV5 .ob6-slot-group:has(.ob6-slots:empty) { display: none; }
body.sspa-v6 #sspaOnlineBookingV5 .ob6-slot-head { font-size: 13px; font-weight: 700; color: var(--ob6-muted); margin-bottom: 8px; }
body.sspa-v6 #sspaOnlineBookingV5 .ob6-slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
  gap: 8px;
}
/* v5 appends " (3 staff)" / " (unavailable)" to labels — let them wrap */
body.sspa-v6 #sspaOnlineBookingV5 .ob6-slots .btn { white-space: normal; line-height: 1.25; }
body.sspa-v6 #sspaOnlineBookingV5 .ob6-slots .btn {
  width: 100%;
  min-height: 46px;
  margin: 0 !important;
  padding: 0 8px !important;
  border: 1px solid var(--ob6-line-strong);
  border-radius: 12px;
  background: var(--ob6-surface);
  color: var(--ob6-ink);
  font-size: 15px !important;
  font-weight: 600;
  text-align: center !important;
}
body.sspa-v6 #sspaOnlineBookingV5 .ob6-slots .btn:hover:not(:disabled) {
  background: var(--ob6-accent);
  border-color: var(--ob6-accent);
  color: var(--ob6-on-accent);
}
body.sspa-v6 #sspaOnlineBookingV5 .ob6-slots .btn .fa-clock-o { display: none; }
body.sspa-v6 #sspaOnlineBookingV5 .ob6-slots .btn-outline-danger {
  border-color: #E8B4A8;
  color: var(--ob6-sale);
  background: var(--ob6-sale-bg);
}
@media (max-width: 575.98px) {
  body.sspa-v6 #sspaOnlineBookingV5 .ob6-panel { padding: 14px; border-radius: 16px; }
  body.sspa-v6 #sspaOnlineBookingV5 .ob6-slots { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------------------
   "Your visit" (cart column) — desktop only; v5 owns the mobile bottom bar
   --------------------------------------------------------------------------- */
@media (min-width: 992px) {
  body.sspa-v6 #sspaOnlineBookingV5 #obCartCol > .ob6-visit {
    position: sticky;
    top: 20px;
    height: auto !important;
    padding: 22px !important;
    background: var(--ob6-surface) !important;
    border: 1px solid var(--ob6-line) !important;
    border-radius: 20px !important;
  }
}
body.sspa-v6 #sspaOnlineBookingV5 .ob6-visit-title { font-size: 17px; font-weight: 800; }
body.sspa-v6 #sspaOnlineBookingV5 #obCartList { gap: 2px; border-radius: 0; }
body.sspa-v6 #sspaOnlineBookingV5 #obCartList .list-group-item {
  padding: 10px 0;
  border: 0;
  border-bottom: 1px solid var(--ob6-line);
  border-radius: 0;
  background: transparent;
}
body.sspa-v6 #sspaOnlineBookingV5 #obCartList .list-group-item:last-child { border-bottom: 0; }
body.sspa-v6 #sspaOnlineBookingV5 #obCartList [data-ob-remove] {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: var(--ob6-bg);
  color: var(--ob6-muted);
}
body.sspa-v6 #sspaOnlineBookingV5 #obCartList [data-ob-remove]:hover { background: var(--ob6-sale-bg); color: var(--ob6-sale); }
body.sspa-v6 #sspaOnlineBookingV5 #obCartPrice { font-size: 22px; font-weight: 800; }
body.sspa-v6 #sspaOnlineBookingV5 #obContinueBtn {
  min-height: 52px;
  border-radius: 14px;
  background: var(--ob6-accent);
  border-color: var(--ob6-accent);
  color: var(--ob6-on-accent);
  font-size: 16px;
  font-weight: 700;
}
body.sspa-v6 #sspaOnlineBookingV5 #obContinueBtn:disabled { opacity: .45; }

/* Step 3/4 confirm buttons rendered by v5 */
body.sspa-v6 #sspaOnlineBookingV5 #obConfirmBookingBtn {
  min-height: 52px;
  border-radius: 14px;
  background: var(--ob6-accent);
  border-color: var(--ob6-accent);
  color: var(--ob6-on-accent);
  font-weight: 700;
}
body.sspa-v6 #sspaOnlineBookingV5 #obInfoHost .card { border-radius: 20px; border: 1px solid var(--ob6-line) !important; box-shadow: none !important; }
body.sspa-v6 #sspaOnlineBookingV5 #obInfoHost .form-control { min-height: 46px; border-radius: 12px; }

/* ===========================================================================
   6.004 — Buttons, mobile bottom bar, small screens
   =========================================================================== */

/* Safety net: if the v6 UI script is late/missing and v5 moved the category
   list into its mobile menu, show that menu instead of losing the categories. */
body.sspa-v6 #sspaOnlineBookingV5 #obCatsMobile:has(#obCategoryList) { display: block !important; }

/* ---------- Service row: title + compact button never overlap ---------- */
body.sspa-v6 #sspaOnlineBookingV5 #obServiceList .list-group-item { flex-wrap: nowrap; display: block; }
body.sspa-v6 #sspaOnlineBookingV5 .ob-svc-top {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  column-gap: 12px;
}
body.sspa-v6 #sspaOnlineBookingV5 .ob-svc-title { min-width: 0; overflow-wrap: anywhere; line-height: 1.3; }
body.sspa-v6 #sspaOnlineBookingV5 .ob-special-badge { display: inline-block; margin-left: 6px; vertical-align: 2px; }

/* ---------- Add / Added buttons ---------- */
body.sspa-v6 #sspaOnlineBookingV5 #obServiceList .ob-svc-btn {
  position: static !important;
  width: auto !important;
  min-width: 88px;
  min-height: 44px;
  padding: 0 16px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  box-shadow: none;
}
body.sspa-v6 #sspaOnlineBookingV5 #obServiceList .ob-svc-btn.btn-dark::before {
  content: "\f067";               /* FA 4.7 plus */
  font-family: FontAwesome;
  font-size: 12px;
  font-weight: normal;
}
body.sspa-v6 #sspaOnlineBookingV5 #obServiceList .ob-svc-btn.btn-dark {
  background: var(--ob6-surface);
  border: 1.5px solid var(--ob6-ink);
  color: var(--ob6-ink);
}
body.sspa-v6 #sspaOnlineBookingV5 #obServiceList .ob-svc-btn.btn-dark:hover,
body.sspa-v6 #sspaOnlineBookingV5 #obServiceList .ob-svc-btn.btn-dark:focus-visible {
  background: var(--ob6-ink);
  color: #fff;
}
body.sspa-v6 #sspaOnlineBookingV5 #obServiceList .ob-svc-btn:focus-visible { outline: 2px solid var(--ob6-accent); outline-offset: 2px; }
body.sspa-v6 #sspaOnlineBookingV5 #obServiceList .ob-svc-btn.btn-light[disabled] { border: 1.5px solid var(--ob6-sel-bg); }

/* ---------- Primary / disabled Continue ---------- */
body.sspa-v6 #sspaOnlineBookingV5 #obContinueBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
body.sspa-v6 #sspaOnlineBookingV5 #obContinueBtn:disabled {
  opacity: 1;
  background: #E3E6EB;
  border-color: #E3E6EB;
  color: #5B6472;
}
body.sspa-v6 #sspaOnlineBookingV5 #obContinueBtn:not(:disabled):hover { filter: brightness(.94); }

/* Search clear: real 44px target */
body.sspa-v6 #sspaOnlineBookingV5 .ob-search-clear { width: 40px; height: 40px; border-radius: 10px; }

/* ---------- Mobile / tablet bottom bar (< 992px; v5 makes #obCartCol fixed) ---------- */
@media (max-width: 991.98px) {
  /* nothing in the cart -> no bar at all (the service rows are the call to action) */
  body.sspa-v6.ob6-cart-empty #sspaOnlineBookingV5[data-ob-step="1"] #obCartCol { display: none !important; }
  body.sspa-v6.ob6-cart-empty #sspaOnlineBookingV5[data-ob-step="1"] { padding-bottom: 24px !important; }

  body.sspa-v6 #sspaOnlineBookingV5 #obCartCol {
    padding: 0 !important;
    background: none !important;
  }
  body.sspa-v6 #sspaOnlineBookingV5 #obCartCol > .ob6-visit {
    margin: 0 !important;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    border: 0 !important;
    border-top: 1px solid var(--ob6-line) !important;
    border-radius: 18px 18px 0 0 !important;
    background: var(--ob6-surface) !important;
    box-shadow: 0 -10px 30px rgba(20, 24, 31, .10) !important;
  }

  /* collapsed = one compact row: [count + total]  [Continue] */
  body.sspa-v6 #sspaOnlineBookingV5 #obCartCol.ob-cart-collapsed > .ob6-visit {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "head btn" "totals btn";
    align-items: center;
    column-gap: 12px;
  }
  body.sspa-v6 #sspaOnlineBookingV5 #obCartCol.ob-cart-collapsed > .ob6-visit > .d-flex:first-child { grid-area: head; }
  body.sspa-v6 #sspaOnlineBookingV5 #obCartCol.ob-cart-collapsed .ob-cart-totals { grid-area: totals; }
  body.sspa-v6 #sspaOnlineBookingV5 #obCartCol.ob-cart-collapsed #obContinueBtn { grid-area: btn; }
  body.sspa-v6 #sspaOnlineBookingV5 #obCartCol.ob-cart-collapsed hr,
  body.sspa-v6 #sspaOnlineBookingV5 #obCartCol.ob-cart-collapsed .ob6-hint,
  body.sspa-v6 #sspaOnlineBookingV5 #obCartCol.ob-cart-collapsed #obCartPriceRow > .text-muted { display: none !important; }
  body.sspa-v6 #sspaOnlineBookingV5 #obCartCol.ob-cart-collapsed #obCartPriceRow { margin: 2px 0 0 !important; justify-content: flex-start !important; }
  body.sspa-v6 #sspaOnlineBookingV5 #obCartCol.ob-cart-collapsed #obCartPrice { font-size: 18px; }
  body.sspa-v6 #sspaOnlineBookingV5 #obCartCol.ob-cart-collapsed #obCartDurationRow { display: none !important; }
  body.sspa-v6 #sspaOnlineBookingV5 #obCartCol.ob-cart-collapsed > .ob6-visit > .d-flex:first-child { min-width: 0; }
  body.sspa-v6 #sspaOnlineBookingV5 #obCartCol.ob-cart-collapsed .ob6-visit-title {
    white-space: nowrap;
  }

  /* header row doubles as the expand toggle (v5 binds the click on .fw-semibold) */
  body.sspa-v6 #sspaOnlineBookingV5 #obCartCol .ob6-visit-title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
  }
  body.sspa-v6 #sspaOnlineBookingV5 #obCartCol .ob6-visit-title::after {
    content: "\f077";             /* chevron-up */
    font-family: FontAwesome;
    font-size: 11px;
    color: var(--ob6-muted);
    transition: transform .15s ease;
  }
  body.sspa-v6 #sspaOnlineBookingV5 #obCartCol:not(.ob-cart-collapsed) .ob6-visit-title::after { transform: rotate(180deg); }
  body.sspa-v6 #sspaOnlineBookingV5 #obCartCol.ob-cart-collapsed > .ob6-visit > .d-flex:first-child { justify-content: flex-start !important; gap: 8px; }
  body.sspa-v6 #sspaOnlineBookingV5 #obCartCol .badge {
    order: -1;
    min-width: 24px;
    padding: 4px 7px;
    border-radius: 999px;
    background: var(--ob6-accent) !important;
    color: var(--ob6-on-accent);
  }

  body.sspa-v6 #sspaOnlineBookingV5 #obCartCol.ob-cart-collapsed #obContinueBtn {
    width: auto !important;
    min-height: 48px;
    margin: 0 !important;
    padding: 0 22px;
    font-size: 15px;
  }

  /* expanded: list scrolls inside the sheet instead of covering the page */
  body.sspa-v6 #sspaOnlineBookingV5 #obCartCol:not(.ob-cart-collapsed) #obCartList {
    max-height: 42vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  body.sspa-v6 #sspaOnlineBookingV5 #obCartCol:not(.ob-cart-collapsed) hr { margin: 10px 0 !important; }
  body.sspa-v6 #sspaOnlineBookingV5 #obCartCol .ob6-hint { display: none; }
}

/* ---------- Small phones (< 576px) ---------- */
@media (max-width: 575.98px) {
  /* v5 navbar: slimmer */
  body.sspa-v6 #lcnnavbar { padding-top: 6px; padding-bottom: 6px; }
  body.sspa-v6 #lcnnavbar .navbar-brand img { max-height: 36px !important; }
  body.sspa-v6 #lcnnavbar .navbar-toggler { padding: 6px 10px; }

  /* business strip */
  body.sspa-v6 .ob6-biz-in { padding-top: 8px; padding-bottom: 8px; }
  body.sspa-v6 .ob6-biz-sub { font-size: 12px; }
  body.sspa-v6 .ob6-ibtn { width: 40px; height: 40px; border-radius: 10px; font-size: 16px; }
  body.sspa-v6 .ob6-biz-actions { gap: 6px; }

  body.sspa-v6 .ob6-wrap { padding-top: 12px; padding-bottom: 24px; }

  /* stepper carries the step name -> drop the duplicate H1 */
  body.sspa-v6 .ob6-head { margin-bottom: 12px; }
  body.sspa-v6 .ob6-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  body.sspa-v6 .ob6-dot { width: 26px; height: 26px; font-size: 12px; }
  body.sspa-v6 .ob6-step-btn { min-height: 40px; padding: 0 2px; font-size: 14px; }

  body.sspa-v6 #sspaOnlineBookingV5 .ob-search-input { height: 46px; font-size: 16px; } /* 16px stops iOS zoom */

  /* staff: compact cards, row bleeds to the screen edge and scrolls */
  body.sspa-v6 #sspaOnlineBookingV5 .ob-staff-cards-title { font-size: 13px; margin-bottom: 6px; }
  body.sspa-v6 #sspaOnlineBookingV5 .ob-staff-cards {
    margin: 0 calc(-1 * var(--bs-gutter-x, 1.5rem) * .5);
    padding: 2px calc(var(--bs-gutter-x, 1.5rem) * .5) 6px;
    scroll-padding-left: calc(var(--bs-gutter-x, 1.5rem) * .5);
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  body.sspa-v6 #sspaOnlineBookingV5 .ob-staff-cards::-webkit-scrollbar { display: none; }
  body.sspa-v6 #sspaOnlineBookingV5 .ob-staff-card {
    min-width: 76px;
    max-width: 92px;
    padding: 8px 6px;
    gap: 4px;
    scroll-snap-align: start;
  }
  body.sspa-v6 #sspaOnlineBookingV5 .ob-staff-card-ava { width: 36px; height: 36px; font-size: 16px; }
  body.sspa-v6 #sspaOnlineBookingV5 .ob-staff-card-name { font-size: 12px; max-width: 80px; }

  /* edge-to-edge scrollers: undo v5/v6 width:100% so the negative margins reach the screen edge */
  body.sspa-v6 #sspaOnlineBookingV5 #obCatsCol,
  body.sspa-v6 #sspaOnlineBookingV5 .ob-staff-cards { width: auto !important; }

  /* category chips: edge-to-edge scroller */
  body.sspa-v6 #sspaOnlineBookingV5 .ob6-cats { margin: 0 calc(-1 * var(--bs-gutter-x, 1.5rem) * .5) 14px; }
  body.sspa-v6 #sspaOnlineBookingV5 #obCategoryList { padding: 2px calc(var(--bs-gutter-x, 1.5rem) * .5) 4px; }
  body.sspa-v6 #sspaOnlineBookingV5 #obCategoryList .list-group-item { min-height: 38px !important; padding: 0 12px !important; font-size: 13px !important; }

  /* service cards */
  body.sspa-v6 #sspaOnlineBookingV5 #obServiceList { gap: 10px; }
  body.sspa-v6 #sspaOnlineBookingV5 #obServiceList .list-group-item { padding: 14px !important; border-radius: 14px; }
  body.sspa-v6 #sspaOnlineBookingV5 .ob-svc-title { font-size: 15px; }
  body.sspa-v6 #sspaOnlineBookingV5 .ob-special-badge { display: table; margin: 4px 0 0; }
  body.sspa-v6 #sspaOnlineBookingV5 .ob-svc-notes { font-size: 13px; }
  body.sspa-v6 #sspaOnlineBookingV5 .ob-svc-notes.ob6-clamp { -webkit-line-clamp: 2; }
  body.sspa-v6 #sspaOnlineBookingV5 #obServiceList .ob-svc-btn { min-width: 76px; min-height: 40px; padding: 0 14px !important; font-size: 13px; }

  /* step 2 */
  body.sspa-v6 #sspaOnlineBookingV5 #obWeekStrip .ob-daychip { min-width: 58px; padding: 8px 6px; }
}

/* ---------- Very small (< 360px, e.g. iPhone SE 1st gen / small Androids) ---------- */
@media (max-width: 359.98px) {
  body.sspa-v6 .ob6-biz-name { font-size: 15px; }
  body.sspa-v6 .ob6-ibtn { width: 36px; height: 36px; }
  body.sspa-v6 .ob6-sep { min-width: 6px; }
  body.sspa-v6 #sspaOnlineBookingV5 .ob6-slots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.sspa-v6 #sspaOnlineBookingV5 #obCartCol.ob-cart-collapsed #obContinueBtn { padding: 0 16px; font-size: 14px; }
  body.sspa-v6 #sspaOnlineBookingV5 #obServiceList .ob-svc-btn { min-width: 0; padding: 0 12px !important; }
  body.sspa-v6 #sspaOnlineBookingV5 #obCartCol .ob6-visit-title { font-size: 13px; }
}

/* ---------- 6.006 "Use saved" / "Not you? Forget" / Remember me ---------- */
body.sspa-v6 #sspaOnlineBookingV5 .ob6-saved {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--ob6-sel-bg);
}
body.sspa-v6 #sspaOnlineBookingV5 .ob6-saved a { display: inline-flex; align-items: center; min-height: 32px; }
body.sspa-v6 #sspaOnlineBookingV5 #obUseSavedLink { color: var(--ob6-sel-ink); }
body.sspa-v6 #sspaOnlineBookingV5 #obRememberMe { width: 18px; height: 18px; margin-top: 2px; }

/* ---------- 6.007 Categories: 2-row cap + "+N more" / "Show less" ---------- */
body.sspa-v6 #sspaOnlineBookingV5 #obCategoryList .list-group-item.ob6-cat-hidden { display: none !important; }
body.sspa-v6 #sspaOnlineBookingV5 #obCategoryList .ob6-cat-more {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 14px;
  border: 1px dashed #AEB5C0;
  border-radius: 999px;
  background: transparent;
  color: var(--ob6-accent);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}
body.sspa-v6 #sspaOnlineBookingV5 #obCategoryList .ob6-cat-more:hover { background: var(--ob6-sel-bg); border-style: solid; border-color: var(--ob6-sel-bg); }
body.sspa-v6 #sspaOnlineBookingV5 #obCategoryList .ob6-cat-more:focus-visible { outline: 2px solid var(--ob6-accent); outline-offset: 2px; }

/* slightly lighter chips on desktop */
@media (min-width: 992px) {
  body.sspa-v6 #sspaOnlineBookingV5 #obCategoryList .list-group-item { min-height: 36px !important; padding: 0 13px !important; font-size: 14px !important; }
  body.sspa-v6 #sspaOnlineBookingV5 #obCategoryList .ob6-cat-more { min-height: 36px; }
  body.sspa-v6 #sspaOnlineBookingV5 #obCategoryList { gap: 8px 6px; }
}

/* ===========================================================================
   6.010 — Microsite embed (microsite.v6.php: body.sspa-v6.sspa-v6-ms)
   The microsite owns the page (fonts, background, header); v6 only styles the
   booking widget, using the microsite's --ms-* tokens (which already resolve
   the per-location theme JSON via --ob-*).
   =========================================================================== */
body.sspa-v6.sspa-v6-ms {
  --ob6-accent: var(--ms-primary, #26282E);
  --ob6-on-accent: var(--ms-on-primary, #fff);
  --ob6-ink: var(--ms-text, #23252B);
  --ob6-muted: var(--ms-muted, #6C7078);
  --ob6-line: var(--ms-border, #E2E1DA);
  --ob6-line-strong: var(--ms-border, #D9DDE3);
  --ob6-bg: var(--ms-bg, #F4F4F0);
  --ob6-surface: var(--ms-surface, #fff);
  --ob6-sel-bg: color-mix(in srgb, var(--ms-primary, #26282E) 9%, var(--ms-surface, #fff));
  --ob6-sel-ink: var(--ms-primary, #26282E);
}
/* the microsite already shows "Book an appointment" above the widget */
body.sspa-v6.sspa-v6-ms .ob6-title {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
body.sspa-v6.sspa-v6-ms .ob6-head { margin-bottom: 14px; }
body.sspa-v6.sspa-v6-ms #sspaOnlineBookingV5 { width: 100%; }
body.sspa-v6.sspa-v6-ms #sspaOnlineBookingV5 .ob6-visit-title,
body.sspa-v6.sspa-v6-ms #sspaOnlineBookingV5 .ob6-panel h2 { font-family: var(--ms-font-body); }
/* inside the rounded embed card: no edge-to-edge bleed (would overflow the card) */
@media (max-width: 575.98px) {
  body.sspa-v6.sspa-v6-ms #sspaOnlineBookingV5 .ob6-cats,
  body.sspa-v6.sspa-v6-ms #sspaOnlineBookingV5 .ob-staff-cards { margin-left: 0 !important; margin-right: 0 !important; }
  body.sspa-v6.sspa-v6-ms #sspaOnlineBookingV5 #obCategoryList,
  body.sspa-v6.sspa-v6-ms #sspaOnlineBookingV5 .ob-staff-cards { padding-left: 2px !important; padding-right: 2px !important; }
}

/* ===========================================================================
   6.010 — Iframe embed (embed.v6.php: body.sspa-v6.sspa-v6-embed)
   Sits inside the merchant's own site: no business header, white surface,
   compact padding, no duplicate step title (the stepper names the step).
   Per-location theme JSON (--ob-*) still flows through the v6 tokens.
   =========================================================================== */
body.sspa-v6.sspa-v6-embed { background: var(--ob-surface, #fff); }
body.sspa-v6.sspa-v6-embed .sspa-embed-shell { padding: 16px 20px 8px; }
body.sspa-v6.sspa-v6-embed .ob6-title {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
body.sspa-v6.sspa-v6-embed .ob6-head { margin-bottom: 14px; }
body.sspa-v6.sspa-v6-embed #sspaOnlineBookingV5 { width: 100%; }
body.sspa-v6.sspa-v6-embed #footer hr { margin: 8px 0; opacity: .15; }
body.sspa-v6.sspa-v6-embed #footer p { margin-bottom: 8px; color: var(--ob6-muted); }
@media (max-width: 575.98px) {
  body.sspa-v6.sspa-v6-embed .sspa-embed-shell { padding: 10px 12px 4px; }
  /* no bleed past the iframe edge */
  body.sspa-v6.sspa-v6-embed #sspaOnlineBookingV5 .ob6-cats,
  body.sspa-v6.sspa-v6-embed #sspaOnlineBookingV5 .ob-staff-cards { margin-left: 0 !important; margin-right: 0 !important; }
  body.sspa-v6.sspa-v6-embed #sspaOnlineBookingV5 #obCategoryList,
  body.sspa-v6.sspa-v6-embed #sspaOnlineBookingV5 .ob-staff-cards { padding-left: 2px !important; padding-right: 2px !important; }
}

/* ===========================================================================
   6.011 — Compact step 1 (tablet/iPad + desktop): get services above the fold
   =========================================================================== */
/* The stepper already names the step -> the big H1 is screen-reader only everywhere */
body.sspa-v6 .ob6-title {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0;
}
body.sspa-v6 .ob6-head { margin-bottom: 14px; }
body.sspa-v6 #sspaOnlineBookingV5 #obServicesToolbar { margin-bottom: 12px !important; }
body.sspa-v6 #sspaOnlineBookingV5 #obTopFiltersRow { margin-bottom: 10px; gap: 4px !important; }

/* Staff: horizontal pills (avatar left of name) instead of tall stacked cards */
body.sspa-v6 #sspaOnlineBookingV5 .ob-staff-cards-wrap { margin-bottom: 4px !important; }
body.sspa-v6 #sspaOnlineBookingV5 .ob-staff-cards-title { font-size: 13px; font-weight: 600; color: var(--ob6-muted); margin-bottom: 6px; }
body.sspa-v6 #sspaOnlineBookingV5 .ob-staff-card {
  flex-direction: row !important;
  align-items: center;
  gap: 8px !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 44px;
  padding: 4px 14px 4px 4px !important;
  border-radius: 999px !important;
}
body.sspa-v6 #sspaOnlineBookingV5 .ob-staff-card-ava { width: 34px !important; height: 34px !important; font-size: 14px !important; flex: 0 0 auto; }
body.sspa-v6 #sspaOnlineBookingV5 .ob-staff-card-name { font-size: 14px !important; font-weight: 600; max-width: 160px !important; text-align: left; }
body.sspa-v6 #sspaOnlineBookingV5 .ob-staff-card.active .ob-staff-card-name { color: var(--ob6-sel-ink); }

/* Categories + services: tighter rhythm */
body.sspa-v6 #sspaOnlineBookingV5 .ob6-cats { margin-bottom: 12px; }
body.sspa-v6 #sspaOnlineBookingV5 #obSvcsCol > .d-flex:first-child { margin-bottom: 6px !important; }
body.sspa-v6 #sspaOnlineBookingV5 #obServiceList { gap: 10px; }
body.sspa-v6 #sspaOnlineBookingV5 #obServiceList .list-group-item { padding: 14px 18px !important; }

/* Tablet (iPad portrait/landscape): slimmer business strip */
@media (min-width: 576px) and (max-width: 1199.98px) {
  body.sspa-v6 .ob6-biz-in { padding-top: 8px; padding-bottom: 8px; }
  body.sspa-v6 .ob6-ibtn { width: 40px; height: 40px; }
  body.sspa-v6 .ob6-wrap { padding-top: 16px; }
}
@media (max-width: 575.98px) {
  body.sspa-v6 #sspaOnlineBookingV5 .ob-staff-card { padding: 3px 12px 3px 3px !important; min-height: 40px; }
  body.sspa-v6 #sspaOnlineBookingV5 .ob-staff-card-ava { width: 30px !important; height: 30px !important; }
  body.sspa-v6 #sspaOnlineBookingV5 .ob-staff-card-name { font-size: 13px !important; max-width: 120px !important; }
}

/* ===========================================================================
   6.012 — Tighter step 1 on iPad + desktop (>= 768px)
   =========================================================================== */
@media (min-width: 768px) {
  /* business strip: name · address · today on one line */
  body.sspa-v6 .ob6-biz-txt { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 14px; }
  body.sspa-v6 .ob6-biz-name { font-size: 17px; }
  body.sspa-v6 .ob6-biz-sub { margin-top: 0; }
  body.sspa-v6 .ob6-biz-in { padding-top: 8px; padding-bottom: 8px; }
  body.sspa-v6 .ob6-ibtn { width: 38px; height: 38px; font-size: 16px; border-radius: 10px; }
  body.sspa-v6 .ob6-wrap { padding-top: 14px; }
  body.sspa-v6 .ob6-head { margin-bottom: 10px; }

  /* staff: label inline, left of the pills */
  body.sspa-v6 #sspaOnlineBookingV5 .ob-staff-cards-wrap { display: flex; align-items: center; gap: 12px; }
  body.sspa-v6 #sspaOnlineBookingV5 .ob-staff-cards-title { margin: 0 !important; white-space: nowrap; flex: 0 0 auto; }
  body.sspa-v6 #sspaOnlineBookingV5 .ob-staff-cards { flex: 1 1 auto; min-width: 0; width: auto !important; padding-bottom: 2px; }

  /* "Services · N available" row: the active chip already says what is listed */
  body.sspa-v6 #sspaOnlineBookingV5 #obSvcsCol > .d-flex:first-child { display: none !important; }
}