/* =========================================================================
   مدى التسهيل للتجارة — MT Hero Slider
   إخراج سينمائي · خلفية متغيّرة مع كل شريحة · تأثيرات دخول وخروج
   التصميم يظهر كاملًا بلا اقتطاع على كل الشاشات والمتصفحات
   ========================================================================= */

.mt-slider{
  --mts-swap:.9s;                                  /* مدة الدخول/الخروج */
  --mts-ease:cubic-bezier(.22,.9,.32,1);
  --mts-radius:clamp(14px,1.5vw,26px);

  position:relative;
  display:block;
  overflow:hidden;
  isolation:isolate;

  /* شريط كامل العرض من الجانبين يمين ويسار */
  width:100vw;
  left:50%;right:50%;
  margin-left:-50vw;margin-right:-50vw;

  /* تباعد مريح يفصل السلايدر عن الأقسام المجاورة */
  padding:clamp(34px,4.6vw,76px) 0 clamp(26px,3.4vw,54px);

  background:linear-gradient(180deg,#0a1830 0%,#0d2145 45%,#0a1830 100%);
  -webkit-tap-highlight-color:transparent;
}

/* خط فاصل رفيع يفصل الشريط عن الأقسام المجاورة */
.mt-slider::before,
.mt-slider::after{
  content:"";position:absolute;left:0;right:0;height:1px;z-index:4;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(127,178,255,.40),transparent);
}
.mt-slider::before{top:0}
.mt-slider::after{bottom:0}

/* ===================== الخلفية السينمائية ===================== */
.mts-bglayer{position:absolute;inset:0;z-index:0;overflow:hidden}

.mts-amb{
  position:absolute;inset:-8%;
  width:116%;height:116%;
  object-fit:cover;
  opacity:0;
  transform:scale(1.06);
  filter:blur(60px) saturate(1.45) brightness(.62);
  transition:opacity 1.15s var(--mts-ease),transform 12s linear;
  will-change:opacity,transform;
}
.mts-amb.is-active{opacity:.85;transform:scale(1.16)}

/* حجاب يوحّد التباين ويضمن وضوح البطاقة فوق أي لون */
.mts-veil{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% 40%,rgba(6,16,34,.18) 0%,rgba(6,16,34,.62) 62%,rgba(6,16,34,.86) 100%),
    linear-gradient(180deg,rgba(8,19,40,.92) 0%,rgba(8,19,40,.30) 18%,rgba(8,19,40,.30) 82%,rgba(8,19,40,.92) 100%);
}
/* حبيبات خفيفة جدًا تعطي ملمسًا سينمائيًا وتمنع تكسّر التدرّجات */
.mts-grain{
  position:absolute;inset:0;pointer-events:none;opacity:.16;
  background-image:radial-gradient(rgba(255,255,255,.5) .5px,transparent .6px);
  background-size:3px 3px;
  mix-blend-mode:overlay;
}

/* ===================== إطار البطاقة ===================== */
.mts-frame{
  position:relative;z-index:2;
  /* العرض محكوم بالطول أيضًا حتى لا يبتلع السلايدر الشاشة على أي جهاز */
  width:min(1180px,92vw,82vh);
  margin:0 auto;
  /* تأثير دخول القسم عند التمرير */
  opacity:0;transform:translateY(38px) scale(.972);
  transition:opacity .9s var(--mts-ease),transform 1s var(--mts-ease);
}
.mt-slider.is-in .mts-frame{opacity:1;transform:none}

.mts-stage{
  position:relative;
  width:100%;
  aspect-ratio:1.62;      /* ثابتة على كل الشرائح → لا يحدث أي قفز في الصفحة */
  border-radius:var(--mts-radius);
  overflow:hidden;
  background:#0b1c33;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 30px 70px rgba(0,0,0,.50),
    0 8px 24px rgba(0,0,0,.32);
}
/* بديل لنسبة العرض على المتصفحات القديمة */
@supports not (aspect-ratio:1/1){
  .mts-stage{height:0;padding-bottom:61.7%}
}

.mts-viewport{position:absolute;inset:0}

/* ===================== الشرائح: دخول وخروج ===================== */
.mts-slide{
  position:absolute;inset:0;display:block;
  opacity:0;visibility:hidden;
  z-index:1;
}
/* نسخة مموّهة داخل البطاقة تملأ أي فراغ ناتج عن اختلاف مقاسات التصاميم */
.mts-fill{
  position:absolute;inset:-4%;
  width:108%;height:108%;
  object-fit:cover;
  filter:blur(24px) saturate(1.3) brightness(.92);
  transform:scale(1.04);
  z-index:1;
}
.mts-img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:contain;                 /* التصميم كاملًا — لا اقتطاع إطلاقًا */
  object-position:center;
  z-index:2;
  user-select:none;-webkit-user-drag:none;
}

/* الشريحة الداخلة */
.mts-slide.is-active{
  visibility:visible;z-index:3;
  animation:mtsEnter var(--mts-swap) var(--mts-ease) both;
}
/* الشريحة الخارجة */
.mts-slide.is-leaving{
  visibility:visible;z-index:2;
  animation:mtsLeave var(--mts-swap) var(--mts-ease) both;
}

@keyframes mtsEnter{
  from{opacity:0;transform:translateX(var(--enter-x,4%)) scale(1.045);filter:blur(9px)}
  60%{opacity:1}
  to{opacity:1;transform:none;filter:blur(0)}
}
@keyframes mtsLeave{
  from{opacity:1;transform:none;filter:blur(0)}
  to{opacity:0;transform:translateX(var(--leave-x,-4%)) scale(.965);filter:blur(7px)}
}
/* اتجاه الحركة يتبع اتجاه التنقّل (الموقع RTL) */
.mt-slider[data-dir="next"] .mts-slide{--enter-x:-5%;--leave-x:5%}
.mt-slider[data-dir="prev"] .mts-slide{--enter-x:5%;--leave-x:-5%}

/* لمعة تمر على التصميم عند دخوله */
.mts-slide::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:4;
  background:linear-gradient(105deg,rgba(255,255,255,0) 42%,rgba(255,255,255,.20) 50%,rgba(255,255,255,0) 58%);
  transform:translateX(-130%);opacity:0;
}
.mts-slide.is-active::after{animation:mtsSheen 1.5s .35s var(--mts-ease) both}
@keyframes mtsSheen{
  0%{transform:translateX(-130%);opacity:0}
  18%{opacity:.9}
  100%{transform:translateX(130%);opacity:0}
}

/* ===================== الأسهم (خارج البطاقة) ===================== */
.mts-arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:5;
  width:clamp(42px,3.2vw,56px);height:clamp(42px,3.2vw,56px);
  border:0;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  color:#fff;
  background:rgba(255,255,255,.12);
  box-shadow:0 10px 30px rgba(0,0,0,.35),inset 0 0 0 1px rgba(255,255,255,.24);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  opacity:0;
  transition:transform .35s var(--mts-ease),background .3s,color .3s,opacity .4s var(--mts-ease);
}
.mt-slider:hover .mts-arrow,
.mt-slider:focus-within .mts-arrow{opacity:1}
.mts-arrow:hover{
  background:linear-gradient(135deg,#7FB2FF,#2F6FED);
  box-shadow:0 14px 34px rgba(47,111,237,.55),inset 0 0 0 1px rgba(255,255,255,.4);
  transform:translateY(-50%) scale(1.1);
}
.mts-arrow svg{width:40%;height:40%;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.mts-arrow.prev{right:calc(-1 * clamp(52px,4.4vw,74px))}
.mts-arrow.next{left:calc(-1 * clamp(52px,4.4vw,74px))}

/* عند ضيق المساحة الجانبية تُوضع الأسهم فوق حواف البطاقة */
@media (max-width:1500px){
  .mts-arrow.prev{right:clamp(10px,1.2vw,18px)}
  .mts-arrow.next{left:clamp(10px,1.2vw,18px)}
}

/* ===================== النقاط (أسفل البطاقة) ===================== */
.mts-dots{
  position:relative;z-index:3;
  display:flex;gap:10px;justify-content:center;align-items:center;
  margin-top:clamp(18px,2vw,30px);
}
.mts-dot{
  position:relative;
  width:10px;height:10px;padding:0;border:0;cursor:pointer;
  border-radius:99px;overflow:hidden;
  background:rgba(255,255,255,.28);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
  transition:width .55s var(--mts-ease),background .4s;
}
.mts-dot:hover{background:rgba(255,255,255,.5)}
.mts-dot.is-active{width:clamp(46px,5vw,64px);background:rgba(255,255,255,.24)}
/* النقطة النشطة نفسها هي شريط التقدّم */
.mts-dot i{
  position:absolute;inset:0;width:0;
  border-radius:99px;
  background:linear-gradient(90deg,#7FB2FF,#ffffff);
  transition:width .12s linear;
}
.mts-dot:not(.is-active) i{width:0 !important}

/* ===================== الشاشات المتوسطة ===================== */
@media (max-width:1024px){
  .mt-slider{padding:clamp(28px,4vw,52px) 0 clamp(22px,3vw,40px)}
  .mts-frame{width:min(94vw,86vh)}
  .mts-amb{filter:blur(44px) saturate(1.4) brightness(.64)}
}

/* ===================== الجوالات ===================== */
@media (max-width:768px){
  .mt-slider{
    --mts-swap:.75s;
    --mts-radius:14px;
    padding:26px 0 20px;
  }
  .mts-frame{width:calc(100% - 28px);transform:translateY(24px) scale(.98)}
  .mt-slider.is-in .mts-frame{transform:none}
  .mts-stage{box-shadow:0 18px 40px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.10)}
  .mts-amb{filter:blur(30px) saturate(1.4) brightness(.6)}
  .mts-fill{filter:blur(16px) saturate(1.3) brightness(.94)}
  .mts-grain{opacity:.1}
  .mts-dots{margin-top:16px;gap:8px}
  .mts-dot{width:8px;height:8px}
  .mts-dot.is-active{width:38px}
}

@media (max-width:400px){
  .mt-slider{padding:20px 0 16px}
  .mts-frame{width:calc(100% - 20px)}
  .mts-dots{margin-top:13px}
}

/* على الأجهزة اللمسية تُخفى الأسهم — السحب والنقاط أنسب ولا تغطّي التصميم */
@media (hover:none),(pointer:coarse){
  .mts-arrow{display:none}
}

/* ===================== إتاحة الوصول / تقليل الحركة ===================== */
@media (prefers-reduced-motion:reduce){
  .mts-amb{transition:opacity .3s linear;transform:scale(1.08) !important}
  .mts-frame{opacity:1;transform:none;transition:none}
  .mts-slide.is-active,
  .mts-slide.is-leaving{animation:none}
  .mts-slide.is-active{opacity:1;visibility:visible}
  .mts-slide.is-leaving{opacity:0;visibility:hidden}
  .mts-slide.is-active::after{animation:none}
  .mts-stage{transition:none}
}

.mt-slider:focus-visible,
.mts-slide:focus-visible,
.mts-arrow:focus-visible,
.mts-dot:focus-visible{outline:3px solid #7FB2FF;outline-offset:4px}

/* تباعد إضافي للسلايدر الأول عن الأقسام أعلاه وأسفله */
.mt-slider.mt-slider-roomy{
  padding:clamp(52px,6.4vw,104px) 0 clamp(44px,5vw,80px);
  margin-block:clamp(10px,1.6vw,26px);
}
@media (max-width:768px){
  .mt-slider.mt-slider-roomy{padding:38px 0 32px;margin-block:8px}
}