/* ════════════════════════════════════════════════════════════════
   تنسيق الشهادات — ثمانية نماذج تتقاسم متنًا واحدًا

   ⚠ كل المقاسات هنا بالمليمتر — الصفحة A4 أفقية 297×210.
     البكسل يولّد ورقة بيضاء زائدة (فرق 0.13mm عند 1123px).

   الألوان لا تُكتب مباشرة داخل النماذج: كلها متغيّرات (--acc,
   --acc2, --sand, --soft) تضبطها الحاوية، فتتبدّل اللوحة كلها
   من مكان واحد.
   ════════════════════════════════════════════════════════════════ */

:root {
  --acc:  #0f7a6b;
  --acc2: #14b8a6;
  --sand: #b8a488;
  --soft: #e6f5f2;
}

.cert-page {
  font-family: 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
  color: #1b2733;
  background: #fff;
  direction: rtl;
}

/* نقشة خفيفة جدًا تمنع البياض الميت — كما في النماذج الرسمية */
.cert-page::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background-image:
    radial-gradient(circle at 50% 50%, rgba(0, 0, 0, .028) .9px, transparent 1.1px);
  background-size: 9mm 9mm;
}

.c-deco { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }

/* ⚠ المنطقة الآمنة للنص.
   هوامش كل نموذج **أكبر من امتداد زخرفته**، فيستحيل أن يقع نص أو
   شعار فوق لون. هذا ما يمنع بهتان الشعار واصطدام العنوان بالزخرفة. */
.c-body {
  position: relative; z-index: 2;
  height: 100%;
  /* نقطة ارتكاز التصغير التلقائي عند طول المحتوى — انظر fitPages() */
  transform-origin: top center;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
}

/* اللوح الأبيض من 9مم إلى 201مم */
.c-classic .c-body { padding: 15mm 30mm 16mm; }

/* الموجات: أعمق نقطة في الموجة العليا 20مم وفي السفلى 190مم.
   ⚠ كان الهامش 29/28مم فضاق صندوق النص عن أطول محتوى فتسلّل
     السطر الأخير إلى الموجة السفلية. */
.c-waves .c-body   { padding: 24mm 30mm 23mm; }

/* اللوح من 11مم إلى 199مم */
.c-organic .c-body { padding: 17mm 32mm 18mm; }

/* الإطار المزدوج من 7مم إلى 203مم، والزخارف الركنية تنتهي عند 28.6مم
   ⚠ الهامش الجانبي **أوسع من الزخرفة الركنية** لا من الإطار وحده:
     الشعار والتوقيع يسكنان أركان صندوق النص، فلو ضاق الهامش وقعا
     فوق الزخرفة — وهو خطأ ظهر في المعاينة الأولى. */
.c-royal .c-body   { padding: 17mm 32mm 17mm; }

/* الإطار المنقوش من 8مم، واللوح الأبيض من 14مم */
.c-frame .c-body   { padding: 18mm 30mm 16mm; }

/* المناسبات: الشريط المزخرف حتى 12.5مم، والخط المتقطّع عند 16.5مم،
   والزخارف الركنية تمتد حتى 40.5مم — فالهوامش الجانبية أوسع لتجاوزها */
.c-ornate .c-body  { padding: 21mm 42mm 20mm; }

/* الشارة: إطار رفيع من 7مم، والرشّات في الهامش الجانبي حتى 22مم */
.c-banner .c-body  { padding: 15mm 26mm 14mm; justify-content: space-between; }

/* ثلاث كتل تتوزّع على ارتفاع الورقة: ترويسة · متن · تذييل */
.c-banner .c-mid,
.c-banner .c-foot {
  width: 100%; display: flex; flex-direction: column; align-items: center;
}
.c-banner .c-foot .c-signs { margin-top: 0; }

/* لا نقشة نقاط في هذا النموذج — أصله ورقة بيضاء نظيفة */
.c-banner::before { display: none; }

/* العصري: الشريط الجانبي يحتلّ 57مم من اليمين */
.c-modern .c-body {
  padding: 18mm 20mm 18mm 0;
  padding-inline-start: 67mm; padding-inline-end: 18mm;
  align-items: flex-start; text-align: start;
}

/* ─── الشعارات ─────────────────────────────────────────────── */
.c-logos {
  width: 100%; display: flex; align-items: center;
  justify-content: space-between; margin-bottom: 1mm;
}
.c-logos-stack {
  width: auto; flex-direction: column; gap: 4mm;
  align-items: center; justify-content: flex-start;
}

/* ⚠ شعار الوزارة الأصلي فيه فراغ شفاف أعلى وأسفل فيبدو أصغر من
   شعار الرؤية رغم تساوي الارتفاع. الحل كان قصّ الفراغ من الصورة
   نفسها (`moe-logo-trim.png`) لا تكبير الصندوق. */
.c-logo-moe    { height: 24mm; width: auto; }
.c-logo-vision { height: 24mm; width: auto; }

.c-logos-stack .c-logo-moe,
.c-logos-stack .c-logo-vision { height: 21mm; }

/* صفّ الترويسة العلوي (الملكي): بيانات الإدارة يمينًا والشعاران يسارًا */
.c-head-row {
  width: 100%; display: flex; align-items: center;
  justify-content: space-between; gap: 6mm; margin-bottom: 1mm;
}
.c-head-row .c-logos { width: auto; gap: 5mm; }

/* ─── العنوان ──────────────────────────────────────────────── */
.c-title {
  font-size: 12mm; font-weight: 900; line-height: 1.15;
  color: var(--acc);
  margin: 2mm 0 5mm;
  letter-spacing: -.3mm;
}
.c-royal  .c-title,
.c-frame  .c-title { font-size: 11mm; margin: 1mm 0 4mm; }
.c-ornate .c-title { font-size: 11mm; margin: 1mm 0 3mm; }
.c-modern .c-title { font-size: 13mm; margin: 0 0 5mm; }

/* الفاصل المزخرف تحت العنوان (نموذج المناسبات) */
.c-rule { width: 78mm; height: 5.5mm; margin: -2mm 0 4mm; flex: none; }

/* ─── صفّ العنوان بين الشعارين (نموذج الشارة) ──────────────── */
.c-head-3 {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 6mm; margin-bottom: 4mm;
}
.c-head-3 .c-title { flex: 1 1 auto; margin: 0; font-size: 11.5mm; }

/* ─── شريط الاسم المصمت (نموذج الشارة) ─────────────────────── */
/* الاسم داخل شريط ملوّن بدل الخط السفلي — هو ما يميّز هذا النموذج */
.c-banner .c-to { display: none; }
.c-banner .c-name {
  background: linear-gradient(90deg, var(--acc), var(--acc2));
  color: #fff; border-bottom: 0; border-radius: 2.5mm;
  padding: 3.4mm 16mm; margin-bottom: 6mm;
  font-size: 7.5mm; line-height: 1.3; min-width: 120mm;
}
/* التوقيع هنا: الاسم فوق والمسمّى تحته — معكوس عن بقية النماذج */
.c-banner .c-signs { padding-top: 6mm; border-top: .3mm solid rgba(0, 0, 0, .1); }
.c-banner .c-sign { flex-direction: column-reverse; align-items: center; text-align: center; }
.c-banner .c-sign-name { color: var(--acc); }
.c-banner .c-sign-role { color: #1b2733; font-weight: 700; }

/* ─── النصوص ───────────────────────────────────────────────── */
.c-lead   { font-size: 4.6mm; font-weight: 700; margin: 0 0 4mm; color: #2b3a48; }

/* سطر المناسبة وشعارها — اختياريان، أعلى جملة التقديم */
.c-occasion { font-size: 4.3mm; font-weight: 700; margin: 0 0 2mm; color: #2b3a48; }
.c-slogan {
  font-size: 4.5mm; font-weight: 800; margin: 0 0 4mm; line-height: 1.6;
  color: var(--acc); max-width: 200mm;
}
.c-to     { font-size: 4.4mm; font-weight: 700; margin: 0 0 1mm; color: #5a6b7b; }

.c-name {
  font-size: 9mm; font-weight: 900; margin: 0 0 5mm;
  color: var(--acc);
  padding-bottom: 2mm;
  border-bottom: .5mm solid var(--sand);
  min-width: 110mm;
}
.c-modern .c-name { min-width: 150mm; text-align: center; }

.c-reason { font-size: 4.3mm; font-weight: 600; margin: 0 0 2mm; line-height: 1.8; max-width: 215mm; }
.c-family { font-weight: 500; color: #3c4c5c; }
.c-dua    { font-size: 4.3mm; font-weight: 700; margin: 3mm 0 0; color: var(--acc); }

/* ─── الوسام ───────────────────────────────────────────────── */
/* ⚠ صغير عمدًا: النموذجان اللذان يحملانه («الملكي» و«المؤطَّر»)
   قد يحملان أيضًا سطر المناسبة وشعارها وعبارة الأسرة معًا — وهي
   أطول حالة ممكنة. وسام أكبر يدفع التوقيعين خارج الورقة. */
.c-seal { width: 15mm; height: 15mm; margin: 2mm 0 0; flex: none; }
.c-modern .c-seal { align-self: flex-start; }

/* ─── التوقيعات ────────────────────────────────────────────── */
.c-signs {
  margin-top: auto; padding-top: 5mm;
  width: 100%; display: flex; justify-content: space-between; align-items: flex-end;
  gap: 8mm;
}
.c-signs-one { justify-content: center; }
.c-sign { display: flex; flex-direction: column; gap: 1.5mm; min-width: 50mm; }
.c-sign-role { font-size: 4mm; font-weight: 800; color: var(--acc); }
/* الاسم أكبر من مسمّى الوظيفة — الاسم هو التوقيع */
.c-sign-name { font-size: 5mm; font-weight: 800; color: #1b2733; min-height: 6mm; }

/* ─── ترويسة الإدارة ───────────────────────────────────────── */
.c-admin {
  margin-top: 4mm; display: flex; gap: 3mm; flex-wrap: wrap; justify-content: center;
  font-size: 2.9mm; font-weight: 600; color: #7d8b99;
}
.c-admin span + span::before { content: '·'; margin-left: 3mm; color: var(--sand); }

/* «المؤطَّر» يجمع الوسام والترويسة السفلية معًا — فيُقلَّص الفاصل
   بينهما ليتّسع لأطول حالة نصّ ممكنة داخل اللوح الأبيض */
.c-frame .c-admin { margin-top: 2mm; }

.c-admin-stack {
  margin-top: 0; flex-direction: column; gap: 1.2mm; align-items: flex-start;
  text-align: start; font-size: 3.4mm; color: #4a5a69;
}
.c-admin-stack span + span::before { content: none; }

/* ─── الشريط الجانبي (العصري) ──────────────────────────────── */
/* ⚠ في RTL يكون inline-start هو **اليمين**. الشريط الملوّن مرسوم
   في الـSVG على يمين الورقة (x=240)، فيجب أن يُثبَّت هنا بـ
   inset-inline-start: 0 لا end — وإلا وقع محتواه في الجهة المقابلة. */
.c-band {
  position: absolute; inset-block: 0; inset-inline-start: 0;
  width: 57mm; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8mm; padding: 14mm 6mm;
}
/* ⚠ الشعاران داخل شريط ملوّن: نسخة الوزارة البيضاء غير متاحة هنا،
   فنضع لوحًا أبيض شفافًا خلفهما ليظهرا بوضوح على أي لون. */
.c-band .c-logos-stack {
  background: #fff; border-radius: 3mm; padding: 4mm 5mm;
  box-shadow: 0 0 0 .4mm rgba(255, 255, 255, .5);
}
.c-band .c-admin-stack {
  color: #fff; font-size: 3.5mm; font-weight: 700; align-items: center; text-align: center;
  line-height: 1.5;
}

/* ─── المعاينة على الشاشة ──────────────────────────────────── */
@media screen {
  /* مسرح المعاينة: يُصغّر الشهادة لتناسب عرض الحاوية.
     ⚠ zoom على الحاوية لا transform — فلا يفسد قياس الطباعة بالمليمتر. */
  .cert-stage { width: 100%; display: flex; flex-direction: column; align-items: center; }
  .cert-stage .cert-page { zoom: var(--cz, 1); }

  /* المصغّرة في شاشة اختيار النموذج */
  .cert-thumb {
    position: relative; width: 100%; aspect-ratio: 297 / 210;
    overflow: hidden; border-radius: var(--r-md); background: #fff;
  }
  .cert-thumb .cert-page {
    position: absolute; top: 0; right: 0;
    transform: scale(var(--tz, .2)); transform-origin: top right;
    margin: 0; box-shadow: none; border-radius: 0;
  }
}

@media print {
  .cert-stage { display: block; }
  .cert-stage .cert-page { zoom: 1; }
}