/* ==========================================================================
   IBRA donate
   One section: video fills it, copy and form sit in a panel over the top.
   The section grows with the form, so a long branching form is never
   trapped scrolling inside a fixed-height banner.
   ========================================================================== */

.ibra-donate {
  position: relative;
  display: flex;
  align-items: center;
  min-height: var(--sec-min, 720px);
  padding-block: 56px;
  overflow: hidden;
  isolation: isolate;
  background: var(--sec-tint, #0B1E2B);
}

/* Background --------------------------------------------------------------- */

.ibra-donate__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}

.ibra-donate__media--empty { background: #14303F; }

/* A light wash over the whole frame, so the footage reads as one surface
   rather than competing with the panel for attention. */
.ibra-donate::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: rgba(11, 30, 43, var(--sec-shade, .25));
}

/* Panel -------------------------------------------------------------------- */

/* The section is full-bleed, but its contents line up with the rest of the
   site: the same 1240px container and the same side padding the theme gives
   a dnd-section (40px 1rem), so the panel's right edge sits exactly where
   every other section's content ends rather than 14px further in. */
.ibra-donate__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--ibra-max, 1240px);
  margin-inline: auto;
  padding-inline: var(--ibra-gutter, 1rem);
  display: flex;
}

.ibra-donate--left   .ibra-donate__inner { justify-content: flex-start; }
.ibra-donate--center .ibra-donate__inner { justify-content: center; }
.ibra-donate--right  .ibra-donate__inner { justify-content: flex-end; }

.ibra-donate__panel {
  width: 100%;
  max-width: var(--panel-w, 560px);
  padding: 38px 40px 42px;
  border-radius: 4px;
  /* color-mix keeps one colour field driving both the fill and its opacity,
     rather than asking an editor to pick a colour and an alpha separately. */
  background: color-mix(in srgb,
              var(--panel-bg, #0E2233) calc(var(--panel-a, .72) * 100%),
              transparent);
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .55);
}

/* Older browsers ignore color-mix; this is the fallback they land on. */
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  .ibra-donate__panel { background: rgba(14, 34, 51, .78); }
}

.ibra-donate.has-blur .ibra-donate__panel {
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
}

/* Type --------------------------------------------------------------------- */

.ibra-donate__heading {
  color: #fff;
  font-size: clamp(1.5rem, 2.4vw, 1.95rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin: 0 0 16px;
  text-align: center;
}

.ibra-donate__copy {
  color: #DCE7F0;
  font-size: .92rem;
  line-height: 1.6;
  margin-bottom: 30px;
}

.ibra-donate__copy p { margin: 0 0 1em; font-size: .92rem !important; }
.ibra-donate__copy p:last-child { margin-bottom: 0; }
.ibra-donate__copy strong,
.ibra-donate__copy strong span { font-weight: 700 !important; color: #fff; }

.ibra-donate__copy a {
  color: #fff !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ibra-donate__form-heading {
  color: #fff;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, .22);
}

.ibra-donate__notice,
.ibra-donate__hint {
  background: rgba(255, 255, 255, .92);
  border-radius: 8px;
  padding: 14px 18px;
  font-size: .86rem;
  line-height: 1.5;
  color: #44555F;
  margin: 0 0 22px;
}

.ibra-donate__notice strong,
.ibra-donate__hint strong { font-weight: 700; }

/* ==========================================================================
   The HubSpot form, on the dark panel
   The theme wraps forms in its own white panel and floats labels beside
   inputs. Both are unwound before the light-on-dark treatment is applied.
   ========================================================================== */

.ibra-donate__form,
.ibra-donate__form form,
.ibra-donate__form .hs-form,
.ibra-donate__form .hs_cos_wrapper,
.ibra-donate__form .hs-form-private,
.ibra-donate__form fieldset {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  max-width: none !important;
}

.ibra-donate__form .hs-form-field {
  display: block !important;
  float: none !important;
  width: 100% !important;
  margin-bottom: 16px !important;
}

.ibra-donate__form .hs-form-field > label,
.ibra-donate__form legend {
  display: block !important;
  float: none !important;
  width: auto !important;
  background: none !important;
  color: #E7EFF7 !important;
  font-size: .86rem !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  margin: 0 0 6px !important;
  padding: 0 !important;
}

.ibra-donate__form .hs-form-field > label .hs-form-required { color: #FFC9C9 !important; }

.ibra-donate__form .input { margin: 0 !important; }

/* Two-up rows keep a real gap between the columns */
.ibra-donate__form .form-columns-2,
.ibra-donate__form .form-columns-3 { display: flex !important; gap: 16px; }
.ibra-donate__form .form-columns-2 .hs-form-field,
.ibra-donate__form .form-columns-3 .hs-form-field { flex: 1 1 0; min-width: 0; }

.ibra-donate__form input[type="text"],
.ibra-donate__form input[type="email"],
.ibra-donate__form input[type="tel"],
.ibra-donate__form input[type="number"],
.ibra-donate__form select,
.ibra-donate__form textarea {
  width: 100% !important;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, .42) !important;
  border-radius: 3px !important;
  background: rgba(255, 255, 255, .1) !important;
  color: #fff !important;
  padding: 11px 13px !important;
  font-size: .92rem !important;
  line-height: 1.4 !important;
  box-shadow: none !important;
}

/* A native select renders its options on the OS background, so on a dark
   panel the closed control is light-on-dark while the open list is the
   reverse. Forcing a dark option colour keeps the two consistent. */
.ibra-donate__form select option { color: #1F2933; background: #fff; }

.ibra-donate__form select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23D6E0E8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 13px center !important;
  padding-right: 38px !important;
}

.ibra-donate__form textarea { min-height: 110px; resize: vertical; }

.ibra-donate__form input::placeholder,
.ibra-donate__form textarea::placeholder { color: rgba(255, 255, 255, .62) !important; }

.ibra-donate__form input:focus,
.ibra-donate__form select:focus,
.ibra-donate__form textarea:focus {
  outline: none !important;
  border-color: #fff !important;
  background: rgba(255, 255, 255, .17) !important;
}

/* Chrome repaints autofilled fields solid, which would punch a light hole
   through the panel the moment a browser fills in an email. */
.ibra-donate__form input:-webkit-autofill {
  -webkit-text-fill-color: #fff !important;
  -webkit-box-shadow: 0 0 0 1000px rgba(255, 255, 255, .13) inset !important;
}

/* Dependent fields ---------------------------------------------------------
   The wrapper holds the controlling question AND the fields it reveals, so it
   is styled as one group rather than as an indented answer. The panel appears
   only once something has been revealed — a lone question shouldn't look
   boxed-in. */

.ibra-donate__form .hs-dependent-field {
  margin: 0 0 16px !important;
  padding: 0;
  border-left: 0;
}

.ibra-donate__form .hs-dependent-field:has(> .hs-form-field + .hs-form-field) {
  padding: 16px 16px 2px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .05);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .10);
}

.ibra-donate__form .hs-dependent-field .hs-form-field:last-child { margin-bottom: 0 !important; }

/* Checkbox and radio groups sit inside .inputs-list, out of reach of the
   label rule above. */
.ibra-donate__form .inputs-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.ibra-donate__form .inputs-list > li {
  margin: 0 0 9px !important;
  padding: 0 !important;
  list-style: none !important;
}

.ibra-donate__form .inputs-list label,
.ibra-donate__form .inputs-list label span {
  display: flex !important;
  align-items: flex-start;
  gap: 10px;
  color: #E7EFF7 !important;
  font-size: .88rem !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  cursor: pointer;
}

.ibra-donate__form input[type="checkbox"],
.ibra-donate__form input[type="radio"] {
  flex: none;
  width: 16px !important;
  height: 16px !important;
  margin: 2px 0 0 !important;
  padding: 0 !important;
  accent-color: #fff;
  cursor: pointer;
}

/* The explanatory notes under Anonymous and the tribute options */
.ibra-donate__form .hs-richtext,
.ibra-donate__form .hs-field-desc {
  color: #C3D2DF !important;
  font-size: .82rem !important;
  line-height: 1.55;
  margin: 6px 0 0 !important;
}

.ibra-donate__form .hs-richtext p { margin: 0 0 .5em; font-size: .82rem !important; }
.ibra-donate__form .hs-richtext p:last-child { margin-bottom: 0; }

.ibra-donate__form a { color: #fff !important; text-decoration: underline; }

/* Submit ------------------------------------------------------------------- */

.ibra-donate__form .hs-submit { margin-top: 22px; }
.ibra-donate__form .actions { padding: 0 !important; margin: 0 !important; }

.ibra-donate__form .hs-button,
.ibra-donate__form input[type="submit"] {
  background: #fff !important;
  color: #16222B !important;
  border: 0 !important;
  border-radius: 3px !important;
  padding: 14px 40px !important;
  font-size: .84rem !important;
  font-weight: 700 !important;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  width: auto !important;
  transition: opacity .2s ease, transform .2s ease;
}

.ibra-donate__form .hs-button:hover,
.ibra-donate__form input[type="submit"]:hover {
  opacity: .9;
  transform: translateY(-1px);
}

.ibra-donate__form .hs-error-msg,
.ibra-donate__form .hs-error-msgs label {
  color: #FFD4D4 !important;
  font-size: .83rem !important;
  font-weight: 500 !important;
  margin-top: 5px !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
  clip: auto !important;
  overflow: visible !important;
}

/* The inline thank-you that replaces the form */
.ibra-donate__form .submitted-message {
  color: #E7EFF7 !important;
  font-size: 1rem;
  line-height: 1.6;
}

/* ==========================================================================
   Giving method button
   Fixed to the lower right, revealed once the form reports a submission.
   ========================================================================== */

.ibra-donate-cta {
  position: fixed;
  right: 26px;
  bottom: 26px;
  z-index: 950;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 7px;

  opacity: 0;
  visibility: hidden;
  transform: translateY(18px) scale(.96);
  transition:
    opacity .34s ease,
    transform .46s cubic-bezier(.34, 1.28, .5, 1),
    visibility .34s;
}

.ibra-donate-cta.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.ibra-donate-cta__button {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 16px 28px;
  background: var(--cta-bg, #8C1D2F);
  color: #fff !important;
  border-radius: 4px;
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-decoration: none !important;
  box-shadow:
    0 2px 6px rgba(16, 38, 48, .2),
    0 16px 34px -10px rgba(140, 29, 47, .55);
  transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.ibra-donate-cta__button svg { width: 26px; height: 10px; flex: none; transition: transform .28s ease; }

.ibra-donate-cta__button:hover {
  background: #6F1626;
  transform: translateY(-2px);
  box-shadow:
    0 3px 8px rgba(16, 38, 48, .24),
    0 22px 44px -10px rgba(140, 29, 47, .6);
}

.ibra-donate-cta__button:hover svg { transform: translateX(5px); }

.ibra-donate-cta__note {
  margin: 0;
  font-size: .74rem;
  color: #5B6770;
  background: rgba(255, 255, 255, .92);
  padding: 3px 9px;
  border-radius: 3px;
}

/* The back-to-top button lives in the same corner, so it steps up out of
   the way once this appears. */
body.has-ibra-giving .ibra-to-top { bottom: 132px; }

/* Responsive --------------------------------------------------------------- */

@media (max-width: 1023px) {
  .ibra-donate__panel { padding: 32px 30px 36px; }
}

@media (max-width: 767px) {
  .ibra-donate {
    padding-block: 32px;
    min-height: 0;
    align-items: stretch;
  }

  /* Panel takes the full width: a 560px card on a phone would be the whole
     screen anyway, and the video behind it is barely visible. */
  .ibra-donate__panel { max-width: none; padding: 26px 22px 30px; }

  .ibra-donate__form .form-columns-2,
  .ibra-donate__form .form-columns-3 { flex-direction: column !important; gap: 0; }
  .ibra-donate__form .form-columns-2 .hs-form-field,
  .ibra-donate__form .form-columns-3 .hs-form-field { margin-bottom: 16px !important; }

  .ibra-donate__form .hs-dependent-field:has(> .hs-form-field + .hs-form-field) {
    padding: 14px 12px 2px;
  }

  /* Full-width bar rather than a floating pill */
  .ibra-donate-cta {
    right: 12px;
    left: 12px;
    bottom: 12px;
    align-items: stretch;
  }

  .ibra-donate-cta__button { justify-content: center; padding: 15px 20px; }
  .ibra-donate-cta__note { text-align: center; }

  body.has-ibra-giving .ibra-to-top { bottom: 118px; }
}

@media (prefers-reduced-motion: reduce) {
  .ibra-donate-cta,
  .ibra-donate-cta__button,
  .ibra-donate-cta__button svg { transition: none !important; transform: none !important; }
}

/* ==========================================================================
   Forms from the NEW builder

   These render INSIDE AN IFRAME, so nothing in this file reaches the fields.
   The payload confirms it: "inferredFormType":"framed", alongside
   parentFrameMounted timings that only exist when there is a parent frame.

   Labels, inputs, dropdowns and buttons are therefore styled from
   css/ibra-donate-form.css, which is loaded into the form itself through
   Form editor -> Style -> Advanced -> custom stylesheet. An earlier block of
   hsfc-* rules lived here and did nothing; it has been removed rather than
   left to look as though the form were styled from the page.

   What the page CAN still control is the frame: its size, and making sure
   the theme does not paint a white card around it.
   ========================================================================== */

/* The embed container. Transparent, so the panel behind it carries the
   surface — the form is meant to read as part of the panel, not as a card
   sitting on it. */

.ibra-donate .ibra-donate__form--v4 {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Before the form loads, the container has no height and the panel jumps
   when it arrives. This holds the space. */
.ibra-donate .ibra-donate__form--v4 .hs-form-frame {
  display: block;
  width: 100%;
  min-height: 160px;
}

/* The frame sizes itself to its content and reports the height back, so it
   needs no border, no scrolling and no inherited colour scheme. */
.ibra-donate .ibra-donate__form--v4 iframe {
  display: block !important;
  width: 100% !important;
  border: 0 !important;
  background: transparent !important;
  color-scheme: normal;
}

/* The hidden submission-handler iframe must never take up space */
.ibra-donate .ibra-donate__form iframe[name^="submission_handler"],
.ibra-donate .ibra-donate__form iframe[style*="display: none"] {
  display: none !important;
  height: 0 !important;
}

/* ── The form rendered in the page ────────────────────────────────────────
   The HubL form tag renders a new-builder form into the page itself rather
   than into the embed script's sealed iframe, so these rules reach it. This
   is the live path; the embed option below is the fallback.
   ------------------------------------------------------------------------ */

.ibra-donate .ibra-donate__form .hsfc-Form,
.ibra-donate .ibra-donate__form .hsfc-FormWrapper,
.ibra-donate .ibra-donate__form .hsfc-Step,
.ibra-donate .ibra-donate__form .hsfc-Step__Content {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
}

/* Rows: two fields share a line, one spans it, and an empty row — a closed
   branch — takes no space rather than leaving a gap. */
.ibra-donate .ibra-donate__form .hsfc-Row {
  display: flex !important;
  flex-wrap: wrap;
  gap: 0 16px;
  margin: 0 0 16px !important;
}

.ibra-donate .ibra-donate__form .hsfc-Row > * { flex: 1 1 calc(50% - 8px); min-width: 0; }
.ibra-donate .ibra-donate__form .hsfc-Row > *:only-child { flex: 1 0 100%; }
.ibra-donate .ibra-donate__form .hsfc-Row:empty { display: none !important; margin: 0 !important; }

/* Labels — the text sits in two nested spans, each able to carry its own
   colour, so all three levels are set. */
.ibra-donate .ibra-donate__form .hsfc-FieldLabel,
.ibra-donate .ibra-donate__form .hsfc-FieldLabel span,
.ibra-donate .ibra-donate__form .hsfc-FieldLabel span span {
  color: #E7EFF7 !important;
  font-size: .86rem !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  background: none !important;
}

.ibra-donate .ibra-donate__form .hsfc-FieldLabel { display: block; margin: 0 0 6px !important; }
.ibra-donate .ibra-donate__form .hsfc-FieldLabel span { display: inline; margin: 0 !important; }

.ibra-donate .ibra-donate__form .hsfc-FieldLabel__RequiredIndicator,
.ibra-donate .ibra-donate__form .hsfc-FieldLabel span[class*="equired"] { color: #FFC9C9 !important; }

/* Inputs */
.ibra-donate .ibra-donate__form .hsfc-TextInput,
.ibra-donate .ibra-donate__form .hsfc-TextareaInput,
.ibra-donate .ibra-donate__form .hsfc-NumberInput,
.ibra-donate .ibra-donate__form .hsfc-DateInput,
.ibra-donate .ibra-donate__form [class*="hsfc-TextInput"] {
  width: 100% !important;
  box-sizing: border-box !important;
  background-color: #24384A !important;
  background-image: none !important;
  border: 1px solid #7E93A5 !important;
  border-radius: 3px !important;
  color: #fff !important;
  font-family: inherit !important;
  font-size: .92rem !important;
  line-height: 1.4 !important;
  padding: 11px 13px !important;
  box-shadow: none !important;
}

.ibra-donate .ibra-donate__form .hsfc-TextareaInput { min-height: 110px !important; resize: vertical; }

.ibra-donate .ibra-donate__form ::placeholder { color: rgba(255, 255, 255, .62) !important; opacity: 1; }

.ibra-donate .ibra-donate__form input:focus,
.ibra-donate .ibra-donate__form textarea:focus {
  border-color: #fff !important;
  background-color: #2C4256 !important;
  outline: none !important;
}

.ibra-donate .ibra-donate__form input:-webkit-autofill {
  -webkit-text-fill-color: #fff !important;
  -webkit-box-shadow: 0 0 0 1000px #24384A inset !important;
}

/* ── Dropdowns ──────────────────────────────────────────────────────────
   Not a native select: a readonly input acting as a combobox, with a
   floating panel beside it. The panel, the list INSIDE it and the search
   box each paint their own background, so all three are set — styling only
   the outer panel leaves the list white under light text. */

.ibra-donate .ibra-donate__form .hsfc-DropdownInput {
  position: relative;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
}

.ibra-donate .ibra-donate__form .hsfc-DropdownInput .hsfc-TextInput,
.ibra-donate .ibra-donate__form .hsfc-TextInput--button {
  width: 100% !important;
  padding-right: 38px !important;
  cursor: pointer;
}

.ibra-donate .ibra-donate__form .hsfc-DropdownInput__Caret,
.ibra-donate .ibra-donate__form [class*="Caret"] { color: #D6E0E8 !important; }

.ibra-donate .ibra-donate__form .hsfc-DropdownInput__Caret span,
.ibra-donate .ibra-donate__form [class*="Caret"] span {
  border-top-color: #D6E0E8 !important;
  border-color: #D6E0E8 transparent transparent !important;
}

.ibra-donate .ibra-donate__form .hsfc-DropdownOptions {
  background: #162C3D !important;
  border: 1px solid #7E93A5 !important;
  border-radius: 3px !important;
  box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .6) !important;
  overflow: hidden;
  z-index: 20;
}

/* The white one */
.ibra-donate .ibra-donate__form .hsfc-DropdownOptions__List,
.ibra-donate .ibra-donate__form .hsfc-DropdownOptions__Search,
.ibra-donate .ibra-donate__form [class*="DropdownOptions__"] {
  background: transparent !important;
  margin: 0 !important;
  list-style: none !important;
}

.ibra-donate .ibra-donate__form .hsfc-DropdownOptions__List {
  padding: 4px !important;
  max-height: 240px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .3) transparent;
}

.ibra-donate .ibra-donate__form .hsfc-DropdownOptions__List::-webkit-scrollbar { width: 8px; }
.ibra-donate .ibra-donate__form .hsfc-DropdownOptions__List::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .3);
  border-radius: 4px;
}

.ibra-donate .ibra-donate__form .hsfc-DropdownOptions__Search { padding: 8px !important; }

.ibra-donate .ibra-donate__form .hsfc-DropdownOptions__Search .hsfc-TextInput {
  background-color: rgba(255, 255, 255, .08) !important;
  font-size: .88rem !important;
  padding: 8px 11px !important;
}

.ibra-donate .ibra-donate__form .hsfc-DropdownOptions__List__ListItem {
  color: #E7EFF7 !important;
  background: transparent !important;
  font-size: .9rem !important;
  line-height: 1.4;
  padding: 9px 11px !important;
  border-radius: 2px;
  cursor: pointer;
  list-style: none !important;
}

.ibra-donate .ibra-donate__form .hsfc-DropdownOptions__List__ListItem:hover,
.ibra-donate .ibra-donate__form .hsfc-DropdownOptions__List__ListItem:focus,
.ibra-donate .ibra-donate__form .hsfc-DropdownOptions__List__ListItem--selected {
  background: rgba(255, 255, 255, .12) !important;
  color: #fff !important;
  outline: none;
}

.ibra-donate .ibra-donate__form .hsfc-DropdownOptions__List__ListItem--selected { font-weight: 600 !important; }

/* Checkboxes and radios */
.ibra-donate .ibra-donate__form [class*="hsfc-CheckboxField"] label,
.ibra-donate .ibra-donate__form [class*="hsfc-RadioField"] label,
.ibra-donate .ibra-donate__form [class*="hsfc-BooleanCheckbox"] label {
  display: flex !important;
  align-items: flex-start;
  gap: 10px;
  color: #E7EFF7 !important;
  font-size: .88rem !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  margin: 0 0 9px !important;
  cursor: pointer;
}

/* ── Checkboxes and radios, drawn rather than tinted ─────────────────────
   accent-color painted the checked box white and left the browser to draw
   the tick, which on a white fill came out white — a ticked box looked
   identical to an empty one. These are built from scratch instead: a dark
   translucent box on the panel, and on :checked a white fill with the tick
   drawn in the panel's own navy, so the state is unmistakable.
   ------------------------------------------------------------------------ */

.ibra-donate .ibra-donate__form input[type="checkbox"],
.ibra-donate .ibra-donate__form input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px;
  margin: 1px 0 0 !important;
  padding: 0 !important;
  border: 1px solid #A9BDCC !important;
  border-radius: 3px !important;
  background-color: rgba(255, 255, 255, .08) !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}

.ibra-donate .ibra-donate__form input[type="radio"] { border-radius: 50% !important; }

.ibra-donate .ibra-donate__form input[type="checkbox"]:hover,
.ibra-donate .ibra-donate__form input[type="radio"]:hover {
  border-color: #fff !important;
  background-color: rgba(255, 255, 255, .16) !important;
}

.ibra-donate .ibra-donate__form input[type="checkbox"]:checked {
  background-color: #fff !important;
  border-color: #fff !important;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l3.4 3.4L11 1.6' fill='none' stroke='%2316222B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-size: 11px 9px !important;
}

.ibra-donate .ibra-donate__form input[type="radio"]:checked {
  background-color: #fff !important;
  border-color: #fff !important;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='4' fill='%2316222B'/%3E%3C/svg%3E") !important;
  background-size: 8px 8px !important;
}

.ibra-donate .ibra-donate__form input[type="checkbox"]:focus-visible,
.ibra-donate .ibra-donate__form input[type="radio"]:focus-visible {
  outline: 2px solid #fff !important;
  outline-offset: 2px;
}

/* Help text and rich text */
.ibra-donate .ibra-donate__form [class*="hsfc-RichText"],
.ibra-donate .ibra-donate__form [class*="hsfc-FieldDescription"],
.ibra-donate .ibra-donate__form [class*="hsfc-HelpText"] {
  color: #C3D2DF !important;
  font-size: .82rem !important;
  line-height: 1.55 !important;
}

.ibra-donate .ibra-donate__form [class*="hsfc-RichText"] p {
  color: #C3D2DF !important;
  font-size: .82rem !important;
  margin: 0 0 .5em !important;
}

/* Errors */
.ibra-donate .ibra-donate__form [class*="hsfc-Error"],
.ibra-donate .ibra-donate__form [class*="ErrorAlert"],
.ibra-donate .ibra-donate__form .hsfc-NavigationRow__Alerts {
  color: #FFD4D4 !important;
  font-size: .83rem !important;
}

.ibra-donate .ibra-donate__form [class*="ErrorAlert"] {
  background: rgba(255, 90, 90, .12) !important;
  border: 1px solid rgba(255, 150, 150, .5) !important;
  border-radius: 3px !important;
  padding: 10px 14px !important;
}

.ibra-donate .ibra-donate__form .hsfc-NavigationRow__Alerts:empty { display: none !important; }

/* Submit */
.ibra-donate .ibra-donate__form .hsfc-NavigationRow {
  padding: 0 !important;
  margin-top: 22px !important;
}

.ibra-donate .ibra-donate__form .hsfc-NavigationRow__Buttons {
  display: flex !important;
  justify-content: flex-start !important;
  gap: 12px;
  padding: 0 !important;
}

.ibra-donate .ibra-donate__form .hsfc-Button,
.ibra-donate .ibra-donate__form [class*="hsfc-Button"] {
  background-color: #fff !important;
  background-image: none !important;
  color: #16222B !important;
  border: 0 !important;
  border-radius: 3px !important;
  font-family: inherit !important;
  font-size: .84rem !important;
  font-weight: 700 !important;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 14px 40px !important;
  width: auto !important;
  box-shadow: none !important;
  cursor: pointer;
}

.ibra-donate .ibra-donate__form .hsfc-Button:hover,
.ibra-donate .ibra-donate__form [class*="hsfc-Button"]:hover {
  background-color: #EDF1F4 !important;
}

.ibra-donate .ibra-donate__form .hsfc-Button[aria-busy="true"],
.ibra-donate .ibra-donate__form .hsfc-Button:disabled { opacity: .65 !important; cursor: wait; }

/* Confirmation */
.ibra-donate .ibra-donate__form [class*="hsfc-Confirmation"],
.ibra-donate .ibra-donate__form [class*="SubmittedMessage"] {
  color: #E7EFF7 !important;
  font-size: 1rem !important;
  line-height: 1.6 !important;
  background: transparent !important;
}

.ibra-donate .ibra-donate__form [class*="hsfc-Confirmation"] p { color: #E7EFF7 !important; }

/* Screen-reader announcements, never shown */
.ibra-donate .ibra-donate__form .hsfc-LiveRegionContent {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

@media (max-width: 767px) {
  .ibra-donate .ibra-donate__form .hsfc-Row { gap: 0; }
  .ibra-donate .ibra-donate__form .hsfc-Row > * { flex: 1 0 100% !important; margin-bottom: 16px; }
  .ibra-donate .ibra-donate__form .hsfc-Button { width: 100% !important; padding: 15px 20px !important; }
}

/* ==========================================================================
   Dependent fields side by side
   The legacy editor renders these full width and stacked with no way to pair
   them. The real markup is one .hs-dependent-field wrapper holding the
   controlling field AND its dependents as siblings:

     fieldset.form-columns-1
       div.hs-dependent-field
         div.hs_donor_type          <- the control
         div.hs_organization_name   <- dependent
         div.hs_organization_type   <- dependent

   So the wrapper becomes the flex container, everything inside defaults to a
   full row, and named fields opt into half.
   ========================================================================== */

.ibra-donate .ibra-donate__form .hs-dependent-field {
  display: flex;
  flex-wrap: wrap;
  gap: 0 16px;
  width: 100%;
}

/* Full row by default — the control itself, and anything long: a note, a
   checkbox, an address line. */
.ibra-donate .ibra-donate__form .hs-dependent-field > .hs-form-field {
  flex: 1 0 100%;
  min-width: 0;
}

/* ── The fields that sit two-up ─────────────────────────────────────────
   Named by the property's internal name, which HubSpot puts on the field
   wrapper as hs_<internal_name>. Copy a line and swap the name to add more.
   They pair in source order, so two half-width fields next to each other in
   the form share a row. */

.ibra-donate .ibra-donate__form .hs-dependent-field > .hs_full_name,
.ibra-donate .ibra-donate__form .hs-dependent-field > .hs_email,
.ibra-donate .ibra-donate__form .hs-dependent-field > .hs_organization_name,
.ibra-donate .ibra-donate__form .hs-dependent-field > .hs_organization_type,
.ibra-donate .ibra-donate__form .hs-dependent-field > .hs_tribute_type,
.ibra-donate .ibra-donate__form .hs-dependent-field > .hs_honoree_name,
.ibra-donate .ibra-donate__form .hs-dependent-field > .hs_honorees_name,
.ibra-donate .ibra-donate__form .hs-dependent-field > .hs_recipient_email,
.ibra-donate .ibra-donate__form .hs-dependent-field > .hs_firstname,
.ibra-donate .ibra-donate__form .hs-dependent-field > .hs_lastname {
  flex: 1 1 calc(50% - 8px);
}

@media (max-width: 767px) {
  /* One column on a phone: a half-width field at that size is unusable */
  .ibra-donate .ibra-donate__form .hs-dependent-field > .hs-form-field {
    flex: 1 0 100% !important;
  }
}

/* ==========================================================================
   Conditions run from the module

   With "Run the conditions from here" on, every field sits flat on the form
   and module.js decides what shows. HubSpot still wraps fields in fieldsets
   it chooses itself, so those are dissolved with display: contents and the
   whole form becomes one wrapping row. A field is then full width unless a
   rule marks it half, wherever the fieldsets happen to fall.
   ========================================================================== */

.ibra-donate .ibra-donate__form.is-flow form.hs-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0 16px;
}

.ibra-donate .ibra-donate__form.is-flow form.hs-form > fieldset { display: contents; }

.ibra-donate .ibra-donate__form.is-flow .hs-form-field { flex: 1 0 100%; min-width: 0; }
.ibra-donate .ibra-donate__form.is-flow .hs-form-field.is-half { flex: 1 1 calc(50% - 8px); }

.ibra-donate .ibra-donate__form.is-flow form.hs-form > .hs_submit,
.ibra-donate .ibra-donate__form.is-flow form.hs-form > .hs-richtext,
.ibra-donate .ibra-donate__form.is-flow form.hs-form > .hs-dependent-field { flex: 1 0 100%; }

/* display: contents removes the fieldset from the box tree, so the gap rule
   above no longer reaches its children — the margin carries the spacing. */
.ibra-donate .ibra-donate__form.is-flow .form-columns-2,
.ibra-donate .ibra-donate__form.is-flow .form-columns-3 {
  display: contents !important;
}

/* A closed branch. Emptied and stripped of its required flag by the script,
   so it can neither block the submit nor send stale values. */
.ibra-donate .ibra-donate__form .ibra-cond-hidden { display: none !important; }

@media (max-width: 767px) {
  .ibra-donate .ibra-donate__form.is-flow .hs-form-field.is-half {
    flex: 1 0 100%;
  }
}