/* ═══════════════════════════════════════════════════════════════════════════
   LUUX THEORIE — LearnDash Exam Styles  (exam.css)
   Targets .ld-exam-* classes output by LearnDash 4.x exam templates
   Requires: styles.css (design tokens) to be loaded before this file
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── WRAPPER ──────────────────────────────────────────────────────────────── */
.ld-exam-content {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  color: var(--fg);
}

/* ── HEADER ───────────────────────────────────────────────────────────────── */
.ld-exam-header {
  padding-bottom: 1rem;
}

/* ── BUTTON: Start Exam ───────────────────────────────────────────────────── */
.ld-exam-button-start {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 0.875rem 1.5rem;
  border-radius: 1rem; border: none; cursor: pointer;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 0.875rem; font-weight: 600;
  background: linear-gradient(135deg, var(--primary), var(--sec));
  color: var(--primary-fg);
  box-shadow: 0 12px 32px -12px oklch(0.20 0.04 255 / 0.40);
  transition: opacity 0.15s, transform 0.15s;
  margin-bottom: 0.75rem;
}
.ld-exam-button-start:hover { opacity: 0.90; transform: translateY(-1px); }

/* ── BUTTON: View Results ─────────────────────────────────────────────────── */
.ld-exam-button-results {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 0.875rem 1.5rem;
  border-radius: 1rem; border: none; cursor: pointer;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 0.875rem; font-weight: 600;
  background: linear-gradient(135deg, var(--primary), var(--sec));
  color: var(--primary-fg);
  box-shadow: 0 12px 32px -12px oklch(0.20 0.04 255 / 0.40);
  transition: opacity 0.15s, transform 0.15s;
  margin-bottom: 0.75rem;
}
.ld-exam-button-results:hover { opacity: 0.90; transform: translateY(-1px); }

/* State-based button visibility */
.ld-exam-not-graded  .ld-exam-button-results { display: none; }
.ld-exam-graded      .ld-exam-button-start   { display: none; }

/* ── PROGRESS BAR ─────────────────────────────────────────────────────────── */
.ld-exam-progress {
  margin-top: 1rem;
}
.ld-exam-progress-text {
  font-size: 0.6875rem; font-weight: 600; color: var(--muted-fg);
  margin-bottom: 0.5rem; line-height: 1.5;
}
.ld-exam-progress-text-current,
.ld-exam-progress-text-total {
  font-weight: 700; color: var(--fg);
}
.ld-exam-progress-text-percentage {
  font-weight: 700; color: var(--sec);
}
.ld-exam-progress-bar {
  height: 8px; border-radius: 9999px;
  background-color: var(--sec-soft); overflow: hidden;
}
.ld-exam-progress-bar-fill {
  display: block; height: 100%; border-radius: 9999px;
  background-color: var(--sec);
  transition: width 0.45s cubic-bezier(0.32, 0.72, 0, 1);
}

/* Progress hidden until exam starts (LearnDash JS shows it) */
.ld-exam-not-graded .ld-exam-progress { display: none; }

/* ── QUESTIONS LIST ───────────────────────────────────────────────────────── */
.ld-exam-questions {
  list-style: none; padding: 0; margin: 1.25rem 0;
  display: flex; flex-direction: column; gap: 1rem;
}

/* In active (not yet submitted) state — show only the active question */
.ld-exam-not-graded .ld-exam-question                { display: none; }
.ld-exam-not-graded .ld-exam-question.ld-exam-question-active { display: block; }

/* In graded state — show all questions */
.ld-exam-graded .ld-exam-question { display: block; }

/* ── QUESTION ROW ─────────────────────────────────────────────────────────── */
.ld-exam-question {
  background-color: var(--card);
  border: 1px solid oklch(0.86 0.004 250 / 0.60);
  border-radius: 1.25rem;
  padding: 1.25rem;
  box-shadow: 0 4px 24px -8px oklch(0.20 0.04 255 / 0.20);
}

/* Graded: question answered correctly */
.ld-exam-question.ld-exam-question-correct {
  background-color: oklch(0.62 0.15 155 / 0.07);
  border-color: oklch(0.62 0.15 155 / 0.35);
}

/* Graded: question answered incorrectly */
.ld-exam-question.ld-exam-question-incorrect {
  background-color: oklch(0.58 0.21 27 / 0.06);
  border-color: oklch(0.58 0.21 27 / 0.30);
}

/* ── QUESTION TITLE ───────────────────────────────────────────────────────── */
.ld-exam-question-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.25rem; font-weight: 700;
  letter-spacing: -0.02em; line-height: 1.3;
  color: var(--fg); margin-bottom: 1rem;
}

/* ── QUESTION DESCRIPTION ─────────────────────────────────────────────────── */
.ld-exam-question-description {
  font-size: 0.8125rem; color: var(--muted-fg);
  line-height: 1.6; margin-bottom: 1rem;
  padding: 0.75rem 1rem;
  background-color: var(--muted); border-radius: 0.75rem;
}
.ld-exam-question-description p:last-child { margin-bottom: 0; }

/* ── ANSWERS WRAPPER ──────────────────────────────────────────────────────── */
.ld-exam-question-answers {
  display: flex; flex-direction: column; gap: 0.625rem;
}

/* ── ANSWER OPTION ────────────────────────────────────────────────────────── */
.ld-exam-question-answer {
  position: relative;
  display: flex; align-items: center;
  padding: 1rem; border-radius: 1rem;
  border: 2px solid oklch(0.86 0.004 250 / 0.60);
  background-color: var(--card); cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
}

/* Hover (only when not graded) */
.ld-exam-not-graded .ld-exam-question-answer:hover {
  border-color: var(--sec);
}

/* Hide native radio / checkbox */
.ld-exam-question-answer input[type="radio"],
.ld-exam-question-answer input[type="checkbox"] {
  position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}

/* Label layout */
.ld-exam-question-answer label {
  display: flex; align-items: center; gap: 12px;
  cursor: pointer; width: 100%;
  font-size: 0.875rem; font-weight: 500;
  color: var(--fg); line-height: 1.4; margin: 0;
}

/* Custom indicator bubble */
.ld-exam-question-answer label::before {
  content: '';
  flex-shrink: 0; width: 28px; height: 28px;
  border: 2px solid oklch(0.86 0.004 250 / 0.60);
  background: transparent;
  transition: background 0.15s, border-color 0.15s;
}
/* Radio → circle */
.ld-exam-question-answer input[type="radio"]  + label::before { border-radius: 50%; }
/* Checkbox → rounded square */
.ld-exam-question-answer input[type="checkbox"] + label::before { border-radius: 6px; }

/* ── ANSWER: Checked/Selected state ──────────────────────────────────────── */
.ld-exam-question-answer:has(input:checked) {
  border-color: var(--sec);
  background-color: var(--sec-soft);
}
.ld-exam-question-answer:has(input:checked) label::before {
  background-color: var(--sec);
  border-color: var(--sec);
}
/* Checkmark inside bubble */
.ld-exam-question-answer:has(input:checked) label::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

/* ── ANSWER: Graded — CORRECT ─────────────────────────────────────────────── */
.ld-exam-question-answer.ld-exam-question-answer-correct {
  border-color: oklch(0.62 0.15 155 / 0.60) !important;
  background-color: oklch(0.62 0.15 155 / 0.10) !important;
  cursor: default; pointer-events: none;
}
.ld-exam-question-answer.ld-exam-question-answer-correct label {
  color: var(--success);
}
.ld-exam-question-answer.ld-exam-question-answer-correct label::before {
  background-color: var(--success) !important;
  border-color: var(--success) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center;
}

/* ── ANSWER: Graded — INCORRECT (student picked this wrong answer) ────────── */
.ld-exam-question-answer.ld-exam-question-answer-incorrect {
  border-color: oklch(0.58 0.21 27 / 0.40) !important;
  background-color: oklch(0.58 0.21 27 / 0.10) !important;
  cursor: default; pointer-events: none;
}
.ld-exam-question-answer.ld-exam-question-answer-incorrect label {
  color: var(--destruct);
}
.ld-exam-question-answer.ld-exam-question-answer-incorrect label::before {
  background-color: var(--destruct) !important;
  border-color: var(--destruct) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center;
}

/* Disable all answers when graded */
.ld-exam-graded .ld-exam-question-answer {
  cursor: default; pointer-events: none;
}
/* Neutral (unselected, uncorrected) answers in graded state */
.ld-exam-graded .ld-exam-question-answer:not(.ld-exam-question-answer-correct):not(.ld-exam-question-answer-incorrect) {
  opacity: 0.50;
}

/* ── FEEDBACK MESSAGES ────────────────────────────────────────────────────── */
.ld-exam-question-correct-message,
.ld-exam-question-incorrect-message {
  display: flex; align-items: flex-start; gap: 0.625rem;
  margin-top: 0.875rem; padding: 0.875rem 1rem;
  border-radius: 0.875rem;
  font-size: 0.8125rem; font-weight: 600; line-height: 1.5;
}
.ld-exam-question-correct-message {
  background-color: oklch(0.62 0.15 155 / 0.12);
  border: 1px solid oklch(0.62 0.15 155 / 0.30);
  color: var(--success);
}
.ld-exam-question-correct-message::before {
  content: '';
  flex-shrink: 0; width: 16px; height: 16px; margin-top: 1px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2362a87b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
  background-size: cover;
}
.ld-exam-question-incorrect-message {
  background-color: oklch(0.58 0.21 27 / 0.10);
  border: 1px solid oklch(0.58 0.21 27 / 0.25);
  color: var(--destruct);
}
.ld-exam-question-incorrect-message::before {
  content: '';
  flex-shrink: 0; width: 16px; height: 16px; margin-top: 1px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23d95033' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E");
  background-size: cover;
}

/* ── FOOTER ───────────────────────────────────────────────────────────────── */
.ld-exam-footer {
  display: flex; flex-direction: column; gap: 0.625rem;
  padding-top: 0.5rem;
}

/* Next button */
.ld-exam-button-next {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 0.875rem 1.5rem;
  border-radius: 1rem; border: none; cursor: pointer;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 0.875rem; font-weight: 600;
  background-color: var(--sec); color: var(--sec-fg);
  transition: opacity 0.15s;
}
.ld-exam-button-next:hover { opacity: 0.85; }

/* Submit button */
.ld-exam-button-submit {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 0.875rem 1.5rem;
  border-radius: 1rem; cursor: pointer;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 0.875rem; font-weight: 600;
  background-color: var(--card); color: var(--fg);
  border: 1px solid oklch(0.86 0.004 250 / 0.60);
  transition: border-color 0.15s;
}
.ld-exam-button-submit:hover { border-color: var(--sec); }

/* Hide footer when not yet started or when graded */
.ld-exam-not-graded .ld-exam-footer { display: none; }
.ld-exam-graded      .ld-exam-footer { display: none; }

/* ── RESULT MESSAGE ───────────────────────────────────────────────────────── */
.ld-exam-result-message {
  text-align: center;
  padding: 2rem 1rem 1.5rem;
}
.ld-exam-result-message > p {
  font-size: 0.9375rem; color: var(--muted-fg);
  line-height: 1.6; margin-bottom: 0.5rem;
}

/* Heading inside result message */
.ld-exam-result-message h2 {
  display: block;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.875rem; font-weight: 700;
  letter-spacing: -0.02em; color: var(--fg);
  margin: 0 0 0.5rem;
  line-height: 1.2;
}
.ld-exam-graded-failed .ld-exam-result-message h2 {
  color: var(--destruct);
}

/* Score display */
.ld-exam-result-message .exam-score {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 3.5rem; font-weight: 700; line-height: 1;
  color: var(--sec); display: block;
  margin: 0.5rem 0 0.25rem;
}

/* Result icon */
.ld-exam-result-icon {
  width: 96px; height: 96px; border-radius: 50%;
  margin: 0 auto 1.25rem; display: flex;
  align-items: center; justify-content: center;
  box-shadow: 0 12px 32px -12px oklch(0.20 0.04 255 / 0.40);
}
.ld-exam-graded-passed .ld-exam-result-icon {
  background: linear-gradient(135deg, var(--primary), var(--sec));
  color: var(--primary-fg);
}
.ld-exam-graded-failed .ld-exam-result-icon {
  background-color: oklch(0.58 0.21 27 / 0.12);
  border: 1px solid oklch(0.58 0.21 27 / 0.20);
  color: var(--destruct);
}

/* Result CTA button */
.result-button { margin-top: 1.5rem; }
.ld-exam-result-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 0.875rem 2rem; border-radius: 1rem;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 0.875rem; font-weight: 600;
  background: linear-gradient(135deg, var(--primary), var(--sec));
  color: var(--primary-fg); text-decoration: none;
  box-shadow: 0 12px 32px -12px oklch(0.20 0.04 255 / 0.40);
  transition: opacity 0.15s, transform 0.15s;
}
.ld-exam-result-button:hover { opacity: 0.90; transform: translateY(-1px); }

/* ── GRADED QUESTION COUNTER CHIP ─────────────────────────────────────────── */
.ld-exam-graded .ld-exam-question-title::after {
  content: attr(data-question-number);
  display: inline-block; margin-left: 0.5rem;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 0.6875rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em;
  padding: 2px 8px; border-radius: 9999px;
  vertical-align: middle;
}
.ld-exam-question-correct .ld-exam-question-title::after {
  background-color: oklch(0.62 0.15 155 / 0.20);
  color: var(--success);
  content: '✓ Correct';
}
.ld-exam-question-incorrect .ld-exam-question-title::after {
  background-color: oklch(0.58 0.21 27 / 0.12);
  color: var(--destruct);
  content: '✗ Incorrect';
}