/* ============================
   Dark Mode Overrides
   ============================ */

:root {
    --main-bg: #202020;
    --secondary-bg: #303030;
    --card-bg: #303030;
    --text-color: #f5f5f5;
    --text-muted: #9e9e9e;
    --border-color: #404040;
}

/* Body & Text */
body {
    background-color: var(--main-bg) !important;
    color: var(--text-color) !important;
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: #fff !important;
}
p, span, li, a, label {
    color: var(--text-color) !important;
}
.text-primary {
    color: var(--main-color) !important;
}
.text-muted {
    color: #9e9e9e !important;
}
.text-dark {
    color: var(--text-color) !important;
}
.form-select {
    background-color: #fff !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
}
.border {
    border: 1px solid #505050 !important;
}
.bg-light {
    background-color: #404040 !important;
}

/* Navbar */
.header_navbar,
.sticky {
    background-color: var(--secondary-bg) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

.navbar-nav .nav-item a {
    color: var(--text-color) !important;
}

.navbar-toggler .toggler-icon {
    background-color: var(--text-color) !important;
}
.dropdown-nav {
    background: #404040 !important;
}
.header-btn .main-btn.account-btn::after {
    border-bottom: 2px solid #ffffff !important;
    border-right: 2px solid #ffffff !important;
}
.view-color-switcher .color-switcher-1 {
    background-color: #f5f5f5 !important;
    border-color: #f5f5f5 !important;
}
.view-color-switcher .view-switcher-wrapper .active {
    color: #fff !important;
    background-color: var(--main-color) !important;
}
.view-color-switcher .view-switcher-2 {
    background-color: var(--secondary-bg) !important;
}
.infobar-container {
    background-color: #404040 !important;
}
.product-details-description {
    border: 1px solid #404040 !important;
}
.product-details-description-title {
    background-color: #303030 !important;
}
.product-details-description-title h6 {
    color: #fff !important;
}
.card {
    background-color: #303030 !important;
}

/* Cards & Sections */
.box-style,
.single-product,
.service-area .single-service,
.pricing-area .single-pricing,
.testimonial-area .testimonial-wrapper .single-testimonial,
.count-up-wrapper,
.category-list-area .category-list-wrapper .category-list-item a,
.category-area .category-top,
.category-area .category-wrapper .sidebar-wrapper,
.product-card,
.message-wrapper,
.chat-list-wrapper {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
}
.advanced-search {
    border: 2px solid var(--border-color) !important;
}
.product-card .bid-progress .progress {
    background-color: var(--main-bg) !important;
}
.top-navbar-right {
    color: #f5f5f5 !important;
    background-color: var(--card-bg) !important;
}
.view-color-switcher {
    border: 1px solid var(--border-color) !important;
}
.product-details-area .product-details-wrapper .info-wrapper {
    background: transparent !important;
}

/* Buttons */
.btn,
.main-btn,
.btn-outline-primary {
    color: #f5f5f5 !important;
    background-color: var(--main-color) !important;
    border-color: var(--main-color) !important;
}

.btn:hover,
.main-btn:hover,
.btn-outline-primary:hover {
    background-color: #ff4444 !important;
    border-color: #ff4444 !important;
}

/* Forms */
.form-control,
.form-select,
textarea,
input {
    background-color: var(--secondary-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
}
.input-group-text {
    background-color: var(--secondary-bg) !important;
    border: 1px solid var(--border-color) !important;
}

.form-control::placeholder,
textarea::placeholder,
input::placeholder {
    color: var(--text-muted) !important;
}
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    filter: invert(1) !important;
    cursor: pointer !important;
    opacity: 1 !important;
}

/* Tables */
.table {
    color: var(--text-color) !important;
    background-color: var(--card-bg) !important;
}
.table th, .table td {
    border-color: var(--border-color) !important;
}
.table-light {
    --bs-table-bg: var(--secondary-bg) !important;
    --bs-table-striped-bg: var(--secondary-bg) !important;
    --bs-table-striped-color: #404040 !important;
    --bs-table-active-bg: #404040 !important;
    --bs-table-active-color: #404040 !important;
    --bs-table-hover-bg: #404040 !important;
    --bs-table-hover-color: #404040 !important;
}
tbody, td, tfoot, th, thead, tr {
    border-color: var(--border-color) !important; 
}

/* Dropdowns & Menus */
.category-submenu {
    background-color: var(--main-bg) !important;
}
.category-menu a {
    color: var(--text-color) !important;
    background-color: var(--card-bg) !important;
}
.category-menu a:hover, .category-menu-toggle.active {
    color: #fff !important;
    background-color: var(--main-color) !important;
}
.sub-menu-bar.show {
    background-color: #404040 !important;
}

.pagination {
    background-color: var(--secondary-bg) !important;
    border-radius: 0.375rem;
    padding: 0.25rem 0.5rem;
}
.pagination .page-item .page-link {
    background-color: var(--card-bg) !important;
    color: var(--text-color) !important;
    border: 1px solid var(--border-color) !important;
}
.pagination .page-item .page-link:hover,
.pagination .page-item .page-link:focus {
    background-color: var(--main-bg) !important;
    color: var(--main-color) !important;
    border-color: var(--main-color) !important;
}
.pagination .page-item.active .page-link {
    background-color: var(--main-color) !important;
    color: #f5f5f5 !important;
    border-color: var(--main-color) !important;
}
.pagination .page-item.disabled .page-link {
    color: var(--text-muted) !important;
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}

.footer-area {
    background: #151515 !important;
}
.footer-area .copy-right {
    background: #101010 !important;
}