/* Mock Test / Exam Preparation module */

/* ==== Home hero ==== */
.mt-home-hero { position: relative; padding: 1rem 1rem 0; overflow: hidden; }
.mt-home-hero::before, .mt-home-hero::after {
  content: ''; position: absolute; border-radius: 50%; pointer-events: none; z-index: -1;
  background: radial-gradient(circle, rgba(var(--accent-rgb), .14), transparent 70%);
}
.mt-home-hero::before { width: 320px; height: 320px; top: -120px; left: -80px; }
.mt-home-hero::after { width: 260px; height: 260px; top: -60px; right: -60px; background: radial-gradient(circle, rgba(217,119,6,.12), transparent 70%); }

.mt-hero-stats { display: flex; align-items: center; justify-content: center; gap: 1.5rem; flex-wrap: wrap; }
.mt-hero-stat { display: flex; flex-direction: column; align-items: center; gap: .3rem; line-height: 1.2; }
.mt-hero-stat-icon {
  width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 1.15rem; margin-bottom: .1rem;
}
.mt-hero-stat-icon-1 { background: rgba(13,148,136,.14); }
.mt-hero-stat-icon-2 { background: rgba(124,58,237,.14); }
.mt-hero-stat-icon-3 { background: rgba(217,119,6,.14); }
.mt-hero-stat-val { font-size: 1.5rem; font-weight: 800; }
.mt-hero-stat:nth-child(1) .mt-hero-stat-val { color: #0d9488; }
.mt-hero-stat:nth-child(3) .mt-hero-stat-val { color: #7c3aed; }
.mt-hero-stat:nth-child(5) .mt-hero-stat-val { color: #d97706; }
.mt-hero-stat-lbl { font-size: .74rem; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.mt-hero-stat-divider { width: 1px; height: 44px; background: var(--border-color); align-self: center; }

.mt-hero-btn { border-radius: 999px; padding: .5rem 1.1rem; font-weight: 600; transition: transform .15s ease, box-shadow .15s ease; }
.mt-hero-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }

@media (max-width: 480px) {
  .mt-hero-stat-divider { height: 34px; }
  .mt-hero-stats { gap: .85rem; }
  .mt-hero-stat-icon { width: 34px; height: 34px; font-size: 1rem; }
  .mt-hero-stat-val { font-size: 1.25rem; }
}

/* Long-form category-page SEO article (McqController::categoryContent()) — the surrounding
   .text-muted wrapper is for the body copy; headings should stand out from it, not inherit it. */
.mcq-category-article h3 {
  color: var(--text-primary); font-weight: 700; font-size: 1.15rem;
  margin-top: 1.75rem; margin-bottom: .6rem;
}
.mcq-category-article h3:first-child { margin-top: 0; }
.mcq-category-article p { margin-bottom: 1.1rem; }

/* ==== Numbered "mistakes/tips" list (mock-test home SEO content) ==== */
.mistake-list { display: flex; flex-direction: column; gap: 1.1rem; }
.mistake-item {
  display: flex; align-items: flex-start; gap: 1rem;
  background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: 14px; padding: 1.1rem 1.25rem;
}
.mistake-num {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
  background: rgba(var(--accent-rgb), .12); color: var(--accent); font-weight: 800; font-size: .95rem;
  display: flex; align-items: center; justify-content: center;
}

.mcq-exam-shell {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 200px);
  background: var(--bs-body-bg);
}

/* Native :fullscreen plus a CSS-only fallback (same pattern as typing practice's
   #practiceWrap.fs-fallback) for when requestFullscreen() is rejected — most often because
   the test was auto-entered right after the "Start" navigation, which doesn't carry a real
   user-activation gesture across the page load. */
#mcqExamShell:fullscreen, #mcqExamShell.fs-fallback {
  background: var(--bg-body); padding: 1rem 1.25rem; overflow-y: auto;
}
#mcqExamShell.fs-fallback { position: fixed; inset: 0; z-index: 1090; }

/* Toggled on <body> whenever the exam is in (native or fallback) fullscreen — without this,
   mobile Chrome/Safari can still rubber-band-scroll the page behind a position:fixed overlay
   on touch, so "fullscreen" visibly scrolls even though the overlay itself fills the screen. */
body.mcq-fs-lock { position: fixed; overflow: hidden; width: 100%; }

/* The site header is sticky-top (Bootstrap, z-index 1020) — way above the exam topbar's
   z-index: 5, so once the page scrolls it covers the topbar and hides the live timer.
   During an attempt the exam topbar takes over that role, so drop the site header out
   of the way instead of fighting it with a z-index war. */
body:has(.mcq-exam-shell) .site-header {
  position: static;
}

/* Topbar + section tabs stick together as one unit — previously only the topbar was sticky,
   so on scroll the (non-sticky) tabs row slid up underneath it, leaving just a sliver of it
   peeking out beneath the pinned topbar instead of disappearing or staying put cleanly. */
.mcq-exam-header-sticky {
  position: sticky;
  top: 0;
  background: var(--bs-body-bg);
  z-index: 5;
}

.mcq-exam-topbar {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .75rem 1.25rem;
  border-bottom: 1px solid var(--bs-border-color);
}

.mcq-exam-title {
  font-weight: 700;
  flex: 1;
}

.mcq-exam-timer {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: 1.1rem;
  padding: .25rem .75rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
}

.mcq-section-tabs {
  display: flex;
  gap: .5rem;
  padding: .6rem 1.25rem;
  border-bottom: 1px solid var(--bs-border-color);
  overflow-x: auto;
}

.mcq-section-tab {
  border: 1px solid var(--bs-border-color);
  background: var(--bs-body-bg);
  border-radius: 999px;
  padding: .3rem .9rem;
  font-size: .85rem;
  white-space: nowrap;
}

.mcq-section-tab.active {
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}

.mcq-exam-body {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 1.25rem;
  padding: 1.25rem;
}

@media (max-width: 900px) {
  .mcq-exam-body { grid-template-columns: 1fr; }
}

@media (max-width: 576px) {
  .mcq-exam-topbar { flex-wrap: wrap; gap: .4rem .75rem; padding: .6rem .85rem; }
  /* Pattern names can be long real-paper titles ("UPSSC PET 2025 Answer Key (06-09-2025,
     Shift 1, Master Set VZ9) — ...") that eat the whole topbar on a phone-width screen —
     just hide it; the timer/controls are what matters while actually taking the test. */
  .mcq-exam-title { display: none; }
  .mcq-exam-timer { font-size: .95rem; padding: .2rem .6rem; }
  .mcq-section-tabs { padding: .5rem .85rem; gap: .4rem; }
  .mcq-section-tab { font-size: .78rem; padding: .28rem .7rem; }
  .mcq-exam-body { padding: .85rem; gap: .85rem; }
  .mcq-question-panel { padding: 1rem; }
  .mcq-palette-btn { width: 2.1rem; height: 2.1rem; font-size: .8rem; }
  /* Was a plain flex-wrap of 4 equal buttons, landing as an even 2x2 grid with no visual
     hierarchy — "Save & Next" (the one button tapped on almost every question) looked no
     more important than "Previous" (rarely used, mostly first question only). Reordered
     into a grid instead: Save & Next full-width and bolder on its own top row, the two
     mid-frequency actions side by side below it, Previous alone at the bottom since it's
     the least-used action here. */
  .mcq-exam-footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem;
    padding: .75rem .85rem;
  }
  .mcq-exam-footer .btn { min-width: 0; font-size: .82rem; padding: .55rem .5rem; }
  #mcqNextBtn { grid-column: 1 / -1; order: -3; font-size: .95rem; padding: .7rem; font-weight: 700; }
  #mcqMarkBtn { order: -2; }
  #mcqClearBtn { order: -1; }
  #mcqPrevBtn { grid-column: 1 / -1; order: 1; }
}

.mcq-question-panel {
  background: var(--bs-tertiary-bg, #f8f9fa);
  border-radius: 12px;
  padding: 1.5rem;
}

.mcq-question-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  font-weight: 600;
}

.mcq-passage-box {
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  border: 1px solid var(--bs-border-color);
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1rem;
  line-height: 1.7;
  max-height: 260px;
  overflow-y: auto;
}

.mcq-question-text {
  font-size: 1.05rem;
  line-height: 1.6;
  margin-bottom: 1rem;
}

.mcq-question-image {
  max-width: 100%;
  border-radius: 8px;
  margin-bottom: 1rem;
}

.mcq-option-row {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .65rem .9rem;
  border: 1px solid var(--bs-border-color);
  border-radius: 8px;
  margin-bottom: .5rem;
  cursor: pointer;
  background: var(--bs-body-bg);
}

.mcq-option-row:has(input:checked) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--bs-body-bg));
}

.mcq-palette-panel {
  background: var(--bs-tertiary-bg, #f8f9fa);
  border-radius: 12px;
  padding: 1rem;
  align-self: start;
}

.mcq-palette-legend {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  font-size: .8rem;
  margin-bottom: 1rem;
}

.mcq-dot {
  display: inline-block;
  width: .7rem;
  height: .7rem;
  border-radius: 50%;
  margin-right: .35rem;
}

.mcq-palette-grid {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-bottom: 1rem;
}

.mcq-palette-btn {
  flex: 0 0 auto;
  min-width: 2.4rem;
  height: 2.4rem;
  padding: 0 .3rem;
  border: none;
  border-radius: 6px;
  font-weight: 600;
  font-size: .85rem;
  color: #fff;
}

.mcq-summary > div {
  font-size: .8rem;
  margin-bottom: .2rem;
}

.mcq-palette-summary > div {
  font-size: .8rem;
  margin-bottom: .2rem;
}

/* Status colors, shared between the palette dots and the palette buttons */
.status-answered, .mcq-palette-btn.status-answered { background: #16a34a; }
.status-not_answered, .mcq-palette-btn.status-not_answered { background: #dc2626; }
.status-marked_review, .mcq-palette-btn.status-marked_review { background: #7c3aed; }
.status-answered_review, .mcq-palette-btn.status-answered_review {
  background: #7c3aed;
  box-shadow: inset 0 0 0 3px #16a34a;
}
.status-not_visited, .mcq-palette-btn.status-not_visited { background: #9ca3af; }

/* General-instructions gate page (practice-start.php / mock-instructions.php) — same
   status dots as the palette, laid out as a wrapping inline legend instead of a stack. */
.mcq-legend-swatches {
  display: flex; flex-wrap: wrap; gap: .5rem .9rem;
  font-size: .82rem; color: var(--text-primary);
}
.mcq-legend-swatches span { display: inline-flex; align-items: center; white-space: nowrap; }

.mcq-instructions-avatar-img {
  width: 72px; height: 72px; border-radius: 50%; object-fit: cover;
}
.mcq-instructions-avatar-placeholder {
  display: inline-flex; align-items: center; justify-content: center;
  width: 72px; height: 72px; border-radius: 50%;
  background: var(--accent); color: #fff; font-weight: 700; font-size: 1.6rem;
}

.mcq-review-option {
  padding: .6rem .9rem;
  border: 1px solid var(--bs-border-color);
  border-radius: 8px;
  margin-bottom: .5rem;
}

.mcq-review-option.is-correct {
  border-color: #16a34a;
  background: color-mix(in srgb, #16a34a 10%, transparent);
}

.mcq-review-option.is-wrong-selected {
  border-color: #dc2626;
  background: color-mix(in srgb, #dc2626 10%, transparent);
}

.mcq-explanation-box {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border-radius: 8px;
}

.mcq-exam-footer {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--bs-border-color);
  position: sticky;
  bottom: 0;
  background: var(--bs-body-bg);
}

.mcq-exam-footer .btn {
  flex: 1;
  min-width: 140px;
}

/* Start-gate footer (practice-start.php / mock-instructions.php step 2) — language + declaration
   + Previous/Start, laid out as three justified groups instead of full-width stretched buttons. */
.mcq-start-gate-footer {
  justify-content: space-between;
  align-items: center;
}
.mcq-start-gate-footer .btn { flex: 0 0 auto; min-width: 0; }
.mcq-start-gate-lang, .mcq-start-gate-declaration, .mcq-start-gate-buttons {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
}
.mcq-start-gate-declaration .form-check { display: flex; align-items: center; gap: .4rem; margin: 0; }
/* Its own full-width row (not squeezed between the language picker and buttons) with a
   highlighted background, since agreeing to the declaration is the one thing here that's
   actually required before the exam can start — it shouldn't read as just another item in
   the row. flex-basis:100% inside the footer's flex-wrap does this at every width, so it
   doesn't need to wait for the 900px stack breakpoint below to get its own line. */
.mcq-start-gate-declaration {
  flex: 1 1 100%;
  background: rgba(var(--accent-rgb), .08);
  border: 1px solid rgba(var(--accent-rgb), .25);
  border-radius: 10px;
  padding: .6rem .9rem;
}
@media (max-width: 900px) {
  .mcq-start-gate-footer { flex-direction: column; align-items: stretch; }
}

/* Category cards on the Mock Test home page — a more compact, centered take on .module-card */
.mcq-category-card {
  text-align: center;
  padding: 1.25rem 1rem;
}

.mcq-category-card .icon-wrap {
  margin: 0 auto .6rem;
}

.mcq-category-card .badge-soon {
  margin-top: .25rem;
}

/* Previous Year Papers hub pagination — same nice rounded-button treatment as blog pagination. */
.mt-pagination {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: .5rem; list-style: none; padding: 0; margin: 0;
}
.mt-pagination-item { display: flex; }
.mt-pagination-link {
  display: flex; align-items: center; justify-content: center;
  min-width: 42px; height: 42px; padding: 0 .5rem;
  border-radius: 12px; border: 1px solid var(--border-color); background: var(--bg-surface);
  color: var(--text-primary); font-weight: 600; font-size: .9rem; text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease, color .15s ease, border-color .15s ease;
}
a.mt-pagination-link:hover {
  border-color: var(--accent); color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow-sm);
}
.mt-pagination-link.is-active {
  background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: var(--shadow-sm);
}
.mt-pagination-link.is-active:hover { transform: none; color: #fff; }
.mt-pagination-link.mt-pagination-nav { font-size: 1rem; }
.mt-pagination-link.is-disabled {
  color: var(--text-muted); opacity: .4; cursor: default; pointer-events: none;
}

/* ==== Search box (mock-test home exam search + reused on Full Mock Tests / PYQ list search) ==== */
.mt-search-wrap { position: relative; max-width: 460px; }
.mt-search-icon { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; }
.mt-search-input {
  width: 100%; padding: .75rem 1rem .75rem 2.6rem; border-radius: 999px; border: 1px solid var(--border-color);
  background: var(--bg-surface); color: var(--text-primary, inherit); font-size: .95rem;
  box-shadow: var(--shadow-sm); transition: border-color .15s ease, box-shadow .15s ease;
}
.mt-search-input:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .15);
}
.mt-search-results {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 20; text-align: left;
  background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: 14px;
  box-shadow: var(--shadow-md); overflow: hidden; max-height: 320px; overflow-y: auto;
}
.mt-search-result-item {
  display: flex; flex-direction: column; gap: .1rem; padding: .65rem 1rem; text-decoration: none;
  color: inherit; border-bottom: 1px solid var(--border-color);
}
.mt-search-result-item:last-child { border-bottom: none; }
.mt-search-result-item:hover { background: rgba(var(--accent-rgb), .08); }
.mt-search-result-name { font-weight: 600; font-size: .9rem; }
.mt-search-result-cat { font-size: .75rem; color: var(--text-muted); }
.mt-search-result-empty { padding: 1rem; text-align: center; color: var(--text-muted); font-size: .85rem; }

/* ==== Exam hub page (exam.php) — a distinct look from the generic .module-card grid used
   everywhere else in the funnel (mock-test home → category → exam), so this page doesn't
   feel like "yet another card grid" after two levels of identical-looking pages. ==== */
.mcq-exam-hero {
  position: relative; overflow: hidden; padding: 2.25rem 2rem; border-radius: 20px; margin-bottom: 2rem;
  background: linear-gradient(120deg, rgba(var(--accent-rgb), .14), rgba(124,58,237,.08) 60%, var(--bg-surface) 100%);
  border: 1px solid rgba(var(--accent-rgb), .2);
}
.mcq-exam-hero::before {
  content: ''; position: absolute; top: -60px; right: -60px; width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--accent-rgb), .16), transparent 70%); pointer-events: none;
}
.mcq-exam-hero-eyebrow { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--accent); }
.mcq-exam-hero-title { font-size: 1.6rem; font-weight: 800; margin: .3rem 0 .5rem; }
.mcq-exam-hero-desc { color: var(--text-muted); max-width: 640px; margin-bottom: 0; }
.mcq-exam-hero-stats { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-top: 1.25rem; }
.mcq-exam-hero-stat { display: flex; flex-direction: column; }
.mcq-exam-hero-stat-val { font-size: 1.3rem; font-weight: 800; color: var(--text-primary); }
.mcq-exam-hero-stat-lbl { font-size: .75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .03em; }

/* Action tiles (Full Mock Tests / Build Your Own / PYQ) — glossy icon-badge tiles instead
   of the generic feature-card, so they read as "primary actions", not more browse-cards. */
.mcq-action-tile {
  display: flex; align-items: center; gap: 1rem; padding: 1.25rem 1.4rem; height: 100%;
  border-radius: 16px; text-decoration: none; color: inherit; background: var(--bg-surface);
  border: 1px solid var(--border-color); box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.mcq-action-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); color: inherit; border-color: rgba(var(--accent-rgb), .35); }
.mcq-action-tile-icon {
  width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; box-shadow: inset 0 -6px 10px rgba(0,0,0,.08), 0 3px 8px rgba(0,0,0,.06); position: relative; overflow: hidden;
}
.mcq-action-tile-icon::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 32% 26%, rgba(255,255,255,.55), transparent 55%);
}
.mcq-action-tile-icon-mock { background: radial-gradient(circle at 32% 26%, #34d399, #0d9488 70%); color: #fff; }
.mcq-action-tile-icon-custom { background: radial-gradient(circle at 32% 26%, #a78bfa, #7c3aed 70%); color: #fff; }
.mcq-action-tile-icon-pyq { background: radial-gradient(circle at 32% 26%, #fbbf24, #d97706 70%); color: #fff; }
.mcq-action-tile-title { font-weight: 700; font-size: .98rem; margin-bottom: .15rem; }
.mcq-action-tile-desc { font-size: .8rem; color: var(--text-muted); margin-bottom: .35rem; }

/* ==== Subject Wise Practice sidebar (exam.php) — clicking a subject swaps the chapter
   list on the right in place instead of navigating to a separate page. ==== */
.mcq-subject-sidebar {
  display: flex; flex-direction: column; gap: .4rem; position: sticky; top: 90px;
}
.mcq-subject-sidebar-item {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem; width: 100%;
  padding: .75rem 1rem; border-radius: 12px; border: 1px solid var(--border-color);
  background: var(--bg-surface); color: var(--text-primary); font-weight: 600; font-size: .88rem;
  text-align: left; cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
}
.mcq-subject-sidebar-item:hover { border-color: rgba(var(--accent-rgb), .4); }
.mcq-subject-sidebar-item.is-active { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: var(--shadow-sm); }
.mcq-subject-sidebar-item-name { min-width: 0; }
.mcq-subject-sidebar-item-count {
  font-size: .72rem; font-weight: 700; padding: .1rem .5rem; border-radius: 999px; flex-shrink: 0;
  background: rgba(var(--accent-rgb), .14); color: var(--accent); line-height: 1.5;
}
.mcq-subject-sidebar-item.is-active .mcq-subject-sidebar-item-count { background: rgba(255,255,255,.25); color: #fff; }
@media (max-width: 767.98px) {
  .mcq-subject-sidebar { flex-direction: row; overflow-x: auto; position: static; padding-bottom: .35rem; scrollbar-width: thin; }
  .mcq-subject-sidebar-item { flex-shrink: 0; white-space: nowrap; }
}

/* A Set the student already started but hasn't submitted — distinct amber ring so it reads
   as "pick this back up", not confusable with a plain unlocked-but-untouched Set. */
.mcq-set-in-progress { border: 2px solid #f59e0b; box-shadow: 0 0 0 3px rgba(245,158,11,.12); }

/* ==== Horizontal list rows — used for Subject Wise Practice, Full Mock Tests (with lock
   states) and Previous Year Papers, so the whole drill-down flow (exam → subject → sets)
   shares one distinct list language instead of repeating the generic card grid three times. ==== */
.mcq-list { display: flex; flex-direction: column; gap: .7rem; }
.mcq-list-row {
  display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem; border-radius: 14px;
  background: var(--bg-surface); border: 1px solid var(--border-color); text-decoration: none; color: inherit;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
a.mcq-list-row:hover { transform: translateX(4px); box-shadow: var(--shadow-sm); border-color: rgba(var(--accent-rgb), .3); color: inherit; }
.mcq-list-row-num {
  width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: .9rem; background: rgba(var(--accent-rgb), .12); color: var(--accent);
}
.mcq-list-row-body { flex: 1; min-width: 0; }
.mcq-list-row-title { font-weight: 700; font-size: .95rem; margin-bottom: .15rem; }
.mcq-list-row-meta { font-size: .78rem; color: var(--text-muted); }
.mcq-list-row-side { display: flex; align-items: center; gap: .6rem; flex-shrink: 0; }
.mcq-list-row-arrow { color: var(--text-muted); font-size: 1.1rem; flex-shrink: 0; transition: transform .15s ease; }
a.mcq-list-row:hover .mcq-list-row-arrow { transform: translateX(3px); color: var(--accent); }
.mcq-list-row.is-locked { opacity: .55; cursor: default; }
.mcq-list-row.is-locked .mcq-list-row-num { background: var(--bg-surface-alt); color: var(--text-muted); }

/* "Practice Full Chapter" row (chapter-sets.php) — visually distinct from the numbered
   Sets below it, since it's a different kind of action (untimed, unlimited attempts). */
.mcq-list-row-featured {
  background: linear-gradient(120deg, rgba(var(--accent-rgb), .1), var(--bg-surface) 70%);
  border-color: rgba(var(--accent-rgb), .25);
}
.mcq-list-row-featured .mcq-list-row-num { background: var(--accent); color: #fff; font-size: 1.1rem; }
.mcq-list-empty { text-align: center; color: var(--text-muted); padding: 3rem 1rem; }

/* "My Exams" dashboard history (mcq-attempts.php) — reuses .mcq-list-row but the title can be
   a very long real-paper name repeated across several attempts of the same test, so it's
   truncated to one line with an ellipsis (full text still available via the title="" tooltip)
   instead of wrapping and pushing every row to a different, uneven height. */
.mcq-attempt-title {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}
.mcq-attempt-row .mcq-list-row-side { flex-wrap: wrap; justify-content: flex-end; }
.mcq-attempt-icon-mock { background: rgba(var(--accent-rgb), .12); color: var(--accent); }
.mcq-attempt-icon-practice { background: rgba(37, 99, 235, .12); color: #2563eb; }
.mcq-attempt-icon-custom { background: rgba(124, 58, 237, .12); color: #7c3aed; }

/* Shared "Back to X" pill used at the bottom of every mock-test drill-down page (subject,
   chapter sets, full mock tests, PYQ) — one consistent, nicer-looking control instead of
   each page rolling its own plain outline button / bare text link. */
.mcq-back-btn {
  display: inline-flex; align-items: center; gap: .55rem; padding: .65rem 1.4rem;
  border-radius: 999px; border: 1px solid var(--border-color); background: var(--bg-surface);
  color: var(--text-primary); font-weight: 600; font-size: .88rem; text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease, color .15s ease;
}
.mcq-back-btn:hover {
  transform: translateX(-4px); box-shadow: var(--shadow-md); border-color: rgba(var(--accent-rgb), .35);
  background: rgba(var(--accent-rgb), .08); color: var(--accent);
}
.mcq-back-btn-arrow { font-size: 1.05rem; line-height: 1; transition: transform .15s ease; }
.mcq-back-btn:hover .mcq-back-btn-arrow { transform: translateX(-3px); }
@media (max-width: 575.98px) {
  .mcq-list-row { padding: .85rem 1rem; gap: .75rem; }
  .mcq-exam-hero { padding: 1.5rem 1.25rem; }
  .mcq-exam-hero-title { font-size: 1.3rem; }
}

/* ==== Custom Practice builder (custom-practice-builder.php) — was a plain stack of bare
   Bootstrap checkboxes/select/number-input with no visual grouping; redesigned as selectable
   chip cards + pill toggles matching the .mcq-list-row visual language used everywhere else
   in this module (rounded surfaces, --accent highlight, subtle hover motion). ==== */
.cp-section { margin-bottom: 1.75rem; }
.cp-section-label {
  display: block; font-weight: 700; font-size: .8rem; text-transform: uppercase;
  letter-spacing: .04em; color: var(--text-muted); margin-bottom: .75rem;
}
.cp-subject-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .65rem; }
.cp-subject-chip {
  position: relative; display: flex; align-items: center; gap: .75rem; cursor: pointer;
  padding: .8rem 1rem; border-radius: 12px; border: 1.5px solid var(--border-color);
  background: var(--bg-surface); transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.cp-subject-chip:hover { border-color: rgba(var(--accent-rgb), .4); transform: translateY(-1px); }
.cp-subject-chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.cp-subject-chip-check {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 7px; border: 1.5px solid var(--border-color);
  display: flex; align-items: center; justify-content: center; font-size: .8rem; font-weight: 800;
  color: transparent; background: var(--bg-surface-alt); transition: all .15s ease;
}
.cp-subject-chip:has(input:checked) {
  border-color: var(--accent); background: rgba(var(--accent-rgb), .07);
}
.cp-subject-chip:has(input:checked) .cp-subject-chip-check {
  background: var(--accent); border-color: var(--accent); color: #fff;
}
.cp-subject-chip-name { display: block; font-weight: 600; font-size: .92rem; }
.cp-subject-chip-count { display: block; font-size: .76rem; color: var(--text-muted); }

.cp-pill-group { display: flex; flex-wrap: wrap; gap: .5rem; }
.cp-pill {
  display: inline-flex; align-items: center; padding: .5rem 1.1rem; border-radius: 999px;
  border: 1.5px solid var(--border-color); background: var(--bg-surface); color: var(--text-primary);
  font-size: .86rem; font-weight: 600; cursor: pointer; transition: all .15s ease;
}
.cp-pill:hover { border-color: rgba(var(--accent-rgb), .4); }
.btn-check:checked + .cp-pill { background: var(--accent); border-color: var(--accent); color: #fff; }

.cp-stepper {
  display: flex; align-items: stretch; border: 1.5px solid var(--border-color); border-radius: 12px;
  overflow: hidden; background: var(--bg-surface);
}
.cp-stepper-btn {
  flex-shrink: 0; width: 44px; border: none; background: var(--bg-surface-alt); color: var(--accent);
  font-size: 1.2rem; font-weight: 700; line-height: 1; cursor: pointer; transition: background .15s ease;
}
.cp-stepper-btn:hover { background: rgba(var(--accent-rgb), .15); }
.cp-stepper-input {
  flex: 1; min-width: 0; border: none; text-align: center; font-weight: 700; font-size: 1rem;
  background: transparent; color: var(--text-primary);
}
.cp-stepper-input:focus { outline: none; }
.cp-stepper-input::-webkit-outer-spin-button, .cp-stepper-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.cp-toggle { display: flex; align-items: center; gap: .7rem; cursor: pointer; height: 100%; padding-top: 1.9rem; }
.cp-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.cp-toggle-track {
  flex-shrink: 0; width: 42px; height: 24px; border-radius: 999px; background: var(--bg-surface-alt);
  border: 1.5px solid var(--border-color); position: relative; transition: all .15s ease;
}
.cp-toggle-thumb {
  position: absolute; top: 2px; left: 2px; width: 17px; height: 17px; border-radius: 50%;
  background: #fff; box-shadow: var(--shadow-sm); transition: transform .15s ease;
}
.cp-toggle input:checked + .cp-toggle-track { background: var(--accent); border-color: var(--accent); }
.cp-toggle input:checked + .cp-toggle-track .cp-toggle-thumb { transform: translateX(18px); }
.cp-toggle-label { font-size: .9rem; font-weight: 600; }

.cp-count-banner {
  display: flex; align-items: baseline; gap: .5rem; justify-content: center; text-align: center;
  padding: .9rem 1rem; border-radius: 12px; background: rgba(var(--accent-rgb), .08);
  border: 1px solid rgba(var(--accent-rgb), .2);
}
.cp-count-num { font-size: 1.5rem; font-weight: 800; color: var(--accent); }
.cp-count-text { font-size: .88rem; color: var(--text-muted); }

@media (max-width: 575.98px) {
  .cp-subject-grid { grid-template-columns: 1fr; }
  .cp-toggle { padding-top: 0; margin-top: .5rem; }
}

/* Decorative wash behind the Subject Wise Practice sidebar+list, so that section doesn't
   sit on a flat white background like the rest of the page. */
.mcq-subject-section-bg {
  position: relative;
  background: radial-gradient(ellipse 700px 260px at 8% 0%, rgba(var(--accent-rgb), .22), transparent 60%),
              radial-gradient(ellipse 600px 240px at 100% 100%, rgba(124,58,237,.18), transparent 60%),
              rgba(15, 23, 42, .05);
  border-radius: 24px; padding: 1.5rem;
}
@media (max-width: 575.98px) {
  .mcq-subject-section-bg { padding: 1rem; }
}

/* Infinite-scroll sentinel for chapter lists longer than one batch (10 rows) — see exam.php. */
.mcq-list-sentinel {
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  padding: 1.1rem; color: var(--text-muted); font-size: .85rem;
}
.mcq-list-sentinel-spinner {
  width: 14px; height: 14px; border: 2px solid rgba(var(--accent-rgb), .25); border-top-color: var(--accent);
  border-radius: 50%; animation: mcqSentinelSpin .7s linear infinite; flex-shrink: 0;
}
@keyframes mcqSentinelSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .mcq-list-sentinel-spinner { animation: none; }
}

/* "Load More Sets" button (chapter-sets.php) — .mcq-list is a flex column, so without this
   the button stretches to the full row width like every other list item instead of sizing to
   its own compact content. */
#chapterSetsLoadMoreBtn, #fullTestLoadMoreBtn { align-self: center; }

/* Breadcrumb + hero badge polish for mock-test drill-down pages (full-mock-tests.php and
   similar) — the shared .blog-breadcrumb/.typing-mode-badge classes are reused as-is
   (untouched, so blog/typing pages don't change), these classes only add to them. */
.mcq-breadcrumb {
  display: inline-flex; background: var(--bg-surface); border: 1px solid var(--border-color);
  border-radius: 999px; padding: .45rem 1rem; box-shadow: var(--shadow-sm);
}
.mcq-breadcrumb-sep { font-weight: 700; opacity: .55; }
.mcq-hero-badge {
  font-size: .82rem; font-weight: 700; padding: .4rem 1.1rem;
  background: linear-gradient(120deg, rgba(var(--accent-rgb), .18), rgba(var(--accent-rgb), .08));
  border: 1px solid rgba(var(--accent-rgb), .3); box-shadow: 0 2px 10px rgba(var(--accent-rgb), .12);
}