/* 
   ملف CSS مخصص لمتجر سلة - نسخة معدلة وقوية
   تنبيه: تم استخدام !important لضمان تجاوز إعدادات القالب الافتراضية
*/

/* 1. لون الفوتر (أبيض حليبي) */
footer, 
.s-footer, 
.main-footer, 
#footer {
    background-color: #f8f9fa !important;
    background: #f8f9fa !important;
}

/* 2. لون الخط العام (أسود) */
html, body, div, p, span, a, h1, h2, h3, h4, h5, h6, 
.s-text-color, .s-title, .s-heading, .product-title, .price {
    color: #000000 !important;
}

/* 3. بروز بطاقة المنتج (خط عريض ومضيء باللون #221d51) */
.s-product-card, 
.product-item, 
.card-product {
    border: 3px solid #221d51 !important; /* زيادة سمك الخط */
    box-shadow: 0 0 15px rgba(34, 29, 81, 0.6) !important; /* إضاءة */
    border-radius: 12px !important; /* تحسين الحواف */
    overflow: hidden;
}

/* 4. خلفية المتجر (dbf0ef#) */
body, 
#app, 
.main-content, 
main {
    background-color: #dbf0ef !important;
}

/* 5. شكل بسيط ومضيء أعلى الفوتر (مثل نهاية الفاتورة) - حجم كبير x3 */
footer::before, 
.s-footer::before {
    content: '';
    display: block;
    width: 100%;
    height: 45px; /* زيادة الارتفاع x3 */
    /* تكبير الدوائر والمسافات لتناسب الحجم الجديد */
    background-image: radial-gradient(circle at 30px -20px, transparent 45px, #221d51 46px) !important;
    background-size: 60px 60px; /* زيادة حجم التكرار x3 */
    background-position: center;
    filter: drop-shadow(0 -10px 15px rgba(34, 29, 81, 0.6)); /* إضاءة أقوى وأكبر */
    margin-top: -45px; /* لضمان محاذاة الشكل مع الفوتر */
    position: relative;
    z-index: 10;
}

/* 6. الشعار كبير جداً والصفحة العلوية (الهيدر) مضيئة من الأسفل */
.header-logo img, 
.s-header__logo img, 
.logo img,
.s-header__logo,
.header__logo {
    max-width: 400px !important; /* تكبير الشعار إلى حجم ضخم */
    max-height: 200px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
}

/* التأكد من أن الحاوية تسمح بالحجم الكبير */
.s-header__container, .header__container {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

header, 
.s-header, 
.main-header {
    box-shadow: 0 8px 20px rgba(34, 29, 81, 0.4) !important; /* إضاءة أوضح من الأسفل */
    border-bottom: 1px solid rgba(34, 29, 81, 0.2) !important;
}

/* 7. تعديل لون زر أضف للسلة */
.s-add-to-cart-btn, 
.add-to-cart, 
.s-button-primary,
button[type="submit"].s-button,
.s-product-card__cart-button,
.s-add-to-cart-btn span,
.s-add-to-cart-btn i,
.s-button-primary span,
.s-product-card__cart-button span {
    background-color: #221d51 !important; /* خلفية كحلية */
    color: #dbf0ef !important; /* نص باللون الفاتح - إجبار */
    border: none !important;
    font-weight: bold !important;
    transition: 0.3s;
}

/* ضمان لون الخط للأيقونات والنصوص داخل الزر */
.s-add-to-cart-btn *, .s-button-primary *, .s-product-card__cart-button * {
    color: #dbf0ef !important;
}

.s-add-to-cart-btn:hover, 
.add-to-cart:hover,
.s-product-card__cart-button:hover {
    background-color: #dbf0ef !important; /* يعكس اللون عند التحويم */
    color: #221d51 !important;
    box-shadow: 0 0 10px rgba(34, 29, 81, 0.5) !important;
}