/* Add custom CSS styles below */ 
/* =========================================
   1. تهيئة الموقع للأداء والسرعة (Speed & Performance) ⚡
   ========================================= */
/* تحسين استجابة المتصفح أثناء التمرير */
section, .s-block {
    content-visibility: auto;
    contain-intrinsic-size: 1px 500px;
}

/* =========================================
   2. قسم التصنيفات (Categories) 🗂️
   ========================================= */
.categoryies__style {
    margin-top: -4rem;
}

.categoryies__style .box-img img {
    max-width: 120px;
    max-height: 120px;
    object-fit: contain;
}

/* =========================================
   3. العناوين والأقسام (اللون الذهبي #dea035) 🏷️
   ========================================= */
section.s-block.s-block--banners .s-block__title .flex.flex-col.w-full h2.w-full.da-cp,
.s-slider-block__title h2 {
    background: #dea035 !important;
    color: #fff !important;
    padding: 0.7rem 10px 0.7rem 3rem;
    border-radius: 9999px 0 0px 9999px;
    width: fit-content;
    font-weight: bold;
}

/* إخفاء نقاط السلايدر لزيادة سرعة التحميل */
section.s-block.s-block--logos-slider .swiper-pagination {
    display: none !important;
}

/* =========================================
   4. بطاقات المنتجات وتأثير الموشن (Product Motion) 🛒
   ========================================= */
.s-product-card-entry {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); /* موشن انسيابي */
    border-radius: 12px;
}

/* الموشن عند التمرير (Hover) */
.s-product-card-entry:hover {
    transform: translateY(-8px); /* رفع المنتج للأعلى */
    box-shadow: 0 12px 20px rgba(222, 160, 53, 0.2); /* ظل ذهبي خفيف */
}

/* العنوان الترويجي: نص أبيض وخلفية ذهبية شفافة */
.s-product-card-promotion-title {
    background: rgba(222, 160, 53, 0.7) !important; /* اللون #dea035 شفاف */
    color: #fff !important;
    backdrop-filter: blur(4px); /* تأثير ضبابي عصري */
    border-radius: 4px;
    font-weight: 500;
}

/* =========================================
   5. حركة شعار المتجر (Logo Animation) ✨
   ========================================= */
.jamalik-logo {
    position: relative;
    display: inline-block;
    will-change: transform, opacity;
    animation: jamFadeIn 2000ms ease-out both;
}

.jamalik-logo img {
    width: clamp(160px, 22vw, 320px);
    height: auto;
    filter: drop-shadow(0 0 10px rgba(222, 160, 53, 0.4));
    animation: jamGlow 4s ease-in-out infinite alternate;
}

@keyframes jamFadeIn {
    0%   { opacity: 0; transform: translateY(10px) scale(0.98); }
    100% { opacity: 1; transform: translateY(0) scale(1.00); }
}

@keyframes jamGlow {
    0%   { filter: drop-shadow(0 0 8px rgba(222, 160, 53, 0.3)); }
    100% { filter: drop-shadow(0 0 18px rgba(222, 160, 53, 0.6)); }
}

/* =========================================
   6. التوافق مع الشاشات والجوال (Responsive) 📱
   ========================================= */
@media (max-width: 768px) {
    /* تدوير حواف البانرات في الجوال */
    section.s-block.s-block--banners img,
    section.s-block.s-block--banners .banner-entry {
        border-radius: 16px !important;
    }

    /* موازنة السلايدر */
    section.s-block.s-block--banners .swiper-wrapper {
        justify-content: center !important;
        gap: 8px !important;
        display: flex !important;
    }

    section.s-block.s-block--banners .swiper-slide {
        flex: 0 0 auto !important;
        width: 85% !important; /* عرض مناسب للجوال */
    }

    /* إلغاء السحب إذا كان مطلوباً تثبيت البانرات */
    section.s-block.s-block--banners .swiper-container {
        pointer-events: none !important;
    }
}

/* =========================================
   7. اللمسات النهائية (Footer & General) 🏁
   ========================================= */
.copyRight {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    margin: 2rem auto;
    padding: 0.8rem 1.5rem;
    border-radius: 30px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    font-weight: 500;
}

div[data-testid="bcio__popupTeaser"] {
    display: none !important;
}