/* Base Styles */
* {
    box-sizing: border-box;
}

#simpleExamContainer{
    max-width:1000px;
    margin:0 auto;
    padding:15px;
    width:100%;
}

/* Exam Info Styles */
.exam-info{
    background:#f8f9fa;
    border:2px solid #007cba;
    border-radius:8px;
    padding:15px;
    margin-bottom:15px;
    width:100%;
    position:relative;
}

.exam-info h2{
    text-align:center;
    color:#007cba;
    font-size:1.5rem;
    margin:0 0 15px 0;
    word-wrap:break-word;
}

.exam-status-badge{
    position:absolute;
    top:10px;
    right:10px;
    padding:5px 10px;
    border-radius:15px;
    font-size:12px;
    font-weight:bold;
    display:flex;
    align-items:center;
    gap:5px;
}

.exam-status-badge.live{
    background:#dc3545;
    color:white;
}

.exam-status-badge.ended{
    background:#6c757d;
    color:white;
}

.live-indicator{
    display:inline-block;
    width:8px;
    height:8px;
    background:#fff;
    border-radius:50%;
    animation:pulse 1.5s infinite;
}

@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.3; }
    100% { opacity: 1; }
}

.exam-meta-grid{
    display:flex;
    gap:15px;
    flex-wrap:wrap;
    margin:10px 0;
}

.meta-item{
    background:#e9ecef;
    padding:8px 15px;
    border-radius:5px;
    font-size:0.9rem;
    color:#666;
}

.subjects-list{
    margin-top:15px;
}

.subject-tags{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    margin-top:8px;
}

.subject-tag{
    background:#0066cc;
    color:white;
    padding:4px 10px;
    border-radius:15px;
    font-size:12px;
}

/* Action Wraps */
.action-wrap{
    text-align:center;
    margin:20px 0;
}

.action-btn{
    display:inline-block;
    padding:12px 30px;
    border:none;
    border-radius:5px;
    font-size:1rem;
    cursor:pointer;
    transition:all 0.3s ease;
    text-align:center;
    box-shadow:0 2px 4px rgba(0,0,0,0.1);
}

.start-btn{
    background:#007cba;
    color:#fff;
}

.start-btn:hover{
    background:#005a87;
    transform:translateY(-2px);
    box-shadow:0 4px 8px rgba(0,0,0,0.15);
}

.result-btn{
    background:#28a745;
    color:#fff;
}

.result-btn:hover{
    background:#218838;
    transform:translateY(-2px);
    box-shadow:0 4px 8px rgba(0,0,0,0.15);
}

.warning-message{
    background:#f5e7cb;
    border-radius:5px;
    padding:20px;
    text-align:center;
}

.warning-message p{
    color:#666;
    margin:0;
}

/* Subject Navigation */
.subject-nav{
    background:#f8f9fa;
    border-radius:10px;
    padding:15px;
    margin-bottom:20px;
}

.subject-buttons{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}

.subject-btn{
    background:#cbced1;
    border:2px solid #dee2e6;
    padding:10px 15px;
    border-radius:25px;
    cursor:pointer;
    transition:all 0.3s;
    min-width:0;
    flex:1;
    text-align:center;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.subject-btn:hover{
    background:#dae0e5;
}

.subject-btn.active{
    background:#007cba;
    color:white;
    border-color:#007cba;
}

/* Question Card */
.question-card{
    background:#fff;
    border:1px solid #ddd;
    border-radius:5px;
    padding:15px;
    margin-bottom:15px;
}

.question-card.correct{
    background:#d4edda;
    border-color:#c3e6cb;
}

.question-card.wrong{
    background:#f8d7da;
    border-color:#f5c6cb;
}

.question-card.unanswered{
    background:#fff3cd;
    border-color:#ffeaa7;
}

/* প্রশ্নের টেক্সট বোল্ড হবে */
.question-text{
    margin-bottom:10px;
    font-size:16px;
    line-height:1.4;
}

.question-text strong {
    font-weight: bold !important;
    color:#212529;
}

/* Options List - অপশন নরমাল হবে */
.options-list{
    margin-top:10px;
    display:grid;
    gap:8px;
}

.options-list label{
    display:flex;
    align-items:center;
    padding:10px 15px;
    background:white;
    border:2px solid #dee2e6;
    border-radius:5px;
    cursor:pointer;
    transition:all 0.3s;
    font-weight: normal !important;
}

.options-list label:hover{
    background:#f0f7ff;
    border-color:#007cba;
}

.options-list input[type="radio"]{
    margin-right:10px;
}

/* অপশনের টেক্সট স্বাভাবিক ফন্ট */
.options-list label span,
.options-list span {
    font-weight: normal !important;
    font-size:14px;
    color:#495057;
}

.options-list .correct-option{
    background:#d4edda;
    border-color:#28a745;
}

.options-list .wrong-option{
    background:#f8d7da;
    border-color:#dc3545;
}

.options-list .selected-option{
    background:#cce5ff;
    border-color:#007cba;
}

/* Subject Header */
.subject-header{
    background:#007cba;
    color:#fff;
    padding:12px;
    border-radius:5px;
    margin-bottom:15px;
    text-align:center;
}

.subject-header h3{
    margin:0;
    font-size:1.2rem;
}

.subject-progress{
    text-align:center;
    color:#666;
    margin-bottom:15px;
    font-size:0.9rem;
}

/* Navigation */
.navigation-area{
    margin-top:20px;
}

.nav-container{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.nav-row{
    display:flex;
    gap:10px;
    justify-content:space-between;
}

.nav-btn{
    flex:1;
    padding:10px 15px;
    border:none;
    border-radius:5px;
    cursor:pointer;
    font-size:0.9rem;
    transition:all 0.3s;
}

.prev-btn{
    background:#6c757d;
    color:white;
}

.prev-btn:hover{
    background:#545b62;
}

.next-btn{
    background:#28a745;
    color:white;
}

.next-btn:hover{
    background:#218838;
}

.submit-btn{
    background:#dc3545;
    color:white;
}

.submit-btn:hover{
    background:#c82333;
}

.nav-spacer{
    flex:1;
}

/* Timer */
#examTimer{
    position:fixed;
    top:80px;
    right:10px;
    background:#ffc107;
    padding:8px 12px;
    border-radius:5px;
    font-weight:bold;
    z-index:9999;
    font-size:0.9rem;
    box-shadow:0 2px 5px rgba(0,0,0,0.2);
}

.exam-alert{
    position:fixed;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    background:rgba(0,0,0,0.9);
    color:white;
    padding:20px;
    border-radius:10px;
    z-index:10000;
    text-align:center;
    font-size:1.2rem;
    max-width:90%;
    animation:fadeInOut 3s ease-in-out;
}

@keyframes fadeInOut {
    0%,100% { opacity:0; transform:translate(-50%,-50%) scale(0.8); }
    20%,80% { opacity:1; transform:translate(-50%,-50%) scale(1); }
}

/* Result Summary - COMPACT VERSION */
.result-summary{
    background:#f8f9fa;
    border:2px solid #28a745;
    border-radius:8px;
    padding:15px;
    margin-bottom:20px;
    text-align:center;
}

.result-summary h2{
    margin:0 0 15px 0;
    color:#333;
    font-size:1.3rem;
}

/* COMPACT Result Stats Grid - 2x2 for mobile, 2x3 for medium, 3x2 for desktop */
.result-stats{
    display:grid;
    grid-template-columns: repeat(2, 1fr); /* Default: 2 columns for mobile */
    gap:8px;
    margin-bottom:15px;
}

.result-stat{
    background:#fff;
    padding:10px 8px;
    border-radius:6px;
    box-shadow:0 2px 4px rgba(0,0,0,0.05);
    min-height: 75px; /* Very compact height */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: transform 0.2s ease;
    border-top: 4px solid transparent;
}

.result-stat:hover{
    transform: translateY(-2px);
    box-shadow:0 4px 8px rgba(0,0,0,0.08);
}

.stat-value{
    font-size:1.4rem;
    margin-bottom:4px;
    line-height:1;
}

.stat-label{
    font-size:0.75rem;
    color:#666;
    text-align:center;
    padding:0 2px;
    line-height:1.2;
}

/* Color coding for result cards */
.result-stat.correct{
    border-top-color: #28a745;
    background: linear-gradient(to bottom, #ffffff, #f8fff9);
}

.result-stat.correct .stat-value{
    color:#28a745;
}

.result-stat.wrong{
    border-top-color: #dc3545;
    background: linear-gradient(to bottom, #ffffff, #fff8f9);
}

.result-stat.wrong .stat-value{
    color:#dc3545;
}

.result-stat.unanswered{
    border-top-color: #ffc107;
    background: linear-gradient(to bottom, #ffffff, #fffdf0);
}

.result-stat.unanswered .stat-value{
    color:#ffc107;
}

.result-stat.score{
    border-top-color: #007cba;
    background: linear-gradient(to bottom, #ffffff, #f0f8ff);
}

.result-stat.score .stat-value{
    color:#007cba;
}

/* Medium screens: 2x3 layout */
@media (min-width: 480px) and (max-width: 767px){
    .result-stats{
        grid-template-columns: repeat(3, 1fr); /* 3 columns */
        gap:10px;
    }
    
    .result-stat{
        min-height: 80px;
        padding:12px 8px;
    }
    
    .stat-value{
        font-size:1.5rem;
    }
    
    .stat-label{
        font-size:0.8rem;
    }
}

/* Tablet: 3x2 layout */
@media (min-width: 768px) and (max-width: 991px){
    .result-stats{
        grid-template-columns: repeat(3, 1fr); /* 3 columns */
        gap:12px;
    }
    
    .result-stat{
        min-height: 85px;
        padding:12px 10px;
    }
    
    .stat-value{
        font-size:1.6rem;
    }
    
    .stat-label{
        font-size:0.85rem;
    }
}

/* Desktop: 2x2 but larger */
@media (min-width: 992px){
    .result-stats{
        grid-template-columns: repeat(2, 1fr); /* 2 columns */
        gap:15px;
    }
    
    .result-stat{
        min-height: 95px;
        padding:15px 12px;
    }
    
    .stat-value{
        font-size:1.8rem;
    }
    
    .stat-label{
        font-size:0.9rem;
    }
}

/* For 4 items specifically, we can make a perfect square grid */
.result-stat:nth-child(1) { order: 1; }
.result-stat:nth-child(2) { order: 2; }
.result-stat:nth-child(3) { order: 3; }
.result-stat:nth-child(4) { order: 4; }

/* If we have more than 4 items, adjust layout */
.result-stats:has(.result-stat:nth-child(5)) {
    grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 480px) and (max-width: 767px) {
    .result-stats:has(.result-stat:nth-child(5)) {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 768px) {
    .result-stats:has(.result-stat:nth-child(5)) {
        grid-template-columns: repeat(3, 1fr);
    }
}

.result-actions{
    display:flex;
    gap:10px;
    justify-content:center;
    flex-wrap:wrap;
}

.review-all-btn{
    background:#007cba;
    color:white;
    padding:10px 20px;
    font-size:0.9rem;
}

.review-subject-btn{
    background:#28a745;
    color:white;
    padding:10px 20px;
    font-size:0.9rem;
}

/* Answer Status */
.answer-status{
    display:inline-block;
    padding:3px 8px;
    border-radius:3px;
    font-size:0.75rem;
    margin-left:8px;
    vertical-align:middle;
}

.status-correct{
    background:#28a745;
    color:#fff;
}

.status-wrong{
    background:#dc3545;
    color:#fff;
}

.status-unanswered{
    background:#ffc107;
    color:#212529;
}

/* Correct Answer */
.correct-answer{
    margin-top:15px;
    padding:10px;
    background:#e9ecef;
    border-radius:5px;
    font-size:0.9rem;
}

.correct-answer strong{
    color:#28a745;
}

/* Explanation */
.explanation-section{
    margin-top:15px;
}

.explanation-toggle{
    background:#6c757d;
    color:white;
    border:none;
    padding:8px 15px;
    border-radius:4px;
    cursor:pointer;
    font-size:0.9rem;
    display:flex;
    align-items:center;
    gap:8px;
    transition:all 0.3s;
    width:100%;
    text-align:left;
}

.explanation-toggle:hover{
    background:#545b62;
}

.toggle-icon{
    font-size:0.8rem;
    transition:transform 0.3s;
}

.explanation-content{
    margin-top:10px;
    padding:12px;
    background:#e8f4fd;
    border-radius:5px;
    border-left:4px solid #2196F3;
    font-size:0.9rem;
    line-height:1.5;
    display:none;
    animation:fadeIn 0.3s ease;
}

.explanation-content strong{
    color:#007cba;
    display:block;
    margin-bottom:5px;
    font-size:0.95rem;
}

@keyframes fadeIn {
    from { opacity:0; transform:translateY(-5px); }
    to { opacity:1; transform:translateY(0); }
}

/* Loading */
.loading-message{
    text-align:center;
    padding:40px;
}

.loading-message h3{
    margin-bottom:10px;
    color:#333;
}

.loading-message p{
    color:#666;
}

/* Exam List */
#mcq-exam-list-container{
    max-width:1200px;
    margin:0 auto;
    padding:20px;
}

#mcq-exam-list-container h2{
    text-align:center;
    margin-bottom:30px;
    color:#007cba;
}

.mcq-exam-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
    gap:15px;
    padding:10px;
}

.mcq-exam-card{
    display:block;
    background:#fff;
    border-radius:8px;
    border:1px solid #e0e0e0;
    padding:15px;
    text-decoration:none;
    color:inherit;
    transition:all 0.3s ease;
    box-shadow:0 2px 4px rgba(0,0,0,0.05);
}

.mcq-exam-card:hover{
    transform:translateY(-3px);
    box-shadow:0 4px 12px rgba(0,0,0,0.1);
    border-color:#007cba;
}

.exam-card-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    margin-bottom:10px;
    padding-bottom:10px;
    border-bottom:1px solid #f0f0f0;
}

.exam-card-header h3{
    margin:0;
    font-size:1.1rem;
    color:#007cba;
    flex:1;
    padding-right:10px;
    word-break:break-word;
}

.exam-status{
    font-size:0.75rem;
    padding:3px 8px;
    border-radius:12px;
    font-weight:bold;
    white-space:nowrap;
}

.exam-status.live{
    background:#dc3545;
    color:white;
    display:flex;
    align-items:center;
    gap:4px;
}

.exam-status.ended{
    background:#6c757d;
    color:white;
}

.exam-card-body{
    font-size:0.9rem;
}

.exam-meta{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

/* ================= EXAM CARD FOOTER ================= */
.exam-footer {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #eee;
}

.exam-status-bottom {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: bold;
}

.exam-status-bottom.attempted {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.exam-status-bottom.review-available {
    background-color: #fff3cd;
    color: #856404;
    border: 1px solid #ffeaa7;
}

/* Optional: Add icon before text */
.exam-status-bottom.attempted::before {
    content: "✅ ";
}

.exam-status-bottom.review-available::before {
    content: "🔍 ";
}

/* Hover effects */
.exam-status-bottom.attempted:hover {
    background-color: #c3e6cb;
    border-color: #b1dfbb;
}

.exam-status-bottom.review-available:hover {
    background-color: #ffeaa7;
    border-color: #ffda6a;
}

/* Mobile responsive */
@media (max-width: 480px) {
    .exam-status-bottom {
        padding: 3px 8px;
        font-size: 0.7rem;
    }
}

/* Login Box */
.mcq-login-box{
    max-width:420px;
    margin:40px auto;
    padding:25px;
    text-align:center;
    background:#f8f9fa;
    border:2px dashed #007cba;
    border-radius:10px;
}

.mcq-login-icon{
    font-size:40px;
    margin-bottom:10px;
}

.mcq-login-box h3{
    margin:10px 0;
    color:#007cba;
}

.mcq-login-box p{
    color:#555;
    font-size:0.95rem;
    margin-bottom:20px;
}

.mcq-login-actions{
    display:flex;
    justify-content:center;
    gap:12px;
    flex-wrap:wrap;
}

.mcq-btn{
    padding:10px 22px;
    border-radius:5px;
    text-decoration:none;
    font-weight:500;
    transition:0.3s;
}

.mcq-login-btn{
    background:#007cba;
    color:#fff;
}

.mcq-login-btn:hover{
    background:#005a87;
}

.mcq-register-btn{
    background:#28a745;
    color:#fff;
}

.mcq-register-btn:hover{
    background:#1e7e34;
}

/* Review Navigation */
.review-nav{
    background:#f8f9fa;
    border-radius:10px;
    padding:20px;
    margin-bottom:20px;
}

.review-nav h3{
    text-align:center;
    margin:15px 0;
    color:#007cba;
}

.back-btn{
    background:#6c757d;
    color:white;
}

.back-btn:hover{
    background:#545b62;
}

/* Responsive Design */
@media (max-width:768px){
    .exam-meta-grid{
        gap:8px;
    }
    
    .meta-item{
        padding:6px 10px;
        font-size:0.85rem;
    }
    
    .subject-buttons{
        gap:5px;
    }
    
    .subject-btn{
        padding:8px 10px;
        font-size:0.85rem;
    }
    
    .result-actions{
        flex-direction:column;
        align-items:center;
    }
    
    .action-btn{
        width:100%;
        max-width:300px;
    }
    
    .nav-row{
        flex-direction:column;
    }
    
    .nav-btn{
        width:100%;
    }
}

@media (max-width:480px){
    #simpleExamContainer{
        padding:10px;
    }
    
    .exam-info{
        padding:12px;
    }
    
    .exam-info h2{
        font-size:1.3rem;
    }
    
    .exam-status-badge{
        position:relative;
        top:auto;
        right:auto;
        display:inline-block;
        margin-bottom:10px;
    }
    
    /* Extra small screens: keep 2x2 but even more compact */
    .result-stat{
        min-height: 70px;
        padding:8px 6px;
    }
    
    .stat-value{
        font-size:1.3rem;
        margin-bottom:3px;
    }
    
    .stat-label{
        font-size:0.7rem;
    }
    
    .result-summary{
        padding:12px;
    }
    
    .result-summary h2{
        font-size:1.2rem;
        margin-bottom:12px;
    }
    
    .mcq-exam-grid{
        grid-template-columns:1fr;
    }
}

/* Extra compact for very small phones */
@media (max-width: 360px){
    .result-stats{
        gap:6px;
    }
    
    .result-stat{
        min-height: 65px;
        padding:6px 4px;
    }
    
    .stat-value{
        font-size:1.2rem;
    }
    
    .stat-label{
        font-size:0.65rem;
    }
}

/* New CSS Additions */
.center-align {
    text-align: center;
}

/* Font Weight Improvements - শুধুমাত্র যেগুলো বোল্ড হতে হবে */
.bold-text,
.action-btn,
.subject-btn,
.nav-btn,
.mcq-btn,
.explanation-toggle,
.review-all-btn,
.review-subject-btn,
.back-btn,
.next-btn,
.submit-btn,
.result-btn,
.start-btn,
#startExam,
#viewResult,
.nav-btn.prev-btn,
.nav-btn.next-btn,
.nav-btn.submit-btn,
.action-btn.back-btn,
.action-btn.next-btn,
.action-btn.review-all-btn,
.action-btn.review-subject-btn,
.mcq-btn.mcq-login-btn,
.mcq-btn.mcq-register-btn,
.explanation-toggle,
.mcq-exam-card h3,
.mcq-exam-card .meta-item,
.exam-status,
.result-summary h2,
.result-stat .stat-value,
.result-stat .stat-label,
.result-actions button,
.answer-status,
.explanation-content strong,
.correct-answer strong,
.subject-header h3,
.subject-progress,
.mcq-login-box h3,
.mcq-login-box p,
.warning-message p,
.loading-message h3,
.loading-message p,
.exam-info h2,
.exam-meta-grid .meta-item,
.subjects-list strong,
.subject-tag,
#examTimer,
.exam-alert {
    font-weight: bold !important;
}

/* অপশনের ফন্ট স্বাভাবিক করার জন্য - স্পষ্টভাবে নির্দিষ্ট করুন */
.question-card .options-list label,
.question-card .options-list label span,
.question-card .options-list span,
.question-card .options-list input[type="radio"] + span,
.options-list label,
.options-list label span,
.options-list span {
    font-weight: normal !important;
}

/* প্রশ্নের টেক্সট এলাকা নরমাল রাখুন */
.question-text {
    font-weight: normal;
}

/* প্রশ্নের টেক্সট নিজে বোল্ড হবে */
.question-text strong {
    font-weight: bold !important;
}

/* অপশনের স্প্যান স্পষ্টভাবে নরমাল রাখুন */
.options-list span {
    font-weight: normal !important;
}

/* Mobile-specific Result Summary Enhancements */
@media (max-width: 768px) {
    .result-summary {
        padding: 15px;
    }
    
    .result-summary h2 {
        margin-bottom: 15px;
        font-size: 1.3rem;
    }
    
    .result-actions {
        gap: 10px;
    }
    
    .result-actions .action-btn {
        padding: 10px 20px;
        font-size: 0.95rem;
    }
}

/* Card hover effects for mobile */
@media (hover: hover) {
    .result-stat:hover {
        transform: translateY(-2px);
    }
}

.leaderboard-btn {
    background: #6c5ce7;
    color: #fff;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.leaderboard-btn:hover {
    background: #5a4bdc;
}