/* ================================================================== Global Stylesheet for MCQ Plugin @version 3.0 - REVERTED ASTRA FLYOUT MENU @MODIFIED: Removed the failing CSS overrides for .ast-flyout-menu-container as requested. The mobile menu will now retain its default theme styling, remaining light in dark mode. ================================================================== */ /* --- 1. Global Theming Variables --- */ :root { --nm-bg-primary: #ffffff; --nm-bg-secondary: #fcfcfc; --nm-bg-tertiary: #f9f9f9; --nm-bg-explanation: #f3f6f9; --nm-border-primary: #e0e0e0; --nm-border-secondary: #ccc; --nm-border-hover: #9ac5f0; --nm-text-primary: #2c3e50; --nm-text-secondary: #333; --nm-text-action: #555; --nm-brand-color: #3498db; --nm-btn-bg: #667eea; --nm-btn-text: #ffffff; --nm-correct-bg: #e7f5e8; --nm-correct-border: #6bbe6e; --nm-correct-text: #1e6f23; --nm-wrong-bg: #fde8e8; --nm-wrong-border: #e88282; --nm-wrong-text: #a92020; } html.dark-mode { --nm-bg-primary: #121212; --nm-bg-secondary: #1e1e1e; --nm-bg-tertiary: #2a2a2a; --nm-bg-explanation: #2a2a2a; --nm-text-primary: #e0e0e0; --nm-text-secondary: #e0e0e0; --nm-text-action: #bbbbbb; --nm-border-primary: #333333; --nm-border-secondary: #444444; --nm-border-hover: #555555; --nm-link-color: #bb86fc; --nm-input-bg: #2a2a2a; --nm-input-text: #f1f1f1; --nm-input-border: #555555; --nm-btn-bg: #bb86fc; --nm-btn-text: #121212; --nm-correct-bg: #2d572c; --nm-correct-border: #4e8c4c; --nm-correct-text: #f0fdf5; --nm-wrong-bg: #6b2d2d; --nm-wrong-border: #a94442; --nm-wrong-text: #fde8e8; } /* --- 2. Top Navigation (Original) --- */ .nm-top-nav { display: flex; align-items: center; gap: 20px; padding: 12px 25px; background: white; /* This is OK, it's a specific header bar */ border-bottom: 1px solid #e0e0e0; margin-bottom: 20px; flex-wrap: wrap; } .nm-nav-item { color: #333; text-decoration: none; font-size: 14px; font-weight: 500; padding: 6px 12px; border-radius: 4px; transition: all 0.2s ease; white-space: nowrap; } .nm-nav-item:hover { background: #f0f0f0; color: #667eea; } .nm-nav-item.active { background: #667eea; color: white; } .nm-nav-spacer { flex: 1; } .nm-user-greeting { color: #666; font-size: 13px; white-space: nowrap; } .nm-nav-item.logout { color: #ff5252; } .nm-nav-item.logout:hover { background: #ffebee; color: #c62828; } @media (max-width: 768px) { .nm-top-nav { padding: 10px 15px; gap: 10px; } .nm-nav-item { padding: 5px 10px; font-size: 13px; } .nm-user-greeting { display: none; } } /* --- 3. Global Button Styles (for Widgets) --- */ .nm-btn { padding: 12px 28px; border: none; border-radius: 8px; font-size: 15px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; display: inline-block; text-decoration: none; text-align: center; } .nm-btn-block { width: 100%; } .nm-btn-primary { background: var(--nm-btn-bg); color: var(--nm-btn-text); box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3); } html.dark-mode .nm-btn-primary { box-shadow: 0 4px 12px rgba(187, 134, 252, 0.2); } .nm-btn-primary:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4); } html.dark-mode .nm-btn-primary:hover:not(:disabled) { box-shadow: 0 6px 20px rgba(187, 134, 252, 0.3); } .nm-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none !important; box-shadow: none !important; } /* --- 4. Topic Widget Styles (MOVED FROM frontend.css) --- */ .widget_nm_mcq_topic_widget, .widget_nm_featured_topics_widget, .widget_nm_flexible_taxonomy_widget, .nm-widget-wrapper { border: 1px solid var(--nm-border-primary); border-radius: 8px; padding: 20px; background-color: var(--nm-bg-primary); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); } .widget_nm_mcq_topic_widget .widget-title, .widget_nm_featured_topics_widget .widget-title, .widget_nm_flexible_taxonomy_widget .widget-title { font-size: 1.2em; font-weight: 600; color: var(--nm-text-primary); margin-bottom: 15px; padding-bottom: 10px; border-bottom: 2px solid var(--nm-bg-tertiary); } .widgetnmmcqtopicwidget .widget-title, .widgetnmfeaturedtopicswidget .widget-title, .widgetnmflexibletaxonomywidget .widget-title { font-size: 1.2em; font-weight: 600; color: var(--nm-text-primary); margin-bottom: 15px; padding-bottom: 10px; border-bottom: 2px solid var(--nm-bg-tertiary); } .nm-topic-list { list-style: none; padding: 0; margin: 0; } .nm-topic-list li { margin-bottom: 2px; list-style: none; } .nm-topic-list li a { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; text-decoration: none; color: var(--nm-text-secondary); border-radius: 6px; transition: background-color 0.2s ease, color 0.2s ease; } .nm-topic-list li a:hover { background-color: var(--nm-bg-tertiary); color: var(--nm-brand-color); } .nm-topic-name { font-weight: 500; flex: 1; word-break: break-word; } .nm-topic-count { font-size: 0.8em; background-color: var(--nm-bg-tertiary); color: var(--nm-text-action); padding: 2px 7px; border-radius: 10px; font-weight: 600; margin-left: 10px; flex-shrink: 0; } /* Specific Widget Colors */ .nm-all-topics .nm-topic-count { background: #e3f2fd; color: #1976d2; } .nm-featured-topics .nm-topic-count { background: #fff3e0; color: #f57c00; } /* --- 5. Subscribe Form Styles (NEW) --- */ .nm-subscribe-form { max-width: 500px; margin: 30px auto; padding: 30px; border-radius: 12px; } .nm-subscribe-form h3 { margin-top: 0; color: var(--nm-text-primary); } .nm-subscribe-form p { color: var(--nm-text-secondary); } .nm-subscribe-form-ajax { margin-top: 20px; } .nm-subscribe-form input[type="email"] { width: 100%; padding: 12px; border: 2px solid var(--nm-border-primary); border-radius: 6px; margin-bottom: 10px; box-sizing: border-box; background: var(--nm-bg-primary); color: var(--nm-text-primary); } .nm-subscribe-btn { width: 100%; padding: 12px; border: none; border-radius: 6px; font-weight: bold; cursor: pointer; } .nm-subscribe-footer { font-size: 12px; color: #888; margin-bottom: 0; } .nm-subscribe-message { margin-top: 15px; padding: 10px; border-radius: 6px; display: none; } .nm-subscribe-message.success { background: var(--nm-correct-bg); color: var(--nm-correct-text); border: 1px solid var(--nm-correct-border); } .nm-subscribe-message.error { background: var(--nm-wrong-bg); color: var(--nm-wrong-text); border: 1px solid var(--nm-wrong-border); } /* --- 6. Floating Score Tracker (MOVED FROM frontend.css) --- */ .nm-score-tracker{ position: fixed; bottom: 80px; right: 20px; background: #fff; padding: 15px 20px; border-radius: 10px; box-shadow: 0 4px 20px rgba(0,0,0,.18); z-index: 998; min-width: 140px; display: none; /* shown by JS when first answer is attempted */ border: 2px solid #667eea; content-visibility: auto; contain: layout style paint; } .nm-score-tracker.visible{ display:block; } .nm-score-title{ font-size:.85em; color:#666; margin-bottom:6px; } .nm-score-number{ font-size:1.8em; font-weight:700; color:#667eea; } .nm-score-label{ font-size:.8em; color:#999; } @media (max-width: 767px){ .nm-score-tracker{ bottom: 70px; right: 15px; padding: 12px 16px; min-width: 120px; font-size: .9em; } .nm-score-number{ font-size: 1.5em; } } /* ================================================================== 7. Site-wide Theme Toggle (NEW STYLES) ================================================================== */ .nm-theme-toggle-container { display: inline-block; /* Allows placement inside menu items */ padding: 4px; /* Give it space to align with other nav items */ } .nm-theme-toggle-btn { background: var(--nm-bg-tertiary); border: 1px solid var(--nm-border-primary); border-radius: 20px; cursor: pointer; padding: 6px 8px; line-height: 1; font-size: 18px; transition: all 0.2s ease-in-out; } .nm-theme-toggle-btn:hover { border-color: var(--nm-text-action); } /* In Light Mode (default), show the MOON icon */ html:not(.dark-mode) .nm-theme-icon-dark { display: inline-block; } html:not(.dark-mode) .nm-theme-icon-light { display: none; } /* In Dark Mode, show the SUN icon */ html.dark-mode .nm-theme-icon-dark { display: none; } html.dark-mode .nm-theme-icon-light { display: inline-block; } /* Mobile Menu Fix (image_503c05.png) This rule hides the WIDGET when inside Astra's mobile menu, preventing the broken layout. */ .ast-header-break-point .ast-mobile-menu-content .widget_nm_dark_mode_toggle_widget { display: none !important; } /* ================================================================== MASTER DARK MODE OVERRIDES (CENTRALIZED) ================================================================== */ /* --- 1. General Theme/Body --- */ html.dark-mode body { background-color: var(--nm-bg-primary) !important; color: var(--nm-text-primary) !important; } html.dark-mode a { color: var(--nm-link-color) !important; } html.dark-mode h1, html.dark-mode h2, html.dark-mode h3, html.dark-mode h4, html.dark-mode h5, html.dark-mode h6 { color: #ffffff !important; } /* --- 2. Astra Theme Overrides --- */ html.dark-mode .ast-separate-container .ast-article-post, html.dark-mode .ast-separate-container .ast-article-single, html.dark-mode.ast-separate-container #primary #main .ast-archive-description, html.dark-mode.ast-separate-container #primary.content-area .ast-article-post .entry-header { background-color: var(--nm-bg-secondary) !important; border-color: var(--nm-border-primary) !important; } html.dark-mode .ast-separate-container .ast-comment-list li, html.dark-mode .ast-separate-container .ast-woocommerce-container, html.dark-mode .ast-separate-container .comments-count-wrapper, html.dark-mode .ast-separate-container .comment-respond { background-color: var(--nm-bg-secondary) !important; } html.dark-mode .ast-pagination a { color: var(--nm-text-primary) !important; } html.dark-mode .ast-pagination a:hover, html.dark-mode .ast-pagination a.current { color: #fff !important; background: var(--nm-btn-bg) !important; border-color: var(--nm-btn-bg) !important; } /* --- 3. Widgets (from frontend.css) --- */ html.dark-mode .widget_nm_mcq_topic_widget, html.dark-mode .widget_nm_featured_topics_widget, html-dark-mode .widget_nm_flexible_taxonomy_widget, html.dark-mode .nm-widget-wrapper { background-color: var(--nm-bg-secondary) !important; border-color: var(--nm-border-primary) !important; } html.dark-mode .widgetnmmcqtopicwidget, html.dark-mode .widgetnmfeaturedtopicswidget, html.dark-mode .widgetnmflexibletaxonomywidget, html.dark-mode .nm-widget-wrapper { background-color: var(--nm-bg-secondary) !important; border-color: var(--nm-border-primary) !important; } html.dark-mode .widget_nm_mcq_topic_widget .widget-title, html.dark-mode .widget_nm_featured_topics_widget .widget-title, html.dark-mode .widget_nm_flexible_taxonomy_widget .widget-title { color: var(--nm-text-primary) !important; border-bottom-color: var(--nm-border-primary) !important; } html.dark-mode .widgetnmmcqtopicwidget .widget-title, html.dark-mode .widgetnmfeaturedtopicswidget .widget-title, html.dark-mode .widgetnmflexibletaxonomywidget .widget-title { color: var(--nm-text-primary) !important; border-bottom-color: var(--nm-border-primary) !important; } html.dark-mode .nm-topic-list li a { color: var(--nm-text-primary) !important; } html.dark-mode .nm-topic-list li a:hover { background-color: var(--nm-bg-tertiary) !important; color: var(--nm-link-color) !important; } html.dark-mode .nm-topic-count { background-color: var(--nm-border-primary) !important; color: var(--nm-text-primary) !important; } html.dark-mode .nm-all-topics .nm-topic-count { background: #2d3d5c !important; color: #90caf9 !important; } html.dark-mode .nm-featured-topics .nm-topic-count { background: #4a3a1f !important; color: #ffb74d !important; } /* --- 4. Subscribe Form Widget (from this file) --- */ html.dark-mode .nm-subscribe-form { background: var(--nm-bg-secondary) !important; border-color: var(--nm-border-primary) !important; } html.dark-mode .nm-subscribe-form h3, html.dark-mode .nm-subscribe-form p { color: var(--nm-text-primary) !important; } html.dark-mode .nm-subscribe-form input[type="email"] { background: var(--nm-input-bg) !important; color: var(--nm-input-text) !important; border-color: var(--nm-input-border) !important; } html.dark-mode .nm-subscribe-footer { color: var(--nm-text-action) !important; } html.dark-mode .nm-subscribe-message.success { background: var(--nm-correct-bg) !important; color: var(--nm-correct-text) !important; border-color: var(--nm-correct-border) !important; } html.dark-mode .nm-subscribe-message.error { background: var(--nm-wrong-bg) !important; color: var(--nm-wrong-text) !important; border-color: var(--nm-wrong-border) !important; } /* --- 5. Floating Score Tracker (from this file) --- */ html.dark-mode .nm-score-tracker{ background: var(--nm-bg-secondary) !important; color: var(--nm-text-primary) !important; border-color: var(--nm-btn-bg) !important; box-shadow: 0 6px 24px rgba(0,0,0,.4) !important; } html.dark-mode .nm-score-title, html.dark-mode .nm-score-label { color: var(--nm-text-action) !important; } html.dark-mode .nm-score-number { color: var(--nm-btn-bg) !important; } /* --- 6. Auth Pages (from auth.css) --- */ html.dark-mode .nm-auth-wrapper { background: var(--nm-bg-primary) !important; } html.dark-mode .nm-auth-box { background: var(--nm-bg-secondary) !important; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4) !important; } html.dark-mode .nm-auth-promo { background: linear-gradient(135deg, #4e54c8 0%, #8f94fb 100%) !important; } html.dark-mode .nm-auth-form-container { background: var(--nm-bg-secondary) !important; } html.dark-mode .nm-auth-header h1, html.dark-mode .nm-auth-header p, html.dark-mode .nm-form-group label, html.dark-mode .nm-auth-footer p, html.dark-mode .nm-checkbox-label { color: var(--nm-text-primary) !important; } html.dark-mode .nm-form-group input[type="text"], html.dark-mode .nm-form-group input[type="email"], html.dark-mode .nm-form-group input[type="password"] { background: var(--nm-input-bg) !important; color: var(--nm-input-text) !important; border-color: var(--nm-input-border) !important; } html.dark-mode .nm-auth-divider::before { background: var(--nm-border-primary) !important; } html.dark-mode .nm-auth-divider span { background: var(--nm-bg-secondary) !important; color: var(--nm-text-action) !important; } html.dark-mode .nm-btn-google, html.dark-mode .nm-btn-facebook { background: var(--nm-bg-tertiary) !important; color: var(--nm-text-primary) !important; border-color: var(--nm-border-secondary) !important; } /* --- 7. Dashboard (from dashboard.css) --- */ html.dark-mode .nm-dashboard-wrapper { color: var(--nm-text-primary) !important; } html.dark-mode .nm-user-header { background: linear-gradient(135deg, #4e54c8 0%, #8f94fb 100%) !important; } html.dark-mode .nm-stat-card, html.dark-mode .nm-dashboard-tabs, html.dark-mode .nm-dashboard-content, html.dark-mode .nm-table-wrapper { background: var(--nm-bg-secondary) !important; border-color: var(--nm-border-primary) !important; } html.dark-mode .nm-stat-card:hover { border-color: var(--nm-btn-bg) !important; } html.dark-mode .nm-stat-value { color: var(--nm-btn-bg) !important; } html.dark-mode .nm-stat-label, html.dark-mode .nm-panel-subtitle { color: var(--nm-text-action) !important; } html.dark-mode .nm-tab-btn { color: var(--nm-text-action) !important; } html.dark-mode .nm-tab-btn:hover { background: var(--nm-bg-tertiary) !important; color: var(--nm-btn-bg) !important; } html.dark-mode .nm-tab-btn.active { color: var(--nm-btn-bg) !important; background: var(--nm-bg-secondary) !important; border-bottom-color: var(--nm-btn-bg) !important; } html.dark-mode .nm-overview-section { background: var(--nm-bg-tertiary) !important; border-color: var(--nm-border-primary) !important; } html.dark-mode .nm-summary-item { border-bottom-color: var(--nm-border-primary) !important; } html.dark-mode .nm-summary-item label { color: var(--nm-text-action) !important; } html.dark-mode .nm-highlight { color: var(--nm-btn-bg) !important; } html.dark-mode .nm-activity-item { background: var(--nm-bg-secondary) !important; border-color: var(--nm-border-primary) !important; } html.dark-mode .nm-activity-title { color: var(--nm-text-primary) !important; } html.dark-mode .nm-activity-meta { color: var(--nm-text-action) !important; } html.dark-mode .nm-progress-table { background: var(--nm-bg-secondary) !important; } html.dark-mode .nm-progress-table thead { background: var(--nm-bg-tertiary) !important; } html.dark-mode .nm-progress-table th { color: var(--nm-btn-bg) !important; border-bottom-color: var(--nm-border-primary) !important; } html.dark-mode .nm-progress-table td { color: var(--nm-text-primary) !important; border-bottom-color: var(--nm-border-primary) !important; } html.dark-mode .nm-progress-table tbody tr:hover { background: var(--nm-bg-tertiary) !important; } html.dark-mode .nm-progress-bar { background: var(--nm-border-primary) !important; } html.dark-mode .nm-progress-fill { background: linear-gradient(90deg, #667eea, #bb86fc) !important; } html.dark-mode .nm-completed-count { color: var(--nm-text-action) !important; } html.dark-mode .nm-settings-section { border-bottom-color: var(--nm-border-primary) !important; } html.dark-mode .nm-form-group input[type="text"], html.dark-mode .nm-form-group input[type="email"], html.dark-mode .nm-form-group input[type="password"], html.dark-mode .nm-form-group textarea { background: var(--nm-input-bg) !important; color: var(--nm-input-text) !important; border-color: var(--nm-input-border) !important; } html.dark-mode .nm-form-group input:focus, html.dark-mode .nm-form-group textarea:focus { border-color: var(--nm-btn-bg) !important; background: var(--nm-bg-secondary) !important; } html.dark-mode .nm-checkbox-group label { color: var(--nm-text-primary) !important; } html.dark-mode .nm-help-text, html.dark-mode .nm-no-data, html.dark-mode .nm-activity-empty { color: var(--nm-text-action) !important; } html.dark-mode .nm-danger-zone { background: rgba(231, 76, 60, 0.1) !important; border-left-color: #e74c3c !important; } /* --- 8. Leaderboard (from leaderboard.css) --- */ html.dark-mode .nm-leaderboard-wrapper { background: var(--nm-bg-primary) !important; } html.dark-mode .nm-leaderboard-header h1 { color: var(--nm-text-primary) !important; } html.dark-mode .nm-leaderboard-header p { color: var(--nm-text-action) !important; } html.dark-mode .nm-user-rank-card { background: linear-gradient(135deg, #4e54c8 0%, #8f94fb 100%) !important; } html.dark-mode .nm-tab-btn { background: var(--nm-bg-secondary) !important; border-color: var(--nm-border-primary) !important; color: var(--nm-text-action) !important; } html.dark-mode .nm-tab-btn:hover { border-color: var(--nm-btn-bg) !important; color: var(--nm-btn-bg) !important; } html.dark-mode .nm-tab-btn.active { background: var(--nm-btn-bg) !important; border-color: var(--nm-btn-bg) !important; color: var(--nm-btn-text) !important; } html.dark-mode .nm-leaderboard-content { background: var(--nm-bg-secondary) !important; border-color: var(--nm-border-primary) !important; } html.dark-mode .nm-leaderboard-row { border-bottom-color: var(--nm-border-primary) !important; } html.dark-mode .nm-leaderboard-row:hover { background: var(--nm-bg-tertiary) !important; } html.dark-mode .rank { color: var(--nm-btn-bg) !important; } html.dark-mode .avatar img { border-color: var(--nm-btn-bg) !important; } html.dark-mode .username { color: var(--nm-text-primary) !important; } html.dark-mode .user-level { color: var(--nm-text-action) !important; } html.dark-mode .points { color: var(--nm-btn-bg) !important; } html.dark-mode .quizzes, html.dark-mode .streak { color: var(--nm-text-action) !important; } /* --- 9. Archive/Taxonomy Pages (from archive-mcq.css / taxonomy-topic.css) --- */ html.dark-mode .nm-archive-hero { background: linear-gradient(135deg, #4e54c8 0%, #8f94fb 100%) !important; } html.dark-mode .nm-custom-breadcrumb { background: var(--nm-bg-tertiary) !important; border-color: var(--nm-border-primary) !important; } html.dark-mode .nm-custom-breadcrumb a { color: var(--nm-link-color) !important; } html.dark-mode .nm-custom-breadcrumb .current { color: var(--nm-text-primary) !important; } html.dark-mode .nm-topic-tabs, html.dark-mode .nm-questions-section, html.dark-mode .nm-no-results, html.dark-mode .nm-content-section, html.dark-mode .nm-related-topics { background: var(--nm-bg-secondary) !important; border-color: var(--nm-border-primary) !important; box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important; } html.dark-mode .nm-topic-tabs-title, html.dark-mode .nm-section-title, html.dark-mode .nm-no-results h2, html.dark-mode .nm-content-section h2, html.dark-mode .nm-related-topics h2 { color: var(--nm-text-primary) !important; } html.dark-mode .nm-topic-tab { background: var(--nm-bg-tertiary) !important; } html.dark-mode .nm-topic-tab:hover { background: linear-gradient(135deg, #667eea 0%, #bb86fc 100%) !important; } html.dark-mode .nm-topic-tab-name { color: var(--nm-text-primary) !important; } html.dark-mode .nm-topic-tab-count { color: var(--nm-link-color) !important; } html.dark-mode .nm-question-count { background: var(--nm-bg-tertiary) !important; color: var(--nm-text-action) !important; } html.dark-mode .nm-section-header { border-bottom-color: var(--nm-border-primary) !important; } html.dark-mode .nm-question-card-clean { background: var(--nm-bg-tertiary) !important; border-left-color: var(--nm-btn-bg) !important; } html.dark-mode .nm-question-card-clean:hover { background: var(--nm-bg-secondary) !important; } html.dark-mode .nm-card-date { color: var(--nm-text-action) !important; } html.dark-mode .nm-card-question-link { color: var(--nm-text-primary) !important; } html.dark-mode .nm-card-question-link:hover { color: var(--nm-link-color) !important; } html.dark-mode .nm-card-meta-row { border-top-color: var(--nm-border-primary) !important; } html.dark-mode .nm-pagination-wrapper .page-numbers { background: var(--nm-bg-secondary) !important; color: var(--nm-text-primary) !important; border-color: var(--nm-border-secondary) !important; } html.dark-mode .nm-pagination-wrapper .page-numbers:hover { border-color: var(--nm-btn-bg) !important; background: var(--nm-btn-bg) !important; color: var(--nm-btn-text) !important; } html.dark-mode .nm-pagination-wrapper .current { background: linear-gradient(135deg, #667eea 0%, #bb86fc 100%) !important; color: white !important; border-color: transparent !important; } html.dark-mode .nm-no-results p { color: var(--nm-text-action) !important; } /* --- 10. Single MCQ Page (from single-mcq.css) --- */ html.dark-mode .mcq-header { border-bottom-color: var(--nm-border-primary) !important; } html.dark-mode .mcq-question { color: var(--nm-text-primary) !important; } html.dark-mode .mcq-option { background: var(--nm-bg-tertiary) !important; border-color: var(--nm-border-secondary) !important; } html.dark-mode .mcq-option:hover { border-color: var(--nm-btn-bg) !important; background: #333 !important; } html.dark-mode .mcq-option input:checked + label { background: #333 !important; } html.dark-mode .option-letter { color: var(--nm-link-color) !important; } html.dark-mode .option-text { color: var(--nm-text-primary) !important; } html.dark-mode .mcq-option.correct { background: var(--nm-correct-bg) !important; border-color: var(--nm-correct-border) !important; } html.dark-mode .mcq-option.correct .option-letter, html.dark-mode .mcq-option.correct .option-text { color: var(--nm-correct-text) !important; } html.dark-mode .mcq-option.incorrect { background: var(--nm-wrong-bg) !important; border-color: var(--nm-wrong-border) !important; } html.dark-mode .mcq-option.incorrect .option-letter, html.dark-mode .mcq-option.incorrect .option-text { color: var(--nm-wrong-text) !important; } html.dark-mode .mcq-result.correct { background: var(--nm-correct-bg) !important; color: var(--nm-correct-text) !important; border-color: var(--nm-correct-border) !important; } html.dark-mode .mcq-result.incorrect { background: var(--nm-wrong-bg) !important; color: var(--nm-wrong-text) !important; border-color: var(--nm-wrong-border) !important; } html.dark-mode .mcq-explanation { background: var(--nm-bg-explanation) !important; border-left-color: #f39c12 !important; } html.dark-mode .mcq-explanation h3, html.dark-mode .mcq-explanation p { color: var(--nm-text-primary) !important; } html.dark-mode .mcq-topics { border-top-color: var(--nm-border-primary) !important; } html.dark-mode .topics-label { color: var(--nm-text-primary) !important; } html.dark-mode .topic-tag { background: var(--nm-bg-tertiary) !important; color: var(--nm-link-color) !important; } html.dark-mode .topic-tag:hover { background: var(--nm-btn-bg) !important; color: var(--nm-btn-text) !important; } html.dark-mode .nm-mcq-attribution { background: var(--nm-bg-tertiary) !important; border-left-color: var(--nm-btn-bg) !important; color: var(--nm-text-primary) !important; } html.dark-mode .nm-source a { color: var(--nm-link-color) !important; } html.dark-mode .nm-fact-checked { color: #2ecc71 !important; } html.dark-mode .nm-author { color: var(--nm-text-action) !important; } /* --- 11. Quiz Modal (from quiz-frontend.css) --- */ html.dark-mode #nm-quiz-modal-content { background-color: var(--nm-bg-secondary) !important; color: var(--nm-text-primary) !important; border: 1px solid var(--nm-border-primary) !important; } html.dark-mode #nm-quiz-modal-content .nm-form-group input { background-color: var(--nm-input-bg) !important; color: var(--nm-input-text) !important; border-color: var(--nm-input-border) !important; } html.dark-mode #nm-quiz-modal-content .nm-quiz-options .quiz-option { border-color: var(--nm-border-secondary) !important; color: var(--nm-text-primary) !important; } html.dark-mode #nm-quiz-modal-content .nm-quiz-options .quiz-option:hover { background-color: var(--nm-bg-tertiary) !important; } html.dark-mode #nm-quiz-modal-content .nm-quiz-question-title { color: var(--nm-text-primary) !important; } html.dark-mode #nm-quiz-modal-content .nm-quiz-progress { color: var(--nm-text-action) !important; } html.dark-mode #nm-quiz-modal-content #nm-quiz-close-btn { color: var(--nm-text-action) !important; } html.dark-mode #nm-quiz-modal-content #nm-topic-suggestions { background: var(--nm-input-bg) !important; color: var(--nm-input-text) !important; border-color: var(--nm-input-border) !important; } html.dark-mode #nm-quiz-modal-content #nm-topic-suggestions div:hover { background: #333 !important; } html.dark-mode #nm-quiz-modal-content .nm-quiz-timer { background: var(--nm-bg-secondary) !important; color: var(--nm-btn-bg) !important; border-color: var(--nm-btn-bg) !important; } html.dark-mode .nm-quiz-options .quiz-option.correct { background-color: var(--nm-correct-bg) !important; border-color: var(--nm-correct-border) !important; color: var(--nm-correct-text) !important; } html.dark-mode .nm-quiz-options .quiz-option.wrong { background-color: var(--nm-wrong-bg) !important; border-color: var(--nm-wrong-border) !important; color: var(--nm-wrong-text) !important; } html.dark-mode #nm-quiz-modal-content .nm-final-percentage { color: var(--nm-text-action) !important; } html.dark-mode #nm-quiz-modal-content .nm-quiz-results-actions button { color: var(--nm-text-primary) !important; } html.dark-mode #nm-quiz-share-results-btn { border-color: var(--nm-border-secondary) !important; background: var(--nm-bg-tertiary) !important; } /* --- 12. Taxonomy Topic Header (FIX) --- */ html.dark-mode .nm-topic-stats-header { background: linear-gradient(135deg, #4e54c8 0%, #8f94fb 100%) !important; color: var(--nm-text-primary) !important; } html.dark-mode .nm-topic-stats-header p, html.dark-mode .nm-topic-description { color: rgba(255, 255, 255, 0.85) !important; } html.dark-mode .nm-stat-box { background: rgba(255, 255, 255, 0.1) !important; backdrop-filter: blur(10px); } html.dark-mode .nm-stat-label, html.dark-mode .nm-stat-number { color: var(--nm-text-primary) !important; } html.dark-mode .nm-filter-controls label { color: var(--nm-text-primary) !important; } html.dark-mode #nm-month-filter, html.dark-mode .nm-filter-select { background-color: var(--nm-input-bg) !important; color: var(--nm-input-text) !important; border-color: var(--nm-input-border) !important; } html.dark-mode .nm-subtopics-section { background: var(--nm-bg-tertiary) !important; } html.dark-mode .nm-subtopic-card { background: var(--nm-bg-secondary) !important; border-color: var(--nm-border-secondary) !important; } html.dark-mode .nm-subtopic-card:hover { border-color: var(--nm-btn-bg) !important; } html.dark-mode .nm-card-icon { background: linear-gradient(135deg, rgba(102,126,234,0.1) 0%, rgba(187,134,252,0.1) 100%) !important; } html.dark-mode .nm-card-title { color: var(--nm-text-primary) !important; } html.dark-mode .nm-card-meta, html.dark-mode .nm-card-arrow { color: var(--nm-link-color) !important; } html.dark-mode .nm-related-topics-section { background: var(--nm-bg-tertiary) !important; } html.dark-mode .nm-topic-pill { background: var(--nm-bg-secondary) !important; border-color: var(--nm-border-secondary) !important; color: var(--nm-text-primary) !important; } html.dark-mode .nm-topic-pill:hover { background: var(--nm-btn-bg) !important; border-color: var(--nm-btn-bg) !important; color: var(--nm-btn-text) !important; } html.dark-mode .nm-pill-count { background: rgba(187, 134, 252, 0.1) !important; color: var(--nm-link-color) !important; } html.dark-mode .nm-topic-pill:hover .nm-pill-count { background: rgba(255, 255, 255, 0.2) !important; color: white !important; } html.dark-mode .nm-quiz-intro { background: var(--nm-bg-tertiary) !important; border-left-color: var(--nm-btn-bg) !important; } html.dark-mode .nm-quiz-intro h3, html.dark-mode .nm-quiz-intro p { color: var(--nm-text-primary) !important; } html.dark-mode .nm-mcq-card { background: var(--nm-bg-secondary) !important; border-color: var(--nm-border-primary) !important; } html.dark-mode .nm-meta-badge { background: var(--nm-bg-tertiary) !important; color: var(--nm-text-action) !important; } html.dark-mode .nm-meta-badge.number { background: var(--nm-btn-bg) !important; color: var(--nm-btn-text) !important; } html.dark-mode .nm-mcq-question { color: var(--nm-text-primary) !important; } html.dark-mode .nm-option-btn { border-color: var(--nm-border-secondary) !important; background: var(--nm-bg-tertiary) !important; color: var(--nm-text-primary) !important; } html.dark-mode .nm-option-btn:hover:not(.disabled) { border-color: var(--nm-btn-bg) !important; background: #333 !important; color: var(--nm-link-color) !important; } html.dark-mode .nm-option-btn.correct { background: var(--nm-correct-bg) !important; border-color: var(--nm-correct-border) !important; color: var(--nm-correct-text) !important; } html.dark-mode .nm-option-btn.wrong { background: var(--nm-wrong-bg) !important; border-color: var(--nm-wrong-border) !important; color: var(--nm-wrong-text) !important; } html.dark-mode .nm-result-message.correct { background: var(--nm-correct-bg) !important; border-color: var(--nm-correct-border) !important; color: var(--nm-correct-text) !important; } html.dark-mode .nm-result-message.wrong { background: var(--nm-wrong-bg) !important; border-color: var(--nm-wrong-border) !important; color: var(--nm-wrong-text) !important; } html.dark-mode .nm-explanation { background: var(--nm-bg-tertiary) !important; border-left-color: var(--nm-btn-bg) !important; } html.dark-mode .nm-view-link { color: var(--nm-link-color) !important; } html.dark-mode .nm-topic-card { background: var(--nm-bg-secondary) !important; border-color: var(--nm-border-secondary) !important; } html.dark-mode .nm-topic-card:hover { border-color: var(--nm-btn-bg) !important; } html.dark-mode .nm-topic-card-title { color: var(--nm-text-primary) !important; } html.dark-mode .nm-topic-card-count { color: var(--nm-link-color) !important; } /* --- 13. Single MCQ Related/Share Boxes (FIX) --- */ html.dark-mode .nm-related-questions { background: var(--nm-bg-secondary) !important; border-color: var(--nm-border-primary) !important; } html.dark-mode .nm-related-questions h3 { color: var(--nm-text-primary) !important; border-bottom-color: var(--nm-btn-bg) !important; } html.dark-mode .nm-related-questions li { background: var(--nm-bg-tertiary) !important; border-left-color: var(--nm-btn-bg) !important; box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important; } html.dark-mode .nm-related-questions li a { color: var(--nm-text-primary) !important; } html.dark-mode .nm-related-questions li a:hover { color: var(--nm-link-color) !important; } html.dark-mode .nm-social-share { background: var(--nm-bg-secondary) !important; border-color: var(--nm-border-primary) !important; } html.dark-mode .nm-social-share h4 { color: var(--nm-text-primary) !important; } /* ================================================================== ✅ START: SECTION 14 - ASTRA HEADER & FOOTER (FIX 4.3 - FORCED LIGHT) ==================================================================*/ /* --- DESKTOP/MOBILE HEADER BAR (Stays Dark) --- */ html.dark-mode #masthead, html.dark-mode .ast-primary-header-bar, html.dark-mode .ast-header-break-point .ast-mobile-header-wrap { background-color: var(--nm-bg-secondary) !important; border-bottom-color: var(--nm-border-primary) !important; } /* --- DESKTOP: Header Menu Links (Stays Dark) --- */ html.dark-mode .ast-main-header-bar-alignment .main-header-menu .menu-item a { color: var(--nm-text-primary) !important; } html.dark-mode .ast-main-header-bar-alignment .main-header-menu .menu-item a:hover { color: var(--nm-link-color) !important; } /* --- DESKTOP: Site Title (Stays Dark) --- */ html.dark-mode .site-title a, html.dark-mode .site-title a:hover, html.dark-mode .site-header .site-description { color: var(--nm-text-primary) !important; } /* --- MOBILE: Toggle Button Icon (Stays Dark) --- */ html.dark-mode .ast-header-break-point .ast-mobile-menu-trigger .ast-mobile-svg { fill: var(--nm-text-primary) !important; } /* --- ✅ START: Astra "Flyout" Mobile Menu – Dark Mode --- */ /* Make the flyout menu fully follow global dark-mode tokens */ html.dark-mode .ast-flyout-menu-container { background-color: var(--nm-bg-secondary) !important; color: var(--nm-text-primary) !important; } /* All links inside the flyout menu */ html.dark-mode .ast-flyout-menu-container a { color: var(--nm-text-primary) !important; } /* Hover / active state for links */ html.dark-mode .ast-flyout-menu-container .menu-item a:hover, html.dark-mode .ast-flyout-menu-container .menu-item.current-menu-item a, html.dark-mode .ast-flyout-menu-container .ast-flyout-menu-links .menu-item a:hover, html.dark-mode .ast-flyout-menu-container .ast-flyout-menu-links .menu-item.current-menu-item a { background-color: var(--nm-bg-tertiary) !important; color: var(--nm-link-color) !important; } /* Divider lines between items */ html.dark-mode .ast-flyout-menu-container .menu-item, html.dark-mode .ast-flyout-menu-container .menu-item:last-child, html.dark-mode .ast-flyout-menu-container .ast-flyout-menu-links .menu-item, html.dark-mode .ast-flyout-menu-container .ast-flyout-menu-links .menu-item:last-child { border-bottom-color: var(--nm-border-primary) !important; } /* Close “X” icon */ html.dark-mode .ast-flyout-menu-container .ast-flyout-close { color: var(--nm-text-primary) !important; } /* --- ✅ END: Astra "Flyout" Mobile Menu – Dark Mode --- */ /* --- Footer Bar (Stays Dark) --- */ html.dark-mode .ast-footer-bar-wrap { background-color: var(--nm-bg-secondary) !important; border-top-color: var(--nm-border-primary) !important; } html.dark-mode .ast-footer-bar .ast-footer-html-target, html.dark-mode .ast-footer-bar p, html.dark-mode .ast-footer-bar a { color: var(--nm-text-action) !important; } html.dark-mode .ast-footer-bar a:hover { color: var(--nm-link-color) !important; } /* ✅ NEW: HIDE MANUAL AUTH LINKS Hides your manually-added auth links when user is logged in. This assumes you give your manual "Login" link a CSS class of "nm-manual-login" and your "Sign Up" link a class of "nm-manual-register". You can add these classes in Appearance > Menus. */ .logged-in .nm-manual-login, .logged-in .nm-manual-register { display: none !important; } /* ================================================================== ✅ START: SECTION 15 - WORDPRESS CORE BUTTONS (THE FIX) ================================================================== */ /* * This targets the comment form submit button, password forms, * and other native WordPress buttons to use your plugin's dark mode style. */ html.dark-mode .comment-form .form-submit .submit, html.dark-mode input[type="submit"], html.dark-mode button[type="submit"], html.dark-mode .wp-block-button__link, html.dark-mode .button { background-color: var(--nm-btn-bg) !important; color: var(--nm-btn-text) !important; border: none !important; box-shadow: 0 4px 12px rgba(187, 134, 252, 0.2) !important; } html.dark-mode .comment-form .form-submit .submit:hover, html.dark-mode input[type="submit"]:hover, html.dark-mode button[type="submit"]:hover, html.dark-mode .wp-block-button__link:hover, html.dark-mode .button:hover { background: #a97de0 !important; /* Lighter purple hover */ color: var(--nm-btn-text) !important; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(187, 134, 252, 0.3) !important; } /* ================================================================== SECTION 16 - WORDPRESS COMMENT FORM FIX (Text/Inputs) ================================================================== */ /* --- Main Comment Area Background --- */ html.dark-mode .ast-separate-container .comments-area, html.dark-mode #comments { background-color: var(--nm-bg-secondary) !important; border-color: var(--nm-border-primary) !important; } /* --- Comment List --- */ html.dark-mode .ast-comment-list li, html.dark-mode .comment-list li .comment-body { background-color: var(--nm-bg-tertiary) !important; border-color: var(--nm-border-primary) !important; } /* --- All Text & Links in Comment Area --- */ html.dark-mode #respond, html.dark-mode #reply-title, html.dark-mode .comments-title, html.dark-mode .comment-notes, html.dark-mode .comment-form label, html.dark-mode .comment-form-cookies-consent label, html.dark-mode .logged-in-as, html.dark-mode .comment-author .fn, html.dark-mode .comment-content p { color: var(--nm-text-primary) !important; } html.dark-mode .logged-in-as a, html.dark-mode .comment-author .fn a { color: var(--nm-link-color) !important; } /* --- Input Fields (Name, Email, Website, Comment) --- */ html.dark-mode .comment-form input[type="text"], html.dark-mode .comment-form input[type="email"], html.dark-mode .comment-form input[type="url"], html.dark-mode .comment-form textarea { background-color: var(--nm-input-bg) !important; color: var(--nm-input-text) !important; border-color: var(--nm-input-border) !important; } html.dark-mode .comment-form input[type="text"]:focus, html.dark-mode .comment-form input[type="email"]:focus, html.dark-mode .comment-form input[type="url"]:focus, html.dark-mode .comment-form textarea:focus { border-color: var(--nm-btn-bg) !important; } /* --- Submit Button (Handled by Section 15) --- */ /* ================================================================== ✅ START: SECTION 17 - ASTRA DROPDOWN MENU FIX (image_dbb7a1.png) ================================================================== */ /* * This targets the dropdown