/* ══════════════════════════════════════════════
   ELIGIBILITY QUIZ STYLES
══════════════════════════════════════════════ */

/* ── Fallback variables (in case style.css hasn't defined them) ── */
.quiz-wrapper {
  --gray-200: #E5E7EB;
  --gray-400: #9CA3AF;
  --gray-500: #6B7280;
  --gray-600: #4B5563;
  --gold-light: #E8B84B;
  --cream: #FDF8F0;
  --radius: 12px;
  --shadow-lg: 0 10px 40px rgba(27,58,92,0.12);
  max-width: 720px;
  margin: 0 auto;
}

/* Progress */
.quiz-progress-wrap {
  height: 6px;
  background: var(--gray-200);
  border-radius: 100px;
  overflow: hidden;
  margin-bottom: 10px;
}
.quiz-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--gold), var(--navy));
  border-radius: 100px;
  transition: width 0.4s ease;
}
.quiz-progress-label {
  text-align: right;
  font-size: 0.82rem;
  color: var(--gray-400);
  font-weight: 600;
  letter-spacing: 0.05em;
  margin-bottom: 28px;
}

/* Card */
.quiz-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 20px;
  padding: 48px 52px;
  box-shadow: var(--shadow-lg);
  min-height: 420px;
}

/* Steps */
.quiz-step {
  display: none !important;
  opacity: 1 !important;
  transform: none !important;
}
.quiz-step.active {
  display: block !important;
  opacity: 1 !important;
  transform: none !important;
}
/* Subtle entrance — purely visual, not used for logic */
.quiz-step.active {
  animation: fadeSlide 0.28s ease forwards;
}
@keyframes fadeSlide {
  from { opacity: 0.4; transform: translateX(16px); }
  to   { opacity: 1;   transform: translateX(0); }
}
.quiz-step h2 {
  font-family: var(--font-display);
  font-size: 1.55rem;
  color: var(--navy);
  margin-bottom: 8px;
  line-height: 1.3;
}
.quiz-sub { color: var(--gray-500); font-size: 0.92rem; margin-bottom: 28px; }

/* Options */
.quiz-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.quiz-options-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.quiz-opt {
  padding: 16px 22px;
  border: 2px solid var(--gray-200);
  border-radius: 12px;
  background: var(--white);
  color: var(--navy);
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s ease;
  line-height: 1.4;
}
.quiz-opt:hover {
  border-color: var(--gold);
  background: #fdf8ee;
  transform: translateX(4px);
}
.quiz-opt.selected {
  border-color: var(--navy);
  background: var(--navy);
  color: var(--white);
}

/* Lead form inside quiz */
.quiz-lead-form { margin-top: 8px; }
.quiz-lead-form .form-group { margin-bottom: 16px; }
.quiz-lead-form label { display: block; font-size: 0.88rem; font-weight: 600; color: var(--navy); margin-bottom: 6px; }
.quiz-lead-form input {
  width: 100%; padding: 12px 16px;
  border: 1.5px solid var(--gray-200);
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--navy);
  outline: none;
  transition: border-color 0.2s;
  box-sizing: border-box;
}
.quiz-lead-form input:focus { border-color: var(--gold); }

/* Back button */
.quiz-nav { margin-top: 20px; }
.quiz-back {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 1.5px solid var(--gray-200);
  border-radius: 8px; padding: 10px 20px;
  color: var(--gray-500); font-family: var(--font-body);
  font-size: 0.88rem; font-weight: 600; cursor: pointer;
  transition: all 0.2s ease;
}
.quiz-back:hover { border-color: var(--navy); color: var(--navy); }

/* ── RESULT STYLES ── */
.result-verdict {
  text-align: center;
  padding: 36px 32px;
  border-radius: 16px;
  margin-bottom: 28px;
}
.result-good { background: linear-gradient(135deg, #d1fae5, #a7f3d0); border: 1px solid #6ee7b7; }
.result-prep { background: linear-gradient(135deg, #fef3c7, #fde68a); border: 1px solid #fbbf24; }
.result-emoji { font-size: 3rem; margin-bottom: 12px; }
.result-verdict h2 { font-family: var(--font-display); font-size: 1.4rem; color: var(--navy); margin-bottom: 10px; }
.result-verdict p { color: var(--gray-600); font-size: 0.95rem; }

.result-dest-card {
  background: var(--navy);
  border-radius: 14px;
  padding: 28px 32px;
  margin-bottom: 24px;
}
.result-dest-card h3 {
  font-family: var(--font-display);
  color: var(--white);
  font-size: 1.15rem;
  margin-bottom: 20px;
}
.result-dest-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.result-dest-grid > div span {
  display: block;
  font-size: 0.75rem;
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 4px;
}
.result-dest-grid > div strong {
  color: var(--gold-light);
  font-size: 0.9rem;
  font-weight: 600;
}

.result-tips {
  background: var(--cream);
  border-left: 4px solid var(--gold);
  border-radius: var(--radius);
  padding: 24px 28px;
  margin-bottom: 24px;
}
.result-tips h4 { color: var(--navy); font-family: var(--font-display); margin-bottom: 12px; }
.result-tips ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.result-tips li { color: var(--gray-600); font-size: 0.9rem; line-height: 1.65; padding-left: 16px; position: relative; }
.result-tips li::before { content: '✓'; position: absolute; left: 0; color: var(--gold); font-weight: 700; }

.result-cta-box {
  background: linear-gradient(135deg, #1B3A5C, #2C5F8A);
  border-radius: 16px;
  padding: 36px 32px;
  text-align: center;
}
.result-cta-box h3 { font-family: var(--font-display); color: var(--white); font-size: 1.3rem; margin-bottom: 10px; }
.result-cta-box p { color: rgba(255,255,255,0.75); margin-bottom: 24px; }
.btn-whatsapp-result {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 28px; background: #25D366; color: white;
  border-radius: 8px; font-weight: 600; font-family: var(--font-body);
  font-size: 0.95rem; transition: all 0.2s ease;
}
.btn-whatsapp-result:hover { background: #1da851; transform: translateY(-2px); }

@media (max-width: 768px) {
  .quiz-card { padding: 32px 24px; }
  .quiz-options-grid { grid-template-columns: 1fr; }
  .result-dest-grid { grid-template-columns: 1fr; }
}