/* استيراد خط تجوال */
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800;900&display=swap');

/* 1. الخلفية العامة: لمسة احترافية داكنة جداً مع تدرج خفيف */
body, .salla-theme, .app-inner {
    background: linear-gradient(135deg, #020617 0%, #0a0f24 100%) !important;
    color: #e2e8f0 !important;
    font-family: 'Tajawal', sans-serif !important;
}

/* 2. شريط التنقل العلوي (الهيدر) - تأثير زجاجي شفاف */
header, .store-header, .site-header {
    background: rgba(2, 6, 23, 0.7) !important;
    backdrop-filter: blur(15px) !important;
    border-bottom: 1px solid rgba(14, 165, 233, 0.2) !important;
}

/* 3. تعديل كروت التصنيفات والمنتجات (تأثير الجيمنج) */
.product-item, .product-card, .s-product-card, .category-item {
    background: linear-gradient(145deg, #0f172a, #1e293b) !important;
    border: 1px solid rgba(14, 165, 233, 0.15) !important;
    border-radius: 16px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    overflow: hidden !important;
}

/* توهج أزرق (Neon Glow) عند تمرير الماوس على المنتجات أو الأقسام */
.product-item:hover, .product-card:hover, .s-product-card:hover, .category-item:hover {
    border-color: #0ea5e9 !important;
    box-shadow: 0 0 25px rgba(14, 165, 233, 0.3), inset 0 0 10px rgba(14, 165, 233, 0.1) !important;
    transform: translateY(-8px) scale(1.02) !important;
}

/* 4. تعديل الصناديق الرمادية (المميزات: أمان مستدام، تنفيذ ذكي) */
/* بنحولها من رمادي كئيب إلى زجاجي أنيق */
.feature-item, .s-block-features .s-feature-card, .store-features > div {
    background: rgba(15, 23, 42, 0.5) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 20px !important;
    transition: 0.3s !important;
}
.feature-item:hover, .s-block-features .s-feature-card:hover, .store-features > div:hover {
    background: rgba(30, 58, 138, 0.4) !important;
    border-color: #0ea5e9 !important;
    box-shadow: 0 5px 15px rgba(14, 165, 233, 0.15) !important;
}

/* 5. قسم التقييمات (إلغاء اللون الأخضر وتحويله لستايل فخم) */
.testimonial-item, .s-block-testimonials .s-testimonial-card, .rate-box {
    background: linear-gradient(to bottom right, #0f172a, #020617) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-right: 4px solid #0ea5e9 !important; /* خط أزرق جمالي على اليمين */
    border-radius: 12px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3) !important;
}

/* 6. الأزرار - تأثير نبض نيون */
.btn, button, .add-to-cart-btn, .btn-primary {
    background: linear-gradient(45deg, #0ea5e9, #2563eb) !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    border: none !important;
    font-weight: 800 !important;
    letter-spacing: 1px !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    overflow: hidden !important;
}

.btn:hover, button:hover, .add-to-cart-btn:hover, .btn-primary:hover {
    box-shadow: 0 0 20px rgba(14, 165, 233, 0.5) !important;
    transform: scale(1.05) !important;
}

/* 7. النصوص والعناوين والأسعار */
h1, h2, h3, h4, .section-title, .s-block-title {
    color: #fff !important;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5) !important;
}

.price, .product-price {
    color: #0ea5e9 !important;
    text-shadow: 0 0 8px rgba(14, 165, 233, 0.3) !important;
    font-weight: 900 !important;
}

/* إخفاء أي خلفية بيضاء تابعة لثيم سلة الأصلي */
.bg-white, .section-bg {
    background-color: transparent !important;
}