/* ============================================================
   OMAN PROMO — Dark Mode System v2.0
   Toggle via: document.documentElement.setAttribute('data-theme','dark')
   ============================================================ */

/* ── 1. CSS Variables ── */
:root {
    --bg-color:       #ffffff;
    --card-bg:        #ffffff;
    --text-color:     #333333;
    --text-muted:     #777777;
    --border-color:   #f0f0f0;
    --input-bg:       #ffffff;
    --navbar-bg:      #f7f8fa;
    --header-bg:      #ffffff;
    --shadow-color:   rgba(0, 0, 0, 0.06);
    --overlay-bg:     rgba(255, 255, 255, 0.95);
    /* Toggle button */
    --toggle-bg:      #121212;
    --toggle-icon:    #ffffff;
}

[data-theme="dark"] {
    --bg-color:       #0f0f0f;   /* Near-black body */
    --card-bg:        #1c1c1c;   /* Elevated card surface */
    --text-color:     #e0e0e0;
    --text-muted:     #aaaaaa;
    --border-color:   #2e2e2e;
    --input-bg:       #252525;
    --navbar-bg:      #161616;
    --header-bg:      #141414;
    --shadow-color:   rgba(0, 0, 0, 0.5);
    --overlay-bg:     rgba(15, 15, 15, 0.97);
    /* Toggle button */
    --toggle-bg:      #ffffff;
    --toggle-icon:    #121212;
}

/* ── 2. Base ── */
body,
html {
    background-color: var(--bg-color) !important;
    color:            var(--text-color) !important;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* ── 3. Cards & Surfaces ── */
.card,
.product-card,
.product-single-card,
.noon-header,
.navbar-sticky,
.__shadow {
    background-color: var(--card-bg) !important;
    border-color:     var(--border-color) !important;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* ── 3b. Dark Mode Card Hover Effects ── */
[data-theme="dark"] .product-card,
[data-theme="dark"] .card {
    border: 1px solid #222222 !important;
    transition: transform 0.3s ease-in-out,
                background-color 0.3s ease-in-out,
                border-color 0.3s ease-in-out,
                box-shadow 0.3s ease-in-out !important;
}
[data-theme="dark"] .product-card:hover,
[data-theme="dark"] .card:hover {
    transform:        translateY(-5px) !important;
    background-color: #121212 !important;
    border-color:     #d6204b !important;
    box-shadow:       0 10px 20px rgba(214, 32, 75, 0.2) !important;
    cursor:           pointer;
}

/* Keep title & price legible during hover */
[data-theme="dark"] .product-card:hover .product-title,
[data-theme="dark"] .product-card:hover .card-title,
[data-theme="dark"] .card:hover .product-title,
[data-theme="dark"] .card:hover .card-title {
    color: #ffffff !important;
}
[data-theme="dark"] .product-card:hover .product-price,
[data-theme="dark"] .product-card:hover .__discount-price,
[data-theme="dark"] .card:hover .product-price,
[data-theme="dark"] .card:hover .__discount-price {
    color: #d6204b !important;
}

/* Add-to-cart button glows on card hover */
[data-theme="dark"] .product-card:hover .btn-add-to-cart,
[data-theme="dark"] .card:hover .btn-add-to-cart,
.product-card:hover .btn-add-to-cart {
    background-color: #d6204b !important;
    border-color:     #d6204b !important;
    box-shadow:       0 0 15px rgba(214, 32, 75, 0.5) !important;
    color:            #ffffff !important;
}

/* ── 4. Navbars ── */
.noon-navbar {
    background-color: var(--navbar-bg) !important;
    border-color:     var(--border-color) !important;
}
.noon-header {
    background-color: var(--header-bg) !important;
}
.noon-bottom-nav {
    background-color: var(--header-bg) !important;
    border-color:     var(--border-color) !important;
}

/* ── 5. Text ── */
[data-theme="dark"] body,
[data-theme="dark"] p,
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6,
[data-theme="dark"] span,
[data-theme="dark"] label,
[data-theme="dark"] .noon-navbar .noon-tool-link,
[data-theme="dark"] .noon-navbar .noon-auth-link,
[data-theme="dark"] .noon-navbar .noon-bold-text {
    color: var(--text-color) !important;
}
[data-theme="dark"] .noon-navbar .noon-small-text,
[data-theme="dark"] .text-muted,
[data-theme="dark"] small {
    color: var(--text-muted) !important;
}
[data-theme="dark"] .noon-navbar .text-white {
    color: #dddddd !important;
}

/* ── 6. Navbar Icons (Cart, Wishlist, Profile) — pure white in dark mode ── */
[data-theme="dark"] .noon-navbar .navbar-tool-icon,
[data-theme="dark"] .noon-navbar .navbar-tool-icon i,
[data-theme="dark"] .noon-navbar [class^="czi-"],
[data-theme="dark"] .noon-navbar [class*=" czi-"],
[data-theme="dark"] .noon-navbar [class^="tio-"],
[data-theme="dark"] .noon-navbar [class*=" tio-"],
[data-theme="dark"] .noon-navbar .fa,
[data-theme="dark"] .noon-navbar .fas,
[data-theme="dark"] .noon-navbar .far,
[data-theme="dark"] .noon-navbar .fal,
[data-theme="dark"] .noon-navbar .fab {
    color: #ffffff !important;
}

/* ── 6b. Global Icon Colors — navbar, footer, shipping policy ── */
[data-theme="dark"] .navbar i,
[data-theme="dark"] .noon-navbar i,
[data-theme="dark"] .footer i,
[data-theme="dark"] .noon-footer-main i,
[data-theme="dark"] .shipping-policy-web i,
[data-theme="dark"] .footer-top-slider i {
    color: #ffffff !important;
    transition: color 0.3s ease;
}
[data-theme="dark"] .navbar a:hover i,
[data-theme="dark"] .noon-navbar a:hover i {
    color: #d6204b !important;
}

/* ── 6c. Shipping reliability icons — large, brand-pink accent ── */
.reliability-icon {
    font-size: 52px;
    color: #d6204b;
    display: block;
    text-align: center;
    transition: color 0.3s ease, transform 0.3s ease;
}
[data-theme="dark"] .reliability-icon {
    color: #d6204b !important;
}
.footer-top-slide-item:hover .reliability-icon {
    color: #b71a3e;
    transform: scale(1.1);
}
/* ============================================================
   SHIPPING POLICY SECTION — ADAPTIVE THEME
   ============================================================ */

/* ── Light mode: white background, dark text ── */
[data-theme="light"] .__inline-61 .shipping-policy-web {
    background: #ffffff !important;
    border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
}

[data-theme="light"] .__inline-61 .shipping-method-system,
[data-theme="light"] .__inline-61 .shipping-method-system p {
    color: #333333 !important;
}

/* Divider lines: dark, subtle, on white bg */
[data-theme="light"] .owl-item:not(:last-child) .footer-top-slide-item::after {
    background: rgba(0, 0, 0, 0.10) !important;
}

/* ── Dark mode: solid black background, white text ── */
[data-theme="dark"] .__inline-61 .shipping-policy-web {
    background: #000000 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

[data-theme="dark"] .__inline-61 .shipping-method-system,
[data-theme="dark"] .__inline-61 .shipping-method-system p {
    color: #ffffff !important;
}

/* Divider lines: light, subtle, on black bg */
[data-theme="dark"] .owl-item:not(:last-child) .footer-top-slide-item::after {
    background: rgba(255, 255, 255, 0.15) !important;
}

/* Keep the cart badge red in both modes */
[data-theme="dark"] .noon-navbar .navbar-tool-label {
    background-color: #d6204b !important;
    color:            #ffffff !important;
}

/* ── 7. Inputs & Forms ── */
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select,
[data-theme="dark"] .form-control,
[data-theme="dark"] .noon-search-input {
    background-color: var(--input-bg) !important;
    color:            var(--text-color) !important;
    border-color:     var(--border-color) !important;
}
[data-theme="dark"] .noon-search-form .input-group {
    border-color: #444444 !important;
    background:   var(--input-bg) !important;
}

/* ── 8. Dropdowns & Menus ── */
[data-theme="dark"] .dropdown-menu {
    background-color: var(--card-bg) !important;
    border-color:     var(--border-color) !important;
}
[data-theme="dark"] .dropdown-item {
    color: var(--text-color) !important;
}
[data-theme="dark"] .dropdown-item:hover {
    background-color: #252525 !important;
    color:            #ffffff !important;
}

/* ── 9. Category Section — improved contrast ── */
[data-theme="dark"] .noon-category-section {
    background: var(--bg-color) !important;
}

/* Circles: deep charcoal with thin border so icons pop */
[data-theme="dark"] .category-mihrab-arch {
    background:   #2a2a2a !important;
    border-color: #444444 !important;
    box-shadow:   none !important;
}

/* Labels: pure white for maximum legibility */
[data-theme="dark"] .category-label-new {
    color: #ffffff !important;
}

/* Hover: brand pink border instead of teal */
[data-theme="dark"] .category-card-noon:hover .category-mihrab-arch {
    background:   #1f1f1f !important;
    border-color: #d6204b !important;
    box-shadow:   0 0 0 2px rgba(214, 32, 75, 0.25) !important;
}

/* ── 10. Footer ── */
[data-theme="dark"] .noon-footer-main {
    background:   var(--card-bg) !important;
    color:        var(--text-color) !important;
    border-color: var(--border-color) !important;
}
[data-theme="dark"] .noon-footer-main h6     { color: #eeeeee !important; }
[data-theme="dark"] .noon-footer-main .contact-item,
[data-theme="dark"] .noon-footer-main .contact-value { color: #cccccc !important; }
[data-theme="dark"] .noon-footer-main .contact-label { color: #888888 !important; }
[data-theme="dark"] .noon-footer-main .footer-list a { color: #aaaaaa !important; }
[data-theme="dark"] .noon-footer-main .footer-list a:hover { color: #d6204b !important; }
[data-theme="dark"] .noon-footer-bottom-bar {
    background:   #080808 !important;
    border-color: #1e1e1e !important;
}

/* ── 11. Owl Carousel Arrows — dark mode ── */
[data-theme="dark"] #oman_promo_cat_slider .owl-nav button.owl-prev,
[data-theme="dark"] #oman_promo_cat_slider .owl-nav button.owl-next {
    background:   #252525 !important;
    border-color: #444444 !important;
    color:        #e0e0e0 !important;
    box-shadow:   0 4px 15px rgba(0,0,0,0.6) !important;
}
[data-theme="dark"] #oman_promo_cat_slider .owl-nav button.owl-prev:hover,
[data-theme="dark"] #oman_promo_cat_slider .owl-nav button.owl-next:hover {
    background:   #333333 !important;
    border-color: #d6204b !important;
}

/* ── 12. Section backgrounds — transparent so global dark bg flows through ── */
.noon-recommended-section,
.noon-sellers-section {
    background: transparent !important;
}

/* Light mode: restore subtle background */
:root:not([data-theme="dark"]) .noon-recommended-section {
    background: #f7f7f7 !important;
    border: 1px solid #eee !important;
}
:root:not([data-theme="dark"]) .noon-sellers-section {
    background: #ffffff !important;
}

/* Dark mode: force transparent + remove ghostly shadows */
[data-theme="dark"] .noon-recommended-section,
[data-theme="dark"] .noon-sellers-section {
    background: transparent !important;
    box-shadow: none !important;
    border-color: var(--border-color) !important;
}

/* Title text white in dark mode */
[data-theme="dark"] .noon-recommended-section h2,
[data-theme="dark"] .noon-recommended-section .section-title,
[data-theme="dark"] .noon-recommended-section .noon-section-title,
[data-theme="dark"] .noon-sellers-section h2,
[data-theme="dark"] .noon-sellers-section .section-title,
[data-theme="dark"] .noon-sellers-section .noon-section-title {
    color: #ffffff !important;
}

/* ── 12b. Product Cards — override inline #fff background in dark mode ── */
[data-theme="dark"] .noon-product-card {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
}

/* ── 12b. Misc surfaces ── */
[data-theme="dark"] .noon-rankings-section  { background: #161616 !important; }
[data-theme="dark"] .noon-newsletter-box input {
    background: #252525 !important;
    border-color: #3a3a3a !important;
    color: #e0e0e0 !important;
}
[data-theme="dark"] .noon-newsletter-box input::placeholder { color: #666 !important; }

/* ── 13. Dark Mode Toggle Button — redesigned ── */
#dark-mode-toggle-btn {
    position:        fixed;
    bottom:          28px;
    left:            28px;
    width:           50px;
    height:          50px;
    border-radius:   50%;
    background:      var(--toggle-bg);
    border:          none;
    box-shadow:      0 8px 24px rgba(0, 0, 0, 0.3);
    cursor:          pointer;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       20px;
    color:           var(--toggle-icon);
    z-index:         9999;
    outline:         none;
    transition:      background 0.3s ease, color 0.3s ease,
                     box-shadow 0.3s ease, transform 0.25s ease;
}
#dark-mode-toggle-btn:hover {
    transform:  scale(1.12);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}
#dark-mode-toggle-btn:active {
    transform: scale(0.95);
}
/* Rotate animation class — added/removed by JS on click */
#dark-mode-toggle-btn.rotating {
    animation: dm-spin 0.4s ease;
}
@keyframes dm-spin {
    from { transform: rotate(0deg)   scale(1); }
    50%  { transform: rotate(180deg) scale(1.1); }
    to   { transform: rotate(360deg) scale(1); }
}

/* Icon visibility: moon shown in light mode, sun in dark mode */
#dark-mode-toggle-btn .icon-sun  { display: none; }
#dark-mode-toggle-btn .icon-moon { display: inline; }
[data-theme="dark"] #dark-mode-toggle-btn .icon-sun  { display: inline; }
[data-theme="dark"] #dark-mode-toggle-btn .icon-moon { display: none; }

/* ============================================================
   OMAN PROMO — CSS Variable-Driven Component Defaults
   Light mode uses var() so dark mode overrides via [data-theme="dark"]
   ============================================================ */

/* --- Ranking Cards (Best Selling / Top Rated) --- */
.noon-ranking-card {
    background: var(--card-bg) !important;
}
[data-theme="dark"] .noon-ranking-card {
    border-color: #2e2e2e !important;
}

.noon-rank-icon--red  { background: var(--rank-icon-bg-red) !important; }
.noon-rank-icon--yellow { background: var(--rank-icon-bg-yellow) !important; }

.noon-ranking-item {
    background: var(--card-bg-alt) !important;
}
[data-theme="dark"] .noon-ranking-item {
    border-color: #2a2a2a !important;
}
[data-theme="dark"] .noon-ranking-item:hover {
    background: #242424 !important;
}

.rank-img-box {
    background: var(--card-img-bg) !important;
}
[data-theme="dark"] .rank-img-box {
    border-color: #2e2e2e !important;
}

/* Text inside ranking cards */
[data-theme="dark"] .noon-ranking-card h2,
[data-theme="dark"] .noon-ranking-card .rank-name,
[data-theme="dark"] .noon-ranking-card .rank-price {
    color: var(--text-main) !important;
}
[data-theme="dark"] .noon-ranking-card .rank-reviews {
    color: #aaaaaa !important;
}

/* --- Brands Section --- */
.brands-section-wrapper {
    background: var(--section-bg) !important;
}
.noon-brand-item-premium {
    background: var(--card-bg) !important;
}
[data-theme="dark"] .noon-brand-item-premium {
    border-color: #2e2e2e !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3) !important;
}

/* --- Product Card Image Area --- */
.noon-image-area {
    background: var(--card-img-bg) !important;
}

/* --- Wishlist Button (standard card) --- */
.noon-wishlist-btn {
    background: var(--wishlist-btn-bg) !important;
}

/* ============================================================
   OMAN PROMO — Product Details Page Dark Mode
   Apple-style: dark surfaces, crisp borders, light text
   ============================================================ */

/* ── Page wrapper & shipping panel ── */
[data-theme="dark"] .__inline-23 .product-details-shipping-details {
    background: #1a1a1a !important;
    color: #e0e0e0 !important;
    border: 1px solid #2e2e2e !important;
    box-shadow: 0 0 0 1px #2e2e2e !important;
}
[data-theme="dark"] .__inline-23 .product-details-shipping-details span,
[data-theme="dark"] .__inline-23 .product-details-shipping-details div,
[data-theme="dark"] .__inline-23 .product-details-shipping-details a {
    color: #d0d0d0 !important;
}
[data-theme="dark"] .__inline-23 .shipping-details-bottom-border {
    border-color: #2e2e2e !important;
}

/* ── Image gallery ── */
[data-theme="dark"] .cz-preview {
    background: #1a1a1a !important;
    border: 1px solid #2e2e2e !important;
}
[data-theme="dark"] .cz-thumblist-item,
[data-theme="dark"] .cz-thumblist-item.active {
    background: #1a1a1a !important;
    border-color: #2e2e2e !important;
}

/* ── Product title, price, text ── */
[data-theme="dark"] .noon-product-title {
    color: #efefef !important;
}
[data-theme="dark"] .noon-currency-symbol,
[data-theme="dark"] .noon-price-large {
    color: #ffffff !important;
}
[data-theme="dark"] .noon-discount-badge {
    background: #1a2e1a !important;
    color: #5dd35d !important;
}
[data-theme="dark"] .noon-best-seller-strip {
    background: #1a1a2e !important;
    border-color: #2a2a3e !important;
}

/* ── Seller card ── */
[data-theme="dark"] .noon-seller-card,
[data-theme="dark"] .seller_details {
    background: #1a1a1a !important;
    border-color: #2e2e2e !important;
    color: #e0e0e0 !important;
}
[data-theme="dark"] .noon-trust-item {
    border-color: #2e2e2e !important;
}
[data-theme="dark"] .noon-trust-label,
[data-theme="dark"] .shop_name a {
    color: #e0e0e0 !important;
}
[data-theme="dark"] .noon-trust-bar-container {
    background: #2e2e2e !important;
}

/* ── Frequently bought together ── */
[data-theme="dark"] .noon-fbt-item {
    background: #1a1a1a !important;
    border-color: #2e2e2e !important;
}
[data-theme="dark"] .noon-fbt-title { color: #aaaaaa !important; }
[data-theme="dark"] .noon-fbt-price { color: #e0e0e0 !important; }
[data-theme="dark"] .noon-fbt-plus  { color: #555555 !important; }

/* ── Product overview / reviews section ── */
[data-theme="dark"] .product_overview {
    background: #111111 !important;
    color: #e0e0e0 !important;
}
[data-theme="dark"] .noon-tabs-pill .nav-link {
    background: #1e1e1e !important;
    border-color: #333333 !important;
    color: #cccccc !important;
}
[data-theme="dark"] .noon-tabs-pill .nav-link.active {
    background: #2a2a2a !important;
    border-color: #555555 !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4) !important;
}
[data-theme="dark"] .noon-overview-title {
    color: #ffffff !important;
    border-color: #2e2e2e !important;
}
[data-theme="dark"] .noon-overview-section-title,
[data-theme="dark"] .noon-overview-text {
    color: #cccccc !important;
}
/* Fix "black !important" text from product-details.css */
[data-theme="dark"] .list-unstyled li {
    color: #e0e0e0 !important;
}

/* ── Quantity box ── */
[data-theme="dark"] .quantity-box {
    background: #1e1e1e !important;
    border-color: #333333 !important;
    color: #ffffff !important;
}
[data-theme="dark"] .quantity-box input,
[data-theme="dark"] .quantity-box .btn-number {
    background: transparent !important;
    color: #ffffff !important;
    border-color: transparent !important;
}

/* ── Sticky add-to-cart bar ── */
[data-theme="dark"] .product-details-sticky {
    background: #111111 !important;
    border-top: 1px solid #2e2e2e !important;
    box-shadow: 0 -2px 16px rgba(0,0,0,0.6) !important;
}

/* ── Product description section ── */
[data-theme="dark"] .product-description-container,
[data-theme="dark"] .product-details-price-details {
    background: #1a1a1a !important;
    color: #e0e0e0 !important;
    border: 1px solid #2e2e2e !important;
    border-radius: 12px !important;
}

/* ── Review section ── */
[data-theme="dark"] .single_product_review {
    background: #1a1a1a !important;
    box-shadow: 0 0 8px rgba(0,0,0,0.4) !important;
    border-color: #2e2e2e !important;
}
[data-theme="dark"] .single_product_review * {
    color: #d0d0d0 !important;
}

/* ── General product page text overrides ── */
[data-theme="dark"] .__inline-23 h1,
[data-theme="dark"] .__inline-23 h2,
[data-theme="dark"] .__inline-23 h3,
[data-theme="dark"] .__inline-23 h4,
[data-theme="dark"] .__inline-23 h5,
[data-theme="dark"] .__inline-23 label,
[data-theme="dark"] .__inline-23 .text-dark,
[data-theme="dark"] .__inline-23 .product-description-label {
    color: #e0e0e0 !important;
}

/* ============================================================
   OMAN PROMO — All Categories Page Dark Mode (__inline-52)
   ============================================================ */

/* ── Search / Banner strip (.bg-primary-light) ── */
[data-theme="dark"] .bg-primary-light {
    background: linear-gradient(90deg, #1a1a1a 0%, #111111 100%) !important;
    border: 1px solid #2e2e2e !important;
}
[data-theme="dark"] .bg-primary-light h1,
[data-theme="dark"] .bg-primary-light h2,
[data-theme="dark"] .bg-primary-light h3,
[data-theme="dark"] .bg-primary-light h4,
[data-theme="dark"] .bg-primary-light p,
[data-theme="dark"] .bg-primary-light span {
    color: #e0e0e0 !important;
}
/* Search input inside banner */
[data-theme="dark"] .bg-primary-light .form-control {
    background: #222222 !important;
    border-color: #3a3a3a !important;
    color: #e0e0e0 !important;
}
[data-theme="dark"] .bg-primary-light .form-control::placeholder {
    color: #888888 !important;
}

/* ── Category cards (.brand_div) ── */
[data-theme="dark"] .brand_div {
    background: #1a1a1a !important;
    border-color: #2e2e2e !important;
    filter: drop-shadow(0px 0px 8px rgba(0, 0, 0, 0.4)) !important;
    transition: border-color 0.25s ease, box-shadow 0.25s ease !important;
}
[data-theme="dark"] .brand_div:hover {
    border-color: #d6204b !important;
    box-shadow: 0 0 0 1px #d6204b, 0 4px 16px rgba(214, 32, 75, 0.18) !important;
    filter: none !important;
}
/* Category name text */
[data-theme="dark"] .brand_div div {
    color: #e0e0e0 !important;
}
[data-theme="dark"] .brand_div:hover div {
    color: #ffffff !important;
}
/* Slight brightness boost on icon image in dark mode */
[data-theme="dark"] .brand_div img {
    filter: brightness(0.9) !important;
}
[data-theme="dark"] .brand_div:hover img {
    filter: brightness(1.1) !important;
}

/* ── Side category bar (if shown) ── */
[data-theme="dark"] .__inline-52 .side-category-bar {
    background: #1a1a1a !important;
    border-color: #2e2e2e !important;
    color: #e0e0e0 !important;
}
[data-theme="dark"] .__inline-52 .active {
    color: #aaaaaa !important;
}

/* ============================================================
   OMAN PROMO — Shopping Cart Page Dark Mode
   ============================================================ */

/* ── Product cards in cart (.cart_information) ── */
[data-theme="dark"] .cart_information {
    background: #1a1a1a !important;
    border-color: #2e2e2e !important;
}
[data-theme="dark"] .cart_information .card-header {
    background: #222222 !important;
    border-color: #2e2e2e !important;
    color: #e0e0e0 !important;
}
[data-theme="dark"] .cart_information .card-header a,
[data-theme="dark"] .cart_information .card-header span {
    color: #e0e0e0 !important;
}
[data-theme="dark"] .cart_information .cart_item {
    box-shadow: 0 3px 6px rgba(0,0,0,0.4) !important;
}

/* ── Bootstrap card inside cart ── */
[data-theme="dark"] .__cart-table.card {
    background: #1a1a1a !important;
    border-color: #2e2e2e !important;
}

/* ── Desktop table cells: force white for price values ── */
[data-theme="dark"] .__cart-table td,
[data-theme="dark"] .__cart-table th {
    color: #ffffff !important;
    background-color: transparent !important;
}

/* Unit price (fw-semibold) and total price (bare div) in desktop */
[data-theme="dark"] .__cart-table .fw-semibold {
    color: #ffffff !important;
    font-weight: 600 !important;
}

/* Tax label "(tax included)" — slightly subdued but readable */
[data-theme="dark"] .__cart-table .fs-10,
[data-theme="dark"] .cart_information .fs-10 {
    color: #cccccc !important;
}

/* ── Mobile cart: price amounts ── */
[data-theme="dark"] .cart_information .fw-semibold,
[data-theme="dark"] .cart_information .font-semi-bold {
    color: #ffffff !important;
    font-weight: 600 !important;
}

/* Mobile shipping cost value */
[data-theme="dark"] .cart_information .font-semi-bold {
    color: #ffffff !important;
}

/* ── Table header (.thead-light) ── */
[data-theme="dark"] .table.table-thead-bordered thead.thead-light,
[data-theme="dark"] .thead-light tr,
[data-theme="dark"] .thead-light th {
    background: #222222 !important;
    color: #e0e0e0 !important;
    border-color: #2e2e2e !important;
}

/* ── Summary sidebar (.cart_total) ── */
[data-theme="dark"] .cart_total {
    background: #1a1a1a !important;
    border: 1px solid #2e2e2e !important;
}
[data-theme="dark"] .cart_title {
    color: #cccccc !important;
}
[data-theme="dark"] .cart_value {
    color: #ffffff !important;
}
/* Total row (has .text-primary class) */
[data-theme="dark"] .cart_title.text-primary {
    color: #d6204b !important;
}
/* Divider line */
[data-theme="dark"] .cart_total hr {
    border-color: #2e2e2e !important;
}

/* ── Coupon input row ── */
[data-theme="dark"] .cart_total .form-control,
[data-theme="dark"] .cart_total .d-flex.form-control {
    background: #222222 !important;
    border-color: #3a3a3a !important;
    color: #e0e0e0 !important;
}
[data-theme="dark"] .cart_total .input_code {
    color: #e0e0e0 !important;
}
[data-theme="dark"] .cart_total .input_code::placeholder {
    color: #777777 !important;
}

/* ── Proceed to Checkout button — keep pink, ensure white text ── */
[data-theme="dark"] .proceed_to_next_button,
[data-theme="dark"] .btn--primary.proceed_to_next_button {
    background-color: #d6204b !important;
    color: #ffffff !important;
    border-color: #d6204b !important;
}

/* ── Empty cart state ── */
[data-theme="dark"] #cart-summary .card {
    background: #1a1a1a !important;
    border-color: #2e2e2e !important;
}
[data-theme="dark"] #cart-summary .card p {
    color: #999999 !important;
}

/* ── Order note textarea ── */
[data-theme="dark"] #order_note,
[data-theme="dark"] textarea.form-control {
    background: #1e1e1e !important;
    color: #e0e0e0 !important;
    border-color: #3a3a3a !important;
}
[data-theme="dark"] #order_note::placeholder,
[data-theme="dark"] textarea.form-control::placeholder {
    color: #666666 !important;
}

/* ── Mobile sticky bar (.bottom-sticky3) ── */
[data-theme="dark"] .bottom-sticky3 {
    background: #111111 !important;
    border-top: 1px solid #2e2e2e !important;
    box-shadow: 0 -2px 12px rgba(0,0,0,0.5) !important;
}
[data-theme="dark"] .bottom-sticky3 .product-description-label,
[data-theme="dark"] .bottom-sticky3 strong {
    color: #e0e0e0 !important;
}

/* ── Saved amount banner ── */
[data-theme="dark"] .cart_total .text-primary strong {
    color: #d6204b !important;
}

/* ── View all / Continue shopping link ── */
[data-theme="dark"] .order-summery-aside a.text-primary {
    color: #d6204b !important;
}

/* ── Cart page general label/text ── */
[data-theme="dark"] #cart-summary label,
[data-theme="dark"] #cart-summary .form-label {
    color: #cccccc !important;
}
[data-theme="dark"] #cart-summary .text-dark {
    color: #e0e0e0 !important;
}

/* ============================================================
   LOGO — DARK MODE INVERT
   Converts the black logo to white using CSS filter.
   When a dedicated white-logo file is uploaded, replace with
   the two-image swap approach instead.
   ============================================================ */

/* Logo swap: show correct logo per theme */
.logo-for-dark { display: none !important; }
.logo-for-light { display: block !important; }
[data-theme="dark"] .logo-for-light { display: none !important; }
[data-theme="dark"] .logo-for-dark { display: block !important; }

/* ============================================================
   All Vendors / Sellers Page — Dark Mode (.others-store-card)
   ============================================================ */

/* Card container */
[data-theme="dark"] .others-store-card {
    background-color: #1a1a1a !important;
    border: 1px solid #333333 !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

/* Banner bottom divider */
[data-theme="dark"] .others-store-card .other-store-banner {
    border-bottom: 1px solid #333333 !important;
}

/* Store name */
[data-theme="dark"] .others-store-card .name-area .info h5,
[data-theme="dark"] .others-store-card .name-area .info .h5 {
    color: #ffffff !important;
}

/* Rating label ("rating") */
[data-theme="dark"] .others-store-card .info small {
    color: #aaaaaa !important;
}

/* Logo circle — border matches card bg, white bg keeps logo readable */
[data-theme="dark"] .others-store-card .name-area .other-store-logo {
    border-color: #1a1a1a !important;
    background-color: #ffffff !important;
}

/* Stats boxes (reviews / products) */
[data-theme="dark"] .others-store-card .info-area .info-item {
    background-color: #262626 !important;
    border: 1px solid #3a3a3a !important;
    color: #bbbbbb !important;
}

[data-theme="dark"] .others-store-card .info-area .info-item span {
    color: #aaaaaa !important;
}

/* Hover: lift + pink accent (both themes) */
.others-store-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease !important;
}
.others-store-card:hover {
    transform: translateY(-6px) !important;
    border-color: #d6204b !important;
}
[data-theme="dark"] .others-store-card:hover {
    box-shadow: 0 8px 25px rgba(0,0,0,0.5) !important;
}

/* ============================================================
   Product Details — "More from Store" Sidebar Cards
   ============================================================ */

[data-theme="dark"] .flash_deal_product {
    background-color: #1a1a1a !important;
    border: 1px solid #333333 !important;
}

/* Remove white image background box */
[data-theme="dark"] .flash_deal_product .flash-deals-background-image,
[data-theme="dark"] .flash_deal_product .image-default-bg-color {
    background-color: transparent !important;
}

[data-theme="dark"] .flash_deal_product .flash-product-title {
    color: #ffffff !important;
}

/* .flash-product-price has Bootstrap "text-dark" class — override it */
[data-theme="dark"] .flash_deal_product .flash-product-price {
    color: #ffffff !important;
}

[data-theme="dark"] .flash_deal_product .category-single-product-price {
    color: #888888 !important;
}

/* ============================================================
   Product Details — Overview / Description Tab Panel
   ============================================================ */

/* .__review-overview also has Bootstrap's bg-white (!important) — wins via cascade + specificity */
[data-theme="dark"] .__review-overview {
    background: #1a1a1a !important;
    border-color: #333333 !important;
    box-shadow: none !important;
}

/* Inactive tab links */
[data-theme="dark"] .__review-overview .nav--tabs li .tab_link {
    color: #bbbbbb !important;
}

/* Active tab keeps white text — already set by nav--tabs active rule */
[data-theme="dark"] .__review-overview .nav--tabs li .tab_link.active {
    color: #ffffff !important;
}

/* Description body text */
[data-theme="dark"] .__review-overview .tab-content,
[data-theme="dark"] .__review-overview .text-body {
    color: #dddddd !important;
}

/* Rich editor HTML — any inline bg/color from the editor content */
[data-theme="dark"] .__review-overview .rich-editor-html-content,
[data-theme="dark"] .__review-overview .rich-editor-html-content p,
[data-theme="dark"] .__review-overview .rich-editor-html-content span,
[data-theme="dark"] .__review-overview .rich-editor-html-content li,
[data-theme="dark"] .__review-overview .rich-editor-html-content td {
    color: #cccccc !important;
    background-color: transparent !important;
}

/* ============================================================
   Global Modal Dark Mode (all modals)
   ============================================================ */

[data-theme="dark"] .modal-content {
    background-color: #1a1a1a !important;
    border: 1px solid #333333 !important;
    color: #ffffff !important;
}

[data-theme="dark"] .modal-header {
    background-color: #1a1a1a !important;
    border-bottom-color: #333333 !important;
}

[data-theme="dark"] .modal-footer {
    background-color: #1a1a1a !important;
    border-top-color: #333333 !important;
}

[data-theme="dark"] .modal-body {
    color: #ffffff !important;
}

[data-theme="dark"] .modal-title {
    color: #ffffff !important;
}

/* Close (×) button — Bootstrap sets color:#000 opacity:0.5 */
[data-theme="dark"] .modal-content .close,
[data-theme="dark"] .modal-content .close span {
    color: #ffffff !important;
    opacity: 0.8 !important;
    text-shadow: none !important;
}
[data-theme="dark"] .modal-content .close:hover,
[data-theme="dark"] .modal-content .close:focus {
    color: #ffffff !important;
    opacity: 1 !important;
}

/* ============================================================
   Shipping Method Modal (#buyNowModal) specifics
   ============================================================ */

/* Radio options container uses Bootstrap .border utility */
[data-theme="dark"] #buyNowModal .border {
    background-color: #222222 !important;
    border-color: #444444 !important;
}

/* Method labels */
[data-theme="dark"] #buyNowModal label {
    color: #eeeeee !important;
}

/* "Choose Shipping Method" helper text */
[data-theme="dark"] #buyNowModal .modal-body > form > div {
    color: #cccccc !important;
}

/* Car SVG icon — invert to white on dark bg */
[data-theme="dark"] #buyNowModal img[src*="car.svg"] {
    filter: brightness(0) invert(1) !important;
}

/* ============================================================
   Dark Mode Typography — Heading letter-spacing
   ============================================================ */

[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3 {
    letter-spacing: 0.5px;
}

/* ============================================================
   Dark Mode Cards — Replace light-mode shadows with borders
   (shadows are invisible on dark bg; borders give depth cleanly)
   Scoped to .card.__card to avoid affecting modals/dropdowns
   ============================================================ */

[data-theme="dark"] .card.__card {
    box-shadow: none !important;
    border: 1px solid #2e2e2e !important;
}

[data-theme="dark"] .card.__card:hover {
    box-shadow: none !important;
    border-color: #444444 !important;
}

/* ============================================================
   Dark Mode Form Focus — brand ring in dark context
   ============================================================ */

[data-theme="dark"] .form-control:focus {
    border-color: rgba(214, 32, 75, 0.5) !important;
    box-shadow: 0 0 0 3px rgba(214, 32, 75, 0.12) !important;
    background-color: #1e1e1e !important;
}