/* =========================== Global Styles =========================== */
 body {
     background: linear-gradient(to right, #f8f9fa, #eef4ff);
     font-family: 'Open Sans', sans-serif;
}
 h1, h2, h3, .navbar-brand {
     font-family: 'Poppins', sans-serif;
}
/* =========================== Navbar & Footer =========================== */
 .navbar-gradient {
     background: linear-gradient(45deg, #0d6efd, #6610f2);
}
 footer {
     background: linear-gradient(45deg, #212529, #343a40);
}
 footer a {
     transition: 0.3s;
}
 footer a:hover {
     color: #ffc107 !important;
}
 .social-icon {
     font-size: 1.5rem;
     transition: 0.3s;
}
 .social-icon:hover {
     transform: scale(1.2);
     color: #ffc107 !important;
}
/* =========================== Navigation Buttons =========================== */
 .nav-buttons {
     display: flex;
     justify-content: space-between;
     margin-top: 2rem;
}
 .btn-nav {
     min-width: 150px;
}
/* =========================== Cards & Sections =========================== */
 .category-card, .related-card, .article-card, .question-card {
     background: #fff;
     border-radius: 0.75rem;
     box-shadow: 0 0 30px rgba(0,0,0,0.08);
     padding: 2rem;
     transition: 0.3s;
     animation: fadeIn 0.6s ease-in-out;
}
 .category-card {
     border: 1px solid #ddd;
     text-align: center;
}
 .category-card:hover, .related-card:hover {
     transform: translateY(-5px);
     box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}
 .related-card {
     border: 1px solid #ddd;
}
 .question-card {
     border-radius: 1rem;
     border: 1px solid #dee2e6;
     margin-bottom: 16px;
}
/* =========================== Hero Section =========================== */
 .hero-section {
     padding: 80px 0;
     text-align: center;
}
 .hero-section h1 {
     font-size: 2.5rem;
}
/* =========================== Article Styles =========================== */
 h1.article-title {
     font-size: 2.2rem;
     font-weight: 700;
     line-height: 1.4;
     margin-bottom: 1rem;
     border-bottom: 3px solid #0d6efd20;
     padding-bottom: 0.3rem;
}
 .article-content h2, .article-content h3, .article-content h4, .article-content h5, .article-content h6 {
     font-weight: 600;
     margin-top: 2rem;
     margin-bottom: 1rem;
     position: relative;
}
 .article-content h2 {
     font-size: 1.6rem;
}
 .article-content h3 {
     font-size: 1.4rem;
}
 .article-content h4 {
     font-size: 1.2rem;
}
 .article-content h5 {
     font-size: 1.05rem;
}
 .article-content h6 {
     font-size: 0.95rem;
}
 .article-content p {
     line-height: 1.8;
     margin-bottom: 1rem;
}
/* Featured Image */
 .article-image {
     max-height: 400px;
     object-fit: cover;
     border-radius: 0.75rem;
     margin-bottom: 1.5rem;
}
/* =========================== Blockquotes & Images =========================== */
 .blockquote {
     margin: 25px 0;
     background: #f8f9fa;
     padding: 25px 30px;
     font-size: 1rem;
     border-left: 4px solid #1b1642;
     border-radius: 6px;
}
 .img-responsive {
     max-width: 100%;
     height: auto;
     display: block;
     border-radius: 8px;
}
/* =========================== Article Index (Sidebar) =========================== */
 .article-index {
     border: 1px solid #ddd;
     border-radius: 12px;
     overflow: scroll;
     max-height: 80vh;
     position: sticky;
     top: 90px;
}
 .article-index a {
     transition: all 0.2s ease-in-out;
}
 .article-index a:hover {
     background: #f1f5ff;
     text-decoration: none;
     transform: translateX(4px);
}
/* Accordion toggle */
 .accordion-button::after {
     filter: invert(1);
}
/* =========================== Article Meta =========================== */
 .article-meta {
     font-size: 0.9rem;
     color: #6c757d;
     margin-bottom: 1.5rem;
}
 .article-meta .meta-item {
     transition: all 0.2s ease-in-out;
     cursor: default;
}
 .article-meta .meta-item:hover {
     background: #eef3ff;
     transform: translateY(-2px);
}
/* =========================== Share Buttons =========================== */
 .share-btn {
     width: 45px;
     height: 45px;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 50%;
     transition: transform 0.2s ease;
}
 .share-btn:hover {
     transform: scale(1.1);
}
/* =========================== Quiz Styles =========================== */
 .quiz-info-box {
     display: inline-block;
     background-color: #f1f1f1;
     border-radius: 6px;
     padding: 6px 12px;
     margin-right: 8px;
     font-size: 0.875rem;
     font-weight: 500;
}
 .option-card {
     display: block;
     border: 1px solid #ddd;
     border-radius: 0.5rem;
     padding: 0.75rem 1rem;
     transition: 0.3s;
     cursor: pointer;
     background-color: #fff;
}
 .option-card:hover {
     background: linear-gradient(to right, #e0f3ff, #f0f8ff);
     border-color: #0d6efd;
     transform: scale(1.02);
     box-shadow: 0 4px 12px rgba(13,110,253,0.1);
}
 .option-card input[type="radio"] {
     margin-right: 0.5rem;
}
/* Answer States */
 .correct {
     background-color: #d4edda;
     border-color: #28a745;
     font-weight: 600;
}
 .wrong {
     background-color: #f8d7da;
     border-color: #dc3545;
     font-weight: 600;
}
 .not-attempted {
     background-color: #e2e3e5;
     border-color: #6c757d;
     color: #495057;
     font-weight: 600;
}
/* Answer Section */
 .answer-section {
     display: none;
     margin-top: 1rem;
}
 .correct-answer {
     color: green;
     font-weight: 600;
}
 .explanation {
     background: #f1f3f4;
     border-radius: 0.5rem;
     padding: 1rem;
}
/* Summary Box */
 .summary-box {
     display: inline-block;
     background-color: #f8f9fa;
     padding: 6px 12px;
     border-radius: 20px;
     margin: 4px 6px 4px 0;
     font-size: 0.9rem;
     font-weight: 500;
}
/* =========================== Animations =========================== */
 @keyframes fadeIn {
     from {
         opacity: 0;
         transform: translateY(20px);
    }
     to {
         opacity: 1;
         transform: translateY(0);
    }
}
/* =========================== Dark Theme Global =========================== */
 body.dark-theme {
     background: #121212 !important;
     color: #eaeaea !important;
     transition: background-color 0.3s, color 0.3s;
}
/* Headings & Text */
 body.dark-theme h1, body.dark-theme h2, body.dark-theme h3, body.dark-theme h4, body.dark-theme h5, body.dark-theme h6, body.dark-theme p, body.dark-theme span, body.dark-theme li, body.dark-theme a {
     color: #f1f1f1 !important;
     transition: color 0.3s;
}
/* Navbar */
 body.dark-theme .navbar-gradient {
     background: linear-gradient(45deg, #000000, #222222) !important;
}
 body.dark-theme .navbar .nav-link {
     color: #eaeaea !important;
}
 body.dark-theme .navbar .nav-link.active {
     color: #ccc !important;
}
/* Footer */
 body.dark-theme footer {
     background: linear-gradient(45deg, #000, #111) !important;
     color: #ddd !important;
}
 body.dark-theme footer a {
     color: #ddd !important;
}
 body.dark-theme footer a:hover {
     color: #ccc !important;
}
/* Cards, Sections, Accordions */
 body.dark-theme .card, body.dark-theme .article-card, body.dark-theme .category-card, body.dark-theme .question-card, body.dark-theme .accordion-body, body.dark-theme .accordion-item, body.dark-theme .list-group-item {
     background: #1e1e1e !important;
     border-color: #444 !important;
     color: #f1f1f1 !important;
}
/* Breadcrumb */
 body.dark-theme .breadcrumb {
     background-color: #1c1c1c !important;
}
 body.dark-theme .breadcrumb a {
     color: #bbb !important;
}
/* Article Index & Meta Tags */
 body.dark-theme .article-index, body.dark-theme .article-meta .meta-item {
     background: #1a1a1a !important;
     border-color: #444 !important;
     color: #f1f1f1 !important;
}
 body.dark-theme .article-index a:hover, body.dark-theme .article-meta .meta-item:hover {
     background: #2a2a2a !important;
}
/* Blockquote */
 body.dark-theme .blockquote {
     background: #1c1c1c !important;
     border-left-color: #666 !important;
     color: #ddd !important;
}
/* Quiz Option Cards */
 body.dark-theme .option-card {
     background: #222 !important;
     border-color: #555 !important;
     color: #eaeaea !important;
}
 body.dark-theme .option-card:hover {
     background: #2a2a2a !important;
     border-color: #666 !important;
}
/* Bootstrap Overrides in Dark Mode */
 body.dark-theme .bg-light {
     background-color: #1e1e1e !important;
}
 body.dark-theme .bg-white {
     background-color: #1e1e1e !important;
}
 body.dark-theme .text-dark {
     color: #f1f1f1 !important;
}
 body.dark-theme .border {
     border-color: #444 !important;
}
/* =========================== Dark Theme - Pagination =========================== */
 body.dark-theme .pagination {
     --bs-pagination-color: #e0e0e0;
     --bs-pagination-bg: #1e1e1e;
     --bs-pagination-border-color: #444;
     --bs-pagination-hover-color: #fff;
     --bs-pagination-hover-bg: #2c2c2c;
     --bs-pagination-hover-border-color: #555;
     --bs-pagination-active-color: #fff;
     --bs-pagination-active-bg: #444;
     --bs-pagination-active-border-color: #666;
     --bs-pagination-disabled-color: #777;
     --bs-pagination-disabled-bg: #1a1a1a;
     --bs-pagination-disabled-border-color: #333;
}
 body.dark-theme .page-link {
     color: var(--bs-pagination-color) !important;
     background-color: var(--bs-pagination-bg) !important;
     border: 1px solid var(--bs-pagination-border-color) !important;
}
 body.dark-theme .page-link:hover {
     color: var(--bs-pagination-hover-color) !important;
     background-color: var(--bs-pagination-hover-bg) !important;
     border-color: var(--bs-pagination-hover-border-color) !important;
}
 body.dark-theme .page-item.active .page-link {
     color: var(--bs-pagination-active-color) !important;
     background-color: var(--bs-pagination-active-bg) !important;
     border-color: var(--bs-pagination-active-border-color) !important;
}
 body.dark-theme .page-item.disabled .page-link {
     color: var(--bs-pagination-disabled-color) !important;
     background-color: var(--bs-pagination-disabled-bg) !important;
     border-color: var(--bs-pagination-disabled-border-color) !important;
}
/* =========================== Dark Theme - Buttons & Badges =========================== */
 body.dark-theme .btn, body.dark-theme .btn-outline-light, body.dark-theme .btn-outline-dark, body.dark-theme .btn-light, body.dark-theme .btn-outline-primary {
     color: #f1f1f1 !important;
     background-color: #333 !important;
     border-color: #666 !important;
}
 body.dark-theme .btn:hover, body.dark-theme .btn-outline-light:hover, body.dark-theme .btn-outline-dark:hover, body.dark-theme .btn-light:hover, body.dark-theme .btn-outline-primary:hover {
     color: #fff !important;
     background-color: #444 !important;
     border-color: #777 !important;
}
 body.dark-theme .badge {
     background-color: #444 !important;
     color: #f1f1f1 !important;
     border: 1px solid #666 !important;
}
/* =========================== Dark Theme - Dropdowns =========================== */
 body.dark-theme .dropdown-menu {
     background-color: #1e1e1e !important;
     border-color: #444 !important;
}
 body.dark-theme .dropdown-item {
     color: #eaeaea !important;
}
 body.dark-theme .dropdown-item:hover, body.dark-theme .dropdown-item:focus {
     background-color: #2a2a2a !important;
     color: #fff !important;
}
 body.dark-theme .dropdown-divider {
     border-color: #333 !important;
}
/* =========================== Dark Theme - Form Controls =========================== */
 body.dark-theme .form-control, body.dark-theme .form-select, body.dark-theme textarea.form-control {
     background-color: #1c1c1c !important;
     color: #f1f1f1 !important;
     border: 1px solid #444 !important;
}
 body.dark-theme .form-control:focus, body.dark-theme .form-select:focus, body.dark-theme textarea.form-control:focus {
     background-color: #222 !important;
     color: #fff !important;
     border-color: #666 !important;
     box-shadow: none !important;
}
 body.dark-theme .form-control::placeholder, body.dark-theme .form-select::placeholder {
     color: #aaa !important;
}
/* =========================== Dark Theme - Checkboxes & Radios =========================== */
 body.dark-theme .form-check-input {
     background-color: #222 !important;
     border-color: #555 !important;
}
 body.dark-theme .form-check-input:checked {
     background-color: #666 !important;
     border-color: #777 !important;
}
 body.dark-theme .form-check-label {
     color: #f1f1f1 !important;
}
/* =========================== Dark Theme - Input Groups =========================== */
 body.dark-theme .input-group-text {
     background-color: #2a2a2a !important;
     border-color: #444 !important;
     color: #ddd !important;
}
/* =========================== Dark Theme - Alerts =========================== */
 body.dark-theme .alert {
     background-color: #1e1e1e !important;
     border-color: #444 !important;
     color: #eaeaea !important;
}
/* =========================== Dark Theme - Tables =========================== */
 body.dark-theme table {
     color: #f1f1f1 !important;
     background-color: #1c1c1c !important;
     border-color: #444 !important;
}
 body.dark-theme th, body.dark-theme td {
     border-color: #444 !important;
}
/* =========================== Dark Theme - Modals =========================== */
 body.dark-theme .modal-content {
     background-color: #1e1e1e !important;
     color: #f1f1f1 !important;
     border-color: #444 !important;
}
/* =========================== Dark Theme - Quiz Info Box =========================== */
 body.dark-theme .quiz-info-box {
     display: inline-block;
     background-color: #2a2a2a !important;
    /* neutral dark */
     color: #f1f1f1 !important;
     border: 1px solid #444 !important;
     border-radius: 6px;
     padding: 4px 8px;
     margin-right: 6px;
     font-size: 0.875rem;
}
 body.dark-theme .quiz-info-box b {
     color: #eaeaea !important;
}
/* =========================== Dark Theme - Article Title & Meta =========================== */
 body.dark-theme h1, body.dark-theme h2, body.dark-theme h3, body.dark-theme h4, body.dark-theme h5, body.dark-theme h6 {
     color: #f1f1f1 !important;
    /* neutral light gray */
}
 body.dark-theme h1 span, body.dark-theme h2 span, body.dark-theme h3 span, body.dark-theme h4 span, body.dark-theme h5 span, body.dark-theme h6 span {
     color: #f1f1f1 !important;
    /* ensure spans inside headings inherit */
}
/* Remove any Bootstrap text color classes */
 body.dark-theme .text-primary, body.dark-theme .text-success, body.dark-theme .text-warning, body.dark-theme .text-info, body.dark-theme .text-danger {
     color: #f1f1f1 !important;
}
/* Article Meta Container */
 body.dark-theme .article-meta {
     color: #bbb !important;
}
/* Meta Items */
 body.dark-theme .article-meta .meta-item {
     background-color: #2a2a2a !important;
    /* neutral dark bg */
     color: #eaeaea !important;
    /* text color */
     border: 1px solid #444 !important;
}
 body.dark-theme .article-meta .meta-item i {
     color: #eaeaea !important;
    /* neutral icon color */
}
/* Hover state */
 body.dark-theme .article-meta .meta-item:hover {
     background-color: #333 !important;
     color: #fff !important;
}
/* Remove Bootstrap bg-light class effect */
 body.dark-theme .article-meta .bg-light {
     background-color: #2a2a2a !important;
}
/* Remove text-primary / text-success / text-warning colors */
 body.dark-theme .text-primary, body.dark-theme .text-success, body.dark-theme .text-warning {
     color: #eaeaea !important;
}
/* =========================== Dark Theme - Article Index Header =========================== */
 body.dark-theme .article-index > .bg-primary {
     background-color: #2a2a2a !important;
    /* neutral dark background */
     color: #f1f1f1 !important;
    /* neutral text */
}
 body.dark-theme .article-index > .bg-primary h5 {
     color: #f1f1f1 !important;
    /* neutral heading color */
}
 body.dark-theme .article-index > .bg-primary i {
     color: #f1f1f1 !important;
    /* neutral icon color */
}
/* =========================== Dark Theme - Article Title =========================== */
 body.dark-theme h1.display-6, body.dark-theme h1.display-5, body.dark-theme h1.display-4, body.dark-theme h1.display-3, body.dark-theme h1.display-2, body.dark-theme h1.display-1 {
     color: #f1f1f1 !important;
    /* neutral light color */
}
 body.dark-theme h1.display-6 span {
     color: #f1f1f1 !important;
    /* ensures nested span text is also neutral */
}
/* Dark theme table links */
 body.dark-theme table a {
     color: #f1f1f1 !important;
    /* light text for links */
     text-decoration: underline;
    /* optional: keep underline */
}
 body.dark-theme table a:hover {
     color: #ffc107 !important;
    /* optional: hover highlight */
     text-decoration: none;
    /* optional: remove underline on hover */
}
/* Dark theme tables */
 body.dark-theme table {
     color: #eaeaea !important;
     background-color: #1e1e1e !important;
    /* table background */
     border-color: #333 !important;
}
 body.dark-theme table th, body.dark-theme table td {
     background-color: #1e1e1e !important;
    /* cells background */
     color: #eaeaea !important;
    /* cell text */
     border-color: #333 !important;
}
/* Table dark header (if using table-dark class) */
 body.dark-theme .table-dark {
     background-color: #2a2a2a !important;
     color: #f1f1f1 !important;
}
/* Links inside table */
 body.dark-theme table a {
     color: #f1f1f1 !important;
     text-decoration: underline;
}
 body.dark-theme table a:hover {
     color: #ffc107 !important;
     text-decoration: none;
}
 .contact-card {
     border-radius: 1rem;
     box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.08);
     transition: transform 0.2s ease-in-out;
}
 .contact-card:hover {
     transform: translateY(-4px);
}
 .contact-header {
     background: linear-gradient(135deg, #007bff, #6610f2);
     color: white;
     border-radius: 1rem 1rem 0 0;
     padding: 1.5rem;
     text-align: center;
}
 .contact-header h2 {
     margin: 0;
     font-weight: 600;
}
/* =========================== Fix: Related MCQs card - Dark Theme Paste this after your other dark-theme rules =========================== */
 body.dark-theme .related-card {
     background: #1e1e1e !important;
     border-color: #444 !important;
     color: #eaeaea !important;
     box-shadow: 0 6px 18px rgba(0,0,0,0.6) !important;
     transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
 body.dark-theme .related-card h6, body.dark-theme .related-card p, body.dark-theme .related-card .fst-italic, body.dark-theme .related-card .text-secondary {
     color: #dcdcdc !important;
}
/* make the whole anchor inherit colors and be clickable as a block */
 body.dark-theme a.text-decoration-none.related-link, body.dark-theme a.text-decoration-none .related-card {
     color: inherit !important;
     text-decoration: none !important;
     display: block;
    /* ensures anchor covers the whole card */
}
/* hover/tactile feedback for dark mode */
 body.dark-theme .related-card:hover {
     transform: translateY(-4px);
     box-shadow: 0 10px 26px rgba(0,0,0,0.75) !important;
     background: linear-gradient(135deg,#242424,#1a1a1a) !important;
}
/* make muted text readable in dark */
 body.dark-theme .related-card .text-muted {
     color: #9aa0a6 !important;
}
 .option-translation {
     color: #6c757d;
    /* Bootstrap muted gray (light mode) */
}
 body.dark-theme .option-translation {
     color: #dcdcdc;
    /* visible in dark mode */
}
/* Read time text */
.read-time {
    text-align: right;
    color: #6c757d; /* light mode muted gray */
}

body.dark-theme .read-time {
    color: #c0c0c0; /* visible in dark mode */
}