/* ==========================================================================
   Expert IT Zone — Certificate stylesheet (A4 LANDSCAPE, pixel replica)
   Sheet size: 1123 x 794 px  (A4 landscape @96dpi)
   ========================================================================== */

:root {
  --cert-red: #E0201B;
  --cert-orange: #F26722;
  --cert-green: #1F9E4A;
  --cert-blue: #2222CC;
  --cert-ink: #111111;
  --cert-grey: #6E6E6E;
}

.cert-wrap {
  width: 1123px;
  height: 794px;
  position: relative;
  margin: 0 auto;
  background: #ffffff;
  transform-origin: top left;
}

/* Scaling wrapper so it fits any screen */
.cert-scaler {
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* ------------------------------ Sheet ----------------------------------- */
.cert-sheet {
  position: absolute;
  inset: 0;
  background: #fff;
  font-family: 'Patrick Hand', 'Segoe Print', 'Bradley Hand', 'Comic Sans MS', cursive;
  color: var(--cert-ink);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.cert-border {
  position: absolute;
  inset: 26px;
  border: 4px solid var(--cert-red);
  pointer-events: none;
  z-index: 4;
}

.cert-inner {
  position: absolute;
  inset: 26px;
  display: flex;
  flex-direction: column;
  padding: 26px 44px 0;
  z-index: 3;
}

/* ---------------------------- Watermark --------------------------------- */
.cert-watermark {
  position: absolute;
  left: 50%;
  top: 52%;
  transform: translate(-50%, -50%);
  width: 620px;
  opacity: 0.16;
  z-index: 1;
  pointer-events: none;
  user-select: none;
}

/* ------------------------------ Header ---------------------------------- */
.cert-topline {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
  letter-spacing: 0.2px;
}

.cert-topline .lbl { font-weight: 400; }
.cert-topline .val { font-weight: 400; }

.cert-iso {
  text-align: center;
  color: var(--cert-green);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 19px;
  font-weight: 600;
  margin: 2px 0 -6px;
  letter-spacing: 0.2px;
}

/* Big brand wordmark: orange fill + green outline (original jaisa) */
.cert-brand {
  text-align: center;
  font-family: Arial Black, Arial, Helvetica, sans-serif;
  font-weight: 900;
  font-size: 78px;
  line-height: 1.02;
  letter-spacing: 1px;
  color: var(--cert-orange);
  -webkit-text-stroke: 3px var(--cert-green);
  paint-order: stroke fill;
  text-shadow: 3px 3px 0 rgba(31, 158, 74, 0.35);
  margin: 4px 0 0;
  white-space: nowrap;
}

.cert-title {
  text-align: center;
  font-family: 'UnifrakturMaguntia', 'Old English Text MT', 'Blackadder ITC', serif;
  font-size: 54px;
  line-height: 1.1;
  color: var(--cert-blue);
  margin: 6px 0 4px;
  font-weight: 400;
}

/* ------------------------------- Body ----------------------------------- */
.cert-body {
  flex: 1;
  font-size: 28px;
  line-height: 1.05;
  padding: 10px 4px 0;
}

.cert-line {
  display: flex;
  align-items: baseline;
  white-space: nowrap;
  margin-bottom: 26px;
}

.cert-line .txt { flex: none; }

/* Dotted fill area with the typed value sitting on top */
.cert-fill {
  position: relative;
  flex: 1 1 auto;
  min-width: 60px;
  overflow: hidden;
  align-self: flex-end;
}

.cert-fill.fixed-sm { flex: 0 0 140px; }
.cert-fill.fixed-md { flex: 0 0 230px; }
.cert-fill.fixed-lg { flex: 0 0 400px; }

.cert-dots {
  display: block;
  color: var(--cert-ink);
  letter-spacing: 1.5px;
  font-size: 28px;
  line-height: 1;
  overflow: hidden;
  white-space: nowrap;
}

/* The dynamic value — typed on the dotted line */
.cert-val {
  position: absolute;
  left: 6px;
  right: 4px;
  bottom: 4px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 24px;
  line-height: 1.1;
  color: #000;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cert-val.center { text-align: center; left: 0; right: 0; }
.cert-val.auto-shrink { font-size: 24px; }

/* ------------------------------ Footer ---------------------------------- */
.cert-footrow {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 8px 8px;
  gap: 18px;
}

.cert-issue { text-align: center; width: 250px; }

.cert-issue .date {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 27px;
  padding-bottom: 6px;
  border-bottom: 2px solid #000;
  display: block;
}

.cert-issue .cap {
  font-size: 27px;
  display: block;
  margin-top: 4px;
}

.cert-qr {
  width: 108px;
  height: 108px;
  display: grid;
  place-items: center;
  background: #fff;
}

.cert-qr canvas,
.cert-qr img,
.cert-qr svg { width: 108px !important; height: 108px !important; display: block; }

.cert-seal { width: 132px; height: 132px; }

.cert-sign { text-align: center; width: 250px; }

.cert-sign .sig {
  font-family: 'Mrs Saint Delafield', 'Sacramento', cursive;
  font-size: 46px;
  line-height: 1;
  color: #1a1ac0;
  padding-bottom: 2px;
  border-bottom: 2px solid #000;
  display: block;
  white-space: nowrap;
  overflow: hidden;
}

.cert-sign .cap {
  font-size: 27px;
  display: block;
  margin-top: 4px;
}

/* Grey head-office strip */
.cert-office {
  position: absolute;
  left: 26px;
  right: 26px;
  bottom: 26px;
  background: #6E6E6E;
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 17px;
  text-align: center;
  padding: 9px 12px;
  z-index: 5;
  line-height: 1.2;
}

.cert-office b { font-weight: 700; }

/* Space reserved above grey strip */
.cert-inner { padding-bottom: 54px; }

/* --------------------------- REVOKED overlay ---------------------------- */
.cert-revoked {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.cert-revoked span {
  font-family: Arial Black, Arial, sans-serif;
  font-size: 130px;
  color: rgba(229, 100, 88, 0.35);
  border: 10px solid rgba(229, 100, 88, 0.35);
  padding: 10px 44px;
  transform: rotate(-18deg);
  letter-spacing: 8px;
}

/* ------------------------------ Printing -------------------------------- */
@page {
  size: A4 landscape;
  margin: 0;
}

@media print {
  html, body {
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .no-print { display: none !important; }
  .cert-scaler { width: 1123px !important; height: 794px !important; overflow: visible !important; }
  .cert-wrap { transform: none !important; page-break-inside: avoid; }
}