/* ============================================================
   Clear Hearing — brand override for the hearing test
   Loaded AFTER styles.css to cascade over the test's defaults.
   Overrides the test's CSS custom properties with Clear Hearing
   tokens so every var() reference picks up the new brand.
   ============================================================ */

/* ============================================================
   Snappier step transitions (cut from 500ms to 220ms).
   ============================================================ */
.step.active {
  animation-duration: 0.22s !important;
}

/* ============================================================
   Force every step-image panel to use the navy brand gradient.
   ============================================================ */
.panel-warm,
.panel-social,
.panel-success {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 50%, #1A3F6E 100%) !important;
}

/* Hide any leftover cartoon SVGs */
.panel-warm .scene-icon,
.panel-social .scene-icon,
.panel-success .scene-icon {
  display: none !important;
}

/* ============================================================
   Wave-rings on every panel that has them, with subtle variation
   so the three question panels don't look identical to soundwave.
   ============================================================ */
.panel-warm .wave-rings,
.panel-social .wave-rings,
.panel-success .wave-rings {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.panel-warm .ring,
.panel-social .ring,
.panel-success .ring {
  position: absolute;
  border: 1.5px solid rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: ringPulse 4s ease-in-out infinite;
}
.panel-warm .ring:nth-child(1),
.panel-social .ring:nth-child(1),
.panel-success .ring:nth-child(1) { width: 100px; height: 100px; animation-delay: 0s; }
.panel-warm .ring:nth-child(2),
.panel-social .ring:nth-child(2),
.panel-success .ring:nth-child(2) { width: 200px; height: 200px; animation-delay: 0.5s; }
.panel-warm .ring:nth-child(3),
.panel-social .ring:nth-child(3),
.panel-success .ring:nth-child(3) { width: 320px; height: 320px; animation-delay: 1s; }
.panel-warm .ring:nth-child(4),
.panel-social .ring:nth-child(4),
.panel-success .ring:nth-child(4) { width: 460px; height: 460px; animation-delay: 1.5s; }
.panel-warm .ring:nth-child(5),
.panel-social .ring:nth-child(5),
.panel-success .ring:nth-child(5) { width: 620px; height: 620px; animation-delay: 2s; }

/* Subtle per-panel variation so they don't all look identical to soundwave */
.panel-social .ring {
  border-color: rgba(0, 163, 108, 0.18);
  animation-duration: 5s;
}
.panel-success .ring {
  border-color: rgba(255, 255, 255, 0.12);
  animation-duration: 6s;
}

/* Position the ear-glyph SVG on top of the rings on every panel */
.panel-warm .ear-glyph,
.panel-social .ear-glyph,
.panel-success .ear-glyph {
  position: relative;
  z-index: 2;
}

/* ============================================================
   Mobile: stop the absolute-positioned back button colliding
   with the H1 heading on question/info steps.
   ============================================================ */
@media (max-width: 768px) {
  .step-content {
    padding-top: 80px !important;
  }
  .back-btn {
    top: 16px !important;
    left: 16px !important;
  }
  /* Move the step-progress label below the back button on mobile */
  #testProgressLabel {
    top: 16px !important;
    right: 16px !important;
  }
}

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  /* Primary navy */
  --navy: #0B2C5C;
  --navy-mid: #14305E;
  --navy-light: #1A3F6E;

  /* Test's accent — trust green for health-positive CTAs */
  --teal: #00A36C;
  --teal-light: #00845A;
  --teal-glow: rgba(0, 163, 108, 0.18);

  /* Surfaces — white, not cream */
  --cream: #FFFFFF;
  --cream-dark: #F7F9FC;
  --warm-white: #FFFFFF;

  /* Text */
  --text: #0F1A2E;
  --text-secondary: #4A5568;
  --text-muted: #6B7280;

  /* Borders */
  --border: #E5E7EB;
  --border-light: #F3F4F6;

  /* Status — match results page */
  --green: #00A36C;
  --green-bg: #E6F7F0;
  --amber: #F57C00;
  --amber-bg: #FFF3E0;
  --red: #D32F2F;
  --red-bg: #FDECEA;

  /* Shadows — cooler and cleaner */
  --shadow-sm: 0 1px 2px rgba(15, 26, 46, 0.06);
  --shadow-md: 0 2px 8px rgba(15, 26, 46, 0.08);
  --shadow-lg: 0 8px 24px rgba(15, 26, 46, 0.10);
  --shadow-glow: 0 0 30px rgba(0, 163, 108, 0.18);

  /* Radius — keep test's modest scale */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;

  /* Fonts — Inter everywhere */
  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
}

/* ============================================================
   Base — make sure the test uses Inter and white
   ============================================================ */
body {
  font-family: var(--font-body);
  background: #FFFFFF;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

/* Test's step-content background was var(--warm-white) which we overrode to white.
   Ensure the step container is clearly white. */
.step-content {
  background: #FFFFFF;
}

/* ============================================================
   Headings — Inter 800, tighter letter-spacing to match presell/advertorial
   The test's headings used DM Serif Display; Inter 800 reads as authoritative
   but stays within the DTC category register.
   ============================================================ */
h1, .step-content h1 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--text);
  line-height: 1.15;
}
h2, .step-content h2 {
  font-family: var(--font-body);
  font-weight: 500;
  color: var(--text-secondary);
  letter-spacing: -0.005em;
}
h3 {
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
}

/* ============================================================
   Primary button — trust green, health-positive
   ============================================================ */
.btn-primary {
  background: var(--teal);
  color: #FFFFFF;
  font-family: var(--font-body);
  font-weight: 700;
  border-radius: var(--radius-md);
  box-shadow: 0 4px 14px rgba(0, 163, 108, 0.28);
  letter-spacing: -0.005em;
}
.btn-primary:hover {
  background: var(--teal-light);
  box-shadow: 0 6px 18px rgba(0, 163, 108, 0.36);
}

/* ============================================================
   Radio option selected state — navy ring, red dot
   ============================================================ */
.radio-option.selected {
  border-color: var(--navy);
}
.radio-option.selected .radio-circle {
  background: var(--navy);
  border-color: var(--navy);
}

/* ============================================================
   Progress counter & form labels — Inter 600
   ============================================================ */
.progress-counter,
.field-label {
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* ============================================================
   Headphone hint pill — navy + white
   ============================================================ */
.headphone-hint {
  display: flex;
  background: var(--navy);
  color: #FFFFFF;
  margin-left: auto;
  margin-right: auto;
}

/* ============================================================
   Smooth transitions everywhere — match presell ease
   ============================================================ */
button, .radio-option, .btn-primary, .btn-secondary {
  transition: all 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* ============================================================
   MOBILE POLISH — 65+ touch targets, font sizes, button prominence
   Stacked on top of the test's existing 768px / 480px breakpoints.
   ============================================================ */
@media (max-width: 768px) {
  body {
    font-size: 17px;
  }
  /* Welcome headline readable at small sizes */
  #step-welcome h1 {
    font-size: 1.625rem !important;
    line-height: 1.2;
  }
  #step-welcome h2 {
    font-size: 1rem !important;
    line-height: 1.45;
  }
  /* Step subheadings (body copy above questions) */
  .step-content h2 {
    font-size: 1rem;
    line-height: 1.45;
    color: var(--text-secondary);
  }
  /* Radio options: large tap targets, clearer selected state */
  .radio-option {
    min-height: 58px;
    padding: 14px 18px;
  }
  .radio-option .radio-label {
    font-size: 1.0625rem;
    font-weight: 600;
  }
  /* Primary button full-width on mobile */
  .btn-primary {
    max-width: 100% !important;
    width: 100%;
    min-height: 56px;
    font-size: 1.0625rem;
    padding: 18px 24px;
    margin-top: 20px;
  }
  /* Secondary button full-width too */
  .btn-secondary {
    max-width: 100% !important;
    width: 100%;
    min-height: 52px;
  }
  /* Bigger back button for easier tap */
  .back-btn {
    height: 48px;
    padding: 0 20px;
    font-size: 1rem;
    line-height: 1;
  }
  /* Progress counter more prominent */
  .progress-counter {
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.04em;
  }
  /* Ear indicator (L/R) bigger on mobile for the tone test */
  .ear-icon {
    width: 52px;
    height: 52px;
    font-size: 0.875rem;
  }
  /* Tone test +/- buttons bigger tap targets */
  .fine-adjust button {
    min-width: 56px;
    min-height: 56px;
    font-size: 1.5rem;
  }
  /* Volume slider thumb bigger on mobile */
  .volume-slider {
    height: 44px;
  }
  .radio-circle { width: 28px; height: 28px; }
  .radio-circle::after { width: 14px; height: 14px; }
}

@media (max-width: 480px) {
  /* On the very smallest phones, further tighten */
  .step-content {
    padding-top: 68px;
  }
  #step-welcome h1 {
    font-size: 1.5rem !important;
  }
  .radio-option {
    padding: 12px 16px;
  }
  .btn-primary {
    font-size: 1rem;
    padding: 16px 20px;
  }
}

/* ============================================================
   Returning user banner — shown on welcome step if prior result exists
   ============================================================ */
.returning-user-banner {
  background: #F7F9FC;
  border: 1px solid #E5E7EB;
  border-left: 4px solid var(--navy);
  border-radius: 10px;
  padding: 18px 22px;
  margin-top: 20px;
  margin-bottom: 8px;
}
.returning-user-title {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.returning-user-body {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0 0 10px 0;
}
.returning-user-link {
  display: inline-flex;
  align-items: center;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--teal);
  text-decoration: none;
  letter-spacing: -0.005em;
}
.returning-user-link:hover {
  color: var(--teal-light);
  text-decoration: underline;
}