/*
Theme Name: Sanad Store
Theme URI: http://localhost/sanad_store
Author: Admin
Author URI: http://localhost/sanad_store
Description: Custom dark-mode catalog theme for gaming accessories
Version: 2.1.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sanad-store
*/

/* ============================================================
   SANAD STORE — GAMING HUD NEON IDENTITY SYSTEM v2.0
   Magenta (#FF00E5) → Cobalt Blue (#0040FF)
   ============================================================ */

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

/* ── CSS Design Tokens & SANAD THEME PRESETS ENGINE ── */
:root,
body[data-theme="neon"] {
    --hud-primary: #FF00E5;
    --hud-secondary: #0040FF;
    --hud-accent: #00F0FF;
    --hud-glow: rgba(255, 0, 229, 0.45);
    --hud-stroke-alpha: rgba(0, 64, 255, 0.4);
    --hud-btn-gradient: linear-gradient(135deg, #FF00E5 0%, #0040FF 100%);
    --neon-magenta : #FF00E5;
    --neon-blue    : #0040FF;
    --neon-red     : #FF0055;
    --border-glow  : rgba(255,0,229,0.35);
    --surface-0    : #0d0d0f;
    --surface-1    : #121217;
    --surface-2    : #141419;
    --surface-3    : #1a1a23;
    --border-dim   : #2a2a35;
    --hud-blur     : blur(12px);
    --gradient-cta : linear-gradient(135deg, var(--neon-magenta) 0%, var(--neon-blue) 100%);
    --gradient-cta-hover: linear-gradient(135deg, var(--neon-blue) 0%, var(--neon-magenta) 100%);
    --clip-card    : polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
    --clip-btn     : polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
    --clip-sm      : polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px);
}

body[data-theme="crimson"] {
    --hud-primary: #FF1E56;
    --hud-secondary: #7900FF;
    --hud-accent: #FF5E00;
    --hud-glow: rgba(255, 30, 86, 0.45);
    --hud-stroke-alpha: rgba(121, 0, 255, 0.4);
    --hud-btn-gradient: linear-gradient(135deg, #FF1E56 0%, #7900FF 100%);
    --neon-magenta : #FF1E56;
    --neon-blue    : #7900FF;
    --neon-red     : #FF5E00;
    --border-glow  : rgba(255, 30, 86, 0.35);
}

body[data-theme="arctic"] {
    --hud-primary: #00F0FF;
    --hud-secondary: #0044FF;
    --hud-accent: #7000FF;
    --hud-glow: rgba(0, 240, 255, 0.45);
    --hud-stroke-alpha: rgba(0, 68, 255, 0.4);
    --hud-btn-gradient: linear-gradient(135deg, #00F0FF 0%, #0044FF 100%);
    --neon-magenta : #00F0FF;
    --neon-blue    : #0044FF;
    --neon-red     : #7000FF;
    --border-glow  : rgba(0, 240, 255, 0.35);
}

/* 4. ثيم السايبربانك التكتيكي: Cyber Yellow */
body[data-theme="yellow"] {
    --hud-primary: #FCEE0A;
    --hud-secondary: #FFB800;
    --hud-accent: #FFFFFF;
    --hud-glow: rgba(252, 238, 10, 0.45);
    --hud-stroke-alpha: rgba(252, 238, 10, 0.4);
    --hud-btn-gradient: linear-gradient(135deg, #FCEE0A 0%, #FFB800 100%);
    --neon-magenta : #FCEE0A;
    --neon-blue    : #FFB800;
    --neon-red     : #FF5E00;
    --border-glow  : rgba(252, 238, 10, 0.35);
}

/* ضبط تباين النصوص على الأزرار والبادجات للثيم الأصفر حصراً */
body[data-theme="yellow"] .btn-primary,
body[data-theme="yellow"] .hud-primary-btn,
body[data-theme="yellow"] .add-to-cart-btn,
body[data-theme="yellow"] .checkout-btn,
body[data-theme="yellow"] button[type="submit"]:not(.bg-transparent):not(.search-submit-btn):not(form[role="search"] button),
body[data-theme="yellow"] a.bg-gradient-to-r,
body[data-theme="yellow"] button.bg-gradient-to-r {
    color: #000000 !important;
    font-weight: 800 !important;
}

body[data-theme="yellow"] .discount-badge,
body[data-theme="yellow"] .sale-tag {
    color: #000000 !important;
    font-weight: 800 !important;
}

body[data-theme="yellow"] .hud-price-badge {
    border-color: rgba(252, 238, 10, 0.5) !important;
}

button, .hud-tab-item, .hud-btn {
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.hud-primary-btn {
    background: var(--hud-btn-gradient) !important;
    box-shadow: 0 0 15px var(--hud-glow) !important;
}
.hud-stroke-box {
    border-color: var(--hud-stroke-alpha) !important;
}
.hud-glow-text {
    color: var(--hud-primary) !important;
    text-shadow: 0 0 8px var(--hud-glow) !important;
}

/* ── Base Typography ── */
html, body {
    font-family: 'Cairo', 'Segoe UI', system-ui, sans-serif;
    background-color: var(--surface-0);
    color: #e5e5e5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    isolation: isolate;
}

/* Arabic text: use Cairo; keep mono for prices */
p, h1, h2, h3, h4, h5, h6, span:not(.font-mono), label, button, input, select, textarea {
    font-family: 'Cairo', sans-serif;
}

/* Prevent jitter on animated elements */
* { animation-fill-mode: both; }

/* ── Gradient CTA Buttons ── */
.btn-neon-cta {
    background: var(--gradient-cta);
    clip-path: var(--clip-btn);
    color: #fff;
    font-family: 'Cairo', sans-serif;
    font-weight: 700;
    letter-spacing: 0.05em;
    border: none;
    transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.15s ease;
    position: relative;
    overflow: hidden;
}
.btn-neon-cta:hover {
    background: var(--gradient-cta-hover);
    box-shadow: 0 0 20px var(--hud-glow), 0 0 40px var(--hud-stroke-alpha);
    transform: translateY(-1px);
}

/* ── HUD Translucent Surface Panels ── */
.hud-panel {
    background: rgba(18, 18, 23, 0.85);
    backdrop-filter: var(--hud-blur);
    -webkit-backdrop-filter: var(--hud-blur);
    border: 1px solid var(--border-dim);
}
.hud-panel-glow {
    background: rgba(18, 18, 23, 0.85);
    backdrop-filter: var(--hud-blur);
    -webkit-backdrop-filter: var(--hud-blur);
    border: 1px solid var(--border-glow);
    box-shadow: 0 0 20px var(--hud-glow), inset 0 1px 0 rgba(255,255,255,0.04);
}

/* ==========================================================================
   CARDS SMOOTH HOVER GLOW ENGINE (ALL CARDS WITHOUT EXCEPTION)
   ========================================================================== */

/* 1. التأسيس المشترك الموحد لجميع الكروت: تسريع عتادي (GPU) فائق السرعة وخالٍ من التعليق */
.product-card,
.sale-card,
.package-card,
.brand-card,
.pos-item-card,
.dash-card,
.dash-section-card,
.order-card,
.theme-card,
.single-product-card,
.product-details-box,
ul.products li.product,
div[class*="product-card"],
article[class*="product-card"] {
    position: relative;
    z-index: 5;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.2s ease !important;
    filter: none !important;
    box-shadow: none !important;
}

.product-card:hover,
.sale-card:hover,
.package-card:hover,
.brand-card:hover {
    will-change: transform;
}

.product-card,
.package-card,
.sale-card,
.brand-card {
    isolation: isolate;
    clip-path: none !important;
    background: transparent !important;
    border-color: transparent !important;
    border-width: 0 !important;
}

/* رسم شكل الكرت المشطوف التكتيكي عبر الخلفية الزائفة */
.product-card::before,
.sale-card::before,
.package-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--surface-2, #141414);
    border: 1px solid var(--border-dim, #333);
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
    z-index: 0;
    pointer-events: none;
    transition: border-color 0.35s cubic-bezier(0.16, 1, 0.3, 1), 
                background 0.35s ease, 
                box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.brand-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--surface-2, #141414);
    border: 1px solid var(--border-dim, #333);
    clip-path: polygon(15px 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%, 0 15px);
    z-index: 0;
    pointer-events: none;
    transition: border-color 0.35s cubic-bezier(0.16, 1, 0.3, 1), 
                background 0.35s ease, 
                box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.product-card > *:not(.wishlist-toggle-btn):not(.oos-badge):not([class*="top-"]):not([class*="absolute"]):not(.product-discount-badge),
.package-card > *:not(.wishlist-toggle-btn):not(.oos-badge):not([class*="top-"]):not([class*="absolute"]):not(.product-discount-badge),
.sale-card > *:not(.wishlist-toggle-btn):not(.oos-badge):not([class*="top-"]):not([class*="absolute"]):not(.product-discount-badge),
.brand-card > *:not([class*="absolute"]):not(.brand-count) {
    position: relative;
    z-index: 2;
}

/* 2. تحويم الكروت بدون أي هالة خلفية (Zero Halo / Zero Glow) - الوضع الداكن */
.product-card:hover,
.package-card:hover,
.brand-card:hover,
.pos-item-card:hover,
.dash-card:hover,
.dash-section-card:hover,
.order-card:hover,
.theme-card:hover,
.single-product-card:hover,
ul.products li.product:hover,
div[class*="product-card"]:hover,
article[class*="product-card"]:hover {
    z-index: 20 !important;
    transform: translateY(-4px) !important;
    border-color: var(--hud-primary) !important;
    filter: none !important;
    box-shadow: none !important;
}

.product-card:hover::before,
.package-card:hover::before,
.brand-card:hover::before {
    border-color: var(--hud-primary) !important;
    filter: none !important;
    box-shadow: none !important;
}

/* 3. كروت التخفيضات بدون أي هالة خلفية - الوضع الداكن */
.sale-card:hover,
.product-card.sale-card:hover,
div.sale-card:hover {
    z-index: 20 !important;
    transform: translateY(-4px) !important;
    border-color: #EF4444 !important;
    filter: none !important;
    box-shadow: none !important;
}

.sale-card:hover::before,
.product-card.sale-card:hover::before {
    border-color: #EF4444 !important;
    filter: none !important;
    box-shadow: none !important;
}

/* 4. تحويم الكروت في الوضع النهاري (Light Mode) بدون أي هالة خلفية */
body[data-store-theme="light"] .product-card::before,
body[data-store-theme="light"] .sale-card::before,
body[data-store-theme="light"] .package-card::before,
body[data-store-theme="light"] .brand-card::before {
    background-color: #FFFFFF !important;
    border-color: #CBD5E1 !important;
    filter: none !important;
    box-shadow: none !important;
}

body[data-store-theme="light"] .product-card:hover,
body[data-store-theme="light"] .package-card:hover,
body[data-store-theme="light"] .brand-card:hover,
body[data-store-theme="light"] .pos-item-card:hover,
body[data-store-theme="light"] .dash-card:hover,
body[data-store-theme="light"] .dash-section-card:hover,
body[data-store-theme="light"] .order-card:hover,
body[data-store-theme="light"] .theme-card:hover,
body[data-store-theme="light"] .single-product-card:hover,
body[data-store-theme="light"] ul.products li.product:hover,
body[data-store-theme="light"] div[class*="product-card"]:hover,
body[data-store-theme="light"] article[class*="product-card"]:hover {
    z-index: 20 !important;
    transform: translateY(-4px) !important;
    border-color: var(--hud-primary) !important;
    filter: none !important;
    box-shadow: none !important;
}

body[data-store-theme="light"] .product-card:hover::before,
body[data-store-theme="light"] .package-card:hover::before,
body[data-store-theme="light"] .brand-card:hover::before {
    border-color: var(--hud-primary) !important;
    filter: none !important;
    box-shadow: none !important;
}

/* كروت التخفيضات في الوضع النهاري بدون أي هالة خلفية */
body[data-store-theme="light"] .sale-card:hover,
body[data-store-theme="light"] .product-card.sale-card:hover,
body[data-store-theme="light"] div.sale-card:hover {
    z-index: 20 !important;
    transform: translateY(-4px) !important;
    border-color: #DC2626 !important;
    filter: none !important;
    box-shadow: none !important;
}

body[data-store-theme="light"] .sale-card:hover::before,
body[data-store-theme="light"] .product-card.sale-card:hover::before {
    border-color: #DC2626 !important;
    filter: none !important;
    box-shadow: none !important;
}

/* 5. لوحة التحكم: توهج حدود الكروت بدقة عالية عند التحويم (Luminous Border Glow) */
.sanad-dashboard-root .stat-card,
.sanad-dashboard-root .dash-card,
.sanad-dashboard-root .order-card {
    transition: border-color 0.22s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.22s cubic-bezier(0.4, 0, 0.2, 1),
                background-color 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.sanad-dashboard-root .stat-card-today:hover,
.sanad-dashboard-root .dash-card:has(#stat-today-total):hover {
    border-color: #00F0FF !important;
    box-shadow: 0 0 14px rgba(0, 240, 255, 0.45), inset 0 0 3px rgba(0, 240, 255, 0.2) !important;
}
.sanad-dashboard-root .stat-card-pending:hover,
.sanad-dashboard-root .dash-card:has(#stat-pending):hover {
    border-color: #FFB800 !important;
    box-shadow: 0 0 14px rgba(255, 184, 0, 0.45), inset 0 0 3px rgba(255, 184, 0, 0.2) !important;
}
.sanad-dashboard-root .stat-card-confirmed:hover,
.sanad-dashboard-root .dash-card:has(#stat-confirmed):hover {
    border-color: #00F0FF !important;
    box-shadow: 0 0 14px rgba(0, 240, 255, 0.45), inset 0 0 3px rgba(0, 240, 255, 0.2) !important;
}
.sanad-dashboard-root .stat-card-courier:hover,
.sanad-dashboard-root .dash-card:has(#stat-with-courier):hover {
    border-color: #C084FC !important;
    box-shadow: 0 0 14px rgba(192, 132, 252, 0.45), inset 0 0 3px rgba(192, 132, 252, 0.2) !important;
}
.sanad-dashboard-root .stat-card-delivered:hover,
.sanad-dashboard-root .dash-card:has(#stat-delivered):hover {
    border-color: #3B82F6 !important;
    box-shadow: 0 0 14px rgba(59, 130, 246, 0.45), inset 0 0 3px rgba(59, 130, 246, 0.2) !important;
}
.sanad-dashboard-root .stat-card-rejected:hover,
.sanad-dashboard-root .dash-card:has(#stat-rejected):hover {
    border-color: #EF4444 !important;
    box-shadow: 0 0 14px rgba(239, 68, 68, 0.45), inset 0 0 3px rgba(239, 68, 68, 0.2) !important;
}
.sanad-dashboard-root .order-card:hover {
    border-color: #3B82F6 !important;
    box-shadow: 0 0 14px rgba(59, 130, 246, 0.4), inset 0 0 3px rgba(59, 130, 246, 0.15) !important;
}

/* الوضع النهاري */
body[data-dash-theme="light"].sanad-dashboard-root .stat-card-today:hover,
body[data-dash-theme="light"].sanad-dashboard-root .dash-card:has(#stat-today-total):hover {
    border-color: #0284C7 !important;
    box-shadow: 0 0 12px rgba(2, 132, 199, 0.35) !important;
}
body[data-dash-theme="light"].sanad-dashboard-root .stat-card-pending:hover,
body[data-dash-theme="light"].sanad-dashboard-root .dash-card:has(#stat-pending):hover {
    border-color: #D97706 !important;
    box-shadow: 0 0 12px rgba(217, 119, 6, 0.35) !important;
}
body[data-dash-theme="light"].sanad-dashboard-root .stat-card-confirmed:hover,
body[data-dash-theme="light"].sanad-dashboard-root .dash-card:has(#stat-confirmed):hover {
    border-color: #0284C7 !important;
    box-shadow: 0 0 12px rgba(2, 132, 199, 0.35) !important;
}
body[data-dash-theme="light"].sanad-dashboard-root .stat-card-courier:hover,
body[data-dash-theme="light"].sanad-dashboard-root .dash-card:has(#stat-with-courier):hover {
    border-color: #9333EA !important;
    box-shadow: 0 0 12px rgba(147, 51, 234, 0.35) !important;
}
body[data-dash-theme="light"].sanad-dashboard-root .stat-card-delivered:hover,
body[data-dash-theme="light"].sanad-dashboard-root .dash-card:has(#stat-delivered):hover {
    border-color: #2563EB !important;
    box-shadow: 0 0 12px rgba(37, 99, 235, 0.35) !important;
}
body[data-dash-theme="light"].sanad-dashboard-root .stat-card-rejected:hover,
body[data-dash-theme="light"].sanad-dashboard-root .dash-card:has(#stat-rejected):hover {
    border-color: #DC2626 !important;
    box-shadow: 0 0 12px rgba(220, 38, 38, 0.35) !important;
}
body[data-dash-theme="light"].sanad-dashboard-root .order-card:hover {
    border-color: #2563EB !important;
    box-shadow: 0 0 12px rgba(37, 99, 235, 0.3) !important;
}

/* 6. ضمان عدم قص الهالة وتوفير حاشية علوية وسفلية حرة لارتفاع الكروت والتوهج */
#products-container,
#all-products-grid,
#packages-grid,
#grid-sales-products,
#grid-sales-packages,
#brands-grid {
    overflow: visible !important;
    padding-top: 24px !important;
    padding-bottom: 28px !important;
}

#slider-latest,
#slider-bestsellers,
#slider-sales,
#slider-packages {
    overflow-y: visible !important;
    padding-top: 32px !important;
    padding-bottom: 32px !important;
    margin-top: -14px !important;
    margin-bottom: -14px !important;
}

/* ── Neon Price Highlight ── */
.price-neon {
    font-family: 'Courier New', monospace;
    background: var(--gradient-cta);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 900;
}

/* ── Focus rings with neon glow ── */
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--hud-primary) !important;
    box-shadow: 0 0 0 2px var(--hud-stroke-alpha);
}

/* ── In-Stock Badge (Esports HUD) ── */
.in-stock-badge {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(0, 64, 255, 0.4);
    color: #FFFFFF;
    clip-path: var(--clip-sm);
    font-family: 'Cairo', sans-serif;
    font-weight: 700;
    font-size: 0.7rem;
    padding: 3px 10px;
    letter-spacing: 0.08em;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}
.in-stock-badge::before {
    content: "●";
    color: #FFFFFF;
    font-size: 0.65rem;
}

/* ── Out-of-Stock Badge ── */
.oos-badge {
    background: rgba(255,0,85,0.15);
    border: 1px solid rgba(255,0,85,0.5);
    color: #FF0055;
    clip-path: var(--clip-sm);
    font-family: 'Cairo', sans-serif;
    font-weight: 700;
    font-size: 0.7rem;
    padding: 3px 10px;
    letter-spacing: 0.08em;
}

/* ── Cart Drawer Hairline Border ── */
#cart-drawer,
#mobile-menu-drawer {
    border-left-color: var(--hud-primary) !important;
    box-shadow: -8px 0 25px rgba(0, 0, 0, 0.6);
}

#wishlist-drawer {
    border-right-color: var(--hud-primary) !important;
    box-shadow: 8px 0 25px rgba(0, 0, 0, 0.6);
}

/* ── Sticky Mobile Bar ── */
#sticky-mobile-bar {
    border-top: 1px solid var(--hud-stroke-alpha);
}

/* ── Neon section accent lines ── */
.neon-accent-line {
    background: linear-gradient(90deg, transparent, var(--hud-primary), var(--hud-secondary), transparent);
    height: 1px;
    width: 100%;
}

/* ── Cyber Toast Notification ── */
#cyber-toast {
    z-index: 99999 !important;
}

#cyber-toast > div,
#cyber-toast .cyber-toast-content {
    background-color: #141414 !important;
    border-color: var(--hud-primary) !important;
    color: #FFFFFF !important;
    box-shadow: 0 0 20px var(--hud-glow) !important;
}

#cyber-toast #toast-message,
#cyber-toast span {
    color: #FFFFFF !important;
}

#cyber-toast svg {
    color: var(--hud-primary) !important;
    stroke: var(--hud-primary) !important;
}

/* ── Cyber Toast in Light Mode (الوضع النهاري التكتيكي) ── */
body[data-store-theme="light"] #cyber-toast > div,
body[data-store-theme="light"] #cyber-toast .cyber-toast-content {
    background-color: #FFFFFF !important;
    border-color: var(--hud-primary) !important;
    color: #090D16 !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12), 0 0 15px var(--hud-glow) !important;
}

body[data-store-theme="light"] #cyber-toast #toast-message,
body[data-store-theme="light"] #cyber-toast span,
body[data-store-theme="light"] #cyber-toast .text-white {
    color: #090D16 !important;
    font-weight: 700 !important;
}

body[data-store-theme="light"] #cyber-toast svg {
    color: var(--hud-primary) !important;
    stroke: var(--hud-primary) !important;
}

/* ── Phone input error state ── */
#cust-phone.invalid {
    border-color: var(--neon-red) !important;
    box-shadow: 0 0 0 2px rgba(255,0,85,0.3), 0 0 10px rgba(255,0,85,0.2);
}

/* ── Scrollbar styling ── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--surface-1); }
::-webkit-scrollbar-thumb { background: var(--border-dim); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--hud-primary); }

/* ── Hide scrollbar for sliders ── */
.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* ── Neon glow animation (subtle, no jitter) ── */
@keyframes neon-pulse-subtle {
    0%, 100% { box-shadow: 0 0 6px var(--hud-glow); }
    50%       { box-shadow: 0 0 14px var(--hud-glow), 0 0 28px var(--hud-stroke-alpha); }
}
.neon-pulse-subtle {
    animation: neon-pulse-subtle 3s ease-in-out infinite;
}

/* ── Clip-path utility helpers ── */
.cyber-clip-card { clip-path: var(--clip-card); }
.cyber-clip-btn  { clip-path: var(--clip-btn);  }
.cyber-clip-sm   { clip-path: var(--clip-sm);   }
.cyber-clip-banner {
    clip-path: polygon(24px 0, calc(100% - 24px) 0, 100% 24px, 100% calc(100% - 24px), calc(100% - 24px) 100%, 24px 100%, 0 calc(100% - 24px), 0 24px);
}
@media (max-width: 640px) {
    .cyber-clip-banner {
        clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px);
    }
}

/* ── RTL Support ── */
[dir="rtl"] .font-mono { letter-spacing: 0; }

/* ============================================================
   CYBERPUNK 5-POINT HUD ARROW TAB POLYGON & STROKE
   ============================================================ */
/* ==========================================================================
   SIDEBAR HUD TAB ENGINE: ULTRA-SMOOTH HOVER GLOW & TACTICAL INTERACTION
   ========================================================================== */
.hud-tab-item {
    position: relative;
    z-index: 10;
    display: block;
    width: 100%;
    height: 42px;
    margin-bottom: 5px;
    padding: 1.5px;
    background: rgba(0, 102, 255, 0.4);
    clip-path: polygon(28px 0%, calc(100% - 18px) 0%, 100% 50%, calc(100% - 18px) 100%, 0% 100%);
    box-sizing: border-box;
    text-decoration: none;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
                filter 0.2s cubic-bezier(0.16, 1, 0.3, 1),
                background 0.2s ease !important;
    filter: drop-shadow(0 0 0px transparent);
}

.hud-tab-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    background: #0E0F17;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    clip-path: polygon(28px 0%, calc(100% - 18px) 0%, 100% 50%, calc(100% - 18px) 100%, 0% 100%);
    padding-right: 24px; /* pr-6 safe margin from arrow point */
    padding-left: 32px;  /* pl-8 safe margin from 28px left bevel */
    box-sizing: border-box;
    transition: background 0.35s ease, border-color 0.35s ease !important;
}

/* Hover State - توهج لوني انسيابي فائق النعومة */
.hud-tab-item:hover {
    will-change: transform, filter;
    z-index: 25 !important;
    background: linear-gradient(90deg, var(--hud-secondary) 0%, var(--hud-primary) 100%) !important;
    filter: drop-shadow(0 0 12px var(--hud-glow, rgba(255, 0, 229, 0.5))) 
            drop-shadow(0 4px 14px rgba(0, 0, 0, 0.6)) !important;
    transform: translateX(-5px) !important;
}

[dir="ltr"] .hud-tab-item:hover {
    transform: translateX(5px) !important;
}

.hud-tab-item:hover .hud-tab-content {
    background: rgba(14, 15, 23, 0.95) !important;
}

/* Active / Current Category State - التاب النشط بتوهج دائم وناعم */
.hud-tab-item.active,
.hud-tab-item.is-current {
    z-index: 25 !important;
    background: linear-gradient(90deg, var(--hud-secondary) 0%, var(--hud-primary) 100%) !important;
    filter: drop-shadow(0 0 12px var(--hud-glow, rgba(255, 0, 229, 0.5))) 
            drop-shadow(0 4px 14px rgba(0, 0, 0, 0.6)) !important;
    transform: translateX(-5px) !important;
}

[dir="ltr"] .hud-tab-item.active,
[dir="ltr"] .hud-tab-item.is-current {
    transform: translateX(5px) !important;
}

.hud-tab-item.active .hud-tab-content,
.hud-tab-item.is-current .hud-tab-content {
    background: rgba(18, 20, 32, 0.95) !important;
}

/* Typography & Colors */
.hud-tab-title {
    color: #FFFFFF !important;
    font-family: 'Cairo', sans-serif !important;
    font-weight: 700;
    font-size: 0.875rem; /* text-sm */
    letter-spacing: 0.025em;
    white-space: nowrap;
    transition: color 0.3s ease, text-shadow 0.3s ease !important;
}

.hud-tab-icon {
    color: #8E9AA6;
    transition: color 0.3s ease, transform 0.3s ease !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.hud-tab-item:hover .hud-tab-icon,
.hud-tab-item.active .hud-tab-icon,
.hud-tab-item.is-current .hud-tab-icon {
    color: var(--hud-primary) !important;
    transform: translateX(-2px);
}

[dir="ltr"] .hud-tab-item:hover .hud-tab-icon,
[dir="ltr"] .hud-tab-item.active .hud-tab-icon,
[dir="ltr"] .hud-tab-item.is-current .hud-tab-icon {
    transform: translateX(2px);
}

.hud-tab-bullet {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--hud-secondary);
    flex-shrink: 0;
    transition: background 0.3s ease, box-shadow 0.3s ease !important;
}

.hud-tab-item:hover .hud-tab-bullet,
.hud-tab-item.active .hud-tab-bullet,
.hud-tab-item.is-current .hud-tab-bullet {
    background: var(--hud-primary) !important;
    box-shadow: 0 0 8px var(--hud-primary) !important;
}

/* Mobile Category Pill - Cyberpunk HUD */
.hud-mobile-cat-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: linear-gradient(90deg, rgba(14, 15, 23, 0.95) 0%, rgba(22, 24, 38, 0.85) 100%);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--hud-stroke-alpha);
    clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%);
    color: #FFFFFF !important;
    font-family: 'Cairo', sans-serif !important;
    font-weight: 700;
    font-size: 0.8125rem;
    white-space: nowrap;
    text-decoration: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

.hud-mobile-cat-pill:hover,
.hud-mobile-cat-pill.active {
    border-color: var(--hud-primary) !important;
    box-shadow: 0 0 12px var(--hud-glow), inset 0 0 8px var(--hud-stroke-alpha) !important;
    color: #FFFFFF !important;
}

.hud-mobile-cat-pill .pill-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--hud-secondary);
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.hud-mobile-cat-pill:hover .pill-dot,
.hud-mobile-cat-pill.active .pill-dot {
    background: var(--hud-primary) !important;
    box-shadow: 0 0 8px var(--hud-primary) !important;
}

/* ==========================================================================
   Gamer HUD Sales Countdown & Secondary Image Hover Swap
   ========================================================================== */
.sanad-hud-timer {
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
}

.sanad-hud-timer .timer-days,
.sanad-hud-timer .timer-hours,
.sanad-hud-timer .timer-minutes,
.sanad-hud-timer .timer-seconds {
    font-variant-numeric: tabular-nums;
}

/* Secondary image transition performance optimization */
.product-card .group img,
.sale-card .group img {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

/* ==========================================================================
   Collapse Vertical Void (Hero & Latest Products Gap Optimization)
   ========================================================================== */
#hero-carousel,
#hero-carousel .snap-center {
    height: auto !important;
}

/* ==========================================================================
   Custom Cyberpunk Gamer HUD Select Component (HUG Content Mode)
   ========================================================================== */
.hud-select-wrapper {
    position: relative;
    display: inline-block;
    width: fit-content;
    min-width: max-content;
    max-width: 100%;
    font-family: 'Cairo', sans-serif;
    box-sizing: border-box;
    user-select: none;
    -webkit-user-select: none;
    vertical-align: middle;
}

/* Allow full-width expansion only when explicitly requested (e.g. checkout forms) */
.hud-select-wrapper.w-full {
    width: 100%;
    display: block;
}

/* ==========================================================================
   EXCLUSIVE FILL-WIDTH DROPDOWNS: SALES & PACKAGES WINDOWS ONLY
   حصرية العرض الكامل للقوائم المنسدلة في نافذة العروض ونافذة البكجات فقط
   ========================================================================== */
.offers-categories-dropdown,
.offers-categories-dropdown .hud-select-wrapper,
div[data-target-select="sales-category-select"],
.package-filter-category-col,
.package-filter-category-col .hud-select-wrapper,
div[data-target-select="filter-package-category"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    display: block !important;
}

.offers-categories-dropdown .hud-select-trigger,
div[data-target-select="sales-category-select"] .hud-select-trigger,
.package-filter-category-col .hud-select-trigger,
div[data-target-select="filter-package-category"] .hud-select-trigger {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

.offers-categories-dropdown .hud-select-label,
div[data-target-select="sales-category-select"] .hud-select-label,
.package-filter-category-col .hud-select-label,
div[data-target-select="filter-package-category"] .hud-select-label {
    min-width: 0 !important;
    flex: 1 1 auto !important;
    text-align: right !important;
}

/* Hide original native select visually while keeping it in the DOM & form flow */
.hud-select-native-hidden {
    position: absolute !important;
    opacity: 0 !important;
    width: 1px !important;
    height: 1px !important;
    top: 0 !important;
    left: 0 !important;
    margin: -1px !important;
    padding: 0 !important;
    border: 0 !important;
    clip: rect(0 0 0 0) !important;
    overflow: hidden !important;
    pointer-events: none !important;
    white-space: nowrap !important;
}

/* Trigger Button - Always HUG its text & icon */
.hud-select-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-width: max-content;
    background: rgba(14, 15, 23, 0.95);
    border: 1px solid rgba(0, 64, 255, 0.4);
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
    color: #FFFFFF;
    font-weight: 700;
    font-size: 0.875rem;
    padding: 10px 18px;
    border-radius: 0;
    cursor: pointer;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
    outline: none;
    gap: 12px;
    text-align: right;
    white-space: nowrap;
}

[dir="ltr"] .hud-select-trigger {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
    text-align: left;
}

.hud-select-trigger:hover,
.hud-select-wrapper.is-open .hud-select-trigger {
    border-color: var(--hud-primary);
    box-shadow: 0 0 12px var(--hud-glow);
    background: rgba(20, 20, 30, 0.98);
}

.hud-select-trigger:focus-visible {
    border-color: #00F0FF;
    box-shadow: 0 0 12px rgba(0, 240, 255, 0.5);
}

.hud-select-wrapper.is-disabled {
    opacity: 0.5;
    pointer-events: none;
}

.hud-select-label {
    flex: 1;
    white-space: nowrap;
    text-align: right;
    color: #FFFFFF;
}

[dir="ltr"] .hud-select-label {
    text-align: left;
}

/* Custom Cyber Arrow Indicator */
.hud-select-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    color: #00F0FF;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), color 0.25s ease;
    flex-shrink: 0;
}

.hud-select-wrapper.is-open .hud-select-arrow {
    transform: rotate(180deg);
    color: var(--hud-primary);
}

/* Dropdown Options Menu (Teleported to page-level document.body) */
.hud-select-options {
    position: fixed;
    z-index: 9999999;
    background: rgba(11, 11, 16, 0.98);
    border: 1px solid rgba(0, 64, 255, 0.5);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    max-height: 240px;
    overflow-y: auto;
    padding: 4px 0;
    margin: 0;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.85), 0 0 15px rgba(0, 64, 255, 0.2);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);
    box-sizing: border-box;
    display: none;
    font-family: 'Cairo', sans-serif;
    user-select: none;
    -webkit-user-select: none;
}

.hud-select-options.opens-up {
    clip-path: polygon(0 8px, 8px 0, 100% 0, 100% 100%, 0 100%);
}

.hud-select-options.is-open,
.hud-select-wrapper.is-open .hud-select-options {
    display: block;
    animation: hud-select-slide-down 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}

.hud-select-options.is-open.opens-up {
    animation: hud-select-slide-up 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes hud-select-slide-down {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes hud-select-slide-up {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Custom Cyber Scrollbar */
.hud-select-options::-webkit-scrollbar {
    width: 4px;
}
.hud-select-options::-webkit-scrollbar-track {
    background: #0B0B10;
}
.hud-select-options::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--hud-primary), var(--hud-secondary));
    border-radius: 2px;
}
.hud-select-options {
    scrollbar-width: thin;
    scrollbar-color: var(--hud-primary) #0B0B10;
}

/* Option Item - Always HUG Text */
.hud-select-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 18px;
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, padding 0.15s ease;
    box-sizing: border-box;
    text-align: right;
    white-space: nowrap;
    gap: 16px;
}

[dir="ltr"] .hud-select-option {
    text-align: left;
}

.hud-select-option:hover {
    background: linear-gradient(90deg, var(--hud-glow) 0%, var(--hud-stroke-alpha) 100%);
    padding-right: 20px;
    color: #FFFFFF;
}

[dir="ltr"] .hud-select-option:hover {
    padding-right: 16px;
    padding-left: 20px;
}

.hud-select-option.is-selected {
    background: rgba(0, 64, 255, 0.3);
    border-right: 3px solid var(--hud-primary);
    color: #FFFFFF;
    font-weight: 700;
}

[dir="ltr"] .hud-select-option.is-selected {
    border-right: none;
    border-left: 3px solid var(--hud-primary);
}

.hud-select-option.is-disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}





/* ============================================================
   HUD AUTO-COLLAPSING CARD DETAILS ENGINE (10s SMART COLLAPSE)
   ============================================================ */
.product-text-container {
    position: relative;
}

.product-text-container .product-title,
.product-text-container .product-desc {
    transition: color 0.15s ease;
}

/* Base collapsed state ensures strict line clamping */
.product-text-container:not(.is-expanded) .product-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-text-container:not(.is-expanded) .product-desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Expanded state: displays full title & scrollable/full description */
.product-text-container.is-expanded .product-title {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
    color: #FFFFFF;
}

.product-text-container.is-expanded .product-desc {
    display: block;
    -webkit-line-clamp: unset;
    overflow-y: auto;
    max-height: 150px;
    color: #CBD5E1;
    margin-top: 4px;
    scrollbar-width: thin;
    scrollbar-color: #00E5FF rgba(0, 0, 0, 0.3);
}

.product-text-container.is-expanded .product-desc::-webkit-scrollbar {
    width: 3px;
}
.product-text-container.is-expanded .product-desc::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.3);
}
.product-text-container.is-expanded .product-desc::-webkit-scrollbar-thumb {
    background: #00E5FF;
    border-radius: 2px;
}

/* Tactical Expand Button - Hidden by default unless text is clamped/broken */
.hud-expand-toggle-btn {
    display: none !important;
    user-select: none;
    outline: none;
    cursor: pointer;
    background: transparent;
    border: none;
    padding: 0;
}
.hud-expand-toggle-btn:focus {
    outline: none;
}

/* Only display button when text is genuinely clamped / overflowing */
.product-text-container.has-overflow .hud-expand-toggle-btn {
    display: inline-flex !important;
}

.product-text-container.is-expanded .hud-expand-toggle-btn {
    color: var(--hud-primary);
}
.product-text-container.is-expanded .hud-expand-toggle-btn:hover {
    color: var(--hud-accent);
}

/* HUD Progress indicator for 10-second auto-collapse */
.hud-expand-timer-bar {
    position: absolute;
    bottom: -4px;
    right: 0;
    height: 2px;
    width: 0%;
    background: linear-gradient(90deg, var(--hud-primary), var(--hud-accent));
    box-shadow: 0 0 6px var(--hud-glow);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.product-text-container.is-expanded .hud-expand-timer-bar {
    opacity: 1;
}

/* ============================================================
   UNIFIED CYBERPUNK HUD PRICE RANGE SLIDER SYSTEM
   ============================================================ */

/* Tactical Chamfered HUD Clip */
.clip-hud-sm {
    clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}

/* Outer HUD Filter Box */
.hud-price-filter {
    position: relative;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.hud-price-filter:hover {
    border-color: rgba(0, 64, 255, 0.65);
    box-shadow: 0 0 15px rgba(0, 64, 255, 0.2);
}

/* Custom Cyberpunk Range Input */
.hud-range-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    background: #12131d;
    border: 1px solid rgba(0, 64, 255, 0.35);
    border-radius: 0;
    outline: none;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    margin: 0;
    padding: 0;
}

.hud-range-slider:hover,
.hud-range-slider:focus {
    border-color: rgba(0, 64, 255, 0.75);
    box-shadow: 0 0 8px rgba(0, 64, 255, 0.3);
}

/* WebKit Slider Thumb */
.hud-range-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 18px;
    background: var(--hud-btn-gradient);
    border: 1px solid #FFFFFF;
    clip-path: polygon(3px 0, 100% 0, 100% calc(100% - 3px), calc(100% - 3px) 100%, 0 100%, 0 3px);
    box-shadow: 0 0 10px var(--hud-glow), 0 0 4px var(--hud-stroke-alpha);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.hud-range-slider::-webkit-slider-thumb:hover {
    transform: scale(1.18);
    box-shadow: 0 0 14px var(--hud-glow), 0 0 8px var(--hud-stroke-alpha);
}

.hud-range-slider::-webkit-slider-thumb:active {
    transform: scale(1.05);
    box-shadow: 0 0 18px var(--hud-primary);
}

/* Firefox Slider Track & Thumb */
.hud-range-slider::-moz-range-track {
    width: 100%;
    height: 6px;
    background: #12131d;
    border: 1px solid var(--hud-stroke-alpha);
    border-radius: 0;
    cursor: pointer;
}

.hud-range-slider::-moz-range-thumb {
    width: 14px;
    height: 18px;
    background: var(--hud-btn-gradient);
    border: 1px solid #FFFFFF;
    clip-path: polygon(3px 0, 100% 0, 100% calc(100% - 3px), calc(100% - 3px) 100%, 0 100%, 0 3px);
    box-shadow: 0 0 10px var(--hud-glow);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.hud-range-slider::-moz-range-thumb:hover {
    transform: scale(1.18);
    box-shadow: 0 0 14px var(--hud-glow);
}

.hud-range-slider::-moz-range-progress {
    background: var(--hud-btn-gradient);
    height: 6px;
}

/* HUD Price Badge */
.hud-price-badge {
    clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px);
    box-shadow: inset 0 0 8px var(--hud-glow);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    white-space: nowrap;
}

.hud-price-badge:hover {
    border-color: var(--hud-primary);
    box-shadow: 0 0 8px var(--hud-glow), inset 0 0 8px var(--hud-glow);
}

/* ==========================================================================
   Cyberpunk Tactical Developer Contact Modal
   ========================================================================== */
#devContactModal:not(.hidden) {
    animation: devModalFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

#devContactModal:not(.hidden) > div {
    animation: devModalScaleIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes devModalFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes devModalScaleIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(12px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* ==========================================================================
   GLOBAL THEME BINDINGS - التوصيل الشامل للثيم عبر المتجر
   ========================================================================== */

/* 1. الأزرار الرئيسية وأزرار الدعوة للإجراء (CTAs) */
.btn-primary,
.hud-primary-btn,
.btn-neon-cta,
.add-to-cart-btn,
.checkout-btn,
.btn-explore-gear,
.brand-explore-btn,
button[type="submit"]:not(.search-submit-btn):not(.bg-transparent):not([class*="bg-[#"]):not([class*="bg-black"]):not([class*="bg-gray"]):not([class*="bg-red"]):not(form[role="search"] button),
a.bg-gradient-to-r,
button.bg-gradient-to-r {
    background: var(--hud-btn-gradient) !important;
    box-shadow: 0 0 15px var(--hud-glow) !important;
    color: #FFFFFF !important;
}

/* زر إرسال البحث الشفاف */
.search-submit-btn,
form[role="search"] button,
form[role="search"] button[type="submit"] {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
    outline: none !important;
}

/* 2. حالات التمرير للأزرار */
.btn-primary:hover,
.hud-primary-btn:hover,
.btn-neon-cta:hover,
.add-to-cart-btn:hover,
.checkout-btn:hover,
.btn-explore-gear:hover,
.brand-explore-btn:hover,
a.bg-gradient-to-r:hover,
button.bg-gradient-to-r:hover {
    filter: brightness(1.15);
    box-shadow: 0 0 25px var(--hud-glow) !important;
}

/* 3. إطارات وستروك الكروت والتابات */
.product-card,
.package-card,
.sale-card,
.hud-tab-item,
.hud-box,
.filter-box,
.hud-stroke-box {
    border-color: var(--hud-stroke-alpha) !important;
}

.hud-tab-item:hover,
.hud-tab-item.active,
.hud-tab-item.is-current {
    border-color: var(--hud-primary) !important;
    box-shadow: 0 0 15px var(--hud-glow) !important;
}

/* 4. عناصر التابات الجانبية والبيانات النشطة */
.hud-tab-item.active .hud-tab-bullet,
.hud-tab-item:hover .hud-tab-bullet {
    background-color: var(--hud-primary) !important;
    box-shadow: 0 0 8px var(--hud-primary) !important;
}

.hud-tab-item.active .hud-tab-title,
.hud-tab-item:hover .hud-tab-title {
    color: var(--hud-primary) !important;
}

.hud-tab-item.active .hud-tab-icon,
.hud-tab-item:hover .hud-tab-icon {
    color: var(--hud-primary) !important;
}

/* 5. حبوب الأقسام في الموبايل (Mobile Category Pills) */
.hud-mobile-cat-pill.active,
.hud-mobile-cat-pill:hover {
    border-color: var(--hud-primary) !important;
    color: var(--hud-primary) !important;
    box-shadow: 0 0 10px var(--hud-glow) !important;
}

.hud-mobile-cat-pill.active .pill-dot,
.hud-mobile-cat-pill:hover .pill-dot {
    background-color: var(--hud-primary) !important;
    box-shadow: 0 0 8px var(--hud-primary) !important;
}

/* 6. بادجات وأشرطة نطاق السعر (HUD Price Range Slider & Badges) */
.hud-price-filter {
    border-color: var(--hud-stroke-alpha) !important;
}

.hud-price-filter:hover {
    border-color: var(--hud-secondary) !important;
    box-shadow: 0 0 15px var(--hud-stroke-alpha) !important;
}

.hud-price-badge {
    border-color: var(--hud-primary) !important;
    box-shadow: inset 0 0 8px var(--hud-glow) !important;
}

.hud-price-badge:hover {
    border-color: var(--hud-primary) !important;
    box-shadow: 0 0 12px var(--hud-glow), inset 0 0 8px var(--hud-glow) !important;
}

.hud-range-slider {
    border-color: var(--hud-stroke-alpha) !important;
}

.hud-range-slider:hover,
.hud-range-slider:focus {
    border-color: var(--hud-secondary) !important;
    box-shadow: 0 0 8px var(--hud-stroke-alpha) !important;
}

.hud-range-slider::-webkit-slider-thumb {
    background: var(--hud-btn-gradient) !important;
    box-shadow: 0 0 10px var(--hud-glow) !important;
}

.hud-range-slider::-webkit-slider-thumb:hover {
    box-shadow: 0 0 16px var(--hud-glow) !important;
}

.hud-range-slider::-moz-range-thumb {
    background: var(--hud-btn-gradient) !important;
    box-shadow: 0 0 10px var(--hud-glow) !important;
}

.hud-range-slider::-moz-range-progress {
    background: var(--hud-btn-gradient) !important;
}

/* 7. إطار وتأثيرات البانر الرئيسي بالصفحة الرئيسية */
.cyber-hero-banner {
    background: linear-gradient(135deg, var(--hud-primary) 0%, var(--hud-secondary) 25%, #22222a 50%, var(--hud-secondary) 75%, var(--hud-primary) 100%) !important;
}

/* 8. نصوص وعناصر النيون المتوافقة مع كلاسات Tailwind */
[data-theme] .border-\[\#FF00E5\],
[data-theme] .hover\:border-\[\#FF00E5\]:hover,
[data-theme] .group:hover .group-hover\:border-\[\#FF00E5\] {
    border-color: var(--hud-primary) !important;
}

[data-theme] .text-\[\#FF00E5\],
[data-theme] .hover\:text-\[\#FF00E5\]:hover,
[data-theme] .group:hover .group-hover\:text-\[\#FF00E5\] {
    color: var(--hud-primary) !important;
}

[data-theme] .bg-\[\#FF00E5\] {
    background-color: var(--hud-primary) !important;
}

[data-theme] .border-\[\#0040FF\],
[data-theme] .hover\:border-\[\#0040FF\]:hover,
[data-theme] .group:hover .group-hover\:border-\[\#0040FF\] {
    border-color: var(--hud-secondary) !important;
}

[data-theme] .text-\[\#0040FF\],
[data-theme] .hover\:text-\[\#0040FF\]:hover,
[data-theme] .group:hover .group-hover\:text-\[\#0040FF\] {
    color: var(--hud-secondary) !important;
}

[data-theme] .bg-\[\#0040FF\],
[data-theme] .hover\:bg-\[\#0040FF\]:hover {
    background-color: var(--hud-secondary) !important;
}

/* 9. أزرار نمط العرض (Grid / List Buttons) */
#btn-grid:not(.text-gray-400):not(.bg-\[\#1a1a1a\]),
#btn-list:not(.text-gray-400):not(.bg-\[\#1a1a1a\]) {
    background-color: var(--hud-secondary) !important;
    box-shadow: 0 0 10px var(--hud-stroke-alpha) !important;
}

/* 10. شارة سلة المشتريات */
#cart-count {
    background-color: var(--hud-primary) !important;
    color: #FFFFFF !important;
    box-shadow: 0 0 8px var(--hud-glow) !important;
    min-width: 20px;
    height: 20px;
    padding: 0 4px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    font-weight: 900 !important;
    line-height: 1;
}

body[data-theme="yellow"] #cart-count {
    color: #000000 !important;
}

body[data-theme="arctic"] #cart-count {
    color: #000000 !important;
}

/* 11. عناصر التمرير في شريط الهيدر */
header nav a:hover {
    border-color: var(--hud-primary) !important;
    color: var(--hud-primary) !important;
    background-color: rgba(255, 0, 229, 0.08) !important;
}

body[data-theme="crimson"] header nav a:hover {
    background-color: rgba(255, 30, 86, 0.08) !important;
}

body[data-theme="arctic"] header nav a:hover {
    background-color: rgba(0, 240, 255, 0.08) !important;
}

body[data-theme="yellow"] header nav a:hover {
    background-color: rgba(252, 238, 10, 0.08) !important;
}

/* 12. ربط ظلال وتوهجات Tailwind العامة بمتغيرات الثيم النشط */
[data-theme] .shadow-\[-10px_0_30px_rgba\(255\,0\,229\,0\.15\)\],
[data-theme] .shadow-\[10px_0_30px_rgba\(255\,0\,229\,0\.15\)\],
[data-theme] .shadow-\[0_0_15px_rgba\(255\,0\,229\,0\.3\)\],
[data-theme] .shadow-\[0_0_20px_rgba\(255\,0\,229\,0\.35\)\],
[data-theme] .shadow-\[0_0_25px_rgba\(255\,0\,229\,0\.4\)\],
[data-theme] .shadow-\[0_0_20px_rgba\(255\,0\,229\,0\.3\)\] {
    box-shadow: 0 0 15px var(--hud-glow) !important;
}

/* 13. تحسين سلاسة التنقل والانتقال اللوني في كامل الموقع */
body,
button,
a,
input,
.product-card,
.package-card,
.sale-card,
.hud-tab-item,
.hud-price-filter,
.hud-price-badge,
.cyber-hero-banner {
    transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

/* رفع الكروت والقوائم المنسدلة والنصوص لتبقى دائماً فوق أي هالة ضوئية */
.product-card,
.sale-card,
.package-card {
    position: relative;
    z-index: 5 !important;
}

.product-card > *:not(.wishlist-toggle-btn):not(.oos-badge):not([class*="top-"]):not([class*="absolute"]):not(.product-discount-badge),
.sale-card > *:not(.wishlist-toggle-btn):not(.oos-badge):not([class*="top-"]):not([class*="absolute"]):not(.product-discount-badge),
.package-card > *:not(.wishlist-toggle-btn):not(.oos-badge):not([class*="top-"]):not([class*="absolute"]):not(.product-discount-badge) {
    position: relative;
    z-index: 6 !important;
}

/* رفع شارات الخصم، نفاد الكمية وزر المفضلة لتكون دائماً فوق الصورة وكامل محتويات الكرت */
.product-discount-badge,
.oos-badge,
.wishlist-toggle-btn,
.product-card > .product-discount-badge,
.product-card > .oos-badge,
.product-card > .wishlist-toggle-btn,
.product-card > [class*="top-2"],
.product-card > [class*="absolute"],
.sale-card > .product-discount-badge,
.sale-card > .oos-badge,
.sale-card > .wishlist-toggle-btn,
.sale-card > [class*="top-2"],
.sale-card > [class*="absolute"],
.package-card > .product-discount-badge,
.package-card > .oos-badge,
.package-card > .wishlist-toggle-btn,
.package-card > [class*="top-2"],
.package-card > [class*="absolute"] {
    position: absolute !important;
    z-index: 35 !important;
    pointer-events: auto !important;
}

.offers-filter-bar,
.offers-categories-dropdown,
.hud-select-wrapper,
.hud-price-filter,
select {
    position: relative;
    z-index: 25 !important;
}

/* ==========================================================================
   AMBIENT SIDE GLOW & SIDEBAR EDGE ENGINE (المحيط والتوهج الجانبي التكتيكي)
   ========================================================================== */

/* 1. إلغاء التوهج الجانبي المحيطي للشاشة */
body::after,
.side-ambient-glow,
[dir="ltr"] body::after,
[dir="ltr"] .side-ambient-glow {
    display: none !important;
    content: none !important;
    background: none !important;
}

/* إخفاء التوهج في الداشبورد لمنع التداخل مع كروت وجداول الإدارة */
body.page-template-page-dashboard::after,
.sanad-dashboard-root::after,
body[data-dash-theme]::after {
    display: none !important;
}

/* ==========================================================================
   SIDEBAR AMBIENT GLOW: SAFE LAYOUT FIX & CLIPPED GLOW
   ========================================================================== */

/* 1. رفع القائمة الجانبية ومحاذاتها تماماً بمستوى الكاروسيل */
@media (min-width: 1024px) {
    main.homepage-main,
    main:has(aside):has(.cyber-hero-banner) {
        gap: 10px !important;
    }
}

aside.w-\[280px\],
aside.xl\:w-\[300px\],
aside:has(.hud-tab-item),
.gaming-categories-sidebar {
    position: sticky !important;
    top: 5rem !important; /* الالتصاق تحت الهيدر عند التمرير بدون أي هبوط أو إزاحة أولية */
    margin-top: 0 !important;
    padding-top: 0 !important;
    align-self: flex-start !important;
    height: fit-content !important;
    isolation: auto !important;
}

/* 2. حصر التوهج داخل حدود القائمة فقط ومنعه من الانسكاب */
aside div.border-r-2,
aside .sidebar-edge-border,
.sidebar-edge-border,
aside ul.list-none {
    position: relative !important;
    overflow: hidden !important; /* قص أي توهج يمتد خارج القائمة */
    height: fit-content !important;
    border-radius: 0.5rem !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* 3. رفع أزرار التصنيفات للمقدمة */
.hud-tab-item {
    position: relative !important;
    z-index: 10 !important;
}

/* ==========================================================================
   SIDEBAR & DRAWERS: COMPLETE REMOVAL OF BACKGROUND COLOR GLOW / TINT
   ========================================================================== */

/* 4. إلغاء أي هالة أو تأثير لوني خلف القائمة الجانبية في كل الثيمات والاتجاهات */
aside div.border-r-2::before,
aside ul.list-none::before,
aside .sidebar-edge-border::before,
.sidebar-edge-border::before,
.sidebar-glow-backdrop,
body[data-store-theme="light"] aside div.border-r-2::before,
body[data-store-theme="light"] aside ul.list-none::before,
[dir="ltr"] aside div.border-r-2::before,
[dir="ltr"] aside ul.list-none::before,
[dir="ltr"] body[data-store-theme="light"] aside div.border-r-2::before,
[dir="ltr"] body[data-store-theme="light"] aside ul.list-none::before,
body[data-theme="yellow"]::after,
body[data-theme="yellow"] .side-ambient-glow,
body[data-theme="yellow"] .sidebar-edge-border::before,
body[data-theme="yellow"] aside div.border-r-2::before,
body[data-theme="yellow"] aside ul.list-none::before,
body[data-theme="yellow"] .categories-sidebar-border::before,
body[data-theme="yellow"] .sidebar-glow-backdrop,
[dir="ltr"] body[data-theme="yellow"]::after,
[dir="ltr"] body[data-theme="yellow"] .side-ambient-glow,
[dir="ltr"] body[data-theme="yellow"] .sidebar-edge-border::before,
[dir="ltr"] body[data-theme="yellow"] aside div.border-r-2::before,
[dir="ltr"] body[data-theme="yellow"] aside ul.list-none::before,
[dir="ltr"] body[data-theme="yellow"] .categories-sidebar-border::before,
[dir="ltr"] body[data-theme="yellow"] .sidebar-glow-backdrop {
    display: none !important;
    content: none !important;
    background: none !important;
    box-shadow: none !important;
}

body[data-theme="yellow"] .sidebar-edge-border::after,
body[data-theme="yellow"] aside .border-r-2::after,
body[data-theme="yellow"] .categories-sidebar-border::after {
    box-shadow: none !important;
}

/* 3. أدراج السلة والمفضلة والقائمة الجانبية (Drawers Clean Neutral Shadows) */
#cart-drawer,
#mobile-menu-drawer {
    border-left: 1px solid #282E3D !important;
    box-shadow: -10px 0 25px rgba(0, 0, 0, 0.6) !important;
}

#wishlist-drawer {
    border-right: 1px solid #282E3D !important;
    box-shadow: 10px 0 25px rgba(0, 0, 0, 0.6) !important;
}

/* تصفير ظل الأدراج عند إغلاقها تماماً لمنع أي تسرب ضوئي لحافة الشاشة */
#cart-drawer.translate-x-full,
#mobile-menu-drawer.translate-x-full,
#wishlist-drawer.-translate-x-full {
    box-shadow: none !important;
}


/* ==========================================================================
   MINIMALIST, SOFT & 100% EYE-FRIENDLY DASHBOARD (GLOBAL SYSTEM)
   ========================================================================== */

/* --------------------------------------------------------------------------
   RULE 1: COMPLETELY REMOVE ALL "HALO" EFFECTS (NO GLOW, NO SHADOW, NO OUTLINE)
   Hover states strictly rely on subtle background color shifts across all elements.
   -------------------------------------------------------------------------- */
.sanad-dashboard-root,
.sanad-dashboard-root *,
body.page-template-page-dashboard,
body.page-template-page-dashboard *,
body.sanad-dashboard-root,
body.sanad-dashboard-root * {
    text-shadow: none !important;
}

.sanad-dashboard-root *:hover,
.sanad-dashboard-root *:focus,
.sanad-dashboard-root *:focus-visible,
.sanad-dashboard-root *:focus-within,
.sanad-dashboard-root *:active,
body.page-template-page-dashboard *:hover,
body.page-template-page-dashboard *:focus,
body.page-template-page-dashboard *:focus-visible,
body.page-template-page-dashboard *:focus-within,
body.page-template-page-dashboard *:active,
body.sanad-dashboard-root *:hover,
body.sanad-dashboard-root *:focus,
body.sanad-dashboard-root *:focus-visible,
body.sanad-dashboard-root *:focus-within,
body.sanad-dashboard-root *:active {
    box-shadow: none !important;
    text-shadow: none !important;
    filter: none !important;
    outline: none !important;
}

/* Eliminate any glowing / halo shadows across all states */
.sanad-dashboard-root [class*="shadow-[0_0_"],
.sanad-dashboard-root [class*="shadow-lg"],
.sanad-dashboard-root [class*="shadow-xl"],
.sanad-dashboard-root [class*="shadow-2xl"],
body.page-template-page-dashboard [class*="shadow-[0_0_"],
body.page-template-page-dashboard [class*="shadow-lg"],
body.page-template-page-dashboard [class*="shadow-xl"],
body.page-template-page-dashboard [class*="shadow-2xl"] {
    box-shadow: none !important;
}

/* Subtle background color shifts on hover for Cards & Containers (Dark Theme) */
.sanad-dashboard-root .dash-card,
.sanad-dashboard-root .dash-section-card,
.sanad-dashboard-root .order-card,
.sanad-dashboard-root .theme-card,
.sanad-dashboard-root .modal-card,
.sanad-dashboard-root .pos-cart-panel,
.sanad-dashboard-root div[class*="rounded-xl"],
.sanad-dashboard-root div[class*="rounded-2xl"] {
    transition: background-color 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease !important;
    transform: none !important;
}

.sanad-dashboard-root .dash-section-card:hover,
.sanad-dashboard-root .theme-card:hover,
.sanad-dashboard-root .modal-card:hover,
body.sanad-dashboard-root .dash-section-card:hover,
body.sanad-dashboard-root .theme-card:hover {
    background-color: #1A1D27 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    transform: none !important;
    filter: none !important;
    outline: none !important;
}

/* Subtle background color shifts on hover for Cards (Light Theme) */
body[data-dash-theme="light"] .dash-section-card:hover,
body[data-dash-theme="light"] .theme-card:hover,
body[data-dash-theme="light"] .modal-card:hover,
body[data-dash-theme="light"].sanad-dashboard-root .dash-section-card:hover,
body[data-dash-theme="light"].sanad-dashboard-root .theme-card:hover {
    background-color: #F8FAFC !important;
    border-color: #CBD5E1 !important;
    transform: none !important;
    filter: none !important;
    outline: none !important;
}


/* Links & Clickable elements: zero glow on hover */
.sanad-dashboard-root a:hover,
.sanad-dashboard-root button:hover {
    box-shadow: none !important;
    text-shadow: none !important;
    filter: none !important;
    outline: none !important;
}

/* Inputs & Form controls: zero halo, clean subtle border on focus */
.sanad-dashboard-root input,
.sanad-dashboard-root select,
.sanad-dashboard-root textarea,
.sanad-dashboard-root .dash-input {
    transition: border-color 0.18s ease, background-color 0.18s ease !important;
    box-shadow: none !important;
    outline: none !important;
}

.sanad-dashboard-root input:hover,
.sanad-dashboard-root select:hover,
.sanad-dashboard-root textarea:hover,
.sanad-dashboard-root .dash-input:hover {
    border-color: rgba(255, 255, 255, 0.15) !important;
    box-shadow: none !important;
    outline: none !important;
}

.sanad-dashboard-root input:focus,
.sanad-dashboard-root select:focus,
.sanad-dashboard-root textarea:focus,
.sanad-dashboard-root .dash-input:focus {
    box-shadow: none !important;
    outline: none !important;
    border-color: #3B82F6 !important;
    background-color: #131620 !important;
}

body[data-dash-theme="light"] input:hover,
body[data-dash-theme="light"] select:hover,
body[data-dash-theme="light"] textarea:hover,
body[data-dash-theme="light"] .dash-input:hover {
    border-color: #94A3B8 !important;
    box-shadow: none !important;
    outline: none !important;
}

body[data-dash-theme="light"] input:focus,
body[data-dash-theme="light"] select:focus,
body[data-dash-theme="light"] textarea:focus,
body[data-dash-theme="light"] .dash-input:focus {
    box-shadow: none !important;
    outline: none !important;
    border-color: #2563EB !important;
    background-color: #FFFFFF !important;
}

/* --------------------------------------------------------------------------
   RULE 2: STRICT NEUTRAL MONOCHROMATIC COLOR SCHEME
   Neutral monochromatic backgrounds, borders, typography. Non-neutral colors
   are STRICTLY restricted to icons, status badges, and buttons.
   -------------------------------------------------------------------------- */
/* Dark Theme Base & Canvas */
.sanad-dashboard-root,
body.page-template-page-dashboard,
body.sanad-dashboard-root {
    background-color: #0F1117 !important;
    background-image: none !important;
    color: #E2E8F0 !important;
    font-family: 'ARMION', 'Cairo', system-ui, -apple-system, sans-serif !important;
}

/* Sidebar Neutral Background (Dark Theme) */
.sanad-dashboard-root aside,
.sanad-dashboard-root #app-sidebar {
    background-color: #12141C !important;
    border-color: rgba(255, 255, 255, 0.07) !important;
}

/* Header & Panels Neutral Background (Dark Theme) */
.sanad-dashboard-root header,
.sanad-dashboard-root .dash-header,
.sanad-dashboard-root .dash-card,
.sanad-dashboard-root .dash-section-card,
.sanad-dashboard-root .order-card,
.sanad-dashboard-root .theme-card,
.sanad-dashboard-root .modal-card,
.sanad-dashboard-root #sanad-dialog-card,
.sanad-dashboard-root .pos-cart-panel,
.sanad-dashboard-root #product-hover-preview {
    background-color: #161922 !important;
    color: #E2E8F0 !important;
    border-color: rgba(255, 255, 255, 0.07) !important;
}

/* Sub-containers & inner card sections (Dark Theme) */
.sanad-dashboard-root .bg-\[\#0E0F17\],
.sanad-dashboard-root .bg-\[\#11131A\],
.sanad-dashboard-root .bg-\[\#111116\],
.sanad-dashboard-root .bg-\[\#15151c\],
.sanad-dashboard-root .bg-\[\#181820\],
.sanad-dashboard-root .bg-\[\#121217\],
.sanad-dashboard-root .bg-\[\#14141c\],
.sanad-dashboard-root .order-card .bg-black\/40,
.sanad-dashboard-root .order-card .bg-black\/30,
.sanad-dashboard-root .order-card .bg-black\/20 {
    background-color: #11131A !important;
    border-color: rgba(255, 255, 255, 0.07) !important;
}

/* Form Inputs Neutral Styling (Dark Theme) */
.sanad-dashboard-root .dash-input,
.sanad-dashboard-root input[type="text"],
.sanad-dashboard-root input[type="number"],
.sanad-dashboard-root input[type="password"],
.sanad-dashboard-root input[type="tel"],
.sanad-dashboard-root input[type="url"],
.sanad-dashboard-root input[type="search"],
.sanad-dashboard-root input[type="date"],
.sanad-dashboard-root select,
.sanad-dashboard-root textarea {
    background-color: #11131A !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #F1F5F9 !important;
    padding: 0.6rem 0.85rem !important;
}

.sanad-dashboard-root select option {
    background-color: #161922 !important;
    color: #F1F5F9 !important;
    padding: 8px 12px !important;
}

.sanad-dashboard-root select option:hover,
.sanad-dashboard-root select option:focus,
.sanad-dashboard-root select option:checked {
    background-color: #1E222D !important;
    color: #FFFFFF !important;
}


/* Neutral Typography (Dark Theme) */
.sanad-dashboard-root h1,
.sanad-dashboard-root h2,
.sanad-dashboard-root h3,
.sanad-dashboard-root h4,
.sanad-dashboard-root h5,
.sanad-dashboard-root h6,
.sanad-dashboard-root strong,
.sanad-dashboard-root b,
.sanad-dashboard-root .text-white,
.sanad-dashboard-root .font-bold.text-white,
.sanad-dashboard-root .dash-title {
    color: #F1F5F9 !important;
}

.sanad-dashboard-root p,
.sanad-dashboard-root label,
.sanad-dashboard-root .text-slate-300,
.sanad-dashboard-root .text-slate-400,
.sanad-dashboard-root .text-gray-300,
.sanad-dashboard-root .text-gray-400,
.sanad-dashboard-root .text-gray-500,
.sanad-dashboard-root .text-\[\#8E9AA6\] {
    color: #94A3B8 !important;
}

/* Neutral Metrics & Stats Numbers (No neon) */
.sanad-dashboard-root #stat-today-total,
.sanad-dashboard-root #stat-pending,
.sanad-dashboard-root #stat-confirmed,
.sanad-dashboard-root #stat-with-courier,
.sanad-dashboard-root #stat-delivered,
.sanad-dashboard-root #stat-delivered-cash,
.sanad-dashboard-root #stat-rejected,
.sanad-dashboard-root .stat-val,
.sanad-dashboard-root span[class*="text-emerald-400"],
.sanad-dashboard-root span[class*="text-cyan-400"],
.sanad-dashboard-root span[class*="text-[#00F0FF]"] {
    color: #F1F5F9 !important;
}

/* Neutral Table Styling (Dark Theme) */
.sanad-dashboard-root .dash-table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

.sanad-dashboard-root .dash-table th {
    background-color: #11131A !important;
    color: #94A3B8 !important;
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    padding: 0.85rem 1rem !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.sanad-dashboard-root .dash-table td {
    padding: 0.85rem 1rem !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    color: #CBD5E1 !important;
    font-size: 0.875rem !important;
}

.sanad-dashboard-root .dash-table tr:hover td {
    background-color: rgba(255, 255, 255, 0.02) !important;
}

/* --------------------------------------------------------------------------
   ALLOWED NON-NEUTRAL ELEMENTS: STANDARD UI BUTTONS, BADGES, & ICONS ONLY
   -------------------------------------------------------------------------- */
/* Dashboard Buttons: Primary Blue, Secondary Neutral, Success Green, Warning Yellow, Danger Red */
.sanad-dashboard-root .dash-btn-primary,
.sanad-dashboard-root .btn-primary,
.sanad-dashboard-root button.bg-blue-600,
.sanad-dashboard-root button#submit-order-btn,
.sanad-dashboard-root button#open-add-product-modal-btn,
.sanad-dashboard-root button#open-add-banner-modal-btn,
.sanad-dashboard-root button#crud-save-btn,
.sanad-dashboard-root .btn-approve-order {
    background-color: #2563EB !important;
    color: #FFFFFF !important;
    border: none !important;
    font-weight: 600 !important;
    box-shadow: none !important;
    transition: background-color 0.18s ease !important;
}
.sanad-dashboard-root .dash-btn-primary:hover,
.sanad-dashboard-root .btn-primary:hover,
.sanad-dashboard-root button.bg-blue-600:hover,
.sanad-dashboard-root button#submit-order-btn:hover,
.sanad-dashboard-root button#open-add-product-modal-btn:hover,
.sanad-dashboard-root button#open-add-banner-modal-btn:hover,
.sanad-dashboard-root button#crud-save-btn:hover,
.sanad-dashboard-root .btn-approve-order:hover {
    background-color: #1D4ED8 !important;
    box-shadow: none !important;
}

.sanad-dashboard-root .dash-btn-secondary {
    background-color: #1E222D !important;
    color: #CBD5E1 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    font-weight: 500 !important;
    box-shadow: none !important;
    transition: background-color 0.18s ease, color 0.18s ease !important;
}
.sanad-dashboard-root .dash-btn-secondary:hover {
    background-color: #282E3D !important;
    color: #FFFFFF !important;
    box-shadow: none !important;
}

.sanad-dashboard-root .btn-success,
.sanad-dashboard-root .dash-btn-success,
.sanad-dashboard-root button.bg-emerald-600,
.sanad-dashboard-root button.bg-green-600,
.sanad-dashboard-root .btn-mark-delivered {
    background-color: #16A34A !important;
    color: #FFFFFF !important;
    border: none !important;
    box-shadow: none !important;
    transition: background-color 0.18s ease !important;
}
.sanad-dashboard-root .btn-success:hover,
.sanad-dashboard-root .dash-btn-success:hover,
.sanad-dashboard-root button.bg-emerald-600:hover,
.sanad-dashboard-root button.bg-green-600:hover,
.sanad-dashboard-root .btn-mark-delivered:hover {
    background-color: #15803D !important;
    box-shadow: none !important;
}

.sanad-dashboard-root .btn-warning,
.sanad-dashboard-root .dash-btn-warning,
.sanad-dashboard-root button.bg-amber-500,
.sanad-dashboard-root button#confirm-return-btn,
.sanad-dashboard-root button#btn-save-discount,
.sanad-dashboard-root button#pos-submit-btn {
    background-color: #D97706 !important;
    color: #FFFFFF !important;
    border: none !important;
    box-shadow: none !important;
    transition: background-color 0.18s ease !important;
}
.sanad-dashboard-root .btn-warning:hover,
.sanad-dashboard-root .dash-btn-warning:hover,
.sanad-dashboard-root button.bg-amber-500:hover,
.sanad-dashboard-root button#confirm-return-btn:hover,
.sanad-dashboard-root button#btn-save-discount:hover,
.sanad-dashboard-root button#pos-submit-btn:hover {
    background-color: #B45309 !important;
    box-shadow: none !important;
}

.sanad-dashboard-root .btn-danger,
.sanad-dashboard-root .dash-btn-danger,
.sanad-dashboard-root button.bg-rose-600,
.sanad-dashboard-root button.bg-red-600,
.sanad-dashboard-root button#confirm-reject-btn,
.sanad-dashboard-root button#submit-bundle-btn,
.sanad-dashboard-root button#coupon-submit-btn,
.sanad-dashboard-root button#btn-remove-banner-img {
    background-color: #DC2626 !important;
    color: #FFFFFF !important;
    border: none !important;
    box-shadow: none !important;
    transition: background-color 0.18s ease !important;
}
.sanad-dashboard-root .btn-danger:hover,
.sanad-dashboard-root .dash-btn-danger:hover,
.sanad-dashboard-root button.bg-rose-600:hover,
.sanad-dashboard-root button.bg-red-600:hover,
.sanad-dashboard-root button#confirm-reject-btn:hover,
.sanad-dashboard-root button#submit-bundle-btn:hover,
.sanad-dashboard-root button#coupon-submit-btn:hover,
.sanad-dashboard-root button#btn-remove-banner-img:hover {
    background-color: #B91C1C !important;
    box-shadow: none !important;
}

.sanad-dashboard-root .btn-dispatch-courier {
    background-color: #9333EA !important;
    color: #FFFFFF !important;
    border: none !important;
    box-shadow: none !important;
    transition: background-color 0.18s ease !important;
}
.sanad-dashboard-root .btn-dispatch-courier:hover {
    background-color: #7E22CE !important;
    box-shadow: none !important;
}

/* Status Badges: Standard UI Colors */
.sanad-dashboard-root .badge-status-completed,
.sanad-dashboard-root .badge-status-delivered {
    background-color: rgba(22, 163, 74, 0.12) !important;
    color: #4ADE80 !important;
    border: 1px solid rgba(22, 163, 74, 0.25) !important;
    padding: 2px 8px !important;
}

.sanad-dashboard-root .badge-status-pending,
.sanad-dashboard-root .coupon-badge-limit,
.sanad-dashboard-root .log-badge-pending {
    background-color: rgba(217, 119, 6, 0.12) !important;
    color: #FBBF24 !important;
    border: 1px solid rgba(217, 119, 6, 0.25) !important;
    padding: 2px 8px !important;
}

.sanad-dashboard-root .badge-status-cancelled,
.sanad-dashboard-root .badge-status-rejected,
.sanad-dashboard-root .coupon-badge-expired,
.sanad-dashboard-root .log-badge-reject {
    background-color: rgba(220, 38, 38, 0.12) !important;
    color: #F87171 !important;
    border: 1px solid rgba(220, 38, 38, 0.25) !important;
    padding: 2px 8px !important;
}

.sanad-dashboard-root .badge-status-courier,
.sanad-dashboard-root .log-badge-courier {
    background-color: rgba(147, 51, 234, 0.12) !important;
    color: #C084FC !important;
    border: 1px solid rgba(147, 51, 234, 0.25) !important;
    padding: 2px 8px !important;
}

.sanad-dashboard-root .badge-status-returned,
.sanad-dashboard-root .log-badge-return {
    background-color: rgba(234, 88, 12, 0.12) !important;
    color: #FB923C !important;
    border: 1px solid rgba(234, 88, 12, 0.25) !important;
    padding: 2px 8px !important;
}

.sanad-dashboard-root .coupon-badge-active,
.sanad-dashboard-root .log-badge-approve,
.sanad-dashboard-root .log-badge-pos {
    background-color: rgba(37, 99, 235, 0.12) !important;
    color: #60A5FA !important;
    border: 1px solid rgba(37, 99, 235, 0.25) !important;
    padding: 2px 8px !important;
}

.sanad-dashboard-root .coupon-progress-fill {
    background-color: #2563EB !important;
}

/* Neutral ID, Code and General Badges */
.sanad-dashboard-root .log-id-badge,
.sanad-dashboard-root .log-badge-general,
.sanad-dashboard-root .coupon-code-badge,
.sanad-dashboard-root .coupon-badge-disabled,
.sanad-dashboard-root #modal-order-id,
.sanad-dashboard-root #modal-return-order-id {
    background-color: #11131A !important;
    color: #CBD5E1 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding: 2px 8px !important;
}

/* --------------------------------------------------------------------------
   RULE 3: COMPLETELY ELIMINATE SHARP EDGES (CONSISTENT SOFT BORDER-RADIUS 8-12px)
   -------------------------------------------------------------------------- */
.sanad-dashboard-root *,
body.page-template-page-dashboard *,
body.sanad-dashboard-root * {
    clip-path: none !important;
}
.sanad-dashboard-root .cyber-clip-tag {
    display: none !important;
}

/* Containers, Modals, Sections & Cards: Soft 12px */
.sanad-dashboard-root .dash-card,
.sanad-dashboard-root .dash-section-card,
.sanad-dashboard-root .order-card,
.sanad-dashboard-root .theme-card,
.sanad-dashboard-root .modal-card,
.sanad-dashboard-root #sanad-dialog-card,
.sanad-dashboard-root #crud-product-modal > div,
.sanad-dashboard-root #reject-modal > div,
.sanad-dashboard-root #return-modal > div,
.sanad-dashboard-root #whatsapp-dispatch-modal > div,
.sanad-dashboard-root #quick-discount-modal > div,
.sanad-dashboard-root .pos-cart-panel,
.sanad-dashboard-root .filter-bar,
.sanad-dashboard-root #product-hover-preview,
.sanad-dashboard-root div[class*="rounded-xl"],
.sanad-dashboard-root div[class*="rounded-2xl"],
.sanad-dashboard-root div[class*="rounded-3xl"] {
    border-radius: 12px !important;
}

/* Buttons, Input fields, Select, Textarea: Soft 8px */
.sanad-dashboard-root button:not(.nav-item),
.sanad-dashboard-root .dash-btn-primary,
.sanad-dashboard-root .dash-btn-secondary,
.sanad-dashboard-root .btn,
.sanad-dashboard-root .filter-btn,
.sanad-dashboard-root .order-filter-tab,
.sanad-dashboard-root .orders-view-btn,
.sanad-dashboard-root .dash-input,
.sanad-dashboard-root input,
.sanad-dashboard-root select,
.sanad-dashboard-root textarea,
.sanad-dashboard-root .hud-quantity-stepper,
.sanad-dashboard-root .hud-select-trigger,
.sanad-dashboard-root .hud-select-options,
.sanad-dashboard-root .preview-thumb-item,
.sanad-dashboard-root .bundle-preview-thumb-item {
    border-radius: 8px !important;
}

/* Sidebar Navigation Items: Soft 10px */
.sanad-dashboard-root .nav-item,
.sanad-dashboard-root aside nav button,
.sanad-dashboard-root .sidebar-item,
#app-sidebar .nav-item {
    border-radius: 10px !important;
}

/* Tables & Table Wrappers: Soft 10px */
.sanad-dashboard-root .dash-table,
.sanad-dashboard-root table,
.sanad-dashboard-root div:has(> table),
.sanad-dashboard-root .overflow-x-auto:has(> table),
.sanad-dashboard-root .dash-table-wrapper {
    border-radius: 10px !important;
}

/* Badges, Pills & Small Status Tags: Soft 6px */
.sanad-dashboard-root span[class*="badge"],
.sanad-dashboard-root span[class*="status"],
.sanad-dashboard-root .nav-item .nav-badge,
.sanad-dashboard-root .status-chip,
.sanad-dashboard-root .active-dot {
    border-radius: 6px !important;
}

/* --------------------------------------------------------------------------
   RULE 4: SOFTEN CONTRAST (SUBTLE, EYE-FRIENDLY GRAY LINES)
   Remove harsh black or pure white borders, replacing with soft, subtle lines.
   -------------------------------------------------------------------------- */
/* Dark Theme: Soft subtle gray borders (no pure white or harsh borders) */
.sanad-dashboard-root .dash-card,
.sanad-dashboard-root .dash-section-card,
.sanad-dashboard-root .order-card,
.sanad-dashboard-root .theme-card,
.sanad-dashboard-root aside,
.sanad-dashboard-root #app-sidebar,
.sanad-dashboard-root header,
.sanad-dashboard-root #sanad-dialog-card,
.sanad-dashboard-root .dash-input,
.sanad-dashboard-root input,
.sanad-dashboard-root select,
.sanad-dashboard-root textarea,
.sanad-dashboard-root .hud-quantity-stepper,
.sanad-dashboard-root .border,
.sanad-dashboard-root .border-t,
.sanad-dashboard-root .border-b,
.sanad-dashboard-root .border-l,
.sanad-dashboard-root .border-r,
.sanad-dashboard-root .border-white\/5,
.sanad-dashboard-root .border-white\/10,
.sanad-dashboard-root .border-white\/20,
.sanad-dashboard-root .border-white,
.sanad-dashboard-root .border-\[\#333\],
.sanad-dashboard-root .border-\[\#22222a\],
.sanad-dashboard-root .border-\[\#282E3D\],
.sanad-dashboard-root .border-\[\#2a2a35\],
.sanad-dashboard-root div[class*="border-slate-700"],
.sanad-dashboard-root div[class*="border-white\/"],
.sanad-dashboard-root div[class*="border-red-500\/"],
.sanad-dashboard-root div[class*="border-amber-500\/"] {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

.sanad-dashboard-root hr,
.sanad-dashboard-root .divide-y > *,
.sanad-dashboard-root .border-t.border-white\/10,
.sanad-dashboard-root .border-b.border-white\/10 {
    border-color: rgba(255, 255, 255, 0.05) !important;
}

/* Light Theme: Soft subtle gray borders (no harsh black) */
body[data-dash-theme="light"] .dash-card,
body[data-dash-theme="light"] .dash-section-card,
body[data-dash-theme="light"] .order-card,
body[data-dash-theme="light"] .theme-card,
body[data-dash-theme="light"] aside,
body[data-dash-theme="light"] #app-sidebar,
body[data-dash-theme="light"] header,
body[data-dash-theme="light"] #sanad-dialog-card,
body[data-dash-theme="light"] .dash-input,
body[data-dash-theme="light"] input,
body[data-dash-theme="light"] select,
body[data-dash-theme="light"] textarea,
body[data-dash-theme="light"] .hud-quantity-stepper,
body[data-dash-theme="light"] .border,
body[data-dash-theme="light"] .border-t,
body[data-dash-theme="light"] .border-b,
body[data-dash-theme="light"] .border-l,
body[data-dash-theme="light"] .border-r,
body[data-dash-theme="light"] div[class*="border-"] {
    border-color: #E2E8F0 !important;
}

body[data-dash-theme="light"] hr,
body[data-dash-theme="light"] .divide-y > * {
    border-color: rgba(0, 0, 0, 0.06) !important;
}

/* Scrollbar ناعم ونظيف ومريح للعين للداشبورد */
.sanad-dashboard-root ::-webkit-scrollbar {
    width: 6px !important;
    height: 6px !important;
}
.sanad-dashboard-root ::-webkit-scrollbar-track {
    background: #0F1117 !important;
}
.sanad-dashboard-root ::-webkit-scrollbar-thumb {
    background: #282E3D !important;
    border-radius: 4px !important;
}
.sanad-dashboard-root ::-webkit-scrollbar-thumb:hover {
    background: #3B82F6 !important;
}

/* ============================================================
   HUD QUANTITY STEPPER (MINIMALIST & EYE-FRIENDLY REFINEMENT)
   ============================================================ */
.hud-quantity-stepper {
    display: inline-flex;
    align-items: center;
    background: #11131A !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 8px !important;
    height: 38px;
    clip-path: none !important;
    box-shadow: none !important;
    transition: border-color 0.18s ease, background-color 0.18s ease !important;
}

.hud-quantity-stepper:focus-within,
.hud-quantity-stepper:hover {
    border-color: rgba(255, 255, 255, 0.18) !important;
    box-shadow: none !important;
    outline: none !important;
}

.hud-quantity-stepper .qty-btn {
    width: 32px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: #94A3B8;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    border: none;
    box-shadow: none !important;
    transition: color 0.15s ease, background-color 0.15s ease;
    user-select: none;
    border-radius: 6px !important;
}

.hud-quantity-stepper .qty-btn:hover {
    color: #FFFFFF;
    background: rgba(255, 255, 255, 0.06) !important;
    box-shadow: none !important;
}

.hud-quantity-stepper .qty-input {
    width: 36px;
    height: 100%;
    background: transparent;
    border: none;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    color: #F1F5F9;
    text-align: center;
    font-family: monospace;
    font-size: 13px;
    font-weight: 700;
    outline: none;
    box-shadow: none !important;
    padding: 0;
}

body[data-dash-theme="light"] .hud-quantity-stepper {
    background: #FFFFFF !important;
    border-color: #E2E8F0 !important;
}

body[data-dash-theme="light"] .hud-quantity-stepper:focus-within,
body[data-dash-theme="light"] .hud-quantity-stepper:hover {
    border-color: #CBD5E1 !important;
    box-shadow: none !important;
}

body[data-dash-theme="light"] .hud-quantity-stepper .qty-btn {
    color: #475569 !important;
}

body[data-dash-theme="light"] .hud-quantity-stepper .qty-btn:hover {
    color: #0F172A !important;
    background: #F1F5F9 !important;
}

body[data-dash-theme="light"] .hud-quantity-stepper .qty-input {
    border-left-color: #E2E8F0 !important;
    border-right-color: #E2E8F0 !important;
    color: #0F172A !important;
}

/* ==========================================================================
   DASHBOARD FULL LIGHT MODE OVERRIDE - التصحيح الجذري وفائق التباين
   ========================================================================== */

/* 1. الخلفية العامة للداشبورد */
body[data-dash-theme="light"],
html[data-dash-theme="light"] body,
body[data-dash-theme="light"] .sanad-dashboard-root,
.sanad-dashboard-root[data-dash-theme="light"] {
    background-color: #F8FAFC !important;
    background-image: none !important;
    color: #0F172A !important;
}

/* 2. تحويل كافة الصناديق والكروت الداكنة إلى كروت بيضاء ناصعة ذات حدود واضحة */
body[data-dash-theme="light"] .bg-\[\#0F1117\],
body[data-dash-theme="light"] .bg-\[\#12131C\],
body[data-dash-theme="light"] .bg-\[\#161922\],
body[data-dash-theme="light"] .bg-\[\#0E0F17\],
body[data-dash-theme="light"] .bg-\[\#11131A\],
body[data-dash-theme="light"] .bg-\[\#0A0B10\],
body[data-dash-theme="light"] .bg-\[\#111116\],
body[data-dash-theme="light"] .bg-\[\#16161c\],
body[data-dash-theme="light"] .bg-\[\#181820\],
body[data-dash-theme="light"] .bg-\[\#18181c\],
body[data-dash-theme="light"] .bg-\[\#17171e\],
body[data-dash-theme="light"] .bg-\[\#0e0e12\],
body[data-dash-theme="light"] .bg-\[\#101014\],
body[data-dash-theme="light"] .bg-\[\#121214\],
body[data-dash-theme="light"] .bg-\[\#121217\],
body[data-dash-theme="light"] .bg-\[\#131318\],
body[data-dash-theme="light"] .bg-\[\#141419\],
body[data-dash-theme="light"] .bg-\[\#14141a\],
body[data-dash-theme="light"] .bg-\[\#14141c\],
body[data-dash-theme="light"] .bg-\[\#15151c\],
body[data-dash-theme="light"] .bg-\[\#15151b\],
body[data-dash-theme="light"] .bg-\[\#16161f\],
body[data-dash-theme="light"] .bg-\[\#161622\],
body[data-dash-theme="light"] .bg-\[\#181822\],
body[data-dash-theme="light"] .bg-\[\#1a1a22\],
body[data-dash-theme="light"] .bg-\[\#1a1a24\],
body[data-dash-theme="light"] .bg-\[\#1e1e28\],
body[data-dash-theme="light"] .bg-\[\#1f1f28\],
body[data-dash-theme="light"] .bg-\[\#202028\],
body[data-dash-theme="light"] .bg-\[\#22222c\],
body[data-dash-theme="light"] .bg-\[\#0d0d12\],
body[data-dash-theme="light"] .dash-card,
body[data-dash-theme="light"] .order-card,
body[data-dash-theme="light"] aside,
body[data-dash-theme="light"] .dash-sidebar,
body[data-dash-theme="light"] #app-sidebar {
    background-color: #FFFFFF !important;
    border-color: #CBD5E1 !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.08), 0 1px 2px -1px rgba(0, 0, 0, 0.04) !important;
}

/* 3. شريط الهيدر العلوي */
body[data-dash-theme="light"] header,
body[data-dash-theme="light"] .dash-header,
body[data-dash-theme="light"] div[class*="bg-\[\#12131C\]"]:first-child,
body[data-dash-theme="light"] div[class*="bg-\[\#111116\]"]:first-child {
    background-color: #FFFFFF !important;
    border-color: #CBD5E1 !important;
}

/* 4. كروت الطلبات الداخلية وصناديق تفاصيل الزبون والمنتجات */
body[data-dash-theme="light"] .order-card .bg-black\/40,
body[data-dash-theme="light"] .order-card .bg-black\/30,
body[data-dash-theme="light"] .order-card .bg-black\/20,
body[data-dash-theme="light"] .order-card .bg-\[\#0E0F17\],
body[data-dash-theme="light"] .order-card .bg-\[\#11131A\],
body[data-dash-theme="light"] .order-card .bg-\[\#16161c\],
body[data-dash-theme="light"] .order-card .bg-\[\#15151b\] {
    background-color: #F8FAFC !important;
    border-color: #E2E8F0 !important;
}

/* 5. شريط التبويبات والفلاتر وأزرار التحكم */
body[data-dash-theme="light"] .filter-bar,
body[data-dash-theme="light"] .bg-\[\#161922\]\/80 {
    background-color: #FFFFFF !important;
    border-color: #CBD5E1 !important;
}

body[data-dash-theme="light"] .filter-btn:not(.active),
body[data-dash-theme="light"] .order-filter-tab:not(.bg-blue-600):not(.active),
body[data-dash-theme="light"] button.border-white\/10 {
    background-color: #F1F5F9 !important;
    border-color: #CBD5E1 !important;
    color: #1E293B !important;
    font-weight: 700 !important;
}
body[data-dash-theme="light"] .order-filter-tab:not(.bg-blue-600):not(.active) span {
    color: #1E293B !important;
}

body[data-dash-theme="light"] .filter-btn:not(.active):hover,
body[data-dash-theme="light"] .order-filter-tab:not(.bg-blue-600):not(.active):hover {
    background-color: #E2E8F0 !important;
    color: #0F172A !important;
}
body[data-dash-theme="light"] .order-filter-tab:not(.bg-blue-600):not(.active):hover span {
    color: #0F172A !important;
}

/* 6. تصحيح النصوص والتباين العالي الصارم */
body[data-dash-theme="light"] h1,
body[data-dash-theme="light"] h2,
body[data-dash-theme="light"] h3,
body[data-dash-theme="light"] h4,
body[data-dash-theme="light"] h5,
body[data-dash-theme="light"] h6,
body[data-dash-theme="light"] strong,
body[data-dash-theme="light"] b,
body[data-dash-theme="light"] .text-white,
body[data-dash-theme="light"] .font-bold.text-white {
    color: #0F172A !important;
}

/* الأزرار الأساسية ذات الخلفية الزرقاء تكون نصوصها بيضاء دائماً في الوضعين */
body[data-dash-theme="light"] .dash-btn-primary,
body[data-dash-theme="light"] .dash-btn-primary *,
body[data-dash-theme="light"] #open-add-product-modal-btn,
body[data-dash-theme="light"] #open-add-product-modal-btn *,
body[data-dash-theme="light"] #export-logs-csv-btn,
body[data-dash-theme="light"] #export-logs-csv-btn *,
body[data-dash-theme="light"] .btn-approve-order,
body[data-dash-theme="light"] .btn-approve-order *,
body[data-dash-theme="light"] button.bg-blue-600,
body[data-dash-theme="light"] button.bg-blue-600 * {
    color: #FFFFFF !important;
}

body[data-dash-theme="light"] p,
body[data-dash-theme="light"] span.text-slate-400,
body[data-dash-theme="light"] span.text-\[\#8E9AA6\],
body[data-dash-theme="light"] div.text-\[\#8E9AA6\],
body[data-dash-theme="light"] .text-gray-400,
body[data-dash-theme="light"] .text-gray-300,
body[data-dash-theme="light"] .text-gray-500,
body[data-dash-theme="light"] .text-slate-400,
body[data-dash-theme="light"] .text-slate-500 {
    color: #334155 !important; /* تباين مرتفع جداً بدلاً من الرمادي الباهت */
}

/* 7. تحويل أي نصوص ملونة سابقة إلى تدرجات رمادية ناعمة ومريحة للعين */
body[data-dash-theme="light"] .text-\[\#00F0FF\],
body[data-dash-theme="light"] span[class*="text-[#00F0FF]"] {
    color: #475569 !important;
}

body[data-dash-theme="light"] .text-\[\#FFB800\],
body[data-dash-theme="light"] span[class*="text-[#FFB800]"] {
    color: #475569 !important;
}

body[data-dash-theme="light"] #stat-today-total,
body[data-dash-theme="light"] #stat-pending,
body[data-dash-theme="light"] #stat-confirmed,
body[data-dash-theme="light"] #stat-with-courier,
body[data-dash-theme="light"] #stat-delivered,
body[data-dash-theme="light"] #stat-delivered-cash,
body[data-dash-theme="light"] #stat-rejected {
    color: #0F172A !important;
}

/* 8. حقول الإدخال والبحث في الوضع النهاري */
body[data-dash-theme="light"] input[type="text"],
body[data-dash-theme="light"] input[type="number"],
body[data-dash-theme="light"] input[type="search"],
body[data-dash-theme="light"] input[type="tel"],
body[data-dash-theme="light"] input[type="password"],
body[data-dash-theme="light"] select,
body[data-dash-theme="light"] textarea,
body[data-dash-theme="light"] .dash-input {
    background-color: #FFFFFF !important;
    border-color: #CBD5E1 !important;
    color: #0F172A !important;
    font-weight: 500 !important;
}

body[data-dash-theme="light"] input::placeholder,
body[data-dash-theme="light"] textarea::placeholder {
    color: #64748B !important; /* رمادي واضح بدلاً من الباهت */
}

body[data-dash-theme="light"] input:focus,
body[data-dash-theme="light"] select:focus,
body[data-dash-theme="light"] textarea:focus,
body[data-dash-theme="light"] .dash-input:focus {
    border-color: #2563EB !important;
    box-shadow: none !important;
    outline: none !important;
}

/* خيارات القوائم المنسدلة عند الانسدال بنفس ستايل الحاوية (الوضع النهاري) */
body[data-dash-theme="light"] select option,
body[data-dash-theme="light"] .sanad-dashboard-root select option,
body[data-dash-theme="light"] #view-products select option,
body[data-dash-theme="light"] #crud-product-modal select option {
    background-color: #FFFFFF !important;
    color: #0F172A !important;
    font-family: 'Cairo', sans-serif !important;
    font-size: 13px !important;
    padding: 10px 14px !important;
    border: none !important;
}

body[data-dash-theme="light"] select option:hover,
body[data-dash-theme="light"] select option:focus,
body[data-dash-theme="light"] select option:checked,
body[data-dash-theme="light"] .sanad-dashboard-root select option:hover,
body[data-dash-theme="light"] .sanad-dashboard-root select option:focus,
body[data-dash-theme="light"] .sanad-dashboard-root select option:checked,
body[data-dash-theme="light"] #view-products select option:hover,
body[data-dash-theme="light"] #view-products select option:focus,
body[data-dash-theme="light"] #view-products select option:checked,
body[data-dash-theme="light"] #crud-product-modal select option:hover,
body[data-dash-theme="light"] #crud-product-modal select option:focus,
body[data-dash-theme="light"] #crud-product-modal select option:checked {
    background-color: #EFF6FF !important;
    color: #1D4ED8 !important;
}

/* 9. تفاصيل كروت الطلبات وتناسقها البصري */
body[data-dash-theme="light"] .order-card span.bg-\[\#181820\] {
    background-color: #F1F5F9 !important;
    color: #0F172A !important;
    border-color: #CBD5E1 !important;
}

body[data-dash-theme="light"] .order-card a[href^="tel:"] {
    background-color: #F8FAFC !important;
    color: #0F172A !important;
    border-color: #CBD5E1 !important;
    font-weight: 700 !important;
}

body[data-dash-theme="light"] .order-card a[href^="tel:"] svg {
    color: #0284C7 !important;
}

body[data-dash-theme="light"] .order-card a[href^="tel:"]:hover {
    background-color: #E2E8F0 !important;
}

body[data-dash-theme="light"] .order-card a[href*="whatsapp"],
body[data-dash-theme="light"] .order-card a[href*="wa.me"] {
    background-color: #EFF6FF !important;
    color: #1D4ED8 !important;
    border-color: #BFDBFE !important;
    font-weight: 700 !important;
}

body[data-dash-theme="light"] .order-card a[href*="whatsapp"]:hover,
body[data-dash-theme="light"] .order-card a[href*="wa.me"]:hover {
    background-color: #1D4ED8 !important;
    color: #FFFFFF !important;
}

body[data-dash-theme="light"] .order-card .text-\[11px\].text-yellow-400\/90,
body[data-dash-theme="light"] .order-card div[class*="bg-yellow-950"] {
    background-color: #FEF3C7 !important;
    color: #92400E !important;
    border-color: #FCD34D !important;
    font-weight: 600 !important;
}

body[data-dash-theme="light"] .btn-open-reject-modal {
    background-color: #FEE2E2 !important;
    color: #B91C1C !important;
    border-color: #FCA5A5 !important;
    font-weight: 700 !important;
}

body[data-dash-theme="light"] .btn-open-reject-modal:hover {
    background-color: #DC2626 !important;
    color: #FFFFFF !important;
}

body[data-dash-theme="light"] .btn-open-return-modal {
    background-color: #FEF3C7 !important;
    color: #B45309 !important;
    border-color: #FCD34D !important;
    font-weight: 700 !important;
}

body[data-dash-theme="light"] .btn-open-return-modal:hover {
    background-color: #D97706 !important;
    color: #FFFFFF !important;
}

/* 10. القائمة الجانبية (Sidebar) في الوضع النهاري */
body[data-dash-theme="light"] aside a,
body[data-dash-theme="light"] .dash-sidebar a,
body[data-dash-theme="light"] aside button,
body[data-dash-theme="light"] .dash-sidebar button {
    color: #334155 !important;
    font-weight: 600 !important;
}

body[data-dash-theme="light"] aside a:hover,
body[data-dash-theme="light"] .dash-sidebar a:hover,
body[data-dash-theme="light"] aside button:hover:not(.active):not(.bg-\[\#1E222D\]),
body[data-dash-theme="light"] .dash-sidebar button:hover:not(.active):not(.bg-\[\#1E222D\]) {
    background-color: #F1F5F9 !important;
    color: #0F172A !important;
}

/* ==========================================================================
   UNIFIED MINIMALIST SIDEBAR NAVIGATION MENU (5 RULES ENFORCEMENT)
   ========================================================================== */

/* 1. Unify Backgrounds:
   Remove all dark backgrounds from the menu items.
   All inactive items must have a transparent or solid white background without outer borders. */
#app-sidebar .nav-item,
aside .nav-item,
.sanad-dashboard-root #app-sidebar .nav-item,
.sanad-dashboard-root aside nav button,
.sanad-dashboard-root .sidebar-item {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    transform: none !important;
    border-radius: 10px !important;
    transition: background-color 0.18s ease, color 0.18s ease !important;
}

/* 2. Neutral Text (Dark Theme Default) */
#app-sidebar .nav-item,
#app-sidebar .nav-item span:not(.nav-badge):not([id*="badge"]):not(.font-mono),
#app-sidebar .nav-item div span,
aside .nav-item,
aside .nav-item span:not(.nav-badge):not([id*="badge"]):not(.font-mono),
aside .nav-item div span,
.sanad-dashboard-root #app-sidebar .nav-item,
.sanad-dashboard-root #app-sidebar .nav-item span:not(.nav-badge):not([id*="badge"]):not(.font-mono) {
    color: #94A3B8 !important;
    font-weight: 500 !important;
}

/* Neutral Text (Light Theme) */
body[data-dash-theme="light"] #app-sidebar .nav-item,
body[data-dash-theme="light"] #app-sidebar .nav-item span:not(.nav-badge):not([id*="badge"]):not(.font-mono),
body[data-dash-theme="light"] #app-sidebar .nav-item div span,
body[data-dash-theme="light"] aside .nav-item,
body[data-dash-theme="light"] aside .nav-item span:not(.nav-badge):not([id*="badge"]):not(.font-mono) {
    color: #64748B !important;
}

/* 3. Soft Hover States */
#app-sidebar .nav-item:hover:not(.active),
aside .nav-item:hover:not(.active),
.sanad-dashboard-root #app-sidebar .nav-item:hover:not(.active),
.sanad-dashboard-root aside nav button:hover:not(.active) {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    transform: none !important;
}
#app-sidebar .nav-item:hover:not(.active) span:not(.nav-badge):not([id*="badge"]):not(.font-mono),
aside .nav-item:hover:not(.active) span:not(.nav-badge):not([id*="badge"]):not(.font-mono) {
    color: #F8FAFC !important;
}

body[data-dash-theme="light"] #app-sidebar .nav-item:hover:not(.active),
body[data-dash-theme="light"] aside .nav-item:hover:not(.active) {
    background-color: #F1F5F9 !important;
}
body[data-dash-theme="light"] #app-sidebar .nav-item:hover:not(.active) span:not(.nav-badge):not([id*="badge"]):not(.font-mono),
body[data-dash-theme="light"] aside .nav-item:hover:not(.active) span:not(.nav-badge):not([id*="badge"]):not(.font-mono) {
    color: #0F172A !important;
}

/* Active & Focus Item State - Neutral Highlight (Colors removed, icons retain own color) */
#app-sidebar .nav-item.active,
#app-sidebar .nav-item:focus,
#app-sidebar .nav-item:focus-visible,
#app-sidebar .nav-item[class*="bg-\[\#1E222D\]"],
aside .nav-item.active,
aside .nav-item:focus,
aside .nav-item:focus-visible,
aside .nav-item[class*="bg-\[\#1E222D\]"],
.sanad-dashboard-root #app-sidebar .nav-item.active,
.sanad-dashboard-root #app-sidebar .nav-item:focus,
.sanad-dashboard-root #app-sidebar .nav-item:focus-visible {
    background: rgba(255, 255, 255, 0.08) !important;
    background-color: rgba(255, 255, 255, 0.08) !important;
    border: none !important;
    border-left: none !important;
    border-right: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    transform: none !important;
}

#app-sidebar .nav-item.active span:not(.nav-badge):not([id*="badge"]):not(.font-mono),
#app-sidebar .nav-item:focus span:not(.nav-badge):not([id*="badge"]):not(.font-mono),
#app-sidebar .nav-item:focus-visible span:not(.nav-badge):not([id*="badge"]):not(.font-mono),
#app-sidebar .nav-item.active div span,
#app-sidebar .nav-item:focus div span,
#app-sidebar .nav-item:focus-visible div span,
aside .nav-item.active span:not(.nav-badge):not([id*="badge"]):not(.font-mono),
aside .nav-item:focus span:not(.nav-badge):not([id*="badge"]):not(.font-mono),
aside .nav-item:focus-visible span:not(.nav-badge):not([id*="badge"]):not(.font-mono) {
    color: #FFFFFF !important;
    font-weight: 700 !important;
}

body[data-dash-theme="light"] aside button.nav-item.bg-\[\#1E222D\],
body[data-dash-theme="light"] #app-sidebar .nav-item.active,
body[data-dash-theme="light"] #app-sidebar .nav-item:focus,
body[data-dash-theme="light"] #app-sidebar .nav-item:focus-visible,
body[data-dash-theme="light"] aside .nav-item.active,
body[data-dash-theme="light"] aside .nav-item:focus,
body[data-dash-theme="light"] aside .nav-item:focus-visible {
    background: #F1F5F9 !important;
    background-color: #F1F5F9 !important;
}
body[data-dash-theme="light"] #app-sidebar .nav-item.active span:not(.nav-badge):not([id*="badge"]):not(.font-mono),
body[data-dash-theme="light"] #app-sidebar .nav-item:focus span:not(.nav-badge):not([id*="badge"]):not(.font-mono),
body[data-dash-theme="light"] #app-sidebar .nav-item:focus-visible span:not(.nav-badge):not([id*="badge"]):not(.font-mono),
body[data-dash-theme="light"] #app-sidebar .nav-item.active div span,
body[data-dash-theme="light"] #app-sidebar .nav-item:focus div span,
body[data-dash-theme="light"] #app-sidebar .nav-item:focus-visible div span,
body[data-dash-theme="light"] aside .nav-item.active span:not(.nav-badge):not([id*="badge"]):not(.font-mono),
body[data-dash-theme="light"] aside .nav-item:focus span:not(.nav-badge):not([id*="badge"]):not(.font-mono),
body[data-dash-theme="light"] aside .nav-item:focus-visible span:not(.nav-badge):not([id*="badge"]):not(.font-mono) {
    color: #0F172A !important;
    font-weight: 700 !important;
}

/* Navigation item label texts: pure plain text without any container, borders or monospace (identical to view-products) */
#app-sidebar .nav-item > div > span,
aside .nav-item > div > span,
.sanad-dashboard-root #app-sidebar .nav-item > div > span,
body[data-dash-theme="light"] #app-sidebar .nav-item > div > span,
body[data-dash-theme="light"] aside .nav-item > div > span {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    font-family: inherit !important;
    letter-spacing: normal !important;
    line-height: normal !important;
    display: inline-block !important;
}

/* 4. Accents: All colors removed from sidebar, coloring stays ONLY on icons */
#app-sidebar .nav-badge,
#app-sidebar .nav-item .nav-badge,
aside .nav-badge,
aside .nav-item .nav-badge,
.sanad-dashboard-root #app-sidebar .nav-badge {
    border-radius: 6px !important;
    padding: 2px 7px !important;
    font-size: 10px !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-weight: 700 !important;
    letter-spacing: 0.03em !important;
    line-height: 1.2 !important;
    background: rgba(255, 255, 255, 0.05) !important;
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: #94A3B8 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: none !important;
}

body[data-dash-theme="light"] #app-sidebar .nav-badge,
body[data-dash-theme="light"] #app-sidebar .nav-item .nav-badge,
body[data-dash-theme="light"] aside .nav-badge,
body[data-dash-theme="light"] aside .nav-item .nav-badge,
body[data-dash-theme="light"] .sanad-dashboard-root #app-sidebar .nav-badge {
    background: #F1F5F9 !important;
    background-color: #F1F5F9 !important;
    color: #64748B !important;
    border: 1px solid #E2E8F0 !important;
    box-shadow: none !important;
}

/* Sidebar Brand & Badges Light Theme Neutralization */
body[data-dash-theme="light"] #app-sidebar .bg-white\/5 {
    background-color: #F1F5F9 !important;
}
body[data-dash-theme="light"] #app-sidebar .border-white\/10 {
    border-color: #E2E8F0 !important;
}
body[data-dash-theme="light"] #app-sidebar .text-slate-400 {
    color: #64748B !important;
}

/* 5. Soft Corners: Ensure all menu items have a consistent 10px border-radius */
#app-sidebar .nav-item,
aside .nav-item,
.sanad-dashboard-root #app-sidebar .nav-item,
.sanad-dashboard-root aside nav button,
.sanad-dashboard-root .sidebar-item {
    border-radius: 10px !important;
}

/* فوتر وأسفل القائمة الجانبية في الوضع النهاري */
body[data-dash-theme="light"] .dash-sidebar-footer,
body[data-dash-theme="light"] aside > div:last-child,
body[data-dash-theme="light"] #app-sidebar > div:last-child,
body[data-dash-theme="light"] aside .bg-\[\#0F1117\],
body[data-dash-theme="light"] #app-sidebar .bg-\[\#0F1117\] {
    background-color: #FFFFFF !important;
    border-top: 1px solid #E2E8F0 !important;
}

body[data-dash-theme="light"] aside .border-\[\#282E3D\],
body[data-dash-theme="light"] #app-sidebar .border-\[\#282E3D\] {
    border-color: #E2E8F0 !important;
}

body[data-dash-theme="light"] aside span.text-white,
body[data-dash-theme="light"] #app-sidebar span.text-white {
    color: #0F172A !important;
}

/* 11. شارات الحالات والمؤشرات الرقمية (واضحة وعالية التباين) */
body[data-dash-theme="light"] .badge-status-pending,
body[data-dash-theme="light"] span:has(> .text-amber-400) {
    background-color: #FEF3C7 !important;
    color: #92400E !important;
    border-color: #FDE68A !important;
    font-weight: 700 !important;
}

body[data-dash-theme="light"] .badge-status-completed {
    background-color: #EFF6FF !important;
    color: #1D4ED8 !important;
    border-color: #BFDBFE !important;
    font-weight: 700 !important;
}

body[data-dash-theme="light"] .badge-status-cancelled {
    background-color: #FEE2E2 !important;
    color: #991B1B !important;
    border-color: #FECACA !important;
    font-weight: 700 !important;
}

body[data-dash-theme="light"] .bg-purple-500\/15,
body[data-dash-theme="light"] .badge-status-courier {
    background-color: #F3E8FF !important;
    color: #6B21A8 !important;
    border-color: #E9D5FF !important;
    font-weight: 700 !important;
}

body[data-dash-theme="light"] .badge-status-returned {
    background-color: #FFEDD5 !important;
    color: #C2410C !important;
    border-color: #FED7AA !important;
    font-weight: 700 !important;
}

/* شارات سجل العمليات والأرشيف التاريخي في الوضع النهاري (ألوان ناصعة وعالية التباين بدون أخضر) */
body[data-dash-theme="light"] .log-id-badge {
    background-color: #F1F5F9 !important;
    color: #0284C7 !important;
    border-color: #CBD5E1 !important;
    font-weight: 700 !important;
}

body[data-dash-theme="light"] .log-badge-approve {
    background-color: #EFF6FF !important;
    color: #1D4ED8 !important;
    border-color: #BFDBFE !important;
    font-weight: 700 !important;
}

body[data-dash-theme="light"] .log-badge-pending {
    background-color: #FEF3C7 !important;
    color: #92400E !important;
    border-color: #FCD34D !important;
    font-weight: 700 !important;
}

body[data-dash-theme="light"] .log-badge-courier {
    background-color: #F3E8FF !important;
    color: #6B21A8 !important;
    border-color: #DDD6FE !important;
    font-weight: 700 !important;
}

body[data-dash-theme="light"] .log-badge-return {
    background-color: #FFEDD5 !important;
    color: #C2410C !important;
    border-color: #FED7AA !important;
    font-weight: 700 !important;
}

body[data-dash-theme="light"] .log-badge-reject {
    background-color: #FEE2E2 !important;
    color: #B91C1C !important;
    border-color: #FCA5A5 !important;
    font-weight: 700 !important;
}

body[data-dash-theme="light"] .log-badge-pos {
    background-color: #E0F2FE !important;
    color: #0369A1 !important;
    border-color: #BAE6FD !important;
    font-weight: 700 !important;
}

body[data-dash-theme="light"] .log-badge-general {
    background-color: #F1F5F9 !important;
    color: #334155 !important;
    border-color: #CBD5E1 !important;
    font-weight: 700 !important;
}

body[data-dash-theme="light"] .log-reason-badge {
    background-color: #FEF2F2 !important;
    color: #B91C1C !important;
    border: 1px solid #FECACA !important;
    font-weight: 700 !important;
}

body[data-dash-theme="light"] .log-supervisor-badge {
    background-color: #F8FAFC !important;
    color: #334155 !important;
    border-color: #CBD5E1 !important;
    font-weight: 600 !important;
}

body[data-dash-theme="light"] .log-time-exact,
body[data-dash-theme="light"] .log-customer-name,
body[data-dash-theme="light"] .log-total-val {
    color: #0F172A !important;
}

body[data-dash-theme="light"] .log-time-rel,
body[data-dash-theme="light"] .log-customer-sub,
body[data-dash-theme="light"] .log-pay-method {
    color: #64748B !important;
}

body[data-dash-theme="light"] #logs-table-body tr:hover td {
    background-color: #F8FAFC !important;
}

/* كودات الخصم والبرومو كود في الوضع النهاري - ألوان نقية وعالية التباين */
body[data-dash-theme="light"] .coupon-code-badge {
    background-color: #F1F5F9 !important;
    color: #0284C7 !important;
    border-color: #CBD5E1 !important;
    font-weight: 700 !important;
}

body[data-dash-theme="light"] .coupon-value-text {
    color: #0F172A !important;
    font-weight: 700 !important;
}

body[data-dash-theme="light"] .coupon-type-text,
body[data-dash-theme="light"] .coupon-category-text {
    color: #64748B !important;
}

body[data-dash-theme="light"] .coupon-date-text,
body[data-dash-theme="light"] .coupon-usage-text {
    color: #0F172A !important;
    font-weight: 600 !important;
}

body[data-dash-theme="light"] .coupon-progress-track {
    background-color: #E2E8F0 !important;
}

body[data-dash-theme="light"] .coupon-progress-fill:not(.bg-red-500) {
    background-color: #0284C7 !important;
}

/* شارات كودات الخصم في الوضع النهاري */
body[data-dash-theme="light"] .coupon-badge-active {
    background-color: #EFF6FF !important;
    color: #1D4ED8 !important;
    border-color: #BFDBFE !important;
    font-weight: 700 !important;
}

body[data-dash-theme="light"] .coupon-badge-disabled {
    background-color: #F1F5F9 !important;
    color: #64748B !important;
    border-color: #CBD5E1 !important;
    font-weight: 700 !important;
}

body[data-dash-theme="light"] .coupon-badge-expired {
    background-color: #FEE2E2 !important;
    color: #B91C1C !important;
    border-color: #FCA5A5 !important;
    font-weight: 700 !important;
}

body[data-dash-theme="light"] .coupon-badge-limit {
    background-color: #FEF3C7 !important;
    color: #92400E !important;
    border-color: #FCD34D !important;
    font-weight: 700 !important;
}

/* تظليل سطر الكود المعطل وأزرار التبديل */
.coupon-row-disabled {
    opacity: 0.55 !important;
    background-color: rgba(0, 0, 0, 0.3) !important;
    filter: grayscale(0.2);
}
.coupon-row-disabled:hover {
    opacity: 0.85 !important;
    background-color: rgba(0, 0, 0, 0.42) !important;
    filter: none;
}
body[data-dash-theme="light"] .coupon-row-disabled {
    background-color: #F1F5F9 !important;
    opacity: 0.6 !important;
}
body[data-dash-theme="light"] .coupon-row-disabled:hover {
    background-color: #E2E8F0 !important;
    opacity: 0.85 !important;
}

.coupon-btn-disable {
    background-color: rgba(245, 158, 11, 0.12) !important;
    color: #FBBF24 !important;
    border: 1px solid rgba(245, 158, 11, 0.35) !important;
}
.coupon-btn-disable:hover {
    background-color: rgba(245, 158, 11, 0.25) !important;
    border-color: rgba(245, 158, 11, 0.6) !important;
}

.coupon-btn-enable {
    background-color: rgba(16, 185, 129, 0.14) !important;
    color: #34D399 !important;
    border: 1px solid rgba(16, 185, 129, 0.4) !important;
}
.coupon-btn-enable:hover {
    background-color: rgba(16, 185, 129, 0.26) !important;
    border-color: rgba(16, 185, 129, 0.65) !important;
}

/* أزرار الإجراءات في الوضع النهاري */
body[data-dash-theme="light"] .coupon-btn-disable {
    background-color: #FEF3C7 !important;
    color: #92400E !important;
    border-color: #FCD34D !important;
    font-weight: 700 !important;
}

body[data-dash-theme="light"] .coupon-btn-disable:hover {
    background-color: #FDE68A !important;
}

body[data-dash-theme="light"] .coupon-btn-enable {
    background-color: #EFF6FF !important;
    color: #1D4ED8 !important;
    border-color: #BFDBFE !important;
    font-weight: 700 !important;
}

body[data-dash-theme="light"] .coupon-btn-enable:hover {
    background-color: #DBEAFE !important;
}

body[data-dash-theme="light"] .coupon-btn-delete {
    background-color: #FEE2E2 !important;
    color: #DC2626 !important;
    border-color: #FECACA !important;
}

body[data-dash-theme="light"] .coupon-btn-delete:hover {
    background-color: #DC2626 !important;
    color: #FFFFFF !important;
    border-color: #DC2626 !important;
}

body[data-dash-theme="light"] #coupons-count-badge {
    background-color: #FFF1F2 !important;
    color: #E11D48 !important;
    border-color: #FECDD3 !important;
    font-weight: 700 !important;
    border-radius: 6px !important;
}

body[data-dash-theme="light"] .btn-copy-code {
    color: #64748B !important;
}

body[data-dash-theme="light"] .btn-copy-code:hover {
    color: #0F172A !important;
}

body[data-dash-theme="light"] #coupons-table-body tr:hover td {
    background-color: #F8FAFC !important;
}

/* هوية المتجر والألوان (HUD Themes) في الوضع النهاري */
body[data-dash-theme="light"] #themePresetsGrid .theme-card {
    background-color: #FFFFFF !important;
    border-color: #CBD5E1 !important;
}

body[data-dash-theme="light"] #themePresetsGrid .theme-card:hover {
    border-color: #94A3B8 !important;
    background-color: #F8FAFC !important;
}

body[data-dash-theme="light"] #themePresetsGrid .text-white,
body[data-dash-theme="light"] #view-settings h3.text-white {
    color: #0F172A !important;
}

body[data-dash-theme="light"] #currentSelectedThemeName {
    background-color: #EFF6FF !important;
    color: #1D4ED8 !important;
    border-color: #BFDBFE !important;
}

body[data-dash-theme="light"] #themeSaveFeedback {
    color: #1D4ED8 !important;
}

body[data-dash-theme="light"] #themeSaveFeedback svg {
    color: #1D4ED8 !important;
}

/* 12. أزرار وضع العرض (شبكة / قائمة) في الوضع النهاري */
body[data-dash-theme="light"] .orders-view-btn.text-slate-400 {
    color: #475569 !important;
}

body[data-dash-theme="light"] .orders-view-btn.text-slate-400:hover {
    color: #0F172A !important;
    background-color: #E2E8F0 !important;
}

body[data-dash-theme="light"] div:has(> #orders-view-grid) {
    background-color: #F1F5F9 !important;
    border-color: #CBD5E1 !important;
}

/* 13. جداول الطلبات والمنتجات */
body[data-dash-theme="light"] .dash-table th,
body[data-dash-theme="light"] table th {
    background-color: #F1F5F9 !important;
    color: #1E293B !important;
    font-weight: 700 !important;
    border-bottom: 2px solid #CBD5E1 !important;
}

body[data-dash-theme="light"] .dash-table td,
body[data-dash-theme="light"] table td {
    background-color: #FFFFFF !important;
    color: #0F172A !important;
    border-bottom: 1px solid #E2E8F0 !important;
}

body[data-dash-theme="light"] .dash-table tr:hover td,
body[data-dash-theme="light"] table tr:hover td {
    background-color: #F8FAFC !important;
}

/* 14. أزرار الإجراءات الثانوية والحدود */
body[data-dash-theme="light"] .dash-btn-secondary {
    background-color: #F1F5F9 !important;
    color: #1E293B !important;
    border-color: #CBD5E1 !important;
    font-weight: 600 !important;
}

body[data-dash-theme="light"] .dash-btn-secondary:hover {
    background-color: #E2E8F0 !important;
    color: #0F172A !important;
}

body[data-dash-theme="light"] #refresh-orders-btn,
body[data-dash-theme="light"] #dashThemeToggle,
body[data-dash-theme="light"] #visit-store-btn,
body[data-dash-theme="light"] #audio-toggle-btn {
    background-color: #FFFFFF !important;
    border-color: #CBD5E1 !important;
    color: #0F172A !important;
    font-weight: 600 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

body[data-dash-theme="light"] #refresh-orders-btn:hover,
body[data-dash-theme="light"] #dashThemeToggle:hover,
body[data-dash-theme="light"] #visit-store-btn:hover,
body[data-dash-theme="light"] #audio-toggle-btn:hover {
    background-color: #F8FAFC !important;
    border-color: #94A3B8 !important;
    color: #0F172A !important;
}

body[data-dash-theme="light"] #visit-store-btn svg {
    color: #2563EB !important;
}

body[data-dash-theme="light"] a[title*="تسجيل الخروج"],
body[data-dash-theme="light"] a[href*="wp-login.php?action=logout"] {
    background-color: #FFF1F2 !important;
    color: #E11D48 !important;
    border-color: #FECDD3 !important;
    font-weight: 700 !important;
}

body[data-dash-theme="light"] a[title*="تسجيل الخروج"]:hover,
body[data-dash-theme="light"] a[href*="wp-login.php?action=logout"]:hover {
    background-color: #E11D48 !important;
    color: #FFFFFF !important;
}

/* 15. النوافذ المنبثقة (Modals) في الوضع النهاري */
body[data-dash-theme="light"] .dash-card.fixed,
body[data-dash-theme="light"] div[class*="dash-card"][class*="fixed"],
body[data-dash-theme="light"] div[class*="dash-card"][class*="max-w-"] {
    background-color: #FFFFFF !important;
    border-color: #CBD5E1 !important;
    color: #0F172A !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.1) !important;
}

body[data-dash-theme="light"] .border-\[\#282E3D\],
body[data-dash-theme="light"] .border-\[\#202028\],
body[data-dash-theme="light"] .border-\[\#23232c\],
body[data-dash-theme="light"] .border-\[\#1f1f26\],
body[data-dash-theme="light"] .border-\[\#2a2a35\],
body[data-dash-theme="light"] .border-\[\#22222a\],
body[data-dash-theme="light"] .border-\[\#262630\],
body[data-dash-theme="light"] .border-\[\#2d2d38\] {
    border-color: #E2E8F0 !important;
}

/* 16. شريط التمرير في الوضع النهاري */
body[data-dash-theme="light"] ::-webkit-scrollbar-track {
    background: #F1F5F9 !important;
}
body[data-dash-theme="light"] ::-webkit-scrollbar-thumb {
    background: #CBD5E1 !important;
    border-radius: 4px !important;
}
body[data-dash-theme="light"] ::-webkit-scrollbar-thumb:hover {
    background: #94A3B8 !important;
}

/* ==========================================================================
   TACTICAL HUD HEADER LINKS
   ========================================================================== */
.hud-nav-link,
header nav a.hud-nav-link {
    position: relative;
    padding: 0.5rem 0.85rem;
    color: #94A3B8;
    background: transparent !important;
    border: none !important;
    transition: color 0.2s ease;
    border-radius: 4px;
    text-decoration: none;
    clip-path: none !important;
}

.hud-nav-link:hover,
.hud-nav-link.active,
header nav a.hud-nav-link:hover,
header nav a.hud-nav-link.active {
    color: #FFFFFF !important;
    background: transparent !important;
    border: none !important;
}

/* خط نيون سفلي ناعم عند التمرير والصفحة النشطة */
.hud-nav-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    right: 15%;
    width: 70%;
    height: 2px;
    background: var(--hud-primary);
    box-shadow: 0 0 8px var(--hud-glow);
    opacity: 0;
    transform: scaleX(0.5);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.hud-nav-link:hover::after,
.hud-nav-link.active::after {
    opacity: 1;
    transform: scaleX(1);
}


/* ==========================================================================
   ORDERS DESK: GRID & LIST VIEW MODES
   ========================================================================== */
#orders-container.orders-list-view {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
}

#orders-container.orders-list-view .order-card {
    width: 100% !important;
}

@media (min-width: 1024px) {
    #orders-container.orders-list-view .order-card {
        flex-direction: row !important;
        align-items: stretch !important;
        justify-content: space-between !important;
        gap: 1.5rem !important;
    }
    #orders-container.orders-list-view .order-card > div:first-child {
        flex: 1 1 60% !important;
    }
    #orders-container.orders-list-view .order-card > div:last-child {
        flex: 0 0 320px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
        border-top: none !important;
        padding-top: 0 !important;
        padding-right: 1.5rem !important;
    }
    [dir="rtl"] #orders-container.orders-list-view .order-card > div:last-child {
        border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
        border-left: none !important;
        border-top: none !important;
        padding-top: 0 !important;
        padding-right: 1.5rem !important;
        padding-left: 0 !important;
    }
}

body[data-dash-theme="light"] #orders-container.orders-list-view .order-card > div:last-child {
    border-color: #E2E8F0 !important;
}

/* ==========================================================================
   COMPLETE STORE LIGHT MODE CONTRAST & SIDEBAR OVERHAUL
   ========================================================================== */

/* 1. خلفية المتجر العامة وأرضية المحتوى */
body[data-store-theme="light"] {
    background-color: #EEF2F6 !important;
    color: #090D16 !important;
}

body[data-store-theme="light"] main {
    background-color: transparent !important;
}

/* 2. تعميم ألوان الـ Placeholder في كافة حقول الموقع */
body[data-store-theme="light"] input::placeholder,
body[data-store-theme="light"] textarea::placeholder,
body[data-store-theme="light"] input::-webkit-input-placeholder,
body[data-store-theme="light"] textarea::-webkit-input-placeholder,
body[data-store-theme="light"] input::-moz-placeholder,
body[data-store-theme="light"] textarea::-moz-placeholder {
    color: #64748B !important;
    opacity: 1 !important;
}

/* 3. شريط الهيدر وعناصره في الوضع النهاري */
body[data-store-theme="light"] header {
    background-color: rgba(255, 255, 255, 0.95) !important;
    border-bottom-color: #E2E8F0 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

body[data-store-theme="light"] header .text-white {
    color: #090D16 !important;
}

body[data-store-theme="light"] header .header-logo-img {
    filter: invert(1) !important;
}

body[data-store-theme="light"] .hud-nav-link {
    color: #475569 !important;
}

body[data-store-theme="light"] .hud-nav-link:hover,
body[data-store-theme="light"] .hud-nav-link.active {
    color: #090D16 !important;
}

body[data-store-theme="light"] header form input[type="search"] {
    background-color: #F1F5F9 !important;
    border-color: #CBD5E1 !important;
    color: #090D16 !important;
}

body[data-store-theme="light"] header form input[type="search"]:focus {
    background-color: #FFFFFF !important;
    border-color: var(--hud-primary) !important;
}

/* أزرار الهيدر في الوضع النهاري تتبع محرك السايبربانك في نهاية الملف */

body[data-store-theme="light"] header svg {
    stroke: #334155 !important;
}

body[data-store-theme="light"] header .h-5.w-\[1px\] {
    background-color: #E2E8F0 !important;
}

/* 4. القائمة الجانبية للتصنيفات (Sidebar) - حل مشكلة تضارب الأبيض والأسود */
body[data-store-theme="light"] aside,
body[data-store-theme="light"] aside div.border-r-2 {
    border-right-color: #E2E8F0 !important;
}

/* بطاقة التاب العادية */
body[data-store-theme="light"] .hud-tab-item {
    background: #CBD5E1 !important;
    border-color: #CBD5E1 !important;
    filter: drop-shadow(0 0 0px transparent);
}

body[data-store-theme="light"] .hud-tab-item .hud-tab-content {
    background-color: #FFFFFF !important;
    background: #FFFFFF !important;
}

body[data-store-theme="light"] .hud-tab-item .hud-tab-title {
    color: #0F172A !important;
    font-weight: 700 !important;
}

body[data-store-theme="light"] .hud-tab-item .hud-tab-icon,
body[data-store-theme="light"] .hud-tab-item svg {
    color: #64748B !important;
    stroke: #64748B !important;
}

body[data-store-theme="light"] .hud-tab-bullet {
    background-color: var(--hud-primary, #2563EB) !important;
}

/* التاب عند التمرير (Hover) في الوضع النهاري - توهج لوني ناعم ونظيف */
body[data-store-theme="light"] .hud-tab-item:hover {
    z-index: 25 !important;
    background: linear-gradient(90deg, var(--hud-secondary, #3B82F6) 0%, var(--hud-primary, #2563EB) 100%) !important;
    filter: drop-shadow(0 0 10px var(--hud-glow, rgba(37, 99, 235, 0.28))) 
            drop-shadow(0 4px 12px rgba(15, 23, 42, 0.08)) !important;
    transform: translateX(-5px) !important;
}

[dir="ltr"] body[data-store-theme="light"] .hud-tab-item:hover {
    transform: translateX(5px) !important;
}

body[data-store-theme="light"] .hud-tab-item:hover .hud-tab-content {
    background-color: #F8FAFC !important;
    background: #F8FAFC !important;
}

body[data-store-theme="light"] .hud-tab-item:hover .hud-tab-title {
    color: var(--hud-primary, #1D4ED8) !important;
    font-weight: 800 !important;
}

body[data-store-theme="light"] .hud-tab-item:hover .hud-tab-icon,
body[data-store-theme="light"] .hud-tab-item:hover svg {
    color: var(--hud-primary, #1D4ED8) !important;
    stroke: var(--hud-primary, #1D4ED8) !important;
}

/* التاب النشط حالياً في الوضع النهاري (Active / is-current) */
body[data-store-theme="light"] .hud-tab-item.active,
body[data-store-theme="light"] .hud-tab-item.is-current {
    z-index: 25 !important;
    background: linear-gradient(90deg, var(--hud-secondary, #3B82F6) 0%, var(--hud-primary, #2563EB) 100%) !important;
    filter: drop-shadow(0 0 10px var(--hud-glow, rgba(37, 99, 235, 0.28))) 
            drop-shadow(0 4px 12px rgba(15, 23, 42, 0.08)) !important;
    transform: translateX(-5px) !important;
}

[dir="ltr"] body[data-store-theme="light"] .hud-tab-item.active,
[dir="ltr"] body[data-store-theme="light"] .hud-tab-item.is-current {
    transform: translateX(5px) !important;
}

body[data-store-theme="light"] .hud-tab-item.active .hud-tab-content,
body[data-store-theme="light"] .hud-tab-item.is-current .hud-tab-content {
    background-color: #EFF6FF !important;
    background: #EFF6FF !important;
}

body[data-store-theme="light"] .hud-tab-item.active .hud-tab-title,
body[data-store-theme="light"] .hud-tab-item.is-current .hud-tab-title {
    color: #1D4ED8 !important;
    font-weight: 800 !important;
}

body[data-store-theme="light"] .hud-tab-item.active .hud-tab-icon,
body[data-store-theme="light"] .hud-tab-item.is-current .hud-tab-icon,
body[data-store-theme="light"] .hud-tab-item.active svg,
body[data-store-theme="light"] .hud-tab-item.is-current svg {
    color: #1D4ED8 !important;
    stroke: #1D4ED8 !important;
}

/* شريط تصنيفات الموبايل الأفقي */
body[data-store-theme="light"] .hud-mobile-cat-pill {
    background-color: #FFFFFF !important;
    border-color: #CBD5E1 !important;
    color: #334155 !important;
}

body[data-store-theme="light"] .hud-mobile-cat-pill:hover {
    background-color: #F8FAFC !important;
    color: #090D16 !important;
    border-color: var(--hud-primary) !important;
}

body[data-store-theme="light"] .hud-mobile-cat-pill.active {
    background-color: #EFF6FF !important;
    border-color: #2563EB !important;
    color: #1D4ED8 !important;
    font-weight: bold !important;
}

/* 5. حقول البحث، الفلاتر والقوائم المنسدلة في صفحات المتجر */
body[data-store-theme="light"] #filter-search,
body[data-store-theme="light"] input[type="text"],
body[data-store-theme="light"] input[type="search"] {
    background-color: #FFFFFF !important;
    border-color: #CBD5E1 !important;
    color: #090D16 !important;
}

body[data-store-theme="light"] select,
body[data-store-theme="light"] #filter-category,
body[data-store-theme="light"] #filter-brand {
    background-color: #FFFFFF !important;
    border-color: #CBD5E1 !important;
    color: #090D16 !important;
}

/* فرض لون خلفية ونصوص خيارات القائمة المنسدلة لمنع ظهور خيارات داكنة بنص أسود */
body[data-store-theme="light"] select option {
    background-color: #FFFFFF !important;
    color: #090D16 !important;
}

/* 6. شريط تصفية السعر المتقدم (HUD Price Range) */
body[data-store-theme="light"] .hud-price-filter {
    background-color: #FFFFFF !important;
    border-color: #CBD5E1 !important;
}

body[data-store-theme="light"] .hud-price-filter span {
    color: #334155 !important;
}

body[data-store-theme="light"] .hud-price-badge {
    background-color: #F1F5F9 !important;
    border-color: #CBD5E1 !important;
    color: #090D16 !important;
}

/* 7. أزرار العرض الشبكي / القائمة (Grid / List Buttons) */
body[data-store-theme="light"] #btn-grid:not(.bg-\[\#0040FF\]),
body[data-store-theme="light"] #btn-list:not(.bg-\[\#0040FF\]) {
    background-color: #FFFFFF !important;
    border: 1px solid #CBD5E1 !important;
    color: #64748B !important;
}

body[data-store-theme="light"] #btn-grid svg,
body[data-store-theme="light"] #btn-list svg {
    stroke: currentColor !important;
}

/* 8. كروت المنتجات التكتيكية (Product Cards) */
body[data-store-theme="light"] .product-card {
    background-color: #FFFFFF !important;
    border-color: #CBD5E1 !important;
    box-shadow: 0 4px 15px -3px rgba(0, 0, 0, 0.05), 0 2px 6px -2px rgba(0, 0, 0, 0.03) !important;
}

body[data-store-theme="light"] .product-card .card-media,
body[data-store-theme="light"] .product-card .aspect-square.bg-\[\#0b0b10\] {
    background-color: #F1F5F9 !important;
    border-color: #E2E8F0 !important;
}

body[data-store-theme="light"] .product-card .bg-gradient-to-t.from-\[\#141414\] {
    background: linear-gradient(to top, rgba(255, 255, 255, 0.75) 0%, transparent 50%) !important;
}

body[data-store-theme="light"] .product-card .wishlist-toggle-btn {
    background-color: rgba(255, 255, 255, 0.9) !important;
    border-color: #CBD5E1 !important;
    color: #64748B !important;
}

body[data-store-theme="light"] .product-card .wishlist-toggle-btn:hover {
    color: #EF4444 !important;
    border-color: #EF4444 !important;
    background-color: #FFFFFF !important;
}

body[data-store-theme="light"] .product-card .product-title {
    color: #090D16 !important;
}

body[data-store-theme="light"] .product-card .product-desc {
    color: #475569 !important;
}

body[data-store-theme="light"] .product-card span.text-\[\#00F0FF\] {
    color: #0284C7 !important;
    font-weight: 700 !important;
}

body[data-store-theme="light"] .product-card .text-white.font-bold.font-mono {
    color: #090D16 !important;
}

body[data-store-theme="light"] .product-card .card-action,
body[data-store-theme="light"] .product-card .border-t.border-\[\#333\] {
    border-top-color: #E2E8F0 !important;
}

body[data-store-theme="light"] .hud-quantity-stepper {
    background: #F8FAFC !important;
    border-color: #CBD5E1 !important;
}

body[data-store-theme="light"] .hud-quantity-stepper:hover,
body[data-store-theme="light"] .hud-quantity-stepper:focus-within {
    border-color: var(--hud-primary) !important;
}

body[data-store-theme="light"] .hud-quantity-stepper .qty-btn {
    color: #475569 !important;
}

body[data-store-theme="light"] .hud-quantity-stepper .qty-btn:hover {
    background: #E2E8F0 !important;
    color: #090D16 !important;
}

body[data-store-theme="light"] .hud-quantity-stepper .qty-input {
    color: #090D16 !important;
    border-left-color: #E2E8F0 !important;
    border-right-color: #E2E8F0 !important;
}

body[data-store-theme="light"] .product-card button.bg-\[\#181820\],
body[data-store-theme="light"] .oos-badge {
    background-color: #F1F5F9 !important;
    color: #94A3B8 !important;
    border-color: #CBD5E1 !important;
}

/* 9. أشرطة الفلاتر وعناصر العرض الإضافية */
body[data-store-theme="light"] .bg-\[\#141414\].border-\[\#333\],
body[data-store-theme="light"] div[class*="bg-\[\#141414\]"] {
    background-color: #FFFFFF !important;
    border-color: #CBD5E1 !important;
}

body[data-store-theme="light"] .scroll-btn,
body[data-store-theme="light"] button.bg-\[\#1a1a1a\] {
    background-color: #FFFFFF !important;
    border-color: #CBD5E1 !important;
    color: #334155 !important;
}

body[data-store-theme="light"] .scroll-btn:hover {
    background-color: #F1F5F9 !important;
    color: #090D16 !important;
    border-color: var(--hud-primary) !important;
}

body[data-store-theme="light"] h1.text-white,
body[data-store-theme="light"] h2.text-white {
    color: #090D16 !important;
}

body[data-store-theme="light"] .cyber-hero-inner {
    background-color: #0c0d14 !important;
}

/* 10. الفوتر وأدراج السلة والمفضلة */
body[data-store-theme="light"] footer {
    background-color: #FFFFFF !important;
    border-color: #CBD5E1 !important;
    color: #64748B !important;
}

body[data-store-theme="light"] footer h3,
body[data-store-theme="light"] footer h4,
body[data-store-theme="light"] footer .text-white {
    color: #090D16 !important;
}

body[data-store-theme="light"] footer a:not(.footer-whatsapp-btn):not([href*="wa.me"]):not([href*="whatsapp"]) {
    color: #475569 !important;
}

body[data-store-theme="light"] footer a:not(.footer-whatsapp-btn):not([href*="wa.me"]):not([href*="whatsapp"]):hover {
    color: #090D16 !important;
}

/* زر واتساب في الفوتر - الوضع النهاري */
body[data-store-theme="light"] footer a.footer-whatsapp-btn,
body[data-store-theme="light"] footer a[href*="wa.me"],
body[data-store-theme="light"] footer a[href*="whatsapp"] {
    background-color: #25D366 !important;
    background-image: linear-gradient(135deg, #25D366 0%, #1EBE5D 100%) !important;
    border-color: #1EBE5D !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3) !important;
}

body[data-store-theme="light"] footer a.footer-whatsapp-btn svg,
body[data-store-theme="light"] footer a[href*="wa.me"] svg,
body[data-store-theme="light"] footer a[href*="whatsapp"] svg {
    fill: #FFFFFF !important;
    color: #FFFFFF !important;
}

body[data-store-theme="light"] footer a.footer-whatsapp-btn:hover,
body[data-store-theme="light"] footer a[href*="wa.me"]:hover,
body[data-store-theme="light"] footer a[href*="whatsapp"]:hover {
    background-color: #1EBE5D !important;
    background-image: linear-gradient(135deg, #1EBE5D 0%, #128C7E 100%) !important;
    border-color: #128C7E !important;
    color: #FFFFFF !important;
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.45) !important;
}

body[data-store-theme="light"] footer .border-t {
    border-color: #E2E8F0 !important;
}

body[data-store-theme="light"] #cart-drawer,
body[data-store-theme="light"] #wishlist-drawer,
body[data-store-theme="light"] #quickview-modal > div {
    background-color: #FFFFFF !important;
    border-color: #CBD5E1 !important;
    color: #090D16 !important;
}

body[data-store-theme="light"] #cart-drawer .bg-\[\#12131C\],
body[data-store-theme="light"] #wishlist-drawer .bg-\[\#12131C\],
body[data-store-theme="light"] #cart-drawer .bg-\[\#161922\],
body[data-store-theme="light"] #wishlist-drawer .bg-\[\#161922\],
body[data-store-theme="light"] #cart-drawer .bg-\[\#141414\],
body[data-store-theme="light"] #wishlist-drawer .bg-\[\#141414\],
body[data-store-theme="light"] #cart-drawer .bg-\[\#1a1a1a\],
body[data-store-theme="light"] #wishlist-drawer .bg-\[\#1a1a1a\] {
    background-color: #F8FAFC !important;
    border-color: #E2E8F0 !important;
}

/* 11. نصوص التباين العام والرماديات الداكنة */
body[data-store-theme="light"] .text-slate-400,
body[data-store-theme="light"] .text-gray-400,
body[data-store-theme="light"] .text-\[\#8E9AA6\] {
    color: #64748B !important;
}

body[data-store-theme="light"] .text-slate-300,
body[data-store-theme="light"] .text-gray-300 {
    color: #475569 !important;
}

body[data-store-theme="light"] .text-slate-200,
body[data-store-theme="light"] .text-gray-200 {
    color: #334155 !important;
}

/* ==========================================================================
   SINGLE PRODUCT PAGE - LIGHT MODE FIXES
   ========================================================================== */

/* 1. حاوية تفاصيل المنتج والكرت الأيمن/الأيسر */
body[data-store-theme="light"] .single-product-card,
body[data-store-theme="light"] .product-details-box,
body[data-store-theme="light"] div[class*="bg-[#0d0d12]"],
body[data-store-theme="light"] div[class*="bg-[#12131C]"],
body[data-store-theme="light"] div[class*="bg-[#141414]"],
body[data-store-theme="light"] div[class*="bg-[#0F1117]"],
body[data-store-theme="light"] .bg-\[\#141414\] {
    background-color: #FFFFFF !important;
    border-color: #CBD5E1 !important;
    box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05) !important;
}

/* 2. تصحيح السعر الأساسي والخصم */
body[data-store-theme="light"] .product-price-current,
body[data-store-theme="light"] .product-details-box .text-white.font-bold,
body[data-store-theme="light"] .text-3xl.font-black.text-white,
body[data-store-theme="light"] .text-3xl.font-bold.text-white,
body[data-store-theme="light"] .text-2xl.font-black.text-white,
body[data-store-theme="light"] .text-2xl.font-bold.text-white,
body[data-store-theme="light"] .product-details-box h1 {
    color: #090D16 !important;
}

body[data-store-theme="light"] .product-price-old,
body[data-store-theme="light"] .line-through {
    color: #94A3B8 !important;
}

/* 3. تصحيح بيانات المنتج (العلامة التجارية، رقم المنتج، الكمية) */
body[data-store-theme="light"] .product-spec-value,
body[data-store-theme="light"] .product-brand-name,
body[data-store-theme="light"] .product-sku-code,
body[data-store-theme="light"] .product-stock-text,
body[data-store-theme="light"] .product-details-box .text-white {
    color: #090D16 !important;
}

body[data-store-theme="light"] .product-spec-label,
body[data-store-theme="light"] .text-slate-400,
body[data-store-theme="light"] .text-gray-400,
body[data-store-theme="light"] .text-\[\#8E9AA6\] {
    color: #475569 !important;
}

/* 4. تصحيح حقل / بادج كود المنتج (SND-XXXXX) */
body[data-store-theme="light"] .product-sku-badge,
body[data-store-theme="light"] input[readonly],
body[data-store-theme="light"] div:has(> .product-sku-code),
body[data-store-theme="light"] .bg-\[\#161922\],
body[data-store-theme="light"] .bg-\[\#181820\] {
    background-color: #F8FAFC !important;
    border-color: #CBD5E1 !important;
    color: #090D16 !important;
}

/* 5. تصحيح بادج الضمان (ضمان اصلي 100%) ومنع السواد */
body[data-store-theme="light"] .badge-guarantee,
body[data-store-theme="light"] span.bg-\[\#1a1a1a\],
body[data-store-theme="light"] .bg-black,
body[data-store-theme="light"] .bg-black\/60,
body[data-store-theme="light"] .bg-black\/80 {
    background-color: #F1F5F9 !important;
    border: 1px solid #CBD5E1 !important;
    color: #0F172A !important;
}

body[data-store-theme="light"] .badge-guarantee *,
body[data-store-theme="light"] .product-details-box .bg-black * {
    color: #0F172A !important;
    font-weight: 700 !important;
}

/* 6. تصحيح شارة التوفر والمخزون */
body[data-store-theme="light"] .stock-indicator-badge,
body[data-store-theme="light"] .product-stock-status,
body[data-store-theme="light"] .product-details-box .bg-white\/5 {
    background-color: #F8FAFC !important;
    border-color: #CBD5E1 !important;
    color: #0F172A !important;
}

body[data-store-theme="light"] .stock-indicator-badge *,
body[data-store-theme="light"] .product-details-box .bg-white\/5 * {
    color: #0F172A !important;
}

/* 7. أزرار الإجراءات السفلية (أضف للأمنيات / مشاركة) وحقول الكمية */
body[data-store-theme="light"] .product-action-secondary-btn,
body[data-store-theme="light"] .btn-wishlist-action,
body[data-store-theme="light"] .btn-share-action,
body[data-store-theme="light"] #wishlist-btn,
body[data-store-theme="light"] button[onclick="shareProduct()"],
body[data-store-theme="light"] button.border-white\/10 {
    background-color: #FFFFFF !important;
    border-color: #CBD5E1 !important;
    color: #334155 !important;
}

body[data-store-theme="light"] .product-action-secondary-btn:hover,
body[data-store-theme="light"] #wishlist-btn:hover,
body[data-store-theme="light"] button[onclick="shareProduct()"]:hover,
body[data-store-theme="light"] button.border-white\/10:hover {
    background-color: #F8FAFC !important;
    color: #090D16 !important;
    border-color: var(--hud-primary) !important;
}

body[data-store-theme="light"] .product-action-secondary-btn svg,
body[data-store-theme="light"] #wishlist-btn svg,
body[data-store-theme="light"] button[onclick="shareProduct()"] svg,
body[data-store-theme="light"] button.border-white\/10 svg {
    stroke: #334155 !important;
}

/* 8. خطوط الفواصل الأفقية والتبويبات والمواصفات */
body[data-store-theme="light"] .product-details-box hr,
body[data-store-theme="light"] .product-details-box .border-t,
body[data-store-theme="light"] .product-details-box .border-b,
body[data-store-theme="light"] .border-\[\#333\],
body[data-store-theme="light"] .border-\[\#262626\] {
    border-color: #E2E8F0 !important;
}

body[data-store-theme="light"] .product-tab-btn:not(.bg-gradient-to-r) {
    background-color: #FFFFFF !important;
    border-color: #CBD5E1 !important;
    color: #475569 !important;
}

body[data-store-theme="light"] .product-tab-btn:not(.bg-gradient-to-r):hover {
    background-color: #F8FAFC !important;
    color: #090D16 !important;
    border-color: var(--hud-primary) !important;
}

body[data-store-theme="light"] table td.bg-\[\#181818\] {
    background-color: #F1F5F9 !important;
    color: #475569 !important;
    border-color: #E2E8F0 !important;
}

body[data-store-theme="light"] table td.text-white {
    color: #090D16 !important;
    border-color: #E2E8F0 !important;
}

body[data-store-theme="light"] .tab-pane .bg-\[\#1a1a1a\] {
    background-color: #F8FAFC !important;
    border-color: #CBD5E1 !important;
}

body[data-store-theme="light"] .tab-pane .bg-\[\#1a1a1a\] h4 {
    color: #090D16 !important;
}

body[data-store-theme="light"] .tab-pane .bg-\[\#1a1a1a\] p {
    color: #64748B !important;
}

/* ==========================================================================
   ARMION FONT INTEGRATION FOR DASHBOARD
   ========================================================================== */

/* 1. تعريف خط ARMION من مسار قوالب الثيم */
@font-face {
    font-family: 'ARMION';
    src: url('assets/fonts/Armion-Regular.woff2') format('woff2'),
         url('assets/fonts/Armion-Regular.woff') format('woff'),
         url('assets/fonts/Armion-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'ARMION';
    src: url('assets/fonts/Armion-Bold.woff2') format('woff2'),
         url('assets/fonts/Armion-Bold.woff') format('woff'),
         url('assets/fonts/Armion-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* 2. فرض الخط على الداشبورد وشاشة الدخول التابعة لها */
body.page-template-page-dashboard,
.sanad-dashboard-root,
.sanad-dashboard-root *:not(.font-mono):not(code):not(pre) {
    font-family: 'ARMION', 'Cairo', sans-serif !important;
}

/* عناوين وأزرار وحقول الداشبورد */
.sanad-dashboard-root h1,
.sanad-dashboard-root h2,
.sanad-dashboard-root h3,
.sanad-dashboard-root h4,
.sanad-dashboard-root p,
.sanad-dashboard-root span:not(.font-mono),
.sanad-dashboard-root button,
.sanad-dashboard-root input,
.sanad-dashboard-root select,
.sanad-dashboard-root textarea,
.sanad-dashboard-root table {
    font-family: 'ARMION', 'Cairo', sans-serif !important;
}

/* ==========================================================================
   1. ربط أزرار "استكشاف العتاد" والتبويبات بالثيم الديناميكي النشط
   ========================================================================== */

/* أزرار استكشاف العتاد (في البنرات، كروت البراندات، ونافذة البراند) */
.btn-explore-gear,
.brand-explore-btn,
a[href*="brand"]:has(span),
.cyber-hero-inner a[class*="bg-gradient-to-r"],
button.btn-brand-explore {
    background: var(--hud-btn-gradient, linear-gradient(135deg, var(--hud-primary), var(--hud-secondary, var(--hud-primary)))) !important;
    color: #FFFFFF !important;
    border: none !important;
    box-shadow: 0 0 15px var(--hud-glow, rgba(0, 64, 255, 0.35)) !important;
    transition: transform 0.2s ease, filter 0.2s ease, box-shadow 0.2s ease !important;
}

.btn-explore-gear:hover,
.brand-explore-btn:hover {
    filter: brightness(1.15) !important;
    box-shadow: 0 0 25px var(--hud-glow) !important;
    transform: translateY(-1px) !important;
}

/* ضبط التباين للثيم الأصفر: إجبار النص والأيقونات داخل أزرار الاستكشاف على السواد الفاحم */
body[data-theme="yellow"] .btn-explore-gear,
body[data-theme="yellow"] .brand-explore-btn,
body[data-theme="yellow"] .cyber-hero-inner a[class*="bg-gradient-to-r"],
body[data-theme="yellow"] .btn-brand-explore {
    color: #000000 !important;
    font-weight: 800 !important;
}

/* تبويبات العروض النشطة (استبدال اللون الأحمر الثابت بالثيم المطبق) */
.offers-tab-btn.active,
.offers-tabs-container .btn-tab-active,
.offers-filter-bar button.bg-red-600,
div:has(> #priceRangeInput) ~ div button:first-child,
.offers-type-toggle button.active {
    background-color: var(--hud-primary) !important;
    background: var(--hud-primary) !important;
    color: #FFFFFF !important;
    border-color: var(--hud-primary) !important;
    box-shadow: 0 0 12px var(--hud-glow) !important;
}

/* تباين تبويب العروض للثيم الأصفر */
body[data-theme="yellow"] .offers-tab-btn.active,
body[data-theme="yellow"] .offers-filter-bar button.bg-red-600,
body[data-theme="yellow"] .offers-type-toggle button.active {
    color: #000000 !important;
    font-weight: 800 !important;
}


/* ==========================================================================
   2. تصحيح حاوية شريط العروض والعد التنازلي في الوضع النهاري (Light Mode)
   ========================================================================== */

/* تحويل حاوية العداد التنازلي الكبرى من السواد إلى لوحة تقنية بيضاء نظيفة */
body[data-store-theme="light"] .offers-countdown-banner,
body[data-store-theme="light"] .hud-countdown-banner,
body[data-store-theme="light"] .sanad-hud-timer,
body[data-store-theme="light"] div[class*="bg-[#111]"],
body[data-store-theme="light"] div[class*="bg-[#16161c]"] {
    background-color: #FFFFFF !important;
    background: #FFFFFF !important;
    border: 1px solid #CBD5E1 !important;
    box-shadow: 0 4px 15px -2px rgba(0, 0, 0, 0.05) !important;
    color: #090D16 !important;
}

/* عنوان شريط العروض التنازلية */
body[data-store-theme="light"] .offers-countdown-banner h2,
body[data-store-theme="light"] .offers-countdown-banner h3,
body[data-store-theme="light"] .offers-countdown-banner span,
body[data-store-theme="light"] .countdown-title,
body[data-store-theme="light"] .sanad-hud-timer h3 {
    color: #090D16 !important;
}

/* مربعات أرقام العداد (أيام / ساعات / دقائق / ثواني) */
body[data-store-theme="light"] .countdown-box,
body[data-store-theme="light"] .countdown-digit-card,
body[data-store-theme="light"] .sanad-hud-timer .timer-digits-container > div {
    background-color: #F8FAFC !important;
    border: 1px solid #CBD5E1 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

/* أرقام وتسميات العداد في الوضع النهاري */
body[data-store-theme="light"] .countdown-num,
body[data-store-theme="light"] .countdown-box span:first-child,
body[data-store-theme="light"] .sanad-hud-timer .timer-days,
body[data-store-theme="light"] .sanad-hud-timer .timer-hours,
body[data-store-theme="light"] .sanad-hud-timer .timer-minutes,
body[data-store-theme="light"] .sanad-hud-timer .timer-seconds {
    color: var(--hud-primary, #2563EB) !important;
    text-shadow: none !important;
    filter: none !important;
}

body[data-store-theme="light"] .countdown-label,
body[data-store-theme="light"] .countdown-box span:last-child,
body[data-store-theme="light"] .sanad-hud-timer .timer-digits-container span.text-\[\#8E9AA6\] {
    color: #64748B !important;
}

/* نقاط الفواصل بين مربعات الوقت (:) */
body[data-store-theme="light"] .countdown-separator,
body[data-store-theme="light"] .sanad-hud-timer .timer-digits-container > span {
    color: #94A3B8 !important;
}


/* ==========================================================================
   3. تصحيح قائمة "كل فئات العروض" وشريط الأدوات في الوضع النهاري
   ========================================================================== */

/* زر وقائمة الفئات المنسدلة (كل فئات العروض) */
body[data-store-theme="light"] .offers-categories-dropdown,
body[data-store-theme="light"] .offers-categories-select,
body[data-store-theme="light"] #sales-category-select,
body[data-store-theme="light"] #sales-search-input,
body[data-store-theme="light"] .offers-filter-bar,
body[data-store-theme="light"] .bg-\[\#141419\],
body[data-store-theme="light"] .bg-\[\#12131C\],
body[data-store-theme="light"] .offers-filter-bar.bg-\[\#141414\] {
    background-color: #FFFFFF !important;
    background: #FFFFFF !important;
    border: 1px solid #CBD5E1 !important;
    color: #090D16 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

body[data-store-theme="light"] .offers-categories-dropdown span,
body[data-store-theme="light"] .offers-categories-dropdown select option,
body[data-store-theme="light"] #sales-category-select option {
    background-color: #FFFFFF !important;
    color: #090D16 !important;
}

body[data-store-theme="light"] .offers-categories-dropdown svg,
body[data-store-theme="light"] #sales-category-select ~ svg {
    stroke: #090D16 !important;
    color: #090D16 !important;
}

/* تبويبات الفلاتر غير النشطة ("بكجات") */
body[data-store-theme="light"] .offers-type-toggle button:not(.active),
body[data-store-theme="light"] .offers-filter-bar button:not(.bg-red-600):not(.active),
body[data-store-theme="light"] #tab-sales-packages:not(.active) {
    background-color: #FFFFFF !important;
    border: 1px solid #CBD5E1 !important;
    color: #475569 !important;
}

body[data-store-theme="light"] .offers-type-toggle button:not(.active):hover,
body[data-store-theme="light"] #tab-sales-packages:not(.active):hover {
    background-color: #F8FAFC !important;
    color: #090D16 !important;
}


/* ==========================================================================
   4. نافذة وكروت البراندات (Brands Section & Modal) في الوضع النهاري
   ========================================================================== */

body[data-store-theme="light"] .brands-modal-content {
    background-color: #FFFFFF !important;
    border-color: #CBD5E1 !important;
    box-shadow: 0 4px 15px -2px rgba(0, 0, 0, 0.05) !important;
}

body[data-store-theme="light"] .brand-card,
body[data-store-theme="light"] .brand-item-box {
    background: transparent !important;
    border-color: transparent !important;
    border-width: 0 !important;
    box-shadow: none !important;
}

body[data-store-theme="light"] .brand-card:hover {
    border-color: var(--hud-primary) !important;
    box-shadow: none !important;
}

body[data-store-theme="light"] .brand-card .w-full.h-32 {
    background-color: #F8FAFC !important;
    border-color: #E2E8F0 !important;
}

body[data-store-theme="light"] .brand-card-title,
body[data-store-theme="light"] .brand-title,
body[data-store-theme="light"] .brand-card h3 {
    color: #090D16 !important;
}

body[data-store-theme="light"] .brand-card-desc,
body[data-store-theme="light"] .brand-count {
    background-color: #F1F5F9 !important;
    border-color: #CBD5E1 !important;
    color: #64748B !important;
}

body[data-store-theme="light"] .brand-tab-btn:not(.active):not(.bg-\[\#0040FF\]) {
    background-color: #FFFFFF !important;
    border-color: #CBD5E1 !important;
    color: #475569 !important;
}

body[data-store-theme="light"] .brand-tab-btn:not(.active):hover {
    background-color: #F8FAFC !important;
    color: #090D16 !important;
}

body[data-store-theme="light"] #brand-search-input {
    background-color: #FFFFFF !important;
    border-color: #CBD5E1 !important;
    color: #090D16 !important;
}

body[data-store-theme="light"] .sale-card {
    background: transparent !important;
    border-color: transparent !important;
    border-width: 0 !important;
}

body[data-store-theme="light"] .sale-card:hover {
    border-color: #DC2626 !important;
}

body[data-store-theme="light"] .sale-card h3 {
    color: #090D16 !important;
}


/* ==========================================================================
   HERO BANNER LIGHT MODE GRADIENT & CONTRAST OVERHAUL
   ========================================================================== */

/* 1. إرجاع السطوع الكامل لصورة البنر دون تعتيم */
body[data-store-theme="light"] #hero-carousel img {
    filter: brightness(1) contrast(1.02) !important;
}

/* 2. استبدال التدرج الأسود بتدرج أبيض زجاجي ثلجي يعزل النصوص بأناقة */
body[data-store-theme="light"] #hero-carousel .bg-gradient-to-l,
body[data-store-theme="light"] #hero-carousel div[class*="from-transparent"][class*="to-black"] {
    background: linear-gradient(to left, 
        rgba(255, 255, 255, 0.95) 0%, 
        rgba(255, 255, 255, 0.85) 45%, 
        rgba(255, 255, 255, 0.35) 75%, 
        transparent 100%) !important;
}

/* 3. فرض اللون الداكن المتباين للعناوين والنصوص داخل البنر */
body[data-store-theme="light"] #hero-carousel h3,
body[data-store-theme="light"] #hero-carousel .text-white:not(.btn-explore-gear) {
    color: #090D16 !important;
    text-shadow: none !important;
}

body[data-store-theme="light"] #hero-carousel p,
body[data-store-theme="light"] #hero-carousel .text-gray-300 {
    color: #475569 !important;
}

/* زر الاستكشاف داخل البنر */
body[data-store-theme="light"] #hero-carousel .btn-explore-gear {
    color: #FFFFFF !important;
}

body[data-theme="yellow"][data-store-theme="light"] #hero-carousel .btn-explore-gear {
    color: #000000 !important;
}

/* 4. تصحيح بادج الترويج أعلى العنوان ("عروض سند ستور") */
body[data-store-theme="light"] #hero-carousel span[class*="bg-white\/10"] {
    background-color: #FFFFFF !important;
    border-color: #CBD5E1 !important;
    color: #090D16 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

/* 5. تصحيح أسهم التنقل (السابق / التالي) للبنر */
body[data-store-theme="light"] #carousel-right,
body[data-store-theme="light"] #carousel-left {
    background-color: rgba(255, 255, 255, 0.9) !important;
    border-color: #CBD5E1 !important;
    color: #090D16 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

body[data-store-theme="light"] #carousel-right:hover,
body[data-store-theme="light"] #carousel-left:hover {
    background: var(--hud-primary) !important;
    color: #FFFFFF !important;
    border-color: var(--hud-primary) !important;
}

body[data-store-theme="light"] #carousel-right svg,
body[data-store-theme="light"] #carousel-left svg {
    stroke: currentColor !important;
}

/* 6. شريط نقاط المؤشر السفلي (Indicators) */
body[data-store-theme="light"] .cyber-hero-inner div:has(> .carousel-dot),
body[data-store-theme="light"] .carousel-indicators-bar {
    background-color: rgba(255, 255, 255, 0.85) !important;
    border-color: #CBD5E1 !important;
}

body[data-store-theme="light"] .carousel-dot:not(.bg-\[\#0040FF\]) {
    background-color: #CBD5E1 !important;
}

/* ==========================================================================
   GLOBAL LOGO & CHECKOUT CLEANUP - حماية شاملة ضد تضخم الشعار
   ========================================================================== */
/* 1. ضبط أبعاد شعار الهيدر بشكل صارم في جميع الحالات والصفحات */
header .header-logo-img,
header img[src*="logo"],
header a img,
.header-logo-img {
    height: 36px !important;
    max-height: 36px !important;
    width: auto !important;
    max-width: 36px !important;
    object-fit: contain !important;
    display: block !important;
}

/* 2. ضبط أبعاد شعار الفوتر */
footer .footer-logo-img,
footer img[src*="logo"],
footer a img {
    height: 40px !important;
    max-height: 40px !important;
    width: auto !important;
    max-width: 40px !important;
    object-fit: contain !important;
    display: block !important;
}

/* 3. إخفاء أي شعار عملاق أو ووترمارك أو صور زائدة في نافذة وصفحة إتمام الطلب / الدفع */
.woocommerce-checkout .site-logo-watermark,
.checkout-page-watermark,
body.page-template-page-checkout main img[src*="logo"],
body.woocommerce-checkout main img[src*="logo"],
body:has(#checkout-content) main img[src*="logo"],
body:has(#checkout-form) main img[src*="logo"],
#checkout-content img[src*="logo"],
#checkout-form img[src*="logo"],
.page-template-page-checkout main > img,
body.page-template-page-checkout main > img,
body:has(#customer_details) > img[src*="logo"],
body:has(#checkout-form) > img[src*="logo"],
body:has(.checkout-form) > img[src*="logo"],
.checkout-container img[src*="logo"]:not(header img),
body.page-template-page-checkout .site-logo-watermark,
body.page-template-page-checkout .cyber-watermark,
body.woocommerce-checkout::before,
body.woocommerce-checkout::after,
.checkout-page-wrapper::before,
.checkout-page-wrapper::after {
    display: none !important;
}

/* ==========================================================================
   FIXED ORDERS DESK: RESPONSIVE COMPACT ROW & HIGH-CONTRAST TEXT
   ========================================================================== */

/* 1. إصلاح تباين نصوص المنتجات داخل كرت الطلب في الوضع النهاري */
body[data-dash-theme="light"] .order-card {
    background-color: #FFFFFF !important;
    border-color: #E2E8F0 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

body[data-dash-theme="light"] .order-card .order-col-products,
body[data-dash-theme="light"] .order-card .order-col-products div {
    color: #0F172A !important;
}
body[data-dash-theme="light"] .order-card .order-col-products span {
    color: #0F172A !important;
}
body[data-dash-theme="light"] .order-card .order-col-products .text-slate-300,
body[data-dash-theme="light"] .order-card .order-col-products .text-slate-200,
body[data-dash-theme="light"] .order-card .order-col-products .text-slate-100 {
    color: #0F172A !important;
    font-weight: 600 !important;
}
body[data-dash-theme="light"] .order-card .order-col-products .text-slate-400 {
    color: #475569 !important;
}
body[data-dash-theme="light"] .order-card .order-col-products div[class*="border-b"] {
    border-color: #E2E8F0 !important;
}
body[data-dash-theme="light"] .order-card .order-col-products div[class*="bg-"] {
    background-color: #F8FAFC !important;
    border: 1px solid #E2E8F0 !important;
}
body[data-dash-theme="light"] .btn-toggle-order-items {
    background-color: #EFF6FF !important;
    border-color: #BFDBFE !important;
    color: #2563EB !important;
}
body[data-dash-theme="light"] .btn-toggle-order-items span {
    color: #2563EB !important;
}
body[data-dash-theme="light"] .btn-toggle-order-items:hover {
    background-color: #DBEAFE !important;
}
body[data-dash-theme="light"] .btn-toggle-order-items.bg-blue-600,
body[data-dash-theme="light"] .btn-toggle-order-items.bg-blue-600 span {
    background-color: #2563EB !important;
    color: #FFFFFF !important;
}
body[data-dash-theme="light"] .order-card .order-col-customer {
    background-color: #F8FAFC !important;
    border-color: #E2E8F0 !important;
}
body[data-dash-theme="light"] .order-card .order-col-customer .text-white {
    color: #0F172A !important;
}
body[data-dash-theme="light"] .order-card .order-col-header .bg-white\/5 {
    background-color: #F1F5F9 !important;
    border-color: #CBD5E1 !important;
    color: #0F172A !important;
}
body[data-dash-theme="light"] .order-card .order-col-customer a.bg-white\/5 {
    background-color: #FFFFFF !important;
    border-color: #CBD5E1 !important;
    color: #0F172A !important;
}
body[data-dash-theme="light"] .order-card .order-col-customer a.bg-white\/5:hover {
    background-color: #F1F5F9 !important;
}
body[data-dash-theme="light"] .order-card .order-col-footer .text-white,
body[data-dash-theme="light"] .order-card .font-mono.text-base {
    color: #0F172A !important;
    font-weight: 800 !important;
}

@media (min-width: 1024px) {
    #orders-container.orders-list-view {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.6rem !important;
        width: 100% !important;
    }
    #orders-container.orders-list-view .order-card {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 1rem !important;
        padding: 0.75rem 1.25rem !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    #orders-container.orders-list-view .order-col-header {
        width: 160px !important;
        flex-shrink: 0 !important;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
        border-bottom: none !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.35rem !important;
    }
    #orders-container.orders-list-view .order-col-customer {
        width: 220px !important;
        flex-shrink: 0 !important;
        margin-bottom: 0 !important;
        padding: 0.5rem 0.75rem !important;
    }
    #orders-container.orders-list-view .order-col-products {
        flex: 1 1 auto !important;
        min-width: 200px !important;
        margin-bottom: 0 !important;
    }
    #orders-container.orders-list-view .order-col-products div[class*="max-h-"] {
        max-height: 4rem !important;
    }
    #orders-container.orders-list-view .order-col-footer {
        width: 280px !important;
        flex-shrink: 0 !important;
        padding-top: 0 !important;
        border-top: none !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 0.4rem !important;
    }
    #orders-container.orders-list-view .order-col-footer > div:first-child {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }
}

#orders-container:not(.orders-list-view) .order-card {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}

/* ==========================================================================
   ORDERS TYPOGRAPHY & STATUS BADGES BOLD ENFORCEMENT
   ========================================================================== */
.order-card {
    font-weight: 700 !important;
}
.order-card span,
.order-card div,
.order-card p,
.order-card a,
.order-card button,
.order-card label {
    font-weight: 700;
}
.order-card .font-mono,
.order-card .order-col-header span,
.order-card .order-col-financials span:last-child {
    font-weight: 800 !important;
}
.order-filter-tab {
    font-weight: 700 !important;
}
/* Selected/Active Filter Tab: pure crisp white font for text and count numbers in both themes */
.order-filter-tab.bg-blue-600,
.order-filter-tab.active,
.order-filter-tab[class*="bg-blue-600"],
body[data-dash-theme="light"] .order-filter-tab.bg-blue-600,
body[data-dash-theme="light"] .order-filter-tab.active {
    background-color: #2563EB !important;
    color: #FFFFFF !important;
    border-color: transparent !important;
}
.order-filter-tab.bg-blue-600 span,
.order-filter-tab.active span,
.order-filter-tab.bg-blue-600 *,
.order-filter-tab.active *,
body[data-dash-theme="light"] .order-filter-tab.bg-blue-600 span,
body[data-dash-theme="light"] .order-filter-tab.active span,
body[data-dash-theme="light"] .order-filter-tab.bg-blue-600 *,
body[data-dash-theme="light"] .order-filter-tab.active * {
    color: #FFFFFF !important;
}
.order-card span[class*="rounded-full"],
.order-card .badge-status-completed {
    font-weight: 800 !important;
}



/* ==========================================================================
   CUSTOM SAAS DIALOG MODAL & TOAST ARCHITECTURE
   ========================================================================== */

/* دعم نافذة التأكيد في الوضع النهاري للداشبورد */
body[data-dash-theme="light"] #sanad-dialog-card {
    background-color: #FFFFFF !important;
    border-color: #E2E8F0 !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1) !important;
}

body[data-dash-theme="light"] #sanad-dialog-title {
    color: #0F172A !important;
}

body[data-dash-theme="light"] #sanad-dialog-text {
    color: #475569 !important;
}

body[data-dash-theme="light"] #sanad-dialog-btn-cancel {
    background-color: #F1F5F9 !important;
    border-color: #CBD5E1 !important;
    color: #334155 !important;
}

body[data-dash-theme="light"] #sanad-dialog-btn-cancel:hover {
    background-color: #E2E8F0 !important;
    color: #0F172A !important;
}

body[data-dash-theme="light"] #sanad-toast-container > div {
    background-color: #FFFFFF !important;
    border-color: #CBD5E1 !important;
    color: #0F172A !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1) !important;
}


/* ==========================================================================
   PRODUCT SLIDE-IN DRAWER (LEFT SHEET ARCHITECTURE)
   ========================================================================== */

#product-modal-drawer,
#bundle-modal-drawer,
#coupon-modal-drawer {
    left: 0 !important;
    right: auto !important;
}

body[data-dash-theme="light"] #product-modal-drawer,
body[data-dash-theme="light"] #bundle-modal-drawer,
body[data-dash-theme="light"] #coupon-modal-drawer {
    background-color: #FFFFFF !important;
    border-color: #E2E8F0 !important;
    box-shadow: 20px 0 35px -5px rgba(0, 0, 0, 0.1) !important;
}

body[data-dash-theme="light"] #product-modal-drawer .dash-drawer-header,
body[data-dash-theme="light"] #product-modal-drawer .dash-drawer-footer,
body[data-dash-theme="light"] #coupon-modal-drawer .dash-drawer-header,
body[data-dash-theme="light"] #coupon-modal-drawer .dash-drawer-footer {
    background-color: #F8FAFC !important;
    border-color: #E2E8F0 !important;
}

body[data-dash-theme="light"] #product-modal-drawer .dash-section-card,
body[data-dash-theme="light"] #coupon-modal-drawer .dash-card {
    background-color: #FFFFFF !important;
    border-color: #E2E8F0 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

body[data-dash-theme="light"] #product-modal-drawer input,
body[data-dash-theme="light"] #product-modal-drawer select,
body[data-dash-theme="light"] #product-modal-drawer textarea,
body[data-dash-theme="light"] #coupon-modal-drawer input,
body[data-dash-theme="light"] #coupon-modal-drawer select {
    background-color: #F8FAFC !important;
    border-color: #CBD5E1 !important;
    color: #0F172A !important;
}

body[data-dash-theme="light"] #product-modal-drawer input:focus,
body[data-dash-theme="light"] #product-modal-drawer select:focus,
body[data-dash-theme="light"] #product-modal-drawer textarea:focus,
body[data-dash-theme="light"] #coupon-modal-drawer input:focus,
body[data-dash-theme="light"] #coupon-modal-drawer select:focus {
    background-color: #FFFFFF !important;
    border-color: #2563EB !important;
}

body[data-dash-theme="light"] #product-modal-drawer label {
    color: #334155 !important;
}

body[data-dash-theme="light"] #product-modal-drawer .text-white {
    color: #0F172A !important;
}

body[data-dash-theme="light"] #product-modal-drawer .text-slate-200,
body[data-dash-theme="light"] #product-modal-drawer .text-slate-300 {
    color: #334155 !important;
}

body[data-dash-theme="light"] #product-modal-drawer .text-slate-400 {
    color: #64748B !important;
}

body[data-dash-theme="light"] #product-modal-drawer #product-images-dropzone {
    background-color: #F8FAFC !important;
    border-color: #CBD5E1 !important;
}

body[data-dash-theme="light"] #product-modal-drawer #product-images-dropzone:hover {
    background-color: #F1F5F9 !important;
    border-color: #2563EB !important;
}

body[data-dash-theme="light"] #product-modal-drawer #modal-images-preview-strip {
    background-color: #F8FAFC !important;
    border-color: #E2E8F0 !important;
}


/* ==========================================================================
   PRODUCT SLIDE-IN DRAWER (EXPANDED HORIZONTAL 2-COLUMN WORKSPACE)
   ========================================================================== */

#product-modal-drawer {
    left: 0 !important;
    right: auto !important;
}

@media (min-width: 1024px) {
    #product-modal-drawer {
        width: 1060px !important;
        max-width: 90vw !important;
    }
}

@media (min-width: 1400px) {
    #product-modal-drawer {
        width: 1140px !important;
        max-width: 88vw !important;
    }
}

body[data-dash-theme="light"] #product-modal-drawer .dash-section-card {
    background-color: #FFFFFF !important;
    border-color: #E2E8F0 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

body[data-dash-theme="light"] #product-modal-drawer .dash-section-card > div.border-b {
    border-color: #F1F5F9 !important;
}

/* ==========================================================================
   SYSTEM MAIN HEADER (GLOBAL UTILITY BAR)
   ========================================================================== */

#dash-main-header {
    background-color: rgba(17, 19, 26, 0.95);
    border-bottom: 1px solid #282E3D;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

body[data-dash-theme="light"] #dash-main-header {
    background-color: rgba(255, 255, 255, 0.95) !important;
    border-bottom-color: #E2E8F0 !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05) !important;
}

body[data-dash-theme="light"] #dash-main-header #dash-header-view-title {
    color: #0F172A !important;
}

body[data-dash-theme="light"] #dash-main-header p {
    color: #64748B !important;
}

body[data-dash-theme="light"] #dash-main-header #header-mobile-toggle {
    background-color: #F8FAFC !important;
    border-color: #E2E8F0 !important;
    color: #475569 !important;
}

body[data-dash-theme="light"] #dash-main-header #header-mobile-toggle:hover {
    background-color: #F1F5F9 !important;
    color: #0F172A !important;
}

/* ==========================================================================
   FIXED SIDEBAR ARCHITECTURE (PINNED RIGHT SIDEBAR & MINI COLLAPSE CONTROLLER)
   ========================================================================== */

#app-sidebar {
    transition: width 0.28s cubic-bezier(0.4, 0, 0.2, 1), transform 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
    overflow-x: hidden !important;
}

body.sanad-dashboard-root main {
    transition: margin-right 0.28s cubic-bezier(0.4, 0, 0.2, 1), width 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

@media (min-width: 1024px) {
    #app-sidebar {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        height: 100vh !important;
        width: 18rem !important; /* 288px */
        z-index: 40 !important;
        overflow-y: auto !important;
    }

    body.sanad-dashboard-root main {
        margin-right: 18rem !important;
        width: calc(100% - 18rem) !important;
        min-width: 0 !important;
    }

    /* Desktop: Mini Icon Rail State (Keeps icons visible!) */
    body.sanad-dashboard-root.sidebar-closed #app-sidebar {
        width: 4.75rem !important;
        transform: translateX(0) !important;
        visibility: visible !important;
    }

    body.sanad-dashboard-root.sidebar-closed main {
        margin-right: 4.75rem !important;
        width: calc(100% - 4.75rem) !important;
    }

    body.sanad-dashboard-root.sidebar-closed #app-sidebar .sidebar-brand-wrapper {
        padding: 0.75rem 0.5rem !important;
        justify-content: center !important;
        flex-direction: column !important;
        gap: 0.5rem !important;
    }
    body.sanad-dashboard-root.sidebar-closed #app-sidebar .sidebar-text-label {
        display: none !important;
    }
    body.sanad-dashboard-root.sidebar-closed #app-sidebar #sidebar-logo-icon {
        display: flex !important;
        margin: 0 auto !important;
    }
    body.sanad-dashboard-root.sidebar-closed #app-sidebar #sidebar-close-btn {
        display: flex !important;
        margin: 0 auto !important;
        padding: 0.35rem !important;
    }
    body.sanad-dashboard-root.sidebar-closed #app-sidebar #sidebar-collapse-icon {
        transform: rotate(180deg) !important;
    }

    body[data-dash-theme="light"] .dash-logo-dark-mode,
    [data-dash-theme="light"] .dash-logo-dark-mode {
        display: none !important;
    }
    body[data-dash-theme="light"] .dash-logo-light-mode,
    [data-dash-theme="light"] .dash-logo-light-mode {
        display: block !important;
    }

    body.sanad-dashboard-root.sidebar-closed #app-sidebar #sidebar-nav-container {
        padding: 0.75rem 0.375rem !important;
    }
    body.sanad-dashboard-root.sidebar-closed #app-sidebar .nav-item {
        position: relative !important;
        justify-content: center !important;
        padding: 0.75rem 0.5rem !important;
    }
    body.sanad-dashboard-root.sidebar-closed #app-sidebar .nav-item > div {
        justify-content: center !important;
        gap: 0 !important;
    }
    body.sanad-dashboard-root.sidebar-closed #app-sidebar .nav-item .sidebar-nav-text {
        display: none !important;
    }
    body.sanad-dashboard-root.sidebar-closed #app-sidebar .nav-item svg {
        width: 1.35rem !important;
        height: 1.35rem !important;
        margin: 0 auto !important;
    }
    body.sanad-dashboard-root.sidebar-closed #app-sidebar #nav-pending-badge {
        position: absolute !important;
        top: 4px !important;
        left: 6px !important;
        font-size: 9px !important;
        line-height: 1 !important;
        padding: 2px 4px !important;
        border-radius: 9999px !important;
    }
}

@media (max-width: 1023px) {
    #app-sidebar {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        height: 100vh !important;
        width: 18rem !important;
        max-width: 85vw !important;
        z-index: 60 !important;
        transform: translateX(100%) !important;
        box-shadow: -8px 0 32px rgba(0, 0, 0, 0.6) !important;
        transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }

    body.sanad-dashboard-root.sidebar-open-mobile #app-sidebar {
        transform: translateX(0) !important;
    }

    body.sanad-dashboard-root main {
        margin-right: 0 !important;
        width: 100% !important;
    }

    #dash-header-toolbar,
    .dash-toolbar-scroll {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        white-space: nowrap !important;
        gap: 0.5rem !important;
        max-width: 100% !important;
    }
}

@media (max-width: 768px) {
    #dash-main-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.625rem !important;
        padding-top: 0.75rem !important;
        padding-bottom: 0.75rem !important;
    }
    #dash-main-header .dash-header-title-bar {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
    }
    #dash-header-toolbar,
    .dash-toolbar-scroll {
        width: 100% !important;
        padding-bottom: 0.25rem !important;
        padding-top: 0.125rem !important;
    }

    /* التمرير الأفقي للجداول محصور فقط في وضع الموبايل */
    .sanad-dashboard-root .dash-table-wrapper,
    .sanad-dashboard-root .overflow-x-auto:has(> .dash-table) {
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
    }
    .sanad-dashboard-root .dash-table {
        min-width: 650px !important; /* فقط على شاشات الموبايل */
    }
    .sanad-dashboard-root .dash-table th,
    .sanad-dashboard-root .dash-table td {
        white-space: nowrap !important; /* فقط على شاشات الموبايل */
        padding: 0.65rem 0.75rem !important;
    }
    .sanad-dashboard-root .dash-table th:first-child,
    .sanad-dashboard-root .dash-table td:first-child {
        white-space: normal !important;
    }
    .sanad-dashboard-root .dash-table-wrapper::-webkit-scrollbar {
        height: 4px !important;
    }
    .sanad-dashboard-root .dash-table-wrapper::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.2) !important;
        border-radius: 9999px !important;
    }
}

.no-scrollbar::-webkit-scrollbar,
.dash-toolbar-scroll::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}
.no-scrollbar,
.dash-toolbar-scroll {
    -ms-overflow-style: none !important;
    scrollbar-width: none !important;
}

/* ==========================================================================
   CHECKOUT PAGE: COMPLETE LIGHT MODE FIELDS & SUMMARY OVERHAUL
   ========================================================================== */

/* كروت حاوية صفحة إتمام الطلب الرئيسية */
body[data-store-theme="light"] #checkout-content > div,
body[data-store-theme="light"] .checkout-card-box {
    background-color: #FFFFFF !important;
    background: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
    box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05) !important;
}

body[data-store-theme="light"] #checkout-content h1,
body[data-store-theme="light"] #checkout-content h2,
body[data-store-theme="light"] main:has(#checkout-content) h1 {
    color: #0F172A !important;
}

/* 1. توحيد كافة حقول الإدخال، الهاتف، والملاحظات */
body[data-store-theme="light"] .checkout-container input,
body[data-store-theme="light"] .checkout-container textarea,
body[data-store-theme="light"] .checkout-container select,
body[data-store-theme="light"] #checkout-form input,
body[data-store-theme="light"] #checkout-form textarea,
body[data-store-theme="light"] #checkout-form select,
body[data-store-theme="light"] #checkout-content input,
body[data-store-theme="light"] #checkout-content textarea,
body[data-store-theme="light"] #checkout-content select,
body[data-store-theme="light"] #cust-name,
body[data-store-theme="light"] #cust-phone,
body[data-store-theme="light"] #cust-address,
body[data-store-theme="light"] #cust-notes,
body[data-store-theme="light"] #checkout-coupon-input,
body[data-store-theme="light"] input[type="tel"],
body[data-store-theme="light"] #billing_phone,
body[data-store-theme="light"] #order_comments,
body[data-store-theme="light"] textarea[name="notes"],
body[data-store-theme="light"] input[name="phone"],
body[data-store-theme="light"] div:has(> input[type="tel"]),
body[data-store-theme="light"] div:has(> textarea) {
    background-color: #FFFFFF !important;
    background: #FFFFFF !important;
    border: 1px solid #CBD5E1 !important;
    color: #0F172A !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

body[data-store-theme="light"] input[type="tel"]::placeholder,
body[data-store-theme="light"] textarea::placeholder,
body[data-store-theme="light"] #checkout-content input::placeholder,
body[data-store-theme="light"] #checkout-content textarea::placeholder {
    color: #64748B !important;
}

/* 2. قائمة اختيار المحافظة (Select Dropdown) */
body[data-store-theme="light"] #billing_state,
body[data-store-theme="light"] #cust-gov,
body[data-store-theme="light"] select[name="governorate"],
body[data-store-theme="light"] .checkout-gov-select,
body[data-store-theme="light"] div:has(> select[name="governorate"]),
body[data-store-theme="light"] div:has(> #cust-gov) {
    background-color: #FFFFFF !important;
    background: #FFFFFF !important;
    border: 1px solid #CBD5E1 !important;
    color: #0F172A !important;
}

body[data-store-theme="light"] #cust-gov option,
body[data-store-theme="light"] select[name="governorate"] option,
body[data-store-theme="light"] #checkout-content select option {
    background-color: #FFFFFF !important;
    color: #0F172A !important;
}

/* 3. كروت المنتجات داخل ملخص الطلب (Order Summary Items) */
body[data-store-theme="light"] .checkout-item-card,
body[data-store-theme="light"] .checkout-summary-item,
body[data-store-theme="light"] #checkout-items-list > div,
body[data-store-theme="light"] #checkout-items-list div[class*="bg-"],
body[data-store-theme="light"] div:has(> .checkout-item-title),
body[data-store-theme="light"] .checkout-container div[class*="bg-[#11131A]"],
body[data-store-theme="light"] .checkout-container div[class*="bg-[#16161c]"],
body[data-store-theme="light"] .checkout-container div[class*="bg-[#12131C]"],
body[data-store-theme="light"] .checkout-container div[class*="bg-[#141419]"],
body[data-store-theme="light"] .checkout-container div[class*="bg-[#181818]"],
body[data-store-theme="light"] #checkout-content div[class*="bg-[#181818]"] {
    background-color: #F8FAFC !important;
    background: #F8FAFC !important;
    border: 1px solid #CBD5E1 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

body[data-store-theme="light"] .checkout-item-card *,
body[data-store-theme="light"] .checkout-summary-item *,
body[data-store-theme="light"] #checkout-items-list h4,
body[data-store-theme="light"] #checkout-items-list div,
body[data-store-theme="light"] #checkout-items-list span,
body[data-store-theme="light"] .checkout-container div[class*="bg-[#11131A]"] * {
    color: #0F172A !important;
}

body[data-store-theme="light"] #checkout-items-list div.text-\[\#00F0FF\] {
    color: #0284C7 !important;
}

/* 4. شريط خيار الدفع (الدفع نقداً عند الاستلام COD) */
body[data-store-theme="light"] .payment-method-box,
body[data-store-theme="light"] .cod-payment-option,
body[data-store-theme="light"] #checkout-form > div[class*="bg-[#1a1a1a]"],
body[data-store-theme="light"] #checkout-form > div:has(span.text-white),
body[data-store-theme="light"] #checkout-content div[class*="bg-[#1a1a1a]"]:not(input):not(select):not(textarea) {
    background-color: #F8FAFC !important;
    background: #F8FAFC !important;
    border: 1px solid #CBD5E1 !important;
    color: #0F172A !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

body[data-store-theme="light"] .payment-method-box *,
body[data-store-theme="light"] #checkout-form > div[class*="bg-[#1a1a1a]"] *,
body[data-store-theme="light"] #checkout-content div[class*="bg-[#1a1a1a]"] span {
    color: #0F172A !important;
    font-weight: 700 !important;
}

/* 5. خطوط الفواصل والنصوص الفرعية في ملخص الحساب */
body[data-store-theme="light"] .checkout-container .border-t,
body[data-store-theme="light"] .checkout-container .border-b,
body[data-store-theme="light"] .checkout-container hr,
body[data-store-theme="light"] #checkout-content .border-t,
body[data-store-theme="light"] #checkout-content .border-b,
body[data-store-theme="light"] #checkout-content .border-\[\#333\] {
    border-color: #E2E8F0 !important;
}

body[data-store-theme="light"] .checkout-container span.text-slate-400,
body[data-store-theme="light"] .checkout-container span.text-gray-400,
body[data-store-theme="light"] #checkout-content span.text-gray-400,
body[data-store-theme="light"] #checkout-content label {
    color: #64748B !important;
}

body[data-store-theme="light"] #checkout-content #checkout-subtotal,
body[data-store-theme="light"] #checkout-content #checkout-shipping,
body[data-store-theme="light"] #checkout-content #checkout-total {
    color: #0F172A !important;
    font-weight: 800 !important;
}

body[data-store-theme="light"] #apply-coupon-btn {
    background-color: #F1F5F9 !important;
    border-color: #CBD5E1 !important;
    color: #0F172A !important;
}

/* ==========================================================================
   ARCHIVE & CATEGORY LAYOUT: GRID PROTECTION & SIDEBAR LOCK
   ========================================================================== */

/* 1. منع انكماش كروت المنتجات وفرض شبكة متجاوبة (Responsive Auto-Fill) */
.products-grid,
#products-container:not(.list-view),
div:has(> .product-card):not(.list-view),
.woocommerce-page ul.products,
ul.products {
    display: grid !important;
    /* تحديد عرض أدنى 220px للكرت لمنع الانكماش البشع، ويتمدد ليملأ الفراغ */
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
    gap: 1.25rem !important;
    width: 100% !important;
    align-items: stretch !important;
}

/* 2. تثبيت القائمة الجانبية في صفحات الأقسام والواجهة الرئيسية بنفس الأبعاد والموضع */
.flex:has(> .products-grid) > aside,
.flex:has(> ul.products) > aside,
.flex:has(> #products-container) > aside,
main > .flex > aside:not(:has(~ #hero-carousel)),
.archive aside,
.tax-product_cat aside,
.category aside {
    position: sticky !important;
    top: 5rem !important;
    align-self: flex-start !important;
    height: fit-content !important;
    width: 280px !important;
    min-width: 280px !important;
    max-width: 280px !important;
    flex: 0 0 280px !important;
}

@media (min-width: 1280px) {
    .flex:has(> .products-grid) > aside,
    .flex:has(> ul.products) > aside,
    .flex:has(> #products-container) > aside,
    main > .flex > aside:not(:has(~ #hero-carousel)),
    .archive aside,
    .tax-product_cat aside,
    .category aside {
        width: 300px !important;
        min-width: 300px !important;
        max-width: 300px !important;
        flex: 0 0 300px !important;
    }
}

/* 3. ضمان عدم تسرب التوهج في حاوية القائمة الجانبية عند التمرير */
aside div.border-r-2,
aside ul.list-none {
    height: max-content !important;
    min-height: 100% !important;
}

/* 4. الحفاظ على مرونة حاوية المنتجات (Main Content Area) */
.flex:has(> .products-grid) > div:not(aside),
.flex:has(> ul.products) > div:not(aside),
.flex:has(> #products-container) > div:not(aside),
main > .flex > div:has(.product-card),
main:has(#products-container) > section {
    flex: 1 !important;
    min-width: 0 !important; /* يمنع انكسار شبكة الـ CSS Grid خارج حدود الشاشة */
}

/* ==========================================================================
   FORCE LIGHT MODE OVERRIDES FOR HUD DROPDOWNS
   ========================================================================== */

/* 1. إجبار خلفيات القوائم وحاوياتها على اللون الأبيض الناصع */
body[data-store-theme="light"] #filter-category,
body[data-store-theme="light"] #filter-brand,
body[data-store-theme="light"] .hud-select,
body[data-store-theme="light"] .hud-filter-dropdown,
body[data-store-theme="light"] div[class*="border-"]:has(select),
body[data-store-theme="light"] div:has(> #filter-category),
body[data-store-theme="light"] div:has(> #filter-brand),
body[data-store-theme="light"] div:has(> select) {
    background: #FFFFFF !important;
    background-color: #FFFFFF !important;
    border: 1px solid #CBD5E1 !important;
    color: #0F172A !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

/* 2. تصحيح النصوص داخل الخيارات (Options) */
body[data-store-theme="light"] select option {
    background-color: #FFFFFF !important;
    color: #0F172A !important;
}

/* 3. إجبار أيقونات الأسهم (SVGs) على اللون الرمادي الداكن بدلاً من النيون */
body[data-store-theme="light"] #filter-category ~ svg,
body[data-store-theme="light"] #filter-brand ~ svg,
body[data-store-theme="light"] .hud-select svg,
body[data-store-theme="light"] div:has(> select) svg {
    color: #475569 !important;
    stroke: #475569 !important;
}

/* 4. تفاعل الهوفر (Hover) في الوضع النهاري - ربط بلون الثيم النشط بهدوء */
body[data-store-theme="light"] #filter-category:hover,
body[data-store-theme="light"] #filter-brand:hover,
body[data-store-theme="light"] div:has(> select):hover {
    border-color: var(--hud-primary, #2563EB) !important;
    box-shadow: 0 0 0 1px var(--hud-primary, #2563EB) !important;
}

body[data-store-theme="light"] div:has(> select):hover svg {
    stroke: var(--hud-primary, #2563EB) !important;
    color: var(--hud-primary, #2563EB) !important;
}

/* 5. تخصيص مكونات HUD Select المخصصة (HUD Select Custom JS Component) للوضع النهاري */
body[data-store-theme="light"] .hud-select-trigger {
    background: #FFFFFF !important;
    background-color: #FFFFFF !important;
    border: 1px solid #CBD5E1 !important;
    color: #0F172A !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

body[data-store-theme="light"] .hud-select-trigger .hud-select-label {
    color: #0F172A !important;
}

body[data-store-theme="light"] .hud-select-trigger .hud-select-arrow,
body[data-store-theme="light"] .hud-select-trigger .hud-select-arrow svg {
    color: #475569 !important;
    stroke: #475569 !important;
}

body[data-store-theme="light"] .hud-select-trigger:hover,
body[data-store-theme="light"] .hud-select-wrapper.is-open .hud-select-trigger {
    background: #F8FAFC !important;
    background-color: #F8FAFC !important;
    border-color: var(--hud-primary, #2563EB) !important;
    box-shadow: 0 0 0 1px var(--hud-primary, #2563EB) !important;
}

body[data-store-theme="light"] .hud-select-options {
    background: #FFFFFF !important;
    background-color: #FFFFFF !important;
    border: 1px solid #CBD5E1 !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1) !important;
}

body[data-store-theme="light"] .hud-select-option {
    background: #FFFFFF !important;
    background-color: #FFFFFF !important;
    color: #0F172A !important;
    border-bottom: 1px solid #F1F5F9 !important;
}

body[data-store-theme="light"] .hud-select-option:hover,
body[data-store-theme="light"] .hud-select-option.is-focused {
    background: #F1F5F9 !important;
    background-color: #F1F5F9 !important;
    color: #090D16 !important;
}

body[data-store-theme="light"] .hud-select-option.is-selected {
    background: #EFF6FF !important;
    background-color: #EFF6FF !important;
    color: var(--hud-primary, #2563EB) !important;
    font-weight: 700 !important;
}

/* ==========================================================================
   SECTION SUBTITLES: LIGHT MODE HIGH-CONTRAST FIX
   ========================================================================== */

/* استهداف العناوين الفرعية المشعة (السماوي/الزمردي/النيون) وتحويلها للون داكن في الوضع النهاري */
body[data-store-theme="light"] .section-subtitle,
body[data-store-theme="light"] .cyber-subtitle,
body[data-store-theme="light"] span[class*="text-cyan-"],
body[data-store-theme="light"] span[class*="text-emerald-"],
body[data-store-theme="light"] span[class*="text-teal-"],
body[data-store-theme="light"] span[class*="text-[#00FFFF]"],
body[data-store-theme="light"] span[class*="text-[#00F0FF]"],
body[data-store-theme="light"] div:has(> h1.text-4xl) > span:first-child,
body[data-store-theme="light"] div:has(> h1) > span:first-child,
body[data-store-theme="light"] div:has(> h2.text-3xl) > span:first-child,
body[data-store-theme="light"] div:has(> h2[class*="font-black"]) > span {
    color: #475569 !important; /* لون رمادي داكن (Slate-600) مقروء ومريح للعين */
    font-weight: 800 !important;
    text-shadow: none !important; /* إزالة أي توهج خلفي قد يشوش النص */
    letter-spacing: 0.5px !important;
}

/* في حال كان الثيم الأصفر يطغى على هذا النص، نعالجه أيضاً */
body[data-store-theme="light"][data-theme="yellow"] div:has(> h2[class*="font-black"]) > span,
body[data-store-theme="light"][data-theme="yellow"] div:has(> h1) > span:first-child {
    color: #475569 !important;
}

/* ==========================================================================
   FORCE REMOVAL OF SIDEBAR & DRAWER AMBIENT BACKGROUND GLOW / COLOR EFFECTS
   ========================================================================== */
body::after,
.side-ambient-glow,
body[data-theme]::after,
body[data-theme] .side-ambient-glow,
aside div.border-r-2::before,
aside ul.list-none::before,
aside .sidebar-edge-border::before,
.sidebar-edge-border::before,
.sidebar-glow-backdrop,
aside::before,
aside::after,
.gaming-categories-sidebar::before,
.gaming-categories-sidebar::after {
    display: none !important;
    content: none !important;
    background: none !important;
    background-image: none !important;
    box-shadow: none !important;
    filter: none !important;
    opacity: 0 !important;
}

/* تحييد الظلال الملونة للأدراج الجانبية إلى ظلال داكنة طبيعية */
#mobile-menu-drawer,
#cart-drawer {
    box-shadow: -10px 0 25px rgba(0, 0, 0, 0.6) !important;
}

#wishlist-drawer {
    box-shadow: 10px 0 25px rgba(0, 0, 0, 0.6) !important;
}

#mobile-menu-drawer.translate-x-full,
#cart-drawer.translate-x-full,
#wishlist-drawer.-translate-x-full {
    box-shadow: none !important;
}

/* ==========================================================================
   CHECKOUT FIELDS FIX: REMOVE WRAPPER BORDERS & STYLE INPUTS ONLY
   ========================================================================== */

/* 1. تجريد الحاويات الخارجية (Wrappers/form-row) من أي إطارات أو خلفيات */
body[data-store-theme="light"] .checkout-container div:has(> input),
body[data-store-theme="light"] .checkout-container div:has(> select),
body[data-store-theme="light"] .checkout-container div:has(> textarea),
body[data-store-theme="light"] .checkout-container .form-row,
body[data-store-theme="light"] #checkout-form div:has(> input),
body[data-store-theme="light"] #checkout-form div:has(> select),
body[data-store-theme="light"] #checkout-form div:has(> textarea),
body[data-store-theme="light"] div:has(> input[type="tel"]),
body[data-store-theme="light"] div:has(> select[name="governorate"]),
body[data-store-theme="light"] div:has(> #cust-gov),
body[data-store-theme="light"] div:has(> #cust-name),
body[data-store-theme="light"] div:has(> #cust-phone),
body[data-store-theme="light"] div:has(> #cust-address),
body[data-store-theme="light"] div:has(> #cust-notes) {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* ==========================================================================
   CHECKOUT FIELDS: CYBERPUNK TACTICAL STYLE (LIGHT MODE)
   ========================================================================== */

/* تطبيق الطابع التكتيكي والزوايا المشطوفة لحقول الإدخال */
body[data-store-theme="light"] .checkout-container input[type="text"],
body[data-store-theme="light"] .checkout-container input[type="tel"],
body[data-store-theme="light"] .checkout-container input[type="email"],
body[data-store-theme="light"] .checkout-container select,
body[data-store-theme="light"] .checkout-container textarea,
body[data-store-theme="light"] #checkout-form input[type="text"],
body[data-store-theme="light"] #checkout-form input[type="tel"],
body[data-store-theme="light"] #checkout-form input[type="email"],
body[data-store-theme="light"] #checkout-form select,
body[data-store-theme="light"] #checkout-form textarea,
body[data-store-theme="light"] #cust-gov,
body[data-store-theme="light"] #cust-name,
body[data-store-theme="light"] #cust-phone,
body[data-store-theme="light"] #cust-address,
body[data-store-theme="light"] #cust-notes,
body[data-store-theme="light"] #checkout-coupon-input,
body[data-store-theme="light"] #billing_phone,
body[data-store-theme="light"] select[name="governorate"] {
    border-radius: 0 !important; /* إزالة الدوران العادي كلياً */
    background: #FFFFFF !important;
    border: 1px solid #CBD5E1 !important;
    border-right: 3px solid var(--hud-primary, #2563EB) !important; /* شريط تكتيكي جانبي بلون الثيم النشط */
    
    /* قصة السايبربانك (الزوايا المشطوفة من الأعلى يمين والأسفل يسار) */
    clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px) !important;
    
    box-shadow: inset 2px 2px 6px rgba(0, 0, 0, 0.03) !important;
    color: #0F172A !important;
    padding: 0.75rem 1rem !important;
    width: 100% !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease !important;
}

/* تأثير التفاعل (Focus / Hover) بالطابع التكتيكي */
body[data-store-theme="light"] .checkout-container input:focus,
body[data-store-theme="light"] .checkout-container select:focus,
body[data-store-theme="light"] .checkout-container textarea:focus,
body[data-store-theme="light"] .checkout-container input:hover,
body[data-store-theme="light"] #checkout-form input:focus,
body[data-store-theme="light"] #checkout-form select:focus,
body[data-store-theme="light"] #checkout-form textarea:focus,
body[data-store-theme="light"] #checkout-form input:hover,
body[data-store-theme="light"] #cust-gov:focus,
body[data-store-theme="light"] #cust-name:focus,
body[data-store-theme="light"] #cust-phone:focus,
body[data-store-theme="light"] #cust-address:focus,
body[data-store-theme="light"] #cust-notes:focus,
body[data-store-theme="light"] #cust-gov:hover,
body[data-store-theme="light"] #cust-name:hover,
body[data-store-theme="light"] #cust-phone:hover,
body[data-store-theme="light"] #cust-address:hover,
body[data-store-theme="light"] #cust-notes:hover {
    background: #F8FAFC !important;
    border-color: var(--hud-primary, #2563EB) !important;
    outline: none !important;
    box-shadow: inset 2px 2px 6px rgba(0, 0, 0, 0.05) !important;
}

/* 3. تأمين العناوين (Labels) لتبدو طبيعية وبدون خلفية */
body[data-store-theme="light"] .checkout-container label,
body[data-store-theme="light"] #checkout-form label {
    background: transparent !important;
    color: #475569 !important;
    border: none !important;
    padding: 0 !important;
    margin-bottom: 0.5rem !important;
    display: inline-block !important;
}

/* ==========================================================================
   GLOBAL LIGHT MODE: NEON COLORS PURGE (LINKS & TEXTS)
   ========================================================================== */

/* 1. إجبار كافة الروابط وزر [+] عرض المزيد داخل كروت المنتجات على استخدام أزرق داكن مقروء */
body[data-store-theme="light"] .product-card a,
body[data-store-theme="light"] .product-details a,
body[data-store-theme="light"] .woocommerce-loop-product__title ~ a,
body[data-store-theme="light"] a[class*="text-cyan-"],
body[data-store-theme="light"] a[class*="text-emerald-"],
body[data-store-theme="light"] a[class*="text-teal-"],
body[data-store-theme="light"] a[class*="text-[#00FFFF]"],
body[data-store-theme="light"] a[class*="text-[#00E5FF]"],
body[data-store-theme="light"] a[class*="text-[#00F0FF]"],
body[data-store-theme="light"] .hud-expand-toggle-btn,
body[data-store-theme="light"] .hud-expand-toggle-btn *,
body[data-store-theme="light"] button[class*="hud-expand-"] {
    color: #2563EB !important; /* أزرق ملكي داكن للروابط والأزرار التفاعلية */
    font-weight: 700 !important;
    text-shadow: none !important;
}

body[data-store-theme="light"] .product-card a:hover,
body[data-store-theme="light"] a[class*="text-cyan-"]:hover,
body[data-store-theme="light"] .hud-expand-toggle-btn:hover,
body[data-store-theme="light"] .hud-expand-toggle-btn:hover * {
    color: #1E3A8A !important;
    text-decoration: underline !important;
}

/* 2. تجريد أي نصوص عادية أو Spans من الألوان المشعة في كامل النظام النهاري */
body[data-store-theme="light"] span[class*="text-cyan-"],
body[data-store-theme="light"] span[class*="text-emerald-"],
body[data-store-theme="light"] span[class*="text-teal-"],
body[data-store-theme="light"] span[class*="text-[#00FFFF]"],
body[data-store-theme="light"] span[class*="text-[#00E5FF]"],
body[data-store-theme="light"] span[class*="text-[#00F0FF]"],
body[data-store-theme="light"] p[class*="text-cyan-"],
body[data-store-theme="light"] p[class*="text-emerald-"],
body[data-store-theme="light"] p[class*="text-teal-"],
body[data-store-theme="light"] div[class*="text-cyan-"],
body[data-store-theme="light"] div[class*="text-emerald-"],
body[data-store-theme="light"] div[class*="text-teal-"] {
    color: #475569 !important; /* رمادي داكن للنصوص العادية */
    text-shadow: none !important;
}

/* ==========================================================================
   GLOBAL SMOOTH ENGINE: TRANSITIONS & ANIMATIONS
   ========================================================================== */

/* 1. تمرير سلس للصفحة بالكامل */
html {
    scroll-behavior: smooth !important;
}

/* 2. نعومة تفاعلية خفيفة ومحددة للأزرار وحقول الإدخال دون إرهاق كروت المنتجات */
button, 
.hud-btn, 
.hud-tab-item,
.scroll-btn,
.nav-item {
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

input, 
select, 
textarea {
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* 3. نعومة توهج الهالات والخلفيات (Pseudo-elements) عند الهوفر */
.product-card::before,
.sale-card::before,
.package-card::before,
.dash-card::before,
.brand-card::before {
    transition: opacity 0.2s ease, border-color 0.2s ease, background 0.2s ease !important;
}

/* 4. حركات دخول التابات والنوافذ (Keyframes) - انزلاق ناعم للأعلى مع تلاشي */
@keyframes smoothFadeInUp {
    0% { 
        opacity: 0; 
        transform: translateY(8px) scale(0.99); 
    }
    100% { 
        opacity: 1; 
        transform: translateY(0) scale(1); 
    }
}

/* 5. تطبيق الحركة على التابات النشطة والنوافذ فقط (دون تعارض مع كروت المنتجات) */
.tab-content.active,
.tab-pane.active,
div[id^="view-"]:not(.hidden),
#sanad-dialog-modal:not(.hidden) #sanad-dialog-card,
#forgotPwdModal:not(.hidden) > div,
.checkout-container {
    animation: smoothFadeInUp 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

/* 6. نعومة الأيقونات التفاعلية المحددة فقط وتفادي استهداف جميع الـ SVG في الصفحة */
.scroll-btn svg,
.hud-select-arrow,
.wishlist-toggle-btn svg,
.hud-header-btn svg,
.btn-neon-cta svg {
    transition: color 0.15s ease, stroke 0.15s ease, transform 0.15s ease;
}

/* ==========================================================================
   PRODUCTS DISPLAY FIX: FULL WIDTH & HEALTHY GAPS
   ========================================================================== */

/* 1. إجبار الحاويات الرئيسية (أقسام المنتجات) على ملء الفراغ الأيسر بالكامل */
section:has(h2),
div:has(> .products-grid),
div:has(> ul.products),
.woocommerce-page .content-area,
.home-section-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
}

/* 2. فرض مسافة تنفس (Gap) بين الكروت في السلايدرات (Swiper/Slick) والشبكات المرنة */
.products-grid,
ul.products,
.swiper-wrapper,
.slick-track,
div:has(> .product-card) {
    gap: 1.5rem !important; /* مسافة 24 بكسل بين كل كرت */
    width: 100% !important;
    max-width: 100% !important;
}

/* 3. ضمان توزيع الكروت في الشبكات العادية (Grid) لملء الفراغ بشكل متساوٍ */
.products-grid:not(.swiper-wrapper):not(.slick-track),
ul.products:not(.swiper-wrapper):not(.slick-track) {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
    justify-content: start !important;
}

/* 4. منع انكماش الكروت داخل السلايدرات وضمان أخذها لحجمها الطبيعي */
.swiper-slide,
.slick-slide,
ul.products li.product {
    min-width: 240px !important;
    margin-left: 0 !important; /* نعتمد على الـ gap بدلاً من الهوامش العشوائية */
    margin-right: 0 !important;
}

/* 5. توسيط أزرار التحكم بالسلايدر (الأسهم في الأعلى) إن وجدت ودفعها للحافة */
.slider-controls,
div:has(> button > svg.lucide-chevron-left) {
    width: 100% !important;
    display: flex !important;
    justify-content: flex-end !important;
}

/* ==========================================================================
   HOMEPAGE HORIZONTAL SLIDERS: 5 CARDS PER VIEW (نافذة السلايدرات: 5 كروت في السطر)
   ========================================================================== */
#slider-latest,
#slider-bestsellers,
#slider-sales,
#slider-packages {
    container-type: inline-size !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 1rem !important; /* 16px */
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    box-sizing: border-box !important;
    padding-left: 2px !important;
    padding-right: 2px !important;
}

/* شاشات الموبايل (أقل من 600px): بطاقات تمرير مريحة */
@media (max-width: 599px) {
    #slider-latest .product-card,
    #slider-bestsellers .product-card,
    #slider-sales .product-card,
    #slider-packages .product-card {
        flex: 0 0 240px !important;
        width: 240px !important;
        min-width: 240px !important;
        max-width: 240px !important;
    }
}

/* شاشات التابلت الصغيرة (600px - 767px): 3 كروت في السطر */
@media (min-width: 600px) and (max-width: 767px) {
    #slider-latest .product-card,
    #slider-bestsellers .product-card,
    #slider-sales .product-card,
    #slider-packages .product-card {
        flex: 0 0 calc((100cqw - 2rem) / 3) !important;
        width: calc((100cqw - 2rem) / 3) !important;
        min-width: 180px !important;
        max-width: calc((100cqw - 2rem) / 3) !important;
    }
}

/* شاشات التابلت المتوسطة (768px - 991px): 4 كروت في السطر */
@media (min-width: 768px) and (max-width: 991px) {
    #slider-latest .product-card,
    #slider-bestsellers .product-card,
    #slider-sales .product-card,
    #slider-packages .product-card {
        flex: 0 0 calc((100cqw - 3rem) / 4) !important;
        width: calc((100cqw - 3rem) / 4) !important;
        min-width: 175px !important;
        max-width: calc((100cqw - 3rem) / 4) !important;
    }
}

/* شاشات الديسكتوب واللابتوب (992px وما فوق): 5 كروت في السطر الواحد بدقة متناهية */
@media (min-width: 992px) {
    #slider-latest .product-card,
    #slider-bestsellers .product-card,
    #slider-sales .product-card,
    #slider-packages .product-card {
        flex: 0 0 calc((100cqw - 4rem) / 5) !important;
        width: calc((100cqw - 4rem) / 5) !important;
        min-width: 170px !important; /* حماية مطلقة تمنع انكماش الكرت نهائياً */
        max-width: calc((100cqw - 4rem) / 5) !important;
        padding: 0.85rem !important;
        box-sizing: border-box !important;
    }

    #slider-latest .product-card .hud-quantity-stepper,
    #slider-bestsellers .product-card .hud-quantity-stepper,
    #slider-sales .product-card .hud-quantity-stepper,
    #slider-packages .product-card .hud-quantity-stepper {
        height: 36px !important;
        display: inline-flex !important;
        align-items: center !important;
    }

    #slider-latest .product-card .hud-quantity-stepper .qty-btn,
    #slider-bestsellers .product-card .hud-quantity-stepper .qty-btn,
    #slider-sales .product-card .hud-quantity-stepper .qty-btn,
    #slider-packages .product-card .hud-quantity-stepper .qty-btn {
        width: 24px !important;
        height: 100% !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    #slider-latest .product-card .hud-quantity-stepper .qty-input,
    #slider-bestsellers .product-card .hud-quantity-stepper .qty-input,
    #slider-sales .product-card .hud-quantity-stepper .qty-input,
    #slider-packages .product-card .hud-quantity-stepper .qty-input {
        width: 26px !important;
        height: 100% !important;
        padding: 0 !important;
        text-align: center !important;
    }

    #slider-latest .product-card .add-to-cart-btn,
    #slider-bestsellers .product-card .add-to-cart-btn,
    #slider-sales .product-card .add-to-cart-btn,
    #slider-packages .product-card .add-to-cart-btn {
        font-size: 0.8rem !important;
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
        white-space: nowrap !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}

/* Fallback للأجهزة أو المتصفحات التي لا تدعم container queries */
@supports not (container-type: inline-size) {
    @media (min-width: 992px) {
        #slider-latest .product-card,
        #slider-bestsellers .product-card,
        #slider-sales .product-card,
        #slider-packages .product-card {
            flex: 0 0 230px !important;
            width: 230px !important;
            min-width: 230px !important;
            max-width: 230px !important;
        }
    }
}

/* ==========================================================================
   VIEW TOGGLE FADE ENGINE: SMOOTH FADE OUT & FADE IN (تلاشي وظهور ناعم)
   ========================================================================== */

/* 1. حركة الظهور التدريجي الانسيابية */
@keyframes smoothFadeInLayout {
    0% {
        opacity: 0;
        transform: translateY(6px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

#products-container,
#all-products-grid,
#packages-grid,
#orders-container {
    transition: opacity 0.18s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* مرحلة التلاشي السلس عند النقر للتبديل (Fade Out) */
.view-fading-out {
    opacity: 0 !important;
    transform: translateY(-4px) !important;
    pointer-events: none !important;
}

/* مرحلة الظهور السلس بعد اكتمال التبديل (Fade In) */
.view-fading-in {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* 2. انسيابية أزرار تبديل العرض (Grid / List Buttons) والتلاشي السريع */
.list-view,
.grid-view {
    transition: opacity 0.16s ease !important;
}

/* 3. كروت المنتجات عند مرور الماوس في وضع القائمة (Dark Mode) بدون أي هالة */
.list-view .product-card:hover,
.list-view .package-card:hover,
.orders-list-view .order-card:hover {
    z-index: 25 !important;
    transform: translateY(-3px) translateX(-4px) !important;
    border-color: var(--hud-primary) !important;
    filter: none !important;
    box-shadow: none !important;
}

[dir="ltr"] .list-view .product-card:hover,
[dir="ltr"] .list-view .package-card:hover,
[dir="ltr"] .orders-list-view .order-card:hover {
    transform: translateY(-3px) translateX(4px) !important;
}

.list-view .product-card:hover::before,
.list-view .package-card:hover::before {
    border-color: var(--hud-primary) !important;
    filter: none !important;
    box-shadow: none !important;
}

/* كروت التخفيضات في وضع القائمة بدون أي هالة */
.list-view .product-card.sale-card:hover,
.list-view .sale-card:hover {
    border-color: #EF4444 !important;
    filter: none !important;
    box-shadow: none !important;
}

.list-view .product-card.sale-card:hover::before,
.list-view .sale-card:hover::before {
    border-color: #EF4444 !important;
    filter: none !important;
    box-shadow: none !important;
}

/* 4. كروت المنتجات عند مرور الماوس في وضع القائمة (Light Mode) بدون أي هالة */
body[data-store-theme="light"] .list-view .product-card:hover,
body[data-store-theme="light"] .list-view .package-card:hover,
body[data-dash-theme="light"] .orders-list-view .order-card:hover {
    z-index: 25 !important;
    transform: translateY(-3px) translateX(-4px) !important;
    border-color: var(--hud-primary, #2563EB) !important;
    filter: none !important;
    box-shadow: none !important;
}

[dir="ltr"] body[data-store-theme="light"] .list-view .product-card:hover,
[dir="ltr"] body[data-store-theme="light"] .list-view .package-card:hover,
[dir="ltr"] body[data-dash-theme="light"] .orders-list-view .order-card:hover {
    transform: translateY(-3px) translateX(4px) !important;
}

body[data-store-theme="light"] .list-view .product-card:hover::before,
body[data-store-theme="light"] .list-view .package-card:hover::before {
    border-color: var(--hud-primary, #2563EB) !important;
    filter: none !important;
    box-shadow: none !important;
}

body[data-store-theme="light"] .list-view .product-card.sale-card:hover,
body[data-store-theme="light"] .list-view .sale-card:hover {
    border-color: #DC2626 !important;
    filter: none !important;
    box-shadow: none !important;
}

body[data-store-theme="light"] .list-view .product-card.sale-card:hover::before,
body[data-store-theme="light"] .list-view .sale-card:hover::before {
    border-color: #DC2626 !important;
    filter: none !important;
    box-shadow: none !important;
}

/* 5. انسيابية أزرار تبديل العرض (Grid / List Buttons) */
#btn-grid,
#btn-list {
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1),
                background-color 0.2s ease,
                filter 0.2s ease !important;
}

#btn-grid:hover,
#btn-list:hover {
    will-change: transform, filter;
    filter: drop-shadow(0 0 8px var(--hud-glow, rgba(0, 64, 255, 0.4))) !important;
    transform: translateY(-1px) scale(1.05) !important;
}

/* ==========================================================================
   PACKAGE CARDS & PACKAGES WINDOW: EXACT GLOW & AMBIENT AURA PARITY
   مطابقة تامة وشاملة لتوهج وهالة كروت نافذة البكجات مع كروت نافذة المنتجات
   ========================================================================== */

/* 1. تجريد كروت البكجات من القص والتأطير المربع لتمكين الهالة الضوئية الخارجية */
.package-card,
#packages-grid .package-card,
#slider-packages .product-card,
#slider-packages .package-card {
    isolation: isolate !important;
    clip-path: none !important;
    background: transparent !important;
    border-color: transparent !important;
    border-width: 0 !important;
    position: relative !important;
    z-index: 5 !important;
}

/* 2. رسم شكل الشطف التكتيكي لكروت البكجات بالخلفية الزائفة بالضبط مثل كروت المنتجات */
.package-card::before,
#packages-grid .package-card::before,
#slider-packages .product-card::before,
#slider-packages .package-card::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: var(--surface-2, #141414) !important;
    border: 1px solid var(--border-dim, #333) !important;
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px) !important;
    z-index: 0 !important;
    pointer-events: none !important;
    transition: border-color 0.35s cubic-bezier(0.16, 1, 0.3, 1), 
                background 0.35s ease !important;
}

/* 3. توهج وهالة كروت البكجات عند التمرير (الوضع الداكن - Dark Mode) - مطابقة 100% لكروت المنتجات */
/* 3. كروت البكجات عند التمرير بدون أي هالة خلفية (Dark Mode) */
.package-card:hover,
#packages-grid .package-card:hover,
#slider-packages .product-card:hover,
#slider-packages .package-card:hover {
    z-index: 20 !important;
    transform: translateY(-4px) !important;
    border-color: var(--hud-primary) !important;
    filter: none !important;
    box-shadow: none !important;
}

.package-card:hover::before,
#packages-grid .package-card:hover::before,
#slider-packages .product-card:hover::before,
#slider-packages .package-card:hover::before {
    border-color: var(--hud-primary) !important;
    filter: none !important;
    box-shadow: none !important;
}

/* 4. كروت البكجات عند التمرير بدون أي هالة خلفية (الوضع النهاري - Light Mode) */
body[data-store-theme="light"] .package-card::before,
body[data-store-theme="light"] #packages-grid .package-card::before,
body[data-store-theme="light"] #slider-packages .product-card::before,
body[data-store-theme="light"] #slider-packages .package-card::before {
    background-color: #FFFFFF !important;
    border-color: #CBD5E1 !important;
    filter: none !important;
    box-shadow: none !important;
}

body[data-store-theme="light"] .package-card:hover,
body[data-store-theme="light"] #packages-grid .package-card:hover,
body[data-store-theme="light"] #slider-packages .product-card:hover,
body[data-store-theme="light"] #slider-packages .package-card:hover {
    z-index: 20 !important;
    transform: translateY(-4px) !important;
    border-color: var(--hud-primary) !important;
    filter: none !important;
    box-shadow: none !important;
}

body[data-store-theme="light"] .package-card:hover::before,
body[data-store-theme="light"] #packages-grid .package-card:hover::before,
body[data-store-theme="light"] #slider-packages .product-card:hover::before,
body[data-store-theme="light"] #slider-packages .package-card:hover::before {
    border-color: var(--hud-primary) !important;
    filter: none !important;
    box-shadow: none !important;
}

/* 5. توفير مساحة تنفس لحاويات البكجات حتى لا تنقص الهالة المتوهجة عند الأطراف */
#packages-grid,
#grid-sales-packages {
    overflow: visible !important;
    padding-top: 24px !important;
    padding-bottom: 28px !important;
}



/* ==========================================================================
   SALE CARDS & SALES WINDOW: EXACT GLOW & AMBIENT AURA PARITY
   مطابقة تامة وشاملة لتوهج وهالة كروت نافذة التخفيضات مع كروت نافذة المنتجات
   ========================================================================== */

/* 1. تجريد كروت التخفيضات من القص والتأطير المربع لتمكين الهالة الضوئية الخارجية */
.sale-card,
#grid-sales-products .sale-card,
#grid-sales-packages .sale-card,
#slider-sales .product-card.sale-card,
#slider-sales .sale-card {
    isolation: isolate !important;
    clip-path: none !important;
    background: transparent !important;
    border-color: transparent !important;
    border-width: 0 !important;
    position: relative !important;
    z-index: 5 !important;
}

/* 2. رسم شكل الشطف التكتيكي لكروت التخفيضات بالخلفية الزائفة بالضبط مثل كروت المنتجات */
.sale-card::before,
#grid-sales-products .sale-card::before,
#grid-sales-packages .sale-card::before,
#slider-sales .product-card.sale-card::before,
#slider-sales .sale-card::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: var(--surface-2, #141414) !important;
    border: 1px solid var(--border-dim, #333) !important;
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px) !important;
    z-index: 0 !important;
    pointer-events: none !important;
    transition: border-color 0.35s cubic-bezier(0.16, 1, 0.3, 1), 
                background 0.35s ease !important;
}

/* 3. كروت التخفيضات عند التمرير بدون أي هالة خلفية (الوضع الداكن - Dark Mode) */
.sale-card:hover,
#grid-sales-products .sale-card:hover,
#grid-sales-packages .sale-card:hover,
#slider-sales .product-card.sale-card:hover,
#slider-sales .sale-card:hover {
    z-index: 20 !important;
    transform: translateY(-4px) !important;
    border-color: #EF4444 !important;
    filter: none !important;
    box-shadow: none !important;
}

.sale-card:hover::before,
#grid-sales-products .sale-card:hover::before,
#grid-sales-packages .sale-card:hover::before,
#slider-sales .product-card.sale-card:hover::before,
#slider-sales .sale-card:hover::before {
    border-color: #EF4444 !important;
    filter: none !important;
    box-shadow: none !important;
}

/* 4. كروت التخفيضات عند التمرير بدون أي هالة خلفية (الوضع النهاري - Light Mode) */
body[data-store-theme="light"] .sale-card::before,
body[data-store-theme="light"] #grid-sales-products .sale-card::before,
body[data-store-theme="light"] #grid-sales-packages .sale-card::before,
body[data-store-theme="light"] #slider-sales .product-card.sale-card::before,
body[data-store-theme="light"] #slider-sales .sale-card::before {
    background-color: #FFFFFF !important;
    border-color: #CBD5E1 !important;
    filter: none !important;
    box-shadow: none !important;
}

body[data-store-theme="light"] .sale-card:hover,
body[data-store-theme="light"] #grid-sales-products .sale-card:hover,
body[data-store-theme="light"] #grid-sales-packages .sale-card:hover,
body[data-store-theme="light"] #slider-sales .product-card.sale-card:hover,
body[data-store-theme="light"] #slider-sales .sale-card:hover {
    z-index: 20 !important;
    transform: translateY(-4px) !important;
    border-color: #DC2626 !important;
    filter: none !important;
    box-shadow: none !important;
}

body[data-store-theme="light"] .sale-card:hover::before,
body[data-store-theme="light"] #grid-sales-products .sale-card:hover::before,
body[data-store-theme="light"] #grid-sales-packages .sale-card:hover::before,
body[data-store-theme="light"] #slider-sales .product-card.sale-card:hover::before,
body[data-store-theme="light"] #slider-sales .sale-card:hover::before {
    border-color: #DC2626 !important;
    filter: none !important;
    box-shadow: none !important;
}

/* 5. توفير مساحة تنفس لحاويات شبكة التخفيضات لمنع انقصاص الهالة */
#grid-sales-products,
#grid-sales-packages {
    overflow: visible !important;
    padding-top: 24px !important;
    padding-bottom: 28px !important;
}



/* ==========================================================================
   SIDE NAVIGATION BUTTONS FOR HORIZONTAL SLIDERS (أزرار التنقل يمين ويسار أشرطة الكروت)
   ========================================================================== */
.scroll-btn-side,
.scroll-btn-prev,
.scroll-btn-next {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 40 !important;
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.7) !important;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease, border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease !important;
    pointer-events: auto !important;
}

/* التموضع الأفقي المتجاوب: حاشية أمان مريحة تبعد الأزرار عن حواف الشاشة وتمنع انقطاعها */
.scroll-btn-prev {
    right: 10px !important;
}
.scroll-btn-next {
    left: 10px !important;
}

@media (min-width: 640px) {
    .scroll-btn-prev {
        right: 16px !important;
    }
    .scroll-btn-next {
        left: 16px !important;
    }
}

@media (min-width: 1024px) {
    .scroll-btn-prev {
        right: 24px !important;
    }
    .scroll-btn-next {
        left: 24px !important;
    }
}

/* تأثير التكبير والتوهج عند التمرير بالماوس */
.scroll-btn-side:hover,
.scroll-btn-prev:hover,
.scroll-btn-next:hover {
    transform: translateY(-50%) scale(1.15) !important;
}

.scroll-btn-side:active,
.scroll-btn-prev:active,
.scroll-btn-next:active {
    transform: translateY(-50%) scale(0.92) !important;
}

/* الوضع النهاري (Light Mode) للأزرار الجانبية */
body[data-store-theme="light"] .scroll-btn-side,
body[data-store-theme="light"] .scroll-btn-prev,
body[data-store-theme="light"] .scroll-btn-next {
    background: #FFFFFF !important;
    background-color: #FFFFFF !important;
    border: 1px solid #CBD5E1 !important;
    color: #0F172A !important;
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.15) !important;
}

body[data-store-theme="light"] .scroll-btn-side:hover,
body[data-store-theme="light"] .scroll-btn-prev:hover,
body[data-store-theme="light"] .scroll-btn-next:hover {
    background: #F8FAFC !important;
    border-color: var(--hud-primary, #0284C7) !important;
    color: var(--hud-primary, #0284C7) !important;
    box-shadow: 0 6px 24px rgba(15, 23, 42, 0.22) !important;
}

/* ==========================================================================
   CHECKOUT PAGE COMPACT TOP SPACING (اختصار المسافة العلوية لصفحة إتمام الطلب)
   ========================================================================== */
body.page-template-page-checkout main,
main:has(#checkout-content) {
    padding-top: 0.75rem !important; /* 12px */
}


/* ==========================================================================
   BRAND CARDS & BRANDS WINDOW: EXACT GLOW & AMBIENT AURA PARITY
   مطابقة تامة وشاملة لتوهج وهالة كروت نافذة البراندات مع كروت نافذة المنتجات
   ========================================================================== */

/* 1. تجريد كروت البراندات من القص والتأطير المربع لتمكين الهالة الضوئية الخارجية */
.brand-card,
.brand-item-box,
#brands-grid .brand-card {
    isolation: isolate !important;
    clip-path: none !important;
    background: transparent !important;
    border-color: transparent !important;
    border-width: 0 !important;
    position: relative !important;
    z-index: 5 !important;
}

/* 2. رسم شكل الشطف التكتيكي لكروت البراندات بالخلفية الزائفة بالضبط مثل كروت المنتجات */
.brand-card::before,
.brand-item-box::before,
#brands-grid .brand-card::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: var(--surface-2, #141414) !important;
    border: 1px solid var(--border-dim, #333) !important;
    clip-path: polygon(15px 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%, 0 15px) !important;
    z-index: 0 !important;
    pointer-events: none !important;
    transition: border-color 0.35s cubic-bezier(0.16, 1, 0.3, 1), 
                background 0.35s ease !important;
}

/* رفع محتويات كرت البراند فوق الخلفية الزائفة */
.brand-card > *:not(.brand-count):not([class*="absolute"]) {
    position: relative !important;
    z-index: 2 !important;
}

.brand-card > .brand-count,
.brand-card > [class*="absolute"] {
    position: absolute !important;
    z-index: 10 !important;
}

/* 3. كروت البراندات عند التمرير بدون أي هالة خلفية (الوضع الداكن - Dark Mode) */
.brand-card:hover,
.brand-item-box:hover,
#brands-grid .brand-card:hover {
    z-index: 20 !important;
    transform: translateY(-4px) !important;
    border-color: var(--hud-primary) !important;
    filter: none !important;
    box-shadow: none !important;
}

.brand-card:hover::before,
.brand-item-box:hover::before,
#brands-grid .brand-card:hover::before {
    border-color: var(--hud-primary) !important;
    filter: none !important;
    box-shadow: none !important;
}

/* 4. كروت البراندات عند التمرير بدون أي هالة خلفية (الوضع النهاري - Light Mode) */
body[data-store-theme="light"] .brand-card::before,
body[data-store-theme="light"] .brand-item-box::before,
body[data-store-theme="light"] #brands-grid .brand-card::before {
    background-color: #FFFFFF !important;
    border-color: #CBD5E1 !important;
    filter: none !important;
    box-shadow: none !important;
}

body[data-store-theme="light"] .brand-card:hover,
body[data-store-theme="light"] .brand-item-box:hover,
body[data-store-theme="light"] #brands-grid .brand-card:hover {
    z-index: 20 !important;
    transform: translateY(-4px) !important;
    border-color: var(--hud-primary) !important;
    filter: none !important;
    box-shadow: none !important;
}

body[data-store-theme="light"] .brand-card:hover::before,
body[data-store-theme="light"] .brand-item-box:hover::before,
body[data-store-theme="light"] #brands-grid .brand-card:hover::before {
    border-color: var(--hud-primary) !important;
    filter: none !important;
    box-shadow: none !important;
}

/* 5. توفير مساحة تنفس لحاوية شبكة البراندات حتى لا تنقص الهالة المتوهجة عند الأطراف */
#brands-grid {
    overflow: visible !important;
    padding-top: 24px !important;
    padding-bottom: 28px !important;
}



/* ==========================================================================
   CYBERPUNK HUD HEADER BUTTONS ENGINE (أزرار الهيدر بأسلوب سايبر بانك تكتيكي)
   ========================================================================== */

/* 1. التأسيس التكتيكي المشترك لجميع أزرار الهيدر: شطف تكتيكي، ألوان HUD، وسلاسة الحركة */
.hud-header-btn,
header button:not(.search-submit-btn),
header a.h-9,
#storeThemeToggle,
#hudAudioToggle,
#wishlist-open-btn,
#cart-open-btn,
#mobile-menu-open-btn {
    position: relative !important;
    border-radius: 0 !important;
    clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px) !important;
    background: rgba(18, 20, 29, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    color: #CBD5E1 !important;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
                filter 0.2s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.2s ease,
                background-color 0.2s ease,
                color 0.2s ease !important;
    filter: drop-shadow(0 0 0px transparent);
}

/* 2. حالة التمرير الليزرية السلسة في الوضع الداكن (Dark Mode Hover) */
.hud-header-btn:hover,
header button:not(.search-submit-btn):hover,
header a.h-9:hover,
#storeThemeToggle:hover,
#hudAudioToggle:hover,
#wishlist-open-btn:hover,
#cart-open-btn:hover,
#mobile-menu-open-btn:hover {
    z-index: 20 !important;
    transform: translateY(-2px) !important;
    will-change: transform, filter;
    border-color: var(--hud-primary) !important;
    background: rgba(26, 29, 42, 0.95) !important;
    color: #FFFFFF !important;
    filter: drop-shadow(0 0 10px var(--hud-glow, rgba(255, 0, 229, 0.45))) 
            drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5)) !important;
}

.hud-header-btn:hover svg,
header button:not(.search-submit-btn):hover svg,
#cart-open-btn:hover svg,
#mobile-menu-open-btn:hover svg {
    stroke: var(--hud-primary) !important;
    transition: stroke 0.3s ease;
}

/* زر المفضلة: توهج ليزري وردي/أحمر مميز عند الهوفر */
#wishlist-open-btn:hover svg {
    stroke: #FF1E56 !important;
    color: #FF1E56 !important;
}
#wishlist-open-btn:hover {
    border-color: #FF1E56 !important;
    filter: drop-shadow(0 0 10px rgba(255, 30, 86, 0.5)) !important;
}

/* زر الصوت: نقطة المؤشر تتوهج بنعومة عند التفعيل */
#hudAudioToggle #hudAudioDot {
    transition: background-color 0.2s ease, box-shadow 0.2s ease !important;
}
#hudAudioToggle:hover #hudAudioDot {
    box-shadow: 0 0 8px var(--hud-primary) !important;
}

/* عداد السلة التكتيكي المشطوف */
#cart-count,
.hud-cart-count {
    clip-path: polygon(3px 0, 100% 0, 100% calc(100% - 3px), calc(100% - 3px) 100%, 0 100%, 0 3px) !important;
    border-radius: 0 !important;
    background: var(--hud-primary) !important;
    box-shadow: 0 0 8px var(--hud-glow) !important;
}

/* 3. أزرار الهيدر في الوضع النهاري (Cyber Lab Light Mode) */
body[data-store-theme="light"] .hud-header-btn,
body[data-store-theme="light"] header button:not(.search-submit-btn),
body[data-store-theme="light"] header a.h-9,
body[data-store-theme="light"] #storeThemeToggle,
body[data-store-theme="light"] #hudAudioToggle,
body[data-store-theme="light"] #wishlist-open-btn,
body[data-store-theme="light"] #cart-open-btn,
body[data-store-theme="light"] #mobile-menu-open-btn {
    background: #FFFFFF !important;
    border: 1px solid #CBD5E1 !important;
    color: #334155 !important;
    filter: drop-shadow(0 0 0px transparent);
}

body[data-store-theme="light"] .hud-header-btn:hover,
body[data-store-theme="light"] header button:not(.search-submit-btn):hover,
body[data-store-theme="light"] header a.h-9:hover,
body[data-store-theme="light"] #storeThemeToggle:hover,
body[data-store-theme="light"] #hudAudioToggle:hover,
body[data-store-theme="light"] #wishlist-open-btn:hover,
body[data-store-theme="light"] #cart-open-btn:hover,
body[data-store-theme="light"] #mobile-menu-open-btn:hover {
    z-index: 20 !important;
    transform: translateY(-2px) !important;
    background: #F8FAFC !important;
    border-color: var(--hud-primary, #2563EB) !important;
    color: var(--hud-primary, #1D4ED8) !important;
    filter: drop-shadow(0 0 8px var(--hud-glow, rgba(37, 99, 235, 0.28))) 
            drop-shadow(0 2px 6px rgba(15, 23, 42, 0.08)) !important;
}

body[data-store-theme="light"] .hud-header-btn:hover svg,
body[data-store-theme="light"] header button:not(.search-submit-btn):hover svg {
    stroke: var(--hud-primary, #2563EB) !important;
}

body[data-store-theme="light"] #wishlist-open-btn:hover svg {
    stroke: #DC2626 !important;
    color: #DC2626 !important;
}
body[data-store-theme="light"] #wishlist-open-btn:hover {
    border-color: #DC2626 !important;
    filter: drop-shadow(0 0 8px rgba(220, 38, 38, 0.3)) !important;
}

/* 4. روابط التنقل في وسط الهيدر - شطف تكتيكي ناعم وانسيابي */
header nav a.hud-nav-link {
    transition: background-color 0.2s ease, color 0.2s ease, filter 0.2s ease !important;
    clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px) !important;
    border-radius: 0 !important;
}

header nav a.hud-nav-link:hover,
header nav a.hud-nav-link.active {
    background: rgba(255, 255, 255, 0.06) !important;
    color: #FFFFFF !important;
    filter: drop-shadow(0 0 6px var(--hud-glow)) !important;
}

body[data-store-theme="light"] header nav a.hud-nav-link:hover,
body[data-store-theme="light"] header nav a.hud-nav-link.active {
    background: #EFF6FF !important;
    color: var(--hud-primary, #1D4ED8) !important;
}

/* ==========================================================================
   CHECKOUT ORDER SUMMARY: SMOOTH SCROLLABLE PRODUCTS CONTAINER
   حاوية ملخص الطلب: سكرول تكتيكي انسيابي لعرض وتصفح كافة المنتجات
   ========================================================================== */

#checkout-items-list,
.checkout-items-scroll {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important; /* 12px */
    max-height: 165px !important; /* حصر الارتفاع ليظهر أول كرتين مع تفعيل السكرول بشكل فوري ودائم */
    overflow-y: scroll !important; /* إجبار ظهور شريط التمرير دائماً وبشكل مرئي */
    overflow-x: hidden !important;
    padding-left: 12px !important;
    padding-right: 4px !important;
    margin-bottom: 1.5rem !important;
    scroll-behavior: smooth !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: thin !important;
    scrollbar-color: var(--hud-primary, #FF00E5) rgba(255, 255, 255, 0.08) !important;
}

/* منع انكماش كروت المنتجات داخل السكرول لضمان ظهورها بحجمها الطبيعي */
#checkout-items-list > div,
.checkout-items-scroll > div,
.checkout-summary-item {
    flex-shrink: 0 !important;
    min-height: fit-content !important;
    width: 100% !important;
}

/* شريط تمرير سيبراني مخصص ومميز للوضع الداكن (Dark Mode) */
#checkout-items-list::-webkit-scrollbar,
.checkout-items-scroll::-webkit-scrollbar {
    width: 7px !important;
    display: block !important;
}

#checkout-items-list::-webkit-scrollbar-track,
.checkout-items-scroll::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.08) !important;
    border-radius: 4px !important;
}

#checkout-items-list::-webkit-scrollbar-thumb,
.checkout-items-scroll::-webkit-scrollbar-thumb {
    background: var(--hud-primary, #FF00E5) !important;
    border-radius: 4px !important;
    box-shadow: 0 0 8px var(--hud-glow, rgba(255, 0, 229, 0.5)) !important;
}

#checkout-items-list::-webkit-scrollbar-thumb:hover,
.checkout-items-scroll::-webkit-scrollbar-thumb:hover {
    background: #00E5FF !important;
}

/* شريط التمرير للوضع النهاري (Light Mode) */
body[data-store-theme="light"] #checkout-items-list,
body[data-store-theme="light"] .checkout-items-scroll {
    scrollbar-color: #2563EB #E2E8F0 !important;
}

body[data-store-theme="light"] #checkout-items-list::-webkit-scrollbar-track,
body[data-store-theme="light"] .checkout-items-scroll::-webkit-scrollbar-track {
    background: #E2E8F0 !important;
    border: 1px solid #CBD5E1 !important;
    border-radius: 4px !important;
}

body[data-store-theme="light"] #checkout-items-list::-webkit-scrollbar-thumb,
body[data-store-theme="light"] .checkout-items-scroll::-webkit-scrollbar-thumb {
    background: #2563EB !important;
    border-radius: 4px !important;
    box-shadow: 0 0 6px rgba(37, 99, 235, 0.45) !important;
}

body[data-store-theme="light"] #checkout-items-list::-webkit-scrollbar-thumb:hover,
body[data-store-theme="light"] .checkout-items-scroll::-webkit-scrollbar-thumb:hover {
    background: #1D4ED8 !important;
}

/* ==========================================================================
   MINI-CART ITEMS: STRICT LIGHT MODE ENFORCEMENT
   ========================================================================== */

/* 1. إجبار خلفية كروت المنتجات داخل السلة الجانبية على اللون الأبيض */
body[data-store-theme="light"] .widget_shopping_cart_content ul.cart_list li,
body[data-store-theme="light"] .cart-drawer li,
body[data-store-theme="light"] div:has(> h3:contains("سلة المشتريات")) ~ div li,
body[data-store-theme="light"] div:has(> h3:contains("سلة المشتريات")) ~ div div[class*="bg-[#"],
body[data-store-theme="light"] div:has(> span:contains("سلة المشتريات")) ~ div li,
body[data-store-theme="light"] div:has(> span:contains("سلة المشتريات")) ~ div div:has(> img) {
    background-color: #FFFFFF !important;
    background: #FFFFFF !important;
    border: 1px solid #CBD5E1 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
    border-radius: 0.5rem !important;
}

/* 2. إجبار كافة النصوص داخل هذه الكروت على اللون الداكن */
body[data-store-theme="light"] .widget_shopping_cart_content ul.cart_list li *,
body[data-store-theme="light"] div:has(> span:contains("سلة المشتريات")) ~ div li *,
body[data-store-theme="light"] div:has(> h3:contains("سلة المشتريات")) ~ div li * {
    color: #0F172A !important;
    text-shadow: none !important;
}

/* 3. تخفيف لون النصوص الفرعية (مثل "منتج معتمد") */
body[data-store-theme="light"] div:has(> span:contains("سلة المشتريات")) ~ div li span[class*="text-slate-"],
body[data-store-theme="light"] div:has(> span:contains("سلة المشتريات")) ~ div li span[class*="text-gray-"] {
    color: #475569 !important;
    font-weight: 600 !important;
}

/* 4. تخصيص أزرار وحقول الكمية داخل كروت السلة */
body[data-store-theme="light"] div:has(> span:contains("سلة المشتريات")) ~ div li input,
body[data-store-theme="light"] div:has(> span:contains("سلة المشتريات")) ~ div li button[class*="bg-"] {
    background-color: #F8FAFC !important;
    background: #F8FAFC !important;
    border: 1px solid #CBD5E1 !important;
    color: #0F172A !important;
}

/* 5. زر الإغلاق/الحذف (x) */
body[data-store-theme="light"] .widget_shopping_cart_content ul.cart_list li a.remove,
body[data-store-theme="light"] div:has(> span:contains("سلة المشتريات")) ~ div li button:contains("×") {
    color: #64748B !important;
    background: transparent !important;
    border: none !important;
}

body[data-store-theme="light"] .widget_shopping_cart_content ul.cart_list li a.remove:hover,
body[data-store-theme="light"] div:has(> span:contains("سلة المشتريات")) ~ div li button:contains("×"):hover {
    color: #E11D48 !important; /* لون أحمر للتنبيه */
    background: transparent !important;
}

/* ==========================================================================
   MINI-CART DOM DIRECT OVERRIDE (FOR BROWSERS & DYNAMIC AJAX RENDERING)
   ضمان إخضاع كروت درج السلة الحقيقية (#cart-drawer & #cart-items-container)
   ========================================================================== */

/* إجبار هيكل السلة وجميع كروت المنتجات المولدة بالجافاسكريبت على اللون الأبيض */
body[data-store-theme="light"] #cart-drawer,
body[data-store-theme="light"] .cart-drawer {
    background-color: #FFFFFF !important;
    background: #FFFFFF !important;
    border-left-color: #E2E8F0 !important;
}

body[data-store-theme="light"] #cart-drawer > div:first-child,
body[data-store-theme="light"] #cart-drawer > div:last-child {
    background-color: #FFFFFF !important;
    background: #FFFFFF !important;
    border-color: #E2E8F0 !important;
}

body[data-store-theme="light"] #cart-drawer h2,
body[data-store-theme="light"] #cart-drawer h2 * {
    color: #0F172A !important;
}

/* كروت المنتجات داخل السلة الديناميكية */
body[data-store-theme="light"] #cart-items-container > div,
body[data-store-theme="light"] #cart-drawer #cart-items-container > div,
body[data-store-theme="light"] #cart-items-container div[class*="bg-[#181818]"],
body[data-store-theme="light"] #cart-drawer div[class*="bg-[#181818]"] {
    background-color: #FFFFFF !important;
    background: #FFFFFF !important;
    border: 1px solid #CBD5E1 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
    border-radius: 0.5rem !important;
    clip-path: none !important;
}

/* إطار صورة المنتج داخل السلة */
body[data-store-theme="light"] #cart-items-container div:has(> img),
body[data-store-theme="light"] #cart-items-container div[class*="bg-[#101010]"],
body[data-store-theme="light"] #cart-drawer div:has(> img) {
    background-color: #F8FAFC !important;
    background: #F8FAFC !important;
    border: 1px solid #E2E8F0 !important;
}

/* نصوص كروت السلة */
body[data-store-theme="light"] #cart-items-container *,
body[data-store-theme="light"] #cart-drawer #cart-items-container * {
    color: #0F172A !important;
    text-shadow: none !important;
}

body[data-store-theme="light"] #cart-items-container h4,
body[data-store-theme="light"] #cart-drawer #cart-items-container h4 {
    color: #0F172A !important;
    font-weight: 700 !important;
}

/* النصوص الفرعية والبراند (مثل "منتج معتمد") */
body[data-store-theme="light"] #cart-items-container span.text-\[\#00F0FF\],
body[data-store-theme="light"] #cart-items-container span[class*="text-[#"],
body[data-store-theme="light"] #cart-items-container span[class*="text-slate-"],
body[data-store-theme="light"] #cart-items-container span[class*="text-gray-"],
body[data-store-theme="light"] #cart-drawer #cart-items-container span[class*="text-[#00F0FF]"] {
    color: #475569 !important;
    font-weight: 600 !important;
}

/* عناصر وأزرار تعديل الكمية (+/-) */
body[data-store-theme="light"] #cart-items-container input,
body[data-store-theme="light"] #cart-items-container .cart-qty-btn,
body[data-store-theme="light"] #cart-items-container div[class*="bg-[#121212]"],
body[data-store-theme="light"] #cart-items-container div[style*="polygon(3px"] {
    background-color: #F8FAFC !important;
    background: #F8FAFC !important;
    border: 1px solid #CBD5E1 !important;
    color: #0F172A !important;
    clip-path: none !important;
    border-radius: 0.25rem !important;
}

body[data-store-theme="light"] #cart-items-container .cart-qty-btn {
    border: none !important;
}

body[data-store-theme="light"] #cart-items-container .cart-qty-btn:hover {
    background-color: #EFF6FF !important;
    color: var(--hud-primary, #2563EB) !important;
}

/* زر الحذف (x) وزر إغلاق السلة */
body[data-store-theme="light"] #cart-items-container .cart-remove-item,
body[data-store-theme="light"] #cart-drawer #cart-close-btn {
    color: #64748B !important;
    background: transparent !important;
    border: none !important;
}

body[data-store-theme="light"] #cart-items-container .cart-remove-item:hover,
body[data-store-theme="light"] #cart-drawer #cart-close-btn:hover {
    color: #E11D48 !important;
    background: transparent !important;
}

/* السعر الإجمالي في التذييل */
body[data-store-theme="light"] #cart-drawer #cart-total {
    color: var(--hud-primary, #2563EB) !important;
}

/* الحالة الفارغة للسلة في الوضع النهاري */
body[data-store-theme="light"] #cart-drawer #cart-empty-state svg,
body[data-store-theme="light"] #cart-drawer #cart-empty-state span {
    color: #64748B !important;
}

/* ==========================================================================
   MOBILE RESPONSIVENESS: SMART GRID & SIDEBAR RESET
   ========================================================================== */

@media (max-width: 768px) {
    /* 1. عرض كرتين في كل سطر للموبايل بدلاً من كرت واحد عملاق */
    .products-grid:not(.swiper-wrapper),
    ul.products:not(.swiper-wrapper) {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem !important; /* تصغير المسافات لتوفير المساحة */
        justify-content: center !important;
    }

    /* 2. إلغاء القيود الصارمة للكروت لتتكيف مع حجم الشاشة الصغير */
    .swiper-slide, 
    .slick-slide, 
    ul.products li.product, 
    .product-card {
        min-width: 0 !important;
        width: 100% !important;
    }

    /* 3. تحرير القائمة الجانبية بالكامل في الموبايل (إلغاء التثبيت Sticky) */
    aside.w-[280px], 
    aside.xl\:w-[300px], 
    aside:has(.hud-tab-item),
    .gaming-categories-sidebar {
        position: relative !important;
        height: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        border-left: none !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
        padding: 1rem 0 !important;
        z-index: 10 !important;
    }
    
    body[data-store-theme="light"] aside:has(.hud-tab-item) {
        border-bottom-color: #E2E8F0 !important;
    }

    /* 4. تقليل المسافات الداخلية للمحتوى الرئيسي لتوسيع مساحة الرؤية */
    main > .flex,
    .flex > div:not(aside):has(.products-grid),
    main > .flex > div:not(aside) {
        padding: 0.5rem !important;
        max-width: 100% !important;
    }
}

/* ==========================================================================
   SALES SECTION HEADER: INLINE COUNTDOWN TIMER BADGE
   محاذاة وضبط عداد الوقت التنازلي التكتيكي بجانب عنوان "تخفيضات هذا الأسبوع"
   ========================================================================== */
.sales-header-countdown-wrap {
    display: inline-flex !important;
    align-items: center !important;
}

.sales-header-countdown-wrap .sanad-hud-timer {
    width: auto !important;
    min-width: 220px !important;
    max-width: 280px !important;
    margin: 0 !important;
    padding: 4px 10px !important;
    border: 1px solid rgba(220, 38, 38, 0.4) !important;
    background: rgba(18, 18, 23, 0.9) !important;
    box-shadow: 0 0 10px rgba(220, 38, 38, 0.2) !important;
    clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px) !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.sales-header-countdown-wrap .sanad-hud-timer:hover {
    border-color: #DC2626 !important;
    box-shadow: 0 0 14px rgba(220, 38, 38, 0.4) !important;
}

/* الوضع النهاري لعداد التخفيضات بجانب العنوان */
body[data-store-theme="light"] .sales-header-countdown-wrap .sanad-hud-timer {
    background: #FFFFFF !important;
    border: 1px solid #CBD5E1 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

body[data-store-theme="light"] .sales-header-countdown-wrap .sanad-hud-timer:hover {
    border-color: #DC2626 !important;
    box-shadow: 0 0 8px rgba(220, 38, 38, 0.25) !important;
}

/* ==========================================================================
   MOBILE LAYOUT FIX: PREVENT HORIZONTAL OVERFLOW & FIX DRAWER
   ========================================================================== */

/* 1. القفل الجذري لمنع أي انزياح أفقي في الصفحة */
html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    position: relative !important;
}

/* 2. إجبار أي قائمة جانبية (موبايل أو سلة) على البقاء خارج حدود الشاشة تماماً عند الإغلاق */
.mobile-drawer,
.cart-drawer,
#cart-sidebar,
.offcanvas-menu,
aside.mobile-menu,
#cart-drawer.translate-x-full,
#mobile-menu-drawer.translate-x-full {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important; /* أو left حسب اتجاه القائمة */
    height: 100vh !important;
    max-width: 85vw !important;
    width: 320px !important;
    z-index: 99999 !important;
    /* إزاحة العنصر بالكامل خارج الشاشة وتطبيق حركة مسرعة عتادياً */
    transform: translateX(100%) !important; 
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    will-change: transform !important;
}

/* 3. حالة الفتح (Open/Active) - إعادة القائمة للشاشة */
.mobile-drawer.open,
.mobile-drawer.active,
.cart-drawer.open,
#cart-sidebar.open,
.offcanvas-menu.active,
body.menu-open aside.mobile-menu,
#cart-drawer:not(.translate-x-full),
#mobile-menu-drawer:not(.translate-x-full) {
    transform: translateX(0) !important;
}

/* 4. ترتيب الهيدر في الموبايل لمنع تكدس واختناق الأزرار */
@media (max-width: 768px) {
    header {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
    
    header .flex {
        flex-wrap: nowrap !important;
        gap: 0.25rem !important;
    }
    
    /* تصغير الأزرار العلوية لتوفير المساحة */
    header button, 
    header .hud-btn,
    header a.hud-btn,
    header .hud-header-btn {
        padding: 0.35rem 0.5rem !important;
        font-size: 0.75rem !important;
    }
    
    header svg {
        width: 18px !important;
        height: 18px !important;
    }
    
    /* إخفاء النصوص بجوار الأيقونات في الموبايل إن وجدت */
    header .hud-btn span:not(.badge),
    header .hud-header-btn span:not(#cart-count):not(#wishlist-count):not(#storeThemeIcon):not(#hudAudioDot) {
        display: none !important;
    }
}

/* ==========================================================================
   CYBERPUNK WISHLIST DRAWER & BADGE ENGINE
   ========================================================================== */
#wishlist-count,
.hud-wishlist-count {
    clip-path: polygon(2px 0, 100% 0, 100% calc(100% - 2px), calc(100% - 2px) 100%, 0 100%, 0 2px) !important;
    border-radius: 0 !important;
    background: #DC2626 !important;
    box-shadow: 0 0 8px rgba(220, 38, 38, 0.7) !important;
}

/* حالة الوضع النهاري لدرج المفضلة */
body[data-store-theme="light"] #wishlist-drawer,
body[data-store-theme="light"] #wishlist-drawer > div:first-child {
    background-color: #FFFFFF !important;
    background: #FFFFFF !important;
    border-color: #E2E8F0 !important;
}

body[data-store-theme="light"] #wishlist-drawer h2,
body[data-store-theme="light"] #wishlist-drawer h2 * {
    color: #0F172A !important;
}

body[data-store-theme="light"] #wishlist-items-container .wishlist-item-row,
body[data-store-theme="light"] #wishlist-drawer div[class*="bg-[#181818]"],
body[data-store-theme="light"] #wishlist-drawer div[class*="bg-[#1a1a1a]"] {
    background-color: #FFFFFF !important;
    background: #FFFFFF !important;
    border: 1px solid #CBD5E1 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
    border-radius: 0.5rem !important;
    clip-path: none !important;
}

body[data-store-theme="light"] #wishlist-items-container div:has(> img),
body[data-store-theme="light"] #wishlist-items-container div[class*="bg-[#101010]"] {
    background-color: #F8FAFC !important;
    background: #F8FAFC !important;
    border: 1px solid #E2E8F0 !important;
}

body[data-store-theme="light"] #wishlist-items-container a,
body[data-store-theme="light"] #wishlist-items-container span {
    color: #0F172A !important;
}

body[data-store-theme="light"] #wishlist-items-container .wishlist-remove-item {
    color: #64748B !important;
}
body[data-store-theme="light"] #wishlist-items-container .wishlist-remove-item:hover {
    color: #E11D48 !important;
}

/* ==========================================================================
   MOBILE LAYOUT FIX: FILTERS BAR CLEANUP
   ========================================================================== */

@media (max-width: 768px) {
    /* 1. الحاوية الرئيسية للفلاتر: عمود مرن مرتب */
    .filters-wrapper,
    .hud-filters {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.75rem !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0.75rem 0 !important;
        box-sizing: border-box !important;
    }

    /* 2. شريط البحث في سطر منفصل كامل بالأعلى */
    .filter-search-col,
    .filter-search-col input,
    #filter-search,
    input[placeholder*="ابحث"],
    div:has(> #filter-search) {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        display: block !important;
    }

    /* 3. سطر القائمتين (الفئات والبراندات): واحدة بجانب الأخرى في سطر واحد إجبارياً بنسبة 50% */
    .filters-dropdowns-row {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important; /* ممنوع الالتفاف بتاتاً */
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        max-width: 100% !important;
        gap: 8px !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    .filters-dropdowns-row .filter-col-category,
    .filters-dropdowns-row .filter-col-brand,
    .filters-dropdowns-row > div {
        width: calc(50% - 4px) !important;
        max-width: calc(50% - 4px) !important;
        min-width: 0 !important;
        flex: 1 1 calc(50% - 4px) !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        display: block !important;
    }

    /* إخضاع مكوّن الـ HUD Select للتقييد بنسبة 50% بدون أن يتسرب خارج الحاوية */
    .filters-dropdowns-row .hud-select-wrapper,
    .filters-dropdowns-row div[data-target-select],
    div[data-target-select="filter-category"],
    div[data-target-select="filter-brand"] {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        display: block !important;
    }

    /* نافذة العروض ونافذة البكجات: تمدد كامل 100% على الموبايل */
    .offers-categories-dropdown,
    .package-filter-category-col,
    .offers-categories-dropdown .hud-select-wrapper,
    .package-filter-category-col .hud-select-wrapper,
    div[data-target-select="sales-category-select"],
    div[data-target-select="filter-package-category"] {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        box-sizing: border-box !important;
        display: block !important;
    }

    .offers-categories-dropdown .hud-select-trigger,
    .package-filter-category-col .hud-select-trigger,
    div[data-target-select="sales-category-select"] .hud-select-trigger,
    div[data-target-select="filter-package-category"] .hud-select-trigger {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        box-sizing: border-box !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 0.65rem 0.75rem !important;
    }

    .filters-dropdowns-row .hud-select-trigger,
    div[data-target-select="filter-category"] .hud-select-trigger,
    div[data-target-select="filter-brand"] .hud-select-trigger {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 0.5rem 0.55rem !important;
        gap: 4px !important;
        overflow: hidden !important;
    }

    .filters-dropdowns-row .hud-select-label,
    div[data-target-select="filter-category"] .hud-select-label,
    div[data-target-select="filter-brand"] .hud-select-label {
        min-width: 0 !important;
        flex: 1 1 auto !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        font-size: 0.75rem !important;
        text-align: right !important;
    }

    .filters-dropdowns-row .hud-select-arrow,
    div[data-target-select="filter-category"] .hud-select-arrow,
    div[data-target-select="filter-brand"] .hud-select-arrow {
        flex-shrink: 0 !important;
    }

    /* 4. شريط السعر أسفلهما مباشرة بكامل العرض */
    .filters-wrapper .hud-price-filter,
    .hud-filters .hud-price-filter,
    .hud-price-filter,
    .price-filter,
    div:has(> input[type="range"]),
    :is(div:has(> span:contains("السعر"))) {
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        box-sizing: border-box !important;
        padding: 0.5rem 0.75rem !important;
        margin: 0 !important;
    }

    /* 5. أزرار تبديل العرض (Grid / List) خارج الحاوية أسفل الفلاتر */
    .all-products-view-bar,
    .packages-view-bar,
    .filters-wrapper .layout-toggles,
    .hud-filters .layout-toggles,
    .layout-toggles,
    div:has(> #btn-grid),
    div:has(> button > svg[class*="lucide"]) {
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        gap: 0.75rem !important;
        margin: 0.25rem 0 0.75rem 0 !important;
    }
}

/* ==========================================================================
   MOBILE LIST VIEW FIX: HORIZONTAL COMPACT LAYOUT
   ========================================================================== */

@media (max-width: 768px) {
    /* استهداف كرت المنتج فقط عندما تكون الحاوية الأم في وضع القائمة (List View) */
    .products-grid.list-view .product-card,
    ul.products.list-view li.product,
    div[data-layout="list"] .product-card,
    .layout-list .product-card,
    #all-products-grid.list-view .product-card,
    #products-container.list-view .product-card,
    #packages-grid.list-view .package-card,
    .list-view .product-card {
        display: flex !important;
        flex-direction: row !important; /* ترتيب أفقي (الصورة يمين والتفاصيل يسار في الـ RTL) */
        align-items: center !important;
        gap: 0.75rem !important;
        padding: 0.75rem !important;
        width: 100% !important;
        min-height: 120px !important;
    }

    /* تطبيق التخطيط الأفقي على الحاوية الداخلية للكرت */
    #all-products-grid.list-view .card-inner,
    #products-container.list-view .card-inner,
    #packages-grid.list-view .card-inner,
    .list-view .card-inner {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 0.75rem !important;
        width: 100% !important;
    }

    /* 1. حاوية الصورة في وضع القائمة: تصغيرها وتثبيتها */
    .products-grid.list-view .product-card .product-image,
    ul.products.list-view li.product .product-image,
    .layout-list .product-card .img-wrapper,
    #all-products-grid.list-view .card-media,
    #products-container.list-view .card-media,
    #packages-grid.list-view .card-media,
    .list-view .card-media {
        width: 35% !important;
        max-width: 120px !important;
        min-width: 95px !important;
        height: 110px !important;
        aspect-ratio: auto !important;
        flex-shrink: 0 !important;
        margin-bottom: 0 !important;
    }

    /* 2. حاوية التفاصيل (الاسم، السعر، الأزرار): أخذ باقي المساحة */
    .products-grid.list-view .product-card .product-details,
    ul.products.list-view li.product .product-details,
    .layout-list .product-card .card-body,
    #all-products-grid.list-view .card-body,
    #products-container.list-view .card-body,
    #packages-grid.list-view .card-body,
    .list-view .card-body {
        width: 65% !important;
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        text-align: right !important;
        justify-content: center !important;
        min-width: 0 !important;
    }

    /* 3. تصغير النصوص قليلاً لتناسب العرض المدمج */
    .products-grid.list-view .product-card .product-title,
    .layout-list .product-card h3,
    .list-view .product-title,
    .list-view h3 {
        font-size: 0.85rem !important;
        line-height: 1.3 !important;
        margin-bottom: 0.25rem !important;
    }

    /* إخفاء الوصف وزر التوسيع في عرض القائمة المصغر للهواتف لتجنب التكدس */
    .list-view .product-excerpt,
    .list-view .hud-expand-toggle-btn,
    .list-view .hud-expand-timer-bar {
        display: none !important;
    }

    /* 4. ترتيب شريط السعر والكمية وزر الإضافة ليكونوا في سطر أو سطرين مدمجين */
    .products-grid.list-view .product-card .add-to-cart-wrapper,
    .layout-list .product-card .cart-actions,
    #all-products-grid.list-view .card-action,
    #products-container.list-view .card-action,
    #packages-grid.list-view .card-action,
    .list-view .card-action {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 0.5rem !important;
        width: 100% !important;
        margin-top: 0.35rem !important;
        padding-top: 0 !important;
        border-top: none !important;
    }

    .list-view .card-action .add-to-cart-btn {
        padding: 0.35rem 0.65rem !important;
        font-size: 0.75rem !important;
    }

    .list-view .card-action .hud-quantity-stepper {
        scale: 0.88 !important;
        transform-origin: right center !important;
    }
}

/* ==========================================================================
   MOBILE DRAWER & HAMBURGER: STRICT LIGHT MODE
   ========================================================================== */

/* 1. إجبار حاوية القائمة المنبثقة (Drawer) على اللون الفاتح */
body[data-store-theme="light"] #mobile-menu-drawer,
body[data-store-theme="light"] .mobile-drawer,
body[data-store-theme="light"] .offcanvas-menu,
body[data-store-theme="light"] aside.mobile-menu,
body[data-store-theme="light"] div[class*="bg-[#11131A]"],
body[data-store-theme="light"] div[class*="bg-[#16161c]"] {
    background-color: #F8FAFC !important;
    background: #F8FAFC !important;
    border-left: 1px solid #E2E8F0 !important;
    box-shadow: -10px 0 25px rgba(0, 0, 0, 0.08) !important;
}

/* 2. تبييض أزرار الروابط داخل الهامبرغر */
body[data-store-theme="light"] #mobile-menu-drawer a,
body[data-store-theme="light"] .mobile-drawer a,
body[data-store-theme="light"] .offcanvas-menu a {
    color: #0F172A !important;
    border-color: #CBD5E1 !important;
    background-color: #FFFFFF !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

/* 3. تأثير الهوفر داخل الهامبرغر */
body[data-store-theme="light"] #mobile-menu-drawer a:hover,
body[data-store-theme="light"] .mobile-drawer a:hover,
body[data-store-theme="light"] .offcanvas-menu a:hover {
    background-color: #F1F5F9 !important;
    color: var(--hud-primary, #2563EB) !important;
    border-color: var(--hud-primary, #2563EB) !important;
}

/* 4. تلوين رأس القائمة (Header) وزر الإغلاق */
body[data-store-theme="light"] #mobile-menu-drawer > div,
body[data-store-theme="light"] .mobile-drawer > div {
    border-color: #E2E8F0 !important;
    background-color: #FFFFFF !important;
}
body[data-store-theme="light"] #mobile-menu-close-btn,
body[data-store-theme="light"] .mobile-drawer #mobile-menu-close-btn {
    color: #64748B !important;
}
body[data-store-theme="light"] #mobile-menu-close-btn:hover,
body[data-store-theme="light"] .mobile-drawer #mobile-menu-close-btn:hover {
    color: #EF4444 !important;
    background-color: rgba(239, 68, 68, 0.08) !important;
}
body[data-store-theme="light"] #mobile-menu-close-bottom-btn,
body[data-store-theme="light"] .mobile-drawer #mobile-menu-close-bottom-btn {
    background-color: #FFFFFF !important;
    color: #64748B !important;
    border: 1px solid #CBD5E1 !important;
}
body[data-store-theme="light"] #mobile-menu-close-bottom-btn:hover,
body[data-store-theme="light"] .mobile-drawer #mobile-menu-close-bottom-btn:hover {
    background-color: #FEF2F2 !important;
    color: #EF4444 !important;
    border-color: #EF4444 !important;
}
body[data-store-theme="light"] #mobile-menu-drawer span,
body[data-store-theme="light"] #mobile-menu-drawer h2,
body[data-store-theme="light"] .mobile-drawer span,
body[data-store-theme="light"] .mobile-drawer h2 {
    color: #0F172A !important;
}

/* 5. زر الهامبرغر نفسه في الهيدر */
body[data-store-theme="light"] header #mobile-menu-open-btn,
body[data-store-theme="light"] #mobile-menu-open-btn,
body[data-store-theme="light"] header button.hamburger,
body[data-store-theme="light"] header button:has(svg.lucide-menu) {
    background-color: #FFFFFF !important;
    color: #0F172A !important;
    border: 1px solid #CBD5E1 !important;
}
body[data-store-theme="light"] header #mobile-menu-open-btn svg,
body[data-store-theme="light"] #mobile-menu-open-btn svg {
    stroke: #0F172A !important;
}


/* ==========================================================================
   MOBILE CATEGORIES: DISABLE HORIZONTAL SCROLL & ENABLE WRAP GRID
   ========================================================================== */

@media (max-width: 768px) {
    /* تحويل التمرير الأفقي إلى شبكة مرنة (Wrap) */
    aside .hud-tabs,
    aside ul.list-none,
    .gaming-categories-sidebar ul,
    .gaming-categories-sidebar div:has(> .hud-tab-item),
    div[class*="overflow-x-auto"]:has(> .hud-tab-item),
    div[class*="overflow-x-auto"]:has(.hud-mobile-cat-pill),
    .scrollbar-hide:has(.hud-mobile-cat-pill),
    .scrollbar-hide > div:has(.hud-mobile-cat-pill) {
        display: flex !important;
        flex-wrap: wrap !important; /* السر هنا: السماح للأزرار بالنزول للسطر التالي */
        overflow-x: visible !important;
        flex-direction: row !important;
        gap: 0.5rem !important;
        padding-bottom: 0 !important;
        min-width: 100% !important;
        width: 100% !important;
    }
    
    /* جعل أزرار التصنيفات تأخذ عرضاً متساوياً (زرين في كل سطر) */
    aside .hud-tab-item,
    .gaming-categories-sidebar .hud-tab-item,
    .hud-mobile-cat-pill {
        flex: 1 1 calc(50% - 0.5rem) !important;
        min-width: calc(50% - 0.5rem) !important;
        max-width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
        padding: 0.5rem !important;
        font-size: 0.8rem !important;
        white-space: normal !important; /* السماح للنص بالالتفاف إذا كان طويلاً */
        box-sizing: border-box !important;
    }
}

/* ==========================================================================
   MOBILE LIST VIEW: COMPACT HEIGHT & TEXT TRUNCATION
   ========================================================================== */

@media (max-width: 768px) {
    /* 1. تقليل الحشوة (Padding) والمسافات العامة للكرت */
    .products-grid.list-view .product-card,
    ul.products.list-view li.product,
    .layout-list .product-card,
    #all-products-grid.list-view .product-card,
    #products-container.list-view .product-card,
    #packages-grid.list-view .package-card,
    .list-view .product-card {
        padding: 0.5rem !important;
        gap: 0.5rem !important;
        min-height: auto !important; /* إلغاء أي ارتفاع أدنى سابق */
        height: auto !important;
        align-items: center !important; /* توسيط الصورة والنص عمودياً */
    }

    #all-products-grid.list-view .card-inner,
    #products-container.list-view .card-inner,
    #packages-grid.list-view .card-inner,
    .list-view .card-inner {
        gap: 0.5rem !important;
        align-items: center !important;
    }

    /* ضبط أبعاد الصورة لتكون مربعة ومدمجة متناسقة مع ارتفاع الكرت */
    #all-products-grid.list-view .card-media,
    #products-container.list-view .card-media,
    #packages-grid.list-view .card-media,
    .list-view .card-media {
        width: 100px !important;
        min-width: 95px !important;
        max-width: 105px !important;
        height: 100px !important;
        margin-bottom: 0 !important;
        flex-shrink: 0 !important;
    }

    /* 2. ضغط النصوص: قص الوصف الطويل (Excerpt) لسطر واحد فقط وإخفاء الفائض */
    .products-grid.list-view .product-card .product-excerpt,
    .products-grid.list-view .product-card .short-description,
    .layout-list .product-card p,
    .list-view .product-card .product-desc,
    .list-view .product-card .product-excerpt,
    .list-view .card-body p {
        display: -webkit-box !important;
        -webkit-line-clamp: 1 !important; /* السماح بسطر واحد فقط */
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        margin-bottom: 0.15rem !important;
        font-size: 0.75rem !important;
        line-height: 1.2 !important;
    }

    /* 3. تصغير العنوان وتقليل المساحة تحته */
    .products-grid.list-view .product-card .product-title,
    .layout-list .product-card h3,
    .list-view .product-card .product-title,
    .list-view .product-card h3,
    .list-view .card-body h3 {
        font-size: 0.8rem !important;
        line-height: 1.25 !important;
        margin-bottom: 0.15rem !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 1 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    /* 4. إخفاء زر التوسيع ورابط "[+] عرض المزيد" في وضع القائمة المدمج لتوفير المساحة */
    .products-grid.list-view .product-card a.read-more,
    :is(.products-grid.list-view .product-card a:contains("عرض المزيد")),
    .list-view .hud-expand-toggle-btn,
    .list-view .hud-expand-timer-bar,
    .list-view button:has(.btn-text) {
        display: none !important;
    }

    /* 5. ضغط شريط السعر */
    .products-grid.list-view .product-card .price,
    .list-view .product-card .price,
    .list-view .card-body div:has(> span.text-red-500),
    .list-view .card-body a > div:last-child {
        margin-bottom: 0.2rem !important;
        margin-top: 0 !important;
        font-size: 0.85rem !important;
        line-height: 1.2 !important;
    }

    /* 6. ضغط أزرار الكمية والإضافة للسلة لتكون أصغر وأكثر تناسقاً */
    .products-grid.list-view .product-card .add-to-cart-wrapper,
    .layout-list .product-card .cart-actions,
    #all-products-grid.list-view .card-action,
    #products-container.list-view .card-action,
    #packages-grid.list-view .card-action,
    .list-view .card-action {
        margin-top: 0 !important;
        padding-top: 0 !important;
        border-top: none !important;
        gap: 0.35rem !important;
        display: flex !important;
        align-items: center !important;
    }

    .products-grid.list-view .product-card .add-to-cart-wrapper button,
    .products-grid.list-view .product-card .add-to-cart-wrapper input.qty,
    .list-view .card-action .add-to-cart-btn {
        padding: 0.2rem 0.5rem !important;
        min-height: 28px !important; /* تقليل ارتفاع الأزرار */
        height: 28px !important;
        font-size: 0.75rem !important;
    }

    .list-view .card-action .hud-quantity-stepper {
        height: 28px !important;
        max-height: 28px !important;
    }

    .list-view .card-action .hud-quantity-stepper .qty-btn,
    .list-view .card-action .hud-quantity-stepper .qty-input {
        height: 26px !important;
        min-height: 26px !important;
        font-size: 0.75rem !important;
    }
}

/* ==========================================================================
   MOBILE TOP NAVIGATION BAR (5 PRIMARY HUD TABS)
   ========================================================================== */
.hud-mobile-nav-btn {
    flex: 1 1 0;
    min-width: max-content;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0.65rem;
    font-size: 0.8rem;
    font-weight: 700;
    font-family: 'Cairo', sans-serif;
    color: #94A3B8;
    background: #141720;
    border: 1px solid rgba(255, 255, 255, 0.08);
    clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
    text-align: center;
    white-space: nowrap;
    text-decoration: none;
    transition: all 0.2s ease;
}

.hud-mobile-nav-btn:hover {
    color: #FFFFFF;
    border-color: var(--hud-primary, #FF00E5);
    background: rgba(255, 255, 255, 0.05);
}

.hud-mobile-nav-btn.active {
    color: #FFFFFF !important;
    background: rgba(255, 0, 229, 0.14) !important;
    border-color: var(--hud-primary, #FF00E5) !important;
    box-shadow: 0 0 10px var(--hud-glow) !important;
}

/* Light Mode Support for Mobile Top Navigation Bar */
body[data-store-theme="light"] .hud-mobile-nav-btn {
    background-color: #FFFFFF !important;
    border-color: #CBD5E1 !important;
    color: #475569 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

body[data-store-theme="light"] .hud-mobile-nav-btn:hover {
    background-color: #F8FAFC !important;
    color: #0F172A !important;
    border-color: var(--hud-primary, #2563EB) !important;
}

body[data-store-theme="light"] .hud-mobile-nav-btn.active {
    background-color: #EFF6FF !important;
    border-color: #2563EB !important;
    color: #1D4ED8 !important;
    font-weight: 800 !important;
    box-shadow: 0 0 8px rgba(37, 99, 235, 0.15) !important;
}

/* ==========================================================================
   TACTICAL GAMING MODALS SYSTEM (FAQ, WARRANTY & SHIPPING MODALS)
   ========================================================================== */

/* 1. Modal Overlay & Centering */
.tactical-modal-overlay,
.faq-modal-overlay,
.warranty-modal-overlay,
.shipping-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background-color: rgba(6, 7, 14, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    opacity: 0;
    transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.tactical-modal-overlay.is-open,
.faq-modal-overlay.is-open,
.warranty-modal-overlay.is-open,
.shipping-modal-overlay.is-open {
    display: flex;
    opacity: 1;
}

/* 2. Tactical Modal Container */
.tactical-modal-container,
.faq-modal-container,
.warranty-modal-container,
.shipping-modal-container {
    position: relative;
    width: 100%;
    max-width: 44rem;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #10121C 0%, #0A0B12 100%);
    border: 1px solid rgba(0, 64, 255, 0.55);
    box-shadow: 0 0 35px rgba(0, 64, 255, 0.25), 
                0 0 70px rgba(255, 0, 229, 0.12),
                0 25px 60px rgba(0, 0, 0, 0.85);
    clip-path: polygon(0 16px, 16px 0, calc(100% - 16px) 0, 100% 16px, 100% calc(100% - 16px), calc(100% - 16px) 100%, 16px 100%, 0 calc(100% - 16px));
    transform: scale(0.95) translateY(12px);
    opacity: 0;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.25s ease;
}

.tactical-modal-overlay.is-open .tactical-modal-container,
.faq-modal-overlay.is-open .faq-modal-container,
.warranty-modal-overlay.is-open .warranty-modal-container,
.shipping-modal-overlay.is-open .shipping-modal-container {
    transform: scale(1) translateY(0);
    opacity: 1;
}

/* 3. Absolute Positioned Close 'X' Button */
.tactical-close-btn,
.faq-close-btn,
.warranty-close-btn,
.shipping-close-btn {
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: 20;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.65rem;
    font-family: monospace, monospace;
    font-size: 0.75rem;
    color: #8E9AA6;
    background: rgba(14, 16, 26, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.12);
    clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px);
    cursor: pointer;
    transition: all 0.2s ease;
}

.tactical-close-btn:hover,
.faq-close-btn:hover,
.warranty-close-btn:hover,
.shipping-close-btn:hover {
    color: #FFFFFF;
    border-color: var(--hud-primary, #FF00E5);
    background: rgba(255, 0, 229, 0.15);
    box-shadow: 0 0 12px rgba(255, 0, 229, 0.35);
}

.tactical-close-icon,
.faq-close-icon,
.warranty-close-icon,
.shipping-close-icon {
    font-size: 1.1rem;
    line-height: 1;
    font-weight: 700;
}

/* 4. Modal Header */
.tactical-modal-header,
.faq-modal-header,
.warranty-modal-header,
.shipping-modal-header {
    padding: 1.5rem 1.75rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* 5. Custom Scrollbar for Modal Body */
.tactical-modal-body,
.faq-modal-body,
.warranty-modal-body,
.shipping-modal-body {
    overflow-y: auto;
    padding: 1.25rem 1.75rem;
}

.tactical-modal-body::-webkit-scrollbar,
.faq-modal-body::-webkit-scrollbar,
.warranty-modal-body::-webkit-scrollbar,
.shipping-modal-body::-webkit-scrollbar {
    width: 5px;
}

.tactical-modal-body::-webkit-scrollbar-track,
.faq-modal-body::-webkit-scrollbar-track,
.warranty-modal-body::-webkit-scrollbar-track,
.shipping-modal-body::-webkit-scrollbar-track {
    background: rgba(10, 11, 18, 0.6);
}

.tactical-modal-body::-webkit-scrollbar-thumb,
.faq-modal-body::-webkit-scrollbar-thumb,
.warranty-modal-body::-webkit-scrollbar-thumb,
.shipping-modal-body::-webkit-scrollbar-thumb {
    background: rgba(0, 64, 255, 0.45);
    border-radius: 2px;
}

.tactical-modal-body::-webkit-scrollbar-thumb:hover,
.faq-modal-body::-webkit-scrollbar-thumb:hover,
.warranty-modal-body::-webkit-scrollbar-thumb:hover,
.shipping-modal-body::-webkit-scrollbar-thumb:hover {
    background: var(--hud-primary, #FF00E5);
}

/* 6. Accordion Items (FAQ Modal) */
.faq-accordion-item {
    background: rgba(18, 21, 33, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.08);
    clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
    transition: border-color 0.25s ease,
                background-color 0.25s ease,
                box-shadow 0.25s ease;
    margin-bottom: 0.75rem;
}

.faq-accordion-item:hover {
    border-color: rgba(0, 240, 255, 0.4);
    background: rgba(22, 26, 42, 0.8);
}

.faq-accordion-item.active {
    border-color: var(--hud-primary, #FF00E5);
    background: rgba(24, 21, 38, 0.9);
    box-shadow: 0 0 18px rgba(255, 0, 229, 0.16),
                inset 3px 0 0 var(--hud-primary, #FF00E5);
}

[dir="rtl"] .faq-accordion-item.active {
    box-shadow: 0 0 18px rgba(255, 0, 229, 0.16),
                inset -3px 0 0 var(--hud-primary, #FF00E5);
}

/* 7. Accordion Header Button */
.faq-accordion-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.15rem;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: right;
    outline: none;
    font-family: 'Cairo', sans-serif;
    color: #FFFFFF;
    transition: color 0.2s ease;
}

[dir="ltr"] .faq-accordion-header {
    text-align: left;
}

.faq-accordion-item.active .faq-accordion-header {
    color: #FFFFFF;
}

/* 8. Chevron / Arrow Rotation */
.faq-chevron-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--hud-primary, #FF00E5);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                background-color 0.25s ease,
                color 0.25s ease;
}

.faq-accordion-item:hover .faq-chevron-icon {
    background: rgba(255, 255, 255, 0.08);
}

.faq-accordion-item.active .faq-chevron-icon {
    transform: rotate(180deg);
    background: rgba(255, 0, 229, 0.18);
    color: #FFFFFF;
    box-shadow: 0 0 8px rgba(255, 0, 229, 0.4);
}

/* 9. Accordion Content Collapse / Expand */
.faq-accordion-collapse {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.25s ease;
}

.faq-accordion-item.active .faq-accordion-collapse {
    opacity: 1;
}

.faq-accordion-content {
    padding: 0.5rem 1.15rem 1.15rem;
    color: #94A3B8;
    font-size: 0.875rem;
    line-height: 1.7;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* 10. Structured Policy Card Items (Warranty & Shipping Modals) */
.policy-card-item {
    background: rgba(18, 21, 33, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.08);
    clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
    padding: 1.15rem 1.25rem;
    margin-bottom: 0.85rem;
    transition: border-color 0.25s ease,
                background-color 0.25s ease,
                box-shadow 0.25s ease;
}

.policy-card-item:hover {
    border-color: rgba(0, 240, 255, 0.4);
    background: rgba(22, 26, 42, 0.8);
    box-shadow: 0 0 15px rgba(0, 240, 255, 0.1);
}

.policy-card-header {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 0.5rem;
}

.policy-card-num {
    font-family: monospace, monospace;
    font-size: 0.75rem;
    color: var(--hud-accent, #00F0FF);
    background: rgba(0, 240, 255, 0.1);
    padding: 0.15rem 0.45rem;
    border: 1px solid rgba(0, 240, 255, 0.25);
    border-radius: 2px;
}

.policy-card-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #FFFFFF;
    margin: 0;
}

.policy-card-desc {
    color: #94A3B8;
    font-size: 0.875rem;
    line-height: 1.75;
    margin: 0;
}

/* 11. Tactical Bullet Points List */
.policy-bullet-list {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.policy-bullet-list li {
    position: relative;
    padding-right: 1.25rem;
    font-size: 0.85rem;
    line-height: 1.65;
    color: #94A3B8;
}

[dir="ltr"] .policy-bullet-list li {
    padding-right: 0;
    padding-left: 1.25rem;
}

.policy-bullet-list li::before {
    content: "›";
    position: absolute;
    right: 0;
    top: 0;
    color: var(--hud-accent, #00F0FF);
    font-weight: 700;
    font-size: 1.1rem;
    line-height: 1.4;
}

[dir="ltr"] .policy-bullet-list li::before {
    right: auto;
    left: 0;
}

.policy-bullet-list li strong {
    color: #FFFFFF;
}

/* 12. Tactical Stat Grid / Rates Badge */
.tactical-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 0.65rem;
    margin-top: 0.65rem;
}

.tactical-stat-box {
    background: rgba(9, 10, 15, 0.8);
    border: 1px solid rgba(0, 240, 255, 0.2);
    padding: 0.65rem 0.85rem;
    text-align: center;
}

.tactical-stat-value {
    font-family: monospace, monospace;
    font-size: 1rem;
    font-weight: 800;
    color: var(--hud-accent, #00F0FF);
}

.tactical-stat-label {
    font-size: 0.75rem;
    color: #8E9AA6;
    margin-top: 0.15rem;
}

/* 13. Light Mode Theme Adaptive Support */
body[data-store-theme="light"] .tactical-modal-overlay,
body[data-store-theme="light"] .faq-modal-overlay,
body[data-store-theme="light"] .warranty-modal-overlay,
body[data-store-theme="light"] .shipping-modal-overlay {
    background-color: rgba(15, 23, 42, 0.65);
}

body[data-store-theme="light"] .tactical-modal-container,
body[data-store-theme="light"] .faq-modal-container,
body[data-store-theme="light"] .warranty-modal-container,
body[data-store-theme="light"] .shipping-modal-container {
    background: #FFFFFF;
    border-color: #CBD5E1;
    color: #0F172A;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

body[data-store-theme="light"] .tactical-modal-header,
body[data-store-theme="light"] .faq-modal-header,
body[data-store-theme="light"] .warranty-modal-header,
body[data-store-theme="light"] .shipping-modal-header {
    border-bottom-color: #E2E8F0;
}

body[data-store-theme="light"] .tactical-modal-header h2,
body[data-store-theme="light"] .faq-modal-header h2,
body[data-store-theme="light"] .warranty-modal-header h2,
body[data-store-theme="light"] .shipping-modal-header h2 {
    color: #0F172A !important;
}

body[data-store-theme="light"] .tactical-close-btn,
body[data-store-theme="light"] .faq-close-btn,
body[data-store-theme="light"] .warranty-close-btn,
body[data-store-theme="light"] .shipping-close-btn {
    background: #F1F5F9;
    color: #64748B;
    border-color: #CBD5E1;
}

body[data-store-theme="light"] .tactical-close-btn:hover,
body[data-store-theme="light"] .faq-close-btn:hover,
body[data-store-theme="light"] .warranty-close-btn:hover,
body[data-store-theme="light"] .shipping-close-btn:hover {
    background: #E2E8F0;
    color: #0F172A;
    border-color: #94A3B8;
}

body[data-store-theme="light"] .faq-accordion-item {
    background: #F8FAFC;
    border-color: #E2E8F0;
}

body[data-store-theme="light"] .faq-accordion-header {
    color: #1E293B;
}

body[data-store-theme="light"] .faq-accordion-item.active {
    background: #EFF6FF;
    border-color: #2563EB;
    box-shadow: 0 0 12px rgba(37, 99, 235, 0.12),
                inset -3px 0 0 #2563EB;
}

body[data-store-theme="light"] .faq-accordion-content {
    color: #475569;
    border-top-color: #E2E8F0;
}

body[data-store-theme="light"] .policy-card-item {
    background: #F8FAFC;
    border-color: #E2E8F0;
}

body[data-store-theme="light"] .policy-card-title {
    color: #0F172A;
}

body[data-store-theme="light"] .policy-card-desc,
body[data-store-theme="light"] .policy-bullet-list li {
    color: #475569;
}

body[data-store-theme="light"] .policy-bullet-list li strong {
    color: #0F172A;
}

body[data-store-theme="light"] .policy-bullet-list li::before {
    color: #2563EB;
}

body[data-store-theme="light"] .policy-card-num {
    background: #EFF6FF;
    color: #2563EB;
    border-color: #BFDBFE;
}

body[data-store-theme="light"] .tactical-stat-box {
    background: #F1F5F9;
    border-color: #CBD5E1;
}

body[data-store-theme="light"] .tactical-stat-value {
    color: #2563EB;
}

body[data-store-theme="light"] .tactical-stat-label {
    color: #64748B;
}

body[data-store-theme="light"] .tactical-modal-footer,
body[data-store-theme="light"] .faq-modal-footer,
body[data-store-theme="light"] .warranty-modal-footer,
body[data-store-theme="light"] .shipping-modal-footer {
    background: #F8FAFC !important;
    border-top-color: #E2E8F0 !important;
}

/* ── Stock Quantity Input Spinner Removal ── */
.stock-qty-input::-webkit-outer-spin-button,
.stock-qty-input::-webkit-inner-spin-button,
input[type="number"].stock-qty-input::-webkit-outer-spin-button,
input[type="number"].stock-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
    display: none !important;
}
.stock-qty-input,
input[type="number"].stock-qty-input {
    -moz-appearance: textfield !important;
    appearance: textfield !important;
}

/* ==========================================================================
   MODERN CUSTOM DROPDOWN UI COMPONENT (ZERO NATIVE SELECT STYLING)
   ========================================================================== */
.sanad-custom-select-wrap {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    font-family: inherit;
    text-align: right;
    user-select: none;
    -webkit-user-select: none;
    min-width: 175px;
}
.sanad-custom-select-wrap.w-full {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    display: block;
}
.sanad-custom-select-wrap:has(.sanad-custom-select-panel.is-open) {
    z-index: 9999 !important;
}

/* 1. Container & Trigger Button */
.sanad-custom-select-trigger {
    background-color: #FFFFFF !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 10px !important;
    padding: 0.6rem 0.9rem !important;
    font-size: 0.8125rem !important;
    line-height: 1.25rem !important;
    font-weight: 500 !important;
    color: #374151 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.6rem !important;
    cursor: pointer !important;
    outline: none !important;
    box-shadow: none !important;
    transition: border-color 0.18s ease, background-color 0.18s ease !important;
}
.sanad-custom-select-trigger:hover {
    border-color: #D1D5DB !important;
    background-color: #FFFFFF !important;
}
.sanad-custom-select-trigger:focus,
.sanad-custom-select-trigger.is-open {
    border-color: #9CA3AF !important;
    outline: none !important;
    box-shadow: none !important;
}
.sanad-custom-select-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0 !important;
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
}
.sanad-custom-select-chevron {
    width: 1rem;
    height: 1rem;
    color: #9CA3AF !important;
    flex-shrink: 0;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.sanad-custom-select-trigger.is-open .sanad-custom-select-chevron {
    transform: rotate(180deg) !important;
}

/* 2. Dropdown Panel & Zero Harsh Shadows */
.sanad-custom-select-panel {
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    right: 0;
    min-width: 100%;
    background-color: #FFFFFF !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 16px -2px rgba(0, 0, 0, 0.06), 0 2px 6px -1px rgba(0, 0, 0, 0.03) !important;
    z-index: 9999 !important;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
    visibility: hidden;
    transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s ease !important;
}
.sanad-custom-select-panel.is-open {
    opacity: 1 !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
    visibility: visible !important;
}

/* 3. Options List Container */
.sanad-custom-select-options {
    max-height: 240px;
    overflow-y: auto;
    padding: 0.35rem !important;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.sanad-custom-select-options::-webkit-scrollbar {
    width: 5px;
}
.sanad-custom-select-options::-webkit-scrollbar-track {
    background: transparent;
}
.sanad-custom-select-options::-webkit-scrollbar-thumb {
    background: #E5E7EB;
    border-radius: 4px;
}

/* 4. Option Items: Inactive items have dark gray text, hover soft background */
.sanad-custom-select-option {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.6rem !important;
    padding: 0.55rem 0.85rem !important;
    border-radius: 8px !important;
    font-size: 0.8125rem !important;
    color: #374151 !important;
    cursor: pointer !important;
    background-color: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    transition: background-color 0.15s ease, color 0.15s ease !important;
}
.sanad-custom-select-option:hover {
    background-color: #F3F4F6 !important;
    color: #111827 !important;
    border: none !important;
}

/* 5. Active/Selected State: subtle checkmark & primary color, NEVER a solid heavy background block */
.sanad-custom-select-option.is-selected {
    color: #2563EB !important;
    font-weight: 600 !important;
    background-color: transparent !important;
    border: none !important;
}
.sanad-custom-select-option.is-selected:hover {
    background-color: #F3F4F6 !important;
}
.sanad-custom-select-check {
    width: 1rem;
    height: 1rem;
    color: #2563EB !important;
    flex-shrink: 0;
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.15s ease, transform 0.15s ease;
}
.sanad-custom-select-option.is-selected .sanad-custom-select-check {
    opacity: 1 !important;
    transform: scale(1) !important;
}

/* Dark Theme Support */
body:not([data-dash-theme="light"]) .sanad-custom-select-trigger {
    background-color: #161922 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #E2E8F0 !important;
}
body:not([data-dash-theme="light"]) .sanad-custom-select-trigger:hover {
    border-color: rgba(255, 255, 255, 0.16) !important;
}
body:not([data-dash-theme="light"]) .sanad-custom-select-panel {
    background-color: #161922 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45) !important;
}
body:not([data-dash-theme="light"]) .sanad-custom-select-option {
    color: #94A3B8 !important;
}
body:not([data-dash-theme="light"]) .sanad-custom-select-option:hover {
    background-color: #1F2430 !important;
    color: #F1F5F9 !important;
}
body:not([data-dash-theme="light"]) .sanad-custom-select-option.is-selected {
    color: #60A5FA !important;
    background-color: transparent !important;
}
body:not([data-dash-theme="light"]) .sanad-custom-select-option.is-selected:hover {
    background-color: #1F2430 !important;
}
body:not([data-dash-theme="light"]) .sanad-custom-select-check {
    color: #60A5FA !important;
}