/* ============================================
   DARK THEME - Premium Dark Mode
   Rich blacks, vibrant accents, high contrast
   ============================================ */

:root {
    /* Light Theme Variables (Default) */
    --primary: #4F46E5;
    --background: #FFFFFF;
    --background-secondary: #F9FAFB;
    --background-tertiary: #F3F4F6;
    --text-primary: #111827;
    --text-secondary: #6B7280;
    --text-tertiary: #9CA3AF;
    --border: #E5E7EB;
}

/* Dark Theme Override - Premium Colors */
[data-theme="dark"] {
    --primary: #818CF8;
    --primary-light: #A5B4FC;
    --primary-dark: #6366F1;
    --secondary: #6366F1;

    /* Rich dark backgrounds */
    --background: #0A0E1A;
    --background-secondary: #141B2D;
    --background-tertiary: #1E293B;
    --bg-white: #141B2D;
    --bg-gray: #1E293B;

    /* High contrast text */
    --text-primary: #F1F5F9;
    --text-secondary: #94A3B8;
    --text-tertiary: #64748B;

    /* Visible borders */
    --border: #293548;
    --border-dark: #475569;

    /* Gray scale overrides (user-styles.css) */
    --gray-50: #0F1629;
    --gray-100: #141B2D;
    --gray-200: #293548;
    --gray-300: #475569;
    --gray-400: #64748B;
    --gray-500: #94A3B8;
    --gray-600: #CBD5E1;
    --gray-700: #E2E8F0;
    --gray-800: #F1F5F9;
    --gray-900: #F8FAFC;

    /* Shadows for dark mode */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
}

/* Body & Base */
[data-theme="dark"] body {
    background-color: var(--background);
    color: var(--text-primary);
}

/* NAVIGATION */
[data-theme="dark"] .navbar {
    background: rgba(10, 14, 26, 0.95);
    border-bottom-color: var(--border);
}

[data-theme="dark"] .nav-links a {
    color: var(--text-secondary);
}

[data-theme="dark"] .nav-links a:hover,
[data-theme="dark"] .nav-links a.active {
    color: var(--text-primary);
}

/* ── New Design System Surface Tokens (Dark) ── */
[data-theme="dark"] {
    --surface-bg: #141B2D;
    --surface-raised: #1E293B;
    --surface-sunken: #0F172A;
    --text-tertiary: #64748B;
    --primary-light: rgba(99, 102, 241, 0.15);
    --secondary-light: rgba(99, 102, 241, 0.12);
    --success-light: rgba(16, 163, 74, 0.12);
    --warning-light: rgba(217, 119, 6, 0.12);
    --error-light: rgba(220, 38, 38, 0.12);
}

/* CARDS - CRITICAL FIX (covers both old and new unified cards) */
[data-theme="dark"] .deal-card,
[data-theme="dark"] .offer-card,
[data-theme="dark"] .trust-card,
[data-theme="dark"] .store-card,
[data-theme="dark"] .brand-card {
    background: var(--background-secondary) !important;
    border-color: var(--border) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .deal-card:hover,
[data-theme="dark"] .offer-card:hover,
[data-theme="dark"] .trust-card:hover,
[data-theme="dark"] .brand-card:hover {
    background: var(--background-tertiary) !important;
    border-color: var(--primary) !important;
}

[data-theme="dark"] .deal-info h4,
[data-theme="dark"] .brand-info h3,
[data-theme="dark"] .offer-info h4,
[data-theme="dark"] .trust-card h3 {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .brand-category {
    color: var(--text-secondary) !important;
}

/* Logo containers in dark mode */
[data-theme="dark"] .deal-logo,
[data-theme="dark"] .brand-logo-styled {
    background: var(--background-tertiary) !important;
}

/* Cashback badges — force green gradient + white text in dark mode */
[data-theme="dark"] .deal-cashback,
[data-theme="dark"] .brand-cashback-badge,
[data-theme="dark"] .similar-brand-cashback {
    background: linear-gradient(135deg, #16A34A, #059669) !important;
    color: #ffffff !important;
    opacity: 1;
}

/* Old plain cashback text (offer cards) */
[data-theme="dark"] .offer-tag {
    color: var(--primary) !important;
}

[data-theme="dark"] .trust-card p {
    color: var(--text-secondary) !important;
}

/* CTA buttons inside cards */
[data-theme="dark"] .deal-card-cta,
[data-theme="dark"] .brand-cta-btn {
    /* Gradient kept — works great in dark */
    opacity: 1;
}

/* Skeleton shimmer — dark mode */
[data-theme="dark"] .skeleton-card,
[data-theme="dark"] .brands-skeleton-card {
    background: linear-gradient(90deg,
            var(--background-secondary) 25%,
            var(--background-tertiary) 50%,
            var(--background-secondary) 75%) !important;
    border-color: var(--border) !important;
}

/* Secondary tags — dark mode */
[data-theme="dark"] .deal-secondary-tag.tag-sale {
    background: rgba(217, 119, 6, 0.15) !important;
    color: #FBBF24 !important;
}

[data-theme="dark"] .deal-secondary-tag.tag-new {
    background: rgba(16, 163, 74, 0.15) !important;
    color: #34D399 !important;
}

[data-theme="dark"] .deal-secondary-tag.tag-expiry {
    background: rgba(220, 38, 38, 0.15) !important;
    color: #F87171 !important;
}

[data-theme="dark"] .deal-secondary-tag.tag-excl {
    background: rgba(99, 102, 241, 0.15) !important;
    color: #A5B4FC !important;
}

/* Category strip — dark mode */
[data-theme="dark"] .category-strip {
    border-bottom-color: var(--border) !important;
}

[data-theme="dark"] .category-chip {
    background: var(--background-secondary) !important;
    border-color: var(--border) !important;
}

[data-theme="dark"] .category-chip:hover,
[data-theme="dark"] .category-chip.active {
    border-color: var(--primary) !important;
    background: rgba(129, 140, 248, 0.12) !important;
    color: var(--primary) !important;
}

/* Similar brands section (brand-detail page) — dark mode */
[data-theme="dark"] .similar-brand-card {
    background: var(--background-secondary) !important;
    border-color: var(--border) !important;
}

[data-theme="dark"] .similar-brand-card:hover {
    background: var(--background-tertiary) !important;
    border-color: var(--primary) !important;
}

[data-theme="dark"] .similar-brand-logo {
    background: var(--background-tertiary) !important;
    border-color: var(--border) !important;
}

[data-theme="dark"] .similar-brand-name {
    color: var(--text-primary) !important;
}

/* similar-brand-cashback uses green gradient — works on dark bg naturally */


[data-theme="dark"] .category-chip-icon {
    background: var(--background-tertiary) !important;
}

[data-theme="dark"] .category-chip-label {
    color: var(--text-secondary) !important;
}

/* SECTIONS */
[data-theme="dark"] .how-it-works-v2,
[data-theme="dark"] .trust-section,
[data-theme="dark"] .stores,
[data-theme="dark"] .page-header {
    background: var(--background-secondary) !important;
}

[data-theme="dark"] .top-deals,
[data-theme="dark"] .top-offers,
[data-theme="dark"] .brands-section {
    background: var(--background) !important;
}

/* HERO */
[data-theme="dark"] .hero {
    background: linear-gradient(135deg, #1E293B 0%, #0F172A 100%) !important;
}

[data-theme="dark"] .hero-title,
[data-theme="dark"] .hero-description {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .stat-card {
    background: rgba(30, 41, 59, 0.6) !important;
    border-color: var(--border) !important;
}

/* FOOTER - CRITICAL FIX */
[data-theme="dark"] .footer {
    background: var(--background-secondary) !important;
    border-top: 1px solid var(--border) !important;
}

[data-theme="dark"] .footer-column h4 {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .footer-column p,
[data-theme="dark"] .footer-column a {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .footer-column a:hover {
    color: var(--primary) !important;
}

[data-theme="dark"] .footer-bottom p {
    color: var(--text-tertiary) !important;
}

/* BUTTONS */
[data-theme="dark"] .btn-secondary,
[data-theme="dark"] .btn-view-all {
    background: var(--background-tertiary);
    border-color: var(--border);
    color: var(--text-primary);
}

[data-theme="dark"] .btn-secondary:hover,
[data-theme="dark"] .btn-view-all:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

/* INPUTS */
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea,
[data-theme="dark"] .search-box input {
    background: var(--background-tertiary);
    border-color: var(--border);
    color: var(--text-primary);
}

[data-theme="dark"] .search-box {
    background: var(--background-tertiary);
    border-color: var(--border);
}

/* FILTERS */
[data-theme="dark"] .filter-btn {
    background: var(--background-tertiary);
    border-color: var(--border);
    color: var(--text-secondary);
}

[data-theme="dark"] .filter-btn.active,
[data-theme="dark"] .filter-btn:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

/* CTA */
[data-theme="dark"] .cta {
    background: linear-gradient(135deg, #1E293B 0%, #0F172A 100%);
}

[data-theme="dark"] .cta-content .btn-primary {
    background: white !important;
    color: #4F46E5 !important;
    border: none;
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.2);
}

[data-theme="dark"] .cta-content .btn-primary:hover {
    background: #F1F5F9 !important;
    box-shadow: 0 8px 25px rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
}

/* THEME TOGGLE */
.theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--background-secondary);
    border: 2px solid var(--border);
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.theme-toggle:hover {
    border-color: var(--primary);
}

.theme-icon {
    position: absolute;
    transition: all 0.3s ease;
    color: var(--text-primary);
}

.sun-icon {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

.moon-icon {
    opacity: 0;
    transform: rotate(-90deg) scale(0.5);
}

[data-theme="dark"] .sun-icon {
    opacity: 0;
    transform: rotate(90deg) scale(0.5);
}

[data-theme="dark"] .moon-icon {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

/* ============================================
   USER DASHBOARD PAGES
   ============================================ */
[data-theme="dark"] .top-nav {
    background: rgba(10, 14, 26, 0.95) !important;
    border-bottom-color: var(--border) !important;
}

[data-theme="dark"] .logo-text {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .nav-link {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .nav-link:hover {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .nav-btn {
    color: var(--text-secondary) !important;
    background: transparent !important;
    border-color: var(--border) !important;
}

[data-theme="dark"] .nav-btn:hover,
[data-theme="dark"] .nav-btn.active {
    color: var(--primary) !important;
    background: var(--background-tertiary) !important;
}

[data-theme="dark"] .dashboard-content,
[data-theme="dark"] .wallet-content,
[data-theme="dark"] .withdraw-content,
[data-theme="dark"] .profile-content,
[data-theme="dark"] .main-container {
    background: var(--background) !important;
}

[data-theme="dark"] .welcome-title,
[data-theme="dark"] .welcome-text h1,
[data-theme="dark"] .section-title,
[data-theme="dark"] .page-title {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .welcome-subtitle,
[data-theme="dark"] .welcome-text p {
    color: var(--text-secondary) !important;
}

/* Dashboard cards - override hardcoded background: white */
[data-theme="dark"] .stat-card,
[data-theme="dark"] .wallet-card,
[data-theme="dark"] .card,
[data-theme="dark"] .profile-card,
[data-theme="dark"] .profile-section,
[data-theme="dark"] .info-card,
[data-theme="dark"] .action-card,
[data-theme="dark"] .withdraw-card,
[data-theme="dark"] .action-btn,
[data-theme="dark"] .recent-section {
    background: var(--background-secondary) !important;
    border-color: var(--border) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .action-btn:hover {
    background: var(--background-tertiary) !important;
}

[data-theme="dark"] .action-btn.primary {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: white !important;
}

[data-theme="dark"] .action-btn.primary:hover {
    background: var(--primary-light) !important;
}

[data-theme="dark"] .action-subtitle {
    opacity: 0.7 !important;
}

[data-theme="dark"] .stat-label,
[data-theme="dark"] .stat-card h3,
[data-theme="dark"] .card h3,
[data-theme="dark"] .wallet-card h3 {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .stat-value,
[data-theme="dark"] .wallet-balance {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .section-header {
    border-color: var(--border) !important;
}

/* Tables in dashboard */
[data-theme="dark"] .transactions-table,
[data-theme="dark"] .history-table,
[data-theme="dark"] table {
    background: var(--background-secondary) !important;
    border-color: var(--border) !important;
}

[data-theme="dark"] .transactions-table th,
[data-theme="dark"] .history-table th,
[data-theme="dark"] table th {
    background: var(--background-tertiary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border) !important;
}

[data-theme="dark"] .transactions-table td,
[data-theme="dark"] .history-table td,
[data-theme="dark"] table td {
    color: var(--text-secondary) !important;
    border-color: var(--border) !important;
}

[data-theme="dark"] .transactions-table tr:hover td,
[data-theme="dark"] .history-table tr:hover td,
[data-theme="dark"] table tbody tr:hover td {
    background: var(--background-tertiary) !important;
}

/* Transaction status badges */
[data-theme="dark"] .status-pending {
    background: rgba(245, 158, 11, 0.15) !important;
    color: #FBBF24 !important;
}

[data-theme="dark"] .status-confirmed,
[data-theme="dark"] .status-approved {
    background: rgba(16, 185, 129, 0.15) !important;
    color: #34D399 !important;
}

[data-theme="dark"] .status-rejected {
    background: rgba(239, 68, 68, 0.15) !important;
    color: #F87171 !important;
}

/* Empty state */
[data-theme="dark"] .empty-state {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .empty-state h3 {
    color: var(--text-primary) !important;
}

/* Tabs / Wallet tabs */
[data-theme="dark"] .tab-btn,
[data-theme="dark"] .wallet-tab {
    background: var(--background-tertiary) !important;
    color: var(--text-secondary) !important;
    border-color: var(--border) !important;
}

[data-theme="dark"] .tab-btn.active,
[data-theme="dark"] .wallet-tab.active {
    background: var(--primary) !important;
    color: white !important;
    border-color: var(--primary) !important;
}

/* Profile form elements */
[data-theme="dark"] .form-group label {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .form-group input,
[data-theme="dark"] .form-group select,
[data-theme="dark"] .form-group textarea {
    background: var(--background-tertiary) !important;
    border-color: var(--border) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .form-group input:focus,
[data-theme="dark"] .form-group select:focus,
[data-theme="dark"] .form-group textarea:focus {
    border-color: var(--primary) !important;
}

[data-theme="dark"] .form-group input::placeholder {
    color: var(--text-tertiary) !important;
}

/* Mobile drawer */
[data-theme="dark"] .mobile-drawer {
    background: var(--background-secondary) !important;
    border-color: var(--border) !important;
}

[data-theme="dark"] .mobile-drawer-content {
    background: var(--background-secondary) !important;
}

[data-theme="dark"] .drawer-section-title {
    color: var(--text-tertiary) !important;
}

[data-theme="dark"] .drawer-link {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .drawer-link:hover {
    color: var(--text-primary) !important;
    background: var(--background-tertiary) !important;
}

[data-theme="dark"] .mobile-drawer-link {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .mobile-drawer-link:hover {
    color: var(--text-primary) !important;
    background: var(--background-tertiary) !important;
}

[data-theme="dark"] .mobile-drawer-link.active-link {
    background: var(--primary) !important;
    color: white !important;
}

[data-theme="dark"] .mobile-drawer-link.active-link svg {
    color: white !important;
}

[data-theme="dark"] .mobile-drawer-link svg {
    color: var(--text-tertiary) !important;
}

[data-theme="dark"] .mobile-drawer-link.danger {
    color: #F87171 !important;
}

[data-theme="dark"] .mobile-drawer-link.danger svg {
    color: #F87171 !important;
}

[data-theme="dark"] .mobile-drawer-label {
    color: var(--text-tertiary) !important;
}

[data-theme="dark"] .mobile-drawer-divider {
    border-color: var(--border) !important;
    background: var(--border) !important;
}

/* Hamburger toggle button - dark mode */
[data-theme="dark"] .user-menu-toggle {
    border-color: var(--border) !important;
}

[data-theme="dark"] .user-menu-toggle:hover {
    background: var(--background-tertiary) !important;
}

[data-theme="dark"] .user-menu-toggle span {
    background: var(--text-secondary) !important;
}

/* ============================================
   PROFILE PAGE - COMPLETE OVERRIDES
   ============================================ */
/* Profile header card */
[data-theme="dark"] .profile-header-card {
    background: var(--background-secondary) !important;
    border-color: var(--border) !important;
}

[data-theme="dark"] .profile-header-bg::after {
    background: linear-gradient(to top, rgba(10, 14, 26, 0.3), transparent) !important;
}

[data-theme="dark"] .profile-name {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .profile-email {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .profile-meta-item {
    color: var(--text-tertiary) !important;
}

/* Profile mini stat cards */
[data-theme="dark"] .profile-stat-item {
    background: var(--background-secondary) !important;
    border-color: var(--border) !important;
}

[data-theme="dark"] .profile-stat-item:hover {
    background: var(--background-tertiary) !important;
}

[data-theme="dark"] .profile-stat-value {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .profile-stat-label {
    color: var(--text-secondary) !important;
}

/* Profile sections (Personal Info, Payment Info) */
[data-theme="dark"] .profile-section {
    background: var(--background-secondary) !important;
    border-color: var(--border) !important;
}

[data-theme="dark"] .profile-section-title {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .profile-section-desc {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .profile-edit-btn {
    background: var(--background-tertiary) !important;
    border-color: var(--border) !important;
    color: var(--primary) !important;
}

[data-theme="dark"] .profile-edit-btn:hover {
    background: rgba(129, 140, 248, 0.1) !important;
    border-color: var(--primary) !important;
}

/* Profile field rows */
[data-theme="dark"] .profile-field {
    border-color: var(--border) !important;
}

[data-theme="dark"] .profile-field-label {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .profile-field-value {
    color: var(--text-primary) !important;
}

/* Profile form (edit mode) */
[data-theme="dark"] .profile-form-group label {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .profile-form-group input {
    background: var(--background-tertiary) !important;
    border-color: var(--border) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .profile-form-group input:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.15) !important;
}

[data-theme="dark"] .profile-form-group input:disabled,
[data-theme="dark"] .profile-form-group input:read-only {
    background: var(--background) !important;
    color: var(--text-tertiary) !important;
}

[data-theme="dark"] .profile-form-group input::placeholder {
    color: var(--text-tertiary) !important;
}

[data-theme="dark"] .field-hint {
    color: var(--text-tertiary) !important;
}

[data-theme="dark"] .btn-profile-cancel {
    background: var(--background-tertiary) !important;
    border-color: var(--border) !important;
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .btn-profile-cancel:hover {
    background: var(--background) !important;
}

/* Account Settings / Action items */
[data-theme="dark"] .profile-actions-section h2 {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .profile-action-item {
    background: var(--background-secondary) !important;
    border-color: var(--border) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .profile-action-item:hover {
    background: var(--background-tertiary) !important;
}

[data-theme="dark"] .profile-action-item.danger:hover {
    background: rgba(239, 68, 68, 0.1) !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
}

[data-theme="dark"] .profile-action-info span {
    color: var(--text-secondary) !important;
}

/* Payment security note */
[data-theme="dark"] .payment-security-note {
    background: rgba(16, 185, 129, 0.08) !important;
    border-color: rgba(16, 185, 129, 0.2) !important;
    color: var(--text-secondary) !important;
}

/* ============================================
   WALLET PAGE - COMPLETE OVERRIDES
   ============================================ */
[data-theme="dark"] .wallet-section {
    background: var(--background-secondary) !important;
    border-color: var(--border) !important;
}

[data-theme="dark"] .wallet-section .section-title {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .transactions-list {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .loading {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .balance-label {
    color: rgba(255, 255, 255, 0.8) !important;
}

[data-theme="dark"] .balance-info {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* ============================================
   WITHDRAW PAGE - COMPLETE OVERRIDES
   ============================================ */
[data-theme="dark"] .withdraw-form-container {
    background: var(--background-secondary) !important;
    border-color: var(--border) !important;
}

[data-theme="dark"] .page-subtitle {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .form-section label {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .form-section input,
[data-theme="dark"] .amount-input-wrapper {
    background: var(--background-tertiary) !important;
    border-color: var(--border) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .currency-symbol {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .form-hint {
    color: var(--text-tertiary) !important;
}

[data-theme="dark"] .form-hint .highlight {
    color: var(--primary) !important;
}

[data-theme="dark"] .payment-tab {
    background: var(--background-tertiary) !important;
    border-color: var(--border) !important;
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .payment-tab:hover {
    border-color: var(--primary) !important;
    background: rgba(129, 140, 248, 0.1) !important;
}

[data-theme="dark"] .payment-tab.active {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: white !important;
}

[data-theme="dark"] .details-title {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .info-box {
    background: var(--background-tertiary) !important;
    border-color: var(--border) !important;
}

[data-theme="dark"] .info-title {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .info-list li {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .form-footer-text {
    color: var(--text-tertiary) !important;
}

/* ============================================
   SHARED ELEMENTS
   ============================================ */
/* Modal */
[data-theme="dark"] .modal-content {
    background: var(--background-secondary) !important;
    border-color: var(--border) !important;
}

[data-theme="dark"] .modal-header {
    border-bottom-color: var(--border) !important;
}

[data-theme="dark"] .modal-header h3 {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .btn-cancel {
    background: var(--background-tertiary) !important;
    border-color: var(--border) !important;
    color: var(--text-secondary) !important;
}

/* Toast notifications */
[data-theme="dark"] .toast {
    background: var(--background-secondary) !important;
    border-color: var(--border) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
}

[data-theme="dark"] .toast-message {
    color: var(--text-primary) !important;
}

/* ============================================
   FAQ PAGE
   ============================================ */
[data-theme="dark"] .faq-question {
    background: var(--background-secondary) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .faq-question:hover,
[data-theme="dark"] .faq-question.active {
    background: var(--background-tertiary) !important;
}

[data-theme="dark"] .faq-answer {
    background: var(--background-tertiary) !important;
}

[data-theme="dark"] .faq-answer-content {
    color: var(--text-secondary) !important;
}

/* ============================================
   CONTACT PAGE
   ============================================ */
[data-theme="dark"] .contact-form {
    background: var(--background-secondary) !important;
    border-color: var(--border) !important;
}

[data-theme="dark"] .contact-form h2 {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .info-item {
    background: var(--background-secondary) !important;
}

[data-theme="dark"] .info-details h3 {
    color: var(--text-primary) !important;
}

/* ============================================
   ABOUT PAGE
   ============================================ */
[data-theme="dark"] .stat-box {
    background: var(--background-secondary) !important;
}

[data-theme="dark"] .about-section ul li {
    color: var(--text-secondary) !important;
}

/* ============================================
   BRAND DETAIL PAGE
   ============================================ */
[data-theme="dark"] .brand-detail-card {
    background: var(--background-secondary) !important;
    border-color: var(--border) !important;
}

[data-theme="dark"] .brand-detail-name {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .brand-detail-category {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .brand-detail-info h3 {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .brand-detail-info p {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .cashback-highlight {
    background: rgba(129, 140, 248, 0.15) !important;
    border-color: rgba(129, 140, 248, 0.3) !important;
}

[data-theme="dark"] .cashback-highlight-label {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .cashback-highlight-value {
    color: var(--primary) !important;
}

[data-theme="dark"] .mini-step {
    background: var(--background-tertiary) !important;
}

[data-theme="dark"] .mini-step p {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .brand-detail-header {
    border-bottom-color: var(--border) !important;
}

/* SHOP NOW BUTTON - Vibrant gradient in dark mode */
[data-theme="dark"] .btn-shop-now {
    background: linear-gradient(135deg, #6366F1, #818CF8) !important;
    color: white !important;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4) !important;
}

[data-theme="dark"] .btn-shop-now:hover {
    background: linear-gradient(135deg, #818CF8, #A5B4FC) !important;
    box-shadow: 0 8px 25px rgba(129, 140, 248, 0.5) !important;
}

/* Brand status badge dark mode */
[data-theme="dark"] .brand-status-badge.active {
    background: rgba(16, 185, 129, 0.15) !important;
    color: #34D399 !important;
}

[data-theme="dark"] .brand-status-badge.inactive {
    background: rgba(239, 68, 68, 0.15) !important;
    color: #F87171 !important;
}

/* Back link */
[data-theme="dark"] .back-link {
    color: var(--primary) !important;
}

/* ============================================
   BRANDS PAGE (ALL BRANDS)
   ============================================ */
[data-theme="dark"] .brand-info h3 {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .brand-category {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .brand-cashback {
    color: var(--primary) !important;
}

[data-theme="dark"] .results-info {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .brand-logo-styled img {
    background: var(--background-tertiary) !important;
}

/* View Deal button on brand cards */
[data-theme="dark"] .btn-primary {
    background: linear-gradient(135deg, #6366F1, #818CF8) !important;
    border-color: #6366F1 !important;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3) !important;
}

[data-theme="dark"] .btn-primary:hover {
    background: linear-gradient(135deg, #818CF8, #A5B4FC) !important;
    box-shadow: 0 6px 20px rgba(129, 140, 248, 0.45) !important;
}

/* ============================================
   LOGIN PAGE
   ============================================ */
[data-theme="dark"] .login-container {
    background: var(--background-secondary) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5) !important;
}

[data-theme="dark"] .login-title,
[data-theme="dark"] .logo-text {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .login-subtitle {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .google-btn {
    background: var(--background-tertiary) !important;
    border-color: var(--border) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .google-btn:hover {
    background: var(--background-secondary) !important;
    border-color: var(--primary) !important;
}

/* ============================================
   TERMS & PRIVACY
   ============================================ */
[data-theme="dark"] .last-updated {
    background: var(--background-secondary) !important;
}

/* ============================================
   GENERIC OVERRIDES - Catch any remaining white bg
   ============================================ */
[data-theme="dark"] .page-header h1,
[data-theme="dark"] .page-header p {
    color: var(--text-primary) !important;
}

[data-theme="dark"] a {
    color: var(--primary);
}

[data-theme="dark"] .logo span {
    color: var(--text-primary) !important;
}

/* ============================================
   RICH TEXT OVERRIDES (Admin Generated)
   ============================================ */
[data-theme="dark"] .rich-content {
    background: var(--background-secondary) !important;
    border-color: var(--border) !important;
    color: var(--text-secondary) !important;
}

/* Headings */
[data-theme="dark"] .rich-content h1,
[data-theme="dark"] .rich-content h2,
[data-theme="dark"] .rich-content h3,
[data-theme="dark"] .rich-content h4,
[data-theme="dark"] .rich-content h5,
[data-theme="dark"] .rich-content h6 {
    color: var(--text-primary) !important;
}

/* Lists and Text */
[data-theme="dark"] .rich-content ul,
[data-theme="dark"] .rich-content ol,
[data-theme="dark"] .rich-content li,
[data-theme="dark"] .rich-content p {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .rich-content strong,
[data-theme="dark"] .rich-content b {
    color: var(--text-primary) !important;
}

/* Tables */
[data-theme="dark"] .rich-content table th,
[data-theme="dark"] .rich-content table td {
    border-color: var(--border) !important;
}

[data-theme="dark"] .rich-content table th {
    background: var(--background-tertiary) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .rich-content table td {
    color: var(--text-secondary) !important;
}

/* 
   "GENIUS LOGIC" - High Contrast Text Overrides 
   Forces hardcoded black text to white in dark mode 
*/
[data-theme="dark"] .rich-content span[style*="color: rgb(0, 0, 0)"],
[data-theme="dark"] .rich-content span[style*="color: #000000"],
[data-theme="dark"] .rich-content span[style*="color: black"] {
    color: var(--text-primary) !important;
}

/* Invert very dark text that isn't black but hard to read */
[data-theme="dark"] .rich-content span[style*="color: rgb(3"],
[data-theme="dark"] .rich-content span[style*="color: rgb(4"],
[data-theme="dark"] .rich-content span[style*="color: rgb(5"] {
    color: var(--text-secondary) !important;
}

/* Similar Brands Dark Mode */
[data-theme="dark"] .similar-brand-card {
    background: var(--background-secondary) !important;
    border-color: var(--border) !important;
}

[data-theme="dark"] .similar-brand-card:hover {
    background: var(--background-tertiary) !important;
    border-color: var(--primary) !important;
}

[data-theme="dark"] .similar-brand-logo {
    background: white !important;
    /* Keep logos on white for visibility */
    border-color: var(--border) !important;
}

[data-theme="dark"] .similar-brand-name,
[data-theme="dark"] .similar-brands-title {
    color: var(--text-primary) !important;
}

/* similar-brand-cashback: green gradient is set at line 131 — do NOT override here */

[data-theme="dark"] .category-badge-link {
    background: var(--background-tertiary) !important;
    border-color: var(--border) !important;
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .category-badge-link:hover {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: white !important;
}

/* UI Overhaul - Dark Mode Compact Element Overrides */
[data-theme="dark"] .filter-btn {
    background: var(--background-secondary);
    border-color: var(--border);
    color: var(--text-secondary);
}

[data-theme="dark"] .filter-btn:hover {
    border-color: var(--primary);
    color: var(--primary-light);
}

[data-theme="dark"] .filter-btn.active {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

[data-theme="dark"] .brand-card {
    background: var(--background-secondary);
    border-color: var(--border);
}

[data-theme="dark"] .brand-card:hover {
    border-color: var(--primary);
}

[data-theme="dark"] .brand-logo-styled {
    background: white !important;
    border: 1px solid var(--border);
}

[data-theme="dark"] .brand-info h3 {
    color: var(--text-primary);
}

[data-theme="dark"] .brand-category {
    color: var(--text-secondary);
}

/* cashback-rate: green gradient is used now — do NOT override here */

[data-theme="dark"] .mini-step {
    background: var(--background-tertiary);
}

[data-theme="dark"] .mini-step p {
    color: var(--text-secondary);
}

[data-theme="dark"] .brand-detail-card {
    background: var(--background-secondary);
    border-color: var(--border);
}

[data-theme="dark"] .cashback-highlight {
    background: rgba(129, 140, 248, 0.08);
    border-color: rgba(129, 140, 248, 0.2);
}

[data-theme="dark"] .cashback-highlight-value {
    color: var(--primary-light);
}

[data-theme="dark"] .brand-detail-name {
    color: var(--text-primary);
}

[data-theme="dark"] .brand-detail-category {
    color: var(--text-secondary);
}

[data-theme="dark"] .brand-detail-info h3 {
    color: var(--text-primary);
}

[data-theme="dark"] .brand-detail-info p {
    color: var(--text-secondary);
}

[data-theme="dark"] .back-link {
    color: var(--primary-light);
}

[data-theme="dark"] .btn-shop {
    background: var(--primary);
}

/* Dark Mode: FAQ, Contact, About, Login, Similar Brands */
[data-theme="dark"] .faq-question {
    background: var(--background-secondary);
    color: var(--text-primary);
}

[data-theme="dark"] .faq-question:hover,
[data-theme="dark"] .faq-question.active {
    background: var(--background-tertiary);
    color: var(--primary-light);
}

[data-theme="dark"] .faq-answer {
    background: var(--background-tertiary);
}

[data-theme="dark"] .faq-answer-content {
    color: var(--text-secondary);
}

[data-theme="dark"] .contact-form {
    background: var(--background-secondary);
    border-color: var(--border);
}

[data-theme="dark"] .contact-form h2 {
    color: var(--text-primary);
}

[data-theme="dark"] .form-group input,
[data-theme="dark"] .form-group textarea {
    background: var(--background-tertiary);
    border-color: var(--border);
    color: var(--text-primary);
}

[data-theme="dark"] .info-item {
    background: var(--background-secondary);
}

[data-theme="dark"] .stat-box {
    background: var(--background-secondary);
}

[data-theme="dark"] .similar-brand-card {
    background: var(--background-secondary);
    border-color: var(--border);
}

[data-theme="dark"] .similar-brand-card:hover {
    border-color: var(--primary);
}

[data-theme="dark"] .similar-brand-logo {
    background: white !important;
    border-color: var(--border);
}

[data-theme="dark"] .similar-brand-name {
    color: var(--text-primary);
}

/* similar-brand-cashback: green gradient is set at line 131 — do NOT override here */

[data-theme="dark"] .login-container {
    background: var(--background-secondary);
}

[data-theme="dark"] .login-title,
[data-theme="dark"] .logo-text {
    color: var(--text-primary);
}

[data-theme="dark"] .login-subtitle {
    color: var(--text-secondary);
}

[data-theme="dark"] .google-btn {
    background: var(--background-tertiary);
    border-color: var(--border);
    color: var(--text-primary);
}

[data-theme="dark"] .google-btn:hover {
    background: var(--background-primary);
    border-color: var(--primary);
}