/*=========================================================
ACADEMY QUIZ
PART 1A
=========================================================*/

:root{

--academy-primary:#4f46e5;
--academy-secondary:#7c3aed;

--academy-success:#10b981;
--academy-warning:#f59e0b;
--academy-danger:#ef4444;

--academy-bg:#f5f7fb;
--academy-card:#ffffff;
--academy-border:#e6ebf5;

--academy-text:#1f2937;
--academy-muted:#6b7280;

--academy-radius:18px;

--academy-shadow:
0 10px 30px rgba(15,23,42,.06);

}

/*=========================================================
BODY
=========================================================*/

body{

background-color: #f5f7fb !important;

font-family:

Inter,
system-ui,
sans-serif;

font-size:15px;

font-weight:400;

color:var(--academy-text);

}

/*=========================================================
PAGE
=========================================================*/

.academy-quiz-page{

min-height:100vh;

padding-bottom:50px;

}

/*=========================================================
BREADCRUMB
=========================================================*/

.academy-breadcrumb{

display:flex;

align-items:center;

flex-wrap:wrap;

gap:8px;

margin-bottom:16px;

font-size:13px;

}

.academy-breadcrumb a{

text-decoration:none;

color:var(--academy-primary);

font-weight:600;

}

.academy-breadcrumb span{

color:#94a3b8;

}

/*=========================================================
BACK BUTTON
=========================================================*/

.academy-back-wrap{

margin-bottom:18px;

}

.academy-back-btn{

display:inline-flex;

align-items:center;

gap:8px;

padding:10px 16px;

background:#fff;

border:1px solid var(--academy-border);

border-radius:14px;

text-decoration:none;

font-size:14px;

font-weight:600;

color:#374151;

transition:.25s;

box-shadow:

0 4px 12px rgba(0,0,0,.04);

}

.academy-back-btn:hover{

background:#eef2ff;

color:var(--academy-primary);

transform:translateY(-1px);

}


/*=========================================================
ANIMATION
=========================================================*/

.academy-quiz-hero,
.academy-back-btn{

transition:.25s;

}

.academy-quiz-hero:hover{

transform:translateY(-2px);

box-shadow:

0 16px 40px rgba(79,70,229,.18);

}

/*=========================================================
ACADEMY QUIZ
PART 1B
=========================================================*/

/*=========================================================
HERO STATS
=========================================================*/

.academy-hero-stats{

display:grid;

grid-template-columns:
repeat(3,1fr);

gap:12px;

margin-top:20px;

}

.academy-stat-card{

display:flex;

align-items:center;

gap:12px;

padding:14px;

background:rgba(255,255,255,.14);

border:1px solid rgba(255,255,255,.15);

border-radius:16px;

backdrop-filter:blur(8px);

transition:.25s;

}

.academy-stat-card:hover{

background:rgba(255,255,255,.20);

transform:translateY(-2px);

}

.academy-stat-icon{

width:42px;

height:42px;

display:flex;

align-items:center;

justify-content:center;

flex-shrink:0;

background:#fff;

border-radius:12px;

font-size:18px;

color:var(--academy-primary);

}

.academy-stat-card strong{

display:block;

font-size:16px;

font-weight:700;

line-height:1.2;

}

.academy-stat-card span{

display:block;

font-size:13px;

margin-top:2px;

opacity:.9;

}

/*=========================================================
MAIN CARD
=========================================================*/

.academy-quiz-card{

background:#fff;

border-radius:20px;

box-shadow:var(--academy-shadow);

border:1px solid var(--academy-border);

overflow:hidden;

}

.academy-quiz-card-body{

padding:24px;

}

/*=========================================================
QUESTION HEADER
=========================================================*/

.academy-question-header{

display:flex;

justify-content:space-between;

align-items:flex-start;

gap:18px;

margin-bottom:18px;

padding-bottom:16px;

border-bottom:1px solid #eef2f7;

}

.academy-question-header h2{

margin:0 0 6px;

font-size:20px;

font-weight:700;

line-height:1.35;

color:var(--academy-text);

}

.academy-question-header p{

margin:0;

font-size:14px;

color:var(--academy-muted);

}

.academy-question-current{

color:var(--academy-primary);

}

.academy-question-progress{

display:inline-flex;

align-items:center;

justify-content:center;

min-width:70px;

height:38px;

padding:0 14px;

background:#eef2ff;

border-radius:999px;

font-size:14px;

font-weight:700;

color:var(--academy-primary);

}

/*=========================================================
PROGRESS BAR
=========================================================*/

.academy-progress{

width:100%;

height:8px;

background:#edf2f7;

border-radius:999px;

overflow:hidden;

margin-bottom:24px;

}

.academy-progress-bar{

height:100%;

width:8%;

background:

linear-gradient(
90deg,
#4f46e5,
#7c3aed
);

border-radius:999px;

transition:width .35s ease;

}

/*=========================================================
RESPONSIVE
=========================================================*/

@media(max-width:992px){

.academy-hero-stats{

grid-template-columns:1fr;

}

}

@media(max-width:768px){

.academy-quiz-card-body{

padding:20px;

}

.academy-question-header{

flex-direction:column;

align-items:flex-start;

}

.academy-question-progress{

margin-top:6px;

}

}

@media(max-width:576px){

.academy-quiz-hero{

padding:20px;

border-radius:18px;

}

.academy-quiz-hero h1{

font-size:18px;

}

.academy-quiz-hero p{

font-size:14px;

}

.academy-hero-icon{

width:72px;

height:72px;

font-size:28px;

}

.academy-stat-card{

padding:12px;

}

.academy-stat-icon{

width:38px;

height:38px;

font-size:16px;

}

.academy-question-header h2{

font-size:18px;

}

}

/*=========================================================
ACADEMY QUIZ
PART 2A
=========================================================*/

/*=========================================================
QUESTION CARD
=========================================================*/

.academy-question-card{

background:#fff;

border:1px solid var(--academy-border);

border-radius:18px;

padding:18px;

margin-bottom:18px;

transition:.25s;

}

.academy-question-card:hover{

transform:translateY(-2px);

box-shadow:

0 10px 25px rgba(15,23,42,.06);

}

/*=========================================================
QUESTION NUMBER
=========================================================*/

.academy-question-number{

display:inline-flex;

align-items:center;

justify-content:center;

padding:5px 12px;

border-radius:999px;

background:#eef2ff;

color:var(--academy-primary);

font-size:13px;

font-weight:600;

margin-bottom:12px;

}

/*=========================================================
QUESTION TITLE
=========================================================*/

.academy-question-title{

font-size:17px;

font-weight:700;

line-height:1.5;

margin-bottom:18px;

color:var(--academy-text);

}

/*=========================================================
OPTIONS
=========================================================*/

.academy-options{

display:grid;

gap:10px;

}

.academy-option{

display:flex;

align-items:center;

gap:12px;

padding:12px 14px;

background:#fff;

border:1px solid var(--academy-border);

border-radius:14px;

cursor:pointer;

position:relative;

transition:.20s;

}

.academy-option:hover{

background:#f8faff;

border-color:var(--academy-primary);

}

/*=========================================================
RADIO
=========================================================*/

.academy-option input{

position:absolute;

opacity:0;

pointer-events:none;

}

/*=========================================================
LETTER
=========================================================*/

.academy-option-letter{

width:32px;

height:32px;

border-radius:50%;

background:#eef2ff;

display:flex;

align-items:center;

justify-content:center;

font-size:14px;

font-weight:700;

color:var(--academy-primary);

flex-shrink:0;

transition:.20s;

}

/*=========================================================
OPTION TEXT
=========================================================*/

.academy-option-text{

flex:1;

font-size:15px;

font-weight:500;

line-height:1.45;

color:var(--academy-text);

}

/*=========================================================
CHECKED
=========================================================*/

.academy-option:has(input:checked){

background:#eef2ff;

border-color:var(--academy-primary);

}

.academy-option:has(input:checked)
.academy-option-letter{

background:var(--academy-primary);

color:#fff;

}

/*=========================================================
SUBMIT
=========================================================*/

.academy-submit-wrap{

display:flex;

justify-content:center;

margin-top:24px;

}

.academy-submit-btn{

display:inline-flex;

align-items:center;

justify-content:center;

gap:8px;

min-width:220px;

height:50px;

padding:0 24px;

background:

linear-gradient(
135deg,
#4f46e5,
#7c3aed
);

border:none;

border-radius:14px;

color:#fff;

text-decoration:none;

font-size:15px;

font-weight:600;

transition:.25s;

box-shadow:

0 8px 20px rgba(79,70,229,.18);

}

.academy-submit-btn:hover{

transform:translateY(-2px);

color:#fff;

box-shadow:

0 12px 25px rgba(79,70,229,.22);

}


/*=========================================================
ACADEMY QUIZ
PART 2B
=========================================================*/

/*=========================================================
RESULT CARD
=========================================================*/

.academy-result-card{

text-align:center;

padding:22px;

}

.academy-result-icon{

width:64px;

height:64px;

margin:auto auto 16px;

display:flex;

align-items:center;

justify-content:center;

border-radius:18px;

background:

linear-gradient(
135deg,
#10b981,
#34d399
);

color:#fff;

font-size:28px;

}

.academy-result-card h2{

margin:0 0 8px;

font-size:20px;

font-weight:700;

color:var(--academy-text);

}

.academy-result-subtitle{

margin-bottom:20px;

font-size:14px;

color:var(--academy-muted);

}

/*=========================================================
SCORE CARD
=========================================================*/

.academy-score-circle{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:14px 22px;

    min-width:13px;

    border-radius:14px;

    margin:14px 0;
    
    background-color: blue;
    color: white;

}

border-radius:18px;

color:#fff;

margin-bottom:22px;

min-width:170px;

}

.academy-score-circle strong{

display:block;

    font-size:18px;

font-weight:700;

line-height:1.2;

}

.academy-score-circle span{

display:block;

margin-top:3px;

font-size:13px;

font-weight:500;

opacity:.95;

}
/*==================================================
RESULT MINI STATS
==================================================*/

.academy-result-mini-stats{

    display:flex;

    justify-content:center;

    gap:12px;

    margin:18px 0;

    flex-wrap:wrap;

}

.academy-mini-stat{

    background:#fff;

    border:1px solid var(--academy-border);

    border-radius:14px;

    padding:10px 18px;

    min-width:120px;

    text-align:center;

    transition:.25s;

}

.academy-mini-stat:hover{

    transform:translateY(-2px);

    box-shadow:0 8px 18px rgba(15,23,42,.06);

}

.academy-mini-stat strong{

    display:block;

    font-size:17px;

    font-weight:700;

    color:var(--academy-primary);

}

.academy-mini-stat span{

    display:block;

    margin-top:2px;

    font-size:12px;

    color:#64748b;

}

/*=========================================================
RESULT MESSAGE
=========================================================*/

.academy-result-message{

display:inline-block;

padding:10px 16px;

border-radius:12px;

font-size:14px;

font-weight:600;

margin-bottom:22px;

}

.academy-result-success{

background:#dcfce7;

color:#166534;

}

.academy-result-info{

background:#dbeafe;

color:#1d4ed8;

}

.academy-result-warning{

background:#fef3c7;

color:#92400e;

}

/*=========================================================
RESULT BUTTON
=========================================================*/

.academy-result-actions{

display:flex;

justify-content:center;

margin-top:10px;

}

/*=========================================================
RESPONSIVE
=========================================================*/

@media(max-width:768px){

.academy-result-card{

padding:18px;

}

.academy-result-stats{

flex-direction:column;

align-items:stretch;

gap:12px;

}

.academy-result-stat{

min-width:100%;

}

.academy-score-circle{

width:100%;

padding:16px;

}

}

@media(max-width:576px){

.academy-submit-btn,

.academy-back-btn{

width:100%;

}

.academy-submit-wrap,

.academy-result-actions{

display:block;

}

.academy-result-card h2{

font-size:18px;

}

.academy-result-subtitle{

font-size:13px;

}

.academy-result-icon{

width:56px;

height:56px;

font-size:24px;

}

.academy-score-circle strong{

font-size:18px;

}

}

/*=========================================================
QUIZ HERO PREMIUM COMPACT
=========================================================*/

.academy-quiz-hero{

    background:linear-gradient(135deg,#4f46e5,#7c3aed);

    border-radius:18px;

    padding:22px;

    color:#fff;

    margin-bottom:22px;

    box-shadow:0 10px 28px rgba(79,70,229,.14);

}

.academy-quiz-badge{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:5px 12px;

    background:rgba(255,255,255,.16);

    border-radius:999px;

    font-size:.74rem;

    font-weight:700;

    margin-bottom:12px;

}

.academy-quiz-hero h1{

    margin:0;

    font-size:1.45rem;

    font-weight:700;

    line-height:1.35;

}

.academy-quiz-description{

    margin:10px 0 16px;

    max-width:720px;

    font-size:.90rem;

    line-height:1.6;

    opacity:.95;

}

.academy-quiz-meta{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

}

.academy-quiz-meta span{

    display:inline-flex;

    align-items:center;

    gap:6px;

    padding:8px 12px;

    border-radius:999px;

    background:rgba(255,255,255,.12);

    font-size:.82rem;

    font-weight:600;

}

.academy-quiz-meta i{

    font-size:.9rem;

}

/*=========================================================
HOVER
=========================================================*/

.academy-quiz-hero{

    transition:.25s;

}

.academy-quiz-hero:hover{

    transform:translateY(-2px);

    box-shadow:0 16px 34px rgba(79,70,229,.18);

}

/*=========================================================
RESPONSIVE
=========================================================*/

@media(max-width:768px){

.academy-quiz-hero{

    padding:18px;

}

.academy-quiz-hero h1{

    font-size:1.25rem;

}

.academy-quiz-description{

    font-size:.84rem;

}

.academy-quiz-meta{

    gap:8px;

}

.academy-quiz-meta span{

    font-size:.78rem;

    padding:7px 10px;

}

}


/*==================================================
QUIZ ANIMATION
==================================================*/

.academy-question-card{

    animation:quizFade .28s ease;

}

@keyframes quizFade{

    from{

        opacity:0;

        transform:translateX(25px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}


.academy-question-number{

    display:flex;

    align-items:center;

    gap:8px;

}

.academy-question-number.done{

    color:#10b981;

    font-weight:700;

}


/*==================================================
QUIZ NAVIGATION
==================================================*/

.academy-navigation{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:12px;

    margin-top:26px;

}

/*----------------------------------
Base Button
----------------------------------*/

.academy-prev-btn,
.academy-next-btn,
.academy-submit-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    height:44px;

    min-width:145px;

    padding:0 20px;

    border:none;

    border-radius:12px;

    font-size:.90rem;

    font-weight:600;

    cursor:pointer;

    transition:.25s ease;

    text-decoration:none;

    box-shadow:0 6px 18px rgba(15,23,42,.08);

}

/*----------------------------------
Previous
----------------------------------*/

.academy-prev-btn{

    background:#ffffff;

    color:#475569;

    border:1px solid #dbe3ee;

}

.academy-prev-btn:hover{

    background:#f8fafc;

    color:#0f172a;

    transform:translateY(-2px);

    box-shadow:0 10px 22px rgba(15,23,42,.10);

}

/*----------------------------------
Next
----------------------------------*/

.academy-next-btn{

    background:#2563eb;

    color:#fff;

}

.academy-next-btn:hover{

    background:#1d4ed8;

    color:#fff;

    transform:translateY(-2px);

    box-shadow:0 10px 24px rgba(37,99,235,.22);

}

/*----------------------------------
Finish
----------------------------------*/

.academy-submit-btn{

    background:#10b981;

    color:#fff;

}

.academy-submit-btn:hover{

    background:#059669;

    color:#fff;

    transform:translateY(-2px);

    box-shadow:0 10px 24px rgba(16,185,129,.22);

}

/*----------------------------------
Disabled
----------------------------------*/

.academy-prev-btn:disabled,
.academy-next-btn:disabled,
.academy-submit-btn:disabled{

    opacity:.6;

    cursor:not-allowed;

    transform:none;

    box-shadow:none;

}

/*==================================================
RESPONSIVE
==================================================*/

@media(max-width:768px){

.academy-navigation{

    justify-content:center;

    flex-wrap:wrap;

}

.academy-prev-btn,
.academy-next-btn,
.academy-submit-btn{

    min-width:135px;

    height:42px;

    font-size:.85rem;

    padding:0 18px;

}

}

@media(max-width:480px){

.academy-navigation{

    flex-direction:row;

    justify-content:center;

    gap:10px;

}

.academy-prev-btn,
.academy-next-btn,
.academy-submit-btn{

    width:auto;

    min-width:120px;

    flex:none;

}

}


/*==================================================
COMMUNITY TOAST
==================================================*/

.community-toast{

    position:fixed;

    top:24px;

    right:24px;

    z-index:999999;

    min-width:260px;

    max-width:360px;

    padding:14px 18px;

    border-radius:14px;

    color:#fff;

    font-size:.92rem;

    font-weight:600;

    box-shadow:0 18px 40px rgba(15,23,42,.18);

    opacity:0;

    visibility:hidden;

    transform:translateY(-18px);

    transition:.28s ease;

}

.community-toast.success{

    background:#10b981;

}

.community-toast.error{

    background:#ef4444;

}

.community-toast.show{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}