/* Public certificate verification (also the page opened by scanning a certificate QR code). */

.verify-intro h2 { font-size: 28px; }

.verify-form { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 32px; }
.verify-form .verify-input { flex: 1 1 260px; min-width: 0; }
.verify-form .form-control { height: 100%; min-height: 52px; font-size: 16px; letter-spacing: .3px; }
.verify-form .btn-brand { min-height: 52px; white-space: nowrap; }

.verify-result {
  --accent: #2e8b3d;
  --tint: #f1f9f0;
  background: var(--tint);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, #fff);
  border-top: 5px solid var(--accent);
  border-radius: 8px;
  padding: 28px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .05);
}
.verify-result.is-expired { --accent: #d98a00; --tint: #fff8ea; }
.verify-result.is-revoked,
.verify-result.is-notfound { --accent: #c62f2f; --tint: #fdf0ef; }

.verify-result-head { display: flex; align-items: center; gap: 18px; margin-bottom: 18px; }
.verify-icon { font-size: 52px; line-height: 1; color: var(--accent); flex: 0 0 auto; }
.verify-title { margin: 0 0 4px; font-size: 24px; color: var(--accent); }

.verified-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--accent); color: #fff; font-weight: 700; font-size: 13px;
  text-transform: uppercase; letter-spacing: 1px; padding: 6px 14px; border-radius: 999px; margin-bottom: 20px;
}

.verify-details {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; margin: 0 0 18px;
  background: #fff; border: 1px solid #ececec; border-radius: 6px; padding: 6px 20px;
}
.verify-details > div { padding: 12px 0; border-bottom: 1px solid #f0f0f0; min-width: 0; }
.verify-details > div.wide { grid-column: 1 / -1; }
.verify-details dt { font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .8px; color: #8a8a8a; margin-bottom: 2px; }
.verify-details dd { margin: 0; font-size: 16px; font-weight: 600; color: #222; overflow-wrap: anywhere; }
.verify-details > div:nth-last-child(-n+2):not(.wide) { border-bottom: 0; }

.status-pill {
  display: inline-block; padding: 2px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; letter-spacing: 1px;
  background: color-mix(in srgb, var(--accent) 14%, #fff); color: var(--accent);
}
.verify-foot { font-size: 13px; color: #777; }

@media (max-width: 575.98px) {
  .verify-result { padding: 20px 16px; }
  .verify-result-head { align-items: flex-start; gap: 12px; }
  .verify-icon { font-size: 40px; }
  .verify-title { font-size: 20px; }
  .verify-details { grid-template-columns: 1fr; padding: 4px 16px; }
  .verify-details > div:nth-last-child(-n+2):not(.wide) { border-bottom: 1px solid #f0f0f0; }
  .verify-details > div:last-child { border-bottom: 0; }
  .verify-form .btn-brand { width: 100%; }
}