/* شهادة إتمام الدورة — ورقة ثنائية اللغة (عربي/إنجليزي)، عرض شاشة + طباعة A4 عرضية.
   الرابط في /verify هو الوثيقة القانونية؛ الطباعة PDF للمشاركة والذكرى.
   العناوين اللاتينية بخط Marcellus (وزن واحد — التسلسل بالحجم والتباعد لا بالسماكة). */

.cert-stage {
  display: grid;
  place-items: center;
  padding: 40px 16px 60px;
  gap: 22px;
}

.cert-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

/* display أعلاه يلغي إخفاء سمة hidden الافتراضي — استعادته صراحةً، وإلا
   ظهرت ورقة شهادة فارغة وأزرار الطباعة أثناء التحميل وفي كل مسارات الفشل. */
.cert-actions[hidden],
.cert-sheet[hidden] {
  display: none;
}

/* نسبة A4 العرضية (297×210) — تتقلص مع الشاشة وتحافظ على الشكل */
.cert-sheet {
  inline-size: min(960px, 96vw);
  aspect-ratio: 297 / 210;
  background: var(--surface);
  color: var(--ink);
  outline: 10px solid var(--paper-deep);
  box-shadow: var(--shadow-soft);
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto;
  text-align: center;
  padding: clamp(30px, 5.2%, 56px) clamp(32px, 5.8%, 64px);
  background-image: var(--girih);
}

/* إطار مزدوج: مسطرة تركوازية خارجية + شعرة زعفرانية داخلية + نجوم الزوايا */
.cert-frame {
  position: absolute;
  inset: 10px;
  border: 3px solid var(--teal-deep);
  pointer-events: none;
}
.cert-frame-inner {
  position: absolute;
  inset: 17px;
  border: 1px solid var(--saffron);
  pointer-events: none;
}
.cert-corner {
  position: absolute;
  inline-size: clamp(12px, 1.8vw, 17px);
  block-size: clamp(12px, 1.8vw, 17px);
  pointer-events: none;
}
.corner-a {
  inset-block-start: 24px;
  inset-inline-start: 24px;
}
.corner-b {
  inset-block-start: 24px;
  inset-inline-end: 24px;
}
.corner-c {
  inset-block-end: 24px;
  inset-inline-start: 24px;
}
.corner-d {
  inset-block-end: 24px;
  inset-inline-end: 24px;
}

.cert-inner {
  display: grid;
  gap: 0.26em;
  justify-items: center;
  align-self: center;
  justify-self: center;
  max-inline-size: 82%;
}

/* الختم الذهبي: النجمة الثمانية داخل حلقتين متحدتي المركز */
.cert-emblem {
  inline-size: clamp(54px, 9vw, 86px);
  block-size: clamp(54px, 9vw, 86px);
  margin-block-end: 0.35em;
}

.cert-kicker {
  font-size: clamp(0.68rem, 1.5vw, 0.95rem);
  letter-spacing: 0.1em;
  color: var(--ink-soft);
  margin: 0;
}
.cert-kicker-en {
  font-family: Marcellus, serif;
  font-size: clamp(0.55rem, 1.15vw, 0.75rem);
  letter-spacing: 0.42em;
  /* التباعد الواسع يترك فراغ الحرف الأخير — عوّضه بإزاحة منطقية */
  margin-inline-start: 0.42em;
  color: var(--saffron);
  margin-block: 0 0.6em;
}

.cert-title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 4.2vw, 2.6rem);
  color: var(--teal-deep);
  margin: 0;
}
.cert-title-en {
  font-family: Marcellus, serif;
  font-size: clamp(0.72rem, 1.7vw, 1.05rem);
  letter-spacing: 0.3em;
  margin-inline-start: 0.3em;
  text-transform: uppercase;
  color: var(--teal);
  margin-block: 0.1em 0.55em;
  display: flex;
  align-items: center;
  gap: 0.9em;
}
.cert-title-en::before,
.cert-title-en::after {
  content: "";
  inline-size: clamp(22px, 4vw, 46px);
  block-size: 1px;
  background: var(--saffron);
}

.cert-line {
  font-size: clamp(0.75rem, 1.8vw, 1rem);
  color: var(--ink-soft);
  margin: 0;
  margin-block-start: 0.45em;
}
.cert-line-en {
  font-size: clamp(0.62rem, 1.4vw, 0.85rem);
  color: var(--ink-faint);
  margin: 0;
}

.cert-name {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 4vw, 2.4rem);
  color: var(--ink);
  border-block-end: 2px solid var(--saffron);
  padding-block-end: 0.15em;
  padding-inline: 0.6em;
  margin: 0;
  margin-block-start: 0.25em;
}

.cert-course {
  font-size: clamp(0.95rem, 2.4vw, 1.35rem);
  font-weight: 600;
  color: var(--teal);
  margin: 0;
  margin-block-start: 0.45em;
}
.cert-course-en {
  font-family: Marcellus, serif;
  font-size: clamp(0.7rem, 1.7vw, 1rem);
  letter-spacing: 0.14em;
  color: var(--teal);
  margin: 0;
}

/* تذييل من ثلاث مناطق: بيانات عربية (بداية) · جهة الإصدار (وسط) · QR (نهاية) */
.cert-footer {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: 14px;
  font-size: clamp(0.58rem, 1.35vw, 0.82rem);
  color: var(--ink-faint);
}
.cert-foot {
  display: grid;
  gap: 3px;
}
.cert-foot-meta {
  justify-items: start;
  text-align: start;
}
.cert-foot-meta b {
  color: var(--ink);
}
.cert-foot-issuer {
  justify-items: center;
  padding-block-end: 4px;
}
.cert-id {
  direction: ltr;
  unicode-bidi: embed;
  font-weight: 700;
}
.cert-qr {
  justify-items: end;
  text-align: end;
}
.cert-qr-box {
  display: block;
}
.cert-qr-box svg {
  display: block;
  inline-size: clamp(56px, 9.5vw, 92px);
  block-size: auto;
}
.cert-qr-caption,
.cert-date-en {
  font-size: clamp(0.52rem, 1.15vw, 0.72rem);
}

.cert-state {
  text-align: center;
  padding: 60px 20px;
}

/* بطاقة نتيجة التحقق في /verify */
.verify-card {
  max-inline-size: 560px;
  margin-inline: auto;
  background: var(--surface);
  border: 2px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-pop);
  padding: var(--card-pad);
  display: grid;
  gap: 10px;
  text-align: center;
}
.verify-card.ok {
  border-color: var(--ok);
}
.verify-card.bad {
  border-color: var(--bad);
}
.verify-badge {
  inline-size: fit-content;
  margin-inline: auto;
  padding: 4px 14px;
  border-radius: 999px;
  font-weight: 700;
  font-size: var(--text-lg);
}
.verify-card.ok .verify-badge {
  background: var(--ok-soft);
  color: var(--ok);
}
.verify-card.bad .verify-badge {
  background: var(--bad-soft);
  color: var(--bad);
}
.verify-en {
  font-family: Marcellus, serif;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}
.verify-badge .verify-en {
  display: block;
  font-size: 0.7em;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: inherit;
}
.verify-form {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-block-start: 14px;
}
.verify-form input {
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-family: var(--font-body);
  font-size: 1rem;
  direction: ltr;
  text-align: center;
  min-inline-size: 220px;
}

/* نموذج الاسم في شاشة الإتمام */
.cert-cta {
  display: grid;
  gap: 12px;
  justify-items: center;
  margin-block: 18px;
}
.cert-name-form input {
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-family: var(--font-body);
  font-size: 1.05rem;
  text-align: center;
  min-inline-size: min(340px, 80vw);
}

.cert-name-lede {
  max-inline-size: 46ch;
  text-align: center;
  margin: 0;
}

/* حقلان جنبًا إلى جنب، ينكسران إلى عمود على الشاشات الضيقة */
.cert-name-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}
.cert-name-fields .field {
  display: grid;
  gap: 6px;
  margin: 0;
}
.cert-name-fields label {
  font-size: 0.9rem;
  color: var(--ink-soft);
  text-align: start;
}
/* الحقلان يتقاسمان السطر، فلا يصلح العرض الأدنى الواسع للحقل المفرد */
.cert-name-fields input {
  min-inline-size: min(220px, 80vw);
}

.cert-name-preview {
  margin: 0;
  font-size: 0.95rem;
  color: var(--ink-soft);
  text-align: center;
}
.cert-name-preview bdi {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--ink);
}

.cert-name-error {
  margin: 0;
  color: var(--bad);
  font-size: 0.92rem;
  text-align: center;
}
/* أي قاعدة display صريحة تُبطل سمة hidden — استعادتها صراحةً (يحرسها
   tests/hidden-attr-guard.test.ts للعناصر المكتوبة في HTML). */
.cert-name-error[hidden] {
  display: none;
}

/* ---------- الطباعة: الورقة فقط، بحجم A4 كامل ----------
   المقاسات بالمليمتر والنقطة — وحدات vw غير موثوقة بين محركات الطباعة */
@media print {
  @page {
    size: A4 landscape;
    margin: 0;
  }
  body * {
    visibility: hidden;
  }
  .cert-sheet,
  .cert-sheet * {
    visibility: visible;
  }
  .cert-sheet {
    position: fixed;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    aspect-ratio: auto;
    outline: none;
    box-shadow: none;
    /* الحشو الجانبي 21mm لا 16mm: نجوم الزوايا السفلية تشغل 11mm→16.5mm من
       الحافة، وعمودا التذييل الطرفيان كانا يبدآن عند 16mm — فتطبع النجمة فوق
       التاريخ ورقم الشهادة. الفجوة الآن 4.5mm بين النجمة وأقرب حرف. */
    padding: 12mm 21mm;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
  .cert-inner {
    line-height: 1.32;
    gap: 0.22em;
  }
  .cert-frame {
    inset: 6mm;
    border-width: 1.1mm;
  }
  .cert-frame-inner {
    inset: 8.5mm;
  }
  .cert-corner {
    inline-size: 5.5mm;
    block-size: 5.5mm;
  }
  .corner-a,
  .corner-b {
    inset-block-start: 11mm;
  }
  .corner-c,
  .corner-d {
    inset-block-end: 11mm;
  }
  .corner-a,
  .corner-c {
    inset-inline-start: 11mm;
  }
  .corner-b,
  .corner-d {
    inset-inline-end: 11mm;
  }
  .cert-emblem {
    inline-size: 20mm;
    block-size: 20mm;
  }
  .cert-kicker {
    font-size: 9pt;
  }
  .cert-kicker-en {
    font-size: 7.5pt;
  }
  .cert-title {
    font-size: 26pt;
  }
  .cert-title-en {
    font-size: 11.5pt;
  }
  .cert-title-en::before,
  .cert-title-en::after {
    inline-size: 12mm;
  }
  .cert-line {
    font-size: 10pt;
  }
  .cert-line-en {
    font-size: 8.5pt;
  }
  .cert-name {
    font-size: 22pt;
  }
  .cert-course {
    font-size: 13.5pt;
  }
  .cert-course-en {
    font-size: 10.5pt;
  }
  .cert-footer {
    font-size: 8pt;
  }
  .cert-qr-box svg {
    inline-size: 26mm;
    block-size: 26mm;
  }
  .cert-qr-caption,
  .cert-date-en {
    font-size: 7pt;
  }
}