.quiz-bank {
  --quiz-primary: var(--gov-blue, #0048ff);
  --quiz-primary-dark: var(--gov-blue-dark, #0037cc);
  --quiz-primary-soft: var(--gov-blue-soft, #e8eef5);

  --quiz-green: var(--gov-green, #0f5d2e);
  --quiz-red: #c62828;

  --quiz-green-soft: #e8f5ec;
  --quiz-red-soft: #fff0f0;

  --quiz-bg: var(--bg, #fff);
  --quiz-paper: var(--paper, #fff);
  --quiz-ink: var(--ink, #1e293b);
  --quiz-muted: var(--ink-light, #64748b);
  --quiz-line: var(--line, #e2e8f0);

  --quiz-font: var(--font, "Tajawal", system-ui, sans-serif);
  --quiz-font-sm: var(--fs-sm, 0.9rem);
  --quiz-font-md: var(--fs-md, 1rem);
  --quiz-font-lg: var(--fs-lg, 1.25rem);
  --quiz-font-xl: var(--fs-xl, 1.6rem);

  --quiz-line-height: var(--lh-ar, 1.9);
  --quiz-radius: var(--r, 10px);
  --quiz-radius-lg: var(--r-lg, 16px);

  --quiz-shadow: var(--shadow, 0 4px 16px rgb(11 61 107 / 10%));
  --quiz-shadow-hover: var(
    --shadow-hover,
    0 12px 32px rgb(11 61 107 / 14%)
  );

  --quiz-speed: var(--speed, 0.2s);

  direction: rtl;
  width: 100%;
  max-width: 100%;
  margin-inline: auto;

  color: var(--quiz-ink);
  background: transparent;

  font-family: var(--quiz-font);
  font-size: var(--quiz-font-md);
  line-height: var(--quiz-line-height);

  box-sizing: border-box;
}


/* =====================================================
   2. BOX SIZING
===================================================== */

.quiz-bank *,
.quiz-bank *::before,
.quiz-bank *::after {
  box-sizing: border-box;
}


/* =====================================================
   3. QUESTION VISIBILITY
===================================================== */

.quiz-bank .section {
  display: block;
  position: relative;

  width: 100%;
  margin-block: 20px;
  padding: clamp(16px, 3vw, 28px);

  background: var(--site-footer-color);
  border: 1px solid var(--quiz-line);
  border-radius: var(--quiz-radius-lg);
  animation: quiz-appear 0.3s ease both;
}

/* إخفاء الأسئلة غير النشطة */

.quiz-bank .section.hide {
  display: none !important;
}


/* =====================================================
   4. QUESTION ANIMATION
===================================================== */

@keyframes quiz-appear {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* =====================================================
   5. QUESTION TITLE
===================================================== */

.quiz-bank .question {
  margin: 0 0 22px;
  padding: 0;

  color: var(--quiz-ink);
  line-height: var(--quiz-line-height);
    text-align: center;
  overflow-wrap: anywhere;
}


/* =====================================================
   6. ANSWER GROUPS
===================================================== */

.quiz-bank .correct-responses,
.quiz-bank .wrong-response {
  display: grid;
  grid-template-columns: minmax(0, 1fr);

  gap: 12px;
  margin-block: 14px;
  padding: 0;
}


/* =====================================================
   7. ANSWER OPTIONS
===================================================== */

.quiz-bank .response {
  position: relative;
box-shadow: var(--box-shadow-2);
  display: flex;
  align-items: center;
  gap: 12px;

  width: 100%;
  min-height: 54px;
  margin: 0;
  padding: 12px 16px;

  color: var(--quiz-ink);
  background: var(--quiz-paper);

  border: 1px solid var(--quiz-line);
  border-radius: var(--quiz-radius);

  font-family: var(--quiz-font);
  font-size: var(--quiz-font-md);
  font-weight: 500;
  line-height: var(--quiz-line-height);

  cursor: pointer;
  overflow-wrap: anywhere;

  transition:
    background var(--quiz-speed) ease,
    border-color var(--quiz-speed) ease,
    color var(--quiz-speed) ease,
    box-shadow var(--quiz-speed) ease,
    transform var(--quiz-speed) ease;
}


/* مؤشر الاختيار */

.quiz-bank .response::before {
  content: "";

  display: inline-flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 19px;
  width: 19px;
  height: 19px;

  color: #fff;
  background: var(--quiz-paper);

  border: 2px solid #cbd5e1;
  border-radius: 50%;

  font-size: 12px;
  font-weight: 900;

  transition:
    background var(--quiz-speed),
    border-color var(--quiz-speed),
    box-shadow var(--quiz-speed);
}


/* تأثير المرور على الإجابة */

.quiz-bank .section:not(.quiz-answered) .response:hover {
  background: var(--quiz-primary-soft);
  border-color: var(--gov-blue);
  box-shadow: 0 3px 10px rgb(0 72 255 / 7%);
}


/* تأثير الضغط */

.quiz-bank .section:not(.quiz-answered) .response:active {
  transform: scale(0.995);
}


/* دعم التركيز بلوحة المفاتيح */

.quiz-bank .response:focus-visible {
  outline: 3px solid rgb(0 72 255 / 30%);
  outline-offset: 3px;
}


/* =====================================================
   8. MULTIPLE ANSWERS
===================================================== */

/* مربعات بدل الدوائر في الأسئلة متعددة الإجابات */

.quiz-bank .section[data-multiple="true"] .response::before {
  border-radius: 5px;
}


/* الاختيار المحدد */

.quiz-bank .section[data-multiple="true"] .response.selected {
  color: var(--quiz-primary-dark);
  background: var(--quiz-primary-soft);
  border-color: var(--gov-blue);
}


/* مؤشر الإجابة المحددة */

.quiz-bank .section[data-multiple="true"] .response.selected::before {
  background: var(--gov-blue);
  border-color: var(--gov-blue);
  box-shadow: inset 0 0 0 4px var(--quiz-paper);
}


/* =====================================================
   9. CORRECT ANSWERS
   JavaScript: .correct-responses.true
===================================================== */

.quiz-bank .correct-responses.true .response {
  color: var(--quiz-green);
  background: var(--quiz-green-soft);
  border-color: #a7d9b5;
}


/* علامة الصح */

.quiz-bank .correct-responses.true .response::before {
  content: "✓";

  color: #fff;
  background: var(--quiz-green);
  border-color: var(--quiz-green);
}


/* الإجابة الصحيحة بعد التصحيح */

.quiz-bank .response.answer-correct {
  color: var(--quiz-green) !important;
  background: var(--quiz-green-soft) !important;
  border-color: var(--quiz-green) !important;
}


/* =====================================================
   10. WRONG ANSWERS
   JavaScript: .wrong-response.false
===================================================== */

.quiz-bank .wrong-response.false .response {
  background: var(--quiz-red-soft);
  border-color: #f1c0c0;
}


/* الإجابة الخاطئة التي اختارها المستخدم */

.quiz-bank .response.answer-wrong {
  color: var(--quiz-red) !important;
  background: var(--quiz-red-soft) !important;
  border-color: var(--quiz-red) !important;
}


/* علامة الخطأ */

.quiz-bank .response.answer-wrong::before {
  content: "×";

  color: #fff;
  background: var(--quiz-red);
  border-color: var(--quiz-red);

  font-size: 15px;
}


/* =====================================================
   11. CORRECTION
   JavaScript: .correction.active
===================================================== */

.quiz-bank .correction {
  display: none;

  width: 100%;
  margin-top: 22px;
  padding: 16px 18px;

  color: var(--quiz-ink);
  background: var(--quiz-primary-soft);

  border: 1px solid var(--quiz-line);
  border-right: 4px solid var(--gov-blue);
  border-radius: var(--quiz-radius);

  font-family: var(--quiz-font);
  font-size: var(--quiz-font-md);
  font-weight: 500;
  line-height: var(--quiz-line-height);

  overflow-wrap: anywhere;
}


/* إظهار التصحيح */

.quiz-bank .correction.active {
  display: block;
  animation: quiz-appear 0.3s ease both;
}


/* عنوان التصحيح */

.quiz-bank .correction.active::before {
  content: "التصحيح";

  display: block;
  margin-bottom: 6px;

  color: var(--quiz-primary-dark);
  font-size: var(--quiz-font-lg);
  font-weight: 800;
}


/* =====================================================
   12. STATUS BAR
===================================================== */

.quiz-bank .statusbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;

  gap: 16px;
  width: 100%;
  margin-bottom: 20px;
  padding: 16px;

    background: var(--ink);
  border: 1px solid var(--quiz-line);
  border-radius: var(--quiz-radius-lg);

  box-shadow: var(--quiz-shadow);
}


/* عدد الأسئلة */

.quiz-bank .status-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  color: var(--bg);
  font-size: var(--quiz-font-md);
  font-weight: 800;
  white-space: nowrap;
}


/* أيقونة بنك الأسئلة */

.quiz-bank .status-chip svg {
  display: block;

  flex: 0 0 22px;
  width: 22px;
  height: 22px;

  color: var(--bg);
}


/* =====================================================
   13. PROGRESS BAR
===================================================== */

.quiz-bank .progress-wrap {
  display: flex;
  align-items: center;
  gap: 12px;

  flex: 1 1 180px;
  min-width: 0;
}


/* رقم السؤال */

.quiz-bank .progress-label {
  flex: 0 0 auto;

     color: var(--bg);
  font-size: var(--quiz-font-sm);
  font-weight: 800;

  direction: ltr;
  white-space: nowrap;
}


/* المسار */

.quiz-bank .progress-track {
  position: relative;

  flex: 1 1 auto;
  min-width: 50px;
  height: 10px;

  overflow: hidden;
    background: var(--quiz-primary-soft);
  border-radius: 999px;
}


/* الجزء المتقدم */

.quiz-bank .progress-fill {
  display: block;

  width: 0;
  height: 100%;

    background: var(--site-footer-color);
  border-radius: inherit;

  transition: width 0.35s ease;
}


/* =====================================================
   14. QUIZ CONTROLS
===================================================== */

.quiz-bank .quiz-controls {

    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    width: 100%;
    margin-top: 22px;
    align-content: center;
}


/* =====================================================
   15. QUIZ BUTTON
   Attention animation
===================================================== */

.quiz-bank .quiz-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);

  min-width: 150px;
  min-height: 48px;
  padding: 10px 22px;

  color: var(--paper);
  background: var(--gov-blue);

  border: 1px solid var(--gov-blue);
  border-radius: var(--r);

  box-shadow: var(--shadow);

  font-family: var(--font);
  font-size: var(--fs-md);
  font-weight: 800;
  line-height: var(--lh-ar);
  text-align: center;

  cursor: pointer;

  transform-origin: center;
  animation: quiz-btn-attention 2s ease-in-out infinite;

  transition:
    background var(--speed),
    border-color var(--speed),
    box-shadow var(--speed);

  -webkit-tap-highlight-color: transparent;
}


/* نبض الزر */

@keyframes quiz-btn-attention {
  0%, 100% {
    transform: scale(1);
    box-shadow: var(--shadow);
  }

  50% {
    transform: scale(1.045);
    box-shadow: var(--shadow-hover);
  }
}


/* المرور بالماوس */

.quiz-bank .quiz-btn:hover:not(:disabled) {
  animation-play-state: paused;

  color: var(--paper);
  background: var(--btn-hover-bg);
  border-color: var(--gov-blue-dark);

  box-shadow: var(--shadow-hover);
  transform: scale(1.02);
}


/* الضغط */

.quiz-bank .quiz-btn:active:not(:disabled) {
  animation: none;
  transform: scale(0.97);
  box-shadow: var(--shadow);
}


/* التركيز */

.quiz-bank .quiz-btn:focus-visible {
  outline: 3px solid var(--gov-blue-soft);
  outline-offset: 3px;
}


/* الزر المعطل */

.quiz-bank .quiz-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;

  animation: none;
  box-shadow: none;
  transform: none;
}


/* =====================================================
   16. FINAL RESULT
===================================================== */

.quiz-bank .quiz-result {
  width: 100%;
  margin-top: 24px;
  padding: clamp(20px, 4vw, 32px);

  color: var(--quiz-ink);
  background: var(--quiz-primary-soft);

  border: 1px solid var(--quiz-line);
  border-radius: var(--quiz-radius-lg);

  text-align: center;
  box-shadow: var(--quiz-shadow);

  animation: quiz-appear 0.35s ease both;
}


/* احترام خاصية hidden */

.quiz-bank .quiz-result[hidden] {
  display: none !important;
}


/* عنوان النتيجة */

.quiz-bank .quiz-result h3 {
  margin: 0 0 12px;

  color: var(--quiz-primary-dark);
  font-family: var(--font);
  font-size: var(--fs-xl);
  font-weight: 800;
  line-height: var(--lh-ar);
}


/* نص النتيجة */

.quiz-bank .quiz-result p {
  margin: 8px 0 20px;

  color: var(--quiz-ink);
  font-size: var(--fs-md);
  line-height: var(--lh-ar);
}


/* زر إعادة الاختبار */

.quiz-bank .quiz-result .quiz-btn {
  margin-inline: auto;
}


/* =====================================================
   17. RESPONSIVE — TABLET
===================================================== */

@media (max-width: 768px) {
  .quiz-bank .section {
    padding: 20px;
  }

  .quiz-bank .statusbar {
    gap: 14px;
  }

  .quiz-bank .question {
    font-size: var(--fs-lg);
  }
}


/* =====================================================
   18. RESPONSIVE — MOBILE
===================================================== */

@media (max-width: 600px) {
  .quiz-bank .section {
    margin-block: 12px;
    padding: 16px;

    border-radius: var(--r);
  }

  .quiz-bank .question {
    margin-bottom: 18px;
    font-size: var(--fs-lg);
  }

  .quiz-bank .response {
    gap: 10px;
    min-height: 50px;
    padding: 12px;

    font-size: var(--fs-md);
  }

  .quiz-bank .statusbar {
    align-items: stretch;
    flex-direction: column;
    gap: 14px;

    padding: 14px;
  }

  .quiz-bank .status-chip {
    align-self: flex-start;
  }

  .quiz-bank .progress-wrap {
    flex: 1 1 auto;
    width: 100%;
  }

  .quiz-bank .quiz-controls {
    flex-direction: column;
    align-items: stretch;
  }

  .quiz-bank .quiz-btn {
    width: 100%;
    min-width: 0;
    min-height: 48px;
  }

  .quiz-bank .correction {
    padding: 14px;
  }

  .quiz-bank .quiz-result {
    padding: 20px 14px;
  }
}


/* =====================================================
   19. ACCESSIBILITY — REDUCED MOTION
===================================================== */

@media (prefers-reduced-motion: reduce) {
  .quiz-bank .section,
  .quiz-bank .correction,
  .quiz-bank .quiz-result {
    animation: none !important;
  }

  .quiz-bank .quiz-btn {
    animation: none !important;
    transition: none !important;
  }

  .quiz-bank .progress-fill,
  .quiz-bank .response {
    transition: none !important;
  }
}