/* ═══════════════════════════════════════════════════
   Quiz Page Styles - Eligibility Quiz
   ═══════════════════════════════════════════════════ */

/* ── Quiz Container ── */
.quiz-container {
  max-width: 600px;
  margin: 0 auto;
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 40px;
  box-shadow: var(--shadow-md);
}

/* ── Quiz Progress Bar ── */
.quiz-progress {
  height: 6px;
  background: var(--gray-200);
  border-radius: 3px;
  margin-bottom: 30px;
  overflow: hidden;
}

.quiz-progress-bar {
  height: 100%;
  background: var(--green-600);
  border-radius: 3px;
  transition: width 0.4s ease;
}

/* ── Quiz Steps ── */
.quiz-step {
  display: none;
}

.quiz-step.active {
  display: block;
}

.quiz-step h3 {
  margin-bottom: 20px;
}

/* ── Quiz Options ── */
.quiz-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.quiz-option {
  padding: 14px 20px;
  border: 2px solid var(--gray-200);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition);
  font-size: 0.95rem;
}

.quiz-option:hover {
  border-color: var(--green-400);
  background: var(--green-50);
}

.quiz-option.selected {
  border-color: var(--green-600);
  background: var(--green-100);
}

/* ── Quiz Navigation / Buttons ── */
.quiz-navigation,
.quiz-buttons {
  display: flex;
  gap: 15px;
  margin-top: 40px;
}

.quiz-navigation button,
.quiz-buttons button {
  flex: 1;
  padding: 14px 20px;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}

.quiz-navigation .btn-prev,
.quiz-buttons .btn-prev {
  background: var(--gray-200);
  color: var(--gray-800);
}

.quiz-navigation .btn-prev:hover:not(:disabled),
.quiz-buttons .btn-prev:hover:not(:disabled) {
  background: var(--gray-300);
}

.quiz-navigation .btn-next,
.quiz-navigation .btn-finish,
.quiz-buttons .btn-next,
.quiz-buttons .btn-finish {
  background: var(--green-700);
  color: var(--white);
  flex: 2;
}

.quiz-navigation .btn-next:hover:not(:disabled),
.quiz-navigation .btn-finish:hover:not(:disabled),
.quiz-buttons .btn-next:hover:not(:disabled),
.quiz-buttons .btn-finish:hover:not(:disabled) {
  background: var(--green-600);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.quiz-navigation button:disabled,
.quiz-buttons button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}