<!-- QRIS MODAL -->
    <div id="qris-modal" class="fixed inset-0 z-[9999] flex items-center justify-center p-4 bg-slate-950/70 backdrop-blur-sm hidden">
        <div class="<?= $style['cardBg'] ?> rounded-3xl border border-amber-200 shadow-2xl max-w-sm w-full p-6 text-center space-y-5 relative">
            <button type="button" onclick="closeQrisModal()" class="absolute top-4 right-4 text-slate-400 hover:text-slate-600 text-lg w-8 h-8 rounded-full bg-slate-100 flex items-center justify-center transition">
                &times;
            </button>

            <div class="space-y-1">
                <span class="text-[10px] font-bold uppercase tracking-wider text-amber-700 <?= $style['accentBg'] ?> px-3 py-1 rounded-full border border-amber-200">QRIS Payment</span>
                <h3 class="text-xl font-bold font-serif-fancy <?= $style['textColor'] ?> pt-2">Scan QRIS</h3>
            </div>

            <div class="bg-slate-50 border <?= $style['borderColor'] ?> rounded-2xl p-4 flex flex-col items-center">
                <img id="modal-qris-img" src="" alt="Enlarged QRIS" class="w-56 h-56 object-contain rounded-xl">
            </div>

            <div class="flex gap-2">
                <a id="modal-qris-download" href="" download="qris_code.png" target="_blank" class="flex-1 inline-flex justify-center items-center gap-1.5 px-4 py-2.5 border border-amber-300 text-xs font-bold rounded-xl text-amber-700 <?= $style['accentBg'] ?> hover:bg-amber-100 transition shadow-xs">
                    <span>📥</span> Download QRIS
                </a>
                <button type="button" onclick="closeQrisModal()" class="flex-1 inline-flex justify-center items-center px-4 py-2.5 border border-transparent text-xs font-bold rounded-xl <?= $style['primaryBtn'] ?> transition shadow-sm">
                    Close
                </button>
            </div>
        </div>
    </div>
