:root{--bg-color:#f8f9fa;--primary-blue:#0A66C2;--primary-hover:#084e96;--text-main:#333;--text-muted:#666;--white:#fff;--border-color:#e5e7eb;--card-shadow:0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -1px rgba(0,0,0,0.06);--badge-pink:#fdf2f8;--badge-pink-text:#db2777;--badge-red:#fef2f2;--badge-red-text:#dc2626;--badge-green:#f0fdf4;--badge-green-text:#16a34a;--badge-teal:#f0fdfa;--badge-teal-text:#0d9488;--badge-orange:#fff7ed;--badge-orange-text:#ea580c;--footer-bg:#1e293b;--footer-text:#cbd5e1;--pill-bg:#e0f2fe;--pill-text:#0369a1;--stats-bg:#e0f2fe;--testimonial-bg:linear-gradient(135deg,#fffbeb 0%,#fff 100%)}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Inter',sans-serif;color:var(--text-main);background-color:var(--bg-color);line-height:1.5}
a{text-decoration:none;color:inherit}
ul{list-style:none}
.container{max-width:1200px;margin:0 auto;padding:0 20px}
.highlight{color:var(--white);background-color:var(--primary-blue);padding:0 8px;border-radius:4px}
.page-title{text-align:center;margin:2rem auto 1rem}
.page-title h1{font-size:2rem;font-weight:700;margin-bottom:.5rem}
.page-title p{color:var(--text-muted);font-size:1rem}
.header{background-color:var(--white);border-bottom:1px solid var(--border-color);position:sticky;top:0;z-index:100}
.header-container{display:flex;justify-content:space-between;align-items:center;height:70px}
.logo{font-size:1.5rem;font-weight:700;color:var(--primary-blue)}
.nav ul{display:flex;gap:2rem}
.nav a{font-weight:500;color:var(--text-muted);transition:color .2s}
.nav a.active,.nav a:hover{color:var(--primary-blue)}
.search-bar{display:flex;align-items:center;background-color:var(--bg-color);border-radius:20px;padding:5px 15px;border:1px solid var(--border-color)}
.search-bar input{border:none;background:0 0;outline:0;padding:5px;width:200px;font-family:'Inter',sans-serif}
.hero{margin:2rem auto}
.hero-banner{background:linear-gradient(90deg,#004d40,#00796b);border-radius:12px;padding:4rem 2rem;text-align:center;color:var(--white);box-shadow:var(--card-shadow);display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:250px}
.hero-banner h2{color:var(--white);font-size:2.5rem;margin-bottom:1rem}
.hero-badges{display:flex;gap:1rem;justify-content:center}
.badge{padding:6px 16px;border-radius:20px;font-weight:600;font-size:.9rem}
.badge-green{background-color:#10b981;color:#fff}
.badge-orange{background-color:#f59e0b;color:#fff}
.section-bg{background-color:var(--white);border-radius:12px;padding:2rem;margin-bottom:2rem;box-shadow:var(--card-shadow)}
.section-header{display:flex;align-items:center;gap:1rem;margin-bottom:1.5rem}
.section-header h2{font-size:1.25rem;font-weight:600}
.badge-title{padding:4px 8px;border-radius:4px;font-size:.75rem;font-weight:700;text-transform:uppercase}
.badge-title.badge-pink{background-color:var(--badge-pink);color:var(--badge-pink-text)}
.badge-title.badge-red{background-color:var(--badge-red);color:var(--badge-red-text)}
.badge-title.badge-green{background-color:var(--badge-green);color:var(--badge-green-text)}
.badge-title.badge-teal{background-color:var(--badge-teal);color:var(--badge-teal-text)}
.badge-title.badge-orange{background-color:var(--badge-orange);color:var(--badge-orange-text)}
.exam-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:1rem}
.exam-card{background-color:var(--white);border:1px solid var(--border-color);border-radius:8px;padding:1.5rem 1rem;text-align:center;display:flex;flex-direction:column;align-items:center;gap:.5rem;transition:box-shadow .2s;cursor:pointer}
.exam-card:hover{box-shadow:var(--card-shadow)}
.icon-placeholder{width:40px;height:40px;background-color:#f1f5f9;border-radius:50%;margin-bottom:.5rem;display:flex;align-items:center;justify-content:center}
.icon-placeholder::after{content:'🏆';font-size:1.2rem}
.exam-card span{font-size:.85rem;font-weight:500;color:var(--text-main)}

/* Left original category CSS in case it's used elsewhere, new overrides are appended below */
.category-layout{display:grid;grid-template-columns:250px 1fr;gap:2rem}
.sidebar{border-right:1px solid var(--border-color);padding-right:1rem}
.category-list li{margin-bottom:.25rem}
.category-list a{display:block;padding:.75rem 1rem;border-radius:8px;color:var(--text-muted);font-weight:500;font-size:.9rem;transition:all .2s}
.category-list a:hover{background-color:#f8fafc;color:var(--primary-blue)}
.category-list a.active{background-color:var(--primary-blue);color:var(--white)}
.content-search{margin-bottom:1.5rem;max-width:400px}

.pill-grid{display:flex;flex-wrap:wrap;gap:.75rem}
.pill-btn{background-color:var(--primary-blue);color:var(--white);padding:.5rem 1.25rem;border-radius:50px;font-size:.85rem;font-weight:500;transition:background-color .2s;display:inline-flex;align-items:center;gap:.5rem}
.pill-btn::before{content:'';display:inline-block;width:16px;height:16px;background-color:rgba(255,255,255,.2);border-radius:50%}
.pill-btn:hover{background-color:var(--primary-hover)}
.test-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1.5rem}
.test-card{background-color:var(--white);border:1px solid var(--border-color);border-radius:8px;display:flex;flex-direction:column;overflow:hidden;transition:box-shadow .2s}
.test-card:hover{box-shadow:var(--card-shadow)}
.test-card-header{padding:1rem;border-bottom:1px solid var(--border-color);display:flex;justify-content:space-between;align-items:center}
.test-exam-name{font-weight:600;font-size:.9rem;display:flex;align-items:center;gap:.5rem}
.test-exam-name::before{content:'';display:inline-block;width:16px;height:16px;background-color:var(--primary-blue);border-radius:50%}
.badge-new{background-color:var(--badge-red-text);color:#fff;font-size:.65rem;padding:2px 6px;border-radius:4px;font-weight:700}
.test-card-body{padding:1rem;flex-grow:1}
.test-card-body h3{font-size:1rem;margin-bottom:.5rem}
.tag{display:inline-block;background-color:var(--pill-bg);color:var(--pill-text);font-size:.75rem;padding:2px 8px;border-radius:4px;margin-bottom:1rem}
.test-details{font-size:.8rem;color:var(--text-muted)}
.test-details li{margin-bottom:.25rem;display:flex;align-items:center;gap:.5rem}
.test-details li::before{content:'•';color:#cbd5e1}
.test-card-footer{padding:1rem;border-top:1px solid var(--border-color)}
.btn{display:block;width:100%;padding:.75rem;border:none;border-radius:6px;font-weight:500;font-family:inherit;cursor:pointer;text-align:center;transition:background-color .2s}
.btn-primary{background-color:var(--primary-blue);color:var(--white)}
.btn-primary:hover{background-color:var(--primary-hover)}
.statistics{background-color:var(--stats-bg);padding:3rem 0;margin-bottom:2rem}
.stats-header{display:flex;align-items:center;gap:1rem;margin-bottom:2rem;justify-content:center}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;text-align:center}
.stat-item{padding:1rem}
.stat-number{font-size:2rem;font-weight:700;color:var(--primary-blue);margin-bottom:.5rem}
.stat-label{font-size:.9rem;color:var(--text-muted);font-weight:500}
.testimonial-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem}
.testimonial-card{background:var(--testimonial-bg);border:1px solid var(--border-color);border-radius:8px;padding:1.5rem;display:flex;justify-content:space-between;align-items:flex-start}
.testimonial-content{flex:1}
.testimonial-content p{font-size:.9rem;color:var(--text-main);margin-bottom:1rem;font-style:italic}
.rating{font-size:.8rem;margin-bottom:.5rem}
.user-name{font-size:.85rem;font-weight:600;color:var(--text-muted)}
.avatar-placeholder{width:48px;height:48px;background-color:#e2e8f0;border-radius:50%;margin-left:1rem;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.avatar-placeholder::after{content:'👤';font-size:1.5rem}
.footer{background-color:var(--footer-bg);color:var(--footer-text);padding-top:3rem}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:2rem;margin-bottom:2rem}
.footer-logo{font-size:1.5rem;font-weight:700;color:var(--white);margin-bottom:1rem}
.brand-col p{font-size:.9rem;margin-bottom:1.5rem;color:#94a3b8;max-width:400px}
.footer-email{color:var(--white);font-weight:500;display:inline-flex;align-items:center;gap:.5rem}
.footer-email::before{content:'✉️'}
.footer-col h3{color:var(--white);font-size:1.1rem;margin-bottom:1rem}
.footer-col ul li{margin-bottom:.5rem}
.footer-col a{color:#94a3b8;font-size:.9rem;transition:color .2s}
.footer-col a:hover{color:var(--white)}
.footer-bottom{background-color:#0f172a;padding:1.5rem 0;text-align:center}
.footer-bottom p{font-size:.85rem;color:#64748b}

/* Responsive Overrides (Original) */
@media (max-width:992px){
    .category-layout{grid-template-columns:1fr}
    .sidebar{border-right:none;border-bottom:1px solid var(--border-color);padding-right:0;padding-bottom:1rem}
    .category-list{display:flex;overflow-x:auto;gap:.5rem;padding-bottom:.5rem}
    .category-list li{margin-bottom:0;white-space:nowrap}
    .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:768px){
    .header-container{flex-direction:column;height:auto;padding:1rem 0;gap:1rem}
    .nav ul{flex-wrap:wrap;justify-content:center}
    .search-bar{width:100%;max-width:400px}
    .stats-grid{grid-template-columns:1fr 1fr}
    .hero-banner{padding:2rem 1rem}
    .hero-banner h2{font-size:1.75rem}
    .hero-badges{flex-direction:column;align-items:center}
    .footer-grid{grid-template-columns:1fr}
}
@media (max-width:480px){
    .stats-grid,.exam-grid,.test-grid{grid-template-columns:1fr}
    .pill-btn{width:100%;display:flex;justify-content:center}
}

/* --- NEW CATEGORY LAYOUT ADDITIONS --- */
.category-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.header-left h2 {
    font-size: 1.5rem;
    font-weight: 600;
}

.category-layout-wrapper {
    display: grid;
    grid-template-columns: 240px 1fr;
    background-color: #f1f5f9; 
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
}

.sidebar-tabs {
    background-color: var(--white);
    border-right: 1px solid var(--border-color);
    max-height: 600px;
    overflow-y: auto;
}

/* Custom minimal scrollbar for sidebar */
.sidebar-tabs::-webkit-scrollbar { width: 4px; }
.sidebar-tabs::-webkit-scrollbar-track { background: transparent; }
.sidebar-tabs::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }

.tab-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: transparent;
    border: none;
    border-bottom: 1px solid #f8fafc;
    text-align: left;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-main);
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s ease;
}

.tab-btn:hover {
    background-color: #f8fafc;
    color: var(--primary-blue);
}

.tab-btn.active {
    background-color: #f1f5f9; 
    color: var(--primary-blue);
    font-weight: 600;
    border-left: 3px solid var(--primary-blue);
}

.tab-icon {
    margin-right: 10px;
    font-size: 1.1rem;
}

.tab-arrow {
    color: #94a3b8;
    font-size: 1.2rem;
}

.tab-btn.active .tab-arrow {
    color: var(--primary-blue);
}

.main-content-panes {
    padding: 1.5rem;
    max-height: 600px;
    overflow-y: auto;
}

.tab-pane {
    display: none;
    animation: fadeIn 0.3s ease;
}

.tab-pane.active {
    display: block;
}

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

.sub-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 1rem;
}

.sub-card {
    background-color: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--primary-blue);
    font-weight: 500;
    font-size: 0.95rem;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    transition: box-shadow 0.2s, transform 0.2s;
}

.sub-card:hover {
    box-shadow: var(--card-shadow);
    transform: translateY(-2px);
}

.card-icon {
    width: 36px;
    height: 36px;
    background-color: var(--primary-blue);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
}

.card-icon::after {
    content: '';
    width: 14px;
    height: 14px;
    background-color: var(--white);
    border-radius: 3px;
    display: block;
}

/* Responsive adjustments for Mobile/Tablet */
@media (max-width: 992px) {
    .category-layout-wrapper {
        grid-template-columns: 1fr;
        background-color: transparent;
        border: none;
    }
    
    .sidebar-tabs {
        max-height: none;
        border-right: none;
        background: transparent;
        margin-bottom: 1rem;
    }
    
    .tab-list {
        display: flex;
        overflow-x: auto;
        gap: 0.5rem;
        padding-bottom: 0.5rem;
    }
    
    .tab-btn {
        white-space: nowrap;
        border: 1px solid var(--border-color);
        border-radius: 50px;
        background-color: var(--white);
        padding: 8px 16px;
        width: auto;
    }
    
    .tab-btn.active {
        border-left: 1px solid var(--primary-blue);
        background-color: var(--primary-blue);
        color: var(--white);
    }
    
    .tab-btn.active .tab-arrow { color: var(--white); }
    .tab-arrow { display: none; } 
    
    .main-content-panes {
        padding: 0;
        max-height: none;
        overflow: visible;
    }
}

@media (max-width: 480px) {
    .category-header-row {
        flex-direction: column;
        align-items: flex-start;
    }
    .content-search {
        width: 100%;
        max-width: 100%;
        margin-bottom: 0;
    }
}

/* ========================================== */
/* NEW STATS & TESTIMONIALS STYLES            */
/* ========================================== */

.custom-stats-section {
    background-color: #f0f8ff; /* Full width soft light blue strip */
    padding: 3.5rem 0;
    margin: 3rem 0;
    width: 100%;
}

.custom-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    text-align: center;
}

.custom-stat-item {
    padding: 1rem;
    border-right: 2px solid #dbeafe; /* Vertical dividers */
}

.custom-stat-item:last-child {
    border-right: none;
}

.custom-stat-number {
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--primary-blue);
    margin-bottom: 0.5rem;
}

.custom-stat-label {
    font-size: 1rem;
    color: var(--text-muted);
    font-weight: 500;
}

.custom-testimonials-section {
    margin-bottom: 5rem;
}

.custom-testimonial-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.custom-testi-card {
    border-radius: 12px;
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
    transition: transform 0.2s ease;
}

.custom-testi-card:hover {
    transform: translateY(-4px);
}

.card-light-blue {
    background-color: #f0f5ff; /* Soft blue card */
}

.card-soft-yellow {
    background-color: #fffbeb; /* Soft yellow card */
}

.custom-testi-text {
    font-size: 1.05rem;
    color: var(--text-main);
    line-height: 1.6;
    margin-bottom: 2rem;
    font-style: italic;
}

.custom-testi-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.custom-testi-name {
    font-weight: 700;
    color: var(--text-main);
    margin-top: 0.5rem;
    font-size: 1.1rem;
}

.custom-stars {
    display: flex;
    gap: 3px;
}

.custom-stars svg {
    width: 20px;
    height: 20px;
    fill: #f59e0b; /* Yellow star color */
}

.custom-avatar {
    width: 56px;
    height: 56px;
    background-color: #cbd5e1;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    color: #fff;
    flex-shrink: 0;
}

/* --- Mobile Responsiveness --- */
@media (max-width: 992px) {
    .custom-stats-grid {
        grid-template-columns: 1fr 1fr;
    }
    .custom-stat-item {
        border-right: none;
        border-bottom: 2px solid #dbeafe;
        padding: 1.5rem 0;
    }
    .custom-stat-item:nth-last-child(-n+2) {
        border-bottom: none;
    }
    .custom-testimonial-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .custom-stats-grid {
        grid-template-columns: 1fr;
    }
    .custom-stat-item {
        border-bottom: 2px solid #dbeafe;
    }
    .custom-stat-item:last-child {
        border-bottom: none;
    }
}

/* ========================================== */
/* EXAM TEST LISTING PAGE STYLES              */
/* ========================================== */

.testListingContainer {
    margin-top: 2rem;
    margin-bottom: 4rem;
    display: flex;
    flex-direction: column;
}

/* Breadcrumb Styling */
.breadcrumbNav {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.breadcrumbLink {
    color: var(--primary-blue);
    font-weight: 500;
    transition: color 0.2s ease;
}

.breadcrumbLink:hover {
    color: var(--primary-hover);
    text-decoration: underline;
}

.breadcrumbIcon {
    color: #94a3b8;
}

.breadcrumbCurrent {
    font-weight: 600;
    color: var(--text-main);
}

/* Header Styling */
.listingPageHeader {
    margin-bottom: 2rem;
}

.listingPageHeader h1 {
    font-size: 2rem;
    color: var(--text-main);
    margin-bottom: 0.5rem;
}

.listingPageHeader p {
    color: var(--text-muted);
    font-size: 1rem;
}

/* Vertical Test Cards */
.verticalTestList {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.listTestCard {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1.5rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.listTestCard:hover {
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.08);
    transform: translateY(-2px);
}

.listCardLeft {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.badgeGreen {
    background-color: #e6f4ea;
    color: #137333;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-bottom: 0.75rem;
}

.listCardTitle {
    font-size: 1.35rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    color: var(--text-main);
}

.listCardMeta {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.metaItem {
    font-size: 0.9rem;
    color: var(--text-muted);
    font-weight: 500;
    display: flex;
    align-items: center;
}

.listCardRight {
    display: flex;
    align-items: center;
}

.btnStartPrimary {
    background-color: var(--primary-blue);
    color: var(--white);
    padding: 0.8rem 2.5rem;
    border-radius: 6px;
    font-weight: 600;
    font-size: 1rem;
    text-align: center;
    transition: background-color 0.2s ease;
}

.btnStartPrimary:hover {
    background-color: var(--primary-hover);
}

/* SEO Content Block */
.seoContentBlock {
    background-color: #f8fafc;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 2.5rem;
    margin-top: 3.5rem;
}

.seoContentBlock h2 {
    font-size: 1.75rem;
    color: var(--primary-blue);
    margin-bottom: 1rem;
}

.seoContentBlock h3 {
    font-size: 1.35rem;
    color: var(--text-main);
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.seoContentBlock p {
    color: var(--text-main);
    line-height: 1.7;
    margin-bottom: 1rem;
    font-size: 1.05rem;
}

.seoList {
    list-style-type: disc;
    margin-left: 1.5rem;
    margin-bottom: 1.5rem;
}

.seoList li {
    color: var(--text-main);
    line-height: 1.7;
    margin-bottom: 0.75rem;
    font-size: 1.05rem;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .listTestCard {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.5rem;
    }
    
    .listCardRight {
        width: 100%;
        align-self: stretch;
    }
    
    .btnStartPrimary {
        display: block;
        width: 100%;
    }
    
    .listCardMeta {
        gap: 0.5rem;
        flex-direction: column;
    }

    .seoContentBlock {
        padding: 1.5rem;
    }
}

/* ========================================== */
/* LIVE TEST UI STYLES                        */
/* ========================================== */

.liveTestContainer {
    display: grid;
    grid-template-columns: 7fr 3fr; /* 70% and 30% split */
    gap: 2rem;
    align-items: start;
}

/* Left Column Styling */
.testLeftCol {
    background-color: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.04);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.questionHeader {
    background-color: #f8fafc;
    border-bottom: 1px solid var(--border-color);
    padding: 1rem 1.5rem;
}

.questionHeader h2 {
    font-size: 1.1rem;
    color: var(--text-muted);
    font-weight: 600;
}

.questionBody {
    padding: 2rem 1.5rem;
    min-height: 350px;
}

.questionText {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--text-main);
    margin-bottom: 2rem;
    line-height: 1.6;
}

.optionsGrid {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.optionLabel {
    display: flex;
    align-items: center;
    padding: 1rem 1.25rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 1rem;
    color: var(--text-main);
    background-color: var(--white);
}

.optionLabel:hover {
    background-color: #f8fafc;
    border-color: #cbd5e1;
}

.optionSelected {
    background-color: #f0fdf4 !important;
    border-color: #16a34a !important;
}

.optionRadio {
    margin-right: 1rem;
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.questionFooter {
    padding: 1.25rem 1.5rem;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    background-color: #f8fafc;
}

.btnNav {
    padding: 0.75rem 2rem;
    border-radius: 6px;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btnNav:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btnOutline {
    background-color: transparent;
    border: 1px solid var(--primary-blue);
    color: var(--primary-blue);
}

.btnOutline:hover:not(:disabled) {
    background-color: #f0f8ff;
}

.btnPrimary {
    background-color: var(--primary-blue);
    border: 1px solid var(--primary-blue);
    color: var(--white);
}

.btnPrimary:hover:not(:disabled) {
    background-color: var(--primary-hover);
}

.btnSubmit {
    background-color: #16a34a;
    border-color: #16a34a;
}

.btnSubmit:hover:not(:disabled) {
    background-color: #15803d;
}

/* Right Column Styling */
.testRightCol {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.timerBox {
    background-color: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1.5rem;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.04);
}

.timerLabel {
    font-size: 0.9rem;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem;
}

.timerValue {
    font-size: 2.5rem;
    font-weight: 700;
    color: #dc2626; /* Red for urgency */
}

.paletteBox {
    background-color: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1.5rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.04);
}

.paletteTitle {
    font-size: 1.1rem;
    color: var(--text-main);
    margin-bottom: 1rem;
    font-weight: 600;
}

.paletteLegend {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.legendItem {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.legendBox {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    display: inline-block;
}

.paletteGrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
    gap: 8px;
}

.paletteBtn {
    width: 100%;
    aspect-ratio: 1/1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.unattemptedBtn {
    background-color: var(--white);
    border: 1px solid #cbd5e1;
    color: var(--text-main);
}

.answeredBtn {
    background-color: #16a34a;
    border: 1px solid #16a34a;
    color: var(--white);
}

.activePaletteBtn {
    border: 2px solid var(--primary-blue) !important;
    box-shadow: 0 0 0 2px rgba(10, 102, 194, 0.2);
}

/* Mobile Responsiveness */
@media (max-width: 992px) {
    .liveTestContainer {
        grid-template-columns: 1fr; /* Stack columns on smaller screens */
    }
    
    .testRightCol {
        flex-direction: row;
        align-items: stretch;
    }
    
    .timerBox, .paletteBox {
        flex: 1;
    }
}

@media (max-width: 768px) {
    .testRightCol {
        flex-direction: column;
    }
    .questionFooter {
        flex-direction: column;
        gap: 1rem;
    }
    .btnNav {
        width: 100%;
    }
}

/* ========================================== */
/* PROFESSIONAL EXAM UI ADDITIONS             */
/* ========================================== */

/* Section Tabs */
.sectionTabs {
    display: flex;
    background-color: #f8fafc;
    border-bottom: 1px solid var(--border-color);
    overflow-x: auto;
}

.tabBtn {
    padding: 1rem 1.5rem;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-muted);
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.tabBtn:hover {
    color: var(--primary-blue);
    background-color: #f1f5f9;
}

.activeTab {
    color: var(--primary-blue);
    border-bottom-color: var(--primary-blue);
    background-color: #fff;
}

/* Review Button & Palette */
.btnWarning {
    background-color: #f3e8ff;
    border: 1px solid #a855f7;
    color: #7e22ce;
}

.btnWarning:hover {
    background-color: #e9d5ff;
}

.reviewBox {
    background-color: #9333ea;
}

.reviewBtn {
    background-color: #9333ea !important;
    border-color: #9333ea !important;
    color: #fff !important;
}

/* Scorecard UI */
.scorecardUI {
    padding: 3rem 2rem;
    text-align: center;
    background-color: var(--white);
    flex-grow: 1;
}

.scoreTitle {
    color: #16a34a;
    font-size: 1.75rem;
    margin-bottom: 2rem;
}

.scoreGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.scoreCardItem {
    background-color: #f8fafc;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-size: 1rem;
    color: var(--text-muted);
}

.scoreCardItem strong {
    font-size: 2rem;
    color: var(--text-main);
}

.finalMark {
    background-color: #f0f8ff;
    border-color: var(--primary-blue);
}

.finalMark strong {
    color: var(--primary-blue);
}

/* ========================================== */
/* REVIEW MODE STYLES                         */
/* ========================================== */

.optionCorrect {
    background-color: #dcfce7 !important;
    border-color: #16a34a !important;
    color: #166534;
}

.optionIncorrect {
    background-color: #fee2e2 !important;
    border-color: #dc2626 !important;
    color: #991b1b;
}

.optionMissed {
    background-color: #e0f2fe !important;
    border-color: #0284c7 !important;
    color: #075985;
}

.notAttemptedBadge {
    display: inline-block;
    background-color: #fef08a;
    color: #854d0e;
    font-size: 0.8rem;
    padding: 4px 10px;
    border-radius: 4px;
    margin-bottom: 1.5rem;
    font-weight: 600;
}