/* Add custom CSS styles below */ 
/* =========================================
   StoreX — الإصدار (V93 Product Page Overhaul)
   + تحويل خيارات المنتج إلى بطاقات سايبربانك
   + تصميم زر الشراء والسعر
   + إصلاحات الهيدر السابقة
   ========================================= */

/* 1. الخطوط */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@700;900&display=swap');

:root {
    --sx-bg-dark: #05040a;
    --sx-card-bg: rgba(255, 255, 255, 0.03); 
    --sx-accent: #8c3cff; 
    --sx-accent-2: #00f3ff; 
    --sx-accent-3: #ff0055; 
    --sx-glass: rgba(10, 10, 20, 0.9); 
    --sx-border: rgba(255, 255, 255, 0.1);
}

/* === 🖱️ تخصيص شكل الماوس === */
body, html {
    cursor: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24'%3E%3Cpath fill='%2305040a' stroke='%2300f3ff' stroke-width='1.5' stroke-linejoin='round' d='M3 3l9.5 20.5 4-10.5 10.5-4L3 3z'/%3E%3C/svg%3E"), auto !important;
}

a, button, input[type="submit"], .s-button-element, .slide--cat-entry, .header-btn, .s-cart-summary-wrapper, .navbar-brand, [role="button"], .s-slider-nav-arrow, .swiper-button-prev, .swiper-button-next, .s-contacts-item, .s-user-menu-trigger, .s-reviews-testimonial, .s-block--features__item, #product-filter, #cart-submit, .s-product-options-digital-card-option {
    cursor: pointer !important;
}

/* تطبيق الخط */
body, button, input, select, textarea, .s-app, h1, h2, h3, h4, h5, h6, span, p, a, li, div { 
    font-family: 'Cairo', sans-serif !important; 
}

/* 2. الخلفية العامة */
body, html, .s-app, .s-app-body, .content, .s-block {
    background-color: #05040a !important; 
    background-image: 
        radial-gradient(circle at 0% 0%, rgba(140, 60, 255, 0.1), transparent 50%),
        radial-gradient(circle at 100% 100%, rgba(0, 243, 255, 0.05), transparent 50%),
        linear-gradient(180deg, #05040a 0%, #0a0914 100%) !important;
    background-attachment: fixed !important;
    background-size: cover !important;
    color: #f5f5ff !important;
    min-height: auto !important;
}

/* 3. الهيدر (Header) - التعديل هنا لإزالة الخلفية الصغيرة */
.store-header, .fixed-header, .sticky-header {
    background: var(--sx-glass) !important;
    backdrop-filter: blur(10px) !important; 
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    transition: all 0.3s ease !important;
    color: white !important;
    z-index: 999999 !important; 
    position: sticky !important;
    top: 0 !important;
}

/* ✅ قصف الخلفية (Smart Override) - تم تحديث هذا الجزء */
#mainnav, 
#mainnav[style],
.main-nav-container, /* تمت الإضافة: استهداف الحاوية بدون شرط style */
.main-nav-container .inner, /* تمت الإضافة: استهداف الصندوق الداخلي تحديداً */
.main-nav-container .bg-white, /* تمت الإضافة: استهداف الكلاس الأبيض داخل القائمة */
.store-header .bg-white,
custom-main-menu {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* 4. اللوقو المطور */
.navbar-brand img { display: none !important; }
.navbar-brand {
    display: flex !important; align-items: center; justify-content: center;
    min-width: 240px; position: relative; top: 12px !important; margin-left: 20px !important;
    height: 80px !important; overflow: visible !important;
}
.navbar-brand::before {
    content: "StoreX"; 
    font-family: 'Orbitron', sans-serif !important; font-weight: 900 !important; font-size: 42px !important;
    letter-spacing: 2px; text-transform: none !important;
    background: linear-gradient(135deg, #ffffff 0%, #00f3ff 45%, #8c3cff 55%, #ff0055 100%);
    background-size: 200% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    filter: drop-shadow(0 0 8px rgba(0, 243, 255, 0.5));
    animation: logo-shine 3s linear infinite alternate !important;
    line-height: 1.5 !important; padding-bottom: 10px !important; padding-top: 10px !important; display: block !important;
}
.navbar-brand::after {
    content: "🎮"; font-size: 34px; position: absolute; 
    right: -42px !important; 
    top: 15px !important; 
    filter: drop-shadow(0 0 5px var(--sx-accent-2)) drop-shadow(0 0 10px var(--sx-accent));
    transform: rotate(0deg) !important; 
    opacity: 0.9;
}
.navbar-brand:hover::before { letter-spacing: 4px !important; filter: drop-shadow(0 0 15px rgba(140, 60, 255, 0.8)) !important; }
.navbar-brand:hover::after { transform: scale(1.1) !important; filter: drop-shadow(0 0 15px var(--sx-accent-3)) !important; right: -50px !important; }

/* 5. القائمة العلوية الفاخرة */
.main-menu > li > a {
    font-size: 16px !important; font-weight: 700 !important; color: #e0e0e0 !important;
    padding: 10px 18px !important; border-radius: 8px !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important; overflow: hidden !important;
}
.main-menu > li > a::after {
    content: ''; position: absolute; bottom: 0; left: 50%; width: 0; height: 2px;
    background: linear-gradient(90deg, transparent, var(--sx-accent-2), transparent);
    transition: all 0.3s ease; transform: translateX(-50%); box-shadow: 0 0 10px var(--sx-accent-2);
}
.main-menu > li > a:hover::after { width: 80%; }
.main-menu > li > a:hover {
    color: white !important; text-shadow: 0 0 15px rgba(140, 60, 255, 0.6) !important;
    background: rgba(255, 255, 255, 0.03) !important;
}

/* القائمة المنسدلة */
.sub-menu {
    background: #0f0f15 !important; border: 1px solid rgba(140, 60, 255, 0.2) !important;
    border-top: none !important; padding: 10px !important; z-index: 9999999 !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.9) !important; border-radius: 0 0 16px 16px !important;
    min-width: 220px !important; display: none; opacity: 0;
    transform: translateY(15px) scale(0.98); transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    visibility: hidden; overflow: hidden !important;
}
.sub-menu::before {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 3px;
    background: linear-gradient(90deg, var(--sx-accent), var(--sx-accent-2));
    box-shadow: 0 0 15px var(--sx-accent); z-index: 1;
}
.main-menu li:hover .sub-menu { display: block !important; opacity: 1 !important; visibility: visible !important; transform: translateY(0) scale(1) !important; }
.sub-menu li a { 
    color: #bbbbbb !important; font-size: 14px !important; font-weight: 600 !important;
    padding: 12px 20px !important; border-radius: 8px !important; transition: all 0.3s ease !important; 
    border-right: 4px solid transparent !important; display: flex !important; align-items: center !important;
    background: transparent !important; margin-bottom: 2px !important;
}
.sub-menu li a:hover { 
    background: linear-gradient(270deg, rgba(0, 243, 255, 0.08), transparent) !important;
    color: var(--sx-accent-2) !important; border-right-color: var(--sx-accent-2) !important;
    padding-right: 25px !important; text-shadow: 0 0 12px rgba(0, 243, 255, 0.7) !important;
    transform: translateX(-5px) !important;
}

/* === 6. أيقونات السلة والمستخدم === */
.header-buttons, .site-header__end { display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: 10px !important; }
.header-btn, .s-cart-summary-wrapper {
    width: 45px !important; height: 45px !important; min-width: 45px !important;
    background: rgba(20, 20, 30, 0.6) !important; 
    border: 2px solid #8c3cff !important; 
    border-radius: 50% !important; 
    display: flex !important; align-items: center !important; justify-content: center !important;
    transition: all 0.3s ease !important; padding: 0 !important; margin: 0 !important; 
    position: relative !important; top: 0 !important;
    opacity: 1 !important; visibility: visible !important;
}
.s-user-menu-trigger {
    width: 45px !important; height: 45px !important; min-width: 45px !important;
    background: rgba(20, 20, 30, 0.6) !important; border: none !important; border-radius: 50% !important; 
    display: flex !important; align-items: center !important; justify-content: center !important;
    padding: 0 !important; margin: 0 !important; transition: all 0.3s ease !important;
}
.s-user-menu-trigger-content, .s-user-menu-trigger-icon { display: none !important; }
.s-user-menu-avatar-wrap, .s-user-menu-trigger-avatar {
    width: 100% !important; height: 100% !important; border-radius: 50% !important; object-fit: cover !important;
    border: 2px solid #8c3cff !important; padding: 2px !important; margin: 0 !important; display: block !important;
}
.header-btn:hover, .s-cart-summary-wrapper:hover, .s-user-menu-trigger:hover {
    background: linear-gradient(135deg, rgba(140,60,255,0.2), rgba(0,243,255,0.2)) !important; border-color: var(--sx-accent-2) !important; 
    transform: translateY(-3px) !important; box-shadow: 0 0 15px rgba(140, 60, 255, 0.4) !important;
}
.s-user-menu-trigger:hover .s-user-menu-trigger-avatar { border-color: var(--sx-accent-2) !important; }
.s-cart-summary-wrapper *, .header-btn *, i, em, .icon { 
    background: transparent !important; box-shadow: none !important; border: none !important;
    font-style: normal !important; line-height: 1 !important; margin: 0 !important;
}
.s-cart-summary-icon svg, .header-btn__icon svg { 
    font-size: 22px !important; color: #fff !important; fill: #fff !important; 
    width: 22px !important; height: 22px !important; transform: none !important;
}
.header-btn:hover .header-btn__icon { color: var(--sx-accent-2) !important; }
.s-cart-summary-count {
    background: #ff0000 !important; color: white !important; width: 24px !important; height: 24px !important;
    border-radius: 50% !important; font-size: 13px !important; font-weight: 900 !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    position: absolute !important; top: -8px !important; right: -8px !important;
    border: 3px solid #05040a !important; box-shadow: 0 0 10px rgba(255, 0, 0, 0.8) !important;
    z-index: 10 !important; animation: cart-pulse 2s infinite !important;
}
.s-cart-summary-content { display: none !important; }
@keyframes cart-pulse { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.7); } 70% { transform: scale(1.15); box-shadow: 0 0 0 6px rgba(255, 0, 0, 0); } 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 0, 0, 0); } }

/* القائمة المنسدلة للمستخدم */
.s-user-menu-dropdown { background: rgba(20, 20, 35, 0.98) !important; border: 1px solid var(--sx-border) !important; border-top: 3px solid var(--sx-accent) !important; box-shadow: 0 15px 40px rgba(0,0,0,0.8) !important; border-radius: 12px !important; margin-top: 10px !important; }
.s-user-menu-dropdown-header { background: linear-gradient(to right, rgba(140, 60, 255, 0.1), transparent) !important; border-bottom: 1px solid var(--sx-border) !important; }
.s-user-menu-dropdown-item-link { color: #e0e0e0 !important; }
.s-user-menu-dropdown-item-link:hover { background: rgba(255, 255, 255, 0.05) !important; color: var(--sx-accent-2) !important; }
.s-user-menu-dropdown-item-prefix i, .s-user-menu-dropdown-item-prefix svg { color: var(--sx-accent) !important; fill: var(--sx-accent) !important; }

/* === 7. الروابط السريعة (V79) === */
.slide--cat-entry { 
    background: linear-gradient(145deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01)) !important; 
    border: 1px solid var(--sx-border) !important; 
    border-radius: 24px !important; 
    min-height: 180px !important; 
}
a.slide--cat-entry[href*="c1527123581"], a.slide--cat-entry[href*="تخفيضات"] { 
    background: linear-gradient(135deg, rgba(255, 62, 0, 0.15), rgba(255, 0, 85, 0.15)) !important; 
    border: 1px solid rgba(255, 0, 85, 0.4) !important; 
    box-shadow: 0 0 20px rgba(255, 0, 85, 0.1) !important; 
    backdrop-filter: blur(4px) !important; 
}
.slide--cat-entry:hover { 
    transform: translateY(-8px) scale(1.03) !important; 
    background: rgba(30, 30, 45, 0.8) !important; 
    border-color: var(--sx-accent) !important; 
}
.slide--cat-entry img { 
    width: 80px !important; 
    height: 80px !important; 
    filter: drop-shadow(0 0 15px rgba(0, 243, 255, 0.3)) !important; 
}

/* === 8. كروت المنتجات (V80 Pro) === */
.s-product-card-entry {
    background: rgba(20, 20, 35, 0.4) !important;
    border: 1px solid rgba(140, 60, 255, 0.2) !important;
    border-radius: 16px !important; overflow: hidden !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
}
.s-product-card-entry:hover {
    transform: translateY(-5px) !important; border-color: var(--sx-accent) !important;
    box-shadow: 0 10px 30px rgba(140, 60, 255, 0.15) !important;
}
.s-product-card-image {
    background: transparent !important; border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    position: relative !important; overflow: hidden !important; height: 200px !important;
    display: flex !important; align-items: center !important; justify-content: center !important; padding: 10px !important;
}
.s-product-card-image img, .s-product-card-image-cover {
    object-fit: contain !important; width: 100% !important; height: 100% !important;
    border-radius: 8px !important; transition: transform 0.5s ease !important;
}
.s-product-card-entry:hover .s-product-card-image img { transform: scale(1.05) !important; }
.s-product-card-content-title a { color: #ffffff !important; font-size: 15px !important; font-weight: 700 !important; line-height: 1.4 !important; transition: color 0.3s !important; }
.s-product-card-entry:hover .s-product-card-content-title a { color: var(--sx-accent-2) !important; }
.s-product-card-sale-price h4 { color: var(--sx-accent-2) !important; font-family: 'Orbitron', sans-serif !important; font-weight: 900 !important; font-size: 18px !important; text-shadow: 0 0 10px rgba(0, 243, 255, 0.3) !important; }
.s-product-card-content-footer .s-button-element { background: linear-gradient(90deg, rgba(140, 60, 255, 0.1), rgba(0, 243, 255, 0.1)) !important; border: 1px solid rgba(140, 60, 255, 0.3) !important; color: white !important; border-radius: 8px !important; font-weight: bold !important; transition: all 0.3s ease !important; }
.s-product-card-content-footer .s-button-element:hover { background: var(--sx-accent) !important; border-color: var(--sx-accent) !important; box-shadow: 0 0 15px var(--sx-accent) !important; transform: scale(1.02) !important; }
.s-product-card-wishlist-btn { background: rgba(0, 0, 0, 0.5) !important; border-radius: 50% !important; color: white !important; top: 10px !important; right: 10px !important; }

/* === 9. الأسهم === */
.s-slider-nav-arrow, .swiper-button-prev, .swiper-button-next { 
    background: rgba(15, 15, 25, 0.8) !important; 
    border: 1px solid rgba(140, 60, 255, 0.3) !important; 
    border-radius: 50% !important; 
    color: var(--sx-accent-2) !important; 
    width: 40px !important; height: 40px !important; 
    display: flex !important; align-items: center !important; justify-content: center !important;
}
.s-search-input { background: rgba(255,255,255,0.05) !important; border: 1px solid rgba(255,255,255,0.1) !important; color: white !important; border-radius: 12px !important; }

/* === 12. إصلاح المميزات والتقييمات === */
.s-block--testimonials, .s-reviews-container, .s-slider-container, .swiper-wrapper, .swiper-slide, .s-reviews-swiper-slide, .s-block--features, .s-block--features .container, .s-block--features .grid {
    background: transparent !important; background-color: transparent !important; box-shadow: none !important; border: none !important; overflow: visible !important;
}
.s-block--features__item, .s-reviews-testimonial { 
    background: rgba(255, 255, 255, 0.02) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; backdrop-filter: blur(5px) !important; border-radius: 20px !important; padding: 20px !important; box-shadow: 0 5px 20px rgba(0,0,0,0.1) !important; margin: 10px !important; color: white !important; background-color: rgba(255, 255, 255, 0.02) !important;
}
.s-block--features__item:hover, .s-reviews-testimonial:hover { background: linear-gradient(135deg, rgba(140,60,255,0.1), rgba(0,243,255,0.1)) !important; border-color: var(--sx-accent-2) !important; transform: translateY(-5px) !important; box-shadow: 0 10px 30px rgba(0, 243, 255, 0.1) !important; }
.s-block--features__item h2, .s-reviews-testimonial h2 { color: white !important; font-weight: 700 !important; font-size: 16px !important; margin-bottom: 5px !important; }
.feature-icon { width: 60px !important; height: 60px !important; background: rgba(255, 255, 255, 0.05) !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 auto 15px !important; color: var(--sx-accent) !important; font-size: 24px !important; border: 1px solid rgba(140, 60, 255, 0.2) !important; }
.s-block--features__item:hover .feature-icon { background: var(--sx-accent) !important; color: white !important; box-shadow: 0 0 20px var(--sx-accent) !important; }
.s-reviews-testimonial__inner, .s-reviews-testimonial__content { background: transparent !important; }
.s-rating-stars-wrapper svg, .s-rating-stars-btn-star svg { fill: #FFD700 !important; filter: drop-shadow(0 0 5px rgba(255, 215, 0, 0.6)) !important; }

/* === 11. إصلاح الفوتر === */
.store-footer, .store-footer__inner { background: transparent !important; background-image: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 100%) !important; border-top: none !important; color: white !important; position: relative !important; z-index: 10 !important; }
.copyright-text p { color: #888 !important; font-size: 14px !important; }
.store-footer p, .store-footer a, .store-footer li { color: #e0e0e0 !important; font-family: 'Cairo', sans-serif !important; }
.store-footer a:hover { color: var(--sx-accent-2) !important; transform: translateX(-5px) !important; }
.s-social-list li a { background: rgba(255,255,255,0.1) !important; color: white !important; border-radius: 50% !important; }
.store-footer h3, .store-footer a h3 { font-family: 'Orbitron', sans-serif !important; font-weight: 900 !important; font-size: 28px !important; letter-spacing: 2px !important; background: linear-gradient(135deg, #ffffff 0%, #00f3ff 45%, #8c3cff 55%, #ff0055 100%) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; filter: drop-shadow(0 0 5px rgba(140, 60, 255, 0.5)) !important; border: none !important; display: inline-block !important; margin-bottom: 10px !important; }
.s-contacts-item { display: inline-flex !important; flex-direction: row-reverse !important; align-items: center !important; justify-content: flex-end !important; gap: 15px !important; margin-bottom: 15px !important; background: transparent !important; border: none !important; padding: 5px !important; width: auto !important; white-space: nowrap !important; }
.s-contacts-item:hover { transform: translateX(-5px) !important; }
.s-contacts-icon { width: 32px !important; height: 32px !important; background: rgba(255, 255, 255, 0.1) !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 16px !important; color: var(--sx-accent-2) !important; border: 1px solid rgba(255, 255, 255, 0.2) !important; flex-shrink: 0 !important; }
.s-contacts-item span.unicode { font-family: 'Orbitron', sans-serif !important; font-size: 15px !important; font-weight: 500 !important; color: #ccc !important; direction: ltr !important; display: inline-block !important; margin: 0 !important; }
.s-payments-list li { background: white !important; border-radius: 8px !important; padding: 3px 8px !important; display: flex !important; align-items: center !important; justify-content: center !important; box-shadow: 0 3px 10px rgba(0,0,0,0.5) !important; height: 35px !important; min-width: 55px !important; margin: 0 4px !important; }
.s-payments-list li img { width: auto !important; height: 20px !important; max-width: 100% !important; filter: none !important; opacity: 1 !important; margin: 0 !important; object-fit: contain !important; }
.s-payments-list li:hover { transform: translateY(-2px) scale(1.1) !important; }

/* === ⏳ شاشة التحميل: المفاعل الرقمي === */
body::before {
    content: ""; display: flex; justify-content: center; align-items: center; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #05040a; z-index: 9999999999;
    background-image: radial-gradient(circle, rgba(20, 20, 30, 0.9) 0%, #05040a 100%);
    animation: loader-vanish 0.5s 2.5s forwards; pointer-events: none;
}
/* الحلقة الخارجية الدوارة */
body::after {
    content: "StoreX"; 
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 200px; height: 200px; 
    border-radius: 50%;
    border: 4px solid transparent; 
    border-top-color: var(--sx-accent-2); 
    border-bottom-color: var(--sx-accent); 
    z-index: 9999999999;
    display: flex; align-items: center; justify-content: center;
    color: white; font-family: 'Orbitron', sans-serif; font-size: 24px; font-weight: bold; letter-spacing: 2px;
    box-shadow: 0 0 50px rgba(0, 243, 255, 0.1), inset 0 0 20px rgba(140, 60, 255, 0.2);
    animation: reactor-spin 2s linear infinite, loader-vanish 0.5s 2.5s forwards;
    pointer-events: none;
}
@keyframes reactor-spin { 0% { transform: translate(-50%, -50%) rotate(0deg); border-width: 4px; } 50% { border-width: 8px; border-top-color: var(--sx-accent-3); } 100% { transform: translate(-50%, -50%) rotate(360deg); border-width: 4px; } }
@keyframes loader-vanish { to { opacity: 0; visibility: hidden; pointer-events: none; } }

/* === 📱 إصلاح جذري لقائمة الموبايل (Transparent Glass Menu) === */
.mobile-menu, 
.mm-spn, 
.mm-spn.mm-spn--navbar, 
.mm-spn--light {
    background-color: rgba(20, 20, 35, 0.95) !important; /* لون داكن شفاف */
    backdrop-filter: blur(10px) !important; /* تأثير الزجاج */
    color: white !important;
}

/* الألواح الداخلية (Panels) */
.mm-spn--main, 
.mm-spn ul, 
.mm-spn li, 
.mm-panel {
    background: transparent !important;
    background-color: transparent !important;
}

/* الروابط والنصوص */
.mobile-menu a, 
.mobile-menu span, 
.mm-spn li a, 
.mm-spn li span,
.mm-listitem__text {
    color: #e0e0e0 !important;
    font-weight: 600 !important;
    font-family: 'Cairo', sans-serif !important;
}

/* خطوط الفواصل */
.mm-spn li::after,
.mm-listitem::after {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* تأثير عند الضغط */
.mobile-menu li:active,
.mobile-menu li:hover,
.mm-listitem:active {
    background: rgba(140, 60, 255, 0.1) !important;
}

/* الهيدر داخل القائمة */
.mm-spn--navbar::before {
    display: none !important;
}
.mm-spn--navbar {
    background: rgba(20, 20, 35, 0.95) !important;
    color: white !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}
.mm-navbar__title {
    color: white !important;
}

/* ⚠️ طبقة العرض (Overlay) - إصلاح الاختفاء */
.mm-ocd, .mm-ocd--open {
    z-index: 2147483647 !important; /* أعلى طبقة ممكنة */
}
.mm-ocd__backdrop {
    z-index: 2147483646 !important;
}

/* إخفاء الخلفيات البيضاء الافتراضية */
.store-footer .bg-white, .store-footer .bg-gray-100 { background: transparent !important; }
.bg-white, .bg-gray-100, .bg-gray-50, [class*="pattern"], [class*="shape"], .s-block--categories { background: transparent !important; background-image: none !important; }

/* =========================================
   📱 تحسينات خاصة بالجوال (Mobile Pro Mode)
   ========================================= */
@media (max-width: 768px) {
    .navbar-brand { margin: 0 auto !important; position: absolute !important; left: 50% !important; transform: translateX(-50%) !important; top: 5px !important; }
    .navbar-brand::before { font-size: 30px !important; }
    .header-buttons { display: flex !important; order: 3 !important; }
    .mburger { position: relative !important; z-index: 10 !important; order: 1 !important; }
    .store-footer { text-align: center !important; }
    .s-block--features .grid { grid-template-columns: repeat(2, 1fr) !important; }
    .s-user-menu-dropdown { width: 90% !important; left: 5% !important; }
    .s-user-menu-trigger { padding: 0 !important; }
    .header-btn, .s-cart-summary-wrapper { width: 38px !important; height: 38px !important; margin-left: 5px !important; top: 0 !important; }
    .header-btn__icon, .s-cart-summary-icon svg { font-size: 18px !important; width: 18px !important; height: 18px !important; }
    .s-cart-summary-count { width: 16px !important; height: 16px !important; top: -4px !important; right: -4px !important; }
    .s-orders-table-tbody-tr { display: flex !important; flex-direction: column !important; gap: 10px !important; padding: 15px !important; }
    .s-orders-table-tbody-tr-td { display: flex !important; justify-content: space-between !important; padding: 5px 0 !important; width: 100% !important; }
}

/* Animations */
@keyframes logo-shine { to { background-position: 200% center; } }
@keyframes float-gamepad { 0% { transform: translateY(0) rotate(15deg) scale(1); } 50% { transform: translateY(-6px) rotate(25deg) scale(1.1); } 100% { transform: translateY(0) rotate(15deg) scale(1); } }
@keyframes shake-cart { 10%, 90% { transform: translate3d(-1px, 0, 0) rotate(-5deg); } 20%, 80% { transform: translate3d(2px, 0, 0) rotate(5deg); } 30%, 50%, 70% { transform: translate3d(-3px, 0, 0) rotate(-5deg); } 40%, 60% { transform: translate3d(3px, 0, 0) rotate(5deg); } }

/* =========================================
   NEW: Product Options & Details (Cyberpunk Cards)
   ========================================= */

/* 1. إخفاء عناصر الراديو الافتراضية */
.s-product-options-digital-card-input {
    display: none !important;
}

/* 2. تحويل الخيارات إلى بطاقات (Grid Layout) */
.s-product-options-digital-card-wrapper {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)) !important;
    gap: 12px !important;
}

/* 3. تصميم البطاقة (Card Style) */
.s-product-options-digital-card-option {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid var(--sx-border) !important;
    border-radius: 12px !important;
    padding: 15px 10px !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    position: relative !important;
    overflow: hidden !important;
    min-height: 80px !important;
    color: #e0e0e0 !important;
}

/* تأثير التوهج عند التحويم */
.s-product-options-digital-card-option:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: var(--sx-accent-2) !important;
    box-shadow: 0 0 15px rgba(0, 243, 255, 0.3) !important;
    transform: translateY(-2px) !important;
}

/* 4. الحالة المختارة (Selected State) */
.s-product-options-digital-card-input:checked + span, 
.s-product-options-digital-card-input:checked + img + span,
.s-product-options-digital-card-option:has(input:checked) {
    background: linear-gradient(135deg, rgba(140, 60, 255, 0.2), rgba(0, 243, 255, 0.2)) !important;
    border-color: var(--sx-accent-2) !important;
    box-shadow: 0 0 20px var(--sx-accent-2) !important;
    color: white !important;
    font-weight: bold !important;
}

/* 5. النصوص داخل البطاقة */
.s-product-options-digital-card-option span {
    font-family: 'Orbitron', sans-serif !important;
    font-size: 14px !important;
    text-align: center !important;
    margin-top: 5px !important;
    display: block !important;
}

/* 6. الأعلام والصور داخل الخيارات */
.s-product-options-country-flag {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    box-shadow: 0 0 10px rgba(0,0,0,0.5) !important;
    margin-bottom: 5px !important;
    object-fit: cover !important;
}

/* 7. السعر الإجمالي (Total Price Area) */
.price-wrapper, .sticky-product-bar__price {
    background: rgba(0, 0, 0, 0.3) !important;
    border: 1px solid var(--sx-accent) !important;
    border-radius: 12px !important;
    padding: 10px 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    box-shadow: 0 0 20px rgba(140, 60, 255, 0.15) !important;
}

.total-price {
    color: var(--sx-accent-2) !important;
    font-family: 'Orbitron', sans-serif !important;
    font-size: 24px !important;
    text-shadow: 0 0 10px var(--sx-accent-2) !important;
}

/* 8. زر إضافة للسلة (Add to Cart Button) */
.s-add-product-button-main button, .sticky-product-bar__btn button {
    background: linear-gradient(90deg, #ff0055, #8c3cff) !important;
    border: none !important;
    border-radius: 50px !important;
    color: white !important;
    font-weight: 900 !important;
    font-size: 18px !important;
    padding: 12px 30px !important;
    box-shadow: 0 0 25px rgba(255, 0, 85, 0.4) !important;
    transition: all 0.3s ease !important;
    animation: pulse-buy 2s infinite !important;
}

.s-add-product-button-main button:hover, .sticky-product-bar__btn button:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 0 40px rgba(255, 0, 85, 0.7) !important;
}

@keyframes pulse-buy {
    0% { box-shadow: 0 0 0 0 rgba(255, 0, 85, 0.7); }
    70% { box-shadow: 0 0 0 15px rgba(255, 0, 85, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 0, 85, 0); }
}

/* 9. منطقة الوصف (Product Description) */
.product__description {
    background: rgba(20, 20, 35, 0.5) !important;
    border: 1px solid var(--sx-border) !important;
    border-radius: 16px !important;
    padding: 20px !important;
    color: #e0e0e0 !important;
    line-height: 1.8 !important;
}
.product__description h2, .product__description h3 {
    color: var(--sx-accent-2) !important;
    margin-top: 15px !important;
    margin-bottom: 10px !important;
}
/* =========================================
   🛒 صفحة السلة والدفع (StoreX Pro Cart)
   + تصميم زجاجي (Glassmorphism)
   + زر إتمام الطلب النابض (Pulse Animation)
   + أسعار نيون (Neon Pricing)
   ========================================= */

/* تعريف المتغيرات (لضمان العمل بشكل مستقل) */
:root {
    --sx-bg-dark: #05040a;
    --sx-accent: #8c3cff; 
    --sx-accent-2: #00f3ff; 
    --sx-accent-3: #ff0055; 
}

/* 1. حاوية المنتج في السلة (Card Item) */
.cart-item {
    background: rgba(20, 20, 35, 0.6) !important; /* خلفية زجاجية داكنة */
    backdrop-filter: blur(12px) !important;       /* تمويه الخلفية */
    border: 1px solid rgba(140, 60, 255, 0.2) !important; /* حدود نيون خفيفة */
    border-radius: 16px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
    color: white !important;
    margin-bottom: 20px !important;
    transition: all 0.3s ease !important;
    overflow: hidden !important;
}

/* تأثير التوهج عند تمرير الماوس على المنتج */
.cart-item:hover {
    box-shadow: 0 0 25px rgba(140, 60, 255, 0.25) !important;
    border-color: var(--sx-accent) !important;
    transform: translateY(-3px) !important;
}

/* 2. صورة المنتج */
.cart-item img {
    border-radius: 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    background: rgba(255, 255, 255, 0.05) !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3) !important;
    transition: transform 0.3s ease !important;
}

.cart-item:hover img {
    transform: scale(1.05) !important; /* تكبير بسيط للصورة */
}

/* 3. عناوين المنتجات */
.cart-item h1, .cart-item h1 a, .cart-item .text-gray-900 {
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    text-decoration: none !important;
    font-family: 'Cairo', sans-serif !important;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.5) !important;
}

/* 4. الأسعار (Neon Cyan) */
.item-price, 
.item-total, 
.total-price,
b[data-cart-total], 
#sub-total {
    color: var(--sx-accent-2) !important; /* سماوي مشع */
    font-weight: 900 !important;
    font-family: 'Orbitron', sans-serif !important; /* خط رقمي */
    font-size: 16px !important;
    text-shadow: 0 0 12px rgba(0, 243, 255, 0.6) !important;
}

/* 5. أزرار الكمية (+ و -) */
.s-quantity-input-container {
    background: rgba(0, 0, 0, 0.4) !important;
    border: 1px solid rgba(140, 60, 255, 0.3) !important;
    border-radius: 50px !important;
    padding: 4px !important;
    display: flex !important; 
    align-items: center !important;
    justify-content: space-between !important;
    min-width: 100px !important;
}

.s-quantity-input-button {
    color: white !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    background: rgba(140, 60, 255, 0.15) !important;
    border-radius: 50% !important;
    width: 32px !important; 
    height: 32px !important;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    display: flex !important; 
    align-items: center !important; 
    justify-content: center !important;
}

.s-quantity-input-button:hover {
    background: var(--sx-accent) !important;
    box-shadow: 0 0 15px var(--sx-accent) !important;
    transform: scale(1.1) !important;
    border-color: transparent !important;
}

.s-quantity-input-input {
    color: white !important;
    font-weight: bold !important;
    background: transparent !important;
    border: none !important;
    width: 40px !important;
    text-align: center !important;
    font-family: 'Orbitron', sans-serif !important;
}

/* 6. القائمة الجانبية (ملخص الطلب) */
.sidebar .shadow-default, 
#free-shipping, 
#cart-gifting {
    background: rgba(20, 20, 35, 0.7) !important;
    backdrop-filter: blur(15px) !important;
    border: 1px solid rgba(140, 60, 255, 0.2) !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
    color: #e0e0e0 !important;
    margin-bottom: 20px !important;
}

/* 7. زر إتمام الطلب (Checkout Button Pulse) */
#cart-submit, 
.cart-submit-wrap button {
    background: linear-gradient(90deg, #8c3cff, #ff0055) !important;
    border: none !important;
    color: white !important;
    font-weight: 900 !important;
    font-family: 'Cairo', sans-serif !important;
    font-size: 20px !important;
    border-radius: 12px !important;
    position: relative !important;
    overflow: hidden !important;
    box-shadow: 0 0 20px rgba(255, 0, 85, 0.4) !important;
    transition: all 0.3s ease !important;
    padding: 15px !important;
    width: 100% !important;
    animation: checkout-pulse 2s infinite !important;
}

#cart-submit:hover, 
.cart-submit-wrap button:hover {
    transform: scale(1.02) !important;
    box-shadow: 0 0 40px rgba(255, 0, 85, 0.8) !important;
    background: linear-gradient(90deg, #ff0055, #8c3cff) !important;
}

@keyframes checkout-pulse {
    0% { box-shadow: 0 0 0 0 rgba(255, 0, 85, 0.7); }
    70% { box-shadow: 0 0 0 15px rgba(255, 0, 85, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 0, 85, 0); }
}

/* 8. شريط الشحن المجاني (Glowing Progress Bar) */
#free-shipping-bar {
    background: rgba(255, 255, 255, 0.1) !important;
    height: 10px !important;
    border-radius: 10px !important;
    overflow: visible !important;
}

#free-shipping-bar .progress-bg {
    background: linear-gradient(90deg, var(--sx-accent-2), var(--sx-accent)) !important;
    box-shadow: 0 0 15px var(--sx-accent-2) !important;
    position: relative !important;
}

/* أيقونة الشحن */
.sicon-shipping-fast {
    color: var(--sx-accent-2) !important;
    filter: drop-shadow(0 0 5px var(--sx-accent-2)) !important;
    transform: scale(1.2) !important;
}

/* 9. زر الحذف (سلة المهملات) */
.btn--delete, .s-button-danger {
    background: rgba(255, 0, 0, 0.1) !important;
    color: #ff4444 !important;
    border: 1px solid rgba(255, 0, 0, 0.3) !important;
    border-radius: 50% !important;
    width: 36px !important; 
    height: 36px !important;
    display: flex !important; 
    align-items: center !important; 
    justify-content: center !important;
    transition: all 0.3s ease !important;
}

.btn--delete:hover {
    background: #ff4444 !important;
    color: white !important;
    box-shadow: 0 0 15px #ff4444 !important;
    transform: rotate(90deg) !important;
}

/* 10. العناوين والنصوص الجانبية */
h2, h3, h4, h5, .cart-title, .shipping-item {
    color: white !important;
    font-family: 'Cairo', sans-serif !important;
    font-weight: 700 !important;
}

/* إخفاء الخلفيات البيضاء الافتراضية داخل السلة */
.cart-item.bg-white, 
.shadow-default.bg-white {
    background-color: transparent !important;
}

/* النصوص الرمادية */
.text-gray-500, .text-gray-400 {
    color: #cccccc !important;
}
/* =========================================
   🛒 تنسيقات المتجر الشاملة (StoreX Pro UI)
   [يشمل: السلة، صفحة المنتج، الدفع]
   ========================================= */

/* تعريف المتغيرات */
:root {
    --sx-bg-dark: #05040a;
    --sx-accent: #8c3cff; 
    --sx-accent-2: #00f3ff; 
    --sx-accent-3: #ff0055; 
}

/* =========================================
   1. إصلاحات صفحة المنتج (Product Page Fixes)
   ========================================= */

/* إزالة الخلفية البيضاء من حاويات الخيارات والسعر */
.product-details .bg-white,
section.bg-white,
.sticky-product-bar.bg-white,
.s-product-options-wrapper,
form.product-form .bg-white {
    background: rgba(20, 20, 35, 0.6) !important; /* تحويل الأبيض إلى زجاجي داكن */
    backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(140, 60, 255, 0.1) !important;
    box-shadow: none !important;
    border-radius: 16px !important;
    color: white !important;
    margin-bottom: 15px !important;
}

/* تصحيح ألوان العناوين والنصوص (بدلاً من الأسود) */
.form-label, 
.s-product-options-option-label,
.s-product-options-option-label b,
.shipping-item {
    color: #e0e0e0 !important;
    font-family: 'Cairo', sans-serif !important;
}

/* خيارات المنتج (البطاقات الرقمية) - تحسين التباين */
.s-product-options-digital-card-option {
    background: rgba(0, 0, 0, 0.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: white !important;
    border-radius: 12px !important;
    transition: all 0.3s ease !important;
}

/* عند اختيار بطاقة أو التحويم */
.s-product-options-digital-card-option:hover,
.s-product-options-digital-card-input:checked + .s-product-options-digital-card-option,
.s-product-options-digital-card-wrapper input:checked + label {
    border-color: var(--sx-accent-2) !important;
    background: rgba(0, 243, 255, 0.1) !important;
    box-shadow: 0 0 15px rgba(0, 243, 255, 0.2) !important;
}

.s-product-options-digital-card-option span {
    color: #fff !important;
    font-weight: bold !important;
}

/* السعر في صفحة المنتج */
.total-price, .price_is_on_sale h2 {
    color: var(--sx-accent-2) !important;
    font-family: 'Orbitron', sans-serif !important;
    text-shadow: 0 0 10px rgba(0, 243, 255, 0.5) !important;
}
.before-price {
    color: #888 !important;
}

/* =========================================
   2. صفحة السلة (Cart Page Styles)
   ========================================= */

/* حاوية المنتج في السلة */
.cart-item {
    background: rgba(20, 20, 35, 0.6) !important;
    backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(140, 60, 255, 0.2) !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
    color: white !important;
    margin-bottom: 20px !important;
    transition: all 0.3s ease !important;
    overflow: hidden !important;
}

.cart-item:hover {
    box-shadow: 0 0 25px rgba(140, 60, 255, 0.25) !important;
    border-color: var(--sx-accent) !important;
    transform: translateY(-3px) !important;
}

/* صورة المنتج */
.cart-item img {
    border-radius: 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    background: rgba(255, 255, 255, 0.05) !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3) !important;
    transition: transform 0.3s ease !important;
}

.cart-item:hover img {
    transform: scale(1.05) !important;
}

/* عناوين المنتجات */
.cart-item h1, .cart-item h1 a, .cart-item .text-gray-900 {
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    text-decoration: none !important;
    font-family: 'Cairo', sans-serif !important;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.5) !important;
}

/* الأسعار (Neon Cyan) */
.item-price, 
.item-total, 
.total-price,
b[data-cart-total], 
#sub-total {
    color: var(--sx-accent-2) !important;
    font-weight: 900 !important;
    font-family: 'Orbitron', sans-serif !important;
    font-size: 16px !important;
    text-shadow: 0 0 12px rgba(0, 243, 255, 0.6) !important;
}

/* أزرار الكمية (+ و -) */
.s-quantity-input-container {
    background: rgba(0, 0, 0, 0.4) !important;
    border: 1px solid rgba(140, 60, 255, 0.3) !important;
    border-radius: 50px !important;
    padding: 4px !important;
    display: flex !important; 
    align-items: center !important;
    justify-content: space-between !important;
    min-width: 100px !important;
}

.s-quantity-input-button {
    color: white !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    background: rgba(140, 60, 255, 0.15) !important;
    border-radius: 50% !important;
    width: 32px !important; 
    height: 32px !important;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    display: flex !important; 
    align-items: center !important; 
    justify-content: center !important;
}

.s-quantity-input-button:hover {
    background: var(--sx-accent) !important;
    box-shadow: 0 0 15px var(--sx-accent) !important;
    transform: scale(1.1) !important;
    border-color: transparent !important;
}

.s-quantity-input-input {
    color: white !important;
    font-weight: bold !important;
    background: transparent !important;
    border: none !important;
    width: 40px !important;
    text-align: center !important;
    font-family: 'Orbitron', sans-serif !important;
}

/* القائمة الجانبية (ملخص الطلب) */
.sidebar .shadow-default, 
#free-shipping, 
#cart-gifting {
    background: rgba(20, 20, 35, 0.7) !important;
    backdrop-filter: blur(15px) !important;
    border: 1px solid rgba(140, 60, 255, 0.2) !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
    color: #e0e0e0 !important;
    margin-bottom: 20px !important;
}

/* زر إتمام الطلب (Pulse) */
#cart-submit, 
.cart-submit-wrap button {
    background: linear-gradient(90deg, #8c3cff, #ff0055) !important;
    border: none !important;
    color: white !important;
    font-weight: 900 !important;
    font-family: 'Cairo', sans-serif !important;
    font-size: 20px !important;
    border-radius: 12px !important;
    position: relative !important;
    overflow: hidden !important;
    box-shadow: 0 0 20px rgba(255, 0, 85, 0.4) !important;
    transition: all 0.3s ease !important;
    padding: 15px !important;
    width: 100% !important;
    animation: checkout-pulse 2s infinite !important;
}

#cart-submit:hover, 
.cart-submit-wrap button:hover {
    transform: scale(1.02) !important;
    box-shadow: 0 0 40px rgba(255, 0, 85, 0.8) !important;
    background: linear-gradient(90deg, #ff0055, #8c3cff) !important;
}

@keyframes checkout-pulse {
    0% { box-shadow: 0 0 0 0 rgba(255, 0, 85, 0.7); }
    70% { box-shadow: 0 0 0 15px rgba(255, 0, 85, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 0, 85, 0); }
}

/* شريط الشحن المجاني */
#free-shipping-bar {
    background: rgba(255, 255, 255, 0.1) !important;
    height: 10px !important;
    border-radius: 10px !important;
    overflow: visible !important;
}

#free-shipping-bar .progress-bg {
    background: linear-gradient(90deg, var(--sx-accent-2), var(--sx-accent)) !important;
    box-shadow: 0 0 15px var(--sx-accent-2) !important;
    position: relative !important;
}

.sicon-shipping-fast {
    color: var(--sx-accent-2) !important;
    filter: drop-shadow(0 0 5px var(--sx-accent-2)) !important;
    transform: scale(1.2) !important;
}

/* زر الحذف */
.btn--delete, .s-button-danger {
    background: rgba(255, 0, 0, 0.1) !important;
    color: #ff4444 !important;
    border: 1px solid rgba(255, 0, 0, 0.3) !important;
    border-radius: 50% !important;
    width: 36px !important; 
    height: 36px !important;
    display: flex !important; 
    align-items: center !important; 
    justify-content: center !important;
    transition: all 0.3s ease !important;
}

.btn--delete:hover {
    background: #ff4444 !important;
    color: white !important;
    box-shadow: 0 0 15px #ff4444 !important;
    transform: rotate(90deg) !important;
}

/* العناوين العامة */
h2, h3, h4, h5, .cart-title {
    color: white !important;
    font-family: 'Cairo', sans-serif !important;
    font-weight: 700 !important;
}

/* النصوص الرمادية */
.text-gray-500, .text-gray-400 {
    color: #cccccc !important;
}
/* =========================================
   🌟 تحسين قسم التقييمات (Pro Reviews Section)
   + تحويل الخلفيات البيضاء إلى زجاجية داكنة
   + تنسيق كروت التعليقات
   + تحسين حقول الإدخال والأزرار
   ========================================= */

/* 1. الحاوية الرئيسية للتقييمات */
.s-comments, 
.s-comments-container,
.s-comments-product {
    background: transparent !important;
    background-color: transparent !important;
}

/* 2. عنوان القسم */
.s-comments-title, 
.s-comments-count-label, 
.s-comments-filter-label {
    color: white !important;
    font-family: 'Cairo', sans-serif !important;
    font-weight: 700 !important;
    text-shadow: 0 0 10px rgba(140, 60, 255, 0.3) !important;
}

/* 3. نموذج كتابة التعليق (Form) */
.s-comment-form-wrapper {
    background: rgba(20, 20, 35, 0.6) !important;
    border: 1px solid rgba(140, 60, 255, 0.2) !important;
    border-radius: 16px !important;
    padding: 20px !important;
    backdrop-filter: blur(12px) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
}

/* حقل الكتابة */
.s-comment-form-input {
    background: rgba(0, 0, 0, 0.4) !important;
    border: 1px solid rgba(140, 60, 255, 0.3) !important;
    color: white !important;
    border-radius: 12px !important;
    padding: 12px !important;
    font-family: 'Cairo', sans-serif !important;
    transition: all 0.3s ease !important;
}

.s-comment-form-input:focus {
    border-color: var(--sx-accent-2) !important;
    box-shadow: 0 0 10px rgba(0, 243, 255, 0.3) !important;
    outline: none !important;
}

/* 4. ملخص التقييمات (المربع الصغير) */
.s-reviews-summary-header-section {
    background: rgba(20, 20, 35, 0.6) !important;
    border: 1px solid rgba(140, 60, 255, 0.2) !important;
    border-radius: 16px !important;
    padding: 15px !important;
    color: white !important;
    margin-bottom: 20px !important;
}

.s-reviews-summary-recommendation-percentage {
    color: var(--sx-accent-2) !important; /* لون سماوي */
    font-family: 'Orbitron', sans-serif !important;
    font-size: 24px !important;
    text-shadow: 0 0 10px rgba(0, 243, 255, 0.5) !important;
}

/* 5. كرت التعليق الفردي (Comment Item) */
.s-comments-item-wrapper, 
.s-comments-item {
    background: rgba(30, 30, 45, 0.7) !important; /* خلفية داكنة */
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 16px !important;
    margin-bottom: 15px !important;
    padding: 15px !important;
    transition: transform 0.3s ease, border-color 0.3s ease !important;
    box-shadow: none !important;
}

.s-comments-item-wrapper:hover {
    transform: translateY(-2px) !important;
    border-color: var(--sx-accent) !important; /* توهج بنفسجي عند التحويم */
    box-shadow: 0 5px 20px rgba(140, 60, 255, 0.1) !important;
}

/* اسم المستخدم */
.s-comments-item-user-info-name {
    color: var(--sx-accent-2) !important;
    font-weight: bold !important;
    font-size: 15px !important;
}

/* التاريخ والوقت */
.s-comments-item-timestamp, .s-comments-item-time {
    color: #888 !important;
    font-size: 12px !important;
}

/* نص التعليق */
.s-comments-item-content p {
    color: #e0e0e0 !important;
    line-height: 1.6 !important;
}

/* 6. قائمة الترتيب (Dropdown) */
#comments-filter {
    background-color: rgba(20, 20, 35, 0.8) !important;
    color: white !important;
    border: 1px solid rgba(140, 60, 255, 0.3) !important;
    border-radius: 8px !important;
}

/* 7. أيقونات التحقق والنجوم */
.s-comments-item-has-order-check-icon svg {
    fill: #00ffaa !important; /* لون أخضر للتحقق */
    filter: drop-shadow(0 0 5px rgba(0, 255, 170, 0.5));
}
.s-comments-item-has-order-check-text {
    color: #00ffaa !important;
}

.s-rating-stars-wrapper svg {
    fill: #ffd700 !important; /* لون ذهبي للنجوم */
    filter: drop-shadow(0 0 5px rgba(255, 215, 0, 0.6)) !important;
}

/* 8. زر "مفيد" (Like Button) */
.s-comments-item-like-btn button {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #ccc !important;
    border-radius: 20px !important;
    transition: all 0.3s ease !important;
}

.s-comments-item-like-btn button:hover {
    border-color: var(--sx-accent-2) !important;
    color: var(--sx-accent-2) !important;
    background: rgba(0, 243, 255, 0.1) !important;
}
/* =========================================
   🌟 تحسين قسم التقييمات (Pro Reviews Section)
   + تحويل الخلفيات البيضاء إلى زجاجية داكنة
   + تنسيق كروت التعليقات
   + تحسين حقول الإدخال والأزرار
   ========================================= */

/* 1. الحاوية الرئيسية للتقييمات */
.s-comments, 
.s-comments-container,
.s-comments-product {
    background: transparent !important;
    background-color: transparent !important;
}

/* 2. عنوان القسم */
.s-comments-title, 
.s-comments-count-label, 
.s-comments-filter-label {
    color: white !important;
    font-family: 'Cairo', sans-serif !important;
    font-weight: 700 !important;
    text-shadow: 0 0 10px rgba(140, 60, 255, 0.3) !important;
}

/* 3. نموذج كتابة التعليق (Form) */
.s-comment-form-wrapper {
    background: rgba(20, 20, 35, 0.6) !important;
    border: 1px solid rgba(140, 60, 255, 0.2) !important;
    border-radius: 16px !important;
    padding: 20px !important;
    backdrop-filter: blur(12px) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
}

/* حقل الكتابة */
.s-comment-form-input {
    background: rgba(0, 0, 0, 0.4) !important;
    border: 1px solid rgba(140, 60, 255, 0.3) !important;
    color: white !important;
    border-radius: 12px !important;
    padding: 12px !important;
    font-family: 'Cairo', sans-serif !important;
    transition: all 0.3s ease !important;
}

.s-comment-form-input:focus {
    border-color: var(--sx-accent-2) !important;
    box-shadow: 0 0 10px rgba(0, 243, 255, 0.3) !important;
    outline: none !important;
}

/* 4. ملخص التقييمات (المربع الصغير) */
.s-reviews-summary-header-section {
    background: rgba(20, 20, 35, 0.6) !important;
    border: 1px solid rgba(140, 60, 255, 0.2) !important;
    border-radius: 16px !important;
    padding: 15px !important;
    color: white !important;
    margin-bottom: 20px !important;
}

.s-reviews-summary-recommendation-percentage {
    color: var(--sx-accent-2) !important; /* لون سماوي */
    font-family: 'Orbitron', sans-serif !important;
    font-size: 24px !important;
    text-shadow: 0 0 10px rgba(0, 243, 255, 0.5) !important;
}

/* 5. كرت التعليق الفردي (Comment Item) */
.s-comments-item-wrapper, 
.s-comments-item {
    background: rgba(30, 30, 45, 0.7) !important; /* خلفية داكنة */
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 16px !important;
    margin-bottom: 15px !important;
    padding: 15px !important;
    transition: transform 0.3s ease, border-color 0.3s ease !important;
    box-shadow: none !important;
}

.s-comments-item-wrapper:hover {
    transform: translateY(-2px) !important;
    border-color: var(--sx-accent) !important; /* توهج بنفسجي عند التحويم */
    box-shadow: 0 5px 20px rgba(140, 60, 255, 0.1) !important;
}

/* اسم المستخدم */
.s-comments-item-user-info-name {
    color: var(--sx-accent-2) !important;
    font-weight: bold !important;
    font-size: 15px !important;
}

/* التاريخ والوقت */
.s-comments-item-timestamp, .s-comments-item-time {
    color: #888 !important;
    font-size: 12px !important;
}

/* نص التعليق */
.s-comments-item-content p {
    color: #e0e0e0 !important;
    line-height: 1.6 !important;
}

/* 6. قائمة الترتيب (Dropdown) */
#comments-filter {
    background-color: rgba(20, 20, 35, 0.8) !important;
    color: white !important;
    border: 1px solid rgba(140, 60, 255, 0.3) !important;
    border-radius: 8px !important;
}

/* 7. أيقونات التحقق والنجوم */
.s-comments-item-has-order-check-icon svg {
    fill: #00ffaa !important; /* لون أخضر للتحقق */
    filter: drop-shadow(0 0 5px rgba(0, 255, 170, 0.5));
}
.s-comments-item-has-order-check-text {
    color: #00ffaa !important;
}

.s-rating-stars-wrapper svg {
    fill: #ffd700 !important; /* لون ذهبي للنجوم */
    filter: drop-shadow(0 0 5px rgba(255, 215, 0, 0.6)) !important;
}

/* 8. زر "مفيد" (Like Button) */
.s-comments-item-like-btn button {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #ccc !important;
    border-radius: 20px !important;
    transition: all 0.3s ease !important;
}

.s-comments-item-like-btn button:hover {
    border-color: var(--sx-accent-2) !important;
    color: var(--sx-accent-2) !important;
    background: rgba(0, 243, 255, 0.1) !important;
}
/* =========================================
   🛍️ تحديث كروت المنتجات (V103 Ultimate Pro)
   + صور ضخمة وواضحة (Maximized Visibility)
   + تصميم زر قلب عائم وجذاب
   + تسعير نيون احترافي ومحسن (Pulse Price & Clear Discount)
   ========================================= */

/* 1. حاوية الكرت الرئيسية (Clean & Premium) */
.s-product-card-entry {
    background: linear-gradient(180deg, rgba(30, 30, 45, 0.6) 0%, rgba(20, 20, 30, 0.9) 100%) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 20px !important; /* تدوير أكبر للحواف */
    overflow: hidden !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important;
}

/* تأثير التحويم: رفع الكرت وإضاءة الحدود */
.s-product-card-entry:hover {
    transform: translateY(-8px) !important;
    border-color: var(--sx-accent) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 30px rgba(140, 60, 255, 0.15) !important;
}

/* 2. حاوية الصورة (تكبير المساحة) */
.s-product-card-image {
    width: 100% !important;
    height: 280px !important; /* زيادة الطول بشكل ملحوظ */
    background: transparent !important; /* إزالة الخلفية الداكنة لتبدو الصورة مدمجة */
    position: relative !important;
    overflow: hidden !important;
    padding: 0 !important; /* إزالة الحواف الداخلية لتأخذ الصورة كامل المساحة */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-bottom: none !important; /* إزالة الخط الفاصل */
}

/* 3. الصورة نفسها */
.s-product-card-image img, 
.s-product-card-image-cover {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important; /* ضمان عدم القص */
    transform: scale(0.95) !important; /* تصغير طفيف جداً للهوامش الجمالية */
    transition: transform 0.6s ease !important;
    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.4)) !important;
}

/* تكبير الصورة عند التحويم */
.s-product-card-entry:hover .s-product-card-image img {
    transform: scale(1.1) !important;
}

/* 4. زر المفضلة (القلب) - إصلاح جذري للتمركز */
/* الحاوية الخارجية: تحديد الموقع فقط */
salla-button.s-product-card-wishlist-btn {
    position: absolute !important;
    top: 12px !important;
    left: 12px !important; /* تثبيت في اليسار للبعد عن الشرائط */
    right: auto !important;
    z-index: 20 !important;
    width: 40px !important;
    height: 40px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* الزر الداخلي: الشكل الدائري والتوسيط */
.s-product-card-wishlist-btn .s-button-element {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background: rgba(30, 30, 45, 0.7) !important; /* خلفية داكنة */
    backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #e0e0e0 !important;
    
    /* أهم جزء: فليكس لتوسيط الأيقونة */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2) !important;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

/* حاوية النص الداخلية (يجب أن لا تعيق التمركز) */
.s-product-card-wishlist-btn .s-button-text {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    line-height: 0 !important;
}

/* الأيقونة نفسها */
.s-product-card-wishlist-btn i {
    font-size: 18px !important;
    display: block !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* تأثير التحويم */
.s-product-card-wishlist-btn .s-button-element:hover {
    background: white !important;
    color: #ff0055 !important;
    border-color: white !important;
    transform: scale(1.15) rotate(0deg) !important;
    box-shadow: 0 0 25px rgba(255, 0, 85, 0.7) !important;
}

/* 5. محتوى الكرت */
.s-product-card-content {
    padding: 20px !important;
    background: linear-gradient(to top, rgba(20,20,35,0.9), transparent) !important;
    margin-top: -40px !important; /* تداخل بسيط مع الصورة */
    position: relative !important;
    z-index: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

/* العنوان */
.s-product-card-content-title a {
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.6 !important;
    height: auto !important;
    min-height: 48px !important; /* مساحة لسطرين */
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5) !important;
}

/* منطقة السعر والتقييم */
.s-product-card-content-sub {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
    margin-top: 5px !important;
}

/* السعر */
.s-product-card-sale-price {
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important; /* مسافة بين السعر القديم والجديد */
}

/* السعر الحالي (مع تأثير النبض) */
.s-product-card-sale-price h4 { 
    color: #00f3ff !important; /* سماوي نيون */
    font-family: 'Orbitron', sans-serif !important;
    font-weight: 900 !important;
    font-size: 22px !important; /* تكبير الخط */
    margin: 0 !important;
    text-shadow: 0 0 15px rgba(0, 243, 255, 0.5) !important;
    animation: price-glow-pulse 2s infinite ease-in-out !important; /* أنيميشن النبض */
}

/* السعر القديم (أكثر وضوحاً للتخفيض) */
.s-product-card-sale-price span { 
    color: #ff4444 !important; /* لون أحمر باهت للدلالة على الخصم */
    font-size: 15px !important; /* تكبير الحجم ليكون أوضح */
    text-decoration: line-through !important;
    text-decoration-color: #ff4444 !important; /* خط الشطب بنفس اللون */
    text-decoration-thickness: 2px !important; /* سماكة خط الشطب */
    opacity: 0.8 !important; /* زيادة الوضوح */
    font-weight: 600 !important;
    display: inline-block !important;
}

/* أنيميشن نبض السعر */
@keyframes price-glow-pulse {
    0%, 100% { text-shadow: 0 0 10px rgba(0, 243, 255, 0.4); transform: scale(1); }
    50% { text-shadow: 0 0 20px rgba(0, 243, 255, 0.8), 0 0 30px rgba(0, 243, 255, 0.2); transform: scale(1.02); }
}

/* 6. زر الإضافة للسلة */
.s-product-card-content-footer .s-button-element {
    background: rgba(140, 60, 255, 0.1) !important;
    border: 1px solid rgba(140, 60, 255, 0.4) !important;
    color: #e0e0e0 !important;
    border-radius: 12px !important;
    font-weight: 800 !important;
    font-size: 14px !important;
    padding: 12px !important;
    width: 100% !important;
    transition: all 0.3s ease !important;
    margin-top: 10px !important;
}

.s-product-card-content-footer .s-button-element:hover {
    background: linear-gradient(90deg, #8c3cff, #00f3ff) !important;
    border-color: transparent !important;
    color: white !important;
    box-shadow: 0 5px 20px rgba(140, 60, 255, 0.4) !important;
    transform: translateY(-2px) !important;
}
/* =========================================
   🎛️ تحديث تصميم تبويبات المنتجات (Product Tabs V106 - Smooth & Interactive)
   + نعومة فائقة في الحواف (Super Smooth Edges)
   + تفاعل حقيقي عند الضغط (Click Feedback)
   ========================================= */

/* 1. حاوية التبويبات */
.s-block--tabs-produtcs .tabs {
    display: flex !important;
    justify-content: center !important;
    gap: 20px !important; /* زيادة المسافة للراحة البصرية */
    padding: 25px 10px !important;
    background: transparent !important;
    border-bottom: none !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    /* إخفاء شريط التمرير */
    scrollbar-width: none; 
    -ms-overflow-style: none; 
}
.s-block--tabs-produtcs .tabs::-webkit-scrollbar { display: none; }

/* 2. تصميم الزر (التبويب) - الوضع العادي */
.s-block--tabs-produtcs .tab-trigger .s-button-element {
    background: rgba(40, 40, 60, 0.4) !important; /* خلفية ناعمة جداً */
    backdrop-filter: blur(15px) !important; /* زجاجي ناعم */
    border: 1px solid rgba(140, 60, 255, 0.15) !important; /* حدود خفيفة جداً */
    border-radius: 60px !important; /* استدارة كاملة وناعمة */
    color: #cccccc !important;
    font-family: 'Cairo', sans-serif !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    padding: 12px 35px !important;
    transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1) !important; /* حركة انسيابية جداً */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
    position: relative !important;
    overflow: hidden !important;
}

/* 3. تأثير عند مرور الماوس (Hover - Soft Glow) */
.s-block--tabs-produtcs .tab-trigger .s-button-element:hover {
    background: rgba(140, 60, 255, 0.15) !important;
    border-color: rgba(0, 243, 255, 0.5) !important;
    color: white !important;
    transform: translateY(-4px) !important;
    box-shadow: 0 10px 30px rgba(140, 60, 255, 0.15) !important; /* ظل ناعم ومنتشر */
}

/* 4. تأثير عند الضغط (Active Click - Tactile Feedback) */
.s-block--tabs-produtcs .tab-trigger .s-button-element:active {
    transform: scale(0.95) translateY(0) !important; /* تصغير للإحساس بالضغط */
    background: rgba(140, 60, 255, 0.3) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2) !important;
    transition: transform 0.1s ease !important;
}

/* 5. الحالة النشطة (Selected Tab - Interactive Glow) */
.s-block--tabs-produtcs .tab-trigger.is-active .s-button-element {
    background: linear-gradient(135deg, rgba(140, 60, 255, 0.9), rgba(0, 243, 255, 0.8)) !important;
    border-color: transparent !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    box-shadow: 0 0 30px rgba(140, 60, 255, 0.4), 0 0 10px rgba(255, 255, 255, 0.2) inset !important;
    transform: scale(1.05) !important;
    animation: tab-breathe 3s infinite ease-in-out !important; /* تنفس هادئ بدلاً من النبض السريع */
}

/* 6. أنيميشن التنفس الهادئ (Breathing Effect) */
@keyframes tab-breathe {
    0%, 100% { box-shadow: 0 0 20px rgba(140, 60, 255, 0.4); }
    50% { box-shadow: 0 0 40px rgba(140, 60, 255, 0.6), 0 0 15px rgba(0, 243, 255, 0.3); }
}

/* 7. تحسين المظهر على الجوال */
@media (max-width: 768px) {
    .s-block--tabs-produtcs .tab-trigger .s-button-element {
        padding: 10px 25px !important;
        font-size: 13px !important;
        min-width: 120px !important; /* ضمان حجم مناسب للمس */
    }
}
/* =========================================
   StoreX V2: Ultimate Cyberpunk Overhaul
   ========================================= */

/* 1. نسف الخلفيات البيضاء تماماً وتحويلها لأسود عميق */
.bg-white, .sticky-product-bar, section.rounded-md {
    background-color: #05040a !important;
    border: 1px solid rgba(140, 60, 255, 0.2) !important;
    box-shadow: none !important;
}

/* 2. العنوان: تدرج لوني سماوي وبنفسجي (ليس أبيض ممل) */
h1.text-xl, h1.product-entry__title {
    background: linear-gradient(90deg, #00f3ff 0%, #ffffff 50%, #8c3cff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 25px rgba(0, 243, 255, 0.4);
    font-family: 'Cairo', sans-serif !important;
    font-weight: 900 !important;
    letter-spacing: 1px;
}

/* إخفاء العلم TR والمسافات الزائدة */
h1 span[style*="font-size: 1em"] {
    display: none !important;
}
/* تعديل خلفية عداد الكمية */
.s-quantity-input-input {
    background-color: transparent !important;
    color: #fff !important;
    border-color: #8c3cff !important;
}
/* =========================================
   إصلاح زر "اشتري الآن" (الشبح + الحجم + التفاعل)
   ========================================= */

/* 1. إخفاء "الصندوق الأسود" والحواف من الحاوية الأم */
salla-mini-checkout-widget,
.s-add-product-button-mini-checkout,
.s-mini-checkout-wrapper {
    background: transparent !important;
    background-color: transparent !important; /* شفافية تامة */
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    /* هذا السطر مهم: يقص أي خلفية مربعة تظهر خلف الزر */
    border-radius: 50px !important; 
}

/* 2. تصميم الزر نفسه (اللون السماوي) */
.s-add-product-button-mini-checkout-content {
    /* الأبعاد: قللت الارتفاع عشان ما يكون ضخم */
    height: 48px !important; 
    min-height: 48px !important;
    width: 100% !important;
    
    /* الشكل: كبسولة دائرية */
    border-radius: 50px !important;
    
    /* الألوان */
    background: linear-gradient(90deg, #00f3ff 0%, #0066ff 100%) !important;
    color: #ffffff !important;
    
    /* إزالة الحدود */
    border: none !important;
    
    /* المحاذاة */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    
    /* التفاعل */
    cursor: pointer !important;
    pointer-events: auto !important; /* ضمان استجابة الماوس */
    transition: all 0.3s ease !important; /* نعومة الحركة */
}

/* 3. تأثير التفاعل (عند وضع الماوس أو التحديد) */
.s-add-product-button-mini-checkout-content:hover {
    transform: translateY(-3px); /* يرتفع قليلاً للأعلى */
    box-shadow: 0 0 20px rgba(0, 243, 255, 0.7) !important; /* توهج قوي */
    background: linear-gradient(90deg, #00c3ff 0%, #0055dd 100%) !important; /* تغيير طفيف في اللون */
}

/* 4. تنسيق الأيقونة (المحفظة) */
.s-add-product-button-mini-checkout-content svg {
    fill: #ffffff !important;
    width: 20px !important;
    height: 20px !important;
    margin-left: 8px !important;
}

/* 5. (إضافي) إصلاح زر إضافة للسلة ليكون بنفس الارتفاع */
.s-add-product-button-main .s-button-element {
    height: 48px !important;
    min-height: 48px !important;
    border-radius: 50px !important;
}
/* =========================================
   🎞️ سلايدر البنرات الذكي (JS-Driven Slider)
   ========================================= */

/* 1. إخفاء الصورة الأصلية */
.s-block--fixed-banner .banner img {
    opacity: 0 !important;
    visibility: hidden !important;
}

/* 2. تنسيق حاوية البنر */
.s-block--fixed-banner .banner {
    display: block !important;
    position: relative !important;
    overflow: hidden !important;
    border-radius: 20px !important;
    border: 1px solid rgba(140, 60, 255, 0.3) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important;
    background-color: #05040a !important;
    transition: transform 0.5s ease;
}

/* 3. الطبقات الخاصة بالصور */
.s-block--fixed-banner .banner::before,
.s-block--fixed-banner .banner::after {
    content: '';
    position: absolute !important;
    top: 0; left: 0;
    width: 100% !important;
    height: 100% !important;
    background-size: cover !important;
    background-position: center center !important;
    transition: opacity 1s ease-in-out, transform 10s ease; /* نعومة التبديل */
}

/* --- الصورة الأولى (الوضع الافتراضي) --- */
.s-block--fixed-banner .banner::before {
    background-image: url('https://i.postimg.cc/TwJv17x1/Gemini-Generated-Image-6jb3vo6jb3vo6jb3.jpg');
    z-index: 1;
    opacity: 1; /* ظاهرة */
    transform: scale(1);
}

/* --- الصورة الثانية (مخفية) --- */
.s-block--fixed-banner .banner::after {
    background-image: url('https://i.postimg.cc/RF5vNJnb/Gemini-Generated-Image-9pcky29pcky29pck-(1).jpg');
    z-index: 2;
    opacity: 0; /* مخفية */
    transform: scale(1.05);
}

/* 4. كلاس التبديل (يتم تفعيله بالجافا سكربت) */
.s-block--fixed-banner .banner.show-slide-2::before {
    opacity: 0 !important;
    transform: scale(1.05) !important;
}

.s-block--fixed-banner .banner.show-slide-2::after {
    opacity: 1 !important;
    transform: scale(1) !important;
}

/* 5. تحسينات للجوال */
@media (max-width: 768px) {
    .s-block--fixed-banner .banner {
        min-height: 180px !important; 
    }
}

/* =========================================
   StoreX: Sidebar & User Menu (The HUD)
   ========================================= */

/* 1. Remove White Background & Add Glass Effect */
.sidebar, 
.s-user-menu, 
.lg\:bg-white { 
    background: rgba(5, 4, 10, 0.85) !important; /* Dark Glass */
    backdrop-filter: blur(15px) !important;
    border: 1px solid rgba(140, 60, 255, 0.3) !important; /* Purple Border */
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.8) !important;
    border-radius: 12px !important;
}

/* 2. Menu Items Styling */
.s-user-menu-dropdown-item-link {
    color: #e0e0e0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative;
    overflow: hidden;
}

/* 3. Hover Effect (Slide & Glow) */
.s-user-menu-dropdown-item-link:hover {
    background: linear-gradient(90deg, rgba(140, 60, 255, 0.2) 0%, transparent 100%) !important;
    padding-right: 20px !important; /* Slide Text */
    color: #00f3ff !important; /* Cyan Text */
    border-right: 3px solid #00f3ff !important; /* Cyan Indicator */
}

/* 4. Icons Color */
.s-user-menu-dropdown-item-prefix svg path {
    fill: #8c3cff !important; /* Purple Icons */
    transition: fill 0.3s ease;
}

.s-user-menu-dropdown-item-link:hover .s-user-menu-dropdown-item-prefix svg path {
    fill: #00f3ff !important; /* Cyan on Hover */
    filter: drop-shadow(0 0 5px #00f3ff);
}
/* ============================================================
   StoreX SYSTEM V3.0: DEEP CLEAN & OVERDRIVE PROTOCOL
   ============================================================ */

/* --- 1. THE MODAL & SIDEBAR (Glass Infrastructure) --- */
/* استهداف النافذة المنبثقة والقائمة الجانبية لإزالة الخلفية البيضاء */
.s-modal-body, 
.s-rating-modal-wrapper,
.sidebar, 
.s-user-menu,
nav[aria-label="Sidebar"] {
    background: rgba(5, 4, 10, 0.9) !important; /* زجاج أسود */
    backdrop-filter: blur(15px) !important; /* تغبيش الخلفية */
    -webkit-backdrop-filter: blur(15px) !important;
    border: 1px solid rgba(140, 60, 255, 0.3) !important; /* حدود بنفسجية */
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.9) !important;
    border-radius: 12px !important;
    color: #fff !important;
}

/* تنظيف العناوين والنصوص داخل المودال والقائمة */
.s-modal-title, 
.s-rating-modal-title,
.s-user-menu-dropdown-item-title,
.s-rating-modal-product-title {
    color: #fff !important;
    font-family: 'Cairo', sans-serif !important;
    text-shadow: 0 0 5px rgba(140, 60, 255, 0.5);
}

/* أيقونة المتجر في المودال */
.s-rating-modal-store-logo {
    border: 2px solid #00f3ff !important;
    border-radius: 50%;
    padding: 2px;
    background: rgba(0,0,0,0.5);
}

/* --- 2. THE SIDEBAR MENU (User Menu) --- */
/* روابط القائمة */
.s-user-menu-dropdown-item-link {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    transition: all 0.3s ease !important;
}

/* تأثير الهوفر على القائمة */
.s-user-menu-dropdown-item-link:hover {
    background: linear-gradient(90deg, rgba(140, 60, 255, 0.2) 0%, transparent 100%) !important;
    padding-right: 25px !important; /* انزلاق للنص */
    border-right: 3px solid #00f3ff !important; /* مؤشر جانبي سماوي */
}

/* تلوين أيقونات القائمة */
.s-user-menu-dropdown-item-prefix svg,
.s-user-menu-dropdown-item-prefix svg path {
    fill: #8c3cff !important; /* بنفسجي */
    transition: 0.3s;
}

.s-user-menu-dropdown-item-link:hover .s-user-menu-dropdown-item-prefix svg path {
    fill: #00f3ff !important; /* سماوي عند الهوفر */
    filter: drop-shadow(0 0 5px #00f3ff);
}

/* --- 3. INPUTS & TEXTAREA (Data Entry) --- */
.s-rating-modal-comment {
    background: rgba(0, 0, 0, 0.5) !important;
    border: 1px solid rgba(140, 60, 255, 0.3) !important;
    color: #fff !important;
    border-radius: 8px;
}
.s-rating-modal-comment:focus {
    border-color: #00f3ff !important;
    box-shadow: 0 0 10px rgba(0, 243, 255, 0.2);
}

/* --- 4. THE STAR SYSTEM (Core Mechanics) --- */

/* الحالة الافتراضية (فارغة) */
.s-rating-stars-btn-star svg path {
    fill: transparent !important; /* تفريغ النجمة */
    stroke: #555 !important; /* حدود رمادية */
    stroke-width: 1.5px !important;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

/* الحالة الأولى: وضع السايبر (1-4 نجوم) - الكلاس يضاف عبر JS */
.sx-filled-cyan svg path {
    fill: #00f3ff !important; /* سماوي */
    stroke: none !important;
    filter: drop-shadow(0 0 8px rgba(0, 243, 255, 0.6));
    transform: scale(1.1);
}

/* الحالة الثانية: وضع الأسطورة (5 نجوم) - الكلاس يضاف عبر JS */
.sx-filled-legendary svg path {
    fill: #ff0055 !important; /* أحمر نيون */
    stroke: #fff !important; /* قلب أبيض */
    stroke-width: 1px !important;
    filter: drop-shadow(0 0 15px #ff0055);
    transform: scale(1.25) rotate(5deg);
}

/* أنيميشن النبض للنجوم الحمراء */
.sx-filled-legendary {
    animation: legendaryPulse 0.6s infinite alternate;
}

@keyframes legendaryPulse {
    0% { transform: scale(1); filter: brightness(1); }
    100% { transform: scale(1.1); filter: brightness(1.3); }
}

/* --- 5. زر التقييم والرفع --- */
.s-button-primary {
    background: linear-gradient(90deg, #8c3cff, #ff0055) !important;
    border: none !important;
    box-shadow: 0 5px 15px rgba(140, 60, 255, 0.4);
}
.filepond--root {
    background-color: rgba(255,255,255,0.05) !important;
    border: 1px dashed #8c3cff !important;
}
.s-modal-close svg path {
    fill: #ff0055 !important;
}
/* =========================================
   StoreX Patch: Anti-Clipping Protocol
   Fixes: Cut-off stars animation
   ========================================= */

/* 1. إجبار الحاويات على إظهار المحتوى الزائد */
.s-rating-stars-wrapper,
.s-rating-stars-element,
.s-rating-stars-btn-star {
    overflow: visible !important; /* السماح للنجمة بالخروج عن الحدود */
    contain: none !important;     /* إلغاء قيود الاحتواء */
}

/* 2. إضافة مساحة سفلية لاستيعاب التكبير والتوهج */
.s-rating-stars-wrapper {
    padding-bottom: 15px !important; /* مساحة إضافية في الأسفل */
    margin-bottom: 5px !important;   /* ضبط الهوامش */
    height: auto !important;
}

/* 3. التأكد من أن ملف الـ SVG نفسه لا يقص الرسمة */
.s-rating-stars-btn-star svg {
    overflow: visible !important;
}
/* =========================================
   StoreX Patch: Homepage Testimonials Fix
   Force Static Display for Reviews
   ========================================= */

/* 1. تجميد التفاعل في قسم الآراء (لجعلها للعرض فقط) */
.s-block--testimonials .s-rating-stars-wrapper {
    pointer-events: none !important; /* إلغاء النقر وتمرير الماوس */
    cursor: default !important;
}

/* 2. تلوين النجوم المختارة (التي قيمها العميل) */
.s-block--testimonials .s-rating-stars-selected svg path,
.s-block--testimonials .s-rating-stars-full svg path {
    fill: #00f3ff !important; /* تعبئة سماوية مشعة */
    stroke: none !important;   /* إزالة الحدود */
    filter: drop-shadow(0 0 5px rgba(0, 243, 255, 0.8)) !important; /* توهج */
    opacity: 1 !important;
}

/* 3. معالجة النجوم الفارغة (غير المقيمة) في هذا القسم */
.s-block--testimonials .s-rating-stars-btn-star:not(.s-rating-stars-selected) svg path {
    fill: transparent !important;
    stroke: #2a2a35 !important; /* حدود داكنة باهتة */
    stroke-width: 1px !important;
    filter: none !important;
}

/* 4. تكبير النجوم قليلاً لتكون واضحة */
.s-block--testimonials .s-rating-stars-btn-star svg {
    width: 24px !important; /* حجم مناسب */
    height: 24px !important;
    transform: scale(1) !important; /* منع الحركة */
}

/* 5. إصلاح أيقونة "اقتباس" خلف التقييم */
.s-reviews-testimonial__icon svg path {
    fill: rgba(140, 60, 255, 0.1) !important; /* بنفسجي خافت جداً */
}

/* 6. تحسين بطاقة الرأي نفسها (Card Styling) */
.s-reviews-testimonial__inner {
    background: rgba(5, 4, 10, 0.6) !important; /* زجاجي */
    border: 1px solid rgba(140, 60, 255, 0.2) !important;
    backdrop-filter: blur(10px);
}
/* =========================================
   StoreX: Ultimate Testimonials Clean-up
   ========================================= */

/* 1. تفريغ الكرت الخارجي وإزالة أي هوامش مزعجة */
.s-reviews-testimonial {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    margin: 10px 0 !important;
}

/* 2. تصميم الفقاعة الزجاجية الرئيسية (الحاوية الداخلية فقط) */
.s-reviews-testimonial__inner {
    background: rgba(15, 15, 25, 0.7) !important; /* لون الزجاج الغامق */
    backdrop-filter: blur(15px) !important;        /* التغبيش */
    -webkit-backdrop-filter: blur(15px) !important;
    border: 1px solid rgba(140, 60, 255, 0.3) !important; /* حدود نيون خفيفة */
    border-radius: 20px !important;
    padding: 25px !important;
    position: relative !important;
    overflow: hidden !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3) !important;
}

/* 3. نسف جميع الخلفيات الداخلية (اسم العميل، التقييم، النص) */
.s-reviews-testimonial__name_wrapper,
.s-reviews-testimonial__rating,
.s-reviews-testimonial__info,
.s-reviews-testimonial__text {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin-top: 5px !important;
}

/* 4. تنسيق النص */
.s-reviews-testimonial__text p {
    color: #e0e0e0 !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    z-index: 2 !important;
    position: relative !important;
}

/* 5. ضبط اسم العميل */
.s-reviews-testimonial__info h2,
.s-reviews-testimonial__info h3 {
    color: #00f3ff !important; /* لون سماوي للاسم */
    font-weight: bold !important;
    font-size: 16px !important;
    margin: 0 !important;
}

/* 6. علامة الاقتباس (") - الحجم والمكان المثالي */
.s-reviews-testimonial__icon {
    position: absolute !important;
    top: 15px !important;
    left: 20px !important; /* وضعناها يسار لتبتعد عن النص العربي */
    z-index: 0 !important; /* خلف النص */
    opacity: 0.1 !important; /* شفافة جداً */
}

.s-reviews-testimonial__icon svg {
    width: 40px !important; /* حجم متوسط */
    height: 40px !important;
    fill: #8c3cff !important; /* بنفسجي */
}

/* 7. تثبيت النجوم في الصفحة الرئيسية (بدون تفاعل) */
.s-block--testimonials .s-rating-stars-wrapper {
    pointer-events: none !important;
}
.s-block--testimonials .s-rating-stars-btn-star svg {
    width: 18px !important;
    height: 18px !important;
}
/* ============================================================
   StoreX: READ-ONLY ZONES PROTECTION (Product & Reviews)
   Target: Fix interactive stars in non-interactive areas
   ============================================================ */

/* 1. تحديد المناطق التي يجب أن تكون النجوم فيها "للعرض فقط" */
/* يشمل: صفحة المنتج، قائمة التعليقات، كروت المنتجات، السلايدر */
.main-content salla-rating-stars,       /* عنوان المنتج */
.s-comments-product salla-rating-stars, /* قسم التعليقات */
.s-product-card-rating,                 /* كروت المنتجات */
salla-reviews,                          /* سلايدر الآراء */
.s-reviews-summary-wrapper              /* ملخص التقييمات */
{
    pointer-events: none !important; /* إلغاء تفاعل الماوس تماماً */
    cursor: default !important;
}

/* 2. تلوين النجوم "الممتلئة" فعلياً (بدون هوفر) */
/* نعتمد على كلاسات سلة الأصلية (selected/full) */
.main-content .s-rating-stars-selected svg path,
.s-comments-product .s-rating-stars-selected svg path,
.s-product-card-rating .s-rating-stars-selected svg path,
salla-reviews .s-rating-stars-selected svg path,
.s-reviews-summary-wrapper .s-rating-stars-selected svg path {
    fill: #00f3ff !important; /* اللون السماوي */
    stroke: none !important;
    filter: drop-shadow(0 0 5px rgba(0, 243, 255, 0.6)) !important;
    opacity: 1 !important;
}

/* 3. تلوين النجوم "الفارغة" */
.main-content .s-rating-stars-btn-star:not(.s-rating-stars-selected) svg path,
.s-comments-product .s-rating-stars-btn-star:not(.s-rating-stars-selected) svg path,
salla-reviews .s-rating-stars-btn-star:not(.s-rating-stars-selected) svg path {
    fill: rgba(255, 255, 255, 0.05) !important; /* لون رمادي خافت جداً */
    stroke: #333 !important;
    stroke-width: 1px !important;
}

/* 4. إصلاح حجم النجوم في صفحة المنتج (تكون أحياناً صغيرة جداً) */
.main-content .s-rating-stars-medium svg {
    width: 22px !important;
    height: 22px !important;
}

/* 5. ضمان أن نافذة التقييم المنبثقة (Modal) تظل تعمل */
/* هذا الاستثناء يضمن أن الكود أعلاه لا يقتل النافذة التي تظهر عند ضغط "تقييم" */
.s-modal-body salla-rating-stars,
.s-rating-modal-wrapper salla-rating-stars {
    pointer-events: auto !important; /* إعادة التفاعل */
    cursor: pointer !important;
}