{{-- Approve confirmation. Bootstrap's JS isn't loaded in the admin layout, so
     this is a plain overlay driven by the page's own script. --}}
<div class="offer-modal-overlay" id="offerApproveModal" role="dialog" aria-modal="true"
    aria-labelledby="offerApproveTitle" hidden>
    <div class="offer-modal">
        <div class="offer-modal-head">
            <div class="offer-modal-icon approve">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                    stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M20 6L9 17l-5-5"></path>
                </svg>
            </div>
            <div>
                <h4 id="offerApproveTitle">Approve Offer</h4>
                <p class="offer-modal-sub" id="offerApproveSubtitle"></p>
            </div>
            <button type="button" class="offer-modal-close" id="offerApproveClose" aria-label="Close">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                    stroke-width="2.5" stroke-linecap="round">
                    <line x1="18" y1="6" x2="6" y2="18"></line>
                    <line x1="6" y1="6" x2="18" y2="18"></line>
                </svg>
            </button>
        </div>

        <div class="offer-modal-body">
            <label class="offer-modal-label" for="offerApprovePoints">Reward Points</label>
            <input type="number" id="offerApprovePoints" class="offer-modal-input"
                min="0" max="2147483647" step="1" inputmode="numeric" placeholder="0">
            <p class="offer-modal-help">
                Points the user earns for redeeming this offer. Prefilled with what the sponsor submitted.
            </p>

            <label class="offer-modal-label spaced" for="offerApproveValidUntil">Valid Until</label>
            <input type="date" id="offerApproveValidUntil" class="offer-modal-input">
            <p class="offer-modal-help">
                Last day the offer can be redeemed, defaulting to today.
            </p>

            <p class="offer-modal-error" id="offerApproveError" hidden></p>
        </div>

        <div class="offer-modal-foot">
            <button type="button" class="offer-modal-btn secondary" id="offerApproveCancel">Cancel</button>
            <button type="button" class="offer-modal-btn approve" id="offerApproveConfirm">Approve Offer</button>
        </div>
    </div>
</div>