/* ═══════════════════════════════════════════════════════════
   NEXORA ACADEMY — CERTIFICATE STYLES
   ═══════════════════════════════════════════════════════════ */

.cert-page-wrap{
  background:#F5F8FC;
  min-height:100vh;
  padding:30px 15px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:20px;
  font-family:'Segoe UI',system-ui,sans-serif;
}

/* Main certificate — landscape A4 */
.certificate{
  width:100%;
  max-width:1100px;
  aspect-ratio:1.414 / 1;      /* A4 landscape */
  background:#FFFFFF;
  position:relative;
  overflow:hidden;
  box-shadow:0 20px 60px rgba(11,31,58,0.18);
  color:#0B1F3A;
  font-family:'Playfair Display',serif;
}

/* ── Decorative corner shapes ── */
.cert-corner-tl,
.cert-corner-br{
  position:absolute;
  pointer-events:none;
  z-index:1;
}
.cert-corner-tl{
  top:0; left:0;
  width:22%; height:36%;
  background:linear-gradient(135deg,#0B1F3A 0%,#172B4D 60%,transparent 60.5%);
  border-bottom-right-radius:60% 100%;
}
.cert-corner-tl::after{
  content:'';
  position:absolute;
  top:12px; left:12px; right:26%; bottom:34%;
  background:radial-gradient(circle at 30% 30%, rgba(212,166,58,0.15) 0%, transparent 60%);
  border-radius:0 0 60% 0;
}
.cert-corner-br{
  bottom:0; right:0;
  width:22%; height:36%;
  background:linear-gradient(315deg,#0B1F3A 0%,#172B4D 60%,transparent 60.5%);
  border-top-left-radius:60% 100%;
}

/* ── Gold inner border ── */
.cert-border-outer{
  position:absolute;
  inset:14px;
  border:2px solid #D4A63A;
  border-radius:6px;
  pointer-events:none;
  z-index:2;
}
.cert-border-inner{
  position:absolute;
  inset:22px;
  border:1px solid rgba(212,166,58,0.35);
  border-radius:4px;
  pointer-events:none;
  z-index:2;
}

/* ── Content ── */
.cert-content{
  position:relative;
  z-index:3;
  height:100%;
  padding:44px 60px 40px;
  display:flex;
  flex-direction:column;
}

/* ── Header ── */
.cert-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  margin-bottom:14px;
}
.cert-logo-wrap{
  display:flex;
  align-items:center;
  gap:16px;
}
.cert-logo-badge{
  width:64px; height:64px;
  position:relative;
  flex-shrink:0;
}
.cert-logo-badge svg{
  width:100%; height:100%;
}
.cert-brand-text{
  display:flex;
  flex-direction:column;
  line-height:1;
}
.cert-brand-text .brand-nexora{
  font-family:'Cinzel',serif;
  font-weight:900;
  font-size:34px;
  letter-spacing:2px;
  color:#0B1F3A;
}
.cert-brand-text .brand-academy{
  font-family:'Cinzel',serif;
  font-weight:400;
  font-size:22px;
  letter-spacing:14px;
  color:#D4A63A;
  margin-top:2px;
}
.cert-brand-text .brand-tagline{
  font-family:'Segoe UI',sans-serif;
  font-size:9px;
  letter-spacing:4px;
  color:#64748B;
  margin-top:6px;
  font-weight:600;
}

.cert-id-block{
  text-align:right;
  font-family:'Segoe UI',sans-serif;
  font-size:11px;
  color:#64748B;
  line-height:1.5;
}
.cert-id-block .lbl{
  text-transform:uppercase;
  letter-spacing:1.5px;
  font-weight:700;
  font-size:10px;
}
.cert-id-block .val{
  font-family:'Space Mono',monospace;
  font-weight:700;
  color:#0B1F3A;
  font-size:13px;
  letter-spacing:0.5px;
}

/* ── Seal (top left) ── */
.cert-seal-topleft{
  position:absolute;
  top:60px;
  left:40px;
  width:130px;
  height:170px;
  z-index:5;
  pointer-events:none;
}
.cert-seal-topleft .seal-ribbon{
  position:absolute;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  width:70px;
  height:70px;
  background:linear-gradient(180deg,#172B4D 0%,#0B1F3A 100%);
  clip-path:polygon(0 0, 50% 20%, 100% 0, 100% 100%, 50% 80%, 0 100%);
}
.cert-seal-topleft .seal-coin{
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);
  width:130px;
  height:130px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #F5D67B 0%, #D4A63A 45%, #A67C1E 100%);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 6px 20px rgba(166,124,30,0.4), inset 0 -3px 8px rgba(0,0,0,0.15);
  border:3px solid #A67C1E;
}
.cert-seal-topleft .seal-coin::before{
  content:'';
  position:absolute;
  inset:8px;
  border-radius:50%;
  border:2px dashed rgba(255,255,255,0.5);
}
.cert-seal-topleft .seal-inner{
  width:72%;
  height:72%;
  border-radius:50%;
  background:linear-gradient(135deg,#B8891A 0%,#D4A63A 50%,#A67C1E 100%);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-family:'Segoe UI',sans-serif;
}
.cert-seal-topleft .seal-inner i{
  font-size:32px;
  margin-bottom:2px;
}
.cert-seal-topleft .seal-inner .txt{
  font-size:8px;
  font-weight:700;
  letter-spacing:1.5px;
}

/* ── Title block (centered) ── */
.cert-title-block{
  text-align:center;
  margin-top:6px;
  margin-bottom:8px;
}
.cert-title{
  font-family:'Cinzel',serif;
  font-weight:700;
  font-size:46px;
  letter-spacing:8px;
  color:#0B1F3A;
  margin:0;
  line-height:1;
}
.cert-subtitle{
  font-family:'Cinzel',serif;
  font-weight:400;
  font-size:18px;
  letter-spacing:6px;
  color:#D4A63A;
  margin:6px 0 0;
}
.cert-title-divider{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin-top:12px;
}
.cert-title-divider::before,
.cert-title-divider::after{
  content:'';
  height:1px;
  width:80px;
  background:linear-gradient(90deg,transparent,#D4A63A,transparent);
}
.cert-title-divider .diamond{
  width:8px; height:8px;
  background:#D4A63A;
  transform:rotate(45deg);
  box-shadow:0 0 0 3px rgba(212,166,58,0.2);
}

/* ── "This is to certify that" ── */
.cert-presented{
  text-align:center;
  font-family:'Segoe UI',sans-serif;
  font-size:14px;
  letter-spacing:2px;
  color:#64748B;
  margin:6px 0 2px;
}

/* ── Student name ── */
.cert-student-name{
  text-align:center;
  font-family:'Cinzel',serif;
  font-weight:700;
  font-size:38px;
  letter-spacing:4px;
  color:#0B1F3A;
  margin:6px 0 4px;
  text-transform:uppercase;
}
.cert-name-underline{
  width:70%;
  max-width:520px;
  height:2px;
  margin:0 auto 6px;
  background:linear-gradient(90deg,transparent,#D4A63A,transparent);
  position:relative;
}
.cert-name-underline::after{
  content:'';
  position:absolute;
  bottom:-6px; left:50%;
  transform:translateX(-50%) rotate(45deg);
  width:6px; height:6px;
  background:#D4A63A;
}

/* ── Completion sentence ── */
.cert-completion-text{
  text-align:center;
  font-family:'Segoe UI',sans-serif;
  font-size:13px;
  color:#334155;
  margin:14px 0 6px;
  line-height:1.5;
}

/* ── Course name ── */
.cert-course-name{
  text-align:center;
  font-family:'Cinzel',serif;
  font-weight:700;
  font-size:28px;
  color:#0B1F3A;
  margin:8px 0 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
}
.cert-course-name::before,
.cert-course-name::after{
  content:'';
  flex:1;
  max-width:100px;
  height:1px;
  background:linear-gradient(90deg,transparent,#D4A63A);
}
.cert-course-name::after{
  background:linear-gradient(90deg,#D4A63A,transparent);
}

/* ── Body: 3 columns (left meta, center requirements, right QR) ── */
.cert-body{
  flex:1;
  display:grid;
  grid-template-columns:180px 1fr 180px;
  gap:24px;
  align-items:start;
  margin-top:8px;
}

/* Left meta panel */
.cert-meta{
  display:flex;
  flex-direction:column;
  gap:14px;
  padding-top:6px;
}
.cert-meta-item{
  display:flex;
  align-items:center;
  gap:12px;
}
.cert-meta-icon{
  width:36px; height:36px;
  border-radius:8px;
  background:#FFF8E8;
  border:1.5px solid #D4A63A;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#D4A63A;
  font-size:16px;
  flex-shrink:0;
}
.cert-meta-text{
  display:flex;
  flex-direction:column;
}
.cert-meta-label{
  font-family:'Segoe UI',sans-serif;
  font-weight:700;
  font-size:9px;
  letter-spacing:1.5px;
  color:#64748B;
  text-transform:uppercase;
}
.cert-meta-value{
  font-family:'Playfair Display',serif;
  font-weight:600;
  font-size:14px;
  color:#0B1F3A;
  margin-top:1px;
}

/* Center: requirements checklist */
.cert-requirements{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding-top:6px;
}
.cert-req-item{
  display:flex;
  align-items:center;
  gap:10px;
  font-family:'Segoe UI',sans-serif;
  font-size:12px;
  color:#334155;
}
.cert-req-check{
  width:18px; height:18px;
  border-radius:50%;
  background:#D4A63A;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:9px;
  flex-shrink:0;
}

/* Right: QR block */
.cert-qr-block{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding-top:6px;
}
.cert-qr-label{
  font-family:'Segoe UI',sans-serif;
  font-weight:700;
  font-size:10px;
  letter-spacing:2px;
  color:#64748B;
  text-transform:uppercase;
  margin-bottom:8px;
}
.cert-qr-box{
  width:130px;
  height:130px;
  background:#fff;
  border:2px solid #D4A63A;
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:6px;
}
.cert-qr-box img,
.cert-qr-box canvas{
  width:100%;
  height:100%;
  display:block;
}
.cert-qr-caption{
  font-family:'Segoe UI',sans-serif;
  font-size:9px;
  color:#64748B;
  margin-top:8px;
  line-height:1.4;
}
.cert-qr-url{
  font-family:'Space Mono',monospace;
  font-size:9px;
  color:#0B1F3A;
  word-break:break-all;
  margin-top:3px;
}

/* ── Closing paragraph ── */
.cert-closing{
  text-align:center;
  font-family:'Segoe UI',sans-serif;
  font-size:11px;
  color:#475569;
  margin:10px auto 6px;
  max-width:660px;
  line-height:1.55;
}

/* ── Signatures row ── */
.cert-signatures{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:end;
  gap:24px;
  margin-top:6px;
}
.cert-sig{
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.cert-sig-script{
  font-family:'Great Vibes',cursive;
  font-size:30px;
  color:#0B1F3A;
  line-height:1;
  padding-bottom:2px;
}
.cert-sig-line{
  width:180px;
  height:1px;
  background:#0B1F3A;
  margin:2px auto 4px;
}
.cert-sig-name{
  font-family:'Segoe UI',sans-serif;
  font-weight:700;
  font-size:10px;
  letter-spacing:1.5px;
  color:#0B1F3A;
  text-transform:uppercase;
}

/* Center official seal */
.cert-official-seal{
  width:110px; height:110px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #F5D67B 0%, #D4A63A 55%, #A67C1E 100%);
  display:flex;
  align-items:center;
  justify-content:center;
  border:3px solid #A67C1E;
  box-shadow:0 6px 16px rgba(166,124,30,0.35), inset 0 -3px 8px rgba(0,0,0,0.15);
  position:relative;
  flex-shrink:0;
}
.cert-official-seal::before{
  content:'';
  position:absolute;
  inset:8px;
  border-radius:50%;
  border:2px dashed rgba(255,255,255,0.5);
}
.cert-official-seal-inner{
  width:78%;
  height:78%;
  border-radius:50%;
  background:linear-gradient(135deg,#172B4D 0%,#0B1F3A 100%);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  color:#D4A63A;
  font-family:'Cinzel',serif;
  padding:6px;
  text-align:center;
}
.cert-official-seal-inner .s-logo{
  font-size:22px;
  color:#D4A63A;
  margin-bottom:2px;
}
.cert-official-seal-inner .s-text{
  font-size:7px;
  font-weight:700;
  letter-spacing:1px;
  line-height:1.3;
}
.cert-official-seal-inner .s-ribbon{
  font-size:6px;
  letter-spacing:1.5px;
  color:#fff;
  margin-top:2px;
}

/* ── Footer note ── */
.cert-footer-note{
  text-align:center;
  font-family:'Segoe UI',sans-serif;
  font-size:9px;
  color:#94A3B8;
  margin-top:8px;
  letter-spacing:0.5px;
}

/* ── Toolbar (print/download) ── */
.cert-toolbar{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:center;
}
.cert-btn{
  padding:11px 24px;
  border-radius:50px;
  font-family:'Segoe UI',sans-serif;
  font-weight:700;
  font-size:13px;
  cursor:pointer;
  border:none;
  display:inline-flex;
  align-items:center;
  gap:8px;
  transition:all 0.15s;
  text-decoration:none;
}
.cert-btn-primary{
  background:#087FF5;
  color:#fff;
}
.cert-btn-primary:hover{background:#0B5FB8}
.cert-btn-outline{
  background:#fff;
  color:#0B1F3A;
  border:2px solid #D9E5F2;
}
.cert-btn-outline:hover{border-color:#087FF5;color:#087FF5}

/* ── Loading / error states ── */
.cert-loading,
.cert-error{
  text-align:center;
  padding:80px 20px;
  font-family:'Segoe UI',sans-serif;
  color:#64748B;
}
.cert-loading i{
  font-size:32px;
  color:#D4A63A;
  display:block;
  margin-bottom:12px;
}
.cert-error{
  max-width:420px;
  margin:0 auto;
}
.cert-error i{
  font-size:48px;
  color:#EF4444;
  margin-bottom:16px;
  display:block;
}
.cert-error h2{
  color:#0B1F3A;
  font-size:20px;
  margin:0 0 8px;
}
.cert-error p{
  margin:0 0 20px;
  font-size:14px;
}

.hidden{display:none !important}

/* ── Responsive ── */
@media (max-width:900px){
  .certificate{aspect-ratio:auto; min-height:auto}
  .cert-content{padding:32px 24px}
  .cert-title{font-size:32px; letter-spacing:5px}
  .cert-subtitle{font-size:14px; letter-spacing:3px}
  .cert-student-name{font-size:26px; letter-spacing:2px}
  .cert-course-name{font-size:20px}
  .cert-body{grid-template-columns:1fr; gap:18px}
  .cert-meta{flex-direction:row; flex-wrap:wrap; gap:10px}
  .cert-meta-item{flex:1; min-width:140px}
  .cert-corner-tl, .cert-corner-br{width:30%; height:20%}
  .cert-seal-topleft{position:static; margin:0 auto 12px; width:100px; height:130px}
  .cert-seal-topleft .seal-coin{width:100px; height:100px}
  .cert-header{flex-direction:column; align-items:center; gap:12px; text-align:center}
  .cert-id-block{text-align:center}
  .cert-signatures{grid-template-columns:1fr; gap:16px}
}

/* ── Print styles ── */
@media print{
  body *{visibility:hidden}
  .certificate, .certificate *{visibility:visible}
  .certificate{
    position:absolute;
    left:0; top:0;
    width:100%;
    box-shadow:none;
  }
  .cert-toolbar, .cert-page-wrap > .cert-toolbar{display:none !important}
  @page{size:A4 landscape; margin:0}
}