/* Add custom CSS styles below */ 
/* --- بداية تصميم الواجهة الفاخرة لجمعية منار رابغ --- */

/* 1. البطاقة العائمة (تأثير الفخامة) */
.product-entry, .s-product-card-entry {
    background: #ffffff !important;
    border: none !important; /* إلغاء الحدود التقليدية */
    border-radius: 20px !important; /* تدوير الزوايا بشكل ملحوظ */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05) !important; /* ظل ناعم جداً يعطي عمقاً */
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important; /* حركة انسيابية جداً */
    padding-bottom: 10px !important;
}

/* حركة البطاقة عند المرور عليها */
.product-entry:hover, .s-product-card-entry:hover {
    transform: translateY(-8px) scale(1.01) !important; /* ترتفع وتقترب قليلاً */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1) !important; /* الظل يكبر */
}

/* 2. تحسين صور المشاريع (نظافة بصرية) */
.product-entry__image img, .s-product-card-image img {
    height: 240px !important;
    width: 100% !important;
    object-fit: cover !important;
    border-top-left-radius: 20px !important;
    border-top-right-radius: 20px !important;
    border-bottom-left-radius: 0 !important; /* إلغاء التدوير من الأسفل لدمج الصورة مع البطاقة */
    border-bottom-right-radius: 0 !important;
}

/* 3. زر التبرع/الإضافة للسلة (أهم جزء) */
.s-add-to-cart-button, .btn-add-to-cart, .product-cart-btn {
    background-image: linear-gradient(45deg, #1f8e6d, #2ecc71) !important; /* تدرج لوني أخضر جذاب */
    color: #fff !important;
    border-radius: 50px !important; /* كبسولة كاملة */
    box-shadow: 0 4px 15px rgba(46, 204, 113, 0.3) !important; /* ظل ملون بلون الزر */
    border: none !important;
    font-weight: bold !important;
    padding: 10px 20px !important;
    transition: transform 0.2s !important;
}

.s-add-to-cart-button:hover, .btn-add-to-cart:hover {
    transform: scale(1.05) !important; /* تكبير بسيط عند الضغط */
    box-shadow: 0 6px 20px rgba(46, 204, 113, 0.5) !important;
}

/* 4. إبراز عنوان المشروع */
.product-entry__title a, .s-product-card-content-title a {
    font-size: 16px !important;
    font-weight: 800 !important; /* خط عريض جداً */
    color: #333 !important;
    margin-bottom: 5px !important;
}

/* 5. السعر/مبلغ التبرع (تلوينه ليبرز) */
.product-entry__price, .s-product-card-price {
    color: #1f8e6d !important; /* نفس لون هوية الجمعية الأخضر */
    font-weight: bold !important;
    font-size: 1.1em !important;
}

/* --- نهاية الكود --- */
/* --- بداية تعديل حجم البانر الرئيسي (السلايدر) --- */

/* 1. تحديد ارتفاع أقصى للصور في البانر */
.s-block--slider .swiper-slide img,
.home-slider .swiper-slide img {
    max-height: 380px !important;  /* الارتفاع الجديد (يمكنك تغييره لـ 300 لو أردتيه أصغر) */
    object-fit: cover !important;  /* يضمن أن الصورة تملأ المكان بذكاء دون أن تنضغط */
    width: 100% !important;
}

/* 2. تحسين نقاط التنقل (النقاط أسفل البانر) لتقريبها */
.s-block--slider .swiper-pagination {
    bottom: 10px !important; /* رفع النقاط للأعلى قليلاً */
}

/* 3. (اختياري) إخفاء البانر تماماً في الجوال إذا كان يزحمه */
@media (max-width: 768px) {
    .s-block--slider .swiper-slide img {
        max-height: 200px !important; /* ارتفاع أصغر للجوال */
    }
}
/* --- بداية كود الهيدر وتجربة المستخدم (المعدل) --- */

/* 2. تحسين أزرار التبرع في الجوال */
@media screen and (max-width: 768px) {
    .product-entry .btn-add-to-cart, 
    .s-add-to-cart-button,
    button[class*="add-to-cart"] {
        width: 100% !important;
        display: block !important;
        padding: 15px !important;
        margin-top: 10px !important;
        font-size: 16px !important;
    }
}

/* 3. توضيح الخطوط */
body, h1, h2, h3, a {
    color: #222 !important;
}

/* --- نهاية الكود --- */