/* =============================================================
   Electrical MCQ Master — Frontend Styles v1.2
   ============================================================= */

.emcq-list {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 15px;
    color: #1a1a1a;
    line-height: 1.75;
    max-width: 100%;
}

/* ── Single question block ─────────────────────────────────── */
.emcq-question {
    margin-bottom: 20px;
    padding-bottom: 18px;
    border-bottom: 1px solid #e5e7eb;
}
.emcq-question:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* ── Question heading ──────────────────────────────────────── */
.emcq-q-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 10px;
}
.emcq-q-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    min-width: 36px;
    background: #166534;
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    border-radius: 50%;
    white-space: nowrap;
    flex-shrink: 0;
    line-height: 1;
    margin-top: 2px;           /* align with first line of question text */
}
.emcq-q-text {
    font-size: 15px;
    font-weight: 500;
    color: #111;
    line-height: 1.8;
    flex: 1;
    min-width: 0;
}
.emcq-q-text p            { margin: 0 0 6px; }
.emcq-q-text p:last-child { margin: 0; }
.emcq-q-text img          { max-width:100%; height:auto; display:block; margin:8px 0; border-radius:4px; }

/* ══════════════════════════════════════════════════════════════
   EXAM + YEAR CHIPS  — sit between question text and options
   ══════════════════════════════════════════════════════════════ */
.emcq-source-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    margin-bottom: 18px;   /* THIS creates the visible gap above options */
    padding-bottom: 0;
}

.emcq-source-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 700;
    border-radius: 20px;
    padding: 5px 12px 5px 10px;
    letter-spacing: .2px;
    line-height: 1;
    white-space: nowrap;
    cursor: default;
}

/* ── EXAM chip: green background + green border ── */
.emcq-chip-exam {
    background-color: #f0fdf4;
    color: #15803d;
    border: 1.5px solid #86efac;
}
.emcq-chip-exam svg {
    color: #16a34a;
    flex-shrink: 0;
}

/* ── YEAR chip: blue background + blue border ── */
.emcq-chip-year {
    background-color: #eff6ff;
    color: #1d4ed8;
    border: 1.5px solid #93c5fd;
}
.emcq-chip-year svg {
    color: #2563eb;
    flex-shrink: 0;
}

/* ── DIFFICULTY chips ── */
.emcq-chip-diff { border: 1.5px solid transparent; }
.emcq-diff-easy   { background-color: #ecfdf5; color: #065f46; border-color: #6ee7b7; }
.emcq-diff-medium { background-color: #fff7ed; color: #9a3412; border-color: #fdba74; }
.emcq-diff-hard   { background-color: #fef2f2; color: #991b1b; border-color: #fca5a5; }

/* ══════════════════════════════════════════════════════════════
   OPTIONS — start 18px below the chips thanks to margin above
   ══════════════════════════════════════════════════════════════ */
.emcq-options {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 0;
    margin-bottom: 20px;
}

/* Each option row */
.emcq-opt {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 13px 18px;
    background: #fff;
    border: 1px solid #d9d9d9;
    border-top: none;
    cursor: pointer;
    text-align: left;
    font-size: 15px;
    font-family: inherit;
    color: #1a1a1a;
    line-height: 1.6;
    transition: background .12s, border-color .12s;
    position: relative;
}
.emcq-opt:first-child {
    border-top: 1px solid #d9d9d9;
    border-radius: 6px 6px 0 0;
}
.emcq-opt:last-child  { border-radius: 0 0 6px 6px; }
.emcq-opt:only-child  { border-top: 1px solid #d9d9d9; border-radius: 6px; }

.emcq-opt:hover:not(.emcq-correct):not(.emcq-wrong) {
    background: #f5f8ff;
    cursor: pointer;
}

/* Letter circle */
.emcq-opt-label {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 50%;
    background: #f0f0f0;
    border: 1px solid #d1d5db;
    font-weight: 600;
    font-size: 13px;
    color: #555;
    flex-shrink: 0;
    transition: background .12s, color .12s, border-color .12s;
}

.emcq-opt-text {
    flex: 1;
    min-width: 0;
    font-size: 15px;
    color: #222;
    line-height: 1.6;
}

/* ── CORRECT state ─────────────────────────────────────────── */
.emcq-opt.emcq-correct {
    background: #f0fdf4 !important;
    border-color: #86efac !important;
    color: #14532d !important;
    cursor: default;
}
.emcq-opt.emcq-correct + .emcq-opt { border-top-color: #86efac; }
.emcq-opt.emcq-correct .emcq-opt-label {
    background: #16a34a !important;
    color: #fff !important;
    border-color: #16a34a !important;
}
.emcq-opt.emcq-correct .emcq-opt-text { font-weight: 600; color: #15803d; }
.emcq-opt.emcq-correct::after {
    content: "✓";
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    font-weight: 700;
    color: #16a34a;
}

/* ── WRONG state ───────────────────────────────────────────── */
.emcq-opt.emcq-wrong {
    background: #fef2f2 !important;
    border-color: #fca5a5 !important;
    color: #7f1d1d !important;
}
.emcq-opt.emcq-wrong + .emcq-opt { border-top-color: #fca5a5; }
.emcq-opt.emcq-wrong .emcq-opt-label {
    background: #dc2626 !important;
    color: #fff !important;
    border-color: #dc2626 !important;
}
.emcq-opt.emcq-wrong::after {
    content: "✗";
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    font-weight: 700;
    color: #dc2626;
}

/* ── Lock all after correct ────────────────────────────────── */
.emcq-question.emcq-answered .emcq-opt {
    pointer-events: none;
    cursor: default;
}
.emcq-question.emcq-answered .emcq-opt:not(.emcq-correct):not(.emcq-wrong) {
    opacity: 0.5;
}

/* ── Solution reveal wrapper ───────────────────────────────── */
.emcq-reveal { margin-top: 4px; margin-bottom: 4px; }

/* ── Correct Answer shown INSIDE solution body ─────────────── */
.emcq-ans-inside {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #f0fdf4;
    border: 1.5px solid #86efac;
    border-radius: 7px;
    padding: 12px 16px;
    margin-bottom: 14px;
}
.emcq-ans-inside-label {
    font-size: 13px;
    font-weight: 700;
    color: #15803d;
    white-space: nowrap;
    flex-shrink: 0;
}
/* The letter + text value — letter gets a green circle badge */
.emcq-ans-inside-val {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 600;
    color: #14532d;
}
/* First word (the letter A/B/C/D) styled as green circle via JS-added span */
.emcq-ans-letter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    min-width: 30px;
    border-radius: 50%;
    background: #16a34a;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
}
.emcq-ans-text {
    color: #14532d;
    font-size: 15px;
    font-weight: 600;
}

/* Separator between answer and explanation */
.emcq-sol-explanation {
    padding-top: 10px;
    border-top: 1px solid #d1fae5;
    margin-top: 4px;
}
.emcq-sol-explanation:empty { display: none; }

/* ── Solution accordion ─────────────────────────────────────── */
.emcq-solution {
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 4px;
}
.emcq-sol-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 16px;
    background: #eff6ff;
    border: none;
    font-size: 14px;
    font-weight: 700;
    color: #1d4ed8;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    transition: background .12s;
}
.emcq-sol-toggle:hover  { background: #dbeafe; }
.emcq-sol-toggle.open   { background: #dbeafe; border-bottom: 1px solid #bfdbfe; }

.emcq-sol-body {
    padding: 14px 18px;
    background: #f8fafc;
    font-size: 14px;
    color: #1a1a1a;
    line-height: 1.9;
    overflow-x: auto;
    border-top: 1px solid #e0eaff;
}
.emcq-sol-body p            { margin: 0 0 10px; }
.emcq-sol-body p:last-child { margin: 0; }
.emcq-sol-body img          { max-width:100%; height:auto; display:block; border-radius:4px; margin:8px 0; }
.emcq-sol-body strong       { color: #1d4ed8; }
.emcq-sol-body table        { border-collapse:collapse; width:100%; font-size:13px; margin:8px 0; }
.emcq-sol-body th,
.emcq-sol-body td           { border:1px solid #d1d5db; padding:6px 10px; }
.emcq-sol-body th           { background:#f1f5f9; font-weight:700; }

/* ── Pagination ────────────────────────────────────────────── */
.emcq-pagination-wrap  { margin-top:32px; padding-top:20px; border-top:1px solid #e5e7eb; }
.emcq-pag-info         { font-size:13px; color:#6b7280; margin:0 0 12px; }
.emcq-pagination       { display:flex; flex-wrap:wrap; gap:4px; align-items:center; margin-bottom:12px; }
.emcq-page-btn {
    display:inline-flex; align-items:center; justify-content:center;
    min-width:34px; height:34px; padding:0 8px;
    border:1px solid #d1d5db; border-radius:5px;
    background:#fff; color:#374151; font-size:13px; font-weight:500;
    text-decoration:none; transition:background .12s, border-color .12s;
}
.emcq-page-btn:hover             { background:#f3f4f6; border-color:#9ca3af; color:#111; text-decoration:none; }
.emcq-page-btn.emcq-page-active  { background:#166534; border-color:#166534; color:#fff; font-weight:700; box-shadow:0 2px 6px rgba(22,101,52,.35); transform:scale(1.08); }
.emcq-page-btn.emcq-page-prev,
.emcq-page-btn.emcq-page-next    { font-size:15px; font-weight:700; background:#f8fafc; }
.emcq-page-btn.emcq-page-prev:hover,
.emcq-page-btn.emcq-page-next:hover { background:#eff6ff; border-color:#93c5fd; color:#1d4ed8; }

/* ── Jump to page ───────────────────────────────────────────── */
.emcq-jump-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}
.emcq-jump-label {
    font-size: 13px;
    color: #6b7280;
    white-space: nowrap;
}
.emcq-jump-input {
    width: 60px;
    height: 34px;
    border: 1px solid #d1d5db;
    border-radius: 5px;
    padding: 0 8px;
    font-size: 13px;
    font-family: inherit;
    color: #111;
    text-align: center;
    outline: none;
    transition: border-color .12s;
}
.emcq-jump-input:focus { border-color: #2563eb; }
.emcq-jump-btn {
    height: 34px;
    padding: 0 14px;
    background: #166534;
    color: #fff;
    border: none;
    border-radius: 5px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background .12s;
}
.emcq-jump-btn:hover { background: #15803d; }

/* ── Topic list ────────────────────────────────────────────── */
.emcq-topic-list       { display:flex; flex-direction:column; gap:14px; margin-bottom:28px; }
.emcq-topic-group      { background:#f8fafc; border:1px solid #e5e7eb; border-radius:8px; padding:14px 18px; }
.emcq-topic-head       { display:block; font-size:16px; font-weight:700; color:#111; text-decoration:none; margin-bottom:10px; }
.emcq-topic-head:hover { color:#2563eb; }
.emcq-subtopic-links   { display:flex; flex-wrap:wrap; gap:8px; }
.emcq-subtopic-link    { display:inline-block; background:#fff; border:1px solid #d1d5db; border-radius:4px; padding:5px 12px; font-size:13px; color:#2563eb; text-decoration:none; transition:background .12s; }
.emcq-subtopic-link:hover { background:#eff6ff; border-color:#93c5fd; text-decoration:none; }

/* ── Stats bar ─────────────────────────────────────────────── */
.emcq-stats-bar  { display:flex; flex-wrap:wrap; gap:20px; justify-content:center; padding:30px 24px; background:linear-gradient(135deg,#1e3a5f,#2563eb); border-radius:10px; color:#fff; margin-bottom:24px; }
.emcq-stat       { text-align:center; }
.emcq-stat-num   { display:block; font-size:34px; font-weight:800; }
.emcq-stat-label { font-size:12px; opacity:.85; text-transform:uppercase; letter-spacing:1px; }

/* ── No results ────────────────────────────────────────────── */
.emcq-empty { padding:36px; text-align:center; background:#f9fafb; border:1px dashed #d1d5db; border-radius:8px; color:#6b7280; font-size:15px; }

/* ── Mobile ────────────────────────────────────────────────── */
@media (max-width:600px) {
    .emcq-opt        { padding:11px 12px; font-size:14px; }
    .emcq-opt-label  { width:28px; height:28px; min-width:28px; font-size:12px; }
    .emcq-opt-text   { font-size:14px; }
    .emcq-opt::after { font-size:16px; right:12px; }
    .emcq-q-text     { font-size:14px; }
    .emcq-page-btn   { min-width:30px; height:30px; font-size:12px; }
    .emcq-stat-num   { font-size:26px; }
    .emcq-source-chip { font-size:11px; padding:4px 10px 4px 8px; }
}

/* ── Solution Media ─────────────────────────────────────────── */
.emcq-sol-image-wrap {
    margin-top: 14px;
    text-align: center;
}
.emcq-sol-image {
    max-width: 100%;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
.emcq-sol-video-wrap {
    margin-top: 14px;
}
.emcq-video-responsive {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    border-radius: 8px;
    background: #000;
}
.emcq-video-responsive iframe,
.emcq-video-responsive video {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    border-radius: 8px;
}
.emcq-vid-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    background: #eff6ff;
    border: 1.5px solid #93c5fd;
    border-radius: 6px;
    color: #1d4ed8;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    margin-top: 10px;
}
.emcq-vid-link:hover { background: #dbeafe; text-decoration: none; }