/* ===================================
   DARK MODE SYSTEM - Complete & Working
   =================================== */

:root {
    /* Light Mode Colors (Default) */
    --bg-primary: #ffffff;
    --bg-secondary: #f5f5f5;
    --bg-tertiary: #e9ecef;
    --text-primary: #252525;
    --text-secondary: #666666;
    --text-tertiary: #999999;
    --border-color: #dee2e6;
    --shadow-light: rgba(0, 0, 0, 0.08);
    --shadow-medium: rgba(0, 0, 0, 0.15);
    --card-bg: #ffffff;
    --input-bg: #ffffff;
    --input-border: #e0e0e0;
    --overlay-bg: rgba(0, 0, 0, 0.75);
}

/* Dark Mode Colors */
[data-theme="dark"] {
    --bg-primary: #0d1117;
    --bg-secondary: #161b22;
    --bg-tertiary: #21262d;
    --text-primary: #e6edf3;
    --text-secondary: #8b949e;
    --text-tertiary: #6e7681;
    --border-color: #30363d;
    --shadow-light: rgba(0, 0, 0, 0.3);
    --shadow-medium: rgba(0, 0, 0, 0.5);
    --card-bg: #161b22;
    --input-bg: #0d1117;
    --input-border: #30363d;
    --overlay-bg: rgba(0, 0, 0, 0.85);
}

/* ===================================
   GLOBAL TRANSITIONS - Smooth & Optimized
   =================================== */
body,
.header,
.navbar,
.main-navigation,
.card,
.car-item,
.blog-item,
.footer-area,
.form-control,
.theme-btn,
.dropdown-menu,
.sidebar-popup,
.nav-link,
.site-heading,
.about-area,
.counter-box,
.category-item,
.brand-item,
.dealer-item,
.testimonial-single {
    transition: background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
                color 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
                border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===================================
   BASE ELEMENTS
   =================================== */
body {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

/* ===================================
   HEADER & NAVIGATION
   =================================== */
.header,
.main-navigation {
    background-color: var(--bg-primary) !important;
    border-color: var(--border-color) !important;
}

/* Header Top Bar - PRESERVED (same in both light and dark mode) */
.header-top {
    background-color: #1a1a1a !important;
    border-bottom: 1px solid #2a2a2a !important;
}

.header-top-contact ul li a,
.header-top-link a,
.header-top-social span,
.header-top-social a {
    color: #d1d1d1 !important;
}

.header-top-contact ul li a:hover,
.header-top-link a:hover,
.header-top-social a:hover {
    color: #ef1d26 !important;
}

/* Language selector - always consistent styling */
.language-selector img {
    border: 1px solid #eee !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.07) !important;
}

.navbar {
    background-color: var(--bg-primary) !important;
}

.navbar-brand img {
    filter: none;
}

[data-theme="dark"] .navbar-brand img {
    filter: brightness(0) invert(1);
}

.nav-link {
    color: var(--text-primary) !important;
}

.nav-link:hover,
.nav-link.active {
    color: #ef1d26 !important;
}

.nav-right-link {
    color: var(--text-primary) !important;
    background-color: transparent !important;
}

.nav-right-link:hover {
    color: #ef1d26 !important;
}

/* Dropdown Menu */
.dropdown-menu {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    box-shadow: 0 5px 15px var(--shadow-medium) !important;
}

.dropdown-item {
    color: var(--text-primary) !important;
    background-color: transparent !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--bg-tertiary) !important;
    color: #ef1d26 !important;
}

.dropdown-submenu .dropdown-menu {
    background-color: var(--card-bg) !important;
}

/* ===================================
   HERO SECTION
   =================================== */
.hero-section {
    background-color: var(--bg-primary);
}

.hero-section-overlay {
    background: var(--overlay-bg) !important;
}

/* ===================================
   FORMS & INPUTS
   =================================== */
.find-car-form,
.form-control,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
input[type="time"],
select,
textarea {
    background-color: var(--input-bg) !important;
    color: var(--text-primary) !important;
    border-color: var(--input-border) !important;
}

.form-control:focus,
input:focus,
select:focus,
textarea:focus {
    background-color: var(--input-bg) !important;
    color: var(--text-primary) !important;
    border-color: #ef1d26 !important;
    box-shadow: 0 0 0 0.2rem rgba(239, 29, 38, 0.25) !important;
}

.form-control::placeholder,
input::placeholder,
textarea::placeholder {
    color: var(--text-tertiary) !important;
}

.form-group label,
.form-label {
    color: var(--text-secondary) !important;
}

/* Form header text in dark mode */
[data-theme="dark"] .find-car-form .form-header h3 {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .find-car-form .form-header p {
    color: var(--text-secondary) !important;
}

/* Form labels in dark mode */
[data-theme="dark"] .find-car-form label {
    color: var(--text-secondary) !important;
}

/* Nice Select */
.nice-select {
    background-color: var(--input-bg) !important;
    border-color: var(--input-border) !important;
    color: var(--text-primary) !important;
}

.nice-select .list {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}

.nice-select .option {
    color: var(--text-primary) !important;
}

.nice-select .option:hover,
.nice-select .option.selected {
    background-color: var(--bg-tertiary) !important;
}

/* ===================================
   CARDS & SECTIONS
   =================================== */
.about-area,
.counter-area,
.car-area,
.car-category,
.car-dealer,
.car-brand,
.testimonial-area,
.blog-area,
.download-area {
    background-color: var(--bg-primary) !important;
}

.about-area.bg,
.car-area.bg,
.testimonial-area.bg,
.bg {
    background-color: var(--bg-secondary) !important;
}

/* Car Cards */
.car-item {
    background-color: var(--card-bg) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 5px 15px var(--shadow-light) !important;
}

.car-content {
    background-color: var(--card-bg) !important;
}

.car-top h4 a,
.car-footer .car-price {
    color: var(--text-primary) !important;
}

.car-list li {
    color: var(--text-secondary) !important;
}

.car-status {
    background-color: #ef1d26 !important;
    color: #ffffff !important;
}

/* Category & Brand Items */
.category-item,
.brand-item {
    background-color: var(--card-bg) !important;
    border: 1px solid var(--border-color) !important;
}

.category-item:hover,
.brand-item:hover {
    background-color: var(--bg-tertiary) !important;
}

.category-item h5,
.brand-item h5 {
    color: var(--text-primary) !important;
}

/* Dealer Cards */
.dealer-item {
    background-color: var(--card-bg) !important;
    border: 1px solid var(--border-color) !important;
}

.dealer-content h4 a,
.dealer-content ul li,
.dealer-content ul li a {
    color: var(--text-primary) !important;
}

.dealer-listing {
    background-color: #ef1d26 !important;
    color: #ffffff !important;
}

/* Blog Cards */
.blog-item {
    background-color: var(--card-bg) !important;
    border: 1px solid var(--border-color) !important;
}

.blog-item-info {
    background-color: var(--card-bg) !important;
}

.blog-title a {
    color: var(--text-primary) !important;
}

.blog-item-meta ul li a {
    color: var(--text-secondary) !important;
}

/* Testimonials */
.testimonial-single {
    background-color: var(--card-bg) !important;
    border: 1px solid var(--border-color) !important;
}

.testimonial-author-info h4 {
    color: var(--text-primary) !important;
}

.testimonial-author-info p,
.testimonial-quote p {
    color: var(--text-secondary) !important;
}

/* ===================================
   COUNTER SECTION
   =================================== */
.counter-area {
    background-color: var(--bg-secondary) !important;
}

.counter-box {
    color: var(--text-primary) !important;
}

.counter-box .title {
    color: var(--text-secondary) !important;
}

/* ===================================
   ABOUT SECTION
   =================================== */
.about-text {
    color: var(--text-secondary) !important;
}

.about-list li {
    color: var(--text-primary) !important;
}

.about-experience {
    background-color: var(--card-bg) !important;
    border: 2px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}

/* ===================================
   SITE HEADING
   =================================== */
.site-title {
    color: var(--text-primary) !important;
}

.site-title-tagline {
    color: var(--text-secondary) !important;
}

.heading-divider {
    background-color: var(--border-color) !important;
}

/* ===================================
   SIDEBAR
   =================================== */
.sidebar-popup .sidebar-content {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}

.sidebar-logo img {
    filter: none;
}

[data-theme="dark"] .sidebar-logo img {
    filter: brightness(0) invert(1);
}

.sidebar-about h4,
.sidebar-contact h4,
.sidebar-social h4 {
    color: var(--text-primary) !important;
}

.sidebar-about p,
.sidebar-contact ul li,
.sidebar-contact ul li a {
    color: var(--text-secondary) !important;
}

/* Sidebar Contact Info - Dark Mode Fix */
[data-theme="dark"] .sidebar-contact ul li {
    color: var(--text-secondary) !important;
}

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

[data-theme="dark"] .sidebar-contact ul li a:hover {
    color: #ef1d26 !important;
}

[data-theme="dark"] .sidebar-contact ul li i {
    color: #ef1d26 !important;
}

/* Sidebar border fix for dark mode */
[data-theme="dark"] .sidebar-popup .sidebar-content {
    border: 1px solid var(--border-color) !important;
}

/* ===================================
   SEARCH AREA
   =================================== */
.search-area {
    background-color: var(--card-bg) !important;
    border: 1px solid var(--border-color) !important;
}

.search-area .form-control {
    background-color: var(--input-bg) !important;
    color: var(--text-primary) !important;
}

/* ===================================
   DOWNLOAD AREA
   =================================== */
.download-wrapper {
    background-color: var(--bg-secondary) !important;
}

.download-content h2,
.download-content p {
    color: var(--text-primary) !important;
}

/* ===================================
   VIDEO AREA
   =================================== */
.video-content {
    background-color: var(--bg-secondary) !important;
}

/* ===================================
   FOOTER
   =================================== */
.footer {
    background-color: #001d23 !important;
    color: #ffffff !important;
}

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

.footer-widget h4,
.footer-widget p,
.footer-widget ul li,
.footer-widget ul li a {
    color: #ffffff !important;
}

.copyright {
    background-color: rgba(0, 0, 0, 0.2) !important;
    color: #ffffff !important;
}

/* ===================================
   PRELOADER
   =================================== */
.preloader {
    background-color: var(--bg-primary) !important;
}

/* ===================================
   BUTTONS
   =================================== */
.theme-btn2 {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
}

.theme-btn2:hover {
    background-color: #ef1d26 !important;
    color: #ffffff !important;
}

/* ===================================
   THEME TOGGLE BUTTON - Header
   =================================== */
.theme-toggle-btn .nav-right-link {
    position: relative;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#theme-icon-header {
    font-size: 18px;
    transition: transform 0.3s ease;
}

.theme-toggle-btn .nav-right-link:hover #theme-icon-header {
    transform: rotate(20deg);
}

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

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

[data-theme="dark"] .bg-white {
    background-color: var(--card-bg) !important;
}

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

/* Choose Area - Keep original styling */
.choose-area {
    background-color: #001d23 !important;
}

.choose-item {
    background-color: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
}

[data-theme="dark"] .choose-item {
    background-color: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}

[data-theme="dark"] .choose-item:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5) !important;
}

[data-theme="dark"] .choose-count {
    opacity: 0.6 !important;
    -webkit-text-stroke: 2px var(--theme-color) !important;
}

[data-theme="dark"] .choose-item-info h3,
[data-theme="dark"] .choose-item-info p {
    color: var(--color-white) !important;
}

[data-theme="dark"] .choose-area .site-title {
    color: var(--color-white) !important;
}