/* ════════════════════════════════════════════════════════════════
   الطباعة وحفظ PDF

   ⚠⚠ الدرس الأغلى من المشاريع السابقة:
   صندوق الصفحة يُقاس بالمليمتر لا بالبكسل.
     794px  = 210.08mm  (أعرض من A4 بـ 0.08mm)
     1123px = 297.13mm  (أطول من A4 بـ 0.13mm)
   هذا الكسر الضئيل وحده يجعل المتصفح يعتبر الصفحة لا تتّسع فيولّد
   ورقة بيضاء زائدة بعد كل شهادة.

   الشهادات هنا **أفقية** (landscape).
   ════════════════════════════════════════════════════════════════ */

@page { size: A4 landscape; margin: 0; }

@media print {
  /* لا شيء من الواجهة يُطبع — الشهادة وحدها */
  .no-print, .wz-top, .wz-nav, .toasts, .overlay { display: none !important; }

  /* ⚠ أثناء الطباعة يُخفى كل أبناء body إلا مسرح الطباعة.
     المسرح مُعلَّق على body مباشرةً لا داخل لوح الخطوة — لأنه حين
     كان داخله كانت قاعدة الإخفاء تُخفي أباه فيختفي معه وتخرج
     الورقة بيضاء. */
  body.printing > *:not(#print-stage) { display: none !important; }
  body.printing #print-stage { display: block !important; }

  body {
    background: #fff !important;
    background-image: none !important;
    color: #000;
    margin: 0;
  }

  /* صفحة الشهادة: A4 أفقي بالمليمتر بالضبط */
  .cert-page {
    width: 297mm;
    height: 210mm;
    margin: 0;
    overflow: hidden;
    page-break-after: always;
    break-after: page;
    position: relative;
    display: block;
    box-shadow: none;
    border-radius: 0;
  }
  .cert-page:last-child { page-break-after: auto; break-after: auto; }

  /* الألوان الممتلئة تُطبع كما هي لا كتدرّج رمادي */
  .cert-page, .cert-page * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
}

/* على الشاشة: الشهادة ورقة بيضاء معلّقة فوق الخلفية الداكنة */
@media screen {
  .cert-page {
    width: 297mm;
    height: 210mm;
    background: #fff;
    color: #17222e;
    margin-inline: auto;
    margin-block-end: var(--s5);
    box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .8);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    transform-origin: top center;
  }

  #print-stage { display: none; }
}