/* ==========================================================================
   donation-status.css — the "Check Your Donation" lookup page.
   --------------------------------------------------------------------------
   Everything the form itself needs (.field/.label/.input/.field-error/
   .btn) already exists in style.css, shared with every other form on the
   site — this file only adds what's genuinely new here: the centered
   lookup card and the result states it renders into after a real API call.
   ========================================================================== */

.lookup { padding: 8px 0 70px; }

.lookup-card {
  max-width: 480px;
  margin: 0 auto;
  padding: 34px 30px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.lookup-hint {
  margin-top: 10px;
  font-size: .8125rem;
  line-height: 1.6;
  color: var(--muted);
}

.lookup-hint strong { color: var(--ink); }

/* --------------------------------------------------------------------------
   Result card — built by donation-status.js after a real GET
   /api/donate/verify/:reference call. One of .is-paid / .is-pending /
   .is-pending-manual / .is-failed / .is-abandoned / .is-not-found, plus the
   bare (loading) state before any class is added.
   -------------------------------------------------------------------------- */
.lookup-result {
  margin-top: 22px;
  padding: 20px 22px;
  border-radius: var(--radius);
  border: 1.5px solid var(--line);
  background: var(--surface-alt);
}

.lookup-result-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
}

.lookup-result-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 50%;
  background: var(--line);
  color: var(--muted);
}

.lookup-result-title {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 800;
  color: var(--ink-strong);
}

.lookup-result-body {
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--muted);
}

.lookup-result-ref {
  margin-top: 10px;
  font-family: ui-monospace, 'SFMono-Regular', Consolas, monospace;
  font-size: .8125rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  word-break: break-all;
}

.lookup-result.is-paid .lookup-result-icon { background: color-mix(in srgb, var(--green) 16%, #fff); color: var(--green); }
.lookup-result.is-paid .lookup-result-title { color: var(--green); }

.lookup-result.is-pending .lookup-result-icon,
.lookup-result.is-pending-manual .lookup-result-icon { background: color-mix(in srgb, var(--orange) 16%, #fff); color: var(--orange-deep); }
.lookup-result.is-pending .lookup-result-title,
.lookup-result.is-pending-manual .lookup-result-title { color: var(--orange-deep); }

.lookup-result.is-failed .lookup-result-icon,
.lookup-result.is-abandoned .lookup-result-icon { background: color-mix(in srgb, var(--red) 14%, #fff); color: var(--red); }
.lookup-result.is-failed .lookup-result-title,
.lookup-result.is-abandoned .lookup-result-title { color: var(--red); }

.lookup-result.is-not-found .lookup-result-icon { background: var(--line); color: var(--muted); }

@media (max-width: 560px) {
  .lookup-card { padding: 26px 20px; }
}