/* =========================================================
   A1 CASH & CARRY
   PREMIUM BLUE + BLACK DARK MODE
========================================================= */


/* =========================================================
   GLOBAL
========================================================= */

body.dark-mode {

    background: #07111f;

    color: #f5f9ff;

    transition:
        background-color 0.3s ease,
        color 0.3s ease;
}


/* =========================================================
   MAIN PAGE
========================================================= */

body.dark-mode main,
body.dark-mode .page-content,
body.dark-mode .products-page,
body.dark-mode .cart-page,
body.dark-mode .checkout-page {

    background: #07111f;

    color: #f5f9ff;
}


/* =========================================================
   HEADER
========================================================= */

body.dark-mode .main-header {

    background: #050c16;

    color: #ffffff;

    border-bottom: 1px solid #203a56;

    box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.35);
}


/* Logo */

body.dark-mode .logo-text {

    color: #ffffff;
}

body.dark-mode .logo-text span {

    color: #42a5f5;
}


/* Header text */

body.dark-mode .main-header a,
body.dark-mode .main-header span {

    color: #e7f1ff;
}


/* Header icons */

body.dark-mode .header-icon-btn {

    background: #0d1b2a;

    color: #ffffff;

    border: 1px solid #203a56;
}

body.dark-mode .header-icon-btn:hover {

    background: #1976d2;

    color: #ffffff;

    border-color: #2196f3;
}


/* =========================================================
   SEARCH
========================================================= */

body.dark-mode .search-container {

    background: #0d1b2a;

    border: 1px solid #203a56;
}


body.dark-mode .search-container input {

    background: transparent;

    color: #ffffff;
}


body.dark-mode .search-container input::placeholder {

    color: #8fa8c0;
}


body.dark-mode .search-container select {

    background: #0d1b2a;

    color: #eaf4ff;

    border-color: #203a56;
}


body.dark-mode .search-container button {

    background: #1976d2;

    color: #ffffff;
}


body.dark-mode .search-container button:hover {

    background: #2196f3;
}


/* =========================================================
   NAVBAR
========================================================= */

body.dark-mode .main-nav {

    background: #081523;

    border-top: 1px solid #162b40;

    border-bottom: 1px solid #203a56;
}


body.dark-mode .main-nav a {

    color: #dcecff;
}


body.dark-mode .main-nav a:hover {

    background: #102a45;

    color: #42a5f5;
}


body.dark-mode .main-nav a.active {

    background: #1976d2;

    color: #ffffff;
}


/* =========================================================
   MEGA MENU
========================================================= */

body.dark-mode .mega-menu {

    background: #0b1725;

    border: 1px solid #203a56;

    box-shadow:
        0 15px 40px rgba(0, 0, 0, 0.45);
}


body.dark-mode .mega-menu h3 {

    color: #42a5f5;
}


body.dark-mode .mega-menu a {

    color: #c7d9ec;
}


body.dark-mode .mega-menu a:hover {

    color: #42a5f5;

    background: #102a45;
}


/* =========================================================
   HERO
========================================================= */

body.dark-mode .hero-section {

    background-color: #07111f;

    color: #ffffff;
}


body.dark-mode .hero-section h1,
body.dark-mode .hero-section h2 {

    color: #ffffff;
}


body.dark-mode .hero-section p {

    color: #c2d4e7;
}


/* =========================================================
   BUTTONS
========================================================= */

body.dark-mode .btn,
body.dark-mode button.primary-btn {

    background: #1976d2;

    color: #ffffff;

    border: none;
}


body.dark-mode .btn:hover,
body.dark-mode button.primary-btn:hover {

    background: #2196f3;

    transform: translateY(-1px);
}


body.dark-mode .secondary-btn {

    background: #0d1b2a;

    color: #42a5f5;

    border: 1px solid #1976d2;
}


body.dark-mode .secondary-btn:hover {

    background: #102a45;

    color: #64b5f6;
}


/* =========================================================
   SECTIONS
========================================================= */

body.dark-mode section {

    background: transparent;

    color: #f5f9ff;
}


body.dark-mode .section-title {

    color: #ffffff;
}


body.dark-mode .section-subtitle {

    color: #9fb5ca;
}


/* =========================================================
   CARDS
========================================================= */

body.dark-mode .card,
body.dark-mode .product-card,
body.dark-mode .category-card,
body.dark-mode .offer-card,
body.dark-mode .service-card {

    background: #0d1b2a;

    color: #f5f9ff;

    border: 1px solid #203a56;

    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.25);
}


body.dark-mode .card:hover,
body.dark-mode .product-card:hover,
body.dark-mode .category-card:hover {

    border-color: #1976d2;

    box-shadow:
        0 12px 30px rgba(25, 118, 210, 0.18);
}


/* =========================================================
   PRODUCT CARDS
========================================================= */

body.dark-mode .product-card h3,
body.dark-mode .product-card h4 {

    color: #ffffff;
}


body.dark-mode .product-card p {

    color: #a9bfd3;
}


body.dark-mode .product-price {

    color: #42a5f5;
}


body.dark-mode .old-price {

    color: #71869b;
}


body.dark-mode .product-card .add-cart-btn {

    background: #1976d2;

    color: #ffffff;
}


body.dark-mode .product-card .add-cart-btn:hover {

    background: #2196f3;
}


/* =========================================================
   CATEGORY CARDS
========================================================= */

body.dark-mode .category-card h3 {

    color: #ffffff;
}


body.dark-mode .category-card p {

    color: #a9bfd3;
}


/* =========================================================
   FILTER SIDEBAR
========================================================= */

body.dark-mode .filter-sidebar {

    background: #0d1b2a;

    color: #ffffff;

    border: 1px solid #203a56;
}


body.dark-mode .filter-sidebar h3,
body.dark-mode .filter-sidebar h4 {

    color: #ffffff;
}


body.dark-mode .filter-sidebar label {

    color: #b7c9da;
}


/* =========================================================
   INPUTS / FORMS
========================================================= */

body.dark-mode input,
body.dark-mode textarea,
body.dark-mode select {

    background: #0b1725;

    color: #ffffff;

    border: 1px solid #29445e;
}


body.dark-mode input:focus,
body.dark-mode textarea:focus,
body.dark-mode select:focus {

    border-color: #2196f3;

    outline: none;

    box-shadow:
        0 0 0 3px rgba(33, 150, 243, 0.15);
}


body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {

    color: #71869b;
}


/* =========================================================
   TABLE
========================================================= */

body.dark-mode table {

    background: #0d1b2a;

    color: #ffffff;

    border-color: #203a56;
}


body.dark-mode th {

    background: #102a45;

    color: #ffffff;
}


body.dark-mode td {

    color: #c7d8e8;

    border-color: #203a56;
}


body.dark-mode tr:hover {

    background: #102238;
}


/* =========================================================
   CART
========================================================= */

body.dark-mode .cart-container,
body.dark-mode .cart-items,
body.dark-mode .cart-summary {

    background: #0d1b2a;

    color: #ffffff;

    border: 1px solid #203a56;
}


body.dark-mode .cart-summary h2,
body.dark-mode .cart-summary h3 {

    color: #ffffff;
}


body.dark-mode .cart-summary .total {

    color: #42a5f5;
}


/* =========================================================
   CHECKOUT
========================================================= */

body.dark-mode .checkout-container,
body.dark-mode .checkout-card,
body.dark-mode .order-summary {

    background: #0d1b2a;

    color: #ffffff;

    border: 1px solid #203a56;
}


body.dark-mode .checkout-container h2,
body.dark-mode .checkout-card h3 {

    color: #ffffff;
}


body.dark-mode .order-summary {

    background: #0b1725;
}


/* =========================================================
   ORDER SUCCESS
========================================================= */

body.dark-mode .success-container,
body.dark-mode .success-card {

    background: #0d1b2a;

    color: #ffffff;

    border: 1px solid #203a56;
}


body.dark-mode .success-container h1 {

    color: #ffffff;
}


body.dark-mode .success-container p {

    color: #a9bfd3;
}


body.dark-mode .success-icon {

    background: #102a45;

    color: #42a5f5;
}


/* =========================================================
   BREADCRUMB
========================================================= */

body.dark-mode .breadcrumb {

    background: #081523;

    color: #9fb5ca;

    border-bottom: 1px solid #203a56;
}


body.dark-mode .breadcrumb a {

    color: #42a5f5;
}


/* =========================================================
   PAGINATION
========================================================= */

body.dark-mode .pagination button {

    background: #0d1b2a;

    color: #c7d9ec;

    border: 1px solid #29445e;
}


body.dark-mode .pagination button:hover,
body.dark-mode .pagination button.active {

    background: #1976d2;

    color: #ffffff;

    border-color: #1976d2;
}


/* =========================================================
   MODAL
========================================================= */

body.dark-mode .modal,
body.dark-mode .modal-content {

    background: #0b1725;

    color: #ffffff;

    border: 1px solid #203a56;
}


body.dark-mode .modal h2 {

    color: #ffffff;
}


/* =========================================================
   DROPDOWN
========================================================= */

body.dark-mode .dropdown-menu {

    background: #0b1725;

    border: 1px solid #203a56;

    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.4);
}


body.dark-mode .dropdown-menu a {

    color: #d4e4f3;
}


body.dark-mode .dropdown-menu a:hover {

    background: #102a45;

    color: #42a5f5;
}


/* =========================================================
   FOOTER
========================================================= */

body.dark-mode .main-footer {

    background: #040b14;

    color: #ffffff;

    border-top: 1px solid #162b40;
}


body.dark-mode .footer-about h2 {

    color: #ffffff;
}


body.dark-mode .footer-about h2 span {

    color: #42a5f5;
}


body.dark-mode .footer-about p,
body.dark-mode .footer-column p {

    color: #9fb5ca;
}


body.dark-mode .footer-column h3 {

    color: #42a5f5;
}


body.dark-mode .footer-column a {

    color: #b9cce0;
}


body.dark-mode .footer-column a:hover {

    color: #42a5f5;
}


body.dark-mode .social-icons a {

    background: #0d1b2a;

    color: #ffffff;

    border: 1px solid #203a56;
}


body.dark-mode .social-icons a:hover {

    background: #1976d2;

    color: #ffffff;

    border-color: #2196f3;
}


body.dark-mode .footer-bottom {

    border-top: 1px solid #203a56;

    color: #7f96aa;
}


/* =========================================================
   NO PRODUCTS
========================================================= */

body.dark-mode .no-products {

    background: #0d1b2a;

    color: #ffffff;

    border: 1px solid #203a56;
}


/* =========================================================
   LINKS
========================================================= */

body.dark-mode a {

    color: #42a5f5;
}


body.dark-mode a:hover {

    color: #64b5f6;
}


/* =========================================================
   HR
========================================================= */

body.dark-mode hr {

    border-color: #203a56;
}


/* =========================================================
   SCROLLBAR
========================================================= */

body.dark-mode::-webkit-scrollbar {

    width: 10px;
}


body.dark-mode::-webkit-scrollbar-track {

    background: #050c16;
}


body.dark-mode::-webkit-scrollbar-thumb {

    background: #1c4d7a;

    border-radius: 10px;
}


body.dark-mode::-webkit-scrollbar-thumb:hover {

    background: #2196f3;
}