/* ============================================================
   hero.css — سلايدر العروض (coverflow عريض) ليمن توب
   بانر عريض قصير · خلفية داكنة دائماً · نص أبيض دائماً
   يدعم: صورة كاملة (بدون نص) أو صورة + نص بالكود
   ============================================================ */

.hero-slider{position:relative;max-width:1240px;margin:20px auto 6px;padding-inline:20px;overflow:hidden}
.hero-slider .hero-swiper{overflow:hidden;padding:10px 4px 34px}

/* الشريحة — عريضة قصيرة (نسبة ~2.8:1) */
.hero-slider .swiper-slide{
  width:80%;aspect-ratio:2.8/1;border-radius:20px;overflow:hidden;
  position:relative;display:block;text-decoration:none;
  border:1px solid rgba(255,255,255,.10);
  opacity:.45;transform:scale(.9);filter:saturate(.75);
  transition:transform .5s ease,opacity .5s ease,filter .5s ease;
  /* خلفية داكنة ثابتة (لا تتأثر بالوضع الفاتح) */
  background:
    radial-gradient(130% 130% at 85% 15%,#2A1559,#160733 60%),
    linear-gradient(120deg,#1E0E44,#0B0916);
}
.hero-slider .swiper-slide-active{
  opacity:1;transform:scale(1);filter:none;
  box-shadow:0 26px 70px -28px rgba(254,122,57,.45);
}

/* الصورة تملأ الشريحة (تظهر مكان الخلفية متى رفعتها) */
.hero-slider .swiper-slide img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;z-index:1;
}
.hero-slider .swiper-slide .s-mobile{display:none}

/* صندوق النص — يظهر فقط لو البانر فيه عنوان/نص.
   خلفيته متدرّجة (داكنة جهة اليمين حيث النص، شفافة يساراً) لوضوح النص فوق الصورة.
   لو البانر صورة فقط (بدون نص) لا يوجد صندوق = الصورة تظهر كاملة من الحافة للحافة. */
.hero-slider .slide-cap{
  position:absolute;z-index:3;inset:0;
  display:flex;flex-direction:column;justify-content:center;
  gap:10px;padding:0 42px;max-width:66%;
  background:linear-gradient(270deg,
    rgba(8,6,22,.82) 0%,
    rgba(8,6,22,.55) 40%,
    rgba(8,6,22,0) 78%);
}

/* العنوان — أبيض دائماً */
.hero-slider .slide-cap h2{
  font-family:'Cairo';font-weight:800;
  font-size:clamp(22px,3.2vw,42px);line-height:1.15;margin:0;
  letter-spacing:-.5px;color:#fff;
  text-shadow:0 3px 22px rgba(0,0,0,.55);
}
/* النص الفرعي — فاتح دائماً */
.hero-slider .slide-cap p{
  font-family:'Tajawal';font-weight:500;
  font-size:clamp(13px,1.35vw,16.5px);line-height:1.6;margin:0;
  color:rgba(255,255,255,.85);max-width:420px;
}

/* زر «اشحن الآن» المضيء */
.hero-slider .slide-cap .btn{
  align-self:flex-start;margin-top:6px;
  display:inline-flex;align-items:center;gap:8px;
  font-family:'Cairo';font-weight:700;font-size:15.5px;
  color:#fff;text-decoration:none;padding:11px 26px;border-radius:12px;
  background:linear-gradient(135deg,var(--orange),var(--orange-deep));
  box-shadow:0 8px 24px -6px rgba(254,122,57,.6),
             inset 0 1px 0 rgba(255,255,255,.25);
  transition:transform .2s ease,box-shadow .2s ease;
  position:relative;overflow:hidden;
}
.hero-slider .slide-cap .btn::after{
  content:"";position:absolute;top:0;inset-inline-start:-120%;
  width:60%;height:100%;transform:skewX(-20deg);
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.4),transparent);
  animation:heroShine 3.5s ease-in-out infinite;
}
@keyframes heroShine{0%,60%{inset-inline-start:-120%}100%{inset-inline-start:220%}}
.hero-slider .slide-cap .btn:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 34px -6px rgba(254,122,57,.85);
}

/* أسهم Swiper */
.hero-slider .swiper-button-next,
.hero-slider .swiper-button-prev{
  width:44px;height:44px;border-radius:50%;
  color:#fff;background:rgba(11,9,22,.6);
  backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.14);
  box-shadow:0 8px 24px -8px rgba(0,0,0,.5);transition:.2s;
}
.hero-slider .swiper-button-next:hover,
.hero-slider .swiper-button-prev:hover{background:var(--orange);transform:scale(1.08)}
.hero-slider .swiper-button-next::after,
.hero-slider .swiper-button-prev::after{font-size:17px;font-weight:800}

/* نقاط Swiper */
.hero-slider .swiper-pagination{position:static;margin-top:16px}
.hero-slider .swiper-pagination-bullet{
  width:8px;height:8px;background:var(--muted);opacity:.4;transition:.3s;
}
.hero-slider .swiper-pagination-bullet-active{
  width:24px;border-radius:5px;opacity:1;
  background:linear-gradient(90deg,var(--orange),var(--orange-2));
}

/* موبايل — بانر أطول قليلاً ليناسب الشاشة الضيقة */
@media(max-width:720px){
  .hero-slider{padding-inline:12px;margin-top:12px}
  .hero-slider .swiper-slide{width:90%;aspect-ratio:16/9}
  .hero-slider .swiper-slide .s-desktop{display:none}
  .hero-slider .swiper-slide .s-mobile{display:block}
  .hero-slider .slide-cap{max-width:82%;padding:0 24px;gap:8px}
  .hero-slider .swiper-button-next,.hero-slider .swiper-button-prev{display:none}
}