/* =================================
VASISTA MCQ FONT
================================= */

.vpp-container{
font-family: 'Quicksand', sans-serif;

}
.vpp-container *{
font-family: 'Quicksand', sans-serif;
}
.vpp-footer-nav{
display:flex;
justify-content:space-between;
margin-top:30px;
}

.vpp-footer-nav .vpp-nav-btn{
min-width:120px;
text-align:center;
}/* =================================
OPTIONS WRAPPER
================================= */

.vpp-options{
display:flex;
flex-direction:column;
gap:10px;
width:100%;
}


/* =================================
OPTION BOX
================================= */

.vpp-option{
display:flex;
align-items:flex-start;
gap:10px;

padding:12px 15px;
border-radius:6px;
border:1px solid #ddd;

background:#fff;
cursor:pointer;
transition:all .2s ease;

box-sizing:border-box;
width:100%;
}

.vpp-option:hover{
background:#eef5ff;
border-color:#3a7afe;
}


/* =================================
LEGEND
================================= */

.vpp-legend{
display:flex;
gap:20px;
align-items:center;
margin-top:20px;
flex-wrap:wrap;
}

.vpp-legend-item{
display:flex;
align-items:center;
gap:6px;
font-size:14px;
}

.vpp-legend .leg{
width:14px;
height:14px;
border-radius:50%;
display:inline-block;
}

.leg.answered{background:#2ecc71;}
.leg.not{background:#f5f5f5;border:1px solid #ccc;}
.leg.review{background:#f1c40f;}
.leg.current{background:#3498db;}


/* =================================
QUESTION PALETTE
================================= */

.vpp-palette-wrapper{
display:flex;
align-items:center;
gap:10px;
margin-bottom:20px;
}

.vpp-palette{
display:flex;
overflow-x:auto;
gap:8px;
padding:6px;
scroll-behavior:smooth;
}

.vpp-pal-item{
width:38px;
height:38px;
flex:0 0 auto;

display:flex;
align-items:center;
justify-content:center;

border-radius:50%;
border:1px solid #ddd;

font-size:14px;
font-weight:600;
text-decoration:none;

background:#f5f5f5;
color:#333;

transition:all .2s ease;
cursor:pointer;
}


/* =================================
PALETTE STATES
================================= */

.vpp-pal-item.current{
background:#3498db;
color:#fff;
border-color:#3498db;
}

.vpp-pal-item.correct{
background:#2ecc71;
color:#fff;
border-color:#27ae60;
}

.vpp-pal-item.wrong{
background:#e74c3c;
color:#fff;
border-color:#c0392b;
}

.vpp-pal-item.review{
background:#f1c40f;
color:#000;
border-color:#d4ac0d;
}

.vpp-pal-item.not{
background:#f5f5f5;
color:#333;
}


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

.vpp-result-card{
max-width:720px;
margin:40px auto;
background:#fff;
border:1px solid #e5e7eb;
border-radius:12px;
padding:30px;
box-shadow:0 6px 18px rgba(0,0,0,0.05);
}

.vpp-result-title{
font-size:28px;
font-weight:700;
margin-bottom:25px;
text-align:center;
color:#111827;
}


/* =================================
RESULT STATS
================================= */

.vpp-result-stats{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:12px;
margin-bottom:30px;
}

.vpp-result-row{
display:flex;
justify-content:space-between;
align-items:center;

padding:12px 16px;

border:1px solid #e5e7eb;
border-radius:8px;

background:#f9fafb;
font-size:16px;
}

.vpp-result-row strong{
font-size:18px;
color:#111827;
}


/* =================================
RESULT ACTIONS
================================= */

.vpp-result-actions{
display:flex;
gap:15px;
justify-content:center;
margin-bottom:30px;
}

.vpp-restart{
display:inline-block;
padding:10px 18px;
border-radius:8px;
background:#16a085;
color:#fff;
text-decoration:none;
font-weight:600;
}

.vpp-restart:hover{
background:#138d75;
}

.vpp-restart.secondary{
background:#6b7280;
}

.vpp-restart.secondary:hover{
background:#4b5563;
}


/* =================================
QUESTION ANALYSIS
================================= */

.vpp-analysis{
margin-top:25px;
display:flex;
flex-direction:column;
gap:16px;
}

.vpp-analysis-item{
border:1px solid #e5e7eb;
border-radius:10px;
padding:16px 18px;
background:#fff;
box-shadow:0 2px 6px rgba(0,0,0,0.03);
}

.vpp-analysis-q{
font-size:16px;
font-weight:600;
margin-bottom:8px;
}

.vpp-analysis-row{
font-size:14px;
margin-bottom:4px;
color:#444;
}

.vpp-view-btn{
display:inline-block;
margin-top:8px;
font-size:14px;
color:#2979ff;
text-decoration:none;
font-weight:600;
}


/* =================================
ANALYSIS STATUS COLORS
================================= */

.vpp-analysis-item[data-type="correct"]{
border-left:5px solid #2ecc71;
}

.vpp-analysis-item[data-type="wrong"]{
border-left:5px solid #e74c3c;
}

.vpp-analysis-item[data-type="review"]{
border-left:5px solid #f1c40f;
}

.vpp-analysis-item[data-type="not"]{
border-left:5px solid #bdc3c7;
}


/* =================================
PREVIOUS / NEXT NAVIGATION
================================= */

.vpp-footer-nav{
display:flex;
justify-content:space-between;
align-items:center;
margin-top:25px;
}

.vpp-nav-btn{
padding:10px 18px;
border-radius:8px;
border:1px solid #ddd;
background:#fff;
font-weight:600;
cursor:pointer;
text-decoration:none;
}

.vpp-nav-btn:hover{
background:#3a7afe;
color:#fff;
border-color:#3a7afe;
}

/* =================================
HUB GRID (Exam / Year / Subject)
================================= */

.vpp-hub-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:20px;
margin-top:30px;
}


/* =================================
HUB CARD
================================= */

.vpp-hub-card{
background:#ffffff;
border:1px solid #e5e7eb;
border-radius:10px;
padding:20px;

text-align:center;

transition:all .2s ease;
box-shadow:0 2px 6px rgba(0,0,0,0.05);
}

.vpp-hub-card:hover{
transform:translateY(-2px);
border-color:#3a7afe;
box-shadow:0 6px 16px rgba(0,0,0,0.08);
}

.vpp-hub-card a{
text-decoration:none;
display:block;
}

.vpp-hub-name{
font-size:18px;
font-weight:600;
color:#111827;
}
.vpp-container {
    max-width: 800px;
    margin: 40px auto;
    font-family: Arial, sans-serif;
}

.vpp-title {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 25px;
}

/* OPTIONS */

.vpp-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid #ddd;
    border-radius: 8px;
    margin-bottom: 12px;
    cursor: pointer;
    background: #ffffff;
    transition: 0.3s;
}

.vpp-option:hover {
    background: #f5f8ff;
    border-color: #4a90e2;
}

.vpp-option input {
    accent-color: #4a90e2;
}

.vpp-letter {
    font-weight: bold;
    width: 25px;
}

/* RESULT */

#vpp-result {
    margin-top: 15px;
    font-size: 16px;
    font-weight: bold;
}

.vpp-correct {
    color: #27ae60;
}

.vpp-wrong {
    color: #e74c3c;
}

/* EXPLANATION */

#vpp-explanation {
    margin-top: 20px;
    padding: 16px;
    border-radius: 8px;
    background: #f8f9fa;
    border: 1px solid #ddd;
    line-height: 1.6;
}

/* OPTION STATES */

.correct-option {
    border: 2px solid #27ae60;
    background: #eafaf1;
}

.wrong-option {
    border: 2px solid #e74c3c;
    background: #fdecea;
}