/* ============================================
   Brusite – Premium E-Commerce Design System
   Shop Brunei, Ship Worldwide
   ============================================ */

/* ---------- Design Tokens ---------- */
:root {
    --brand: #d4a017;
    --brand-dark: #b8860b;
    --brand-light: #fdf8e8;
    --brand-rgb: 212, 160, 23;

    --accent: #cf1b1b;
    --accent-rgb: 207, 27, 27;

    --success: #059669;
    --danger: #dc2626;
    --info: #0891b2;

    --gray-50: #f8fafc;
    --gray-100: #f1f5f9;
    --gray-200: #e2e8f0;
    --gray-300: #cbd5e1;
    --gray-400: #94a3b8;
    --gray-500: #64748b;
    --gray-600: #475569;
    --gray-700: #334155;
    --gray-800: #1e293b;
    --gray-900: #0f172a;

    --radius-xs: 6px;
    --radius-sm: 8px;
    --radius: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-full: 9999px;

    --shadow-xs: 0 1px 2px rgba(0,0,0,.05);
    --shadow-sm: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
    --shadow:    0 4px 6px -1px rgba(0,0,0,.07), 0 2px 4px -2px rgba(0,0,0,.05);
    --shadow-md: 0 10px 15px -3px rgba(0,0,0,.08), 0 4px 6px -4px rgba(0,0,0,.04);
    --shadow-lg: 0 20px 25px -5px rgba(0,0,0,.08), 0 8px 10px -6px rgba(0,0,0,.04);
    --shadow-xl: 0 25px 50px -12px rgba(0,0,0,.18);

    --ease: cubic-bezier(.4,0,.2,1);
    --duration: .22s;
}

/* ---------- Reset / Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--gray-900);
    background: #fff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.6;
    overflow-x: hidden;
}

a { transition: color var(--duration) var(--ease); }
img { max-width: 100%; height: auto; }

/* Override Bootstrap primary color */
.text-primary { color: var(--brand) !important; }
.bg-primary:not([class*="bg-opacity"]) { background-color: var(--brand) !important; }
.bg-primary.bg-opacity-10 { background-color: rgba(var(--brand-rgb), 0.1) !important; }
.bg-primary.bg-opacity-25 { background-color: rgba(var(--brand-rgb), 0.25) !important; }
.border-primary { border-color: var(--brand) !important; }
.text-bg-primary { background-color: var(--brand) !important; color: #fff !important; }

h1,h2,h3,h4,h5,h6 {
    letter-spacing: -.025em;
    color: var(--gray-900);
    line-height: 1.25;
}

/* ---------- Bootstrap Overrides ---------- */

/* Buttons */
.btn {
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: .875rem;
    letter-spacing: -.01em;
    padding: .5rem 1rem;
    transition: all var(--duration) var(--ease);
    border: 1.5px solid transparent;
}
.btn:active { transform: scale(.97); }

.btn-primary {
    --bs-btn-bg: var(--brand);
    --bs-btn-color: #fff;
    --bs-btn-border-color: var(--brand);
    --bs-btn-hover-bg: var(--brand-dark);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-border-color: var(--brand-dark);
    --bs-btn-active-bg: var(--brand-dark);
    --bs-btn-active-color: #fff;
    --bs-btn-active-border-color: var(--brand-dark);
}
.btn-primary:hover, .btn-primary:focus-visible {
    box-shadow: 0 4px 14px rgba(var(--brand-rgb),.35);
}

.btn-outline-primary {
    --bs-btn-color: var(--brand);
    --bs-btn-border-color: var(--brand);
    --bs-btn-hover-bg: var(--brand);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-border-color: var(--brand);
    --bs-btn-active-bg: var(--brand-dark);
    --bs-btn-active-color: #fff;
    --bs-btn-active-border-color: var(--brand-dark);
}
.btn-outline-primary:hover {
    box-shadow: 0 4px 12px rgba(var(--brand-rgb),.25);
}

.btn-light {
    --bs-btn-bg: var(--brand);
    --bs-btn-color: #111;
    --bs-btn-border-color: var(--brand);
    --bs-btn-hover-bg: var(--brand-dark);
    --bs-btn-hover-color: #111;
    --bs-btn-hover-border-color: var(--brand-dark);
    --bs-btn-active-bg: var(--brand-dark);
    --bs-btn-active-color: #111;
    --bs-btn-active-border-color: var(--brand-dark);
    font-weight: 700;
}
.btn-light:hover {
    transform: translateY(-1px);
}

.btn-outline-light {
    --bs-btn-color: #fff;
    --bs-btn-border-color: rgba(255,255,255,.5);
    --bs-btn-hover-bg: rgba(255,255,255,.15);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-border-color: #fff;
}

.btn-lg {
    padding: .75rem 2rem;
    font-size: 1rem;
    border-radius: var(--radius);
}
.btn-sm {
    padding: .35rem .75rem;
    font-size: .8rem;
    border-radius: var(--radius-xs);
}

/* Cards */
.card {
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    box-shadow: var(--shadow-xs);
    overflow: hidden;
    background: #fff;
}
.card-header {
    background: #fff;
    border-bottom: 1px solid var(--gray-100);
}

/* Badge */
.badge {
    font-weight: 600;
    letter-spacing: .01em;
    border-radius: var(--radius-xs);
}

/* Forms */
.form-control, .form-select {
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--gray-200);
    padding: .6rem .9rem;
    font-size: .9rem;
    transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
    background: #fff;
}
.form-control:focus, .form-select:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(var(--brand-rgb),.1);
}

/* Alerts */
.alert {
    border-radius: var(--radius-sm);
    border: none;
    font-weight: 500;
    font-size: .9rem;
}

/* Tables */
.table { --bs-table-hover-bg: var(--gray-50); }
.table thead th {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--gray-500);
    font-weight: 700;
    border-bottom: 2px solid var(--gray-200);
    padding: .7rem 1rem;
    white-space: nowrap;
}
.table td { vertical-align: middle; padding: .7rem 1rem; }

/* Dropdown */
.dropdown-menu {
    border-radius: var(--radius);
    border: 1px solid var(--gray-200);
    box-shadow: var(--shadow-lg);
    padding: .4rem;
    animation: dropIn .15s var(--ease);
}
.dropdown-item {
    border-radius: var(--radius-xs);
    padding: .45rem .75rem;
    font-size: .875rem;
    font-weight: 500;
}
.dropdown-item:hover { background: var(--gray-50); }
.dropdown-item i { width: 18px; }

@keyframes dropIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Pagination */
.page-link {
    border-radius: var(--radius-sm) !important;
    margin: 0 2px;
    border: none;
    font-weight: 600;
    font-size: .85rem;
    color: var(--gray-600);
}
.page-item.active .page-link {
    background: var(--brand);
    color: #fff;
    box-shadow: 0 2px 6px rgba(var(--brand-rgb),.3);
}

/* ===================================================
   LAYOUT - TOP BAR
   =================================================== */
.top-bar {
    font-size: .75rem;
    background: #111 !important;
    letter-spacing: .015em;
    padding: .35rem 0;
    border-bottom: 2px solid var(--brand);
}
.top-bar a {
    opacity: .75;
    transition: opacity var(--duration) var(--ease);
}
.top-bar a:hover { opacity: 1; text-decoration: underline !important; }

/* ===================================================
   LAYOUT - NAVBAR
   =================================================== */
.navbar {
    padding: .5rem 0;
    background: rgba(255,255,255,.97) !important;
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border-bottom: 1px solid var(--gray-200);
    z-index: 1040;
}
.navbar-brand {
    font-size: 1.5rem;
    letter-spacing: -.04em;
    font-weight: 800;
}
.navbar-brand img {
    height: 28px;
    width: auto;
    display: block;
}
.navbar-brand .text-primary { color: var(--brand) !important; }
.navbar-brand span.text-dark { color: #111 !important; }

/* Search bar */
.navbar .input-group { max-width: 520px; }
.navbar .input-group .form-control {
    border-right: none;
    background: var(--gray-50);
    border-color: var(--gray-200);
    border-radius: var(--radius-full) 0 0 var(--radius-full);
    padding-left: 1.15rem;
    font-size: .875rem;
}
.navbar .input-group .form-control:focus {
    background: #fff;
    border-color: var(--brand);
}
.navbar .input-group .btn {
    border-radius: 0 var(--radius-full) var(--radius-full) 0;
    padding: 0 1.15rem;
}

/* Nav buttons */
.navbar .btn-outline-secondary {
    border-color: var(--gray-200);
    color: var(--gray-600);
}
.navbar .btn-outline-secondary:hover {
    background: var(--gray-50);
    border-color: var(--gray-300);
    color: var(--gray-800);
}

/* Mobile search */
.d-lg-none.bg-light {
    background: var(--gray-50) !important;
    border-bottom: 1px solid var(--gray-200);
}

/* ===================================================
   LAYOUT - CATEGORY NAV (Scrollable with Arrows)
   =================================================== */
.category-nav {
    overflow: visible;
    background: linear-gradient(180deg, #fff 0%, #fafafa 100%) !important;
    border-bottom: 2px solid var(--gray-200) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
.category-nav .container {
    position: relative;
}
.category-scroll-wrapper {
    display: flex;
    gap: 2px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: var(--gray-300) transparent;
    padding: 0 36px;
    -webkit-overflow-scrolling: touch;
}
.category-scroll-wrapper::-webkit-scrollbar {
    height: 4px;
}
.category-scroll-wrapper::-webkit-scrollbar-track {
    background: transparent;
}
.category-scroll-wrapper::-webkit-scrollbar-thumb {
    background: var(--gray-300);
    border-radius: 4px;
}
.category-scroll-wrapper::-webkit-scrollbar-thumb:hover {
    background: var(--gray-400);
}

/* Scroll arrows */
.category-scroll-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--gray-300);
    background: #fff;
    color: var(--gray-600);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,.1);
    transition: all .2s ease;
    font-size: .75rem;
    padding: 0;
}
.category-scroll-btn:hover {
    background: var(--brand);
    color: #fff;
    border-color: var(--brand);
    box-shadow: 0 4px 12px rgba(212,160,23,.3);
}
.category-scroll-left {
    left: -4px;
}
.category-scroll-right {
    right: -4px;
}

.category-link {
    transition: all var(--duration) var(--ease);
    border-bottom: 3px solid transparent;
    font-weight: 600;
    color: var(--gray-600) !important;
    white-space: nowrap;
    font-size: .82rem;
    padding: .65rem 1rem !important;
    letter-spacing: .01em;
    position: relative;
    flex-shrink: 0;
}
.category-link:hover {
    color: var(--brand) !important;
    border-bottom-color: var(--brand);
    background: rgba(212,160,23,.05);
}
.category-link.active {
    color: var(--brand) !important;
    border-bottom-color: var(--brand);
    background: rgba(212,160,23,.08);
}
.category-link i {
    font-size: .78rem;
    opacity: .8;
}
.category-link:hover i {
    opacity: 1;
}
.category-link-garage {
    color: #d97706 !important;
}
.category-link-garage:hover {
    color: #b45309 !important;
    border-bottom-color: #d97706;
    background: rgba(217,119,6,.06);
}
.category-link-rental {
    color: #16a34a !important;
}
.category-link-rental:hover {
    color: #15803d !important;
    border-bottom-color: #16a34a;
    background: rgba(22,163,74,.06);
}
.category-link-hotel {
    color: #dc2626 !important;
}
.category-link-hotel:hover {
    color: #b91c1c !important;
    border-bottom-color: #dc2626;
    background: rgba(220,38,38,.06);
}
.category-link-auction {
    color: #6366f1 !important;
}
.category-link-auction:hover {
    color: #4f46e5 !important;
    border-bottom-color: #6366f1;
    background: rgba(99,102,241,.06);
}
.category-divider {
    width: 1px;
    background: var(--gray-300);
    margin: .45rem .15rem;
    flex-shrink: 0;
}

/* Tag pills on homepage — solid colored pills like PrimeNG tags */
.tag-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: .4rem .85rem;
    border-radius: 50px;
    font-size: .8rem;
    font-weight: 600;
    color: #fff !important;
    text-decoration: none !important;
    transition: all .2s ease;
    border: none;
}
.tag-pill:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(0,0,0,.2);
    filter: brightness(1.1);
    color: #fff !important;
}
.tag-pill .tag-count {
    background: rgba(255,255,255,.25);
    padding: .1rem .4rem;
    border-radius: 50px;
    font-size: .65rem;
    font-weight: 700;
}

/* Ad carousel */
.ad-carousel-section {
    background: linear-gradient(180deg, #f8f9fa 0%, #fff 100%);
}
.ad-slide {
    border-radius: 12px;
    overflow: hidden;
    min-height: 120px;
    display: flex;
    align-items: center;
    transition: transform .3s ease;
}
.ad-slide:hover {
    transform: scale(1.01);
}
.carousel-control-prev,
.carousel-control-next {
    width: 36px;
    height: 36px;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,.4) !important;
    border-radius: 50%;
    opacity: .7;
}
.carousel-control-prev { left: 10px; }
.carousel-control-next { right: 10px; }
.carousel-control-prev:hover,
.carousel-control-next:hover { opacity: 1; }

/* ===================================================
   HERO SECTION
   =================================================== */
.hero-section {
    background: linear-gradient(165deg, #0a0a0a 0%, #161310 40%, #1a1507 70%, #0a0a0a 100%);
    position: relative;
    overflow: hidden;
    padding: 6rem 0 3rem !important;
}
.hero-section::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background:
        radial-gradient(ellipse 600px 400px at 50% 0%, rgba(212,160,23,.07) 0%, transparent 100%),
        radial-gradient(ellipse 400px 300px at 80% 100%, rgba(212,160,23,.04) 0%, transparent 100%);
    pointer-events: none;
}
.hero-section .container { position: relative; z-index: 1; }

/* Hero Badge */
.hero-badge {
    background: rgba(212,160,23,.1);
    border: 1px solid rgba(212,160,23,.2);
    border-radius: 999px;
    padding: .4rem 1rem;
    font-size: .82rem;
    color: var(--brand);
}
.badge-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--brand);
    display: inline-block;
    animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot {
    0%,100% { opacity: 1; box-shadow: 0 0 0 0 rgba(212,160,23,.4); }
    50% { opacity: .7; box-shadow: 0 0 0 6px rgba(212,160,23,0); }
}

/* Hero Typography */
.hero-title {
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.03em;
    color: #fff;
}
.text-gold { color: var(--brand); }
.hero-subtitle {
    color: rgba(255,255,255,.6);
    font-weight: 400;
    line-height: 1.7;
    max-width: 520px;
    font-size: 1.1rem;
}

/* Hero Buttons */
.btn-gold {
    --bs-btn-bg: var(--brand);
    --bs-btn-color: #0a0a0a;
    --bs-btn-border-color: var(--brand);
    --bs-btn-hover-bg: var(--brand-dark);
    --bs-btn-hover-color: #0a0a0a;
    --bs-btn-hover-border-color: var(--brand-dark);
    --bs-btn-active-bg: #a07a0a;
    --bs-btn-active-color: #0a0a0a;
    --bs-btn-active-border-color: #a07a0a;
    font-weight: 700;
}
.btn-gold:hover, .btn-gold:focus-visible {
    box-shadow: 0 8px 24px rgba(212,160,23,.3);
    transform: translateY(-2px);
}

/* Trust pills row */
.hero-trust-row {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: .5rem;
}
.hero-trust-pill {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .78rem;
    color: rgba(255,255,255,.45);
    font-weight: 500;
}
.hero-trust-pill i {
    color: var(--brand);
    font-size: .72rem;
}

/* ===================================================
   PRODUCT CARDS
   =================================================== */
.product-card {
    border: 1px solid var(--gray-200);
    border-radius: var(--radius) !important;
    background: #fff;
    overflow: hidden;
    transition: transform var(--duration) var(--ease),
                box-shadow var(--duration) var(--ease),
                border-color var(--duration) var(--ease);
}
.product-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg) !important;
    border-color: var(--gray-300);
}
.product-card .position-relative { overflow: hidden; }
.product-card .card-img-top {
    transition: transform .35s var(--ease);
}
.product-card .card-img-top img {
    transition: transform .35s var(--ease);
}
.product-card:hover .card-img-top img { transform: scale(1.04); }

.product-image-fallback {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at 20% 20%, rgba(245, 158, 11, .2), transparent 38%),
        radial-gradient(circle at 80% 15%, rgba(59, 130, 246, .18), transparent 36%),
        linear-gradient(140deg, #f8fafc 0%, #eef2f7 55%, #e5ebf4 100%);
    border-bottom: 1px solid rgba(15, 23, 42, .06);
    overflow: hidden;
}
.product-image-fallback::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(255,255,255,.28), transparent 45%);
    pointer-events: none;
}
.product-image-fallback-icon {
    position: relative;
    z-index: 1;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.85rem;
    background: rgba(255,255,255,.55);
    box-shadow: 0 8px 20px rgba(15, 23, 42, .08);
    color: #64748b;
    opacity: .92;
}

.product-card .card-body {
    padding: .85rem !important;
}
.product-card .card-title {
    font-weight: 600;
    line-height: 1.35;
    color: var(--gray-800);
    font-size: .85rem;
}
.product-card .fw-bold.text-primary {
    color: var(--brand) !important;
    font-size: 1rem;
    font-weight: 700;
}
.product-card .badge {
    font-size: .68rem;
    padding: .3em .55em;
    border-radius: var(--radius-xs);
    font-weight: 700;
}
.product-card .btn-primary.btn-sm {
    border-radius: var(--radius-sm);
    font-weight: 600;
    padding: .4rem .6rem;
    font-size: .78rem;
}

/* Hover shadow utility */
.hover-shadow {
    transition: box-shadow var(--duration) var(--ease), transform var(--duration) var(--ease);
    border: 1px solid var(--gray-200);
}
.hover-shadow:hover {
    box-shadow: var(--shadow-md) !important;
    transform: translateY(-3px);
    border-color: var(--gray-300);
}

/* ===================================================
   PRODUCT DETAIL
   =================================================== */
.product-gallery .main-image {
    max-height: 520px;
    object-fit: contain;
    width: 100%;
    background: var(--gray-50);
    border-radius: var(--radius);
    border: 1px solid var(--gray-200);
}
.product-gallery .thumbnails {
    display: flex;
    gap: 10px;
    margin-top: 12px;
    overflow-x: auto;
    scrollbar-width: none;
}
.product-gallery .thumbnails::-webkit-scrollbar { display: none; }
.product-gallery .thumbnail {
    width: 68px; height: 68px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    cursor: pointer;
    border: 2px solid var(--gray-200);
    transition: all var(--duration) var(--ease);
    flex-shrink: 0;
}
.product-gallery .thumbnail:hover { border-color: var(--gray-400); }
.product-gallery .thumbnail.active {
    border-color: var(--brand);
    box-shadow: 0 0 0 2px rgba(var(--brand-rgb),.15);
}

/* ===================================================
   STAR RATING
   =================================================== */
.star-rating { display: inline-flex; gap: 1px; }
.star-rating .fas.fa-star { color: var(--accent); }
.star-rating .far.fa-star { color: var(--gray-300); }

.text-warning .fas.fa-star { color: var(--accent); }
.text-warning .far.fa-star { color: var(--gray-300); }

/* ===================================================
   CART
   =================================================== */
.cart-item {
    transition: background-color var(--duration) var(--ease);
    border-radius: var(--radius-sm);
}
.cart-item:hover { background-color: var(--gray-50); }

/* ===================================================
   ACCOUNT SIDEBAR
   =================================================== */
.account-sidebar .nav-link {
    color: var(--gray-500);
    border-radius: var(--radius-sm);
    padding: .6rem 1rem;
    margin-bottom: 2px;
    font-weight: 500;
    font-size: .875rem;
    transition: all var(--duration) var(--ease);
}
.account-sidebar .nav-link:hover {
    background: var(--gray-100);
    color: var(--brand);
}
.account-sidebar .nav-link.active {
    background: var(--brand);
    color: #fff;
    box-shadow: 0 2px 8px rgba(var(--brand-rgb),.3);
}
.account-sidebar .nav-link i { width: 20px; text-align: center; }

/* ===================================================
   ORDER TIMELINE
   =================================================== */
.order-timeline {
    position: relative;
    padding-left: 32px;
}
.order-timeline::before {
    content: '';
    position: absolute;
    left: 11px; top: 0; bottom: 0;
    width: 2px;
    background: var(--gray-200);
}
.order-timeline .timeline-item {
    position: relative;
    padding-bottom: 22px;
}
.order-timeline .timeline-item::before {
    content: '';
    position: absolute;
    left: -25px; top: 5px;
    width: 12px; height: 12px;
    border-radius: 50%;
    background: var(--brand);
    border: 3px solid #fff;
    box-shadow: 0 0 0 2px var(--brand);
}
.order-timeline .timeline-item.completed::before {
    background: var(--success);
    box-shadow: 0 0 0 2px var(--success);
}

/* ===================================================
   SHIPPING CALCULATOR
   =================================================== */
.shipping-calculator .card {
    border: 2px solid var(--gray-200);
    cursor: pointer;
    transition: all var(--duration) var(--ease);
}
.shipping-calculator .card:hover {
    border-color: var(--gray-400);
    box-shadow: var(--shadow);
}
.shipping-calculator .card.selected {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(var(--brand-rgb),.1);
    background: var(--brand-light);
}

/* ===================================================
   WAREHOUSE PACKAGE
   =================================================== */
.warehouse-package {
    border-left: 4px solid var(--gray-200);
    border-radius: var(--radius-sm);
}
.warehouse-package.received  { border-left-color: var(--info); }
.warehouse-package.inspected { border-left-color: var(--accent); }
.warehouse-package.stored    { border-left-color: var(--success); }
.warehouse-package.shipped   { border-left-color: var(--gray-500); }

/* ===================================================
   NOTIFICATIONS
   =================================================== */
.notification-item {
    border-left: 3px solid transparent;
    transition: all var(--duration) var(--ease);
}
.notification-item.unread {
    border-left-color: var(--brand);
    background: var(--brand-light);
}
.notification-item:hover { background: var(--gray-50); }

/* ===================================================
   HOMEPAGE SECTIONS
   =================================================== */
section.bg-light { background: var(--gray-50) !important; }

/* How-it-works steps */
.step-icon {
    width: 72px; height: 72px;
    border-radius: var(--radius-lg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    background: var(--brand-light);
    color: var(--brand);
    transition: all var(--duration) var(--ease);
}
.step-icon:hover, .col-md-3:hover .step-icon {
    background: var(--brand);
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(var(--brand-rgb),.3);
}

/* Section headings */
.section-heading {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -.03em;
}
section h2.fw-bold { font-size: 1.5rem; }

/* Category cards */
.category-card {
    text-align: center;
    padding: 1.25rem .5rem;
    border-radius: var(--radius) !important;
    border: 1px solid var(--gray-200);
    background: #fff;
    transition: all var(--duration) var(--ease);
}
.category-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
    border-color: var(--gray-300);
}
.category-card .cat-icon {
    width: 52px; height: 52px;
    border-radius: var(--radius);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--brand-light);
    color: var(--brand);
    font-size: 1.25rem;
    margin-bottom: .6rem;
    transition: all var(--duration) var(--ease);
}
.category-card:hover .cat-icon {
    background: var(--brand);
    color: #fff;
}

/* Trust badges */
.trust-card {
    text-align: center;
    padding: 1.5rem 1rem;
    border-radius: var(--radius);
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    transition: all var(--duration) var(--ease);
}
.trust-card:hover {
    background: #fff;
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
}
.trust-card .trust-icon {
    width: 56px; height: 56px;
    border-radius: var(--radius-full);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    margin-bottom: .65rem;
}
.trust-card .trust-icon i {
    display: inline-block;
    line-height: 1;
}

/* CTA Section */
.cta-section {
    background: linear-gradient(135deg, #111 0%, #1a1a1a 60%, #2a2a2a 100%);
    position: relative;
    overflow: hidden;
    padding-top: 3.5rem !important;
    padding-bottom: 3.5rem !important;
}
.cta-section::before {
    content: '';
    position: absolute;
    width: 300px; height: 300px;
    top: -100px; right: -50px;
    border-radius: 50%;
    background: rgba(255,255,255,.06);
}
.cta-section h2,
.cta-section p,
.cta-section .lead {
    color: #fff !important;
}

/* ===================================================
   FOOTER
   =================================================== */
footer {
    background: #111 !important;
    border-top: 3px solid var(--brand);
}
footer h5, footer h6 { color: #fff; font-weight: 700; }
footer a {
    color: var(--gray-400) !important;
    transition: color var(--duration) var(--ease) !important;
    font-size: .875rem;
}
footer a:hover { color: #fff !important; }
footer hr { border-color: var(--gray-800) !important; }
footer .text-light-emphasis { color: var(--gray-400) !important; }

footer .social-link {
    width: 36px; height: 36px;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--gray-800);
    color: var(--gray-400) !important;
    transition: all var(--duration) var(--ease);
    font-size: .9rem;
}
footer .social-link:hover {
    background: var(--brand);
    color: #111 !important;
    transform: translateY(-2px);
}

/* ===================================================
   AUTH PAGES
   =================================================== */
.card.shadow-sm { box-shadow: var(--shadow) !important; }
.card.shadow { box-shadow: var(--shadow-md) !important; }

.auth-card {
    border: none;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    max-width: 440px;
    margin: 0 auto;
}

/* ===================================================
   CART BADGE PULSE
   =================================================== */
.cart-badge {
    font-size: .6rem;
    animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
    0%,100% { transform: translate(-50%,-50%) scale(1); }
    50%     { transform: translate(-50%,-50%) scale(1.2); }
}

/* ===================================================
   SCROLLBAR
   =================================================== */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--gray-50); }
::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--gray-400); }

/* Selection */
::selection {
    background: rgba(var(--brand-rgb),.12);
    color: var(--brand-dark);
}

/* ===================================================
   RESPONSIVE - MOBILE FIRST ADJUSTMENTS
   =================================================== */

/* --- Orders nav-tabs horizontal scroll on mobile --- */
.nav-tabs-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.nav-tabs-scroll::-webkit-scrollbar { display: none; }
.nav-tabs-scroll .nav-item { flex-shrink: 0; }

/* --- Mobile filter toggle for product listing --- */
/* Shown/hidden via Bootstrap d-lg-none on the container */

/* --- Account sidebar collapse on mobile --- */
/* Toggle button uses d-lg-none Bootstrap class */

/* --- Checkout success payment detail labels on small screens --- */
.payment-detail-row .col-sm-4 { min-width: 120px; }

/* 992px  (tablets) */
@media (max-width: 991.98px) {
    .hero-section { padding: 3rem 0 !important; }
    .hero-section h1, .hero-title { font-size: 2rem; }

    /* Product listing: hide filter sidebar, show toggle button */
    .product-filter-sidebar { display: none; }
    .product-filter-sidebar.show { display: block; }

    /* Account sidebar: handled via d-none d-lg-block Bootstrap classes */
}

/* 768px (small tablets / large phones) */
@media (max-width: 767.98px) {
    .hero-section { padding: 2.25rem 0 !important; }
    .hero-section h1, .hero-title { font-size: 1.65rem; }
    .hero-subtitle { font-size: .95rem; }
    .hero-section .btn-lg { padding: .6rem 1.25rem; font-size: .9rem; }
    section h2.fw-bold, .section-heading { font-size: 1.2rem; }

    .product-card .card-body { padding: .65rem !important; }
    .product-card .card-title { font-size: .78rem !important; }
    .product-card .fw-bold.text-primary { font-size: .88rem; }
    .product-card .btn-sm { font-size: .72rem; padding: .3rem .5rem; }

    /* Category nav: smaller arrows on mobile */
    .category-scroll-btn { width: 26px; height: 26px; font-size: .65rem; }
    .category-scroll-left { left: -2px; }
    .category-scroll-right { right: -2px; }
    .category-scroll-wrapper { padding: 0 28px; }
    .category-link { font-size: .76rem; padding: .55rem .7rem !important; }

    footer .row { gap: 1.5rem 0; }

    /* Checkout: stack left/right columns better */
    .checkout-form .col-lg-8,
    .checkout-form .col-lg-4 { flex: 0 0 100%; max-width: 100%; }

    /* Cart table: hide Image column header, shrink cells */
    .cart-table th:first-child,
    .cart-table td:first-child { display: none; }

    /* Order card header: stack on mobile */
    .order-card-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.5rem;
    }

    /* Checkout success: stack label/value cols */
    .payment-detail-row .col-sm-4,
    .payment-detail-row .col-sm-8 {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .payment-detail-row .col-sm-4 { margin-bottom: 0.25rem; }

    /* Admin filter rows: full width on mobile */
    .filter-form .col-md-2,
    .filter-form .col-md-3,
    .filter-form .col-md-4,
    .filter-form .col-md-5 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* 576px (phones) */
@media (max-width: 575.98px) {
    .top-bar { font-size: .7rem; padding: .25rem 0; }

    .navbar-brand { font-size: 1.3rem; }
    .navbar-brand img { height: 24px; width: auto; }
    .navbar .gap-2 { gap: .35rem !important; }
    .navbar .btn-sm { padding: .3rem .55rem; font-size: .75rem; }

    .hero-section { padding: 2.5rem 0 1.5rem !important; }
    .hero-section h1, .hero-title { font-size: 1.4rem; line-height: 1.2; }
    .hero-subtitle { font-size: .88rem; line-height: 1.6; }
    .hero-section .d-flex.gap-3 { gap: .5rem !important; }
    .hero-section .btn-lg { padding: .5rem 1rem; font-size: .85rem; }
    .hero-trust-pill span { font-size: .7rem; }

    section { padding: 2rem 0 !important; }
    section h2.fw-bold, .section-heading { font-size: 1.1rem; }

    .product-card .card-img-top { height: 180px !important; }
    .product-card .card-body { padding: .5rem !important; }
    .product-card .card-title { font-size: .72rem !important; line-height: 1.3; }
    .product-card .fw-bold.text-primary { font-size: .82rem; }
    .product-card .text-decoration-line-through { font-size: .65rem !important; }
    .product-card .btn-sm { font-size: .68rem; padding: .25rem .4rem; }
    .product-card .small.text-warning { font-size: .65rem !important; }

    .col-6 { padding-left: 6px !important; padding-right: 6px !important; }
    .row.g-3 { --bs-gutter-x: 12px; --bs-gutter-y: 12px; }

    footer { padding-top: 2rem !important; }
    footer h5 { font-size: 1.1rem; }
    footer h6 { font-size: .9rem; }
    footer a { font-size: .82rem; }
    footer .col-lg-4 p { font-size: .82rem; }
    footer .col-lg-3:first-child { margin-bottom: .5rem; }
    footer .col-6,
    footer .col-12 { padding-left: 16px !important; padding-right: 12px !important; }

    .cta-section { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
    .cta-section h2 { font-size: 1.3rem; }
    .cta-section .lead { font-size: .92rem; }

    /* Page titles smaller on phones */
    h2.mb-4, h4.mb-4 { font-size: 1.25rem; }

    /* Tables: make text smaller for mobile */
    .table td, .table th { font-size: .82rem; padding: .5rem .4rem; }

    /* Checkout success QR code smaller */
    .checkout-success-qr { max-width: 180px !important; max-height: 180px !important; }

    /* Card bodies: tighter padding on phones */
    .card-body { padding: .875rem; }

    /* Buttons in card headers: smaller */
    .card-header .btn-sm { font-size: .72rem; padding: .25rem .5rem; }

    /* Order summary sticky: disable sticky on mobile */
    .order-summary-sticky { position: static !important; }

    /* Review form: stack rating radios */
    .review-rating-group .form-check-inline {
        display: block;
        margin-bottom: .25rem;
    }

    /* Product detail: quantity + add to cart stack */
    .product-detail-actions .col-auto,
    .product-detail-actions .col {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .product-detail-actions .col-auto { margin-bottom: .5rem; }
    .product-detail-actions input[type="number"] { width: 100% !important; }

    /* Trust badges: tighter text */
    .trust-card h6 { font-size: .75rem; }
    .trust-card small { font-size: .7rem; }

    /* Payment methods page header: stack on small screens */
    .page-header-flex {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.75rem;
    }
    .page-header-flex .btn { width: 100%; }
}

/* 400px (very small phones) */
@media (max-width: 399.98px) {
    .hero-section h1, .hero-title { font-size: 1.2rem; }
    .hero-section .lead { font-size: .8rem; }
    .product-card .card-img-top { height: 150px !important; }
    .product-card .card-title { font-size: .68rem !important; }

    /* Very small: category cards */
    .category-card { padding: .5rem .25rem; }
    .cat-icon { width: 36px; height: 36px; font-size: .85rem; }
    .category-card h6 { font-size: .68rem !important; }

    /* Even tighter table cells */
    .table td, .table th { font-size: .75rem; padding: .35rem .25rem; }
}

/* ===================================================
   LEGAL / POLICY PAGES
   =================================================== */
.legal-page {
    font-size: 0.95rem;
    line-height: 1.75;
    color: #333;
}
.legal-page h3 {
    margin-top: 2rem;
    margin-bottom: 0.75rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: #1a1a1a;
    border-bottom: 2px solid #f0c14b;
    padding-bottom: 0.4rem;
}
.legal-page h4 {
    margin-top: 1.25rem;
    margin-bottom: 0.5rem;
    font-size: 1.05rem;
    font-weight: 600;
    color: #333;
}
.legal-page ul, .legal-page ol {
    padding-left: 1.5rem;
}
.legal-page li {
    margin-bottom: 0.4rem;
}
.legal-page .table {
    font-size: 0.9rem;
    margin-top: 0.75rem;
    margin-bottom: 1rem;
}
.legal-page .alert {
    font-size: 0.9rem;
}
.legal-page a {
    color: #d4a528;
    font-weight: 500;
}
.legal-page a:hover {
    color: #b8941e;
    text-decoration: underline;
}

/* ===================================================
   DARK MODE
   =================================================== */

/* --- Design Tokens Override --- */
[data-bs-theme="dark"] {
    --gray-50: #1a1c24;
    --gray-100: #1e2028;
    --gray-200: #2a2d38;
    --gray-300: #353843;
    --gray-400: #4b5563;
    --gray-500: #64748b;
    --gray-600: #94a3b8;
    --gray-700: #cbd5e1;
    --gray-800: #e2e8f0;
    --gray-900: #f1f5f9;
    --brand-light: rgba(212,160,23,.1);

    --shadow-xs: 0 1px 2px rgba(0,0,0,.2);
    --shadow-sm: 0 1px 3px rgba(0,0,0,.25), 0 1px 2px rgba(0,0,0,.15);
    --shadow:    0 4px 6px -1px rgba(0,0,0,.3), 0 2px 4px -2px rgba(0,0,0,.2);
    --shadow-md: 0 10px 15px -3px rgba(0,0,0,.35), 0 4px 6px -4px rgba(0,0,0,.2);
    --shadow-lg: 0 20px 25px -5px rgba(0,0,0,.4), 0 8px 10px -6px rgba(0,0,0,.25);
    --shadow-xl: 0 25px 50px -12px rgba(0,0,0,.55);
}

/* --- Body & Base --- */
[data-bs-theme="dark"] body {
    background: #0f1117;
    color: #e2e8f0;
}

/* --- Headings --- */
[data-bs-theme="dark"] h1,
[data-bs-theme="dark"] h2,
[data-bs-theme="dark"] h3,
[data-bs-theme="dark"] h4,
[data-bs-theme="dark"] h5,
[data-bs-theme="dark"] h6 {
    color: #f1f5f9;
}

/* --- Links --- */
[data-bs-theme="dark"] a {
    color: #d4a017;
}
[data-bs-theme="dark"] a:hover {
    color: #e8b82f;
}

/* --- Text utilities --- */
[data-bs-theme="dark"] .text-muted {
    color: #64748b !important;
}
[data-bs-theme="dark"] .text-dark {
    color: #e2e8f0 !important;
}
[data-bs-theme="dark"] .text-body {
    color: #e2e8f0 !important;
}

/* --- Buttons (override Bootstrap CSS custom properties + direct props) --- */

/* btn-primary */
[data-bs-theme="dark"] .btn-primary {
    --bs-btn-color: #111 !important;
    --bs-btn-bg: #d4a017 !important;
    --bs-btn-border-color: #d4a017 !important;
    --bs-btn-hover-color: #111 !important;
    --bs-btn-hover-bg: #b8860b !important;
    --bs-btn-hover-border-color: #b8860b !important;
    --bs-btn-active-color: #111 !important;
    --bs-btn-active-bg: #a07a0a !important;
    --bs-btn-active-border-color: #a07a0a !important;
    --bs-btn-disabled-color: #111 !important;
    --bs-btn-disabled-bg: #d4a017 !important;
    --bs-btn-disabled-border-color: #d4a017 !important;
    color: #111 !important;
    background-color: #d4a017 !important;
    border-color: #d4a017 !important;
}
[data-bs-theme="dark"] .btn-primary:hover,
[data-bs-theme="dark"] .btn-primary:focus-visible {
    color: #111 !important;
    background-color: #b8860b !important;
    border-color: #b8860b !important;
}

/* btn-secondary */
[data-bs-theme="dark"] .btn-secondary {
    --bs-btn-color: #e2e8f0 !important;
    --bs-btn-bg: #353843 !important;
    --bs-btn-border-color: #353843 !important;
    --bs-btn-hover-color: #f1f5f9 !important;
    --bs-btn-hover-bg: #4b5563 !important;
    --bs-btn-hover-border-color: #4b5563 !important;
    color: #e2e8f0 !important;
    background-color: #353843 !important;
    border-color: #353843 !important;
}
[data-bs-theme="dark"] .btn-secondary:hover,
[data-bs-theme="dark"] .btn-secondary:focus-visible {
    color: #f1f5f9 !important;
    background-color: #4b5563 !important;
    border-color: #4b5563 !important;
}

/* btn-success */
[data-bs-theme="dark"] .btn-success {
    --bs-btn-color: #fff !important;
    --bs-btn-bg: #059669 !important;
    --bs-btn-border-color: #059669 !important;
    --bs-btn-hover-color: #fff !important;
    --bs-btn-hover-bg: #047857 !important;
    --bs-btn-hover-border-color: #047857 !important;
    color: #fff !important;
    background-color: #059669 !important;
    border-color: #059669 !important;
}
[data-bs-theme="dark"] .btn-success:hover,
[data-bs-theme="dark"] .btn-success:focus-visible {
    color: #fff !important;
    background-color: #047857 !important;
    border-color: #047857 !important;
}

/* btn-danger */
[data-bs-theme="dark"] .btn-danger {
    --bs-btn-color: #fff !important;
    --bs-btn-bg: #dc2626 !important;
    --bs-btn-border-color: #dc2626 !important;
    --bs-btn-hover-color: #fff !important;
    --bs-btn-hover-bg: #b91c1c !important;
    --bs-btn-hover-border-color: #b91c1c !important;
    color: #fff !important;
    background-color: #dc2626 !important;
    border-color: #dc2626 !important;
}
[data-bs-theme="dark"] .btn-danger:hover,
[data-bs-theme="dark"] .btn-danger:focus-visible {
    color: #fff !important;
    background-color: #b91c1c !important;
    border-color: #b91c1c !important;
}

/* btn-warning */
[data-bs-theme="dark"] .btn-warning {
    --bs-btn-color: #111 !important;
    --bs-btn-bg: #d4a017 !important;
    --bs-btn-border-color: #d4a017 !important;
    --bs-btn-hover-color: #111 !important;
    --bs-btn-hover-bg: #b8860b !important;
    --bs-btn-hover-border-color: #b8860b !important;
    color: #111 !important;
    background-color: #d4a017 !important;
    border-color: #d4a017 !important;
}
[data-bs-theme="dark"] .btn-warning:hover,
[data-bs-theme="dark"] .btn-warning:focus-visible {
    color: #111 !important;
    background-color: #b8860b !important;
    border-color: #b8860b !important;
}

/* btn-info */
[data-bs-theme="dark"] .btn-info {
    --bs-btn-color: #fff !important;
    --bs-btn-bg: #0891b2 !important;
    --bs-btn-border-color: #0891b2 !important;
    --bs-btn-hover-color: #fff !important;
    --bs-btn-hover-bg: #0e7490 !important;
    --bs-btn-hover-border-color: #0e7490 !important;
    color: #fff !important;
    background-color: #0891b2 !important;
    border-color: #0891b2 !important;
}
[data-bs-theme="dark"] .btn-info:hover,
[data-bs-theme="dark"] .btn-info:focus-visible {
    color: #fff !important;
    background-color: #0e7490 !important;
    border-color: #0e7490 !important;
}

/* btn-light */
[data-bs-theme="dark"] .btn-light {
    --bs-btn-color: #e2e8f0 !important;
    --bs-btn-bg: #2a2d38 !important;
    --bs-btn-border-color: #2a2d38 !important;
    --bs-btn-hover-color: #f1f5f9 !important;
    --bs-btn-hover-bg: #353843 !important;
    --bs-btn-hover-border-color: #353843 !important;
    color: #e2e8f0 !important;
    background-color: #2a2d38 !important;
    border-color: #2a2d38 !important;
}
[data-bs-theme="dark"] .btn-light:hover,
[data-bs-theme="dark"] .btn-light:focus-visible {
    color: #f1f5f9 !important;
    background-color: #353843 !important;
    border-color: #353843 !important;
}

/* btn-dark (inverted in dark mode) */
[data-bs-theme="dark"] .btn-dark {
    --bs-btn-color: #111 !important;
    --bs-btn-bg: #e2e8f0 !important;
    --bs-btn-border-color: #e2e8f0 !important;
    --bs-btn-hover-color: #111 !important;
    --bs-btn-hover-bg: #f1f5f9 !important;
    --bs-btn-hover-border-color: #f1f5f9 !important;
    color: #111 !important;
    background-color: #e2e8f0 !important;
    border-color: #e2e8f0 !important;
}
[data-bs-theme="dark"] .btn-dark:hover,
[data-bs-theme="dark"] .btn-dark:focus-visible {
    color: #111 !important;
    background-color: #f1f5f9 !important;
    border-color: #f1f5f9 !important;
}

/* btn-outline-primary */
[data-bs-theme="dark"] .btn-outline-primary {
    --bs-btn-color: #d4a017 !important;
    --bs-btn-border-color: #d4a017 !important;
    --bs-btn-hover-color: #111 !important;
    --bs-btn-hover-bg: #d4a017 !important;
    --bs-btn-hover-border-color: #d4a017 !important;
    color: #d4a017 !important;
    background-color: transparent !important;
    border-color: #d4a017 !important;
}
[data-bs-theme="dark"] .btn-outline-primary:hover,
[data-bs-theme="dark"] .btn-outline-primary:focus-visible {
    color: #111 !important;
    background-color: #d4a017 !important;
    border-color: #d4a017 !important;
}

/* btn-outline-secondary */
[data-bs-theme="dark"] .btn-outline-secondary {
    --bs-btn-color: #94a3b8 !important;
    --bs-btn-border-color: #2a2d38 !important;
    --bs-btn-hover-color: #f1f5f9 !important;
    --bs-btn-hover-bg: #2a2d38 !important;
    --bs-btn-hover-border-color: #353843 !important;
    color: #94a3b8 !important;
    background-color: transparent !important;
    border-color: #2a2d38 !important;
}
[data-bs-theme="dark"] .btn-outline-secondary:hover,
[data-bs-theme="dark"] .btn-outline-secondary:focus-visible {
    color: #f1f5f9 !important;
    background-color: #2a2d38 !important;
    border-color: #353843 !important;
}

/* btn-outline-success */
[data-bs-theme="dark"] .btn-outline-success {
    --bs-btn-color: #34d399 !important;
    --bs-btn-border-color: #059669 !important;
    --bs-btn-hover-color: #fff !important;
    --bs-btn-hover-bg: #059669 !important;
    --bs-btn-hover-border-color: #059669 !important;
    color: #34d399 !important;
    background-color: transparent !important;
    border-color: #059669 !important;
}
[data-bs-theme="dark"] .btn-outline-success:hover,
[data-bs-theme="dark"] .btn-outline-success:focus-visible {
    color: #fff !important;
    background-color: #059669 !important;
    border-color: #059669 !important;
}

/* btn-outline-danger */
[data-bs-theme="dark"] .btn-outline-danger {
    --bs-btn-color: #f87171 !important;
    --bs-btn-border-color: #dc2626 !important;
    --bs-btn-hover-color: #fff !important;
    --bs-btn-hover-bg: #dc2626 !important;
    --bs-btn-hover-border-color: #dc2626 !important;
    color: #f87171 !important;
    background-color: transparent !important;
    border-color: #dc2626 !important;
}
[data-bs-theme="dark"] .btn-outline-danger:hover,
[data-bs-theme="dark"] .btn-outline-danger:focus-visible {
    color: #fff !important;
    background-color: #dc2626 !important;
    border-color: #dc2626 !important;
}

/* btn-outline-warning */
[data-bs-theme="dark"] .btn-outline-warning {
    --bs-btn-color: #fbbf24 !important;
    --bs-btn-border-color: #d4a017 !important;
    --bs-btn-hover-color: #111 !important;
    --bs-btn-hover-bg: #d4a017 !important;
    --bs-btn-hover-border-color: #d4a017 !important;
    color: #fbbf24 !important;
    background-color: transparent !important;
    border-color: #d4a017 !important;
}
[data-bs-theme="dark"] .btn-outline-warning:hover,
[data-bs-theme="dark"] .btn-outline-warning:focus-visible {
    color: #111 !important;
    background-color: #d4a017 !important;
    border-color: #d4a017 !important;
}

/* btn-outline-info */
[data-bs-theme="dark"] .btn-outline-info {
    --bs-btn-color: #22d3ee !important;
    --bs-btn-border-color: #0891b2 !important;
    --bs-btn-hover-color: #fff !important;
    --bs-btn-hover-bg: #0891b2 !important;
    --bs-btn-hover-border-color: #0891b2 !important;
    color: #22d3ee !important;
    background-color: transparent !important;
    border-color: #0891b2 !important;
}
[data-bs-theme="dark"] .btn-outline-info:hover,
[data-bs-theme="dark"] .btn-outline-info:focus-visible {
    color: #fff !important;
    background-color: #0891b2 !important;
    border-color: #0891b2 !important;
}

/* btn-outline-dark */
[data-bs-theme="dark"] .btn-outline-dark {
    --bs-btn-color: #e2e8f0 !important;
    --bs-btn-border-color: #94a3b8 !important;
    --bs-btn-hover-color: #111 !important;
    --bs-btn-hover-bg: #e2e8f0 !important;
    --bs-btn-hover-border-color: #e2e8f0 !important;
    color: #e2e8f0 !important;
    background-color: transparent !important;
    border-color: #94a3b8 !important;
}
[data-bs-theme="dark"] .btn-outline-dark:hover,
[data-bs-theme="dark"] .btn-outline-dark:focus-visible {
    color: #111 !important;
    background-color: #e2e8f0 !important;
    border-color: #e2e8f0 !important;
}

/* btn-outline-light */
[data-bs-theme="dark"] .btn-outline-light {
    --bs-btn-color: #cbd5e1 !important;
    --bs-btn-border-color: #353843 !important;
    --bs-btn-hover-color: #f1f5f9 !important;
    --bs-btn-hover-bg: #353843 !important;
    --bs-btn-hover-border-color: #4b5563 !important;
    color: #cbd5e1 !important;
    background-color: transparent !important;
    border-color: #353843 !important;
}
[data-bs-theme="dark"] .btn-outline-light:hover,
[data-bs-theme="dark"] .btn-outline-light:focus-visible {
    color: #f1f5f9 !important;
    background-color: #353843 !important;
    border-color: #4b5563 !important;
}

/* btn-link */
[data-bs-theme="dark"] .btn-link {
    --bs-btn-color: #d4a017 !important;
    --bs-btn-hover-color: #e8b82f !important;
    color: #d4a017 !important;
}
[data-bs-theme="dark"] .btn-link:hover {
    color: #e8b82f !important;
}

/* btn-gold (hero) */
[data-bs-theme="dark"] .btn-gold {
    --bs-btn-bg: #d4a017 !important;
    --bs-btn-color: #0a0a0a !important;
    --bs-btn-border-color: #d4a017 !important;
    --bs-btn-hover-bg: #b8860b !important;
    --bs-btn-hover-color: #0a0a0a !important;
    --bs-btn-hover-border-color: #b8860b !important;
    color: #0a0a0a !important;
    background-color: #d4a017 !important;
    border-color: #d4a017 !important;
}
[data-bs-theme="dark"] .btn-gold:hover,
[data-bs-theme="dark"] .btn-gold:focus-visible {
    color: #0a0a0a !important;
    background-color: #b8860b !important;
    border-color: #b8860b !important;
}

/* --- Cards --- */
[data-bs-theme="dark"] .card {
    background: #1a1c24;
    border-color: #2a2d38;
    color: #e2e8f0;
}
[data-bs-theme="dark"] .card-header {
    background: #1e2028;
    border-bottom-color: #2a2d38;
    color: #f1f5f9;
}
[data-bs-theme="dark"] .card-footer {
    background: #1e2028;
    border-top-color: #2a2d38;
}
[data-bs-theme="dark"] .card.shadow-sm {
    box-shadow: 0 1px 4px rgba(0,0,0,.3) !important;
}
[data-bs-theme="dark"] .card.shadow {
    box-shadow: 0 4px 12px rgba(0,0,0,.35) !important;
}

/* --- Forms --- */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
    background: #15171e;
    border-color: #2a2d38;
    color: #e2e8f0;
}
[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
    background: #15171e;
    border-color: #d4a017;
    color: #f1f5f9;
    box-shadow: 0 0 0 3px rgba(212,160,23,.15);
}
[data-bs-theme="dark"] .form-control::placeholder {
    color: #4b5563;
}
[data-bs-theme="dark"] .form-label {
    color: #94a3b8;
}
[data-bs-theme="dark"] .form-text {
    color: #64748b;
}
[data-bs-theme="dark"] .input-group-text {
    background: #1e2028;
    border-color: #2a2d38;
    color: #94a3b8;
}
[data-bs-theme="dark"] .form-check-input {
    background-color: #1a1c24;
    border-color: #2a2d38;
}
[data-bs-theme="dark"] .form-check-input:checked {
    background-color: #d4a017;
    border-color: #d4a017;
}

/* --- Tables --- */
[data-bs-theme="dark"] .table {
    color: #cbd5e1;
    --bs-table-bg: transparent;
}
[data-bs-theme="dark"] .table thead th {
    color: #94a3b8;
    border-bottom-color: #2a2d38;
    background: #15171e;
}
[data-bs-theme="dark"] .table td,
[data-bs-theme="dark"] .table th {
    border-bottom-color: #1e2028;
}
[data-bs-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: rgba(255,255,255,.02);
    color: #cbd5e1;
}
[data-bs-theme="dark"] .table-hover > tbody > tr:hover > * {
    background-color: rgba(255,255,255,.04);
    color: #e2e8f0;
}

/* --- Alerts --- */
[data-bs-theme="dark"] .alert-success {
    background: rgba(5,150,105,.12);
    border-color: rgba(5,150,105,.2);
    color: #34d399;
}
[data-bs-theme="dark"] .alert-danger {
    background: rgba(220,38,38,.12);
    border-color: rgba(220,38,38,.2);
    color: #f87171;
}
[data-bs-theme="dark"] .alert-warning {
    background: rgba(245,158,11,.12);
    border-color: rgba(245,158,11,.2);
    color: #fbbf24;
}
[data-bs-theme="dark"] .alert-info {
    background: rgba(8,145,178,.12);
    border-color: rgba(8,145,178,.2);
    color: #22d3ee;
}

/* --- Dropdowns --- */
[data-bs-theme="dark"] .dropdown-menu {
    background: #1a1c24;
    border-color: #2a2d38;
    box-shadow: 0 8px 24px rgba(0,0,0,.4);
}
[data-bs-theme="dark"] .dropdown-item {
    color: #cbd5e1;
}
[data-bs-theme="dark"] .dropdown-item:hover,
[data-bs-theme="dark"] .dropdown-item:focus {
    background: #1e2028;
    color: #f1f5f9;
}
[data-bs-theme="dark"] .dropdown-item.text-danger {
    color: #f87171 !important;
}
[data-bs-theme="dark"] .dropdown-divider {
    border-top-color: #2a2d38;
}
[data-bs-theme="dark"] .dropdown-header {
    color: #94a3b8;
}

/* --- Pagination --- */
[data-bs-theme="dark"] .pagination .page-link {
    background: #1a1c24;
    border-color: #2a2d38;
    color: #cbd5e1;
}
[data-bs-theme="dark"] .pagination .page-link:hover {
    background: #1e2028;
    border-color: #353843;
    color: #d4a017;
}
[data-bs-theme="dark"] .pagination .active .page-link {
    background: #d4a017;
    border-color: #d4a017;
    color: #111;
}

/* --- Badges --- */
[data-bs-theme="dark"] .badge.bg-light {
    background: #2a2d38 !important;
    color: #e2e8f0 !important;
}
[data-bs-theme="dark"] .badge.text-dark {
    color: #e2e8f0 !important;
}

/* --- Backgrounds --- */
[data-bs-theme="dark"] .bg-white {
    background: #1a1c24 !important;
}
[data-bs-theme="dark"] .bg-light {
    background: #15171e !important;
}
[data-bs-theme="dark"] section.bg-light {
    background: #15171e !important;
}

/* --- Ad Carousel (dark mode) --- */
[data-bs-theme="dark"] .ad-carousel-section {
    background: linear-gradient(180deg, #0f1117 0%, #15171e 100%);
}
[data-bs-theme="dark"] .ad-slide {
    background: linear-gradient(135deg, #1e2028, #2a2d38) !important;
}
[data-bs-theme="dark"] .ad-slide h4 {
    color: #f1f5f9 !important;
}
[data-bs-theme="dark"] .ad-slide p {
    color: #94a3b8 !important;
}
[data-bs-theme="dark"] .carousel-control-prev,
[data-bs-theme="dark"] .carousel-control-next {
    background: rgba(255,255,255,.15) !important;
}

/* --- Borders --- */
[data-bs-theme="dark"] .border {
    border-color: #2a2d38 !important;
}
[data-bs-theme="dark"] .border-bottom {
    border-bottom-color: #2a2d38 !important;
}
[data-bs-theme="dark"] .border-top {
    border-top-color: #2a2d38 !important;
}
[data-bs-theme="dark"] hr {
    border-color: #2a2d38;
}

/* --- Top Bar --- */
[data-bs-theme="dark"] .top-bar {
    background: #0a0b0f !important;
}

/* --- Navbar --- */
[data-bs-theme="dark"] .navbar {
    background: #15171e !important;
    border-bottom: 1px solid #2a2d38;
}
[data-bs-theme="dark"] .navbar-brand {
    color: #f1f5f9;
}
/* Logo swap: light ↔ dark */
.logo-dark { display: none !important; }
[data-bs-theme="dark"] .logo-light { display: none !important; }
[data-bs-theme="dark"] .logo-dark { display: inline !important; }
/* Search input dark mode */
[data-bs-theme="dark"] .navbar .form-control {
    background: #1e2029;
    border-color: #3a3d4a;
    color: #f1f5f9;
}
[data-bs-theme="dark"] .navbar .form-control:focus {
    background: #23252f;
    border-color: var(--brand);
    color: #f1f5f9;
    box-shadow: 0 0 0 .15rem rgba(212,160,23,.25);
}
[data-bs-theme="dark"] .navbar .form-control::placeholder {
    color: #6b7280;
}
[data-bs-theme="dark"] .navbar .btn-outline-secondary {
    --bs-btn-color: #94a3b8 !important;
    --bs-btn-border-color: #2a2d38 !important;
    --bs-btn-hover-color: #f1f5f9 !important;
    --bs-btn-hover-bg: #2a2d38 !important;
    --bs-btn-hover-border-color: #353843 !important;
    color: #94a3b8 !important;
    background-color: transparent !important;
    border-color: #2a2d38 !important;
}
[data-bs-theme="dark"] .navbar .btn-outline-secondary:hover,
[data-bs-theme="dark"] .navbar .btn-outline-secondary:focus-visible {
    color: #f1f5f9 !important;
    background-color: #2a2d38 !important;
    border-color: #353843 !important;
}

/* --- Mobile Search --- */
[data-bs-theme="dark"] .d-lg-none.bg-light {
    background: #15171e !important;
}

/* --- Category Nav --- */
[data-bs-theme="dark"] .category-nav {
    background: #15171e !important;
    border-bottom-color: #2a2d38 !important;
}
[data-bs-theme="dark"] .category-scroll-btn {
    background: #1e2028;
    border-color: #353843;
    color: #a1a5b7;
}
[data-bs-theme="dark"] .category-scroll-btn:hover {
    background: var(--brand);
    color: #fff;
    border-color: var(--brand);
}
[data-bs-theme="dark"] .category-scroll-wrapper::-webkit-scrollbar-thumb {
    background: #353843;
}
[data-bs-theme="dark"] .category-scroll-wrapper {
    scrollbar-color: #353843 transparent;
}

/* --- Force-dark sections (own dark bg) keep white text in BOTH modes --- */
[style*="background:linear-gradient"] h1,
[style*="background:linear-gradient"] h2,
[style*="background:linear-gradient"] h3,
[style*="background:linear-gradient"] h4,
[style*="background:linear-gradient"] h5,
[style*="background:linear-gradient"] h6,
[style*="background:linear-gradient"] p,
[style*="color:#fff"] h1,
[style*="color:#fff"] h2,
[style*="color:#fff"] h3,
[style*="color:#fff"] h4,
[style*="color:#fff"] h5,
[style*="color:#fff"] h6,
[style*="color:#fff"] p {
    color: inherit !important;
}
[style*="background:linear-gradient"] .opacity-75 {
    opacity: .75 !important;
}
[data-bs-theme="dark"] .category-link {
    color: #94a3b8;
}
[data-bs-theme="dark"] .category-link:hover,
[data-bs-theme="dark"] .category-link.active {
    color: #d4a017;
}

/* --- Product Cards --- */
[data-bs-theme="dark"] .product-card {
    background: #1a1c24;
    border-color: #2a2d38;
}
[data-bs-theme="dark"] .product-card .card-title {
    color: #e2e8f0;
}
[data-bs-theme="dark"] .product-card .card-img-top {
    background: #15171e;
}

/* --- Hover Shadow --- */
[data-bs-theme="dark"] .hover-shadow {
    border-color: #2a2d38;
}
[data-bs-theme="dark"] .hover-shadow:hover {
    border-color: #353843;
    box-shadow: 0 10px 20px rgba(0,0,0,.3) !important;
}

/* --- Product Gallery --- */
[data-bs-theme="dark"] .product-gallery .main-image {
    background: #15171e;
    border-color: #2a2d38;
}
[data-bs-theme="dark"] .product-gallery .thumbnail {
    border-color: #2a2d38;
}
[data-bs-theme="dark"] .product-gallery .thumbnail:hover {
    border-color: #4b5563;
}

/* --- Star Rating --- */
[data-bs-theme="dark"] .star-rating .far.fa-star {
    color: #4b5563;
}

/* --- Cart --- */
[data-bs-theme="dark"] .cart-item:hover {
    background-color: #1e2028;
}

/* --- Account Sidebar --- */
[data-bs-theme="dark"] .account-sidebar .nav-link {
    color: #94a3b8;
}
[data-bs-theme="dark"] .account-sidebar .nav-link:hover {
    background: #1e2028;
    color: #d4a017;
}
[data-bs-theme="dark"] .account-sidebar .nav-link.active {
    background: #d4a017;
    color: #111;
}

/* --- Order Timeline --- */
[data-bs-theme="dark"] .order-timeline::before {
    background: #2a2d38;
}
[data-bs-theme="dark"] .order-timeline .timeline-item::before {
    border-color: #1a1c24;
}

/* --- Shipping Calculator --- */
[data-bs-theme="dark"] .shipping-calculator .card {
    border-color: #2a2d38;
    background: #1a1c24;
}
[data-bs-theme="dark"] .shipping-calculator .card:hover {
    border-color: #353843;
}
[data-bs-theme="dark"] .shipping-calculator .card.selected {
    border-color: #d4a017;
    background: rgba(212,160,23,.06);
}

/* --- Warehouse --- */
[data-bs-theme="dark"] .warehouse-package {
    border-left-color: #2a2d38;
}

/* --- Notifications --- */
[data-bs-theme="dark"] .notification-item.unread {
    background: rgba(212,160,23,.06);
}
[data-bs-theme="dark"] .notification-item:hover {
    background: #1e2028;
}

/* --- Category Cards --- */
[data-bs-theme="dark"] .category-card {
    background: #1a1c24;
    border-color: #2a2d38;
    color: #e2e8f0;
}
[data-bs-theme="dark"] .category-card:hover {
    border-color: #353843;
    box-shadow: 0 10px 20px rgba(0,0,0,.3);
}
[data-bs-theme="dark"] .category-card h6 {
    color: #e2e8f0;
}

/* --- Trust Cards --- */
[data-bs-theme="dark"] .trust-card {
    background: #1a1c24;
    border-color: #2a2d38;
}
[data-bs-theme="dark"] .trust-card:hover {
    background: #1e2028;
}
[data-bs-theme="dark"] .trust-card h6 {
    color: #e2e8f0;
}
[data-bs-theme="dark"] .trust-card small,
[data-bs-theme="dark"] .trust-card p {
    color: #94a3b8;
}

/* --- Step Icons --- */
[data-bs-theme="dark"] .step-icon {
    background: rgba(212,160,23,.1);
    color: #d4a017;
}

/* --- Auth Card --- */
[data-bs-theme="dark"] .auth-card {
    background: #1a1c24;
    border-color: #2a2d38;
    box-shadow: 0 20px 30px rgba(0,0,0,.4);
}

/* --- Scrollbar --- */
[data-bs-theme="dark"] ::-webkit-scrollbar-track {
    background: #0f1117;
}
[data-bs-theme="dark"] ::-webkit-scrollbar-thumb {
    background: #2a2d38;
}
[data-bs-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: #353843;
}

/* --- Selection --- */
[data-bs-theme="dark"] ::selection {
    background: rgba(212,160,23,.2);
    color: #fbbf24;
}

/* --- Modal --- */
[data-bs-theme="dark"] .modal-content {
    background: #1a1c24;
    border-color: #2a2d38;
    color: #e2e8f0;
}
[data-bs-theme="dark"] .modal-header {
    border-bottom-color: #2a2d38;
    color: #f1f5f9;
}
[data-bs-theme="dark"] .modal-footer {
    border-top-color: #2a2d38;
}
[data-bs-theme="dark"] .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* --- List Group --- */
[data-bs-theme="dark"] .list-group-item {
    background: #1a1c24;
    border-color: #2a2d38;
    color: #e2e8f0;
}
[data-bs-theme="dark"] .list-group-item.active {
    background: #d4a017;
    border-color: #d4a017;
    color: #111;
}

/* --- Accordion --- */
[data-bs-theme="dark"] .accordion-item {
    background: #1a1c24;
    border-color: #2a2d38;
}
[data-bs-theme="dark"] .accordion-button {
    background: #1a1c24;
    color: #e2e8f0;
}
[data-bs-theme="dark"] .accordion-button:not(.collapsed) {
    background: #1e2028;
    color: #d4a017;
}
[data-bs-theme="dark"] .accordion-body {
    background: #1a1c24;
    color: #cbd5e1;
}

/* --- Breadcrumb --- */
[data-bs-theme="dark"] .breadcrumb-item a {
    color: #d4a017;
}
[data-bs-theme="dark"] .breadcrumb-item.active {
    color: #94a3b8;
}
[data-bs-theme="dark"] .breadcrumb-item + .breadcrumb-item::before {
    color: #4b5563;
}

/* --- Nav Tabs --- */
[data-bs-theme="dark"] .nav-tabs {
    border-bottom-color: #2a2d38;
}
[data-bs-theme="dark"] .nav-tabs .nav-link {
    color: #64748b;
}
[data-bs-theme="dark"] .nav-tabs .nav-link:hover {
    color: #cbd5e1;
    border-color: transparent;
}
[data-bs-theme="dark"] .nav-tabs .nav-link.active {
    background: #1a1c24;
    border-color: #2a2d38 #2a2d38 #1a1c24;
    color: #d4a017;
}

/* --- Nav Pills --- */
[data-bs-theme="dark"] .nav-pills .nav-link {
    color: #94a3b8;
}
[data-bs-theme="dark"] .nav-pills .nav-link.active {
    background: #d4a017;
    color: #111;
}

/* --- Legal / Policy Pages --- */
[data-bs-theme="dark"] .legal-page {
    color: #cbd5e1;
}
[data-bs-theme="dark"] .legal-page h3 {
    color: #f1f5f9;
    border-bottom-color: #d4a017;
}
[data-bs-theme="dark"] .legal-page h4 {
    color: #e2e8f0;
}
[data-bs-theme="dark"] .legal-page a {
    color: #d4a017;
}
[data-bs-theme="dark"] .legal-page a:hover {
    color: #e8b82f;
}

/* --- Footer in dark mode: already dark, just ensure consistency --- */
[data-bs-theme="dark"] footer {
    background: #0a0b0f !important;
}
[data-bs-theme="dark"] footer .social-link {
    background: #1a1c24;
}

/* --- Sections with own dark backgrounds: keep buttons bright --- */
[data-bs-theme="dark"] .cta-section .btn-light,
[data-bs-theme="dark"] .hero-section .btn-light {
    --bs-btn-color: #111 !important;
    --bs-btn-bg: #d4a017 !important;
    --bs-btn-border-color: #d4a017 !important;
    --bs-btn-hover-color: #111 !important;
    --bs-btn-hover-bg: #b8860b !important;
    --bs-btn-hover-border-color: #b8860b !important;
    color: #111 !important;
    background-color: #d4a017 !important;
    border-color: #d4a017 !important;
}
[data-bs-theme="dark"] .cta-section .btn-light:hover,
[data-bs-theme="dark"] .hero-section .btn-light:hover {
    color: #111 !important;
    background-color: #b8860b !important;
    border-color: #b8860b !important;
}
[data-bs-theme="dark"] .hero-section .btn-outline-light {
    --bs-btn-color: #fff !important;
    --bs-btn-border-color: rgba(255,255,255,.5) !important;
    --bs-btn-hover-color: #fff !important;
    --bs-btn-hover-bg: rgba(255,255,255,.15) !important;
    --bs-btn-hover-border-color: #fff !important;
    color: #fff !important;
    background-color: transparent !important;
    border-color: rgba(255,255,255,.5) !important;
}
[data-bs-theme="dark"] .hero-section .btn-outline-light:hover {
    color: #fff !important;
    background-color: rgba(255,255,255,.15) !important;
    border-color: #fff !important;
}
[data-bs-theme="dark"] footer .btn-outline-light {
    --bs-btn-color: #cbd5e1 !important;
    --bs-btn-border-color: rgba(255,255,255,.3) !important;
    --bs-btn-hover-color: #fff !important;
    --bs-btn-hover-bg: rgba(255,255,255,.1) !important;
    --bs-btn-hover-border-color: rgba(255,255,255,.5) !important;
    color: #cbd5e1 !important;
    background-color: transparent !important;
    border-color: rgba(255,255,255,.3) !important;
}
[data-bs-theme="dark"] footer .btn-outline-light:hover {
    color: #fff !important;
    background-color: rgba(255,255,255,.1) !important;
    border-color: rgba(255,255,255,.5) !important;
}

/* --- Misc utility overrides --- */
[data-bs-theme="dark"] .shadow-sm {
    box-shadow: 0 1px 4px rgba(0,0,0,.3) !important;
}
[data-bs-theme="dark"] .shadow {
    box-shadow: 0 4px 12px rgba(0,0,0,.35) !important;
}
[data-bs-theme="dark"] .shadow-lg {
    box-shadow: 0 20px 30px rgba(0,0,0,.4) !important;
}
[data-bs-theme="dark"] .text-secondary {
    color: #64748b !important;
}
[data-bs-theme="dark"] .border-primary {
    border-color: #d4a017 !important;
}
[data-bs-theme="dark"] .bg-body-tertiary {
    background: #15171e !important;
}

/* --- bg-white on card-header & sections --- */
[data-bs-theme="dark"] .card-header.bg-white {
    background: #1e2028 !important;
}
[data-bs-theme="dark"] section.bg-white {
    background: #0f1117 !important;
}

/* --- Badge with text-dark inside --- */
[data-bs-theme="dark"] .badge.bg-warning.text-dark,
[data-bs-theme="dark"] .badge.bg-warning {
    background: #d4a017 !important;
    color: #111 !important;
}
[data-bs-theme="dark"] .badge.bg-success {
    background: #059669 !important;
    color: #fff !important;
}
[data-bs-theme="dark"] .badge.bg-danger {
    background: #dc2626 !important;
    color: #fff !important;
}
[data-bs-theme="dark"] .badge.bg-info {
    background: #0891b2 !important;
    color: #fff !important;
}
[data-bs-theme="dark"] .badge.bg-secondary {
    background: #353843 !important;
    color: #e2e8f0 !important;
}
[data-bs-theme="dark"] .badge.bg-primary {
    background: #d4a017 !important;
    color: #111 !important;
}

/* --- bg-primary with bg-opacity overrides --- */
[data-bs-theme="dark"] .bg-primary.bg-opacity-10 {
    background-color: rgba(212,160,23,.1) !important;
}
[data-bs-theme="dark"] .bg-primary.bg-opacity-25 {
    background-color: rgba(212,160,23,.2) !important;
}

/* --- input-group bg-white --- */
[data-bs-theme="dark"] .input-group-text.bg-white {
    background: #1a1c24 !important;
    border-color: #2a2d38;
    color: #94a3b8;
}

/* --- Navbar classes that reference light --- */
[data-bs-theme="dark"] .navbar-light .navbar-nav .nav-link {
    color: #cbd5e1;
}
[data-bs-theme="dark"] .navbar-light .navbar-toggler {
    border-color: #2a2d38;
    color: #94a3b8;
}

/* --- text-black override --- */
[data-bs-theme="dark"] .text-black {
    color: #f1f5f9 !important;
}

/* --- Inline color overrides for common patterns --- */
[data-bs-theme="dark"] .text-body-secondary {
    color: #64748b !important;
}
[data-bs-theme="dark"] .text-body-tertiary {
    color: #4b5563 !important;
}
[data-bs-theme="dark"] .text-body-emphasis {
    color: #f1f5f9 !important;
}

/* --- Toast, Offcanvas --- */
[data-bs-theme="dark"] .offcanvas {
    background: #1a1c24;
    color: #e2e8f0;
    border-color: #2a2d38;
}
[data-bs-theme="dark"] .toast {
    background: #1a1c24;
    color: #e2e8f0;
    border-color: #2a2d38;
}
[data-bs-theme="dark"] .toast-header {
    background: #1e2028;
    border-bottom-color: #2a2d38;
    color: #f1f5f9;
}

/* --- Popover & Tooltip --- */
[data-bs-theme="dark"] .popover {
    background: #1a1c24;
    border-color: #2a2d38;
}
[data-bs-theme="dark"] .popover-header {
    background: #1e2028;
    border-bottom-color: #2a2d38;
    color: #f1f5f9;
}
[data-bs-theme="dark"] .popover-body {
    color: #cbd5e1;
}

/* --- Progress bar bg --- */
[data-bs-theme="dark"] .progress {
    background: #1e2028;
}

/* --- Quick amount buttons (wallet page) --- */
[data-bs-theme="dark"] .quick-amount-btn.btn-outline-warning {
    --bs-btn-color: #fbbf24 !important;
    --bs-btn-border-color: #d4a017 !important;
    --bs-btn-bg: transparent !important;
    --bs-btn-hover-color: #111 !important;
    --bs-btn-hover-bg: #d4a017 !important;
    --bs-btn-hover-border-color: #d4a017 !important;
    color: #fbbf24 !important;
    background-color: transparent !important;
    border-color: #d4a017 !important;
}
[data-bs-theme="dark"] .quick-amount-btn.btn-outline-warning:hover {
    color: #111 !important;
    background-color: #d4a017 !important;
    border-color: #d4a017 !important;
}
[data-bs-theme="dark"] .quick-amount-btn.btn-warning {
    --bs-btn-color: #111 !important;
    --bs-btn-bg: #d4a017 !important;
    --bs-btn-border-color: #d4a017 !important;
    --bs-btn-hover-color: #111 !important;
    --bs-btn-hover-bg: #b8860b !important;
    --bs-btn-hover-border-color: #b8860b !important;
    color: #111 !important;
    background-color: #d4a017 !important;
    border-color: #d4a017 !important;
}
[data-bs-theme="dark"] .quick-amount-btn.btn-warning:hover {
    color: #111 !important;
    background-color: #b8860b !important;
    border-color: #b8860b !important;
}

/* --- Messages page text-dark links --- */
[data-bs-theme="dark"] a.text-dark {
    color: #e2e8f0 !important;
}
[data-bs-theme="dark"] a.text-dark:hover {
    color: #d4a017 !important;
}

/* --- Seller promotions badge --- */
[data-bs-theme="dark"] .seller-badge.bg-warning.text-dark {
    background: #d4a017 !important;
    color: #111 !important;
}

/* --- Admin stats text-dark headings --- */
[data-bs-theme="dark"] h4.text-dark,
[data-bs-theme="dark"] h3.text-dark,
[data-bs-theme="dark"] h2.text-dark {
    color: #f1f5f9 !important;
}

/* --- Ensure all Bootstrap .bg-* helpers invert properly --- */
[data-bs-theme="dark"] .bg-white.text-dark {
    background: #1a1c24 !important;
    color: #e2e8f0 !important;
}

/* --- Inline background color overrides for hardcoded light colors --- */
[data-bs-theme="dark"] [style*="background:#f3f4f6"],
[data-bs-theme="dark"] [style*="background: #f3f4f6"] {
    background: #2a2d38 !important;
}
[data-bs-theme="dark"] [style*="background:#f9fafb"],
[data-bs-theme="dark"] [style*="background: #f9fafb"] {
    background: #1e2028 !important;
}
[data-bs-theme="dark"] [style*="background:#f8f9fa"],
[data-bs-theme="dark"] [style*="background: #f8f9fa"] {
    background: #1e2028 !important;
}
[data-bs-theme="dark"] [style*="background:#fff"],
[data-bs-theme="dark"] [style*="background: #fff"],
[data-bs-theme="dark"] [style*="background:white"],
[data-bs-theme="dark"] [style*="background: white"] {
    background: #1a1c24 !important;
}
[data-bs-theme="dark"] [style*="border:2px solid #dee2e6"],
[data-bs-theme="dark"] [style*="border: 2px solid #dee2e6"] {
    border-color: #2a2d38 !important;
}
[data-bs-theme="dark"] [style*="color:#333"],
[data-bs-theme="dark"] [style*="color: #333"] {
    color: #cbd5e1 !important;
}
[data-bs-theme="dark"] [style*="color:#1a1a1a"],
[data-bs-theme="dark"] [style*="color: #1a1a1a"] {
    color: #f1f5f9 !important;
}

/* ===================================================
   PRINT
   =================================================== */
@media print {
    .navbar, .top-bar, .category-nav, footer, .btn { display: none !important; }
}