/* ==========================================================================
   01) المتغيرات العامة (Palette & Layout)
   ========================================================================== */
:root{
  --navy:#021460; --navy-700:#001244;
  --fg:#0e1726; --muted:#6b7a90;
  --bg:#f6f8fb; --card:#ffffff;
  --accent:#2143C7;      /* Royal */
  --accent-2:#21A1F0;    /* Sky   */
  --shadow:0 10px 30px rgba(2,20,96,.10);
  --footerH:66px;

  /* نسبة بنر الهيدر (غيّريها لو الصورة مختلفة) */
  --mast-ratio: 1920/721;
}

/* ==========================================================================
   02) الأساسيات (Reset / Base)
   ========================================================================== */
*{ box-sizing:border-box }
html,body{ margin:0; padding:0; max-width:100%; overflow-x:clip }
a{ color:inherit; text-decoration:none }
button{ background:none; border:0; color:inherit; font:inherit; cursor:pointer }
body{
  font-family:'Cairo',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background:var(--bg); color:var(--fg);
  padding-bottom:calc(var(--footerH) + 18px + env(safe-area-inset-bottom));
  -webkit-tap-highlight-color:transparent;
}
.container{ max-width:1100px; margin:0 auto; padding:16px }

/* ==========================================================================
   03) الهيدر (Mast / Header Image + Theme Toggle)
   مطابق لهكيل الصفحة: <header class="mast mast-img"><div class="mast-bg"></div>…</header>
   ========================================================================== */
.mast.mast-img{
  position:relative;
  width:100%;
  aspect-ratio:var(--mast-ratio);
  min-height:auto;
  overflow:hidden;
  margin-top:0;
}
.mast.mast-img .mast-bg{
  position:absolute; inset:0;
  /* نعرض الصورة مغطّية بدون أشرطة زرقاء مع تمركز جيد على الموبايل */
  background:url("../logo/header.jpg") center 50% / cover no-repeat !important;
}

/* زر تغيير الثيم (Sun/Moon) */
.toggle{ left:5px;bottom: -120px;position:relative; width:54px; height:28px; border-radius:999px;
  border:1px solid rgba(255,255,255,.35); background:rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(6px) saturate(120%); backdrop-filter:blur(6px) saturate(120%);
}
.toggle .knob{ position:absolute; top:3px; right:3px; width:22px; height:22px; border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#fff,#ffe8a6); box-shadow:0 0 10px rgba(255,220,120,.6);
  transition:all .3s ease;z-index:-1
}
.toggle.sun  .knob{ right:3px }
.toggle.moon .knob{ right:29px; background:radial-gradient(circle at 30% 30%,#f2f6ff,#ccd8ff); box-shadow:0 0 10px rgba(140,183,255,.55) }
.toggle::before,.toggle::after{ content:""; position:absolute; top:50%; transform:translateY(-50%); font-weight:800; font-size:12px; opacity:.9 }
.toggle::before{ right:7px; content:"☀️" } .toggle::after{ left:7px; content:"🌙" }

/* مكان الزر (أعلى-يسار في RTL) */
html[dir="rtl"] #modeToggle{
  position:absolute;
  left:12px; right:auto;
  top:10px; bottom:auto;
  z-index:3;
}

/* ==========================================================================
   04) قسم الهيرو (Hero)
   ========================================================================== */
.hero{ padding:40px 18px 36px; text-align:center; position:relative }
.hero h1{ font-size:28px; line-height:1.3; margin:8px 0 8px; color:var(--fg) }
.hero p{ color:var(--muted); margin:0 auto 16px; max-width:520px }
.cta{ display:inline-block; padding:12px 18px; border-radius:16px; font-weight:800;
  background:linear-gradient(135deg,var(--accent-2), var(--accent) 55%, var(--navy));
  color:#fff; border:1px solid rgba(2,20,96,.08); box-shadow:var(--shadow)
}

/* لمسة وميض خفيفة للـ brand-glow (تحترم تقليل الحركة) */
@media (prefers-reduced-motion: no-preference){
  .brand-glow{ position:relative; animation:glimmerLuxury 16s linear infinite }
  .brand-glow::after{
    content:""; position:absolute; inset:40% -8% auto -8%; height:.7em;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent);
    filter:blur(6px); transform:translateX(-160%) skewX(-16deg);
    animation:brandSweepLuxury 20s linear infinite; opacity:.14;
  }
  @keyframes glimmerLuxury{
    0%,100%{ text-shadow:0 0 0 rgba(33,161,240,0) }
    50%{ text-shadow:0 0 8px rgba(33,161,240,.12), 0 0 14px rgba(33,67,199,.08) }
  }
  @keyframes brandSweepLuxury{
    0%{ transform:translateX(-160%) skewX(-16deg); opacity:0 }
    20%{ opacity:.28 } 80%{ opacity:.10 }
    100%{ transform:translateX(160%)  skewX(-16deg); opacity:0 }
  }
}
body.no-text-anim .brand-glow,
body.no-text-anim .brand-glow::after{ animation:none !important; text-shadow:none !important; }

/* ==========================================================================
   05) أقسام عامة (Sections)
   ========================================================================== */
.section{ padding:16px }
.section h2{ font-size:18px; margin:8px 2px 12px; color:var(--fg) }

/* ==========================================================================
   06) سلايدر المنتجات (Products Slider)
   ========================================================================== */
.slider{ position:relative; overflow:hidden; border-radius:18px }
.track{ display:flex; gap:12px; padding:6px; will-change:transform; transition:transform .6s ease; direction:ltr }
.card{
  min-width:74%; padding:16px; border-radius:14px; background:var(--card);
  box-shadow:var(--shadow); border:1px solid #e6ecf5; direction:rtl
}
.card img{ width:100%; height:150px; object-fit:cover; border-radius:12px; margin-bottom:8px }
.card h3{ margin:6px 0 8px; font-size:16px; color:var(--fg) }
.card p{ margin:0; color:var(--muted); font-size:13px }
.slider .controls{ display:flex; justify-content:center; margin-top:10px }
.btn-all{ margin-top:8px; display:block; text-align:center; padding:11px 14px; border-radius:12px; font-weight:800; background:#eef3fb; color:#223; border:1px solid #e6ecf5 }

/* ==========================================================================
   07) لماذا فيوتك (Why Grid)
   ========================================================================== */
.why{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px }
.square{ background:var(--card); padding:14px; border-radius:12px; border:1px solid #e6ecf5; box-shadow:var(--shadow); text-align:center }
.ico{ width:38px; height:38px; border-radius:50%; margin:0 auto 6px; display:grid; place-items:center; background:#fff; border:1px solid #e6ecf5 }
.square h4{ margin:4px 0 4px; font-size:14px; color:var(--fg) }
.square p{ margin:0; color:var(--muted); font-size:12px }

/* ==========================================================================
   08) معرض المشاريع (Projects Carousel)
   ========================================================================== */
.carousel{ position:relative; border-radius:18px; padding:10px 0; background:transparent; margin-bottom:10px }
.track-wrapper{
  position:relative; overflow:auto hidden; scroll-snap-type:x mandatory; overscroll-behavior-x:contain;
  border-radius:18px; padding-bottom:4px; direction:ltr; scrollbar-width:none; -ms-overflow-style:none
}
.track-wrapper::-webkit-scrollbar{ width:0; height:0 }
.ptrack{ display:flex; gap:14px; padding:4px 10px }
.pcard{
  position:relative; width:360px; height:190px; flex:0 0 auto; border-radius:14px; overflow:hidden;
  scroll-snap-align:start; isolation:isolate; background:var(--card); border:1px solid #e6ecf5; box-shadow:var(--shadow)
}
.pcard img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:contrast(1.04) saturate(1.03) }
.pcard::before{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(255,255,255,.0),rgba(255,255,255,.55)); z-index:1 }
.pcard::after{
  content:""; position:absolute; inset:-1px; border-radius:16px; pointer-events:none; z-index:3; opacity:.35;
  background:linear-gradient(140deg, var(--accent-2), var(--accent), rgba(11,35,68,.6));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; padding:1px
}
.pglass{ position:absolute; inset:auto 12px 12px 12px; z-index:2; background:rgba(255,255,255,.82); backdrop-filter:blur(8px);
  border:1px solid #e6ecf5; border-radius:12px; padding:10px 12px; box-shadow:var(--shadow); direction:rtl; color:var(--fg)
}
.pglass h5{ margin:0 0 6px; font-size:16px }
.meta{ display:flex; gap:14px; font-size:12px; color:#3b4a66; opacity:.95 }
.nav-btn{ position:absolute; top:20%; transform:translateY(-50%); width:42px; height:42px; border-radius:50%; display:grid; place-items:center; cursor:pointer; background:#fff; border:1px solid #e6ecf5; box-shadow:var(--shadow); z-index:4; color:#223 }
.nav-btn:hover{ filter:brightness(.98) } .prev{ inset-inline-start:8px } .next{ inset-inline-end:8px }
.dots{ display:flex; gap:6px; justify-content:center; margin-top:10px }
.dot{ width:7px; height:7px; border-radius:50%; background:#cbd6eb; opacity:.8 }
.dot.active{ opacity:1; background:var(--accent) }



/* جعل الكارت بأكمله رابط قابل للنقر مع إتاحة الوصول */
.pcard{ position:relative; cursor:pointer; }
.pcard .pcard-hit{
  position:absolute; inset:0; display:block; z-index:4;
  border-radius:inherit;
  /* تحسين اللمس والتمرير داخل السلايدر على الموبايل */
  -webkit-tap-highlight-color: transparent;
  touch-action: pan-x pan-y;
}
/* حلقة تركيز واضحة عند التنقّل بلوحة المفاتيح */
.pcard .pcard-hit:focus-visible{
  outline:3px solid var(--accent-2);
  outline-offset:3px; border-radius:inherit;
}

/* سهم رقيق كدليل بصري يظهر عند الهوفر/الفوكس */
.pcard .corner{
  inset: auto auto; bottom:12px; left:12px;  

  width:36px; height:36px; border-radius:50%;
  display:grid; place-items:center;
  background:#fff; color:#223; border:1px solid #e6ecf5;
  box-shadow: var(--shadow);
  z-index:5; opacity:0; transform:translateY(6px);
  transition:.28s ease; pointer-events:none; font-weight:900;
}
.pcard:hover .corner,
.pcard:focus-within .corner{ opacity:1; transform:translateY(0) }
/* ==========================================================================
   شركاء النجاح — صف واحد + بطاقات لوجوهات ملوّنة
   ========================================================================== */
#partners{
  --logo-h: 160px;           /* ← كبّري/صغّري الشعار */
  --gap: 28px;              /* المسافة بين الشعارات */
  --rail-px: 12px;          /* Padding أفقي للحاوية */
  --rail-py: 14px;          /* Padding رأسي للحاوية */
  --marquee-time: 56s;      /* سرعة الحركة */
}

#partners .logos-rail{
  position: relative; overflow: hidden; border-radius: 14px;
  background: linear-gradient(180deg,#fff,#fbfdff);  /* يبان عن خلفية السيكشن */
  border: 1px solid #e6ecf5; box-shadow: var(--shadow);
  padding: var(--rail-py) var(--rail-px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

/* صف واحد فقط – عنصر واحد مكرّر داخله */
#partners .logos-track{
  display: flex; align-items: center; gap: var(--gap);
  width: max-content;               /* عرض على قد المحتوى */
  flex-wrap: nowrap;
  animation: marqueeOne var(--marquee-time) linear infinite;
  will-change: transform;
}

/* بطاقة لكل شعار */
#partners .logos-track img{
  height: var(--logo-h) !important; /* يكسَر أي قواعد سابقة */
  width: auto; object-fit: contain;
  background: #fff;
  border: 1px solid #e6ecf5;
  border-radius: 14px;
  padding: 10px 14px;
  box-shadow: 0 3px 12px rgba(11,35,68,.06);
  opacity: .98;
  transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
  filter: none;                     /* ألوان أصلية */
}
#partners .logos-track img:hover{
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 6px 18px rgba(11,35,68,.10);
  opacity: 1;
}

/* وقّفي الحركة عند الهوفر/الفوكس */
#partners .logos-rail:hover .logos-track,
#partners .logos-rail:focus-within .logos-track{ animation-play-state: paused; }

/* حركة مستمرة: لأننا مكررين المحتوى مرتين، نتحرك لنصف العرض بالضبط */
@keyframes marqueeOne{
  from{ transform: translateX(0); }
  to  { transform: translateX(-50%); }
}

/* ريسبونسف */
@media (max-width: 600px){
  #partners{ --logo-h: 48px; --gap: 20px; }
}
@media (min-width: 1200px){
  #partners{ --logo-h: 68px; --gap: 36px; }
}

/* احترام تقليل الحركة */
@media (prefers-reduced-motion: reduce){
  #partners .logos-track{ animation: none; }
  #partners .logos-rail{ -webkit-mask-image:none; mask-image:none; }
}
/* ===== Partners: force bigger logos + one-row smooth marquee ===== */
#partners{
  --logo-h: 78px;          /* ← كبّري/صغّري من هنا */
  --gap: 32px;
  --marquee-time: 26s;
  --logo-boost: 1.12;      /* تكبير عام داخل البطاقة لمعادلة الهوامش الشفافة */
}

/* اكسر أي قواعد قديمة كانت بتصغّر الصور */
#partners img{ height: auto !important; }  /* reset عام */

/* المسار الواحد (متوافق مع البنية الحالية اللي فيها تكرار مرتين داخل نفس .logos-track) */
#partners .logos-track{
  display:flex; align-items:center; gap:var(--gap);
  width:max-content; flex-wrap:nowrap;
  animation: marqueeOne var(--marquee-time) linear infinite;
  will-change:transform;
}

/* البطاقة + الحجم + التكبير العام */
#partners .logos-track img{
  height: var(--logo-h) !important;
  width: auto; object-fit: contain;
  background:#fff; border:1px solid #e6ecf5; border-radius:14px;
  padding:12px 16px; box-shadow:0 3px 12px rgba(11,35,68,.06);
  filter:none; opacity:.98;
  transform: scale(var(--logo-boost));        /* ← تكبير داخلي */
  transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
#partners .logos-track img:hover{
  transform: scale(calc(var(--logo-boost) * 1.05));
  box-shadow:0 6px 18px rgba(11,35,68,.10); opacity:1;
}

/* حركة مستمرة لنصف العرض لأننا مكرّرين المجموعة مرتين داخل نفس المسار */
@keyframes marqueeOne{
  from{ transform: translateX(0) }
  to  { transform: translateX(100%) }
}

/* اختياري: Boost إضافي لصور معيّنة عندها فراغ PNG كبير */
#partners .logos-track img.tight { transform: scale(calc(var(--logo-boost) * 1.25)); }
#partners .logos-track img.tight2{ transform: scale(calc(var(--logo-boost) * 1.35)); }

/* ريسبونسف */
@media (max-width: 600px){
  #partners{ --logo-h: 62px; --gap: 24px; --logo-boost: 1.10; }
}
@media (min-width: 1200px){
  #partners{ --logo-h: 86px; --gap: 36px; }
}


/* ==========================================================================
   10) العنوان والموقع (Location)
   ========================================================================== */
#location .loc-grid{ display:grid; gap:12px; grid-template-columns:1fr }
#location .loc-card, #location .map-card{ background:#fff; border:1px solid #e6ecf5; border-radius:14px; box-shadow:var(--shadow); padding:14px }
#location .loc-card h3{ margin:0 0 6px }
#location .loc-card .row{ display:flex; gap:8px; align-items:center }
#location .map-card iframe{ width:100%; height:260px; border:0; border-radius:10px }
#location .addr{ color:var(--fg) }
@media (min-width:720px){ #location .loc-grid{ grid-template-columns:1fr 1.3fr } }

/* ==========================================================================
   11) تواصل سريع (Contacts – Elegant Glow Icons)
   ========================================================================== */
#contacts .contacts-grid{ display:grid; gap:12px; grid-template-columns:repeat(2,1fr) }
.citem{
  background:#fff; border:1px solid #e6ecf5; border-radius:14px; box-shadow:var(--shadow);
  padding:14px 12px; display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center
}
.citem small{ font-weight:700; color:#1a2a44 }
.gicon{
  width:68px; height:68px; border-radius:50%; position:relative; display:grid; place-items:center;
  background:radial-gradient(circle at 50% 45%, #fff 62%, #f6f9ff 100%);
  border:0; box-shadow:inset 0 0 0 1px rgba(255,255,255,.65), 0 10px 24px rgba(33,67,199,.18), 0 0 0 8px rgba(33,161,240,.08);
  transition:transform .35s ease;
}
.gicon::before{
  content:""; position:absolute; inset:-2px; border-radius:inherit; padding:2px;
  background:conic-gradient(from 220deg, rgba(33,161,240,.9), rgba(33,67,199,.9), rgba(33,161,240,.9));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; opacity:.42; filter:blur(.2px);
  animation:slowspin 22s linear infinite;
}
.gicon::after{ content:""; position:absolute; inset:-14px; border-radius:inherit; pointer-events:none; box-shadow:0 0 26px rgba(33,161,240,.28), 0 0 42px rgba(33,67,199,.18); opacity:.55 }
#contacts .citem:hover .gicon{ transform:translateY(-2px) }
@keyframes slowspin{ to{ transform:rotate(360deg) } }
.dark #contacts .citem small{ color:#e7efff; text-shadow:0 1px 0 rgba(0,0,0,.25) }

/* ==========================================================================
   12) فقاعة المتجر العائمة (Floating Store)
   ========================================================================== */
.float-store{
  position:fixed; left:calc(env(safe-area-inset-left) + 6px);
  bottom:calc(var(--footerH) + 10px + env(safe-area-inset-bottom));
  z-index:2000; display:flex; align-items:center; gap:10px; direction:ltr
}
.float-store .ball{
  width:56px; height:56px; border-radius:50%;
  background:linear-gradient(140deg,var(--accent-2), var(--accent));
  display:grid; place-items:center; color:#fff; font-weight:900;
  border:1px solid rgba(2,20,96,.08); box-shadow:0 14px 34px rgba(33,161,240,.28);
  animation:floatY 3.6s ease-in-out 1s infinite; will-change:transform;
}
.float-store .ball img{ width:26px; height:26px; filter:drop-shadow(0 2px 6px rgba(0,0,0,.2)) }
.float-store:hover .ball{ animation-play-state:paused }
@keyframes floatY{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-6px) } }

.float-store .msg{
  background:#fff; border:1px solid #e6ecf5; color:var(--fg); font-size:13px;
  padding:10px 12px; border-radius:12px 16px 16px 12px; backdrop-filter:blur(8px); box-shadow:var(--shadow);
  max-width:72vw; white-space:normal; opacity:0; transform:translateY(10px) scale(.98);
  animation:msgPop .55s cubic-bezier(.16,1,.3,1) 1.2s forwards; will-change:transform,opacity;
}
@keyframes msgPop{ to{ opacity:1; transform:translateY(0) scale(1) } }
@media (max-width:380px){ .float-store .msg{ max-width:78vw } }

/* ==========================================================================
   13) زر الرجوع للأعلى (Back to Top)
   ========================================================================== */
.backtop{
  position:fixed; right:calc(env(safe-area-inset-right) + 14px);
  bottom:calc(var(--footerH) + 12px + env(safe-area-inset-bottom));
  width:48px; height:48px; border-radius:50%;
  background:linear-gradient(140deg,var(--accent-2),var(--accent)); color:#fff; display:grid; place-items:center;
  box-shadow:0 12px 28px rgba(33,67,199,.28); border:1px solid rgba(2,20,96,.1);
  opacity:0; transform:translateY(8px) scale(.96); pointer-events:none; transition:.28s ease; z-index:1800;
}
.backtop.show{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto }

/* ==========================================================================
   14) الفوتر السفلي (Footer Tabs + Primary Form Button)
   ========================================================================== */
.footer{
  position:fixed; left:0; right:0; bottom:0; height:var(--footerH);
  padding-bottom:env(safe-area-inset-bottom);
  background:#fff; color:#445; border-top:1px solid #e8eef7;
  display:grid; grid-template-columns:repeat(5,1fr);
  z-index:25; backdrop-filter:saturate(140%) blur(10px)
}
.fitem{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; position:relative; font-size:11px; color:#445 }
.fitem .ico{ width:38px; height:28px; display:grid; place-items:center; border-radius:8px }
.fitem small{ font-size:10px; line-height:1; white-space:nowrap; font-weight:800; color:#0b2344; text-shadow:0 1px 0 rgba(255,255,255,.65) }
.fitem.active{ color:#0b2344; filter:drop-shadow(0 2px 4px rgba(11,35,68,.15)) }

/* الزر الأساسي (طلب عرض) — دائرة مميزة وموجات */
.fitem.primary .ico{
  width:52px; height:52px; border-radius:50%;
  background:linear-gradient(140deg,var(--accent-2),var(--accent)); color:#fff;
  display:grid; place-items:center; transform:translateY(-6px);
  box-shadow:0 10px 26px rgba(33,67,199,.28), 0 0 0 6px rgba(33,161,240,.10);
  position:relative;
}
.fitem.primary .ico::before,
.fitem.primary .ico::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  border:2px solid rgba(33,67,199,.35);
  transform:scale(1); opacity:.55; animation:ripple 2.8s ease-out infinite;
}
.fitem.primary .ico::after{ animation-delay:1s }
@keyframes ripple{ 0%{ transform:scale(1); opacity:.55 } 70%{ opacity:.08 } 100%{ transform:scale(1.85); opacity:0 } }

/* ==========================================================================
   15) المودال (Modal)
   ========================================================================== */
.modal{ position:fixed; inset:0; display:none; place-items:center; z-index:70; background:rgba(3,5,12,.45); backdrop-filter:blur(6px) }
.modal.open{ display:grid }
.sheet{
  position:relative; width:min(92vw,520px); max-height:88svh; overflow:auto;
  border-radius:18px; padding:16px; background:var(--card);
  border:1px solid #e6ecf5; box-shadow:0 20px 50px rgba(0,0,0,.25);
  animation:modalIn .32s cubic-bezier(.16,1,.3,1); color:var(--fg)
}
@keyframes modalIn{ from{ transform:translateY(18px) scale(.98); opacity:.3 } to{ transform:translateY(0) scale(1); opacity:1 } }
.sheet h3{ margin:0 0 8px }
.sheet .x{ position:absolute; top:10px; inset-inline-end:12px; cursor:pointer; font-weight:800; font-size:18px; line-height:1 }
.sheet label{ display:block; font-size:12px; margin:6px 2px }
.sheet input,.sheet textarea{ width:100%; padding:10px 12px; border-radius:12px; border:1px solid #e6ecf5; background:#fff; color:var(--fg) }
.note{ color:var(--muted) }

/* ==========================================================================
   16) الوضع الليلي (Dark Mode)
   ========================================================================== */
.dark{
  --bg:linear-gradient(180deg,#0B2344,#0a1a33);
  --fg:#ffffff; --muted:#A9B9D2; --card:#0f2e5a;
  background:var(--bg); color:var(--fg);
}
.dark header{ background:linear-gradient(90deg,rgba(11,35,68,.92),rgba(21,58,115,.8)) }
.dark .card,.dark .square,.dark .pcard,.dark .sheet,
.dark #partners .logos-rail,.dark #location .loc-card,.dark #location .map-card,.dark #contacts .citem{
  background:linear-gradient(180deg,var(--card),rgba(15,46,90,.45)); border-color:rgba(255,255,255,.08)
}
.dark .pglass{ background:rgba(15,25,45,.45); border-color:rgba(255,255,255,.12); color:#fff }
.dark .footer{ background:linear-gradient(180deg, rgba(11,35,68,.92), rgba(21,58,115,.85)); border-top:1px solid rgba(255,255,255,.1); color:#d2def4 }
.dark .fitem.active{ color:#fff }
.dark .float-store .msg{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.3); color:#fff }
.dark .hero h1{ color:#fff !important } .dark .hero p{ color:#dfe8ff !important }
/* ===== Dark mode fix — Projects only ===== */
.dark #projectsCarousel .pglass h5{
  color:#fff !important;              /* عنوان الكارت */
}

.dark #projectsCarousel .pglass .meta span,
.dark #projectsCarousel .pglass a,
.dark #projectsCarousel .pglass .accent,
.dark #projectsCarousel .pglass .text-accent{
  color:#fff !important;              /* النصوص/الروابط اللي كانت زرقاء */
  opacity:.95;                        /* وضوح مناسب فوق الخلفية الداكنة */
}

/* (اختياري) لو حابة تفرق بين العنوان والنص الثانوي شوية */
.dark #projectsCarousel .pglass .meta span{ opacity:.9; }

/* ==========================================================================
   17) تحسينات ريسبونسف (Responsive)
   ========================================================================== */
@media (max-width:720px){
  .card{ min-width:82vw }
  .pcard{ width:82vw; height:180px }
  #contacts .contacts-grid{ grid-template-columns:repeat(2,1fr) }
  .float-store .msg{ max-width:200px; font-size:12px }
}
@media (max-width:380px){
  .footer .fitem small{ font-size:10px }
  .fitem.primary .ico{ width:50px; height:50px; transform:translateY(-5px) }
}

/* Contacts only */
.dark #contacts .gicon,
.dark #contacts .gicon i,
.dark #contacts .gicon svg{
  color: var(--navy) !important;   /* #021460 */
}

.dark #contacts .citem small{
  color:#e7efff !important;        /* العنوان تحت الأيقونة */
  text-shadow:0 1px 0 rgba(0,0,0,.25);
}

/* حجم الأيقونة داخل الدائرة */
#contacts .gicon-img{
  width: var(--soc-size, 28px);
  height: var(--soc-size, 28px);
  display: block;
  object-fit: contain;
  position: relative; z-index: 1; /* فوق الهالات ::before/::after */
  filter: none;                    /* نخلي الألوان الأصلية */
  user-select: none; -webkit-user-drag: none;
  image-rendering: -webkit-optimize-contrast;
}

/* لو عايزة تكبّريها بسرعة: بدّلي المتغيّر */
#contacts .gicon { /* الدائرة نفسها ثابتة عندك */
  /* مثال تكبير خفيف */
  /* --soc-size: 30px; */
}
/* ==========================================================================
   Footer — 7 tabs, centered primary, compact icons & labels
   ========================================================================== */
:root{
  --footerH: 64px;   /* كان 66px */
  --tab-ico: 22px;   /* حجم صورة الـPNG داخل المربع */
  --tab-gap: 3px;    /* المسافة بين الأيقونة والعنوان */
}

.footer{
  display:grid;
  grid-template-columns: repeat(7, 1fr); /* 3 يمين + فورم + 3 شمال */
  height: var(--footerH);
}

/* تبويب عادي */
.footer .fitem{
  position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap: var(--tab-gap);
  min-width: 52px;
  -webkit-tap-highlight-color: transparent;
}

/* صندوق الأيقونة (أصغر شوية) */
.footer .fitem:not(.primary) .ico{
  width:34px; height:34px; border-radius:10px;
  display:grid; place-items:center;
  background:#fff; border:1px solid #e6ecf5;
  box-shadow:0 3px 10px rgba(11,35,68,.08);
}

/* صورة الـPNG داخل الصندوق */
.footer .fitem .ico > img.f-ico{
  width: var(--tab-ico); height: var(--tab-ico);
  display:block; object-fit:contain;
  user-select:none; -webkit-user-drag:none;
}

/* العنوان: أصغر ورافعه لفوق سنة */
.footer .fitem small{
  font-size:10.5px; line-height:1; white-space:nowrap;
  font-weight:800; color:#0b2344; text-shadow:0 1px 0 rgba(255,255,255,.6);
  transform: translateY(-2px);
}

/* زر الفورم في المنتصف */
.footer .fitem.primary .ico{
  width:48px; height:48px; border-radius:50%;
  background:linear-gradient(140deg,var(--accent-2),var(--accent));
  color:#fff; display:grid; place-items:center;
  transform:translateY(-6px);
  box-shadow:0 10px 22px rgba(33,67,199,.25), 0 0 0 6px rgba(33,161,240,.10);
  position:relative;
}
.footer .fitem.primary .ico::before,
.footer .fitem.primary .ico::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  border:2px solid rgba(33,67,199,.35);
  transform:scale(1); opacity:.5; animation:ripple 2.6s ease-out infinite;
}
.footer .fitem.primary .ico::after{ animation-delay:.9s }
@keyframes ripple{ 0%{transform:scale(1);opacity:.5} 70%{opacity:.08} 100%{transform:scale(1.8);opacity:0} }

/* دارك مود للفوتر فقط */
.dark .footer{
  background:linear-gradient(180deg, rgba(11,35,68,.92), rgba(21,58,115,.85));
  border-top:1px solid rgba(255,255,255,.1);
}
.dark .footer .fitem small{ color:#fff; text-shadow:0 1px 0 rgba(0,0,0,.35); }
.dark .footer .fitem:not(.primary) .ico{
  background:linear-gradient(180deg,#103767,#0f2e5a);
  border-color:rgba(255,255,255,.12);
  box-shadow:0 3px 10px rgba(0,0,0,.25);
}

/* شاشات صغيرة جداً */
@media (max-width:380px){
  :root{ --tab-ico:20px; }
  .footer .fitem small{ font-size:10px; }
  .footer .fitem:not(.primary) .ico{ width:32px; height:32px; }
  .footer .fitem.primary .ico{ width:46px; height:46px; }
}
/* ===== Footer fine-tune: smaller labels + raise primary icon ===== */

/* صغّري عناوين التبويبات وارفعيها سنة */
.footer .fitem small{
  font-size: 8.8px;          /* كان ~10.5–12px */
  line-height: 1.5;
  transform: translateY(-10px); /* تطلع لفوق سنة */
  font-weight: 600;            /* أخفّ شوية من 800 */
  white-space: nowrap;
}

/* ارفعي أيقونة الفورم أكتر شوية عشان تبان في النص */
.footer .fitem.primary .ico{
  transform: translateY(-10px);  /* كان -6px */
  /* لو محتاجة أقل/أكثر عدّلي الرقم بس */
}

/* شاشة صغيرة جدًا */
@media (max-width: 380px){
  .footer .fitem small{ font-size: 9.2px; transform: translateY(-2px); }
  .footer .fitem.primary .ico{ transform: translateY(-9px); }
}

/* ===== Dark mode: white tiles for footer icons (non-primary only) ===== */
.dark .footer .fitem:not(.primary) .ico{
  background: #fff !important;                 /* الخلفية بيضاء */
  border-color: rgba(11,35,68,.10) !important; /* إطار خفيف */
  box-shadow:
    0 6px 14px rgba(0,0,0,.28),                /* ظل خارجي لطيف */
    inset 0 1px 0 rgba(255,255,255,.9);        /* لمعان داخلي خفيف */
}

/* الأيقونات PNG تظل بألوانها الأصلية */
.dark .footer .fitem .ico > img.f-ico{
  filter: none; opacity: .98;                  /* وضوح أفضل */
}

/* تفاعل بسيط عند اللمس/الهوفر */
.dark .footer .fitem:not(.primary):hover .ico{
  box-shadow: 0 8px 18px rgba(0,0,0,.32);
}

/* احتفاظ بتمييز التبويب النشط إن رغبتِ */
.dark .footer .fitem.active:not(.primary) .ico{
  outline: 2px solid rgba(33,67,199,.28);
  outline-offset: 0;
}


/* ==========================================================================
   About page — Fixed Header, Breadcrumbs & Fixed Footer
   ========================================================================== */
:root{
  --af-headH: 52px;
  --af-footH: 70px;
}

/* فعّلي التباعد فقط في الصفحات اللي عليها الهيدر/الفوتر دول */
.has-af-bars{
  padding-top: calc(var(--af-headH) + 10px);
  padding-bottom: calc(var(--af-footH) + 12px + env(safe-area-inset-bottom));
}

/* ---------- Header ---------- */
.af-head{ position:fixed; top:0; left:0; right:0; z-index:1000; pointer-events:none; }
.af-head .af-bar{
  pointer-events:auto;
  height: var(--af-headH);
  background:#fff;
  border:2px solid #08245a; border-bottom-width:3px;
  border-radius:16px;
  margin:6px auto 0; padding:0 12px;
  max-width:1100px;
  display:flex; align-items:center; justify-content:space-between;
  box-shadow:0 8px 18px rgba(11,35,68,.10);
}
.af-crumbs{ display:flex; align-items:center; gap:5px; font-weight:600; color:#08245a; }
.af-crumbs a{ text-decoration:underline; }
.af-sep{ opacity:.65 }
.af-home-ico{ display:inline-grid; place-items:center; width:18px; height:18px; margin-inline-start:2px }
.af-edit{ font-size:15px; opacity:.85; text-decoration:none; color:#08245a }

/* ---------- Footer ---------- */
.af-foot{
  position:fixed; left:0; right:0; bottom:0; z-index:1000;
  background:#fff; border-top:1px solid #e6ecf5;
  padding:6px 10px calc(6px + env(safe-area-inset-bottom));
  box-shadow:0 -8px 18px rgba(11,35,68,.08);
}
.af-tray{
  max-width:500px; margin:0 auto;
  display:grid; grid-template-columns:repeat(3,1fr); gap:12px; align-items:end;
}
.af-act{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  color:#0b2344; font-weight:700; text-decoration:none;
}
.af-act .ico{
  width:48px; height:48px; border-radius:14px;
  display:grid; place-items:center;
  background:linear-gradient(180deg,#f6f9ff,#ffffff);
  border:1px solid #e6ecf5;
  box-shadow:0 6px 14px rgba(11,35,68,.10);
}
.af-act small{ font-size:12px; line-height:1 }
.af-act:active .ico{ transform:translateY(1px) }

/* ---------- Icons ---------- */
.af-icon{ width:22px; height:22px; display:block }
.af-icon.lg{ width:24px; height:24px }

/* ---------- Dark Mode (لو عندك body.dark) ---------- */
.dark .af-head .af-bar,
.dark .af-foot{
  background:linear-gradient(180deg,#0f2e5a,#0d2144);
  border-color:rgba(255,255,255,.12);
  box-shadow:none;
}
.dark .af-crumbs, 
.dark .af-crumbs a,
.dark .af-edit,
.dark .af-act{ color:#fff; text-shadow:0 1px 0 rgba(0,0,0,.35) }
.dark .af-act .ico{
  background:#fff; border-color:rgba(11,35,68,.12); box-shadow:0 6px 14px rgba(0,0,0,.28)
}

/* ---------- Responsive tweaks ---------- */
@media (max-width:480px){
  :root{ --af-headH: 50px; --af-footH: 68px; }
  .af-act small{ font-size:11px }
}

/* ===== Breadcrumbs: pin to LEFT + nice background ===== */

/* شريط الترويسة */
.af-bar{
  position: sticky; top: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: flex-start;
  padding: 8px 14px;
  margin: 8px 12px;
  background: linear-gradient(180deg,#f7faff,#ffffff);
  border: 1px solid #dfe7f6;
  border-radius: 16px;
  box-shadow: 0 8px 18px rgba(11,35,68,.12), inset 0 1px 0 rgba(255,255,255,.85);

  /* أهم سطر: نخلّي اتجاه الشريط LTR علشان يبدأ من اليسار مهما كانت الصفحة RTL */
  direction: ltr;
  text-align: left;
}

/* مسار الـcrumbs */
.af-crumbs{
  display:flex; align-items:center; gap:5px;
  white-space:nowrap;
  /* النص نفسه يفضل LTR عشان ترتيب الأيقونة > الهوم > « > الصفحة يبقى ثابت */
  direction: ltr;
}

.af-home-ico{ width:18px; height:18px; display:grid; place-items:center; color:#173067 }
.af-home-ico .af-icon{ width:18px; height:18px }

.af-sep{ opacity:.55; margin:0 2px }

.af-crumbs a{
  color:#173067; font-weight:700;
  text-decoration:underline; text-underline-offset:2px;
}
.af-crumbs [aria-current="page"]{ font-weight:600; color:#0b2344 }
.af-edit{ margin-inline-start:8px; text-decoration:none; }

/* دارك مود */
.dark .af-bar{
  background:linear-gradient(180deg,#0f2e5a,#0d2144);
  border-color:rgba(255,255,255,.12);
  box-shadow:none;
}
.dark .af-crumbs a,
.dark .af-crumbs span{ color:#fff; text-shadow:0 1px 0 rgba(0,0,0,.35) }

/* ============================
   Certs Mini + Modal (scoped)
   ============================ */
#fxc-certs{
  --fg:#0e1726; --edge:#e6ecf5; --card:#fff;
  --accent:#2143C7; --accent-2:#21A1F0;
  --shadow:0 10px 30px rgba(2,20,96,.10);

  /* أحجام مرنة */
  --gap:   clamp(8px, 2.2vw, 18px);
  --chip-w: clamp(64px, 12vw, 110px);
  --chip-h: clamp(44px, 7.5vw, 72px);
  --img-h:  clamp(20px, 3.6vw, 42px);
}

#fxc-certs .fxc-title{ margin:0 0 10px; font-weight:800; color:var(--fg); }

/* شريط الشهادات */
#fxc-certs .fxc-bar{
  display:flex; align-items:center; gap:var(--gap);
  overflow:auto hidden; padding: clamp(6px, 1.6vw, 12px);
  border:1px solid var(--edge); border-radius:14px;
  background:linear-gradient(180deg,#fff,#fbfdff);
  box-shadow:var(--shadow);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity;
}
#fxc-certs .fxc-bar::-webkit-scrollbar{height:0}

/* العنصر */
#fxc-certs .fxc-chip{
  flex:0 0 auto; display:grid; place-items:center;
  width:var(--chip-w); height:var(--chip-h);
  border-radius: clamp(8px, 2vw, 12px);
  background:#fff; border:1px solid var(--edge);
  box-shadow:0 3px 10px rgba(11,35,68,.06);
  transition:transform .2s ease, box-shadow .2s ease;
  scroll-snap-align:center;
}
#fxc-certs .fxc-chip img{ height:var(--img-h); width:auto; object-fit:contain; display:block; filter:none }
#fxc-certs .fxc-chip:hover{ transform:translateY(-2px); box-shadow:0 8px 18px rgba(11,35,68,.10) }

/* زر الكل — أنيق للموبايل */
#fxc-certs .fxc-more{
  margin-inline-start:auto;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height: clamp(36px, 7vw, 42px);
  padding: 0 clamp(10px, 3vw, 16px);
  border-radius:999px; font-weight:800;
  background:linear-gradient(135deg, var(--accent-2), var(--accent));
  color:#fff; border:1px solid rgba(2,20,96,.12);
  box-shadow:var(--shadow);
  scroll-snap-align:end;
}
#fxc-certs .fxc-more .ico{ font-size:18px; line-height:1 }
#fxc-certs .fxc-more .txt{ font-size:14px }
@media (max-width:480px){
  #fxc-certs .fxc-more{ width:44px; padding:0; }
  #fxc-certs .fxc-more .txt{ display:none; }
}

/* ===== Modal via :target (لا يحتاج JS) ===== */
#fxc-certs .fxc-modal{
  position:fixed; inset:0; z-index:1100;
  display:block; opacity:0; pointer-events:none;
  transition:opacity .25s ease;
}
#fxc-certs .fxc-modal:target{ opacity:1; pointer-events:auto; }

#fxc-certs .fxc-overlay{
  position:absolute; inset:0; background:rgba(3,5,12,.45);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  display:block;
}

#fxc-certs .fxc-sheet{
  position:relative; margin: min(6vh,48px) auto; padding: clamp(12px, 2.4vw, 18px);
  width:min(92vw, 820px); max-height:88svh; overflow:auto;
  background:var(--card); border:1px solid var(--edge); border-radius:16px;
  box-shadow:0 20px 50px rgba(0,0,0,.25); animation:fxcIn .28s ease;
}
@keyframes fxcIn{ from{ transform:translateY(12px); opacity:.3 } to{ transform:none; opacity:1 } }

#fxc-certs .fxc-x{
  position:absolute; top:10px; inset-inline-end:12px;
  text-decoration:none; font-weight:800; font-size:18px; color:var(--fg);
}

#fxc-certs .fxc-grid{
  display:grid; gap: clamp(10px, 2.2vw, 16px);
  grid-template-columns: repeat(auto-fit, minmax(clamp(120px, 30vw, 190px), 1fr));
  margin-top:8px;
}
#fxc-certs .fxc-card{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  background:#fff; border:1px solid var(--edge); border-radius:12px; padding: clamp(10px, 2.2vw, 14px);
  text-align:center; box-shadow:var(--shadow);
  transition:transform .2s ease, box-shadow .2s ease;
}
#fxc-certs .fxc-card img{ height: clamp(32px, 4.5vw, 50px); width:auto; object-fit:contain }
#fxc-certs .fxc-card span{ font-size: clamp(11px, 2.6vw, 13px); color:var(--fg); font-weight:800 }
#fxc-certs .fxc-card:hover{ transform:translateY(-2px); box-shadow:0 10px 22px rgba(11,35,68,.12) }

/* تلاشي حواف أوسع على الشاشات الأضيق */
@media (max-width:520px){
  #fxc-certs .fxc-bar{
    -webkit-mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
            mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  }
}

/* ===== دعم الوضع الليلي — Scoped ===== */
.dark #fxc-certs .fxc-bar{
  background:linear-gradient(180deg, rgba(15,46,90,.6), rgba(15,46,90,.35));
  border-color:rgba(255,255,255,.12);
}
.dark #fxc-certs .fxc-chip{
  background:#fff; border-color:rgba(11,35,68,.10); box-shadow:0 3px 10px rgba(0,0,0,.25);
}
.dark #fxc-certs .fxc-sheet{
  background:linear-gradient(180deg,#0f2e5a, rgba(15,46,90,.45));
  color:#fff; border-color:rgba(255,255,255,.12);
}
.dark #fxc-certs .fxc-card{
  background:linear-gradient(180deg,#0f2e5a, rgba(15,46,90,.45));
  border-color:rgba(255,255,255,.12);
}
.dark #fxc-certs .fxc-card span,
.dark #fxc-certs .fxc-x{ color:#fff; }
/* ===== Certs Block (scoped) ===== */
#certs-mini{
  /* متغيّرات مرنة خاصة بالمكوّن فقط */
  --edge: #e6ecf5;
  --shadow: 0 10px 30px rgba(2,20,96,.10);
  --accent: #2143C7;
  --accent2:#21A1F0;

  --gap:   clamp(8px, 2.2vw, 18px);
  --chip-w: clamp(64px, 12vw, 110px);
  --chip-h: clamp(44px, 7.5vw, 72px);
  --img-h:  clamp(20px, 3.6vw, 42px);
}

#certs-mini .certs-title{
  margin: 20px 20px 10px;
  font-size: clamp(16px, 4.2vw, 28px);
}

/* الشريط */
#certs-mini .certs-bar{
  display:flex; align-items:center; gap:var(--gap);
  overflow:auto hidden; padding: clamp(6px, 1.6vw, 12px);
  border-radius:14px; direction:ltr;
  background:linear-gradient(180deg,#fff,#fbfdff);
  border:1px solid var(--edge); box-shadow:var(--shadow);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
#certs-mini .certs-bar::-webkit-scrollbar{ height:0 }

#certs-mini .cert-chip{
  flex:0 0 auto; display:grid; place-items:center;
  width:var(--chip-w); height:var(--chip-h);
  border-radius: clamp(8px, 2vw, 12px);
  background:#fff; border:1px solid var(--edge);
  box-shadow:0 3px 10px rgba(11,35,68,.06);
  transition: transform .2s ease, box-shadow .2s ease;
}
#certs-mini .cert-chip img{
  width:auto; height:var(--img-h); object-fit:contain; display:block;
}
#certs-mini .cert-chip:hover{ transform:translateY(-2px); box-shadow:0 8px 18px rgba(11,35,68,.10) }

/* زر تحت الشريط */
#certs-mini .certs-cta-wrap{ display:flex; justify-content:center; margin-top:12px }
#certs-mini .certs-more{
  padding: clamp(10px, 2.4vw, 14px) clamp(14px, 4vw, 22px);
  border-radius: 14px; font-weight:800;
  border:1px solid rgba(2,20,96,.12);
  background: linear-gradient(135deg,var(--accent2),var(--accent));
  color:#fff; box-shadow:var(--shadow); cursor:pointer;
  font-size: clamp(13px, 3.4vw, 16px);
}
#certs-mini .certs-more:active{ transform: translateY(1px) }

/* ===== المودال (scoped) ===== */
.certs-modal{ position:fixed; inset:0; display:none; place-items:center; z-index:1000;
  background:rgba(3,5,12,.45); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px) }
.certs-modal.open{ display:grid }
.certs-modal .certs-sheet{
  position:relative; width:min(92vw,820px); max-height:88svh; overflow:auto;
  background:#fff; border:1px solid var(--edge); border-radius:16px;
  padding: clamp(12px, 2.4vw, 18px); box-shadow:0 20px 50px rgba(0,0,0,.25);
  animation: certsIn .28s ease;
}
@keyframes certsIn{ from{ transform:translateY(12px); opacity:.3 } to{ transform:none; opacity:1 } }
.certs-modal .certs-x{
  position:absolute; top:10px; inset-inline-end:12px; border:0; background:none;
  font-weight:800; font-size:18px; cursor:pointer;
}
.certs-modal .certs-heading{ margin:10px  0 10px }

.certs-modal .certs-grid{
  display:grid; gap: clamp(10px, 2.2vw, 16px);
  grid-template-columns: repeat(auto-fit, minmax(clamp(120px, 30vw, 190px), 1fr));
  margin-top:8px;
}
.certs-modal .cert-card{
  display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center;
  background:#fff; border:1px solid var(--edge); border-radius:12px; padding: clamp(10px, 2.2vw, 14px);
  box-shadow:0 10px 22px rgba(11,35,68,.06);
  transition: transform .2s ease, box-shadow .2s ease;
}
.certs-modal .cert-card img{ height: clamp(32px, 4.5vw, 50px); width:auto; object-fit:contain }
.certs-modal .cert-card span{ font-size: clamp(11px, 2.6vw, 13px); font-weight:800; color:#0b2344 }
.certs-modal .cert-card:hover{ transform:translateY(-2px); box-shadow:0 12px 24px rgba(11,35,68,.12) }

/* ===== Dark mode (ينطبق لما body.dark موجود) ===== */
.dark #certs-mini .certs-bar{
  background:linear-gradient(180deg, rgba(15,46,90,.6), rgba(15,46,90,.35));
  border-color: rgba(255,255,255,.12);
}
.dark #certs-mini .cert-chip{
  background:#fff; border-color:rgba(11,35,68,.10);
  box-shadow:0 3px 10px rgba(0,0,0,.25);
}
.dark .certs-modal .certs-sheet{
  background:linear-gradient(180deg,#0f2e5a, rgba(15,46,90,.45));
  color:#fff; border-color:rgba(255,255,255,.12);
}
.dark .certs-modal .cert-card{
  background:linear-gradient(180deg,#0f2e5a, rgba(15,46,90,.45));
  border-color:rgba(255,255,255,.12);
}
.dark .certs-modal .cert-card span{ color:#fff }
/* ـــــ الترتيب الطبقي: الـ modals فوق كل العوامات ـــــ */
.float-store{ z-index:1500; }        /* كانت 2000 */
.backtop{ z-index:1800; }

.modal,
.fx-modal{ z-index:5000; }           /* كانت ~70 و 1000 */

/* عند فتح أي مودال، امنعي تفاعل المتجر (اختياري ولطيف) */
.overlay-open .float-store{
  pointer-events:none;
  opacity:.88;                        /* لمسة خفيفة توحي إنه بالخلف */
}
/* ===== 1) طبقات العرض (Z-index) ===== */
/* ارفعي أي مودال فوق كل العوامات */
.modal,
.fx-modal{ z-index: 6000 !important; }   /* المودالات */

.float-store{ z-index: 1200 !important; } /* فقاعة المتجر خلف المودالات */
.backtop{ z-index: 1100 !important; }     /* زر العودة للأعلى خلف المودالات */

/* ===== 2) تكبير الشهادات داخل المودال ===== */
.fx-sheet{
  width: min(94vw, 920px);      /* المودال أعرض شوية */
}
.fx-certs-grid{
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); /* كروت أعرض */
}
.fx-cert-card{
  padding: 16px 18px;
}
.fx-cert-card img{
  height: clamp(56px, 8vw, 82px); /* اللوجو كبير وواضح */
}

/* شاشات صغيرة جدًا: صفّين مريحين */
@media (max-width: 420px){
  .fx-certs-grid{
    grid-template-columns: repeat(2, minmax(150px, 1fr));
    gap: 14px;
  }
}

/* ===== 3) تكبير شارات الشهادات في الشريط ===== */
/* غيّري القيم لو عايزة أكبر/أصغر */
#certs-mini{
  --gap:    16px;
  --chip-w: 104px;
  --chip-h: 88px;
  --img-h:  88px;
}
#certs-mini .fx-certs-bar{
  padding: 10px 12px;
}
#certs-mini .fx-cert-chip{
  border-radius: 12px;
}
#certs-mini .fx-cert-chip img{
  height: var(--img-h);
}

/* زر "عرض كل الشهادات" تحت الشريط (لو مستخدمة fx-cta) */
.fx-cta{ margin-top: 10px; text-align: center; }
.fx-cta-btn{
  display:inline-block; padding: 12px 18px; border-radius: 14px;
  font-weight: 800; border: 1px solid rgba(2,20,96,.08);
  background: linear-gradient(135deg, var(--accent-2), var(--accent));
  color: #fff; box-shadow: 0 10px 30px rgba(2,20,96,.10);
}
.fx-cta-btn:active{ transform: translateY(1px); }

/* دارك مود متوافق */
.dark .fx-sheet,
.dark .fx-cert-card{
  background: linear-gradient(180deg, var(--card), rgba(15,46,90,.45));
  border-color: rgba(255,255,255,.12);
}
.dark .fx-cta-btn{
  box-shadow: 0 12px 28px rgba(33,67,199,.28);
}
/* ===== Always put overlays above everything ===== */
.fx-modal,
.modal{
  position: fixed !important;
  inset: 0 !important;
  z-index: 10000 !important;           /* أعلى من أي عنصر ثابت */
}

/* ضع فقاعة المتجر وزر الرجوع خلف المودالات */
.float-store,
.float-store .ball,
.float-store .msg{ z-index: 500 !important; }

.backtop{ z-index: 450 !important; }

/* (اختياري) أثناء ظهور أي مودال: اعتم وامنَع النقر على فقاعة المتجر */
.has-overlay .float-store{ opacity:.35; pointer-events:none; }
/* ===== تكبير واضح داخل المودال فقط ===== */
#fxCertsModal .fx-sheet{
  width: min(96vw, 1120px);         /* ورّعي عرض الورقة */
}

#fxCertsModal .fx-certs-grid{
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

#fxCertsModal .fx-cert-card{
  padding: 18px;
  min-height: 240px;                /* بطاقة أطول */
  border-radius: 14px;
}

#fxCertsModal .fx-cert-card img{
  height: 260px;                    /* ← حجم الصورة (كبّري/صغّري بحرية) */
  width: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

/* موبايل: نعرض شهادة/عمود واحد لعرض أكبر */
@media (max-width: 720px){
  #fxCertsModal .fx-certs-grid{
    grid-template-columns: 1fr;
    gap: 14px;
  }
  #fxCertsModal .fx-cert-card{
    min-height: 260px;
  }
  #fxCertsModal .fx-cert-card img{
    height: 290px;                  /* أكبر على الموبايل */
  }
}

/* صغيرة جدًا؟ استخدمي boost لصور فيها هوامش بيضاء كبيرة */
#fxCertsModal .fx-cert-card img.boost{
  transform: scale(1.25);           /* اختياري: زود التكبير داخل البطاقة */
  transform-origin: center;
}
/* === Certs: layering so popups are always on top === */
.fx-modal, .certs-modal, .modal{
  position: fixed !important;
  inset: 0 !important;
  z-index: 10000 !important;           /* فوق أي عناصر عائمة */
}
.float-store, .float-store .ball, .float-store .msg{ z-index: 500 !important; }
.backtop{ z-index: 450 !important; }

/* === Certs mini bar: bigger chips/logos (home strip) === */
#certs-mini{
  --gap:   16px;
  --chip-w: 112px;           /* عرض الشارة */
  --chip-h: 86px;            /* ارتفاع الشارة */
  --img-h:  56px;            /* ارتفاع اللوجو داخل الشارة */
}
#certs-mini .cert-chip img{ height: var(--img-h) !important; }

/* === POPUP (fxCertsModal): make cards & images much bigger === */
#fxCertsModal .fx-sheet{
  width: min(96vw, 1080px);            /* المودال أعرض */
}
#fxCertsModal .fx-certs-grid{
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* كروت أعرض */
}
#fxCertsModal .fx-cert-card{
  padding: 18px;
  min-height: 300px;                   /* ارتفاع البطاقة */
  border-radius: 14px;
}
#fxCertsModal .fx-cert-card img{
  height: clamp(300px, 148vh, 840px);   /* ← حجم الشهادة ذاته (كبير وواضح) */
  width: auto; max-width: 100%;
  object-fit: contain; display: block; margin: 0 auto;
}

/* موبايل: عمود واحد + صورة أكبر */
@media (max-width: 720px){
  #fxCertsModal .fx-certs-grid{ grid-template-columns: 1fr; gap: 14px; }
  #fxCertsModal .fx-cert-card{ min-height: 340px; }
  #fxCertsModal .fx-cert-card img{ height: clamp(320px, 58vh, 480px); }
}

/* اختياري: لو فيه صور شهادات حوالينها فراغ أبيض كتير، ادّيها class="boost" */
#fxCertsModal .fx-cert-card img.boost{
  transform: scale(1.18);
  transform-origin: center;
}

/* دارك مود متوافق */
.dark #fxCertsModal .fx-sheet{
  background: linear-gradient(180deg,#0f2e5a, rgba(15,46,90,.45));
  color:#fff; border-color: rgba(255,255,255,.12);
}
.dark #fxCertsModal .fx-cert-card{
  background: linear-gradient(180deg,#0f2e5a, rgba(15,46,90,.45));
  border-color: rgba(255,255,255,.12);
}
.dark #fxCertsModal .fx-cert-card img{ filter: none; }
.dark #fxCertsModal .fx-cert-card span{ color:#fff; }
/* ========== CERTS — Force BIG preview in the popup ========== */

/* لو فيه قواعد قديمة كانت بتصغّر الصورة (زي height:42px) نلغيها أولاً */
.fx-cert-card img{ height:auto !important; }

/* المودال فوق أي عناصر عائمة + يخفي فقاعة المتجر وراه */
#fxCertsModal{ z-index: 10000 !important; position: fixed !important; inset: 0 !important; }
.float-store, .float-store .ball, .float-store .msg{ z-index: 500 !important; }

/* شبكة المودال: عمود/عمودين حسب العرض */
#fxCertsModal .fx-sheet{ width: min(96vw, 1080px); }
#fxCertsModal .fx-certs-grid{
  gap: 20px;
  grid-template-columns: repeat(2, minmax(360px, 1fr));
}
@media (max-width: 820px){
  #fxCertsModal .fx-certs-grid{ grid-template-columns: 1fr; gap: 16px; }
}

/* كارت الشهادة أعلى تكبير ممكن بدون قصّ */
#fxCertsModal .fx-cert-card{
  display: grid; grid-template-rows: 1fr auto; place-items: center;
  min-height: clamp(380px, 70vh, 680px);
  border-radius: 14px; padding: 18px;
}

/* الصورة نفسها: كبيرة وواضحة */
#fxCertsModal .fx-cert-card img{
  width: auto !important;
  max-width: 94% !important;
  height: clamp(340px, 92vh, 600px) !important;  /* ← التكبير الحقيقي */
  object-fit: contain !important;
  display: block; margin: 0 auto;
}

/* اختياري: زوّدي boost لصور حدودها بيضاء كبيرة */
#fxCertsModal .fx-cert-card img.boost{ transform: scale(1.18); transform-origin: center; }

/* دارك مود متوافق */
.dark #fxCertsModal .fx-sheet{
  background: linear-gradient(180deg,#0f2e5a, rgba(15,46,90,.45));
  color:#fff; border-color: rgba(255,255,255,.12);
}
.dark #fxCertsModal .fx-cert-card{
  background: linear-gradient(180deg,#0f2e5a, rgba(15,46,90,.45));
  border-color: rgba(255,255,255,.12);
}
.dark #fxCertsModal .fx-cert-card span{ color:#fff; }

/* ========== CERTS MINI BAR (الشريط في الصفحة الرئيسية) ========== */
#certs-mini{
  --gap: 18px;
  --chip-w: 128px;   /* كبّري الشارة */
  --chip-h: 92px;
  --img-h: 64px;     /* كبّري اللوجو داخل الشارة */
}
#certs-mini .cert-chip img{ height: var(--img-h) !important; }
@media (max-width:720px){
  #certs-mini{ --chip-w: 120px; --chip-h: 88px; --img-h: 62px; }
}
/* ========== CERTS — Clean single source of truth ========== */

/* (1) طبقات العرض: المودالات فوق الكل، المتجر وزر الرجوع خلفها */
.fx-modal,
.certs-modal,
.modal{
  position: fixed !important;
  inset: 0 !important;
  z-index: 10000 !important;       /* أعلى شيء */
}
.float-store, .float-store .ball, .float-store .msg{ z-index: 500 !important; }
.backtop{ z-index: 450 !important; }

/* (2) شريط الشهادات في الصفحة الرئيسية (أكبر وواضح) */
#certs-mini{
  --gap:   18px;
  --chip-w: 128px;
  --chip-h: 92px;
  --img-h:  64px;
}
#certs-mini .cert-chip{
  width: var(--chip-w); height: var(--chip-h);
  border-radius: 12px;
}
#certs-mini .cert-chip img{
  height: var(--img-h) !important;
  width: auto; object-fit: contain;
}

/* (3) الـ POPUP: كروت أعرض وصور الشهادات كبيرة جداً بدون قصّ */
#fxCertsModal .fx-sheet{
  width: min(96vw, 1080px);
  max-height: 88svh;               /* يفضل الإبقاء عليها */
}
#fxCertsModal .fx-certs-grid{
  gap: 20px;
  grid-template-columns: repeat(2, minmax(360px, 1fr));
}
#fxCertsModal .fx-cert-card{
  display: grid; grid-template-rows: 1fr auto; place-items: center;
  min-height: clamp(420px, 72vh, 740px);
  padding: 18px; border-radius: 14px;
}
#fxCertsModal .fx-cert-card img{
  width: auto !important;
  max-width: 96% !important;
  height: clamp(380px, 90vh, 680px) !important;  /* ← التكبير الحقيقي */
  object-fit: contain !important;
  display: block; margin: 0 auto;
}
/* لو في صور حوالينها فراغ أبيض كبير: أضيفي class="boost" للصورة */
#fxCertsModal .fx-cert-card img.boost{ transform: scale(1.12); transform-origin: center; }

/* موبايل: عمود واحد وصورة أكبر نسبيًا */
@media (max-width: 820px){
  #fxCertsModal .fx-certs-grid{ grid-template-columns: 1fr; gap: 16px; }
  #fxCertsModal .fx-cert-card{ min-height: clamp(360px, 65vh, 560px); }
  #fxCertsModal .fx-cert-card img{ height: clamp(320px, 58vh, 520px) !important; }
}

/* (4) دارك مود متوافق للشهادات */
.dark #fxCertsModal .fx-sheet{
  background: linear-gradient(180deg,#0f2e5a, rgba(15,46,90,.45));
  color:#fff; border-color: rgba(255,255,255,.12);
}
.dark #fxCertsModal .fx-cert-card{
  background: linear-gradient(180deg,#0f2e5a, rgba(15,46,90,.45));
  border-color: rgba(255,255,255,.12);
}
.dark #fxCertsModal .fx-cert-card span{ color:#fff; }
/* ===== Lightbox للشهادات ===== */
.fx-lb{
  position:fixed; inset:0;
  display:none; place-items:center;
  background:rgba(3,5,12,.7);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  z-index:2600; /* أعلى من فقاعة المتجر */
}
.fx-lb.open{ display:grid; }

.fx-lb img{
  max-width:min(96vw, 1100px);
  max-height:86vh;
  border-radius:12px;
  background:#fff;
  box-shadow:0 30px 80px rgba(0,0,0,.5);
  object-fit:contain;
}

/* العنوان أسفل الصورة (اختياري) */
.fx-lb-cap{
  margin-top:10px;
  color:#fff;
  font-weight:800;
  text-align:center;
  text-shadow:0 1px 0 rgba(0,0,0,.5);
}

/* زر الإغلاق */
.fx-lb-x{
  position:fixed;
  top:14px; inset-inline-end:16px;
  width:40px; height:40px; border-radius:50%;
  display:grid; place-items:center;
  background:#fff; color:#0b2344;
  border:1px solid rgba(11,35,68,.12);
  box-shadow:0 8px 22px rgba(0,0,0,.25);
  font-weight:900; cursor:pointer;
}

/* تأكيد أن فقاعة المتجر تحت اللايت بوكس */
.float-store{ z-index:1200; }  /* اللايت بوكس أعلى منها بـ 2600 */
/* المودالات العادية/مودال الشهادات */
.fx-modal{ z-index: 2300; }        /* شبكة الشهادات */
.modal{ z-index: 2100; }            /* أي مودال تاني عندك (إن وجد) */
.float-store{ z-index: 1200; }      /* فقاعة المتجر */
.backtop{ z-index: 1800; }          /* زر للأعلى */

/* لايت-بوكس الصورة — دائمًا فوق الكل */
.fx-lb{
  position:fixed; inset:0;
  display:none; place-items:center;
  background:rgba(3,5,12,.72);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  z-index: 5000;                     /* أعلى من أي مودال */
}
.fx-lb.open{ display:grid; }
.fx-lb img{
  max-width:min(96vw, 1200px);
  max-height:86vh;
  border-radius:12px;
  background:#fff;
  box-shadow:0 30px 80px rgba(0,0,0,.5);
  object-fit:contain;
}
.fx-lb-x{
  position:fixed; top:14px; inset-inline-end:16px;
  width:40px; height:40px; border-radius:50%;
  display:grid; place-items:center; cursor:pointer;
  background:#fff; color:#0b2344;
  border:1px solid rgba(11,35,68,.12);
  box-shadow:0 8px 22px rgba(0,0,0,.25);
  font-weight:900;
}
/* === Partners (scoped) === */
.partners{ --gap:18px; --logo:90px; --ring:#e6ecf5; --shadow:0 6px 14px rgba(15,23,42,.06); }
@media (min-width:600px){ .partners{ --logo:100px } }
@media (min-width:1000px){ .partners{ --logo:110px } }

.partners-title{ margin:8px 0 14px; font-size:20px; font-weight:800; }

.pl-grid{
  display:grid; gap:var(--gap);
  grid-template-columns:repeat(auto-fit, minmax(var(--logo), 1fr));
  place-items:center;
}

.pl-item{
  width:var(--logo); height:var(--logo);
  border-radius:50%;
  background:linear-gradient(180deg,#f6f9ff,#fff);
  border:1px solid var(--ring);
  box-shadow:var(--shadow);
  display:grid; place-items:center;
  text-decoration:none;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.pl-item:hover{ transform:translateY(-2px); box-shadow:0 10px 22px rgba(15,23,42,.12); border-color:#d9e4f4; }

.pl-item img{
  max-width:70%; max-height:70%;
  object-fit:contain; display:block;
  filter: grayscale(.1) saturate(.7) brightness(.95);
  transition:filter .2s ease;
}
.pl-item:hover img{ filter:none; }

/* اختياري: نسخة أصغر/أكبر بسرعة */
.partners.sm{ --logo:76px }
.partners.lg{ --logo:128px }

/* دارك مود (لو عندك body.dark) */
body.dark .pl-item{ background:#0f2e5a; border-color:rgba(255,255,255,.15); box-shadow:none; }
body.dark .pl-item img{ filter:none; }
/* ثبّتي سلوك الـSVG: ياخد اللون من currentColor */
.af-act .ico svg,
.af-act .ico path,
.af-act .ico line,
.af-act .ico polyline,
.af-act .ico circle,
.af-act .ico rect{
  stroke: currentColor;
  fill: none;
}

/* الوضع الفاتح: عادي (لون النص داكن) */
.af-act{ color:#0b2344; }

/* الوضع الليلي: اسم الزر يفضل أبيض، والأيقونة داخل المربّع تكون داكنة على خلفية بيضا */
.dark .af-act{ color:#fff; text-shadow:0 1px 0 rgba(0,0,0,.35); }
.dark .af-act .ico{
  background:#fff;               /* نفس الخلفية الحالية */
  color:#0b2344;                 /* أهم سطر: لون الأيقونة */
  border-color:rgba(255,255,255,.18);
  box-shadow:0 6px 14px rgba(0,0,0,.28);
}

/* (اختياري) لو عايزة الأيقونة تميل للأزرق بدل الكحلي */
.dark .af-act .ico{ color:#173067; } /* أو أي درجة تحبيها */


/* Share grid */
.share{
  --size:72px;          /* مقاس المربّع حول الأيقونة */
  --gap:16px;           /* المسافات بين العناصر */
  --edge:#e6ecf5;
  --shadow:0 6px 14px rgba(15,23,42,.08);
  padding: 8px 4px;
}
.share-grid{
  display:grid;
  gap:var(--gap);
  grid-template-columns:repeat(auto-fit, minmax(110px,1fr));
  place-items:center;
}
.share-item{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  text-decoration:none; color:#0b2344;
}
.share-icon{
  width:var(--size); height:var(--size);
  border-radius:16px; background:#fff;
  border:1px solid var(--edge);
  display:grid; place-items:center;
  box-shadow:var(--shadow);
  transition:transform .15s ease, box-shadow .15s ease;
}
.share-icon img{ width:34px; height:34px; object-fit:contain; display:block }
.share-item:hover .share-icon{ transform:translateY(-2px); box-shadow:0 10px 22px rgba(15,23,42,.12) }
.share-label{ font-weight:800; font-size:12px; line-height:1; }

/* دارك مود (اختياري) */
.dark .share-icon{ background:#fff; border-color:rgba(255,255,255,.18); box-shadow:0 6px 14px rgba(0,0,0,.28) }
.dark .share-item{ color:#fff; text-shadow:0 1px 0 rgba(0,0,0,.35) }
/* ===== Contact Cards ===== */
#contacts .contact-list{
  list-style:none; margin:0; padding:0;
  display:grid; gap:12px; grid-template-columns:1fr;
}
@media (min-width:720px){
  #contacts .contact-list{ grid-template-columns:repeat(2, 1fr); }
}

#contacts .contact-card{
  display:flex; align-items:center; gap:12px;
  padding:14px; border-radius:16px;
  background:#fff; border:1px solid var(--edge, #e6ecf5);
  box-shadow:var(--shadow, 0 6px 14px rgba(15,23,42,.06));
}

#contacts .cc-ico{
  width:54px; height:54px; flex:0 0 auto;
  border-radius:14px; display:grid; place-items:center;
  background:
    radial-gradient(110% 110% at 28% 22%, rgba(255,255,255,.42) 0, rgba(255,255,255,0) 45%),
    linear-gradient(145deg, var(--brand-2, #4AA8FF), var(--brand, #1E63E9));
  color:#fff; box-shadow:0 8px 20px rgba(30,99,233,.25);
}
#contacts .cc-ico img{ width:26px; height:26px; object-fit:contain; filter:drop-shadow(0 1px 2px rgba(0,0,0,.2)); }

#contacts .cc-body{ flex:1; min-width:0; }
#contacts .cc-label{ font-size:12px; color:var(--muted, #64748b); font-weight:800; margin-bottom:2px; }
#contacts .cc-value{
  font-size:18px; font-weight:900; color:#0b2344;
  text-decoration:none; word-break:break-all;
}
#contacts .cc-value:hover{ text-decoration:underline; }

#contacts .cc-actions{ display:flex; gap:8px; flex-wrap:wrap; }
#contacts .cc-chip{
  font-size:12px; line-height:1; font-weight:800;
  padding:8px 10px; border-radius:999px;
  border:1px solid var(--edge, #e6ecf5); background:#fff; color:#0f172a;
  text-decoration:none; transition:transform .15s, box-shadow .15s;
}
#contacts .cc-chip:hover{ transform:translateY(-1px); box-shadow:0 6px 14px rgba(15,23,42,.08); }

/* WhatsApp chip */
#contacts .cc-chip.cc-wa{
  border:0; color:#fff;
  background:linear-gradient(145deg,#25D366,#128C7E);
  box-shadow:0 8px 20px rgba(18,140,126,.25);
}

/* Dark mode */
.dark #contacts .contact-card{
  background:linear-gradient(180deg, var(--card,#0f2e5a), rgba(15,46,90,.45));
  border-color:rgba(255,255,255,.08);
}
.dark #contacts .cc-label{ color:#d6e1f6; }
.dark #contacts .cc-value{ color:#fff; text-shadow:0 1px 0 rgba(0,0,0,.35); }
/* ===== A2HS links (open steps page) ===== */
#a2hs{ display:grid; gap:12px }
#a2hs .a2hs-link{
  display:flex; align-items:center; gap:12px;
  padding:14px; border-radius:16px;
  background:#fff; border:1px solid var(--edge,#e6ecf5);
  box-shadow:var(--shadow,0 6px 14px rgba(15,23,42,.06));
  color:#0b2344; text-decoration:none;
  transition:transform .15s ease, box-shadow .15s ease;
}
#a2hs .a2hs-link:hover{ transform:translateY(-1px); box-shadow:0 10px 22px rgba(15,23,42,.12) }

#a2hs .a2hs-ico{
  width:54px; height:54px; flex:0 0 auto; border-radius:14px;
  display:grid; place-items:center; color:#fff;
  box-shadow:0 8px 20px rgba(30,99,233,.22);
  background:
    radial-gradient(110% 110% at 28% 22%, rgba(255,255,255,.42) 0, rgba(255,255,255,0) 45%),
    linear-gradient(145deg, #4AA8FF, #1E63E9);
}
#a2hs .android .a2hs-ico{
  background:
    radial-gradient(110% 110% at 28% 22%, rgba(255,255,255,.42) 0, rgba(255,255,255,0) 45%),
    linear-gradient(145deg,#34D399,#059669); /* أخضر أندرويد */
}
#a2hs .ios .a2hs-ico{
  background:
    radial-gradient(110% 110% at 28% 22%, rgba(255,255,255,.42) 0, rgba(255,255,255,0) 45%),
    linear-gradient(145deg,#C7D2FE,#3B82F6); /* أزرق iOS */
}
#a2hs .a2hs-ico img{ width:26px; height:26px; object-fit:contain; }

#a2hs .a2hs-text{ display:flex; flex-direction:column; gap:3px; }
#a2hs .a2hs-text .ar{ font-size:16px; font-weight:900 }
#a2hs .a2hs-text .en{ font-size:12px; font-weight:800; color:#4b5b78 }

#a2hs .a2hs-chev{
  margin-inline-start:auto; font-weight:900; font-size:24px; line-height:1;
  color:#173067; opacity:.65;
}

/* دارك مود */
.dark #a2hs .a2hs-link{
  background:linear-gradient(180deg, var(--card,#0f2e5a), rgba(15,46,90,.45));
  border-color:rgba(255,255,255,.08); color:#fff;
}
.dark #a2hs .a2hs-text .en{ color:#d6e1f6 }
.dark #a2hs .a2hs-chev{ color:#fff; opacity:.8 }
/* ===== A2HS steps page ===== */
#a2hs-steps{ max-width:980px; margin:18px auto; padding:0 12px }

/* Banner */
#a2hs-steps .head-card{
  display:flex; align-items:center; gap:12px;
  padding:14px; border-radius:18px;
  color:#fff; text-decoration:none;
  background:linear-gradient(180deg,#0b2344,#0a1a33);
  box-shadow:0 8px 18px rgba(11,35,68,.25);
}
#a2hs-steps .head-card .ico{
  width:48px; height:48px; border-radius:12px;
  display:grid; place-items:center; flex:0 0 auto;
  background:#fff; box-shadow:0 6px 14px rgba(0,0,0,.18);
}
#a2hs-steps .head-card .ico img{ width:26px; height:26px; object-fit:contain }
#a2hs-steps .head-card .text{ display:flex; flex-direction:column; gap:4px }
#a2hs-steps .head-card .text .ar{ font-size:18px; font-weight:900 }
#a2hs-steps .head-card .text .en{ font-size:12px; font-weight:800; opacity:.9 }
#a2hs-steps .head-card .chev{
  margin-inline-start:auto; font-weight:900; font-size:24px; opacity:.85;
}

/* Steps grid */
#a2hs-steps .steps-grid{
  list-style:none; margin:14px 0 0; padding:0;
  display:grid; gap:14px; grid-template-columns:1fr;
}
@media (min-width:740px){
  #a2hs-steps .steps-grid{ grid-template-columns:repeat(2,1fr) }
}
#a2hs-steps .step figure{
  margin:0; padding:8px; border-radius:14px;
  background:#fff; border:1px solid #e6ecf5;
  box-shadow:0 6px 14px rgba(15,23,42,.06);
}
#a2hs-steps .step img{
  width:100%; height:auto; display:block; border-radius:10px;
}
#a2hs-steps .step figcaption{
  padding:6px 4px 2px; font-size:12px; font-weight:800; color:#334155;
  text-align: start;
}

/* Dark mode (اختياري) */
.dark #a2hs-steps .head-card{ background:linear-gradient(180deg,#0f2e5a,#0d2144) }
.dark #a2hs-steps .step figure{
  background:linear-gradient(180deg,#0f2e5a,rgba(15,46,90,.45));
  border-color:rgba(255,255,255,.1);
}
.dark #a2hs-steps .step figcaption{ color:#fff; text-shadow:0 1px 0 rgba(0,0,0,.35) }
#social-counters{max-width:760px;margin:14px auto;padding:0 12px}
#social-counters .sc-row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
#social-counters .sc-box{
  min-width:220px; display:grid; place-items:center;
  padding:10px; border-radius:12px; background:#fff;
  border:1px solid #e6ecf5; box-shadow:0 6px 14px rgba(15,23,42,.06);
}
.dark #social-counters .sc-box{
  background:linear-gradient(180deg,#0f2e5a,#0d2144);
  border-color:rgba(255,255,255,.12)
}
/* ارفع عنوان زرّ الفورم (اللي في النص) */
.footer .fitem.primary small{
  transform: translateY(-6px);   /* كان -2px للكل */
}

/* على الشاشات الصغيرة خليها أعلى سنة كمان */
@media (max-width:380px){
  .footer .fitem.primary small{ transform: translateY(-7px); }
}
/* زقّي تبويب "حمّل التطبيق" شِعرة لجوه وارفعي عنوانه سنة */
.footer .fitem[aria-label="حمّل التطبيق"]{
  transform: translateX(-3px);           /* ادخليه ناحية اليسار */
}
.footer .fitem[aria-label="حمّل التطبيق"] small{
  transform: translate(-2px, -2px);      /* ادخلي وارفعي العنوان */
}


/* زقّي تبويب "حمّل التطبيق" شِعرة أضف للهاتف عنوانه سنة */
.footer .fitem[aria-label="أضف للهاتف"]{
  transform: translateX(-4px);           /* ادخليه ناحية اليسار */
}
.footer .fitem[aria-label="أضف للهاتف"] small{
  transform: translate(-3px, -3px);      /* ادخلي وارفعي العنوان */
}
/* === Compact Breadcrumbs (Responsive) === */

/* الحاوية */
.af-bar{
  padding: 6px 10px;            /* كانت أكبر */
  max-width: 100%;
}

/* السطر نفسه */
.af-crumbs{
  display: flex;
  align-items: center;
  gap: 6px;                      /* تقليل المسافة بين العناصر */
  overflow: hidden;              /* يمنع الطلوع برة */
}

/* الروابط والنصوص */
.af-crumbs a,
.af-crumbs span{
  font-size: 13px;               /* أصغر شوية */
  line-height: 1.2;
  white-space: nowrap;           /* ما يلفّش سطرين */
  flex: 0 1 auto;                /* يسمح لهم يصغّروا */
  min-width: 0;                  /* مهم للـellipsis */
}

/* السهم الفاصل */
.af-sep{
  margin: 0 3px;                 /* تقليل المسافة يمين/يسار السهم */
  opacity: .6;
}

/* آخر عنصر (الصفحة الحالية): اسمح له يتمدّد ثم نقط */
.af-crumbs [aria-current="page"]{
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;       /* … لو طويل */
}

/* شاشات أصغر */
@media (max-width: 375px){
  .af-crumbs{ gap: 4px; }
  .af-crumbs a,
  .af-crumbs span{ font-size: 12px; }
}

/* لو محتاجة أصغر كمان على الشاشات الصغيرة جداً */
@media (max-width: 320px){
  .af-crumbs a,
  .af-crumbs span{ font-size: 11px; }
}

/* اجعلي الهيدر مرجِعًا للتموضع المطلق */
.mast.mast-img{ position: relative; }

/* الزر دائمًا أعلى-يسار، في كل اللغات */
#modeToggle{
  position: absolute;
  left: 12px;
  right: auto;
  top: 90px;            /* عدّليها 70–120px حسب ارتفاع صورة الهيدر عندك */
  z-index: 10;
}

/* نلغي أي قواعد سابقة ربطت الاتجاه بالمكان */
html[dir="ltr"] #modeToggle,
html[dir="rtl"] #modeToggle{
  left: 12px !important;
  right: auto !important;
  top: 90px;
}

/* شاشة أصغر: قرّبيه من الأعلى لو حبيتي */
@media (max-width:420px){
  #modeToggle{ top: 72px; }
}