/* =============================================================================
   Lendspedia — Aave theme, quiz funnel layer
   -----------------------------------------------------------------------------
   ADDITIVE OVERRIDE for loan-quiz.html. Load order matters:

       css/loan-quiz.css        base (untouched)
       css/aave-theme.css       token block + base type
       css/aave-theme-quiz.css  this file — quiz components + collision fixes

   loan-quiz.css consumes --blue / --gray-* / --green from its own :root, so
   aave-theme.css re-skins most of the funnel for free just by redefining those.
   This file handles what tokens alone cannot: component geometry, the periwinkle
   selected state, and the two places where aave-theme.css actively collides.

   NOTHING here changes a question, an option, a step order, the branching in
   js/loan-quiz.js, or the lead payload. Purely visual.

   To revert: delete this file's <link> and the aave-theme.css <link> from
   loan-quiz.html, and restore the Libre Franklin font link.
   ============================================================================ */

/* === COLLISION FIXES =====================================================
   aave-theme.css targets `footer` for the marketing site's black footer. The
   quiz footer is <footer class="quiz-footer"> and must stay light. */
footer.quiz-footer {
  background: var(--gray-50);
  border-top: 1px solid var(--gray-200);
}
.quiz-footer-sep { color: var(--gray-500); }

/* loan-quiz.css declares --gray-300 and aave-theme.css does not, so the old
   slate-blue value would survive as the one non-plum grey. */
:root { --gray-300: rgba(38,34,40,.18); }

/* === GROUND & CHROME ===================================================== */
body { background: var(--gray-50); }

.quiz-header {
  background: #fff;
  border-bottom: 1px solid var(--gray-200);
  padding: 16px 24px;
}
.quiz-logo-mark { background: var(--plum); border-radius: 9px; }
.quiz-logo-name {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -.025em;
  color: var(--slate);
}
.quiz-logo-sub { font-weight: 400; color: var(--gray-500); letter-spacing: 0; }
.quiz-back-home { color: var(--gray-500); font-weight: 450; }
.quiz-back-home:hover { color: var(--plum); }

/* Progress rail — same treatment as the .ps-bar in the homepage hero mockup */
.progress-wrap { background: var(--peri-4); }
.progress-bar-fill { background: var(--peri); }

/* === CONTENT CARD ======================================================== */
.quiz-main { padding: 48px 16px 64px; }
.quiz-content {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 24px;
  padding: clamp(24px, 5vw, 40px);
}

.step-question {
  font-family: var(--display);
  font-weight: 500;
  letter-spacing: -.03em;
  color: var(--slate);
  line-height: 1.22;
}
.step-sub { color: var(--gray-500); }

/* === CHOICES =============================================================
   Deliberately identical to .ps-opt / .ps-opt--on in css/aave-theme.css, so the
   phones in the homepage hero are an honest preview of this screen. */
.radio-option {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 13px;
  font-weight: 450;
  color: var(--slate);
  box-shadow: none;
}
.radio-option:hover {
  border-color: var(--peri);
  background: var(--peri-5);
  color: var(--plum);
}
.radio-option.selected {
  background: var(--peri-4);
  border-color: var(--peri);
  color: #33299c;
  font-weight: 500;
  box-shadow: none;
}

/* === SLIDER (timeline step) ============================================== */
input[type="range"] {
  background: linear-gradient(to right,
    var(--peri) 0%, var(--peri) var(--val, 30%),
    var(--peri-4) var(--val, 30%), var(--peri-4) 100%);
}
input[type="range"]::-webkit-slider-thumb {
  background: var(--peri);
  border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(152,150,255,.55);
}
input[type="range"]::-moz-range-thumb {
  background: var(--peri);
  border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(152,150,255,.55);
}
.slider-value-display {
  font-family: var(--display);
  font-weight: 500;
  letter-spacing: -.04em;
  color: var(--peri-text);
}
.slider-value-label { color: var(--gray-500); }
.slider-labels { font-weight: 500; }
.slider-label-low  { color: var(--green); }
.slider-label-med  { color: #b45309; }   /* #d97706 was 3.4:1 on white */
.slider-label-high { color: var(--red); }

/* === INPUTS ==============================================================
   Matches .form-field input on partners.html. */
.quiz-input,
.phone-prefix select {
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  color: var(--slate);
  font-family: var(--sans);
  transition: border-color .2s, box-shadow .2s;
}
.quiz-input::placeholder { color: var(--gray-400); }
.quiz-input:focus,
.phone-prefix select:focus {
  border-color: var(--peri);
  box-shadow: 0 0 0 3px var(--peri-4);
}
.quiz-input.error { border-color: var(--red); box-shadow: none; }
.field-error { color: var(--red); }

.tcpa {
  background: var(--peri-5);
  border: 1px solid var(--peri-2);
  border-radius: var(--radius);
}
.tcpa input[type="checkbox"] { accent-color: var(--peri); }
.tcpa label { color: var(--gray-600); }
.tcpa a { color: var(--peri-ink); }

/* === BUTTONS ============================================================= */
.btn-quiz-next {
  background: var(--blue-dark);
  border-radius: var(--radius-pill);
  font-family: var(--display);
  font-weight: 500;
  letter-spacing: -.015em;
  padding: 16px 28px;
}
.btn-quiz-next:hover { background: var(--blue-deep); }
.btn-quiz-back {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-pill);
  font-family: var(--display);
  font-weight: 500;
  color: var(--gray-500);
  padding: 16px 22px;
}
.btn-quiz-back:hover { border-color: var(--peri); color: var(--plum); }

/* === LOADING / MATCHING SCREEN =========================================== */
.loading-title {
  font-family: var(--display);
  font-weight: 500;
  letter-spacing: -.03em;
  color: var(--slate);
}
.loading-step { color: var(--gray-500); }        /* --gray-400 was ~2.2:1 */
.loading-step.done   { color: var(--green); }
.loading-step.active { color: var(--peri-text); }
.loading-step-icon { background: var(--gray-100); }
.loading-step.done   .loading-step-icon { background: #d6f2e5; }
.loading-step.active .loading-step-icon { background: var(--peri-4); color: var(--peri-ink); }
.loading-step.done .loading-step-icon { color: var(--green-dark); }
.loading-spinner { border-color: var(--peri-4); border-top-color: var(--peri); }

/* === THANK YOU / DISQUALIFY ==============================================
   The confirmation check is periwinkle to match the third phone in the
   homepage hero cluster, which shows this exact screen. */
.thankyou-icon {
  background: var(--peri-4);
  border: 1px solid var(--peri);
  color: var(--peri-ink);
}
.thankyou-title,
.disqualify-title {
  font-family: var(--display);
  font-weight: 500;
  letter-spacing: -.035em;
  color: var(--slate);
}
.thankyou-sub, .disqualify-sub { color: var(--gray-600); }
.thankyou-bullets {
  background: var(--peri-5);
  border: 1px solid var(--peri-2);
  border-radius: var(--radius);
}
.thankyou-bullets li::before { color: var(--green); }
.thankyou-link {
  background: var(--blue-dark);
  border-radius: var(--radius-pill);
  font-family: var(--display);
  font-weight: 500;
  padding: 15px 32px;
}
.thankyou-link:hover { background: var(--blue-deep); }
.disqualify-icon {
  background: var(--peri-4);
  border: 1px solid var(--peri);
  color: var(--peri-ink);
}

@media (max-width: 560px) {
  .quiz-main { padding: 28px 12px 48px; }
  .quiz-content { border-radius: 20px; padding: 22px 18px; }
}