
<div style="font-family: Arial, sans-serif; max-width: 600px; margin: 0 auto; padding: 20px;">
    <div style="background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); padding: 30px; border-radius: 10px 10px 0 0; text-align: center;">
        <h1 style="color: white; margin: 0; font-size: 28px;">⏳ Payment Pending</h1>
    </div>

    <div style="background: #ffffff; padding: 30px; border: 1px solid #e5e7eb; border-top: none; border-radius: 0 0 10px 10px;">
        <p style="font-size: 16px; line-height: 1.6; margin: 0 0 20px;">Hello <strong>{first_name} {last_name}</strong>,</p>

        <p style="font-size: 16px; line-height: 1.6; margin: 0 0 25px;">Your payment is currently being processed. Additional verification may be required to complete this transaction.</p>

        <div style="background: #fef3c7; padding: 20px; border-radius: 8px; margin: 25px 0; border-left: 4px solid #f59e0b;">
            <p style="margin: 0; font-weight: bold; color: #92400e;">⚠️ Action May Be Required</p>
            <p style="margin: 10px 0 0; color: #92400e;">Some payments require additional authentication (like 3D Secure) or take time to process depending on your bank or payment method.</p>
        </div>

        <div style="background: #f9fafb; padding: 20px; border-radius: 8px; margin: 25px 0;">
            <table style="width: 100%; border-collapse: collapse;">
                <tr>
                    <td style="padding: 8px 0; font-weight: bold;">Transaction ID:</td>
                    <td style="padding: 8px 0; text-align: right; font-family: monospace;">{transaction_id}</td>
                </tr>
                <tr>
                    <td style="padding: 8px 0; font-weight: bold;">Amount:</td>
                    <td style="padding: 8px 0; text-align: right; color: #f59e0b; font-size: 18px; font-weight: bold;">{transaction_amount}</td>
                </tr>
                <tr>
                    <td style="padding: 8px 0; font-weight: bold;">Payment Method:</td>
                    <td style="padding: 8px 0; text-align: right;">{transaction_type}</td>
                </tr>
                <tr>
                    <td style="padding: 8px 0; font-weight: bold;">Status:</td>
                    <td style="padding: 8px 0; text-align: right; color: #f59e0b; font-weight: bold;">Pending</td>
                </tr>
                <tr style="border-top: 2px solid #e5e7eb;">
                    <td style="padding: 12px 0 8px; font-weight: bold;">Description:</td>
                    <td style="padding: 12px 0 8px; text-align: right;">{transaction_description}</td>
                </tr>
            </table>
        </div>

        <div style="background: #eff6ff; padding: 20px; border-radius: 8px; margin: 25px 0;">
            <h3 style="margin: 0 0 15px; color: #1e40af;">What happens next?</h3>
            <ul style="margin: 0; padding-left: 20px; color: #1e40af;">
                <li>We will send you an update once the payment is processed</li>
                <li>Most pending payments are resolved within 24 hours</li>
                <li>You may receive additional verification requests from your bank</li>
                <li>Check your email and banking app for any notifications</li>
            </ul>
        </div>

        <p style="font-size: 16px; line-height: 1.6; margin: 25px 0 0;">Thank you for your patience,</p>
        <p style="font-size: 16px; line-height: 1.6; margin: 5px 0 0;"><strong>{company_name} Team</strong></p>
    </div>
</div>