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

/* ===================================
   FLATPICKR CALENDAR - Light Mode (Default)
   =================================== */
.flatpickr-calendar {
    border: 2px solid #e0e0e0 !important;
}

.flatpickr-months {
    border-bottom: 2px solid #ef1d26 !important;
}

.flatpickr-prev-month,
.flatpickr-next-month {
    color: #ef1d26 !important;
    fill: #ef1d26 !important;
}

.flatpickr-prev-month:hover,
.flatpickr-next-month:hover {
    color: #c40017 !important;
    fill: #c40017 !important;
}

.flatpickr-weekday {
    color: #666 !important;
    background: #f5f5f5 !important;
    border-bottom: 2px solid #e0e0e0 !important;
    font-weight: 700 !important;
}

.flatpickr-day.selected {
    background: #ef1d26 !important;
    color: #fff !important;
}

.flatpickr-day.today {
    border-color: #ef1d26 !important;
    color: #ef1d26 !important;
}

.flatpickr-day:hover {
    background: rgba(239,29,38,0.15) !important;
}

.flatpickr-day.inRange {
    background: rgba(239,29,38,0.08) !important;
}

.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background: #ef1d26 !important;
    color: #fff !important;
    border-color: #ef1d26 !important;
}

/* ===================================
   FLATPICKR CALENDAR - Dark Mode
   =================================== */
[data-theme="dark"] .flatpickr-calendar {
    background: #0a0c0e !important;
    border: 2px solid #000000 !important;
    box-shadow: 0 8px 30px rgba(0,0,0,0.8), inset 0 0 0 1px #000000 !important;
}

[data-theme="dark"] .flatpickr-months {
    background: #0f1215 !important;
    border-bottom: 2px solid #ef1d26 !important;
}

[data-theme="dark"] .flatpickr-month {
    color: #f0f0f0 !important;
}

[data-theme="dark"] .flatpickr-prev-month,
[data-theme="dark"] .flatpickr-next-month {
    color: #ef1d26 !important;
    fill: #ef1d26 !important;
}

[data-theme="dark"] .flatpickr-prev-month:hover,
[data-theme="dark"] .flatpickr-next-month:hover {
    color: #ff4a56 !important;
    fill: #ff4a56 !important;
}

[data-theme="dark"] .flatpickr-weekday {
    color: #f0f0f0 !important;
    background: #0f1215 !important;
    border-bottom: 2px solid #ef1d26 !important;
}

[data-theme="dark"] .flatpickr-day {
    color: #c5c5c5 !important;
}

[data-theme="dark"] .flatpickr-day.selected {
    background: #ef1d26 !important;
    color: #fff !important;
    border-color: #ef1d26 !important;
}

[data-theme="dark"] .flatpickr-day.today {
    border-color: #ef1d26 !important;
    color: #ef1d26 !important;
}

[data-theme="dark"] .flatpickr-day:hover {
    background: rgba(239,29,38,0.2) !important;
    color: #f0f0f0 !important;
}

[data-theme="dark"] .flatpickr-day.inRange {
    background: rgba(239,29,38,0.12) !important;
    color: #c5c5c5 !important;
}

[data-theme="dark"] .flatpickr-day.startRange,
[data-theme="dark"] .flatpickr-day.endRange {
    background: #ef1d26 !important;
    color: #fff !important;
    border-color: #ef1d26 !important;
}

[data-theme="dark"] .flatpickr-day.prevMonthDay,
[data-theme="dark"] .flatpickr-day.nextMonthDay {
    color: #3a3f46 !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;
}