@import url(‘https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600&family=DM+Sans:wght@300;400;500&display=swap’);

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
font-family: ‘DM Sans’, sans-serif;
background: #faf8f5;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 2rem 1rem;
}

.card {
background: #ffffff;
border-radius: 20px;
max-width: 520px;
width: 100%;
padding: 2.5rem 2rem;
border: 1px solid #ede9e0;
}

.header {
text-align: center;
margin-bottom: 2rem;
}

.header h1 {
font-family: ‘Playfair Display’, serif;
font-size: 1.8rem;
font-weight: 600;
color: #1a1a1a;
margin-bottom: 0.5rem;
}

.header p {
font-size: 0.9rem;
color: #888;
font-weight: 300;
line-height: 1.6;
}

.section-label {
font-size: 0.75rem;
font-weight: 500;
color: #aaa;
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: 0.75rem;
}

.amounts-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
margin-bottom: 1.5rem;
}

.amount-btn {
background: #faf8f5;
border: 1.5px solid #e8e4da;
border-radius: 10px;
padding: 0.75rem 0.5rem;
font-family: ‘DM Sans’, sans-serif;
font-size: 0.95rem;
font-weight: 500;
color: #333;
cursor: pointer;
transition: all 0.18s ease;
text-align: center;
}

.amount-btn:hover {
border-color: #c8a96e;
background: #fdf6ea;
color: #8a6a20;
}

.amount-btn.selected {
background: #f5e9cc;
border-color: #c8a96e;
color: #8a6a20;
font-weight: 600;
}

.custom-row {
display: flex;
align-items: center;
border: 1.5px solid #e8e4da;
border-radius: 10px;
overflow: hidden;
margin-bottom: 1.75rem;
background: #faf8f5;
transition: border-color 0.18s;
}

.custom-row:focus-within {
border-color: #c8a96e;
background: #fdf6ea;
}

.currency-symbol {
padding: 0 1rem;
font-size: 1rem;
font-weight: 500;
color: #888;
background: transparent;
border-right: 1px solid #e8e4da;
height: 48px;
display: flex;
align-items: center;
}

.custom-input {
flex: 1;
border: none;
background: transparent;
font-family: ‘DM Sans’, sans-serif;
font-size: 0.95rem;
font-weight: 400;
color: #1a1a1a;
padding: 0 1rem;
height: 48px;
outline: none;
}

.custom-input::placeholder { color: #bbb; }

.donor-fields {
display: grid;
gap: 12px;
margin-bottom: 1.75rem;
}

.field-group {
display: flex;
flex-direction: column;
gap: 6px;
}

.field-label {
font-size: 0.8rem;
font-weight: 500;
color: #666;
}

.field-input {
border: 1.5px solid #e8e4da;
border-radius: 10px;
background: #faf8f5;
font-family: ‘DM Sans’, sans-serif;
font-size: 0.9rem;
color: #1a1a1a;
padding: 0.65rem 1rem;
outline: none;
transition: border-color 0.18s;
}

.field-input:focus {
border-color: #c8a96e;
background: #fdf6ea;
}

.field-input::placeholder { color: #bbb; }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.donate-btn {
width: 100%;
background: #1a1a1a;
color: #fff;
border: none;
border-radius: 12px;
padding: 1rem;
font-family: ‘DM Sans’, sans-serif;
font-size: 1rem;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}

.donate-btn:hover { background: #333; transform: translateY(-1px); }
.donate-btn:active { transform: translateY(0); }
.donate-btn:disabled { background: #ccc; cursor: not-allowed; transform: none; }

.amount-display {
font-size: 1.05rem;
font-weight: 500;
color: #c8a96e;
}

.error-msg {
color: #c0392b;
font-size: 0.8rem;
margin-top: -0.5rem;
margin-bottom: 0.5rem;
display: none;
}

.secure-note {
text-align: center;
font-size: 0.75rem;
color: #bbb;
margin-top: 1rem;
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
}

.lock-icon {
width: 12px;
height: 12px;
fill: #bbb;
}

.divider {
border: none;
border-top: 1px solid #ede9e0;
margin: 1.5rem 0;
}

@media (max-width: 480px) {
.card { padding: 1.75rem 1.25rem; }
.amounts-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
.two-col { grid-template-columns: 1fr; }
}

 

var selectedAmount = null;

var amountBtns = document.querySelectorAll(‘.amount-btn’);
var customInput = document.getElementById(‘customAmount’);
var btnAmountDisplay = document.getElementById(‘btnAmount’);
var errorMsg = document.getElementById(‘errorMsg’);

amountBtns.forEach(function(btn) {
btn.addEventListener(‘click’, function() {
amountBtns.forEach(function(b) { b.classList.remove(‘selected’); });
btn.classList.add(‘selected’);
selectedAmount = parseFloat(btn.getAttribute(‘data-amount’));
customInput.value = ”;
updateBtnLabel();
errorMsg.style.display = ‘none’;
});
});

customInput.addEventListener(‘input’, function() {
amountBtns.forEach(function(b) { b.classList.remove(‘selected’); });
selectedAmount = parseFloat(customInput.value) || null;
updateBtnLabel();
if (selectedAmount) errorMsg.style.display = ‘none’;
});

function updateBtnLabel() {
if (selectedAmount && selectedAmount > 0) {
btnAmountDisplay.textContent = ‘— $’ + selectedAmount.toLocaleString();
} else {
btnAmountDisplay.textContent = ”;
}
}

function generateReference() {
return ‘IFAC-‘ + Date.now() + ‘-‘ + Math.random().toString(36).substr(2, 6).toUpperCase();
}

function handleDonate() {
var amount = selectedAmount || parseFloat(customInput.value);

if (!amount || amount < 1) {
errorMsg.style.display = 'block';
return;
}

var firstName = document.getElementById('firstName').value || 'Donor';
var lastName = document.getElementById('lastName').value || 'Guest';
var email = document.getElementById('donorEmail').value || 'donor@africanchildren-ifac.org';
var reference = generateReference();

var btn = document.getElementById('donateBtn');
btn.disabled = true;
btn.textContent = 'Redirecting to payment…';

var form = document.createElement('form');
form.method = 'POST';
form.action = 'https://payment.pelpay.ng/checkout';

var fields = {
merchantId: 'INT0000125',
integrationKey: '442c6bd1-b12d-4fa6-aa10-5fb74cf0fd66',
amount: amount,
currency: 'USD',
merchantReference: reference,
narration: 'Donation to African Children IFAC',
customerFirstName: firstName,
customerLastName: lastName,
customerEmail: email,
redirectUrl: 'https://africanchildren-ifac.org/thank-you',
callbackUrl: 'https://africanchildren-ifac.org/donation-callback'
};

Object.keys(fields).forEach(function(key) {
var input = document.createElement('input');
input.type = 'hidden';
input.name = key;
input.value = fields[key];
form.appendChild(input);
});

document.body.appendChild(form);
form.submit();
}