/* ============================================================
   TunaGrow CBO — Donation Page Styles
   File: css/donation.css
   ============================================================ */

.donate-layout { max-width: 900px; margin: 0 auto; }

/* ── Why Donate ── */
.donate-why { margin-bottom: 50px; }
.donate-why h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.5rem; color: var(--earth); margin-bottom: 16px;
}
.donate-why p { font-size: 0.95rem; color: var(--muted); line-height: 1.75; margin-bottom: 20px; }

.impact-list { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.impact-list li { display: flex; gap: 12px; align-items: flex-start; }
.impact-list li span { font-size: 1.2rem; }
.impact-list li p { font-size: 0.88rem; color: var(--muted); line-height: 1.6; }

/* ── Payment Methods ── */
.payment-methods {
  background: var(--white); border-radius: 24px; padding: 36px;
  box-shadow: 0 8px 40px rgba(59,42,26,0.1); margin-bottom: 50px;
}
.payment-methods h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.4rem; color: var(--earth); margin-bottom: 24px; text-align: center;
}
.payment-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
.payment-item {
  text-align: center; padding: 24px 16px;
  border: 2px solid rgba(107,66,38,0.1); border-radius: 16px;
  transition: all 0.3s; background: var(--cream);
}
.payment-item:hover {
  border-color: var(--leaf); transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(74,124,63,0.12);
}
.payment-icon { font-size: 2.5rem; margin-bottom: 10px; }
.payment-item h4 { font-size: 0.9rem; font-weight: 700; color: var(--earth); margin-bottom: 4px; }
.payment-item p  { font-size: 0.75rem; color: var(--muted); line-height: 1.5; }

.payment-details {
  margin-top: 24px; padding: 20px;
  background: rgba(74,124,63,0.05); border-radius: 12px; text-align: center;
}
.payment-details p { font-size: 0.85rem; color: var(--soil); line-height: 1.8; }
.payment-details strong { color: var(--earth); }

/* ── Donate Contact Box ── */
.donate-contact {
  background: var(--white); border-radius: 24px; padding: 36px;
  box-shadow: 0 8px 40px rgba(59,42,26,0.1); text-align: center; margin-top: 40px;
}
.donate-contact h4 {
  font-family: 'Playfair Display', serif;
  font-size: 1.3rem; color: var(--earth); margin-bottom: 16px;
}
.donate-contact p { color: var(--muted); font-size: 0.95rem; line-height: 1.7; margin-bottom: 12px; }

/* ── Responsive ── */
@media (max-width: 900px) {
  .payment-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .payment-grid { grid-template-columns: 1fr; }
}