<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        font-family: Arial, sans-serif;
        color: #333;
        background-color: #ffffff;
        padding: 20px;
      }
      .email-container {
        max-width: 700px;
        margin: auto;
        background: #ffffff;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        box-shadow: 0 0 10px rgba(0,0,0,0.05);
      }
      .header {
        text-align: center;
        padding: 20px;
        background-color: #ffffff;
      }
      .header img {
        max-height: 60px;
      }
      .content {
        padding: 20px;
      }
      .section-title {
        font-weight: bold;
        margin-top: 30px;
        margin-bottom: 10px;
        border-bottom: 1px solid #ccc;
        padding-bottom: 6px;
      }
      .address-box {
        background: #f2f7ff;
        padding: 15px;
        border: 1px solid #d0d0d0;
        border-radius: 5px;
        margin-bottom: 10px;
      }
      table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 15px;
      }
      table th, table td {
        border: 1px solid #ddd;
        padding: 10px;
        text-align: left;
      }
      table th {
        background-color: #f9f9f9;
      }
      .total {
        text-align: right;
        font-weight: bold;
      }
      .button {
        display: inline-block;
        padding: 12px 24px;
        margin: 20px 0;
        color: #ffffff;
        background-color: #004aad;
        text-decoration: none;
        border-radius: 5px;
        font-weight: bold;
      }
      .footer {
        font-size: 12px;
        color: #777;
        text-align: center;
        padding: 20px;
        border-top: 2px solid #ff8a00;
        background-color: #f9f9f9;
      }
      .social-icons a {
        margin: 0 6px;
        display: inline-block;
      }
      .social-icons img {
        height: 24px;
        width: 24px;
      }
      .unsubscribe {
        display: block;
        margin-top: 10px;
        color: #999;
        font-size: 11px;
        text-decoration: underline;
      }
    </style>
  </head>
  <body>
    <div class="email-container">
      <div class="header">
       {SITELOGO}
      </div>
      <div class="content">
        <p>Hello {NAME},</p>
        <p>Thank you for your order! Your order <strong>{ORDERNUMBER}</strong> has been received and is now being processed.</p>

        <div class="section-title">Order Summary</div>
        <table>
          <thead>
            <tr>
              <th>Product</th>
              <th>Qty</th>
              <th>Unit Price</th>
              <th>Total</th>
            </tr>
          </thead>
          <tbody>
            <!-- Repeat this row for each product -->
            {PRODUCTLIST}
            <!-- End product rows -->
            <tr>
              <td colspan="3" class="total" style="text-align: left;">Subtotal</td>
              <td style="text-align: left;">{SUBTOTAL}</td>
            </tr>
            {DISCOUNT}
            <tr>
              <td colspan="3" class="total" style="text-align: left;">Delivery Charges</td>
              <td style="text-align: left;">{SHIPPING}</td>
            </tr>
            <tr>
              <td colspan="3" class="total" style="text-align: left;">Tax</td>
              <td style="text-align: left;">{TAX}</td>
            </tr>
            {OTHER_CHARGES}

            <tr>
              <td colspan="3" class="total" style="text-align: left;">Grand Total</td>
              <td style="text-align: left;"><strong>{TOTAL_AMOUNT}</strong></td>
            </tr>
          </tbody>
        </table>

        <div class="section-title">Billing Address</div>
        <div class="address-box">
          {BILLING_NAME}<br>
            {BILLING_ADDRESS}<br>
         {BILLING_PHONE}<br>
          {BILLING_EMAIL}
        </div>

        <div class="section-title">Shipping Address</div>
        <div class="address-box">
           {SHIPPING_NAME}<br>
          {SHIPPING_ADDRESS}<br>
          {SHIPPING_PHONE}<br>
           {SHIPPING_EMAIL}
        </div>

        <p style="text-align:center; color: #ffffff;">
          <a href="{VIEW_ORDER}" class="button" style="color: #ffffff;">View Order Details</a>
        </p>

        <p>If you have any questions or need help, feel free to contact our support team.</p>
        <p>Thank you for shopping with {STORENAME}!</p>
      </div>
      <div class="footer">
        <div class="social-icons">
         {SOCIALICONS}
        </div>
        <p>
          <!-- This message was sent to [Customer Email].<br> -->
          <strong>Disclaimer:</strong> This email and any attachments are confidential and intended only for the individual or entity to whom they are addressed.
        </p>
        <p> {COPYRIGHT}</p>
        <!-- <a href="[UnsubscribeURL]" class="unsubscribe">Unsubscribe from email notifications</a> -->
      </div>
    </div>
  </body>
</html>
