/* تعديلات خاصة بالجوال فقط لمتجر SILVER TV */
@media (max-width: 768px) {
    /* تعديل المستطيل الرئيسي (الهيدر) */
    .main-navbar {
        background-color: rgba(0, 0, 0, 0.75) !important; /* أسود شفاف أغمق */
        backdrop-filter: blur(12px) !important;
        border: 2px solid #00c3ff !important; /* إطار نيون واضح */
        /* إضاءة محيطية قوية جداً */
        box-shadow: 0 0 20px rgba(0, 195, 255, 0.7), inset 0 0 10px rgba(0, 195, 255, 0.3) !important;
        border-radius: 15px !important;
        width: 95% !important; /* توسيع عرض المستطيل ليعطي مساحة للوجو */
        margin: 0 auto !important;
        height: 75px !important; /* تحديد ارتفاع مناسب للجوال */
        display: flex !important;
        align-items: center !important;
    }

    /* توسيط اللوجو وتكبير حجمه */
  /* تنسيق حاوية اللوجو (الرابط) لضمان الرفع والتوسط */
.main-navbar a[aria-label="Store Home Page"] {
    position: absolute !important;
    left: 50% !important;
    /* السطر القادم هو المسؤول عن الرفع: جرب 35% إذا أردته مرتفعاً جداً */
    top: 47% !important; 
    transform: translate(-50%, -50%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 180px !important; 
    z-index: 99 !important;
}

/* تنسيق صورة اللوجو داخل الحاوية */
.main-navbar img {
    height: 120px !important; /* حجم متناسق وكبير بما يكفي */
    width: auto !important; 
    max-width: 240px !important; 
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto !important;

    /* إضاءة محيطية (وهج نيون) متناسقة */
    filter: drop-shadow(0 0 10px rgba(0, 195, 255, 0.7)) !important; 
    transition: all 0.3s ease !important;
}

/* تأثير التفاعل عند اللمس على الجوال */
.main-navbar img:active {
    transform: scale(1.05) !important;
    filter: drop-shadow(0 0 15px rgba(0, 195, 255, 1)) !important;
}
   
    /* تنسيق أيقونة القائمة الجانبية لتكون واضحة */
    .main-navbar svg {
        color: #00c3ff !important;
        width: 28px !important;
        height: 28px !important;
        filter: drop-shadow(0 0 5px rgba(0, 195, 255, 0.6)) !important;
    }
}
@media (max-width: 768px) {
    .static-banners-single-mobile-image {
        display: block !important;
        margin-left: auto !important;
        margin-right: auto !important;
        height: auto !important;
        position: relative !important;

        /* 1. المسافة العلوية (الارتفاع والنزول) */
        margin-top:155px !important; 

        /* 2. حجم البنر (العرض) */
        width: 100% !important; 
        min-width: 100% !important;

        /* 3. التكبير الإضافي (Scale) - وسيلة احترافية لتكبير الحجم يدوياً */
        transform: scale(1.05) !important; 

        /* إضاءة نيون وتنسيق */
        border: 2px solid rgba(0, 195, 255, 0.6) !important;
        box-shadow: 0 0 20px rgba(0, 195, 255, 0.5) !important;
        border-radius: 20px !important;
        box-sizing: border-box !important;
    }
}
/* تغيير لون جميع نصوص المتجر */
body, html, p, span, h1, h2, h3, h4, h5, h6, a, li, div {
    color: #EDEDED !important; /* اللون الأبيض */
}

/* لضمان تغيير ألوان الأيقونات والنصوص الصغيرة أيضاً */
:root {
    --primary-text-color: #EDEDED !important;
    --secondary-text-color: #f0f0f0 !important;
}

/* إخفاء قسم العنوان والمساحات الفارغة المرتبطة به */
.enhanced-fixed-products-heading {
    display: none !important;
}
/* التعديل الخاص بزر اشتراكات SILVER TV باللون الجديد */
#1-styled-tab-1 {
    color: #EDEDED !important; /* تغيير لون النص للرمادي الفاتح جداً */
    text-shadow: 0 0 3px rgba(237, 237, 237, 0.4); /* توهج خفيف يتناسب مع اللون الفاتح */
    transition: all 0.3s ease; /* نعومة في الحركة */
}

/* تعديل مظهر الخط السفلي عند الاختيار */
#1-styled-tab-1[aria-selected="true"] {
    border-bottom-color: #EDEDED !important;
    box-shadow: 0 4px 8px -2px rgba(237, 237, 237, 0.3); /* ظل هادئ تحت التبويب النشط */
}

/* تحسين المظهر عند تمرير الماوس */
#1-styled-tab-1:hover {
    color: #FFFFFF !important; /* يتحول للأبيض الصريح عند التأشير عليه */
    opacity: 1;
}
/* التعديل لإجبار المتجر على استخدام لونك المختار في الوضع الليلي */
.dark *.dark\:text-primary {
    color: #EDEDED !important;
}

/* 2. تأثير التوهج والارتفاع عند تمرير الماوس */
.product-card:hover {
    transform: translateY(-10px); /* رفع البطاقة للأعلى */
    box-shadow: 0 0 20px rgba(0, 229, 255, 0.4); /* توهج أزرق نيون حول البطاقة */
    border-color: #00E5FF !important; /* تحويل الحدود للون الأزرق النيون */
}


/* 4. تأثير الظل على الصورة يزول عند التمرير */
.product-card-content-media img {
    filter: brightness(0.8); /* تعتيم خفيف للصورة */
    transition: 0.3s;
}

.product-card:hover .product-card-content-media img {
    filter: brightness(1.1); /* تفتيح الصورة عند التمرير */
}
:root {
    /* 1. تغيير اللون الأساسي إلى أزرق نيون احترافي */
    --color-primary: #00E5FF !important; 
}

/* 2. إضافة تأثير التوهج لأي عنصر يستخدم اللون الأساسي (مثل السلة) */
.text-primary, .bg-primary, .border-primary, .s-product-card-cart-btn {
    transition: all 0.3s ease-in-out;
}

/* 3. جعل أيقونة السلة تبدو كأنبوب نيون مضيء */
.s-product-card-cart-btn {
    background-color: transparent !important;
    border: 2px solid #00E5FF !important;
    color: #00E5FF !important;
    /* تأثير التوهج الخارجي والداخلي */
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.7), inset 0 0 5px rgba(0, 229, 255, 0.5) !important;
}

/* 4. زيادة الإضاءة عند تمرير الماوس */
.s-product-card-cart-btn:hover {
    background-color: #00E5FF !important;
    color: #000 !important;
    box-shadow: 0 0 20px #00E5FF !important;
}
/* استهداف قسم البنرات الثابتة لرفعها للأعلى */
section.static-banners {
    margin-top:-57px!important; /* ارفع أو انزل الرقم السالب هنا للتحكم في الارتفاع */
    padding-top: 0 !important;    /* إلغاء أي مسافة داخلية علوية */
    position: relative;
    z-index: 10; /* لضمان ظهور البنر فوق العناصر الأخرى إذا تداخل معها */
}

/* التأكد من أن الحاوية الداخلية لا تترك مسافة */
.static-banners-wrapper {
    margin-top: 0 !important;
    padding-top: 0 !important;
}
/* إضافة إضاءة نيون متوهجة للبنر الثاني */
.static-banners-single-default-image {
    box-shadow: 0 0 20px rgba(0, 229, 255, 0.6) !important; /* توهج أزرق نيون حول الحواف */
    border: 1px solid rgba(0, 229, 255, 0.3) !important; /* إطار خفيف جداً بلون النيون */
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

/* زيادة شدة الإضاءة عند تمرير الماوس */
.static-banners-single-default-image:hover {
    box-shadow: 0 0 35px rgba(0, 229, 255, 0.9) !important; /* زيادة التوهج */
    transform: scale(1.01); /* تكبير بسيط جداً لإعطاء شعور بالتفاعل */
}
/* التحكم في حجم اللوجو وتجاوز كود h-20 */
.h-16, .h-16 img {
    height: 180px !important; /* غير هذا الرقم لتكبير أو تصغير الشعار يدوياً */
    width: auto !important;    /* يحافظ على تناسق العرض مع الطول */
    max-height: none !important; 
    
    /* إضافة إضاءة نيون زرقاء متوهجة */
    filter: drop-shadow(0 0 10px rgba(0, 229, 255, 0.8)) !important;
    
    /* حركة انسيابية للإضاءة */
    transition: all 0.3s ease-in-out !important;
}

/* زيادة التوهج عند تمرير الماوس */
.h-16 img:hover {
    filter: drop-shadow(0 0 15px rgba(0, 229, 255, 1)) !important;
    transform: scale(1.02); /* تكبير بسيط جداً عند التفاعل */
}
/* 1. استهداف الحاوية الشاملة لمتجر سلة بالكامل */
#app-main, .main-content, .app-content, main, .store-content {
    background-color: #141420 !important;
    background-image: radial-gradient(
        circle at 50% -5%, 
        rgba(0, 229, 255, 0.08) 0%, 
        rgba(20, 20, 32, 0) 60%
    ) !important;
    background-attachment: fixed !important;
    background-size: cover !important;
}

/* 2. إزالة أي ألوان خلفية بيضاء أو سوداء تفرضها الأقسام */
section, .s-block, .s-block-tabs, .s-block-header {
    background-color: transparent !important;
    background: transparent !important;
    border: none !important;
}

/* 3. تعديل متغيرات القالب الأساسية لضمان عدم ظهور الأبيض */
:root {
    --bg-primary: #141420 !important;
    --bg-secondary: #141420 !important;
    --color-primary: #00E5FF !important; /* لون النيون الخاص بـ SILVER TV */
}