/* ============================================================================
   بطاقات الإهداء — هوية فيصل تك
   يُحمَّل بعد تنسيقات الصفحة فيتجاوزها.

   واجهة البطاقات مبنية على خمسة متغيرات فقط، فإعادة تعريفها يكفي لتغيير
   الواجهة كلها. وما بعدها لمسات على العناصر التي كانت تستعمل اللون
   الأساسي في موضع يليق به الذهبي.
   ============================================================================ */

:root{
  /* الهوية */
  --navy:#071A33; --navy-2:#0B294E; --navy-3:#123A6B;
  --gold:#C6A15B; --gold-2:#E2C584; --gold-soft:#F7EEDC;

  /* المتغيرات الخمسة التي تقوم عليها الصفحة */
  --main:#123A6B;
  --bg:#F5F7FB;
  --line:#E2E8F0;
  --text:#13243B;
  --muted:#5F6D7C;
}

/* ── الترويسة ── */
.top{background:var(--navy);border-bottom:0;color:#fff}
.top a{color:#fff;text-decoration:none}
.top .brand{color:#fff;font-weight:700}
.top .dot{background:var(--gold)}

/* ── الواجهة العلوية ── */
.hero{
  background:linear-gradient(135deg,var(--navy) 0%,var(--navy-2) 55%,var(--navy-3) 100%);
  color:#fff;
}
.hero h1{color:#fff}
.hero p{color:#c2d0e2}
.hero .ic{filter:drop-shadow(0 6px 18px rgba(198,161,91,.35))}

/* ── البطاقات واللوحات ── */
.panel{border:1px solid var(--line);box-shadow:0 1px 2px rgba(19,36,59,.04),0 10px 30px rgba(19,36,59,.07)}
.occ{box-shadow:0 1px 2px rgba(19,36,59,.04),0 10px 26px rgba(19,36,59,.07)}
.occ:hover{transform:translateY(-3px)}

/* ── أرقام الخطوات: ذهبي داكن على ذهبي فاتح ── */
.num{background:var(--gold-soft);color:#8D6828;border:1px solid #EBDCBE;font-weight:700}

/* ── الإجراء الرئيسي ذهبي، وما دونه كحلي ── */
.go{
  background:linear-gradient(135deg,var(--gold),var(--gold-2));
  color:var(--navy);
}
.go:hover{filter:brightness(1.05)}

/* ── التصميم المختار: حلقة ذهبية ── */
.design.on{
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(198,161,91,.28);
}
.occ.on,.t.on{border-color:var(--gold)}

/* ── شريط التقدّم ── */
.bar{background:#E8EDF4}
.bar>*{background:linear-gradient(90deg,var(--gold),var(--gold-2))}

/* ── الروابط ── */
.link,a.link{color:var(--navy-3)}
.link:hover,a.link:hover{color:var(--gold)}

/* ── الشعار بدل الرموز التعبيرية ──
   العنصران يحملان ✨ و ✦ نصًّا داخل الصفحة. نُخفي النص ونضع الشعار
   خلفيةً، فيُستبدلان بلا تعديل في بنية الصفحة. */
.hero .ic{
  font-size:0 !important; color:transparent !important; line-height:0;
  width:72px; height:72px; margin:0 auto 10px;
  background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'> <defs><linearGradient id='g' x1='0' y1='0' x2='1' y2='1'> <stop offset='0' stop-color='%23C6A15B'/><stop offset='1' stop-color='%23E2C584'/></linearGradient></defs> <rect width='64' height='64' rx='18' fill='url(%23g)'/> <path d='M18 17h29v8H27v8h16v8H27v16h-9V17Z' fill='%23071A33'/> <path d='M35 33h12v8H35z' fill='%23FFFFFF'/></svg>");
  background-size:contain; background-repeat:no-repeat; background-position:center;
  filter:drop-shadow(0 10px 22px rgba(198,161,91,.30));
}
.top .dot{
  font-size:0 !important; color:transparent !important;
  display:inline-block; width:30px; height:30px; vertical-align:middle;
  background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'> <defs><linearGradient id='g' x1='0' y1='0' x2='1' y2='1'> <stop offset='0' stop-color='%23C6A15B'/><stop offset='1' stop-color='%23E2C584'/></linearGradient></defs> <rect width='64' height='64' rx='18' fill='url(%23g)'/> <path d='M18 17h29v8H27v8h16v8H27v16h-9V17Z' fill='%23071A33'/> <path d='M35 33h12v8H35z' fill='%23FFFFFF'/></svg>");
  background-size:contain; background-repeat:no-repeat; background-position:center;
  border-radius:9px;
}

@media(max-width:600px){ .hero .ic{width:60px;height:60px} }

/* ── التذييل بهوية الموقع ── */
footer{
  background:var(--navy);
  color:#8FA3BC;
  border-top:3px solid var(--gold);
}
footer a{color:#C7D3E2;font-weight:600;text-decoration:none}
footer a:hover{color:var(--gold-2)}