/* Stars Driving School — regular quiz visual theme only.
   No events, IDs, timer, protected-question API or question semantics changed. */
body.stars-quiz-theme {
  --sq-navy: #243448;
  --sq-deep: #151c29;
  --sq-gold: #f2bb32;
  --sq-ink: #1c2c40;
  --sq-muted: #64748b;
  --sq-line: #e4eaf2;
  --sq-paper: #fff;
  background: #f4f6fa;
  color: var(--sq-ink);
  font-family: 'Cairo', 'Tajawal', Arial, sans-serif;
  overflow-x: hidden;
}
body.stars-quiz-theme .page-title,
body.stars-quiz-theme .page-title * {
  box-sizing: border-box;
}
/* The fixed navbar already provides a 76px header; remove obsolete spacer BRs. */
body.stars-quiz-theme > br { display: none; }
body.stars-quiz-theme .page-title {
  position: relative;
  display: flex !important;
  flex-direction: column !important;
  align-items: center;
  justify-content: center;
  gap: 11px;
  min-height: 226px;
  height: auto !important;
  margin: 76px 0 0;
  padding: 39px 20px 43px;
  overflow: hidden;
  border-bottom: 4px solid var(--sq-gold);
  background: linear-gradient(115deg, rgba(21,28,41,.98), rgba(36,52,72,.96)) !important;
  text-align: center;
}
body.stars-quiz-theme .page-title::after {
  content: '';
  position: absolute;
  width: 360px;
  height: 360px;
  left: -130px;
  top: -225px;
  border: 1px solid rgba(242,187,50,.15);
  border-radius: 50%;
  pointer-events: none;
}
body.stars-quiz-theme .page-title h1 {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.55 !important;
  font-family: 'Cairo', 'Tajawal', Arial, sans-serif !important;
  text-align: center !important;
  text-shadow: none;
}
body.stars-quiz-theme .page-title h1:first-of-type {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 5px 18px !important;
  font-size: 14px !important;
  font-weight: 800;
  border: 1px solid rgba(242,187,50,.45);
  border-radius: 100px;
  background: rgba(242,187,50,.12);
  color: #ffd779 !important;
}
body.stars-quiz-theme .page-title h1:last-of-type {
  max-width: 94%;
  font-size: clamp(24px, 3vw, 36px) !important;
  font-weight: 900 !important;
  color: #fff !important;
  overflow-wrap: anywhere;
}
/* Category models navigation; preserve the original selected model identifier. */
body.stars-quiz-theme .other-question-groups {
  width: min(1210px, calc(100% - 40px));
  margin: 26px auto 0;
}
body.stars-quiz-theme .pagination-container {
  display: block;
  margin: 0;
  padding: 18px 20px 19px;
  border: 1px solid var(--sq-line);
  border-radius: 17px;
  background: #fff;
  box-shadow: 0 7px 25px rgba(21,28,41,.045);
}
body.stars-quiz-theme .pagination-container::before {
  content: 'اختر نموذج التؤوريا';
  display: block;
  margin: 0 0 13px;
  font: 800 13px/1.7 'Cairo', 'Tajawal', sans-serif;
  color: #40536c;
  text-align: right;
}
body.stars-quiz-theme .pagination-container .pagination {
  display: flex !important;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  margin: 0 !important;
  width: auto;
}
body.stars-quiz-theme .pagination-container .page-item {
  float: none;
  width: auto;
  margin: 0;
  flex: 0 0 auto;
}
body.stars-quiz-theme .pagination-container .page-link {
  display: grid;
  place-items: center;
  width: 42px;
  min-width: 42px;
  height: 42px;
  padding: 0 !important;
  border: 1px solid #dfe6ee !important;
  border-radius: 11px !important;
  box-shadow: none !important;
  font: 800 14px/1 'Cairo','Tajawal',sans-serif;
  transition: background-color .15s ease, border-color .15s ease;
}
body.stars-quiz-theme .pagination-container .page-link[style*="gray"] {
  color: #34465c !important;
  background: #f4f7fb !important;
}
body.stars-quiz-theme .pagination-container .page-link[style*="gray"]:hover,
body.stars-quiz-theme .pagination-container .page-link[style*="gray"]:focus-visible {
  background: #fff3ce !important;
  border-color: #e4bd63 !important;
}
body.stars-quiz-theme .pagination-container .page-link[style*="#ffb400"] {
  color: #172339 !important;
  background: var(--sq-gold) !important;
  border-color: var(--sq-gold) !important;
  font-weight: 900;
}
/* Exam content and question presentation. */
body.stars-quiz-theme .container-lg.mt-5 {
  width: min(1230px, calc(100% - 40px));
  max-width: none;
  padding: 0 12px;
  margin-top: 26px !important;
  margin-bottom: 55px;
}
body.stars-quiz-theme .container-lg.mt-5 > .row {
  margin-left: -10px;
  margin-right: -10px;
  align-items: flex-start;
}
body.stars-quiz-theme .container-lg.mt-5 > .row > [class*="col-"] {
  min-width: 0;
  padding-left: 10px;
  padding-right: 10px;
}
body.stars-quiz-theme .card.quiz-content {
  overflow: hidden;
  border: 1px solid var(--sq-line);
  border-radius: 18px;
  background: var(--sq-paper);
  box-shadow: 0 10px 32px rgba(21,28,41,.075);
}
body.stars-quiz-theme .quiz-content .quiz-title {
  margin: 0;
  padding: 0;
  border-bottom: 1px solid #e6ebf2;
  background: #fafbfe;
}
body.stars-quiz-theme .quiz-content .quiz-title-text {
  margin: 0;
  padding: 28px 25px;
  place-items: start stretch;
  min-height: 95px;
  border: 0;
  border-right: 4px solid var(--sq-gold);
  border-radius: 0;
  background: linear-gradient(115deg,#fffdf7,#f8fafe);
  font: 800 clamp(17px,1.55vw,21px)/1.9 'Cairo','Tajawal',sans-serif;
  color: var(--sq-ink);
  text-align: right;
}
body.stars-quiz-theme .quiz-content .quiz-title-text .div-text,
body.stars-quiz-theme .quiz-content .quiz-answers .div-text {
  max-width: 100%;
  line-height: 1.85;
  overflow-wrap: anywhere;
}
body.stars-quiz-theme .quiz-content .mk-secure-question-media img,
body.stars-quiz-theme .quiz-content .quiz-answers img {
  max-width: 100% !important;
  height: auto;
  border-radius: 10px;
}
body.stars-quiz-theme .quiz-content .quiz-answer-group.card {
  margin: 0;
  padding: 18px 20px 22px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: #fff;
}
body.stars-quiz-theme .quiz-content table.quiz-answers {
  width: 100%;
  margin: 0;
  border-collapse: separate;
  border-spacing: 0 10px;
}
body.stars-quiz-theme .quiz-content .quiz-answers tr {
  background: #f7f9fc;
  transition: background-color .14s ease;
}
body.stars-quiz-theme .quiz-content .quiz-answers tr:nth-child(even) { background: #f7f9fc; }
body.stars-quiz-theme .quiz-content .quiz-answers tr td {
  padding: 13px 14px;
  border-top: 1px solid #e3e8f0;
  border-bottom: 1px solid #e3e8f0;
  border-left: 0;
  border-right: 0;
  color: #2a3c52;
  font: 700 15px/1.85 'Cairo','Tajawal',sans-serif;
  text-align: right;
  vertical-align: middle;
}
body.stars-quiz-theme .quiz-content .quiz-answers tr td:first-child {
  width: 55px !important;
  font-weight: 900;
  color: #a77a19;
  text-align: center;
  background: #f5ecd3;
  border-radius: 0 11px 11px 0;
  border-right: 1px solid #e3e8f0;
}
body.stars-quiz-theme .quiz-content .quiz-answers tr td:last-child {
  border-left: 1px solid #e3e8f0;
  border-radius: 11px 0 0 11px;
}
body.stars-quiz-theme .quiz-content .quiz-answers tr:hover,
body.stars-quiz-theme .quiz-content .quiz-answers tr:hover:nth-child(even) {
  background: #fff4d5;
}
body.stars-quiz-theme .quiz-content .quiz-answers tr:hover td { color: #26394e; }
/* Checked / correct / wrong keep unmistakable states. */
body.stars-quiz-theme .quiz-content .quiz-answers tr.answer-answered,
body.stars-quiz-theme .quiz-content .quiz-answers tr.answer-answered:nth-child(even) {
  background: #fff0bd !important;
}
body.stars-quiz-theme .quiz-content .quiz-answers tr.answer-answered td,
body.stars-quiz-theme .quiz-content .quiz-answers tr.answer-answered p {
  color: #273448 !important;
}
body.stars-quiz-theme .quiz-content .quiz-answers tr.answer-correct,
body.stars-quiz-theme .quiz-content .quiz-answers tr.answer-correct:nth-child(even) {
  background: #ddf8e9 !important;
}
body.stars-quiz-theme .quiz-content .quiz-answers tr.answer-wrong,
body.stars-quiz-theme .quiz-content .quiz-answers tr.answer-wrong:nth-child(even) {
  background: #ffe0df !important;
}
body.stars-quiz-theme .quiz-content .quiz-answers tr.answer-correct td { color: #145832 !important; }
body.stars-quiz-theme .quiz-content .quiz-answers tr.answer-wrong td { color: #842325 !important; }
body.stars-quiz-theme .quiz-content .quiz-answers tr.answer-correct:hover,
body.stars-quiz-theme .quiz-content .quiz-answers tr.answer-wrong:hover { filter: brightness(.985); }
/* Preserve LTR English questions despite old universal direction:rtl rules. */
body.stars-quiz-theme .quiz-content [dir="ltr"],
body.stars-quiz-theme .quiz-content [dir="ltr"] * { direction: ltr !important; }
body.stars-quiz-theme .quiz-content .quiz-title-text[dir="ltr"],
body.stars-quiz-theme .quiz-content .quiz-title-text[dir="ltr"] .div-text,
body.stars-quiz-theme .quiz-content .quiz-answers td.quiz-answer[dir="ltr"] { text-align: left !important; }
/* Answer actions remain the same clickable DOM nodes. */
/* Remove the obsolete line break between the exam card and the action card.
   A compact gap keeps the original buttons in normal document flow. */
body.stars-quiz-theme .card.quiz-content + br { display: none !important; }
body.stars-quiz-theme .quiz-nav {
  display: flex !important;
  align-items: stretch;
  justify-content: space-between;
  gap: 12px;
  margin-top: 9px;
  padding: 14px;
  border: 1px solid #e6ebf2;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 6px 20px rgba(21,28,41,.04);
}
body.stars-quiz-theme .quiz-nav > .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 47px;
  margin: 0 !important;
  padding: 11px 15px;
  border: 0;
  border-radius: 10px;
  box-shadow: none;
  font: 900 14px/1.55 'Cairo','Tajawal',sans-serif;
  white-space: normal;
  text-align: center;
  cursor: pointer;
}
body.stars-quiz-theme .quiz-nav > .quiz-prev {
  background: #e9eef5;
  color: #314257;
}
body.stars-quiz-theme .quiz-nav > .quiz-prev:hover { background: #dce4ee; }
body.stars-quiz-theme .quiz-nav > .CheckForCurrAns {
  background: #f2bb32;
  color: #1c2939;
}
body.stars-quiz-theme .quiz-nav > .CheckForCurrAns:hover { background: #ffd16a; }
body.stars-quiz-theme .quiz-nav > .quiz-next {
  background: #243448;
  color: #fff;
}
body.stars-quiz-theme .quiz-nav > .quiz-next:hover { background: #36516f; }
body.stars-quiz-theme .quiz-nav > .quiz-prev.disabled,
body.stars-quiz-theme .quiz-nav > .CheckForCurrAns.disabled {
  opacity: .48;
  cursor: not-allowed;
}
/* Timer and progress cards; JS uses exact .progress-text, .timer and .switch inputs. */
body.stars-quiz-theme .progress-zone {
  padding: 21px 20px;
  border: 1px solid var(--sq-line);
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 7px 25px rgba(21,28,41,.055);
  font: 700 14px/1.7 'Cairo','Tajawal',sans-serif;
}
body.stars-quiz-theme .progress-zone > .d-flex { align-items: center; }
body.stars-quiz-theme .progress-zone .progress-text {
  font-weight: 900;
  color: #bd8711;
}
body.stars-quiz-theme .progress-zone .progress {
  height: 11px;
  margin-top: 12px;
  border-radius: 99px;
  background: #e9edf4;
  overflow: hidden;
}
body.stars-quiz-theme .progress-zone .progress-bar {
  background: linear-gradient(90deg,#bd8421,#f2bb32);
  border-radius: 99px;
}
body.stars-quiz-theme .progress-zone hr {
  margin: 18px 0;
  border-top: 1px solid #e8ecf2;
}
body.stars-quiz-theme .progress-zone .timer {
  display: inline-block;
  min-width: 48px;
  font-size: 16px;
  font-weight: 900;
  color: var(--sq-deep);
}
body.stars-quiz-theme .progress-zone .fa-clock,
body.stars-quiz-theme .progress-zone .fas.fa-clock { color: #c18e20; }
body.stars-quiz-theme .progress-zone .switch { margin-bottom: 0; }
body.stars-quiz-theme .quiz-progress.col-md-3 {
  min-width: 0;
}
body.stars-quiz-theme .quiz-block-list {
  display: grid;
  /* Grid items 1, 2, 3... flow visually from left to right. */
  direction: ltr !important;
  grid-template-columns: repeat(5,minmax(0,1fr));
  gap: 9px;
  margin-top: 14px;
  padding: 18px 14px;
  border: 1px solid var(--sq-line);
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 7px 25px rgba(21,28,41,.04);
}
body.stars-quiz-theme .quiz-block-list .quiz-block {
  display: grid;
  place-items: center;
  float: none !important;
  width: auto !important;
  min-width: 0;
  min-height: 41px;
  padding: 7px 2px;
  border: 1px solid #dce4ee;
  border-radius: 9px;
  background: #f3f6fa;
  color: #40516a;
  text-align: center;
  font: 900 13px/1.3 'Cairo','Tajawal',sans-serif;
  transition: background-color .15s ease;
}
body.stars-quiz-theme .quiz-block-list .quiz-block:hover { background: #fff1c5; border-color: #f2bb32; color: #273448; }
body.stars-quiz-theme .quiz-block-list .quiz-block.quiz-seen { background: #e7edf5; color: #38516b; }
body.stars-quiz-theme .quiz-block-list .quiz-block.quiz-answered { background: #fbe5a0; border-color: #e3b44b; color: #26384e; }
body.stars-quiz-theme .quiz-block-list .quiz-block.quiz-success { background: #d5f5e0; border-color: #7cd7a3; color: #176337; }
body.stars-quiz-theme .quiz-block-list .quiz-block.quiz-fail { background: #ffe2e1; border-color: #f6a19e; color: #942f34; }
/* The original result/unanswered modal logic and Bootstrap behavior remain untouched. */
body.stars-quiz-theme #resultModal .modal-content,
body.stars-quiz-theme #unansweredModal .modal-content {
  overflow: hidden;
  border: 1px solid #ece1c4;
  border-radius: 18px;
  box-shadow: 0 18px 45px rgba(14,27,43,.2);
  font-family: 'Cairo', 'Tajawal', sans-serif;
}
body.stars-quiz-theme #resultModal .modal-footer,
body.stars-quiz-theme #unansweredModal .modal-footer { background: #f8fafc; }
body.stars-quiz-theme #resultModal .btn-continue,
body.stars-quiz-theme #unansweredModal .btn-success { border: 0; background: #243448; color: #fff; }
body.stars-quiz-theme #resultModal .btn-continue:hover,
body.stars-quiz-theme #unansweredModal .btn-success:hover { background: #38536f; }
body.stars-quiz-theme #unansweredModal .modal-title { color: #b98a22; }
@media (max-width: 991.98px) {
  body.stars-quiz-theme .container-lg.mt-5 { width: calc(100% - 28px); padding: 0 10px; }
  body.stars-quiz-theme .other-question-groups { width: calc(100% - 28px); }
  body.stars-quiz-theme .quiz-block-list { grid-template-columns: repeat(8,minmax(0,1fr)); }
}
@media (max-width: 767.98px) {
  body.stars-quiz-theme .page-title { min-height: 183px; padding: 33px 12px; }
  body.stars-quiz-theme .page-title h1:last-of-type { font-size: 22px !important; }
  body.stars-quiz-theme .pagination-container { padding: 16px 14px; }
  body.stars-quiz-theme .pagination-container .page-link { width: 38px; min-width: 38px; height: 38px; }
  body.stars-quiz-theme .container-lg.mt-5 { margin-top: 19px !important; }
  body.stars-quiz-theme .quiz-content > .progress-zone { width: 100% !important; margin-bottom: 16px; }
  body.stars-quiz-theme .quiz-content .quiz-title-text { padding: 20px 16px; min-height: 76px; font-size: 16px; }
  body.stars-quiz-theme .quiz-content .quiz-answer-group.card { padding: 12px 11px 15px; }
  body.stars-quiz-theme .quiz-content .quiz-answers tr td { padding: 10px 9px; font-size: 13px; }
  body.stars-quiz-theme .quiz-nav { gap: 7px; margin-top: 8px; padding: 9px; }
  body.stars-quiz-theme .quiz-nav > .btn { font-size: 12px; min-height: 44px; padding: 9px 7px; }
  body.stars-quiz-theme .quiz-progress.col-md-3 { margin-top: 8px; }
  body.stars-quiz-theme .quiz-block-list { grid-template-columns: repeat(6,minmax(0,1fr)); gap: 7px; }
  body.stars-quiz-theme .quiz-block-list .quiz-block { min-height: 39px; }
}
@media (max-width: 385px) {
  body.stars-quiz-theme .quiz-nav > .btn { font-size: 11px; }
  body.stars-quiz-theme .quiz-block-list { grid-template-columns: repeat(5,minmax(0,1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  body.stars-quiz-theme .quiz-block,
  body.stars-quiz-theme .quiz-nav > .btn,
  body.stars-quiz-theme .pagination-container .page-link { transition: none; }
}

/* ===============================================
   Mobile: compact progress card + conditional sticky ORIGINAL controls.
   Does not hide questions, alter buttons, or affect PC layouts.
   =============================================== */
@media (max-width: 767.98px) {
  /* Mobile progress is a short status panel instead of a tall card. */
  body.stars-quiz-theme .quiz-content > .progress-zone {
    padding: 10px 14px !important;
    margin: 0 0 9px !important;
    border-radius: 13px !important;
  }
  body.stars-quiz-theme .quiz-content > .progress-zone > .d-flex {
    min-height: 26px;
    align-items: center;
  }
  body.stars-quiz-theme .quiz-content > .progress-zone p {
    margin: 0 !important;
    font-size: 12px;
    line-height: 1.55;
  }
  body.stars-quiz-theme .quiz-content > .progress-zone .progress {
    height: 7px;
    margin: 5px 0 0;
  }
  body.stars-quiz-theme .quiz-content > .progress-zone hr {
    margin: 7px 0;
  }
  body.stars-quiz-theme .quiz-content > .progress-zone .timer {
    min-width: 42px;
    font-size: 14px;
  }
  body.stars-quiz-theme .quiz-content > .progress-zone .pl-2 {
    padding-left: 7px !important;
  }
  /* The real existing buttons stick while the question is on-screen.
     Their own event listeners, disabled states, and semantics are unchanged. */
  body.stars-quiz-theme.stars-quiz-controls-active .quiz-nav {
    position: sticky !important;
    bottom: max(8px, env(safe-area-inset-bottom)) !important;
    z-index: 1020 !important;
    box-shadow: 0 9px 30px rgba(21,28,41,.18);
  }
}

/* Mobile progress now sits inside the question card; no external width correction is needed. */

/* Phone only: bring the question-number card close to the exam controls.
   Old HTML has an extra <br> after the controls, followed by two margins.
   Do not change button positioning, functionality, or desktop spacing. */
@media (max-width: 767.98px) {
  body.stars-quiz-theme .quiz-nav + br {
    display: none !important;
  }
  body.stars-quiz-theme .quiz-progress.col-md-3 {
    margin-top: 8px !important;
  }
  body.stars-quiz-theme .quiz-progress.col-md-3 > .quiz-block-list {
    margin-top: 0 !important;
  }
}


/* More than 30 questions: keep the number panel compact and internally
   scrollable, without changing question order or any quiz behavior.
   The PHP templates add this class only when the exam has >30 questions. */
body.stars-quiz-theme .quiz-block-list.stars-question-list-scroll {
  max-height: 330px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  align-content: start;
  scrollbar-width: thin;
  scrollbar-color: #c6a55c #f2f5fa;
}
body.stars-quiz-theme .quiz-block-list.stars-question-list-scroll::-webkit-scrollbar {
  width: 6px;
}
body.stars-quiz-theme .quiz-block-list.stars-question-list-scroll::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background: #c6a55c;
}
body.stars-quiz-theme .quiz-block-list.stars-question-list-scroll:focus-visible {
  outline: 2px solid #c99b2a;
  outline-offset: 2px;
}
/* The responsive grids have different numbers of columns: trim height so
   a 31-question exam scrolls, even on tablets with eight columns. */
@media (min-width: 768px) and (max-width: 991.98px) {
  body.stars-quiz-theme .quiz-block-list.stars-question-list-scroll {
    max-height: 205px;
  }
}
@media (max-width: 767.98px) {
  body.stars-quiz-theme .quiz-block-list.stars-question-list-scroll {
    max-height: 265px;
  }
}
@media (max-width: 385px) {
  body.stars-quiz-theme .quiz-block-list.stars-question-list-scroll {
    max-height: 310px;
  }
}


/* Show the active question number even when its answer state has its own color.
   Scrolling is handled by goToQuestion(), and only in the number panel. */
body.stars-quiz-theme .quiz-block-list .quiz-block.quiz-current {
  border-color: #b88412 !important;
  box-shadow: 0 0 0 2px rgba(242,187,50,.48), inset 0 0 0 1px #b88412 !important;
  position: relative;
  z-index: 1;
}

/* Mobile exam is ONE card: compact status header + current question + answers.
   The progress, timer and auto-next switch are the existing real DOM elements;
   CSS never creates replacements and leaves the desktop sidebar untouched. */
@media (max-width: 767.98px) {
  body.stars-quiz-theme .quiz-content > .progress-zone {
    box-sizing: border-box;
    display: block;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 10px 14px 9px !important;
    border: 0 !important;
    border-bottom: 1px solid #e4eaf2 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: #fafcff !important;
  }
  body.stars-quiz-theme .quiz-content > .progress-zone > .d-flex {
    min-height: 24px;
  }
  body.stars-quiz-theme .quiz-content > .progress-zone .progress {
    margin-top: 5px !important;
  }
  body.stars-quiz-theme .quiz-content > .progress-zone hr {
    margin: 6px 0 !important;
  }
  body.stars-quiz-theme .quiz-content > .quiz-title {
    border-top: 0 !important;
  }
}

/* Mobile: let ORIGINAL previous / check / next buttons fill the whole action
   card instead of retaining their short intrinsic text widths.
   No event handlers or disabled state are affected. Desktop is unchanged. */
@media (max-width: 767.98px) {
  body.stars-quiz-theme .quiz-nav {
    justify-content: stretch !important;
    gap: 7px !important;
  }
  body.stars-quiz-theme .quiz-nav > .quiz-prev,
  body.stars-quiz-theme .quiz-nav > .quiz-next {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    max-width: none !important;
  }
  body.stars-quiz-theme .quiz-nav > .CheckForCurrAns {
    flex: 1.4 1 0 !important;
    min-width: 0 !important;
    max-width: none !important;
  }
}