/* Shared by the public forms. Kept out of inline styles so a strict Content-Security-Policy can be used. */

/* The trap field is moved off-screen rather than display:none, which some bots detect. */
.hp-field {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* The validation helper always renders its message element; show it only when it has a message. */
label.field-error.field-validation-valid { display: none; }

/* Form-level message (rate limit, verification failed). */
.form-error { color: #dc2626; font-size: 14px; line-height: 1.5; margin: 12px 0 0; }
.form-error ul { list-style: none; margin: 0; padding: 0; }
.validation-summary-valid { display: none; }

/* Buttons for pages added after the supplied designs (the prebuilt Tailwind file only has classes the supplied pages use). */
.btn-primary, .btn-secondary {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 24px; border-radius: 12px;
  font: inherit; font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer;
  transition: background-color .15s, border-color .15s;
}
.btn-primary { background: #ff3158; color: #fff; border: 1px solid #ff3158; }
.btn-primary:hover { background: #ca003d; border-color: #ca003d; }
.btn-secondary { background: #fff; color: #171717; border: 1px solid #d4d4d4; }
.btn-secondary:hover { border-color: #ff3158; }
.btn-row { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 32px; }

/* Error pages (reuse the thank-you card) */
.error-page .thank-you-icon{background:#fff0f4;color:var(--dark-pink)}
.error-page .error-reference{margin-top:20px;color:var(--muted);font-size:14px}
.error-page .error-reference strong{font-family:Consolas,"Courier New",monospace;letter-spacing:.06em}

/* Payment status page (reuses the thank-you card) */
.payment-card .lead{max-width:560px}
.payment-summary{max-width:440px;margin:28px auto 0;padding:4px 20px;text-align:left;background:#fafafa;border:1px solid var(--line);border-radius:12px}
.payment-summary>div{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--line);font-size:15px}
.payment-summary>div:last-child{border-bottom:0}
.payment-summary dt{color:var(--muted)}
.payment-summary dd{margin:0;font-weight:600;text-align:right}
.payment-detail{max-width:520px;margin:24px auto 0;color:var(--muted);font-size:16px;line-height:1.6}
.payment-processing .thank-you-icon{background:#f3f4f6;color:#404040}
.payment-form{display:contents}
.thank-you-actions button{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 24px;border:1px solid var(--pink);border-radius:12px;font:inherit;font-size:14px;font-weight:600;cursor:pointer;transition:background-color .2s,color .2s}
.thank-you-actions button.thank-you-primary{color:white;background:var(--pink)}
.thank-you-actions button.thank-you-primary:hover{background:var(--dark-pink);border-color:var(--dark-pink)}
.thank-you-actions button.thank-you-secondary{color:var(--dark-pink);background:white}
.thank-you-actions button.thank-you-secondary:hover{background:#fff0f4}
.thank-you-actions button:focus-visible{outline:2px solid var(--pink);outline-offset:4px}
@media(max-width:767px){.thank-you-actions button{width:100%}.payment-summary{padding:2px 16px}}

/* Confirming your payment: a spinner instead of an icon, and the link as plain text */
.payment-spinner{display:block;width:30px;height:30px;border:3px solid #d4d4d4;border-top-color:var(--pink);border-radius:50%;animation:payment-spin .9s linear infinite}
@keyframes payment-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.payment-spinner{animation-duration:3s}}
.payment-link{color:var(--dark-pink);text-decoration:underline;text-underline-offset:3px}
.payment-cancelled .thank-you-icon{background:#f3f4f6;color:#404040}