/* ════════════════════════════════════════════════════════════════════════
   FAZAA — Shared styles
   ────────────────────────────────────────────────────────────────────────
   ملف موحّد للأنماط المتكررة عبر جميع الصفحات (شريط التوثيقات + نافذة
   عرض الشهادات). كان مكرراً 11 مرة قبل الـrefactor (مرتين أحياناً!).
   يُحمَّل من <head>:
     <link rel="stylesheet" href="assets/fz-shared.css">

   ملاحظة: هذا الملف يجمع كل الخصائص الفعّالة (effective styles) من النسختين
   المتداخلتين السابقتين:
     1) النسخة الغنية داخل <style> الرئيسي (animation + backdrop-filter)
     2) النسخة المختصرة "isolated block" في الأسفل (position:fixed!important
        + visibility-hidden trick + margin-top:6vh)
   حافظت على كل ما كان يصل للـDOM فعلاً.
   ════════════════════════════════════════════════════════════════════════ */

/* ───────── CREDENTIALS STRIP ─────────
   شريط التوثيقات (السجل التجاري / الرقم الضريبي / منصة الأعمال). */
.credentials{
  display:flex;
  flex-wrap:wrap;
  align-items:stretch;
  justify-content:center;
  gap:14px;
  margin:18px auto;
  max-width:860px;
}
.credentials .cred-item{
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding:12px 18px;
  border-radius:16px;
  background:rgba(255,255,255,0.7);
  border:1px solid rgba(0,0,0,0.08);
  text-decoration:none;
  color:#0f172a;
}
.credentials .cred-item img{
  height:40px;
  width:auto;
  display:block;
  border-radius:6px;
}
.credentials .cred-txt{
  display:flex;
  flex-direction:column;
  gap:2px;
  text-align:right;
}
.credentials .cred-label{
  font-size:12px;
  font-weight:800;
  color:#0f172a;
}
.credentials .cred-num{
  font-size:12px;
  font-weight:700;
  color:#475569;
  font-family:monospace; /* أرقام بعرض ثابت — إفادة فونت النظام */
  direction:ltr;
  min-height:14px;
}
.credentials .cred-num b{
  font-weight:800;
  color:#0f172a;
}
.credentials .cred-link{
  cursor:pointer;
  transition:transform .2s, box-shadow .2s, border-color .2s;
}
.credentials .cred-link:hover{
  transform:translateY(-2px);
  border-color:rgba(0,0,0,0.18);
  box-shadow:0 10px 24px -10px rgba(0,0,0,0.25);
}

/* ───────── CERT MODAL ─────────
   عند فتح المودال نضيف .cert-modal-open على body فيخفي بقية الصفحة
   (visibility:hidden) ويمنع السكرول. !important ضروري لأن بعض الصفحات
   فيها transforms على ancestors قد تكسر z-stacking. */
body.cert-modal-open > *:not(#certModal):not(script):not(style){
  visibility:hidden !important;
}
body.cert-modal-open{
  overflow:hidden !important;
}
.cert-modal{
  position:fixed !important;
  inset:0;
  z-index:999999;
  display:none;
  align-items:flex-start;
  justify-content:center;
  padding:40px 16px;
  background:rgba(15,23,42,0.5);
  -webkit-backdrop-filter:blur(4px);
  backdrop-filter:blur(4px);
  overflow:auto;
}
.cert-modal.open{
  display:flex;
}
.cert-box{
  background:#fff;
  border-radius:18px;
  max-width:760px;
  width:100%;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.45);
  position:relative;
  margin-top:6vh;
  animation:certUp .3s cubic-bezier(.2,.7,.3,1) both;
  font-family:'Cairo', system-ui, sans-serif;
}
@keyframes certUp{
  from{ opacity:0; transform:translateY(20px); }
  to  { opacity:1; transform:translateY(0); }
}
.cert-close{
  position:absolute;
  top:14px;
  right:16px;
  width:34px;
  height:34px;
  border:none;
  border-radius:50%;
  background:#f1f5f9;
  color:#475569;
  font-size:22px;
  line-height:1;
  cursor:pointer;
  transition:background .2s;
  z-index:2;
}
.cert-close:hover{
  background:#fee2e2;
  color:#dc2626;
}
.cert-head{
  text-align:center;
  padding:22px 20px 16px;
  border-bottom:1px solid rgba(0,0,0,.06);
}
.cert-title{
  font-size:14px;
  font-weight:700;
  color:#475569;
}
.cert-num{
  font-size:22px;
  font-weight:800;
  color:#0f172a;
  direction:ltr;
  margin-top:4px;
  min-height:24px;
  font-family:monospace; /* أرقام بعرض ثابت */
}
.cert-body{
  padding:20px;
}
.cert-body img{
  width:100%;
  height:auto;
  border-radius:10px;
  display:block;
}
.cert-ph{
  border:2px dashed rgba(0,0,0,.15);
  border-radius:12px;
  padding:64px 20px;
  text-align:center;
  color:#94a3b8;
  font-size:14px;
  font-weight:700;
}

/* ════════════════════════════════════════════════════════════════════════
   prefers-reduced-motion — احترام تفضيل المستخدم في تقليل الحركة
   ────────────────────────────────────────────────────────────────────────
   يطبّق على كل صفحة لأن fz-shared.css محمّل في كلهن.
   - يُسرّع كل animation/transition لتصير فورية (لا تُلغى لئلا تنكسر
     الـreveal observers اللي تنتظر animationend / opacity-1).
   - يُلغي blob drift / shimmer / glow / float / pulse — كلها decorative
     ولا تحمل معلومة.
   ════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  /* خَلْفية الـaurora الـblobs تصير ثابتة (لا drift) */
  .blob, .aurora-blob,
  [class*="blob-"]{
    animation: none !important;
  }
}
