/* Landing Page Light Mode Theme Overrides */
/* Extracted and Adapted from app.css for public/index.html consistency */

/* =========================================
   LIGHT MODE OVERRIDES
   ========================================= */

/* 1. GLOBAL BACKGROUNDS (LEVEL 1) */
body.light-mode {
    background: #EFF1F5 !important;
    /* Cool Light Gray */
    color: #111827 !important;
    /* Deep Cool Gray Text */
}

/* Sections - Transparent to show Level 1 Background */
body.light-mode #app-options,
body.light-mode #features,
body.light-mode #pricing,
body.light-mode #faq,
body.light-mode #contact,
body.light-mode #about,
body.light-mode #privacy-policy,
body.light-mode #installation-guide {
    background: transparent !important;
}

body.light-mode .app-container {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* Hero Section Overlay */
body.light-mode .hero-video-overlay {
    background: rgba(239, 241, 245, 0.90) !important;
    backdrop-filter: blur(8px) !important;
}

/* Navigation */
body.light-mode .nav-dark {
    background: rgba(255, 255, 255, 0.95) !important;
    border-bottom: 1px solid #E5E7EB !important;
    /* Gray 200 */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05) !important;
}

body.light-mode .nav-dark.scrolled {
    background: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05) !important;
}

body.light-mode .nav-dark a.nav-link {
    color: #4B5563 !important;
}

body.light-mode .nav-dark a.nav-link:hover {
    color: #2563EB !important;
    /* Blue 600 */
}

/* Footer */
body.light-mode .footer-dark {
    background: linear-gradient(180deg, #F9FAFB 0%, #EFF1F5 100%) !important;
    border-top: 1px solid #E5E7EB !important;
}

body.light-mode .footer-dark h3 {
    color: #111827 !important;
}

body.light-mode .footer-dark p,
body.light-mode .footer-dark a {
    color: #4B5563 !important;
}

body.light-mode .footer-dark a:hover,
body.light-mode .social-link:hover {
    color: #2563EB !important;
}

body.light-mode .social-link {
    color: #4B5563 !important;
}


/* 2. CARDS & VISIBLE CONTAINERS (LEVEL 2) */
body.light-mode .glass-card,
body.light-mode .pricing-card,
body.light-mode .feature-card,
body.light-mode .bg-gray-800,
body.light-mode .bg-gray-900 {
    background: #FFFFFF !important;
    /* Pure White */
    border: 1px solid #E5E7EB !important;
    /* Gray 200 */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03) !important;
    color: #1F2937 !important;
}

/* Hero Container Override - Keep Transparent */
body.light-mode .hero-gradient>div {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Important Requirements Box */
body.light-mode .important-reqs-box {
    background: #F0F9FF !important;
    /* Light Blue Tint */
    border: 1px solid #2563EB !important;
}

body.light-mode .important-reqs-box strong,
body.light-mode .important-reqs-box h6 {
    color: #1E40AF !important;
    /* Dark Blue */
}

body.light-mode .important-reqs-box ul li {
    color: #1F2937 !important;
}

body.light-mode .important-reqs-box i {
    color: #2563EB !important;
}


/* 3. MODALS (LEVEL 2 - HIDDEN PANELS) */


/* Targeting the specific content divs inside modals */
body.light-mode #email-auth-modal>div,
body.light-mode #signup-thankyou-modal>div,
body.light-mode #email-verification-modal>div,
body.light-mode #terms-consent-modal>div,
body.light-mode #success-modal>div,
body.light-mode #error-modal>div,
body.light-mode #refund-policy-modal>div,
body.light-mode #payment-processing-modal>div {
    background: #FFFFFF !important;
    border: 1px solid #E5E7EB !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
}

/* Full Page Overlays */
body.light-mode #payment-success-page {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 50%, #f0f9ff 100%) !important;
}

/* Payment Success Page - Glass Card */
body.light-mode #payment-success-page .glass-card {
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid #E5E7EB !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important;
}

/* Payment Success Page - Preserve Gradient Counter Animation */
body.light-mode #payment-success-page #success-report-counter {
    background: linear-gradient(to right, #2563eb, #059669) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}

/* Payment Success Page - Text Elements */
body.light-mode #payment-success-page h1,
body.light-mode #payment-success-page h2 {
    color: #1E40AF !important;
    -webkit-text-fill-color: #1E40AF !important;
}

body.light-mode #payment-success-page .text-white {
    color: #1E3A8A !important;
}

body.light-mode #payment-success-page .text-blue-200 {
    color: #1E40AF !important;
}

body.light-mode #payment-success-page .text-gray-400,
body.light-mode #payment-success-page .text-gray-500 {
    color: #4B5563 !important;
}

/* Payment Success Page - Border */
body.light-mode #payment-success-page .border-gray-700 {
    border-color: #E5E7EB !important;
}

/* Payment Success Page - Button */
body.light-mode #payment-success-page button {
    color: #FFFFFF !important;
}

/* Modal Typography */
body.light-mode h2,
body.light-mode h3,
body.light-mode .modal h2,
body.light-mode .modal h3,
body.light-mode [id*="-modal"] h2,
body.light-mode [id*="-modal"] h3 {
    color: #111827 !important;
}

body.light-mode p,
body.light-mode .modal p,
body.light-mode [id*="-modal"] p {
    color: #4B5563 !important;
}


/* 4. TEXT & TYPOGRAPHY (LEVEL 3) */
body.light-mode h1,
body.light-mode h2,
body.light-mode h3,
body.light-mode h4,
body.light-mode h5,
body.light-mode h6,
body.light-mode strong {
    color: #111827 !important;
    background: none !important;
    -webkit-text-fill-color: initial !important;
    text-shadow: none !important;
}

body.light-mode p,
body.light-mode li,
body.light-mode span,
body.light-mode .text-gray-200,
body.light-mode .text-gray-300,
body.light-mode .text-gray-400 {
    color: #4B5563 !important;
}

body.light-mode .text-white {
    color: #111827 !important;
}

/* Ensure section headings are dark and visible in light mode */
/* Fix visibility of section headings on gray backgrounds */
body.light-mode section h2.text-white,
body.light-mode #app-options h2,
body.light-mode #features h2,
body.light-mode #privacy-policy h2 {
    color: #111827 !important;
}

/* Pricing heading teal */
body.light-mode #pricing h2 {
    color: #319795 !important;
}

/* Preserve white text on buttons with gradient backgrounds */
/* Ensure ALL text inside teal/gradient buttons is white */
body.light-mode .light-mode-teal,
body.light-mode .light-mode-teal *,
body.light-mode button.light-mode-teal,
body.light-mode a.light-mode-teal,
body.light-mode .download-btn,
body.light-mode .download-btn *,
body.light-mode button.text-white,
body.light-mode a.text-white,
body.light-mode [class*="bg-gradient"] .text-white,
body.light-mode [class*="bg-gradient"].text-white,
body.light-mode [class*="bg-blue-"].text-white,
body.light-mode [class*="bg-green-"].text-white {
    color: #FFFFFF !important;
}

/* Pulse Text - Blue */
body.light-mode .pulse-text {
    background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%) !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
}


/* 5. INPUTS & CONTROLS (LEVEL 3) */
body.light-mode input,
body.light-mode textarea {
    background: #FFFFFF !important;
    border: 1px solid #D1D5DB !important;
    /* Gray 300 */
    color: #111827 !important;
}

body.light-mode input:focus,
body.light-mode textarea:focus {
    border-color: #2563EB !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2) !important;
}

/* Theme Switch */
body.light-mode .slider {
    background-color: #E2E8F0;
    border: 1px solid #CBD5E0;
}

body.light-mode .slider i.fa-moon {
    color: #94A3B8;
}

/* Dropdowns (Profile/Mobile Menu) */
body.light-mode .user-profile .bg-gray-800,
body.light-mode #mobile-menu,
body.light-mode .absolute.right-0.bg-gray-800 {
    background: #FFFFFF !important;
    border: 1px solid #E5E7EB !important;
}

body.light-mode .user-profile a:hover,
body.light-mode #mobile-menu .nav-link:hover {
    background-color: #F3F4F6 !important;
    color: #2563EB !important;
}


/* 6. BUTTONS & BRANDING (BLUE > TEAL) */
/* Override generic blue keys */
body.light-mode .bg-blue-600 {
    background-color: #2563EB !important;
}

body.light-mode .bg-blue-600:hover {
    background-color: #1D4ED8 !important;
}

/* Override Teal Classes to Blue */
body.light-mode .bg-teal-600 {
    background-color: #2563EB !important;
}

body.light-mode .bg-teal-600:hover {
    background-color: #1D4ED8 !important;
}

/* Special 'light-mode-teal' class repurposing */
body.light-mode .light-mode-teal,
body.light-mode .download-btn,
body.light-mode .desktop-toggle-btn {
    background: #2563EB !important;
    background-image: none !important;
    color: #ffffff !important;
    border: none !important;
}

body.light-mode .light-mode-teal:hover,
body.light-mode .download-btn:hover,
body.light-mode .desktop-toggle-btn:hover {
    background: #1D4ED8 !important;
}

/* Secondary Buttons */
body.light-mode .nav-dark .auth-buttons button.btn-secondary {
    background: #FFFFFF !important;
    border: 1px solid #D1D5DB !important;
    color: #374151 !important;
}

body.light-mode .nav-dark .auth-buttons button.btn-secondary:hover {
    background: #F9FAFB !important;
    border-color: #9CA3AF !important;
    color: #111827 !important;
}

/* Navigation - Light Mode */
body.light-mode .nav-dark {
    background: rgba(255, 255, 255, 0.95) !important;
    border-bottom: 1px solid #e5e7eb !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
}

body.light-mode .nav-dark.scrolled {
    background: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important;
}

body.light-mode .nav-dark a.nav-link {
    color: #374151 !important;
}

body.light-mode .nav-dark a.nav-link:hover {
    color: #319795 !important;
    /* Teal accent */
}

/* Auth Buttons in Light Mode */
body.light-mode .nav-dark .auth-buttons button.btn-secondary {
    background: transparent !important;
    border: 1px solid #CBD5E0 !important;
    color: #4A5568 !important;
}

body.light-mode .nav-dark .auth-buttons button.btn-secondary:hover {
    background: #EDF2F7 !important;
    color: #2D3748 !important;
}

/* Hero Section Overrides */
body.light-mode .hero-video-overlay {
    background: rgba(249, 245, 235, 0.75) !important;
    backdrop-filter: blur(4px) !important;
}

/* Fix Hero Container Transparency - Override generic section>div rule */
body.light-mode .hero-gradient>div {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Float particles in light mode */
body.light-mode .hero-gradient::before {
    background-image:
        radial-gradient(circle at 25% 25%, rgba(49, 151, 149, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 75% 75%, rgba(72, 187, 120, 0.15) 0%, transparent 50%) !important;
}

body.light-mode .hero-gradient h1,
body.light-mode .hero-gradient h1 span:not(.pulse-text),
body.light-mode .hero-gradient .text-gray-200 {
    color: #FFFFFF !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
}

body.light-mode .hero-gradient p,
body.light-mode .hero-gradient p strong,
body.light-mode .hero-gradient .text-gray-400 {
    color: #F9FAFB !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
}

/* Make "AI-Powered" pulse text stand out in light mode */
body.light-mode .pulse-text {
    color: #FFFFFF !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2) !important;
    background: none !important;
    -webkit-text-fill-color: initial !important;
}

/* Important Requirements Box - Light Mode */
body.light-mode .important-reqs-box {
    background: rgba(230, 255, 250, 0.5) !important;
    border: 1px solid #38B2AC !important;
}

body.light-mode .important-reqs-box h6 {
    color: #234E52 !important;
}

body.light-mode .important-reqs-box i.fa-exclamation-triangle {
    color: #D69E2E !important;
    /* Darker yellow/orange for light mode */
}

body.light-mode .important-reqs-box ul li {
    color: #2D3748 !important;
}

body.light-mode .important-reqs-box i.fa-user-check,
body.light-mode .important-reqs-box i.fa-globe,
body.light-mode .important-reqs-box i.fa-sync {
    color: #319795 !important;
}

body.light-mode .important-reqs-box strong {
    color: #285E61 !important;
}

/* Headings - Light Mode */
body.light-mode h1,
body.light-mode h2 {
    background: none !important;
    -webkit-text-fill-color: initial !important;
    color: #111827 !important;
    line-height: 1.3 !important;
    padding-bottom: 0.1em !important;
    /* Prevent descender clipping */
}

body.light-mode h3,
body.light-mode h4,
body.light-mode strong {
    color: #1f2937 !important;
    line-height: 1.4 !important;
    /* improved readability */
}

body.light-mode .pulse-text {
    padding-bottom: 0.4em !important;
    /* Fix for pulse text specifically */
    line-height: 1.4 !important;
}

body.light-mode p.text-gray-200,
body.light-mode p.text-gray-300,
body.light-mode p.text-gray-400 {
    color: #4b5563 !important;
    line-height: 1.7 !important;
    /* Improved body text readability */
}

/* Cards & Containers - Light Mode */
body.light-mode .bg-gray-800,
body.light-mode .bg-gray-900,
body.light-mode [class*="bg-gray-"],
body.light-mode .glass-card,
body.light-mode .pricing-card,
body.light-mode .feature-card {
    background: #FFFFFF !important;
    /* Pure White */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03) !important;
    border: 1px solid #E5E7EB !important;
    color: #2D3748 !important;
}

/* Fix specific gradient backgrounds on sections */
body.light-mode #app-options,
body.light-mode #features,
body.light-mode #pricing,
body.light-mode #faq,
body.light-mode #contact {
    background: transparent !important;
}

/* Remove border from specific layout containers if needed */
body.light-mode .app-container {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* Text Colors in Containers */
body.light-mode .text-gray-300,
body.light-mode .text-gray-400 {
    color: #4b5563 !important;
    /* darkened for readability on white */
}

body.light-mode .text-white {
    color: #111827 !important;
}

body.light-mode .text-gray-200 {
    color: #374151 !important;
}

/* Footer - Light Mode */
body.light-mode .footer-dark {
    background: linear-gradient(135deg, #F9FAFB 0%, #EFF1F5 100%) !important;
    border-top: 1px solid #E5E7EB !important;
}

body.light-mode .footer-dark h3 {
    color: #2D3748 !important;
}

body.light-mode .footer-dark p,
body.light-mode .footer-dark a {
    color: #4A5568 !important;
}

body.light-mode .footer-dark a:hover {
    color: #319795 !important;
}

/* Social Links */
body.light-mode .social-link {
    color: #4A5568 !important;
}

body.light-mode .social-link:hover {
    color: #319795 !important;
}

/* Toggle Switch Styles — Premium Pill Design */
.theme-switch {
    position: relative;
    display: inline-block;
    width: 88px;
    height: 34px;
    cursor: pointer;
    margin-right: 15px;
}

/* Hide default HTML checkbox */
.theme-switch input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

/* Track — Dark Mode default */
.theme-track {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #1F2937;
    border-radius: 34px !important;
    border: 1px solid #374151 !important;
    display: flex;
    align-items: center;
    padding: 0 8px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

/* Text label inside the track */
.theme-label-text {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #9CA3AF;
    margin-left: 30px;
    transition: all 0.4s ease;
    user-select: none;
    white-space: nowrap;
}

/* Sliding knob with icon */
.theme-knob {
    position: absolute;
    left: 3px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    background: #FFFFFF;
    border-radius: 50% !important;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25) !important;
    z-index: 10;
}

/* Icons inside the knob */
.theme-icon-moon,
.theme-icon-sun {
    position: absolute;
    font-size: 13px;
    transition: all 0.3s ease;
}

/* Dark Mode: moon visible, sun hidden */
.theme-icon-moon {
    color: #374151;
    opacity: 1;
    transform: rotate(0deg);
}

.theme-icon-sun {
    color: #F59E0B;
    opacity: 0;
    transform: rotate(-90deg);
}

/* Checked = Light Mode */
input:checked+.theme-track {
    background: #E5E7EB;
    border-color: #D1D5DB !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}

input:checked+.theme-track .theme-label-text {
    color: #4B5563;
    margin-left: 4px;
    margin-right: auto;
}

input:checked+.theme-track .theme-knob {
    left: calc(100% - 31px);
    background: #FFFFFF;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
}

input:checked+.theme-track .theme-icon-moon {
    opacity: 0;
    transform: rotate(90deg);
}

input:checked+.theme-track .theme-icon-sun {
    opacity: 1;
    transform: rotate(0deg);
}

/* Hover effect */
.theme-switch:hover .theme-track {
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 5px rgba(59, 130, 246, 0.3) !important;
}

/* Light Mode overrides for landing page */
body.light-mode .theme-track {
    background: #E5E7EB;
    border-color: #D1D5DB !important;
}

body.light-mode .theme-label-text {
    color: #4B5563;
}

/* User Profile & Mobile Menu Dropdowns in Light Mode */
body.light-mode .user-profile .bg-gray-800,
body.light-mode #mobile-menu,
body.light-mode .absolute.right-0.bg-gray-800

/* Dropdown */
    {
    background: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1) !important;
}

body.light-mode .user-profile .text-gray-300,
body.light-mode .user-profile .text-white {
    color: #2D3748 !important;
}

body.light-mode .user-profile .border-gray-700 {
    border-color: #E2E8F0 !important;
}

body.light-mode .user-profile a:hover {
    background-color: #F7FAFC !important;
}

/* Mobile Menu specifically */
body.light-mode #mobile-menu .nav-link {
    color: #4A5568 !important;
}

body.light-mode #mobile-menu .nav-link:hover {
    color: #319795 !important;
    background-color: #F7FAFC !important;
}

/* Input Fields in Contact Form */
body.light-mode input,
body.light-mode textarea {
    background: #FFFFFF !important;
    border: 1px solid #CBD5E0 !important;
    color: #2D3748 !important;
}

body.light-mode input:focus,
body.light-mode textarea:focus {
    border-color: #319795 !important;
    box-shadow: 0 0 0 3px rgba(49, 151, 149, 0.2) !important;
}

/* Generic Blue Keys - Muted Teal override */
body.light-mode .bg-blue-600 {
    background-color: #319795 !important;
}

body.light-mode .bg-blue-600:hover {
    background-color: #2C7A7B !important;
}

/* Force specific button colors for Teal */
body.light-mode .bg-teal-600 {
    background-color: #319795 !important;
    color: #ffffff !important;
}

body.light-mode .bg-teal-600:hover {
    background-color: #2C7A7B !important;
}

/* New Utility: Force solid teal in light mode for buttons that use gradients in dark mode */
body.light-mode .light-mode-teal {
    background: #319795 !important;
    background-image: none !important;
    color: #ffffff !important;
    border: none !important;
    line-height: 1.5 !important;
    /* Fix text cutoff */
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

body.light-mode .light-mode-teal:hover {
    background: #2C7A7B !important;
}

/* Sign In with Google Button - Light Mode Override */
/* Default (dark mode) is dark bg + white text set in HTML */
body.light-mode .nav-dark .btn-google-signin,
body.light-mode .nav-dark .btn-google-signin *,
body.light-mode #mobile-menu .btn-google-signin,
body.light-mode #mobile-menu .btn-google-signin * {
    background: #FFFFFF !important;
    border-color: #D1D5DB !important;
    color: #1F2937 !important;
    -webkit-text-fill-color: #1F2937 !important;
}

body.light-mode .nav-dark .btn-google-signin:hover,
body.light-mode #mobile-menu .btn-google-signin:hover {
    background: #F3F4F6 !important;
}

/* Sign In with Email Button - Light Mode Override */
/* Default (dark mode) is dark bg + white text set in HTML */
body.light-mode .nav-dark .btn-email-signin,
body.light-mode #mobile-menu .btn-email-signin {
    background: #FFFFFF !important;
    border-color: #D1D5DB !important;
    color: #1F2937 !important;
    -webkit-text-fill-color: #1F2937 !important;
}

body.light-mode .nav-dark .btn-email-signin:hover,
body.light-mode #mobile-menu .btn-email-signin:hover {
    background: #F3F4F6 !important;
}

/* Preserve email icon color in light mode */
body.light-mode .nav-dark .btn-email-signin i.fa-envelope,
body.light-mode #mobile-menu .btn-email-signin i.fa-envelope {
    color: #3B82F6 !important;
    -webkit-text-fill-color: #3B82F6 !important;
}

/* Center Login Button - Light Mode Override */
/* Default (dark mode) is dark bg + white text set in HTML */
body.light-mode .nav-dark .btn-center-login,
body.light-mode #mobile-menu .btn-center-login {
    background: #FFFFFF !important;
    border-color: #D1D5DB !important;
    color: #1F2937 !important;
    -webkit-text-fill-color: #1F2937 !important;
}

body.light-mode .nav-dark .btn-center-login:hover,
body.light-mode #mobile-menu .btn-center-login:hover {
    background: #F3F4F6 !important;
}

/* Preserve building icon color in light mode */
body.light-mode .nav-dark .btn-center-login i.fa-building,
body.light-mode #mobile-menu .btn-center-login i.fa-building {
    color: #14B8A6 !important;
    -webkit-text-fill-color: #14B8A6 !important;
}

/* Force solid blue in light mode for primary buttons */
body.light-mode .light-mode-primary-blue {
    background: #2563EB !important;
    background-image: none !important;
    color: #ffffff !important;
    border: none !important;
}

body.light-mode .light-mode-primary-blue:hover {
    background: #1D4ED8 !important;
}

body.light-mode .text-blue-400 {
    color: #319795 !important;
}

/* Gray Buttons (Cancel/Later) - Light Mode Fix */
body.light-mode .bg-gray-700,
body.light-mode .bg-gray-600,
body.light-mode button.bg-gray-700,
body.light-mode button.bg-gray-600 {
    background-color: #E2E8F0 !important;
    /* Light Gray */
    color: #1F2937 !important;
    /* Dark Gray Text */
    border: 1px solid #CBD5E0 !important;
}

body.light-mode .bg-gray-700:hover,
body.light-mode .bg-gray-600:hover,
body.light-mode button.bg-gray-700:hover,
body.light-mode button.bg-gray-600:hover {
    background-color: #CBD5E0 !important;
    /* Slightly darker on hover */
    color: #111827 !important;
}

/* Warning Boxes (Yellow/Orange) - Light Mode Fix */
body.light-mode .bg-yellow-800 {
    background-color: #FEF3C7 !important;
    /* Light Yellow/Amber */
    color: #92400E !important;
    /* Dark Amber Text */
    border: 1px solid #FCD34D !important;
}

body.light-mode .bg-yellow-800 .text-yellow-200,
body.light-mode .bg-yellow-800 p,
body.light-mode .bg-yellow-800 i {
    color: #92400E !important;
}

/* Info Boxes (Blue) - Light Mode Fix */
body.light-mode .bg-blue-900 {
    background-color: #EFF6FF !important;
    /* Light Blue */
    color: #1E40AF !important;
    /* Dark Blue Text */
    border: 1px solid #BFDBFE !important;
}

body.light-mode .bg-blue-900 .text-blue-100,
body.light-mode .bg-blue-900 .text-blue-200,
body.light-mode .bg-blue-900 p,
body.light-mode .bg-blue-900 i {
    color: #1E40AF !important;
}

/* Error/Destructive Alerts (Red) - Light Mode Fix */
body.light-mode .bg-red-800 {
    background-color: #FEF2F2 !important;
    /* Light Red */
    color: #991B1B !important;
    /* Dark Red Text */
    border: 1px solid #FECACA !important;
}

body.light-mode .bg-red-800 .text-red-200,
body.light-mode .bg-red-800 p,
body.light-mode .bg-red-800 i {
    color: #991B1B !important;
}

/* Success Badges/Alerts (Green) - Light Mode Fix */
body.light-mode .bg-green-800 {
    background-color: #F0FDF4 !important;
    /* Light Green */
    color: #166534 !important;
    /* Dark Green Text */
    border: 1px solid #BBF7D0 !important;
}

body.light-mode .bg-green-800 .text-green-200,
body.light-mode .bg-green-800 p,
body.light-mode .bg-green-800 span {
    color: #166534 !important;
}

/* Green Buttons - Ensure White Text */
body.light-mode .bg-green-600 {
    color: #FFFFFF !important;
}

body.light-mode .bg-green-600:hover {
    color: #FFFFFF !important;
}

/* =========================================
   PART 6: DARK MODE BUTTON FIXES & ENFORCEMENT
   ========================================= */

/* Default (Dark Mode) Gradients - Enforce these to fix "missing background" issue */
.download-btn {
    background: linear-gradient(90deg, #319795 0%, #00B5D8 100%);
    color: white;
    border: none;
}

.desktop-toggle-btn {
    background: linear-gradient(90deg, #1f2937, #111827);
    color: white;
    border: 1px solid #374151;
    /* gray-700 */
}

/* Light Mode Overrides for these specific classes */
body.light-mode .download-btn,
body.light-mode .desktop-toggle-btn {
    background: #319795 !important;
    background-image: none !important;
    border: none !important;
    color: white !important;
}

/* Ensure ALL text inside download buttons and desktop toggle stays white */
body.light-mode .download-btn *,
body.light-mode .download-btn span,
body.light-mode .download-btn i,
body.light-mode .download-btn .download-text,
body.light-mode .download-btn .text-blue-200,
body.light-mode .download-btn .text-gray-300,
body.light-mode .download-btn .text-indigo-200,
body.light-mode .desktop-toggle-btn *,
body.light-mode .desktop-toggle-btn h4,
body.light-mode .desktop-toggle-btn p,
body.light-mode .desktop-toggle-btn span,
body.light-mode .desktop-toggle-btn i,
body.light-mode .desktop-toggle-btn .text-gray-400 {
    color: #FFFFFF !important;
}

body.light-mode .download-btn:hover,
body.light-mode .desktop-toggle-btn:hover {
    background: #2C7A7B !important;
}

/* =========================================
   PART 9: PRIVACY POLICY & CLEANUP
   ========================================= */

/* Fix Privacy Policy Background in Light Mode */
body.light-mode #privacy-policy {
    background: linear-gradient(135deg, #F9FAFB 0%, #EFF1F5 100%) !important;
}

/* =========================================
   PART 10: MODAL LIGHT MODE STYLING
   ========================================= */

/* Light Mode Modal Backgrounds */
body.light-mode #email-auth-modal>div,
body.light-mode #signup-thankyou-modal>div,
body.light-mode #email-verification-modal>div,
body.light-mode #terms-consent-modal>div {
    background: linear-gradient(135deg, #FFFFFF 0%, #F9FAFB 100%) !important;
}

/* Fix modal text colors in Light Mode */
body.light-mode #email-auth-modal h2,
body.light-mode #signup-thankyou-modal h2,
body.light-mode #email-verification-modal h2,
body.light-mode #terms-consent-modal h3 {
    color: #1a202c !important;
}

body.light-mode #email-auth-modal p,
body.light-mode #signup-thankyou-modal p,
body.light-mode #email-verification-modal p,
body.light-mode #terms-consent-modal p {
    color: #4a5568 !important;
}

/* =========================================
   PART 11: SPECIFIC LIGHT MODE OVERRIDES
   ========================================= */

/* AI Revolution Heading */
body.light-mode .ai-revolution-heading,
body.light-mode h3.text-white.ai-revolution-heading,
body.light-mode #features h3.ai-revolution-heading {
    color: #319795 !important;
    -webkit-text-fill-color: #319795 !important;
}

/* Feature Section Headings - Teal in Light Mode */
body.light-mode #features h4.text-white {
    color: #319795 !important;
}

/* Beta Extension Panel - White text on teal/cyan gradient background */
body.light-mode .border-cyan-500 button,
body.light-mode .border-cyan-500 button span,
body.light-mode .border-cyan-500 button i,
body.light-mode #beta-extension-content,
body.light-mode #beta-extension-content p,
body.light-mode #beta-extension-content a,
body.light-mode #beta-extension-content span {
    color: #FFFFFF !important;
}

body.light-mode #beta-extension-content a.text-cyan-300 {
    color: #E0F2F1 !important;
}

body.light-mode #beta-extension-content a.text-cyan-300:hover {
    color: #FFFFFF !important;
}

/* Installation Guide Heading */
body.light-mode #installation-guide h2 {
    color: #319795 !important;
}

/* Installation Icons Background */
body.light-mode .install-icon-bg {
    background: #319795 !important;
}

/* Installation Step Badges (Windows) */
body.light-mode .install-step-badge {
    background-color: #319795 !important;
}

/* Installation Step Circles (Mac) */
body.light-mode .install-step-circle {
    border-color: #319795 !important;
    color: #319795 !important;
    background-color: transparent !important;
    border: 2px solid #319795 !important;
}

/* =========================================
   PART 12: LIGHT MODE BUTTON TEXT LEGIBILITY FIXES
   ========================================= */

/* Preserve white text on dark-background buttons inside modals */
/* These buttons have dark backgrounds (bg-gray-700, bg-gray-600, etc.) and need white text */
body.light-mode [id*="-modal"] button.bg-gray-700,
body.light-mode [id*="-modal"] button.bg-gray-600,
body.light-mode [id*="-modal"] .bg-gray-700,
body.light-mode [id*="-modal"] .bg-gray-600,
body.light-mode #auth-options-modal button.bg-gray-700,
body.light-mode #auth-options-modal .bg-gray-700 {
    color: #FFFFFF !important;
}

/* Fix "Sign in with Google" button text specifically in modals */
body.light-mode [id*="-modal"] button[onclick*="signInWithGoogle"],
body.light-mode #email-auth-modal button[onclick*="signInWithGoogle"],
body.light-mode #auth-options-modal button[onclick*="signInWithGoogle"] {
    color: #FFFFFF !important;
    background-color: #374151 !important;
    border-color: #4B5563 !important;
}

body.light-mode [id*="-modal"] button[onclick*="signInWithGoogle"]:hover,
body.light-mode #email-auth-modal button[onclick*="signInWithGoogle"]:hover,
body.light-mode #auth-options-modal button[onclick*="signInWithGoogle"]:hover {
    background-color: #4B5563 !important;
}

/* Fix "Sign in with Google" button text within FA icon spans */
body.light-mode [id*="-modal"] button[onclick*="signInWithGoogle"] *,
body.light-mode #email-auth-modal button[onclick*="signInWithGoogle"] *,
body.light-mode #auth-options-modal button[onclick*="signInWithGoogle"] * {
    color: #FFFFFF !important;
}

/* Fix the View Plans button in signup thank you modal */
body.light-mode #signup-thankyou-modal button.bg-gray-700,
body.light-mode #signup-thankyou-modal button[onclick*="viewPlans"] {
    color: #FFFFFF !important;
    background-color: #374151 !important;
}

body.light-mode #signup-thankyou-modal button.bg-gray-700:hover,
body.light-mode #signup-thankyou-modal button[onclick*="viewPlans"]:hover {
    background-color: #4B5563 !important;
}

/* Fix the scroll down indicator in terms consent modal */
body.light-mode #scroll-indicator {
    background: linear-gradient(135deg, rgba(180, 83, 9, 0.9) 0%, rgba(154, 52, 18, 0.9) 100%) !important;
    border-color: rgba(251, 191, 36, 0.8) !important;
}

body.light-mode #scroll-indicator p,
body.light-mode #scroll-indicator i {
    color: #FEF3C7 !important;
}

body.light-mode #scroll-indicator p.text-yellow-200 {
    color: #FDE68A !important;
}

/* Fix text in auth options modal info box */
body.light-mode #auth-options-modal .bg-blue-900,
body.light-mode [id*="-modal"] .bg-blue-900 {
    background-color: rgba(30, 58, 138, 0.5) !important;
    color: #BFDBFE !important;
}

body.light-mode #auth-options-modal .bg-blue-900 *,
body.light-mode [id*="-modal"] .bg-blue-900 * {
    color: #BFDBFE !important;
}

/* Preserve white text on gradient buttons inside modals */
body.light-mode [id*="-modal"] button[class*="bg-gradient-to-r"],
body.light-mode [id*="-modal"] button.bg-gradient-to-r {
    color: #FFFFFF !important;
}

body.light-mode [id*="-modal"] button[class*="bg-gradient-to-r"] *,
body.light-mode [id*="-modal"] button.bg-gradient-to-r * {
    color: #FFFFFF !important;
}

/* Modal close buttons and secondary actions text */
body.light-mode [id*="-modal"] button.text-gray-400 {
    color: #6B7280 !important;
}

body.light-mode [id*="-modal"] button.text-gray-400:hover {
    color: #374151 !important;
}

/* Preserve white text on buttons with text-white class that have dark backgrounds */
body.light-mode [id*="-modal"] button.text-white,
body.light-mode [id*="-modal"] button.text-white *,
body.light-mode #email-auth-modal button.text-white,
body.light-mode #email-auth-modal button.text-white * {
    color: #FFFFFF !important;
}

/* Specifically target the Sign In with Google button which has bg-gray-700 and text-white */
body.light-mode #email-auth-modal form button.bg-gray-700.text-white,
body.light-mode #email-auth-modal form button.bg-gray-700.text-white * {
    color: #FFFFFF !important;
}

/* Fix all buttons with dark backgrounds in modals that should have white text */
body.light-mode [id*="-modal"] button[class*="bg-gray-7"][class*="text-white"],
body.light-mode [id*="-modal"] button[class*="bg-gray-6"][class*="text-white"] {
    color: #FFFFFF !important;
}

/* Ensure icon elements inside these buttons also remain white */
body.light-mode [id*="-modal"] button.bg-gray-700 i,
body.light-mode [id*="-modal"] button.bg-gray-600 i {
    color: #FFFFFF !important;
}

/* =========================================
   PART 13: MODAL INPUT TEXT FIX FOR LIGHT MODE
   ========================================= */

/* Fix input text visibility in modals - ensure dark text on light background */
body.light-mode #email-auth-modal input,
body.light-mode #email-auth-modal textarea,
body.light-mode [id*="-modal"] input,
body.light-mode [id*="-modal"] textarea,
body.light-mode [id*="-modal"] input.text-gray-200,
body.light-mode [id*="-modal"] input.text-gray-300 {
    background: #FFFFFF !important;
    color: #1F2937 !important;
    border: 1px solid #D1D5DB !important;
}

/* Ensure placeholder text is visible but lighter */
body.light-mode #email-auth-modal input::placeholder,
body.light-mode [id*="-modal"] input::placeholder {
    color: #9CA3AF !important;
}

/* Focus state for modal inputs */
body.light-mode #email-auth-modal input:focus,
body.light-mode [id*="-modal"] input:focus {
    border-color: #2563EB !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2) !important;
    outline: none !important;
}

/* Labels in modals should be dark for visibility */
body.light-mode #email-auth-modal label,
body.light-mode [id*="-modal"] label {
    color: #1F2937 !important;
}

/* =========================================
   PART 14: RADIOLOGY NEWS SECTION
   ========================================= */

/* Line clamp utility */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* News Section Dark Mode */
#radiology-news-landing {
    background: transparent;
}

#radiology-news-landing .news-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#radiology-news-landing .news-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(59, 130, 246, 0.15);
}

#radiology-news-landing .news-card img {
    transition: transform 0.5s ease;
}

#radiology-news-landing .news-card:hover img {
    transform: scale(1.05);
}

/* News Section Light Mode */
body.light-mode #radiology-news-landing {
    background: transparent;
}

body.light-mode #radiology-news-landing h2 {
    color: #319795 !important;
    -webkit-text-fill-color: initial !important;
}

body.light-mode #radiology-news-landing p.text-gray-400 {
    color: #6B7280 !important;
}

body.light-mode #radiology-news-landing .news-card {
    background: #FFFFFF !important;
    border: 1px solid #E5E7EB !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05) !important;
}

body.light-mode #radiology-news-landing .news-card:hover {
    border-color: #3B82F6 !important;
    box-shadow: 0 12px 24px rgba(59, 130, 246, 0.1) !important;
}

body.light-mode #radiology-news-landing .news-card h3 {
    color: #1F2937 !important;
}

body.light-mode #radiology-news-landing .news-card .bg-gray-900 {
    background: #F3F4F6 !important;
}

body.light-mode #radiology-news-landing .text-gray-500,
body.light-mode #radiology-news-landing .text-gray-600 {
    color: #9CA3AF !important;
}