/*
 * ═══════════════════════════════════════════════════════════════
 *  spa-theme.css  —  Spa Audit Brand Utility System
 *  Compatible with Bootstrap 5 · Mirrors BS5 naming conventions
 *  Load AFTER bootstrap.min.css to override where needed
 * ═══════════════════════════════════════════════════════════════
 *
 *  TABLE OF CONTENTS
 *  ─────────────────
 *  1.  CSS Custom Properties (Design Tokens)
 *  2.  Bootstrap Token Overrides
 *  3.  Background Utilities        bg-*
 *  4.  Text Utilities              text-*
 *  5.  Border Utilities            border-*
 *  6.  Button Utilities            btn-*
 *  7.  Badge Utilities             badge-*
 *  8.  Card Utilities              card-*
 *  9.  Stat Card Component         .stat-card
 * 10.  Progress / Step Rail        .step-dot
 * 11.  Score Button Component      .score-btn
 * 12.  Section Header Components
 * 13.  Panel / Surface Components
 * 14.  Navigation Components
 * 15.  Typography Utilities        .display-* .label-*
 * 16.  Divider Utilities           .divider-*
 * 17.  Overlay & Spinner           .overlay-*
 * 18.  Animation Utilities
 * 19.  Responsive Helpers
 *
 * ═══════════════════════════════════════════════════════════════
 */


/* ═══════════════════════════════════════════════════════════════
   1. CSS CUSTOM PROPERTIES — Design Tokens
   ─────────────────────────────────────────────────────────────── */
:root {

  /* ── Brand Colours ─────────────────────────────────────── */
  --spa-navy:           #17243B;
  --spa-navy-rgb:       23, 36, 59;

  --spa-blue:           #233657;
  --spa-blue-rgb:       35, 54, 87;

  --spa-gold:           #D8AF4C;
  --spa-gold-rgb:       216, 175, 76;

  --spa-gold-light:     #E8C97A;
  --spa-gold-light-rgb: 232, 201, 122;

  --spa-gold-dark:      #B8922E;
  --spa-gold-dark-rgb:  184, 146, 46;

  --spa-white:          #FFFFFF;
  --spa-white-rgb:      255, 255, 255;

  /* ── Semantic Surface Colours ──────────────────────────── */
  --spa-surface:    #1C2D48;   /* card / panel background  */
  --spa-surface-2:  #243554;   /* elevated surface         */
  --spa-surface-3:  #2C3F65;   /* highest elevation        */

  /* ── Alpha Tokens ──────────────────────────────────────── */
  --spa-border:         rgba(216, 175, 76, 0.18);
  --spa-border-strong:  rgba(216, 175, 76, 0.40);
  --spa-border-subtle:  rgba(216, 175, 76, 0.09);

  --spa-overlay-light:  rgba(255, 255, 255, 0.04);
  --spa-overlay-mid:    rgba(255, 255, 255, 0.08);
  --spa-overlay-dark:   rgba(23,  36,  59,  0.88);

  --spa-gold-glow:      rgba(216, 175, 76, 0.30);
  --spa-gold-glow-lg:   rgba(216, 175, 76, 0.45);

  /* ── Text Alpha ─────────────────────────────────────────── */
  --spa-text-primary:   rgba(255, 255, 255, 1.00);
  --spa-text-secondary: rgba(255, 255, 255, 0.72);
  --spa-text-muted:     rgba(255, 255, 255, 0.45);
  --spa-text-disabled:  rgba(255, 255, 255, 0.25);

  /* ── Typography ─────────────────────────────────────────── */
  --spa-font-display: 'Cormorant Garamond', Georgia, serif;
  --spa-font-body:    'DM Sans', system-ui, sans-serif;

  /* ── Spacing Scale (mirrors BS5) ────────────────────────── */
  --spa-spacer:  1rem;
  --spa-space-1: 0.25rem;
  --spa-space-2: 0.5rem;
  --spa-space-3: 1rem;
  --spa-space-4: 1.5rem;
  --spa-space-5: 3rem;

  /* ── Border Radius ──────────────────────────────────────── */
  --spa-radius-sm:   6px;
  --spa-radius:      10px;
  --spa-radius-lg:   14px;
  --spa-radius-xl:   20px;
  --spa-radius-pill: 999px;

  /* ── Shadows ────────────────────────────────────────────── */
  --spa-shadow-sm:      0 2px 8px  rgba(0, 0, 0, 0.20);
  --spa-shadow:         0 4px 16px rgba(0, 0, 0, 0.28);
  --spa-shadow-lg:      0 8px 32px rgba(0, 0, 0, 0.38);
  --spa-shadow-gold:    0 4px 18px rgba(216, 175, 76, 0.30);
  --spa-shadow-gold-lg: 0 6px 28px rgba(216, 175, 76, 0.45);

  /* ── Transitions ────────────────────────────────────────── */
  --spa-transition:      0.28s cubic-bezier(.4, 0, .2, 1);
  --spa-transition-fast: 0.16s cubic-bezier(.4, 0, .2, 1);
  --spa-transition-slow: 0.45s cubic-bezier(.4, 0, .2, 1);
}


/* ═══════════════════════════════════════════════════════════════
   2. BOOTSTRAP TOKEN OVERRIDES
      Maps our brand palette into BS5's --bs-* system so that
      Bootstrap components (alerts, forms, focus rings, etc.)
      inherit the brand automatically.
   ─────────────────────────────────────────────────────────────── */
:root {
  --bs-primary:          var(--spa-gold);
  --bs-primary-rgb:      var(--spa-gold-rgb);
  --bs-secondary:        var(--spa-blue);
  --bs-secondary-rgb:    var(--spa-blue-rgb);
  --bs-dark:             var(--spa-navy);
  --bs-dark-rgb:         var(--spa-navy-rgb);
  --bs-light:            var(--spa-white);
  --bs-body-bg:          var(--spa-navy);
  --bs-body-color:       var(--spa-text-primary);
  --bs-body-font-family: var(--spa-font-body);
  --bs-border-color:     var(--spa-border);
  --bs-link-color:       var(--spa-gold);
  --bs-link-hover-color: var(--spa-gold-light);
  --bs-focus-ring-color: rgba(var(--spa-gold-rgb), 0.35);
  --bs-border-radius:      var(--spa-radius);
  --bs-border-radius-sm:   var(--spa-radius-sm);
  --bs-border-radius-lg:   var(--spa-radius-lg);
  --bs-border-radius-pill: var(--spa-radius-pill);
}


/* ═══════════════════════════════════════════════════════════════
   3. BACKGROUND UTILITIES  bg-*
   ─────────────────────────────────────────────────────────────── */

/* ── Solid backgrounds ──────────────────────────────────── */
.bg-spa-navy        { background-color: var(--spa-navy)       !important; }
.bg-spa-blue        { background-color: var(--spa-blue)       !important; }
.bg-spa-gold        { background-color: var(--spa-gold)       !important; }
.bg-spa-gold-light  { background-color: var(--spa-gold-light) !important; }
.bg-spa-gold-dark   { background-color: var(--spa-gold-dark)  !important; }
.bg-spa-white       { background-color: var(--spa-white)      !important; }
.bg-spa-surface     { background-color: var(--spa-surface)    !important; }
.bg-spa-surface-2   { background-color: var(--spa-surface-2)  !important; }
.bg-spa-surface-3   { background-color: var(--spa-surface-3)  !important; }

/* ── Alpha / glass backgrounds ──────────────────────────── */
.bg-spa-overlay-light { background-color: var(--spa-overlay-light)               !important; }
.bg-spa-overlay-mid   { background-color: var(--spa-overlay-mid)                 !important; }
.bg-spa-overlay-dark  { background-color: var(--spa-overlay-dark)                !important; }
.bg-spa-gold-alpha    { background-color: rgba(var(--spa-gold-rgb), 0.12)        !important; }
.bg-spa-gold-alpha-lg { background-color: rgba(var(--spa-gold-rgb), 0.22)        !important; }

/* ── Gradient backgrounds ───────────────────────────────── */
.bg-spa-gradient {
  background: linear-gradient(135deg, var(--spa-navy) 0%, var(--spa-blue) 100%) !important;
}
.bg-spa-gradient-gold {
  background: linear-gradient(135deg, var(--spa-gold) 0%, var(--spa-gold-light) 100%) !important;
}
.bg-spa-gradient-depth {
  background:
    radial-gradient(ellipse 80% 60% at 10% 20%, rgba(35,54,87,0.6) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 90% 80%, rgba(216,175,76,0.06) 0%, transparent 55%),
    var(--spa-navy) !important;
}


/* ═══════════════════════════════════════════════════════════════
   4. TEXT UTILITIES  text-*
   ─────────────────────────────────────────────────────────────── */

/* ── Colour ─────────────────────────────────────────────── */
.text-spa-navy       { color: var(--spa-navy)        !important; }
.text-spa-blue       { color: var(--spa-blue)        !important; }
.text-spa-gold       { color: var(--spa-gold)        !important; }
.text-spa-gold-light { color: var(--spa-gold-light)  !important; }
.text-spa-gold-dark  { color: var(--spa-gold-dark)   !important; }
.text-spa-white      { color: var(--spa-white)       !important; }

/* ── Alpha text ─────────────────────────────────────────── */
.text-spa-primary    { color: var(--spa-text-primary)   !important; }
.text-spa-secondary  { color: var(--spa-text-secondary) !important; }
.text-spa-muted      { color: var(--spa-text-muted)     !important; }
.text-spa-disabled   { color: var(--spa-text-disabled)  !important; }

/* ── Font family ────────────────────────────────────────── */
.font-display { font-family: var(--spa-font-display) !important; }
.font-body    { font-family: var(--spa-font-body)    !important; }

/* ── Tracking / spacing ─────────────────────────────────── */
.tracking-wide   { letter-spacing: .08em  !important; }
.tracking-wider  { letter-spacing: .14em  !important; }
.tracking-widest { letter-spacing: .20em  !important; }

/* ── Label style (small caps utility) ───────────────────── */
.text-label {
  font-size:      9px    !important;
  letter-spacing: .18em  !important;
  text-transform: uppercase !important;
  font-weight:    500    !important;
}
.text-label-sm {
  font-size:      8px    !important;
  letter-spacing: .16em  !important;
  text-transform: uppercase !important;
  font-weight:    500    !important;
}
.text-label-lg {
  font-size:      11px   !important;
  letter-spacing: .18em  !important;
  text-transform: uppercase !important;
  font-weight:    500    !important;
}


/* ═══════════════════════════════════════════════════════════════
   5. BORDER UTILITIES  border-*
   ─────────────────────────────────────────────────────────────── */
.border-spa            { border-color: var(--spa-border)        !important; }
.border-spa-strong     { border-color: var(--spa-border-strong) !important; }
.border-spa-subtle     { border-color: var(--spa-border-subtle) !important; }
.border-spa-navy       { border-color: var(--spa-navy)          !important; }
.border-spa-blue       { border-color: var(--spa-blue)          !important; }
.border-spa-gold       { border-color: var(--spa-gold)          !important; }
.border-spa-gold-light { border-color: var(--spa-gold-light)    !important; }
.border-spa-white      { border-color: var(--spa-white)         !important; }

/* Radius shortcuts */
.rounded-spa-sm   { border-radius: var(--spa-radius-sm)   !important; }
.rounded-spa      { border-radius: var(--spa-radius)       !important; }
.rounded-spa-lg   { border-radius: var(--spa-radius-lg)    !important; }
.rounded-spa-xl   { border-radius: var(--spa-radius-xl)    !important; }
.rounded-spa-pill { border-radius: var(--spa-radius-pill)  !important; }


/* ═══════════════════════════════════════════════════════════════
   6. BUTTON UTILITIES  btn-*
      All follow BS5 .btn base pattern — pair with .btn
   ─────────────────────────────────────────────────────────────── */

/* ── Base overrides to match brand feel ─────────────────── */
.btn {
  font-family:   var(--spa-font-body);
  font-weight:   500;
  letter-spacing: .04em;
  transition:    var(--spa-transition);
  border-radius: var(--spa-radius-sm);
  display:       inline-flex;
  align-items:   center;
  gap:           7px;
}

/* ── btn-spa-gold  (primary CTA) ────────────────────────── */
.btn-spa-gold {
  background-color: var(--spa-gold);
  border-color:     var(--spa-gold);
  color:            var(--spa-navy);
  font-weight:      700;
}
.btn-spa-gold:hover,
.btn-spa-gold:focus-visible {
  background-color: var(--spa-gold-light);
  border-color:     var(--spa-gold-light);
  color:            var(--spa-navy);
  box-shadow:       var(--spa-shadow-gold);
  transform:        translateY(-1px);
}
.btn-spa-gold:active {
  background-color: var(--spa-gold-dark);
  border-color:     var(--spa-gold-dark);
  transform:        translateY(0);
}

/* ── btn-spa-gold-outline  (secondary CTA) ──────────────── */
.btn-spa-gold-outline {
  background-color: transparent;
  border-color:     var(--spa-gold);
  color:            var(--spa-gold);
}
.btn-spa-gold-outline:hover,
.btn-spa-gold-outline:focus-visible {
  background-color: rgba(var(--spa-gold-rgb), 0.10);
  border-color:     var(--spa-gold-light);
  color:            var(--spa-gold-light);
  box-shadow:       var(--spa-shadow-gold);
  transform:        translateY(-1px);
}
.btn-spa-gold-outline:active {
  background-color: rgba(var(--spa-gold-rgb), 0.18);
  transform:        translateY(0);
}

/* ── btn-spa-navy ───────────────────────────────────────── */
.btn-spa-navy {
  background-color: var(--spa-navy);
  border-color:     var(--spa-navy);
  color:            var(--spa-white);
}
.btn-spa-navy:hover,
.btn-spa-navy:focus-visible {
  background-color: var(--spa-blue);
  border-color:     var(--spa-blue);
  color:            var(--spa-white);
  box-shadow:       var(--spa-shadow);
  transform:        translateY(-1px);
}

/* ── btn-spa-blue ───────────────────────────────────────── */
.btn-spa-blue {
  background-color: var(--spa-blue);
  border-color:     var(--spa-blue);
  color:            var(--spa-white);
}
.btn-spa-blue:hover,
.btn-spa-blue:focus-visible {
  background-color: var(--spa-surface-3);
  border-color:     var(--spa-surface-3);
  color:            var(--spa-white);
  box-shadow:       var(--spa-shadow);
  transform:        translateY(-1px);
}

/* ── btn-spa-ghost  (subtle / tertiary) ─────────────────── */
.btn-spa-ghost {
  background-color: transparent;
  border-color:     rgba(var(--spa-white-rgb), 0.18);
  color:            var(--spa-text-secondary);
}
.btn-spa-ghost:hover,
.btn-spa-ghost:focus-visible {
  background-color: rgba(var(--spa-white-rgb), 0.06);
  border-color:     rgba(var(--spa-white-rgb), 0.38);
  color:            var(--spa-white);
  transform:        translateY(-1px);
}
.btn-spa-ghost:active {
  background-color: rgba(var(--spa-white-rgb), 0.10);
  transform:        translateY(0);
}

/* ── btn-spa-gradient  (hero / submit) ──────────────────── */
.btn-spa-gradient {
  background:   linear-gradient(135deg, var(--spa-gold) 0%, var(--spa-gold-light) 100%);
  border-color: transparent;
  color:        var(--spa-navy);
  font-weight:  700;
}
.btn-spa-gradient:hover,
.btn-spa-gradient:focus-visible {
  background:   linear-gradient(135deg, var(--spa-gold-light) 0%, var(--spa-gold) 100%);
  border-color: transparent;
  color:        var(--spa-navy);
  box-shadow:   var(--spa-shadow-gold-lg);
  transform:    translateY(-1px);
}

/* ── btn-spa-surface  (card action) ─────────────────────── */
.btn-spa-surface {
  background-color: var(--spa-overlay-light);
  border-color:     var(--spa-border);
  color:            var(--spa-text-secondary);
}
.btn-spa-surface:hover,
.btn-spa-surface:focus-visible {
  background-color: var(--spa-overlay-mid);
  border-color:     var(--spa-border-strong);
  color:            var(--spa-gold);
  transform:        translateY(-1px);
}

/* ── Size variants (mirrors BS5 btn-sm / btn-lg) ─────────── */
.btn-spa-sm {
  padding:       7px 14px;
  font-size:     12px;
  border-radius: var(--spa-radius-sm);
}
.btn-spa-lg {
  padding:       13px 30px;
  font-size:     15px;
  font-weight:   700;
  border-radius: var(--spa-radius);
}
.btn-spa-xl {
  padding:       16px 40px;
  font-size:     16px;
  font-weight:   700;
  border-radius: var(--spa-radius-lg);
}

/* ── Icon-only button ───────────────────────────────────── */
.btn-spa-icon {
  width:           38px;
  height:          38px;
  padding:         0;
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
  border-radius:   var(--spa-radius-sm);
}
.btn-spa-icon.btn-spa-lg { width: 48px; height: 48px; }
.btn-spa-icon.btn-spa-sm { width: 30px; height: 30px; }

/* ── Disabled state (global) ────────────────────────────── */
.btn-spa-gold:disabled,
.btn-spa-gold-outline:disabled,
.btn-spa-blue:disabled,
.btn-spa-navy:disabled,
.btn-spa-ghost:disabled,
.btn-spa-gradient:disabled,
.btn-spa-surface:disabled {
  opacity:        0.38;
  pointer-events: none;
  transform:      none;
  box-shadow:     none;
}


/* ═══════════════════════════════════════════════════════════════
   7. BADGE UTILITIES  badge-*
      Pair with Bootstrap's .badge
   ─────────────────────────────────────────────────────────────── */
.badge-spa-gold {
  background-color: var(--spa-gold);
  color:            var(--spa-navy);
  font-weight:      700;
}
.badge-spa-gold-outline {
  background-color: transparent;
  border:           1px solid var(--spa-gold);
  color:            var(--spa-gold);
}
.badge-spa-navy {
  background-color: var(--spa-navy);
  color:            var(--spa-gold);
  border:           1px solid var(--spa-border);
}
.badge-spa-blue {
  background-color: var(--spa-blue);
  color:            var(--spa-white);
}
.badge-spa-surface {
  background-color: var(--spa-overlay-light);
  border:           1px solid var(--spa-border);
  color:            var(--spa-text-secondary);
}
.badge-spa-success {
  background-color: rgba(74, 195, 138, 0.18);
  border:           1px solid rgba(74, 195, 138, 0.40);
  color:            #4ac38a;
}
.badge-spa-danger {
  background-color: rgba(235, 87, 87, 0.15);
  border:           1px solid rgba(235, 87, 87, 0.35);
  color:            #eb5757;
}
.badge-spa-warning {
  background-color: rgba(var(--spa-gold-rgb), 0.15);
  border:           1px solid var(--spa-border);
  color:            var(--spa-gold);
}

/* ── Badge number (section identifier) ──────────────────── */
.badge-spa-number {
  width:           32px;
  height:          32px;
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  font-family:     var(--spa-font-display);
  font-size:       14px;
  font-weight:     700;
  border-radius:   var(--spa-radius-sm);
  background-color: var(--spa-gold);
  color:           var(--spa-navy);
  flex-shrink:     0;
}
.badge-spa-number-lg {
  width:         56px;
  height:        56px;
  font-size:     22px;
  border-radius: var(--spa-radius);
}
.badge-spa-number-sm {
  width:         24px;
  height:        24px;
  font-size:     11px;
  border-radius: 5px;
}


/* ═══════════════════════════════════════════════════════════════
   8. CARD UTILITIES  card-*
   ─────────────────────────────────────────────────────────────── */

/* ── Base card ───────────────────────────────────────────── */
.card-spa {
  background-color: var(--spa-surface);
  border:           1px solid var(--spa-border);
  border-radius:    var(--spa-radius-lg);
  color:            var(--spa-text-primary);
  transition:       var(--spa-transition);
}
.card-spa .card-header {
  background-color: rgba(var(--spa-white-rgb), 0.03);
  border-bottom:    1px solid var(--spa-border);
  color:            var(--spa-text-secondary);
  font-size:        10px;
  letter-spacing:   .16em;
  text-transform:   uppercase;
  font-weight:      500;
}
.card-spa .card-footer {
  background-color: rgba(var(--spa-white-rgb), 0.02);
  border-top:       1px solid var(--spa-border);
}

/* ── Card variants ───────────────────────────────────────── */
.card-spa-navy {
  background-color: var(--spa-navy);
  border:           1px solid var(--spa-border);
  border-radius:    var(--spa-radius-lg);
  color:            var(--spa-text-primary);
}
.card-spa-blue {
  background-color: var(--spa-blue);
  border:           1px solid var(--spa-border);
  border-radius:    var(--spa-radius-lg);
  color:            var(--spa-text-primary);
}
.card-spa-glass {
  background-color: var(--spa-overlay-light);
  border:           1px solid var(--spa-border);
  border-radius:    var(--spa-radius-lg);
  backdrop-filter:  blur(8px);
  color:            var(--spa-text-primary);
}
.card-spa-gold {
  background-color: var(--spa-gold);
  border:           none;
  border-radius:    var(--spa-radius-lg);
  color:            var(--spa-navy);
}

/* ── Hoverable card ──────────────────────────────────────── */
.card-spa-hover {
  cursor: pointer;
}
.card-spa-hover:hover {
  background-color: rgba(var(--spa-gold-rgb), 0.06);
  border-color:     var(--spa-border-strong);
  transform:        translateY(-2px);
  box-shadow:       var(--spa-shadow);
}


/* ═══════════════════════════════════════════════════════════════
   9. STAT CARD COMPONENT  .stat-card
   ─────────────────────────────────────────────────────────────── */
.stat-card {
  background-color: var(--spa-overlay-light);
  border:           1px solid var(--spa-border);
  border-radius:    var(--spa-radius);
  padding:          18px 16px;
  text-align:       center;
  transition:       var(--spa-transition);
}
.stat-card:hover {
  background-color: rgba(var(--spa-gold-rgb), 0.06);
  border-color:     var(--spa-border-strong);
}
.stat-card .stat-value {
  font-family:   var(--spa-font-display);
  font-size:     28px;
  font-weight:   700;
  color:         var(--spa-gold);
  line-height:   1.1;
  margin-bottom: 6px;
}
.stat-card .stat-label {
  font-size:      9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color:          var(--spa-text-muted);
  line-height:    1.4;
}

/* ── Stat card size variants ─────────────────────────────── */
.stat-card-sm            { padding: 12px; }
.stat-card-sm .stat-value { font-size: 20px; }
.stat-card-sm .stat-label { font-size: 8px; }

.stat-card-lg             { padding: 28px 20px; }
.stat-card-lg .stat-value  { font-size: 40px; }
.stat-card-lg .stat-label  { font-size: 10px; letter-spacing: .16em; }


/* ═══════════════════════════════════════════════════════════════
  10. PROGRESS / STEP RAIL  .step-dot
   ─────────────────────────────────────────────────────────────── */
.step-rail {
  display:     flex;
  gap:         5px;
  flex-wrap:   nowrap;
  overflow-x:  auto;
  scrollbar-width: none;
}
.step-rail::-webkit-scrollbar { display: none; }

.step-dot {
  flex:            1;
  min-width:       28px;
  height:          32px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       10px;
  font-weight:     500;
  letter-spacing:  .04em;
  border-radius:   var(--spa-radius-sm);
  cursor:          pointer;
  transition:      var(--spa-transition);
  border:          1px solid transparent;
  color:           var(--spa-text-muted);
  background:      rgba(var(--spa-white-rgb), 0.04);
  position:        relative;
  user-select:     none;
}
.step-dot:hover {
  color:            var(--spa-gold-light);
  border-color:     var(--spa-border);
  background-color: rgba(var(--spa-gold-rgb), 0.07);
}
.step-dot.active {
  background-color: var(--spa-gold);
  color:            var(--spa-navy);
  font-weight:      700;
  border-color:     var(--spa-gold);
}
.step-dot.completed {
  background-color: rgba(var(--spa-gold-rgb), 0.15);
  border-color:     rgba(var(--spa-gold-rgb), 0.35);
  color:            var(--spa-gold);
}
.step-dot.completed::after {
  content:          '';
  position:         absolute;
  top: 3px; right:  3px;
  width:            5px;
  height:           5px;
  border-radius:    50%;
  background-color: var(--spa-gold);
}

/* ── Linear progress bar ─────────────────────────────────── */
.progress-spa {
  height:           4px;
  background-color: rgba(var(--spa-white-rgb), 0.08);
  border-radius:    var(--spa-radius-pill);
  overflow:         hidden;
}
.progress-spa .progress-bar {
  background-color: var(--spa-gold);
  border-radius:    var(--spa-radius-pill);
  transition:       width 0.4s ease;
}


/* ═══════════════════════════════════════════════════════════════
  11. SCORE BUTTON COMPONENT  .score-btn
   ─────────────────────────────────────────────────────────────── */
.score-buttons {
  display:     flex;
  gap:         6px;
  flex-shrink: 0;
}

.score-btn {
  width:            34px;
  height:           34px;
  border-radius:    var(--spa-radius-sm);
  border:           1px solid rgba(var(--spa-white-rgb), 0.14);
  background-color: rgba(var(--spa-white-rgb), 0.05);
  color:            rgba(var(--spa-white-rgb), 0.55);
  font-size:        13px;
  font-weight:      500;
  font-family:      var(--spa-font-body);
  cursor:           pointer;
  transition:       var(--spa-transition);
  display:          flex;
  align-items:      center;
  justify-content:  center;
  user-select:      none;
  line-height:      1;
  padding:          0;
}
.score-btn:hover {
  border-color:     var(--spa-gold);
  color:            var(--spa-gold);
  background-color: rgba(var(--spa-gold-rgb), 0.10);
  transform:        translateY(-1px);
}
.score-btn.selected {
  background-color: var(--spa-gold);
  border-color:     var(--spa-gold);
  color:            var(--spa-navy);
  font-weight:      700;
  transform:        translateY(-1px);
  box-shadow:       var(--spa-shadow-gold);
}

/* ── Size variants ───────────────────────────────────────── */
.score-btn-sm { width: 26px; height: 26px; font-size: 11px; }
.score-btn-lg { width: 44px; height: 44px; font-size: 16px; border-radius: var(--spa-radius); }


/* ═══════════════════════════════════════════════════════════════
  12. SECTION HEADER COMPONENTS
   ─────────────────────────────────────────────────────────────── */
.section-header {
  display:     flex;
  align-items: flex-start;
  gap:         20px;
}

.section-title {
  font-family:   var(--spa-font-display);
  font-size:     26px;
  font-weight:   700;
  color:         var(--spa-white);
  line-height:   1.2;
  margin-bottom: 6px;
}
.section-title-sm {
  font-family: var(--spa-font-display);
  font-size:   20px;
  font-weight: 700;
  color:       var(--spa-white);
  line-height: 1.2;
}
.section-title-lg {
  font-family: var(--spa-font-display);
  font-size:   36px;
  font-weight: 700;
  color:       var(--spa-white);
  line-height: 1.15;
}
.section-desc {
  font-size:   13px;
  color:       var(--spa-text-muted);
  line-height: 1.65;
}

/* ── Score pill ──────────────────────────────────────────── */
.score-pill {
  display:        flex;
  flex-direction: column;
  align-items:    flex-end;
  gap:            2px;
  flex-shrink:    0;
}
.score-pill .score-value {
  font-family: var(--spa-font-display);
  font-size:   32px;
  font-weight: 700;
  color:       var(--spa-gold);
  line-height: 1;
}
.score-pill .score-max   { font-size: 14px; color: var(--spa-text-muted); }
.score-pill .score-label {
  font-size:      9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color:          var(--spa-text-muted);
}

/* ── Total score display ─────────────────────────────────── */
.total-score-display { text-align: center; }
.total-score-display .total-score-number {
  font-family: var(--spa-font-display);
  font-size:   24px;
  font-weight: 700;
  color:       var(--spa-gold);
  line-height: 1;
}
.total-score-display .total-score-label {
  font-size:      9px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color:          var(--spa-text-muted);
  margin-top:     2px;
}


/* ═══════════════════════════════════════════════════════════════
  13. PANEL / SURFACE COMPONENTS
   ─────────────────────────────────────────────────────────────── */

/* ── Generic panel ───────────────────────────────────────── */
.panel-spa {
  background-color: rgba(var(--spa-white-rgb), 0.03);
  border:           1px solid var(--spa-border);
  border-radius:    var(--spa-radius);
  overflow:         hidden;
}
.panel-spa .panel-header {
  padding:        14px 20px;
  border-bottom:  1px solid var(--spa-border);
  font-size:      9px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color:          var(--spa-text-muted);
  font-weight:    500;
}
.panel-spa .panel-body   { padding: 20px; }
.panel-spa .panel-footer {
  padding:    14px 20px;
  border-top: 1px solid var(--spa-border);
}

/* ── Question row ────────────────────────────────────────── */
.question-row {
  padding:         18px 20px;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             16px;
  border-bottom:   1px solid rgba(var(--spa-white-rgb), 0.05);
  transition:      background var(--spa-transition);
}
.question-row:last-child { border-bottom: none; }
.question-row:hover      { background-color: rgba(var(--spa-white-rgb), 0.02); }

.question-text {
  flex:        1;
  font-size:   14px;
  color:       rgba(var(--spa-white-rgb), 0.82);
  line-height: 1.55;
}

/* ── Rail / top bar ──────────────────────────────────────── */
.rail-spa {
  background-color: var(--spa-blue);
  border-bottom:    1px solid var(--spa-border);
  padding:          14px 24px;
}


/* ═══════════════════════════════════════════════════════════════
  14. NAVIGATION COMPONENTS  .btn-nav-*
   ─────────────────────────────────────────────────────────────── */
.nav-footer-spa {
  padding:          16px 28px;
  background-color: var(--spa-blue);
  border-top:       1px solid var(--spa-border);
  display:          flex;
  align-items:      center;
  justify-content:  space-between;
  gap:              12px;
}

.btn-nav-back {
  display:          flex;
  align-items:      center;
  gap:              8px;
  padding:          10px 22px;
  border-radius:    var(--spa-radius-sm);
  font-family:      var(--spa-font-body);
  font-size:        13px;
  font-weight:      500;
  letter-spacing:   .04em;
  cursor:           pointer;
  transition:       var(--spa-transition);
  background:       transparent;
  border:           1px solid rgba(var(--spa-white-rgb), 0.18);
  color:            rgba(var(--spa-white-rgb), 0.65);
}
.btn-nav-back:hover {
  border-color:     rgba(var(--spa-white-rgb), 0.40);
  color:            var(--spa-white);
  background-color: rgba(var(--spa-white-rgb), 0.05);
}

.btn-nav-next {
  display:          flex;
  align-items:      center;
  gap:              8px;
  padding:          10px 22px;
  border-radius:    var(--spa-radius-sm);
  font-family:      var(--spa-font-body);
  font-size:        13px;
  font-weight:      700;
  letter-spacing:   .04em;
  cursor:           pointer;
  transition:       var(--spa-transition);
  background-color: var(--spa-gold);
  border:           1px solid var(--spa-gold);
  color:            var(--spa-navy);
}
.btn-nav-next:hover {
  background-color: var(--spa-gold-light);
  border-color:     var(--spa-gold-light);
  box-shadow:       var(--spa-shadow-gold);
  transform:        translateY(-1px);
}

.btn-nav-submit {
  display:          flex;
  align-items:      center;
  gap:              8px;
  padding:          10px 22px;
  border-radius:    var(--spa-radius-sm);
  font-family:      var(--spa-font-body);
  font-size:        13px;
  font-weight:      700;
  letter-spacing:   .04em;
  cursor:           pointer;
  transition:       var(--spa-transition);
  background:       linear-gradient(135deg, var(--spa-gold) 0%, var(--spa-gold-light) 100%);
  border:           1px solid transparent;
  color:            var(--spa-navy);
}
.btn-nav-submit:hover {
  box-shadow: var(--spa-shadow-gold-lg);
  transform:  translateY(-1px);
}


/* ═══════════════════════════════════════════════════════════════
  15. TYPOGRAPHY UTILITIES  .display-spa-*  .heading-spa
   ─────────────────────────────────────────────────────────────── */
.display-spa-1 { font-family: var(--spa-font-display); font-size: 72px; font-weight: 700; line-height: 1.05; color: var(--spa-white); }
.display-spa-2 { font-family: var(--spa-font-display); font-size: 56px; font-weight: 700; line-height: 1.10; color: var(--spa-white); }
.display-spa-3 { font-family: var(--spa-font-display); font-size: 40px; font-weight: 700; line-height: 1.15; color: var(--spa-white); }
.display-spa-4 { font-family: var(--spa-font-display); font-size: 32px; font-weight: 700; line-height: 1.20; color: var(--spa-white); }
.display-spa-gold { color: var(--spa-gold) !important; }

.heading-spa {
  font-family:   var(--spa-font-display);
  font-size:     26px;
  font-weight:   700;
  color:         var(--spa-white);
  line-height:   1.2;
  margin-bottom: 6px;
}
.subheading-spa {
  font-size:   13px;
  color:       var(--spa-text-muted);
  line-height: 1.65;
}
.eyebrow-spa {
  font-size:      10px;
  font-weight:    500;
  letter-spacing: .20em;
  text-transform: uppercase;
  color:          var(--spa-gold);
}


/* ═══════════════════════════════════════════════════════════════
  16. DIVIDER UTILITIES  .divider-*
   ─────────────────────────────────────────────────────────────── */
.divider-spa        { border: none; border-top: 1px solid var(--spa-border);        margin: var(--spa-space-3) 0; }
.divider-spa-strong { border: none; border-top: 1px solid var(--spa-border-strong); margin: var(--spa-space-3) 0; }
.divider-spa-subtle { border: none; border-top: 1px solid var(--spa-border-subtle); margin: var(--spa-space-3) 0; }
.divider-spa-gold {
  border: none;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--spa-gold), transparent);
  margin: var(--spa-space-3) 0;
}


/* ═══════════════════════════════════════════════════════════════
  17. OVERLAY & SPINNER  .overlay-spa  .spinner-spa
   ─────────────────────────────────────────────────────────────── */
.overlay-spa {
  position:         fixed;
  inset:            0;
  background-color: var(--spa-overlay-dark);
  z-index:          1050;
  display:          flex;
  flex-direction:   column;
  align-items:      center;
  justify-content:  center;
  gap:              14px;
  backdrop-filter:  blur(4px);
}

.spinner-spa {
  width:         44px;
  height:        44px;
  border:        3px solid rgba(var(--spa-gold-rgb), 0.20);
  border-top-color: var(--spa-gold);
  border-radius: 50%;
  animation:     spa-spin 0.8s linear infinite;
}
.spinner-spa-sm { width: 24px; height: 24px; border-width: 2px; }
.spinner-spa-lg { width: 64px; height: 64px; border-width: 4px; }

@keyframes spa-spin { to { transform: rotate(360deg); } }

/* ── Alert variants ──────────────────────────────────────── */
.alert-spa-gold {
  background-color: rgba(var(--spa-gold-rgb), 0.12);
  border:           1px solid var(--spa-border-strong);
  color:            var(--spa-gold-light);
  border-radius:    var(--spa-radius);
}
.alert-spa-navy {
  background-color: var(--spa-surface);
  border:           1px solid var(--spa-border);
  color:            var(--spa-text-primary);
  border-radius:    var(--spa-radius);
}


/* ═══════════════════════════════════════════════════════════════
  18. ANIMATION UTILITIES
   ─────────────────────────────────────────────────────────────── */
.animate-slide-in  { animation: spa-slide-in  0.35s cubic-bezier(.4,0,.2,1) both; }
.animate-fade-in   { animation: spa-fade-in   0.40s ease both; }
.animate-scale-in  { animation: spa-scale-in  0.30s cubic-bezier(.4,0,.2,1) both; }

@keyframes spa-slide-in {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0);    }
}
@keyframes spa-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes spa-scale-in {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1);    }
}

/* Stagger delay helpers */
.animate-delay-1 { animation-delay: 0.05s; }
.animate-delay-2 { animation-delay: 0.10s; }
.animate-delay-3 { animation-delay: 0.15s; }
.animate-delay-4 { animation-delay: 0.20s; }
.animate-delay-5 { animation-delay: 0.25s; }


/* ═══════════════════════════════════════════════════════════════
  19. RESPONSIVE HELPERS
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .display-spa-1    { font-size: 48px; }
  .display-spa-2    { font-size: 36px; }
  .display-spa-3    { font-size: 28px; }
  .display-spa-4    { font-size: 24px; }
  .section-title    { font-size: 22px; }
  .section-title-lg { font-size: 28px; }
  .stat-card .stat-value { font-size: 22px; }
  .nav-footer-spa   { padding: 14px 16px; }
  .rail-spa         { padding: 12px 16px; }
  .question-row     { flex-direction: column; align-items: flex-start; gap: 10px; }
  .section-header   { flex-wrap: wrap; }
  .score-btn { width:100% !important; }
}

@media (max-width: 576px) {
  .display-spa-1 { font-size: 36px; }
  .display-spa-2 { font-size: 28px; }
  .badge-spa-number-lg { width: 44px; height: 44px; font-size: 18px; }
}