/* ============================================================================
   DigiSchool certificate templates — shared by the public /verify page
   (app/Views/main/Verify_view.php) and the admin chooser
   (app/Views/admin/partials/certificates.php).

   Every design is a fixed 960x679 box (.dsCert) scaled with a JS transform.
   Template keys — the ORIGINAL DigiSchool design plus 3 same-family variants:
     original | framed | corners | ribbon
   The three variants share the `.fam` look (gradient bg, faint D watermark,
   navy title, blue name, seal footer) and differ only in the corner framing.
   ========================================================================== */

/* ---- Base box ----------------------------------------------------------- */
.dsCert{position:relative;width:960px;height:679px;transform-origin:top left;box-sizing:border-box;overflow:hidden;background:#fff;color:#123a63;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;}

/* Corner-bracket / frame decorations grouped so they move together. */
.dsCert .cert-deco{position:absolute;inset:0;z-index:1;pointer-events:none;}

/* ============================================================
   TEMPLATE: original  (the existing DigiSchool design)
   ============================================================ */
.dsCert.tpl-original{background:#ffffff;color:#123a63;}
.tpl-original .dsCert-br{position:absolute;pointer-events:none;}
.tpl-original .dsCert-br.tr{top:24px;right:24px;width:75%;height:83%;border-top:4px solid #15599f;border-right:4px solid #15599f;}
.tpl-original .dsCert-br.bl{bottom:24px;left:24px;width:88%;height:73%;border-bottom:4px solid #15599f;border-left:4px solid #15599f;}
.tpl-original .dsCert-dot{position:absolute;width:11px;height:11px;border-radius:50%;background:#1f7fc9;z-index:1;transform:translate(-50%,-50%);}
.tpl-original .dsCert-wm{position:absolute;left:280px;top:123px;width:400px;height:auto;opacity:.1;pointer-events:none;z-index:1;}
/* Network decoration — a single full-size SVG masked so only the top-right and
   bottom-left corners are visible; it fades out toward the centre and the other
   two corners. */
.tpl-original .dsCert-net{position:absolute;inset:0;width:1304px;height:1121px;pointer-events:none;z-index:0;opacity:.7;clip-path:inset(28px 372px 470px 28px);-webkit-clip-path:inset(28px 372px 470px 28px);
    -webkit-mask-image:radial-gradient(78% 72% at 100% 0%,#000 48%,transparent 82%),radial-gradient(52% 83% at 0% 100%,#000 56%,transparent 90%);
    mask-image:radial-gradient(78% 72% at 100% 0%,#000 48%,transparent 82%),radial-gradient(52% 83% at 0% 100%,#000 56%,transparent 90%);}
.tpl-original .dsCert-logo{position:absolute;left:59px;top:23px;z-index:2;}
.tpl-original .dsCert-logo img{height:114px;width:auto;display:block;}
.tpl-original .dsCert-c{position:absolute;left:0;right:0;top:0;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 96px;z-index:2;}
.tpl-original .dsCert-title{margin-top:163px;font-size:69px;font-weight:600;letter-spacing:4px;color:#15599f;line-height:1;}
.tpl-original .dsCert-issued{margin-top:32px;font-size:20px;letter-spacing:1px;color:#000000;text-transform:uppercase;}
.tpl-original .dsCert-name{margin-top:18px;font-size:36px;font-weight:600;color:#1f7fc9;line-height:1.15;letter-spacing:1px;}
.tpl-original .dsCert-nameline{margin-top:10px;width:560px;max-width:80%;height:1px;background:#000000;}
.tpl-original .dsCert-desc{margin-top:3px;font-size:15px;line-height:1.7;color:#000000;max-width:683px;}
.tpl-original .dsCert-desc b{color:#15599f;font-weight:700;}
.tpl-original .dsCert-foot{position:absolute;left:60px;right:60px;bottom:74px;display:flex;align-items:flex-end;justify-content:space-between;gap:24px;z-index:2;}
.tpl-original .dsCert-col{display:flex;flex-direction:column;align-items:center;gap:7px;width:200px;}
.tpl-original .dsCert-fval{font-size:15px;font-weight:600;color:#000000;}
.tpl-original .dsCert-fspace{height:16px;}
.tpl-original .dsCert-line{width:100%;height:1px;background:#000000;}
.tpl-original .dsCert-cap{font-size:10.5px;letter-spacing:1px;color:#000000;text-transform:uppercase;}
.tpl-original .dsCert-seal{width:150px;flex-shrink:0;display:flex;align-items:flex-end;justify-content:center;}
.tpl-original .dsCert-seal img{width:100%;height:auto;display:block;}

/* ============================================================
   FAMILY  — shared look for framed / corners / ribbon variants
   (same DigiSchool identity as the original, centered layout)
   ============================================================ */
.dsCert.fam{background:linear-gradient(135deg,#ffffff 0%,#eef5fb 52%,#e3eef8 100%);color:#123a63;}
.fam .fam-wm{position:absolute;left:280px;top:123px;width:400px;height:auto;opacity:.1;pointer-events:none;z-index:0;}
.fam .fam-c{position:absolute;left:0;right:0;top:0;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 110px;z-index:2;}
.fam .fam-logo{margin-top:64px;height:90px;width:auto;}
.fam .fam-title{margin-top:22px;font-size:68px;font-weight:600;letter-spacing:4px;color:#15599f;line-height:1;}
.fam .fam-issued{margin-top:24px;font-size:18px;letter-spacing:1px;color:#000000;text-transform:uppercase;}
.fam .fam-name{margin-top:14px;font-size:38px;font-weight:600;color:#1f7fc9;letter-spacing:1px;line-height:1.15;}
.fam .fam-nameline{margin-top:10px;width:520px;max-width:78%;height:1px;background:#000000;}
.fam .fam-desc{margin-top:14px;font-size:15px;line-height:1.7;color:#000000;max-width:660px;}
.fam .fam-desc b{color:#123a63;font-weight:700;}
.fam .fam-foot{position:absolute;left:96px;right:96px;bottom:74px;display:flex;align-items:flex-end;justify-content:space-between;gap:24px;z-index:2;}
.fam .fam-col{display:flex;flex-direction:column;align-items:center;gap:7px;width:200px;}
.fam .fam-fval{font-size:15px;font-weight:600;color:#000000;}
.fam .fam-fspace{height:16px;}
.fam .fam-line{width:100%;height:1px;background:#000000;}
.fam .fam-cap{font-size:10.5px;letter-spacing:1px;color:#000000;text-transform:uppercase;}
.fam .fam-seal{width:150px;flex-shrink:0;display:flex;align-items:flex-end;justify-content:center;}
.fam .fam-seal img{width:100%;height:auto;display:block;}

/* ---- variant: framed  (full navy double frame) ---- */
.tpl-framed .fr-frame{position:absolute;inset:28px;border:3px solid #15599f;z-index:1;}
.tpl-framed .fr-frame::after{content:"";position:absolute;inset:8px;border:1px solid #1f7fc9;opacity:.55;}
.tpl-framed .fr-dot{position:absolute;width:12px;height:12px;border-radius:50%;background:#1f7fc9;z-index:2;transform:translate(-50%,-50%);}

/* ---- variant: corners  (four L-shaped corner brackets) ---- */
.tpl-corners .co-br{position:absolute;width:86px;height:86px;z-index:1;}
.tpl-corners .co-br.tl{top:30px;left:30px;border-top:4px solid #15599f;border-left:4px solid #15599f;}
.tpl-corners .co-br.tr{top:30px;right:30px;border-top:4px solid #15599f;border-right:4px solid #15599f;}
.tpl-corners .co-br.bl{bottom:30px;left:30px;border-bottom:4px solid #15599f;border-left:4px solid #15599f;}
.tpl-corners .co-br.br{bottom:30px;right:30px;border-bottom:4px solid #15599f;border-right:4px solid #15599f;}
.tpl-corners .co-dot{position:absolute;width:11px;height:11px;border-radius:50%;background:#1f7fc9;z-index:2;transform:translate(-50%,-50%);}

/* ---- variant: ribbon  (two diagonal brackets, like the main) ---- */
.tpl-ribbon .rb-br{position:absolute;pointer-events:none;z-index:1;}
.tpl-ribbon .rb-br.tr{top:24px;right:24px;width:75%;height:83%;border-top:4px solid #15599f;border-right:4px solid #15599f;}
.tpl-ribbon .rb-br.bl{bottom:24px;left:24px;width:88%;height:73%;border-bottom:4px solid #15599f;border-left:4px solid #15599f;}
.tpl-ribbon .rb-dot{position:absolute;width:11px;height:11px;border-radius:50%;background:#1f7fc9;z-index:2;transform:translate(-50%,-50%);}

/* ============================================================================
   MINIMAL FAMILY — three clean, structurally-different designs
     minimal | sidebar | banner
   Reuse the fam-* element classes (title / name / wm / footer) so the admin
   editor overrides keep applying, but each has its own distinct layout.
   ========================================================================== */

/* ---- shared footer + name pieces for all three minimal templates ---- */
.tpl-minimal .fam-col,.tpl-sidebar .fam-col,.tpl-banner .fam-col{display:flex;flex-direction:column;align-items:center;gap:7px;width:200px;}
.tpl-minimal .fam-fval,.tpl-sidebar .fam-fval,.tpl-banner .fam-fval{font-size:15px;font-weight:600;color:#101828;}
.tpl-minimal .fam-fspace,.tpl-sidebar .fam-fspace,.tpl-banner .fam-fspace{height:16px;}
.tpl-minimal .fam-line,.tpl-sidebar .fam-line,.tpl-banner .fam-line{width:100%;height:1px;background:#101828;}
.tpl-minimal .fam-cap,.tpl-sidebar .fam-cap,.tpl-banner .fam-cap{font-size:10.5px;letter-spacing:1px;color:#667085;text-transform:uppercase;}
.tpl-minimal .fam-seal,.tpl-sidebar .fam-seal,.tpl-banner .fam-seal{width:128px;flex-shrink:0;display:flex;align-items:flex-end;justify-content:center;}
.tpl-minimal .fam-seal img,.tpl-sidebar .fam-seal img,.tpl-banner .fam-seal img{width:100%;height:auto;display:block;}
.tpl-minimal .fam-desc b,.tpl-sidebar .fam-desc b,.tpl-banner .fam-desc b{color:#101828;font-weight:600;}

/* ============================================================
   TEMPLATE: minimal  (centred, airy, single hairline frame)
   ============================================================ */
.dsCert.tpl-minimal{background:#ffffff;color:#101828;}
.tpl-minimal .mn-frame{position:absolute;inset:26px;border:1px solid #e4e7ec;}
.tpl-minimal .fam-wm{position:absolute;left:280px;top:160px;width:400px;height:auto;opacity:.05;pointer-events:none;z-index:0;}
.tpl-minimal .mn-c{position:absolute;left:0;right:0;top:0;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 120px;z-index:2;}
.tpl-minimal .fam-logo{margin-top:80px;height:64px;width:auto;}
.tpl-minimal .mn-accent{margin-top:34px;width:46px;height:3px;background:#2563eb;border-radius:2px;}
.tpl-minimal .fam-title{margin-top:22px;font-size:52px;font-weight:400;letter-spacing:8px;color:#101828;line-height:1;text-transform:uppercase;}
.tpl-minimal .fam-issued{margin-top:26px;font-size:15px;letter-spacing:3px;color:#667085;text-transform:uppercase;}
.tpl-minimal .fam-name{margin-top:16px;font-size:40px;font-weight:600;color:#101828;letter-spacing:.5px;line-height:1.15;}
.tpl-minimal .fam-nameline{margin-top:14px;width:360px;max-width:70%;height:1px;background:#d0d5dd;}
.tpl-minimal .fam-desc{margin-top:18px;font-size:14.5px;line-height:1.7;color:#667085;max-width:600px;}
.tpl-minimal .fam-foot{position:absolute;left:120px;right:120px;bottom:70px;display:flex;align-items:flex-end;justify-content:space-between;gap:24px;z-index:2;}

/* ============================================================
   TEMPLATE: sidebar  (asymmetric, left accent band, left-aligned)
   ============================================================ */
.dsCert.tpl-sidebar{background:#ffffff;color:#101828;}
.tpl-sidebar .sb-band{position:absolute;left:0;top:0;bottom:0;width:26px;background:#101828;}
.tpl-sidebar .fam-wm{position:absolute;right:56px;top:150px;width:360px;height:auto;opacity:.05;pointer-events:none;z-index:0;}
.tpl-sidebar .sb-c{position:absolute;left:98px;right:80px;top:0;display:flex;flex-direction:column;align-items:flex-start;text-align:left;z-index:2;}
.tpl-sidebar .fam-logo{margin-top:76px;height:58px;width:auto;}
.tpl-sidebar .fam-title{margin-top:40px;font-size:64px;font-weight:300;letter-spacing:2px;color:#101828;line-height:1;}
.tpl-sidebar .fam-issued{margin-top:30px;font-size:14px;letter-spacing:3px;color:#667085;text-transform:uppercase;}
.tpl-sidebar .fam-name{margin-top:14px;font-size:44px;font-weight:600;color:#2563eb;letter-spacing:.5px;line-height:1.1;}
.tpl-sidebar .fam-nameline{margin-top:16px;width:300px;height:2px;background:#101828;}
.tpl-sidebar .fam-desc{margin-top:20px;font-size:15px;line-height:1.7;color:#475467;max-width:640px;}
.tpl-sidebar .fam-foot{position:absolute;left:98px;right:80px;bottom:70px;display:flex;align-items:flex-end;justify-content:flex-start;gap:56px;z-index:2;}
.tpl-sidebar .fam-col{align-items:flex-start;}
.tpl-sidebar .fam-cap{text-align:left;}
.tpl-sidebar .fam-seal{margin-left:auto;}

/* ============================================================
   TEMPLATE: banner  (dark top header band, centred body)
   ============================================================ */
.dsCert.tpl-banner{background:#ffffff;color:#101828;}
.tpl-banner .bn-band{position:absolute;left:0;right:0;top:0;height:188px;background:linear-gradient(135deg,#0b2545 0%,#13315c 100%);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:2;}
.tpl-banner .bn-band .fam-logo{height:50px;width:auto;filter:brightness(0) invert(1);}
.tpl-banner .bn-band .fam-title{margin-top:14px;font-size:44px;font-weight:400;letter-spacing:6px;color:#ffffff;line-height:1;text-transform:uppercase;}
.tpl-banner .fam-wm{position:absolute;left:290px;top:250px;width:380px;height:auto;opacity:.05;pointer-events:none;z-index:0;}
.tpl-banner .bn-c{position:absolute;left:0;right:0;top:188px;display:flex;flex-direction:column;align-items:center;text-align:center;padding:54px 120px 0;z-index:2;}
.tpl-banner .fam-issued{font-size:15px;letter-spacing:3px;color:#667085;text-transform:uppercase;}
.tpl-banner .fam-name{margin-top:16px;font-size:42px;font-weight:600;color:#0b2545;letter-spacing:.5px;line-height:1.1;}
.tpl-banner .fam-nameline{margin-top:14px;width:360px;max-width:70%;height:1px;background:#d0d5dd;}
.tpl-banner .fam-desc{margin-top:18px;font-size:14.5px;line-height:1.7;color:#667085;max-width:600px;}
.tpl-banner .fam-foot{position:absolute;left:120px;right:120px;bottom:64px;display:flex;align-items:flex-end;justify-content:space-between;gap:24px;z-index:2;}

/* Instructor signature image + "Դասավանդող՝ Name" line on the signature column.
   The image sits in the space above the signature line (replacing the empty
   spacer); the name goes under the uppercase caption. Shown only when a teacher
   is selected in the certificate editor. */
.dsCert .cert-teacher-sig{display:block;max-height:30px;max-width:150px;width:auto;object-fit:contain;margin:0 auto 2px;transform-origin:center bottom;}
/* Name: plain — normal case, NO colour override (inherits the certificate's
   text colour), just "Դասավանդող՝ Name" under the signature line. */
.dsCert .cert-teacher-name{margin-top:5px;font-size:12px;text-align:center;line-height:1.3;}
.tpl-sidebar .cert-teacher-sig{margin-left:0;margin-right:auto;}
.tpl-sidebar .cert-teacher-name{text-align:left;}

/* ---- Standalone signature section --------------------------------------
   A second signature block, identical to the footer's own signature column: it
   reuses that column's markup and classes (-col / -fspace / -line / -cap), so
   the space, rule, caption size, letter-spacing and colour all come from the
   template's existing rules and stay in step with them automatically.

   The only thing added here is positioning. Keeping it OUTSIDE .dsCert-foot
   means it is a free absolutely-positioned block, so dragging it never reflows
   the footer's date/signature/seal row. Movable + resizable via
   data-move="signline" like every other element. */
.dsCert .cert-signline{position:absolute;left:380px;top:570px;z-index:3;transform-origin:center center;}
/* Slightly narrower than the footer columns' 200px so this line reads as its own
   thing rather than a duplicate of them. The rule inside is width:100%, so this
   is the only place the length needs changing. */
.dsCert .cert-signline .dsCert-col,
.dsCert .cert-signline .fam-col{width:145px;}