<!DOCTYPE html>
<html lang="en" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
    <meta charset="utf-8">
    <meta name="x-apple-disable-message-reformatting">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="format-detection" content="telephone=no, date=no, address=no, email=no">
    <!--[if mso]>
    <xml><o:OfficeDocumentSettings><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml>
    <style>
        td,th,div,p,a,h1,h2,h3,h4,h5,h6 {font-family: "Segoe UI", sans-serif; mso-line-height-rule: exactly;}
    </style>
    <![endif]-->
    <title>{{email_subject}}</title>
    <!--[if !mso]>-->
    <link href="https://fonts.googleapis.com/css?family=Inter:400,700&display=swap" rel="stylesheet" type="text/css">
    <!--<![endif]-->
    <style>
        /* Reset styles */
        body {
            margin: 0;
            padding: 0;
            width: 100% !important;
            -webkit-text-size-adjust: 100%;
            -ms-text-size-adjust: 100%;
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
            background-color: {{email_body_bg}};
            color: #333333;
        }
        img {
            border: 0;
            height: auto;
            line-height: 100%;
            outline: none;
            text-decoration: none;
            -ms-interpolation-mode: bicubic;
        }
        table {
            border-collapse: collapse !important;
            mso-table-lspace: 0pt;
            mso-table-rspace: 0pt;
        }
        td {
            word-wrap: break-word;
        }
        
        /* Main styles */
        .body-bg {
            background-color: {{email_body_bg}};
            width: 100%;
        }
        .container {
            width: 100%;
            max-width: 600px;
            margin: 0 auto;
            border-radius: 8px;
        }
        .header {
            padding: 32px;
            text-align: center;
        }
        .logo img {
            max-width: 140px;
        }
        
        /* Card System */
        .card {
            width: 100%;
            background-color: #ffffff;
            border-radius: 8px;
        }
        .card-gutter {
            padding: 0 16px;
        }
        .card-spacing {
            height: 24px;
            font-size: 24px;
            line-height: 24px;
        }
        .card-spacing-sm {
            height: 16px;
            font-size: 16px;
            line-height: 16px;
        }
        
        /* Card Types */
        .card-highlight {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        .card-highlight .content,
        .card-highlight .content h1,
        .card-highlight .content h2,
        .card-highlight .content h3,
        .card-highlight .content p,
        .card-highlight .content a {
            color: #ffffff !important;
        }
        
        .card-info {
            background-color: #f0f7ff;
        }
        
        .card-warning {
            background-color: #fff8e1;
        }
        
        .card-success {
            background-color: #e8f5e9;
        }
        
        .card-bg {
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }
        
        /* Content */
        .content {
            padding: 32px 40px;
        }
        .content h1 {
            font-family: 'Inter', Arial, sans-serif;
            font-size: 26px;
            font-weight: 700;
            color: #333333;
            margin-top: 0;
            margin-bottom: 16px;
        }
        .content h2 {
            font-family: 'Inter', Arial, sans-serif;
            font-size: 18px;
            font-weight: 700;
            color: #333333;
            margin-top: 0;
            margin-bottom: 16px;
        }
        .content h3 {
            font-family: 'Inter', Arial, sans-serif;
            font-size: 16px;
            font-weight: 700;
            color: #333333;
            margin-top: 0;
            margin-bottom: 8px;
        }
        .content p {
            font-family: 'Inter', Arial, sans-serif;
            font-size: 16px;
            line-height: 1.6;
            color: #555555;
            margin-bottom: 16px;
            margin-top: 0;
        }
        .content a {
            color: #7f54b3;
            text-decoration: underline;
        }
        
        /* Button */
        .button {
            display: inline-block;
            background-color: #7f54b3;
            color: #ffffff !important;
            font-family: 'Inter', Arial, sans-serif;
            font-size: 16px;
            font-weight: 600;
            text-decoration: none;
            padding: 14px 28px;
            border-radius: 6px;
            text-align: center;
        }
        
        /* Order/Product Tables */
        .order-details {
            width: 100%;
            margin-top: 24px;
            margin-bottom: 32px;
        }
        .order-details th {
            font-family: 'Inter', Arial, sans-serif;
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: #888;
            padding: 12px 0;
            text-align: left;
            font-weight: 600;
            border-bottom: 1px solid #e5e5e5;
        }
        .order-details td {
            font-family: 'Inter', Arial, sans-serif;
            font-size: 15px;
            padding: 16px 0;
            border-bottom: 1px solid #e5e5e5;
        }
        .order-details .product-name {
            font-weight: 600;
            color: #333;
        }
        .order-details .product-qty {
            color: #555;
        }
        .order-details .product-price {
            font-weight: 600;
            text-align: right;
        }
        .order-details .align-right {
            text-align: right;
        }
        
        /* Totals */
        .totals-table {
            width: 100%;
        }
        .totals-table td {
            font-family: 'Inter', Arial, sans-serif;
            padding: 8px 0;
            font-size: 15px;
        }
        .totals-table .label {
            color: #555;
        }
        .totals-table .value {
            text-align: right;
            font-weight: 600;
        }
        .totals-table .total-row td {
            font-size: 18px;
            font-weight: 700;
            color: #333;
            padding-top: 16px;
            border-top: 2px solid #e5e5e5;
        }
        
        /* Info Box */
        .info-box {
            background-color: #f6f6f6;
            border-radius: 6px;
            padding: 20px;
            text-align: center;
            margin-bottom: 24px;
        }
        
        /* Address section */
        .address-details {
            width: 100%;
        }
        .address-details td {
            padding: 0;
            vertical-align: top;
        }
        .address-box {
            font-family: 'Inter', Arial, sans-serif;
            font-size: 15px;
            line-height: 1.6;
            color: #555555;
        }
        .address-box h3 {
            font-size: 16px;
            font-weight: 700;
            color: #333333;
            margin-top: 0;
            margin-bottom: 8px;
        }

        /* Footer */
        .footer {
            padding: 32px 40px;
            text-align: center;
        }
        .footer p {
            font-family: 'Inter', Arial, sans-serif;
            font-size: 13px;
            line-height: 1.5;
            color: #888888;
            margin: 0 0 8px 0;
        }
        .footer a {
            color: #7f54b3;
            text-decoration: underline;
        }
        
        /* Social Icons */
        .social-icons {
            margin-top: 16px;
        }
        .social-icons a {
            display: inline-block;
            margin: 0 8px;
        }
        .social-icons img {
            width: 24px;
            height: 24px;
        }

        /* Responsive styles */
        @media screen and (max-width: 600px) {
            .content {
                padding: 24px !important;
            }
            .content h1 {
                font-size: 22px !important;
            }
            .address-details td {
                display: block !important;
                width: 100% !important;
            }
            .address-details td:last-child {
                padding-top: 24px;
            }
            .order-details .product-price {
                padding-left: 8px;
            }
            .card-gutter {
                padding: 0 12px;
            }
        }
    </style>
</head>
<body style="margin: 0; padding: 0; width: 100% !important; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; background-color: {{email_body_bg}}; color: #333333;">
    <center class="body-bg">
        <!--[if mso]>
        <table role="presentation" width="100%" align="center" style="background-color:{{email_body_bg}};">
        <tr>
        <td></td>
        <td width="600">
        <![endif]-->

        <table role="presentation" class="container" border="0" cellpadding="0" cellspacing="0" style="width: 100%; max-width: 600px; margin: 0 auto; border-radius: 8px;">
            <!-- Header with Logo -->
            <tr>
                <td class="header" style="padding: 32px; text-align: center;">
                    {{email_header}}
                </td>
            </tr>

            <!-- Main Content: Cards will be injected here -->
            <tr>
                <td class="card-gutter" style="padding: 0 16px;">
                    {{email_content}}
                </td>
            </tr>

            <!-- Footer -->
            <tr>
                <td class="footer" style="padding: 32px 40px; text-align: center;">
                    {{email_footer}}
                </td>
            </tr>
        </table>

        <!--[if mso]>
        </td>
        <td></td>
        </tr>
        </table>
        <![endif]-->
    </center>
</body>
</html>
