/* ═══════════════════════════════════════════════════════════════════════════
   صفحة الشهادة — /certificate/{hash}/  (inc/certificates.php · views/certificate.twig)

   ١) الصفحة نفسها داكنة زي باقي الموقع (توكنز --ls-*).
   ٢) الشهادة (.ls-cert) فاتحة، منقولة من تصميم أحمد (1430×1100). كل المقاسات بالـcqw = نسبة من
      عرض الشهادة (‏1cqw = 14.3px على مقاس التصميم)، فالشهادة بتتصغّر كوحدة واحدة على الموبايل وفي
      الطباعة. ألوانها ألوان طباعة مش ألوان الموقع، فمتعرّفة هنا كمتغيرات --lscert-*.
   ٣) الطباعة (= «تحميل PDF»): الشهادة لوحدها على A4 عرضي.
   ═══════════════════════════════════════════════════════════════════════════ */

.lscert-body { background: var(--ls-bg, #0a0f1a); }

.lscert {
    --lscert-ink: #111318;
    --lscert-ink-2: #2b2f3a;
    --lscert-blue: #2c49d8;
    --lscert-paper: #f4f5fb;
    --lscert-ribbon: #e3e5f7;
    --lscert-slate: #45507a;
    --lscert-dash: #cfd3e0;
    --lscert-latin: "Outfit", "IBM Plex Sans Arabic", system-ui, sans-serif;
    --lscert-arabic: "IBM Plex Sans Arabic", "Outfit", system-ui, sans-serif;

    max-width: 1120px;
    margin: 0 auto;
    padding: 0 var(--ls-space-5, 20px) var(--ls-space-16, 64px);
    font-family: var(--ls-font, "IBM Plex Sans Arabic", sans-serif);
    color: var(--ls-text, #ffffff);
}

/* main واخد 100px تحت الهيدر الثابت (global/styles.css) */
.lscert-hero { text-align: center; padding-bottom: var(--ls-space-8, 32px); }
.lscert-hero h1 {
    margin: 0 0 var(--ls-space-2, 8px);
    font-size: clamp(24px, 4.4vw, var(--ls-text-3xl, 36px));
    font-weight: var(--ls-weight-bold, 700);
    line-height: var(--ls-leading-tight, 1.25);
    color: var(--ls-text, #ffffff);
}
.lscert-hero p { margin: 0; font-size: var(--ls-text-lg, 18px); color: var(--ls-text-muted, #999eb2); }

/* ─── الشهادة ─────────────────────────────────────────────────────────────── */
.ls-cert {
    container-type: inline-size;
    position: relative;
    width: 100%;
    aspect-ratio: 1430 / 1100;
    overflow: hidden;
    background: #fff;
    border-radius: var(--ls-radius, 10px);
    box-shadow: var(--ls-shadow-lg, 0 12px 32px rgba(0, 0, 0, 0.36));
    color: var(--lscert-ink);
    font-family: var(--lscert-latin);
    direction: ltr;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}
.ls-cert p { margin: 0; }
/* الموقع بيفرض IBM Plex Arabic على كل عنصر: * { font-family: … !important } (style.css و global/styles.css).
   الخصوصية هنا (0,1,0) و(0,2,0) بـ!important أعلى من * و p/span/div، فخطوط الشهادة بتكسب. */
.ls-cert,
.ls-cert * { font-family: var(--lscert-latin) !important; }
.ls-cert [lang="ar"],
.ls-cert [lang="ar"] * { font-family: var(--lscert-arabic) !important; }
.ls-cert .ls-cert__signature { font-family: "Great Vibes", cursive !important; }
.ls-cert img { display: block; max-width: none; }

.ls-cert__paper {
    position: absolute;
    inset: 2.1cqw 2.45cqw 1.6cqw;
    background-color: var(--lscert-paper);
    background-image: radial-gradient(rgba(44, 73, 216, 0.035) 1px, transparent 1px);
    background-size: 1.1cqw 1.1cqw;
}

/* الشريط على الشمال (بوزه لتحت) */
.ls-cert__ribbon {
    position: absolute;
    left: 6.43cqw;
    top: 0;
    width: 18.6cqw;
    height: 42cqw;
    background: var(--lscert-ribbon);
    clip-path: polygon(0 0, 100% 0, 100% 86.7%, 50% 100%, 0 86.7%);
}
.ls-cert__verified {
    position: absolute;
    top: 10.2cqw;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 1.4cqw;
    font-weight: 500;
    letter-spacing: 0.14em;
    line-height: 1.6;
    color: var(--lscert-slate);
}
.ls-cert__ribbon-logo {
    position: absolute;
    top: 17.6cqw;
    left: 50%;
    width: 15.6cqw;
    height: 15.6cqw;
    transform: translateX(-50%);
}

/* اللوجو فوق في النص */
.ls-cert__brand {
    position: absolute;
    left: 34.3cqw;
    top: 8.9cqw;
    width: 25.9cqw;
    height: 6.2cqw;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.1cqw;
    background: #fff;
    border-radius: 999px;
}
.ls-cert__brand img { width: 4.6cqw; height: 4.6cqw; }
.ls-cert__brand span {
    font-family: var(--lscert-arabic);
    font-size: 2.75cqw;
    font-weight: 500;
    line-height: 1;
    color: var(--lscert-blue);
}

/* الـQR فوق على اليمين */
.ls-cert__qr {
    position: absolute;
    left: 82.3cqw;
    top: 3.2cqw;
    width: 14.4cqw;
    height: 14.4cqw;
    padding: 0.9cqw;
    background: #fff;
}
.ls-cert__qr-code,
.ls-cert__qr-code svg { display: block; width: 100%; height: 100%; }
.ls-cert__qr-logo {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 3.4cqw;
    height: 3.4cqw;
    padding: 0.25cqw;
    background: #fff;
    border-radius: 0.5cqw;
    transform: translate(-50%, -50%);
}

/* الكلام في النص — عمود من 30cqw لـ93cqw، وكل سطر مكانه ثابت زي التصميم */
.ls-cert__congrats,
.ls-cert__course-ar,
.ls-cert__name,
.ls-cert__req,
.ls-cert__label,
.ls-cert__course-en {
    position: absolute;
    left: 30cqw;
    right: 7cqw;
    text-align: center;
    transform: translateY(-50%);
    white-space: nowrap;
}
.ls-cert__congrats { top: 25.2cqw; font-size: 1.85cqw; font-weight: 500; letter-spacing: 0.07em; color: var(--lscert-ink-2); }
.ls-cert__course-ar { top: 32.2cqw; font-family: var(--lscert-arabic); font-size: 3.1cqw; font-weight: 700; line-height: 1.3; }
.ls-cert__dash {
    position: absolute;
    left: 34.3cqw;
    right: 12.4cqw;
    top: 37.2cqw;
    height: 0.3cqw;
    background: repeating-linear-gradient(90deg, var(--lscert-dash) 0 1.9cqw, transparent 1.9cqw 2.9cqw);
    border-radius: 0.2cqw;
}
.ls-cert__name { top: 44.8cqw; font-size: 4.5cqw; font-weight: 500; line-height: 1.25; letter-spacing: -0.005em; }
/* الاسم العربي بخط IBM Plex Arabic (الـlang بيتحدد في PHP من حروف الاسم؛ الشهادة نفسها lang="en") */
.ls-cert__name:lang(ar) { font-family: var(--lscert-arabic); font-weight: 600; }
.ls-cert__req { top: 52.3cqw; font-size: 1.55cqw; font-weight: 400; color: var(--lscert-ink-2); }
.ls-cert__label { top: 57.8cqw; font-size: 1.4cqw; font-weight: 400; color: var(--lscert-ink-2); }
.ls-cert__course-en { top: 61cqw; font-size: 3.4cqw; font-weight: 500; color: var(--lscert-blue); line-height: 1.25; }

/* تحت على الشمال: التاريخ والمدة */
.ls-cert__meta {
    position: absolute;
    left: 33.7cqw;
    top: 65.6cqw;
    font-size: 1.55cqw;
    line-height: 3.35cqw;
    color: var(--lscert-ink-2);
}
.ls-cert__meta b { font-weight: 500; color: var(--lscert-ink); }
.ls-cert__gap { display: inline-block; width: 1.9cqw; }

/* تحت على اليمين: الإمضاء */
.ls-cert__sign {
    position: absolute;
    left: 73cqw;
    width: 18cqw;
    top: 63.3cqw;
    text-align: center;
}
.ls-cert__signature {
    font-family: "Great Vibes", cursive;
    font-size: 3.1cqw;
    line-height: 1.1;
    color: var(--lscert-ink);
}
.ls-cert__role { margin-top: 0.4cqw !important; font-size: 1.25cqw; color: var(--lscert-ink-2); }

/* ─── الأزرار والتحقق ─────────────────────────────────────────────────────── */
.lscert-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--ls-space-3, 12px);
    margin-top: var(--ls-space-8, 32px);
}
.lscert-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ls-space-2, 8px);
    min-height: 48px;
    padding: 12px 24px;
    border: 1px solid transparent;
    border-radius: var(--ls-radius-md, 16px);
    font-family: inherit;
    font-size: var(--ls-text-base, 16px);
    font-weight: var(--ls-weight-semibold, 600);
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.15s ease, filter 0.15s ease, border-color 0.15s ease;
}
.lscert-btn:hover { transform: translateY(-1px); }
.lscert-btn--primary { background: var(--ls-blue, #4077f3); color: var(--ls-text, #ffffff) !important; box-shadow: var(--ls-shadow-blue, 0 8px 28px rgba(64, 119, 243, 0.22)); }
.lscert-btn--primary:hover { background: var(--ls-blue-hover, #5a8eff); }
.lscert-btn--linkedin { background: var(--ls-surface-2, #1b2133); border-color: var(--ls-border-strong, rgba(255, 255, 255, 0.14)); color: var(--ls-text, #ffffff) !important; }
.lscert-btn--linkedin svg { color: #0a66c2; }
.lscert-btn--linkedin:hover { border-color: #0a66c2; }
.lscert-btn--ghost { background: transparent; border-color: var(--ls-border-strong, rgba(255, 255, 255, 0.14)); color: var(--ls-text, #ffffff); }
.lscert-btn--ghost:hover { border-color: var(--ls-blue, #4077f3); }
.lscert-btn.is-done { border-color: var(--ls-success, #18a963); color: var(--ls-success, #18a963); }

.lscert-hint {
    margin: var(--ls-space-3, 12px) 0 0;
    text-align: center;
    font-size: var(--ls-text-sm, 14px);
    color: var(--ls-text-dim, #7a7f96);
}

.lscert-verify,
.lscert-missing {
    max-width: 720px;
    margin: var(--ls-space-10, 40px) auto 0;
    padding: var(--ls-space-6, 24px);
    background: var(--ls-surface, #141924);
    border: 1px solid var(--ls-border, rgba(255, 255, 255, 0.08));
    border-radius: var(--ls-radius-lg, 20px);
    line-height: var(--ls-leading-normal, 1.7);
}
.lscert-verify h2 {
    display: flex;
    align-items: center;
    gap: var(--ls-space-2, 8px);
    margin: 0 0 var(--ls-space-3, 12px);
    font-size: var(--ls-text-xl, 20px);
    font-weight: var(--ls-weight-bold, 700);
    color: var(--ls-success, #18a963);
}
.lscert-verify p { margin: 0; color: var(--ls-text-2, #e2e6f0); }
/* الثيم الأب: b, strong { color: #0F0F0F } — كان اسم الطالب أسود على داكن */
.lscert-verify b { color: var(--ls-text, #ffffff); }
.lscert-verify a { color: var(--ls-blue-hover, #5a8eff); }
.lscert-verify .lscert-id { margin-top: var(--ls-space-3, 12px); font-size: var(--ls-text-sm, 14px); color: var(--ls-text-muted, #999eb2); }
.lscert-verify code {
    padding: 2px 8px;
    background: var(--ls-surface-3, #232d45);
    border-radius: var(--ls-radius-sm, 8px);
    font-family: "JetBrains Mono", ui-monospace, monospace;
    color: var(--ls-text, #ffffff);
}

.lscert-missing { text-align: center; margin-top: 0; }
.lscert-missing h1 { margin: 0 0 var(--ls-space-3, 12px); font-size: var(--ls-text-2xl, 28px); color: var(--ls-text, #ffffff); }
.lscert-missing p { margin: 0 0 var(--ls-space-6, 24px); color: var(--ls-text-muted, #999eb2); }

@media (max-width: 640px) {
    .lscert-btn { flex: 1 1 100%; }
    .ls-cert { border-radius: var(--ls-radius-sm, 8px); }
}

/* ─── صفحة «إزاي تاخد شهادتك؟» (/certificate/ · views/certificate-help.twig) ─── */
.lscert-help { max-width: 760px; }
.lscert-help__first {
    padding: var(--ls-space-6, 24px);
    background: var(--ls-blue-soft, rgba(64, 119, 243, 0.12));
    border: 1px solid rgba(64, 119, 243, 0.35);
    border-radius: var(--ls-radius-lg, 20px);
    line-height: var(--ls-leading-normal, 1.7);
}
.lscert-help__badge {
    display: inline-block;
    margin-bottom: var(--ls-space-2, 8px);
    padding: 2px 10px;
    background: var(--ls-blue, #4077f3);
    border-radius: var(--ls-radius-full, 999px);
    font-size: var(--ls-text-sm, 14px);
    font-weight: var(--ls-weight-semibold, 600);
    color: var(--ls-text, #ffffff);
}
.lscert-help h2 { margin: 0 0 var(--ls-space-2, 8px); font-size: var(--ls-text-xl, 20px); font-weight: var(--ls-weight-bold, 700); color: var(--ls-text, #ffffff); line-height: 1.4; }
.lscert-help p { margin: 0; color: var(--ls-text-2, #e2e6f0); line-height: var(--ls-leading-normal, 1.7); }
.lscert-help b { color: var(--ls-text, #ffffff); }

.lscert-steps { list-style: none; margin: var(--ls-space-8, 32px) 0 0; padding: 0; display: grid; gap: var(--ls-space-10, 40px); }
.lscert-step { display: grid; gap: var(--ls-space-4, 16px); }
.lscert-step__text { position: relative; padding-inline-start: 56px; }
.lscert-step__num {
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    background: var(--ls-warning, #ffbb54);
    border-radius: var(--ls-radius-full, 999px);
    font-weight: var(--ls-weight-bold, 700);
    font-size: var(--ls-text-lg, 18px);
    color: var(--ls-bg, #0a0f1a);
}
.lscert-step__img {
    display: block;
    width: 100%;
    max-width: 380px;
    height: auto;
    margin: 0 auto;
    border: 1px solid var(--ls-border-strong, rgba(255, 255, 255, 0.14));
    border-radius: var(--ls-radius-lg, 20px);
    box-shadow: var(--ls-shadow-lg, 0 12px 32px rgba(0, 0, 0, 0.36));
}
.lscert-help__cta { display: flex; justify-content: center; margin-top: var(--ls-space-10, 40px); }
.lscert-help__more ul { margin: 0; padding-inline-start: 20px; color: var(--ls-text-2, #e2e6f0); line-height: 1.9; }
.lscert-help__more h2,
.lscert-help__faq h2 { color: var(--ls-text, #ffffff); }
.lscert-help__faq details { border-top: 1px solid var(--ls-border, rgba(255, 255, 255, 0.08)); padding: var(--ls-space-3, 12px) 0; }
.lscert-help__faq details:first-of-type { border-top: 0; }
.lscert-help__faq summary { cursor: pointer; font-weight: var(--ls-weight-semibold, 600); color: var(--ls-text, #ffffff); }
.lscert-help__faq details p { margin-top: var(--ls-space-2, 8px); }
.lscert-help a:not(.lscert-btn) { color: var(--ls-blue-hover, #5a8eff); text-decoration: underline; text-underline-offset: 3px; }
.lscert-missing__help { display: block; margin-top: var(--ls-space-4, 16px); color: var(--ls-blue-hover, #5a8eff); }

@media (min-width: 900px) {
    /* الكمبيوتر: الكلام جنب الصورة */
    .lscert-help { max-width: 980px; }
    .lscert-step { grid-template-columns: 1fr 380px; align-items: center; gap: var(--ls-space-10, 40px); }
}

/* ─── الطباعة = «تحميل PDF» ─────────────────────────────────────────────────
   A4 عرضي 297×210. الشهادة نسبتها 1.3 فبتاخد ارتفاع الصفحة كله (210mm) وعرض 273mm في النص. */
@media print {
    @page { size: A4 landscape; margin: 0; }
    html, body, .lscert-body { background: #fff !important; }
    body.lscert-body > *:not(main) { display: none !important; }
    body.lscert-body main { padding: 0 !important; margin: 0 !important; }
    .lscert { max-width: none; padding: 0; }
    .lscert > *:not(.lscert-print) { display: none !important; }
    .ls-cert {
        width: 273mm;
        margin: 0 auto;
        border-radius: 0;
        box-shadow: none;
        break-inside: avoid;
    }
}