/* ============================================================
   v4.css — طبقة التصميم الجديدة | رفيق النجاح
   الإصدار 4.0 · 9 أغسطس 2026
   مبنية من نظام تصميم Claude Design ومطبَّقة فوق بنية الموقع القائمة.
   لا تُغيّر بنية HTML ولا الروابط ولا السيو — طبقة مظهر فقط.
   تُحمَّل بعد v3.min.css فتَغلِبه بالترتيب لا بالأهمية (!important ممنوع إلا للضرورة).
   ============================================================ */

/* ---------- 1) الرموز ---------- */
:root{
  /* الأزرق: الصوت الأساسي */
  --blue-900:#0A2D63; --blue-700:#104CA2; --blue-600:#1660C2; --blue-100:#E8F0FB;
  /* الذهبي: لمسة نادرة */
  --gold-600:#C9A23A; --gold-500:#E5C159; --gold-200:#F6E9C2; --gold-050:#FBF3DC;
  /* المحايدات */
  --ink:#1F2937; --slate:#4B5563; --mute:#8A93A2;
  --line:#E6E9EF; --cloud:#F3F4F6; --paper:#FFFFFF;
  /* دلالية */
  --ok:#2E9E6B; --warn:#D98A2B; --err:#D14343;

  /* المسافات — إيقاع 8 بكسل */
  --sp-1:8px; --sp-2:16px; --sp-3:24px; --sp-4:32px; --sp-5:40px; --sp-6:56px; --sp-7:72px;
  --sp-section:72px;
  /* الأنصاف والحدود */
  --r-sm:8px; --r:14px; --r-lg:22px; --r-pill:999px;
  --bw:1px; --bw-strong:1.5px;
  /* الظلال مائلة للأزرق لا للأسود */
  --shadow-1:0 1px 2px rgba(16,76,162,.06), 0 1px 3px rgba(16,76,162,.05);
  --shadow-2:0 8px 24px -6px rgba(16,76,162,.18);
  --shadow-glow:0 10px 40px -10px rgba(229,193,89,.45);
  /* التخطيط والحركة */
  --maxw:1180px; --gutter:24px;
  --ease:cubic-bezier(.2,.8,.2,1); --dur:.2s; --dur-lg:.4s;

  /* الطباعة — نُبقي Tajawal المستضاف ذاتياً ونضيف Cairo كبديل أول
     إن حُمِّل. تجنّبنا @import لأنه يحجب العرض. */
  --font-ar:"Cairo","Tajawal",system-ui,sans-serif;
  --font-en:"Poppins","Montserrat",system-ui,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,monospace;
  --fs-display:40px; --lh-display:1.2; --ls-display:-.02em;
  --fs-h1:30px; --lh-h1:1.27;
  --fs-h2:23px; --lh-h2:1.4;
  --fs-h3:18px; --lh-h3:1.45;
  --fs-body:16px; --lh-body:1.7;
  --fs-sm:14px; --fs-cap:13px;
  --fs-eyebrow:12px; --ls-eyebrow:.18em;

  /* جسور توافق مع رموز v3 القديمة حتى لا ينكسر ما يعتمد عليها */
  --navy:var(--blue-900); --navy2:var(--blue-700); --royal:var(--blue-700);
  --gold:var(--gold-500); --goldL:var(--gold-200); --goldD:var(--gold-600);
  --gray:var(--slate); --bgs:var(--cloud);
}

/* ---------- 2) الأساس ---------- */
body{
  font-family:var(--font-ar);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  color:var(--ink);
  background:var(--paper);
}
h1,h2,h3,h4,h5,h6{ color:var(--blue-900); font-weight:800; letter-spacing:-.01em; }
h1{ font-size:clamp(26px,4.4vw,var(--fs-display)); line-height:var(--lh-display); letter-spacing:var(--ls-display); }
h2{ font-size:clamp(21px,3.2vw,var(--fs-h1)); line-height:var(--lh-h1); }
h3{ font-size:var(--fs-h2); line-height:var(--lh-h2); }
p{ color:var(--slate); }
a{ transition:color var(--dur) var(--ease); }
.wrap{ max-width:var(--maxw); padding-inline:var(--gutter); }

/* الأرقام والنصوص اللاتينية بخط لاتيني وباتجاه صحيح */
.num,.stat b,[dir="ltr"]{ font-family:var(--font-en); font-variant-numeric:tabular-nums; }

/* ---------- 3) شريط التنقّل ---------- */
nav.navf .navp{
  background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  backdrop-filter:saturate(180%) blur(14px);
  border:var(--bw) solid var(--line);
  box-shadow:var(--shadow-1);
  border-radius:var(--r-pill);
}
nav.navf .navp a{ color:var(--ink); font-weight:600; }
nav.navf .navp a:hover{ color:var(--blue-700); }

/* ---------- 4) الأزرار ---------- */
.gbtn{
  background:linear-gradient(180deg,var(--gold-500),var(--gold-600));
  color:#20180a; font-weight:800;
  border:none; border-radius:var(--r-pill);
  box-shadow:var(--shadow-glow);
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.gbtn:hover{ transform:translateY(-1px); box-shadow:0 14px 46px -10px rgba(229,193,89,.55); }
.nbtn{
  background:transparent; color:var(--blue-700);
  border:var(--bw-strong) solid var(--blue-700);
  border-radius:var(--r-pill); font-weight:700;
}
.nbtn:hover{ background:var(--blue-100); }

/* إصلاح عيب رصدناه في حزمة التصميم: الأزرار كانت أعرض من شاشة 390
   فتُقتطع. نحصر العرض دائماً داخل المنفذ. */
.gbtn,.nbtn{ max-width:100%; box-sizing:border-box; }

/* ---------- 5) البطاقات ---------- */
.pk,.gpanel,.faq details{
  background:var(--paper);
  border:var(--bw) solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-1);
  transition:box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.pk:hover,.gpanel:hover{ box-shadow:var(--shadow-2); transform:translateY(-2px); }
.sec{ padding-block:var(--sp-section); }
.sec[style*="var(--bgs)"],.sec.alt{ background:var(--cloud); }

/* ترويسة القسم */
.shead .k{
  font-size:var(--fs-eyebrow); letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase; color:var(--mute); font-weight:700;
}

/* ---------- 6) الفوتر ---------- */
#ftv4{ background:linear-gradient(180deg,var(--blue-900),#071F45); }
#ftv4 h3{ color:#fff; }
#ftv4 a:hover{ color:var(--gold-200); }

/* ---------- 7) زر واتساب العائم ---------- */
.wafl{
  box-shadow:0 10px 30px -8px rgba(46,158,107,.5);
  transition:transform var(--dur) var(--ease);
}
.wafl:hover{ transform:scale(1.06); }

/* ---------- 8) الموبايل ---------- */
@media(max-width:900px){
  :root{ --sp-section:48px; --gutter:18px; }
  h1{ font-size:clamp(24px,6.4vw,32px); }
  /* ضمان ألّا يتجاوز أي زر عرض الشاشة — العيب الذي رصدناه في الحزمة */
  .gbtn,.nbtn,.crow>*{ max-width:calc(100vw - 2*var(--gutter)); }
}

/* ---------- 9) احترام تفضيل تقليل الحركة ---------- */
@media(prefers-reduced-motion:reduce){
  .gbtn,.pk,.gpanel,.wafl{ transition:none; }
  .gbtn:hover,.pk:hover,.gpanel:hover,.wafl:hover{ transform:none; }
}