/* =========================================================================
   CERTIFICATE FACE — the actual printable/downloadable certificate design.
   Uses only existing brand tokens (navy / gold / red / white).
   ========================================================================= */
.verify-box{
  max-width:760px;margin:0 auto;padding:clamp(28px,5vw,52px);
  background:linear-gradient(145deg,var(--white),#f7f9fc);
  border:1px solid var(--gray-200);border-top:4px solid var(--gold-500);
  border-radius:var(--r-lg);box-shadow:0 24px 60px rgba(7,26,73,.10);
}
.verify-box-mark{
  width:52px;height:52px;margin-bottom:var(--sp-5);border-radius:50%;
  display:flex;align-items:center;justify-content:center;background:var(--gold-100);
  color:var(--gold-700);font-size:26px;font-weight:700;
}
.verify-box-copy h2{margin:var(--sp-2) 0 var(--sp-2);font-family:var(--font-display);font-size:clamp(26px,4vw,36px);color:var(--navy-900);}
.verify-box-copy p{margin:0 0 var(--sp-6);color:var(--gray-600);max-width:520px;}
#verify-form label{display:block;margin-bottom:var(--sp-2);color:var(--navy-900);font-size:var(--fs-body-sm);font-weight:700;}
.verify-input-row{display:flex;gap:var(--sp-3);}
.verify-input-wrapper{position:relative;flex:1;}
.verify-input-wrapper span{position:absolute;left:17px;top:50%;transform:translateY(-50%);color:var(--gold-700);font-weight:700;font-size:18px;}
#verify-code{width:100%;height:54px;padding:0 18px 0 42px;border:1px solid var(--gray-200);border-radius:var(--r-btn);background:var(--white);color:var(--navy-900);font-size:var(--fs-body-sm);outline:none;box-sizing:border-box;transition:border-color .2s var(--ease),box-shadow .2s var(--ease);}
#verify-code:focus{border-color:var(--navy-700);box-shadow:0 0 0 4px rgba(18,59,120,.10);}
#verify-form .btn-primary{height:54px;padding:0 24px;white-space:nowrap;}
.verify-help{margin:var(--sp-3) 0 0;color:var(--gray-400);font-size:var(--fs-caption);}
.verify-result{max-width:960px;margin:var(--sp-8) auto 0;display:none;}
.verify-result.show{display:block;animation:verify-reveal .45s var(--ease) both;}
.verify-result-status{display:flex;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-5);padding:var(--sp-4) var(--sp-5);border-radius:var(--r-md);background:#e8f5ed;color:#176b35;}
.verify-result.invalid .verify-result-status{background:var(--red-100);color:var(--red-700);}
.verify-result-status>span{font-size:22px;font-weight:700;}
.verify-result-status strong,.verify-result-status small{display:block;}
.verify-result-status strong{font-size:var(--fs-body-sm);}
.verify-result-status small{margin-top:3px;color:inherit;opacity:.8;font-size:var(--fs-caption);}
.certificate-preview{overflow-x:auto;padding:4px 4px 18px;}
.certificate-preview .certificate-face{min-width:640px;}
@keyframes verify-reveal{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}

.certificate-face{
  width:100%;
  max-width:960px;
  margin:0 auto;
  aspect-ratio:1.42/1; /* landscape, close to A4 landscape ratio */
  box-sizing:border-box;
  background:var(--white);
  box-shadow:0 30px 70px -30px rgba(7,26,73,.35);
  border-radius:var(--r-md);
  overflow:hidden;
}
.certificate-border{
  height:calc(100% - 28px);
  margin:14px;
  border:2px solid var(--gold-500);
  border-radius:6px;
  position:relative;
  box-sizing:border-box;
}
.certificate-border::before{
  content:"";
  position:absolute;inset:8px;
  border:1px solid var(--navy-100);
  border-radius:4px;
  pointer-events:none;
}
.certificate-inner{
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:5% 8%;
  position:relative;
  box-sizing:border-box;
}
.certificate-logo{
  width:64px;height:64px;object-fit:contain;margin-bottom:12px;
}
.certificate-academy{
  font-family:var(--font-body);
  font-size:13px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--navy-800);
  font-weight:700;
  margin-bottom:18px;
}
.certificate-title{
  font-family:var(--font-display);
  font-size:clamp(22px, 3vw, 32px);
  color:var(--navy-900);
  font-weight:700;
  letter-spacing:.02em;
  margin-bottom:14px;
  position:relative;
  padding-bottom:14px;
}
.certificate-title::after{
  content:"";
  position:absolute;bottom:0;left:50%;transform:translateX(-50%);
  width:60px;height:2px;background:var(--gold-500);
}
.certificate-line{
  font-size:14px;
  color:var(--gray-600);
  margin:6px 0;
}
.certificate-name{
  font-family:var(--font-display);
  font-size:clamp(26px, 4vw, 42px);
  color:var(--red-700);
  font-weight:700;
  margin:8px 0 10px;
}
.certificate-course{
  font-family:var(--font-display);
  font-size:clamp(18px, 2.4vw, 24px);
  color:var(--navy-900);
  font-weight:600;
  margin:8px 0 24px;
}
.certificate-footer{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(24px, 8vw, 90px);
  margin-top:8px;
  width:100%;
}
.certificate-sig{
  min-width:140px;
}
.certificate-sig-line{
  font-family:var(--font-display);
  font-size:15px;
  color:var(--navy-900);
  border-bottom:1px solid var(--gray-200);
  padding-bottom:6px;
  margin-bottom:6px;
}
.certificate-sig-label{
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--gray-400);
}
.certificate-seal{
  width:56px;height:56px;border-radius:50%;
  border:2px solid var(--gold-500);
  display:flex;align-items:center;justify-content:center;
  color:var(--gold-700);
  font-size:22px;
  background:var(--gold-100);
  flex-shrink:0;
}
.certificate-meta{
  margin-top:22px;
  display:flex;
  gap:28px;
  font-size:11px;
  color:var(--gray-400);
  letter-spacing:.02em;
}
.certificate-meta strong{
  color:var(--gray-600);
}

/* ===== Certificate view page chrome (not part of the printed face) ===== */
.cert-view-toolbar{
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--sp-4);
  margin-bottom:var(--sp-8);
}
.cert-view-actions{display:flex;gap:var(--sp-4);flex-wrap:wrap;}
.cert-status-banner{
  display:flex;align-items:center;gap:var(--sp-3);
  max-width:960px;margin:0 auto var(--sp-6);
  padding:var(--sp-4) var(--sp-5);border-radius:var(--r-md);
  font-size:var(--fs-body-sm);font-weight:600;
}
.cert-status-banner.valid{background:#E6F4EA;color:#1E7E34;}
.cert-status-banner.revoked{background:var(--red-100);color:var(--red-700);}

/* ===== Course completion / certificate unlock block (course-details page) ===== */
.cert-unlock-box{
  border:var(--border);border-radius:var(--r-lg);padding:var(--sp-7);
  display:flex;align-items:center;gap:var(--sp-6);flex-wrap:wrap;
}
.cert-unlock-icon{
  width:56px;height:56px;border-radius:50%;background:var(--gold-100);color:var(--gold-700);
  display:flex;align-items:center;justify-content:center;font-size:24px;flex-shrink:0;
}
.cert-unlock-box.locked .cert-unlock-icon{background:var(--gray-100);color:var(--gray-400);}
.cert-unlock-box.complete{border-color:var(--gold-500);background:var(--gold-100);}
.cert-unlock-body{flex:1;min-width:220px;}
.cert-unlock-body h4{margin-bottom:6px;}
.cert-progress-inline{display:flex;align-items:center;gap:var(--sp-3);margin-top:var(--sp-4);}
.cert-progress-inline .progress-bar{flex:1;margin:0;}

/* ===== Responsive certificate ===== */
@media (max-width:768px){
  .verify-input-row{flex-direction:column;}
  #verify-form .btn-primary{width:100%;}
  .certificate-footer{gap:20px;}
  .certificate-sig{min-width:110px;}
  .cert-view-toolbar{flex-direction:column;align-items:stretch;}
  .cert-unlock-box{flex-direction:column;text-align:center;}
}
@media (max-width:520px){
  .verify-box{padding:28px 20px;}
  .certificate-preview{margin-left:-16px;margin-right:-16px;}
}
@media (max-width:520px){
  .certificate-face{
    max-width:none;
    width:640px; /* fixed min width, wrapped in a horizontal scroller by the page */
  }
}

/* ===== Print rules: certificate only ===== */
@media print{
  body *{ visibility:hidden; }
  .certificate-face, .certificate-face *{ visibility:visible; }
  .certificate-face{
    position:absolute; top:0; left:0; margin:0;
    width:100%; max-width:none; box-shadow:none;
  }
  @page{ size:landscape; margin:0; }
}