/*
==================================================================
  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;
}

/* --- DEFINITIVE FIX: Force Light Mode Colors for MCQ Options --- */
/* This ensures text never turns white in Light Mode, overriding any other styles. */
html:not(.dark-mode) .nm-mcq-option.correct,
html:not(.dark-mode) .nm-mcq-option.correct *,
html:not(.dark-mode) .nm-mcq-option.correct .nm-option-btn,
html:not(.dark-mode) .nm-option-btn.correct,
html:not(.dark-mode) .nm-option-btn.correct *,
html:not(.dark-mode) .quiz-option.correct {
    background-color: var(--nm-correct-bg) !important;
    border-color: var(--nm-correct-border) !important;
    color: var(--nm-correct-text) !important;
    font-weight: 600 !important;
}

html:not(.dark-mode) .nm-mcq-option.wrong,
html:not(.dark-mode) .nm-mcq-option.wrong *,
html:not(.dark-mode) .nm-mcq-option.wrong .nm-option-btn,
html:not(.dark-mode) .nm-option-btn.wrong,
html:not(.dark-mode) .nm-option-btn.wrong *,
html:not(.dark-mode) .quiz-option.wrong {
    background-color: var(--nm-wrong-bg) !important;
    border-color: var(--nm-wrong-border) !important;
    color: var(--nm-wrong-text) !important;
    font-weight: 600 !important;
}

/* --- 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 FIX (Force Light) --- */
/* This section forces the flyout menu back to LIGHT mode
   to override global dark mode rules and fix invisible links.
*/
html.dark-mode .ast-flyout-menu-container {
    background-color: #ffffff !important;
    /* Force light background */
}

/* This targets ALL links inside the flyout menu, including our custom ones */
html.dark-mode .ast-flyout-menu-container a {
    color: #3a3a3a !important;
    /* Force dark link text (Astra's default) */
}

/* This styles the hover/active state */
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: #f5f5f5 !important;
    /* Force light hover background */
    color: #3a3a3a !important;
    /* Force dark hover text */
}

/* This styles the divider lines */
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: #ebebeb !important;
    /* Force light dividers */
}

/* This styles the 'X' close button */
html.dark-mode .ast-flyout-menu-container .ast-flyout-close {
    color: #3a3a3a !important;
    /* Force dark 'X' icon */
}

/* --- ✅ END: Astra "Flyout" Mobile Menu Fix --- */


/* --- 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 <ul> element (class .sub-menu)
 * that appears when you hover over a main menu item.
*/
html.dark-mode .main-header-bar .main-header-menu .sub-menu {
    background-color: var(--nm-bg-secondary) !important;
    /* Dark background */
    border-color: var(--nm-border-primary) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

/* * This targets the <li> elements inside the dropdown.
*/
html.dark-mode .main-header-bar .main-header-menu .sub-menu .menu-item {
    border-bottom-color: var(--nm-border-primary) !important;
}

/* * This targets the <a> links inside the dropdown.
 * This is the fix for the invisible text.
*/
html.dark-mode .main-header-bar .main-header-menu .sub-menu .menu-item a {
    color: var(--nm-text-primary) !important;
    /* Light text */
}

/* * This styles the hover state for dropdown links.
*/
html.dark-mode .main-header-bar .main-header-menu .sub-menu .menu-item a:hover,
html.dark-mode .main-header-bar .main-header-menu .sub-menu .menu-item.current-menu-item a {
    color: var(--nm-link-color) !important;
    /* Purple hover text */
    background-color: var(--nm-bg-tertiary) !important;
    /* Darker hover background */
}

/*
==================================================================
  ✅ END: SECTION 17
==================================================================
*/