/* =========================================================================
   Custom CSS Overrides
   تم تنظيم الكود، إضافة تعليقات توضيحية، وإصلاح بعض الأخطاء البسيطة
   (مثل قيمة اللون الخاطئة #ffff وتنسيق المسافات)
   ========================================================================= */


/* -------------------------------------------------------------------------
   1) Banner Entries (اللينكات جوه الـ banner)
   ------------------------------------------------------------------------- */
.banner-entry a {
    opacity: 1;
    padding: 0;
    transition: 0.3s;
}

/* تكبير بسيط عند الـ hover */
.banner-entry a:hover {
    transform: scale(1.1);
}

.banner-entry {
    background-color: transparent;
    height: 100%;
    padding: 0;
    overflow: hidden;
    border-radius: 0;
}

/* تعديل شكل الـ avatar/lazy images (إزالة الاستدارة) */
.lazy__bg.lazy_avatar.lazy.rounded-full.\!h-14.\!w-14.md\:\!h-20.md\:\!w-20.mb-1.md\:mb-2.hover\:scale-110.entered.loaded {
    border-radius: 0;
}
   section.s-block.s-block--banners.container .grid.one-row.md\:grid-cols-3.grid-flow-row.gap-3.sm\:gap-8 {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

/* -------------------------------------------------------------------------
   2) Homepage Banner Section (section:nth-child(7) في الصفحة الرئيسية)
   ملاحظة: الاعتماد على nth-child هشّ (fragile)، الأفضل مستقبلًا
   استخدام class مخصص للـ section بدل الترقيم لو أمكن.
   ------------------------------------------------------------------------- */

/* الوضع الافتراضي (موبايل / تابلت): محاذاة العناصر في النص */
body.index div.app-inner.flex.flex-col.min-h-full > section:nth-child(7) .md\:grid-cols-3 {
    display: flex;
    justify-content: center;
    align-items: center;
}

body.index div.app-inner.flex.flex-col.min-h-full > section:nth-child(7) .banner-entry {
    width: 13% !important;
    /* flex-basis:25% !important; */ /* معطّلة مؤقتًا - سيبتها زي ما هي لو محتاجها تاني */
}

/* إزالة الفراغ بين عناصر الـ grid */
section.s-block.s-block--banners.container .grid.one-row.md\:grid-cols-3.grid-flow-row.gap-3.sm\:gap-8 {
    gap: 0;
}


/* -------------------------------------------------------------------------
   3) خلفية عامة للصفحة
   ------------------------------------------------------------------------- */
.app-inner.flex.flex-col.min-h-full {
    background: #f9fafb !important;
}


/* -------------------------------------------------------------------------
   4) Footer Text Colors
   ------------------------------------------------------------------------- */
footer.store-footer p,
.footer-list,
p.footer-title.font-primary,
h3.s-contacts-title {
    color: #fff !important;
}

footer b.s-trust-badges-number,
footer span.text-sm.da-tm {
    /* كانت #ffff (قيمة hex غير صحيحة - 4 أحرف) تم تصحيحها إلى #fff */
    color: #fff;
}


/* -------------------------------------------------------------------------
   5) Slider Block #1 (sk1)
   سلايدر بتصميم يعتمد على تكبير السلايد النشط في المنتصف
   ------------------------------------------------------------------------- */
.sk1-slider-block {
    --sk1-bg-card: #1a1d24;
    --sk1-accent: #ffb703;
    --sk1-text: #f3f4f6;
    --sk1-muted: #9aa0aa;

    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
}

.sk1-slider-block .sk1-section-title {
    margin: 0 0 20px;
    color: #000;
    font-size: 22px;
    font-weight: 700;
    text-align: center;
}

.sk1-slider-block .swiper {
    width: 100%;
    padding: 40px 0;
    overflow: hidden;
}

/* العرض نسبي بدل ثابت عشان يحترم إعدادات الـ breakpoints */
.sk1-slider-block .sk1-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    overflow: hidden;
    opacity: 0.6;
    transform: scale(0.82);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.sk1-slider-block .sk1-slide img {
    display: block;
    width: 100%;
    height: auto; /* بدل 100% عشان الصورة تاخد ارتفاعها الطبيعي */
    object-fit: contain;
}

/* السلايد النشط (في المنتصف) بيتكبر */
.sk1-slider-block .sk1-slide.swiper-slide-active {
    transform: scale(1.18) !important;
    opacity: 1 !important;
    z-index: 5;
}

/* موبايل: كل سلايد ياخد نص عرض الشاشة تقريبًا */
@media (max-width: 599px) {
    .sk1-slider-block .sk1-slide {
        width: 49% !important;
    }
}

/* تابلت */
@media (min-width: 600px) and (max-width: 899px) {
    .sk1-slider-block .sk1-slide {
        width: 30% !important;
    }
}

/* ديسكتوب: عرض ثابت بالبكسل */
@media (min-width: 900px) {
    .sk1-slider-block .sk1-slide {
        width: 217px !important;
    }
}


/* -------------------------------------------------------------------------
   6) Slider Block #2 (sk2)
   نفس فكرة sk1 لكن كـ widget/instance تاني منفصل
   ------------------------------------------------------------------------- */
.sk2-slider-block {
    --sk2-bg-card: #1a1d24;
    --sk2-accent: #ffb703;
    --sk2-text: #f3f4f6;
    --sk2-muted: #9aa0aa;

    width: 90%;
    margin: 0 auto;
    padding: 40px 20px;
}

.sk2-slider-block * {
    box-sizing: border-box;
}

.sk2-slider-block .sk2-section-title {
    margin: 0 0 20px;
    color: #000;
    font-size: 22px;
    font-weight: 700;
    text-align: center;
}

.sk2-slider-block .swiper {
    width: 100%;
    padding: 40px 0;
    overflow: hidden;
}

.sk2-slider-block .sk2-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto;
    overflow: hidden;
    opacity: 0.6;
    transform: scale(0.82);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.sk2-slider-block .sk2-slide img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* الصورة النشطة (اللي في النص) تكبر */
.sk2-slider-block .sk2-slide.swiper-slide-active {
    transform: scale(1.18) !important;
    opacity: 1 !important;
    z-index: 5;
}

/* مقاس السلايد على الموبايل يبقى تقريبًا نص عرض الشاشة */
@media (max-width: 599px) {
    .sk2-slider-block .sk2-slide {
        width: 49% !important;
    }
}


/* -------------------------------------------------------------------------
   7) Large Screens (min-width: 992px)
   تعديلات خاصة بالشاشات الكبيرة على الكاتيجوريز والبانرز
   ------------------------------------------------------------------------- */
@media (min-width: 992px) {
    section.s-block.s-block--categories.markat .swiper-wrapper {
        justify-content: center;
        align-items: center;
    }
 
}


@media (max-width: 992px) {
   body.index div.app-inner.flex.flex-col.min-h-full > section:nth-child(7) .banner-entry {
        width: 100% !important;
    }
}