/* --- 1. تنسيق الفاصل الضوئي (Divider Line) --- */
hr.divider-line {
    background-color: transparent !important;
    border: none !important;
    margin-top: 0px !important; 
    margin-bottom: 20px !important;
    height: 45px !important; 
    width: 100% !important;
    position: relative;
    overflow: visible !important;
    background: linear-gradient(
        to bottom, 
        rgba(207, 4, 4, 0.3) 0%, 
        rgba(207, 4, 4, 0.1) 50%, 
        transparent 100%
    ) !important;
    box-shadow: none !important;
}

hr.divider-line::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(207, 4, 4, 0.1), transparent) !important;
    box-shadow: 0 0 10px #CF0404 !important;
}

/* --- 2. تنسيق الأيقونات وحركة الطفو --- */
.feature-icon i {
    font-size: 40px;
    color: #fff;
    display: inline-block;
    animation: float 3s ease-in-out infinite;
}

@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-5px); }
    100% { transform: translateY(0px); }
}

.feature-card .feature-icon {
    background: transparent !important;
    margin-bottom: 15px !important;
    display: block;
    text-align: center;
}

.feature-card .feature-icon i {
    color: #FF0000 !important;
    font-size: 40px !important;
    transition: transform 0.3s ease !important;
}

.feature-card:hover .feature-icon i {
    transform: scale(1.2) rotate(6deg);
}

/* --- 3. تنسيق بطاقات المميزات (نسخة الكمبيوتر) --- */
@media (min-width: 992px) {
    .features {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important; 
        gap: 25px !important; 
        padding: 40px 20px !important;
    }

    .feature-card.glass {
        /* خلفية زجاجية خفيفة ومحسنة للكمبيوتر */
        background: rgba(255, 255, 255, 0.03) !important; 
        backdrop-filter: blur(15px) !important; 
        -webkit-backdrop-filter: blur(15px) !important;
        
        border: 1px solid rgba(255, 255, 255, 0.1) !important; 
        border-radius: 20px !important; 
        padding: 30px 20px !important;
        transition: all 0.3s ease-in-out !important; 
        text-align: center !important;
        box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2) !important; 
    }

    .feature-card.glass:hover {
        background: rgba(255, 255, 255, 0.07) !important; 
        transform: translateY(-8px) !important; 
    }

    .feature-card h3 { font-size: 20px !important; margin-bottom: 15px !important; }
    .feature-card p { color: rgba(255, 255, 255, 0.8) !important; font-size: 15px !important; line-height: 1.6 !important; }
}

/* --- 5. تعديلات الجوال (3 بطاقات في الصف) --- */
@media (max-width: 768px) {
    .features {
        display: grid !important; /* لضمان تفعيل الشبكة */
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
        padding: 10px !important;
    }

    .feature-card.glass {
        /* خلفية زجاجية للأجهزة المحمولة (أخف لضمان سلاسة التصفح) */
        background: rgba(255, 255, 255, 0.05) !important;
        backdrop-filter: blur(8px) !important; 
        -webkit-backdrop-filter: blur(8px) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        
        padding: 12px 5px !important;
        min-height: 160px !important;
        border-radius: 12px !important;
        
        /* تسريع الهاردوير للجوال لمنع اللاق */
        transform: translateZ(0); 
    }

    /* توحيد حجم الصورة في الجوال */
    .feature-icon img, 
    .feature-icon i {
        width: 32px !important; 
        height: 32px !important;
        font-size: 28px !important;
        margin-bottom: 8px !important;
    }

    /* ضبط النصوص لتناسب المساحة الضيقة */
    .feature-card h3 {
        font-size: 11px !important;
        line-height: 1.2 !important;
        margin-bottom: 5px !important;
        min-height: 26px !important; 
    }

    .feature-card p {
        font-size: 9.5px !important;
        line-height: 1.2 !important;
        padding: 0 2px !important;
        color: rgba(255, 255, 255, 0.7) !important;
    }
}

/* --- بطاقات المنتجات الزجاجية --- */
.product-card {
    background: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    transition: transform 0.3s ease !important;
}
.product-card:hover { transform: translateY(-5px) !important; }
/* --- الفواصل والعناوين (مسافات ثبت ايمك) --- */
hr.divider-line {
    background: linear-gradient(to bottom, rgba(207, 4, 4, 0.3) 0%, rgba(207, 4, 4, 0.1) 50%, transparent 100%) !important;
    border: none !important;
    height: 45px !important;
    position: relative;
}

@media (max-width: 768px) {
    .main-links-style-builder-heading.section-heading { display: flex !important; flex-direction: column !important; align-items: center !important; }
    .main-links-style-builder-heading img.mx-auto { margin-bottom: 15px !important; height: 110px !important; width: auto !important; display: block !important; }
    .main-links-style-builder-heading-title { font-size: 1.25rem !important; font-weight: 800 !important; text-align: center !important; }
}

@media (min-width: 1025px) {
    .main-links-style-builder-heading img.mx-auto { margin-bottom: 35px !important; display: block !important; }
}

   
/* --- NEXT SHOT - الـتنسيق الكامل للبار العلوي (النسخة المتجاوبة الذكية) --- */

@media (min-width: 1025px) {
    
    /* 1. الحاوية الرئيسية (ثابتة ومنظمة) */
    #navbar, .second-navbar {
        background: rgba(255, 255, 255, 0.04) !important;
        backdrop-filter: blur(15px) !important;
        -webkit-backdrop-filter: blur(15px) !important;
        border: none !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
        margin: 0 !important;
        width: 100% !important;
        border-radius: 0 !important;
        box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2) !important;
        display: flex !important;
        align-items: center !important;
        height: auto !important; /* يسمح بالتمدد الطفيف فقط عند نزول رابط */
        min-height: 60px !important;
    }

    /* 2. ضبط القائمة: السماح بالالتفاف الداخلي فقط */
    .menu-nav, desktop-nav, .s-nav-container {
        display: flex !important;
        flex-wrap: wrap !important; /* السماح للروابط بالنزول سطر */
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 5px 12px !important; /* مسافة أفقية 12 ورأسية 5 */
        width: 100% !important;
        padding: 5px 15px !important;
    }

    /* 3. تنسيق الروابط: حجم مرن لمنع التكدس */
    .nav-link {
        white-space: nowrap !important;
        /* تصغير الخط تلقائياً في الشاشات المتوسطة لتقليل النزول لسطر جديد */
        font-size: clamp(11px, 0.9vw, 13px) !important; 
        color: #ffffff !important;
        padding: 6px 10px !important;
        transition: all 0.3s ease !important;
        font-weight: 500 !important;
        flex-shrink: 1 !important;
    }

    .nav-link:hover {
        color: #ff0000 !important;
        text-shadow: 0 0 10px rgba(255, 0, 0, 0.5) !important;
        transform: translateY(-1px);
    }

    /* 4. القوائم المنسدلة (تعديل الموقع لضمان عدم التداخل) */
    .nav-item {
        position: relative !important;
    }

    .second-navbar .dropdown, 
    .nav-item .dropdown {
        background: rgba(10, 10, 10, 0.95) !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-radius: 12px !important;
        box-shadow: 0 15px 50px rgba(0, 0, 0, 0.6) !important;
        padding: 10px 0 !important;
        min-width: 180px !important;
        z-index: 9999 !important;
        top: 100% !important; /* التأكد من ظهورها تحت الرابط مباشرة */
    }

    .second-navbar .dropdown a:hover {
        background: rgba(255, 0, 0, 0.1) !important;
        color: #ff0000 !important;
    }

    /* 5. أيقونات الأدوات */
    .header-actions {
        display: flex !important;
        align-items: center !important;
        gap: 15px !important;
        margin-right: auto !important; /* دفع الأيقونات لليسار في حال كان التوجه RTL */
    }

    /* 6. منع القص */
    header, #header {
        overflow: visible !important;
    }
}

/* --- تنسيق الجوال (ثابت) --- */
@media (max-width: 1024px) {
    #navbar {
        background: rgba(10, 10, 10, 0.6) !important;
        backdrop-filter: blur(10px) !important;
    }
}
/* --- قسم الإحصائيات (الشبكة الزجاجية) --- */
.stats-grid {
    display: grid !important;
    gap: 15px !important;
    padding: 20px !important;
}

.stat-item {
    background: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 15px !important;
    padding: 20px 10px !important;
    text-align: center !important;
    will-change: transform;
}

@media (max-width: 768px) {
    .stats-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .stat-number { font-size: 20px !important; color: #ff4d4d !important; font-weight: bold !important; }
    .stat-label { font-size: 12px !important; color: #fff !important; }
}

@media (min-width: 992px) {
    .stats-grid { grid-template-columns: repeat(4, 1fr) !important; max-width: 1200px; margin: 0 auto; }
    .stat-item:hover { transform: translateY(-8px); background: rgba(255,255,255,0.1) !important; }
    .stat-number { font-size: 32px !important; }
}
/* NEXT SHOT - High Performance Neon Crosshair Overlay (Optimized) */

/* 1. الحاوية الرئيسية */
.main-links-style-builder-slider-single-content {
    position: relative !important;
    overflow: hidden !important;
    background-color: #000;
    will-change: transform;
    /* ضمان أن أي محتوى داخلي لا يغطي التأثير */
    isolation: isolate; 
}

/* 2. الدوائر المركزية (النيون النبضي) */
.main-links-style-builder-slider-single-content::before,
.main-links-style-builder-slider-single-content::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    opacity: 0;
    z-index: 10;
    pointer-events: none;
    border: 2px solid #FF0000;
    box-shadow: 0 0 10px #FF0000, inset 0 0 5px #FF0000;
    /* استخدام translate-center لضمان التوسط الدقيق */
    transform: translate(-50%, -50%) scale(0.3);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease !important;
}

/* الدائرة الخارجية */
.main-links-style-builder-slider-single-content::before {
    width: 60px;
    height: 60px;
}

/* الدائرة الداخلية */
.main-links-style-builder-slider-single-content::after {
    width: 30px;
    height: 30px;
}

/* 3. خطوط التصويب (العمودية والأفقية) */
/* تعديل الاستهداف لضمان العمل حتى لو تغير هيكل الـ HTML قليلاً */
.main-links-style-builder-slider-single-content-overlay::before,
.main-links-style-builder-slider-single-content-overlay::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background: #FF0000;
    box-shadow: 0 0 12px #FF0000;
    opacity: 0;
    z-index: 5;
    pointer-events: none;
    transition: transform 0.5s ease, opacity 0.3s ease !important;
}

/* الخط العمودي */
.main-links-style-builder-slider-single-content-overlay::before {
    width: 1.5px;
    height: 100%; /* زيادة الطول لتأثير أجمل */
    transform: translate(-50%, -50%) scaleY(0);
    transform-origin: center;
}

/* الخط الأفقي */
.main-links-style-builder-slider-single-content-overlay::after {
    width: 100%;
    height: 1.5px;
    transform: translate(-50%, -50%) scaleX(0);
    transform-origin: center;
}

/* --- 4. تفعيل التأثير عند الـ Hover --- */

.main-links-style-builder-slider-single-content:hover::before,
.main-links-style-builder-slider-single-content:hover::after {
    opacity: 0.9;
    transform: translate(-50%, -50%) scale(1);
}

.main-links-style-builder-slider-single-content:hover .main-links-style-builder-slider-single-content-overlay::before {
    opacity: 0.4;
    transform: translate(-50%, -50%) scaleY(1);
}

.main-links-style-builder-slider-single-content:hover .main-links-style-builder-slider-single-content-overlay::after {
    opacity: 0.4;
    transform: translate(-50%, -50%) scaleX(1);
}

/* --- 5. تأثير الغلتش المتقطع (Glitch Effect) --- */
/* تم تحسين الأنميشن ليكون أخف على المعالج */
@keyframes neonGlitch {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.9; }
    92% { transform: translate(-51%, -49%) scale(1.02); opacity: 0.6; }
    96% { transform: translate(-49%, -51%) scale(0.98); opacity: 0.9; }
}

.main-links-style-builder-slider-single-content:hover::before {
    /* تفعيل الأنميشن بعد انتهاء الـ transition الأساسي */
    animation: neonGlitch 3s infinite step-end 0.4s;
}

/* تحسين الأداء في الجوال (إخفاء الخطوط لتجنب تشتت المستخدم) */
@media (max-width: 768px) {
    .main-links-style-builder-slider-single-content-overlay::before,
    .main-links-style-builder-slider-single-content-overlay::after {
        display: none !important;
    }
    /* تصغير الدوائر قليلاً في الجوال ليكون الشكل ألطف */
    .main-links-style-builder-slider-single-content::before { width: 45px; height: 45px; }
    .main-links-style-builder-slider-single-content::after { width: 20px; height: 20px; }
}
/* --- 1. قسم آراء العملاء (تصميم زجاجي + Crosshair نيون) --- */

.s-reviews-swiper-slide {
    background: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(12px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(160%) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 25px !important;
    padding: 40px 20px !important;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4) !important;
    margin: 15px 0 !important;
    will-change: transform;
    transition: background 0.3s ease !important;
}

/* حاوية الصورة وعلامة التصويب */
.s-reviews-testimonial__avatar {
    position: relative !important;
    width: 85px !important;
    height: 85px !important;
    margin: 0 auto 25px auto !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    /* حل مشكلة القص والتمركز */
    overflow: visible !important; 
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* إنشاء علامة التصويب (Crosshair) */
.s-reviews-testimonial__avatar::before,
.s-reviews-testimonial__avatar::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background-color: rgba(255, 0, 0, 0.4) !important; /* تقليل الشفافية الافتراضية */
    z-index: 2;
    pointer-events: none;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

/* الخط الأفقي */
.s-reviews-testimonial__avatar::before {
    width: 115% !important; /* زيادة الطول قليلاً للمظهر الهجومي */
    height: 1.5px !important;
    transform: translate(-50%, -50%) scaleX(0.8); /* يبدأ أصغر قليلاً */
}

/* الخط العمودي */
.s-reviews-testimonial__avatar::after {
    width: 1.5px !important;
    height: 115% !important;
    transform: translate(-50%, -50%) scaleY(0.8);
}

/* تأثير النيون عند الحوم على الشريحة */
.s-reviews-swiper-slide:hover .s-reviews-testimonial__avatar::before,
.s-reviews-swiper-slide:hover .s-reviews-testimonial__avatar::after {
    background-color: #FF0000 !important;
    box-shadow: 0 0 15px #FF0000;
    transform: translate(-50%, -50%) scale(1.1); /* يتمدد عند الحوم */
    opacity: 1 !important;
}

/* تنسيق صورة العميل */
.s-reviews-testimonial__avatar img {
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: 2px solid rgba(255, 255, 255, 0.2) !important;
    z-index: 1;
    position: relative;
    transition: border 0.3s ease !important;
}

.s-reviews-swiper-slide:hover .s-reviews-testimonial__avatar img {
    border-color: #FF0000 !important;
}

/* نصوص الآراء */
.s-reviews-swiper-slide h4 {
    font-size: 1.1rem !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
    margin-top: 10px !important;
}

.s-reviews-swiper-slide blockquote {
    font-size: 1rem !important;
    color: rgba(255, 255, 255, 0.85) !important;
    line-height: 1.6 !important;
    margin-top: 15px !important;
}

/* نجوم التقييم النيون - استهداف شامل لـ SVG */
.s-reviews-swiper-slide .s-rating-stars svg,
.s-reviews-swiper-slide span.fill-\[var\(--color-primary\)\] {
    fill: #FF0000 !important;
    color: #FF0000 !important;
    filter: drop-shadow(0 0 3px #FF0000);
}
/* --- 2. تذييل الصفحة (توسيط وتكبير الشعار - نسخة محسنة) --- */

/* تقييد التنسيق داخل الفوتر فقط لضمان عدم تأثر باقي صفحات المتجر */
footer .space-y-4, 
.footer-wrapper .space-y-4 {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
}

/* حاوية الرابط */
footer .space-y-4 a[aria-label="Store Homepage"],
.footer-wrapper .space-y-4 a[aria-label="Store Homepage"] {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    margin-bottom: 15px !important; /* تقليل المسافة قليلاً للتناسق */
    transition: transform 0.3s ease !important;
}

/* حركة التكبير عند الحوم */
footer .space-y-4 a[aria-label="Store Homepage"]:hover {
    transform: scale(1.08) !important;
}

/* تنسيق الصورة (الشعار) */
footer .space-y-4 a[aria-label="Store Homepage"] img {
    height: 75px !important; /* حجم واضح للكمبيوتر */
    width: auto !important;
    max-width: 250px !important;
    object-fit: contain !important;
    /* تحسين الظل ليعطي عمق للوجو */
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.4)) !important;
}

/* --- تعديلات خاصة للجوال لضمان التناسق --- */
@media (max-width: 768px) {
    footer .space-y-4 a[aria-label="Store Homepage"] img {
        height: 55px !important; /* حجم أصغر قليلاً للجوال ليكون أكثر أناقة */
        max-width: 200px !important;
    }
}
/* --- NEXT SHOT - Full-Width Glass Footer (Final Fixed Version) --- */

/* 1. إجبار الحاوية الخارجية على كسر قيود العرض الجانبية */
.store-footer {
    width: 100vw !important; /* استخدام عرض الشاشة الكامل */
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    background: transparent !important;
    overflow: hidden !important;
}

/* 2. الحاوية الداخلية: التنسيق الزجاجي */
.store-footer__inner {
    max-width: 100% !important;
    width: 100% !important;
    padding: 50px 8% !important; /* زيادة المسافة الجانبية للمحتوى الداخلي */
    
    background: rgba(255, 255, 255, 0.04) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    
    border: none !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 0 !important;
    
    box-sizing: border-box !important;
}

/* 3. توزيع الأعمدة (الكمبيوتر) */
@media (min-width: 992px) {
    .store-footer__inner {
        display: grid !important;
        grid-template-columns: 2fr 1fr 1fr 1fr !important; /* تكبير عمود اللوجو والوصف */
        gap: 30px !important;
        align-items: start !important;
    }
}

/* 4. تنسيق النصوص والعناوين */
.store-footer h4, .footer-title, .store-footer__title {
    color: #ffffff !important;
    font-weight: 700 !important;
    margin-bottom: 20px !important;
    font-size: 1.1rem !important;
}

.store-footer a, .store-footer p {
    color: rgba(255, 255, 255, 0.8) !important;
    font-size: 0.95rem !important;
    line-height: 1.8 !important;
    transition: all 0.3s ease !important;
}

.store-footer a:hover {
    color: #ff0000 !important;
    padding-right: 5px; /* حركة بسيطة عند الحوم */
}

/* 5. تحسين الجوال (التمركز والترتيب) */
@media (max-width: 991px) {
    .store-footer__inner {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        padding: 40px 20px !important;
        backdrop-filter: blur(8px) !important;
    }

    .store-footer__social {
        margin-top: 20px !important;
        justify-content: center !important;
        gap: 20px !important;
    }

    /* موازنة المسافات بين القوائم في الجوال */
    .footer-column, .store-footer__inner > div {
        margin-bottom: 30px !important;
        width: 100% !important;
    }
}

/* 6. استثناء للأجهزة التي لا تدعم التمويه أو تفضل حركة أقل */
@media (prefers-reduced-motion: reduce) {
    .store-footer__inner {
        backdrop-filter: none !important;
        background: #0a0a0a !important;
    }
}
/* ============================================================
   1. تنسيق الكمبيوتر فقط (Desktop - Min Width 992px)
   يحتوي على: تأثيرات الزجاج القوية، الحركات، والتحويم (Hover)
   ============================================================ */
@media (min-width: 992px) {
    /* القائمة المنسدلة */
    .s-user-menu-dropdown {
        background: rgba(10, 10, 10, 0.85) !important;
        backdrop-filter: blur(15px) saturate(160%) !important;
        -webkit-backdrop-filter: blur(15px) saturate(160%) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-radius: 18px !important;
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7) !important;
        animation: userMenuFade 0.3s cubic-bezier(0.23, 1, 0.32, 1);
        will-change: transform, opacity;
    }

    /* أقسام الإعدادات */
    .s-user-settings-section {
        background: rgba(255, 255, 255, 0.04) !important;
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        border-radius: 15px !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        transform: translateZ(0); 
    }

    /* تأثيرات التحويم (Hover) - للكمبيوتر فقط */
    .s-user-settings-section:hover {
        border-color: rgba(255, 0, 0, 0.4) !important;
        transform: translateY(-4px);
        background: rgba(255, 255, 255, 0.08) !important;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    }

    .s-user-menu-dropdown-item-link:hover {
        background: rgba(255, 0, 0, 0.15) !important;
        padding-right: 22px !important;
        color: #ff4d4d !important;
    }

    .s-button-danger-outline:hover {
        background: #ff0000 !important;
        color: #ffffff !important;
        box-shadow: 0 0 20px rgba(255, 0, 0, 0.5) !important;
        transform: scale(1.05);
    }
}

/* ============================================================
   2. تنسيق الجوال فقط (Mobile - Max Width 991px)
   يحتوي على: تمويه أخف، استهلاك أقل للبطارية، ثبات تام
   ============================================================ */
@media (max-width: 991px) {
    /* القائمة المنسدلة للجوال */
    .s-user-menu-dropdown {
        background: rgba(15, 15, 15, 0.9) !important;
        backdrop-filter: blur(8px) !important; /* تمويه أخف للأداء */
        -webkit-backdrop-filter: blur(8px) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-radius: 12px !important;
        width: 94% !important;
        margin: 0 auto !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
    }

    /* أقسام الإعدادات للجوال */
    .s-user-settings-section {
        background: rgba(255, 255, 255, 0.05) !important;
        backdrop-filter: blur(5px) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-radius: 12px !important;
        margin-bottom: 12px !important;
        transform: none !important; /* منع أي حركة تسبب تعليق */
    }

    /* الروابط في الجوال (بدون إزاحة padding-right) */
    .s-user-menu-dropdown-item-link {
        padding: 12px 15px !important;
        color: #ffffff !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    }

    /* الأزرار في الجوال */
    .s-button-danger-outline {
        border-radius: 8px !important;
        background: rgba(255, 0, 0, 0.1) !important;
        transform: none !important;
    }

    /* منع التمرير العرضي */
    body, html {
        overflow-x: hidden !important;
        width: 100%;
    }
}

/* --- NEXT SHOT - Final Refined Login Modal & Footer --- */

/* 1. نافذة تسجيل الدخول (Modal) - معالجة الأداء */
.s-modal-body {
    background: rgba(10, 10, 10, 0.8) !important;
    backdrop-filter: blur(15px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(15px) saturate(160%) !important;
    border: 1px solid rgba(255, 0, 0, 0.2) !important;
    border-radius: 25px !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.9) !important;
    overflow: hidden !important;
    transform: translateZ(0); /* تسريع الهاردوير */
}

/* خلفية التعتيم */
.s-modal-overlay {
    background: rgba(0, 0, 0, 0.7) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
}

/* 2. تحويل زر الإغلاق إلى علامة تصويب Crosshair */
.s-modal-close {
    background: transparent !important;
    border: none !important;
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 100 !important;
}

.s-modal-close span svg {
    display: none !important; 
}

.s-modal-close span {
    position: relative !important;
    width: 20px !important; /* حجم متناسق */
    height: 20px !important;
    display: block !important; /* ضمان بقاء العنصر مرئياً */
}

/* الخطوط المتقاطعة */
.s-modal-close span::before,
.s-modal-close span::after {
    content: '';
    position: absolute;
    background-color: #ff0000;
    box-shadow: 0 0 8px #ff0000;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.s-modal-close span::before { width: 100%; height: 2px; } /* الأفقي */
.s-modal-close span::after { width: 2px; height: 100%; } /* العمودي */

/* تفاعل علامة التصويب عند الحوم (للكمبيوتر فقط) */
@media (min-width: 992px) {
    .s-modal-close:hover span::before,
    .s-modal-close:hover span::after {
        background-color: #ffffff; /* تغيير اللون للأبيض عند التصويب */
        box-shadow: 0 0 12px #ffffff;
    }
    .s-modal-close:hover {
        transform: rotate(90deg) scale(1.2) !important; /* دوران القناص */
    }
}

/* 3. روابط المنيو السفلية (Footer Menu) */
.s-menu-footer-item {
    transition: all 0.3s ease !important;
    position: relative;
    padding-right: 0 !important;
}

@media (min-width: 992px) {
    .s-menu-footer-item:hover {
        color: #ff0000 !important;
        text-shadow: 0 0 8px rgba(255, 0, 0, 0.6) !important;
        padding-right: 15px !important;
    }

    .s-menu-footer-item::before {
        content: '';
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 3px;
        height: 0;
        background-color: #ff0000;
        transition: height 0.3s ease;
        box-shadow: 0 0 8px #ff0000;
    }

    .s-menu-footer-item:hover::before {
        height: 70%;
    }
}

/* 4. معالجة الجوال (ضمان عدم التعليق) */
@media (max-width: 991px) {
    .s-modal-body {
        backdrop-filter: blur(10px) !important; /* تقليل التمويه للجوال */
        width: 95% !important;
        margin: 0 auto !important;
    }
    
    .s-modal-close {
        transform: none !important; /* إلغاء الحركات الثقيلة */
    }
    
    .s-menu-footer-item:hover {
        padding-right: 0 !important; /* منع اهتزاز القائمة عند اللمس */
    }
}
/* --- 4. تأثير اسم المتجر NextShot (النسخة الاحترافية) --- */

/* استهداف العنوان مع ضمان الانسيابية */
a.text-sm.mb-4 h3 {
    position: relative;
    transition: all 0.3s ease-in-out !important;
    display: inline-block;
    letter-spacing: 0px; /* قيمة افتراضية لمنع الاهتزاز */
    will-change: letter-spacing, text-shadow;
}

/* تأثير الحوم (Hover) */
a.text-sm.mb-4:hover h3 {
    color: #ff0000 !important;
    text-shadow: 0 0 15px rgba(255, 0, 0, 0.8), 0 0 5px rgba(255, 255, 255, 0.2) !important;
    letter-spacing: 1px; /* تباعد بسيط ليعطي طابع تقني */
}

/* مؤشر كتابة وميضي (معدل للغة العربية) */
a.text-sm.mb-4:hover h3::after {
    content: '_';
    color: #ff0000;
    margin-left: 5px; /* مسافة من اليسار لأن النص عربي */
    display: inline-block;
    animation: nextShotBlink 0.8s steps(2) infinite;
}

/* أنميشن الوميض */
@keyframes nextShotBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* --- تحسينات الأداء والتوافق --- */
@media (max-width: 768px) {
    /* منع الوميض في الجوال لتقليل تشتت المستخدم وتحسين الاستجابة */
    a.text-sm.mb-4:hover h3::after {
        display: none !important;
    }
    
    a.text-sm.mb-4:hover h3 {
        letter-spacing: 0px !important; /* إلغاء التباعد في الجوال */
    }

    .s-modal-body {
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
    }

    .s-menu-footer-item:hover {
        padding-right: 0 !important; 
        text-shadow: none !important; /* تقليل الجهد البصري في الجوال */
    }
}
/* --- NEXT SHOT - High Performance Glass Select Menu --- */

/* استهداف عنصر الاختيار عبر الـ ID لضمان دقة التنسيق */
#product-filter {
    /* إلغاء التنسيقات الافتراضية للمتصفح */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    
    /* تحديد الأبعاد والخط */
    width: 100%;
    max-width: 250px; /* أو أي مقاس يناسب تصميمك */
    padding: 10px 15px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #ffffff !important;
    cursor: pointer;
    
    /* الحدود والزوايا */
    border-radius: 10px !important;
    
    /* --- تأثير الزجاج (الخلفية والتمويه) --- */
    background: rgba(255, 255, 255, 0.05) !important; /* خلفية بيضاء شبه شفافة جداً */
    backdrop-filter: blur(10px) saturate(140%) !important; /* تمويه الخلفية ورفع تشبع الألوان للأداء */
    -webkit-backdrop-filter: blur(10px) saturate(140%) !important;
    
    /* حدود نيون خفيفة جداً */
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    
    /* ظل ناعم لإعطاء عمق */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
    
    /* --- تحسين الأداء الرسومي --- */
    transition: all 0.3s ease !important;
    will-change: background, border-color, box-shadow; /* تحضير المتصفح للتغيير */
    transform: translateZ(0); /* تفعيل تسريع الهاردوير بالـ GPU */
    backface-visibility: hidden;
}

/* --- تنسيق أيقونة السهم الافتراضية (RTL بالعربية) --- */
#product-filter {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'%3E%3C/path%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: left 12px center !important; /* وضع السهم جهة اليسار لأن النص عربي */
    background-size: 16px !important;
}

/* --- تأثير التفاعل (Hover & Focus) --- */
#product-filter:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 0, 0, 0.3) !important; /* لمحة نيون حمراء عند الحوم */
}

#product-filter:focus {
    outline: none !important;
    border-color: #ff0000 !important; /* حدود حمراء عند الاختيار */
    box-shadow: 0 0 15px rgba(255, 0, 0, 0.4) !important;
}

/* --- تنسيق الـ Options (ملاحظة هامة جداً للأداء) --- */
/* قائمة الخيارات التي تظهر عند النقر (Dropdown List) 
   لا يمكن جعلها زجاجية شفافة في معظم المتصفحات (وخصوصاً السافاري والكروم على الجوال) 
   لأنها Native UI. أفضل ممارسة للأداء هي تلوين خلفيتها بلون داكن ثابت ينسجم مع التصميم.
*/
#product-filter option {
    background-color: #1a1a1a !important; /* لون داكن ثابت للقائمة لمنع اللاق */
    color: #ffffff !important;
    padding: 10px !important;
    font-size: 14px !important;
}

/* --- معالجة الجوال --- */
@media (max-width: 768px) {
    #product-filter {
        backdrop-filter: blur(6px) !important; /* تقليل التمويه قليلاً للجوال لتوفير البطارية والأداء */
        -webkit-backdrop-filter: blur(6px) !important;
        font-size: 13px !important;
        max-width: 100%; /* عرض كامل على الجوال */
    }
}
/* --- NEXT SHOT - تحسين النص الفرعي (Subtitle Optimization) --- */

.product-card-content-meta-subtitle {
    /* 1. إصلاح المساحة والارتفاع */
    height: auto !important; /* السماح للنص بأخذ مساحته الطبيعية */
    min-height: 18px !important;
    margin-top: 4px !important;  /* مسافة تحت العنوان الرئيسي */
    margin-bottom: 8px !important; /* مسافة قبل السعر */
    
    /* 2. تنسيق الخط */
    font-size: 11.5px !important;
    line-height: 1.4 !important;
    padding: 0 5px !important; /* توازن المسافات الجانبية */
    
    /* 3. التعامل مع النص الطويل (لتحسين الأداء البصري) */
    display: block !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important; /* إضافة نقاط ... إذا كان النص أطول من البطاقة */
    
    /* 4. تعزيز الرندر (GPU Acceleration) */
    transform: translateZ(0);
    backface-visibility: hidden;
    color: var(--color-primary) !important;
}

/* تحسين استهداف حاوية السعر لضمان عدم الالتصاق */
.product-card-content-meta-pricing {
    margin-top: 5px !important;
    padding-top: 5px !important;
    display: flex !important;
    flex-direction: column !important;
}
/* --- NEXT SHOT - Glass Capsule Button (Ultimate Performance) --- */

.product-card-actions-add-to-cart.parallelogram-btn {
    /* 1. التصميم الزجاجي (Glassmorphism) */
    background: rgba(255, 0, 0, 0.15) !important; /* خلفية حمراء شفافة */
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    
    /* 2. الشكل الجديد (الكبسولة) */
    border-radius: 50px !important; /* تحويل الزر لشكل كبسولة */
    border: 1px solid rgba(255, 0, 0, 0.4) !important; /* حدود نيون رفيعة */
    
    /* 3. الخط والتنسيق */
    color: #ffffff !important;
    padding: 10px 24px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    letter-spacing: 0.5px;
    
    /* 4. إعدادات الأداء الفائق */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1) !important;
    
    /* تسريع الهاردوير (GPU) */
    transform: translateZ(0);
    will-change: transform, background-color, box-shadow;
    backface-visibility: hidden;
}

/* تأثير التفاعل (Hover) - للكمبيوتر */
@media (min-width: 1025px) {
    .product-card-actions-add-to-cart.parallelogram-btn:hover {
        background: rgba(255, 0, 0, 0.8) !important; /* يتحول للون كامل عند الحوم */
        box-shadow: 0 0 20px rgba(255, 0, 0, 0.5) !important;
        transform: translateY(-3px) scale(1.02) translateZ(0);
        border-color: #ff0000 !important;
    }
}

/* تأثير التفاعل (Active/Touch) - للجوال */
.product-card-actions-add-to-cart.parallelogram-btn:active {
    transform: scale(0.95) translateZ(0);
    background: rgba(255, 0, 0, 0.5) !important;
}

/* تنسيق الأيقونة */
.product-card-actions-add-to-cart-icon {
    width: 18px !important;
    height: 18px !important;
    fill: currentColor;
    filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.5));
}

/* تأثير الوميض الهادئ (Pulse) لجذب الانتباه بدون إزعاج المعالج */
.product-card-actions-add-to-cart.parallelogram-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transform: translateX(-100%);
}

.product-card-actions-add-to-cart.parallelogram-btn:hover::before {
    transition: transform 0.6s ease;
    transform: translateX(100%);
}

/* تحسين الأداء للجوال */
@media (max-width: 768px) {
    .product-card-actions-add-to-cart.parallelogram-btn {
        padding: 8px 18px !important;
        font-size: 13px !important;
        backdrop-filter: blur(4px) !important; /* تقليل التمويه قليلاً لرفع الأداء */
    }
}
/* --- NEXT SHOT - Infinite Scroll Button (Performance Tuned) --- */

.s-infinite-scroll-btn.s-button-primary {
    /* 1. التنسيق الأساسي والشفافية */
    background: rgba(255, 255, 255, 0.03) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    
    /* 2. الحدود والأبعاد */
    border: 1px solid rgba(255, 0, 0, 0.3) !important;
    border-radius: 50px !important; /* شكل كبسولة متناسق مع زر السلة */
    padding: 12px 40px !important;
    min-width: 200px !important;
    margin: 20px auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    /* 3. النص */
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    letter-spacing: 1px !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    
    /* 4. محرك الأداء (GPU Acceleration) */
    transform: translateZ(0);
    will-change: transform, background-color, border-color;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
}

/* تأثير التفاعل (Hover) - للكمبيوتر */
@media (min-width: 1025px) {
    .s-infinite-scroll-btn.s-button-primary:hover {
        background: rgba(255, 0, 0, 0.1) !important;
        border-color: #ff0000 !important;
        box-shadow: 0 0 20px rgba(255, 0, 0, 0.3) !important;
        transform: translateY(-2px) translateZ(0);
        color: #ff0000 !important;
    }
}

/* تنسيق النص الداخلي لضمان المحاذاة */
.s-infinite-scroll-btn-text {
    display: inline-block !important;
    transition: letter-spacing 0.3s ease !important;
}

.s-infinite-scroll-btn.s-button-primary:hover .s-infinite-scroll-btn-text {
    letter-spacing: 2px !important; /* حركة بسيطة تعطي شعوراً بالتفاعل */
}

/* تنسيق الـ Loader (الدائرة التي تظهر عند التحميل) */
.s-button-loader.s-infinite-scroll-btn-loader {
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    border-top-color: #ff0000 !important;
    border-radius: 50% !important;
    width: 18px !important;
    height: 18px !important;
    animation: sallaSpin 0.6s linear infinite !important;
}

@keyframes sallaSpin {
    to { transform: rotate(360vh); } /* استخدام vh كقيمة دوران لتحسين الرندر في بعض المتصفحات */
}

/* تحسين الأداء للجوال (Touch Response) */
@media (max-width: 1024px) {
    .s-infinite-scroll-btn.s-button-primary {
        padding: 10px 30px !important;
        font-size: 14px !important;
        backdrop-filter: blur(5px) !important; /* تقليل الجهد على المعالج */
    }
    
    .s-infinite-scroll-btn.s-button-primary:active {
        transform: scale(0.97) translateZ(0);
        background: rgba(255, 0, 0, 0.05) !important;
    }
}
/* --- NEXT SHOT - شارة التسليم الفوري (Performance Optimized) --- */

.product-card-content-media-promotional-title {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    background: linear-gradient(135deg, #ff0000 0%, #990000 100%) !important;
    color: #ffffff !important;
    padding: 5px 14px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    z-index: 20;
    
    /* تأثير هجومي (مائل قليلاً) */
    transform: skewX(-10deg);
    
    /* نيون خفيف */
    box-shadow: 0 0 12px rgba(255, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.15);
    
    /* تحسين الأداء للجوال والكمبيوتر */
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    pointer-events: none; /* لا تتداخل مع النقر على المنتج */
    
    /* تقنية الأداء: الـ GPU الـرندرة */
    will-change: transform;
    transform: skewX(-10deg) translateZ(0);
}

/* إضافة أيقونة "برق" قبل النص لتعزيز فكرة السرعة */
.product-card-content-media-promotional-title::before {
    content: "⚡"; 
    margin-left: 6px;
    font-size: 11px;
}

/* تحسينات الجوال */
@media (max-width: 768px) {
    .product-card-content-media-promotional-title {
        font-size: 11px !important;
        padding: 4px 10px !important;
        top: 8px !important;
        right: 8px !important;
        border-radius: 6px !important;
    }
}
/* --- NEXT SHOT - زر عرض الكل (إصلاح ثبات اللون الأبيض + أداء فائق) --- */

.enhanced-products-slider-action {
    display: flex !important;
    justify-content: center !important;
    margin-top: 30px !important;
}

.moon-btn {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px 40px !important;
    background: #000000 !important; 
    color: #ffffff !important; /* اللون الأساسي أبيض */
    font-size: 16px !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    border-radius: 8px !important;
    border: 1px solid rgba(255, 0, 0, 0.6) !important;
    overflow: hidden !important;
    
    /* تسريع العتاد GPU */
    transform: translateZ(0);
    will-change: transform, background;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* تأثير الحوم (Hover) على الحاوية */
.moon-btn:hover {
    background: #cc0000 !important; /* الخلفية تتحول للأحمر */
    box-shadow: 0 0 20px rgba(255, 0, 0, 0.5);
    transform: translateY(-2px) translateZ(0);
}

/* الحل الجذري: إجبار النص داخل span على البقاء أبيض عند الحوم */
.moon-btn:hover span, 
.moon-btn span:hover {
    color: #ffffff !important; 
    -webkit-text-fill-color: #ffffff !important; /* لضمان التوافق مع بعض المتصفحات */
}

/* طبقة اللمعة المتحركة */
.moon-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.15),
        transparent
    );
    transition: 0.6s;
    z-index: 2;
}

.moon-btn:hover::before {
    left: 100%;
}

.moon-btn span {
    position: relative;
    z-index: 3; /* التأكد من أن النص فوق طبقة اللمعة */
    margin-bottom: 0 !important;
    display: block !important;
    transition: none !important; /* إلغاء أي انميشن للنص نفسه لزيادة الأداء */
}

/* تحسينات الجوال */
@media (max-width: 768px) {
    .moon-btn {
        padding: 10px 32px !important;
        font-size: 14px !important;
        min-width: 160px;
    }
}
/* --- NEXT SHOT - بوكس "تم شراءه" التكتيكي الكامل --- */

/* 1. الحاوية الرئيسية */
.product-details-meta-quantity-sold {
    /* إلغاء الألوان الزرقاء الافتراضية وجعلها زجاجية مظلمة */
    background: rgba(10, 10, 10, 0.6) !important;
    backdrop-filter: blur(12px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(180%) !important;
    
    /* حدود نيون حمراء خفيفة */
    border: 1px solid rgba(255, 0, 0, 0.3) !important;
    border-radius: 15px !important;
    
    /* تحسين الأداء */
    transform: translateZ(0);
    will-change: transform;
    transition: border 0.3s ease !important;
}

/* 2. أيقونة الشعلة (SVG) */
.product-details-meta-quantity-sold-label-icon {
    color: #ff0000 !important; /* تغيير لون الشعلة للأحمر */
    filter: drop-shadow(0 0 5px rgba(255, 0, 0, 0.5));
}

/* 3. نص "تم شراءه" */
.product-details-meta-quantity-sold-label-text {
    color: rgba(255, 255, 255, 0.9) !important; /* نص أبيض هادئ */
    font-weight: 700 !important;
    margin: 0 !important;
}

/* 4. القيمة (الرقم + "مرة") */
.product-details-meta-quantity-sold-value {
    color: #ff3333 !important; /* الرقم باللون الأحمر النيون */
    font-weight: 900 !important;
    text-shadow: 0 0 10px rgba(255, 0, 0, 0.3);
    margin: 0 !important;
}

.product-details-meta-quantity-sold-value span {
    font-size: 1.2rem !important;
}

/* تأثير الحوم على البوكس كامل */
.product-details-meta-quantity-sold:hover {
    border-color: #ff0000 !important;
    background: rgba(20, 0, 0, 0.4) !important;
}

/* تحسينات الجوال */
@media (max-width: 768px) {
    .product-details-meta-quantity-sold {
        padding: 12px 15px !important; /* تقليل الحشو ليتناسب مع عرض الجوال */
        margin-bottom: 10px !important;
        backdrop-filter: blur(6px) !important; /* تقليل الجهد للحفاظ على البطارية */
    }
    
    .product-details-meta-quantity-sold-value {
        font-size: 1rem !important;
    }
}
/* --- NEXT SHOT - تنسيق وصف المنتج التكتيكي --- */

.product__description {
    /* تحويل الحاوية إلى صندوق زجاجي منظم */
    background: rgba(255, 255, 255, 0.03) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 15px !important;
    padding: 25px !important;
    color: #e0e0e0 !important;
    
    /* تحسين الأداء */
    transform: translateZ(0);
    will-change: transform;
}

/* تنسيق العناوين العريضة */
.article--main p strong {
    color: #ff0000 !important; /* تمييز العناوين باللون الأحمر */
    display: block !important;
    font-size: 1.1rem !important;
    margin-bottom: 12px !important;
    border-right: 3px solid #ff0000; /* خط تكتيكي جانبي */
    padding-right: 10px;
}

/* ترتيب الفقرات وتباعد الأسطر */
.article--main p {
    line-height: 1.8 !important; /* تباعد مريح للقراءة */
    margin-bottom: 20px !important;
    font-size: 0.95rem !important;
    text-align: justify !important;
}

/* تنسيق القوائم (النقاط) */
.article--main ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.article--main ul li {
    background: rgba(255, 255, 255, 0.05) !important;
    margin-bottom: 10px !important;
    padding: 12px 15px !important;
    border-radius: 8px !important;
    border: 1px solid rgba(255, 0, 0, 0.1) !important;
    transition: all 0.3s ease;
}

.article--main ul li:hover {
    border-color: rgba(255, 0, 0, 0.4) !important;
    background: rgba(255, 0, 0, 0.05) !important;
}

/* تنسيق القوائم الرقمية الداخلية */
.article--main ol {
    margin-top: 10px !important;
    padding-right: 20px !important;
    border-right: 1px dashed rgba(255, 255, 255, 0.2);
}

.article--main ol li {
    background: transparent !important;
    border: none !important;
    padding: 5px 0 !important;
    margin-bottom: 5px !important;
    font-size: 0.9rem !important;
}

/* تحسينات الجوال */
@media (max-width: 768px) {
    .product__description {
        padding: 15px !important;
        line-height: 1.6 !important;
    }
    
    .article--main p strong {
        font-size: 1rem !important;
    }
}
/* --- NEXT SHOT - ULTIMATE TACTICAL CSS --- */

/* 1. الحاوية الرئيسية للنموذج */
.product-form {
    background: rgba(10, 10, 10, 0.4) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    border: 1px solid rgba(255, 0, 0, 0.1) !important;
    border-radius: 24px !important;
    padding: 25px !important;
    transform: translateZ(0); 
    display: block !important;
}

/* 2. إصلاح حاوية الخيارات */
.s-product-options-option {
    display: flex !important;
    flex-direction: column !important; 
    align-items: flex-start !important; 
    width: 100% !important;
    margin-bottom: 25px !important;
}

.s-product-options-option-content {
    width: 100% !important;
    margin-top: 10px !important;
}

/* 3. تنسيق حقول الإدخال */
.s-form-control, 
select.s-form-control, 
input[type="text"].s-form-control, 
textarea.s-form-control {
    background: rgba(20, 20, 20, 0.8) !important;
    border: 1px solid rgba(255, 0, 0, 0.2) !important;
    color: #ffffff !important;
    border-radius: 12px !important;
    padding: 14px 18px !important;
    width: 100% !important;
    text-align: right !important;
    transition: all 0.2s ease-in-out !important;
}

.s-form-control:focus {
    border-color: #ff0000 !important;
    box-shadow: 0 0 12px rgba(255, 0, 0, 0.2) !important;
}

/* 4. تنسيق تسميات الخيارات */
.s-product-options-option-label {
    display: block !important;
    width: 100% !important;
    text-align: right !important;
}

.s-product-options-option-label b {
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.6;
}

.s-product-options-option-label span {
    color: #ff0000 !important;
}

/* 5. إصلاح تمارا الشامل (للجوال والكمبيوتر) */
salla-installment, 
.s-installment,
.tamara-installments-plan {
    display: block !important;
    margin: 20px 0 !important;
    padding: 15px !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border-radius: 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    clear: both !important;
}

/* استهداف مباشر لعنصر تمارا لضمان عمل الفلتر على الجوال */
tamara-widget, 
.tamara-widget,
#tamara-widget {
    filter: grayscale(1) invert(1) brightness(1.8) !important;
    -webkit-filter: grayscale(1) invert(1) brightness(1.8) !important;
    --tamara-primary-color: #ff0000 !important;
    display: block !important;
    min-height: 40px !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* 6. قسم السعر السفلي */
.center-between.w-full {
    background: rgba(255, 255, 255, 0.03) !important;
    padding: 18px !important;
    border-radius: 15px !important;
    border-right: 4px solid #ff0000 !important;
    margin-top: 25px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

.total-price {
    color: #ffffff !important; 
    font-size: 28px !important;
    font-weight: 900 !important;
}

.before-price {
    color: #ff3333 !important; 
    text-decoration: line-through !important;
    font-size: 16px !important;
    margin-right: 10px;
}

/* 7. تحسينات الجوال النهائية */
@media (max-width: 768px) {
    .product-form { padding: 15px !important; }
    .total-price { font-size: 22px !important; }
    .s-form-control { font-size: 14px !important; }
    
    salla-installment, .s-installment {
        padding: 10px !important;
        margin: 15px 0 !important;
    }

    /* إجبار الفلتر على العمل في متصفحات الجوال (Safari/Chrome) */
    tamara-widget {
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
    }
}

/* تأثير الظهور الناعم */
.s-product-options-option-container {
    animation: fadeIn 0.4s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
/* --- التنسيق النهائي المطور لشريط المنتج (NextShot) --- */

/* 1. الحاوية الرئيسية (التأثير الزجاجي الفاخر) */
.sticky-product-bar {
    background: rgba(10, 10, 10, 0.8) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-top: 1.5px solid rgba(255, 0, 0, 0.5) !important;
    padding: 12px 15px !important;
    box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.9) !important;
    z-index: 9999 !important;
}

/* 2. تصفير شامل لمنع تداخل المربعات والحدود الموروثة */
salla-add-product-button,
.s-add-product-button-main,
.s-add-product-button-mini-checkout,
.s-mini-checkout {
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
}

.s-add-product-button-main {
    gap: 12px !important;
    width: 100% !important;
}

/* 3. زر إضافة للسلة (الأحمر النيون - عالي الأداء) */
.s-button-element.s-button-primary {
    background: #ff0000 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 12px !important;
    height: 52px !important; /* توحيد الارتفاع مع باقي العناصر */
    flex: 2 !important;
    font-weight: 800 !important;
    font-size: 14px !important;
    box-shadow: 0 4px 15px rgba(255, 0, 0, 0.4) !important;
    transition: transform 0.2s ease, background 0.3s ease !important;
}

.s-button-element.s-button-primary:hover {
    background: #cc0000 !important;
    transform: translateY(-2px);
}

/* 4. زر اشتري الآن (حل مشكلة المربع وتوحيد الهوية) */
.s-add-product-button-mini-checkout-content {
    all: unset !important; /* حذف أي تنسيق مسبق يسبب المربع */
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    height: 52px !important;
    min-width: 85px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    background: transparent !important;
}

/* الأيقونة داخل زر اشتري الآن */
.s-add-product-button-mini-checkout-content svg {
    fill: #ff0000 !important;
    width: 22px !important;
    height: 22px !important;
    margin-bottom: 3px !important;
    filter: drop-shadow(0 0 5px rgba(255, 0, 0, 0.6)) !important;
    background: transparent !important;
}

/* نص اشتري الآن */
.s-add-product-button-mini-checkout-content span {
    color: #ffffff !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
    background: transparent !important;
}

.s-add-product-button-mini-checkout-content:hover {
    transform: scale(1.08);
}

/* 5. عداد الكمية (متناسق مع الارتفاع والزجاج) */
.s-quantity-input-container {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 0, 0, 0.2) !important;
    border-radius: 10px !important;
    height: 52px !important; /* نفس ارتفاع الأزرار */
    display: flex !important;
    align-items: center !important;
}

.s-quantity-input-input { 
    color: #fff !important; 
    background: transparent !important;
    font-weight: 700 !important;
}

.s-quantity-input-button svg { 
    fill: #ff0000 !important; 
}

/* 6. التجاوب الذكي للجوال والكمبيوتر */
@media (max-width: 480px) {
    .sticky-product-bar { padding: 10px !important; }
    .sticky-product-bar__name { display: none !important; }
    .s-add-product-button-main { gap: 8px !important; }
    
    .s-button-element.s-button-primary,
    .s-add-product-button-mini-checkout-content,
    .s-quantity-input-container {
        height: 48px !important; /* تقليل الارتفاع قليلاً للجوال */
    }
    
    .s-button-element.s-button-primary { font-size: 12px !important; }
    .s-add-product-button-mini-checkout-content span { font-size: 9px !important; }
}

@media (min-width: 1024px) {
    .s-add-product-button-main {
        max-width: 1200px;
        margin: 0 auto !important;
    }
}
/* --- NEXT SHOT: PERFORMANCE GLASS TAGS --- */

/* 1. حاوية الأوسمة (لضمان التوزيع والتجاوب) */
.flex.flex-wrap.gap-2.py-4 {
    display: flex !important;
    flex-wrap: wrap !important; /* السماح بالنزول لسطر جديد */
    gap: 10px !important;       /* مسافة متوازنة */
    padding: 15px 0 !important;
    justify-content: flex-start !important;
}

/* 2. التنسيق الأساسي للوسم الزجاجي */
.blog-single-content-footer-tags-single {
    display: inline-flex !important;
    align-items: center !important;
    background: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    border-radius: 50px !important;
    padding: 7px 16px !important; /* حشو متوازن */
    font-weight: 600 !important;
    font-size: 13px !important;    /* حجم مثالي للكمبيوتر */
    transition: all 0.3s ease !important; /* تسريع وقت الاستجابة */
    text-decoration: none !important;
    white-space: nowrap !important; /* منع انكسار الكلمة الواحدة */
    margin-bottom: 2px !important;
}

/* 3. التأثير عند تمرير الماوس (Hover) - مخصص للكمبيوتر */
@media (min-width: 1025px) {
    .blog-single-content-footer-tags-single:hover {
        background: rgba(255, 0, 0, 0.12) !important;
        border-color: #ff0000 !important;
        color: #ff0000 !important;
        box-shadow: 0 5px 15px rgba(255, 0, 0, 0.3) !important;
        transform: translateY(-2px) !important; /* حركة أخف وأسرع */
    }
}

/* 4. تحسينات الأداء والجوال (Mobile Optimization) */
@media (max-width: 768px) {
    .flex.flex-wrap.gap-2.py-4 {
        gap: 8px !important;
        padding: 10px 0 !important;
    }

    .blog-single-content-footer-tags-single {
        padding: 5px 12px !important;
        font-size: 11px !important; /* خط أصغر قليلاً للجوال */
        border-width: 1px !important;
    }

    /* تأثير اللمس للجوال بدلاً من الـ Hover */
    .blog-single-content-footer-tags-single:active {
        background: rgba(255, 0, 0, 0.2) !important;
        transform: scale(0.95) !important;
    }
}
/* --- NEXT SHOT: ADVANCED COMMENTS DESIGN --- */

/* 1. الحاوية العامة وقسم التعليقات */
.s-comments-product {
    background: rgba(10, 10, 10, 0.4) !important;
    backdrop-filter: blur(15px) !important;
    border-radius: 20px !important;
    padding: 25px !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    margin-top: 40px !important;
}

.s-comments-title {
    color: #ffffff !important;
    font-size: 24px !important;
    font-weight: 800 !important;
    margin-bottom: 25px !important;
    border-right: 4px solid #ff0000;
    padding-right: 15px;
}

/* 2. تنسيق صندوق الكتابة (Textarea) */
.s-comment-form-input {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 15px !important;
    color: #ffffff !important;
    padding: 15px !important;
    transition: all 0.3s ease !important;
    font-size: 14px !important;
}

.s-comment-form-input:focus {
    border-color: #ff0000 !important;
    background: rgba(255, 255, 255, 0.07) !important;
    box-shadow: 0 0 15px rgba(255, 0, 0, 0.1) !important;
}

/* 3. تنسيق بطاقة التعليق (Comment Item) */
.s-comments-item-wrapper {
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 18px !important;
    padding: 20px !important;
    margin-bottom: 15px !important;
    transition: transform 0.3s ease !important;
}

.s-comments-item-wrapper:hover {
    background: rgba(255, 255, 255, 0.04) !important;
    transform: translateX(-5px);
}

/* 4. تمييز رد الإدارة (Admin Reply) */
.s-comments-item-admin-wrapper {
    background: rgba(255, 0, 0, 0.03) !important;
    border-right: 3px solid #ff0000 !important;
    margin-right: 30px !important; /* إزاحة للرد */
    border-radius: 15px !important;
}

.s-comments-item-reply-icon svg {
    fill: #ff0000 !important;
    width: 18px !important;
}

/* 5. صور المستخدمين (Avatar) */
.s-comments-item-avatar-img {
    border-radius: 50% !important;
    border: 2px solid rgba(255, 255, 255, 0.1) !important;
    padding: 2px;
}

/* 6. النصوص والمعلومات داخل التعليق */
.s-comments-item-user-info-name-with-margin {
    color: #ff0000 !important; /* اسم المستخدم بالأحمر ليبرز */
    font-weight: 700 !important;
    font-size: 15px !important;
}

.s-comments-item-content p {
    color: #e0e0e0 !important;
    line-height: 1.8 !important;
    font-size: 14px !important;
}

.s-comments-item-timestamp {
    color: rgba(255, 255, 255, 0.4) !important;
    font-size: 11px !important;
}

/* 7. ملخص التقييمات (Reviews Summary) */
.s-reviews-summary-recommendation-percentage {
    color: #ff0000 !important;
    font-size: 32px !important;
    font-weight: 900 !important;
    text-shadow: 0 0 10px rgba(255, 0, 0, 0.3);
}

/* 8. الأزرار (إرسال / تحميل المزيد) */
.s-button-element, .s-infinite-scroll-btn {
    background: #ff0000 !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    transition: 0.3s !important;
}

.s-button-element:hover {
    box-shadow: 0 5px 15px rgba(255, 0, 0, 0.4) !important;
    transform: translateY(-2px);
}

/* 9. تحسينات التجاوب (Mobile Optimization) */
@media (max-width: 768px) {
    .s-comments-product {
        padding: 15px !important;
    }
    
    .s-comments-item-admin-wrapper {
        margin-right: 15px !important; /* تقليل الإزاحة في الجوال */
    }
    
    .s-comments-item-user-info-name-with-margin {
        font-size: 14px !important;
    }
    
    .s-comments-item-content p {
        font-size: 13px !important;
    }

    .s-comments-header {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 10px;
    }
}

/* 10. تنسيق القائمة المنسدلة (Filter) */
.s-comments-sort-input {
    background: rgba(255, 255, 255, 0.05) !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important;
    padding: 5px !important;
}
/* --- NEXT SHOT: OUT OF STOCK ALERT REDESIGN --- */

/* 1. الحاوية الرئيسية للتنبيه */
.bg-red-50.dark\:bg-red-900\/20 {
    background: rgba(255, 0, 0, 0.05) !important; /* خلفية حمراء شفافة جداً */
    backdrop-filter: blur(10px) !important;       /* تأثير زجاجي */
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 0, 0, 0.3) !important; /* حدود نيون خفيفة */
    border-radius: 15px !important;
    padding: 12px 20px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    box-shadow: 0 0 20px rgba(255, 0, 0, 0.1) !important;
    margin-bottom: 20px !important;
    animation: alertPulse 2s infinite ease-in-out; /* نبض خفيف لجذب الانتباه */
}

/* 2. الأيقونة (الأحمر النيون) */
.text-red-600.dark\:text-red-400 svg {
    color: #ff0000 !important;
    filter: drop-shadow(0 0 5px rgba(255, 0, 0, 0.6)) !important;
    width: 22px !important;
    height: 22px !important;
}

/* 3. نص التنبيه */
.bg-red-50.dark\:bg-red-900\/20 p {
    color: #ffffff !important; /* نص أبيض لتباين أفضل */
    font-weight: 800 !important;
    font-size: 14px !important;
    margin: 0 !important;
    letter-spacing: 0.3px;
}

/* 4. أنيميشن النبض (تحسين الأداء باستخدام opacity) */
@keyframes alertPulse {
    0% { border-color: rgba(255, 0, 0, 0.3); box-shadow: 0 0 10px rgba(255, 0, 0, 0.1); }
    50% { border-color: rgba(255, 0, 0, 0.6); box-shadow: 0 0 20px rgba(255, 0, 0, 0.2); }
    100% { border-color: rgba(255, 0, 0, 0.3); box-shadow: 0 0 10px rgba(255, 0, 0, 0.1); }
}

/* 5. تحسينات التجاوب (Responsive) */
@media (max-width: 768px) {
    .bg-red-50.dark\:bg-red-900\/20 {
        padding: 10px 15px !important;
        margin: 15px 10px !important; /* تقليل الهوامش في الجوال */
        border-radius: 12px !important;
    }
    
    .bg-red-50.dark\:bg-red-900\/20 p {
        font-size: 13px !important;
    }

    .bg-red-50.dark\:bg-red-900\/20 svg {
        width: 20px !important;
    }
}
/* --- NEXT SHOT: COUPON INPUT DESIGN --- */

/* 1. التنسيق الأساسي لحقل الإدخال */
#coupon-input.form-input {
    background: rgba(255, 255, 255, 0.05) !important; /* خلفية زجاجية داكنة */
    border: 1.5px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    color: #ffffff !important;
    height: 50px !important;
    padding: 0 15px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    transition: all 0.3s ease !important;
    outline: none !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

/* 2. التأثير عند النقر (Focus) */
#coupon-input.form-input:focus {
    border-color: #ff0000 !important; /* تحول الحدود للأحمر النيون */
    background: rgba(255, 0, 0, 0.03) !important;
    box-shadow: 0 0 15px rgba(255, 0, 0, 0.2) !important;
}

/* 3. تنسيق نص الـ Placeholder (ادخل كود الخصم) */
#coupon-input.form-input::placeholder {
    color: rgba(255, 255, 255, 0.4) !important;
    font-size: 13px !important;
    font-weight: 400 !important;
}

/* 4. معالجة الإزاحة لنظام سلة (الزر داخل الحقل) */
.rtl\:pl-24 {
    padding-left: 90px !important; /* ضمان عدم تداخل النص مع زر "تطبيق" */
}

/* 5. تحسينات الجوال (Mobile Optimization) */
@media (max-width: 768px) {
    #coupon-input.form-input {
        height: 46px !important; /* تقليل الارتفاع قليلاً ليتناسب مع شاشات الجوال */
        font-size: 13px !important;
        border-radius: 10px !important;
    }
    
    #coupon-input.form-input::placeholder {
        font-size: 12px !important;
    }
}

/* 6. تحسين الأداء: منع ظهور أي ظلال افتراضية من المتصفح */
#coupon-input.form-input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
/* --- NEXTSHOT: ORDERS TABLE & MOBILE CARDS --- */

/* 1. تنسيق الصف الرئيسي (Table Row) */
.s-orders-table-tbody-tr {
    background-color: #0d0d0d !important;
    border: 1px solid #1a1a1a !important;
    transition: all 0.3s ease-in-out !important;
    margin-bottom: 10px !important;
    display: table-row;
}

.s-orders-table-tbody-tr:hover {
    border-color: #ff0000 !important;
    background-color: #111 !important;
}

/* 2. تنسيق الخلايا والنصوص (TD & Content) */
.s-orders-table-tbody-tr-td {
    padding: 15px !important;
    color: #ffffff !important;
    border-bottom: 1px solid #1a1a1a !important;
}

/* رقم الطلب */
.s-orders-reference-id, .s-orders-copy-to-clipboard-button span {
    color: #ff0000 !important;
    font-weight: bold !important;
}

/* 3. زر النسخ (Clipboard Button) */
.s-orders-copy-to-clipboard-button button {
    background: #1a1a1a !important;
    border-radius: 6px !important;
    padding: 4px 8px !important;
    color: #eee !important;
}

/* 4. حالة الطلب (Status) */
.s-orders-status-container {
    background: rgba(255, 0, 0, 0.1) !important; /* خلفية حمراء شفافة */
    padding: 5px 12px !important;
    border-radius: 20px !important;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #ff4d4d !important; /* أحمر فاتح للتنبيه */
}

.s-orders-status-container i {
    color: #ff0000 !important;
}

/* 5. تحسين الأداء للجوال (Mobile Performance) */
@media (max-width: 768px) {
    /* تحويل الصف إلى بطاقة مستقلة */
    .s-orders-table-tbody-tr {
        display: block !important;
        margin: 15px 10px !important;
        padding: 15px !important;
        border-radius: 12px !important;
        background: #0d0d0d !important;
    }

    .s-orders-table-tbody-tr-td {
        display: flex !important;
        justify-content: space-between !important;
        padding: 8px 0 !important;
        border: none !important;
        font-size: 14px !important;
    }

    .s-orders-mobile-title {
        color: #666 !important; /* عنوان الحقل باهت */
        font-weight: normal !important;
    }

    /* تسريع استجابة اللمس */
    .s-orders-table-tbody-tr-td-content a {
        touch-action: manipulation;
    }
}

/* 6. الأداء البرمجي (Rendering Optimization) */
.s-orders-table-tbody-tr {
    will-change: transform, opacity; /* يخبر المتصفح بتجهيز كارت الشاشة للأنيميشن */
    contain: layout style;
}

.s-orders-copy-to-clipboard-button i {
    font-size: 14px !important;
}
/* --- NEXTSHOT: ORDERS TABLE HEADER (DESKTOP FOCUS) --- */

/* 1. تنسيق حاوية الرأس بالكامل */
.s-orders-table-head {
    background-color: #111111 !important; /* لون أفتح قليلاً من الخلفية للتمييز */
    border-radius: 10px 10px 0 0 !important;
    border-bottom: 2px solid #ff0000 !important; /* خط أحمر نيون يفصل الرأس عن البيانات */
}

/* 2. تنسيق خلايا الرأس (Th) */
.s-orders-table-head-tr-th {
    color: #ffffff !important;
    text-transform: uppercase;
    font-size: 14px !important;
    font-weight: 700 !important;
    padding: 15px 20px !important;
    text-align: right !important; /* محاذاة النص لليمين */
    letter-spacing: 0.5px;
    border: none !important;
}

/* 3. إضافة لمسة جمالية (اختياري: لمعة خفيفة) */
.s-orders-table-head-tr {
    background: linear-gradient(90deg, #0d0d0d 0%, #151515 100%) !important;
}

/* 4. تحسين الأداء (Performance) */
.s-orders-table-head {
    position: sticky; /* جعل الرأس ثابتاً عند التمرير إذا كان الجدول طويلاً */
    top: 0;
    z-index: 10;
    contain: layout; /* تحسين سرعة الحسابات الرسومية للمتصفح */
}

/* 5. التوافق مع الجوال (إخفاء الرأس التقليدي لأنه يظهر كعناوين داخل البطاقات) */
@media (max-width: 768px) {
    .s-orders-table-head {
        display: none !important; /* في الجوال يفضل إخفاء الرأس لأننا صممنا بطاقات مستقلة */
    }
}
/* --- NEXTSHOT: NOTIFICATIONS REDESIGN --- */

/* 1. الحاوية الرئيسية للإشعار */
salla-notification-item .s-notifications-item {
    background-color: #0d0d0d !important;
    border: 1px solid #1a1a1a !important;
    border-right: 4px solid #ff0000 !important; /* شريط أحمر جانبي للإشارة للتميز */
    border-radius: 12px !important;
    padding: 15px !important;
    margin-bottom: 12px !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* تأثير التحويم (Hover) للكمبيوتر */
salla-notification-item .s-notifications-item:hover {
    background-color: #151515 !important;
    border-color: #ff0000 !important;
    transform: translateX(-5px) !important; /* حركة بسيطة لليمين عند التأشير */
}

/* 2. الأيقونة (الجرس) */
.s-notifications-item-icon i {
    background-color: rgba(255, 0, 0, 0.1) !important;
    color: #ff0000 !important;
    padding: 10px !important;
    border-radius: 50% !important;
    font-size: 1.2rem !important;
}

/* 3. النصوص (العنوان والوصف) */
.s-notifications-item-content h4 {
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    margin-bottom: 4px !important;
}

.s-notifications-item-content p {
    color: #b0b0b0 !important;
    font-size: 13px !important;
}

/* 4. الوقت (Trailing) */
.s-notifications-item-content-trailing {
    color: #666 !important;
    font-size: 11px !important;
}

.s-notifications-item-content-trailing-icon {
    color: #ff0000 !important;
    margin-left: 5px;
}

/* 5. تحسينات الجوال (Mobile Performance) */
@media (max-width: 768px) {
    salla-notification-item .s-notifications-item {
        padding: 12px !important;
        margin: 8px 10px !important; /* مسافة جانبية لعدم الالتصاق بحواف الشاشة */
    }

    .s-notifications-item-content h4 {
        font-size: 14px !important;
    }

    /* تسريع استجابة اللمس وإلغاء تأثير التحويم الثقيل */
    salla-notification-item .s-notifications-item:hover {
        transform: none !important;
    }
}

/* 6. الأداء البرمجي (Rendering) */
salla-notification-item {
    contain: paint; /* يمنع إعادة رسم الصفحة بالكامل عند ظهور إشعار جديد */
    backface-visibility: hidden;
}

/* حالة الإشعار المقروء (لتقليل التباين قليلاً) */
.s-notifications-item-read {
    opacity: 0.9;
}
/*----------------*/
/* --- NEXTSHOT COMPLETE: ORDER DETAILS & SHIPPING --- */

/* 1. الحاوية الرئيسية والخطوط العامة */
.main-content {
    background-color: #080808 !important;
    border-radius: 12px;
    padding: 10px;
    contain: content;
}

.main-content h1 {
    color: #ffffff !important;
    border-right: 4px solid #ff0000;
    padding-right: 15px;
    font-weight: 800 !important;
}

/* 2. تنسيق شريط "بيانات الشحن" (الكلاس الجديد) */
.flex.flex-col.md\:flex-row.justify-between.bg-\[var\(--bg-primary\)\].px-5.py-3 {
    background-color: #111111 !important; /* لون متميز قليلاً */
    border: 1px solid #1a1a1a !important;
    border-bottom: none !important;
    color: #888 !important; /* جعل نصوص الشحن أقل بروزاً إذا كانت فارغة */
    border-radius: 8px 8px 0 0 !important;
}

.flex.flex-col.md\:flex-row.justify-between.bg-\[var\(--bg-primary\)\].px-5.py-3 span {
    font-weight: 500;
    letter-spacing: 0.3px;
}

/* 3. بطاقات المنتجات والطلبات */
.order-item, .single-order-header-item, .bg-\[var\(--bg-primary\)\].rounded-md {
    background-color: #0d0d0d !important;
    border: 1px solid #1a1a1a !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

/* 4. إبراز البيانات المهمة (باللون الأحمر) */
.text-primary, .sicon-sar, b, dd, .single-order-header-item b {
    color: #ff0000 !important;
}

/* خيارات المنتج (التي أدخلها العميل) */
.flow-root.border-gray-200 {
    background: #050505 !important;
    border: 1px solid #1a1a1a !important;
}

.flow-root dt { color: #888 !important; }
.flow-root dd { color: #ff0000 !important; font-weight: bold !important; }

/* 5. ملخص الفاتورة والإجمالي */
.bg-border-color.rounded-md.py-5 {
    background-color: #1a1a1a !important;
    border: 1px solid #ff0000 !important;
}

/* 6. الأزرار (Buttons) */
salla-button button, button[type="submit"] {
    border-radius: 8px !important;
    font-weight: bold !important;
    transition: 0.2s transform ease !important;
}

salla-button[color="primary"] button, button[type="submit"] {
    background-color: #ff0000 !important;
    color: #fff !important;
}

salla-button[fill="outline"] button {
    border-color: #ff0000 !important;
    color: #ff0000 !important;
}

/* 7. تحسينات الجوال (Mobile Optimization) */
@media (max-width: 768px) {
    /* جعل الهيدر العلوي بطاقات عمودية */
    tr.bg-\[var\(--bg-primary\)\] {
        display: flex !important;
        flex-direction: column !important;
        background: transparent !important;
        gap: 10px;
    }

    .single-order-header-item {
        width: 100% !important;
        border-radius: 8px !important;
    }

    /* شريط الشحن في الجوال */
    .flex.flex-col.md\:flex-row.justify-between.bg-\[var\(--bg-primary\)\].px-5.py-3 {
        text-align: center !important;
        padding: 10px !important;
    }

    /* تحسين اللمس */
    button, a {
        min-height: 44px;
    }
}

/* 8. الأداء الرسومي */
* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.order-item img {
    transition: transform 0.3s ease;
}

.order-item img:hover {
    transform: scale(1.05);
}