/*
 * DARK MODE — shop.appmmo.com
 * Deep navy blue theme matching the website color palette
 * Applied via: body.dark-mode
 *
 * NOTE: We intentionally do NOT override --white because the original CSS
 * uses var(--white) for white text on primary-colored headers.
 * Instead we override backgrounds/text directly per-component.
 */

/* ── Body & background ── */
body.dark-mode {
    --body:       #0d0f1a;
    --chalk:      #1c2035;
    --border:     #282d47;
    --text:       #b8bdd4;
    --heading:    #e2e6f8;
    --gray:       #7a8099;
    --sub-heading: #9299b8;
    --intro-bg:   #111425;
    --green-chalk: #0a2218;
    --gray-chalk: #343859;
    /* NOTE: --white is NOT overridden here to preserve header text colors */
}

body.dark-mode { background: #0d0f1a !important; color: #b8bdd4; }
body.dark-mode h1,body.dark-mode h2,body.dark-mode h3,
body.dark-mode h4,body.dark-mode h5,body.dark-mode h6 { color: #e2e6f8; }

/* ── Header Top bar ── */
body.dark-mode .header-top { background: #080a15 !important; border-bottom: 1px solid #282d47; }
body.dark-mode .header-top-welcome p { color: rgba(255,255,255,0.75); }
body.dark-mode .header-top-list li a { color: rgba(255,255,255,0.75); }
body.dark-mode .header-top-list li a:hover { color: #fff; }
/* Currency select: keep WHITE text in header */
body.dark-mode #changeCurrency { color: #fff !important; background: transparent !important; }
body.dark-mode #changeCurrency option { color: #333 !important; background: #fff !important; }
/* Nice-select if used */
body.dark-mode .header-top-select .nice-select { background: transparent; color: #fff; border-color: transparent; }
body.dark-mode .header-top-select .nice-select .current { color: #fff !important; }
body.dark-mode .header-top-select .nice-select .list { background: #1c2035; border: 1px solid #282d47; box-shadow: 0 8px 20px rgba(0,0,0,.6); }
body.dark-mode .header-top-select .nice-select .option:hover,
body.dark-mode .header-top-select .nice-select .option.selected { background: #282d47; color: #fff; }
body.dark-mode .header-top-select .header-select i { color: #fff; }

/* ── Header (logo, search, user info) ── */
body.dark-mode .header-part { background: #12152a !important; border-bottom: 1px solid #282d47; }
body.dark-mode .header-form { background: #1c2035; border: 1px solid #282d47; border-radius: 8px; }
body.dark-mode .header-form input { color: #e2e6f8; background: transparent; }
body.dark-mode .header-form input::placeholder { color: #4a5070; }
body.dark-mode .header-form button { color: #9299b8; }
body.dark-mode .header-widget { color: #b8bdd4; }
body.dark-mode .header-widget a { color: #b8bdd4; }

/* ── Navbar ── */
body.dark-mode .navbar-part { background: #0f122a !important; border-bottom: 1px solid #282d47; }
body.dark-mode .navbar-list .navbar-link { color: #b8bdd4; }
body.dark-mode .navbar-list .navbar-link:hover,
body.dark-mode .navbar-list .navbar-item.active .navbar-link { color: #fff; }
body.dark-mode .megamenu { background: #1c2035; border: 1px solid #282d47; box-shadow: 0 10px 40px rgba(0,0,0,.6); }
body.dark-mode .megamenu-title { color: #8b9bff; }
body.dark-mode .megamenu-list li a { color: #b8bdd4; }
body.dark-mode .megamenu-list li a:hover { color: #fff; }
body.dark-mode .dropdown-position-list { background: #1c2035; border: 1px solid #282d47; box-shadow: 0 8px 24px rgba(0,0,0,.5); }
body.dark-mode .dropdown-position-list li a { color: #b8bdd4; }
body.dark-mode .dropdown-position-list li a:hover { background: #282d47; color: #fff; }
body.dark-mode .navbar-support a { color: #9299b8; }

/* ── Mobile menu ── */
body.dark-mode .mobile-menu { background: #0f122a !important; border-top: 1px solid #282d47; }
body.dark-mode .mobile-menu a,
body.dark-mode .mobile-menu button,
body.dark-mode .mobile-menu span { color: #7a8099; }
body.dark-mode .mobile-menu .active,
body.dark-mode .mobile-menu a.active { color: #8b9bff; }

/* ── Sidebar (hamburger nav) ── */
body.dark-mode .nav-sidebar { background: #161929; }
body.dark-mode .nav-header { border-bottom: 1px solid #282d47; }
body.dark-mode .nav-list .nav-link { color: #b8bdd4; border-bottom: 1px solid #282d47; }
body.dark-mode .nav-list .nav-link:hover { color: #fff; }
body.dark-mode .nav-btn .btn-inline { background: #282d47; color: #b8bdd4; }
body.dark-mode .nav-select-group p { color: #9299b8; }
body.dark-mode .text-wallet { color: #5d9bff; }
body.dark-mode .dropdown-list { background: #1c2035; border: 1px solid #282d47; }
body.dark-mode .dropdown-list li a { color: #b8bdd4; }
body.dark-mode .nav-close,
body.dark-mode .cart-close { color: #7a8099; }

/* ── Cart sidebar ── */
body.dark-mode .cart-sidebar { background: #161929; }
body.dark-mode .cart-header { border-bottom: 1px solid #282d47; }
body.dark-mode .cart-total { color: #b8bdd4; }
body.dark-mode .category-item { border-bottom: 1px solid #282d47; }
body.dark-mode .category-link { color: #b8bdd4; }
body.dark-mode .category-link:hover { color: #fff; }
body.dark-mode .backdrop { background: rgba(0,0,10,.75); }

/* ── Page & content areas ── */
body.dark-mode main,
body.dark-mode .main-content { background: #0d0f1a; }

/* ── Product cards ── */
body.dark-mode .product-card { background: #161929 !important; border: 1px solid #282d47; box-shadow: 0 2px 12px rgba(0,0,0,.3); }
body.dark-mode .product-card:hover { box-shadow: 0 8px 32px rgba(0,0,0,.5); border-color: #363d60; }
body.dark-mode .product-content h5 a { color: #e2e6f8; }
body.dark-mode .product-content h5 a:hover { color: #8b9bff; }
body.dark-mode .product-meta span { color: #7a8099; }
body.dark-mode .box-text-style { color: #b8bdd4; }

/* ── Alert boxes (info boxes in homepage) ── */
body.dark-mode .alert-info { background: #161929 !important; border-top-color: #5d6bff; color: #b8bdd4; }
body.dark-mode .alert-info p { color: #8b9bff; }
body.dark-mode .alert-info strong,
body.dark-mode .alert-info b { color: #e2e6f8; }
body.dark-mode .alert-success { background: #0a1f15 !important; }
body.dark-mode .alert-danger { background: #200a0a !important; }
body.dark-mode .alert-warning { background: #1e1800 !important; }

/* ── Bootstrap Cards ── */
body.dark-mode .card { background: #161929 !important; border: 1px solid #282d47; }
body.dark-mode .card-header { background: #1c2035; border-bottom: 1px solid #282d47; color: #e2e6f8; }
body.dark-mode .card-footer { background: #1c2035; border-top: 1px solid #282d47; }

/* ── Tables ── */
body.dark-mode .table { color: #b8bdd4; }
body.dark-mode .table th { background: #1c2035 !important; color: #e2e6f8; border-color: #282d47 !important; }
body.dark-mode .table td { background: #161929 !important; border-color: #282d47 !important; color: #b8bdd4; }
body.dark-mode .table-hover tbody tr:hover td { background: #1c2035 !important; }
body.dark-mode .table-striped tbody tr:nth-of-type(odd) td { background: #14172e !important; }

/* ── Forms ── */
body.dark-mode .form-control,
body.dark-mode input[type="text"],
body.dark-mode input[type="email"],
body.dark-mode input[type="password"],
body.dark-mode input[type="number"],
body.dark-mode input[type="search"],
body.dark-mode textarea {
    background: #1c2035 !important;
    color: #e2e6f8 !important;
    border-color: #282d47 !important;
}
/* Note: main select (currency) stays white, only page-body selects get dark style */
body.dark-mode .form-control:focus { border-color: #5d6bff !important; box-shadow: 0 0 0 3px rgba(93,107,255,.15) !important; }
body.dark-mode .form-control::placeholder { color: #4a5070; }
body.dark-mode .form-label, body.dark-mode label { color: #c8cde0; }
body.dark-mode .nice-select:not(.header-top-select .nice-select) { background: #1c2035; border-color: #282d47; color: #b8bdd4; }
body.dark-mode .nice-select .list { background: #1c2035 !important; border: 1px solid #282d47 !important; box-shadow: 0 8px 24px rgba(0,0,0,.5) !important; }
body.dark-mode .nice-select .option:hover,
body.dark-mode .nice-select .option.selected.focus { background: #282d47; color: #e2e6f8; }

/* ── Modals ── */
body.dark-mode .modal-content { background: #161929; border: 1px solid #282d47; }
body.dark-mode .modal-header { background: #1c2035; border-bottom: 1px solid #282d47; }
body.dark-mode .modal-title { color: #e2e6f8; }
body.dark-mode .modal-body { color: #b8bdd4; background: #161929; }
body.dark-mode .modal-footer { background: #1c2035; border-top: 1px solid #282d47; }
body.dark-mode .btn-close { filter: invert(1) brightness(0.8); }

/* ── Nav Tabs ── */
body.dark-mode .nav-tabs { border-bottom: 1px solid #282d47; }
body.dark-mode .nav-tabs .nav-link { color: #7a8099; }
body.dark-mode .nav-tabs .nav-link.active { background: #1c2035; border-color: #282d47 #282d47 #1c2035; color: #8b9bff; }

/* ── Pagination ── */
body.dark-mode .page-item .page-link { background: #161929; border-color: #282d47; color: #9299b8; }
body.dark-mode .page-item.active .page-link { background: #5d6bff; border-color: #5d6bff; color: #fff; }
body.dark-mode .page-item:hover .page-link { background: #1c2035; color: #fff; }

/* ── Footer ── */
body.dark-mode footer { background: #080a15 !important; border-top: 1px solid #282d47; }
body.dark-mode .footer-widget h3,
body.dark-mode .footer-widget h5 { color: #e2e6f8; }
body.dark-mode .footer-links li a { color: #7a8099; }
body.dark-mode .footer-links li a:hover { color: #8b9bff; }
body.dark-mode .footer-bottom { border-top: 1px solid #282d47; }
body.dark-mode .footer-copytext { color: #4a5070; }
body.dark-mode hr { border-color: #282d47; }

/* ── Scrollbar ── */
body.dark-mode ::-webkit-scrollbar { width: 5px; height: 5px; }
body.dark-mode ::-webkit-scrollbar-track { background: #0d0f1a; }
body.dark-mode ::-webkit-scrollbar-thumb { background: #282d47; border-radius: 4px; }
body.dark-mode ::-webkit-scrollbar-thumb:hover { background: #5d6bff; }

/* ── General links in content area only ── */
body.dark-mode p a { color: #8b9bff; }
body.dark-mode p a:hover { color: #a5b4ff; }