/* توسيط السلايدر وتحديد أقصى عرض */
.slaider{
  width: 100% !important;
  max-width: 1200px !important;   /* غيّر الرقم حسب اللي يناسبك */
  margin-left: auto !important;
  margin-right: auto !important;
  overflow: hidden !important;
  border-radius: 16px;            /* اختياري */
}

/* لو فيه حشوة/بادنج جانبي في الثيم، نضمن التوسيط بدون كسر */
.slaider{
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* تأكيد أن أي عنصر داخلي ما يرجع يفرض عرض كامل */
.slaider > *{
  max-width: 100% !important;
}

/* للجوال */
@media (max-width: 768px){
  .slaider{
    max-width: 100% !important;
    margin-left: 12px !important;
    margin-right: 12px !important;
    border-radius: 12px;
  }
}

/* حواف مربعة للسلايدر */
.slaider{
  border-radius: 0 !important;
}

/* لو فيه عناصر داخلية عليها تدوير أيضاً */
.slaider *{
  border-radius: 0 !important;
}

/* ✅ إجبار after_class يتمدد ويكسر قيود العرض (حل عدم التغيير) */
.after_class{
  display: block !important;
  width: 100% !important;          /* يتمدد */
  max-width: 980px !important;     /* كبر الحد الأقصى */
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 12px !important;
  box-sizing: border-box !important;

  /* إذا كان القالب حاط قيود */
  flex: 0 0 auto !important;
  min-width: 0 !important;
}

/* ✅ تكبير الصورة فعلياً (حتى لو الحاوية مقيدة) */
.after_class img{
  width: 150% !important;
  height: 760px !important;        /* زد/انقص حسب رغبتك */
  object-fit: cover !important;
  display: block !important;
}

/* ✅ إذا يوجد عنصر رابط/حاوية للصورة داخل after_class */
.after_class a,
.after_class figure,
.after_class picture,
.after_class .image,
.after_class .img{
  display: block !important;
  width: 100% !important;
}


/* =========================================================
   ✅ الجوال فقط: 3 مربعات في صف واحد داخل seleaa_class
   - يكسر قيود السلايدر (Swiper/Splide) إن وجدت
========================================================= */
@media (max-width: 768px){

  /* نجبر أي Wrapper داخل الحاوية يكون صف ويقبل اللف */
  .seleaa_class,
  .seleaa_class .swiper-wrapper,
  .seleaa_class .splide__list,
  .seleaa_class ul,
  .seleaa_class .row,
  .seleaa_class .items,
  .seleaa_class .container,
  .seleaa_class .grid{
    display: flex !important;
    flex-wrap: wrap !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    gap: 8px !important;
  }

  /* كل عنصر داخل الحاوية = ثلث الصف */
  .seleaa_class > *,
  .seleaa_class .swiper-wrapper > *,
  .seleaa_class .splide__list > *,
  .seleaa_class ul > *,
  .seleaa_class .row > *,
  .seleaa_class .items > *,
  .seleaa_class .grid > *{
    flex: 0 0 calc(45% - 6px) !important;
    max-width: calc(45% - 6px) !important;
    width: calc(45% - 6px) !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
  }

  /* مهم جداً للسلايدر: كثيراً يكون عليه width inline */
  .seleaa_class .swiper-slide,
  .seleaa_class .splide__slide{
    width: calc(33.333% - 3px) !important;
    flex: 0 0 calc(33.333% - 3px) !important;
  }

  /* تصغير الصور داخل العنصر */
  .seleaa_class img{
    width: 100% !important;
    height: auto !important;
    display: block !important;
    object-fit: cover !important;
  }
}

/* ✅ إخفاء seleaa_class بالكامل في الجوال فقط */
@media (max-width: 768px) {
  .seleaa_class{
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}