/* 
============================================================
القسم 1: المتغيرات الجذرية (Root Variables)
الغرض: تعريف المتغيرات الأساسية للألوان لتسهيل الصيانة والتغيير المركزي في التصميم
============================================================ */
:root {
    --main-color: #1f154e; /* اللون الرئيسي الداكن للموقع (أزرق- بنفسجي) */
}

/* 
============================================================
القسم 2: تنسيقات قسم العداد (Count Section)
الغرض: تنسيق قسم الإحصائيات الذي يعرض أرقامًا بارزة مع خلفية جذابة
============================================================ */
.inner.bg-inherit.w-full {
    background-color:#fff;
}

header i.header-btn__icon.icon.sicon-cart ,
header i.header-btn__icon.sicon-user ,
span.header-btn__icon.icon.sicon-search{
    background:var(--main-color) ;
    border-radius:50px;
    
}

/* تنسيقات الحاوية الرئيسية لقسم العداد */
.count {
    max-width: unset;          /* إلغاء الحد الأقصى للعرض لتمديد القسم بالكامل */
    background-color: #4b3d98; /* خلفية بنفسجية داكنة */
    margin-top: 0;             /* إزالة الهامش العلوي */
    padding-block: 2.5rem;     /* مساحة داخلية عمودية */
}

/* إخفاء العنصر الدائري الذي يحتوي على أيقونة (لا يُستخدم في التصميم الحالي) */
.count .flex.items-center.justify-center.w-10.h-10.mx-auto.mb-3.rounded-full.sm\:w-12.sm\:h-12:has(i) {
    display: none;
}

/* تنسيق الأرقام الإحصائية الرئيسية (أرقام كبيرة وواضحة) */
.count p.stats-number.text-4xl.font-bold {
    color: #fff !important;    /* لون أبيض نقي */
    font-weight: 800 !important; /* عرض خط عالي جدًا للوضوح */
}

/* تنسيق النصوص التوضيحية تحت الأرقام (مثل "عميل سعيد") */
.count p.mb-2.text-2xl.font-bold.text-md.text-store-text-primary {
    color: #fff; /* لون أبيض متناسق مع الخلفية */
}

/* 
============================================================
القسم 3: كروت المنتجات (Product Cards)
الغرض: تحسين مظهر كروت المنتجات مع تأثيرات تفاعلية عند التمرير
============================================================ */

/* تنسيقات أساسية لكروت المنتجات */
custom-salla-product-card {
    border: 1px solid #dddd !important; /* حدود خفيفة */
    transition: 0.5s !important;        /* انتقال سلس للتأثيرات */
    overflow: hidden;                   /* إخفاء المحتوى الزائد عند التأثيرات */
}

/* تأثير الهوفر العام على كرت المنتج (عند تمرير المؤشر على زر الشراء) */
custom-salla-product-card:has(button.s-button-element.s-button-btn:hover) {
    box-shadow: 3px 3px 5px 4px #ddd !important; /* ظل ناعم */
    border: 1px solid var(--main-color);         /* تغيير لون الحدود للون الرئيسي */
}

/* تأثير هوفر محسن خاص بالصفحة الرئيسية (حركة رفع + زوايا مدورة) */
body.index custom-salla-product-card:has(button.s-button-element.s-button-btn:hover) {
    transform: translateY(-10px) !important; /* رفع الكرت لأعلى */
    box-shadow: 3px 3px 5px 4px #ddd !important;
    border: 1px solid var(--main-color) !important;
    border-radius: 12px; /* زوايا أكثر نعومة */
}

/* 
============================================================
القسم 4: سلايدر المنتجات (Products Slider)
الغرض: إضافة مساحة مناسبة لسلايدر المنتجات في الصفحة الرئيسية
============================================================ */
body.index salla-products-slider.s-products-slider-wrapper.hydrated .swiper.s-slider-container {
    padding: 30px 0 0 !important; /* مساحة علوية إضافية لتجنب التصاق السلايدر بالعناصر أعلاه */
}

/* 
============================================================
القسم 5: قسم الميزات المحسّنة (Enhanced Features)
الغرض: إنشاء خط زخرفي تحت العناوين مع تأثيرات بصرية جذابة
============================================================ */

/* إزالة حدود غير مرغوبة من عناصر الميزات */
.s-block--enhanced-features__item.group.overflow-hidden.anime-item {
    border-color: transparent !important;
}

/* إعداد الحاوية لوضع الخط الزخرفي */
.feat {
    position: relative;
}

/* إنشاء خط أفقي زخرفي بنفسجي تحت العناوين */
.feat:before {
    position: absolute;
    content: '';
    background-color: #807cf8; /* لون بنفسجي فاتح */
    height: 2px;               /* سمك الخط */
    width: 65%;                /* عرض الخط النسبي */
    z-index: 1;
    top: 30%;                  /* موضع عمودي */
    transform: translate(-50%);/* توسيط الخط */
    left: 50%;
}

/* ضبط طبقات العناصر لضمان ظهور الخط الزخرفي بشكل صحيح */
.s-block--enhanced-features__item.group.overflow-hidden.anime-item {
    z-index: 9 !important;
    position: relative;
    background-color: transparent;
}

/* 
============================================================
القسم 6: تخصيص صورة الفوتر (Footer Image)
الغرض: استبدال صورة الفوتر بصورة مخصصة من رابط خارجي
============================================================ */
footer img.img-fluid {
    content: url(https://img.imgdd.com/bf4cdea4-1573-42f2-9e73-30319fdc58fc.webp);
    /* ملاحظة: التأكد من أن الرابط صالح ويدعم HTTPS لتجنب مشاكل الأمان */
}
footer.store-footer.s-block--animate >svg {
    display:none;
}
/* 
============================================================
القسم 7: استجابة الشاشات الصغيرة (Media Query - شاشات أقل من 992px)
الغرض: تعديل التنسيقات لتناسب الأجهزة اللوحية والهواتف
============================================================ */
@media (max-width: 992px) {
    /* تقليل حجم خط العناوين في قسم الميزات */
    .feat h2 {
        font-size: 13px !important;
    }
    
    /* تقليل حجم النصوص التوضيحية في قسم الميزات */
    .feat p {
        font-size: 11px !important;
    }
    
    /* تعديل عرض الخط الزخرفي ليتناسب مع الشاشات الصغيرة */
    .feat:before {
        width: 80%; /* توسيع الخط ليغطي مساحة أكبر */
        top: 20%;   /* رفع الخط لأعلى قليلًا */
    }
    
    /* منع التفاف عناصر العداد لضمان العرض الأفقي */
    .count .flex.md\:gap-15.items-start.justify-center.flex-wrap.md\:flex-nowrap {
        flex-wrap: nowrap;
    }
    
    /* تكرار القاعدة أعلاه لضمان التطبيق (قد يكون مطلوبًا بسبب ترتيب CSS) */
    .count .flex.md\:gap-15.items-start.justify-center.flex-wrap.md\:flex-nowrap {
        flex-wrap: nowrap;
    }
    
    /* تقليل حجم النصوص التوضيحية في قسم العداد */
    .count p.mb-2.text-2xl.font-bold.text-md.text-store-text-primary {
        font-size: 14px;
    }
    
    /* إزالة الهوامش السفلية من عناصر العداد لتحسين الترتيب */
    .count .text-center.w-1\/2.md\:w-1\/4.mb-8.md\:mb-0.anime-item {
        margin-bottom: 0;
    }
    
    /* تقليل المساحة الداخلية لقسم العداد */
    .count {
        padding-block: 2rem;
    }
    
    /* تقليل حجم الأرقام الإحصائية الرئيسية */
    .count p.stats-number.text-4xl.font-bold {
        font-size: 30px;
    }
    
    /* توسيط جميع عناصر قسم "من نحن" للعرض الأمثل على الموبايل */
    section#about-7 * {
        justify-content: center;
        align-items: center;
        text-align: center;
    }

  i.sicon-menu.text-2xl {
        background-color: var(--main-color) !important;
        border-radius: 50px;
        padding: 8px;
    }
span.header-btn__icon.icon.sicon-search, i.header-btn__icon.icon.sicon-cart, i.header-btn__icon.sicon-user {
    padding: 20px;
}
}