/* --- 1. الإطار الخارجي للكارت (لمعان من اليمين لليسار فقط) --- */
custom-salla-product-card.s-product-card-entry {
    border-radius: 50px 50px 50px 0px !important;
    border: 1px solid transparent !important; 
    
    background-image: 
        linear-gradient(#ffffff, #ffffff), 
        linear-gradient(60deg, var(--color-primary, #e97314) 45%, rgba(255, 255, 255, 0.65) 50%, var(--color-primary, #e97314) 55%) !important;
        
    background-origin: padding-box, border-box !important;
    background-clip: padding-box, border-box !important;
    background-size: 300% 300% !important;
    
    /* الوقت الكلي 5 ثواني */
    -webkit-animation: borderShine 5s linear infinite !important; 
    animation: borderShine 5s linear infinite !important;
    
    overflow: hidden !important;
    box-shadow: none !important;
    transition: box-shadow 0.3s ease !important;
}

/* حركة باتجاه واحد (يمين لليسار) ثم إعادة مخفية */
@-webkit-keyframes borderShine {
    0% { background-position: 0% 50%; } /* تبدأ من أقصى اليمين */
    40% { background-position: 100% 50%; } /* تعبر لليسار وتختفي */
    100% { background-position: 100% 50%; } /* تنتظر شوي ثم تبدأ من جديد */
}

@keyframes borderShine {
    0% { background-position: 0% 50%; } 
    40% { background-position: 100% 50%; } 
    100% { background-position: 100% 50%; } 
}

/* إضافة ظل خفيف عند مرور الماوس */
custom-salla-product-card.s-product-card-entry:hover {
    box-shadow: 0 5px 20px rgba(0,0,0,0.06) !important;
}

/* --- 2. صورة المنتج --- */
.s-product-card-image, 
.s-product-card-image-cover {
    border-radius: 50px 0px 0px 0px !important;
}

/* --- 3. السعر وعنوان المنتج --- */
.s-product-card-price,
.s-product-card-sale-price h4,
.s-product-card-price .sicon-sar {
    color: #e97314 !important;
    font-weight: 900 !important;
    font-size: 18px !important;
}

.s-product-card-content-title a {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #111 !important;
}

/* --- 4. زر إضافة للسلة --- */
salla-add-product-button salla-button .s-button-element {
    background-color: #fce7d2 !important; 
    color: #2b1d0e !important; 
    border-color: #fce7d2 !important; 
    border-radius: 20px 20px 20px 0px !important; 
    width: 90% !important; 
    margin: 5px auto 10px auto !important; 
    font-weight: bold !important;
    transition: background-color 0.3s ease !important;
}

/* لون أيقونة السلة والنص داخل الزر */
salla-add-product-button salla-button .s-button-element span,
salla-add-product-button salla-button .s-button-element i {
    color: #2b1d0e !important; 
}

salla-add-product-button salla-button .s-button-element:hover {
    background-color: #f9d8b8 !important;
    border-color: #f9d8b8 !important;
}/* --- إضاءات الهوية الموزعة في خلفية الموقع بالكامل (دوائر عشوائية حرة) --- */
body, .store-wrapper {
    background-color: #fdfdfd !important; 
    
    /* 5 دوائر أرورا حرة موزعة بشكل عشوائي داخل الشاشة مو على الأطراف */
    background-image: 
        radial-gradient(circle at 25% 15%, rgba(233, 115, 20, 0.08) 0%, transparent 20%), /* دائرة فوق عاليسار */
        radial-gradient(circle at 75% 30%, rgba(233, 115, 20, 0.05) 0%, transparent 18%), /* دائرة يمين الوسط */
        radial-gradient(circle at 45% 60%, rgba(233, 115, 20, 0.04) 0%, transparent 25%), /* دائرة كبيرة في المنتصف */
        radial-gradient(circle at 15% 85%, rgba(233, 115, 20, 0.06) 0%, transparent 15%), /* دائرة تحت عاليسار */
        radial-gradient(circle at 85% 80%, rgba(233, 115, 20, 0.07) 0%, transparent 22%) !important; /* دائرة تحت عاليمين */
        
    background-attachment: fixed !important; /* عشان تبقى ثابته والكاردات تمشي فوقها */
    background-repeat: no-repeat !important;
    background-size: 100vw 100vh !important;
}

/* ======================================================
   تنسيق كاردات الميزات (مع تأثير إضاءة الأرورا في الزاوية)
====================================================== */

/* 1. التنسيق الأساسي للكارت */
.s-block--features__item {
    position: relative !important;
    background-color: #ffffff !important;
    border-radius: 20px !important; /* زوايا ناعمة دائرية زي الصورة */
    border: 1px solid rgba(233, 115, 20, 0.15) !important; /* إطار خفيف */
    padding: 20px 15px !important;
    overflow: hidden !important; /* مهم جداً عشان الإضاءة ما تطلع برا الكارت */
    z-index: 1 !important; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.02) !important;
    text-align: center !important;
    transition: all 0.3s ease !important;
}

/* 1. الإضاءة الخلفية الناعمة (Backlight) - كبرناها عشان تناسب حجم النار */
.s-block--features__item::before {
    content: '' !important;
    position: absolute !important;
    top: -50px !important; 
    left: -50px !important; 
    width: 180px !important; /* كبرنا هالة الضوء */
    height: 180px !important;
    background: radial-gradient(circle, rgba(233, 115, 20, 0.15) 0%, transparent 70%) !important; 
    filter: blur(25px) !important; 
    border-radius: 50% !important;
    z-index: 0 !important; 
    pointer-events: none !important;
    transition: transform 0.5s ease !important;
}
/* ======================================================
   تغيير لون الخلفية الرمادية لقسم العلامات التجارية
====================================================== */
.s-block--logos-slider.s-block--full-bg {
    /* لون خوخي/سكري فاتح جداً يتماشى مع هوية المتجر بدل الرمادي الميت */
    background-color: #fffaf5 !important; 
    
    /* خطين خفاف من فوق وتحت لتحديد القسم بأناقة */
    border-top: 1px solid rgba(233, 115, 20, 0.05) !important;
    border-bottom: 1px solid rgba(233, 115, 20, 0.05) !important;
}

/* 2. أيقونة الترس الميكانيكي المفرغ (Watermark لقطع الغيار) */
.s-block--features__item::after {
    content: '' !important;
    position: absolute !important;
    top: -45px !important; 
    left: -45px !important;
    width: 140px !important; 
    height: 140px !important;
    
    /* أيقونة ترس ميكانيكي (Gear) مصممة كعلامة مائية لقطع الغيار */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e97314' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    opacity: 0.12 !important; /* شفافة عشان ما تغطي الكلام */
    
    z-index: 0 !important;
    pointer-events: none !important;
    
    /* يلف ببطء دايماً مثل الماكينة (يأخذ 20 ثانية للفة الكاملة) */
    -webkit-animation: spinGear 40s linear infinite !important;
    animation: spinGear 40s linear infinite !important;
}

/* 3. التفاعل عند تمرير الماوس (الترس يلف أسرع ويكبر) */
.s-block--features__item:hover::after {
    opacity: 0.3 !important;
    -webkit-animation: spinGearFast 4s linear infinite !important;
    animation: spinGearFast 4s linear infinite !important;
}

/* ======================================================
   حركات الدوران الخاصة بالترس (ضفها بآخر الكود)
====================================================== */
@-webkit-keyframes spinGear {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}
@keyframes spinGear {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@-webkit-keyframes spinGearFast {
    0% { -webkit-transform: rotate(0deg) scale(1.1); }
    100% { -webkit-transform: rotate(360deg) scale(1.1); }
}
@keyframes spinGearFast {
    0% { transform: rotate(0deg) scale(1.1); }
    100% { transform: rotate(360deg) scale(1.1); }
}



/* تفاعل الهالة عند تمرير الماوس (تكبر شوي) */
.s-block--features__item:hover::before {
    transform: scale(1.3) !important;
}

.s-block--features__item:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 20px rgba(233, 115, 20, 0.1) !important;
}

/* تلوين الأيقونة بلون الهوية الأساسي */
.s-block--features__item .feature-icon {
    color: var(--color-primary, #e97314) !important;
}

.s-block--features__item h2 {
    font-weight: bold !important;
    color: #222 !important;
}

/* ======================================================
   تعديلات الجوال فقط (تحت 768px)
====================================================== */
/* ======================================================
   تعديلات الجوال فقط لكاردات الميزات (إجبارهم على سطر واحد)
====================================================== */
@media (max-width: 768px) {
    /* نكسر نظام الجريد حق سلة ونحوله لصف واحد إجباري */
    .s-block--features .grid {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important; /* السر هنا: يمنع نزولهم لسطر ثاني */
        justify-content: space-between !important;
        gap: 5px !important; /* مسافة صغيرة جداً بينهم */
    }

    /* نوزع المساحة بالتساوي (كل واحد ياخذ ثلث الشاشة) */
    .s-block--features__item {
        flex: 1 1 32% !important; 
        padding: 10px 2px !important;
        border-radius: 12px !important;
        min-width: 0 !important; /* يمنع الكارت يتمدد ويخرب الشاشة */
    }

    /* إخفاء الوصف تماماً */
    .s-block--features__item p {
        display: none !important;
    }

    /* تصغير الخط ومنع الكلمة من الانقسام */
    .s-block--features__item h2 {
        font-size: 11px !important;
        margin-top: 6px !important;
        margin-bottom: 0 !important;
        white-space: nowrap !important; /* يمنع النص ينزل سطر ثاني */
    }

    /* تصغير الأيقونة */
    .s-block--features__item .feature-icon {
        transform: scale(0.7) !important;
        margin-bottom: 0 !important;
    }
}

/* ======================================================
   تنسيق كاردات العلامات التجارية (توسيط العناصر + أرورا يمين)
====================================================== */

/* 1. توسيط عنوان القسم وشبكة الماركات بالكامل */
.s-block--logos-slider .s-block__title {
    display: flex !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
}

.s-block--logos-slider .s-block__title .right-side {
    margin: 0 auto !important; /* توسيط العنوان */
}

/* هنا السحر: تغيير الشبكة لـ Flex عشان يسنتر العناصر بالنص مهما كان عددها */
.s-block--logos-slider .grid {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 15px !important; /* المسافة بين الكاردات */
}

/* 2. التنسيق الأساسي للكارت (مع تحديد الحجم الجديد) */
.s-block--logos-slider .brand-item {
    flex: 0 1 calc(20% - 15px) !important; /* 5 أعمدة في اللابتوب */
    position: relative !important;
    background-color: #ffffff !important;
    border-radius: 20px !important; 
    border: 1px solid rgba(233, 115, 20, 0.15) !important; 
    padding: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important; 
    z-index: 1 !important; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.02) !important;
    transition: all 0.3s ease !important;
}



.s-block--logos-slider .brand-item:hover::before {
    transform: scale(1.3) !important; 
}

/* تنسيق صور الشعارات بذكاء */
.s-block--logos-slider .brand-item img {
    max-width: 100% !important;
    max-height: 80px !important; 
    object-fit: contain !important;
    transition: transform 0.3s ease !important;
    mix-blend-mode: multiply !important; /* يدمج الخلفية البيضاء للشعار مع لون الكارت */
}

.s-block--logos-slider .brand-item:hover img {
    transform: scale(1.08) !important;
}

/* ======================================================
   تعديل الكاردات للجوال
====================================================== */
@media (max-width: 768px) {
    .s-block--logos-slider .brand-item {
        flex: 0 1 calc(50% - 15px) !important; /* عمودين في الجوال بدل 5 */
        padding: 10px !important;
        border-radius: 15px !important;
    }
    
    .s-block--logos-slider .brand-item img {
        max-height: 55px !important; 
    }
}
/* ======================================================
   استثناء الكاردات الأفقية من زوايا (ورقة الشجر)
====================================================== */

/* 1. إرجاع الكارت الأفقي لزوايا دائرية عادية */
custom-salla-product-card.s-product-card-entry.s-product-card-horizontal {
    border-radius: 15px !important; 
}

/* 2. إرجاع صورة المنتج لزوايا عادية */
custom-salla-product-card.s-product-card-entry.s-product-card-horizontal .s-product-card-image,
custom-salla-product-card.s-product-card-entry.s-product-card-horizontal .s-product-card-image-cover {
    border-radius: 12px !important; 
}

/* 3. إرجاع زر الإضافة للسلة لزوايا عادية */
custom-salla-product-card.s-product-card-entry.s-product-card-horizontal salla-add-product-button salla-button .s-button-element {
    border-radius: 8px !important; 
}
/* ======================================================
   تصغير الهالة والترس الميكانيكي في شاشات الجوال
====================================================== */
@media (max-width: 768px) {
    /* تصغير الهالة المضيئة (Backlight) في الجوال */
    .s-block--features__item::before {
        width: 80px !important;
        height: 80px !important;
        top: -20px !important;
        left: -20px !important;
    }
    
    /* تصغير الترس الميكانيكي (Watermark) في الجوال */
    .s-block--features__item::after {
        width: 75px !important;
        height: 75px !important;
        top: -15px !important;
        left: -15px !important;
    }
}