<%- include('../shared/_head', { title: title, portalCss: '/platform/payer/css/portal.css', bodyClass: 'payer-portal auth-page' }) %>

<div class="auth-shell" style="max-width:440px;text-align:center">

  <div style="font-size:3.5rem;margin-bottom:var(--space-3)">✓</div>
  <h1 style="color:var(--success);margin-bottom:var(--space-1)">Payment complete</h1>
  <p class="text-muted" style="margin-bottom:var(--space-6)">Show this screen to the cashier</p>

  <div style="background:var(--surface-sunken);border-radius:var(--radius-md);padding:var(--space-5);margin-bottom:var(--space-5);text-align:left">
    <div style="display:flex;justify-content:space-between;margin-bottom:var(--space-2)">
      <span class="text-muted">Merchant</span>
      <strong><%= checkout.orgName %></strong>
    </div>
    <div style="display:flex;justify-content:space-between;margin-bottom:var(--space-2)">
      <span class="text-muted">Amount</span>
      <strong style="font-size:1.25rem">$<%= Number(checkout.total).toFixed(2) %> <%= checkout.currency %></strong>
    </div>
    <div style="display:flex;justify-content:space-between;margin-bottom:var(--space-2)">
      <span class="text-muted">Paid at</span>
      <span><%= new Date(checkout.settledAt).toLocaleString() %></span>
    </div>
    <div style="display:flex;justify-content:space-between">
      <span class="text-muted">Reference</span>
      <span class="mono" style="font-size:0.85rem"><%= checkout.sessionCode %></span>
    </div>
  </div>

  <a href="/payer/dashboard" class="btn btn-secondary" style="width:100%">Back to my account</a>

</div>

<%- include('../shared/_foot') %>
