/*
 * ExamVillage — MCQ Practice Quiz Page
 * File: assets/css/mcq-practice.css
 *
 * Screens:
 *   [data-state="setup"]   — filter form
 *   [data-state="active"]  — question + options
 *   [data-state="results"] — score summary + review
 *
 * Depends on: global.css (design tokens loaded first)
 * @package ExamVillage
 * @version 3.2 — refined GP overrides + enlarged ABCD keys
 */

/* Fonts: loaded once by ev-global.css */


/* ══════════════════════════════════════════════════════════
   1. GENERATEPRESS STRUCTURAL OVERRIDES
   Kills GP's sidebar/content column model so our quiz gets
   the full viewport width to work with.
   ══════════════════════════════════════════════════════════ */

/* Grid shell */
body.page-template-page-practice .site-content,
body.page-template-page-practice .site-content .inside-site-content {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Primary column — go full width */
body.page-template-page-practice #primary,
body.page-template-page-practice .content-area {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    float: none !important;
}

/* Remove article chrome */
body.page-template-page-practice .inside-article,
body.page-template-page-practice .entry-content,
body.page-template-page-practice .entry-header,
body.page-template-page-practice .entry-footer {
    padding: 0 !important;
    margin:  0 !important;
    max-width: 100% !important;
}

/* Separate-containers layout — transparent card shell */
body.page-template-page-practice .separate-containers .inside-article {
    background:  transparent !important;
    box-shadow:  none        !important;
    border:      none        !important;
    border-radius: 0         !important;
}

/* GP #content padding reset */
body.page-template-page-practice #content {
    padding: 0 !important;
}

/* site-main margin */
body.page-template-page-practice .site-main {
    margin: 0 !important;
}

/* Hide GP page title / WP native breadcrumb if shown */
body.page-template-page-practice .entry-title,
body.page-template-page-practice .page-header {
    display: none !important;
}

/* Sidebar — hide completely on this template */
body.page-template-page-practice #sidebar,
body.page-template-page-practice .widget-area {
    display: none !important;
}

/* Body background colour to match quiz bg */
body.page-template-page-practice {
    background-color: var(--off-white) !important;
}


/* ══════════════════════════════════════════════════════════
   2. LOCAL DESIGN TOKENS
   ══════════════════════════════════════════════════════════ */
:root {
    --quiz-font-display : "Sora", sans-serif;
    --quiz-font-body    : "DM Sans", sans-serif;

    /* Backgrounds */
    --quiz-bg           : var(--off-white);
    --quiz-card         : #FFFFFF;
    --quiz-border       : var(--border);
    --quiz-opt-bg       : var(--g50);
    --quiz-opt-hover    : var(--navy-pale);
    --quiz-opt-correct  : var(--green-pale);
    --quiz-opt-wrong    : var(--red-pale);

    /* Semantic colours */
    --quiz-correct      : var(--green-dark);
    --quiz-correct-dk   : var(--green-deep);
    --quiz-wrong        : var(--rose);
    --quiz-wrong-dk     : var(--rose-deep);
    --quiz-skip         : var(--amber-dark);

    /* Brand */
    --quiz-primary      : var(--navy);
    --quiz-primary-dk   : var(--navy);
    --quiz-accent       : var(--teal-dark);
    --quiz-accent-lt    : var(--teal-tint);
    --quiz-accent-glow  : rgba(0,194,203, .18);

    /* Radii */
    --quiz-radius       : 18px;
    --quiz-radius-sm    : 12px;
    --quiz-radius-xs    :  8px;

    /* Shadows */
    --quiz-shadow       : 0  4px 24px rgba(11,29,58, .10);
    --quiz-shadow-md    : 0  8px 40px rgba(11,29,58, .14);
    --quiz-shadow-lg    : 0 20px 60px rgba(11,29,58, .18);

    /* Option-key badge size (change here to resize A/B/C/D) */
    --quiz-key-size     : 44px;
    --quiz-key-font     : 16px;
}


/* ══════════════════════════════════════════════════════════
   3. PAGE WRAPPER
   ══════════════════════════════════════════════════════════ */
.ev-practice-page {
    font-family    : var(--quiz-font-body);
    background     : var(--quiz-bg);
    min-height     : 100vh;
    padding-bottom : 80px;
}

.ev-practice-page .container {
    max-width : 860px;
    margin    : 10px auto;
    padding   : 0 20px;
}


/* ══════════════════════════════════════════════════════════
   4. BREADCRUMB
   ══════════════════════════════════════════════════════════ */













/* ══════════════════════════════════════════════════════════
   5. APP ROOT
   ══════════════════════════════════════════════════════════ */
#ev-quiz-app { padding-top: 28px; }

.ev-quiz-screen { outline: none; }


/* ══════════════════════════════════════════════════════════
   6. SCREEN 1 — SETUP
   ══════════════════════════════════════════════════════════ */

.ev-quiz-setup__hero {
    text-align    : center;
    margin-bottom : 32px;
}

.ev-quiz-setup__title {
    font-family    : var(--quiz-font-display);
    font-size      : 42px;
    font-weight    : 800;
    color          : var(--quiz-primary);
    letter-spacing : -.5px;
    line-height    : 1.15;
    margin         : 0 0 12px;
    position       : relative;
    display        : inline-block;
}

.ev-quiz-setup__title::after {
    content       : "";
    display       : block;
    height        : 4px;
    width         : 60%;
    margin        : 10px auto 0;
    background    : linear-gradient(90deg, var(--quiz-accent), var(--quiz-accent-lt));
    border-radius : 4px;
}

.ev-quiz-setup__subtitle {
    font-size  : 16px;
    color      : var(--g500);
    max-width  : 520px;
    margin     : 0 auto;
    line-height: 1.6;
}

/* Setup card */
.ev-quiz-setup__card {
    background    : var(--quiz-card);
    border-radius : var(--quiz-radius);
    box-shadow    : var(--quiz-shadow-md);
    padding       : 36px 40px 40px;
    border        : 1px solid var(--quiz-border);
    position      : relative;
    overflow      : hidden;
}

.ev-quiz-setup__card::before {
    content    : "";
    position   : absolute;
    top: 0; left: 0; right: 0;
    height     : 4px;
    background : linear-gradient(90deg, var(--quiz-primary), var(--quiz-accent), var(--quiz-accent-lt));
}

@media (max-width: 600px) {
    .ev-quiz-setup__card { padding: 24px 20px 28px; }
}

/* Form grid */
.ev-quiz-form__grid {
    display               : grid;
    grid-template-columns : repeat(auto-fill, minmax(180px, 1fr));
    gap                   : 18px 20px;
    margin-bottom         : 24px;
}

.ev-quiz-form__group {
    display        : flex;
    flex-direction : column;
    gap            : 7px;
}

.ev-quiz-form__label {
    font-family    : var(--quiz-font-display);
    font-size      : 11.5px;
    font-weight    : 700;
    letter-spacing : .8px;
    text-transform : uppercase;
    color          : var(--g500);
}

.ev-quiz-form__select {
    appearance        : none;
    background        : var(--quiz-opt-bg)
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%234A5578' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
        no-repeat right 14px center;
    background-size   : 12px;
    border            : 1.5px solid var(--quiz-border);
    border-radius     : var(--quiz-radius-xs);
    padding           : 10px 36px 10px 14px;
    font-family       : var(--quiz-font-body);
    font-size         : 14px;
    font-weight       : 500;
    color             : var(--quiz-primary);
    cursor            : pointer;
    transition        : border-color .18s, box-shadow .18s, background-color .18s;
    width             : 100%;
}

.ev-quiz-form__select:hover {
    border-color     : var(--quiz-accent);
    background-color : #fff;
}

.ev-quiz-form__select:focus {
    outline      : none;
    border-color : var(--quiz-accent);
    box-shadow   : 0 0 0 3px var(--quiz-accent-glow);
    background-color: #fff;
}

/* Error box */
.ev-quiz-error {
    background  : var(--quiz-opt-wrong);
    border      : 1.5px solid var(--red-pale);
    border-left : 4px solid var(--quiz-wrong);
    border-radius: var(--quiz-radius-xs);
    padding     : 12px 16px;
    font-size   : 14px;
    font-weight : 500;
    color       : var(--red);
    margin-bottom: 20px;
    animation   : ev-shake .4s var(--ease-bounce, cubic-bezier(.34,1.56,.64,1));
}

@keyframes ev-shake {
    0%, 100% { transform: translateX(0); }
    25%      { transform: translateX(-6px); }
    75%      { transform: translateX(6px); }
}

/* Form footer */
.ev-quiz-form__footer {
    text-align  : center;
    padding-top : 8px;
}


/* ══════════════════════════════════════════════════════════
   7. BUTTONS
   ══════════════════════════════════════════════════════════ */
.ev-btn {
    display         : inline-flex;
    align-items     : center;
    justify-content : center;
    gap             : 8px;
    font-family     : var(--font-body);
    font-weight     : 700;
    border          : none;
    cursor          : pointer;
    border-radius   : 100px;
    transition      : all .22s cubic-bezier(.4,0,.2,1);
    text-decoration : none;
    line-height     : 1;
    white-space     : nowrap;
}

.ev-btn--primary {
    background  : linear-gradient(135deg, var(--teal) 0%, var(--teal-dark) 100%);
    color       : #fff;
    padding     : 13px 28px;
    font-size   : 15px;
    box-shadow  : 0 4px 14px rgba(0,194,203,.35);
}

.ev-btn--primary:hover:not(:disabled) {
    transform  : translateY(-2px);
    box-shadow : 0 8px 24px rgba(0,194,203,.45);
    filter     : brightness(1.06);
}

.ev-btn--primary:active:not(:disabled) {
    transform  : translateY(0);
    box-shadow : 0 2px 10px rgba(11,29,58,.22);
}

.ev-btn--primary:disabled {
    opacity : .55;
    cursor  : not-allowed;
}

.ev-btn--lg {
    padding       : 15px 40px;
    font-size     : 16px;
    border-radius : var(--quiz-radius-sm);
    min-width     : 200px;
}

.ev-btn--secondary {
    background    : var(--quiz-opt-bg);
    color         : var(--quiz-primary);
    border        : 1.5px solid var(--quiz-border);
    padding       : 13px 24px;
    font-size     : 14px;
}

.ev-btn--secondary:hover {
    background   : var(--quiz-opt-hover);
    border-color : var(--quiz-accent);
}

.ev-btn--ghost {
    background    : transparent;
    color         : var(--g500);
    border        : 1.5px solid var(--quiz-border);
    padding       : 11px 20px;
    font-size     : 14px;
    font-family   : var(--quiz-font-body);
    font-weight   : 500;
}

.ev-btn--ghost:hover {
    background : var(--quiz-opt-bg);
    color      : var(--quiz-primary);
}

.ev-btn--danger-ghost {
    color        : var(--quiz-wrong);
    border-color : var(--red-pale);
}

.ev-btn--danger-ghost:hover {
    background   : var(--quiz-opt-wrong);
    border-color : var(--quiz-wrong);
}

/* Loading spinner */
.ev-quiz-start__loading {
    display     : inline-flex;
    align-items : center;
    gap         : 10px;
}

.ev-spinner {
    display       : inline-block;
    width         : 18px;
    height        : 18px;
    border        : 2.5px solid rgba(255,255,255,.3);
    border-top-color: #fff;
    border-radius : 50%;
    animation     : ev-spin .7s linear infinite;
}

.ev-spinner--sm { width: 15px; height: 15px; }

@keyframes ev-spin { to { transform: rotate(360deg); } }

/* Stats strip */
.ev-quiz-stats-strip {
    display         : flex;
    align-items     : center;
    justify-content : center;
    flex-wrap       : wrap;
    gap             : 8px 6px;
    margin-top      : 28px;
    padding         : 14px 20px;
    background      : linear-gradient(135deg, var(--quiz-primary), var(--quiz-accent));
    border-radius   : var(--quiz-radius-sm);
    font-family     : var(--quiz-font-display);
    font-size       : 13px;
    font-weight     : 600;
    color           : rgba(255,255,255,.9);
    letter-spacing  : .2px;
}

.ev-quiz-stats-strip__sep { color: rgba(255,255,255,.4); }


/* ══════════════════════════════════════════════════════════
   8. SCREEN 2 — ACTIVE QUIZ
   ══════════════════════════════════════════════════════════ */

/* Progress row */
.ev-quiz-progress-row {
    display       : flex;
    flex-direction: column;
    gap           : 10px;
    margin-bottom : 20px;
}

.ev-quiz-progress-meta {
    display         : flex;
    justify-content : space-between;
    align-items     : center;
}

.ev-quiz-qnum {
    font-family    : var(--quiz-font-display);
    font-size      : 13px;
    font-weight    : 700;
    color          : var(--quiz-accent);
    letter-spacing : .3px;
    text-transform : uppercase;
}

.ev-quiz-score-live {
    font-family   : var(--quiz-font-display);
    font-size     : 13px;
    font-weight   : 700;
    color         : var(--g500);
    background    : var(--quiz-card);
    padding       : 4px 12px;
    border-radius : 20px;
    border        : 1.5px solid var(--quiz-border);
}

/* Progress bar */
.ev-quiz-progress-bar {
    height        : 7px;
    background    : var(--quiz-border);
    border-radius : 10px;
    overflow      : hidden;
}

.ev-quiz-progress-bar__fill {
    height        : 100%;
    background    : linear-gradient(90deg, var(--quiz-accent), var(--quiz-accent-lt));
    border-radius : 10px;
    width         : 0%;
    transition    : width .5s cubic-bezier(.4,0,.2,1);
}

/* Timer */
.ev-quiz-timer {
    display       : inline-flex;
    align-items   : center;
    gap           : 8px;
    align-self    : flex-end;
    font-family   : var(--quiz-font-display);
    font-size     : 14px;
    font-weight   : 700;
    color         : var(--quiz-accent);
    background    : var(--quiz-card);
    border        : 1.5px solid var(--quiz-border);
    border-radius : 24px;
    padding       : 6px 14px 6px 10px;
    box-shadow    : var(--quiz-shadow);
    transition    : color .3s, border-color .3s, background .3s;
}

.ev-quiz-timer__icon { flex-shrink: 0; }

.ev-quiz-timer--warning {
    color        : var(--quiz-skip);
    border-color : var(--amber-light);
    background   : var(--amber-pale);
}

.ev-quiz-timer--urgent {
    color        : var(--quiz-wrong);
    border-color : var(--red-pale);
    background   : var(--quiz-opt-wrong);
    animation    : ev-pulse-urgent 1s ease infinite;
}

@keyframes ev-pulse-urgent {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.04); }
}

.ev-quiz-timer__ring        { flex-shrink: 0; }
.ev-quiz-timer__ring-bg     { stroke: var(--quiz-border); }
.ev-quiz-timer__ring-track  { stroke: var(--quiz-accent); transition: stroke-dashoffset .9s linear, stroke .3s; }
.ev-quiz-timer--warning .ev-quiz-timer__ring-track { stroke: var(--quiz-skip); }
.ev-quiz-timer--urgent  .ev-quiz-timer__ring-track { stroke: var(--quiz-wrong); }


/* ─── Question card ───────────────────────────────────── */
.ev-quiz-card {
    background    : var(--quiz-card);
    border-radius : var(--quiz-radius);
    box-shadow    : var(--quiz-shadow-md);
    padding       : 32px 36px 28px;
    border        : 1px solid var(--quiz-border);
    position      : relative;
    overflow      : hidden;
    animation     : ev-card-in .3s cubic-bezier(.34,1.56,.64,1);
}

@keyframes ev-card-in {
    from { opacity: 0; transform: translateY(14px) scale(.98); }
    to   { opacity: 1; transform: translateY(0)    scale(1);   }
}

.ev-quiz-card::before {
    content    : "";
    position   : absolute;
    top: 0; left: 0; right: 0;
    height     : 4px;
    background : linear-gradient(90deg, var(--quiz-primary), var(--quiz-accent), var(--quiz-accent-lt));
}

@media (max-width: 600px) {
    .ev-quiz-card { padding: 24px 18px 20px; }
}

/* Card header */
.ev-quiz-card__header {
    display     : flex;
    align-items : center;
    gap         : 10px;
    margin-bottom: 18px;
}

.ev-quiz-card__source {
    font-size  : 12px;
    color      : var(--g300);
    font-style : italic;
}

/* Difficulty badge */
.ev-badge {
    display        : inline-flex;
    align-items    : center;
    gap            : 4px;
    font-family    : var(--quiz-font-display);
    font-size      : 11px;
    font-weight    : 700;
    letter-spacing : .6px;
    text-transform : uppercase;
    padding        : 3px 10px;
    border-radius  : 20px;
}

.ev-badge--diff-easy   { background: var(--green-pale); color: var(--green-dark); }
.ev-badge--diff-medium { background: var(--amber-pale); color: var(--amber-dark); }
.ev-badge--diff-hard   { background: var(--red-pale); color: var(--rose); }

/* Question text */
.ev-quiz-card__question {
    font-family    : var(--quiz-font-display);
    font-size      : 21px;
    font-weight    : 700;
    color          : var(--quiz-primary);
    line-height    : 1.5;
    margin         : 0 0 26px;
    letter-spacing : -.1px;
}


/* ─── Answer options ──────────────────────────────────── */
.ev-quiz-options {
    list-style     : none;
    margin         : 0;
    padding        : 0;
    display        : flex;
    flex-direction : column;
    gap            : 12px;           /* slightly more breathing room */
}

.ev-quiz-option {
    display       : flex;
    align-items   : center;
    gap           : 16px;            /* more space between key and text */
    padding       : 14px 18px 14px 14px;
    background    : var(--quiz-opt-bg);
    border        : 1.5px solid var(--quiz-border);
    border-radius : var(--quiz-radius-sm);
    cursor        : pointer;
    transition    : all .18s cubic-bezier(.4,0,.2,1);
    position      : relative;
    overflow      : hidden;
}

.ev-quiz-option::before {
    content    : "";
    position   : absolute;
    inset      : 0;
    background : linear-gradient(135deg, var(--quiz-accent), var(--quiz-accent-lt));
    opacity    : 0;
    transition : opacity .2s;
}

.ev-quiz-option:hover:not([aria-disabled]) {
    border-color : var(--quiz-accent);
    background   : var(--quiz-opt-hover);
    transform    : translateX(4px);
    box-shadow   : var(--quiz-shadow);
}

.ev-quiz-option:focus {
    outline    : none;
    border-color: var(--quiz-accent);
    box-shadow : 0 0 0 3px var(--quiz-accent-glow);
}

.ev-quiz-option[aria-disabled] { cursor: default; }


/* ── Option key badge A / B / C / D ─────────────────────
   Increased to 44 × 44 px with 16 px bold text.
   Tweak --quiz-key-size / --quiz-key-font in :root above.
────────────────────────────────────────────────────────── */
.ev-quiz-option__key {
    flex-shrink     : 0;
    width           : var(--quiz-key-size);
    height          : var(--quiz-key-size);
    display         : flex;
    align-items     : center;
    justify-content : center;
    background      : var(--quiz-card);
    border          : 2px solid var(--quiz-border);
    border-radius   : 50%;
    font-family     : var(--quiz-font-display);
    font-size       : var(--quiz-key-font);
    font-weight     : 800;
    color           : var(--quiz-accent);
    transition      : all .18s;
    position        : relative;
    z-index         : 1;
    box-shadow      : 0 2px 6px rgba(11,29,58,.08);
}

/* Hover — tint the key circle */
.ev-quiz-option:hover:not([aria-disabled]) .ev-quiz-option__key {
    background   : var(--quiz-accent);
    border-color : var(--quiz-accent);
    color        : #fff;
    box-shadow   : 0 3px 10px rgba(0,194,203,.30);
}

.ev-quiz-option__text {
    flex       : 1;
    font-size  : 15px;
    font-weight: 500;
    color      : var(--quiz-primary);
    line-height: 1.45;
    position   : relative;
    z-index    : 1;
}

.ev-quiz-option__indicator {
    flex-shrink : 0;
    width       : 22px;
    height      : 22px;
    border-radius: 50%;
    position    : relative;
    z-index     : 1;
    opacity     : 0;
    transition  : opacity .2s;
}


/* ── Correct state ───────────────────────────────────── */
.ev-quiz-option--correct {
    background : var(--quiz-opt-correct) !important;
    border-color: var(--quiz-correct)   !important;
    transform  : none                   !important;
    animation  : ev-correct-pop .4s cubic-bezier(.34,1.56,.64,1);
}

.ev-quiz-option--correct .ev-quiz-option__key {
    background   : var(--quiz-correct);
    border-color : var(--quiz-correct);
    color        : #fff;
    box-shadow   : 0 3px 10px rgba(6,214,160,.35);
}

.ev-quiz-option--correct .ev-quiz-option__indicator::before {
    content  : "✓";
    position : absolute;
    inset    : 0;
    display  : flex;
    align-items    : center;
    justify-content: center;
    font-size: 14px;
    color    : var(--quiz-correct);
    opacity  : 1;
}

.ev-quiz-option--correct .ev-quiz-option__indicator { opacity: 1; }

@keyframes ev-correct-pop {
    0%   { transform: scale(.97); }
    60%  { transform: scale(1.02); }
    100% { transform: scale(1); }
}


/* ── Wrong state ─────────────────────────────────────── */
.ev-quiz-option--wrong {
    background : var(--quiz-opt-wrong) !important;
    border-color: var(--quiz-wrong)   !important;
    transform  : none                 !important;
    animation  : ev-wrong-shake .35s ease;
}

.ev-quiz-option--wrong .ev-quiz-option__key {
    background   : var(--quiz-wrong);
    border-color : var(--quiz-wrong);
    color        : #fff;
    box-shadow   : 0 3px 10px rgba(239,71,111,.30);
}

.ev-quiz-option--wrong .ev-quiz-option__indicator::before {
    content  : "✕";
    position : absolute;
    inset    : 0;
    display  : flex;
    align-items    : center;
    justify-content: center;
    font-size: 13px;
    color    : var(--quiz-wrong);
    opacity  : 1;
}

.ev-quiz-option--wrong .ev-quiz-option__indicator { opacity: 1; }

@keyframes ev-wrong-shake {
    0%, 100% { transform: translateX(0);  }
    25%      { transform: translateX(-5px); }
    75%      { transform: translateX(5px);  }
}


/* ─── Feedback panel ──────────────────────────────────── */
.ev-quiz-feedback {
    margin-top    : 20px;
    padding       : 18px 20px;
    border-radius : var(--quiz-radius-xs);
    background    : var(--g50, var(--g50));
    border-left   : 4px solid var(--quiz-accent);
    animation     : ev-feedback-in .3s cubic-bezier(.4,0,.2,1);
}

@keyframes ev-feedback-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.ev-quiz-feedback__result {
    font-family   : var(--quiz-font-display);
    font-size     : 15px;
    font-weight   : 700;
    margin-bottom : 8px;
}

.ev-quiz-feedback__result--correct { color: var(--quiz-correct); }
.ev-quiz-feedback__result--wrong   { color: var(--quiz-wrong); }
.ev-quiz-feedback__result--timeout { color: var(--quiz-skip); }

.ev-quiz-feedback__explanation {
    font-size  : 14px;
    color      : var(--g700, var(--g700));
    line-height: 1.6;
}

.ev-quiz-feedback__reference {
    font-size  : 12px;
    color      : var(--g300, var(--g300));
    margin-top : 8px;
    font-style : italic;
}


/* ─── Navigation row ──────────────────────────────────── */
.ev-quiz-nav {
    display     : flex;
    align-items : center;
    gap         : 12px;
    margin-top  : 20px;
    flex-wrap   : wrap;
}

.ev-quiz-nav .ev-btn--primary {
    flex      : 1;
    min-width : 160px;
}

/* Auto-advance fill animation on Next button */
@keyframes ev-auto-advance-fill {
    from { background-size: 100% 100%; }
    to   { background-size: 0%   100%; }
}

.ev-btn--auto-advance {
    position         : relative;
    background-image : linear-gradient(rgba(255,255,255,.18), rgba(255,255,255,.18));
    background-repeat  : no-repeat;
    background-position: left center;
    background-size  : 100% 100%;
    animation        : ev-auto-advance-fill 2.5s linear forwards;
}


/* ══════════════════════════════════════════════════════════
   9. SCREEN 3 — RESULTS
   ══════════════════════════════════════════════════════════ */

.ev-results-summary {
    background    : var(--quiz-card);
    border-radius : var(--quiz-radius);
    box-shadow    : var(--quiz-shadow-lg);
    padding       : 40px;
    border        : 1px solid var(--quiz-border);
    display       : flex;
    align-items   : center;
    gap           : 40px;
    margin-bottom : 32px;
    position      : relative;
    overflow      : hidden;
    animation     : ev-card-in .4s cubic-bezier(.34,1.56,.64,1);
}

.ev-results-summary::before {
    content    : "";
    position   : absolute;
    top: 0; left: 0; right: 0;
    height     : 5px;
    background : linear-gradient(90deg, var(--quiz-primary), var(--quiz-accent), var(--quiz-accent-lt));
}

@media (max-width: 640px) {
    .ev-results-summary {
        flex-direction : column;
        padding        : 28px 24px;
        gap            : 24px;
        text-align     : center;
    }
}

/* Score ring */
.ev-results-summary__score-ring {
    flex-shrink : 0;
    position    : relative;
    width       : 120px;
    height      : 120px;
}

.ev-results-summary__score-ring svg {
    position : absolute;
    top: 0; left: 0;
}

.ev-results-ring__bg   { stroke: var(--quiz-border); }
.ev-results-ring__fill {
    stroke     : var(--quiz-accent);
    transition : stroke-dashoffset .9s cubic-bezier(.4,0,.2,1), stroke .4s;
}

.ev-results-summary__pct {
    position        : absolute;
    inset           : 0;
    display         : flex;
    align-items     : center;
    justify-content : center;
    font-family     : var(--quiz-font-display);
    font-size       : 22px;
    font-weight     : 800;
    color           : var(--quiz-primary);
}

/* Results text */
.ev-results-summary__text { flex: 1; }

.ev-results-summary__title {
    font-family    : var(--quiz-font-display);
    font-size      : 28px;
    font-weight    : 800;
    color          : var(--quiz-primary);
    margin         : 0 0 6px;
    letter-spacing : -.3px;
}

.ev-results-summary__headline {
    font-size  : 15px;
    color      : var(--g500);
    margin     : 0 0 20px;
}

/* Stats grid */
.ev-results-summary__stats {
    display               : grid;
    grid-template-columns : repeat(4, 1fr);
    gap                   : 12px;
    margin                : 0 0 24px;
}

@media (max-width: 560px) {
    .ev-results-summary__stats { grid-template-columns: repeat(2, 1fr); }
}

.ev-results-summary__stat {
    background    : var(--quiz-opt-bg);
    border-radius : var(--quiz-radius-xs);
    padding       : 12px 10px;
    text-align    : center;
    border        : 1.5px solid var(--quiz-border);
}

.ev-results-summary__stat dt {
    font-family    : var(--quiz-font-display);
    font-size      : 10px;
    font-weight    : 700;
    letter-spacing : .8px;
    text-transform : uppercase;
    color          : var(--g300);
    margin-bottom  : 4px;
}

.ev-results-summary__stat dd {
    font-family : var(--quiz-font-display);
    font-size   : 22px;
    font-weight : 800;
    margin      : 0;
    color       : var(--quiz-primary);
}

.ev-results-summary__stat--correct dd { color: var(--quiz-correct); }
.ev-results-summary__stat--wrong   dd { color: var(--quiz-wrong); }
.ev-results-summary__stat--skipped dd { color: var(--quiz-skip); }

/* Grade colour variants */
.ev-results-summary--excellent .ev-results-ring__fill { stroke: var(--quiz-correct)  !important; }
.ev-results-summary--great     .ev-results-ring__fill { stroke: var(--green-dark)              !important; }
.ev-results-summary--good      .ev-results-ring__fill { stroke: var(--quiz-skip)     !important; }
.ev-results-summary--fair      .ev-results-ring__fill { stroke: var(--amber-dark)             !important; }
.ev-results-summary--poor      .ev-results-ring__fill { stroke: var(--quiz-wrong)   !important; }

/* Action buttons */
.ev-results-summary__actions {
    display   : flex;
    gap       : 12px;
    flex-wrap : wrap;
}

@media (max-width: 640px) {
    .ev-results-summary__actions { justify-content: center; }
}

/* Review list */
.ev-results-review {
    background    : var(--quiz-card);
    border-radius : var(--quiz-radius);
    border        : 1px solid var(--quiz-border);
    box-shadow    : var(--quiz-shadow);
    overflow      : hidden;
}

.ev-results-review__title {
    font-family    : var(--quiz-font-display);
    font-size      : 16px;
    font-weight    : 800;
    color          : var(--quiz-primary);
    letter-spacing : -.1px;
    margin         : 0;
    padding        : 20px 28px;
    border-bottom  : 1px solid var(--quiz-border);
    background     : var(--quiz-opt-bg);
}

.ev-results-review__list {
    list-style : none;
    margin     : 0;
    padding    : 0;
}

/* Review item */
.ev-review-item {
    padding       : 22px 28px;
    border-bottom : 1px solid var(--quiz-border);
    animation     : ev-card-in .25s cubic-bezier(.4,0,.2,1) both;
}

.ev-review-item:last-child { border-bottom: none; }

@media (max-width: 600px) {
    .ev-review-item { padding: 18px 20px; }
}

.ev-review-item__header {
    display     : flex;
    align-items : center;
    gap         : 10px;
    margin-bottom: 10px;
}

.ev-review-item__num {
    flex-shrink     : 0;
    width           : 26px;
    height          : 26px;
    display         : flex;
    align-items     : center;
    justify-content : center;
    background      : var(--quiz-opt-bg);
    border          : 1.5px solid var(--quiz-border);
    border-radius   : 50%;
    font-family     : var(--quiz-font-display);
    font-size       : 11px;
    font-weight     : 800;
    color           : var(--quiz-accent);
}

.ev-review-item--correct .ev-review-item__num { background: var(--green-pale); border-color: var(--quiz-correct); color: var(--quiz-correct); }
.ev-review-item--wrong   .ev-review-item__num { background: var(--quiz-opt-wrong); border-color: var(--quiz-wrong); color: var(--quiz-wrong); }
.ev-review-item--skipped .ev-review-item__num { background: var(--amber-pale); border-color: var(--quiz-skip); color: var(--quiz-skip); }

.ev-review-item__status {
    font-family    : var(--quiz-font-display);
    font-size      : 10.5px;
    font-weight    : 700;
    letter-spacing : .6px;
    text-transform : uppercase;
    padding        : 2px 9px;
    border-radius  : 20px;
}

.ev-review-item--correct .ev-review-item__status { background: var(--green-pale); color: var(--quiz-correct); }
.ev-review-item--wrong   .ev-review-item__status { background: var(--quiz-opt-wrong); color: var(--quiz-wrong); }
.ev-review-item--skipped .ev-review-item__status { background: var(--amber-pale); color: var(--quiz-skip); }

.ev-review-item__question {
    font-family : var(--quiz-font-display);
    font-size   : 15px;
    font-weight : 600;
    color       : var(--quiz-primary);
    line-height : 1.5;
    margin      : 0 0 14px;
}

/* Review option grid */
.ev-review-item__options {
    list-style            : none;
    margin                : 0;
    padding               : 0;
    display               : grid;
    grid-template-columns : 1fr 1fr;
    gap                   : 8px;
}

@media (max-width: 500px) {
    .ev-review-item__options { grid-template-columns: 1fr; }
}

.ev-review-item__option {
    display       : flex;
    align-items   : center;
    gap           : 8px;
    padding       : 9px 13px;
    border-radius : var(--quiz-radius-xs);
    font-size     : 13.5px;
    font-weight   : 500;
    color         : var(--g500);
    background    : var(--quiz-opt-bg);
    border        : 1.5px solid var(--quiz-border);
}

.ev-review-item__option--correct {
    background   : var(--green-pale);
    border-color : var(--quiz-correct);
    color        : var(--green-text);
}

.ev-review-item__option--wrong {
    background   : var(--quiz-opt-wrong);
    border-color : var(--quiz-wrong);
    color        : var(--red);
}

/* Review option key — also enlarged to match active quiz */
.ev-review-item__option-key {
    flex-shrink     : 0;
    width           : 26px;
    height          : 26px;
    display         : flex;
    align-items     : center;
    justify-content : center;
    border-radius   : 50%;
    font-family     : var(--quiz-font-display);
    font-size       : 11px;
    font-weight     : 800;
    background      : var(--quiz-border);
    color           : var(--g500);
}

.ev-review-item__option--correct .ev-review-item__option-key { background: var(--quiz-correct); color: #fff; }
.ev-review-item__option--wrong   .ev-review-item__option-key { background: var(--quiz-wrong);   color: #fff; }

.ev-review-item__explanation {
    font-size     : 13.5px;
    color         : var(--g700, var(--g700));
    line-height   : 1.6;
    margin        : 14px 0 0;
    padding       : 12px 14px;
    background    : var(--g50, var(--g50));
    border-radius : var(--quiz-radius-xs);
    border-left   : 3px solid var(--quiz-accent);
}

.ev-review-item__reference {
    font-size  : 12px;
    color      : var(--g300);
    margin     : 8px 0 0;
    font-style : italic;
}


/* ══════════════════════════════════════════════════════════
   10. CONTEXT BANNER
   ══════════════════════════════════════════════════════════ */
.ev-quiz-context-banner {
    display         : flex;
    flex-wrap       : wrap;
    align-items     : center;
    justify-content : space-between;
    gap             : 10px;
    background      : var(--teal-pale);
    border          : 1px solid var(--teal-tint);
    border-radius   : 10px;
    padding         : 12px 16px;
    margin-bottom   : 16px;
}

.ev-quiz-context-banner__sets {
    display     : flex;
    flex-wrap   : wrap;
    align-items : center;
    gap         : 8px;
}

.ev-quiz-context-banner__label {
    font-size   : 13px;
    font-weight : 600;
    color       : var(--royal);
    white-space : nowrap;
}

.ev-quiz-context-banner__tag {
    background    : var(--teal-dark);
    color         : #fff;
    border-radius : 5px;
    padding       : 3px 10px;
    font-size     : 12px;
    font-weight   : 700;
    letter-spacing: .02em;
}

.ev-quiz-context-banner__count {
    background    : var(--off-white);
    color         : var(--text-mid);
    border-radius : 5px;
    padding       : 3px 10px;
    font-size     : 12px;
    font-weight   : 600;
    border        : 1px solid var(--border);
}

.ev-quiz-context-banner__back {
    font-size       : 12px;
    font-weight     : 600;
    color           : var(--teal-dark);
    text-decoration : none;
    white-space     : nowrap;
    flex-shrink     : 0;
}

.ev-quiz-context-banner__back:hover {
    text-decoration : underline;
    color           : var(--teal-deep);
}

@media (max-width: 600px) {
    .ev-quiz-context-banner { flex-direction: column; align-items: flex-start; }
}

.ev-quiz-context-banner--active {
    margin-bottom : 16px;
    font-size     : 13px;
    padding       : 10px 14px;
}

.ev-quiz-context-banner--active .ev-quiz-context-banner__back { font-size: 12px; }


/* ══════════════════════════════════════════════════════════
   11. UTILITIES
   ══════════════════════════════════════════════════════════ */
.sr-only {
    position   : absolute;
    width      : 1px;
    height     : 1px;
    padding    : 0;
    margin     : -1px;
    overflow   : hidden;
    clip       : rect(0,0,0,0);
    white-space: nowrap;
    border     : 0;
}

/* ══════════════════════════════════════════════════════════
   12. REDUCED MOTION
   ══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration : .01ms !important;
        transition-duration: .01ms !important;
    }
}


/* Mobile font sizes (fixed values, no clamp) */
@media (max-width: 600px) {
    .ev-quiz-setup__title { font-size: 28px; }
    .ev-quiz-card__question { font-size: 17px; }
    .ev-results-summary__title { font-size: 22px; }
}

/* ===============================================================
   ExamVillage — Practice / Test mode redesign (2026-10)
   Uses ev-global.css tokens; this stylesheet loads AFTER ev-global.
   =============================================================== */
body.page-template-page-practice .ev-practice-wrap { --ev-mode-accent:var(--green-dark); --ev-mode-soft:var(--green-pale); --ev-mode-edge:var(--green-tint); color:var(--text); background:var(--white); }
body.page-template-page-practice .ev-practice-wrap.ev-mode-test { --ev-mode-accent:#dc2626; --ev-mode-soft:#fff1f2; --ev-mode-edge:#fecdd3; }
body.page-template-page-practice .ev-practice-wrap .container {max-width:1200px;width:100%;margin:0 auto;padding:0 24px;box-sizing:border-box;}


.ev-mode-hero {display:flex;align-items:center;gap:24px;min-height:140px;padding:26px 32px;border-radius:16px;background:linear-gradient(115deg,var(--ev-mode-soft),#fff);border:1px solid var(--ev-mode-edge);margin:8px 0 18px;box-sizing:border-box;}
.ev-mode-hero__icon {flex:0 0 68px;width:68px;height:68px;border-radius:50%;display:grid;place-items:center;background:var(--ev-mode-accent);color:white;font-size:34px;}
.ev-mode-hero__copy {flex:1;min-width:0;}
.ev-mode-hero__eyebrow {font-size:11px;font-weight:800;letter-spacing:.13em;color:var(--ev-mode-accent);}
.ev-mode-hero h1 {font-size:32px;line-height:1.15;margin:3px 0 8px;color:var(--ev-mode-accent);font-family:var(--font-display);}
.ev-mode-hero p {font-size:15px;margin:0;color:var(--text-mid);}
.ev-mode-hero__benefits {list-style:none;padding:14px 18px;margin:0;background:rgba(255,255,255,.78);border-radius:12px;min-width:215px;}
.ev-mode-hero__benefits li {margin:4px 0;font-size:12px;color:var(--text);}
.ev-mode-hero__benefits li:before {content:"✓";color:var(--ev-mode-accent);font-weight:900;margin-right:9px;}
.ev-mode-heading {margin:12px 0 20px;}
.ev-mode-heading h2 {font-size:25px;line-height:1.25;margin:0 0 12px;color:var(--navy);font-family:var(--font-display);}
.ev-mode-heading__chips {display:flex;flex-wrap:wrap;gap:9px;}
.ev-mode-heading__chips span {font-size:12px;font-weight:600;padding:7px 13px;background:var(--g50);border:1px solid var(--border);border-radius:8px;color:var(--text-mid);}
.ev-practice-wrap .ev-quiz-screen--active {max-width:none;}
.ev-mode-active-grid {display:grid;grid-template-columns:minmax(0, 1fr) 290px;gap:22px;align-items:start;margin-bottom:45px;}
.ev-mode-active-main {min-width:0;border:1px solid var(--border);border-radius:13px;padding:22px;background:var(--white);box-shadow:var(--sh-xs);}
.ev-mode-active-main .ev-quiz-progress-row {margin:0 0 18px;}
.ev-mode-active-main .ev-quiz-progress-bar__fill {background:var(--ev-mode-accent)!important;}
.ev-mode-active-main .ev-quiz-qnum {color:var(--navy);font-size:15px;font-weight:800;}
.ev-mode-active-main .ev-quiz-card {border:0;box-shadow:none;background:transparent;padding:0;margin:0;}
.ev-mode-active-main .ev-quiz-card__question {font-size:19px;font-weight:800;color:var(--navy);line-height:1.5;margin-bottom:20px;}
.ev-mode-active-main .ev-quiz-options {display:grid;gap:10px;padding:0;}
.ev-mode-active-main .ev-quiz-option {min-height:53px;border:1px solid var(--border);border-radius:9px;background:#fff;padding:10px 14px;box-sizing:border-box;}
.ev-mode-active-main .ev-quiz-option__key {width:31px;height:31px;min-width:31px;border-radius:50%;border:1px solid var(--g200);background:var(--g50);color:var(--navy);font-weight:800;display:grid;place-items:center;}
.ev-mode-active-main .ev-quiz-option--selected {border-color:var(--ev-mode-accent)!important;background:var(--ev-mode-soft)!important;}
.ev-mode-practice .ev-quiz-option--correct {background:var(--green-pale)!important;border-color:var(--green-dark)!important;}
.ev-mode-active-main .ev-quiz-feedback {margin-top:18px;background:var(--green-pale);border:1px solid var(--green-tint);border-radius:10px;padding:18px;}
.ev-mode-active-main .ev-quiz-nav {display:flex;gap:12px;align-items:center;justify-content:space-between;margin-top:22px;padding-top:14px;border-top:1px solid var(--border);flex-wrap:wrap;}
.ev-mode-active-main .ev-quiz-nav .ev-btn--primary {background:var(--ev-mode-accent)!important;border-color:var(--ev-mode-accent)!important;color:white!important;}
.ev-mode-active-main .ev-quiz-nav .ev-btn {border-radius:9px;font-weight:700;}
.ev-mode-side {display:grid;gap:15px;}
.ev-mode-side__panel {border:1px solid var(--border);border-radius:12px;background:#fff;padding:18px;box-shadow:var(--sh-xs);min-width:0;}
.ev-mode-side__panel h3 {font-size:15px;color:var(--navy);margin:0 0 14px;font-weight:800;}
.ev-mode-side__progress {background:linear-gradient(135deg,var(--ev-mode-soft),#fff);}
.ev-mode-side__progress>p {font-size:13px;font-weight:700;color:var(--ev-mode-accent);}
.ev-mode-side__stat {display:flex;justify-content:space-between;gap:12px;font-size:13px;padding:8px 0;border-bottom:1px solid var(--border);}
.ev-mode-side__stat:last-child {border:0;}
.ev-mode-side__stat strong {color:var(--navy);}
.ev-mode-legend {display:flex;flex-wrap:wrap;gap:7px;font-size:11px;color:var(--text-mid);margin-bottom:14px;}
.ev-mode-navigator {display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;}
.ev-mode-navnum {height:37px;padding:0;border:1px solid var(--border);border-radius:7px;background:var(--g50);color:var(--navy);font-size:12px;font-weight:700;cursor:pointer;}
.ev-mode-navnum.is-answered {background:var(--green-dark);color:#fff;border-color:var(--green-dark);}
.ev-mode-navnum.is-current {background:var(--ev-mode-accent);color:#fff;border-color:var(--ev-mode-accent);}
.ev-mode-navnum.is-flagged {box-shadow:inset 0 -4px 0 var(--amber);}
.ev-mode-navnum:disabled {opacity:.8;cursor:default;}
.ev-mode-outline,.ev-mode-submit {display:block;width:100%;margin-top:13px;padding:12px;border-radius:8px;font-weight:800;cursor:pointer;}
.ev-mode-outline {background:white;color:#dc2626;border:1px solid #dc2626;}
.ev-mode-submit {background:#dc2626;color:white;border:1px solid #dc2626;}
.ev-mode-tips {background:#f1f8ff;}
.ev-mode-notice {background:var(--red-pale);}
.ev-mode-tips p,.ev-mode-notice p,.ev-mode-help {font-size:13px;line-height:1.6;color:var(--text-mid);margin:0;}
.ev-mode-test .ev-quiz-feedback {display:none!important;}
.ev-practice-wrap .ev-quiz-screen--results {margin:0 auto 45px;}
@media(max-width: 850px){.ev-mode-active-grid{grid-template-columns:minmax(0,1fr)}.ev-mode-side{grid-template-columns:repeat(2,minmax(0,1fr))}.ev-mode-hero__benefits{display:none}}
@media(max-width: 600px){body.page-template-page-practice .ev-practice-wrap .container{padding:0 15px}.ev-mode-hero{padding:20px 17px;gap:12px;min-height:100px}.ev-mode-hero__icon{width:49px;height:49px;flex-basis:49px;font-size:24px}.ev-mode-hero h1{font-size:24px}.ev-mode-hero p{font-size:13px}.ev-mode-heading h2{font-size:20px}.ev-mode-active-main{padding:15px}.ev-mode-side{grid-template-columns:1fr}.ev-mode-active-main .ev-quiz-nav{gap:8px}.ev-mode-active-main .ev-quiz-nav .ev-btn{font-size:12px;padding:10px}}

/* Professional breadcrumb and accessible finishing touches — 2026-10 */







.ev-practice-wrap :is(a,button,input,select,[role="button"]):focus-visible { outline:3px solid var(--ev-mode-accent); outline-offset:3px; }
.ev-practice-wrap .ev-mode-hero { box-shadow:0 6px 24px rgba(15,23,42,.035); }
.ev-practice-wrap .ev-mode-active-main, .ev-practice-wrap .ev-mode-side__panel { transition:box-shadow .18s ease,border-color .18s ease; }
.ev-practice-wrap .ev-mode-active-main { border-color:var(--border, #e2e8f0); }
.ev-practice-wrap .ev-mode-active-main .ev-quiz-option { transition:border-color .15s ease,background-color .15s ease,box-shadow .15s ease; }
.ev-practice-wrap .ev-mode-active-main .ev-quiz-option:hover { border-color:var(--ev-mode-accent); }
.ev-practice-wrap .ev-mode-navnum:hover:not(:disabled) { border-color:var(--ev-mode-accent); }
@media (max-width: 600px) {
 
 
 
 
 .ev-practice-wrap .ev-mode-heading { margin-top:14px; }
}
@media (prefers-reduced-motion:reduce) {
 .ev-practice-wrap .ev-mode-active-main,.ev-practice-wrap .ev-mode-side__panel,.ev-practice-wrap .ev-mode-active-main .ev-quiz-option { transition:none; }
}

/* White breadcrumb text on an accessible navy surface — both modes */