<!-- Payment Successful -->
<h1 class="email-title">Payment Successful! 🎉</h1>

<p>Hi {{first_name}},</p>
<p>
  Your payment has been processed successfully. Tracecoins have been added to
  your wallet.
</p>

<div class="amount-display">
  <div class="amount-label">Tracecoins Credited</div>
  <div class="amount-value">
    <span class="amount-currency">+</span>{{tracecoins_amount}}
  </div>
</div>

<div class="detail-card">
  <div class="detail-row">
    <span class="detail-label">Package</span>
    <span class="detail-value">{{package_name}}</span>
  </div>
  <div class="detail-row">
    <span class="detail-label">Amount Paid</span>
    <span class="detail-value">₹{{amount_paid}}</span>
  </div>
  <div class="detail-row">
    <span class="detail-label">Transaction ID</span>
    <span class="detail-value" style="font-family: monospace; font-size: 12px"
      >{{transaction_id}}</span
    >
  </div>
  <div class="detail-row">
    <span class="detail-label">Date</span>
    <span class="detail-value">{{payment_date}}</span>
  </div>
</div>

<div style="text-align: center">
  <a href="{{invoice_url}}" class="cta-button">View Invoice</a>
  <a href="{{wallet_url}}" style="margin-left: 10px" class="cta-button"
    >Go to Wallet</a
  >
</div>

<div class="info-box">
  <p class="info-box-title">📄 Tax Invoice</p>
  <p style="margin: 0">
    A GST invoice has been generated for this transaction. You can download it
    from your account.
  </p>
</div>

<p>Thank you for your purchase!</p>
<p>Best regards,<br /><strong>The Nxtgauge Team</strong></p>
