
<div style="font-family: Arial, sans-serif; max-width: 600px; margin: 0 auto; padding: 20px;">
    <div style="background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); padding: 30px; border-radius: 10px 10px 0 0; text-align: center;">
        <h1 style="color: white; margin: 0; font-size: 28px;">❌ Payment Failed</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;">Unfortunately, we were unable to process your payment. Please try again.</p>

        <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: #ef4444; 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: #ef4444; font-weight: bold;">Failed</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: #f0f9ff; padding: 20px; border-radius: 8px; margin: 25px 0;">
            <h3 style="margin: 0 0 15px; color: #0369a1;">💡 How to resolve this:</h3>
            <ul style="margin: 0; padding-left: 20px; color: #0369a1;">
                <li><strong>Check your card details:</strong> Ensure card number, expiry date, and CVV are correct</li>
                <li><strong>Verify billing address:</strong> Make sure your billing address matches your card</li>
                <li><strong>Check your account balance:</strong> Ensure you have sufficient funds available</li>
                <li><strong>Contact your bank:</strong> Your card issuer may have declined the transaction</li>
                <li><strong>Try a different payment method:</strong> Use another card or payment option</li>
            </ul>
        </div>

        <p style="font-size: 16px; line-height: 1.6; margin: 5px 0 0;"><strong>{company_name} Team</strong></p>
    </div>
</div>