/* site.css — [ZyRox] نظام تصميم موحّد لصفحات الموقع العامة (يُحمَّل آخر ملف في <head>) */

/* 1) الرموز الموحّدة (مرآة :root في التطبيق) */
:root{
  /* العلامة (أزرق) */
  --zy-1:#4d90fe; --zy-2:#3079ed; --zy-bright:#6B90DA; --zy-deep:#0b57d0; --zy-soft:#C3D9FF;
  --zy-glow:rgba(77,144,254,.34); --zy-glow-strong:rgba(77,144,254,.42); --zy-tint:rgba(77,144,254,.16);
  --zy-haze:rgba(77,144,254,.12); --zy-haze2:rgba(77,144,254,.05);
  --zy-veil:255,255,255; --zy-bg:#0b0b0c; --zy-bgrgb:11,11,12;
  --zy-text:#f4f4f3; --zy-text2:#b9b9b8; --zy-solid:26,26,28;

  --brand:var(--zy-deep); --brand-hover:var(--zy-2); --brand-soft:var(--zy-soft); --brand-2:var(--zy-2);
  --accent:var(--zy-1); --accent2:var(--zy-bright); --accent-2:var(--zy-bright); --accent-soft:var(--zy-tint);

  --ok:#34d399; --success:#34d399; --warn:#f59e0b; --warning:#f59e0b;
  --danger:#ef4444; --bad:#ef4444; --error:#ef4444;

  /* ذهبي «نجوم تلغرام» — اللهجة الفخمة التي نوحّد عليها اللمسات المميزة */
  --gold:#f5b83d; --gold-2:#f59e0b; --gold-3:#f97316;
  --gold-soft:rgba(245,184,61,.14); --gold-line:rgba(245,184,61,.42); --gold-glow:rgba(245,184,61,.5);
  --gold-ink:#251a00;

  /* محاذاة أسماء قديمة كانت كل صفحة تختلقها بنفسها */
  --bg:var(--zy-bg); --bg-soft:#101014; --panel:rgb(var(--zy-solid)); --panel-2:#212124;
  --surface:rgb(var(--zy-solid)); --card:#1a1a1c; --card2:#212124;
  --text:var(--zy-text); --text-2:var(--zy-text2); --text2:var(--zy-text2); --txt:var(--zy-text);
  --ink:#dcdce0; --muted:var(--zy-text2); --subtle:#8a8a89; --text-dim:var(--zy-text2);
  --line:rgba(var(--zy-veil),.08); --border:rgba(var(--zy-veil),.09); --line-soft:rgba(var(--zy-veil),.06);
  --red:var(--zy-1); --red-deep:var(--zy-deep); --red-hover:var(--zy-2); --red-soft:var(--zy-tint);

  /* خطوط وأحجام */
  --ff:'IBM Plex Sans Arabic',system-ui,-apple-system,'Segoe UI',Tahoma,sans-serif;
  --ff-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --fs-xs:12px; --fs-sm:13.5px; --fs-base:15px; --fs-md:16px; --fs-lg:19px;

  /* سلّم المسافات */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-7:32px; --sp-8:48px;

  /* سلّم الحواف */
  --radius:16px; --r-xs:8px; --r-sm:10px; --r-md:14px; --r-lg:18px; --r-xl:22px; --r-pill:999px;

  /* ظلال وحركة */
  --shadow:0 22px 60px -18px rgba(0,0,0,.7);
  --sh-1:0 5px 16px rgba(0,0,0,.28); --sh-2:0 12px 34px rgba(0,0,0,.4);
  --tr:.16s ease; --tr-slow:.28s cubic-bezier(.2,.8,.3,1);
  --nav-h:62px;
  color-scheme:dark;
}

html[data-theme="light"]{
  --zy-bg:#f7f5ef; --zy-bgrgb:247,245,239; --zy-text:#302e29; --zy-text2:#716d64;
  --zy-veil:0,0,0; --zy-solid:255,254,250; --zy-haze:rgba(11,87,208,.06); --zy-haze2:rgba(11,87,208,.03);
  --bg:#f7f5ef; --bg-soft:#f1efe9; --panel:#fff; --panel-2:#f2f0ea; --surface:#fff; --card:#fff; --card2:#f2f0ea;
  --text:#302e29; --txt:#302e29; --ink:#3a3833; --muted:#716d64; --subtle:#8b8579;
  --line:rgba(0,0,0,.1); --border:rgba(0,0,0,.1); --line-soft:rgba(0,0,0,.06);
  color-scheme:light;
}

/* أساس موحّد */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--ff);
  color:var(--zy-text);
  background:
    radial-gradient(1100px 560px at 78% -12%,var(--zy-haze),transparent 62%),
    radial-gradient(900px 520px at 6% 108%,var(--zy-haze2),transparent 60%),
    var(--zy-bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body button,body input,body select,body textarea{font-family:var(--ff)}
:focus-visible{outline:2px solid var(--zy-1);outline-offset:2px;border-radius:6px}
::selection{background:var(--zy-tint);color:var(--zy-text)}

/* الكرات الزخرفية: نوحّد ألوانها مع هوية الموقع */
.bg-orbs span{background:var(--zy-1)!important}
.bg-orbs span:nth-child(2){background:var(--zy-deep)!important}
.bg-orbs span:nth-child(3){background:var(--zy-bright)!important}

/* القائمة العلوية الموحّدة */
.wnav{
  position:sticky;inset-block-start:0;z-index:100;
  background:rgba(11,11,12,.82);
  -webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);
  border-block-end:1px solid var(--line);
  padding-block-start:env(safe-area-inset-top,0px);
}
html[data-theme="light"] .wnav{background:rgba(247,245,239,.88)}
.wnav-in{
  max-width:1180px;margin-inline:auto;
  padding-inline:clamp(14px,4vw,40px);
  min-height:var(--nav-h);
  display:flex;align-items:center;gap:var(--sp-5);
}
.wnav-brand{display:inline-flex;align-items:center;gap:10px;flex-shrink:0;
  font-weight:600;font-size:16px;letter-spacing:.2px;color:var(--zy-text);text-decoration:none}
.wnav-brand:hover{color:var(--zy-text);text-decoration:none}
.wnav-brand img{width:32px;height:32px;border-radius:9px;display:block}
.wnav-links{display:flex;align-items:center;gap:clamp(16px,2.4vw,28px);margin:0;padding:0;list-style:none}
.wnav-links a{font-size:14.5px;font-weight:500;color:var(--zy-text2);text-decoration:none;
  padding:6px 2px;border-radius:var(--r-xs);transition:color var(--tr);white-space:nowrap}
.wnav-links a:hover{color:var(--zy-text);text-decoration:none}
.wnav-links a[aria-current="page"]{color:var(--zy-text)}
.wnav-actions{display:flex;align-items:center;gap:var(--sp-2);flex-shrink:0;margin-inline-start:auto}
.wnav-cta{
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  font-size:14px;font-weight:600;padding:9px 18px;border-radius:var(--r-sm);
  background:linear-gradient(150deg,var(--zy-bright),var(--zy-deep));
  color:#fff;text-decoration:none;border:1px solid transparent;
  box-shadow:0 8px 22px var(--zy-glow);transition:filter var(--tr),transform var(--tr);
}
.wnav-cta:hover{filter:brightness(1.08);color:#fff;text-decoration:none}
.wnav-cta:active{transform:translateY(1px)}
/* زر «نجوم تلغرام» الذهبي — لمسة قسم الدفع بالنجوم، في كل صفحة */
.wnav-cta.gold{
  background:linear-gradient(150deg,var(--gold),var(--gold-2));
  color:var(--gold-ink);box-shadow:0 10px 26px -10px var(--gold-glow);
}
.wnav-cta.gold:hover{color:var(--gold-ink)}
@media (max-width:640px){.wnav-cta.gold{display:none}}

@media (max-width:820px){
  .wnav-in{flex-wrap:wrap;gap:var(--sp-3);padding-block:10px;min-height:0}
  .wnav-links{order:3;width:100%;overflow-x:auto;scrollbar-width:none;
    gap:18px;padding-block-end:4px}
  .wnav-links::-webkit-scrollbar{display:none}
}

/* 4) لغة البطاقة الموحّدة — مستوحاة من بطاقة «نجوم تلغرام»
   (بطاقة زجاجية + شريط علوي ملوّن + رفع عند المرور) */
.card,.why,.pane,.fact,.rate,.ep,.cta-block,.lead-box,.code-box{
  position:relative;overflow:hidden;
  background:linear-gradient(180deg,var(--panel-2),var(--panel));
  border:1px solid var(--line);border-radius:var(--radius);
  transition:transform .18s,border-color .2s,box-shadow .2s;
}
.card::after,.why::after,.pane::after,.fact::after,.rate::after,.ep::after,
.cta-block::after,.lead-box::after,.code-box::after{
  content:"";position:absolute;inset:0 0 auto 0;height:3px;pointer-events:none;
  background:linear-gradient(90deg,var(--zy-1),var(--zy-deep));
}
/* البطاقات «المميّزة» تأخذ ذهبي النجوم */
.why::after,.cta-block::after,.rate::after{
  background:linear-gradient(90deg,var(--gold),var(--gold-3));
}
.card:hover,.why:hover,.pane:hover,.fact:hover,.rate:hover,.ep:hover,
.cta-block:hover,.lead-box:hover,.code-box:hover{
  transform:translateY(-3px);border-color:rgba(var(--zy-veil),.16);
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}