/* =====================================================================
   Shary (شاري) — Frontend Brand Stylesheet (Orange + Red)
   =====================================================================
   File: public/assets/backend/admin/css/shop2-aster-fix.css
   Loaded LAST in layouts/app.blade.php so it wins specificity wars.
   Style: Bold Modern · Orange #FF6B1A · Red #E5142C · Cairo font.
   Powered by Moneyleek (www.moneyleek.online)
   ===================================================================== */

/* ---------- 0. Font ---------- */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@200;300;400;500;600;700;800;900&display=swap');

/* ---------- 1. Brand tokens (CSS variables) ---------- */
:root, html, body {
    --ml-primary:        #FF6B1A;
    --ml-primary-dark:   #D9520F;
    --ml-primary-hover:  #FF8540;
    --ml-primary-soft:   #FFE8D6;
    --ml-primary-rgb:    255, 107, 26;

    --ml-gold:           #E5142C;
    --ml-gold-dark:      #B30E22;
    --ml-gold-soft:      #FFE0E2;
    --ml-gold-rgb:       229, 20, 44;

    --ml-bg:             #FFFFFF;
    --ml-surface:        #F8FAFC;
    --ml-border:         #E2E8F0;
    --ml-border-strong:  #CBD5E1;

    --ml-text:           #0F172A;
    --ml-text-muted:     #64748B;
    --ml-text-soft:      #94A3B8;

    --ml-radius:         16px;
    --ml-radius-sm:      10px;
    --ml-radius-pill:    999px;

    --ml-shadow-sm:      0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.04);
    --ml-shadow:         0 4px 24px rgba(255,107,26,.06), 0 1px 3px rgba(15,23,42,.04);
    --ml-shadow-hover:   0 12px 40px rgba(255,107,26,.12), 0 4px 12px rgba(15,23,42,.06);

    /* Override Bootstrap + theme variables so the whole site picks it up */
    --bs-primary:        #FF6B1A !important;
    --bs-primary-rgb:    255, 107, 26 !important;
    --bs-secondary:      #E5142C !important;
    --bs-secondary-rgb:  229, 20, 44 !important;
    --primary-dark:      #D9520F !important;
    --primary-light:     #FFE8D6 !important;
    --primary-clr:       #FF6B1A !important;
    --base:              #FF6B1A !important;
    --web-primary:       #FF6B1A !important;
    --web-secondary:     #E5142C !important;
    --swiper-theme-color: transparent !important;
    --swiper-preloader-color: transparent !important;
    --swiper-pagination-color: transparent !important;
    --swiper-pagination-bullet-inactive-color: transparent !important;
    --swiper-navigation-color: #FF6B1A;
}

/* ---------- 2. Typography (Cairo, skip icon fonts) ---------- */
body, body *:not(i):not([class*="fi-"]):not([class*="fa-"]):not([class*="bi-"]):not([class*="czi-"]):not([class*="tio-"]):not([class*="icon"]) {
    font-family: 'Cairo', 'Inter', system-ui, -apple-system, sans-serif !important;
    -webkit-font-smoothing: antialiased;
    color: var(--ml-text);
}
body { background: var(--ml-bg); }
h1, h2, h3, h4, .h1, .h2, .h3, .h4 { font-weight: 800; letter-spacing: -0.01em; color: var(--ml-text); }
h5, h6, .h5, .h6 { font-weight: 700; }
a { color: var(--ml-primary); text-decoration: none; transition: color .2s; }
a:hover { color: var(--ml-primary-hover); }
.text-muted, small { color: var(--ml-text-muted) !important; }
.text-gold, .text-secondary-2 { color: var(--ml-gold) !important; }

/* ---------- 3. Kill the old burgundy "floating bubbles" decoration ---------- */
html body .swiper::after,
html body .carousel-inner::after,
html body .__top-slider-images::after,
html body .swiper::before,
html body .carousel-inner::before {
    content: none !important;
    background: none !important;
    background-image: none !important;
    animation: none !important;
    display: none !important;
}

/* Swiper pagination + lazy preloader OFF (clean look) */
.swiper-pagination,
.swiper-pagination-bullets,
.swiper-pagination-bullet,
[class*="swiper-pagination"],
.swiper-lazy-preloader,
[class*="swiper-lazy-preloader"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    border: 0 !important;
    pointer-events: none !important;
}

/* List markers off site-wide */
ul, ol, ul[class], ol[class] {
    list-style: none !important;
    padding-inline-start: 0;
}
ul li::marker, ol li::marker { content: '' !important; color: transparent !important; }

/* ---------- 4. Buttons ---------- */
.btn { font-weight: 600; border-radius: var(--ml-radius-sm); padding: .65rem 1.25rem; transition: all .2s ease; border-width: 1.5px; }

/* Override Bootstrap's LOCAL --bs-btn-* variables that ship hardcoded blue
   (--bs-btn-bg:#0d6efd, --bs-btn-hover-bg:#0b5ed7). Without this, .btn-primary
   on hover paints blue even when our background:!important wins on the base
   state — because Bootstrap re-applies background-color: var(--bs-btn-hover-bg)
   on :hover. */
.btn-primary {
    --bs-btn-color: #fff !important;
    --bs-btn-bg: var(--ml-primary) !important;
    --bs-btn-border-color: var(--ml-primary) !important;
    --bs-btn-hover-color: #fff !important;
    --bs-btn-hover-bg: var(--ml-primary-hover) !important;
    --bs-btn-hover-border-color: var(--ml-primary-hover) !important;
    --bs-btn-focus-shadow-rgb: var(--ml-primary-rgb) !important;
    --bs-btn-active-color: #fff !important;
    --bs-btn-active-bg: var(--ml-primary-dark) !important;
    --bs-btn-active-border-color: var(--ml-primary-dark) !important;
    --bs-btn-disabled-color: #fff !important;
    --bs-btn-disabled-bg: var(--ml-primary) !important;
    --bs-btn-disabled-border-color: var(--ml-primary) !important;
}

.btn-primary,
.btn--primary,
.buy_btn,
.btn-add-to-cart {
    background: var(--ml-primary) !important;
    border-color: var(--ml-primary) !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(255,107,26,.25);
}
.btn-primary:hover, .btn--primary:hover, .buy_btn:hover, .btn-add-to-cart:hover,
.btn-primary:focus, .btn-primary:active, .btn-primary.active, .btn-primary.show {
    background: var(--ml-primary-hover) !important;
    background-color: var(--ml-primary-hover) !important;
    border-color: var(--ml-primary-hover) !important;
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(255,107,26,.32) !important;
}

/* Dropdown-toggle (e.g. "اختار القسم" category button) — Bootstrap adds
   .show + .dropdown-toggle on open, which can paint a darker bg. Force orange. */
.btn-primary.dropdown-toggle,
.btn-primary.dropdown-toggle:hover,
.btn-primary.dropdown-toggle:focus,
.btn-primary.dropdown-toggle.show,
.show > .btn-primary.dropdown-toggle,
.select-category-button,
.select-category-button:hover,
.select-category-button:focus,
.select-category-button.show {
    background: var(--ml-primary) !important;
    background-color: var(--ml-primary) !important;
    border-color: var(--ml-primary) !important;
    color: #fff !important;
}
.select-category-button:hover,
.btn-primary.dropdown-toggle:hover {
    background-color: var(--ml-primary-hover) !important;
}

/* Make the "اختار القسم" button compact — was too tall/wide */
.select-category-button {
    inline-size: auto !important;          /* override Aster's 21.0625rem fixed width */
    min-width: 160px !important;
    max-width: 220px !important;
    padding: .45rem .85rem !important;     /* slimmer vertical + horizontal */
    font-size: 13px !important;
    border-radius: var(--ml-radius-sm) !important;
    line-height: 1.3 !important;
}
.select-category-button i.bi-list,
.select-category-button .bi-list { font-size: 1rem !important; }
@media (max-width: 1399px) {
    .select-category-button {
        inline-size: auto !important;
        min-width: 140px !important;
        max-width: 200px !important;
    }
}

.btn-outline-primary {
    color: var(--ml-primary) !important;
    border-color: var(--ml-primary) !important;
    background: transparent !important;
}
.btn-outline-primary:hover {
    background: var(--ml-primary) !important;
    color: #fff !important;
}

/* Gold accent button (premium CTAs) */
.btn-gold, .btn-secondary {
    background: var(--ml-gold) !important;
    border-color: var(--ml-gold) !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(229, 20, 44,.3);
}
.btn-gold:hover, .btn-secondary:hover {
    background: var(--ml-gold-dark) !important;
    border-color: var(--ml-gold-dark) !important;
    color: #fff !important;
}

.btn-outline-success, .btn-success {
    --bs-btn-color: var(--ml-primary);
    --bs-btn-border-color: var(--ml-primary);
    --bs-btn-hover-bg: var(--ml-primary);
    --bs-btn-hover-border-color: var(--ml-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--ml-primary-dark);
    --bs-btn-active-border-color: var(--ml-primary-dark);
}

/* ---------- 5. Cards & containers ---------- */
.card,
.product,
.product-card,
.category-card,
.find-what-you-need-items,
.bg-section {
    border-radius: var(--ml-radius) !important;
    border: 1px solid var(--ml-border) !important;
    box-shadow: var(--ml-shadow-sm);
    background: var(--ml-bg) !important;
    transition: transform .2s, box-shadow .2s;
}
.card:hover,
.product:hover,
.product-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--ml-shadow-hover) !important;
    border-color: rgba(var(--ml-primary-rgb), .3) !important;
}

.main-content > section { padding-block: 2rem; }
section + section { margin-top: .5rem; }

/* ---------- 6. Header / Navbar ---------- */
header, .header, .navbar {
    background: var(--ml-bg) !important;
    border-bottom: 1px solid var(--ml-border) !important;
    box-shadow: 0 1px 3px rgba(15,23,42,.03);
}
.navbar-brand img, .header-logo img,
header .logo img, .header__logo img,
.header .logo img, .navbar-brand-wrapper img {
    max-height: 60px !important;
    height: auto !important;
    width: auto !important;
    max-width: 180px !important;
    object-fit: contain;
}
/* Give the logo container some breathing room so the bigger logo doesn't squish */
.navbar-brand, .header-logo, header .logo, .header .logo {
    padding-block: .25rem !important;
}

.btn-toggle-categories,
.choose-category-btn,
[class*="category-toggle"] {
    background: var(--ml-primary) !important;
    color: #fff !important;
    border-radius: var(--ml-radius-sm) !important;
    font-weight: 700;
}

.search-form, .search-bar, .form-search {
    border-radius: var(--ml-radius-pill) !important;
    border: 1.5px solid var(--ml-border-strong) !important;
    overflow: hidden;
    background: var(--ml-bg);
}
.search-form:focus-within { border-color: var(--ml-primary) !important; box-shadow: 0 0 0 4px rgba(255,107,26,.08); }
.search-form input, .form-search input { border: 0 !important; background: transparent !important; }
.search-form button, .form-search button { background: var(--ml-primary) !important; color: #fff !important; border: 0 !important; }

/* ---------- 7. Product cards (Aster .product) ---------- */
.product { overflow: hidden; position: relative; }
.product__top {
    background: linear-gradient(180deg, var(--ml-surface) 0%, var(--ml-bg) 100%);
    border-radius: var(--ml-radius) var(--ml-radius) 0 0;
}
.product__title { font-weight: 700; color: var(--ml-text); }
.product__new-price, ins.product__new-price, .price-new {
    color: var(--ml-primary) !important;
    font-weight: 800;
    font-size: 1.05rem;
}
.product__old-price, del, .price-old {
    color: var(--ml-text-soft) !important;
    text-decoration: line-through;
    font-weight: 500;
}
.product__summary { padding-top: .75rem; }

.product__discount, .sale-badge, .discount-badge,
.badge-discount, [class*="badge-sale"], .badge.bg-danger {
    background: var(--ml-gold) !important;
    color: #fff !important;
    border-radius: var(--ml-radius-pill) !important;
    padding: .25rem .65rem;
    font-weight: 700;
    font-size: .75rem;
    box-shadow: 0 2px 8px rgba(229, 20, 44,.25);
}

.star-rating, .text-gold, .rating-star, .rating i { color: var(--ml-gold) !important; }
.star-rating .bi-star-fill, .star-rating .bi-star { color: var(--ml-gold) !important; }

.product__actions a,
.btn-wishlist, .btn-compare, .btn-quickview {
    background: var(--ml-bg) !important;
    color: var(--ml-text) !important;
    border: 1px solid var(--ml-border) !important;
    border-radius: 50% !important;
    width: 36px; height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
    transition: all .2s;
    box-shadow: var(--ml-shadow-sm);
}
.product__actions a:hover,
.btn-wishlist:hover, .btn-compare:hover, .btn-quickview:hover {
    background: var(--ml-primary) !important;
    color: #fff !important;
    border-color: var(--ml-primary) !important;
}

/* ---------- 8. Section headers ---------- */
.section-title,
section h2,
section .heading,
.heading-text {
    font-weight: 800 !important;
    color: var(--ml-text) !important;
    position: relative;
    padding-bottom: .5rem;
}

/* ---------- 9. Find-what-you-need (category tiles) ---------- */
.find-what-you-need-items,
.find-what-need .card,
.find-what-need-card {
    border-radius: var(--ml-radius) !important;
    background: var(--ml-bg) !important;
    border: 1px solid var(--ml-border) !important;
    box-shadow: var(--ml-shadow-sm);
    transition: all .25s;
}
.find-what-you-need-items:hover { box-shadow: var(--ml-shadow-hover); }
.find-what-you-need-items img, .find-what-need img { border-radius: var(--ml-radius-sm); }
.find-what-need .truncate, .find-what-you-need-items .truncate { color: var(--ml-text); font-weight: 500; }

.view-all, .see-more, [class*="view-all"] {
    color: var(--ml-primary) !important;
    font-weight: 700;
}
.view-all::after, .see-more::after { content: '\2192'; padding-inline-start: .25rem; transition: padding .2s; }
.view-all:hover::after, .see-more:hover::after { padding-inline-start: .5rem; }

/* ---------- 10. Footer ---------- */
/* Footer needs to override the body catch-all which colors every descendant.
   We use `footer *` so the rule targets descendants directly (same specificity
   as the body catch-all + later in source = wins). */
footer, .footer {
    background: var(--ml-primary-dark) !important;
    border-top: 4px solid var(--ml-gold);
}
footer, .footer,
footer p, footer span, footer div, footer li, footer small, footer label,
.footer p, .footer span, .footer div, .footer li, .footer small, .footer label {
    color: #E2E8F0 !important;
}
footer a, .footer a { color: #CBD5E1 !important; }
footer a:hover, .footer a:hover { color: var(--ml-gold) !important; }
footer h1, footer h2, footer h3, footer h4, footer h5, footer h6,
.footer h1, .footer h2, .footer h3, .footer h4, .footer h5, .footer h6 {
    color: #fff !important;
    font-weight: 700;
}
footer .text-muted, .footer .text-muted { color: rgba(255,255,255,.65) !important; }
footer i, .footer i { color: inherit !important; }
/* Newsletter input + button inside footer */
footer input, footer .form-control, .footer input, .footer .form-control {
    background: rgba(255,255,255,.10) !important;
    border-color: rgba(255,255,255,.20) !important;
    color: #fff !important;
}
footer input::placeholder, .footer input::placeholder { color: rgba(255,255,255,.55) !important; }

/* ---------- 11. Forms ---------- */
.form-control, .form-select, input.form-control, textarea.form-control {
    border-radius: var(--ml-radius-sm) !important;
    border: 1.5px solid var(--ml-border) !important;
    padding: .65rem 1rem;
    transition: all .2s;
    color: var(--ml-text);
    background: var(--ml-bg);
}
.form-control:focus, .form-select:focus {
    border-color: var(--ml-primary) !important;
    box-shadow: 0 0 0 4px rgba(255,107,26,.08) !important;
    outline: 0;
}

/* ---------- 12. Banner / hero ---------- */
.banner-section,
section.banner {
    background: linear-gradient(135deg, var(--ml-primary-soft) 0%, var(--ml-bg) 60%) !important;
    border-radius: var(--ml-radius);
    overflow: hidden;
}

/* ---------- 13. Tabs / pills ---------- */
.nav-tabs .nav-link.active,
.nav-pills .nav-link.active {
    background: var(--ml-primary) !important;
    color: #fff !important;
    border-color: var(--ml-primary) !important;
    border-radius: var(--ml-radius-sm) !important;
}
.nav-tabs .nav-link, .nav-pills .nav-link { color: var(--ml-text-muted); font-weight: 600; }
.nav-tabs .nav-link:hover { color: var(--ml-primary); border-color: transparent; }

/* ---------- 14. Mobile bottom app bar ---------- */
.app-bar {
    background: var(--ml-bg) !important;
    border-top: 1px solid var(--ml-border) !important;
    box-shadow: 0 -2px 12px rgba(15,23,42,.06);
}
.app-bar a.active, .app-bar .active i { color: var(--ml-primary) !important; }

/* ---------- 15. Back-to-top + chat icons ---------- */
.back-to-top {
    background: var(--ml-primary) !important;
    color: #fff !important;
    border-radius: 50% !important;
    box-shadow: 0 6px 20px rgba(255,107,26,.3) !important;
}
.back-to-top:hover { background: var(--ml-primary-hover) !important; }
.chat-image-shadow { box-shadow: 0 6px 20px rgba(255,107,26,.18); border-radius: 50%; }

/* ---------- 16. Cleanup older bullet hacks ---------- */
.product-card li::before,
.category-card li::before,
.find-what-need li::before,
.aster-product-list li::before {
    content: none !important;
    display: none !important;
    background: transparent !important;
}

/* ---------- 17. User-dashboard sidebar ---------- */
.profile-sidebar-sticky {
    background: var(--ml-primary) !important;
    border: 1px solid var(--ml-primary) !important;
    border-radius: var(--ml-radius);
    box-shadow: var(--ml-shadow);
}
.profile-sidebar-sticky h5,
.profile-sidebar-sticky p,
.profile-sidebar-sticky a,
.profile-sidebar-sticky i,
.profile-sidebar-sticky .text-muted { color: #fff !important; }
.profile-sidebar-sticky .profile-menu img { filter: brightness(0) invert(1) !important; }

/* ---------- 18. Misc polish ---------- */
.badge.bg-primary { background: var(--ml-primary) !important; }
.bg-primary { background: var(--ml-primary) !important; color: #fff; }
.text-primary { color: var(--ml-primary) !important; }
.border-primary { border-color: var(--ml-primary) !important; }
hr { border-color: var(--ml-border) !important; opacity: 1; }

.owl-dots, .owl-nav, .carousel-indicators { display: none !important; }

@media (min-width: 1400px) {
    .container { max-width: 1320px; }
}

/* =====================================================================
   DARK MODE (Frontend) — keep brand royal blue + gold, swap surfaces
   ===================================================================== */
[theme="dark"] {
    /* Surface tokens */
    --ml-bg:            #0F1419;
    --ml-surface:       #181E26;
    --ml-border:        #2A3340;
    --ml-border-strong: #3A4654;

    --ml-text:       #E5EAF0;
    --ml-text-muted: #94A3B8;
    --ml-text-soft:  #64748B;

    /* Make shadows darker / stronger */
    --ml-shadow-sm:    0 1px 2px rgba(0,0,0,.35);
    --ml-shadow:       0 4px 24px rgba(0,0,0,.45);
    --ml-shadow-hover: 0 12px 40px rgba(0,0,0,.55);
}

[theme="dark"] body { background: var(--ml-bg) !important; color: var(--ml-text); }
[theme="dark"] h1, [theme="dark"] h2, [theme="dark"] h3, [theme="dark"] h4,
[theme="dark"] h5, [theme="dark"] h6 { color: var(--ml-text) !important; }
[theme="dark"] p, [theme="dark"] span { color: var(--ml-text); }
[theme="dark"] .text-muted, [theme="dark"] small { color: var(--ml-text-muted) !important; }

/* Cards & containers — dark surface */
[theme="dark"] .card,
[theme="dark"] .product,
[theme="dark"] .product-card,
[theme="dark"] .category-card,
[theme="dark"] .find-what-you-need-items,
[theme="dark"] .bg-section,
[theme="dark"] .bg-white {
    background: var(--ml-surface) !important;
    border-color: var(--ml-border) !important;
    color: var(--ml-text) !important;
}

[theme="dark"] .product__top {
    background: linear-gradient(180deg, #131820 0%, #1A2230 100%) !important;
}
[theme="dark"] .product__title { color: var(--ml-text) !important; }
[theme="dark"] .product__new-price { color: #FFB088 !important; } /* lighter blue for contrast */

/* Header / Navbar */
[theme="dark"] header, [theme="dark"] .header, [theme="dark"] .navbar {
    background: #0F1419 !important;
    border-bottom-color: var(--ml-border) !important;
}

/* Search bar */
[theme="dark"] .search-form,
[theme="dark"] .search-bar,
[theme="dark"] .form-search {
    background: var(--ml-surface) !important;
    border-color: var(--ml-border-strong) !important;
}
[theme="dark"] .search-form input,
[theme="dark"] .form-search input {
    color: var(--ml-text) !important;
}

/* Forms */
[theme="dark"] .form-control,
[theme="dark"] .form-select,
[theme="dark"] input.form-control,
[theme="dark"] textarea.form-control {
    background: var(--ml-surface) !important;
    border-color: var(--ml-border) !important;
    color: var(--ml-text) !important;
}
[theme="dark"] .form-control::placeholder { color: var(--ml-text-soft) !important; }
[theme="dark"] .form-control:focus,
[theme="dark"] .form-select:focus {
    background: var(--ml-surface) !important;
    border-color: var(--ml-primary-hover) !important;
    box-shadow: 0 0 0 4px rgba(255,107,26,.18) !important;
}

/* Tabs */
[theme="dark"] .nav-tabs .nav-link,
[theme="dark"] .nav-pills .nav-link { color: var(--ml-text-muted); }
[theme="dark"] .nav-tabs .nav-link.active,
[theme="dark"] .nav-pills .nav-link.active {
    background: var(--ml-primary) !important;
    color: #fff !important;
}

/* Banner / hero */
[theme="dark"] .banner-section,
[theme="dark"] section.banner {
    background: linear-gradient(135deg, #0E2247 0%, #0F1419 60%) !important;
}

/* Find-what-you-need tiles */
[theme="dark"] .find-what-you-need-items,
[theme="dark"] .find-what-need .card,
[theme="dark"] .find-what-need-card {
    background: var(--ml-surface) !important;
    border-color: var(--ml-border) !important;
}
[theme="dark"] .find-what-need .truncate,
[theme="dark"] .find-what-you-need-items .truncate { color: var(--ml-text) !important; }

/* Product action buttons */
[theme="dark"] .product__actions a,
[theme="dark"] .btn-wishlist,
[theme="dark"] .btn-compare,
[theme="dark"] .btn-quickview {
    background: var(--ml-surface) !important;
    border-color: var(--ml-border) !important;
    color: var(--ml-text) !important;
}
[theme="dark"] .product__actions a:hover,
[theme="dark"] .btn-wishlist:hover,
[theme="dark"] .btn-compare:hover,
[theme="dark"] .btn-quickview:hover {
    background: var(--ml-primary) !important;
    color: #fff !important;
    border-color: var(--ml-primary) !important;
}

/* App bar / footer in dark */
[theme="dark"] .app-bar {
    background: #0F1419 !important;
    border-top-color: var(--ml-border) !important;
}
[theme="dark"] footer, [theme="dark"] .footer {
    background: #0A0E14 !important;
    color: var(--ml-text) !important;
    border-top: 4px solid var(--ml-gold);
}
[theme="dark"] footer a, [theme="dark"] .footer a { color: var(--ml-text-muted) !important; }
[theme="dark"] footer a:hover, [theme="dark"] .footer a:hover { color: var(--ml-gold) !important; }

/* Borders + dividers */
[theme="dark"] hr,
[theme="dark"] .border,
[theme="dark"] .border-top,
[theme="dark"] .border-bottom,
[theme="dark"] .border-start,
[theme="dark"] .border-end { border-color: var(--ml-border) !important; }

/* Dropdowns */
[theme="dark"] .dropdown-menu {
    background: var(--ml-surface) !important;
    border-color: var(--ml-border) !important;
}
[theme="dark"] .dropdown-item { color: var(--ml-text) !important; }
[theme="dark"] .dropdown-item:hover {
    background: rgba(255,107,26,.15) !important;
    color: #fff !important;
}

/* Modals */
[theme="dark"] .modal-content {
    background: var(--ml-surface) !important;
    color: var(--ml-text) !important;
}
[theme="dark"] .modal-header,
[theme="dark"] .modal-footer { border-color: var(--ml-border) !important; }

/* Tables */
[theme="dark"] .table { color: var(--ml-text) !important; }
[theme="dark"] .table thead th {
    background: #0F1419 !important;
    color: var(--ml-text-muted) !important;
    border-bottom-color: var(--ml-border) !important;
}
[theme="dark"] .table tbody tr { border-color: var(--ml-border) !important; }
[theme="dark"] .table tbody tr:hover { background: #1A2230 !important; }

/* Sidebar (user dashboard) on dark */
[theme="dark"] .profile-sidebar-sticky {
    background: var(--ml-primary-dark) !important;
    border-color: var(--ml-primary-dark) !important;
}

/* Buttons stay branded (no override needed) but ensure text contrast */
[theme="dark"] .btn-outline-primary { color: #FFB088 !important; border-color: #FFB088 !important; }
[theme="dark"] .btn-outline-primary:hover { background: var(--ml-primary) !important; color: #fff !important; }

/* =====================================================================
   DARK MODE NUCLEAR CATCH-ALL — Force any leftover white surfaces dark
   and ensure ALL text/headings inside cards become legible.
   ===================================================================== */

/* Force-dark every white surface inside dark theme that Aster's own CSS
   might still paint. Targets bg-white, bg-light, and any inline bg #fff. */
[theme="dark"] .bg-white,
[theme="dark"] .bg-light,
[theme="dark"] [style*="background:#fff"],
[theme="dark"] [style*="background: #fff"],
[theme="dark"] [style*="background-color:#fff"],
[theme="dark"] [style*="background-color: #fff"],
[theme="dark"] [style*="background:#FFFFFF"],
[theme="dark"] [style*="background-color:#FFFFFF"] {
    background: var(--ml-surface) !important;
    color: var(--ml-text) !important;
}

/* All text inside Aster product / category / banner cards goes light */
[theme="dark"] .product *,
[theme="dark"] .product__summary *,
[theme="dark"] .product__title,
[theme="dark"] .product .text-truncate,
[theme="dark"] .product h6,
[theme="dark"] .product h5,
[theme="dark"] .find-what-you-need-items *,
[theme="dark"] .find-what-you-need-items .truncate,
[theme="dark"] .find-what-need-card *,
[theme="dark"] .aster-product-list *,
[theme="dark"] .category-card *,
[theme="dark"] .feature-product-title,
[theme="dark"] .featured_deal_title,
[theme="dark"] .heading-text,
[theme="dark"] .section-title,
[theme="dark"] section h2,
[theme="dark"] section h3 {
    color: var(--ml-text) !important;
}

/* Star ratings stay gold */
[theme="dark"] .star-rating,
[theme="dark"] .star-rating *,
[theme="dark"] .text-gold {
    color: var(--ml-gold) !important;
}

/* Prices stay light blue for visibility on dark */
[theme="dark"] .product__new-price,
[theme="dark"] ins.product__new-price,
[theme="dark"] .price-new,
[theme="dark"] .product__price * {
    color: #FFB088 !important;
}

/* Inputs / textareas / selects — force dark surface + light text */
[theme="dark"] input,
[theme="dark"] textarea,
[theme="dark"] select,
[theme="dark"] .form-control,
[theme="dark"] .form-select {
    background: var(--ml-surface) !important;
    color: var(--ml-text) !important;
    border-color: var(--ml-border) !important;
}
[theme="dark"] input::placeholder,
[theme="dark"] textarea::placeholder { color: var(--ml-text-soft) !important; }

/* Default Bootstrap text colors */
[theme="dark"] .text-dark,
[theme="dark"] .text-body,
[theme="dark"] .text-black { color: var(--ml-text) !important; }
[theme="dark"] .text-muted,
[theme="dark"] .text-secondary { color: var(--ml-text-muted) !important; }

/* Tables on frontend pages (cart, order details, etc) */
[theme="dark"] table,
[theme="dark"] .table { color: var(--ml-text) !important; }
[theme="dark"] .table thead,
[theme="dark"] .table thead th,
[theme="dark"] .table th { background: #0A1219 !important; color: var(--ml-text-muted) !important; }
[theme="dark"] .table tbody tr { background: var(--ml-surface) !important; }
[theme="dark"] .table tbody tr:hover { background: #1F2A3A !important; }
[theme="dark"] .table td, [theme="dark"] .table th { border-color: var(--ml-border) !important; }

/* Recommended-product-grid items (homepage product rows) */
[theme="dark"] .recommended-product-grid,
[theme="dark"] .recommended-product-grid > * {
    background: transparent !important;
}

/* Page section container backgrounds (Aster wraps every section in a card) */
[theme="dark"] .container > .card,
[theme="dark"] .container-fluid > .card,
[theme="dark"] section .card,
[theme="dark"] section > div {
    background: transparent;
}
[theme="dark"] section .card.bg-white,
[theme="dark"] section > div.bg-white {
    background: var(--ml-surface) !important;
}

/* =====================================================================
   Shary — Bootstrap component-local blue var overrides
   =====================================================================
   Bootstrap 5 defines local --bs-*-bg/border/color variables inside every
   component (buttons, dropdowns, nav-pills, pagination, alerts, list-group,
   progress, table, etc.) hardcoded to #0d6efd / #0b5ed7 / #0a58ca / #0dcaf0 /
   #cfe2ff / #b6d4fe / #084298. They override our global --bs-primary, so we
   must redefine them on each component selector.
   ===================================================================== */

:root {
    --bs-blue:          #FF6B1A !important;
    --bs-cyan:          #FF8540 !important;
    --bs-primary:       #FF6B1A !important;
    --bs-primary-rgb:   255, 107, 26 !important;
    --bs-info:          #FF8540 !important;
    --bs-info-rgb:      255, 133, 64 !important;
    --bs-link-color:    #FF6B1A !important;
    --bs-link-color-rgb:255, 107, 26 !important;
    --bs-link-hover-color: #D9520F !important;
    --bs-link-hover-color-rgb: 217, 82, 15 !important;
    --bs-focus-ring-color: rgba(255,107,26,.25) !important;
}

/* --- Outline primary button --- */
.btn-outline-primary {
    --bs-btn-color:                 #FF6B1A !important;
    --bs-btn-border-color:          #FF6B1A !important;
    --bs-btn-hover-color:           #fff !important;
    --bs-btn-hover-bg:              #FF6B1A !important;
    --bs-btn-hover-border-color:    #FF6B1A !important;
    --bs-btn-focus-shadow-rgb:      255, 107, 26 !important;
    --bs-btn-active-color:          #fff !important;
    --bs-btn-active-bg:             #FF6B1A !important;
    --bs-btn-active-border-color:   #FF6B1A !important;
    --bs-btn-disabled-color:        #FF6B1A !important;
    --bs-btn-disabled-border-color: #FF6B1A !important;
}

/* --- Info button (cyan default) --- */
.btn-info {
    --bs-btn-bg:                    #FF8540 !important;
    --bs-btn-border-color:          #FF8540 !important;
    --bs-btn-hover-bg:              #FF6B1A !important;
    --bs-btn-hover-border-color:    #FF6B1A !important;
    --bs-btn-active-bg:             #D9520F !important;
    --bs-btn-active-border-color:   #D9520F !important;
    --bs-btn-disabled-bg:           #FF8540 !important;
    --bs-btn-disabled-border-color: #FF8540 !important;
}
.btn-outline-info {
    --bs-btn-color:                 #FF8540 !important;
    --bs-btn-border-color:          #FF8540 !important;
    --bs-btn-hover-bg:              #FF8540 !important;
    --bs-btn-hover-border-color:    #FF8540 !important;
    --bs-btn-active-bg:             #FF8540 !important;
    --bs-btn-active-border-color:   #FF8540 !important;
}

/* --- Dropdown active item --- */
.dropdown-menu,
.dropdown-menu-dark {
    --bs-dropdown-link-active-bg:         #FF6B1A !important;
    --bs-dropdown-link-active-color:      #fff !important;
    --bs-dropdown-link-hover-bg:          #FFE8D6 !important;
    --bs-dropdown-link-hover-color:       #D9520F !important;
}

/* --- Nav pills --- */
.nav-pills {
    --bs-nav-pills-link-active-bg:    #FF6B1A !important;
    --bs-nav-pills-link-active-color: #fff !important;
}

/* --- Pagination --- */
.pagination {
    --bs-pagination-color:              #FF6B1A !important;
    --bs-pagination-bg:                 #fff !important;
    --bs-pagination-border-color:       #FFE8D6 !important;
    --bs-pagination-hover-color:        #D9520F !important;
    --bs-pagination-hover-bg:           #FFE8D6 !important;
    --bs-pagination-hover-border-color: #FFB088 !important;
    --bs-pagination-focus-color:        #D9520F !important;
    --bs-pagination-focus-bg:           #FFE8D6 !important;
    --bs-pagination-focus-box-shadow:   0 0 0 .25rem rgba(255,107,26,.25) !important;
    --bs-pagination-active-color:       #fff !important;
    --bs-pagination-active-bg:          #FF6B1A !important;
    --bs-pagination-active-border-color:#FF6B1A !important;
}

/* --- Alert primary (light blue background) --- */
.alert-primary {
    --bs-alert-color:        #D9520F !important;
    --bs-alert-bg:           #FFE8D6 !important;
    --bs-alert-border-color: #FFB088 !important;
    --bs-alert-link-color:   #B33D08 !important;
}
.alert-info {
    --bs-alert-color:        #D9520F !important;
    --bs-alert-bg:           #FFF2E8 !important;
    --bs-alert-border-color: #FFB088 !important;
    --bs-alert-link-color:   #B33D08 !important;
}

/* --- Progress bar --- */
.progress {
    --bs-progress-bar-bg: #FF6B1A !important;
}

/* --- List group active item --- */
.list-group {
    --bs-list-group-active-color:        #fff !important;
    --bs-list-group-active-bg:           #FF6B1A !important;
    --bs-list-group-active-border-color: #FF6B1A !important;
    --bs-list-group-action-active-bg:    #FFE8D6 !important;
}

/* --- Tables --- */
.table-primary {
    --bs-table-bg:            #FFE8D6 !important;
    --bs-table-border-color:  #FFB088 !important;
    --bs-table-striped-bg:    #FFD6B8 !important;
    --bs-table-hover-bg:      #FFB088 !important;
}
.table-info {
    --bs-table-bg:            #FFF2E8 !important;
    --bs-table-border-color:  #FFB088 !important;
}

/* --- Form control focus ring --- */
.form-control:focus,
.form-select:focus,
.form-check-input:focus,
input.form-control:focus,
textarea.form-control:focus {
    border-color: #FF6B1A !important;
    box-shadow: 0 0 0 .25rem rgba(255,107,26,.25) !important;
    outline: 0;
}

/* --- Form check / switch (blue tick + blue switch) --- */
.form-check-input:checked {
    background-color: #FF6B1A !important;
    border-color:     #FF6B1A !important;
}
.form-check-input:focus {
    border-color: #FF6B1A !important;
    box-shadow:   0 0 0 .25rem rgba(255,107,26,.25) !important;
}
.form-switch .form-check-input:focus {
    background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%27-4 -4 8 8%27%3E%3Ccircle r=%273%27 fill=%27%23FF6B1A%27/%3E%3C/svg%3E") !important;
}

/* --- Bootstrap nav-link active default uses blue text --- */
.nav-link {
    --bs-nav-link-color:       #64748B !important;
    --bs-nav-link-hover-color: #FF6B1A !important;
}
.nav-link.active {
    color: #FF6B1A !important;
}

/* --- Accordion --- */
.accordion {
    --bs-accordion-color:                   #0F172A !important;
    --bs-accordion-bg:                      #fff !important;
    --bs-accordion-border-color:            #E2E8F0 !important;
    --bs-accordion-btn-color:               #0F172A !important;
    --bs-accordion-btn-focus-border-color:  #FF6B1A !important;
    --bs-accordion-btn-focus-box-shadow:    0 0 0 .25rem rgba(255,107,26,.25) !important;
    --bs-accordion-active-color:            #D9520F !important;
    --bs-accordion-active-bg:               #FFE8D6 !important;
}

/* --- Link generic --- */
a:not(.btn):not(.nav-link):not(.dropdown-item) {
    --bs-link-color:       #FF6B1A;
    --bs-link-hover-color: #D9520F;
}

/* --- Spinner / loading indicators that pull from currentColor on .text-primary --- */
.spinner-border.text-primary,
.spinner-grow.text-primary { color: #FF6B1A !important; }
.spinner-border.text-info,
.spinner-grow.text-info    { color: #FF8540 !important; }

/* --- Form-range slider (the thumb is Bootstrap blue) --- */
.form-range::-webkit-slider-thumb { background-color: #FF6B1A !important; }
.form-range::-moz-range-thumb     { background-color: #FF6B1A !important; }
.form-range::-ms-thumb            { background-color: #FF6B1A !important; }
.form-range:focus::-webkit-slider-thumb {
    box-shadow: 0 0 0 1px #fff, 0 0 0 .25rem rgba(255,107,26,.25) !important;
}


/* =====================================================================
   Floating widgets — pin WhatsApp icon to the RIGHT side (LTR + RTL)
   Aster uses logical inset-inline-end which flips to LEFT in RTL.
   Force physical right with !important so it stays on the right.
   ===================================================================== */
.social-chat-icons {
    inset-inline-end: auto !important;
    inset-inline-start: auto !important;
    right: 2% !important;
    left: auto !important;
}
[dir="rtl"] .social-chat-icons,
html[dir="rtl"] .social-chat-icons {
    right: 2% !important;
    left: auto !important;
}