/* ============================================================
   Q STUDIO — LITE LAYER
   يُحمَّل بعد كل ملفات CSS الأخرى على كل الصفحات.
   الهدف: موقع أخف وأسرع على كل الأجهزة بنفس الألوان والهوية.
   - لا شاشة تحميل، لا خلفيات متحركة، لا ضوضاء، لا ضباب متحرك.
   - ظهور العناصر عند التمرير صار خفيفًا (شفافية + إزاحة صغيرة فقط).
   - الحركات المستمرة متوقفة إلا شريط العملاء (واحد فقط بالصفحة).
   ============================================================ */

/* 1) طبقات ثقيلة لم تعد مستخدمة */
.boot, .atmos, .rail, .field { display: none !important; }

/* 2) الخلفية: نفس الشبكة والتوهج البنفسجي الأصليين، لكن ثابتة
      (تدرّجات بدل دوائر مضبّبة متحركة، فلا تكلّف المعالج ولا كرت الشاشة) */
body { background: var(--bg); }
body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(46vw 46vw at 15% 11%, var(--atmos-a1, rgba(139, 92, 255, .17)), transparent 70%),
    radial-gradient(38vw 38vw at 90% 48%, var(--atmos-a2, rgba(186, 148, 255, .09)), transparent 70%),
    radial-gradient(52vw 40vw at 48% 112%, var(--atmos-a3, rgba(139, 92, 255, .08)), transparent 70%);
}
body::after {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(to right, var(--atmos-grid, rgba(255, 255, 255, .028)) 1px, transparent 1px),
    linear-gradient(to bottom, var(--atmos-grid, rgba(255, 255, 255, .028)) 1px, transparent 1px);
  background-size: 74px 74px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 10%, transparent 76%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 10%, transparent 76%);
}

/* 3) ظهور العناصر: بلا ضباب (filter) — كان أغلى تأثير بالموقع */
[data-rise] {
  filter: none !important;
  transform: translate3d(0, 14px, 0);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
  transition-delay: min(var(--d, 0s), .24s);
}
[data-rise].in { transform: none; }
.split > i { transform: none !important; transition: none !important; }

/* 4) إيقاف الحركات المستمرة غير الضرورية */
.field__g > i, .panel::after, .p1, .p2, .p3,
.tier--best::before, .tier::before, .lane--a, .lane--b {
  animation: none !important;
}
.panels { display: none; }

/* 5) تخفيف الضبابية الخلفية (backdrop-filter) — مكلفة جدًا على الجوال */
@media (max-width: 900px), (prefers-reduced-transparency: reduce) {
  *, *::before, *::after {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  .nav.stuck, .sheet, .acct__menu { background: var(--surface) !important; }
}

/* 6) لا حركة إطلاقًا لمن يطلب تقليل الحركة */
@media (prefers-reduced-motion: reduce) {
  [data-rise] { opacity: 1 !important; transform: none !important; }
  .trust__t { animation: none !important; flex-wrap: wrap; width: auto; justify-content: center; }
}

/* 7) تركيز لوحة المفاتيح واضح بكل مكان */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

/* 8) الصور لا تسبب قفزات بالتخطيط */
img { max-width: 100%; height: auto; }

/* 9) رابط "تخطَّ إلى المحتوى" لمستخدمي لوحة المفاتيح وقارئات الشاشة */
.skip {
  position: absolute; inset-inline-start: 12px; top: -60px; z-index: 200;
  padding: 10px 16px; border-radius: 999px;
  background: var(--accent); color: #fff; font-weight: 600; text-decoration: none;
}
.skip:focus { top: 12px; }

/* 10) رسائل صغيرة (كود الخصم وغيره) */
.qs-msg { font-size: 13px; margin: 6px 2px 0; }
.qs-msg.is-ok { color: var(--ok); }
.qs-msg.is-err { color: var(--err); }

/* 11) أزرار التواصل (ديسكورد / واتساب) — متاحة بكل الصفحات */
.qs-contact { display: flex; flex-wrap: wrap; gap: 12px; }
.qs-cbtn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 20px; border-radius: 999px;
  font-weight: 600; font-size: 14px; text-decoration: none; color: #fff;
  border: 1px solid transparent; transition: transform .2s var(--ease), filter .2s;
}
.qs-cbtn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.qs-cbtn--discord { background: #5865F2; }
.qs-cbtn--wa { background: #1fa855; }
.qs-cbtn--lg { padding: 16px 26px; font-size: 15.5px; }
.qs-bi { flex: none; }
@media (max-width: 640px) { .qs-cbtn { width: 100%; justify-content: center; } .qs-contact { width: 100%; } }

/* 12) زر "تواصل معنا" في الشريط العلوي يختفي على الشاشات الصغيرة (موجود داخل القائمة) */
.nav__right > .btn, .acct__login { white-space: nowrap; }
@media (max-width: 1000px) { .nav__right > .btn--solid { display: none; } }

/* الباقة المميزة بالوضع الفاتح: تدرّج بنفسجي بدل الرمادي الداكن */
[data-theme="light"] .tier--best {
  background: linear-gradient(180deg, rgba(139, 92, 255, .16), rgba(139, 92, 255, .04) 70%), #fff;
  border-color: rgba(139, 92, 255, .45);
  box-shadow: 0 36px 90px -40px rgba(139, 92, 255, .55);
}
[data-theme="light"] .tier--best .tier__flag { color: #fff; }

/* لوحات التحكم: على الكمبيوتر الغلاف لا يؤثر، وعلى الجوال يصير قائمة منسدلة */
.side__drop { display: contents; }
.side__menu { display: none; }
@media (max-width: 820px) {
  .portal > .side {
    position: sticky; top: 0; z-index: 60;
    flex-direction: column; align-items: stretch; gap: 0;
    height: auto; overflow: visible; padding: 10px 16px;
    background: var(--bg); border-bottom: 1px solid var(--line);
  }
  .side__top { gap: 8px; }
  .side__top .brand { margin-inline-end: auto; }
  .side__menu {
    display: inline-flex; align-items: center; gap: 8px; max-width: 52vw;
    padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line);
    background: var(--surface, rgba(255, 255, 255, .04)); color: var(--white); font: inherit; font-size: 13.5px; cursor: pointer;
  }
  .side__menu-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .side.is-open .side__menu { border-color: rgba(139, 92, 255, .5); }
  .side__drop {
    display: none; position: absolute; top: 100%; inset-inline: 0;
    flex-direction: column; gap: 16px; padding: 14px 16px 18px;
    max-height: calc(100svh - 64px); overflow-y: auto; overscroll-behavior: contain;
    background: var(--bg); border-bottom: 1px solid var(--line);
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .6);
  }
  .side.is-open .side__drop { display: flex; }
  .side__drop .side__group { display: flex; flex-direction: column; gap: 2px; }
  .side__drop .side__group h5 { display: block; }
  .side__drop .side__me { display: flex; margin: 0; }
  .side__drop .side__link { white-space: normal; padding-block: 11px; }
}

/* نوافذ الشراء والسلة بالوضع الفاتح: بطاقة بيضاء صلبة بدل الشفافة
   (كانت تأخذ لون الطبقة الداكنة خلفها فتظهر رمادية والنص غير مقروء) */
/* بطاقة صلبة بالوضعين، لأن ضبابية الخلفية مطفأة على الجوال فكانت المحتوى يبين من ورا النافذة */
.bots__modal__card { background: var(--card); }
[data-theme="light"] .bots__modal { background: rgba(23, 23, 31, .38); }
[data-theme="light"] .bots__modal__card {
  background: #fff;
  border-color: rgba(20, 20, 40, .08);
  box-shadow: 0 40px 90px -30px rgba(40, 30, 80, .35), 0 20px 60px -40px rgba(139, 92, 255, .45);
}
[data-theme="light"] .bots__modal__card h4 { color: var(--gray); }
[data-theme="light"] .bots__plan,
[data-theme="light"] .bots__server,
[data-theme="light"] .bots__modal .qs-input { background: #f6f5fb; border-color: rgba(20, 20, 40, .1); }
[data-theme="light"] .bots__plan.on,
[data-theme="light"] .bots__server.on { background: rgba(124, 77, 255, .1); border-color: var(--accent); }
[data-theme="light"] .bots__plan.on b { color: var(--accent-lo); }
[data-theme="light"] .bots__server img,
[data-theme="light"] .bots__server i { background: #e9e7f2; }