/* ====================================
   AlRaebi Auto Car - Brand Identity System
   ==================================== */

/* ====================================
   CSS Variable System - Light Mode (Default)
   Requirements: 2.1, 2.2, 3.1-3.8
   ==================================== */

:root {
  /* Primary Brand Colors - Consistent across themes */
  --color-primary: #007ab8;           /* Main blue CTAs and actions - Adjusted for WCAG AA (4.51:1) */
  --color-primary-dark: #006ba3;      /* Hover states and secondary emphasis - Adjusted for WCAG AA (5.78:1) */
  --color-primary-light: #00a5df;     /* Light variant for dark backgrounds (original brand color) */
  
  /* Background Colors - Light Mode */
  --color-bg: #ffffff;                /* Main page background */
  --color-bg-section: #ebedf1;        /* Light sections and card backgrounds */
  --color-bg-muted: #d2d6e2;          /* Muted backgrounds for containers */
  --color-card-bg: #ffffff;           /* Card backgrounds */
  
  /* Text Colors - Light Mode */
  --color-text: #000000;              /* Main text */
  --color-text-secondary: #4c4c4e;    /* Secondary text and borders */
  --color-text-on-dark: #ebedf1;      /* Text on dark backgrounds */
  
  /* UI Elements - Light Mode */
  --color-border: #4c4c4e;            /* Borders and dividers */
  --color-footer-bg: #323132;         /* Footer and dark sections */
  --color-footer-text: #ebedf1;       /* Footer text color */
  
  /* Button Colors - Light Mode */
  --btn-primary-bg: #007ab8;          /* Primary button background - WCAG AA compliant (4.51:1) */
  --btn-primary-text: #ffffff;        /* Primary button text */
  --btn-primary-hover: #006ba3;       /* Primary button hover state - WCAG AA compliant (5.78:1) */
  --btn-primary-active: #005a8a;      /* Primary button active state */
  --btn-primary-shadow: rgba(0, 122, 184, 0.3); /* Primary button shadow */
  --btn-primary-hover-shadow: rgba(0, 107, 163, 0.4); /* Primary button hover shadow */
  
  --btn-secondary-bg: #6c757d;        /* Secondary button background */
  --btn-secondary-text: #ffffff;      /* Secondary button text */
  --btn-secondary-hover: #5a6268;     /* Secondary button hover state */
  --btn-secondary-shadow: rgba(108, 117, 125, 0.3); /* Secondary button shadow */
  
  --btn-light-bg: #ffffff;            /* Light button background */
  --btn-light-text: #1e3a5f;          /* Light button text */
  --btn-light-hover-bg: #f8f9fa;      /* Light button hover background */
  --btn-light-hover-text: #00a5df;    /* Light button hover text */
  --btn-light-active-bg: #e9ecef;     /* Light button active background */
  --btn-light-shadow: rgba(0, 0, 0, 0.1); /* Light button shadow */
  
  --btn-success-bg: #1e8035;          /* Success button background - WCAG AA compliant */
  --btn-success-bg-end: #1aa179;      /* Success button gradient end */
  --btn-success-text: #ffffff;        /* Success button text */
  --btn-success-hover: #196d2d;       /* Success button hover state */
  --btn-success-hover-end: #158a66;   /* Success button hover gradient end */
  --btn-success-shadow: rgba(30, 128, 53, 0.3); /* Success button shadow */
  
  --btn-danger-bg: #dc3545;           /* Danger button background */
  --btn-danger-bg-end: #c82333;       /* Danger button gradient end */
  --btn-danger-text: #ffffff;         /* Danger button text */
  --btn-danger-hover: #c82333;        /* Danger button hover state */
  --btn-danger-hover-end: #bd2130;    /* Danger button hover gradient end */
  --btn-danger-shadow: rgba(220, 53, 69, 0.3); /* Danger button shadow */
  
  --btn-white-bg: #ffffff;            /* White button background */
  --btn-white-text: #1e3a5f;          /* White button text */
  --btn-white-hover-bg: #00a5df;      /* White button hover background */
  --btn-white-hover-text: #ffffff;    /* White button hover text */
  --btn-white-active-bg: #007ec6;     /* White button active background */
  --btn-white-shadow: rgba(0, 0, 0, 0.2); /* White button shadow */
  
  --btn-warning-bg: #ffc107;          /* Warning button background */
  --btn-warning-bg-end: #ff9800;      /* Warning button gradient end */
  --btn-warning-text: #1e3a5f;        /* Warning button text */
  
  /* Focus and Interaction States */
  --focus-shadow-color: rgba(0, 165, 223, 0.25); /* Focus ring color */
  
  /* Transition Variables for Smooth Theme Switching */
  /* Optimized: Single transition property for better performance */
  --theme-transition-duration: 0.3s;
  --theme-transition-timing: ease;
  --theme-transition: background-color var(--theme-transition-duration) var(--theme-transition-timing), 
                      color var(--theme-transition-duration) var(--theme-transition-timing), 
                      border-color var(--theme-transition-duration) var(--theme-transition-timing);
  --theme-transition-fast: background-color 0.2s var(--theme-transition-timing), 
                           color 0.2s var(--theme-transition-timing);
  
  /* Legacy Variable Support (for backward compatibility) */
  --primary-black: #000000;
  --primary-blue: #00a5df;
  --primary-light: #ebedf1;
  --secondary-dark: #323132;
  --secondary-blue: #007ec6;
  --secondary-beige: #d2d6e2;
  --secondary-gray: #4c4c4e;
  --text-primary: #000000;
  --text-secondary: #4c4c4e;
  --text-on-dark: #ebedf1;
  --text-on-accent: #ffffff;
  --header-bg: #000000;
  --header-text: #ffffff;
  --hero-bg: #ffffff;
  --hero-text: #000000;
  --card-bg: #ffffff;
  --card-border: #d2d6e2;
  --btn-primary-bg: #00a5df;
  --btn-primary-text: #ffffff;
  --btn-secondary-bg: #007ec6;
  --btn-secondary-text: #ffffff;
}

/* ====================================
   Dark Mode Override - PURE BLACK AMOLED
   Requirements: 4.1-4.8
   ==================================== */

html[data-theme="dark"] {
  /* Background Colors - PURE BLACK Dark Mode */
  --color-bg: #000000;                /* PURE BLACK main background */
  --color-bg-section: #000000;        /* PURE BLACK sections */
  --color-bg-muted: #0a0a0a;          /* Slightly lighter for subtle contrast */
  --color-card-bg: #0a0a0a;           /* Cards with minimal contrast */
  
  /* Text Colors - Dark Mode */
  --color-text: #ffffff;              /* Pure white text */
  --color-text-secondary: #d2d2d2;    /* Light gray secondary text */
  --color-text-on-dark: #ffffff;      /* Pure white on dark */
  
  /* UI Elements - Dark Mode */
  --color-border: #1a1a1a;            /* Very subtle borders */
  --color-footer-bg: #000000;         /* PURE BLACK footer */
  --color-footer-text: #ffffff;       /* Pure white footer text */
  
  /* Primary colors - Keep brand colors unchanged */
  --color-primary: #00a5df;           /* Brand blue */
  --color-primary-dark: #007ec6;      /* Darker brand blue */
  --color-primary-light: #00bfff;     /* Lighter for emphasis */
  
  /* Legacy Variable Support - Dark Mode */
  --header-bg: #000000;
  --header-text: #ffffff;
  --hero-bg: #000000;
  --hero-text: #ffffff;
  --card-bg: #0a0a0a;
  --card-border: #1a1a1a;
  --text-primary: #ffffff;
  --text-secondary: #d2d2d2;
  
  /* Button Colors - Dark Mode (inherit from light mode but ensure visibility) */
  --btn-primary-bg: #00a5df;
  --btn-primary-hover: #007ec6;
  --btn-light-bg: #ffffff;
  --btn-light-text: #000000;
}

/* ====================================
   Reduced Motion Support
   Requirement: 8.5
   ==================================== */

@media (prefers-reduced-motion: reduce) {
  :root {
    --theme-transition: none;
    --theme-transition-fast: none;
  }
  
  /* Disable all transitions and animations for users who prefer reduced motion */
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ====================================
   Theme Toggle Accessibility
   Requirements: 5.5, 8.5
   ==================================== */

/* Focus styles for theme toggle button */
#theme-toggle {
  position: relative;
  transition: var(--theme-transition);
}

#theme-toggle:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--focus-shadow-color);
}

#theme-toggle:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

#theme-toggle:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--focus-shadow-color);
}

/* Hover state for theme toggle */
#theme-toggle:hover {
  background-color: var(--color-primary);
  color: #ffffff;
  border-color: var(--color-primary);
  transform: scale(1.05);
}

/* Active state for theme toggle */
#theme-toggle:active {
  transform: scale(0.95);
}

/* Icon transition */
#theme-icon {
  transition: var(--theme-transition);
  display: inline-block;
}

/* Ensure keyboard users can see focus on all interactive elements */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--focus-shadow-color);
}

/* Remove default focus outline for mouse users */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
input:focus:not(:focus-visible),
select:focus:not(:focus-visible),
textarea:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

/* Typography System */
h1, h2, h3, h4, h5, h6 {
  color: var(--color-text);
  font-weight: 700;
  line-height: 1.3;
  transition: var(--theme-transition);
}

p {
  color: var(--color-text);
  font-weight: 400;
  line-height: 1.6;
  transition: var(--theme-transition);
}

.text-secondary {
  color: var(--color-text-secondary) !important;
  transition: var(--theme-transition);
}

/* Header Styles */
.main-header {
  background-color: var(--header-bg);
  color: var(--header-text);
  transition: var(--theme-transition);
}

.main-header .navbar-brand,
.main-header .nav-link {
  color: var(--header-text);
  transition: var(--theme-transition);
}

/* Hero Section */
.hero {
  background-color: var(--hero-bg);
  color: var(--hero-text);
  transition: var(--theme-transition);
}

/* Button Styles */
.btn-primary {
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  border-color: var(--btn-primary-bg);
  transition: var(--theme-transition);
}

.btn-primary:hover {
  background-color: var(--btn-primary-hover);
  border-color: var(--btn-primary-hover);
}

.btn-secondary {
  background-color: var(--btn-secondary-bg);
  color: var(--btn-secondary-text);
  border-color: var(--btn-secondary-bg);
  transition: var(--theme-transition);
}

.btn-secondary:hover {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

/* Card Styles */
.card {
  background-color: var(--color-card-bg);
  border-color: var(--color-border);
  transition: var(--theme-transition);
}

/* Section Alternation */
.section-light {
  background-color: var(--color-bg-section);
  transition: var(--theme-transition);
}

.section-beige {
  background-color: var(--color-bg-muted);
  transition: var(--theme-transition);
}

.section-dark {
  background-color: var(--color-footer-bg);
  color: var(--color-text-on-dark);
  transition: var(--theme-transition);
}

.section-dark h1, 
.section-dark h2, 
.section-dark h3, 
.section-dark h4, 
.section-dark h5, 
.section-dark h6,
.section-dark p {
  color: var(--color-text-on-dark);
  transition: var(--theme-transition);
}

/* Form Elements */
.form-control {
  background-color: var(--color-card-bg);
  border-color: var(--color-border);
  color: var(--color-text);
  transition: var(--theme-transition);
}

.form-control:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 0.25rem var(--focus-shadow-color);
}

/* Footer */
.site-footer {
  background-color: var(--color-footer-bg);
  color: var(--color-footer-text);
  transition: var(--theme-transition);
}

.site-footer h1, 
.site-footer h2, 
.site-footer h3, 
.site-footer h4, 
.site-footer h5, 
.site-footer h6,
.site-footer p {
  color: var(--color-footer-text);
  transition: var(--theme-transition);
}


/* ====================================
   Footer Links Visibility Control
   ==================================== */

/* Hide specific footer links temporarily */
.footer-links li:has(a[href*="FAQ"]),
.footer-links li:has(a[href*="Jobs"]),
.footer-links li:has(a[href*="Careers"]),
.footer-bottom-links a[href*="privacy"],
.footer-bottom-links a[href*="Privacy"],
.footer-bottom-links a[href*="terms"],
.footer-bottom-links a[href*="Terms"],
.footer-bottom-links a[href*="sitemap"],
.footer-bottom-links a[href*="Sitemap"] {
    display: none !important;
}

/* ====================================
   PURE BLACK AMOLED Dark Mode - Complete Enforcement
   ==================================== */

/* Force specific sections to pure black - EXCLUDING hero sections with background images */
html[data-theme="dark"] .stats-section,
html[data-theme="dark"] .products-section,
html[data-theme="dark"] .catalog-section,
html[data-theme="dark"] .features-section,
html[data-theme="dark"] .locations-section,
html[data-theme="dark"] .quick-links-section,
html[data-theme="dark"] .vehicles-section,
html[data-theme="dark"] .services-section,
html[data-theme="dark"] .news-section,
html[data-theme="dark"] .partners-section,
html[data-theme="dark"] .featured-videos {
    background-color: #000000 !important;
    background-image: none !important;
    color: #ffffff !important;
}

/* Keep hero sections with their background images in dark mode */
html[data-theme="dark"] .hero-f1e,
html[data-theme="dark"] .hero-f3e,
html[data-theme="dark"] .hero-h9e,
html[data-theme="dark"] .cta-section-f1e,
html[data-theme="dark"] .cta-section-f3e,
html[data-theme="dark"] .cta-section-h9e {
    /* Keep original background images - don't override */
    color: #ffffff !important;
}

/* Header & Navigation */
html[data-theme="dark"] .top-bar {
    background-color: #0a0a0a !important;
    border-bottom-color: #1a1a1a !important;
}

html[data-theme="dark"] .main-header,
html[data-theme="dark"] .navbar {
    background-color: #000000 !important;
}

html[data-theme="dark"] .dropdown-menu {
    background-color: #0a0a0a !important;
    border-color: #1a1a1a !important;
}

html[data-theme="dark"] .dropdown-item {
    background-color: #0a0a0a !important;
}

html[data-theme="dark"] .dropdown-item:hover {
    background-color: #1a1a1a !important;
}

/* Stats & Feature Cards */
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .feature-box {
    background: linear-gradient(145deg, #0d0d0d, #080808) !important;
    background-image: none !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), 
                0 1px 3px rgba(255, 255, 255, 0.05) !important;
}

html[data-theme="dark"] .stat-number,
html[data-theme="dark"] .feature-title {
    color: #ffffff !important;
}

html[data-theme="dark"] .stat-label,
html[data-theme="dark"] .feature-text {
    color: #d2d2d2 !important;
}

/* Catalog & Location Cards */
html[data-theme="dark"] .catalog-card,
html[data-theme="dark"] .location-card {
    background: linear-gradient(145deg, #0d0d0d, #080808) !important;
    background-image: none !important;
    border: none !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5), 
                0 2px 4px rgba(255, 255, 255, 0.06) !important;
}

html[data-theme="dark"] .catalog-title,
html[data-theme="dark"] .location-name {
    color: #ffffff !important;
}

html[data-theme="dark"] .catalog-description,
html[data-theme="dark"] .location-address,
html[data-theme="dark"] .location-features li {
    color: #d2d2d2 !important;
}

/* Map Placeholder */
html[data-theme="dark"] .map-placeholder {
    background: #0a0a0a !important;
    background-image: none !important;
}

html[data-theme="dark"] .map-placeholder h3 {
    color: #ffffff !important;
}

html[data-theme="dark"] .map-placeholder p {
    color: #d2d2d2 !important;
}

/* Partners Section */
html[data-theme="dark"] .partners-section {
    background-color: #000000 !important;
}

html[data-theme="dark"] .partner-logo,
html[data-theme="dark"] .brand-card {
    background-color: #0a0a0a !important;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.8) !important;
}

/* Video Section */
html[data-theme="dark"] .featured-videos,
html[data-theme="dark"] .full-width-video {
    background-color: #000000 !important;
}

html[data-theme="dark"] .video-info-side {
    background: linear-gradient(135deg, #0a0a0a 0%, #000000 100%) !important;
}

html[data-theme="dark"] .video-title {
    color: #ffffff !important;
}

html[data-theme="dark"] .video-description {
    color: #d2d2d2 !important;
}

/* Bootstrap Overrides */
html[data-theme="dark"] .bg-light {
    background: linear-gradient(145deg, #0d0d0d, #080808) !important;
    border: none !important;
}

html[data-theme="dark"] .bg-white {
    background-color: #000000 !important;
}

html[data-theme="dark"] .text-dark {
    color: #ffffff !important;
}

html[data-theme="dark"] .modal-content {
    background: linear-gradient(145deg, #0d0d0d, #080808) !important;
    border: none !important;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.8), 
                0 4px 12px rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] .list-group-item {
    background: linear-gradient(145deg, #0d0d0d, #080808) !important;
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03) !important;
}

html[data-theme="dark"] .list-group-item:last-child {
    border-bottom: none !important;
}

/* Tables */
html[data-theme="dark"] .table {
    color: #ffffff !important;
}

html[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) {
    background-color: #0a0a0a !important;
}

/* Accordion */
html[data-theme="dark"] .accordion-item {
    background: linear-gradient(145deg, #0d0d0d, #080808) !important;
    border: none !important;
    margin-bottom: 8px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), 
                0 1px 2px rgba(255, 255, 255, 0.03) !important;
}

html[data-theme="dark"] .accordion-button {
    background: linear-gradient(145deg, #0d0d0d, #080808) !important;
    color: #ffffff !important;
    border: none !important;
}

html[data-theme="dark"] .accordion-button:not(.collapsed) {
    background: linear-gradient(145deg, #121212, #0a0a0a) !important;
    box-shadow: inset 0 2px 4px rgba(0, 165, 223, 0.2) !important;
}

html[data-theme="dark"] .accordion-body {
    background: linear-gradient(145deg, #080808, #050505) !important;
    border: none !important;
}

/* Tabs */
html[data-theme="dark"] .nav-tabs .nav-link {
    background-color: #0a0a0a !important;
    border-color: #1a1a1a !important;
}

html[data-theme="dark"] .nav-tabs .nav-link.active {
    background-color: #000000 !important;
}

/* Logo Inversion */
html[data-theme="dark"] .logo,
html[data-theme="dark"] .navbar-brand img,
html[data-theme="dark"] .footer-logo {
    filter: brightness(0) invert(1) !important;
}

/* Partner Logos - Invert dark logos to white */
html[data-theme="dark"] .partner-logo img,
html[data-theme="dark"] .brand-logo,
html[data-theme="dark"] .brand-card img,
html[data-theme="dark"] .agencies img {
    filter: brightness(0) invert(1) !important;
}

/* Why Choose Us Section - Dark Image */
html[data-theme="dark"] .why-us-section[style*="Social media cover"] {
    background-image: url('../images/Social media coverdark.jpg') !important;
}

/* Social Links */
html[data-theme="dark"] .social-links a {
    background-color: #0a0a0a !important;
}

html[data-theme="dark"] .footer-social a {
    background-color: #1a1a1a !important;
}

/* Carousel */
html[data-theme="dark"] .carousel-indicators [data-bs-target] {
    background-color: rgba(255, 255, 255, 0.5) !important;
}

html[data-theme="dark"] .carousel-indicators .active {
    background-color: #00a5df !important;
}

/* Button Fixes for Dark Mode */
html[data-theme="dark"] .btn-primary {
    background: linear-gradient(135deg, #00a5df 0%, #007ec6 100%) !important;
    color: #ffffff !important;
    border-color: transparent !important;
}

html[data-theme="dark"] .btn-outline-primary {
    background-color: transparent !important;
    color: #00a5df !important;
    border-color: #00a5df !important;
}

html[data-theme="dark"] .btn-outline-primary:hover {
    background-color: #00a5df !important;
    color: #ffffff !important;
    border-color: #00a5df !important;
}

html[data-theme="dark"] .btn-light {
    background-color: #ffffff !important;
    color: #000000 !important;
    border-color: #ffffff !important;
}

html[data-theme="dark"] .btn-light:hover {
    background-color: #e0e0e0 !important;
    color: #000000 !important;
}

html[data-theme="dark"] .btn-light * {
    color: #000000 !important;
}

html[data-theme="dark"] .btn-outline-light {
    background-color: transparent !important;
    color: #ffffff !important;
    border-color: #ffffff !important;
}

html[data-theme="dark"] .btn-outline-light:hover {
    background-color: #ffffff !important;
    color: #000000 !important;
}

html[data-theme="dark"] .btn-outline-light:hover * {
    color: #000000 !important;
}

html[data-theme="dark"] .btn-secondary {
    background-color: #6c757d !important;
    color: #ffffff !important;
    border-color: #6c757d !important;
}

html[data-theme="dark"] .btn-success {
    background: linear-gradient(135deg, #1e8035 0%, #1aa179 100%) !important;
    color: #ffffff !important;
    border-color: transparent !important;
}

html[data-theme="dark"] .btn-white {
    background-color: #ffffff !important;
    color: #000000 !important;
    border-color: #ffffff !important;
}

html[data-theme="dark"] .btn-white * {
    color: #000000 !important;
}

html[data-theme="dark"] .btn-white:hover {
    background-color: #00a5df !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .btn-white:hover * {
    color: #ffffff !important;
}

/* Language Switcher Buttons */
html[data-theme="dark"] .language-switcher .btn-primary {
    background: linear-gradient(135deg, #00a5df 0%, #007ec6 100%) !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .language-switcher .btn-outline-primary {
    background-color: transparent !important;
    color: #00a5df !important;
    border-color: #00a5df !important;
}

html[data-theme="dark"] .language-switcher .btn-outline-primary:hover {
    background-color: #00a5df !important;
    color: #ffffff !important;
}

/* Theme Toggle Button */
html[data-theme="dark"] #theme-toggle {
    background-color: transparent !important;
    color: #00a5df !important;
    border-color: #00a5df !important;
}

html[data-theme="dark"] #theme-toggle:hover {
    background-color: #00a5df !important;
    color: #ffffff !important;
}

/* Catch-all for inline styles */
html[data-theme="dark"] *[style*="background: white"],
html[data-theme="dark"] *[style*="background: #fff"],
html[data-theme="dark"] *[style*="background-color: white"],
html[data-theme="dark"] *[style*="background-color: #fff"] {
    background-color: #000000 !important;
}

html[data-theme="dark"] *[style*="background: #f8f9fa"],
html[data-theme="dark"] *[style*="background-color: #f8f9fa"] {
    background-color: #0a0a0a !important;
}

html[data-theme="dark"] *[style*="color: #1e3a5f"],
html[data-theme="dark"] *[style*="color: #6c757d"],
html[data-theme="dark"] *[style*="color: white"],
html[data-theme="dark"] *[style*="color: #fff"],
html[data-theme="dark"] *[style*="color: #ffffff"] {
    color: #ffffff !important;
}

/* Force all text elements to white in dark mode */
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6,
html[data-theme="dark"] p,
html[data-theme="dark"] span:not(.navbar-toggler-icon),
html[data-theme="dark"] div:not(.dropdown-menu):not(.modal):not(.navbar-collapse),
html[data-theme="dark"] a,
html[data-theme="dark"] li,
html[data-theme="dark"] td,
html[data-theme="dark"] th,
html[data-theme="dark"] label,
html[data-theme="dark"] .lead,
html[data-theme="dark"] .display-1,
html[data-theme="dark"] .display-2,
html[data-theme="dark"] .display-3,
html[data-theme="dark"] .display-4,
html[data-theme="dark"] .display-5,
html[data-theme="dark"] .display-6 {
    color: #ffffff !important;
}

/* Ensure text-muted is visible in dark mode */
html[data-theme="dark"] .text-muted {
    color: #d2d2d2 !important;
}

/* Ensure all paragraphs and headings with inline styles are white */
html[data-theme="dark"] section h1,
html[data-theme="dark"] section h2,
html[data-theme="dark"] section h3,
html[data-theme="dark"] section h4,
html[data-theme="dark"] section h5,
html[data-theme="dark"] section h6,
html[data-theme="dark"] section p,
html[data-theme="dark"] section span,
html[data-theme="dark"] section .lead {
    color: #ffffff !important;
}

/* Why Choose Us Section - Position Content to Far Left in Dark Mode */
html[data-theme="dark"] .why-us-section .row {
    justify-content: flex-start !important;
}

html[data-theme="dark"] .why-us-section .col-lg-6 {
    margin-left: 0 !important;
    margin-right: auto !important;
}

/* Top Bar Size Adjustment */
.top-bar {
    padding: 0 !important;
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    font-size: 16px !important;
    line-height: 30px !important;
}

.top-bar .container {
    height: 30px !important;
    display: flex !important;
    align-items: center !important;
    max-width: 100% !important;
}

.top-bar .py-2 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    width: 100% !important;
}

.top-bar .contact-info,
.top-bar .social-links {
    font-size: 16px !important;
}

.top-bar .social-links a {
    width: 30px !important;
    height: 30px !important;
    font-size: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.top-bar i {
    font-size: 14px !important;
}

/* Top Bar - Move Social Links to Far Left */
.top-bar .d-flex {
    flex-direction: row-reverse !important;
    justify-content: space-between !important;
}

.top-bar .social-links {
    display: flex !important;
    gap: 5px !important;
}

.top-bar .top-links {
    white-space: nowrap !important;
}

/* Fix Dark Mode - Body and HTML Background */
html[data-theme="dark"],
html[data-theme="dark"] body {
    background-color: #000000 !important;
}

/* Removed - duplicate rule */

/* Footer Bottom - Fix Background Color in Dark Mode */
html[data-theme="dark"] .footer-bottom {
    background-color: #000000 !important;
}

html[data-theme="dark"] .footer-bottom .copyright {
    color: #ffffff !important;
}


/* ====================================
   Sticky Elements Fix
   ==================================== */

/* Ensure sticky positioning works in both light and dark modes */
.sticky-top {
    position: -webkit-sticky !important;
    position: sticky !important;
    will-change: transform;
}

/* Ensure parent containers don't prevent sticky */
aside {
    position: relative;
}

main .row {
    position: relative;
}

/* Ensure sticky cards maintain proper styling in dark mode */
html[data-theme="dark"] .sticky-top.card {
    background: linear-gradient(145deg, #0d0d0d, #080808) !important;
    border: none !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.7), 
                0 2px 8px rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] .sticky-top .card-title {
    color: #ffffff !important;
}

html[data-theme="dark"] .sticky-top .text-muted {
    color: #d2d2d2 !important;
}

html[data-theme="dark"] .sticky-top .btn {
    color: inherit;
}

html[data-theme="dark"] .sticky-top .card-header {
    border: none !important;
    background: linear-gradient(145deg, #121212, #0a0a0a) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}


/* ====================================
   Enhanced Dark Mode - Subtle Depth Without Borders
   ==================================== */

/* Add subtle shadows and background variations to cards */
html[data-theme="dark"] .card {
    border: none !important;
    background: linear-gradient(145deg, #0d0d0d, #080808) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), 
                0 1px 3px rgba(255, 255, 255, 0.05) !important;
}

html[data-theme="dark"] .card:hover {
    background: linear-gradient(145deg, #121212, #0a0a0a) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6), 
                0 2px 6px rgba(255, 255, 255, 0.08) !important;
    transform: translateY(-2px);
}

/* Service cards */
html[data-theme="dark"] .service-card,
html[data-theme="dark"] .service-detail-card {
    background: linear-gradient(145deg, #0d0d0d, #080808) !important;
    border: none !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5), 
                0 2px 4px rgba(255, 255, 255, 0.06) !important;
}

html[data-theme="dark"] .service-card:hover,
html[data-theme="dark"] .service-detail-card:hover {
    background: linear-gradient(145deg, #121212, #0a0a0a) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7), 
                0 3px 8px rgba(255, 255, 255, 0.1) !important;
}

/* News cards */
html[data-theme="dark"] .news-card {
    background: linear-gradient(145deg, #0d0d0d, #080808) !important;
    border: none !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5), 
                0 2px 4px rgba(255, 255, 255, 0.06) !important;
}

html[data-theme="dark"] .news-card:hover {
    background: linear-gradient(145deg, #121212, #0a0a0a) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7), 
                0 3px 8px rgba(255, 255, 255, 0.1) !important;
}

/* Section separators - subtle gradient line */
html[data-theme="dark"] section {
    position: relative;
    padding-bottom: 40px;
}

html[data-theme="dark"] section::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 5%;
    right: 5%;
    height: 1px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(255, 255, 255, 0.1) 50%, 
        transparent 100%);
}

html[data-theme="dark"] section:last-child::after {
    display: none;
}

/* Header shadow */
html[data-theme="dark"] .main-header {
    border: none !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.8), 
                0 1px 3px rgba(255, 255, 255, 0.05) !important;
}

/* Top bar shadow */
html[data-theme="dark"] .top-bar {
    border: none !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important;
}

/* Dropdown menu */
html[data-theme="dark"] .dropdown-menu {
    border: none !important;
    background: linear-gradient(145deg, #0d0d0d, #080808) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.8), 
                0 2px 8px rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] .dropdown-item {
    border: none !important;
    position: relative;
}

html[data-theme="dark"] .dropdown-item::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(255, 255, 255, 0.05) 50%, 
        transparent 100%);
}

html[data-theme="dark"] .dropdown-item:last-child::after {
    display: none;
}

/* Alert boxes - with subtle glow */
html[data-theme="dark"] .alert {
    border: none !important;
    background: linear-gradient(145deg, #0d0d0d, #080808) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), 
                inset 0 1px 2px rgba(255, 255, 255, 0.05) !important;
}

html[data-theme="dark"] .alert-info {
    background: linear-gradient(145deg, #0a1520, #050a10) !important;
    box-shadow: 0 4px 12px rgba(0, 165, 223, 0.2), 
                inset 0 1px 2px rgba(0, 165, 223, 0.1) !important;
}

html[data-theme="dark"] .alert-danger {
    background: linear-gradient(145deg, #200a0a, #100505) !important;
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.2), 
                inset 0 1px 2px rgba(220, 53, 69, 0.1) !important;
}

html[data-theme="dark"] .alert-warning {
    background: linear-gradient(145deg, #201a0a, #100d05) !important;
    box-shadow: 0 4px 12px rgba(255, 193, 7, 0.2), 
                inset 0 1px 2px rgba(255, 193, 7, 0.1) !important;
}

html[data-theme="dark"] .alert-success {
    background: linear-gradient(145deg, #0a200a, #051005) !important;
    box-shadow: 0 4px 12px rgba(30, 128, 53, 0.2), 
                inset 0 1px 2px rgba(30, 128, 53, 0.1) !important;
}

/* Progress bars */
html[data-theme="dark"] .progress {
    background: linear-gradient(145deg, #0d0d0d, #080808) !important;
    border: none !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5) !important;
}

/* Badges */
html[data-theme="dark"] .badge {
    border: none !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4), 
                0 1px 2px rgba(255, 255, 255, 0.05) !important;
}

/* Timeline items */
html[data-theme="dark"] .warranty-timeline-item .card,
html[data-theme="dark"] .warranty-highlight-card {
    border: none !important;
    background: linear-gradient(145deg, #0d0d0d, #080808) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), 
                0 1px 3px rgba(255, 255, 255, 0.05) !important;
}

html[data-theme="dark"] .warranty-timeline-item .card:hover,
html[data-theme="dark"] .warranty-highlight-card:hover {
    background: linear-gradient(145deg, #121212, #0a0a0a) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6), 
                0 2px 6px rgba(255, 255, 255, 0.08) !important;
}

/* Form controls */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select {
    background: linear-gradient(145deg, #0d0d0d, #080808) !important;
    border: none !important;
    color: #ffffff !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5), 
                0 1px 2px rgba(255, 255, 255, 0.03) !important;
}

html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus {
    background: linear-gradient(145deg, #121212, #0a0a0a) !important;
    box-shadow: 0 0 0 3px rgba(0, 165, 223, 0.3), 
                inset 0 2px 4px rgba(0, 0, 0, 0.5) !important;
}

/* Table - subtle row separation */
html[data-theme="dark"] .table {
    border: none !important;
}

html[data-theme="dark"] .table td,
html[data-theme="dark"] .table th {
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03) !important;
}

html[data-theme="dark"] .table thead th {
    background: linear-gradient(145deg, #0d0d0d, #080808) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

/* Partner logos */
html[data-theme="dark"] .partner-logo,
html[data-theme="dark"] .brand-card {
    border: none !important;
    background: linear-gradient(145deg, #0d0d0d, #080808) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5), 
                0 2px 4px rgba(255, 255, 255, 0.05) !important;
}

/* Quick link cards */
html[data-theme="dark"] .quick-link-card {
    border: none !important;
    background: linear-gradient(145deg, #0d0d0d, #080808) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), 
                0 1px 3px rgba(255, 255, 255, 0.05) !important;
}

html[data-theme="dark"] .quick-link-card:hover {
    background: linear-gradient(145deg, #121212, #0a0a0a) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6), 
                0 2px 6px rgba(255, 255, 255, 0.08) !important;
}

/* Why us items */
html[data-theme="dark"] .why-us-item {
    padding: 15px;
    border-radius: 8px;
    border: none !important;
    background: linear-gradient(145deg, #0d0d0d, #080808) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), 
                0 1px 2px rgba(255, 255, 255, 0.03) !important;
}

/* Footer sections - subtle gradient separator */
html[data-theme="dark"] .footer-top {
    border: none !important;
    position: relative;
}

html[data-theme="dark"] .footer-top::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 5%;
    right: 5%;
    height: 1px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(255, 255, 255, 0.1) 50%, 
        transparent 100%);
}

html[data-theme="dark"] .footer-bottom {
    border: none !important;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.5) !important;
}


/* ====================================
   White Buttons Text Color Fix
   ==================================== */

/* Ensure all white/light buttons have black text in dark mode */
html[data-theme="dark"] .btn-light,
html[data-theme="dark"] .btn-white,
html[data-theme="dark"] a.btn-light,
html[data-theme="dark"] a.btn-white,
html[data-theme="dark"] button.btn-light,
html[data-theme="dark"] button.btn-white {
    color: #000000 !important;
}

html[data-theme="dark"] .btn-light i,
html[data-theme="dark"] .btn-white i,
html[data-theme="dark"] .btn-light span,
html[data-theme="dark"] .btn-white span {
    color: #000000 !important;
}

/* When hovering over outline-light buttons that turn white */
html[data-theme="dark"] .btn-outline-light:hover,
html[data-theme="dark"] a.btn-outline-light:hover,
html[data-theme="dark"] button.btn-outline-light:hover {
    color: #000000 !important;
}

html[data-theme="dark"] .btn-outline-light:hover i,
html[data-theme="dark"] .btn-outline-light:hover span {
    color: #000000 !important;
}

/* Specific fix for CTA sections with white buttons */
html[data-theme="dark"] .cta-section .btn-light,
html[data-theme="dark"] .cta-section .btn-white,
html[data-theme="dark"] .hero-section .btn-light,
html[data-theme="dark"] .hero-section .btn-white {
    background-color: #ffffff !important;
    color: #000000 !important;
}

html[data-theme="dark"] .cta-section .btn-light *,
html[data-theme="dark"] .cta-section .btn-white *,
html[data-theme="dark"] .hero-section .btn-light *,
html[data-theme="dark"] .hero-section .btn-white * {
    color: #000000 !important;
}


/* ====================================
   Fix Horizontal Scroll Issue
   ==================================== */

/* Fix for gradient lines that might overflow */
html[data-theme="dark"] section::after {
    left: 5%;
    right: 5%;
    width: auto;
    max-width: 90%;
}


/* ====================================
   CTA Section Buttons
   ==================================== */

/* Primary CTA button (Blue) */
.cta-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 35px;
    background: linear-gradient(135deg, #00a5df 0%, #007ec6 100%);
    color: #ffffff;
    border: none;
    border-radius: 50px;
    font-size: 18px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 165, 223, 0.3);
}

.cta-btn-primary:hover {
    background: linear-gradient(135deg, #007ec6 0%, #006ba3 100%);
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 165, 223, 0.4);
    color: #ffffff;
}

/* Secondary CTA button (White) */
.cta-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 35px;
    background: #ffffff;
    color: #000000;
    border: 2px solid #ffffff;
    border-radius: 50px;
    font-size: 18px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.2);
}

.cta-btn-secondary:hover {
    background: transparent;
    color: #ffffff;
    border-color: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(255, 255, 255, 0.3);
}

/* Ensure icons in CTA buttons have correct color */
.cta-btn-secondary i {
    color: #000000;
}

.cta-btn-secondary:hover i {
    color: #ffffff;
}

.cta-btn-primary i {
    color: #ffffff;
}

/* Dark mode adjustments for CTA buttons */
html[data-theme="dark"] .cta-btn-secondary {
    background: #ffffff;
    color: #000000;
    border-color: #ffffff;
}

html[data-theme="dark"] .cta-btn-secondary i {
    color: #000000;
}

html[data-theme="dark"] .cta-btn-secondary:hover {
    background: transparent;
    color: #ffffff;
    border-color: #ffffff;
}

html[data-theme="dark"] .cta-btn-secondary:hover i {
    color: #ffffff;
}


/* Removed - was causing dropdown issues */


/* ====================================
   Truck Pages Dark Mode - F1E, F3E, H9E-H8E
   ==================================== */

/* Hero sections for truck pages - Keep background images visible in dark mode */
/* No changes needed - hero backgrounds should remain as defined in HTML */

/* Highlights sections - Dark mode */
html[data-theme="dark"] .highlights-section {
    background: #000000 !important;
    background-image: none !important;
}

/* Feature sections */
html[data-theme="dark"] .feature-section {
    background: #000000 !important;
}

html[data-theme="dark"] .feature-section:nth-child(even) {
    background: #0a0a0a !important;
}

/* Highlight cards */
html[data-theme="dark"] .highlight-card {
    background: linear-gradient(145deg, #0d0d0d, #080808) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
}

html[data-theme="dark"] .highlight-card:hover {
    box-shadow: 0 8px 24px rgba(0, 165, 223, 0.3) !important;
}

html[data-theme="dark"] .highlight-card h4,
html[data-theme="dark"] .highlight-card h5 {
    color: #ffffff !important;
}

html[data-theme="dark"] .highlight-card p {
    color: #d2d2d2 !important;
}

/* CTA sections for truck pages - Keep background images visible in dark mode */
/* No changes needed - CTA backgrounds should remain as defined in HTML */

/* Gallery images */
html[data-theme="dark"] .gallery-grid img {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.8) !important;
}

/* Section images */
html[data-theme="dark"] .section-image {
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8) !important;
}

/* Ensure all text is visible */
html[data-theme="dark"] .feature-section h1,
html[data-theme="dark"] .feature-section h2,
html[data-theme="dark"] .feature-section h3,
html[data-theme="dark"] .feature-section h4,
html[data-theme="dark"] .feature-section h5,
html[data-theme="dark"] .feature-section h6 {
    color: #ffffff !important;
}

html[data-theme="dark"] .feature-section p,
html[data-theme="dark"] .feature-section li {
    color: #d2d2d2 !important;
}

/* Hero text should stay white */
html[data-theme="dark"] .hero-f1e h1,
html[data-theme="dark"] .hero-f1e h2,
html[data-theme="dark"] .hero-f1e p,
html[data-theme="dark"] .hero-f3e h1,
html[data-theme="dark"] .hero-f3e h2,
html[data-theme="dark"] .hero-f3e p,
html[data-theme="dark"] .hero-h9e h1,
html[data-theme="dark"] .hero-h9e h2,
html[data-theme="dark"] .hero-h9e p {
    color: #ffffff !important;
}

/* Specs table */
html[data-theme="dark"] .table {
    color: #ffffff !important;
    background: #000000 !important;
}

html[data-theme="dark"] .table th {
    background: #0a0a0a !important;
    color: #ffffff !important;
    border-color: #2a2a2a !important;
}

html[data-theme="dark"] .table td {
    background: #000000 !important;
    color: #d2d2d2 !important;
    border-color: #2a2a2a !important;
}

html[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) {
    background: #0a0a0a !important;
}

/* List groups */
html[data-theme="dark"] .list-group-item {
    background: linear-gradient(145deg, #0d0d0d, #080808) !important;
    color: #ffffff !important;
    border-color: #2a2a2a !important;
}

/* Badges */
html[data-theme="dark"] .badge {
    background: #00a5df !important;
    color: #ffffff !important;
}


/* ====================================
   Truck Pages - Additional Dark Mode Fixes
   ==================================== */

/* Fix inline styles for feature sections */
html[data-theme="dark"] .feature-section:nth-child(even) {
    background: #0a0a0a !important;
}

/* Fix bg-light sections */
html[data-theme="dark"] .bg-light {
    background: #000000 !important;
}

/* Fix specs cards */
html[data-theme="dark"] .specs-card {
    background: linear-gradient(145deg, #0d0d0d, #080808) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
}

html[data-theme="dark"] .specs-card h4,
html[data-theme="dark"] .specs-card h5 {
    color: #ffffff !important;
}

html[data-theme="dark"] .specs-card p,
html[data-theme="dark"] .specs-card li {
    color: #d2d2d2 !important;
}

/* Fix gallery sections */
html[data-theme="dark"] .gallery-grid {
    background: transparent !important;
}

/* Fix any remaining white backgrounds in truck pages */
html[data-theme="dark"] section[style*="background: white"],
html[data-theme="dark"] section[style*="background:#fff"],
html[data-theme="dark"] div[style*="background: white"],
html[data-theme="dark"] div[style*="background:#fff"] {
    background: #000000 !important;
}


/* Fix specs section with inline white gradient */
html[data-theme="dark"] section#specs,
html[data-theme="dark"] section[style*="rgba(255,255,255"] {
    background: #000000 !important;
    background-image: none !important;
}

html[data-theme="dark"] section#specs h2,
html[data-theme="dark"] section#specs h3,
html[data-theme="dark"] section#specs p {
    color: #ffffff !important;
}

html[data-theme="dark"] section#specs .section-subtitle {
    color: #d2d2d2 !important;
}