/* AB Navigation — base.css
   Tokens + layout pinned to Figma (fileKey jQvpFrijkbWz4ODQfZMZFc).
   Services root:    21421:65408 / 21632:3904
   Doctor services:  21380:1520 */

@font-face {
  font-family: 'Centra No2';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/CentraNo2-Book.woff2') format('woff2');
}
@font-face {
  font-family: 'Centra No2';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/CentraNo2-Medium.woff2') format('woff2');
}
@font-face {
  font-family: 'Centra No2';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/fonts/CentraNo2-Bold.woff2') format('woff2');
}

:root {
  --ab-white: #ffffff;
  --ab-brand: #0065f2;
  --ab-brand-deep: #005bda;
  --ab-bg-tint: #ecf4fe;
  --ab-bg-light-blue: #cce0fc;       /* Site Colours/Backgrounds/Light Blue + B-Tertiary */
  --ab-text-primary: #25292e;
  --ab-text-secondary: #3e4247;
  --ab-text-on-brand-title: #cce0fc;
  --ab-text-b-subdued: #99c1fa;      /* Site Colours/Text/B-Subdued (breadcrumb upstream) */
  --ab-border-button: #d4d5d6;       /* Site Colours/Buttons/Border */

  /* Continue bar states.
     Disabled = Figma Yellow-50 fill + W-Subdued text (node 21380:1520).
     Enabled  = InstantScripts brand orange (Yellow-600 #c27100 is the same
     accent used in the page title "Request one or more services"). */
  --ab-continue-disabled-bg: #fef4e6;  /* Colour Spectrum/Yellow-50 */
  --ab-continue-disabled-fg: #a9abad;
  --ab-continue-enabled-bg: #f28d00;   /* Colour Spectrum/Yellow-500 */
  --ab-continue-enabled-fg: #ffffff;
  --ab-accent-orange: #da7f00;         /* Subpage-title highlight (Figma 21380:1520) */

  --ab-panel-width: 375px;        /* legacy token; panel itself now uses 100% with max-width: 500px */
  --ab-content-width: 100%;       /* fluid; pairs with max-width: 100% on each consumer to stretch with the panel */

  --ab-card-radius: 20px;
  --ab-tab-pill-radius: 44px;
  --ab-continue-pill-radius: 8px;

  --ab-font-heading: 'Centra No2', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
  --ab-font-body: 'Centra No2', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
  --ab-font-tab: 'Circular Std', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;

  /* Popup tokens (Figma 21740:24120). Head band uses Lightest Blue; body is
     white with an inset bottom shadow; chip uses Green-50/Green-800; CTA is
     the standard brand button. */
  --ab-popup-head-bg: #ecf4fe;              /* Site Colours/Backgrounds/Lightest Blue */
  --ab-popup-body-bg: #ffffff;
  --ab-popup-body-fg: #696c70;              /* Site Colours/Text/W-Tertiary (Body) */
  --ab-popup-chip-bg: #e6feec;              /* Colour Spectrum/Green-50; also reused as .ab-nav-promo background */
  --ab-popup-chip-fg: #00611c;              /* Colour Spectrum/Green-800 */
  --ab-popup-width: 327px;
  --ab-popup-radius: 23px;
  --ab-popup-backdrop: rgba(0, 0, 0, 0.5);

  /* Info box tokens (Figma 21570:61926). Light grey fill with body text in
     W-Secondary and green accent on safety phrases (Green-700). */
  --ab-info-box-bg: #efeff0;                /* Colour Spectrum/Grey-0 */
  --ab-info-box-accent: #00a930;            /* Colour Spectrum/Green-700 */

  /* Services-tab card colour triples (Figma 21421:65408): light outer tint,
     darker inner solid, list-bullet icon hue (matches inner family). Surfaced
     as tokens so Phase-2 Insider can re-skin cards without rewriting selectors. */
  --ab-card-doctor-outer: rgba(17, 138, 178, 0.2);
  --ab-card-doctor-inner: #004c8b;
  --ab-card-doctor-icon: #004c8b;
  --ab-card-weight-outer: rgba(255, 209, 102, 0.2);
  --ab-card-weight-inner: #e0a825;
  --ab-card-weight-icon: #e0a825;
  --ab-card-mental-outer: rgba(6, 214, 160, 0.2);
  --ab-card-mental-inner: #048f67;
  --ab-card-mental-icon: #048f67;
  --ab-card-health-outer: rgba(130, 37, 223, 0.2);
  --ab-card-health-inner: #8225e0;
  --ab-card-health-icon: #8225e0;
  --ab-card-menopause-outer: rgba(239, 71, 111, 0.2);
  --ab-card-menopause-inner: #ae1e88;
  --ab-card-menopause-icon: #ae1e88;

  --ab-shadow-panel: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --ab-shadow-continue: 0 0 4px rgba(0, 0, 0, 0.05);
  --ab-shadow-popup-head: 0 -4px 4px rgba(0, 0, 0, 0.02);
  --ab-shadow-popup-body-inset: inset 0 -4px 4px rgba(0, 0, 0, 0.05);
  --ab-transition-panel: transform 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
  --ab-transition-page: transform 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
  --ab-transition-chrome: opacity 220ms ease, transform 220ms ease, background-color 220ms ease, color 220ms ease;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--ab-font-body);
  color: var(--ab-text-primary);
  background: #e5e7eb;
  min-height: 100vh;
}

/* -------- Open trigger (demo-only) -------- */
#ab-nav-trigger {
  position: fixed;
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: var(--ab-brand);
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  z-index: 10;
  box-shadow: 0 4px 12px rgba(0, 101, 242, 0.25);
}
.ab-nav-trigger-bar {
  display: block;
  width: 16px;
  height: 2px;
  background: var(--ab-white);
  border-radius: 2px;
}

/* -------- Panel shell (persistent chrome + sliding body) -------- */
#ab-nav-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  max-width: 500px;
  height: 100vh;
  height: 100dvh;
  background: var(--ab-white);
  box-shadow: var(--ab-shadow-panel);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateX(100%);
  transition: var(--ab-transition-panel);
  z-index: 20;
}
#ab-nav-panel.ab-nav-panel--open {
  transform: translateX(0);
}

/* -------- Persistent header (does not slide) --------
   Figma 21570:33348: pl-16 pr-4 py-8, brand background. Two states:
     - Root (Services page): logo + hamburger close.
     - Sub-pages: light-blue back-circle + breadcrumb trail (Start >
       ancestors > current) + close. The back-circle and breadcrumbs
       share the .ab-nav-breadcrumbs slot; logo and breadcrumbs swap
       via opacity/transform driven by applyChromeFor() in events.js. */
.ab-nav-header {
  position: relative;
  background: var(--ab-brand);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 4px 8px 16px;
  flex-shrink: 0;
  z-index: 3;
}
.ab-nav-logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 24px;
  opacity: 1;
  transform: translateX(0);
  transition: var(--ab-transition-chrome);
}
.ab-nav-logo-mark {
  width: 34px;
  height: 24px;
  display: block;
  flex-shrink: 0;
}
.ab-nav-logo-word {
  width: 109px;
  height: 16px;
  display: block;
  flex-shrink: 0;
}
.ab-nav-logo--hidden {
  opacity: 0;
  transform: translateX(-8px);
  pointer-events: none;
}

/* Breadcrumbs sit in the same header slot as the logo; only one is visible
   at a time (logo on root services, breadcrumbs on drilled-in sub-pages).
   The trail leads with a 40px back-circle (Figma colour Blue-150) followed
   by Start > [ancestors] > current. Per Figma, the leaf/current label is
   rendered subdued (#99c1fa); ancestors render white. */
.ab-nav-breadcrumbs {
  position: absolute;
  left: 16px;
  top: 50%;
  display: inline-flex;
  align-items: center;
  /* Inter-label gap = 5px per Figma (inner flex group). The 8px gap between
     the back-circle and the first label is added via a margin-left below
     so we don't need to wrap labels in a nested div. */
  gap: 5px;
  font-family: var(--ab-font-body);
  font-size: 14px;
  line-height: 21px;
  color: var(--ab-white);
  white-space: nowrap;
  opacity: 0;
  transform: translateY(-50%) translateX(-8px);
  transform-origin: left center;
  transition: var(--ab-transition-chrome);
  pointer-events: none;
}
/* Restore the outer 8px between back-circle and root crumb (Figma outer
   gap is 8px; the inner label group is 5px, controlled by the parent
   `gap` above). Adjacent-sibling selector — only fires when both the
   back-circle and the root crumb are present (i.e. on sub-pages). */
.ab-nav-header-back + .ab-nav-breadcrumbs__root {
  margin-left: 3px; /* 5px container gap + 3px = 8px total */
}
.ab-nav-breadcrumbs--visible {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
  pointer-events: auto;
}
/* In-header back-circle (Figma 32px). Replaces the role previously held by
   the back button in #ab-nav-continue on sub-pages. Carries .ab-nav-back so
   the delegated click handler in events.js still routes to handleBackClick.
   The doubled `.ab-nav-header-back.ab-nav-back` selector bumps specificity
   over the base `.ab-nav-back { display:none }` rule (same trick as
   `.ab-nav-page-banner__back.ab-nav-back`) — visibility is governed by
   the parent `.ab-nav-breadcrumbs--visible` toggle, not by `--visible`. */
.ab-nav-header-back.ab-nav-back {
  width: 32px;
  height: 32px;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: filter 150ms ease;
}
.ab-nav-header-back.ab-nav-back img {
  width: 32px;
  height: 32px;
  display: block;
  pointer-events: none;
}
.ab-nav-header-back.ab-nav-back:hover {
  background: transparent;
  filter: brightness(1.05);
}
.ab-nav-header-back.ab-nav-back:focus-visible {
  outline: 2px solid var(--ab-white);
  outline-offset: 2px;
}
/* Visual feedback while the router's slide-transition lock is active. The
   JS gate in events.js + router.js already prevents rapid back / forward
   taps from stacking transitions; this rule just dampens the back buttons
   so the user gets immediate "pressed, please wait" feedback. The
   `pointer-events: none` is belt-and-braces over the JS guard — it also
   blocks hover / focus styling during the brief animation. Body class
   set/cleared in router.js's showPage / cleanup. */
body.ab-nav-transitioning .ab-nav-header-back,
body.ab-nav-transitioning .ab-nav-page-banner__back {
  pointer-events: none;
  opacity: 0.6;
}
.ab-nav-breadcrumbs__root {
  color: var(--ab-white);
  font-size: 14px;
  line-height: 21px;
}
/* 4-segment trail collapse (Figma 21826:46761 — Prescriptions-Questions).
   When the grandparent slot is populated the trail becomes Start > X > Y > Z
   which overflows the 375px header and collides with #ab-nav-close. Per
   Figma, the root segment renders as literal "..." in this state. The
   accessible "Start" textContent stays for screen readers + click semantics;
   only the visual swaps via a pseudo-element. Requires :has() — supported
   in all evergreen browsers the prototype targets (Chrome 105+, Safari 15.4+,
   Firefox 121+). */
.ab-nav-breadcrumbs:has(.ab-nav-breadcrumbs__grandparent:not([hidden])) .ab-nav-breadcrumbs__root {
  font-size: 0;
  letter-spacing: 0;
}
.ab-nav-breadcrumbs:has(.ab-nav-breadcrumbs__grandparent:not([hidden])) .ab-nav-breadcrumbs__root::before {
  content: "...";
  font-size: 12px;
  line-height: 21px;
  color: var(--ab-white);
}
.ab-nav-breadcrumbs__sep {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ab-text-b-subdued);
  width: 4px;
  height: 8px;
}
/* Per Figma: ancestor slots (parent / grandparent) render white because they
   are NOT the current page; the current/leaf slot renders subdued because
   it IS the page the user is on (no need to highlight as a target).
   Grandparent slot is the 4th-level segment used on search-condition (Start >
   Search > A > Anxiety disorders); same visual treatment as the parent slot. */
.ab-nav-breadcrumbs__parent,
.ab-nav-breadcrumbs__grandparent {
  color: var(--ab-white);
  font-size: 12px;
  line-height: 21px;
  white-space: nowrap;
}
.ab-nav-breadcrumbs__current {
  color: var(--ab-text-b-subdued);
  font-size: 12px;
  line-height: 21px;
}
/* Parent (3rd segment) and grandparent (4th segment) slots are populated by
   setBreadcrumbText; an empty slot collapses both itself and its trailing
   separator so shallower pages keep the short "Home > Current" / "Home >
   Parent > Current" trail. */
.ab-nav-breadcrumbs__parent:empty,
.ab-nav-breadcrumbs__parent:empty + .ab-nav-breadcrumbs__sep--parent,
.ab-nav-breadcrumbs__grandparent:empty,
.ab-nav-breadcrumbs__grandparent:empty + .ab-nav-breadcrumbs__sep--grandparent {
  display: none;
}
/* Clickable crumbs (root + parent) — render as plain text buttons that look
   identical to the spans they replaced; `setBreadcrumbText` in events.js
   toggles the parent's `hidden` attr in lockstep with its textContent so the
   trailing separator stays in sync via the `:empty` rule above.
   IMPORTANT: do NOT use the `font` shorthand here — it expands to font-size
   `medium` and clobbers the per-slot 12px / 14px declarations above
   regardless of source order. Inherit only the family + weight; let each
   slot's own rule set its size and line-height. */
.ab-nav-breadcrumbs__crumb {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  color: inherit;
  font-family: inherit;
  font-weight: inherit;
  font-style: inherit;
  cursor: pointer;
}
.ab-nav-breadcrumbs__crumb:hover {
  text-decoration: underline;
}
.ab-nav-breadcrumbs__crumb:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

#ab-nav-close {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ab-white);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background-color 150ms ease;
  position: relative;
  z-index: 1;
}
#ab-nav-close:hover {
  background: var(--ab-brand-deep);
}
#ab-nav-close:focus-visible {
  outline: 2px solid var(--ab-white);
  outline-offset: -2px;
}

/* -------- Body viewport: holds pages side-by-side, slides horizontally -------- */
.ab-nav-body {
  flex: 1 1 auto;
  position: relative;
  display: block;
  overflow: hidden;
  min-height: 0;
}

/* Services root page chrome spacing per Figma 21421:65408:
   page padding 16px / 16px / 24px (top/sides/bottom), 24px gap between the
   search+tabs cluster and the cards stack, 8px gap between search and tabs.
   Search appears visually above tabs (Figma stacks search → tabs → cards) but
   the DOM order is tabs → search → cards, so we use `order` to flip them
   without touching index.html. */
.ab-nav-page[data-page="services"] {
  padding: 16px 16px 24px;
  gap: 24px;
}
.ab-nav-page[data-page="services"] .ab-nav-home-search { order: 1; }
.ab-nav-page[data-page="services"] .ab-nav-tabs {
  order: 2;
  /* 24px parent gap - 16px = 8px visual gap to the search bar above */
  margin-top: -16px;
}
.ab-nav-page[data-page="services"] .ab-nav-tab-content { order: 3; }

/* Each page is absolutely positioned inside the body viewport so horizontal
   slide transitions compose cleanly without reflowing siblings. Active page
   sits at translateX(0); inactive pages park off-screen in the direction they
   came from / are heading to. */
.ab-nav-page {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 32px 16px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: stretch;
  transform: translateX(100%);
  transition: var(--ab-transition-page);
  pointer-events: none;
}
.ab-nav-page[hidden] {
  display: none;
}
.ab-nav-page--active {
  transform: translateX(0);
  pointer-events: auto;
}
/* Directional slide classes — Backend applies these during transitions */
.ab-nav-page--exiting-left {
  transform: translateX(-100%);
  pointer-events: none;
}
.ab-nav-page--entering-right {
  transform: translateX(100%);
  pointer-events: none;
}
.ab-nav-page--exiting-right {
  transform: translateX(100%);
  pointer-events: none;
}
.ab-nav-page--entering-left {
  transform: translateX(-100%);
  pointer-events: none;
}

/* -------- Search page transition opt-out (item 1, Apr 2026) ----------------
   The search page (data-page="search") and any page swapping with it must
   FADE rather than slide. Implementation: opt out of the horizontal transform
   on both the search page itself AND on whichever page is sliding to/from it
   in the same transition (the partner page carries the slide direction class
   while search carries `--active` / nothing). We express this with two
   selector groups:
     1. The search page itself never translates — its transform stays at 0
        regardless of `--active` / `--entering-*` / `--exiting-*` states; only
        opacity drives the visibility change.
     2. When the search page is in the DOM as `--active` (incoming) OR has
        either `--entering-*` / `--exiting-*` (outgoing or incoming), its
        sibling pages also lose their slide transform via the body-level
        `data-search-transition` flag set by router.js. This is needed so the
        OUTGOING services page on a search-forward navigation does not slide
        left while search fades in — both pages must share the fade.
   Duration: 180ms, slightly faster than the 320ms slide so the user-perceived
   "quick fade" feels snappy. */
.ab-nav-page--search,
.ab-nav-page--search.ab-nav-page--active,
.ab-nav-page--search.ab-nav-page--exiting-left,
.ab-nav-page--search.ab-nav-page--exiting-right,
.ab-nav-page--search.ab-nav-page--entering-left,
.ab-nav-page--search.ab-nav-page--entering-right {
  transform: none;
  transition: opacity 180ms ease;
}
.ab-nav-page--search:not(.ab-nav-page--active) {
  opacity: 0;
}
.ab-nav-page--search.ab-nav-page--active {
  opacity: 1;
}
.ab-nav-page--search.ab-nav-page--entering-right,
.ab-nav-page--search.ab-nav-page--entering-left {
  /* Incoming start state — invisible, fade in on next frame as `--active`
     arrives and the entering class is cleared by transitionend. */
  opacity: 0;
}
.ab-nav-page--search.ab-nav-page--exiting-left,
.ab-nav-page--search.ab-nav-page--exiting-right {
  /* Outgoing start state — visible, fade out as `--active` is removed. The
     outgoing page already lost `--active`, so opacity hits 0 via the rule
     above; this ruleset is here purely to nullify the horizontal transform. */
  opacity: 0;
}
/* Partner page (the one swapping with search): also drop the slide and
   share the 180ms fade. The `data-search-transition` attribute is set on
   <body> by router.showPage() while a search-page transition is in-flight,
   then cleared after transitionend. */
body[data-search-transition] .ab-nav-page.ab-nav-page--exiting-left,
body[data-search-transition] .ab-nav-page.ab-nav-page--exiting-right,
body[data-search-transition] .ab-nav-page.ab-nav-page--entering-left,
body[data-search-transition] .ab-nav-page.ab-nav-page--entering-right {
  transform: none;
  transition: opacity 180ms ease;
  opacity: 0;
}
body[data-search-transition] .ab-nav-page.ab-nav-page--active {
  transition: opacity 180ms ease;
}

/* -------- Tabs (Services root page) -------- */
.ab-nav-tabs {
  background: #e6f0fe;
  border-radius: var(--ab-tab-pill-radius);
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  width: var(--ab-content-width);
  max-width: 100%;
  align-self: center;
  overflow: hidden;
  flex-shrink: 0;
}
.ab-nav-tab {
  flex: 1 0 0;
  min-width: 0;
  height: 44px;
  padding: 12px 24px;
  border: 0;
  background: transparent;
  color: var(--ab-text-secondary);
  font-family: var(--ab-font-tab);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  cursor: pointer;
  border-radius: var(--ab-tab-pill-radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  transition: background-color 180ms ease, color 180ms ease;
}
.ab-nav-tab--active {
  background: var(--ab-white);
  color: var(--ab-continue-enabled-bg);
  font-weight: 500;
}
.ab-nav-tab:focus-visible {
  outline: 2px solid var(--ab-brand);
  outline-offset: 2px;
}
/* Firefox-only: strip the inner dotted ring on focused <button>. */
.ab-nav-tab::-moz-focus-inner {
  border: 0;
  padding: 0;
}

.ab-nav-tab-content {
  display: none;
}
.ab-nav-tab-content--active {
  display: block;
}

/* -------- Card stack (shared) -------- */
.ab-nav-cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-self: center;
  width: var(--ab-content-width);
  max-width: 100%;
}
/* Doctor Services + search-condition both stack their action cards with
   an 8px gap (Figma 21765:35045 mirrors the doctor-services pattern).
   Scoped per-page so the base 16px gap used elsewhere is untouched. */
.ab-nav-page[data-page="doctor-services"] .ab-nav-cards,
.ab-nav-page[data-page="search-condition"] .ab-nav-cards {
  gap: 8px;
}
.ab-nav-card {
  display: flex;
  align-items: center;
  width: 100%;
  /* min-height matches --active state so the card does not reflow (grow taller)
     when its active class is toggled. Border-width is also kept identical
     across states (transparent 2px below; brand-coloured 2px in --active) to
     prevent a 2px content shift on selection. */
  min-height: 128px;
  padding: 16px 16px 16px 24px;
  background: var(--ab-bg-tint);
  border: 2px solid rgba(0, 0, 0, 0);
  border-radius: var(--ab-card-radius);
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  gap: 8px;
  transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease, color 180ms ease;
}
.ab-nav-card:focus-visible {
  outline: 2px solid var(--ab-brand);
  outline-offset: 2px;
}

/* Belt-and-braces: all decorative content inside a card is click-passthrough
   so the click always lands on the .ab-nav-card button itself. The delegated
   handler in events.js already uses closest('.ab-nav-card'), but this rule
   removes any chance of an inner img / svg / span swallowing the click target
   and breaking the user's mental model that the entire card is one click
   target. Same intent for the A-Z condition tile. */
.ab-nav-card *,
.ab-nav-condition-tile * {
  pointer-events: none;
}

/* Single-select active — Services root card fills brand blue. */
.ab-nav-card--active {
  background: var(--ab-brand);
  border-color: var(--ab-brand);
}
.ab-nav-card--active .ab-nav-card-title {
  color: var(--ab-text-on-brand-title);
}
.ab-nav-card--active .ab-nav-card-list li {
  color: var(--ab-white);
}
/* Stacked-variant desc text (e.g. doctor-consultation cards) flips to the
   light-on-brand title token when the card is active, matching the title's
   contrast against the brand-blue fill. */
.ab-nav-card--active .ab-nav-card-desc {
  color: var(--ab-text-on-brand-title);
}
.ab-nav-card--active .ab-nav-card-icon img,
.ab-nav-card--active .ab-nav-card-icon svg {
  filter: brightness(0) invert(1);
}

/* Multi-select active — Doctor Services page uses a tinted background + brand
   border ring so a ticked card reads distinctly from the single-select fill
   used on the root Services page. */
.ab-nav-card--active-multi {
  background: var(--ab-bg-light-blue);
  border-color: var(--ab-brand);
  box-shadow: inset 0 0 0 1px var(--ab-brand);
}
.ab-nav-card--active-multi .ab-nav-card-title {
  color: var(--ab-text-secondary);
}

.ab-nav-card-main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  /* Figma column width (Services-root card, node 21421:65408): icon + title
     stack on the left in a 123px column; the .ab-nav-card-list bullets flex
     to fill the remaining space. The .ab-nav-card--stacked variant overrides
     this back to flex:1 so the description column on its right can hold 151px. */
  width: 123px;
  flex-shrink: 0;
}
.ab-nav-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.ab-nav-card-icon img,
.ab-nav-card-icon svg {
  width: 40px;
  height: 40px;
  display: block;
}
.ab-nav-card-title {
  font-family: var(--ab-font-heading);
  font-weight: 700;
  font-size: 16px;
  line-height: 20px;
  color: var(--ab-text-secondary);
  display: flex;
  flex-direction: column;
}

.ab-nav-card-list {
  flex: 1 0 0;
  min-width: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
}
.ab-nav-card-list li {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  width: 100%;
  font-family: var(--ab-font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 21px;
  color: var(--ab-text-primary);
}
.ab-nav-card-list li .ab-nav-card-list-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: block;
}

/* -------- Services tab — coloured card variant (Figma 21421:65408) --------
   Scoped to .ab-nav-tab-content[data-tab="services"] so other tabs and sub-
   pages keep the shared base card look. Per-card colour triple (outer tint /
   inner solid / list-icon hue) is driven by --ab-card-{id}-* tokens in :root,
   piped through local --ab-card-cur-* vars (see colour binding block below). */
.ab-nav-tab-content[data-tab="services"] .ab-nav-cards {
  gap: 8px;
}
.ab-nav-tab-content[data-tab="services"] .ab-nav-card {
  padding: 0;
  overflow: hidden;
  gap: 0;
  /* No transparent base-state border on services-root cards: with
     background-clip:border-box the 2px border area renders the outer-tint
     background, producing a thin lighter "frame" around each card. Services-
     root cards never enter --active (they navigate away on click), so we can
     safely drop the border here without re-introducing layout shift. */
  border: 0;
  /* Override base align-items:center so the dark inner panel (.ab-nav-card-
     main) fills the card's full height. Without this, when the right-column
     list is taller than icon+title, the inner panel stays at its content
     height and the card's lighter outer tint bleeds through at the bottom. */
  align-items: stretch;
}
.ab-nav-tab-content[data-tab="services"] .ab-nav-card .ab-nav-card-main {
  width: 143px;
  justify-content: center;
  padding: 16px 16px 16px 20px;
}
.ab-nav-tab-content[data-tab="services"] .ab-nav-card .ab-nav-card-title {
  color: rgba(255, 255, 255, 0.9);
}
.ab-nav-tab-content[data-tab="services"] .ab-nav-card .ab-nav-card-icon img,
.ab-nav-tab-content[data-tab="services"] .ab-nav-card .ab-nav-card-icon svg {
  filter: brightness(0) invert(1);
}
.ab-nav-tab-content[data-tab="services"] .ab-nav-card .ab-nav-card-list {
  padding: 0 8px;
}

/* Right-column list icons render as masked <span>s so each card can recolour
   them via background-color. We previously used <img>, but a replaced <img>
   element renders the source SVG strokes on top of the background-color,
   defeating the per-card icon hue. With <span>, only the masked background-
   color paints, producing a clean themed glyph regardless of the source
   SVG's literal stroke colour. */
.ab-nav-tab-content[data-tab="services"] .ab-nav-card .ab-nav-card-list li .ab-nav-card-list-icon {
  mask-image: var(--ab-list-icon-src);
  -webkit-mask-image: var(--ab-list-icon-src);
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-position: center;
  mask-size: contain;
  -webkit-mask-size: contain;
}

/* Each card binds its colour triple to local --ab-card-cur-* vars, then three
   shared rules consume them — outer tint on the card, inner solid on the main
   panel, icon hue on the masked list <img>s. Per-row icon sources hang off
   :nth-child via --ab-list-icon-src. */
.ab-nav-tab-content[data-tab="services"] .ab-nav-card[data-card-id="doctor-services"] {
  --ab-card-cur-outer: var(--ab-card-doctor-outer);
  --ab-card-cur-inner: var(--ab-card-doctor-inner);
  --ab-card-cur-icon:  var(--ab-card-doctor-icon);
}
.ab-nav-tab-content[data-tab="services"] .ab-nav-card[data-card-id="weight-management"] {
  --ab-card-cur-outer: var(--ab-card-weight-outer);
  --ab-card-cur-inner: var(--ab-card-weight-inner);
  --ab-card-cur-icon:  var(--ab-card-weight-icon);
}
.ab-nav-tab-content[data-tab="services"] .ab-nav-card[data-card-id="mental-health"] {
  --ab-card-cur-outer: var(--ab-card-mental-outer);
  --ab-card-cur-inner: var(--ab-card-mental-inner);
  --ab-card-cur-icon:  var(--ab-card-mental-icon);
}
.ab-nav-tab-content[data-tab="services"] .ab-nav-card[data-card-id="health-checks"] {
  --ab-card-cur-outer: var(--ab-card-health-outer);
  --ab-card-cur-inner: var(--ab-card-health-inner);
  --ab-card-cur-icon:  var(--ab-card-health-icon);
}
.ab-nav-tab-content[data-tab="services"] .ab-nav-card[data-card-id="menopause-management"] {
  --ab-card-cur-outer: var(--ab-card-menopause-outer);
  --ab-card-cur-inner: var(--ab-card-menopause-inner);
  --ab-card-cur-icon:  var(--ab-card-menopause-icon);
}

.ab-nav-tab-content[data-tab="services"] .ab-nav-card { background: var(--ab-card-cur-outer); }
.ab-nav-tab-content[data-tab="services"] .ab-nav-card .ab-nav-card-main { background: var(--ab-card-cur-inner); }
.ab-nav-tab-content[data-tab="services"] .ab-nav-card .ab-nav-card-list li .ab-nav-card-list-icon { background-color: var(--ab-card-cur-icon); }

/* Per-row list icon sources (mask-image src for each <li>). */
.ab-nav-tab-content[data-tab="services"] .ab-nav-card[data-card-id="doctor-services"] .ab-nav-card-list li:nth-child(1) .ab-nav-card-list-icon { --ab-list-icon-src: url('../assets/icon-phone-20.svg'); }
.ab-nav-tab-content[data-tab="services"] .ab-nav-card[data-card-id="doctor-services"] .ab-nav-card-list li:nth-child(2) .ab-nav-card-list-icon { --ab-list-icon-src: url('../assets/icon-pills-20.svg'); }
.ab-nav-tab-content[data-tab="services"] .ab-nav-card[data-card-id="doctor-services"] .ab-nav-card-list li:nth-child(3) .ab-nav-card-list-icon { --ab-list-icon-src: url('../assets/icon-medical-certificate-20.svg'); }
.ab-nav-tab-content[data-tab="services"] .ab-nav-card[data-card-id="doctor-services"] .ab-nav-card-list li:nth-child(4) .ab-nav-card-list-icon { --ab-list-icon-src: url('../assets/icon-microscope-20.svg'); }

.ab-nav-tab-content[data-tab="services"] .ab-nav-card[data-card-id="weight-management"] .ab-nav-card-list li:nth-child(1) .ab-nav-card-list-icon { --ab-list-icon-src: url('../assets/icon-doctor-steth-20.svg'); }
.ab-nav-tab-content[data-tab="services"] .ab-nav-card[data-card-id="weight-management"] .ab-nav-card-list li:nth-child(2) .ab-nav-card-list-icon { --ab-list-icon-src: url('../assets/icon-treatment-option-20.svg'); }
.ab-nav-tab-content[data-tab="services"] .ab-nav-card[data-card-id="weight-management"] .ab-nav-card-list li:nth-child(3) .ab-nav-card-list-icon { --ab-list-icon-src: url('../assets/icon-clock-20.svg'); }

.ab-nav-tab-content[data-tab="services"] .ab-nav-card[data-card-id="mental-health"] .ab-nav-card-list li:nth-child(1) .ab-nav-card-list-icon { --ab-list-icon-src: url('../assets/icon-mental-health-care-20.svg'); }
.ab-nav-tab-content[data-tab="services"] .ab-nav-card[data-card-id="mental-health"] .ab-nav-card-list li:nth-child(2) .ab-nav-card-list-icon { --ab-list-icon-src: url('../assets/icon-treatment-option-20.svg'); }
.ab-nav-tab-content[data-tab="services"] .ab-nav-card[data-card-id="mental-health"] .ab-nav-card-list li:nth-child(3) .ab-nav-card-list-icon { --ab-list-icon-src: url('../assets/icon-referral-20.svg'); }

.ab-nav-tab-content[data-tab="services"] .ab-nav-card[data-card-id="health-checks"] .ab-nav-card-list li:nth-child(1) .ab-nav-card-list-icon { --ab-list-icon-src: url('../assets/icon-heart-tick-20.svg'); }
.ab-nav-tab-content[data-tab="services"] .ab-nav-card[data-card-id="health-checks"] .ab-nav-card-list li:nth-child(2) .ab-nav-card-list-icon { --ab-list-icon-src: url('../assets/icon-vegan-20.svg'); }
.ab-nav-tab-content[data-tab="services"] .ab-nav-card[data-card-id="health-checks"] .ab-nav-card-list li:nth-child(3) .ab-nav-card-list-icon { --ab-list-icon-src: url('../assets/icon-immunity-20.svg'); }
.ab-nav-tab-content[data-tab="services"] .ab-nav-card[data-card-id="health-checks"] .ab-nav-card-list li:nth-child(4) .ab-nav-card-list-icon { --ab-list-icon-src: url('../assets/icon-sti-check-20.svg'); }

.ab-nav-tab-content[data-tab="services"] .ab-nav-card[data-card-id="menopause-management"] .ab-nav-card-list li:nth-child(1) .ab-nav-card-list-icon { --ab-list-icon-src: url('../assets/icon-diagnose-20.svg'); }
.ab-nav-tab-content[data-tab="services"] .ab-nav-card[data-card-id="menopause-management"] .ab-nav-card-list li:nth-child(2) .ab-nav-card-list-icon { --ab-list-icon-src: url('../assets/icon-treatment-option-20.svg'); }

/* -------- Doctor Services sub-page -------- */
.ab-nav-subpage {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: stretch;
  width: 100%;
}
.ab-nav-subpage-title {
  margin: 0;
  align-self: center;
  width: var(--ab-content-width);
  max-width: 100%;
  font-family: var(--ab-font-heading);
  font-weight: 500;
  font-size: 24px;
  line-height: 32px;
  color: var(--ab-text-primary);
}
.ab-nav-accent {
  color: var(--ab-accent-orange);
  font-size: 24px;
  line-height: 32px;
  font-weight: 700;
}

/* Stacked card variant used on sub-pages: icon + title sit above-left, a
   description paragraph sits to the right (50/50 split per Figma 21380:1520). */
.ab-nav-card--stacked .ab-nav-card-main {
  width: auto;
  flex: 1 0 0;
  min-width: 0;
}

/* Mental-health page: Figma 21961:25614 specifies 120px tall stacked cards
   (vs the shared 128px base). Padding 16/16/16/24 already matches the base
   .ab-nav-card rule. Scoped to this page only so the other stacked sub-pages
   (medication-prescription / -repeats / -currently-taking, doctor-consultation,
   medical-certificate-days) keep the established 128px floor. The active-state
   reflow defence still holds because the same min-height applies in all states. */
.ab-nav-page[data-page="mental-health"] .ab-nav-card--stacked {
  min-height: 120px;
}
.ab-nav-card-desc {
  margin: 0;
  /* Figma column width (sub-page stacked variant, node 21380:1520): icon + title
     column flexes; description holds its 151px column to the right. */
  width: 151px;
  flex-shrink: 0;
  font-family: var(--ab-font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 21px;
  color: var(--ab-text-secondary);
}

/* -------- Search > Condition action card (Figma 21765:35045) --------
   Two-column horizontal card used on the search-condition detail page.
   Left column flexes and stacks the icon above the title (icon in its 4px
   wrapper, then a bold 16/20 title that may wrap onto two lines). Right
   column is a fixed-width 151px description — matches Figma exactly so the
   description always sits in the same gutter regardless of title length.
   min-height 120px floors the card per Figma; the base .ab-nav-card sets
   128px which would push the row taller than the design. */
.ab-nav-card--search {
  flex-direction: row;
  align-items: center;
  min-height: 120px;
  padding: 16px 16px 16px 24px;
  gap: 8px;
}
.ab-nav-card-search-left {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.ab-nav-card-search-title {
  font-family: var(--ab-font-heading);
  font-weight: 700;
  font-size: 16px;
  line-height: 20px;
  color: var(--ab-text-secondary);
  text-align: left;
  /* Display:flex column so each line of the title (split on "\n" in
     events.js) stacks below the previous one — matches Figma 21765:35045
     which breaks "Speak to" / "a doctor", "Medication" / "prescription"
     etc. onto two explicit lines via separate text nodes. The leading-20
     spec is retained on each line. */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  white-space: nowrap;
}
.ab-nav-card-search-title > span {
  display: block;
}
.ab-nav-card-search-desc {
  flex-shrink: 0;
  width: 151px;
  font-family: var(--ab-font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 21px;
  color: var(--ab-text-secondary);
  text-align: left;
}
/* Multi-select active state — flip text colours to match the Figma active
   state for these cards. The base .ab-nav-card--active-multi rule already
   handles background + border, but the overrides above target the new
   .ab-nav-card-search-* type slots, so we redeclare the active text colour
   here for parity with the existing active-multi rule. */
.ab-nav-card--active-multi .ab-nav-card-search-title,
.ab-nav-card--active-multi .ab-nav-card-search-desc {
  color: var(--ab-text-secondary);
}

/* -------- Search > Letter results (Figma 21765:35128) --------
   Plain horizontal-row list used on the search-letter page. Each row is a
   clickable navigation tile (no selection model) with a label on the left
   and a small chevron-right on the right. Visually matches the .ab-nav-card
   tint + radius but is denser and single-line per Figma. */
.ab-nav-letter-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}
.ab-nav-letter-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 16px 16px 16px 24px;
  background: var(--ab-bg-tint);
  border: 2px solid rgba(0, 0, 0, 0);
  border-radius: var(--ab-card-radius);
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  transition: background-color 180ms ease, border-color 180ms ease;
}
.ab-nav-letter-row:hover {
  background: var(--ab-bg-light-blue);
}
.ab-nav-letter-row:focus-visible {
  outline: 2px solid var(--ab-brand);
  outline-offset: 2px;
}
.ab-nav-letter-row__label {
  font-family: var(--ab-font-heading);
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: var(--ab-text-secondary);
}
.ab-nav-letter-row__chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  flex-shrink: 0;
  color: var(--ab-brand);
}

/* -------- Full-bleed page variant (search-condition) --------
   Lets a child element (the blue banner) reach the panel edges by zeroing the
   page's horizontal padding. The inner .ab-nav-subpage--full-bleed restores
   side gutters so the cards still align with the standard content column. */
.ab-nav-page--full-bleed {
  padding: 0 0 32px 0;
  gap: 0;
}
.ab-nav-subpage--full-bleed {
  padding: 32px 16px 0 16px;
  gap: 16px;
}

/* Blue banner used at the top of search-condition (Figma 21765:35045 -> Header
   21768:44679). Slightly darker than --ab-brand to give the banner its own
   surface tone, with white display title + light-blue body copy + an inset
   bottom shadow to lift the white content area below. */
.ab-nav-page-banner {
  position: relative;
  width: 100%;
  background: var(--ab-brand-deep);
  /* Figma 21765:35045 -> Header 21768:44679: pt 24, pb 36, px 24. Original
     Figma gap was 24px; tightened to 16px to keep the title / desc / Read more
     button stack reading as a single group. */
  padding: 24px 24px 36px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: stretch;
  box-shadow: inset 0 -4px 8px rgba(0, 0, 0, 0.1);
}
/* Banner back-circle is hidden — Figma 21765:35045 puts the back-circle in
   the panel nav-bar (alongside the breadcrumb trail), not inside the blue
   banner itself. The DOM node is kept so the .ab-nav-back delegated click
   handler in events.js stays simple, but it's never shown on this page. */
.ab-nav-page-banner__back.ab-nav-back {
  display: none;
}
.ab-nav-page-banner__title {
  margin: 0;
  font-family: var(--ab-font-tab);
  font-weight: 500;
  font-size: 32px;
  line-height: 40px;
  color: var(--ab-white);
}
.ab-nav-page-banner__desc {
  margin: 0;
  font-family: var(--ab-font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--ab-text-on-brand-title);
}
/* "Read more" pill button on the search-condition banner. align-self keeps
   it the width of its content (the banner is flex-direction: column). */
.ab-nav-page-banner__read-more {
  align-self: flex-start;
  margin-top: 4px;
  padding: 6px 14px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: transparent;
  color: var(--ab-white);
  border-radius: 999px;
  font-family: var(--ab-font-body);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease;
}
.ab-nav-page-banner__read-more:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.7);
}

/* -------- Reassurance info box (Figma 21570:61926) --------
   Conditional reassurance card on the medication-repeats page. Hidden by
   default; Backend removes [hidden] and adds .ab-nav-info-box--visible when
   the with-repeats card is selected. Light grey fill, 16px title, 14px body
   text with bold green accents on the safety phrases, and a right-aligned
   "Learn more" link in brand blue. Refer to Figma frame 21570:61926 for the
   updated layout — no icon in the head, link replaces the prior info badge. */
.ab-nav-info-box {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 16px;
  background: var(--ab-info-box-bg);
  border-radius: 2px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 220ms ease, transform 220ms ease;
}
.ab-nav-info-box--visible {
  display: flex;
  opacity: 1;
  transform: translateY(0);
}
.ab-nav-info-box-head {
  display: flex;
  align-items: center;
  width: 100%;
}
.ab-nav-info-box-title {
  margin: 0;
  font-family: var(--ab-font-heading);
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: var(--ab-text-primary);
}
.ab-nav-info-box-body {
  margin: 0;
  width: 100%;
  font-family: var(--ab-font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: var(--ab-text-secondary);
}
.ab-nav-info-box-accent {
  font-family: var(--ab-font-heading);
  font-weight: 700;
  color: #009129;
}
.ab-nav-info-box-link {
  display: block;
  width: 100%;
  margin: 0;
  font-family: var(--ab-font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: var(--ab-brand);
  text-align: right;
  text-decoration: none;
}
.ab-nav-info-box-link:hover,
.ab-nav-info-box-link:focus-visible {
  text-decoration: underline;
}

/* -------- Dropdown / accordion (Figma 21400:4606) --------
   Used on the pathology-types page (21380:1518). Each dropdown is a
   collapsible row: a clickable header (lightest-blue pill, brand-blue icon
   + bold secondary-text label, brand-blue chevron) that toggles a body
   region beneath it. Backend toggles `.ab-nav-dropdown--open` on the wrapper
   and `aria-expanded` on the header button; the body's [hidden] attribute is
   removed when open. Card content inside the body is supplied by the next
   build — for now `.ab-nav-cards--stacked` renders empty as a placeholder. */
.ab-nav-dropdowns {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-self: center;
  width: var(--ab-content-width);
  max-width: 100%;
}
.ab-nav-dropdown {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.ab-nav-dropdown__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 16px 16px 16px 24px;
  background: var(--ab-bg-tint);
  border: 2px solid rgba(0, 0, 0, 0);
  border-radius: var(--ab-card-radius);
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  transition: background-color 180ms ease, border-color 180ms ease;
}
.ab-nav-dropdown__header:focus-visible {
  outline: 2px solid var(--ab-brand);
  outline-offset: 2px;
}
.ab-nav-dropdown__label {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}
.ab-nav-dropdown__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 5px;
  flex-shrink: 0;
}
.ab-nav-dropdown__icon img {
  width: 32px;
  height: 32px;
  display: block;
}
.ab-nav-dropdown__title {
  font-family: var(--ab-font-heading);
  font-weight: 700;
  font-size: 16px;
  line-height: 20px;
  color: var(--ab-text-secondary);
  white-space: nowrap;
}
.ab-nav-dropdown__chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  flex-shrink: 0;
  transition: transform 220ms ease;
}
.ab-nav-dropdown__chevron img {
  width: 12px;
  height: 12px;
  display: block;
}
.ab-nav-dropdown--open .ab-nav-dropdown__chevron {
  transform: rotate(180deg);
}
.ab-nav-dropdown__body {
  display: none;
  padding: 4px 0 0;
}
.ab-nav-dropdown--open .ab-nav-dropdown__body {
  display: block;
}

/* Open accordion (pathology-types, specialist-types) merges the header and its
   stacked cards into a single rounded panel: header keeps top corners, body
   cards collapse to a 4px-spaced stack, and the last card carries the bottom
   corners. Excludes the More-tab `--contained` variant which has its own look. */
.ab-nav-dropdown__body .ab-nav-cards {
  gap: 4px;
}
.ab-nav-dropdown--open:not(.ab-nav-dropdown--contained) > .ab-nav-dropdown__header {
  background: var(--ab-bg-light-blue);
  border-radius: 20px 20px 0 0;
}
.ab-nav-dropdown--open:not(.ab-nav-dropdown--contained) > .ab-nav-dropdown__body .ab-nav-cards > * {
  border-radius: 0;
}
.ab-nav-dropdown--open:not(.ab-nav-dropdown--contained) > .ab-nav-dropdown__body .ab-nav-cards > *:last-child {
  border-radius: 0 0 20px 20px;
}

/* -------- More tab (Figma 21390:3633) --------
   Promo card + a contained accordion stack. The accordion stack reuses the
   .ab-nav-dropdown* contract (so Backend's existing toggle handler works)
   but wraps each row in a single 8px-radius pill, separated by white hairlines
   instead of gaps. Card content inside the InstantScripts body is a NEW link-
   list pattern (.ab-nav-link-list); the other three accordions ship with empty
   bodies until future builds populate them. */
.ab-nav-more {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-self: center;
  width: var(--ab-content-width);
  max-width: 100%;
}

/* Promo card — green-tinted (Green-50) capsule with a 160px image strip on
   top and a title + body paragraph beneath. Whole card is a link.
   Specced 1:1 against Figma node 21390:3493 (file jQvpFrijkbWz4ODQfZMZFc):
   16px radius, #e6feec body, 160px media strip, image with
   `object-position: center bottom` so the photo anchors to its bottom edge
   (faces + couch visible; the wall above gets cropped at narrow widths). */
.ab-nav-promo {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: var(--ab-popup-chip-bg);
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.ab-nav-promo:focus-visible {
  outline: 2px solid var(--ab-brand);
  outline-offset: 2px;
}
.ab-nav-promo__media {
  display: block;
  width: 100%;
  height: 160px;
  overflow: hidden;
}
.ab-nav-promo__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
}
.ab-nav-promo__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px;
}
.ab-nav-promo__title {
  margin: 0;
  font-family: var(--ab-font-heading);
  font-weight: 500;
  font-size: 24px;
  line-height: 32px;
  color: var(--ab-text-secondary);
}
.ab-nav-promo__text {
  margin: 0;
  font-family: var(--ab-font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--ab-popup-body-fg);
}
.ab-nav-promo__strong {
  font-weight: 500;
  color: var(--ab-popup-body-fg);
}

/* Contained accordion stack — single rounded outer shell, lightest-blue fill
   matching the search bar and toggle (tabs) bar at the top of the panel
   (Figma `Site Colours/Backgrounds/Lightest Blue` #ecf4fe → --ab-bg-tint).
   Rows share white hairline borders so they read as a connected list rather
   than separate cards. Outer radius bumped from 8px to 20px to echo the
   rounded-pill language of the search/tabs reference. */
.ab-nav-more-stack {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: var(--ab-bg-tint);
  border-radius: 20px;
  overflow: hidden;
}
.ab-nav-dropdown--contained + .ab-nav-dropdown--contained {
  border-top: 1px solid var(--ab-white);
}

/* More-variant header + body share the Lightest Blue fill; only the padding
   differs (header is a 56px-min row, body adds bottom padding under the
   link list). */
.ab-nav-dropdown__header--more,
.ab-nav-dropdown__body--more {
  background: var(--ab-bg-tint);
}
.ab-nav-dropdown__header--more {
  padding: 8px 16px;
  border: 0;
  border-radius: 0;
  min-height: 56px;
}
.ab-nav-dropdown__header--more:focus-visible {
  outline: 2px solid var(--ab-brand);
  outline-offset: -2px;
}
.ab-nav-dropdown__label--logo {
  gap: 0;
}
.ab-nav-dropdown__label--icon {
  gap: 12px;
}

/* Logo label (InstantScripts + Pharmacy Health Hub headers). Mark + word sit
   side-by-side; the PHH header stacks a sub-line below them. */
.ab-nav-dropdown__logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.ab-nav-dropdown__logo--stacked {
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}
.ab-nav-dropdown__logo-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.ab-nav-dropdown__logo-mark {
  width: 30px;
  height: 21px;
  display: block;
  flex-shrink: 0;
}
.ab-nav-dropdown__logo-word {
  width: 96px;
  height: 14px;
  display: block;
  flex-shrink: 0;
}
.ab-nav-dropdown__logo-sub {
  margin-left: 38px;       /* aligns the sub-line under the wordmark */
  font-family: var(--ab-font-body);
  font-weight: 400;
  font-size: 10px;
  line-height: 14px;
  color: var(--ab-brand);
  white-space: nowrap;
}

/* Smaller icon + 18px title on the icon-led headers (Help, Work with us).
   Both children always render together inside .ab-nav-dropdown__label--icon,
   so style them via descendant selectors instead of paired modifier classes. */
.ab-nav-dropdown__label--icon .ab-nav-dropdown__icon {
  padding: 4px;
}
.ab-nav-dropdown__label--icon .ab-nav-dropdown__icon img {
  width: 24px;
  height: 24px;
}
.ab-nav-dropdown__label--icon .ab-nav-dropdown__title {
  font-family: var(--ab-font-tab);
  font-weight: 400;
  font-size: 18px;
  line-height: 24px;
  color: var(--ab-text-secondary);
}

/* Circular chevron — 40px Lightest-Blue disc with a brand-blue caret.
   Source SVG points right; default 90deg rotation makes it point down
   (collapsed = ▼); -90deg on open makes it point up (open = ▲). */
.ab-nav-dropdown__chevron--circle {
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  background: var(--ab-bg-tint);
  flex-shrink: 0;
  transform: rotate(90deg);
}
.ab-nav-dropdown--open .ab-nav-dropdown__chevron--circle {
  transform: rotate(-90deg);
}

/* Body padding for the More-variant (background is set above alongside the
   header so the two visually link with no gap or border between them). */
.ab-nav-dropdown__body--more {
  padding: 4px 16px 20px;
}

/* Link-list (NEW content pattern, used inside the InstantScripts accordion
   body). Plain stacked rows with subdued body colour and 12px gap between
   items, matching Figma 21390:3633. */
.ab-nav-link-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ab-nav-link-list__item {
  display: block;
  font-family: var(--ab-font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--ab-popup-body-fg);
  text-decoration: none;
}
.ab-nav-link-list__item:hover {
  color: var(--ab-text-secondary);
}
.ab-nav-link-list__item:focus-visible {
  outline: 2px solid var(--ab-brand);
  outline-offset: 2px;
  border-radius: 2px;
}

/* -------- Conditions tab — A-Z letter tiles (Figma 21764:4979) --------
   Tab is labelled "Conditions" in the UI and the internal data-tab id is
   "conditions" (DOM contract is frozen). Below the search bar sits a 2-column
   grid of 26 tiles A-Z: each tile is a single click target (whole <button>),
   with the letter in a fixed-height header above 5 example condition rows.
   Tiles are pure navigation — clicking one slides in the next page (wired by
   Backend via [data-tile-id]) and does NOT enable the continue bar.
   Token map (Figma → CSS var):
     Site Colours/Backgrounds/Brand          (#0065f2) →  --ab-brand
     Site Colours/Backgrounds/Lightest Blue  (#ecf4fe) →  --ab-bg-tint
     Site Colours/Text/B-Primary             (white)   →  --ab-white
     Site Colours/Text/W-Tertiary (Body)     (#696c70) →  --ab-popup-body-fg
   Two-section card: brand-blue header band over lightest-blue body. The
   tile is a single <button> click target — the inner "more" pill is a
   decorative span (the .ab-nav-condition-tile * pointer-events:none rule
   in the global card-click section above lets the click bubble to the
   button). 20px radius, 8px grid gap. */
.ab-nav-conditions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  align-self: center;
  width: var(--ab-content-width);
  max-width: 100%;
}
.ab-nav-condition-tile {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 0;
  width: 100%;
  background: var(--ab-bg-tint);
  border: 0;
  border-radius: var(--ab-card-radius);
  overflow: hidden;
  cursor: pointer;
  text-align: center;
  font: inherit;
  color: inherit;
  transition: filter 180ms ease;
}
.ab-nav-condition-tile:hover {
  filter: brightness(0.97);
}
.ab-nav-condition-tile:focus-visible {
  outline: 2px solid var(--ab-brand);
  outline-offset: 2px;
}
.ab-nav-condition-tile__header {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 12px 8px 8px;
  background: var(--ab-brand);
}
.ab-nav-condition-tile__letter {
  font-family: var(--ab-font-heading);
  font-weight: 700;
  font-size: 16px;
  line-height: 24px;
  color: var(--ab-white);
  text-align: center;
}
.ab-nav-condition-tile__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 16px 8px 12px;
}
.ab-nav-condition-tile__item {
  font-family: var(--ab-font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 21px;
  color: var(--ab-popup-body-fg);
  text-align: center;
  width: 100%;
}
.ab-nav-condition-tile__more {
  font-family: var(--ab-font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 21px;
  color: var(--ab-brand);
  text-align: center;
  width: 100%;
}

/* -------- Persistent continue bar (does not slide) -------- */
#ab-nav-continue {
  position: relative;
  flex-shrink: 0;
  width: 100%;
  padding: 12px 16px;
  padding-bottom: max(12px, env(safe-area-inset-bottom));
  background: var(--ab-white);
  border-top: 1px solid var(--ab-border-button);
  box-shadow: var(--ab-shadow-continue);
  display: flex;
  align-items: center;
  gap: 16px;
  z-index: 2;
  transform: translateY(0);
  opacity: 1;
  transition: transform 260ms cubic-bezier(0.22, 0.61, 0.36, 1), opacity 220ms ease;
}
/* Hide-when-no-selection state. The bar slides off the bottom of the panel
   and fades out; pointer-events disabled so the disabled pill underneath
   doesn't accept stray taps mid-animation. events.js applies this class on
   every page until a selection enables Continue, so the bar slides up only
   once the user has picked a card. */
#ab-nav-continue.ab-nav-continue--hidden {
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}

/* Back button — only shown on sub-pages. The back-circle was relocated into
   the header (Figma 21570:33348); the legacy back button still lives inside
   #ab-nav-continue but is suppressed via the rule below so the chrome-toggle
   in events.js (which keeps adding `.ab-nav-back--visible` on sub-pages)
   stays harmless. The page-banner's own back-circle (.ab-nav-page-banner__back)
   is preserved because it carries its own visibility rules at higher
   specificity (see `.ab-nav-page-banner__back.ab-nav-back`). */
.ab-nav-back {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  background: var(--ab-bg-light-blue);
  color: var(--ab-brand);
  border-radius: 50%;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  transition: background-color 180ms ease;
}
.ab-nav-back--visible {
  display: inline-flex;
}
/* Legacy continue-bar back button is replaced by the in-header back-circle
   added in 2026-04. Keep the DOM node so events.js delegated handlers don't
   need restructuring, but suppress visually + interactively. */
#ab-nav-continue > .ab-nav-back {
  display: none !important;
}
.ab-nav-back:hover {
  background: #b9d4fb;
}
.ab-nav-back:focus-visible {
  outline: 2px solid var(--ab-brand);
  outline-offset: 2px;
}

/* The inner pill flips colour based on enabled/disabled state. */
.ab-nav-continue-pill {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  padding: 13px 16px 13px 24px;
  border: 0;
  border-radius: var(--ab-continue-pill-radius);
  background: var(--ab-continue-enabled-bg);
  color: var(--ab-continue-enabled-fg);
  font: inherit;
  cursor: pointer;
  transition: background-color 200ms ease, color 200ms ease;
}
.ab-nav-continue-pill:focus-visible {
  outline: 2px solid var(--ab-brand);
  outline-offset: 2px;
}
#ab-nav-continue.ab-nav-continue--disabled .ab-nav-continue-pill {
  background: var(--ab-continue-disabled-bg);
  color: var(--ab-continue-disabled-fg);
  cursor: default;
}

/* Wrapper that pairs the static "Price:" label with the dynamic price value
   as siblings on a single 4px-gap inline-flex axis (Figma node 21396:31785).
   Keeps spacing predictable regardless of the pill's space-between layout. */
.ab-nav-continue-price-group {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Static "Price:" prefix before the dynamic price value. Matches the price
   typography so the two read as a single phrase ("Price: $19"). The dynamic
   .ab-nav-continue-price stays just the value — keeps the aria-live region
   focused on the changing portion. */
.ab-nav-continue-price-label {
  display: inline-flex;
  align-items: center;
  font-family: var(--ab-font-heading);
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  white-space: nowrap;
  color: inherit;
}
.ab-nav-continue-price {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--ab-font-heading);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  white-space: nowrap;
  color: inherit;
}
.ab-nav-continue-cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--ab-font-heading);
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: inherit;
  white-space: nowrap;
  cursor: pointer;
}
#ab-nav-continue.ab-nav-continue--disabled .ab-nav-continue-cta {
  cursor: default;
}
.ab-nav-continue-cta__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  box-sizing: content-box;
  width: 22px;
  height: 22px;
}

/* -------- Speak-to-a-doctor popup (Figma 21740:24120) --------
   Overlays the panel body with a centred modal. Backdrop blocks interaction
   with the cards/continue bar beneath. The modal itself is three stacked
   sections: light-blue head band, white body (text + green price chip) with
   an inset bottom shadow, and white footer with a single brand CTA. */
.ab-nav-popup {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}
.ab-nav-popup--visible {
  opacity: 1;
  pointer-events: auto;
}

.ab-nav-popup-backdrop {
  position: absolute;
  inset: 0;
  background: var(--ab-popup-backdrop);
}

.ab-nav-popup-modal {
  position: relative;
  width: var(--ab-popup-width);
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  border-radius: var(--ab-popup-radius);
  overflow: hidden;
  background: var(--ab-popup-body-bg);
  transform: scale(0.96);
  transition: transform 200ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.ab-nav-popup--visible .ab-nav-popup-modal {
  transform: scale(1);
}

.ab-nav-popup-head {
  background: var(--ab-popup-head-bg);
  padding: 24px 24px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(var(--ab-shadow-popup-head));
}
.ab-nav-popup-title {
  margin: 0;
  width: 100%;
  font-family: var(--ab-font-heading);
  font-weight: 500;
  font-size: 32px;
  line-height: 40px;
  color: var(--ab-text-primary);
  text-align: center;
}

.ab-nav-popup-body {
  position: relative;
  background: var(--ab-popup-body-bg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  box-shadow: var(--ab-shadow-popup-body-inset);
}
.ab-nav-popup-text {
  margin: 0;
  width: 100%;
  font-family: var(--ab-font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--ab-popup-body-fg);
}
.ab-nav-popup-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  background: var(--ab-popup-chip-bg);
  color: var(--ab-popup-chip-fg);
  font-family: var(--ab-font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  white-space: nowrap;
}

.ab-nav-popup-footer {
  background: var(--ab-popup-body-bg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.ab-nav-popup-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 48px;
  padding: 13px 24px;
  border: 0;
  border-radius: 8px;
  background: var(--ab-brand);
  color: var(--ab-white);
  font-family: var(--ab-font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  cursor: pointer;
  transition: background-color 180ms ease;
}
.ab-nav-popup-cta:hover {
  background: var(--ab-brand-deep);
}
.ab-nav-popup-cta:focus-visible {
  outline: 2px solid var(--ab-brand);
  outline-offset: 2px;
}

/* -------- Condition info lightbox --------
   Opened from the search-condition banner's "Read more" button. Wider than
   the speak-to-doctor popup (460px max), with a scrollable body that holds
   structured H4 + paragraph + bullet sections injected by events.js. */
.ab-nav-info-popup {
  position: absolute;
  inset: 0;
  z-index: 50;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}
.ab-nav-info-popup--visible {
  opacity: 1;
  pointer-events: auto;
}
.ab-nav-info-popup-backdrop {
  position: absolute;
  inset: 0;
  background: var(--ab-popup-backdrop);
  cursor: pointer;
}
.ab-nav-info-popup-modal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.96);
  width: calc(100% - 32px);
  max-width: 460px;
  max-height: calc(100vh - 64px);
  max-height: calc(100dvh - 64px);
  background: var(--ab-popup-body-bg);
  border-radius: var(--ab-popup-radius);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform 220ms ease;
}
.ab-nav-info-popup--visible .ab-nav-info-popup-modal {
  transform: translate(-50%, -50%) scale(1);
}
.ab-nav-info-popup-head {
  position: relative;
  background: var(--ab-popup-head-bg);
  padding: 20px 48px 20px 24px;
  flex-shrink: 0;
}
.ab-nav-info-popup-title {
  margin: 0;
  font-family: var(--ab-font-tab);
  font-weight: 500;
  font-size: 20px;
  line-height: 28px;
  color: var(--ab-text-primary);
}
.ab-nav-info-popup-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ab-text-primary);
  transition: background-color 150ms ease;
}
.ab-nav-info-popup-close:hover {
  background: rgba(0, 0, 0, 0.06);
}
.ab-nav-info-popup-body {
  padding: 20px 24px 24px 24px;
  overflow-y: auto;
  font-family: var(--ab-font-body);
  font-size: 14px;
  line-height: 22px;
  color: var(--ab-popup-body-fg);
}
.ab-nav-info-popup-body h4 {
  margin: 16px 0 6px 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--ab-text-primary);
}
.ab-nav-info-popup-body h4:first-child {
  margin-top: 0;
}
.ab-nav-info-popup-body p {
  margin: 0 0 12px 0;
}
.ab-nav-info-popup-body ul {
  margin: 0 0 12px 0;
  padding-left: 20px;
}
.ab-nav-info-popup-body li {
  margin: 0 0 4px 0;
}
.ab-nav-info-popup-disclaimer {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid #e5e7eb;
  font-size: 12px;
  line-height: 18px;
  color: #9ca3af;
}

/* -------- Home search bar (Figma 21831:35400) --------
   Standalone search trigger above the Services/Conditions/More tab row on the
   menu start screen. Rendered as a button (not an input) so a single tap
   navigates straight to the search page via router.showPage('search') — the
   search page hosts the real input. flex-shrink: 0 prevents the surrounding
   flex column from compressing the 44px height.

   Spacing note: on the services root page the parent .ab-nav-page is scoped
   to gap:24px (see [data-page="services"] override). Per Figma 21831:35449
   search and tabs sit in a tight 8px-gap group with 24px between that group
   and the cards. The 8px (vs the 24px parent gap) is achieved via -16px
   margin-top on .ab-nav-tabs in the scoped block — no extra wrapper. */
.ab-nav-home-search {
  display: flex;
  align-items: center;
  gap: 8px;
  width: var(--ab-content-width);
  max-width: 100%;
  align-self: center;
  height: 48px;
  flex-shrink: 0;
  padding: 12px 16px;
  background: var(--ab-bg-tint);
  border: 0;
  border-radius: 44px;
  cursor: pointer;
  font-family: var(--ab-font-body);
  font-size: 16px;
  line-height: 24px;
  text-align: left;
}
.ab-nav-home-search:focus-visible {
  outline: 2px solid var(--ab-brand);
  outline-offset: 2px;
}
.ab-nav-home-search__glass {
  flex: 0 0 21px;
  width: 21px;
  height: 21px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ab-nav-home-search__glass img {
  width: 21px;
  height: 21px;
  display: block;
}
.ab-nav-home-search__placeholder {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--ab-popup-body-fg);
  font-weight: 400;
}

/* -------- Search result card (Figma 21766:43420) --------
   Light blue rounded panel. Stacked head (name above Learn more),
   divider, then 3 action rows. Cards are built dynamically by
   js/search.js into the [data-search-results] container on the
   search page. */
.ab-nav-search-result {
  background: var(--ab-bg-tint);
  border-radius: 24px;
  padding: 16px 16px 8px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ab-nav-search-result__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.ab-nav-search-result__name {
  margin: 0;
  font-family: var(--ab-font-heading);
  font-weight: 500;
  font-size: 32px;
  line-height: 40px;
  color: var(--ab-text-primary);
}
.ab-nav-search-result__match {
  color: #007923; /* Colour Spectrum/Green-750 */
}
.ab-nav-search-result__learn {
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  font-family: var(--ab-font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 21px;
  color: #4d93f6; /* Colour Spectrum/Blue-350 */
}
.ab-nav-search-result__learn:focus-visible {
  outline: 2px solid var(--ab-brand);
  outline-offset: 2px;
  border-radius: 2px;
}

.ab-nav-search-result__divider {
  height: 1px;
  width: 100%;
  background: var(--ab-text-b-subdued);
}

.ab-nav-search-result__actions {
  display: flex;
  flex-direction: column;
}

/* Action row: icon + label + chevron. Border between rows; last row has none. */
.ab-nav-search-result__action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
  border-bottom: 1px solid var(--ab-border-button); /* Colour Spectrum/Grey-100 */
  width: 100%;
  font: inherit;
  color: inherit;
}
.ab-nav-search-result__action:last-child {
  border-bottom: 0;
}
.ab-nav-search-result__action:focus-visible {
  outline: 2px solid var(--ab-brand);
  outline-offset: 2px;
  border-radius: 4px;
}
.ab-nav-search-result__action-label-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.ab-nav-search-result__action-icon {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  padding: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ab-nav-search-result__action-icon img {
  width: 16px;
  height: 16px;
  display: block;
}
.ab-nav-search-result__action-label {
  font-family: var(--ab-font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--ab-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ab-nav-search-result__action-chevron {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  padding: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ab-brand);
}
.ab-nav-search-result__action-chevron svg {
  width: 14px;
  height: 14px;
  display: block;
}

/* Empty-state message when the input has no matches. */
.ab-nav-search-empty {
  padding: 32px 16px;
  text-align: center;
  font-family: var(--ab-font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--ab-popup-body-fg);
}

/* Reduced-motion: kill every animated transition declared above. The list
   below mirrors the `transition:` declarations elsewhere in this file (panel
   slide, page slide, header chrome fade, info-box fade, popup fade + modal
   scale, dropdown chevron rotate, etc.). The chevron's --circle modifier
   inherits suppression via the base .ab-nav-dropdown__chevron class but is
   listed explicitly for defensive coverage. */
@media (prefers-reduced-motion: reduce) {
  #ab-nav-panel,
  .ab-nav-page,
  .ab-nav-logo,
  .ab-nav-breadcrumbs,
  #ab-nav-continue,
  .ab-nav-continue-pill,
  #ab-nav-close,
  .ab-nav-tab,
  .ab-nav-card,
  .ab-nav-back,
  .ab-nav-info-box,
  .ab-nav-popup,
  .ab-nav-popup-modal,
  .ab-nav-popup-cta,
  .ab-nav-dropdown__header,
  .ab-nav-dropdown__chevron,
  .ab-nav-dropdown__chevron--circle,
  .ab-nav-condition-tile,
  .ab-nav-home-search,
  .ab-nav-tab--services,
  .ab-nav-tab--conditions,
  .ab-nav-tab--more,
  .ab-nav-letter-row,
  .ab-nav-page-banner,
  .ab-nav-search-page-bar,
  .ab-nav-search-page-bar__clear {
    transition: none;
    animation: none;
  }
}

/* -------- Search page (Figma 21766:43420) ------------------------------------
   Full-screen search experience opened from the home search bar. The page
   ships with the brand-blue search-bar pill at the top and a column of
   condition result cards underneath. The page reuses the existing
   .ab-nav-search-result card styling (no override needed) — these rules
   only set the search-page chrome (the input pill + page padding +
   results column layout). */
.ab-nav-page--search {
  /* Override the default 32px vertical / 16px horizontal page padding so the
     blue search bar can sit closer to the persistent header (matches Figma's
     16px top inset) while keeping the same horizontal gutter as the rest of
     the panel. The 24px gap between bar and results matches Figma. */
  padding: 16px 16px 32px;
  gap: 24px;
}

/* White search pill with brand-blue 1px border (Figma 21861:35275, refreshed
   Apr 2026). 44px tall, pill-radius, hosts the dark-grey magnifier, the
   search input (dark-grey text), and the clear (X) button which only appears
   while the input has content. Reaches the page's content gutter — width =
   100% of the page padding box. */
.ab-nav-search-page-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  height: 44px;
  padding: 10px 16px;
  background: var(--ab-white);
  border: 1px solid var(--ab-brand);
  border-radius: var(--ab-tab-pill-radius);
  flex-shrink: 0;
}

.ab-nav-search-page-bar__glass {
  flex: 0 0 21px;
  width: 21px;
  height: 21px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ab-nav-search-page-bar__glass img {
  width: 21px;
  height: 21px;
  display: block;
}

/* Input fills remaining width. Dark-grey text on white (matches Figma's
   text/w-secondary #3e4247) — no native search chrome. */
.ab-nav-search-page-bar__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  border: 0;
  background: transparent;
  color: var(--ab-text-secondary);
  font-family: var(--ab-font-body);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  padding: 0;
  outline: none;
  -webkit-appearance: none;
          appearance: none;
  /* Tighter side spacing between the magnifier and the X — matches the 8px
     gap left of the input and the room left of the X on the right. */
  margin-left: 8px;
}
.ab-nav-search-page-bar__input::placeholder {
  color: var(--ab-text-secondary);
  opacity: 0.6;
}
/* Hide WebKit's native search clear button — the dedicated [X] handles reset. */
.ab-nav-search-page-bar__input::-webkit-search-cancel-button,
.ab-nav-search-page-bar__input::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}

/* Clear (X) button — bare X glyph in dark-grey on the white pill. Only
   visible while the input has content (search.js toggles the [hidden] attr).
   No background circle in the new design. */
.ab-nav-search-page-bar__clear {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  color: var(--ab-text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 50%;
  transition: color 180ms ease, opacity 180ms ease;
  opacity: 0.7;
}
.ab-nav-search-page-bar__clear[hidden] {
  display: none;
}
.ab-nav-search-page-bar__clear:hover {
  opacity: 1;
  color: var(--ab-text-primary);
}
.ab-nav-search-page-bar__clear:focus-visible {
  outline: 2px solid var(--ab-brand);
  outline-offset: 2px;
  opacity: 1;
  color: var(--ab-text-primary);
}
.ab-nav-search-page-bar__clear svg {
  width: 14px;
  height: 14px;
  display: block;
}

/* Results column on the search page. Reuses the pre-existing
   .ab-nav-search-result card; this container just stacks the cards with the
   same 8px gap as the legacy results panel. Hidden by default; search.js
   removes [hidden] when the first match renders. */
.ab-nav-search-page-results {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}
.ab-nav-search-page-results[hidden] {
  display: none;
}

/* Service-shortcut search card. Surfaced by search.js above condition cards
   when the query matches a service synonym (e.g. "script" -> Medication
   prescription). The whole card is one tappable button that routes straight
   to the matching services sub-page — no action-row list. */
.ab-nav-search-result--service {
  padding: 8px 16px;
}
.ab-nav-search-result__service-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 8px 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
}
.ab-nav-search-result__service-row:focus-visible {
  outline: 2px solid var(--ab-brand);
  outline-offset: 2px;
  border-radius: 4px;
}
.ab-nav-search-result__service-icon {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ab-nav-search-result__service-icon img {
  width: 20px;
  height: 20px;
  display: block;
}
.ab-nav-search-result__service-text {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.ab-nav-search-result__service-name {
  margin: 0;
  font-family: var(--ab-font-heading);
  font-weight: 500;
  font-size: 16px;
  line-height: 22px;
  color: var(--ab-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ab-nav-search-result__service-sub {
  font-family: var(--ab-font-body);
  font-weight: 400;
  font-size: 13px;
  line-height: 18px;
  color: var(--ab-popup-body-fg);
}