/**
 * Certificate verification, public side.
 *
 * Colours and type are taken from the CCVESD theme's custom properties where
 * they exist, with literal fallbacks so the page still looks right on any
 * other theme.
 */

.ccvesd-cert {
  --crt-blue:   var(--ccvesd-blue, #1a56db);
  --crt-dark:   var(--ccvesd-dark-blue, #1e3a5f);
  --crt-light:  var(--ccvesd-light-blue, #e8f0fe);
  --crt-gold:   var(--ccvesd-gold, #f59e0b);
  --crt-text:   var(--ccvesd-text, #1f2937);
  --crt-muted:  var(--ccvesd-text-light, #6b7280);
  --crt-border: var(--ccvesd-border, #e5e7eb);
  --crt-bg:     var(--ccvesd-bg, #f8fafc);
  --crt-white:  #fff;
  --crt-green:  #067647;
  --crt-green-bg: #ecfdf3;
  --crt-red:    #b42318;
  --crt-red-bg: #fef3f2;
  --crt-amber:  #b45309;
  --crt-amber-bg: #fffbeb;
  --crt-radius: var(--ccvesd-radius, 8px);
  --crt-radius-lg: var(--ccvesd-radius-lg, 14px);
  --crt-sans:   var(--ccvesd-font-sans, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  --crt-head:   var(--ccvesd-font-heading, "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);

  max-width: 760px;
  margin: 0 auto;
  padding: 0 16px;
  font-family: var(--crt-sans);
  color: var(--crt-text);
  font-size: 15px;
  line-height: 1.6;
}

.ccvesd-cert *,
.ccvesd-cert *::before,
.ccvesd-cert *::after { box-sizing: border-box; }

/* ---------- Isolation from the surrounding theme ----------
   Themes style their content area with rules like `.entry-content h2` that
   match this component's markup at the same specificity. This block
   neutralises the properties the component does not set for itself; it is
   kept to a single class so the component's own two-class rules still win,
   and the tie against the theme is settled by load order (the stylesheet is
   enqueued at priority 20, after the theme's).                            */

/* Note the pairing: this reset matches one class plus an element, so any
   component rule below that styles a <p>, a <dl> or a <dt> is written as
   `.ccvesd-cert .ccvesd-cert-thing` to outrank it. A bare single class would
   silently lose its margins and its colour.                                */

.ccvesd-cert h2,
.ccvesd-cert p,
.ccvesd-cert a,
.ccvesd-cert dl,
.ccvesd-cert dt,
.ccvesd-cert dd,
.ccvesd-cert label {
  margin: 0;
  padding: 0;
  border: 0;
  color: inherit;
  font-family: inherit;
  text-align: left;
  text-transform: none;
  letter-spacing: normal;
  text-decoration: none;
}

/* ============================================================
   THE LOOKUP FORM
   ============================================================ */

.ccvesd-cert-form {
  background: var(--crt-white);
  border: 1px solid var(--crt-border);
  border-radius: var(--crt-radius-lg);
  overflow: hidden;
  box-shadow: var(--ccvesd-shadow, 0 4px 6px -1px rgba(0,0,0,.10), 0 2px 4px -1px rgba(0,0,0,.06));
}

.ccvesd-cert-header {
  background: linear-gradient(135deg, var(--crt-dark), var(--crt-blue));
  color: var(--crt-white);
  padding: 28px 28px 24px;
  text-align: center;
}

.ccvesd-cert-header h2 {
  font-family: var(--crt-head);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--crt-white);
  text-align: center;
  margin: 0 0 8px;
}

.ccvesd-cert-header p {
  color: rgba(255, 255, 255, .88);
  text-align: center;
  font-size: 14px;
  max-width: 46ch;
  margin: 0 auto;
}

.ccvesd-cert-header-icon {
  display: inline-block;
  width: 44px;
  height: 44px;
  line-height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .16);
  color: var(--crt-gold);
  font-size: 20px;
  margin-bottom: 12px;
}

.ccvesd-cert-body { padding: 26px 28px 28px; }

.ccvesd-cert-field { margin-bottom: 20px; }

.ccvesd-cert-field > label {
  display: block;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--crt-dark);
  margin-bottom: 7px;
}

.ccvesd-cert-req { color: var(--crt-red); }

.ccvesd-cert-field input[type="text"] {
  width: 100%;
  padding: 13px 15px;
  font-family: var(--crt-sans);
  font-size: 16px;
  color: var(--crt-text);
  background: var(--crt-white);
  border: 1px solid var(--crt-border);
  border-radius: var(--crt-radius);
  transition: border-color .2s ease, box-shadow .2s ease;
}

#ccvesd-cert-number {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.ccvesd-cert-field input[type="text"]:focus {
  outline: none;
  border-color: var(--crt-blue);
  box-shadow: 0 0 0 3px rgba(26, 86, 219, .14);
}

.ccvesd-cert .ccvesd-cert-help {
  font-size: 13px;
  color: var(--crt-muted);
  margin-top: 6px;
}

/* Honeypot: off-screen rather than display:none, which some bots skip. */
.ccvesd-cert-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- Captcha ---------- */

.ccvesd-cert-captcha-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.ccvesd-cert-captcha-image {
  display: block;
  border: 1px solid var(--crt-border);
  border-radius: var(--crt-radius);
  background: var(--crt-bg);
}

.ccvesd-cert-captcha-question {
  display: inline-block;
  padding: 13px 18px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--crt-dark);
  background: var(--crt-bg);
  border: 1px solid var(--crt-border);
  border-radius: var(--crt-radius);
}

.ccvesd-cert-captcha-refresh {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  font-size: 18px;
  line-height: 1;
  color: var(--crt-blue);
  background: var(--crt-white);
  border: 1px solid var(--crt-border);
  border-radius: var(--crt-radius);
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}

.ccvesd-cert-captcha-refresh:hover { background: var(--crt-light); }
.ccvesd-cert-captcha-refresh[disabled] { opacity: .5; cursor: default; }

.ccvesd-cert-captcha-input {
  flex: 1 1 160px;
  min-width: 140px;
  text-transform: uppercase;
  letter-spacing: .1em;
}

/* ---------- Buttons ---------- */

.ccvesd-cert-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.ccvesd-cert .ccvesd-cert-btn {
  display: inline-block;
  padding: 13px 26px;
  font-family: var(--crt-sans);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  border: 1px solid transparent;
  border-radius: var(--crt-radius);
  cursor: pointer;
  text-decoration: none;
  transition: background .2s ease, color .2s ease, transform .1s ease;
}

.ccvesd-cert .ccvesd-cert-btn-primary {
  background: var(--crt-blue);
  color: var(--crt-white);
}

.ccvesd-cert .ccvesd-cert-btn-primary:hover {
  background: var(--crt-dark);
  color: var(--crt-white);
}

.ccvesd-cert .ccvesd-cert-btn-primary[disabled] { opacity: .6; cursor: default; }

.ccvesd-cert .ccvesd-cert-btn-quiet {
  background: var(--crt-white);
  border-color: var(--crt-border);
  color: var(--crt-dark);
}

.ccvesd-cert .ccvesd-cert-btn-quiet:hover { background: var(--crt-bg); color: var(--crt-dark); }

/* ============================================================
   THE NOTICE ABOVE THE FORM
   ============================================================ */

.ccvesd-cert-notice {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 16px 18px;
  margin-bottom: 20px;
  border: 1px solid;
  border-radius: var(--crt-radius);
  font-size: 14px;
}

.ccvesd-cert-notice:focus { outline: 2px solid var(--crt-blue); outline-offset: 2px; }

.ccvesd-cert-notice-miss {
  background: var(--crt-red-bg);
  border-color: #fecdca;
  color: var(--crt-red);
}

.ccvesd-cert-notice-warn {
  background: var(--crt-amber-bg);
  border-color: #fde68a;
  color: var(--crt-amber);
}

.ccvesd-cert-notice-icon {
  flex: 0 0 auto;
  font-weight: 700;
  line-height: 1.5;
}

.ccvesd-cert-notice p { color: inherit; }
.ccvesd-cert .ccvesd-cert-notice-echo { margin-top: 6px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* ============================================================
   THE RESULT
   ============================================================ */

.ccvesd-cert-result {
  background: var(--crt-white);
  border: 1px solid var(--crt-border);
  border-top: 5px solid var(--crt-green);
  border-radius: var(--crt-radius-lg);
  padding: 28px;
  box-shadow: var(--ccvesd-shadow, 0 4px 6px -1px rgba(0,0,0,.10), 0 2px 4px -1px rgba(0,0,0,.06));
}

.ccvesd-cert-result.is-revoked { border-top-color: var(--crt-red); }
.ccvesd-cert-result:focus { outline: none; }

.ccvesd-cert-result-head {
  text-align: center;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--crt-border);
  margin-bottom: 22px;
}

.ccvesd-cert-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  border: 1px solid transparent;
  margin-bottom: 12px;
}

.ccvesd-cert-badge-verified {
  background: var(--crt-green-bg);
  color: var(--crt-green);
  border-color: #abefc6;
}

.ccvesd-cert-badge-revoked {
  background: var(--crt-red-bg);
  color: var(--crt-red);
  border-color: #fecdca;
}

.ccvesd-cert .ccvesd-cert-result-lede {
  font-size: 14px;
  color: var(--crt-muted);
  text-align: center;
  max-width: 52ch;
  margin: 0 auto;
}

/* ---------- The four printed lines ---------- */

.ccvesd-cert-lines { margin: 0; }

.ccvesd-cert-line {
  display: grid;
  grid-template-columns: 210px 1fr;
  gap: 8px 18px;
  padding: 13px 0;
  border-bottom: 1px dashed var(--crt-border);
}

.ccvesd-cert-line:last-child { border-bottom: 0; }

.ccvesd-cert-line dt {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--crt-muted);
  text-transform: uppercase;
  padding-top: 2px;
}

.ccvesd-cert-line dd {
  font-family: var(--crt-head);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--crt-dark);
  word-break: break-word;
}

/* ---------- Issue details ---------- */

.ccvesd-cert .ccvesd-cert-extras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 14px 22px;
  margin-top: 22px;
  padding: 18px;
  background: var(--crt-bg);
  border-radius: var(--crt-radius);
}

.ccvesd-cert-extra dt {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--crt-muted);
  margin-bottom: 3px;
}

.ccvesd-cert-extra dd {
  font-size: 14px;
  font-weight: 600;
  color: var(--crt-text);
}

.ccvesd-cert-result-foot {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--crt-border);
}

.ccvesd-cert .ccvesd-cert-checked { font-size: 13px; color: var(--crt-muted); }
.ccvesd-cert .ccvesd-cert-note { font-size: 13px; color: var(--crt-muted); margin-top: 6px; }
.ccvesd-cert-result-foot .ccvesd-cert-actions { margin-top: 18px; }

/* ============================================================
   SMALL SCREENS
   ============================================================ */

@media (max-width: 560px) {
  .ccvesd-cert-header, .ccvesd-cert-body, .ccvesd-cert-result { padding-left: 18px; padding-right: 18px; }
  .ccvesd-cert-line { grid-template-columns: 1fr; gap: 2px; padding: 11px 0; }
  .ccvesd-cert-line dd { font-size: 1rem; }
  .ccvesd-cert .ccvesd-cert-btn { width: 100%; text-align: center; }
}

/* ============================================================
   PRINT
   ------------------------------------------------------------
   An enquirer files the result, so the printed page has to be
   the verification slip and nothing else: no site chrome, no
   buttons, no form. Everything outside the result is hidden by
   walking up from it rather than by naming the theme's wrappers,
   which differ from theme to theme.
   ============================================================ */

@media print {
  body * { visibility: hidden !important; }

  .ccvesd-cert,
  .ccvesd-cert * { visibility: visible !important; }

  .ccvesd-cert {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    max-width: none;
    padding: 0;
    font-size: 12pt;
  }

  .ccvesd-cert-form,
  .ccvesd-cert-notice,
  .ccvesd-cert-no-print { display: none !important; }

  .ccvesd-cert-result {
    border: 1px solid #333;
    border-top-width: 3px;
    border-radius: 0;
    box-shadow: none;
    padding: 18pt;
  }

  .ccvesd-cert .ccvesd-cert-extras { background: none; border: 1px solid #ccc; }

  .ccvesd-cert-line { break-inside: avoid; }

  a[href]::after { content: none !important; }
}