/* Add custom CSS styles below */ 
/*
 * Custom CSS for Manafiz Al-Halawiyat Salla Store
 * Author: Manus AI
 * Date: 2026-04-01
 *
 * هذا الكود يهدف إلى تحسين المظهر العام لمتجرك على منصة سلة،
 * مع التركيز على تحسين التباين، الخطوط، وأزرار الإجراءات.
 * قد تحتاج بعض التعديلات الطفيفة لتتناسب تمامًا مع قالب متجرك المحدد.
 *
 * تعليمات التركيب:
 * 1. اذهب إلى لوحة تحكم متجرك في سلة.
 * 2. اختر "تصميم المتجر" ثم "تخصيص القالب".
 * 3. ابحث عن خيار "إضافة كود CSS مخصص" أو "Custom CSS".
 * 4. الصق هذا الكود بالكامل في المساحة المخصصة.
 * 5. احفظ التغييرات.
 */

/* استيراد الخطوط العربية والإنجليزية المقترحة */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Arabic:wght@300;400;700;900&family=Montserrat:wght@300;400;700;900&display=swap');

/* الألوان الأساسية (يمكن تعديلها لتناسب هوية متجرك) */
:root {
    --primary-color: #805AD5; /* لون أرجواني للأزرار والعناصر الرئيسية */
    --secondary-color: #F6AD55; /* لون برتقالي للعناصر الثانوية أو التمييز */
    --text-color-dark: #1A202C; /* لون النص الغامق */
    --text-color-light: #4A5568; /* لون النص الفاتح / الثانوي */
    --background-color: #FFFFFF;
    --border-color: #E2E8F0;
}

/* تطبيق الخطوط الأساسية على كامل المتجر */
body,
.s-text,
h1, h2, h3, h4, h5, h6,
a,
p,
span,
div {
    font-family: 'Noto Sans Arabic', 'Montserrat', sans-serif !important;
    color: var(--text-color-light);
}

/* تحسين تباين العناوين والنصوص الرئيسية */
h1, h2, h3 {
    color: var(--text-color-dark) !important;
    font-weight: 700 !important;
}

/* تحسين أزرار "إضافة للسلة" والأزرار الرئيسية */
.btn-primary,
.s-button-primary,
.add-to-cart-button {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: var(--background-color) !important;
    font-weight: 700 !important;
    border-radius: 8px !important; /* حواف مستديرة للأزرار */
    padding: 12px 25px !important;
    transition: all 0.3s ease !important;
}

.btn-primary:hover,
.s-button-primary:hover,
.add-to-cart-button:hover {
    background-color: #6B46C1 !important; /* درجة أغمق عند التحويم */
    border-color: #6B46C1 !important;
    transform: translateY(-2px); /* تأثير بسيط عند التحويم */
}

/* أزرار ثانوية أو أزرار الإجراءات الأخرى */
.btn-secondary,
.s-button-secondary {
    background-color: var(--background-color) !important;
    border-color: var(--primary-color) !important;
    color: var(--primary-color) !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    padding: 10px 20px !important;
    transition: all 0.3s ease !important;
}

.btn-secondary:hover,
.s-button-secondary:hover {
    background-color: var(--primary-color) !important;
    color: var(--background-color) !important;
}

/* تحسين مظهر بطاقات المنتجات */
.product-card,
.s-product-card {
    border: 1px solid var(--border-color) !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05) !important;
    transition: all 0.3s ease !important;
}

.product-card:hover,
.s-product-card:hover {
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1) !important;
    transform: translateY(-3px); /* تأثير رفع بسيط عند التحويم */
}

/* تحسين صور المنتجات داخل البطاقات */
.product-card-image img,
.s-product-card-image img {
    border-radius: 8px 8px 0 0 !important;
    object-fit: cover !important; /* لضمان ملء الصورة للمساحة دون تشويه */
    height: 200px; /* مثال: يمكن تعديل الارتفاع حسب الحاجة */
}

/* تحسين أسعار المنتجات */
.product-price,
.s-product-price {
    color: var(--primary-color) !important;
    font-weight: 900 !important;
    font-size: 22px !important;
}

.product-price-old,
.s-product-price-old {
    color: var(--text-color-light) !important;
    text-decoration: line-through !important;
    font-size: 16px !important;
    margin-right: 10px;
}

/* تحسين مظهر البنرات الرئيسية (افتراضًا أن لها كلاسات مشابهة) */
.main-banner,
.s-main-banner {
    border-radius: 15px !important;
    overflow: hidden;
    margin-bottom: 30px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* تحسين عناصر التنقل والقوائم */
.s-navbar-item,
.s-menu-item {
    font-weight: 400 !important;
    color: var(--text-color-dark) !important;
    transition: color 0.3s ease !important;
}

.s-navbar-item:hover,
.s-menu-item:hover {
    color: var(--primary-color) !important;
}

/* تحسين حقول الإدخال */
.s-form-control,
.s-input {
    border: 1px solid var(--border-color) !important;
    border-radius: 8px !important;
    padding: 10px 15px !important;
    color: var(--text-color-dark) !important;
}

.s-form-control:focus,
.s-input:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px rgba(128, 90, 213, 0.2) !important;
    outline: none !important;
}

/* تحسين تذييل الصفحة */
.s-footer {
    background-color: #f8f8f8 !important;
    padding: 40px 0 !important;
    border-top: 1px solid var(--border-color) !important;
}

.s-footer-link {
    color: var(--text-color-light) !important;
    font-size: 15px !important;
}

.s-footer-link:hover {
    color: var(--primary-color) !important;
}