/* ===== MCQ Quiz Block — Frontend Styles ===== */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&display=swap');

.mcq-block {
    font-family: 'Nunito', sans-serif;
    background: #ffffff;
    border: 2px solid #e8eaf6;
    border-radius: 16px;
    padding: 28px 28px 20px;
    margin: 28px 0;
    max-width: 720px;
    box-shadow: 0 4px 24px rgba(63, 81, 181, 0.08);
    position: relative;
    overflow: hidden;
}
.mcq-block::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, #3f51b5, #7c4dff, #e91e63);
}

/* ── Question ───────────────────────────────────────── */
.mcq-question {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 20px;
}
.mcq-q-icon {
    flex-shrink: 0;
    width: 36px; height: 36px;
    background: linear-gradient(135deg, #3f51b5, #7c4dff);
    color: #fff; font-weight: 800; font-size: 16px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    margin-top: 2px;
}
.mcq-q-text {
    flex: 1;
    font-size: 17px; font-weight: 700; color: #1a1a2e;
    line-height: 1.65; margin: 0;
}
.mcq-q-text p { margin: 0 0 10px; font-size: 17px; font-weight: 700; color: #1a1a2e; line-height: 1.65; }
.mcq-q-text p:last-child { margin-bottom: 0; }

/* ── Options ────────────────────────────────────────── */
.mcq-options { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.mcq-option-btn {
    display: flex; align-items: center; gap: 12px;
    width: 100%; padding: 13px 16px;
    background: #f5f6ff; border: 2px solid #e0e3ff;
    border-radius: 12px; cursor: pointer;
    text-align: left; font-family: 'Nunito', sans-serif;
    font-size: 15px; font-weight: 600; color: #2d2d5e;
    transition: all 0.2s; outline: none;
}
.mcq-option-btn:hover:not(:disabled) {
    background: #ede7f6; border-color: #7c4dff;
    transform: translateX(4px);
    box-shadow: 0 3px 12px rgba(124, 77, 255, 0.15);
}
.mcq-opt-label {
    flex-shrink: 0; width: 30px; height: 30px;
    background: #fff; border: 2px solid #c5cae9; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 800; color: #3f51b5; transition: all 0.2s;
}
.mcq-opt-text { flex: 1; }
.mcq-opt-icon { flex-shrink: 0; font-size: 18px; font-weight: 800; width: 24px; text-align: center; }

/* Answered states */
.mcq-option-btn.mcq-answered  { cursor: default; transform: none !important; }
.mcq-option-btn.mcq-correct   { background: #e8f5e9; border-color: #43a047; color: #1b5e20; }
.mcq-option-btn.mcq-correct .mcq-opt-label { background: #43a047; border-color: #43a047; color: #fff; }
.mcq-option-btn.mcq-correct .mcq-opt-icon  { color: #2e7d32; }
.mcq-option-btn.mcq-wrong     { background: #fce4ec; border-color: #e53935; color: #7f0000; }
.mcq-option-btn.mcq-wrong .mcq-opt-label   { background: #e53935; border-color: #e53935; color: #fff; }
.mcq-option-btn.mcq-wrong .mcq-opt-icon    { color: #c62828; }

/* ── Result message ─────────────────────────────────── */
.mcq-result { display: none; padding: 12px 16px; border-radius: 10px; font-size: 15px; font-weight: 700; margin-bottom: 12px; }
.mcq-result.mcq-result-visible { display: block; animation: mcqFadeIn 0.35s ease; }
.mcq-result-correct { background: #e8f5e9; color: #2e7d32; border: 1.5px solid #a5d6a7; }
.mcq-result-wrong   { background: #fce4ec; color: #b71c1c; border: 1.5px solid #f48fb1; }

/* ── Explanation ────────────────────────────────────── */
.mcq-explanation {
    display: none;
    background: #fffde7; border: 1.5px solid #ffe082;
    border-radius: 12px; padding: 14px 18px; margin-bottom: 16px;
}
.mcq-explanation.mcq-explanation-visible { display: block; animation: mcqFadeIn 0.4s ease 0.1s both; }
.mcq-exp-title {
    display: block; font-size: 13px; font-weight: 800;
    color: #f57f17; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px;
}
.mcq-exp-body { margin: 0; font-size: 14.5px; font-weight: 600; color: #4e342e; line-height: 1.7; }
.mcq-exp-body p { margin: 0 0 8px; font-size: 14.5px; font-weight: 600; color: #4e342e; line-height: 1.7; }
.mcq-exp-body p:last-child { margin-bottom: 0; }

/* Inline formatting */
.mcq-q-text strong, .mcq-exp-body strong { font-weight: 800; }
.mcq-q-text em,     .mcq-exp-body em     { font-style: italic; }
.mcq-q-text u,      .mcq-exp-body u      { text-decoration: underline; }
.mcq-q-text s,      .mcq-exp-body s      { text-decoration: line-through; }
.mcq-q-text sub,    .mcq-exp-body sub    { font-size: 0.75em; vertical-align: sub; }
.mcq-q-text sup,    .mcq-exp-body sup    { font-size: 0.75em; vertical-align: super; }
.mcq-q-text mark,   .mcq-exp-body mark   { border-radius: 3px; padding: 1px 3px; }

/* ── Social Share ───────────────────────────────────── */
.mcq-share {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 16px;
    border-top: 1.5px dashed #e0e3ff;
}
.mcq-share-label {
    font-size: 12px; font-weight: 800;
    color: #9e9e9e; text-transform: uppercase;
    letter-spacing: 0.5px; margin-right: 2px;
}
.mcq-share-btn {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 7px 14px;
    border-radius: 30px;
    font-family: 'Nunito', sans-serif;
    font-size: 13px; font-weight: 700;
    text-decoration: none; border: none;
    cursor: pointer; transition: all 0.2s ease;
    line-height: 1;
}
.mcq-share-icon { font-size: 14px; line-height: 1; }

/* WhatsApp */
.mcq-share-wa  { background: #25D366; color: #fff; }
.mcq-share-wa:hover  { background: #1da851; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4); color: #fff; text-decoration: none; }

/* Telegram */
.mcq-share-tg  { background: #229ED9; color: #fff; }
.mcq-share-tg:hover  { background: #1a7db5; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(34, 158, 217, 0.4); color: #fff; text-decoration: none; }

/* Twitter / X */
.mcq-share-tw  { background: #000; color: #fff; }
.mcq-share-tw:hover  { background: #333; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); color: #fff; text-decoration: none; }

/* Facebook */
.mcq-share-fb  { background: #1877F2; color: #fff; }
.mcq-share-fb:hover  { background: #0c5fd1; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(24, 119, 242, 0.4); color: #fff; text-decoration: none; }

/* Copy Link */
.mcq-share-copy { background: #f0f0f5; color: #555; }
.mcq-share-copy:hover { background: #e0e0e8; transform: translateY(-2px); }
.mcq-share-copy.mcq-share-copied { background: #e8f5e9; color: #2e7d32; }

/* ── Animation ──────────────────────────────────────── */
@keyframes mcqFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Responsive ─────────────────────────────────────── */
@media ( max-width: 600px ) {
    .mcq-block     { padding: 20px 14px 16px; border-radius: 12px; }
    .mcq-q-text    { font-size: 15px; }
    .mcq-q-text p  { font-size: 15px; }
    .mcq-option-btn { font-size: 14px; padding: 11px 12px; }
    .mcq-share-btn  { font-size: 12px; padding: 6px 11px; }
}

/* ── List styles (core/list format ke liye) ────────────────────────────── */
.mcq-q-text ul,
.mcq-exp-body ul {
    margin: 6px 0 6px 1.4em;
    padding: 0;
    list-style: disc;
}
.mcq-q-text ol,
.mcq-exp-body ol {
    margin: 6px 0 6px 1.4em;
    padding: 0;
    list-style: decimal;
}
.mcq-q-text li,
.mcq-exp-body li {
    margin: 3px 0;
    line-height: 1.6;
}
/* Nested list indent */
.mcq-q-text ul ul,
.mcq-q-text ol ol,
.mcq-q-text ul ol,
.mcq-q-text ol ul,
.mcq-exp-body ul ul,
.mcq-exp-body ol ol {
    margin-left: 1.4em;
}

/* ── Custom indent format (mcq/indent) ──────────────────────────────────── */
.mcq-q-text .mcq-indent,
.mcq-exp-body .mcq-indent {
    display: block;
    margin-left: 2em;
}