:root{
  --p:#2596be;
  --bg:#f6f8fb;
  --card:#ffffff;
  --t:#1f2937;
  --m:#6b7280;
  --b:#e5e7eb;
  --shadow: 0 10px 25px rgba(0,0,0,.06);
}

.sf-donation-wrap{ background: var(--bg); padding: 30px 16px; }
.sf-grid{ max-width: 1100px; margin: 0 auto; display: grid; gap: 18px; }
.sf-grid-1{ grid-template-columns: 1fr; }

.sf-card{
  background: var(--card);
  border: 1px solid var(--b);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 22px;
}

.sf-title{ margin: 0; font-size: 18px; color: var(--t); font-weight: 700; }
.sf-sub{ margin: 6px 0 16px; color: var(--m); font-size: 13px; }
.sf-title.mt{ margin-top: 18px; }

.sf-row{ display: grid; gap: 14px; margin-bottom: 14px; }
.sf-2{ grid-template-columns: 1fr 1fr; }
@media(max-width: 860px){ .sf-2{ grid-template-columns: 1fr; } }

.sf-field label{ display:block; font-size: 13px; font-weight: 600; color: var(--t); margin-bottom: 6px; }
.sf-field small{ display:block; margin-top: 6px; color: var(--m); font-size: 12px; }

.sf-field input, .sf-field select{
  width: 100%;
  border: 1px solid var(--b);
  border-radius: 10px;
  padding: 11px 12px;
  font-size: 14px;
  outline: none;
  background: #fff;
}

.sf-amount{ display:flex; align-items: center; border: 1px solid var(--b); border-radius: 10px; overflow:hidden; }
.sf-currency{ background:#eef6fb; padding: 11px 12px; border-right:1px solid var(--b); font-weight:700; color: var(--t); }
.sf-amount input{ border:0; border-radius:0; }

.sf-quick{ display:flex; gap:10px; margin-top: 10px; flex-wrap: wrap; }
.sf-chip{
  border: 1px solid var(--b);
  background:#fff;
  border-radius: 999px;
  padding: 8px 12px;
  cursor: pointer;
  font-weight: 600;
}
.sf-chip:hover{ border-color: var(--p); color: var(--p); }

.sf-phone{ display:flex; gap:10px; }
.sf-phone select{ width: 120px; }

.sf-pay{ display:grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sf-payopt{
  display:flex;
  align-items:center;
  gap:10px;
  border: 1px solid var(--b);
  border-radius: 12px;
  padding: 12px;
  cursor: pointer;
  user-select:none;
}
.sf-payopt input{ width:auto; }
.sf-payopt:hover{ border-color: var(--p); }

.sf-btn{
  width:100%;
  background: #2c84d8;
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 14px 14px;
  font-weight: 800;
  cursor: pointer;
}
.sf-btn small{ display:block; font-weight: 600; opacity: .9; margin-top: 2px; }
.sf-btn.loading{ opacity:.7; cursor:not-allowed; }

.sf-terms{ margin: 10px 0 0; color: var(--m); font-size: 12px; }

.sf-msg{
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  font-weight: 700;
}
.sf-msg.ok{ background:#e8fff1; color:#137a3a; border:1px solid #b7f0cd; }
.sf-msg.err{ background:#fff1f2; color:#b42318; border:1px solid #fecaca; }