/* ============================================================
   MASTERGUARD — BLACK × GOLD THEME
   Mobile (Blur Sticky Bar) — Desktop (Original Style)
   Improved Price Display (Sale + Original Price)
============================================================ */

:root {
    --color-black: #0B0B0B;
    --color-gold: #FFD700;
    --color-gold-dark: #D9B200;
    --color-gray-dark: #222222;
    --color-silver: #CFCFCF;
    --text-on-black: #FFD700;
    --text-on-gray: #F5F5F5;
    --shadow-gold: 0 0 12px rgba(255,215,0,0.45);
    --shadow-card: 0 6px 18px rgba(0,0,0,0.4);
    --gradient-gold: linear-gradient(135deg, #FFD700, #D9B200);
    --gradient-black: linear-gradient(135deg, #0B0B0B, #141414);
    /* Carbon Fiber (للخلفية العامة فقط) */
    --bg-carbon:
        linear-gradient(135deg, rgba(255,255,255,0.040) 0 25%, rgba(0,0,0,0.0) 25% 50%, rgba(255,255,255,0.040) 50% 75%, rgba(0,0,0,0.0) 75% 100%),
        linear-gradient(45deg, rgba(255,255,255,0.028) 0 25%, rgba(0,0,0,0.0) 25% 50%, rgba(255,255,255,0.028) 50% 75%, rgba(0,0,0,0.0) 75% 100%),
        linear-gradient(135deg, #070707, #0e0e0e);
    /* صورة كاربون فايبر (حسب طلبك) */
    --bg-carbon-img: url("https://cdn.salla.sa/KjXvdQ/ZwhAHDZ6XbngK342X8bIinadBwLQubqhze7pjTNh.png");
}

/* Viewport Meta Support */
* {
    box-sizing: border-box !important;
}

/* تحسينات عامة للاستجابة */
img {
    max-width: 100% !important;
    height: auto !important;
}

/* Base Layout */
body, html {
    background: var(--gradient-black) !important;
    color: var(--text-on-black) !important;
    font-family: "Tajawal", sans-serif !important;
    overflow-x: hidden !important;
    -webkit-tap-highlight-color: transparent;
    scroll-behavior: smooth;
    font-size: 16px !important;
}

/* الخلفية العامة (الكاربون) للحاوية الرئيسية فقط، والمحتوى الداخلي يبقى مثل ما هو */
.app-inner {
    background-image: var(--bg-carbon-img), var(--bg-carbon) !important;
    background-repeat: repeat, repeat !important;
    background-size: 420px auto, 28px 28px, 28px 28px, auto !important;
    background-position: 0 0, 0 0, 14px 14px, center !important;
    background-attachment: fixed, fixed !important;
}

/* تحت 900px: رجّع أجزاء الهيدر/الأقسام للّون الأسود (ولا تخليها شفافة فتطلع الكاربون) */
@media (max-width: 899px) {
    /* أقسام مثل المميزات */
    main#main-content section.s-block,
    main#main-content section.s-block.container,
    main#main-content .container,
    main#main-content .page-container {
        background: var(--color-black) !important;
    }

    /* الهيدر (الأشرطة العلوية والـ nav) */
    header.store-header,
    header.store-header .top-navbar,
    header.store-header .top-navbar .container,
    header.store-header .container,
    #mainnav,
    #mainnav .inner,
    #mainnav .container {
        background: #0e0e0e !important;
    }

    /* الفوتر */
    footer.store-footer,
    footer.store-footer .store-footer__inner,
    footer.store-footer .container,
    footer.store-footer .md\\:flex.container,
    footer.store-footer .md\\:flex.items-center.justify-between.py-4.container {
        background: #0e0e0e !important;
    }

    /* أي عنصر يحمل bg-white على الجوال نخليه أسود بدل transparent */
    .bg-white,
    .s-bg-white,
    section.bg-white,
    div.bg-white {
        background: #0e0e0e !important;
    }
}

/* خلي منطقة المحتوى شفافة عشان الكاربون يبان "ورا" فقط */
main#main-content {
    background: transparent !important;
}

/* سلايدر الصور: رجّع خلفيته سوداء (بدل ما يظهر الكاربون من وراء) */
main#main-content section.s-block.s-block--photos-slider {
    background: var(--gradient-black) !important;
}

/* تحسينات للجوال */
@media (max-width: 768px) {
    body, html {
        font-size: 14px !important;
    }
    
    section, .s-block, .page-container, .container {
        padding: 12px !important;
        border-radius: 12px !important;
    }
}

/* تحسينات للكمبيوتر */
@media (min-width: 1200px) {
    body, html {
        font-size: 16px !important;
    }
    
    section, .s-block, .page-container, .container {
        padding: 24px !important;
    }
}

.bg-white, .s-bg-white, section.bg-white, div.bg-white {
    background: transparent !important;
}

section, .s-block, .page-container, .container {
    background: var(--color-black) !important;
    border-radius: 16px !important;
    border: 1px solid rgba(255,215,0,0.06) !important;
    padding: 16px !important;
    box-shadow: var(--shadow-card) !important;
}

/* إزالة السطر الفارغ */

/* Header */
#mainnav {
    background:#0e0e0e!important;
    height:106px!important;
    border-bottom:1px solid rgba(255,215,0,0.12)!important;
    box-shadow:0 5px 20px rgba(0,0,0,0.35)!important;
    transition:background .3s ease;
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
}
#mainnav:hover{background:#111!important;}

/* Top Navbar (شريط اللغة/البحث) — لازم يكون أسود بكامل عرض الشاشة بكل المقاسات */
header.store-header .top-navbar {
    background-color: #0e0e0e !important;
    background-image: none !important;
    position: relative !important;
    isolation: isolate !important;
}
header.store-header .top-navbar .container {
    background-color: #0e0e0e !important;
    background-image: none !important;
}

/* طبقة سوداء تغطي شريط top-navbar بالكامل (حل نهائي لمنع ظهور الكاربون) */
header.store-header .top-navbar::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background: #0e0e0e !important;
    background-image: none !important;
    z-index: 0 !important;
    pointer-events: none !important;
}
header.store-header .top-navbar > * {
    position: relative !important;
    z-index: 1 !important;
}

/* Footer main grid container — خلي خلفيته سوداء دائمًا */
footer.store-footer .store-footer__inner,
footer.store-footer .store-footer__inner > .container,
footer.store-footer .store-footer__inner .container {
    background-color: #0e0e0e !important;
    background-image: none !important;
}

/* Override أقوى للفوتر بالكامل (في حال كان فيه خلفيات/صور/طبقات أخرى) */
footer.store-footer,
footer.store-footer::before,
footer.store-footer::after,
footer.store-footer .store-footer__inner::before,
footer.store-footer .store-footer__inner::after {
    background: #0e0e0e !important;
    background-image: none !important;
    filter: none !important;
}

/* طبقة سوداء تغطي الفوتر بالكامل (حل نهائي لمنع ظهور الكاربون خلف أي جزء داخله) */
footer.store-footer {
    position: relative !important;
    isolation: isolate !important;
}
footer.store-footer::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background: #0e0e0e !important;
    z-index: 0 !important;
    pointer-events: none !important;
}
footer.store-footer > * {
    position: relative !important;
    z-index: 1 !important;
}

/* استهداف مباشر لهيكل الفوتر اللي أرسلته (container grid) */
footer.store-footer > .store-footer__inner[aria-label="footer"],
footer.store-footer > .store-footer__inner[aria-label="footer"] > .container,
footer.store-footer > .store-footer__inner[aria-label="footer"] > .container.grid,
footer.store-footer > .store-footer__inner[aria-label="footer"] > .container.grid.grid-col-1 {
    background: #0e0e0e !important;
    background-image: none !important;
}

/* Header للجوال */
@media (max-width: 768px) {
    #mainnav {
        height: 80px !important;
    }
}

/* Header للكمبيوتر */
@media (min-width: 1200px) {
    #mainnav {
        height: 106px !important;
    }
}

/* Text */
h1,h2,h3,h4{color:#fff!important;font-weight:800!important;}
p,span,li{color:#dcdcdc!important;font-size:15px;line-height:1.7;}

/* إصلاح العنوان الرئيسي - منع القطع */
h1#page-main-title,
#page-main-title {
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow: visible !important;
    text-overflow: clip !important;
    max-width: 100% !important;
    display: block !important;
}

/* تحسينات النصوص للجوال */
@media (max-width: 768px) {
    h1 { font-size: 24px !important; }
    h2 { font-size: 20px !important; }
    h3 { font-size: 18px !important; }
    h4 { font-size: 16px !important; }
    p, span, li { font-size: 14px !important; line-height: 1.6 !important; }
}

/* تحسينات النصوص للكمبيوتر */
@media (min-width: 1200px) {
    h1 { font-size: 32px !important; }
    h2 { font-size: 28px !important; }
    h3 { font-size: 24px !important; }
    h4 { font-size: 20px !important; }
    p, span, li { font-size: 16px !important; line-height: 1.8 !important; }
}

/* تعديل لون العناوين الفرعية (مثل السعر والكمية) */
label.form-label, label.form-label b, b.block {
    color: var(--color-gold) !important;
    font-weight: 800 !important;
}

/* ===============================
   PRICE DISPLAY STYLING
================================ */
.price-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
}

.price_is_on_sale {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.price_is_on_sale h2.total-price {
    color: var(--color-gold) !important;
    font-weight: 900 !important;
    font-size: 28px !important;
    text-shadow: 0 0 10px rgba(255,215,0,0.5), 0 0 20px rgba(255,215,0,0.3);
}

/* أحجام الأسعار للجوال */
@media (max-width: 768px) {
    .price_is_on_sale h2.total-price {
        font-size: 22px !important;
    }
.price_is_on_sale span.before-price {
        font-size: 16px !important;
    }
    .starting-or-normal-price h2.total-price {
        font-size: 22px !important;
    }
    .s-product-card-price {
        font-size: 20px !important;
    }
}

.price_is_on_sale span.before-price,
span.before-price,
.text-gray-500.line-through {
    color: #ff4444 !important;
    text-decoration: line-through;
    opacity: 1 !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    animation: pulse-red 2s ease-in-out infinite !important;
    text-shadow: 0 0 10px rgba(255, 68, 68, 0.5) !important;
}

@keyframes pulse-red {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
        text-shadow: 0 0 10px rgba(255, 68, 68, 0.5);
    }
    50% {
        opacity: 0.9;
        transform: scale(1.05);
        text-shadow: 0 0 20px rgba(255, 68, 68, 0.8);
    }
}

.price_is_on_sale .sicon-sar {
    font-size: 0.9em;
    color: var(--color-gold);
}

.starting-or-normal-price h2.total-price {
    color: var(--color-gold) !important;
    font-weight: 800 !important;
    font-size: 26px !important;
}

/* تحسين ترتيب السعر بعد الخصم */
.price-wrapper .price_is_on_sale h2.total-price:not(:empty) {
    order: 1;
}
.price-wrapper .price_is_on_sale span.before-price {
    order: 2;
}

/* Buttons */
.s-button-primary,.btn-primary{
    background:var(--gradient-gold)!important;color:#000!important;font-weight:800!important;
    border-radius:12px!important;box-shadow:var(--shadow-gold)!important;
    transition:transform .25s,box-shadow .25s;
    padding: 12px 24px !important;
    font-size: 16px !important;
    min-height: 44px !important; /* للجوال - حجم لمس مناسب */
}
.s-button-primary:hover,.btn-primary:hover{transform:scale(1.05);box-shadow:0 0 20px rgba(255,215,0,.8)!important;}

/* Buttons للجوال */
@media (max-width: 768px) {
    .s-button-primary, .btn-primary {
        padding: 10px 20px !important;
        font-size: 14px !important;
        min-height: 44px !important;
    }
}

/* Buttons للكمبيوتر */
@media (min-width: 1200px) {
    .s-button-primary, .btn-primary {
        padding: 14px 28px !important;
        font-size: 16px !important;
    }
}

.btn-outline,.s-button-outline{border:2px solid var(--color-gold)!important;color:var(--color-gold)!important;border-radius:10px!important;transition:background .25s;}
.btn-outline:hover{background:rgba(255,215,0,.12)!important;}

/* Product Cards */
custom-salla-product-card,
custom-salla-product-card.s-product-card-entry,
custom-salla-product-card.s-product-card-vertical,
custom-salla-product-card.s-product-card-fit-height,
.s-product-card-entry,
.s-product-card-vertical,
.s-product-card-fit-height {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
}

/* توحيد أبعاد البطاقات - القائمة والسلايدر (مدمج مع القواعد أدناه) */

custom-salla-product-card *,
custom-salla-product-card.s-product-card-entry * {
    background-color: transparent !important;
}

custom-salla-product-card .s-product-card-image,
custom-salla-product-card .s-product-card-image * {
    background-color: var(--color-gray-dark) !important;
}

.s-product-card,.s-product-card-content{
    background:var(--color-gray-dark)!important;border-radius:16px!important;border:1px solid rgba(255,215,0,.05)!important;
    box-shadow:var(--shadow-card)!important;overflow:hidden!important;
}
.s-product-card:hover{transform:translateY(-5px);box-shadow:0 12px 36px rgba(255,215,0,.2)!important;}
.s-product-card-content-title a{color:#fff!important;font-weight:700!important;display:-webkit-box!important;-webkit-line-clamp:2!important;line-clamp:2!important;-webkit-box-orient:vertical!important;overflow:hidden!important;}

.s-product-card-price{color:var(--color-gold)!important;font-weight:900!important;font-size:24px!important;text-shadow:0 0 8px rgba(255,215,0,.5);}

/* بطاقات المنتجات للجوال */
@media (max-width: 768px) {
    .s-product-card, .s-product-card-content {
        border-radius: 12px !important;
        padding: 12px !important;
    }
    .s-product-card-content-title a {
        font-size: 14px !important;
    }
}

/* بطاقات المنتجات للكمبيوتر */
@media (min-width: 1200px) {
    .s-product-card:hover {
        transform: translateY(-8px) !important;
    }
}
.price-old{color:#aaa!important;position:relative;opacity:.8;}
.price-old::after{content:"";position:absolute;top:50%;left:0;width:100%;height:2px;background:linear-gradient(90deg,transparent,var(--color-gold),transparent);transform:translateY(-50%);}

/* إصلاح خلفية منطقة الصورة - صور مربعة متناسقة */
custom-salla-product-card .s-product-card-image,
.s-product-card-entry .s-product-card-image,
.s-product-card-image {
    background: var(--color-gray-dark) !important;
    border-radius: 16px 16px 0 0 !important;
    overflow: hidden !important;
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    height: 0 !important;
    padding-bottom: 100% !important;
}

.s-product-card-image a,
.s-product-card-entry .s-product-card-image a {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    background: var(--color-gray-dark) !important;
    padding: 0 !important;
    margin: 0 !important;
}

.s-product-card-image-cover,
.s-product-card-entry .s-product-card-image-cover,
.s-product-card img,
.s-product-card-entry img,
.s-product-card-image img,
.s-product-card-image-cover.lazy,
.s-product-card-image-cover.loaded,
.s-product-card-image a img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    border-radius: 0 !important;
    display: block !important;
    background: var(--color-gray-dark) !important;
    transition: transform .3s ease !important;
}

.s-product-card img:hover,
.s-product-card-entry img:hover,
.s-product-card-image-cover:hover,
.s-product-card-image img:hover {
    transform: scale(1.03) !important;
}

/* للجوال */
@media (max-width: 768px) {
    custom-salla-product-card .s-product-card-image,
    .s-product-card-entry .s-product-card-image,
    .s-product-card-image {
        aspect-ratio: 1 / 1 !important;
        height: 0 !important;
        padding-bottom: 100% !important;
    }
}

/* Grid */
.s-products-list,.products-grid,.s-block-products,.salla-products-list{
    display:grid!important;gap:16px!important;grid-template-columns:repeat(auto-fill,minmax(160px,1fr))!important;
}

/* إجبار شبكة المنتجات حتى لو كانت داخل سلايدر/Swiper (لمنع ظهورها تحت بعض على الكمبيوتر) */
.s-products-slider-card .swiper-wrapper,
.s-block-products .swiper-wrapper {
    display: grid !important;
    gap: 16px !important;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
    align-items: start !important;
}

.s-products-slider-card .swiper-slide,
.s-block-products .swiper-slide {
    width: auto !important;
    height: auto !important;
}

/* توحيد أبعاد بطاقات المنتجات - القائمة والسلايدر */
.s-products-list-wrapper,
.s-products-list-vertical-cards {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
    gap: 20px !important;
    width: 100% !important;
    grid-auto-flow: row !important;
    align-items: start !important;
}

.s-products-list-wrapper custom-salla-product-card,
.s-products-list-wrapper .s-product-card-entry,
.s-products-slider-card custom-salla-product-card,
.s-products-slider-card .s-product-card-entry,
.swiper-slide custom-salla-product-card,
.swiper-slide .s-product-card-entry {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    margin: 0 !important;
    padding: 0 !important;
}

.s-products-list-wrapper .s-product-card-content,
.s-products-slider-card .s-product-card-content,
.swiper-slide .s-product-card-content {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 16px !important;
}

.s-products-list-wrapper .s-product-card-image,
.s-products-slider-card .s-product-card-image,
.swiper-slide .s-product-card-image {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
}

/* Grid للجوال */
@media (max-width: 768px) {
    .s-products-list,.products-grid,.s-block-products,.salla-products-list{
        gap: 12px !important;
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .s-products-list-wrapper,
    .s-products-list-vertical-cards {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
        grid-auto-flow: row !important;
    }
}

/* Grid للتابلت */
@media (min-width: 769px) and (max-width: 1023px) {
    .s-products-list,.products-grid,.s-block-products,.salla-products-list{
        gap: 14px !important;
        grid-template-columns: repeat(3, 1fr) !important;
    }
    
    .s-products-list-wrapper,
    .s-products-list-vertical-cards {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 14px !important;
        grid-auto-flow: row !important;
    }
}

/* منع انهيار الأعمدة إلى عمود واحد عند Zoom (110%+) على الديسكتوب */
@media (min-width: 900px) {
    .s-products-list,
    .products-grid,
    .s-block-products,
    .salla-products-list,
    .s-products-list-wrapper,
    .s-products-list-vertical-cards,
    .s-products-slider-card .swiper-wrapper,
    .s-block-products .swiper-wrapper {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
    }
}

/* Grid للكمبيوتر */
@media (min-width: 1200px) {
    .s-products-list,.products-grid,.s-block-products,.salla-products-list{
        gap: 20px !important;
        /* مرن مع تكبير المتصفح (Zoom): يقلل الأعمدة تدريجياً بدل ما يصير عمود واحد */
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
    }
    
    .s-products-list-wrapper,
    .s-products-list-vertical-cards {
        display: grid !important;
        /* مرن مع تكبير المتصفح (Zoom) */
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
        gap: 20px !important;
        grid-auto-flow: row !important;
    }

    /* نفس الفكرة للسلايدر على الكمبيوتر */
    .s-products-slider-card .swiper-wrapper,
    .s-block-products .swiper-wrapper {
        gap: 20px !important;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
    }
}

/* Grid للشاشات الكبيرة جداً */
@media (min-width: 1600px) {
    .s-products-list-wrapper,
    .s-products-list-vertical-cards {
        grid-template-columns: repeat(5, 1fr) !important;
    }
}

/* Navigation - تم نقل القواعد إلى قسم NAVIGATION MENU أدناه */

/* Inputs */
input,textarea,.form-input{
    background:#1a1a1a!important;border:1px solid #333!important;color:var(--text-on-gray)!important;border-radius:10px!important;
    transition:border .25s,background .25s;
    padding: 12px 16px !important;
    font-size: 16px !important;
}
input:focus,textarea:focus{border:1px solid var(--color-gold)!important;background:#111!important;outline:none!important;}

/* Inputs للجوال */
@media (max-width: 768px) {
    input, textarea, .form-input {
        padding: 10px 14px !important;
        font-size: 16px !important; /* مهم لمنع zoom في iOS */
    }
}

/* ============================================================
   HIDE DUPLICATE PRICE — إخفاء السعر المكرر
============================================================ */
/* إخفاء السعر من sticky product bar لأنه موجود في section.flex.bg-white */
.sticky-product-bar .price-wrapper,
section.sticky-product-bar .price-wrapper,
.sticky-product-bar .flex.whitespace-nowrap.price-wrapper.gap-4.items-center {
    display: none !important;
}

/* إظهار السعر في section.flex.bg-white */
section.flex.bg-white:not(.sticky-product-bar) .price-wrapper,
section.flex.bg-white:not(.sticky-product-bar) .center-between .price-wrapper,
section.flex.bg-white .price-wrapper,
section.flex.bg-white .center-between .price-wrapper,
.flex.whitespace-nowrap.price-wrapper.gap-4.items-center {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* إظهار عناصر السعر في section.flex.bg-white */
section.flex.bg-white .starting-or-normal-price,
section.flex.bg-white .price_is_on_sale:not(.hidden) {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* إخفاء العناصر التي تحتوي على class hidden */
section.flex.bg-white .starting-or-normal-price.hidden,
section.flex.bg-white .price_is_on_sale.hidden {
    display: none !important;
}

/* إظهار السعر العادي إذا لم يكن هناك خصم */
section.flex.bg-white .price-wrapper .starting-or-normal-price:not(.hidden) {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

section.flex.bg-white .price-wrapper .starting-or-normal-price h2.total-price {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* إخفاء السعر المكرر من القسم العلوي (ليس داخل section.flex.bg-white) */
section:not(.flex.bg-white):not(.sticky-product-bar) .flex.whitespace-nowrap.gap-4.items-center:not(.price-wrapper) {
    display: none !important;
}

/* ============================================================
   STICKY PRODUCT BAR — Only for Mobile
============================================================ */
@media (max-width:768px) {
  .sticky-product-bar {
      position: fixed !important;
      bottom: 0 !important;
      left: 0;
      right: 0;
      z-index: 999 !important;
      background: rgba(20, 20, 20, 0.8) !important;
      backdrop-filter: blur(16px) !important;
      -webkit-backdrop-filter: blur(16px) !important;
      border-top: 1px solid rgba(255,215,0,0.15) !important;
      padding: 14px 18px !important;
      box-shadow: 0 -4px 20px rgba(0,0,0,0.5) !important;
      transition: all 0.4s ease-in-out;
      animation: fadeUpBar .6s ease-out forwards;
  }
  
  /* إخفاء sticky-product-bar عندما تفتح صفحة الدفع */
  body:has(.mini-checkout),
  .mini-checkout ~ .sticky-product-bar,
  .mini-checkout ~ * .sticky-product-bar {
      display: none !important;
      visibility: hidden !important;
      opacity: 0 !important;
      transform: translateY(100%) !important;
  }
  
  /* طريقة بديلة - إخفاء عندما يكون mini-checkout موجود */
  .mini-checkout ~ section.sticky-product-bar,
  section.sticky-product-bar:has(~ .mini-checkout) {
      display: none !important;
  }

  .sticky-product-bar__quantity label {
      color: var(--color-gold) !important;
      font-weight: 700 !important;
  }

  .sticky-product-bar__btn button,
  .sticky-product-bar__btn .s-button-element {
      background: var(--gradient-gold) !important;
      color: #000 !important;
      font-weight: 800 !important;
      border-radius: 12px !important;
      box-shadow: 0 0 12px rgba(255,215,0,0.45) !important;
      transition: transform .25s ease, box-shadow .25s ease;
  }

  .sticky-product-bar__btn button:hover {
      transform: scale(1.05);
      box-shadow: 0 0 20px rgba(255,215,0,0.75) !important;
  }

  .s-quantity-input-button svg path {
      fill: var(--color-gold) !important;
  }

  @keyframes fadeUpBar {
      0% {opacity: 0; transform: translateY(100%);}
      100% {opacity: 1; transform: translateY(0);}
  }
}

/* إخفاء sticky-product-bar عندما تفتح صفحة الدفع (mini-checkout) */
.mini-checkout {
    z-index: 10000 !important;
    position: relative !important;
}

body:has(.mini-checkout) .sticky-product-bar,
body:has(.mini-checkout) section.sticky-product-bar,
#app:has(.mini-checkout) ~ .sticky-product-bar,
#app:has(.mini-checkout) ~ section.sticky-product-bar,
body:has(#app .mini-checkout) .sticky-product-bar,
body:has(#app .mini-checkout) section.sticky-product-bar,
.mini-checkout ~ .sticky-product-bar,
.mini-checkout ~ section.sticky-product-bar,
.sticky-product-bar.hidden-by-checkout,
section.sticky-product-bar.hidden-by-checkout {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    transform: translateY(200%) !important;
    pointer-events: none !important;
    z-index: -999 !important;
    position: fixed !important;
    bottom: -1000px !important;
    left: -9999px !important;
    height: 0 !important;
    max-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}

/* ============================================================
   STICKY PRODUCT BAR — تحسينات الأزرار والنبض
============================================================ */
.s-add-product-button-main,
.sticky-product-bar__btn {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
}

.s-add-product-button-main > *,
.sticky-product-bar__btn > * {
    width: 100% !important;
    flex: 1 !important;
}

.s-add-product-button-main button,
.sticky-product-bar__btn button,
.s-add-product-button-main .s-button-element,
.sticky-product-bar__btn .s-button-element,
.s-fast-checkout-button {
    width: 100% !important;
    min-height: 50px !important;
    height: 50px !important;
    padding: 12px 20px !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    position: relative !important;
    overflow: hidden !important;
    animation: pulse-gold 2s ease-in-out infinite !important;
}

@keyframes pulse-gold {
    0%, 100% {
        box-shadow: 0 0 15px rgba(255, 215, 0, 0.5),
                    0 0 30px rgba(255, 215, 0, 0.3),
                    0 0 45px rgba(255, 215, 0, 0.1);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 25px rgba(255, 215, 0, 0.8),
                    0 0 50px rgba(255, 215, 0, 0.5),
                    0 0 75px rgba(255, 215, 0, 0.3);
        transform: scale(1.02);
    }
}

/* تأثير النبض للزر الذهبي (إضافة للسلة) */
.s-button-primary,
.s-button-element.s-button-primary,
.sticky-product-bar__btn .s-button-primary {
    background: var(--gradient-gold) !important;
    color: #000 !important;
    animation: pulse-gold-button 2s ease-in-out infinite !important;
}

@keyframes pulse-gold-button {
    0%, 100% {
        box-shadow: 0 0 20px rgba(255, 215, 0, 0.6),
                    0 0 40px rgba(255, 215, 0, 0.4),
                    0 0 60px rgba(255, 215, 0, 0.2);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 30px rgba(255, 215, 0, 0.9),
                    0 0 60px rgba(255, 215, 0, 0.6),
                    0 0 90px rgba(255, 215, 0, 0.4);
        transform: scale(1.03);
    }
}

/* تأثير النبض لزر اشتري الآن */
.s-fast-checkout-button,
.s-add-product-button-mini-checkout button {
    background: linear-gradient(135deg, #1a1a1a, #2a2a2a) !important;
    border: 2px solid var(--color-gold) !important;
    color: var(--color-gold) !important;
    animation: pulse-outline 2s ease-in-out infinite !important;
}

@keyframes pulse-outline {
    0%, 100% {
        box-shadow: 0 0 15px rgba(255, 215, 0, 0.4),
                    0 0 30px rgba(255, 215, 0, 0.2),
                    inset 0 0 15px rgba(255, 215, 0, 0.1);
        border-color: var(--color-gold);
    }
    50% {
        box-shadow: 0 0 25px rgba(255, 215, 0, 0.7),
                    0 0 50px rgba(255, 215, 0, 0.4),
                    inset 0 0 25px rgba(255, 215, 0, 0.2);
        border-color: #FFED4E;
    }
}

/* تأثير hover إضافي */
.s-add-product-button-main button:hover,
.sticky-product-bar__btn button:hover,
.s-fast-checkout-button:hover {
    animation: pulse-gold 1s ease-in-out infinite !important;
    transform: scale(1.05) !important;
}

/* تحسينات للجوال */
@media (max-width: 768px) {
    .s-add-product-button-main,
    .sticky-product-bar__btn {
        gap: 10px !important;
    }
    
    .s-add-product-button-main button,
    .sticky-product-bar__btn button,
    .s-fast-checkout-button {
        min-height: 48px !important;
        height: 48px !important;
        font-size: 15px !important;
        padding: 10px 16px !important;
  }
}

/* ============================================================
   FEATURES SECTION — Black × Gold
============================================================ */
.s-block--features__item {
    background: #1a1a1a !important;
    border-radius: 16px !important;
    border: 1px solid rgba(255,215,0,0.1) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.4) !important;
    padding: 22px !important;
    text-align: center !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.s-block--features__item:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 35px rgba(255,215,0,0.2) !important;
}

.s-block--features__item .feature-icon {
    background: transparent !important;
    color: transparent !important;
    border: none !important;
}

.s-block--features__item .feature-icon i,
.s-block--features__item .feature-icon .sicon-check,
.s-block--features__item .feature-icon svg {
    color: var(--color-gold) !important;
    fill: var(--color-gold) !important;
    font-size: 32px !important;
    text-shadow: 0 0 10px rgba(255,215,0,0.4);
    margin-bottom: 10px !important;
    background: transparent !important;
}

.s-block--features__item .feature-icon svg path {
    fill: var(--color-gold) !important;
}

.s-block--features__item h2 {
    color: var(--color-gold) !important;
    font-weight: 800 !important;
    font-size: 20px !important;
    margin-top: 8px !important;
    margin-bottom: 6px !important;
}

.s-block--features__item p {
    color: var(--text-on-gray) !important;
    font-size: 15px !important;
    opacity: 0.9 !important;
}

@media (max-width:768px) {
    .s-block--features__item {
        padding: 18px !important;
    }
    .s-block--features__item h2 {
        font-size: 18px !important;
    }
}

/* ============================================================
   NAVIGATION MENU — Desktop & Mobile Styling
============================================================ */
.main-menu li a span {
    color: var(--text-on-gray) !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    transition: color 0.3s ease, text-shadow 0.3s ease;
}

.main-menu li a:hover span {
    color: var(--color-gold) !important;
    text-shadow: 0 0 8px rgba(255,215,0,0.6);
}

.main-menu li.active a span,
.main-menu li.current a span {
    color: var(--color-gold) !important;
    text-shadow: 0 0 10px rgba(255,215,0,0.5);
}

#mobile-menu {
    background: rgba(15,15,15,0.95) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border-top: 1px solid rgba(255,215,0,0.12) !important;
    border-bottom: 1px solid rgba(255,215,0,0.12) !important;
}

#mobile-menu .main-menu li {
    border-bottom: 1px solid rgba(255,215,0,0.08) !important;
    padding: 14px 0 !important;
    text-align: center !important;
}

#mobile-menu .main-menu li a span {
    color: var(--text-on-gray) !important;
    font-weight: 700 !important;
    font-size: 17px !important;
}

#mobile-menu .main-menu li a:hover span {
    color: var(--color-gold) !important;
    text-shadow: 0 0 8px rgba(255,215,0,0.6);
}

#mobile-menu .btn--close {
    color: var(--color-gold) !important;
    font-size: 22px !important;
    position: absolute !important;
    top: 14px !important;
    left: 16px !important;
}

#mobile-menu .btn--close:hover {
    transform: scale(1.1);
    text-shadow: 0 0 10px rgba(255,215,0,0.5);
}

#mobile-menu::before,
#mobile-menu [data-mm-spn-title],
#mobile-menu .mm-spn--main::before,
#mobile-menu .mm-spn__title,
#mobile-menu .mm-navbar__title {
    color: #fff !important;
    font-weight: 800 !important;
    font-size: 18px !important;
    text-align: center !important;
}

#mobile-menu {
    color: #fff !important;
}

.mburger, .sicon-menu {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 26px !important;
    color: var(--color-gold) !important;
    background: rgba(20,20,20,0.8) !important;
    border-radius: 10px !important;
    width: 42px !important;
    height: 42px !important;
    box-shadow: 0 0 15px rgba(255,215,0,0.2);
    transition: transform .3s ease, box-shadow .3s ease;
}

.mburger:hover, .sicon-menu:hover {
    transform: scale(1.1);
    box-shadow: 0 0 20px rgba(255,215,0,0.5);
}

@media (min-width: 993px) {
  #mainnav .main-menu li a span {
      color: var(--text-on-gray) !important;
      font-weight: 700 !important;
      font-size: 17px !important;
      text-shadow: 0 0 6px rgba(0,0,0,0.5);
  }
  #mainnav .main-menu li a:hover span {
      color: var(--color-gold) !important;
      text-shadow: 0 0 12px rgba(255,215,0,0.6);
  }
  #mainnav .main-menu li {
      display: inline-block !important;
      margin: 0 10px !important;
  }
  #mainnav .main-menu {
      background: transparent !important;
      display: flex !important;
      justify-content: center !important;
      align-items: center !important;
  }
}

@media (min-width: 1500px) {
  body, html, #mainnav, .container, section, .page-container {
      background: var(--gradient-black) !important;
      color: var(--text-on-gray) !important;
  }
  #mainnav .main-menu {
      background: transparent !important;
  }
  #mainnav .main-menu li a span {
      color: var(--text-on-gray) !important;
  }
}

/* ============================================================
   FIX — Handle Mid-Resolution White Background Issue (1029x637)
============================================================ */
@media (min-width: 900px) and (max-width: 1300px) {
  body, html, #mainnav, .container, section, .page-container {
      background: var(--gradient-black) !important;
      color: var(--text-on-gray) !important;
  }
  #mainnav .main-menu {
      background: transparent !important;
  }
  #mainnav .main-menu li a span {
      color: var(--text-on-gray) !important;
  }
}
/* ============================================================
   FIXED BANNER — تعديل حجم وتثبيت البانر
============================================================ */
.s-block--fixed-banner {
    position: sticky !important;
    top: 106px !important; /* تحت الـ header مباشرة */
    z-index: 100 !important;
    margin-bottom: 20px !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.s-block--fixed-banner .container {
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.s-block--fixed-banner .banner--fixed {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.s-block--fixed-banner .banner--fixed:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(255,215,0,0.3) !important;
}

.s-block--fixed-banner .banner--fixed img {
    width: 100% !important;
    height: auto !important;
    max-height: 200px !important;
    object-fit: cover !important;
    object-position: center !important;
    border-radius: 12px !important;
    display: block !important;
}

/* للشاشات الصغيرة */
@media (max-width: 768px) {
    .s-block--fixed-banner {
        top: 80px !important;
        margin-bottom: 15px !important;
    }
    
    .s-block--fixed-banner .banner--fixed img {
        max-height: 180px !important;
        /* المقاس الموصى به: 768x192 بكسل */
    }
}

/* للشاشات المتوسطة */
@media (min-width: 769px) and (max-width: 1199px) {
    .s-block--fixed-banner .banner--fixed img {
        max-height: 250px !important;
        /* المقاس الموصى به: 1200x300 بكسل (الحالي مناسب) */
    }
}

/* للشاشات الكبيرة */
@media (min-width: 1200px) {
    .s-block--fixed-banner .banner--fixed img {
        max-height: 400px !important;
        /* المقاس الموصى به: 1920x480 بكسل (نسبة 4:1) */
    }
}

/* للشاشات الكبيرة جداً */
@media (min-width: 1920px) {
    .s-block--fixed-banner .banner--fixed img {
        max-height: 480px !important;
        /* المقاس الموصى به: 1920x480 بكسل */
    }
}

/* ============================================================
   FIX — mm-ocd__content — Black × Gold Theme (Desktop Only)
============================================================ */

/* ============================================================
   FIX — إخفاء العناصر المكررة في القائمة
============================================================ */

/* إخفاء عناصر الجوال (lg:hidden) في الشاشات الكبيرة */
@media (min-width: 1024px) {
    .mm-ocd__content .main-menu li[class*="lg:hidden"],
    .mm-ocd__content li[class*="lg:hidden"],
    #mobile-menu .main-menu li[class*="lg:hidden"],
    #mobile-menu li[class*="lg:hidden"] {
        display: none !important;
    }
}

/* إخفاء عناصر الكمبيوتر (lg:!block) في الشاشات الصغيرة */
@media (max-width: 1023px) {
    .mm-ocd__content .main-menu li[class*="lg:!block"],
    .mm-ocd__content li[class*="lg:!block"],
    .mm-ocd__content .main-menu li.root-level,
    .mm-ocd__content li.root-level,
    #mobile-menu .main-menu li[class*="lg:!block"],
    #mobile-menu li[class*="lg:!block"],
    #mobile-menu .main-menu li.root-level,
    #mobile-menu li.root-level,
    #mobile-menu .main-menu li[class*="lg:!inline-block"],
    #mobile-menu li[class*="lg:!inline-block"] {
        display: none !important;
    }
}

/* أصغر من 1024px → الألوان الافتراضية (لا تعديلات) */

/* أكبر من 1024px → الثيم الأسود × الذهبي */
@media (min-width: 1024px) {
.mm-ocd__content {
        background: #0B0B0B !important;
    color: var(--text-on-gray) !important;
    border: 1px solid rgba(255,215,0,0.06) !important;
    box-shadow: var(--shadow-card) !important;
}

.mm-ocd__content li,
.mm-ocd__content a,
    .mm-ocd__content span,
    .mm-ocd__content .main-menu li,
    .mm-ocd__content .main-menu a,
    .mm-ocd__content .main-menu span {
        color: var(--text-on-gray) !important;
    font-weight: 700 !important;
    font-size: 15px !important;
}

    .mm-ocd__content a:hover span,
    .mm-ocd__content .main-menu a:hover span {
    color: var(--color-gold) !important;
    text-shadow: 0 0 8px rgba(255,215,0,0.5);
}

    .mm-ocd__content li,
    .mm-ocd__content .main-menu li {
    padding: 12px 10px !important;
    border-bottom: 1px solid rgba(255,215,0,0.08) !important;
}

    .mm-ocd__content a,
    .mm-ocd__content .main-menu a {
    display: block !important;
    text-decoration: none !important;
}
}

/* ============================================================
   COMMENTS SECTION — رمادي بدون شكل
============================================================ */
.s-comments,
.s-comments-product,
.s-comments-container,
.s-comments-header {
    background: var(--color-gray-dark) !important;
    background-color: var(--color-gray-dark) !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 16px !important;
}

/* Comments للجوال */
@media (max-width: 768px) {
    .s-comments,
    .s-comments-product,
    .s-comments-container,
    .s-comments-header {
        padding: 12px !important;
    }
}

/* Comments للكمبيوتر */
@media (min-width: 1200px) {
    .s-comments,
    .s-comments-product,
    .s-comments-container,
    .s-comments-header {
        padding: 24px !important;
    }
}

salla-comment-form,
salla-reviews-summary {
    background: transparent !important;
    background-color: transparent !important;
}

.s-comments *,
.s-comments-product *,
.s-comments-container * {
    background-color: transparent !important;
}

/* إزالة أي خلفيات بيضاء من العناصر الداخلية */
.s-comments .bg-white,
.s-comments-product .bg-white,
.s-comments-container .bg-white,
.s-comments .s-bg-white,
.s-comments-product .s-bg-white {
    background: var(--color-gray-dark) !important;
    background-color: var(--color-gray-dark) !important;
}

/* ============================================================
   MODAL — رمادي مع حدود ذهبية
============================================================ */
/* قاعدة قوية جداً لإجبار الخلفية على الـ modal - أولوية قصوى */
div[class*="s-modal-body"],
div[class*="modal-body"],
div.s-modal-body,
div.s-modal-align-middle,
div.s-modal-xs,
div.s-modal-padding,
div.s-modal-entering,
.s-modal-body.s-modal-align-middle.s-modal-xs.s-modal-padding.s-modal-entering,
.s-modal-body.s-modal-align-middle,
.s-modal-body.s-modal-xs,
.s-modal-body.s-modal-padding,
.s-modal-body.s-modal-entering,
div.s-modal-body.s-modal-align-middle,
div.s-modal-body.s-modal-xs,
div.s-modal-body.s-modal-padding,
div.s-modal-body.s-modal-entering,
div.s-modal-body.s-modal-align-middle.s-modal-xs,
div.s-modal-body.s-modal-align-middle.s-modal-padding,
div.s-modal-body.s-modal-align-middle.s-modal-entering,
div.s-modal-body.s-modal-align-middle.s-modal-xs.s-modal-padding,
div.s-modal-body.s-modal-align-middle.s-modal-xs.s-modal-entering,
div.s-modal-body.s-modal-align-middle.s-modal-xs.s-modal-padding.s-modal-entering {
    background: #222222 !important;
    background-color: #222222 !important;
    background-image: none !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* إجبار الخلفية على جميع العناصر التي تحتوي على هذه الـ classes */
[class*="s-modal-body"][class*="s-modal-align-middle"],
[class*="s-modal-body"][class*="s-modal-xs"],
[class*="s-modal-body"][class*="s-modal-padding"],
[class*="s-modal-body"][class*="s-modal-entering"] {
    background: #222222 !important;
    background-color: #222222 !important;
    background-image: none !important;
    opacity: 1 !important;
}

.s-modal-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    z-index: 9998 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow-y: auto !important;
    padding: 20px !important;
    pointer-events: none !important;
}

/* السماح بالتفاعل مع الـ modal فقط */
.s-modal-overlay .s-modal-body,
.s-modal-overlay [class*="s-modal-body"] {
    pointer-events: auto !important;
}

/* إزالة أي خلفية داكنة من الـ overlay */
.s-modal-overlay,
.s-modal-overlay.s-modal-entering,
div.s-modal-overlay,
div.s-modal-overlay.s-modal-entering,
[class*="s-modal-overlay"] {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

/* إخفاء s-modal-spacer لأنه يسبب مشاكل */
.s-modal-spacer {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.s-modal-body,
.s-modal-align-middle,
.s-modal-xs,
.s-modal-padding,
.s-modal-entering,
.s-modal-body.s-modal-align-middle,
.s-modal-body.s-modal-xs,
.s-modal-body.s-modal-padding,
.s-modal-body.s-modal-entering,
.s-modal-body.s-modal-align-middle.s-modal-xs,
.s-modal-body.s-modal-align-middle.s-modal-padding,
.s-modal-body.s-modal-align-middle.s-modal-entering,
.s-modal-body.s-modal-align-middle.s-modal-xs.s-modal-padding,
.s-modal-body.s-modal-align-middle.s-modal-xs.s-modal-entering,
.s-modal-body.s-modal-align-middle.s-modal-xs.s-modal-padding.s-modal-entering {
    background: #222222 !important;
    background-color: #222222 !important;
    background-image: none !important;
    border: 1px solid rgba(255,215,0,0.2) !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.6), 0 0 20px rgba(255,215,0,0.1) !important;
    color: var(--text-on-gray) !important;
    max-width: 90% !important;
    max-height: 90vh !important;
    margin: 60px auto 20px auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    opacity: 1 !important;
}

/* إجبار الخلفية على جميع حالات الـ modal */
div.s-modal-body,
div.s-modal-align-middle,
div.s-modal-xs,
div.s-modal-padding,
div.s-modal-entering,
.s-modal-body.s-modal-align-middle,
.s-modal-body.s-modal-xs,
.s-modal-body.s-modal-padding,
.s-modal-body.s-modal-entering,
.s-modal-align-middle.s-modal-xs,
.s-modal-align-middle.s-modal-padding,
.s-modal-align-middle.s-modal-entering,
.s-modal-xs.s-modal-padding,
.s-modal-xs.s-modal-entering,
.s-modal-padding.s-modal-entering {
    background: var(--color-gray-dark) !important;
    background-color: var(--color-gray-dark) !important;
    background-image: none !important;
    opacity: 1 !important;
}

.s-modal-body iframe,
.s-modal-body .hide-scroll {
    max-height: calc(90vh - 100px) !important;
    min-height: 300px !important;
    overflow-y: auto !important;
}

/* Modal للجوال */
@media (max-width: 768px) {
    .s-modal-body,
    .s-modal-align-middle,
    .s-modal-xs,
    .s-modal-padding,
    .s-modal-entering {
        max-width: 95% !important;
        max-height: 85vh !important;
        border-radius: 12px !important;
        margin: 40px auto 20px auto !important;
        overflow-y: auto !important;
    }
    
    .s-modal-body iframe,
    .s-modal-body .hide-scroll {
        max-height: calc(85vh - 80px) !important;
        min-height: 250px !important;
    }
}

/* Modal للكمبيوتر */
@media (min-width: 1200px) {
    .s-modal-body,
    .s-modal-align-middle,
    .s-modal-xs,
    .s-modal-padding,
    .s-modal-entering {
        max-width: 500px !important;
        max-height: 80vh !important;
    }
    
    .s-modal-body iframe,
    .s-modal-body .hide-scroll {
        max-height: calc(80vh - 100px) !important;
        min-height: 350px !important;
    }
}

.s-modal-header {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    padding: 16px !important;
}

/* تطبيق الألوان على جميع العناصر داخل الـ modal (باستثناء الـ iframe) */
.s-modal-body > *:not(iframe):not(.s-modal-header) *,
.s-modal-body > *:not(iframe) > *:not(iframe) * {
    color: #FFFFFF !important;
}

.s-modal-close {
    background: rgba(255,255,255,0.1) !important;
    border: none !important;
    border-radius: 8px !important;
    color: #FFFFFF !important;
    transition: all 0.3s ease !important;
    padding: 8px !important;
}

.s-modal-close:hover {
    background: rgba(255,215,0,0.2) !important;
    transform: scale(1.1) !important;
}

.s-modal-close svg,
.s-modal-close path {
    fill: #FFFFFF !important;
    transition: fill 0.3s ease !important;
}

.s-modal-close:hover svg,
.s-modal-close:hover path {
    fill: var(--color-gold) !important;
}

.s-modal-body .hide-scroll {
    background: var(--color-gray-dark) !important;
    border: none !important;
    border-radius: 0 !important;
}

/* إزالة أي خلفيات بيضاء من الـ modal */
.s-modal-body .bg-white,
.s-modal-body .s-bg-white,
.s-modal-header .bg-white,
.s-modal-header .s-bg-white {
    background: #222222 !important;
    background-color: #222222 !important;
}

/* إجبار الخلفية على جميع العناصر الداخلية في الـ modal */
.s-modal-body > div,
.s-modal-body > div > div,
.s-modal-align-middle > div,
.s-modal-xs > div,
.s-modal-padding > div,
.s-modal-entering > div {
    background: #222222 !important;
    background-color: #222222 !important;
    background-image: none !important;
    opacity: 1 !important;
}

/* إجبار الخلفية على الـ modal body نفسه بجميع الحالات */
.s-modal-body[class*="s-modal"],
.s-modal-body[class*="modal"],
div.s-modal-body[class*="s-modal"],
div.s-modal-body[class*="modal"] {
    background: #222222 !important;
    background-color: #222222 !important;
    background-image: none !important;
    opacity: 1 !important;
}

/* قاعدة نهائية قوية جداً - تستهدف جميع الـ classes المدمجة */
div.s-modal-body.s-modal-align-middle.s-modal-xs.s-modal-padding.s-modal-entering,
.s-modal-body.s-modal-align-middle.s-modal-xs.s-modal-padding.s-modal-entering,
[class="s-modal-body s-modal-align-middle s-modal-xs s-modal-padding s-modal-entering"] {
    background: #222222 !important;
    background-color: #222222 !important;
    background-image: none !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* إجبار الخلفية على العنصر مباشرة بغض النظر عن أي قواعد أخرى */
body .s-modal-body,
html .s-modal-body,
#app .s-modal-body,
.s-modal-overlay .s-modal-body,
body div.s-modal-body,
html div.s-modal-body,
#app div.s-modal-body,
.s-modal-overlay div.s-modal-body {
    background: #222222 !important;
    background-color: #222222 !important;
    background-image: none !important;
    opacity: 1 !important;
}

/* قاعدة نهائية نهائية - تستخدم جميع الطرق الممكنة */
.s-modal-overlay > div[class*="s-modal-body"],
.s-modal-overlay > div[class*="modal-body"],
.s-modal-overlay div.s-modal-body,
.s-modal-overlay div.s-modal-align-middle,
.s-modal-overlay div.s-modal-xs,
.s-modal-overlay div.s-modal-padding,
.s-modal-overlay div.s-modal-entering {
    background: #222222 !important;
    background-color: #222222 !important;
    background-image: none !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* تحسين ألوان النصوص داخل الـ modal - ألوان واضحة ومشرقة */
.s-modal-body {
    color: #F5F5F5 !important;
}

.s-modal-body h1,
.s-modal-body h2,
.s-modal-body h3,
.s-modal-body h4,
.s-modal-body h5,
.s-modal-body h6,
.s-modal-body .title,
.s-modal-body .heading,
.s-modal-body strong,
.s-modal-body b {
    color: #FFFFFF !important;
    font-weight: 800 !important;
}

.s-modal-body p,
.s-modal-body span:not(.s-login-modal-label):not(.s-login-modal-title),
.s-modal-body div:not(.s-login-modal-label):not(.s-login-modal-title),
.s-modal-body li {
    color: #E0E0E0 !important;
    font-weight: 500 !important;
}

.s-modal-body label:not(.s-login-modal-label) {
    color: #E0E0E0 !important;
    font-weight: 500 !important;
}

.s-modal-body a {
    color: var(--color-gold) !important;
        font-weight: 700 !important;
    }

.s-modal-body a:hover {
    color: #FFED4E !important;
    text-shadow: 0 0 8px rgba(255,215,0,0.6) !important;
}

/* تحسين حقول الإدخال - ألوان واضحة */
.s-modal-body input,
.s-modal-body textarea,
.s-modal-body select {
    background: #0f0f0f !important;
    border: 2px solid #444 !important;
    color: #FFFFFF !important;
    border-radius: 10px !important;
    font-weight: 500 !important;
}

.s-modal-body input::placeholder,
.s-modal-body textarea::placeholder {
    color: #999 !important;
    opacity: 1 !important;
}

.s-modal-body input:focus,
.s-modal-body textarea:focus,
.s-modal-body select:focus {
    border: 2px solid var(--color-gold) !important;
    background: #0a0a0a !important;
    outline: none !important;
    box-shadow: 0 0 10px rgba(255,215,0,0.3) !important;
}

/* تحسين الأزرار - ألوان واضحة ومشرقة */
.s-modal-body button,
.s-modal-body .btn,
.s-modal-body .s-button-element {
    color: #FFFFFF !important;
    font-weight: 700 !important;
}

.s-modal-body .btn-primary,
.s-modal-body .s-button-primary,
.s-modal-body button[type="submit"] {
    background: var(--gradient-gold) !important;
    color: #000000 !important;
    font-weight: 900 !important;
    border-radius: 12px !important;
    box-shadow: 0 0 15px rgba(255,215,0,0.5) !important;
    border: none !important;
}

.s-modal-body .btn-primary:hover,
.s-modal-body .s-button-primary:hover,
.s-modal-body button[type="submit"]:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 0 25px rgba(255,215,0,0.8) !important;
    background: linear-gradient(135deg, #FFED4E, #FFD700) !important;
}

/* تحسين الـ iframe */
.s-modal-body iframe,
iframe.hide-scroll {
    background: var(--color-gray-dark) !important;
    filter: brightness(1.3) contrast(1.2) invert(0) !important;
}

/* إجبار الخلفية على حاوية الـ iframe */
.s-modal-body > iframe,
.s-modal-body > div > iframe,
.s-modal-body iframe.hide-scroll {
    background: var(--color-gray-dark) !important;
    background-color: var(--color-gray-dark) !important;
}

/* إزالة أي شفافية من الـ modal body */
.s-modal-body,
.s-modal-body *:not(iframe) {
    background-color: inherit !important;
}

.s-modal-body:not(iframe) {
    background: var(--color-gray-dark) !important;
    background-color: var(--color-gray-dark) !important;
}

/* محاولة تطبيق الألوان على العناصر المحيطة بالـ iframe */
.s-modal-body > div:not(.s-modal-header) {
    color: #FFFFFF !important;
}

.s-modal-body > div:not(.s-modal-header) * {
    color: #FFFFFF !important;
}

/* ============================================================
   LOGIN MODAL ELEMENTS — عناصر تسجيل الدخول (أولوية عالية)
============================================================ */
/* جميع الطرق الممكنة لتطبيق الألوان - أولوية قصوى لتجاوز Tailwind */
.s-modal-body .s-login-modal-title,
.s-login-modal-title,
div.s-login-modal-title,
.s-modal-body div.s-login-modal-title,
.s-modal-body > div > div.s-login-modal-title,
.s-modal-body > div > div > div.s-login-modal-title,
.s-modal-body > div > div > div > div.s-login-modal-title,
[class*="login-modal-title"],
[class*="s-login-modal-title"],
.s-modal-entering .s-login-modal-title,
.s-modal-padding .s-login-modal-title,
.s-modal-xs .s-login-modal-title,
.s-modal-body .s-login-modal-header-content .s-login-modal-title {
    color: #FFFFFF !important;
    --tw-text-opacity: 1 !important;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1)) !important;
    font-weight: 800 !important;
    font-size: 24px !important;
    text-shadow: 0 0 5px rgba(255,255,255,0.3) !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

/* تطبيق مباشر على div مع class - تجاوز Tailwind */
div[class*="login-modal-title"],
div[class*="s-login-modal-title"],
div.s-login-modal-title[class*="s-login-modal-title"] {
    color: #FFFFFF !important;
    --tw-text-opacity: 1 !important;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1)) !important;
    font-weight: 800 !important;
    font-size: 24px !important;
}

/* تجاوز قواعد Tailwind CSS مباشرة */
.s-login-modal-title[style*="color"],
.s-login-modal-title[style*="--tw-text-opacity"] {
    color: #FFFFFF !important;
    --tw-text-opacity: 1 !important;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1)) !important;
}

.s-modal-body .s-login-modal-label,
.s-login-modal-label,
.s-modal-body label.s-login-modal-label,
label.s-login-modal-label,
.s-modal-body label[class*="login-modal-label"],
[class*="login-modal-label"],
[class*="s-login-modal-label"],
.s-modal-body label[class*="s-login-modal-label"],
.s-modal-entering .s-login-modal-label,
.s-modal-padding .s-login-modal-label,
.s-modal-xs .s-login-modal-label {
    color: #FFFFFF !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    text-shadow: 0 0 3px rgba(255,255,255,0.2) !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

/* تطبيق مباشر على label مع class */
label[class*="login-modal-label"],
label[class*="s-login-modal-label"] {
    color: #FFFFFF !important;
    font-weight: 700 !important;
    font-size: 16px !important;
}

/* تطبيق على جميع العناصر داخل الـ modal body */
.s-modal-body [class*="title"]:not([class*="subtitle"]):not([class*="sub-title"]),
.s-modal-body [class*="label"] {
    color: #FFFFFF !important;
}

/* محاولة تطبيق الألوان على جميع العناصر داخل الـ modal */
.s-modal-body div,
.s-modal-body span,
.s-modal-body label,
.s-modal-body p,
.s-modal-body h1,
.s-modal-body h2,
.s-modal-body h3,
.s-modal-body h4,
.s-modal-body h5,
.s-modal-body h6 {
    color: #FFFFFF !important;
}

/* استثناء للروابط */
.s-modal-body a {
        color: var(--color-gold) !important;
}

/* ============================================================
   LOGIN MODAL HEADER — عناصر رأس تسجيل الدخول
============================================================ */
.s-login-modal-header-inner,
.s-modal-body .s-login-modal-header-inner {
    background: transparent !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 16px 0 !important;
}

.s-login-modal-header-icon,
.s-modal-body .s-login-modal-header-icon,
.s-login-modal-header-inner .s-login-modal-header-icon {
    color: var(--color-gold) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.s-login-modal-header-icon svg,
.s-login-modal-header-icon path,
.s-modal-body .s-login-modal-header-icon svg,
.s-modal-body .s-login-modal-header-icon path {
    fill: var(--color-gold) !important;
        color: var(--color-gold) !important;
    width: 32px !important;
    height: 32px !important;
}

.s-login-modal-header-content,
.s-modal-body .s-login-modal-header-content {
    flex: 1 !important;
    background: transparent !important;
}

.s-login-modal-header-content .s-login-modal-title {
    color: #FFFFFF !important;
    font-weight: 800 !important;
    font-size: 24px !important;
    margin: 0 !important;
}

/* ============================================================
   CHECKOUT PAGE — صفحة الدفع مطابقة للهوية (مدمج مع القواعد أدناه)
============================================================ */
/* رأس صفحة الدفع */
.store-info,
.store-info__detail {
    padding: 20px !important;
    margin-bottom: 20px !important;
}

.store-info h1 {
    font-size: 24px !important;
}

.store-info .breadcrumb,
.store-info .breadcrumb-item,
.store-info .breadcrumb a {
    color: var(--text-on-gray) !important;
}

.store-info .breadcrumb a:hover {
    color: var(--color-gold) !important;
}

/* ملخص السلة */
.cart-drawer__header,
.cart-drawer__title {
    color: var(--color-gold) !important;
    font-weight: 800 !important;
}

.cart-item {
    border-bottom: 1px solid rgba(255,215,0,0.1) !important;
    padding: 16px !important;
}

.cart-item__name,
.cart-item__price {
    color: var(--text-on-gray) !important;
}

.cart-summary,
.cart-summary li {
    background: transparent !important;
}

.cart-summary h4 {
    font-weight: 700 !important;
}

.cart-summary .currency,
.cart-summary .currency b {
    font-size: 20px !important;
}

/* خطوات الدفع */
.title--step {
    padding: 20px !important;
}

.title--step h3 {
    color: var(--color-gold) !important;
    font-weight: 800 !important;
}

.title--step small {
    color: var(--text-on-gray) !important;
}

/* نماذج الدفع */
.form--payment,
.form--coupon {
    background: transparent !important;
}

.form--payment label {
    font-weight: 700 !important;
}

/* أزرار الدفع */
.btn--primary,
.btn--submit,
#submit_form_btn {
    padding: 14px 28px !important;
}

.btn--outline,
.btn--outline.dark {
    border: 2px solid var(--color-gold) !important;
    color: var(--color-gold) !important;
    background: transparent !important;
    border-radius: 10px !important;
}

.btn--outline:hover,
.btn--outline.dark:hover {
    background: rgba(255,215,0,0.1) !important;
}

/* طرق الدفع */
.list--payment-methods,
.payment_methods {
    background: transparent !important;
}

.btn--payment-option {
    background: var(--color-gray-dark) !important;
    border: 2px solid rgba(255,215,0,0.2) !important;
    border-radius: 12px !important;
}

.btn--payment-option.active {
    border-color: var(--color-gold) !important;
    box-shadow: 0 0 15px rgba(255,215,0,0.5) !important;
}

/* الكوبون */
.coupon-wrapper,
.form--coupon {
    padding: 16px !important;
}

.btn--coupon,
.btn--link {
    color: var(--color-gold) !important;
}

.btn--coupon:hover,
.btn--link:hover {
    text-decoration: underline !important;
}

/* رسائل الخطأ */
.ui.modal.failed,
.ui.active.inverted.dimmer.failed {
    background: rgba(0, 0, 0, 0.9) !important;
    color: #fff !important;
}

.ui.modal.failed .message {
    color: #fff !important;
}

/* Lightbox */
#lightbox-payment {
    background-color: rgba(0, 0, 0, 0.9) !important;
}

/* Notifications */
.store-notify,
.store-notify--alert {
    border: 1px solid rgba(255,215,0,0.2) !important;
    border-radius: 12px !important;
}

.store-notify p {
    color: var(--text-on-gray) !important;
}

/* Sections */
.sections-wrapper,
.section,
.section--payment {
    background: transparent !important;
    color: var(--text-on-gray) !important;
}

/* Checkbox */
.ui.checkbox label {
    color: var(--text-on-gray) !important;
}

.ui.checkbox input:checked ~ label {
    color: var(--color-gold) !important;
}

/* Bottom Sheet (Mobile Cart Summary) */
.bottom-sheet-wrapper,
.bottom-sheet-cont,
.bottom-sheet__header,
.bottom-sheet__content,
.bottom-sheet__items,
.bottom-sheet__scroll-content {
    background: var(--color-gray-dark) !important;
    color: var(--text-on-gray) !important;
}

.bottom-sheet__title {
    color: var(--color-gold) !important;
    font-weight: 800 !important;
}

.bottom-sheet__close {
    color: var(--text-on-gray) !important;
}

.bottom-sheet__close:hover {
    color: var(--color-gold) !important;
}

.cart-summary--bottom-sheet {
    background: var(--color-gray-dark) !important;
    border: 1px solid rgba(255,215,0,0.1) !important;
    border-radius: 16px !important;
    color: var(--text-on-gray) !important;
}

/* List Brands (Donation Message) */
.list--brands,
.list--brands li {
    background: transparent !important;
    color: var(--text-on-gray) !important;
}

/* Cart Items Preview */
.cart-items-preview,
.cart-items-row,
.cart-item-image {
    background: transparent !important;
}

/* Form Groups */
.form-group,
.form-group--w-icon,
.form-group--with-icon,
.form-group--icon-end {
    background: transparent !important;
}

.form-group label,
.form-group--w-icon label,
.form-group--with-icon label {
    color: var(--text-on-gray) !important;
    font-weight: 700 !important;
}

/* Input Wrapper */
.input-wrapper-expiry,
.relative {
    background: transparent !important;
}

.form-control.separator {
    background: transparent !important;
    border: none !important;
    color: var(--text-on-gray) !important;
}

/* Payment Methods Change */
.payment_methods__change {
    color: var(--color-gold) !important;
    cursor: pointer !important;
}

.payment_methods__change:hover {
    color: var(--color-gold) !important;
    text-decoration: underline !important;
}

/* Pay as Company */
.pay-as-company-container {
    background: var(--color-gray-dark) !important;
    border: 1px solid rgba(255,215,0,0.1) !important;
    border-radius: 12px !important;
    padding: 16px !important;
    margin-top: 20px !important;
}

.pay-as-company-container label,
.pay-as-company-container small {
    color: var(--text-on-gray) !important;
}

.pay-as-company-container .text-muted {
    color: var(--text-on-gray) !important;
    opacity: 0.8 !important;
}

/* Cart Summary Toggle */
.cart-summary--toggle,
.cart-summary--bg {
    background: transparent !important;
}

/* Total Amount Wrapper */
.total-amount-wrapper {
    background: transparent !important;
}

/* Cashback Message */
.cashback-message-lable-wrapper {
    background: transparent !important;
}

/* Clear Input Icon */
.clear-input {
    color: var(--text-on-gray) !important;
}

.clear-input:hover {
    color: var(--color-gold) !important;
}

/* Icons in Forms */
.sicon-debit-card-back,
.sicon-cancel {
    color: var(--text-on-gray) !important;
}

/* Row and Column */
.row,
.col-md-12,
.col-md-6,
.col-md-3,
.col-xs-12,
.col-xs-6 {
    background: transparent !important;
}

/* Text Utilities */
.text-semibold,
.text-nowrap,
.text-center,
.text-muted {
    color: var(--text-on-gray) !important;
}

/* Margin and Padding Utilities - Colors handled by parent elements */

/* Active State */
.active {
    color: var(--color-gold) !important;
}

.active svg {
    color: var(--color-gold) !important;
    fill: var(--color-gold) !important;
}

/* Disabled Inputs */
.form-control[disabled] {
    background: #1a1a1a !important;
    color: var(--text-on-gray) !important;
    opacity: 0.6 !important;
}

/* Button Small */
.btn--small {
    padding: 8px 16px !important;
    font-size: 14px !important;
}

/* Button Round */
.btn--round {
    border-radius: 50px !important;
}

/* Button Wide */
.btn--wide,
.wide {
    width: 100% !important;
}

/* Button Large */
.btn--large {
    padding: 16px 32px !important;
    font-size: 18px !important;
}

/* List Items */
.list li {
    background: transparent !important;
    color: var(--text-on-gray) !important;
}

/* Currency */
.currency,
.currency b,
.currency small {
    color: var(--color-gold) !important;
}

.currency i {
    color: var(--color-gold) !important;
}

/* RTL Support */
.rtl {
    direction: rtl !important;
}

/* Store Info Logo */
.store-info__logo img {
    border-radius: 8px !important;
}

/* Body Background */
.body.has-notify {
    background: var(--gradient-black) !important;
}

/* Container Margined */
.container--margined {
    background: transparent !important;
}

/* ============================================================
   CHECKOUT PAGE — دمج جميع قواعد صفحة الدفع (مدمج مع القواعد أعلاه)
============================================================ */
/* صفحة الدفع الرئيسية - إجبار تطبيق الألوان */
body .container.container--margined,
body #app.container,
body #app.container--margined,
body #app > div,
body #app > div > header,
body #app > div > div,
body #payment_process,
body #payment_process main,
body #payment_process .sections-wrapper,
body #payment_process .section,
body #cart_summary_desktop,
body #cart_summary_desktop > div,
body #cart_summary_desktop .cart-summary-wrapper {
    background: var(--gradient-black) !important;
    color: var(--text-on-gray) !important;
}

/* جميع العناصر في checkout */
#app * {
    background-color: inherit !important;
    color: var(--text-on-gray) !important;
}

/* العناوين في checkout */
#app h1,
#app h2,
#app h3,
#app h4,
#app .title--step h3,
#app .cart-drawer__title,
#app .bottom-sheet__title {
    color: var(--color-gold) !important;
}

/* الخلفيات الرمادية الداكنة - إجبار */
body .bottom-sheet__header,
body .bottom-sheet__content,
body .cart-drawer-wrapper,
body .cart-drawer-cont {
    background: var(--color-gray-dark) !important;
    border: 1px solid rgba(255,215,0,0.1) !important;
    border-radius: 16px !important;
    color: var(--text-on-gray) !important;
}

/* حقول الإدخال - إجبار */
body .form-group input,
body .form-group .form-control {
    background: #1a1a1a !important;
    border: 1px solid #333 !important;
    color: var(--text-on-gray) !important;
}

body .form-group input:focus,
body .form-group .form-control:focus {
    background: #111 !important;
    border: 1px solid var(--color-gold) !important;
    box-shadow: 0 0 10px rgba(255,215,0,0.3) !important;
}

/* الأزرار - إجبار */
body .btn--primary span,
body .btn--submit span {
    background: var(--gradient-gold) !important;
    color: #000 !important;
    border: none !important;
}

/* العملات والأسعار - إجبار */
body .cart-summary--total .currency,
body .cart-summary--total .currency b {
    font-size: 24px !important;
    text-shadow: 0 0 10px rgba(255,215,0,0.5) !important;
}

/* ============================================================
   LOADING SCREEN — شاشة التحميل مع شعار المتجر
============================================================ */
#page-loader {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(135deg, #0B0B0B, #141414) !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    z-index: 99999 !important;
    opacity: 1 !important;
    transition: opacity 0.5s ease !important;
}

#page-loader img {
    width: 200px !important;
    height: auto !important;
    max-width: 80% !important;
    display: block !important;
    margin: 0 auto !important;
    border-radius: 12px !important;
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.5) !important;
}

#page-loader > div {
    text-align: center !important;
}

/* للجوال */
@media (max-width: 768px) {
    #page-loader img {
        width: 150px !important;
        max-width: 70% !important;
    }
}

/* ============================================================
   FINAL MOBILE OVERRIDES (<= 899px)
   Fix: بعض العناصر كانت ترجع شفافة بسبب قواعد لاحقة مثل .bg-white { background: transparent !important; }
============================================================ */
@media (max-width: 899px) {
    /* الهيدر العلوي + الناف بار */
    header.store-header,
    header.store-header .top-navbar,
    header.store-header .top-navbar .container,
    header.store-header .container,
    #mainnav,
    #mainnav .inner,
    #mainnav .container {
        background-color: #0e0e0e !important;
        background-image: none !important;
    }

    /* الفوتر */
    footer.store-footer,
    footer.store-footer .store-footer__inner,
    footer.store-footer .container,
    footer.store-footer .md\\:flex.items-center.justify-between.py-4.container {
        background-color: #0e0e0e !important;
        background-image: none !important;
    }

    /* أي bg-white على الجوال لازم يكون أسود (ولا يكون transparent) */
    body .bg-white,
    body .s-bg-white,
    body section.bg-white,
    body div.bg-white {
        background-color: #0e0e0e !important;
        background-image: none !important;
    }
}

/* <= 600px: بعض قوالب سلة تغيّر بنية الهيدر/الفوتر وتضيف خلفيات/شفافية - نخليها موحّدة */
@media (max-width: 600px) {
    /* هيدر */
    header.store-header,
    header.store-header .top-navbar,
    header.store-header .top-navbar > .container,
    header.store-header .top-navbar .container.flex,
    #mainnav.main-nav-container,
    #mainnav .main-nav-container,
    #mainnav.shadow-default,
    #mainnav.bg-white,
    #mainnav .inner,
    #mainnav .inner.bg-inherit,
    #mainnav .container,
    #mainnav .flex.items-stretch.justify-between.relative {
        background-color: #0e0e0e !important;
        background-image: none !important;
    }

    /* فوتر */
    footer.store-footer,
    footer.store-footer__inner,
    footer.store-footer .store-footer__inner,
    footer.store-footer .store-footer__inner > .container,
    footer.store-footer .store-footer__inner .container,
    footer.store-footer .md\\:flex.items-center.justify-between.py-4.container {
        background-color: #0e0e0e !important;
        background-image: none !important;
    }

    /* أي عنصر bg-white داخل الهيدر/الفوتر على الجوال */
    header.store-header .bg-white,
    header.store-header .s-bg-white,
    footer.store-footer .bg-white,
    footer.store-footer .s-bg-white {
        background-color: #0e0e0e !important;
        background-image: none !important;
    }
}

/* ============================================================
   FINAL FOOTER GRID FIX
   (يضمن أن container grid داخل الفوتر يكون أسود دائمًا بكل المقاسات)
============================================================ */
footer.store-footer .store-footer__inner[aria-label="footer"] .container.grid,
footer.store-footer .store-footer__inner[aria-label="footer"] .container.grid.grid-col-1,
footer.store-footer .store-footer__inner[aria-label="footer"] .container.grid.grid-col-1.lg\\:grid-cols-6 {
    background-color: #0e0e0e !important;
    background-image: none !important;
    background: #0e0e0e !important;
}