/* ==========================================================================
   DadaXWear Ultimate Premium Design Tokens — Theme Engine v7 (Absolute Fix)
   ========================================================================== */

/* ── DEFAULT DARK THEME VARIABLES ── */
:root {
    --bg: #0d0f12;
    --card: #161a1e;
    --card-hover: #1e2329;
    
    /* Brand Accents */
    --primary: #ff4d00;
    --primary-glow: rgba(255, 77, 0, 0.15);
    --accent-bg: rgba(255, 77, 0, 0.08);
    
    /* Status Badges */
    --stockout-bg: rgba(255, 61, 90, 0.1);
    --stockout-text: #ff3d5a;
    --discount-text: #ff4d00;
    --discount-bg: #ff4d00;
    
    /* Navigation Components */
    --pills-bg: #161a1e;
    --pills-text: #8e9aaf;
    --nav-bg: #161a1e;
    
    /* Text & Borders */
    --text: #ffffff;
    --text-gray: #8e9aaf;
    --border: rgba(255, 255, 255, 0.08);
    --header-bg: #1a1d21;
    --shadow: rgba(0, 0, 0, 0.4);
    --input-bg: rgba(255, 255, 255, 0.02);
}

/* ── PREMIUM LIGHT THEME VARIABLES ── */
body.light-theme {
    --bg: #f4f6fa;               
    --card: #ffffff;             
    --card-hover: #fcfdfe;       
    
    /* Brand Accents (Light Mode: iOS Royal Blue) */
    --primary: #0076ff;          
    --primary-glow: rgba(0, 118, 255, 0.12);
    --accent-bg: rgba(0, 118, 255, 0.06);
    
    /* Status & Utility Colors */
    --stockout-bg: #ffebee;       
    --stockout-text: #d32f2f;     
    --discount-text: #0056c6; /* গাঢ় রয়্যাল ব্লু প্রাইস ও প্লাস চিহ্নের জন্য */    
    --discount-bg: #0044aa;  /* ডার্ক ব্লু ডিসকাউন্ট (10% OFF) টোকেনের জন্য */
    
    /* Top Bar Tabs Styling (All, Esport Jersey, Football Jersey) */
    --pills-bg: #e0e7ff;     /* সুন্দর হালকা নীল বাটন ব্যাকগ্রাউন্ড */
    --pills-text: #0044aa;   
    --nav-bg: #ffffff;       /* বটম নেভিগেশন বারের জন্য পিওর হোয়াইট */
    
    /* Text & Borders */
    --text: #1a202c;             
    --text-gray: #4a5568;        
    --border: rgba(0, 0, 0, 0.08); 
    --header-bg: #ffffff; 
    --shadow: rgba(149, 157, 165, 0.15); /* স্লিক ও স্পষ্ট কার্ড শ্যাডো */   
    --input-bg: #f9fafb;         
}

/* ==========================================================================
   GLOBAL STRUCTURE & BASE CONFIG
   ========================================================================== */
body {
    background: var(--bg) !important;
    color: var(--text) !important;
    transition: background-color 0.2s ease, color 0.2s ease !important;
}

/* ==========================================================================
   1. TOP NAVIGATION TABS (All, Esport, Football, Colin Fan, etc.)
   ========================================================================== */
/* স্ক্রিনশটের কালো বাটনগুলোকে হালকা নীল করার জন্য সুনির্দিষ্ট রুলস */
.top-header + div div, 
.category-btn, 
.filter-pill, 
.tab-btn,
div[style*="background: rgb(22, 26, 30)"],
div[style*="background-color: rgb(22, 26, 30)"],
.sub-nav button {
    background: var(--pills-bg) !important;
    color: var(--pills-text) !important;
    border: 1px solid var(--border) !important;
}

/* একটিভ ক্যাটাগরি বাটন */
.category-btn.active, .filter-pill.active, .category-btn.on, .filter-pill.on {
    background: var(--primary) !important;
    color: #ffffff !important;
    border-color: var(--primary) !important;
}

/* ==========================================================================
   2. PRODUCT CARD MANAGEMENT & VISIBILITY FIX
   ========================================================================== */
/* প্রোডাক্ট কার্ডের বর্ডার এবং শ্যাডো আরও স্পষ্ট করার জন্য */
.product-card, .item-card, .card, .setting-card, .oc {
    background: var(--card) !important;
    border: 1px solid var(--border) !important;
    box-shadow: 0 8px 24px var(--shadow) !important;
    border-radius: 14px !important;
}
.product-card:hover {
    background: var(--card-hover) !important;
    box-shadow: 0 12px 30px var(--shadow) !important;
}

/* ==========================================================================
   3. NATIVE BOTTOM NAVIGATION BAR (Home, Cart, Chat, Account)
   ========================================================================== */
/* বটম নেভিগেশন বার সম্পূর্ণ লাইট থিমে কনভার্ট */
.mob-nav, .bottom-bar, .footer-nav, .bottom-nav-bar,
div[style*="background: rgb(22, 26, 30)"]:has(.home-btn), /* স্ট্রং প্যারেন্ট ক্যাচিং */
footer.mob-nav {
    background: var(--nav-bg) !important;
    border-top: 1px solid var(--border) !important;
    box-shadow: 0 -8px 30px var(--shadow) !important;
}

/* বটম নেভিগেশনের আইকন ও টেক্সট কালার ট্রিগার */
.mob-btn, .nav-item, .footer-tab {
    color: var(--text-gray) !important;
}
.mob-btn.on, .nav-item.active, .mob-btn.on i, .mob-btn.on span, .mob-btn[style*="color: rgb(255, 77, 0)"] {
    color: var(--primary) !important;
}

/* ==========================================================================
   4. ORANGE/RED TO ROYAL BLUE DYNAMIC MUTATION (ACCENTS & BUTTONS)
   ========================================================================== */
/* ইনলাইন স্টাইলে থাকা সব লাল/কমলা রঙের টেক্সট ও প্লাস (+) বাটন পরিবর্তন */
span[style*="color: rgb(255, 77, 0)"],
div[style*="color: rgb(255, 77, 0)"],
.current-price, 
.price-tag, 
.product-price,
.row-info i,
.logo-text span {
    color: var(--discount-text) !important;
}

/* প্লাস (+) বাটন এবং কার্ট বাটন ব্যাকগ্রাউন্ড */
.add-btn, .plus-btn, .add-to-cart,
div[style*="background: rgb(255, 77, 0)"],
span[style*="background: rgb(255, 77, 0)"],
.btn-px,
.add-to-cart-btn {
    background-color: var(--primary) !important;
    color: #ffffff !important;
    border-color: var(--primary) !important;
}

/* ==========================================================================
   5. DISCOUNTS & BADGES (10% OFF GAORHO NEEL FIX)
   ========================================================================== */
/* ইনলাইন লাল ব্যাকগ্রাউন্ডের ডিসকাউন্ট ব্যাজকে সুনির্দিষ্টভাবে টার্গেট */
div[style*="background: rgb(255, 61, 90)"],
span[style*="background: rgb(255, 61, 90)"],
.discount-badge, 
.off-badge, 
.badge-discount,
.discount-tag {
    background: var(--discount-bg) !important;
    color: #ffffff !important;
}

/* ==========================================================================
   6. PREMIUM TYPOGRAPHY SYSTEM
   ========================================================================== */
h1, h2, h3, h4,
.product-title, 
.product-name,
.setting-row span,
.logo-text {
    color: var(--text) !important;
}
.product-desc, .text-muted, .old-price {
    color: var(--text-gray) !important;
}