/* Front-end quiz question */
.jgt-quiz {
  box-sizing: border-box;
  border: 1px solid #3a5a8c;
  border-radius: 10px;
  padding: 18px 20px;
  margin: 20px 0;
  background: #0f1f38;
  color: #eaf1ff;
  font: 15px/1.5 system-ui, sans-serif;
}
.jgt-quiz.jgt-done { border-color: #2f9172; }

/* Fieldset wraps the option group so the radios/checkboxes are announced as one
   named group (fixes VoiceOver toggling). Reset its native chrome. */
.jgt-quiz-fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.jgt-quiz-q { display: block; font-weight: 600; margin-bottom: 6px; padding: 0; }
.jgt-quiz-hint { margin: 0 0 12px; font-size: 13px; opacity: .75; }

.jgt-quiz-opts { list-style: none; margin: 0 0 14px; padding: 0; }
/* The row (li) is the visual box; input + label are explicit siblings so
   VoiceOver has a single, unambiguous activation path. */
.jgt-quiz-opts li {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 0 0 8px;
  padding: 10px 12px;
  border: 1px solid #2b426b;
  border-radius: 8px;
  transition: background .12s, border-color .12s;
}
.jgt-quiz:not(.jgt-done) .jgt-quiz-opts li:hover { background: rgba(255, 255, 255, 0.04); }
.jgt-quiz-opts input { margin-top: 3px; flex: 0 0 auto; }
.jgt-quiz-opts label { flex: 1 1 auto; cursor: pointer; }
.jgt-quiz-opts input:disabled ~ label { opacity: .8; cursor: default; }

/* Post-submit marking */
.jgt-quiz-opts li.jgt-opt-correct { border-color: #2f9172; background: rgba(47, 145, 114, 0.18); }
.jgt-quiz-opts li.jgt-opt-wrong   { border-color: #b3261e; background: rgba(179, 38, 30, 0.18); }
/* Per-option result text — conveys correct/incorrect in words + glyph, never by
   colour alone (WCAG 1.4.1), so it reads for screen-reader and colour-blind users. */
.jgt-quiz-opts .jgt-opt-status { display: block; margin-top: 4px; font-size: 12px; font-weight: 600; }
.jgt-quiz-opts li.jgt-opt-correct .jgt-opt-status { color: #6fe0b8; }
.jgt-quiz-opts li.jgt-opt-wrong   .jgt-opt-status { color: #f2938c; }

/* Screen-reader-only (visually hidden, still announced). */
.jgt-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

.jgt-quiz-submit {
  appearance: none; border: 0; border-radius: 6px;
  padding: 9px 16px;
  background: #3a5a8c; color: #fff;
  font: 500 14px/1 system-ui, sans-serif; cursor: pointer;
}
.jgt-quiz-submit:hover { background: #4a6fa8; }
.jgt-quiz-submit:disabled { background: #2f9172; cursor: default; }

/* Single page-level submit (single_submit mode) */
.jgt-quiz-page-submit { margin: 20px 0; }
.jgt-quiz-submit--page { font-size: 15px; padding: 11px 20px; }

.jgt-quiz-result { margin-top: 12px; font-weight: 600; }
.jgt-quiz-result--good    { color: #6fe0b8; }
.jgt-quiz-result--partial { color: #f0c36d; }
.jgt-quiz-result--bad     { color: #f2938c; }
.jgt-quiz-result--warn    { color: #f0c36d; font-weight: 500; }

/* Page-level running total */
.jgt-quiz-total {
  box-sizing: border-box;
  margin: 20px 0;
  padding: 14px 18px;
  border: 1px solid #4a6fa8;
  border-radius: 10px;
  background: #10233f;
  color: #eaf1ff;
  font: 16px/1.4 system-ui, sans-serif;
}
.jgt-quiz-total strong { font-size: 18px; }
.jgt-quiz-total-sub { opacity: .7; font-size: 13px; }

/* Editor */
.jgt-quiz-editor-card {
  border: 1px dashed #8a93a3;
  border-radius: 10px;
  padding: 16px 18px;
  background: rgba(0, 0, 0, 0.03);
}
.jgt-quiz-editor-card > strong {
  display: block; font-size: 11px; letter-spacing: 1px;
  color: #3a5a8c; margin-bottom: 8px;
}
.jgt-quiz-opt-row {
  display: flex; align-items: flex-end; gap: 12px;
  padding: 8px 0; border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.jgt-quiz-opt-row .jgt-quiz-opt-text { flex: 1 1 auto; }
.jgt-quiz-editor-note { font-size: 12px; opacity: .8; }