/* ============================================================
   UBS APPLICATION FORM — STYLESHEET
   University of Blantyre Synod — 2027 Intake
   ============================================================

   TABLE OF CONTENTS:
   1.  CSS Variables (colours, sizes, shadows)
   2.  Reset & Base
   3.  Site Header
   4.  Main Layout
   5.  Progress Bar
   6.  Step Cards
   7.  Form Fields (inputs, selects, textareas)
   8.  Radio Pills (clickable option buttons)
   9.  File Upload Zones
   10. Info / Warning / Tip Boxes
   11. Programme Selection Cards
   12. Fee Table
   13. Sub-sections & Dividers
   14. Review Screen
   15. Declaration Checkbox
   16. Navigation Buttons
   17. Loading Overlay
   18. Duplicate Warning Banner
   19. Success Screen
   20. Utility Classes
   21. Responsive (mobile)
   ============================================================ */


/* ─── 1. CSS VARIABLES ──────────────────────────────────────
   Change these to retheme the entire form instantly.
   ────────────────────────────────────────────────────────── */
:root {
  /* Brand colours */
  --color-primary:       #1a4a5e;   /* UBS dark teal */
  --color-primary-mid:   #2d6b87;   /* medium teal for hover */
  --color-primary-light: #e8f4f8;   /* pale teal background */
  --color-gold:          #c8973a;   /* gold accent */
  --color-gold-light:    #fdf5e6;   /* pale gold background */
  --color-success:       #1d9e75;   /* green for success states */
  --color-success-light: #e1f5ee;
  --color-danger:        #c0392b;   /* red for errors */
  --color-danger-light:  #fdecea;

  /* Neutral greys */
  --gray-50:  #f8f9fa;
  --gray-100: #f1f3f4;
  --gray-200: #e2e6ea;
  --gray-400: #9aa0a6;
  --gray-600: #5f6368;
  --gray-900: #1a1a1a;

  /* Sizing & shape */
  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 16px;
  --radius-xl: 20px;

  /* Shadows */
  --shadow-sm: 0 1px 4px rgba(0,0,0,0.06);
  --shadow:    0 2px 12px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.12);

  /* Typography */
  --font-body:    'DM Sans', system-ui, sans-serif;
  --font-heading: 'DM Serif Display', Georgia, serif;

  /* Layout */
  --max-width: 760px;
}


/* ─── 2. RESET & BASE ───────────────────────────────────────
   Remove default browser margins/padding on everything.
   ────────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 15px;
}

body {
  font-family: var(--font-body);
  background: #eef2f5;
  color: var(--gray-900);
  min-height: 100vh;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Lucide icons default size */
[data-lucide] {
  width: 16px;
  height: 16px;
  stroke-width: 2;
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}


/* ─── 3. SITE HEADER ────────────────────────────────────────
   Sticky top bar — stays visible as user scrolls.
   ────────────────────────────────────────────────────────── */
.site-header {
  background: var(--color-primary);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 16px rgba(0,0,0,0.25);
}

.header-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo-img {
  width: 50px;
  height: 50px;
  object-fit: contain;
  border-radius: 8px;
  background: #fff;
  padding: 2px;
  flex-shrink: 0;
}

.header-text h1 {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  line-height: 1.2;
  letter-spacing: 0.01em;
}

.header-text p {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 1px;
}

/* Gold intake year badge on the right */
.intake-badge {
  margin-left: auto;
  background: var(--color-gold);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: var(--radius-xl);
  white-space: nowrap;
  letter-spacing: 0.02em;
}


/* ─── 4. MAIN LAYOUT ────────────────────────────────────────
   Centres the form with a max-width and comfortable padding.
   ────────────────────────────────────────────────────────── */
.main {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 24px 16px 80px;
}


/* ─── 5. PROGRESS BAR ───────────────────────────────────────
   Step labels + coloured fill bar at top of form.
   ────────────────────────────────────────────────────────── */
.progress-wrap {
  margin-bottom: 24px;
}

.progress-labels {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

/* Each step label: grey → gold (active) → green (done) */
.prog-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--gray-400);
  text-align: center;
  flex: 1;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: color 0.3s;
}
.prog-label.active { color: var(--color-primary); }
.prog-label.done   { color: var(--color-success); }

/* The track (grey background) and fill (teal) */
.progress-track {
  height: 4px;
  background: var(--gray-200);
  border-radius: 99px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-primary), var(--color-primary-mid));
  border-radius: 99px;
  width: 0%;
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}


/* ─── 6. STEP CARDS ─────────────────────────────────────────
   White card container for each form section.
   Only the current step has class "visible".
   ────────────────────────────────────────────────────────── */
.step-card {
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 28px;
  margin-bottom: 16px;
  display: none; /* hidden by default */
}

.step-card.visible {
  display: block;
  animation: fadeUp 0.3s ease both;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Heading row at the top of each card */
.step-heading {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1.5px solid var(--gray-100);
}

.step-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius);
  background: var(--color-primary-light);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-primary);
}

.step-icon [data-lucide] {
  width: 20px;
  height: 20px;
}

.step-heading h2 {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 400;
  color: var(--color-primary);
  line-height: 1.2;
}

.step-heading small {
  display: block;
  font-size: 12px;
  color: var(--gray-400);
  margin-top: 3px;
  font-family: var(--font-body);
}


/* ─── 7. FORM FIELDS ────────────────────────────────────────
   Labels, text inputs, selects, textareas.
   ────────────────────────────────────────────────────────── */
.field {
  margin-bottom: 18px;
}

.field label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--gray-600);
  margin-bottom: 6px;
  letter-spacing: 0.01em;
}

/* Red asterisk for required fields */
.field label .req {
  color: var(--color-danger);
  margin-left: 1px;
}

/* All text-style inputs share the same base style */
.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="number"],
.field select,
.field textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--gray-900);
  background: #fff;
  transition: border-color 0.2s, box-shadow 0.2s;
  -webkit-appearance: none;
  appearance: none;
}

/* Focus ring — teal glow */
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(26, 74, 94, 0.12);
}

/* Error state — red border */
.field input.error,
.field select.error {
  border-color: var(--color-danger);
  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.08);
}

.field textarea {
  resize: vertical;
  min-height: 80px;
}

/* Two equal columns side by side */
.row2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* Error message under a field */
.error-msg {
  display: none;
  font-size: 12px;
  color: var(--color-danger);
  margin-top: 5px;
  align-items: center;
  gap: 4px;
}
.error-msg.show {
  display: flex;
}


/* ─── 8. RADIO PILLS ────────────────────────────────────────
   Clickable pill-shaped buttons for radio options.
   The hidden <input> is inside each pill.
   ────────────────────────────────────────────────────────── */
.radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.radio-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-xl);
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: var(--gray-600);
  transition: all 0.2s;
  user-select: none;
  background: #fff;
}

.radio-pill:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
  color: var(--color-primary);
}

/* When the hidden radio input inside is checked, highlight the pill */
.radio-pill:has(input:checked) {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
  color: var(--color-primary);
}

/* Hide the actual radio button — the pill IS the visual */
.radio-pill input[type="radio"] {
  display: none;
}

.radio-pill [data-lucide] {
  width: 14px;
  height: 14px;
  color: currentColor;
}


/* ─── 9. FILE UPLOAD ZONES ──────────────────────────────────
   Dashed drop-zone boxes for file uploads.
   State changes: default → hover → uploaded (green).
   ────────────────────────────────────────────────────────── */
.upload-zone {
  position: relative;
  border: 2px dashed var(--gray-200);
  border-radius: var(--radius);
  padding: 24px 16px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  background: var(--gray-50);
}

.upload-zone:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
}

/* The <input type="file"> is invisible and covers the whole zone */
.upload-zone input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
}

/* Large Lucide icon in the centre of the zone */
.upload-icon-svg {
  display: block;
  margin: 0 auto 8px;
  color: var(--gray-400);
  width: 32px !important;
  height: 32px !important;
  stroke-width: 1.5;
}

.upload-zone p {
  font-size: 13px;
  font-weight: 500;
  color: var(--gray-600);
  margin-bottom: 4px;
}

.upload-zone small {
  font-size: 11px;
  color: var(--gray-400);
}

/* Uploaded state — green */
.upload-zone.uploaded {
  border-style: solid;
  border-color: var(--color-success);
  background: var(--color-success-light);
}

.upload-zone.uploaded .upload-icon-svg,
.upload-zone.uploaded p {
  color: var(--color-success);
}

/* Small naming tip below each upload zone */
.name-tip {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  padding: 7px 10px;
  background: var(--color-gold-light);
  border-left: 3px solid var(--color-gold);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 12px;
  color: #7a5a20;
}

.name-tip [data-lucide] {
  width: 13px;
  height: 13px;
  color: var(--color-gold);
  flex-shrink: 0;
}


/* ─── 10. INFO / WARNING / TIP BOXES ────────────────────────
   Coloured side-border boxes for notices and reminders.
   ────────────────────────────────────────────────────────── */

/* Base shared styles for all boxes */
.info-box,
.warning-box {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 13px;
  line-height: 1.6;
}

/* Teal info box */
.info-box {
  background: var(--color-primary-light);
  border-left: 3px solid var(--color-primary);
  color: var(--color-primary);
}

.info-box strong { display: block; margin-bottom: 3px; font-weight: 600; }

/* Gold warning box */
.warning-box {
  background: var(--color-gold-light);
  border-left: 3px solid var(--color-gold);
  color: #7a5a20;
}

.warning-box strong { display: block; margin-bottom: 8px; font-weight: 600; }

/* Icon on the left of each box */
.box-icon {
  width: 18px !important;
  height: 18px !important;
  margin-top: 2px;
  flex-shrink: 0;
  color: currentColor;
}


/* ─── 11. PROGRAMME SELECTION CARDS ─────────────────────────
   Selectable cards for each programme option.
   Built dynamically by app.js from CONFIG.programmes.
   ────────────────────────────────────────────────────────── */
.faculty-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 12px 0 8px;
  border-bottom: 2px solid var(--color-primary-light);
  margin-bottom: 8px;
  margin-top: 20px;
}

.faculty-label:first-child { margin-top: 0; }

.faculty-label [data-lucide] {
  width: 15px;
  height: 15px;
  color: var(--color-primary);
}

.programme-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 4px;
}

/* Each individual programme option card */
.prog-option {
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius);
  padding: 14px 16px;
  cursor: pointer;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  transition: all 0.2s;
  background: #fff;
}

.prog-option:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
}

/* Selected programme card */
.prog-option:has(input:checked) {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
}

.prog-option input[type="radio"] {
  margin-top: 3px;
  flex-shrink: 0;
  accent-color: var(--color-primary);
  width: 16px;
  height: 16px;
}

.prog-name    { font-size: 14px; font-weight: 600; color: var(--gray-900); }
.prog-details { font-size: 12px; color: var(--gray-400); margin-top: 3px; line-height: 1.5; }
.prog-fee     { font-size: 13px; font-weight: 600; color: var(--color-primary); margin-top: 5px; }


/* ─── 12. FEE TABLE ─────────────────────────────────────────
   Clean table inside the warning box on the fees step.
   ────────────────────────────────────────────────────────── */
.fee-table {
  width: 100%;
  border-collapse: collapse;
  margin: 10px 0;
  font-size: 12px;
}

.fee-table th,
.fee-table td {
  padding: 6px 8px;
  text-align: left;
  border-bottom: 1px solid rgba(200, 151, 58, 0.2);
}

.fee-table th {
  font-weight: 600;
  color: #7a5a20;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.fee-table td:first-child { font-weight: 500; }

/* Payment method details below the table */
.payment-details {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 10px;
  font-size: 12px;
}

.payment-details span {
  display: flex;
  align-items: center;
  gap: 6px;
}

.payment-details [data-lucide] {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}


/* ─── 13. SUB-SECTIONS & DIVIDERS ───────────────────────────
   Used inside step cards to separate grouped fields.
   ────────────────────────────────────────────────────────── */
.sub-section {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1.5px dashed var(--gray-200);
}

.sub-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 700;
  color: var(--gray-400);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 16px;
}

.sub-title [data-lucide] {
  width: 14px;
  height: 14px;
  color: var(--color-primary);
}

/* Sections that are conditionally hidden (sponsor name, medical) */
.hidden-field {
  display: none;
}
.hidden-field.show {
  display: block;
  animation: fadeUp 0.25s ease both;
}


/* ─── 14. REVIEW SCREEN ─────────────────────────────────────
   Summary table built by app.js on the last step.
   ────────────────────────────────────────────────────────── */
.review-prog {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--color-primary-light);
  border-radius: var(--radius);
  padding: 14px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: 20px;
}

.review-prog [data-lucide] {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.review-section {
  margin-bottom: 20px;
}

.review-section h3 {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 700;
  color: var(--gray-400);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--gray-100);
}

.review-section h3 [data-lucide] {
  width: 13px;
  height: 13px;
}

.review-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 20px;
}

.review-item .rlabel {
  font-size: 11px;
  color: var(--gray-400);
  font-weight: 500;
  margin-bottom: 2px;
}

.review-item .rval {
  font-size: 14px;
  font-weight: 500;
  color: var(--gray-900);
  word-break: break-word;
}


/* ─── 15. DECLARATION CHECKBOX ──────────────────────────────
   The agreement checkbox before submitting.
   ────────────────────────────────────────────────────────── */
.declaration-box {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px;
  margin-top: 20px;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all 0.2s;
  background: #fff;
}

.declaration-box:has(input:checked) {
  border-color: var(--color-success);
  background: var(--color-success-light);
}

.declaration-box input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 3px;
  flex-shrink: 0;
  accent-color: var(--color-success);
  cursor: pointer;
}

.declaration-box strong {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-900);
  margin-bottom: 5px;
}

.declaration-box p {
  font-size: 13px;
  color: var(--gray-600);
  line-height: 1.6;
}


/* ─── 16. NAVIGATION BUTTONS ────────────────────────────────
   Back / Next / Submit buttons at the bottom.
   ────────────────────────────────────────────────────────── */
.nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 12px;
}

.step-counter {
  font-size: 12px;
  color: var(--gray-400);
  font-weight: 500;
}

/* Base button */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 11px 22px;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: all 0.2s;
  letter-spacing: 0.01em;
}

.btn [data-lucide] {
  width: 16px;
  height: 16px;
}

/* Outline (Back) button */
.btn-outline {
  background: #fff;
  border-color: var(--gray-200);
  color: var(--gray-600);
}
.btn-outline:hover {
  background: var(--gray-50);
  border-color: var(--gray-400);
}

/* Primary (Next) button — teal */
.btn-primary {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}
.btn-primary:hover { background: var(--color-primary-mid); }

/* Submit button — green */
.btn-submit {
  background: var(--color-success);
  border-color: var(--color-success);
  color: #fff;
  padding: 13px 28px;
  font-size: 15px;
}
.btn-submit:hover { background: #0f6e56; }

/* Hidden (invisible but takes up space — keeps layout stable) */
.btn.hidden { visibility: hidden; }


/* ─── 17. LOADING OVERLAY ───────────────────────────────────
   Full-screen overlay shown while form is submitting.
   ────────────────────────────────────────────────────────── */
.loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, 0.96);
  z-index: 999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  text-align: center;
  padding: 24px;
}

/* The overlay uses the HTML `hidden` attribute — JS removes it to show */
.loading-overlay[hidden] { display: none; }

/* Spinning circle */
.spinner {
  width: 52px;
  height: 52px;
  border: 4px solid var(--gray-200);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 0.85s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.loading-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-primary);
}

.loading-sub {
  font-size: 13px;
  color: var(--gray-600);
  max-width: 320px;
  line-height: 1.7;
}

/* Upload progress bar (inside the loading overlay) */
.upload-bar {
  width: min(320px, 80vw);
  height: 10px;
  background: var(--gray-200);
  border-radius: 99px;
  overflow: hidden;
}
.upload-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--color-primary), var(--color-primary-mid));
  border-radius: 99px;
  transition: width 0.4s ease;
}


/* ─── 18. DUPLICATE WARNING BANNER ──────────────────────────
   Yellow banner shown if phone/ID already exists in the Sheet.
   ────────────────────────────────────────────────────────── */
.alert-banner {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 18px 20px;
  border-radius: var(--radius-lg);
  margin-bottom: 16px;
  animation: fadeUp 0.3s ease;
}

.alert-banner[hidden] { display: none; }

.alert-warning {
  background: #fff8e1;
  border: 1.5px solid #f9a825;
  color: #5d4037;
}

.alert-icon {
  width: 22px !important;
  height: 22px !important;
  color: #f9a825;
  flex-shrink: 0;
  margin-top: 2px;
}

.alert-banner h3 {
  font-size: 15px;
  font-weight: 600;
  color: #5d4037;
  margin-bottom: 6px;
}

.alert-banner p {
  font-size: 13px;
  color: #6d4c41;
  line-height: 1.6;
  margin-top: 5px;
}

.ref-found {
  display: inline-block;
  margin-top: 10px;
  padding: 8px 14px;
  background: rgba(249, 168, 37, 0.15);
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 700;
  color: #4e342e;
  letter-spacing: 0.02em;
}


/* ─── 19. SUCCESS SCREEN ────────────────────────────────────
   Shown after successful submission. Replaces all steps.
   ────────────────────────────────────────────────────────── */
.success-screen {
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 48px 32px;
  text-align: center;
  animation: fadeUp 0.5s ease;
}

.success-screen[hidden] { display: none; }

/* Large green check icon */
.success-icon-wrap {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--color-success-light);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}

.success-icon-wrap [data-lucide] {
  width: 36px !important;
  height: 36px !important;
  color: var(--color-success);
  stroke-width: 2;
}

.success-screen h2 {
  font-family: var(--font-heading);
  font-size: 26px;
  font-weight: 400;
  color: var(--color-primary);
  margin-bottom: 10px;
}

.success-screen > p {
  font-size: 14px;
  color: var(--gray-600);
  line-height: 1.7;
}

/* Reference number card */
.ref-card {
  background: var(--color-primary-light);
  border: 1.5px solid var(--color-primary);
  border-radius: var(--radius);
  padding: 16px 24px;
  margin: 20px auto;
  max-width: 300px;
}

.ref-card small {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-primary);
  margin-bottom: 6px;
}

.ref-card span {
  display: block;
  font-size: 22px;
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: 0.04em;
}

/* Save reference tip box */
.save-tip {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--color-gold-light);
  border: 1.5px solid var(--color-gold);
  border-radius: var(--radius);
  padding: 14px 18px;
  margin: 16px auto;
  max-width: 480px;
  text-align: left;
  font-size: 13px;
  color: #7a5a20;
  line-height: 1.6;
}

.save-tip [data-lucide] {
  color: var(--color-gold);
  flex-shrink: 0;
  margin-top: 2px;
  width: 18px;
  height: 18px;
}

.save-tip strong { display: block; margin-bottom: 3px; font-size: 13px; }

.closing-note {
  font-size: 13px;
  color: var(--gray-400);
  margin: 12px 0;
}

/* Contact strip at bottom of success screen */
.contact-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 20px;
  margin-top: 20px;
  padding: 14px 16px;
  background: var(--gray-50);
  border-radius: var(--radius);
  font-size: 13px;
  color: var(--gray-600);
}

.contact-strip span {
  display: flex;
  align-items: center;
  gap: 6px;
}

.contact-strip [data-lucide] {
  width: 14px;
  height: 14px;
  color: var(--color-primary);
}




/* ─── 21. RESPONSIVE (MOBILE) ───────────────────────────────
   Adjustments for screens narrower than 520px.
   ────────────────────────────────────────────────────────── */
@media (max-width: 520px) {
  /* Phones: show only the current step name so labels don't run together */
  .prog-label { font-size: 9px; letter-spacing: 0; }
  .prog-label:not(.active) { font-size: 0; }
  .prog-label.active { font-size: 11px; }


  .header-inner { padding: 10px 14px; }
  .header-text h1 { font-size: 13px; }
  .intake-badge { font-size: 10px; padding: 4px 8px; }

  .main { padding: 16px 12px 60px; }

  /* Stack two-column rows into single column */
  .row2 { grid-template-columns: 1fr; gap: 0; }

  /* Smaller step cards */
  .step-card { padding: 18px 16px; }
  .step-heading h2 { font-size: 17px; }

  /* Wrap radio pills so they don't overflow */
  .radio-group { gap: 6px; }
  .radio-pill  { padding: 7px 12px; font-size: 12px; }

  /* Full-width nav buttons */
  .nav-row {
    flex-direction: column-reverse;
    gap: 10px;
  }
  .btn { width: 100%; justify-content: center; }
  .step-counter { order: -1; }

  /* Stack review grid */
  .review-grid { grid-template-columns: 1fr; }

  /* Success screen tighter */
  .success-screen { padding: 28px 16px; }
  .success-screen h2 { font-size: 21px; }
}