{# MANUAL PAYMENT POPUP - overlay for manual gateway flow #}
<div id="manualPopup" class="ck-popup ck-hidden">
    <div class="ck-popup-backdrop" data-action="close-manual"></div>
    <div class="ck-popup-dialog">
        <div class="ck-popup-header">
            <div class="ck-popup-gw-info">
                <img id="mpLogo" class="ck-popup-gw-logo ck-hidden" alt="">
                <span id="mpLogoFallback" class="ck-popup-gw-icon"></span>
                <div>
                    <p class="ck-popup-gw-name" id="mpName"></p>
                    <p class="ck-popup-gw-type" id="mpType"></p>
                </div>
            </div>
            <button type="button" data-action="close-manual" class="ck-popup-close">&times;</button>
        </div>
        <div class="ck-popup-body">
            <div id="mpStep1">
                <p class="ck-popup-label">{{ lang.to_number ?? '1. Send money to this number' }}</p>
                <div class="ck-popup-to">
                    <p class="ck-popup-number" id="mpNumber"></p>
                    <button type="button" data-action="copy-num" class="ck-copy-btn">{{ lang.copy ?? 'Copy' }}</button>
                </div>
                <p class="ck-popup-label">{{ lang.enter_amount ?? '2. Enter this amount' }}</p>
                <div class="ck-popup-amount">
                    <p class="ck-popup-value" id="mpAmountValue">{{ txn.currency_symbol ?? '৳' }}{{ txn.amount|number_format(2) }}</p>
                    <button type="button" data-action="copy-amount" class="ck-copy-btn">{{ lang.copy ?? 'Copy' }}</button>
                </div>
                <div class="ck-popup-steps" id="mpSteps"></div>
                <div id="mpQrWrap" class="ck-popup-qr-wrap ck-hidden">
                    <p class="ck-popup-label ck-popup-label-center">{{ lang.scan_to_pay ?? 'Or scan to pay' }}</p>
                    <img id="mpQr" class="ck-popup-qr" alt="Payment QR code">
                </div>
                <p class="ck-popup-footer" id="mpFooter"></p>
                <button type="button" data-action="go-mp-step" data-step="2" class="ck-popup-next-btn">{{ lang.i_have_sent ?? "I've sent the money" }}</button>
            </div>

            {# Step 2: Verification #}
            <div id="mpStep2" class="ck-hidden">
                <button type="button" data-action="go-mp-step" data-step="1" class="ck-popup-back-link">← {{ lang.back ?? 'Back' }}</button>
                <form id="mpVerifyForm">
                    <div class="ck-popup-field">
                        <label>{{ lang.sender_number ?? 'Your sender number' }}</label>
                        <input type="text" name="sender_number" class="ck-popup-input" required placeholder="01XXXXXXXXX">
                    </div>
                    <div class="ck-popup-field">
                        <label>{{ lang.transaction_id ?? 'Transaction ID' }}</label>
                        <input type="text" name="transaction_id" class="ck-popup-input" required placeholder="TrxID from SMS">
                    </div>
                    <button type="submit" class="ck-popup-submit-btn">{{ lang.verify_payment ?? 'Verify Payment' }}</button>
                </form>
            </div>
        </div>
    </div>
</div>