/* Dark Mode Styles */

.dark-mode body {
    background-color: #121212 !important;
    color: #e0e0e0 !important;
}

.dark-mode .bg-white {
    background-color: #1e1e1e !important;
}

.dark-mode .bg-light, 
.dark-mode .bg-soft-light {
    background-color: #2a2a2a !important;
}

.dark-mode .text-dark,
.dark-mode .text-secondary,
.dark-mode .text-muted {
    color: #e0e0e0 !important;
}

.dark-mode .card,
.dark-mode .aiz-card,
.dark-mode .card-header,
.dark-mode .card-footer {
    background-color: #1e1e1e !important;
    border-color: #333 !important;
}

.dark-mode .navbar,
.dark-mode .top-banner,
.dark-mode .aiz-topbar {
    background-color: #1a1a1a !important;
    border-color: #333 !important;
}

.dark-mode .border,
.dark-mode .border-right,
.dark-mode .border-left,
.dark-mode .border-top,
.dark-mode .border-bottom,
.dark-mode .border-light {
    border-color: #333 !important;
}

.dark-mode .form-control {
    background-color: #2a2a2a !important;
    border-color: #444 !important;
    color: #e0e0e0 !important;
}

.dark-mode .form-control:focus {
    background-color: #333 !important;
    border-color: var(--primary) !important;
    color: #fff !important;
}

.dark-mode .dropdown-menu {
    background-color: #1e1e1e !important;
    border-color: #333 !important;
}

.dark-mode .dropdown-item {
    color: #e0e0e0 !important;
}

.dark-mode .dropdown-item:hover,
.dark-mode .dropdown-item:focus {
    background-color: #333 !important;
    color: #fff !important;
}

.dark-mode .modal-content {
    background-color: #1e1e1e !important;
    border-color: #333 !important;
}

.dark-mode .modal-header,
.dark-mode .modal-footer {
    border-color: #333 !important;
}

.dark-mode .nav-tabs .nav-link {
    color: #e0e0e0;
}

.dark-mode .nav-tabs .nav-link.active {
    background-color: #1e1e1e !important;
    border-color: #333 #333 #1e1e1e !important;
    color: var(--primary) !important;
}

.dark-mode .nav-tabs {
    border-bottom-color: #333 !important;
}

/* Adjust tables */
.dark-mode table.table td, 
.dark-mode table.table th {
    border-color: #333 !important;
    color: #e0e0e0 !important;
}

/* Pagination */
.dark-mode .page-link {
    background-color: #2a2a2a !important;
    border-color: #444 !important;
    color: #e0e0e0 !important;
}

.dark-mode .page-item.active .page-link {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #fff !important;
}

.dark-mode .page-link:hover {
    background-color: #333 !important;
    color: #fff !important;
}

/* Specifically invert product images if requested, but normally we leave images alone. 
   We might need to adjust backgrounds of product boxes. */
.dark-mode .product-box-2,
.dark-mode .aiz-card-box {
    background-color: #1e1e1e !important;
    border-color: #333 !important;
}

.dark-mode a.text-dark:hover {
    color: var(--primary) !important;
}

.dark-mode a.text-reset:hover {
    color: var(--primary) !important;
}

/* Header specific overrides */
.dark-mode .top-background-color-visibility,
.dark-mode .middle-background-color-visibility,
.dark-mode .bottom-background-color-visibility,
.dark-mode .stikcy-header-visibility {
    background-color: #1a1a1a !important;
}

.dark-mode .top-text-color-visibility,
.dark-mode .middle-text-color-visibility,
.dark-mode .bottom-text-color-visibility,
.dark-mode .helpline-label {
    color: #e0e0e0 !important;
}

.dark-mode .front-header-search {
    background-color: #1e1e1e !important;
}

/* Hero / Category menu */
.dark-mode .aiz-category-menu {
    background-color: #1e1e1e !important;
}

/* Fix for Best Selling and other sections with inline white backgrounds */
.dark-mode section > .container > .p-3.rounded-2,
.dark-mode section > .container > .p-md-2rem.rounded-2,
.dark-mode [style*="background: #ffffff"],
.dark-mode [style*="background:#ffffff"],
.dark-mode [style*="background: rgb(255, 255, 255)"],
.dark-mode [style*="background: #FFF"],
.dark-mode [style*="background:#FFF"],
.dark-mode [style*="background: #fff9ed"],
.dark-mode [style*="background:#fff9ed"],
.dark-mode [style*="background: #f5f5fa"],
.dark-mode [style*="background:#f5f5fa"] {
    background-color: #1e1e1e !important;
    border-color: #333 !important;
}

/* Metro theme specific overrides */
.dark-mode #section_featured .slick-slider .slick-list,
.dark-mode #todays_deal {
    background-color: #1e1e1e !important;
}

.dark-mode .carousel-box.border-right,
.dark-mode .carousel-box.border-top,
.dark-mode .carousel-box.border-bottom,
.dark-mode .carousel-box.border-left {
    border-color: #333 !important;
}