/* --- استخدام متغيرات الألوان الخاصة بمتجرك --- */
:root {
    /* هذه هي متغيرات الألوان من الكود القديم الخاص بك */
    --color-primary: #19c5f8;
    --color-primary-dark: #009fd2;
    --color-primary-light: #3febff;
    --color-primary-reverse: #004679; /* هذا اللون قد يكون مفيداً للنصوص على خلفيات فاتحة */
    --dark-bg-main: #141a2a;
    --dark-text-main: #ffffff;
    --dark-text-sec: #a9a9a9;
    --dark-grey: #141a2a;
    --text-btn: #ffffff; /* لون النص للأزرار */
    --bg-color: #f8fafc; /* لون الخلفية العام */
    --header-bg: #ffffff;
    --menu-bg: #ffffff;
    --footer-bg: #ffffff;

    /* يمكنك إضافة متغيرات جديدة إذا احتجت */
    --custom-border-color: #e0e0e0; /* لون إطار خفيف مقترح */
    --custom-hover-shadow: rgba(0,0,0,0.08); /* ظل خفيف مقترح عند التمرير */
    --custom-card-bg: #ffffff; /* خلفية البطاقات */
    --custom-section-bg-light: #f9f9f9; /* خلفية فاتحة لبعض الأقسام */
}

/* --- تحسينات عامة --- */
body {
    background-color: var(--bg-color); /* استخدام لون الخلفية العام من متغيراتك */
    /* font-family: 'Tajawal', sans-serif; */ /* يمكنك إلغاء التعليق وتجربة خط مختلف */
}

.s-block {
    padding-top: 35px;
    padding-bottom: 35px;
}

/* --- تعديلات على بطاقات المنتجات --- */
.product-card {
    background-color: var(--custom-card-bg);
    border: 1px solid var(--custom-border-color);
    border-radius: 10px; /* زيادة تدوير الحواف قليلاً */
    transition: all 0.25s ease-in-out;
    overflow: hidden; /* لضمان أن التأثيرات لا تتجاوز حدود البطاقة */
}

.product-card:hover {
    box-shadow: 0 5px 20px var(--custom-hover-shadow);
    transform: translateY(-4px);
}

.product-card__image-wrapper {
    border-bottom: 1px solid var(--custom-border-color);
}

.product-card__name {
    font-size: 1rem;
    min-height: 42px;
    margin-bottom: 12px;
    font-weight: 500; /* وزن خط متوسط لاسم المنتج */
    color: #333; /* لون أغمق قليلاً لاسم المنتج لتحسين الوضوح */
}

.product-card__price {
    font-size: 1.15rem;
    font-weight: bold;
    color: var(--color-primary); /* استخدام اللون الأساسي لمتجرك للسعر */
}

/* تعديل أزرار "أضف للسلة" أو ما شابهها */
.product-card .s-button,
.s-button-primary,
.s-button--primary {
    border-radius: 8px !important;
    font-size: 0.95rem !important;
    padding: 12px 18px !important;
    background-color: var(--color-primary) !important; /* استخدام اللون الأساسي لمتجرك */
    color: var(--text-btn) !important; /* استخدام لون نص الأزرار من متغيراتك */
    border: none !important; /* إزالة أي إطار افتراضي للزر */
    transition: background-color 0.2s ease !important;
    text-transform: uppercase; /* جعل نص الزر بأحرف كبيرة إذا كان هذا يتماشى مع التصميم المرغوب */
    letter-spacing: 0.5px; /* تباعد بسيط بين الأحرف */
}

.product-card .s-button:hover,
.s-button-primary:hover,
.s-button--primary:hover {
    background-color: var(--color-primary-dark) !important; /* استخدام اللون الأساسي الداكن عند التمرير */
}

/* --- تعديلات على قسم "الأسئلة الشائعة" (إذا كان يستخدم أكورديون) --- */
.s-faq-accordion__item, .accordion-item {
    border: 1px solid var(--custom-border-color);
    margin-bottom: 12px;
    border-radius: 8px;
    overflow: hidden; /* لضمان تناسق الحواف المدورة */
}

.s-faq-accordion__header, .accordion-header button {
    background-color: var(--custom-section-bg-light);
    padding: 18px;
    font-weight: bold;
    color: #444; /* لون أغمق قليلاً لعنوان السؤال */
    width: 100%; /* ضمان أن الزر يملأ العرض */
    text-align: right; /* محاذاة النص لليمين للغة العربية */
    border: none; /* إزالة أي إطار للزر */
}

.s-faq-accordion__header:hover, .accordion-header button:hover {
    background-color: #f0f0f0; /* تغيير طفيف في الخلفية عند التمرير */
}

.s-faq-accordion__content, .accordion-body {
    padding: 18px;
    background-color: var(--custom-card-bg);
    border-top: 1px solid var(--custom-border-color); /* خط فاصل بين السؤال والجواب */
}

/* --- تعديلات على قسم "آراء العملاء" --- */
.s-testimonial-card, .testimonial-card {
    background-color: var(--custom-section-bg-light);
    border: 1px solid var(--custom-border-color);
    padding: 25px;
    border-radius: 10px;
    margin-bottom: 20px;
}

.s-testimonial-card__text, .testimonial-text {
    color: #555; /* لون للنص داخل شهادة العميل */
    margin-bottom: 15px;
}

.s-testimonial-card__author, .testimonial-author {
    font-weight: bold;
    margin-top: 12px;
    color: var(--color-primary); /* استخدام اللون الأساسي لاسم العميل */
}

/* --- تعديل بسيط على الشريط العلوي (Header) --- */
.s-header-sticky.is-sticky .s-header-main,
.site-header {
   background-color: var(--header-bg) !important; /* ضمان لون خلفية الهيدر من متغيراتك */
   box-shadow: 0 2px 8px var(--custom-hover-shadow); /* ظل أكثر نعومة */
}

/* --- تحسينات إضافية مقترحة --- */

/* عنوان الأقسام الرئيسية */
.s-block-title, .section-title {
    font-size: 1.8rem; /* حجم أكبر لعناوين الأقسام */
    font-weight: bold;
    margin-bottom: 25px;
    color: #333;
    text-align: center; /* توسط عنوان القسم */
}

/* تعديل مظهر الـ "سلايدر" أو "الكاروسيل" إذا كان مستخدماً للمنتجات أو الآراء */
.slick-dots li button:before {
    font-size: 10px !important; /* حجم نقاط التنقل في السلايدر */
    color: var(--color-primary) !important; /* لون نقاط التنقل */
    opacity: 0.5 !important;
}

.slick-dots li.slick-active button:before {
    opacity: 1 !important;
    color: var(--color-primary-dark) !important;
}

.slick-prev:before, .slick-next:before {
    color: var(--color-primary) !important; /* لون أسهم التنقل في السلايدر */
    font-size: 24px !important;
}