/* Add custom CSS styles below */ 
/* 1. ترقية الخط إلى خط "القاهرة" الاحترافي والدائري */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;800&display=swap');

body, h1, h2, h3, h4, h5, h6, .product-title, .store-name, a, span, button {
    font-family: 'Cairo', sans-serif !important;
}

/* 2. تحويل بطاقات المنتجات في ثيم رائد إلى شكل دائري ناعم وعميق */
.product-box, .product-card {
    border-radius: 16px !important;
    border: 1px solid #f1f2f6 !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.04) !important;
    transition: all 0.3s ease-in-out !important;
    background: #ffffff !important;
    overflow: hidden;
}

/* تأثير تفاعلي عند تمرير الماوس فوق المنتج (يجعل الموقع يبدو حيوياً بدون جافا سكريبت) */
.product-box:hover, .product-card:hover {
    transform: translateY(-5px) !important;
    border-color: #ffcc00 !important; /* اللون الأصفر من الشعار */
    box-shadow: 0 10px 25px rgba(0, 140, 207, 0.12) !important; /* ظل أزرق خفيف جداً */
}

/* 3. تعديل أزرار "إضافة للسلة" لتصبح دائرية وجذابة باللون الأحمر من الشعار */
.btn-add-to-cart, .salla-button, .buy-btn {
    background-color: #e52421 !important; /* الأحمر الأساسي من شعارك */
    color: #ffffff !important;
    border-radius: 25px !important; /* حواف دائرية بالكامل */
    font-weight: 600 !important;
    border: none !important;
    transition: all 0.2s ease !important;
}

.btn-add-to-cart:hover, .salla-button:hover {
    background-color: #b81715 !important;
    box-shadow: 0 4px 12px rgba(229, 36, 33, 0.3) !important;
}

/* 4. تلوين شارات الخصم (Badges) باللون التركوازي/الأخضر من كلمة "تعلم" */
.product-badge, .discount-badge, .tag-badge {
    background-color: #00b2a9 !important;
    color: #ffffff !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
}

/* 5. شريط الإعلانات العلوي لثيم رائد - تدرج مبهج يناسب الألعاب */
.announcement-bar, .top-header {
    background: linear-gradient(135deg, #008ccf, #00b2a9) !important; /* تدرج أزرق وأخضر من الشعار */
    color: #ffffff !important;
}