<!-- Credit Usage Confirmation -->
<h1 class="email-title">Tracecoins Used</h1>

<p>Hi {{first_name}},</p>
<p>
  This is a confirmation that Tracecoins have been deducted from your wallet.
</p>

<div
  class="amount-display"
  style="background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%)"
>
  <div class="amount-label" style="color: #991b1b">Tracecoins Deducted</div>
  <div class="amount-value" style="color: #dc2626">
    <span class="amount-currency">-</span>{{amount_deducted}}
  </div>
</div>

<div class="detail-card">
  <div class="detail-row">
    <span class="detail-label">Transaction Type</span>
    <span class="detail-value">{{transaction_type}}</span>
  </div>
  <div class="detail-row">
    <span class="detail-label">Description</span>
    <span class="detail-value">{{description}}</span>
  </div>
  <div class="detail-row">
    <span class="detail-label">Date & Time</span>
    <span class="detail-value">{{transaction_date}}</span>
  </div>
  <div class="detail-row">
    <span class="detail-label">Reference ID</span>
    <span class="detail-value" style="font-family: monospace; font-size: 12px"
      >{{reference_id}}</span
    >
  </div>
</div>

<div
  class="detail-card"
  style="background-color: #f0fdf4; border-color: #86efac"
>
  <div class="detail-row" style="border-color: #86efac">
    <span class="detail-label" style="color: #166534">Remaining Balance</span>
    <span class="detail-value" style="color: #15803d; font-size: 18px"
      >{{remaining_balance}} TC</span
    >
  </div>
</div>

<div style="text-align: center">
  <a href="{{wallet_url}}" class="cta-button">View Wallet</a>
  <a
    href="{{ledger_url}}"
    style="margin-left: 10px; background: #6b7280"
    class="cta-button"
    >View Ledger</a
  >
</div>

<p style="margin-top: 20px; font-size: 14px; color: #6b7280">
  Questions? Contact our support team for assistance.
</p>

<p>Best regards,<br /><strong>The Nxtgauge Team</strong></p>
