/* === قيَم عامة (تمركز شريط الأقسام) === */


#cats-wrap {
  width: 100% !important;
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  float: none !important;
  text-align: initial !important;
  display: block !important;
  align-self: center !important;
  justify-self: center !important;
  padding-inline: 16px !important;
}

/* مسافة إضافية في الشاشات الكبيرة */
@media (min-width: 1024px) {
  #cats-wrap {
    padding-inline: 24px !important;
  }
}

/* تأكيد التوسيط حتى لو الأب flex أو grid */
#cats-viewport {
  margin-inline: auto !important;
}

/* خيار تجميلي اختياري (تدرّج ظل خفيف خلف الأقسام) */
@media (min-width: 1024px) {
  #cats-wrap::before {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 1200px;
    height: 100%;
    top: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.05) 50%, transparent 100%);
    pointer-events: none;
  }
}



/* === قيَم عامة (تغير حجم الصفحة وباقات الاشتراك) === */


@media (max-width: 640px){
  html { zoom: .7; }           /* كود تصغير كامل الصفحة للجوال */
  body { transform-origin: top center; }
}


@media (max-width: 640px){
  /* الهيدر نفسه (نفس العنصر اللي أرسلته) */
  .flex.items-center.justify-between.w-full.h-\[100px\]{
    zoom: 1.25; /* عوّض تصغير الصفحة .8 (غيّرها لو تبي) */
  }

  /* شعار الموقع داخل <a class="size-12"> */
  .flex.items-center.justify-between.w-full.h-\[100px\] .size-12{
    /* size-12 = 3rem افتراضًا؛ نكبّرها بنسبة 1.25 */
    width: calc(3rem * 1.75) !important;
    height: calc(3rem * 1.75) !important;
  }
  .flex.items-center.justify-between.w-full.h-\[100px\] .size-12 img{
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }

  /* أيقونة القائمة <svg class="size-6"> (size-6 = 1.5rem) */
  .flex.items-center.justify-between.w-full.h-\[100px\] .size-6{
    width: calc(1.5rem * 1.25) !important;
    height: calc(1.5rem * 1.25) !important;
  }

  /* أيقونة السلة داخل span عندها inline style font-size:1.5rem */
  .flex.items-center.justify-between.w-full.h-\[100px\] [style*="font-size: 1.5rem"]{
    font-size: calc(1.5rem * 1.25) !important;
    line-height: 1 !important;
  }
}



/* === مهــــــــــــــــــــــــــــــــــــــــــــــــم تصغير فقط بطاقات الاشتارم (حجم بطاقات الاشتراك) === */

/* متغيّر عام تتحكم من خلاله بحجم البطاقة */
:root {
  --subs-card-scale: 0.80;   /* 0.90 = تصغير 10% — عدّلها براحتك */
}

/* تطبيق التصغير/التكبير على بطاقات الاشتراك داخل سلايدر الباقات */
.max-w-7xl.mt-5.mx-auto swiper-container swiper-slide .gradient-border-package-preview,
.max-w-7xl.mt-5.mx-auto .swiper .gradient-border-package-preview {
  transform: scale(var(--subs-card-scale));
  transform-origin: center top;
  transition: transform .25s ease;
}

/* خيار تجميلي: خلي البطاقة النشطة أكبر شوي (تعطي إحساس تركيز) */
.max-w-7xl.mt-5.mx-auto swiper-container swiper-slide.swiper-slide-active .gradient-border-package-preview,
.max-w-7xl.mt-5.mx-auto .swiper .swiper-slide.swiper-slide-active .gradient-border-package-preview {
  transform: scale(calc(var(--subs-card-scale) + 0.05));
}









/* قوس زخرفي أعلى قسم الباقات */
/* قوس زخرفي أعلى قسم الباقات */
.plans-section{
  position:relative;
  padding-top:64px;
  z-index:1;
}
.plans-section::before{
  content:"";
  position:absolute;
  left:0; right:0; top:-140px;
  height:180px;
  background:
    radial-gradient(120% 180% at 15% 20%, rgba(255,255,255,.08), transparent 60%),
    radial-gradient(140% 200% at 85% 0%, rgba(255,255,255,.06), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0));
  mask:radial-gradient(120% 100% at 50% 0%, #000 58%, transparent 60%);
  -webkit-mask:radial-gradient(120% 100% at 50% 0%, #000 58%, transparent 60%);
  border-radius:0 0 100% 100% / 0 0 60% 60%;
  opacity:.9;
  z-index:-1;
}
.plans-section::after{
  content:"";
  position:absolute;
  left:0; right:0; top:-145px;
  height:190px;
  background:conic-gradient(from var(--a,0deg), #f5c84b, #ff8c00, #f5c84b);
  mask:radial-gradient(120% 100% at 50% 0%, transparent 56%, #000 58%, transparent 62%);
  -webkit-mask:radial-gradient(120% 100% at 50% 0%, transparent 56%, #000 58%, transparent 62%);
  filter:drop-shadow(0 0 18px rgba(244,183,146,.35));
  opacity:.6;
  animation:waveSheen 12s linear infinite;
  z-index:0;
}
@keyframes waveSheen{ to{ --a:360deg } }
@media (prefers-reduced-motion:reduce){
  .plans-section::after{ animation:none; }
}

/* إطار لمّاع للصور */
@property --a { syntax:'<angle>'; inherits:false; initial-value:0deg; }
@keyframes luxe-sweep-2 { to{ --a:360deg } }

img.rounded-2xl.w-96{
  --b:6px;
  --r:18px;
  --track:rgba(255,255,255,.09);
  --fill:transparent;
  --a:0deg;
  --offset:180deg;
  --glow-rgb:50, 190, 231;
  display:block;
  box-sizing:border-box;
  padding:var(--b)!important;
  border-radius:var(--r)!important;
  background:
    conic-gradient(from var(--a),
      rgba(var(--glow-rgb),0) 0deg,
      rgba(var(--glow-rgb),0) 8deg,
      rgba(var(--glow-rgb),.95) 12deg,
      rgba(var(--glow-rgb),.45) 16deg,
      rgba(var(--glow-rgb),0) 24deg,
      rgba(var(--glow-rgb),0) 360deg
    ) border-box,
    conic-gradient(from calc(var(--a) + var(--offset)),
      rgba(var(--glow-rgb),0) 0deg,
      rgba(var(--glow-rgb),0) 8deg,
      rgba(var(--glow-rgb),.95) 12deg,
      rgba(var(--glow-rgb),.45) 16deg,
      rgba(var(--glow-rgb),0) 24deg,
      rgba(var(--glow-rgb),0) 360deg
    ) border-box,
    linear-gradient(var(--fill), var(--fill)) padding-box!important;
  background-clip:border-box, border-box, padding-box;
  background-origin:border-box!important;
  background-repeat:no-repeat!important;
  box-shadow:inset 0 0 0 1px var(--track), 0 18px 40px rgba(0,0,0,.35)!important;
  background-color:transparent!important;
  animation:luxe-sweep-2 6s linear infinite!important;
  will-change:background;
}
@media (prefers-reduced-motion:reduce){
  img.rounded-2xl.w-96{ animation:none!important; }
}

/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*
/* 1) تأكد أن الـ@property مُسجّل قبل أي استخدام */
@property --a { syntax:'<angle>'; inherits:false; initial-value:0deg; }

@media (max-width: 640px){
  /* 2) إجبار محرّك الرسم على إنشاء طبقة مستقلة للأنيميشن */
  .plans-section,
  .plans-section::before,
  .plans-section::after,
  img.rounded-2xl.w-96{
    will-change: transform, background, filter;
    backface-visibility: hidden;
    transform: translateZ(0); /* لا يغيّر الشكل لكنه يثبّت الطبقة */
  }

  /* 3) صراحةً: خَلّ الأنيميشن “تشغّال” وبدون توقّف */
  .plans-section::after{
    animation: waveSheen 12s linear infinite !important;
    animation-play-state: running !important;
  }

  img.rounded-2xl.w-96{
    animation: luxe-sweep-2 6s linear infinite !important;
    animation-play-state: running !important;
  }
}