{# ═══════ SUCCESS STATUS ═══════ #}

<div class="st-card">
    <div class="st-header st-header-success">
        <div class="st-icon-wrap">
            <div class="st-icon-ring1 st-icon-ring1-success"></div>
            <div class="st-icon-ring2 st-icon-ring2-success"></div>
            <div class="st-icon-circle st-icon-circle-success">
                <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#10B981" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
            </div>
        </div>
        <span class="st-badge st-badge-success">
            <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg>
            Verified
        </span>
        <h1 class="st-title">{{ status_label ?? 'Payment Successful' }}</h1>
        <p class="st-subtitle">{{ lang.success_msg ?? 'Your transaction has been processed successfully. The merchant has received your payment.' }}</p>
    </div>

    <div class="st-body">
        <div class="st-details">
            <div class="st-row st-amount-row">
                <span class="st-row-label">Amount</span>
                <span class="st-row-value">{{ txn.currency_symbol ?? '৳' }}{{ txn.amount|default(0)|number_format(2) }} {{ txn.currency ?? 'BDT' }}</span>
            </div>
            <div class="st-row-divider"></div>
            <div class="st-row">
                <span class="st-row-label">Transaction ID</span>
                <span class="st-row-value">{{ txn.trx_id ?? '-' }}</span>
            </div>
            <div class="st-row-divider"></div>
            <div class="st-row">
                <span class="st-row-label">Gateway</span>
                <span class="st-row-value">{{ txn.gateway_slug ?? 'OwnPay' }}</span>
            </div>
            <div class="st-row-divider"></div>
            <div class="st-row">
                <span class="st-row-label">Merchant</span>
                <span class="st-row-value">{{ brand.name ?? 'OwnPay' }}</span>
            </div>
            <div class="st-row-divider"></div>
            <div class="st-row">
                <span class="st-row-label">Date</span>
                <span class="st-row-value">{{ txn.updated_at ?? txn.created_at ?? 'now'|date('M d, Y · h:i A') }}</span>
            </div>
        </div>
    </div>

    <div class="st-actions">
        <a href="#" data-action="print-receipt" class="st-btn">
            <div class="st-btn-icon st-btn-icon-download">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#10B981" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
            </div>
            <span class="st-btn-label">Download<br>Receipt</span>
        </a>
        <a href="/" class="st-btn">
            <div class="st-btn-icon st-btn-icon-return">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#0D9488" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
            </div>
            <span class="st-btn-label">Return to<br>Merchant</span>
        </a>
    </div>
</div>

<div class="st-footer">
    <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
    Secured by <a href="/">{{ brand.name ?? 'OwnPay' }}</a> · 256-bit encryption
</div>
