/* ===== Verify form ===== */
.cv-verify-wrap{max-width:900px;margin:24px auto;padding:0 16px}
.cv-verify-form{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:end;max-width:560px;margin:0 auto 16px}
.cv-verify-form label{grid-column:1/-1;font-weight:600}
.cv-verify-form input[type=text]{padding:10px 12px;border:1px solid #cdd6dd;border-radius:6px}
.cv-verify-form button{padding:10px 16px;background:#2563eb;color:#fff;border:0;border-radius:6px;cursor:pointer}
.cv-verify-form button:hover{background:#1e4ecf}
.cv-message.cv-error{background:#fee2e2;color:#991b1b;padding:10px 12px;border-radius:6px;max-width:560px;margin:8px auto 0}

/* ===== Certificate Card (portrait; grid sections) ===== */
:root{
  --cv-accent:#e400a6; /* magenta */
  --cv-text:#0f172a;
  --cv-muted:#475569;
  --cv-border:#e5e7eb;
}

.cv-card{
  background:#fff;
  border:1px solid var(--cv-border);
  border-radius:14px;
  padding:24px clamp(16px,3.2vw,36px);
  box-shadow:0 8px 14px rgba(0,0,0,.06);
  max-width:1280px;
  width:100%;
  margin:0 auto;
  position:relative; overflow:hidden;
}

/* Subtle lilac wave background */
.cv-card::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(120% 40% at 0% 80%, rgba(215,197,236,.35), transparent 55%),
    radial-gradient(100% 35% at 100% 8%, rgba(215,197,236,.30), transparent 60%);
  pointer-events:none;
}
/* Success message shown after a valid verification */
.cv-success{
  max-width: 900px;
  margin: 0 auto 16px;
  background: #ecfdf5;              /* green-50 */
  border: 1px solid #a7f3d0;        /* green-200 */
  color: #065f46;                   /* green-800 */
  border-radius: 10px;
  padding: 14px 16px;
  text-align: center;
  box-shadow: 0 6px 12px rgba(0,0,0,.04);
}
.cv-success h2{
  margin: 0 0 4px;
  font-size: clamp(18px,2.2vw,22px);
  font-weight: 800;
}
.cv-success p{
  margin: 0;
  font-size: clamp(14px,1.7vw,16px);
  line-height: 1.45;
}
.cv-code-inline{ font-weight: 700; }

/* CTEVT line above the main title */
.cv-affiliated {
  text-align: center;
  font-weight: 700;
  color: #000;
  letter-spacing: clamp(1px, 0.2vw, 2px);
  font-size: clamp(20px, 2.5vw, 28px);
  margin-top: clamp(10px, 1.5vw, 15px);
  margin-bottom: clamp(10px, 1.5vw, 15px);
}

/* Header row */
.cv-header{
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  gap:clamp(12px,2vw,24px);
  margin-bottom: clamp(18px,3vw,30px);
  z-index:1;
}
.cv-regs{color:var(--cv-text);line-height:1.25}
.cv-reg{font-size:clamp(12px,1.3vw,14px)}
.cv-logo-mid img{display:block;max-width:clamp(220px,26vw,380px);margin:0 auto;height:auto}
.cv-iso img{display:block;margin-left:auto;max-width:clamp(80px,10vw,120px);height:auto}

/* Titles */
.cv-title-block{text-align:center;margin: clamp(10px,2.2vw,20px) 0}
.cv-title{
  font-family:serif;font-weight:700;
  font-size:clamp(34px,4.4vw,50px);
  letter-spacing:clamp(6px,0.9vw,11px);
  color:#111827;margin:0 0 clamp(6px,1.2vw,10px);line-height:1;
}
.cv-subtitle{
  font-family:serif;font-weight:700;text-transform:uppercase;
  font-size:clamp(18px,2.2vw,26px);
  letter-spacing:clamp(4px,0.6vw,7px);color:#000;margin:0;
}

/* Presented + name + underline */
.cv-presented{text-align:center;color:#374151;font-size:clamp(14px,1.6vw,16px);margin: clamp(6px,1.2vw,10px) 0}
.cv-name-wrap{margin:0 auto;max-width:min(900px,86%);text-align:center}
.cv-student{
  color:var(--cv-accent);font-weight:800;
  font-size:clamp(36px,6.6vw,58px);
  line-height:1;margin:0 0 clamp(8px,1.6vw,12px);
  white-space:nowrap;
}
.cv-underline{height:2px;background:#9e9e9e;border:0;margin:0 auto clamp(12px,1.8vw,14px)}

/* Completion + Award (tightened) */
.cv-description{
  color:#1f2937;font-size:clamp(13px,1.5vw,16px);line-height:1.45;text-align:center;
  max-width:min(980px,88%);margin: 0 auto clamp(6px,1.2vw,10px);
}
.cv-award {
  text-align: center;
  color: #1f2937;
  font-size: clamp(13px, 1.5vw, 16px);
  margin: 0 0 clamp(0px, 0.2vw, 1px);
}

/* ===== Bottom band (single horizontal line) ===== */
.cv-bottom-band {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: clamp(16px, 5vw, 60px);
  margin-top: 0;
  padding-top: 0;
}
.cv-signatory { text-align: center; margin-top: 0; }

/* Left/Right signature blocks */
.cv-sign {
  text-align: center;
  flex: 1 1 0;
  margin-top: clamp(4px, 0.5vw, 8px);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-width: 0; /* prevents overflow shrink issues */
}
.cv-sign-name{
  color: var(--cv-accent);
  font-weight: 700;
  font-size: clamp(14px, 1.8vw, 18px);
  line-height: 1.1;
  margin-bottom: 4px;
  word-break: break-word; /* wrap long surnames */
}
.cv-sign-role{
  color: #111827;
  font-size: clamp(12px, 1.5vw, 14px);
  line-height: 1.1;
}

/* Center seal */
.cv-seal-wrap{flex:0 0 auto; display:flex; justify-content:center; align-items:flex-end}
.cv-seal-wrap img{display:block;width:clamp(110px,13vw,190px);height:auto}

/* Footer */
.cv-footer{
  display:flex;justify-content:space-between;align-items:center;
  margin-top: clamp(10px,1.8vw,14px);
  font-size:clamp(12px,1.5vw,14px);
  color:#111827;
}
/* Intro text above the verify form */
.cv-intro-text{
  grid-column: 1 / -1;        /* span full grid width */
  max-width: 560px;
  margin: 0 auto 16px;
  text-align: center;
}
.cv-intro-text h2{
  margin: 0 0 6px;
  font-size: clamp(18px, 2.2vw, 22px);
  color: #0f172a;
  font-weight: 700;
}
.cv-intro-text p{
  margin: 0;
  font-size: clamp(14px, 1.7vw, 16px);
  color: #444;
  line-height: 1.45;
}

/* Buttons */
.cv-actions{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap;justify-content:center}
.cv-button{padding:10px 14px;background:#0f172a;color:#fff !important;border-radius:6px;text-decoration:none;border:0;cursor:pointer;display:inline-block}
.cv-button:hover{opacity:.92}

/* Intro text above the verify form */
.cv-intro-text{
  max-width:560px;
  margin:0 auto 16px;
  text-align:center;
}
.cv-intro-text h2{
  margin:0 0 6px;
  font-size:clamp(18px,2.2vw,22px);
  color:#0f172a;
  font-weight:700;
}
.cv-intro-text p{
  margin:0;
  font-size:clamp(14px,1.7vw,16px);
  color:#444;
  line-height:1.45;
}

/* ================= MOBILE ALIGNMENT PATCH ================= */

/* Large phones / small tablets */
@media (max-width: 820px){
  /* Card & global spacing */
  .cv-card{padding:20px clamp(12px,4vw,22px)}
  .cv-title-block, .cv-presented, .cv-name-wrap, .cv-description, .cv-award { text-align:center }

  /* Header: stack & center to avoid collisions */
  .cv-header{
    grid-template-columns:1fr;
    row-gap:8px;
    text-align:center;
  }
  .cv-iso img{margin:0 auto}

  /* Titles & text scale */
  .cv-affiliated{font-size:clamp(18px,5vw,22px)}
  .cv-title{font-size:clamp(28px,7vw,40px); letter-spacing:.6vw}
  .cv-subtitle{font-size:clamp(16px,3.6vw,22px); letter-spacing:.45vw}
  .cv-presented{font-size:clamp(13px,3.2vw,16px)}

  /* Student name: allow wrap and keep centered */
  .cv-student{
    font-size:clamp(26px,7.4vw,42px);
    white-space:normal;
    word-break:break-word;
    hyphens:auto;
    margin-left:auto; margin-right:auto;
  }
  .cv-name-wrap{max-width:94%}
  .cv-description, .cv-award{max-width:95%; font-size:clamp(13px,3.2vw,16px)}

  /* Bottom band: stack & center so ALL lines align */
  .cv-bottom-band{
    flex-direction:column;
    align-items:center;
    gap:12px;
    margin-top:6px;
  }
  .cv-sign{margin-top:0}
  .cv-seal-wrap img{width:clamp(96px,20vw,150px)}

  /* Footer: stack & center */
  .cv-footer{flex-direction:column; gap:6px; text-align:center}
}

/* Phones */
/* ==== Mobile alignment for intro & form ==== */
@media (max-width: 640px){
  /* Make the form a single column so everything centers perfectly */
  .cv-verify-form{
    grid-template-columns: 1fr;
    row-gap: 10px;
    justify-items: center;  /* center children */
  }

  /* Ensure intro text stays centered and wrapped nicely */
  .cv-intro-text{
    max-width: 92%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
  .cv-intro-text h2{
    font-size: clamp(18px, 6vw, 22px);
    line-height: 1.15;
  }
  .cv-intro-text p{
    font-size: clamp(14px, 4.2vw, 16px);
    text-wrap: balance;     /* nicer multi-line balance */
    hyphens: auto;
  }

  /* Make input + button full width and centered */
  .cv-verify-form label{
    text-align: center;
    width: 100%;
  }
  .cv-verify-form input[type="text"],
  .cv-verify-form button{
    width: 100%;
    max-width: 520px;
  }
}

/* Small phones */
@media (max-width: 480px){
  .cv-card{padding:16px 12px}
  .cv-title{font-size:clamp(22px,9vw,32px); letter-spacing:.5vw}
  .cv-subtitle{font-size:clamp(13px,5vw,18px)}
  .cv-student{font-size:clamp(20px,8.6vw,30px)}
  .cv-seal-wrap img{width:clamp(80px,28vw,120px)}
}