/* ─── QUIZ PAGE SHELL ─── */
html body section.quiz-page.quiz-page,
html body .quiz-page.quiz-page,
html body div.quiz-page,
html body article.quiz-page {
  direction: rtl;
}

/* Navigation */
html body section.quiz-page .quiz-navigation,
html body .quiz-page .quiz-navigation,
html body .quiz-navigation[class] {
  margin-bottom: 1.5rem !important;
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
}

html body section.quiz-page .quiz-navigation .go-to,
html body .quiz-page .quiz-navigation a.go-to,
html body .quiz-navigation a.go-to[href] {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  color: var(--c-muted) !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  font-size: 0.95rem !important;
  transition: color 0.2s !important;
}

html body section.quiz-page .quiz-navigation .go-to:hover,
html body .quiz-page .quiz-navigation a.go-to:hover {
  color: var(--c-primary) !important;
}

html body section.quiz-page .quiz-navigation svg,
html body .quiz-navigation svg {
  transform: scaleX(-1) !important;
  width: 20px !important;
  height: 20px !important;
}

/* ─── OUTER CARD ─── */
html body section.quiz-page .quiz-single-wrap,
html body .quiz-page .quiz-single-wrap,
html body div.quiz-single-wrap[class] {
  background-color: var(--c-surface) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: var(--shadow-lg) !important;
  overflow: hidden !important;
  border: 1px solid var(--border-color) !important;
  max-width: 800px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 2rem auto !important;
  display: block !important;
}

.quiz-single-title {
  font-family: var(--font-body);
  font-size: clamp(18px, 3vw, 24px);
  font-weight: 700;
  background: var(--c-primary);
  margin: 0;
  padding: 32px 40px;
  text-align: center;
  color: var(--c-surface);
  line-height: 1.45;
  letter-spacing: -0.2px;
  position: relative;
}

.quiz-single-title::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('../images/1.png') right / cover no-repeat;
  opacity: 0.2;
  z-index: 0;
  pointer-events: none;
}

.quiz-single-title > * {
  position: relative;
  z-index: 1;
}

.mlw_qmn_message_before p:empty {
  display: none !important;
}

.qsm_results_page,
.quiz_begin {
  padding: 2rem !important;
  box-sizing: border-box !important;
}

/* ─── START PAGE ─── */
html body section.quiz-page .mlw_qmn_message_before,
html body .quiz-page .mlw_qmn_message_before,
html body div.mlw_qmn_message_before[class] {
  background-color: var(--c-primary-soft) !important;
  padding: 1.25rem !important;
  border-radius: var(--radius-sm) !important;
  margin-bottom: 1.5rem !important;
  font-weight: 500 !important;
  color: var(--c-primary-dark) !important;
  display: block !important;
}


html body section.quiz-page .mlw_qmn_question p,
html body .mlw_qmn_new_question p,
html body .mlw_qmn_question p {
  margin: 0 0 1rem 0 !important;
}

/* ── AUDIO PLAYER (MediaElement.js) ── */
html body section.quiz-page .mlw_qmn_question .mejs-container,
html body .mlw_qmn_question .mejs-container,
html body .mejs-container.wp-audio-shortcode {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 40px !important;
  min-width: 0 !important;
  border-radius: var(--radius-sm) !important;
  overflow: hidden !important;
  box-shadow: var(--shadow-xs) !important;
}

html body .mejs-container .mejs-inner,
html body .mejs-container .mejs-layers,
html body .mejs-container .mejs-controls {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  position: relative !important;
  background: var(--c-primary-dark);
}

html body .mejs-container .mejs-controls {
  display: flex !important;
}

html body .mejs-container .mejs-mediaelement {
  width: 100% !important;
  height: auto !important;
}

html body .mejs-container .mejs-time-rail {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

html body .mejs-container .mejs-controls > div {
  flex-shrink: 0;
}


html body section.quiz-page .mlw_qmn_question audio,
html body .mlw_qmn_question audio,
html body audio.wp-audio-shortcode {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 40px !important;
  margin-bottom: 1rem !important;
}

html body .mlw_qmn_question .mejs-offscreen {
  position: static !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  clip: auto !important;
}

html body .mlw_qmn_question mediaelementwrapper,
html body .mlw_qmn_question .mejs-mediaelement {
  display: block !important;
  min-height: 40px !important;
}

/* ── VIDEO / IFRAME EMBEDS (YouTube, Vimeo, etc.) ── */

html body section.quiz-page .qsm-media-wrapper,
html body .quiz-page .qsm-media-wrapper,
html body div.qsm-media-wrapper[class] {
  position: relative !important;
  width: 100% !important;
  padding-bottom: 56.25% !important;
  height: 0 !important;
  border-radius: var(--radius-sm) !important;
  overflow: hidden !important;
  box-shadow: var(--shadow-sm) !important;
  margin-bottom: 1.5rem !important;
  background-color: #000 !important;
  display: block !important;
}

html body section.quiz-page .qsm-media-wrapper iframe,
html body .qsm-media-wrapper iframe,
html body .qsm-media-wrapper video {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: none !important;
}

/* Bare iframes / videos dropped directly into question content
   (no wrapper div) — make them responsive via aspect-ratio */
html body section.quiz-page .mlw_qmn_question iframe,
html body .mlw_qmn_question iframe,
html body .mlw_qmn_new_question iframe {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9 !important;
  border: none !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: var(--shadow-sm) !important;
  margin-bottom: 1.5rem !important;
  background-color: #000 !important;
}

html body section.quiz-page .mlw_qmn_question video,
html body .mlw_qmn_question video {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: var(--shadow-sm) !important;
  margin-bottom: 1.5rem !important;
  background-color: #000 !important;
}

/* ── IMAGES (admin-added images, diagrams, etc.) ── */
html body section.quiz-page .mlw_qmn_question img,
html body .mlw_qmn_question img,
html body .mlw_qmn_new_question img,
html body .mlw_qmn_message_before img {
  display: block !important;
  max-width: 100% !important;
  height: auto !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: var(--shadow-sm) !important;
  margin: 0.5rem 0 1.5rem 0 !important;
}

/* ── TABLES (in case admin pastes tabular content) ── */
html body section.quiz-page .mlw_qmn_question table,
html body .mlw_qmn_question table {
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
  overflow-x: auto !important;
  border-collapse: collapse !important;
}

/* Generic safety net: nothing inside a question should overflow the card */
html body section.quiz-page .mlw_qmn_question,
html body .mlw_qmn_question {
  max-width: 100% !important;
  overflow-x: auto !important;
  box-sizing: border-box !important;
}

/* ─── QUESTION WRAPPERS ─── */
html body section.quiz-page .qsm-question-wrapper,
html body .quiz-page .qsm-question-wrapper,
html body div.qsm-question-wrapper[class*="qsm"],
html body div.qsm-question-wrapper[class*="quiz"] {
  background-color: var(--c-surface) !important;
  padding: 1.75rem !important;
  margin-bottom: 1.5rem !important;
  box-shadow: var(--shadow-xs) !important;
  transition: box-shadow 0.2s, transform 0.2s !important;
  display: block !important;
  box-sizing: border-box !important;
}

/* Question Number */
html body section.quiz-page .mlw_qmn_question_number,
html body .quiz-page .mlw_qmn_question_number,
html body span.mlw_qmn_question_number[class] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  color: var(--c-primary) !important;
  font-weight: 700 !important;
  font-size: 1.25rem !important;
  margin-left: 0.75rem !important;
  flex-shrink: 0 !important;
}

/* Question Text */
html body section.quiz-page .mlw_qmn_new_question,
html body .quiz-page .mlw_qmn_new_question,
html body div.mlw_qmn_new_question[class] {
  display: inline !important;
  font-size: 1.1rem !important;
  font-weight: 600 !important;
  color: var(--text-primary) !important;
}

/* ─── RADIO ANSWERS — BULLETPROOF ─── */
html body section.quiz-page .qmn_radio_answers,
html body .quiz-page .qmn_radio_answers,
html body div.qmn_radio_answers[class] {
  margin-top: 1.25rem !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.75rem !important;
}

html body section.quiz-page .qmn_mc_answer_wrap,
html body .quiz-page .qmn_mc_answer_wrap,
html body div.qmn_mc_answer_wrap[class] {
  position: relative !important;
  display: block !important;
}

/* Hide native radio completely */
html body section.quiz-page .qmn_mc_answer_wrap input[type="radio"],
html body .qmn_mc_answer_wrap input[type="radio"],
html body input[type="radio"][name^="question"] {
  position: absolute !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none !important;
}

/* Custom Label Styling */
html body section.quiz-page .qsm-text-simple-option,
html body .qsm-text-simple-option,
html body span.qsm-text-simple-option[class],
html body section.quiz-page .qmn_mc_answer_wrap .qsm-input-label,
html body .quiz-page .qsm-input-label,
html body label.qsm-input-label[class],
html body label.qsm-input-label[for] {
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  padding: 1rem 1.25rem !important;
  background-color: var(--c-bg) !important;
  border: 2px solid var(--border-color) !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  font-weight: 500 !important;
  transition: all 0.2s ease !important;
  user-select: none !important;
  color: var(--text-primary) !important;
  font-size: 1rem !important;
  line-height: 1.5 !important;
  word-break: break-word !important;
}

html body section.quiz-page .qmn_mc_answer_wrap .qsm-input-label::before,
html body label.qsm-input-label::before {
  content: '' !important;
  width: 20px !important;
  height: 20px !important;
  border: 2px solid var(--border-color) !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
  transition: all 0.2s ease !important;
  display: block !important;
  background-color: var(--c-surface) !important;
}

/* Checked State */
html body section.quiz-page .qmn_mc_answer_wrap input[type="radio"]:checked + .qsm-input-label,
html body input[type="radio"]:checked + label.qsm-input-label,
html body input[type="radio"][name^="question"]:checked + label {
  background-color: var(--c-primary-soft) !important;
  border-color: var(--c-primary) !important;
  color: var(--c-primary-dark) !important;
}

html body section.quiz-page .qmn_mc_answer_wrap input[type="radio"]:checked + .qsm-input-label::before,
html body input[type="radio"]:checked + label.qsm-input-label::before {
  border-color: var(--c-primary) !important;
  background-color: var(--c-primary) !important;
  box-shadow: inset 0 0 0 4px var(--c-surface) !important;
}

/* Hover State */
html body section.quiz-page .qmn_mc_answer_wrap .qsm-input-label:hover,
html body label.qsm-input-label:hover {
  border-color: var(--c-primary) !important;
  background-color: #f8fafc !important;
}

/* ─── CHECKBOX ANSWERS (multi-response questions, type mrq) ─── */
html body section.quiz-page .qmn_mc_answer_wrap input[type="checkbox"],
html body .qmn_mc_answer_wrap input[type="checkbox"],
html body input[type="checkbox"][name^="question"] {
  position: absolute !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none !important;
}

html body section.quiz-page .qmn_mc_answer_wrap input[type="checkbox"]:checked + .qsm-input-label,
html body input[type="checkbox"]:checked + label.qsm-input-label,
html body input[type="checkbox"][name^="question"]:checked + label {
  background-color: var(--c-primary-soft) !important;
  border-color: var(--c-primary) !important;
  color: var(--c-primary-dark) !important;
}

html body section.quiz-page .qmn_mc_answer_wrap input[type="checkbox"]:checked + .qsm-input-label::before,
html body input[type="checkbox"]:checked + label.qsm-input-label::before {
  border-color: var(--c-primary) !important;
  background-color: var(--c-primary) !important;
  border-radius: 6px !important;
}

/* Checkbox label square indicator instead of circle */
html body section.quiz-page .mrq_checkbox_class .qsm-input-label::before,
html body .mrq_checkbox_class label.qsm-input-label::before {
  border-radius: 6px !important;
}

/* ─── FILL IN THE BLANKS ─── */
html body section.quiz-page .qsm-align-fill-in-blanks p,
html body .qsm-align-fill-in-blanks p,
html body div.qsm-align-fill-in-blanks p {
  font-size: 1.05rem !important;
  line-height: 2.4 !important;
  color: var(--text-primary) !important;
  margin-top: 1rem !important;
  word-break: break-word !important;
}

html body section.quiz-page .qmn_fill_blank,
html body .quiz-page .qmn_fill_blank,
html body input.qmn_fill_blank[class],
html body input[type="text"].qmn_fill_blank {
  display: inline-block !important;
  width: 140px !important;
  max-width: 100% !important;
  height: 45px !important;
  padding: 0.5rem 0.75rem !important;
  margin: 0.25rem !important;
  border: 2px solid var(--border-color) !important;
  border-radius: 8px !important;
  font-family: 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif !important;
  font-size: 1rem !important;
  text-align: center !important;
  background-color: var(--c-bg) !important;
  color: var(--text-primary) !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
  outline: none !important;
  box-sizing: border-box !important;
}

html body section.quiz-page .qmn_fill_blank:focus,
html body input.qmn_fill_blank:focus,
html body input[type="text"].qmn_fill_blank:focus {
  border-color: var(--c-primary) !important;
  box-shadow: var(--focus-ring) !important;
  background-color: var(--c-surface) !important;
}

/* ─── TEXTAREA / ESSAY QUESTIONS ─── */
html body section.quiz-page .mlw_qmn_question textarea,
html body .mlw_qmn_question textarea {
  width: 100% !important;
  max-width: 100% !important;
  min-height: 120px !important;
  padding: 0.75rem 1rem !important;
  border: 2px solid var(--border-color) !important;
  border-radius: 8px !important;
  font-family: 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif !important;
  font-size: 1rem !important;
  background-color: var(--c-bg) !important;
  color: var(--text-primary) !important;
  box-sizing: border-box !important;
  resize: vertical !important;
  margin-top: 1rem !important;
}

html body section.quiz-page .mlw_qmn_question textarea:focus,
html body .mlw_qmn_question textarea:focus {
  border-color: var(--c-primary) !important;
  box-shadow: var(--focus-ring) !important;
  background-color: var(--c-surface) !important;
  outline: none !important;
}

/* ─── HINT SYSTEM ─── */
html body section.quiz-page .qsm-hint-wrapper,
html body .quiz-page .qsm-hint-wrapper,
html body div.qsm-hint-wrapper[class] {
  margin-top: 1.25rem !important;
  border-top: 1px dashed var(--border-color) !important;
  padding-top: 1rem !important;
  display: block !important;
}

html body section.quiz-page .qsm-hint-toggle,
html body .quiz-page .qsm-hint-toggle,
html body button.qsm-hint-toggle[class],
html body button.qsm-hint-toggle[type="button"] {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  background-color: transparent !important;
  border: none !important;
  color: var(--c-accent) !important;
  font-family: 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  padding: 0.5rem !important;
  border-radius: 6px !important;
  transition: background-color 0.2s !important;
  outline: none !important;
}

html body section.quiz-page .qsm-hint-toggle:hover,
html body button.qsm-hint-toggle:hover {
  background-color: var(--c-accent-soft) !important;
}

html body section.quiz-page .qsm-hint-chevron,
html body .qsm-hint-chevron,
html body span.qsm-hint-chevron {
  transition: transform 0.3s ease !important;
  display: inline-block !important;
}

html body section.quiz-page .qsm-hint-toggle[aria-expanded="true"] .qsm-hint-chevron,
html body button.qsm-hint-toggle[aria-expanded="true"] .qsm-hint-chevron {
  transform: rotate(180deg) !important;
}

html body section.quiz-page .qsm-hint-panel,
html body .quiz-page .qsm-hint-panel,
html body section.qsm-hint-panel[id] {
  margin-top: 0.75rem !important;
  padding: 1rem !important;
  background-color: var(--c-accent-soft) !important;
  border-radius: 0 8px 8px 0 !important;
  font-size: 0.95rem !important;
  color: var(--c-accent) !important;
  display: block !important;
  border: none !important;
  word-break: break-word !important;
}

html body section.quiz-page .qsm-hint-panel[hidden],
html body .qsm-hint-panel[hidden],
html body section.qsm-hint-panel[hidden] {
  display: none !important;
}

/* ─── PAGINATION & BUTTONS ─── */
html body section.quiz-page .qsm-navigation,
html body .quiz-page .qsm-navigation,
html body div.qsm-navigation[class] {
  display: flex !important;
  justify-content: space-around !important;
  align-items: center !important;
  border-top: 1px solid var(--border-color) !important;
  flex-direction: row-reverse;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 1.25rem !important;
}

html body section.quiz-page .qsm-page-counter,
html body .qsm-page-counter,
html body div.qsm-page-counter[class] {
  font-size: 0.85rem !important;
  color: var(--c-muted) !important;
  font-weight: 500 !important;
}

html body section.quiz-page .pages_count,
html body .pages_count,
html body span.pages_count[class] {
  display: block !important;
  text-align: center !important;
  color: var(--c-muted) !important;
  font-size: 0.85rem !important;
  margin: 1rem 0 !important;
  direction: ltr;
}

/* ─── RESULTS PAGE — FORTRESS LEVEL ─── */
html body section.quiz-page #state-results,
html body .quiz-page #state-results,
html body section#state-results[class] {
  display: none !important;
}

html body section.quiz-page #state-results.qsm-page,
html body #state-results.qsm-page {
  display: block !important;
}

/* Question Answer Blocks */
html body section.quiz-page .qmn_question_answer,
html body .qmn_question_answer,
html body div.qmn_question_answer[class] {
  padding: 1.5rem !important;
  margin-bottom: 1rem !important;
  display: block !important;
  box-sizing: border-box !important;
}

/* ─── BTN ─── */
.qmn_btn,
.qsm-quiz-container.qmn_quiz_container .qmn_btn,
.qsm-quiz-container.qmn_quiz_container .btn {
  background-color: var(--c-primary) !important;
  color: var(--c-surface) !important;
  border: none !important;
  border-radius: var(--radius-sm) !important;
  padding: 0.75rem 1.5rem !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  font-family: 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif !important;
}

/* Result Question Title */
html body section.quiz-page .qsm-result-question-title,
html body .qsm-result-question-title,
html body span.qsm-result-question-title[class] {
  font-size: 1.1rem !important;
  color: var(--text-primary) !important;
  display: block !important;
  margin-bottom: 0.5rem !important;
  font-weight: 700 !important;
}

/* Result Description */
html body section.quiz-page .qsm-result-question-description,
html body .qsm-result-question-description,
html body span.qsm-result-question-description[class] {
  color: var(--c-muted) !important;
  font-size: 0.95rem !important;
  display: block !important;
  margin-bottom: 1rem !important;
  line-height: 1.8 !important;
}

/* Option Badges */
html body section.quiz-page .qsm-text-correct-option,
html body .qsm-text-correct-option,
html body span.qsm-text-correct-option[class] {
  padding: 1rem 1.25rem !important;
  margin: 0.25rem 0.25rem 0.25rem 0 !important;
  border-radius: 10px !important;
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  background-color: rgba(16, 185, 129, 0.15) !important;
  color: var(--success) !important;
  border: 2px solid var(--success) !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  user-select: none !important;
  line-height: 1.5 !important;
}

html body section.quiz-page .qsm-text-wrong-option,
html body .qsm-text-wrong-option,
html body span.qsm-text-wrong-option[class] {
  background-color: rgba(239, 68, 68, 0.12) !important;
  color: var(--danger) !important;
  padding: 1rem 1.25rem !important;
  margin: 0.25rem 0.25rem 0.25rem 0 !important;
  border-radius: 10px !important;
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  border: 2px solid var(--danger) !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  user-select: none !important;
  line-height: 1.5 !important;
}

.mlw_qmn_question .qsm-text-correct-option::before,
.mlw_qmn_question .qsm-text-simple-option::before,
.mlw_qmn_question .qsm-text-wrong-option::before {
  left: 0 !important;
  font-size: 1rem !important;
}

.qsm-result-question-title b {
  display: inline !important;
  font-size: 1.1rem !important;
  font-weight: 600 !important;
  color: var(--text-primary) !important;
}

/* Start counter on the results container */
.qsm_results_page {
  counter-reset: question-counter;
}

/* Increment on each answer block */
.qmn_question_answer {
  counter-increment: question-counter;
}

/* Display before the <b> inside the title */
.qsm-result-question-title b::before {
  content: counter(question-counter) ". ";
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  color: var(--c-primary) !important;
  font-weight: 700 !important;
  font-size: 1.25rem !important;
  margin-left: 0.75rem !important;
  flex-shrink: 0 !important;
}

/* ─── RETAKE BUTTON ─── */
html body section.quiz-page .qsm_retake_button,
html body .qsm_retake_button,
html body input.qsm_retake_button[class],
html body input[type="submit"].qsm_retake_button {
  margin-top: 2rem !important;
  width: 100% !important;
  padding: 1rem !important;
  font-size: 1.1rem !important;
  background-color: var(--c-primary) !important;
  color: var(--c-surface) !important;
  border: none !important;
  border-radius: var(--radius-sm) !important;
  cursor: pointer !important;
  font-weight: 700 !important;
  font-family: 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif !important;
  transition: all 0.2s !important;
  outline: none !important;
}

html body section.quiz-page .qsm_retake_button:hover,
html body input.qsm_retake_button:hover {
  background-color: var(--c-primary-dark) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-lg) !important;
}

/* ─── BORDER UTILITIES ─── */
html body section.quiz-page .qsm-add-border-bottom,
html body .qsm-add-border-bottom,
html body div.qsm-add-border-bottom[class] {
  border-bottom: 1px solid var(--border-color) !important;
}

html body section.quiz-page .qsm-remove-border-bottom,
html body .qsm-remove-border-bottom,
html body div.qsm-remove-border-bottom[class] {
  border-bottom: none !important;
}

/* ─── STATE VISIBILITY ─── */
html body section.quiz-page .quiz-state,
html body .quiz-state,
html body section.quiz-state[class] {
  display: none !important;
}

html body section.quiz-page .quiz-state:first-of-type,
html body .quiz-state:first-of-type,
html body section#state-start.quiz-state,
html body #state-start.quiz-state {
  display: block !important;
}

/* ─── RESPONSIVE OVERRIDES ─── */
@media (max-width: 640px) {
  html body section.quiz-page .quiz-single-title,
  html body h1.quiz-single-title {
    font-size: 1.25rem !important;
    padding: 24px 20px !important;
  }

  html body section.quiz-page .qsm-question-wrapper,
  html body .qsm-question-wrapper {
    padding: 1.25rem !important;
  }

  html body section.quiz-page .qsm-navigation,
  html body .qsm-navigation {
    flex-direction: column-reverse !important;
    gap: 1rem !important;
  }

  html body section.quiz-page .qmn_btn,
  html body .qmn_btn,
  html body .qsm-btn {
    width: 100% !important;
    text-align: center !important;
  }

  html body section.quiz-page .qmn_fill_blank,
  html body input.qmn_fill_blank {
    width: 100px !important;
  }

  /* Audio controls: stack volume slider on very small screens */
  html body .mejs-container .mejs-horizontal-volume-slider {
    display: none !important;
  }

  .qsm_results_page,
  .quiz_begin {
    padding: 1.25rem !important;
  }

  .quiz-single-wrap {
    margin: 1rem auto !important;
    border-radius: 0 !important;
  }
}

@media (max-width: 768px) {
  .qsm-question-page {
    padding: 0 !important;
  }
}

/* ─── ANIMATION KEYFRAMES ─── */
@keyframes quizSlideDown {
  from { opacity: 0; transform: translateY(-5px); }
  to   { opacity: 1; transform: translateY(0); }
}

html body section.quiz-page .qsm-hint-panel:not([hidden]),
html body .qsm-hint-panel:not([hidden]) {
  animation: quizSlideDown 0.3s ease !important;
}

/* ─── FOCUS ACCESSIBILITY ─── */
html body section.quiz-page .qmn_btn:focus-visible,
html body .qmn_btn:focus-visible,
html body .qsm-btn:focus-visible,
html body button:focus-visible,
html body a:focus-visible,
html body input:focus-visible {
  outline: 3px solid var(--c-primary) !important;
  outline-offset: 2px !important;
}

/* ================================================
   QUIZ GATE — Paywall UI
   ================================================ */

.quiz-gate {
  max-width: 500px;
  width: 100%;
  margin: 60px auto;
  padding: 48px 36px;
  border-radius: 20px;
  text-align: center;
  box-sizing: border-box;
}

.quiz-gate-icon {
  font-size: 3rem;
  margin-bottom: 16px;
  line-height: 1;
}

.quiz-gate-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #111827;
  margin-bottom: 10px;
}

.quiz-gate-desc {
  color: #6b7280;
  font-size: 0.95rem;
  margin-bottom: 20px;
  line-height: 1.6;
}

.quiz-gate-price {
  font-size: 2rem;
  font-weight: 800;
  color: #111827;
  margin-bottom: 28px;
}

/* WooCommerce price overrides inside gate */
.quiz-gate-price .woocommerce-Price-amount {
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
}

.quiz-gate-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.quiz-gate-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 28px;
  background: #2563eb;
  color: #ffffff;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.15s ease;
}

.quiz-gate-btn:hover {
  background: #1d4ed8;
  transform: translateY(-1px);
  color: #ffffff;
}

.quiz-gate-btn--secondary {
  background: var(--c-primary);
  color: #fff;
}

.quiz-gate-note {
  font-size: 0.85rem;
  color: #9ca3af;
  margin-top: 4px;
}

.quiz-gate-note a {
  color: #2563eb;
  text-decoration: underline;
}

/* Lock badge on thumbnail */
.quiz-card-thumb {
  position: relative;
}

.quiz-card-lock-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  background: #F5C542;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  border-radius: 20px;
  backdrop-filter: blur(4px);
}

/* Purchased state */
.quiz-card-price-owned {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--success);
  font-weight: 600;
  font-size: 0.85rem;
}

/* WooCommerce price override inside card */
.quiz-card-price-current .woocommerce-Price-amount {
  font-size: inherit;
  font-weight: inherit;
}

.quiz-card-price-current del {
  color: var(--danger);
}

.quiz-card-price-current ins {
  color: var(--success);
  text-decoration: none;
}

/* Locked button style */
.quiz-card-btn--locked {
  background: #f59e0b;
  color: #fff;
}

@media (max-width: 480px) {
  .quiz-gate {
    margin: 24px auto;
    padding: 32px 20px;
  }

  .quiz-gate-actions {
    flex-direction: column;
  }

  .quiz-gate-btn {
    width: 100%;
    justify-content: center;
  }
}


html body section.quiz-page .mlw_qmn_question img, html body .mlw_qmn_question img, html body .mlw_qmn_new_question img, html body .mlw_qmn_message_before img{
  display: none !important;
}