/* Sponsor page: "Already sent your support?" receipt form (support-claim.js). */
.sp-claim {
  display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); gap: clamp(20px, 3.5vw, 44px); align-items: start;
  margin-top: 20px; padding: clamp(22px, 3vw, 36px); border-radius: var(--radius-lg);
  background: linear-gradient(160deg, color-mix(in srgb, var(--gold, #f5b82e) 10%, var(--surface)), var(--surface) 55%);
  border: 1px solid color-mix(in srgb, var(--gold, #f5b82e) 35%, var(--border));
}
.sp-claim h3 { font-size: clamp(1.3rem, 2vw, 1.7rem); margin: 0 0 8px; }
.sp-claim-intro p { margin: 0 0 14px; color: var(--text-muted); }
.sp-claim-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 0.9rem; color: var(--text-muted); counter-reset: s; }
.sp-claim-steps li { display: flex; gap: 10px; align-items: flex-start; counter-increment: s; }
.sp-claim-steps li::before {
  content: counter(s); flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  font: 700 0.78rem/1 var(--font-head); color: #1a1205; background: var(--gold, #f5b82e);
}
.sp-claim-form .form-grid + .form-grid, .sp-claim-form .field + .field { margin-top: 14px; }
.sp-claim-file {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px; border-radius: var(--radius-md);
  border: 1px dashed color-mix(in srgb, var(--gold, #f5b82e) 55%, var(--border)); background: color-mix(in srgb, var(--bg-elevated) 70%, transparent);
}
.sp-claim-file input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sp-claim-file label.btn { margin: 0; }
.sp-claim-file:focus-within { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.sp-claim-file-name { font-size: 0.86rem; color: var(--text-muted); overflow-wrap: anywhere; }
.sp-claim-check { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; font-size: 0.9rem; color: var(--text); }
.sp-claim-check input { margin-top: 3px; }
.sp-claim-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 18px; }
.sp-claim-msg { margin: 0; font-size: 0.88rem; color: var(--text-muted); }
.sp-claim-msg.is-bad { color: #ff8a8a; }
.sp-claim-done { text-align: center; padding: 18px 8px; }
.sp-claim-done .check { width: 52px; height: 52px; margin: 0 auto 12px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--success) 18%, transparent); color: var(--success); }
.sp-claim-done .check svg { width: 26px; height: 26px; }
.sp-claim-done h4 { margin: 0 0 6px; font-size: 1.2rem; }
.sp-claim-done p { margin: 0; color: var(--text-muted); }
@media (max-width: 860px) { .sp-claim { grid-template-columns: minmax(0, 1fr); } }
/* The receipt is required (founder): a clear label, a note, and a box that turns green once a file is added. */
.sp-claim-receipt-label { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 0.92rem; }
.sp-req { padding: 2px 8px; border-radius: 999px; font-size: 0.7rem; font-weight: 800; color: #1a1205; background: var(--gold, #f5b82e); }
.sp-claim-receipt-note { margin: 2px 0 8px; font-size: 0.84rem; color: var(--text-muted); }
.sp-claim-file { border-width: 2px; padding: 14px; }
.sp-claim-file.has-file { border-style: solid; border-color: var(--success); background: color-mix(in srgb, var(--success) 10%, transparent); }
.sp-claim-file.has-file .sp-claim-file-name { color: var(--text); font-weight: 600; }
.sp-claim-file.has-file .sp-claim-file-name { display: inline-flex; align-items: center; gap: 8px; }
.sp-claim-file.has-file .sp-claim-file-name::before { /* a drawn tick, so it looks the same in every font */
  content: ""; flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--success) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 11px no-repeat;
}
.sp-claim-file.is-missing { border-color: #ff8a8a; animation: sp-shake 0.4s ease; }
.sp-claim-form button[type="submit"]:disabled { opacity: 0.55; cursor: not-allowed; box-shadow: none; filter: saturate(0.6); }
@keyframes sp-shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@media (prefers-reduced-motion: reduce) { .sp-claim-file.is-missing { animation: none; } }