/* ============================================================
   Onate lead-qualification form — styles
   Hosted: https://lp.onate.com/hubfs/external-forms/forms-style.css
   Pairs with the intl-tel-input stylesheet, which is loaded separately
   via a CDN <link> in the page markup (this file must come AFTER it so
   the .iti override wins). Edit here → re-upload to HubSpot File Manager
   → bump the ?v= on the <link> in the page markup to bust the cache.
   ============================================================ */

#onate-lead-form {
  --onf-accent: #000000; --onf-accent-hover: #222222;
  max-width: 660px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: #33475b; box-sizing: border-box;
}
#onate-lead-form *, #onate-lead-form *::before, #onate-lead-form *::after { box-sizing: inherit; }
#onate-lead-form .onf-steps { font-size: 12px; color: #7c98b6; margin-bottom: 14px; text-transform: uppercase; letter-spacing: .04em; }
#onate-lead-form .onf-row { display: flex; gap: 16px; margin-bottom: 18px; }
#onate-lead-form .onf-field { flex: 1; display: flex; flex-direction: column; min-width: 0; }
/* controls bottom-align across a row, so inputs line up even when one field has a sub-label and its neighbour doesn't */
#onate-lead-form .onf-field > input,
#onate-lead-form .onf-field > select,
#onate-lead-form .onf-field > textarea,
#onate-lead-form .onf-field > .iti { margin-top: auto; }
#onate-lead-form .onf-full { flex-basis: 100%; }
/* fixed-height label + help slots so inputs across a row always line up */
#onate-lead-form label { font-size: 13px; font-weight: 600; color: #33475b; min-height: 18px; }
#onate-lead-form .onf-req { color: #f2545b; }
#onate-lead-form .onf-help { display: block; min-height: 16px; font-size: 12px; color: #7c98b6; margin: 4px 0 6px; }
#onate-lead-form input, #onate-lead-form select, #onate-lead-form textarea {
  font-size: 16px; font-family: inherit; color: #33475b;
  background: #f5f8fa; border: 1px solid #cbd6e2; border-radius: 3px; padding: 10px 12px; width: 100%;
}
#onate-lead-form input:focus, #onate-lead-form select:focus, #onate-lead-form textarea:focus {
  outline: none; border-color: #7fbfe8; background: #fff;
}
#onate-lead-form select:disabled { background: #eef2f6; color: #9fb1c6; cursor: not-allowed; }
#onate-lead-form textarea { resize: vertical; }
#onate-lead-form .iti { width: 100%; }
#onate-lead-form .onf-radios { display: flex; gap: 22px; padding-top: 4px; }
#onate-lead-form .onf-radio { font-weight: 400; font-size: 15px; display: flex; align-items: center; gap: 7px; cursor: pointer; }
#onate-lead-form .onf-radio input { width: auto; }
#onate-lead-form .onf-privacy { font-size: 12px; color: #7c98b6; line-height: 1.5; margin: 14px 0 8px; }
#onate-lead-form .onf-consent { margin: 8px 0; }
#onate-lead-form .onf-consent label { font-weight: 400; font-size: 13px; display: flex; align-items: flex-start; gap: 8px; cursor: pointer; min-height: 0; }
#onate-lead-form .onf-consent input { width: auto; margin-top: 2px; flex: none; }
#onate-lead-form .onf-btn {
  margin-top: 6px; background: var(--onf-accent); color: #fff; border: none; border-radius: 3px;
  padding: 12px 30px; font-size: 15px; font-weight: 600; cursor: pointer; transition: background .15s ease;
}
#onate-lead-form .onf-btn:hover { background: var(--onf-accent-hover); }
#onate-lead-form .onf-btn:disabled { opacity: .6; cursor: default; }
#onate-lead-form .onf-btn-ghost { background: #fff; color: #33475b; border: 1px solid #cbd6e2; }
#onate-lead-form .onf-btn-ghost:hover { background: #f5f8fa; }
#onate-lead-form .onf-nav { display: flex; gap: 12px; margin-top: 8px; }
#onate-lead-form .onf-msgbox { margin-top: 16px; padding: 12px 14px; border-radius: 3px; font-size: 14px; }
#onate-lead-form .onf-ok  { background: #e5f5ec; color: #1c7a43; }
#onate-lead-form .onf-err { background: #fdeaea; color: #b6403f; }
@media (max-width: 540px) { #onate-lead-form .onf-row { flex-direction: column; gap: 18px; } }