/* =====================================================================
   SL Floating Nav — زر التنقل العائم للهاتف (SmartLearn)
   ودجت مستقلة تماماً: لا تلمس حزم React المستعادة.
   تعمل فقط تحت 768px — سطح المكتب لا يتغير إطلاقاً.
   ===================================================================== */

/* جذر الودجت: طبقة عليا لا تلتقط اللمس إلا لعناصرها */
#sl-nav-root{
  position:fixed;inset:0;pointer-events:none;z-index:2147483000;
  font-family:inherit;direction:rtl;
}
/* سطح المكتب: الودجت مخفية بالكامل والشريط الأصلي يعمل كالمعتاد */
@media (min-width:768px){
  #sl-nav-root{display:none}
}
/* الهاتف: إخفاء شريط التبويبات الأفقي الذي تديره الودجت فقط
   (تكرار السمة 4 مرات = أسبقية أعلى من قواعد التمرير الأفقي في طبقة الاستجابة) */
@media (max-width:767px){
  [data-sl-nav-managed][data-sl-nav-managed][data-sl-nav-managed][data-sl-nav-managed]{display:none!important}
}

/* ---------- الخلفية الضبابية عند فتح القائمة ---------- */
.sl-nav-backdrop{
  position:fixed;inset:0;
  background:rgba(15,23,42,.30);
  -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
  opacity:0;pointer-events:none;
  transition:opacity .35s ease;
}
#sl-nav-root.sl-open .sl-nav-backdrop{opacity:1;pointer-events:auto}

/* ---------- الزر العائم (Orb) ---------- */
.sl-nav-orb{
  position:fixed;left:0;top:0;width:60px;height:60px;border-radius:50%;
  border:1px solid rgba(255,255,255,.38);
  background:linear-gradient(135deg,#a855f7 0%,#6366f1 55%,#2563eb 100%);
  box-shadow:0 8px 24px rgba(79,70,229,.45),0 2px 6px rgba(0,0,0,.25),inset 0 1px 1px rgba(255,255,255,.4);
  color:#fff;display:flex;align-items:center;justify-content:center;
  pointer-events:auto;cursor:pointer;padding:0;
  touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;
  will-change:transform,opacity;
  transition:transform .5s cubic-bezier(.34,1.56,.64,1),opacity .3s ease,box-shadow .3s ease;
}
/* أثناء السحب: بلا انتقالات لتتبع الإصبع فوراً */
.sl-nav-orb.sl-dragging{transition:none}
/* الوضع الخافت أثناء استهلاك المحتوى (التصغير يتم عبر scale في الـtransform) */
.sl-nav-orb.sl-min{
  opacity:.42;
  box-shadow:0 3px 10px rgba(79,70,229,.35),inset 0 1px 1px rgba(255,255,255,.3);
}
/* لمعة زجاجية علوية */
.sl-nav-orb::before{
  content:"";position:absolute;inset:3px;border-radius:50%;
  background:radial-gradient(120% 80% at 30% 15%,rgba(255,255,255,.4) 0%,rgba(255,255,255,0) 55%);
  pointer-events:none;
}
/* أيقونتا الفتح/الإغلاق مع تحوّل دوراني ناعم */
.sl-nav-orb svg{
  position:absolute;width:26px;height:26px;
  transition:transform .4s cubic-bezier(.34,1.56,.64,1),opacity .25s ease;
}
.sl-nav-orb .sl-ic-open{opacity:1;transform:rotate(0deg) scale(1)}
.sl-nav-orb .sl-ic-close{opacity:0;transform:rotate(-90deg) scale(.4)}
#sl-nav-root.sl-open .sl-ic-open{opacity:0;transform:rotate(90deg) scale(.4)}
#sl-nav-root.sl-open .sl-ic-close{opacity:1;transform:rotate(0deg) scale(1)}

/* ---------- عناصر القائمة الشعاعية ---------- */
.sl-nav-menu{display:contents}
.sl-nav-item{
  position:fixed;left:0;top:0;width:64px;
  display:flex;flex-direction:column;align-items:center;gap:4px;
  background:none;border:0;padding:0;margin:0;
  pointer-events:none;cursor:pointer;
  -webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;
  opacity:0;will-change:transform,opacity;
  transition:transform .45s cubic-bezier(.34,1.56,.64,1),opacity .3s ease;
}
#sl-nav-root.sl-open .sl-nav-item{opacity:1;pointer-events:auto}
.sl-nav-item-circle{
  width:52px;height:52px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.94);
  border:1px solid rgba(255,255,255,.65);
  color:#4f46e5;
  box-shadow:0 6px 18px rgba(15,23,42,.22);
  transition:transform .2s ease,background .2s ease,color .2s ease,box-shadow .2s ease;
}
.sl-nav-item:active .sl-nav-item-circle{transform:scale(.9)}
.sl-nav-item-circle svg{width:22px;height:22px;flex:none}
.sl-nav-item-label{
  font-size:11px;font-weight:700;line-height:1;
  color:#fff;background:rgba(15,23,42,.58);
  padding:4px 9px;border-radius:999px;
  white-space:nowrap;max-width:88px;overflow:hidden;text-overflow:ellipsis;
}
/* تمييز القسم النشط: تعبئة بألوان الهوية + توهج + تكبير طفيف */
.sl-nav-item.sl-active .sl-nav-item-circle{
  background:linear-gradient(135deg,#a855f7,#4f46e5 60%,#2563eb);
  color:#fff;border-color:rgba(255,255,255,.55);
  box-shadow:0 0 0 3px rgba(129,140,248,.45),0 8px 22px rgba(79,70,229,.5);
  transform:scale(1.08);
}
.sl-nav-item.sl-active .sl-nav-item-label{background:#4f46e5}

/* ---------- الفيديوهات القصيرة: ملء الشاشة على الهاتف (نمط تيك توك) ----------
   جذر فيد الفيديوهات (ShortVideosFeed) له تركيبة كلاسات فريدة في التطبيق كله،
   نرفعه لطبقة ثابتة تغطي الشاشة بالكامل (dvh يراعي شريط عنوان المتصفح) */
@media (max-width:767px){
  .relative.w-full.h-screen.bg-black.overflow-hidden,
  .w-full.h-screen.bg-black.flex.items-center.justify-center{
    position:fixed!important;inset:0!important;
    width:100vw!important;height:100vh!important;height:100dvh!important;
    margin:0!important;border-radius:0!important;z-index:1500;
  }
  /* قفل تمرير الصفحة خلف الفيد حتى لا يتداخل مع سحب التقليب */
  html.sl-shorts-lock,html.sl-shorts-lock body{
    overflow:hidden!important;overscroll-behavior:none;
  }
}

/* ---------- إعجاب بالنقر المزدوج: قلب متفجّر مكان اللمسة (نمط تيك توك) ---------- */
/* منع تكبير المتصفح عند اللمس المزدوج داخل الفيد فقط */
.relative.w-full.h-screen.bg-black.overflow-hidden,
.relative.w-full.h-screen.bg-black.overflow-hidden video,
.relative.w-full.h-screen.bg-black.overflow-hidden .absolute.inset-0{
  touch-action:manipulation;
}
.sl-heart-pop{
  position:fixed;z-index:2000;pointer-events:none;
  transform:translate(-50%,-50%) scale(0);opacity:0;
  animation:sl-heart .9s cubic-bezier(.17,.89,.32,1.27) forwards;
  will-change:transform,opacity;
}
.sl-heart-pop svg{
  display:block;width:96px;height:96px;
  filter:drop-shadow(0 6px 16px rgba(244,63,94,.45)) drop-shadow(0 2px 6px rgba(0,0,0,.35));
}
@keyframes sl-heart{
  0%{transform:translate(-50%,-50%) scale(0) rotate(-14deg);opacity:0}
  18%{transform:translate(-50%,-50%) scale(1.25) rotate(6deg);opacity:1}
  34%{transform:translate(-50%,-50%) scale(.96) rotate(-2deg)}
  50%{transform:translate(-50%,-50%) scale(1.04) rotate(0deg)}
  72%{transform:translate(-50%,-50%) scale(1);opacity:1}
  100%{transform:translate(-50%,calc(-50% - 70px)) scale(.8);opacity:0}
}

/* ---------- تقليل الحركة لمن يفضّل ذلك ---------- */
@media (prefers-reduced-motion:reduce){
  #sl-nav-root .sl-nav-orb,
  #sl-nav-root .sl-nav-orb svg,
  #sl-nav-root .sl-nav-item,
  #sl-nav-root .sl-nav-backdrop{transition:none!important}
  .sl-heart-pop{animation-duration:.35s}
}