/* MCQ Master – Frontend Styles */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=DM+Sans:wght@400;500;600&display=swap');

.mcq-quiz-container {
    --mcq-c1: #6C63FF;
    --mcq-c2: #A78BFA;
    --mcq-c3: #FF6584;
    --mcq-ok: #22C55E;
    --mcq-err: #EF4444;
    --mcq-bg: #F5F3FF;
    --mcq-white: #FFFFFF;
    --mcq-text: #1A1833;
    --mcq-muted: #6B7280;
    --mcq-border: #E5E0FF;
    --mcq-r: 16px;

    font-family: 'DM Sans', sans-serif;
    max-width: 780px;
    margin: 40px auto;
    background: var(--mcq-bg);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 20px 80px rgba(108,99,255,.15), 0 0 0 1px var(--mcq-border);
}

/* ─── Quiz Header ─── */
.mcq-quiz-header {
    background: linear-gradient(135deg, var(--mcq-c1) 0%, var(--mcq-c2) 60%, var(--mcq-c3) 100%);
    padding: 36px 40px 28px;
    color: #fff;
    position: relative;
    overflow: hidden;
}
.mcq-quiz-header::before {
    content: '';
    position: absolute; inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='30' cy='30' r='30' fill='rgba(255,255,255,.04)'/%3E%3C/svg%3E") repeat;
}
.mcq-quiz-title { font-family:'Sora',sans-serif; font-size:26px; font-weight:800; margin:0 0 6px; }
.mcq-quiz-subtitle { font-size:15px; opacity:.85; margin:0 0 20px; }
.mcq-quiz-meta { display:flex; flex-wrap:wrap; gap:10px; }
.mcq-meta-chip {
    display:inline-flex; align-items:center; gap:6px;
    background:rgba(255,255,255,.2); backdrop-filter:blur(8px);
    border:1px solid rgba(255,255,255,.3);
    border-radius:30px; padding:7px 16px;
    font-size:13px; font-weight:600; color:#fff;
}
.mcq-meta-icon { font-size:15px; }
.mcq-timer-chip { background:rgba(255,100,132,.4); }

/* ─── Progress ─── */
.mcq-progress-wrap {
    display:flex; align-items:center; gap:14px;
    padding:18px 40px; background:var(--mcq-white);
    border-bottom:1px solid var(--mcq-border);
}
.mcq-progress-bar {
    flex:1; height:8px; background:#EDE9FE; border-radius:20px; overflow:hidden;
}
.mcq-progress-fill {
    height:100%; border-radius:20px;
    background:linear-gradient(90deg,var(--mcq-c1),var(--mcq-c3));
    transition:width .5s cubic-bezier(.4,0,.2,1);
}
.mcq-progress-label { font-size:13px; font-weight:600; color:var(--mcq-muted); white-space:nowrap; }

/* ─── Questions Wrapper ─── */
.mcq-questions-wrapper { padding:32px 40px; background:var(--mcq-white); min-height:300px; }
.mcq-question-slide { display:none; animation:mcqFadeIn .35s ease; }
.mcq-question-slide.active { display:block; }
@keyframes mcqFadeIn { from{opacity:0;transform:translateX(20px);} to{opacity:1;transform:none;} }
@keyframes mcqFadeLeft { from{opacity:0;transform:translateX(-20px);} to{opacity:1;transform:none;} }
.mcq-question-slide.slide-left { animation:mcqFadeLeft .35s ease; }

.mcq-question-card { position:relative; }
.mcq-q-number-badge {
    display:inline-flex; align-items:center; justify-content:center;
    width:36px; height:36px; border-radius:50%;
    background:linear-gradient(135deg,var(--mcq-c1),var(--mcq-c2));
    color:#fff; font-family:'Sora',sans-serif; font-size:14px; font-weight:800;
    margin-bottom:16px;
}
.mcq-question-text {
    font-family:'Sora',sans-serif; font-size:19px; font-weight:700;
    color:var(--mcq-text); line-height:1.5; margin-bottom:28px;
}

/* ─── Options ─── */
.mcq-options-grid { display:grid; gap:12px; }
.mcq-option {
    display:flex; align-items:center; gap:14px;
    padding:16px 20px; border-radius:14px;
    border:2px solid var(--mcq-border); background:var(--mcq-bg);
    cursor:pointer; transition:all .2s; position:relative; overflow:hidden;
}
.mcq-option:hover { border-color:var(--mcq-c1); background:#EDE9FE; transform:translateX(4px); }
.mcq-option input[type=radio] { display:none; }
.mcq-option.selected { border-color:var(--mcq-c1); background:#EDE9FE; box-shadow:0 4px 16px rgba(108,99,255,.15); }
.mcq-option.correct  { border-color:var(--mcq-ok);  background:#F0FDF4; }
.mcq-option.wrong    { border-color:var(--mcq-err); background:#FEF2F2; }

.mcq-option-label {
    width:36px; height:36px; flex-shrink:0;
    border-radius:10px; background:#fff; border:2px solid var(--mcq-border);
    display:flex; align-items:center; justify-content:center;
    font-family:'Sora',sans-serif; font-size:14px; font-weight:800;
    color:var(--mcq-muted); transition:all .2s;
}
.mcq-option.selected .mcq-option-label { background:var(--mcq-c1); color:#fff; border-color:var(--mcq-c1); }
.mcq-option.correct  .mcq-option-label { background:var(--mcq-ok);  color:#fff; border-color:var(--mcq-ok);  }
.mcq-option.wrong    .mcq-option-label { background:var(--mcq-err); color:#fff; border-color:var(--mcq-err); }
.mcq-option-text { flex:1; font-size:15px; font-weight:500; color:var(--mcq-text); }
.mcq-option-check { opacity:0; font-size:18px; color:var(--mcq-ok); transition:opacity .2s; }
.mcq-option.correct .mcq-option-check { opacity:1; }
.mcq-option.wrong .mcq-option-check { opacity:1; content:'✗'; color:var(--mcq-err); }

/* ─── Navigation ─── */
.mcq-nav-wrap {
    display:flex; align-items:center; justify-content:space-between;
    padding:20px 40px; background:var(--mcq-white);
    border-top:1px solid var(--mcq-border);
}
.mcq-dot-nav { display:flex; gap:6px; }
.mcq-dot {
    width:10px; height:10px; border-radius:50%; background:#E5E0FF; cursor:pointer;
    transition:all .25s;
}
.mcq-dot.active    { background:var(--mcq-c1); transform:scale(1.3); }
.mcq-dot.answered  { background:var(--mcq-c2); }
.mcq-nav-btn {
    padding:12px 28px; border-radius:12px; font-family:'Sora',sans-serif;
    font-size:14px; font-weight:700; cursor:pointer; border:2px solid transparent;
    transition:all .2s;
}
.mcq-prev-btn { background:#F3F4F6; color:var(--mcq-text); }
.mcq-prev-btn:hover:not(:disabled) { background:#E5E7EB; }
.mcq-prev-btn:disabled { opacity:.4; cursor:not-allowed; }
.mcq-next-btn {
    background:linear-gradient(135deg,var(--mcq-c1),var(--mcq-c2));
    color:#fff; box-shadow:0 6px 20px rgba(108,99,255,.35);
}
.mcq-next-btn:hover { transform:translateY(-2px); box-shadow:0 10px 28px rgba(108,99,255,.4); }
.mcq-submit-btn {
    background:linear-gradient(135deg,var(--mcq-c3),#FF8FA3);
    color:#fff; box-shadow:0 6px 20px rgba(255,101,132,.35);
}
.mcq-submit-btn:hover { transform:translateY(-2px); box-shadow:0 10px 28px rgba(255,101,132,.4); }

.mcq-answered-bar {
    text-align:center; padding:10px; font-size:13px; font-weight:500;
    color:var(--mcq-muted); background:var(--mcq-white); border-top:1px solid var(--mcq-border);
}

/* ─── Loading ─── */
.mcq-loading {
    text-align:center; padding:60px; background:var(--mcq-white);
}
.mcq-spinner {
    width:52px; height:52px; border:5px solid #EDE9FE;
    border-top-color:var(--mcq-c1); border-radius:50%;
    animation:spin .8s linear infinite; margin:0 auto 16px;
}
@keyframes spin { to{transform:rotate(360deg);} }
.mcq-loading p { color:var(--mcq-muted); font-weight:500; }

/* ─── Results Panel ─── */
.mcq-results-panel { background:var(--mcq-white); animation:mcqFadeIn .4s ease; }
.mcq-result-hero { padding:48px 40px; text-align:center; }

.mcq-score-ring {
    position:relative; width:160px; height:160px; margin:0 auto 28px;
    display:flex; align-items:center; justify-content:center;
}
.mcq-score-ring svg { position:absolute; inset:0; transform:rotate(-90deg); }
.mcq-ring-bg   { fill:none; stroke:#EDE9FE; stroke-width:10; }
.mcq-ring-fill {
    fill:none; stroke:url(#mcq-gradient); stroke-width:10;
    stroke-linecap:round;
    stroke-dasharray:339.3;
    stroke-dashoffset:339.3;
    transition:stroke-dashoffset 1.2s cubic-bezier(.4,0,.2,1);
}
.mcq-score-text {
    position:relative; font-family:'Sora',sans-serif;
    font-size:40px; font-weight:800; color:var(--mcq-text); line-height:1;
}
.mcq-score-text small { font-size:18px; }

.mcq-result-verdict {
    font-family:'Sora',sans-serif; font-size:24px; font-weight:800;
    margin-bottom:24px;
}
.mcq-result-verdict.pass { color:var(--mcq-ok); }
.mcq-result-verdict.fail { color:var(--mcq-err); }

.mcq-result-breakdown {
    display:inline-flex; align-items:center; gap:0;
    background:var(--mcq-bg); border-radius:16px;
    border:1px solid var(--mcq-border); overflow:hidden; margin-bottom:32px;
}
.mcq-rb-item { padding:18px 32px; text-align:center; }
.mcq-rb-item span { display:block; font-family:'Sora',sans-serif; font-size:30px; font-weight:800; color:var(--mcq-c1); }
.mcq-rb-item label { display:block; font-size:12px; font-weight:600; color:var(--mcq-muted); margin-top:4px; }
.mcq-rb-sep { width:1px; background:var(--mcq-border); align-self:stretch; }

/* ─── Review ─── */
.mcq-review-section { padding:0 40px 32px; }
.mcq-review-title { font-family:'Sora',sans-serif; font-size:18px; font-weight:800; color:var(--mcq-text); margin-bottom:16px; }
.mcq-review-item {
    border-radius:14px; padding:20px; margin-bottom:14px;
    border:2px solid; animation:mcqFadeIn .4s ease both;
}
.mcq-review-item.correct { border-color:var(--mcq-ok);  background:#F0FDF4; }
.mcq-review-item.wrong   { border-color:var(--mcq-err); background:#FEF2F2; }
.mcq-review-q { font-weight:700; font-size:15px; color:var(--mcq-text); margin-bottom:10px; }
.mcq-review-q::before { margin-right:8px; }
.correct .mcq-review-q::before { content:'✓'; color:var(--mcq-ok); }
.wrong   .mcq-review-q::before { content:'✗'; color:var(--mcq-err); }
.mcq-review-ans { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:8px; }
.mcq-review-chip { font-size:13px; padding:5px 14px; border-radius:20px; background:#E5E7EB; color:var(--mcq-muted); }
.mcq-review-chip.correct { background:#DCFCE7; color:#16A34A; font-weight:600; }
.mcq-review-chip.chosen  { background:#DBEAFE; color:#1D4ED8; font-weight:600; }
.mcq-review-chip.wrong-chosen { background:#FEE2E2; color:var(--mcq-err); font-weight:600; }
.mcq-review-explanation { font-size:13px; color:var(--mcq-muted); font-style:italic; margin-top:6px; }

/* ─── Result Actions ─── */
.mcq-result-actions { padding:0 40px 40px; display:flex; justify-content:center; gap:14px; }
.mcq-btn-result {
    padding:14px 36px; border-radius:14px; font-family:'Sora',sans-serif;
    font-size:15px; font-weight:700; cursor:pointer; border:none; transition:all .2s;
}
.mcq-retake {
    background:linear-gradient(135deg,var(--mcq-c1),var(--mcq-c2));
    color:#fff; box-shadow:0 8px 24px rgba(108,99,255,.3);
}
.mcq-retake:hover { transform:translateY(-2px); box-shadow:0 12px 32px rgba(108,99,255,.4); }

/* SVG gradient def (injected by JS) */
.mcq-svg-defs { position:absolute; width:0; height:0; }

/* ─── Error ─── */
.mcq-error { color:#EF4444; font-weight:600; padding:16px; background:#FEF2F2; border-radius:10px; }

/* ─── Responsive ─── */
@media (max-width: 600px) {
    .mcq-quiz-header      { padding:24px 20px 20px; }
    .mcq-quiz-title       { font-size:20px; }
    .mcq-questions-wrapper{ padding:24px 20px; }
    .mcq-nav-wrap         { padding:16px 20px; flex-wrap:wrap; gap:10px; }
    .mcq-result-hero      { padding:32px 20px; }
    .mcq-review-section   { padding:0 20px 24px; }
    .mcq-result-actions   { padding:0 20px 32px; }
    .mcq-progress-wrap    { padding:14px 20px; }
    .mcq-result-breakdown { flex-direction:column; }
    .mcq-rb-sep           { height:1px; width:auto; }
}