.donate-inner {
  max-width: 1040px;
  margin: 0 auto;
  padding: 64px 32px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

html { scroll-behavior: smooth; }
.donate-hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  background: #000 url("/assets/images/cover2.jpg") center/cover no-repeat;
  position: relative;
  color: #fff;
}
.donate-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
}
.donate-hero .donate-inner { position: relative; z-index: 2; }

.donate-hero .heading, .donate-hero .lead { color: #fff; }
.hero-cta { background: #ffd23c; color:#000; display: inline-block; min-width: 180px; max-width: 320px; text-align: center; margin: 0 auto; font-size: 1.25rem; font-weight: 700; box-shadow: 0 2px 8px rgba(0,0,0,0.07); transition: filter .2s; }
.hero-cta:hover { filter: brightness(0.9); }
.center-cta { display: block !important; margin: 0 auto !important; }

.donate-hero .heading { max-width: 620px; }
.lead { max-width: 760px; line-height: 1.55; }
.primary-cta { margin-top: 8px; }

.pill-button {
  border-radius: 40px !important;
  padding: 16px 36px !important;
  font-weight: 600;
  letter-spacing: .5px;
}
.pill-button.large-button { padding: 18px 44px !important; }

.donation-form {
  display: flex;
  flex-direction: column;
  gap: 32px;
  max-width: 760px;
}
.donation-form-disabled {
    opacity: 0.5;
    pointer-events: none;
    filter: grayscale(0.7);
    background: #eee;
    border-radius: 16px;
    padding: 32px 24px;
    margin-bottom: 24px;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
}
.donation-form-disabled-message {
  color: #444;
  font-size: 1.1rem;
  text-align: center;
}
.center-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.donate-alt-heading {
  padding-top: 18px;
  padding-bottom: 18px;
}
.donate-alt-methods ul {
  margin: 0;
  padding-left: 1.2em;
  font-size: 1.08rem;
  list-style: disc inside;
}
.donate-alt-methods a {
  display: inline-block;
  margin-bottom: 4px;
  color: #222;
  text-decoration: underline;
  font-weight: 500;
  transition: color .2s;
}
.donate-alt-methods a:hover {
  color: #0077b6;
}
.donate-alt-methods {
  background: #fffbe9;
  border-radius: 14px;
  padding: 24px 18px;
  margin-top: 12px;
  box-shadow: 0 1px 6px 0 rgba(0,0,0,0.04);
}
.donate-alt-methods h3 {
  margin-top: 0;
  font-size: 1.3rem;
  font-weight: 700;
}
.donate-alt-methods ul {
  margin: 0;
  padding-left: 1.2em;
  font-size: 1.08rem;
}
.donate-alt-methods li {
  margin-bottom: 0.7em;
}
.donation-form fieldset {
  border: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.sub-heading {
  font-size: 1.05rem;
  font-weight: 600;
  width: 100%;
}
.frequency-group .freq-option {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  padding: 10px 16px;
  border-radius: 28px;
  cursor: pointer;
  font-size: 0.95rem;
}
.frequency-group input { accent-color: #222; }

.amount-group { flex-direction: column; }
.amount-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.amount-buttons label {
  background: #fff;
  padding: 12px 18px;
  border-radius: 40px;
  cursor: pointer;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
  transition: background .25s ease, color .25s ease;
}
.amount-buttons input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.amount-buttons label span { pointer-events: none; }
.amount-buttons label:has(input:checked) {
  background: #222;
  color: #fff;
}
.custom-amount-row { width: 100%; }
.custom-amount-row input {
  width: 220px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid #ccc;
  font-size: 1rem;
}

.input-row {
  display: flex;
  gap: 16px;
  width: 100%;
}
.input-row input {
  flex: 1;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid #bbb;
  font-size: 0.95rem;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.input-row input:focus,
.custom-amount-row input:focus {
  outline: none;
  border-color: #222;
  box-shadow: 0 0 0 2px #222 inset;
}

.donate-submit-row {
  display: flex;
  align-items: center;
  gap: 24px;
}
.large-button { padding: 16px 28px; font-size: 1rem; }
.security-note { font-size: 0.75rem; letter-spacing: .5px; text-transform: uppercase; opacity: .75; }

/* Impact */
.impact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}
.impact-card {
  background: #fff;
  padding: 20px 20px 24px;
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.05);
  transition: transform .25s ease, box-shadow .25s ease;
}
.impact-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 22px rgba(0,0,0,0.08);
}
.transparency-line { font-size: 0.9rem; opacity: 0.85; margin-top: 8px; }

.donate-faq .faq-container { width: 100%; }
.donate-faq .faq-section-left { align-items: flex-start; }
.donate-faq .faq-item { width: 100%; }

.donate-links .link-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}
.mini-card {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  padding: 18px 16px;
  border-radius: 18px;
  text-align: center;
  font-weight: 500;
  transition: background .2s ease, transform .2s ease, color .2s ease;
}
.mini-card:hover {
  background: #222;
  color: #fff;
  transform: translateY(-4px);
}
.final-cta-row { margin-top: 8px; }

.visually-hidden {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

@media (max-width: 780px) {
  .donate-inner { padding: 56px 24px; }
  .input-row { flex-direction: column; }
  .donate-submit-row { flex-direction: column; align-items: flex-start; }
  .pill-button.large-button { width: 100%; text-align: center; }
}
@media (max-width: 780px) {
  .faq-container {
    padding-left: 5px;
  }
}