/* Structural responsive safeguards. These do not redesign inner pages. */
html, body { max-width: 100%; overflow-x: hidden; overflow-x: clip; }
.hbf-main, .hbf-container, .hbf-grid > *, .hbf-form-wrap, .hbf-content-card { min-width: 0; }
img, video, iframe, svg { max-width: 100%; }
input, select, textarea, button { max-width: 100%; }
.hbf-table-wrap { max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; -webkit-overflow-scrolling: touch; }
.hbf-table { min-width: 680px; }
.hbf-button, .hbf-header-cta, .hbf-link-button { white-space: normal; text-align: center; }
.hbf-entry-content, .hbf-cp-story-content, .hbf-form-wrap { overflow-wrap: anywhere; }

@media (max-width: 760px) {
  .hbf-content-card, .hbf-form-wrap { padding-inline: clamp(16px, 5vw, 24px); }
  .hbf-form-row, .hbf-form-grid, .hbf-dp-fields { grid-template-columns: minmax(0, 1fr); }
  .hbf-notice, .hbf-empty, .hbf-receipt { max-width: 100%; }
}

/* 2.2.2 clean interface fixes */
.hbf-dp-frequency button,
.hbf-cp-frequency button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 12px;
  line-height: 1.2;
  white-space: nowrap;
}
.hbf-dp-frequency button .hbf-svg-icon,
.hbf-cp-frequency button .hbf-svg-icon {
  width: 1rem;
  height: 1rem;
}
.hbf-dp-frequency button:disabled,
.hbf-dp-frequency button.is-disabled,
.hbf-cp-frequency button:disabled {
  opacity: 1;
  color: #718397;
  border-color: #dbe5ed;
  background: #f7fafc;
}

/* Keep the amount field as one control; generic form styles must not draw a second input box. */
.hbf-dp-form .hbf-dp-custom-amount,
.hbf-cp-custom-amount {
  min-height: 48px;
  overflow: hidden;
  border-color: #ccdbe6;
  background: #fff;
  box-shadow: none;
}
.hbf-dp-form .hbf-dp-custom-amount > span,
.hbf-cp-custom-amount > span {
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 43px;
  padding: 0 12px;
  border-right: 1px solid #e2eaf0;
  background: #f8fafc;
}
.hbf-dp-form .hbf-dp-custom-amount input[type="number"],
.hbf-cp-custom-amount input[type="number"] {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: 46px !important;
  margin: 0 !important;
  padding: 0 12px !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.hbf-dp-form .hbf-dp-custom-amount:focus-within,
.hbf-cp-custom-amount:focus-within {
  border-color: var(--hbf-primary);
  box-shadow: 0 0 0 3px rgba(11,143,106,.1);
}
.hbf-dp-form .hbf-dp-custom-amount input[type="number"]:focus,
.hbf-cp-custom-amount input[type="number"]:focus {
  border: 0 !important;
  box-shadow: none !important;
}

/* Slightly lighter surfaces without changing page structure. */
.hbf-card,
.hbf-form-wrap,
.hbf-content-card,
.hbf-dp-form,
.hbf-dp-campaign-card,
.hbf-dp-side-card,
.hbf-cp-overview-card,
.hbf-cp-donate-card,
.hbf-cp-glance-card,
.hbf-cp-security-card,
.hbf-cp-tabs-card {
  border-color: #e0e8ef !important;
  box-shadow: 0 8px 24px rgba(18, 52, 82, .055) !important;
}
.hbf-dp-form-head p,
.hbf-cp-excerpt,
.hbf-section-head p {
  text-wrap: pretty;
}

@media (max-width: 520px) {
  .hbf-dp-frequency,
  .hbf-cp-frequency { gap: 8px; }
  .hbf-dp-frequency button,
  .hbf-cp-frequency button {
    min-width: 0;
    padding-inline: 8px;
    font-size: .76rem;
  }
  .hbf-dp-form .hbf-dp-custom-amount,
  .hbf-cp-custom-amount { min-height: 46px; }
}