<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

<style>
@page {
    size: A4;
    margin: 18px;
}

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

body {
    font-family: Arial, Helvetica, sans-serif;
    background: #f5f6fa;
    font-size: 14px;
    color: #222;
    line-height: 1.4;
}

/* ===== CENTERED CONTAINER (KEY FIX) ===== */
.container {
    max-width: 600px;
    margin: 0 auto;
    background: #ffffff;
    padding: 16px;
}

/* ===== HEADER ===== */
.header {
    text-align: center;
    border-bottom: 2px solid #1f4fd8;
    padding-bottom: 10px;
}

.org-name {
    font-size: 20px;
    font-weight: 700;
    color: #1f4fd8;
}

.receipt-title {
    font-size: 14px;
    margin-top: 4px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #555;
}

/* ===== RECEIPT NUMBER ===== */
.receipt-box {
    margin: 10px 0;
    padding: 10px;
    background: #f1f4ff;
    border: 1px solid #dbe0ff;
    text-align: center;
}

.receipt-box span {
    font-size: 11px;
    color: #666;
}

.receipt-number {
    font-size: 14px;
    font-weight: 700;
    margin-top: 3px;
}

/* ===== SECTION ===== */
.section {
    margin-top: 12px;
}

.section-title {
    font-size: 14px;
    font-weight: 700;
    color: #1f4fd8;
    border-bottom: 1px solid #e2e6ff;
    padding-bottom: 4px;
    margin-bottom: 8px;
}

/* ===== TABLE ===== */
.table {
    width: 100%;
    border-collapse: collapse;
}

.table td {
    padding: 5px 0;
}

.label {
    width: 40%;
    font-weight: 600;
    color: #444;
    font-size: 12px;
}

.value {
    width: 60%;
    font-size: 13px;
}

/* ===== AMOUNT ===== */
.amount-box {
    margin: 12px 0;
    padding: 12px;
    border: 2px solid #1f4fd8;
    text-align: center;
}

.amount-label {
    font-size: 13px;
    text-transform: uppercase;
    color: #555;
}

.amount {
    font-size: 28px;
    font-weight: 700;
    color: #1f4fd8;
    margin: 5px 0;
}

.currency {
    font-size: 11px;
    color: #666;
}

/* ===== NOTE ===== */
.note {
    margin-top: 10px;
    padding: 10px;
    background: #fff7e0;
    border-left: 3px solid #f4b400;
    font-size: 11px;
}

/* ===== THANK YOU ===== */
.thank-you {
    margin: 12px 0;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    color: #1f4fd8;
}

/* ===== SIGNATURE ===== */
.signature {
    margin-top: 12px;
}

.signature-line {
    width: 180px;
    border-top: 1px solid #333;
    padding-top: 4px;
    font-size: 11px;
    color: #555;
}

/* ===== FOOTER ===== */
.footer {
    margin-top: 12px;
    padding-top: 8px;
    border-top: 1px solid #ddd;
    text-align: center;
    font-size: 10px;
    color: #666;
}
</style>
</head>

<body>

<div class="container">

    <div class="header">
        <div class="org-name">{org_name}</div>
        <div class="receipt-title">Donation Receipt</div>
    </div>

    <div class="receipt-box">
        <span>Receipt Number</span>
        <div class="receipt-number">{receipt_number}</div>
    </div>

    <div class="section">
        <div class="section-title">Donor Details</div>
        <table class="table">
            <tr>
                <td class="label">Donor Name</td>
                <td class="value">{donor_name}</td>
            </tr>
            <tr>
                <td class="label">Email</td>
                <td class="value">{donor_email}</td>
            </tr>
            <tr>
                <td class="label">Address</td>
                <td class="value">{donor_address}</td>
            </tr>
        </table>
    </div>

    <div class="amount-box">
        <div class="amount-label">Donation Amount</div>
        <div class="amount">{amount}</div>
        <div class="currency">Currency: {currency}</div>
    </div>

    <div class="section">
        <div class="section-title">Donation Information</div>
        <table class="table">
            <tr>
                <td class="label">Campaign</td>
                <td class="value">{campaign}</td>
            </tr>
            <tr>
                <td class="label">Donation Date</td>
                <td class="value">{date}</td>
            </tr>
            <tr>
                <td class="label">Transaction ID</td>
                <td class="value">{order_id}</td>
            </tr>
            <tr>
                <td class="label">Payment Method</td>
                <td class="value">Online Payment</td>
            </tr>
        </table>
    </div>

    <div class="note">
        <strong>Important:</strong><br>
        This receipt is an official confirmation of your donation. Please retain it for your records.
    </div>

    <div class="thank-you">
        Thank You for Your Support
    </div>

    <div class="signature">
        <div class="signature-line">Authorized Signatory</div>
    </div>

    <div class="footer">
        <strong>{org_name}</strong><br>
        {org_address}<br><br>
        This is a system-generated receipt and does not require a physical signature.
    </div>

</div>

</body>
</html>
