/*
 * Registration design system — design tokens (SOUTHVILLE-1101 / FE1).
 *
 * Semantic CSS custom properties for the redesigned registration flow, scoped
 * to the `.new-design` wrapper. Because they are only defined on that subtree,
 * they never leak into the current registration pages.
 *
 * The two brand colours (--brand-primary, --brand-accent) default to the design
 * values here and are overridable PER COMPANY later (A4 / FE2) via an inline
 * custom property on the `.new-design` element, e.g.
 *   <div class="new-design" style="--brand-primary: #ffcc29">
 * — no change to this file required.
 *
 * Values are taken verbatim from the Lovable source export (index.css /
 * tailwind.config.ts) referenced on the ticket.
 */
.new-design {
  /* Brand colours — per-company overridable (default fallbacks) */
  --brand-primary: #ffcc00;       /* primary CTA button */
  --brand-primary-ink: #212121;   /* text/icon on the CTA button */
  --brand-accent: #d0060d;         /* eyebrow + trust badges */

  /* Surface & text palette */
  --bg: #f8f8f7;                 /* page background */
  --surface: #ffffff;            /* cards */
  --cream: #f3f0e7;              /* warm secondary surface (secondary buttons/panels) */
  --green: #2b5544;
  --text: #1a1a1a;
  --text-muted: #5e6e68;
  --border: #e2e2df;
  --danger: var(--brand-accent);   /* form validation / error state */

  /* Typography */
  --font-display: "Outfit", system-ui, -apple-system, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;

  /* Spacing — 8px base scale */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 10px;             /* buttons */
  --radius-lg: 12px;             /* cards */

  /* Elevation */
  --shadow-card: 0 1px 3px 0 rgba(0, 0, 0, 0.04), 0 4px 16px -2px rgba(0, 0, 0, 0.06);
  --shadow-card-hover: 0 4px 24px -4px rgba(0, 0, 0, 0.10);
}
/*
 * Registration design system — base layer (SOUTHVILLE-1101 / FE1).
 *
 * Minimal namespaced typography and box-sizing for the new design. Every rule is
 * scoped under `.new-design`, so the current registration pages (which do not
 * use that wrapper) render exactly as before. No global element resets, no
 * `!important`.
 */
.new-design {
  box-sizing: border-box;
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
}

.new-design *,
.new-design *::before,
.new-design *::after {
  box-sizing: inherit;
}

/* The redesign owns its full-bleed header + accent bar, so drop the UA body margin —
   otherwise a gap shows above the bar. Promoted from program_picker.css in
   SOUTHVILLE-1125 so the detail page's accent bar sits flush too. */
body.new-design { margin: 0; }

.new-design h1,
.new-design h2,
.new-design h3,
.new-design h4 {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  color: var(--text);
}

.new-design p {
  margin: 0 0 var(--space-2);
}

.new-design a {
  color: inherit;
}

/* Inline SVG icons (the `_icon` partial): sized to the current font by default;
   individual components override width/height. Shared chrome, promoted from the
   detail page in SOUTHVILLE-1102 so every redesign page sizes icons correctly. */
.new-design .nd-icon { width: 1em; height: 1em; flex: none; }

/* Shared page footer (SOUTHVILLE-1102, promoted from the detail page). */
.new-design .nd-footer {
  padding: var(--space-4) var(--space-2);
  text-align: center;
  font-size: 0.875rem;
  color: var(--text-muted);
  border-top: 1px solid var(--border);
}
.new-design .nd-footer a { color: var(--text-muted); }

/* Visually-hidden but exposed to assistive tech — for the picker's screen-reader
   status line (SOUTHVILLE-1134). Standard clip technique; stays in the a11y tree. */
.new-design .nd-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
/*
 * Registration design system — button component (SOUTHVILLE-1101 / FE1).
 *
 * Namespaced, reusable button classes for the new design, scoped under
 * `.new-design`. The old registration pages' button styles are untouched.
 *
 * Hover uses a brightness filter rather than a hardcoded darker shade, so it
 * works for any per-company brand colour set on --brand-primary.
 */
.new-design .nd-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: 14px var(--space-3);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: filter 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.new-design .nd-button:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 2px;
}

.new-design .nd-button:disabled,
.new-design .nd-button.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Primary — brand CTA */
.new-design .nd-button--primary {
  background-color: var(--brand-primary);
  color: var(--brand-primary-ink);
}

.new-design .nd-button--primary:hover {
  filter: brightness(0.95);
}

/* Secondary — warm cream surface */
.new-design .nd-button--secondary {
  background-color: var(--cream);
  color: var(--text);
  border-color: var(--border);
}

.new-design .nd-button--secondary:hover {
  filter: brightness(0.97);
}
/*
 * Registration design system — card component (SOUTHVILLE-1101 / FE1).
 *
 * Namespaced, reusable card surface for the new design, scoped under
 * `.new-design`. Uses the large radius and the exact card shadow / hover shadow
 * from the design tokens.
 */
.new-design .nd-card {
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-3);
  transition: box-shadow 0.15s ease;
}

.new-design .nd-card:hover {
  box-shadow: var(--shadow-card-hover);
}
/*
 * Registration design system — form-field component (SOUTHVILLE-1101 / FE1).
 *
 * Namespaced, reusable form-field classes for the new design, scoped under
 * `.new-design`. BEM structure:
 *   .nd-field            wrapper (label + control + optional error)
 *   .nd-field__label     the field label
 *   .nd-field__control   the input / textarea / select (applied as a class)
 *   .nd-field__error     the validation message
 *   .nd-field--error     error-state modifier on the wrapper
 */
.new-design .nd-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-bottom: var(--space-2);
}

.new-design .nd-field__label {
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text);
}

.new-design .nd-field__control {
  width: 100%;
  padding: 12px var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background-color: var(--surface);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.4;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.new-design .nd-field__control::placeholder {
  color: var(--text-muted);
}

.new-design .nd-field__control:focus {
  outline: none;
  border-color: var(--text);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06);
}

.new-design .nd-field__error {
  font-size: 0.8125rem;
  color: var(--danger);
}

/* Error state — the control border follows the per-company accent/danger colour. */
.new-design .nd-field--error .nd-field__control {
  border-color: var(--danger);
}
/*
 * Registration design system — header (SOUTHVILLE-1101 / FE1; full composition
 * promoted here in SOUTHVILLE-1102 / FE2, as FE1 anticipated).
 *
 * The shared redesign header: the backend-driven company logo on the left, and on
 * the right the MyDailyLifestyle brand, the support phone, and the language switcher
 * (the flag pills). It lives in the design system so every redesign page — picker
 * (FE2), detail (FE3), … — renders the exact same header. Scoped under `.new-design`;
 * consumes the FE1 tokens.
 */
/* Full-width brand accent bar sitting above the header (SOUTHVILLE-1102; promoted
   here in SOUTHVILLE-1125 so the detail header shows it too). */
.new-design .nd-accentbar {
  height: 6px;
  background: var(--brand-primary);
}
.new-design .nd-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.new-design .nd-header__bar {
  width: 100%; max-width: 72rem; margin: 0 auto; padding: var(--space-2);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
}
/* Titled bar: a 3-column grid so the page title (picker) sits centred between the
   company logo (left) and the switcher / phone / brand cluster (right). Pages with
   no title (detail) use the SAME grid — the middle column just collapses to zero —
   so both headers place the logo and right cluster identically (SOUTHVILLE-1125
   unified them). On mobile the title drops to its own row under the logos. */
.new-design .nd-header__bar--titled {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  gap: var(--space-1) var(--space-2);
}
.new-design .nd-header__bar--titled .nd-header__company-logo { grid-column: 1; grid-row: 1; justify-self: start; }
/* Bottom-align the switcher/phone column with the MDL logo (mockup: items-end), so
   the phone sits on the logo's baseline instead of floating centred. */
.new-design .nd-header__bar--titled .nd-header__right { grid-column: 2; grid-row: 1; justify-self: end; margin-left: 0; align-items: flex-end; }
.new-design .nd-header__title {
  grid-column: 1 / -1;
  grid-row: 2;
  justify-self: center;
  text-align: center;
  max-width: 48rem;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.15;
  color: var(--text);
}
@media (min-width: 768px) {
  .new-design .nd-header__bar--titled {
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: auto;
  }
  .new-design .nd-header__bar--titled .nd-header__title { grid-column: 2; grid-row: 1; font-size: 2rem; }
  .new-design .nd-header__bar--titled .nd-header__right { grid-column: 3; grid-row: 1; }
}
.new-design .nd-header__company-logo { height: 96px; width: auto; object-fit: contain; }
/* margin-left:auto keeps this cluster right-aligned even when there's no company
   logo (single child) — the layout doesn't collapse to the left. */
.new-design .nd-header__right { display: flex; align-items: center; gap: var(--space-3); margin-left: auto; }
.new-design .nd-header__brand { height: 96px; width: auto; object-fit: contain; }
.new-design .nd-header__contact { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.new-design .nd-header__phone {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--text); text-decoration: none; font-size: 0.875rem; font-weight: 500;
}
.new-design .nd-header__phone .nd-icon { color: var(--brand-accent); }
.new-design .nd-header__phone { transition: color 0.15s ease; }
.new-design .nd-header__phone:hover { color: var(--brand-accent); }

/* Language switcher (SOUTHVILLE-1102; used by the picker header and, from
   SOUTHVILLE-1125, the detail header): two locale pills, the active one gets the
   accent ring. Promoted here from program_picker.css so both headers share it. The
   multi-colour flag glyph comes from the _flag partial. */
.new-design .nd-langswitch { display: inline-flex; gap: 4px; }
.new-design .nd-langswitch__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 6px;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--text-muted);
  transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.new-design .nd-langswitch__link:hover { background-color: var(--cream); color: var(--text); }
.new-design .nd-langswitch__link.is-active {
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--brand-accent);
}
.new-design .nd-flag {
  display: block;
  width: 20px;
  height: 13px;
  border-radius: 2px;
  flex-shrink: 0;
}

/* SOUTHVILLE-1134 + 1143: compact, non-scrolling header on phones (shared: picker + detail).
1134 compacted the tall header; 1143 caps the company logo width and lets the right cluster
shrink (min-width:0) so a wide logo can't push the MDL brand logo off-screen, and hides the
phone NUMBER (the tap-to-call icon stays). Hiding the number supersedes 1134's one-row contact
tweak, so the switcher/phone stay stacked — which also fits the narrowest phones. Desktop
(>=768px) unchanged. */
@media (max-width: 767.98px) {
  .new-design .nd-header { padding: var(--space-1) 0; }
  .new-design .nd-header__bar--titled { gap: var(--space-1) var(--space-1); }
  .new-design .nd-header__title { font-size: 1.25rem; }
  .new-design .nd-header__company-logo,
  .new-design .nd-header__brand { height: 44px; }
  .new-design .nd-header__company-logo { max-width: 30vw; }
  .new-design .nd-header__brand { max-width: 100%; }
  .new-design .nd-header__right { gap: var(--space-1); min-width: 0; }
  .new-design .nd-header__phone-number { display: none; }

  /* SOUTHVILLE-1134 (PreZero Header design): flag-only language chips on mobile. The
     NL/EN text is visually hidden (kept for screen readers — the flag SVG is aria-hidden),
     each link becomes a compact chip, and the active language gets a brand-accent tint + ring. */
  .new-design .nd-langswitch__code {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .new-design .nd-langswitch__link { justify-content: center; gap: 0; padding: 5px 7px; border-radius: 6px; }
  .new-design .nd-langswitch__link.is-active {
    background: color-mix(in srgb, var(--brand-accent) 12%, transparent);
    box-shadow: inset 0 0 0 1.5px var(--brand-accent);
  }
}
/*
 * FAQ accordion — shared redesign chrome.
 *
 * The native <details name> accordion is used by both the program detail page
 * (FE3, SOUTHVILLE-1109) and the company picker (FE2, SOUTHVILLE-1111), so its
 * styles live in the design system and load with every redesigned page. Moved here
 * from program_detail.css in SOUTHVILLE-1111 — rendering is unchanged.
 */

/* Section heading above the accordion (used only by the FAQ). Rich text on the
   detail page (SOUTHVILLE-1103): strip the editor's <p> margins so it stays
   heading-styled. */
.new-design .nd-section-title { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; line-height: 1.2; margin: 0 0 var(--space-2); }
.new-design .nd-section-title p { margin: 0; }
.new-design .nd-section-title > :last-child { margin-bottom: 0; }

.new-design .nd-faq { max-width: 48rem; margin: 0 auto; padding-bottom: var(--space-4); }
/* SOUTHVILLE-1142 (Daniel): the FAQ renders identically on the picker, the filter pages AND
   the program detail page — a centred heading over a full-width list of rows with plain
   dividers, not a rounded box. */
.new-design .nd-faq .nd-section-title { text-align: center; margin-bottom: var(--space-3); }
.new-design .nd-faq__box {
  border: 0; border-radius: 0; overflow: visible; background: transparent;
}
.new-design .nd-faq__item { border-bottom: 1px solid var(--border); } /* every row, incl. the last */
.new-design .nd-faq__question {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  padding: var(--space-2) 0;
  font-weight: 600; cursor: pointer; list-style: none;
  -webkit-user-select: none; user-select: none; /* don't select the question text on click */
}
.new-design .nd-faq__question::-webkit-details-marker { display: none; }
.new-design .nd-faq__question .nd-icon { flex: none; color: var(--text-muted); transition: transform 0.2s ease; }
.new-design .nd-faq__item[open] .nd-faq__question .nd-icon { transform: rotate(180deg); }
.new-design .nd-faq__answer {
  padding: 0 0 var(--space-2);
  color: var(--text-muted); font-size: 0.875rem; line-height: 1.5;
  white-space: pre-line;
}
/*
 * Registration design system (SOUTHVILLE-1101 / FE1).
 *
 * The additive, namespaced styling foundation for the redesigned registration
 * flow. Everything is scoped under the `.new-design` wrapper and every class is
 * `nd-` prefixed, so registration pages not yet flipped to the new design — and
 * every non-registration page — are unaffected.
 *
 * Consumed by later tickets (FE2–FE5) via:
 *   <%= stylesheet_link_tag "registration/design_system" %>
 *







 */