<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Donation Receipt</title>
</head>

<body style="margin:0;padding:0;background-color:#f4f6f8;font-family:Arial,Helvetica,sans-serif;">

<table width="100%" cellpadding="0" cellspacing="0" style="background-color:#f4f6f8;padding:20px 0;">
    <tr>
        <td align="center">

            <!-- MAIN CONTAINER -->
            <table width="600" cellpadding="0" cellspacing="0" style="background-color:#ffffff;border-radius:10px;overflow:hidden;">

                <!-- HEADER -->
                <tr>
                    <td style="background-color:#5b6cff;padding:30px;text-align:center;color:#ffffff;">
                        <div style="font-size:40px;line-height:1;">💝</div>
                        <h1 style="margin:15px 0 5px;font-size:26px;font-weight:600;">
                            {site_name}
                        </h1>
                        <p style="margin:0;font-size:15px;opacity:0.95;">
                            Thank you for your donation
                        </p>
                    </td>
                </tr>

                <!-- CONTENT -->
                <tr>
                    <td style="padding:30px;">

                        <p style="font-size:16px;color:#333;margin:0 0 15px;">
                            Dear <strong>{donor_first_name}</strong>,
                        </p>

                        <p style="font-size:15px;color:#555;line-height:1.6;margin:0 0 25px;">
                            We sincerely appreciate your generous support. Your contribution helps us continue our mission and create real impact.
                        </p>

                        <!-- AMOUNT BOX -->
                        <table width="100%" cellpadding="0" cellspacing="0" style="background-color:#f1f4ff;border-radius:8px;margin:25px 0;">
                            <tr>
                                <td style="padding:20px;text-align:center;">
                                    <p style="margin:0;font-size:13px;color:#666;text-transform:uppercase;letter-spacing:1px;">
                                        Donation Amount
                                    </p>
                                    <p style="margin:10px 0 0;font-size:34px;font-weight:bold;color:#5b6cff;">
                                        {amount}
                                    </p>
                                </td>
                            </tr>
                        </table>

                        <!-- DETAILS -->
                        <table width="100%" cellpadding="0" cellspacing="0" style="font-size:15px;color:#333;">
                            <tr>
                                <td style="padding:10px 0;color:#666;font-weight:bold;">Receipt Number</td>
                                <td style="padding:10px 0;text-align:right;">DC-{order_id}-2025</td>
                            </tr>
                            <tr>
                                <td style="padding:10px 0;color:#666;font-weight:bold;">Campaign</td>
                                <td style="padding:10px 0;text-align:right;">{campaign}</td>
                            </tr>
                            <tr>
                                <td style="padding:10px 0;color:#666;font-weight:bold;">Donation Date</td>
                                <td style="padding:10px 0;text-align:right;">{date}</td>
                            </tr>
                            <tr>
                                <td style="padding:10px 0;color:#666;font-weight:bold;">Payment Method</td>
                                <td style="padding:10px 0;text-align:right;">Online</td>
                            </tr>
                        </table>

                        <!-- INFO BOX -->
                        <table width="100%" cellpadding="0" cellspacing="0" style="background-color:#f8f9fb;border:1px solid #e5e8ef;border-radius:8px;margin:30px 0;">
                            <tr>
                                <td style="padding:18px;">
                                    <p style="margin:0;font-size:15px;color:#333;">
                                        <strong>📄 Tax Receipt Attached</strong>
                                    </p>
                                    <p style="margin:8px 0 0;font-size:14px;color:#555;line-height:1.5;">
                                        Your official donation receipt is attached as a PDF. Please keep it for your records.
                                    </p>
                                </td>
                            </tr>
                        </table>

                        <p style="font-size:15px;color:#555;line-height:1.6;margin:0 0 25px;">
                            Every contribution—big or small—helps us move closer to our goals. We are truly grateful for your support.
                        </p>

                        <p style="font-size:15px;color:#333;margin:0;">
                            With gratitude,<br>
                            <strong>The {site_name} Team</strong>
                        </p>

                    </td>
                </tr>

                <!-- FOOTER -->
                <tr>
                    <td style="background-color:#f8f9fb;padding:25px;text-align:center;font-size:13px;color:#666;">
                        <p style="margin:0 0 5px;"><strong>{site_name}</strong></p>
                        <p style="margin:0 0 10px;">Making a difference, together</p>
                        <p style="margin:10px 0;">
                            <a href="{site_url}" style="color:#5b6cff;text-decoration:none;">{site_url}</a>
                        </p>
                        <p style="margin:0;">
                            If you have questions, just reply to this email.
                        </p>
                    </td>
                </tr>

            </table>
            <!-- END CONTAINER -->

        </td>
    </tr>
</table>

</body>
</html>
