/* Volunteer New York! GT26 look for Bloomerang forms.
   Used two ways: (1) Bloomerang Form Settings → custom stylesheet for the hosted form page,
   (2) linked on /register where the form is embedded. Colours mirror src/styles/tokens.css. */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Source+Serif+4:opsz,wght@8..60,600;8..60,700&display=swap");

:root {
  --vny-navy: #062a4a; --vny-orange: #ff6a00; --vny-orange-text: #c24a00;
  --vny-cream: #fff9f0; --vny-sky: #d6e5f7; --vny-line: #e4ddd2; --vny-muted: #3d4f63;
}

/* Hosted page shell */
body { background: var(--vny-cream) !important; color: var(--vny-navy); font: 400 16px/1.6 Inter, system-ui, -apple-system, "Segoe UI", sans-serif; }
body h1, body h2, body h3 { font-family: "Source Serif 4", Georgia, serif; color: var(--vny-navy); letter-spacing: -0.01em; }

/* The form */
#registration-form, .registration-form, #donation-form, .donation-form {
  color: var(--vny-navy); font: 400 16px/1.6 Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
}
#registration-form h3, .registration-form h3 { font: 700 1.5rem/1.2 "Source Serif 4", Georgia, serif; margin: 1.5rem 0 0.75rem; }
#registration-form .section { margin-bottom: 1.5rem; }

#registration-form label, #registration-form .label { font-weight: 600; color: var(--vny-navy); }
#registration-form .required-star { color: var(--vny-orange-text); }

/* Ticket choices as cards */
#registration-form .registrationType .field.radio,
#registration-form .registrationType .radio {
  border: 1px solid var(--vny-line); border-radius: 14px; background: #fff;
  padding: 14px 16px; margin: 0 0 10px; transition: border-color .16s ease, background-color .16s ease;
}
#registration-form .registrationType .radio:hover { border-color: var(--vny-navy); }
#registration-form .registrationType input[type="radio"] { accent-color: var(--vny-orange); margin-right: 8px; }
#registration-form .registrationType input[type="radio"]:checked + label,
#registration-form .registrationType .radio:has(input:checked) { background: #fff3e8; border-color: var(--vny-orange); }

/* Inputs */
#registration-form input[type="text"], #registration-form input[type="email"], #registration-form input[type="tel"],
#registration-form input[type="number"], #registration-form select, #registration-form textarea {
  width: 100%; max-width: 100%; box-sizing: border-box; font: inherit; color: var(--vny-navy);
  background: #fff; border: 1px solid #b9b0a3; border-radius: 8px; padding: 12px 14px; min-height: 46px;
}
#registration-form input:focus, #registration-form select:focus, #registration-form textarea:focus {
  outline: 3px solid var(--vny-navy); outline-offset: 2px; border-color: var(--vny-navy);
}
#registration-form .field { margin-bottom: 14px; }
#registration-form .errors, #registration-form label.error, #registration-form .error { color: #b3261e; font-weight: 500; }

/* Summary */
#registration-form .registration-summary, #registration-form .registrationSummary {
  background: var(--vny-sky); border-radius: 14px; padding: 14px 16px; border: 0;
}
#registration-form .summary-total { font-weight: 700; }

/* Consent checkboxes */
#registration-form input[type="checkbox"] { accent-color: var(--vny-navy); width: 18px; height: 18px; }

/* Submit */
#registration-form .btn, #registration-form .btn-submit, #registration-form input[type="submit"], #registration-form button[type="submit"] {
  appearance: none; background: var(--vny-orange) !important; color: var(--vny-navy) !important; border: 0 !important;
  border-radius: 999px !important; padding: 14px 32px !important; font: 600 1rem/1 Inter, system-ui, sans-serif !important;
  cursor: pointer; box-shadow: none !important; text-shadow: none !important;
}
#registration-form .btn:hover, #registration-form .btn-submit:hover { filter: brightness(0.96); }
#registration-form .btn:focus-visible, #registration-form .btn-submit:focus-visible { outline: 3px solid var(--vny-navy); outline-offset: 3px; }

a { color: var(--vny-orange-text); }