/* ============================================================
   BridgeWell PR-D35E — Design polish layer.

   Additive on top of bridgewell.css. NEVER replaces existing
   tokens. The pre-D35E `--bw-blue` / `--bw-navy` / `--bw-slate`
   / `--bw-surface` / `--bw-border` palette stays the source of
   truth — this file maps semantic-role tokens onto them so
   future PRs (and external auditors) can read intent, not
   pigment.

   What this file does:
     1. Semantic token aliases for color / surface / type / shape
        / spacing / elevation / motion.
     2. A11y baseline — universal :focus-visible ring, skip link,
        prefers-reduced-motion override, larger mobile tap target
        on .btn-sm.
     3. Polish layer for navbar / footer / buttons / cards /
        marketing sections / Today Hub / Movement Hub.

   What this file does NOT do:
     - Override layout structure.
     - Change the Today Hub priority logic or Movement Hub IA.
     - Touch PR-D31 LCP image rules.
     - Introduce new colours outside the existing palette.

   Compliance: no new analytics calls, no third-party CDNs,
   no JavaScript, no font additions. CSS only.
   ============================================================ */

/* ── Semantic token aliases ────────────────────────────────── */
:root {
  /* Ink + muted text */
  --bw-color-ink:           var(--bw-navy);
  --bw-color-ink-soft:      var(--bw-navy-mid);
  --bw-color-muted:         var(--bw-slate);
  --bw-color-faint:         var(--bw-muted);

  /* Surfaces */
  --bw-color-surface:       var(--bw-surface);
  --bw-color-surface-soft:  var(--bw-surface-d);
  --bw-color-card:          var(--bw-white);
  --bw-color-border:        var(--bw-border);
  --bw-color-border-strong: #cbd5e1;

  /* Action palette */
  --bw-color-primary:        var(--bw-blue);
  --bw-color-primary-hover:  var(--bw-blue-dark);
  --bw-color-primary-soft:   var(--bw-blue-light);
  --bw-color-accent:         var(--bw-teal);
  --bw-color-accent-soft:    var(--bw-teal-light);

  /* Status (soft tints — use for backgrounds, not text alone) */
  --bw-color-success-soft:   rgba(34, 197, 94, 0.10);
  --bw-color-warning-soft:   rgba(245, 158, 11, 0.10);
  --bw-color-danger-soft:    rgba(239, 68, 68, 0.10);
  --bw-color-info-soft:      rgba(14, 165, 233, 0.08);

  /* Focus ring — WCAG AA contrast against white + surface */
  --bw-color-focus:          #2563eb;
  --bw-focus-ring:           0 0 0 3px rgba(37, 99, 235, 0.35);
  --bw-focus-ring-offset:    2px;

  /* Typography scale */
  --bw-font-display:         var(--bw-font);
  --bw-font-body:            var(--bw-font);
  --bw-text-xs:              0.78rem;
  --bw-text-sm:              0.875rem;
  --bw-text-base:            1rem;
  --bw-text-md:              1.125rem;
  --bw-text-lg:              1.25rem;
  --bw-text-xl:              1.5rem;
  --bw-text-2xl:             1.875rem;
  --bw-text-display:         clamp(2rem, 5vw, 3.25rem);
  --bw-leading-tight:        1.25;
  --bw-leading-snug:         1.45;
  --bw-leading-normal:       1.6;
  --bw-leading-relaxed:      1.75;
  --bw-weight-regular:       400;
  --bw-weight-medium:        500;
  --bw-weight-semi:          600;
  --bw-weight-bold:          700;
  --bw-tracking-tight:       -0.01em;
  --bw-tracking-snug:        0;
  --bw-tracking-wide:        0.05em;

  /* Spacing scale (use these as the canonical scale; legacy
     bare rems in older templates continue to work) */
  --bw-space-1:              0.25rem;
  --bw-space-2:              0.5rem;
  --bw-space-3:              0.75rem;
  --bw-space-4:              1rem;
  --bw-space-5:              1.25rem;
  --bw-space-6:              1.5rem;
  --bw-space-8:              2rem;
  --bw-space-10:             2.5rem;
  --bw-space-12:             3rem;
  --bw-space-16:             4rem;
  --bw-section-pad-y:        clamp(3rem, 6vw, 5rem);
  --bw-card-pad:             1.5rem;
  --bw-card-pad-tight:       1.125rem;
  --bw-grid-gap:             1rem;

  /* Shape */
  --bw-radius-xs:            0.25rem;
  --bw-radius-md:            var(--bw-radius);
  --bw-radius-lg:            1rem;
  --bw-radius-xl:            1.25rem;

  /* Elevation */
  --bw-elev-0:               none;
  --bw-elev-1:               var(--bw-shadow);
  --bw-elev-2:               var(--bw-shadow-md);
  --bw-elev-3:               var(--bw-shadow-lg);

  /* Motion */
  --bw-motion-fast:          120ms;
  --bw-motion-medium:        220ms;
  --bw-motion-slow:          360ms;
  --bw-easing-standard:      cubic-bezier(.2, 0, 0, 1);
  --bw-easing-emphasis:      cubic-bezier(.2, 0, .2, 1);
}

/* ── Reduced-motion override ───────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Skip-to-content link ──────────────────────────────────── */
.bw-skip-link {
  position: absolute;
  left: -10000px;
  top: var(--bw-space-2);
  width: 1px;
  height: 1px;
  overflow: hidden;
  background: var(--bw-color-ink);
  color: #fff;
  padding: var(--bw-space-3) var(--bw-space-4);
  border-radius: var(--bw-radius-md);
  font-weight: var(--bw-weight-semi);
  font-size: var(--bw-text-sm);
  z-index: 9999;
  text-decoration: none;
}
.bw-skip-link:focus,
.bw-skip-link:focus-visible {
  left: var(--bw-space-3);
  width: auto;
  height: auto;
  overflow: visible;
  outline: 3px solid var(--bw-color-focus);
  outline-offset: 3px;
}

/* ── Universal focus-visible baseline ──────────────────────── */
:focus-visible {
  outline: 3px solid var(--bw-color-focus);
  outline-offset: var(--bw-focus-ring-offset);
}
.btn:focus-visible,
.bw-btn:focus-visible {
  outline: 3px solid var(--bw-color-focus);
  outline-offset: var(--bw-focus-ring-offset);
  box-shadow: var(--bw-focus-ring);
}
a:focus-visible {
  outline: 3px solid var(--bw-color-focus);
  outline-offset: var(--bw-focus-ring-offset);
  border-radius: var(--bw-radius-xs);
}

/* ── Button polish ─────────────────────────────────────────── */
/* Minimum mobile tap target — WCAG 2.5.5 recommendation is 44px;
   .btn-sm was 36px-ish, so we raise its minimum and tighten
   alignment without changing visual weight. */
.btn {
  min-height: 40px;
  transition: background var(--bw-motion-medium) var(--bw-easing-standard),
              border-color var(--bw-motion-medium) var(--bw-easing-standard),
              transform var(--bw-motion-fast) var(--bw-easing-emphasis),
              box-shadow var(--bw-motion-medium) var(--bw-easing-standard);
}
.btn:active { transform: translateY(1px); }
.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}
.btn-sm { min-height: 36px; }
.btn-lg { min-height: 48px; }

/* Primary button — soft elevation on hover so the click affordance
   stays calm. */
.btn-primary:hover { box-shadow: 0 6px 18px rgba(2, 132, 199, 0.22); }
.btn-outline:hover { box-shadow: 0 6px 16px rgba(14, 165, 233, 0.15); }

/* ── Card polish ───────────────────────────────────────────── */
.card,
.bw-card {
  transition: box-shadow var(--bw-motion-medium) var(--bw-easing-standard),
              transform var(--bw-motion-fast) var(--bw-easing-standard),
              border-color var(--bw-motion-medium) var(--bw-easing-standard);
}
.card:hover,
.bw-card:hover { transform: translateY(-1px); }
.card:focus-within,
.bw-card:focus-within {
  border-color: var(--bw-color-primary);
  box-shadow: var(--bw-focus-ring);
}

/* ── Navbar polish ─────────────────────────────────────────── */
.navbar {
  backdrop-filter: saturate(160%) blur(8px);
  -webkit-backdrop-filter: saturate(160%) blur(8px);
  background: rgba(255, 255, 255, 0.92);
}
.navbar-nav a {
  position: relative;
  font-weight: var(--bw-weight-medium);
}
.navbar-nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0.75rem; right: 0.75rem; bottom: -2px;
  height: 2px;
  background: var(--bw-color-primary);
  border-radius: var(--bw-radius-pill);
}
.navbar-actions .btn { min-height: 40px; }
.navbar-toggle:focus-visible {
  outline: 3px solid var(--bw-color-focus);
  outline-offset: 2px;
  border-radius: var(--bw-radius-sm);
}

/* Mobile drawer — bigger tap targets + clearer dividers. */
.mobile-menu a {
  min-height: 44px;
  display: flex;
  align-items: center;
}

/* ── Footer polish ─────────────────────────────────────────── */
.bw-footer,
.footer,
footer {
  font-size: var(--bw-text-sm);
}
.footer a:focus-visible,
.bw-footer a:focus-visible,
footer a:focus-visible {
  outline: 3px solid var(--bw-color-focus);
  outline-offset: 2px;
}

/* ── Marketing section polish ──────────────────────────────── */
.section,
.section-sm {
  scroll-margin-top: 80px;
}
.section-header h2 {
  letter-spacing: var(--bw-tracking-tight);
}
.section-header .lead {
  color: var(--bw-color-muted);
}
/* Subtle alternating-tint surface so adjacent sections separate
   visually without harsh divider lines. */
.section.bg-surface,
.section-sm.bg-surface {
  background: var(--bw-color-surface);
}

/* ── Pricing card polish ───────────────────────────────────── */
.bw-plan-card,
.plan-card,
[data-bw-block="plan-card"] {
  border-radius: var(--bw-radius-lg);
}

/* ── Movement pillar (public) polish ───────────────────────── */
[data-bw-block="movement-pillar"] {
  border-top: 1px solid var(--bw-color-border);
  border-bottom: 1px solid var(--bw-color-border);
}
[data-bw-block="movement-pillar-cards"] .card {
  border-radius: var(--bw-radius-lg);
}

/* ── Today Hub polish ──────────────────────────────────────── */
[data-bw-block="today-hub"] {
  margin-bottom: var(--bw-space-8);
}
[data-bw-block="today-hub"] [data-card-type] {
  border-radius: var(--bw-radius-lg);
}
/* Today Hub hero card — first meaningful card on dashboard.
   Use a soft primary tint so it visibly leads without shouting. */
[data-bw-block="today-hub"] > [data-card-type]:first-child,
[data-bw-block="today-hub"] [data-card-type="today_hub_hero"],
[data-bw-block="today-hub"] .bw-today-hub-hero {
  background: linear-gradient(135deg,
              rgba(14, 165, 233, 0.05),
              rgba(20, 184, 166, 0.04));
  border: 1px solid rgba(14, 165, 233, 0.25);
  box-shadow: var(--bw-elev-1);
}
[data-bw-block="today-hub"] [data-card-type="card-secure-portal"] {
  border-left: 3px solid var(--bw-color-primary);
}
[data-bw-block="today-hub"] [data-card-type] h3,
[data-bw-block="today-hub"] [data-card-type] h4 {
  letter-spacing: var(--bw-tracking-tight);
}

/* ── Movement Hub polish ───────────────────────────────────── */
[data-bw-block="movement-hub"] .bw-movement-card {
  border-radius: var(--bw-radius-lg);
}
[data-bw-block="movement-hub"] .bw-movement-card--primary {
  box-shadow: var(--bw-elev-1);
}
[data-bw-block="movement-paths-grid"] .bw-action-card {
  border-radius: var(--bw-radius-lg);
  min-height: 110px;
  transition: border-color var(--bw-motion-medium) var(--bw-easing-standard),
              box-shadow var(--bw-motion-medium) var(--bw-easing-standard),
              transform var(--bw-motion-fast) var(--bw-easing-emphasis);
}
[data-bw-block="movement-paths-grid"] .bw-action-card:hover {
  border-color: var(--bw-color-primary);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(14, 165, 233, 0.12);
}
[data-bw-block="movement-paths-grid"] .bw-action-card:focus-visible {
  outline: 3px solid var(--bw-color-focus);
  outline-offset: 2px;
}
[data-bw-block="movement-safety"] .bw-card {
  border-radius: var(--bw-radius-lg);
}

/* ── CareValidate boundary card polish ─────────────────────── */
[data-bw-block="carevalidate-boundary"] {
  border-radius: var(--bw-radius-lg);
}
[data-bw-block="carevalidate-boundary"] h2 {
  letter-spacing: var(--bw-tracking-tight);
}

/* ── "What happens after I pay?" component polish ──────────── */
[data-bw-block="what-happens-after-pay"],
.bw-what-happens-after-pay {
  border-radius: var(--bw-radius-lg);
}

/* ── FAQ polish ────────────────────────────────────────────── */
details.bw-faq-item,
.bw-faq-list details,
.faq-item {
  border: 1px solid var(--bw-color-border);
  border-radius: var(--bw-radius-md);
  padding: var(--bw-space-3) var(--bw-space-4);
  margin-bottom: var(--bw-space-3);
  background: var(--bw-color-card);
}
details.bw-faq-item summary,
.bw-faq-list details summary,
.faq-item summary {
  cursor: pointer;
  list-style: none;
  font-weight: var(--bw-weight-semi);
  color: var(--bw-color-ink);
  padding: var(--bw-space-2) 0;
}
details.bw-faq-item summary::-webkit-details-marker,
.bw-faq-list details summary::-webkit-details-marker,
.faq-item summary::-webkit-details-marker { display: none; }
details.bw-faq-item summary:focus-visible,
.bw-faq-list details summary:focus-visible,
.faq-item summary:focus-visible {
  outline: 3px solid var(--bw-color-focus);
  outline-offset: 2px;
  border-radius: var(--bw-radius-sm);
}

/* ── Mobile spacing tweaks ─────────────────────────────────── */
@media (max-width: 720px) {
  .section,
  .section-sm {
    padding-top: var(--bw-section-pad-y);
    padding-bottom: var(--bw-section-pad-y);
  }
  .container,
  .container-sm {
    padding-left: var(--bw-space-4);
    padding-right: var(--bw-space-4);
  }
  /* Make stacked CTAs full-width on small screens so taps don't
     miss. The pre-D35E `.flex.gap-2` rows kept inline-flex which
     made buttons too narrow on 360-class viewports. */
  .hero-cta .btn,
  [data-bw-block="hero-cta"] .btn,
  .text-center .btn.btn-lg {
    width: 100%;
    max-width: 360px;
  }
}

/* ── Print polish (so save-to-PDF receipts stay clean) ─────── */
@media print {
  .bw-skip-link,
  .navbar,
  .navbar-toggle,
  .mobile-menu,
  .bw-cookie-banner,
  .cookie-banner,
  [data-bw-block="hero-cta"],
  [data-bw-block="member-bottom-nav"] { display: none !important; }
  body { background: #fff !important; color: #000; }
}

/* ============================================================
   PR-D35F — Mobile member bottom navigation.

   Fixed to the bottom of the viewport on small screens
   (≤720px), hidden on desktop. Rendered only when base.html
   sees an authenticated non-staff user.

   The five slots (Today / Movement / Progress / Support /
   Account) are equal-width grid cells with a 44px+ min tap
   height per WCAG 2.5.5. Active slot is signalled by
   color + a 2px underline (NOT color alone). All transitions
   collapse under the reduced-motion override defined above.
   ============================================================ */
[data-bw-block="member-bottom-nav"] {
  display: none;
}
@media (max-width: 720px) {
  [data-bw-block="member-bottom-nav"] {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: saturate(160%) blur(8px);
    -webkit-backdrop-filter: saturate(160%) blur(8px);
    border-top: 1px solid var(--bw-color-border);
    box-shadow: 0 -2px 8px rgba(15, 23, 42, 0.05);
    padding-bottom: env(safe-area-inset-bottom);
    /* iOS PWAs and Safari respect env() — pads above the home bar. */
  }
  [data-bw-block="member-bottom-nav"] .bw-bottom-nav__list {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  [data-bw-block="member-bottom-nav"] .bw-bottom-nav__item {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  [data-bw-block="member-bottom-nav"] .bw-bottom-nav__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 56px;
    padding: 6px 4px 8px;
    color: var(--bw-color-muted);
    text-decoration: none;
    font-size: var(--bw-text-xs);
    font-weight: var(--bw-weight-medium);
    line-height: 1.2;
    transition: color var(--bw-motion-medium) var(--bw-easing-standard);
    border-top: 2px solid transparent;
  }
  [data-bw-block="member-bottom-nav"] .bw-bottom-nav__icon {
    font-size: 18px;
    line-height: 1;
    color: var(--bw-color-muted);
    transition: color var(--bw-motion-medium) var(--bw-easing-standard);
  }
  [data-bw-block="member-bottom-nav"] .bw-bottom-nav__label {
    font-size: 11px;
    letter-spacing: 0.02em;
  }
  [data-bw-block="member-bottom-nav"] .bw-bottom-nav__link:hover {
    color: var(--bw-color-primary);
  }
  [data-bw-block="member-bottom-nav"] .bw-bottom-nav__link:hover .bw-bottom-nav__icon {
    color: var(--bw-color-primary);
  }
  /* Active state — color + a top-border underline (non-color cue). */
  [data-bw-block="member-bottom-nav"] .bw-bottom-nav__link[aria-current="page"] {
    color: var(--bw-color-primary);
    border-top-color: var(--bw-color-primary);
    font-weight: var(--bw-weight-semi);
  }
  [data-bw-block="member-bottom-nav"] .bw-bottom-nav__link[aria-current="page"] .bw-bottom-nav__icon {
    color: var(--bw-color-primary);
  }
  /* Focus ring matches the global a11y baseline. */
  [data-bw-block="member-bottom-nav"] .bw-bottom-nav__link:focus-visible {
    outline: 3px solid var(--bw-color-focus);
    outline-offset: -2px;
    border-radius: var(--bw-radius-xs);
  }
  /* CareValidate clarifier — present but quiet. Hidden visually
     on very small screens but kept in the DOM so screen readers
     announce it. */
  [data-bw-block="member-bottom-nav"] .bw-bottom-nav__note {
    margin: 0;
    padding: 6px 12px env(safe-area-inset-bottom);
    font-size: 10.5px;
    line-height: 1.4;
    color: var(--bw-color-faint);
    background: var(--bw-color-surface-soft);
    border-top: 1px solid var(--bw-color-border);
    text-align: center;
  }
  /* Push main content up so the fixed nav (~56px + safe-area)
     never hides CTAs at the bottom of the page. */
  #bw-main-content,
  .bw-main {
    padding-bottom: calc(72px + env(safe-area-inset-bottom));
  }
  /* The cookie banner stacks ABOVE the bottom nav so it never
     traps the consent flow. */
  .bw-cookie-banner,
  .cookie-banner {
    bottom: calc(76px + env(safe-area-inset-bottom)) !important;
  }
}

/* Reduced-motion safety — the existing global rule already
   collapses transitions, but make the intent explicit here. */
@media (prefers-reduced-motion: reduce) {
  [data-bw-block="member-bottom-nav"] .bw-bottom-nav__link,
  [data-bw-block="member-bottom-nav"] .bw-bottom-nav__icon {
    transition: none !important;
  }
}

/* ============================================================
   PR-Q7 — Mobile member-portal off-canvas drawer
   ------------------------------------------------------------
   Desktop/tablet (>960px): the wrapper is display:contents so the
   member <nav> stays the legacy fixed left sidebar (unchanged).
   Mobile (≤960px): the <nav> becomes a fixed slide-in drawer over a
   dimmed backdrop, triggered by a slim in-flow hamburger bar. This
   replaces the old behaviour where the navy menu block filled the top
   of the phone and pushed dashboard content down.
   ============================================================ */
.bw-portal-nav { display: contents; }
.bw-portal-nav__toggle,
.bw-portal-nav__backdrop,
.bw-sidebar__close { display: none; }

@media (max-width: 960px) {
  /* wrapper becomes an in-flow block holding only the trigger bar;
     the drawer + backdrop are fixed/out-of-flow. */
  .bw-portal-nav { display: block; }

  .bw-portal-nav__toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    justify-content: flex-start;
    margin: 0 0 4px;
    padding: 11px 14px;
    padding-left: max(14px, env(safe-area-inset-left));
    background: var(--bw-navy);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
  }
  .bw-portal-nav__toggle .bw-portal-nav__toggle-bars {
    font-size: 18px;
    line-height: 1;
  }
  .bw-portal-nav__toggle:focus-visible {
    outline: 3px solid var(--bw-color-focus);
    outline-offset: 2px;
  }

  /* Drawer panel — override the legacy ≤960px row rules. */
  .bw-sidebar--member {
    position: fixed;
    top: 0;
    left: 0;
    width: min(86vw, 320px);
    height: 100vh;
    height: 100dvh;
    max-height: none;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 1.25rem;
    padding: 1.25rem 1rem;
    padding-top: max(1.25rem, env(safe-area-inset-top));
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-bottom: max(1.25rem, env(safe-area-inset-bottom));
    overflow-y: auto;
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform 0.25s ease, visibility 0s linear 0.25s;
    z-index: 200;
    box-shadow: 0 0 40px rgba(15, 23, 42, 0.4);
    border-radius: 0;
  }
  .bw-portal-nav.is-open .bw-sidebar--member {
    transform: translateX(0);
    visibility: visible;
    transition: transform 0.25s ease;
  }
  /* The legacy mobile rule stretched each section with flex:1 across a
     row; inside the vertical drawer they stack naturally. */
  .bw-sidebar--member .bw-sidebar-section {
    flex: 0 0 auto;
    min-width: 0;
  }

  .bw-portal-nav__backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0s linear 0.25s;
    z-index: 150;
  }
  .bw-portal-nav.is-open .bw-portal-nav__backdrop {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.25s ease;
  }

  .bw-sidebar__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 8px;
    right: 8px;
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.85);
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    border-radius: 8px;
  }
  .bw-sidebar__close:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
  .bw-sidebar__close:focus-visible {
    outline: 3px solid #fff;
    outline-offset: -2px;
  }
}

/* Body scroll-lock while the drawer is open (any viewport). */
body.bw-drawer-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .bw-sidebar--member,
  .bw-portal-nav__backdrop { transition: none !important; }
}

/* ============================================================
   PR-Q7 — Treatment / CV payment selection (radio cards + 1 CTA)
   ------------------------------------------------------------
   Replaces the stack of full-width blue "Pay $X" buttons (one per
   product) with a clean selectable radio-card list and a single
   confirm-and-pay CTA. Mobile-first; wraps long generic medication
   names cleanly; never clips horizontally.
   ============================================================ */
.bw-treatment-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}
.bw-treatment-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  border: 1.5px solid var(--bw-color-border);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  position: relative;
  transition: border-color 0.15s ease, box-shadow 0.15s ease,
    background 0.15s ease;
}
.bw-treatment-card:hover { border-color: var(--bw-color-primary); }
.bw-treatment-card__input {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--bw-color-primary);
}
.bw-treatment-card__input:focus-visible {
  outline: 3px solid var(--bw-color-focus);
  outline-offset: 2px;
}
.bw-treatment-card__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.bw-treatment-card__name {
  font-weight: 600;
  font-size: 15px;
  color: var(--text-primary);
  overflow-wrap: anywhere;
}
.bw-treatment-card__dose,
.bw-treatment-card__note {
  font-size: 13px;
  color: var(--text-tertiary);
  overflow-wrap: anywhere;
}
.bw-treatment-card__note { font-size: 12px; }
.bw-treatment-card__price {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}
.bw-treatment-card__amount {
  font-weight: 700;
  font-size: 17px;
  color: var(--text-primary);
  white-space: nowrap;
}
.bw-treatment-card__unit {
  font-size: 11px;
  color: var(--text-tertiary);
  white-space: nowrap;
}
.bw-treatment-card__check {
  display: none;
  position: absolute;
  top: 10px;
  right: 12px;
  color: var(--bw-color-primary);
  font-weight: 700;
}
/* Selected state — :has() for modern browsers, .is-selected as the
   JS-driven fallback for older engines. */
.bw-treatment-card.is-selected,
.bw-treatment-card:has(.bw-treatment-card__input:checked) {
  border-color: var(--bw-color-primary);
  background: var(--bw-color-primary-soft);
  box-shadow: 0 0 0 1px var(--bw-color-primary);
}
.bw-treatment-card.is-selected .bw-treatment-card__check,
.bw-treatment-card:has(.bw-treatment-card__input:checked)
  .bw-treatment-card__check { display: block; }

.bw-treatment-summary {
  max-width: 560px;
  margin-top: 16px;
  padding: 16px;
  border: 1px solid var(--bw-color-border);
  border-radius: 12px;
  background: var(--bw-color-surface-soft);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bw-treatment-summary__text {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0;
}
.bw-treatment-summary__text strong { color: var(--text-primary); }
#bw-pay-cta[disabled],
#bw-pay-cta[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
}
.bw-treatment-validation {
  margin: 0;
  font-size: 13px;
  color: var(--bw-color-danger, #b91c1c);
}
.bw-treatment-reassurance {
  margin: 0;
  font-size: 12px;
  color: var(--text-tertiary);
}

@media (prefers-reduced-motion: reduce) {
  .bw-treatment-card { transition: none !important; }
}

/* ============================================================
   Member sidebar premium polish (dashboard redesign).
   Scoped to .bw-sidebar--member so the operations sidebar is
   untouched. Adds leading icons, a refined active "pill" with a
   left accent, and calmer spacing/labels on the brand navy rail.
   ============================================================ */
.bw-sidebar--member { padding: 1.5rem .85rem; gap: 1.15rem; }
.bw-sidebar--member .bw-sidebar-section { gap: .12rem; }
.bw-sidebar--member .bw-sidebar-label {
  font-size: .67rem; letter-spacing: .1em; color: rgba(255,255,255,.4);
  padding: 0 .75rem; margin: .4rem 0 .45rem;
}
.bw-sidebar--member .bw-sidebar-link {
  justify-content: flex-start; gap: .65rem;
  padding: .6rem .75rem; border-radius: 10px;
  font-weight: 500; color: rgba(255,255,255,.72);
  position: relative;
}
.bw-sidebar--member .bw-sidebar-link:hover {
  background: rgba(255,255,255,.07); color: #fff;
}
.bw-sidebar--member .bw-sidebar-link.active {
  background: rgba(14,165,233,.16); color: #fff; font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(56,189,248,.28);
}
.bw-sidebar--member .bw-sidebar-link.active::before {
  content: ""; position: absolute; left: -.85rem; top: 50%;
  transform: translateY(-50%); width: 3px; height: 1.4rem;
  border-radius: 0 3px 3px 0; background: var(--bw-sky, #38bdf8);
}
.bw-sidebar-ico {
  flex: 0 0 auto; width: 18px; height: 18px;
  display: grid; place-items: center; opacity: .85;
}
.bw-sidebar-ico svg { width: 18px; height: 18px; display: block; }
.bw-sidebar--member .bw-sidebar-link.active .bw-sidebar-ico { opacity: 1; }
.bw-sidebar--member .bw-sidebar-group > summary { gap: .65rem; padding-left: .75rem; }
.bw-sidebar--member .bw-sidebar-children .bw-sidebar-link { padding-left: 2.4rem; }

@media (max-width: 960px) {
  /* In the horizontal/off-canvas states keep the accent from leaking. */
  .bw-sidebar--member .bw-sidebar-link.active::before { display: none; }
}