/* Add custom CSS styles below */ 
/* استهداف أي حاوية منتج في أغلب قوالب سلة */
.product-card, .product-box, .s-product-card-vertical, .s-product-card {
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

/* الحركة عند مرور الماوس */
.product-card:hover, .product-box:hover, .s-product-card-vertical:hover, .s-product-card:hover {
    transform: translateY(-10px) !important; /* يرتفع للأعلى */
    box-shadow: 0 20px 40px rgba(140, 0, 255, 0.25) !important; /* ظل بنفسجي */
    z-index: 10 !important;
    position: relative !important;
}
/* تحسين شكل أزرار السلة */
.s-button-element, .s-add-to-cart-button, .s-button-primary {
    background-color: #8c00ff !important;
    color: #ffffff !important; /* التأكد أن النص أبيض */
    font-weight: bold !important;
    border: none !important;
    position: relative !important;
    overflow: hidden !important;
    box-shadow: 0 4px 15px rgba(140, 0, 255, 0.4) !important;
}

/* إضافة تأثير اللمعة المتحركة (Shine Effect) */
.s-button-element::after, .s-add-to-cart-button::after {
    content: '' !important;
    position: absolute !important;
    top: -50% !important;
    left: -60% !important;
    width: 20% !important;
    height: 200% !important;
    background: rgba(255, 255, 255, 0.3) !important;
    transform: rotate(30deg) !important;
    transition: none !important;
    animation: shine 3s infinite !important;
}

@keyframes shine {
    0% { left: -60%; }
    20% { left: 120%; }
    100% { left: 120%; }
}

/* تكبير الزر عند مرور الماوس */
.s-button-element:hover {
    transform: scale(1.05) !important;
    background-color: #a02dff !important; /* تفتيح اللون شوي عند اللمس */
    box-shadow: 0 6px 20px rgba(140, 0, 255, 0.6) !important;
}
/* تخصيص شكل شريط التمرير (Scrollbar) */

/* 1. عرض الشريط */
::-webkit-scrollbar {
    width: 10px; /* خليه نحيف وأنيق */
}

/* 2. خلفية المسار (الجهة اللي يمشي عليها الشريط) */
::-webkit-scrollbar-track {
    background: #000000 !important; /* خليه أسود عشان يختفي مع الخلفية */
}


/* 3. الزر المتحرك (اللي تمسكه بالماوس) */
::-webkit-scrollbar-thumb {
    background: #8c00ff !important; /* لونه بنفسجي نفس شعارك */
    border-radius: 50px !important; /* حواف دائرية فخمة */
    border: 2px solid #000000 !important; /* مسافة بسيطة عشان يبين كأنه طافي */
}

/* استهداف مباشر وقوي لكل عناصر قسم العملاء */

/* 1. تصفير خلفية الصندوق بالكامل */
[class*="testimonial"], .s-slider-block__item, .s-block-testimonials {
    background-color: transparent !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* 2. إجبار اللون الأبيض الرمادي على كل النصوص داخل القسم */
[class*="testimonial"] *, .s-block-testimonials * {
    color: #e2e8f0 !important;
    background-color: transparent !important;
}

/* 3. تنظيف أي إطار أو ظل أبيض حول الصور */
.testimonial-image, .testimonial-item img {
    border: 2px solid #29abe2 !important; /* إطار أزرق نحيف */
    background: transparent !important;
    box-shadow: none !important;
}

/* 4. تعديل النجوم عشان توضح فوق الخلفية الغامقة */
.s-rating-stars i {
    color: #ffca28 !important;
}

/* 5. إخفاء أي خلفية بيضاء "عنيدة" في البلوكات */
.s-block {
    background: transparent !important;
}

/* كود لتنظيف المساحات وتجهيز منطقة البنر */
.custom-element-section {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    display: block;
}

/* لإخفاء رسالة التنبيه إذا كنت ما تحتاج برمجة خاصة */
.css-custom-alert {
    display: none !important;
}

/* كود إجباري لتغيير لون القوائم المنسدلة */
.s-product-options-dropdown, 
.bootstrap-select .dropdown-menu, 
.dropdown-menu,
.dropdown-item,
select {
    background-color: #10111e !important; /* لون الخلفية كحلي غامق */
    color: #ffffff !important; /* لون النص أبيض */
}

/* تعديل لون النص داخل الخيارات */
.dropdown-menu span, 
.dropdown-menu li a,
option {
    color: #ffffff !important;
}

/* تعديل لون الخلفية عند اختيار عنصر أو تمرير الماوس */
.dropdown-menu li a:hover, 
.dropdown-item:hover,
.active,
.selected {
    background-color: #5d3fd3 !important; /* لون بنفسجي عند التأشير */
    color: #ffffff !important;
}

/* حل مشكلة الحواف البيضاء */
.bootstrap-select .dropdown-toggle, 
.form-control {
    background-color: transparent !important;
    color: #ffffff !important;
    border: 1px solid #5d3fd3 !important;
}

/* تحويل خلفية الصفحات التعريفية للون الكحلي */
.main-content, 
.page-container, 
.s-book-read {
    background-color: #10111e !important; /* نفس لون متجرك */
    color: #ffffff !important; /* تحويل النص للأبيض */
    border: none !important;
}

/* تعديل لون خلفية المربع الأبيض الكبير */
.card, .bg-white {
    background-color: #1a1c2e !important; /* درجة أفتح شوي عشان التميز */
    border: 1px solid #5d3fd3 !important; /* إطار بنفسجي خفيف */
}

/* 1. استهداف نصوص صفحة نجاح الطلب والفاتورة فقط وجعلها بيضاء */
.order-success-wrapper *, 
.order-details-wrapper *, 
.order-summary *, 
.checkout-v2-wrapper * {
    color: #ffffff !important;
}

/* 2. استثناء: منع تحويل السعر المشطوب للأبيض وإجباره يبقى أحمر */
.order-summary strike, 
.order-summary del, 
.order-summary .old-price,
.order-details-wrapper strike, 
.order-details-wrapper del,
.order-details-wrapper .old-price,
[style*="text-decoration: line-through"] {
    color: #ff4d4d !important; /* اللون الأحمر للخصم */
    text-decoration: line-through !important;
}

/* 3. تبييض العناوين والفقرات في الفاتورة لضمان الوضوح */
.order-success-wrapper h1, 
.order-success-wrapper h2, 
.order-success-wrapper p, 
.order-success-wrapper span {
    color: #ffffff !important;
    opacity: 1 !important;
}