{{-- A classe 'hidden' é padrão, e será removida pelo JS para mostrar o modal --}}
<div id="modalalep" class="fixed inset-0 z-[999] overflow-y-auto bg-[black]/60 hidden">
    {{-- Container Externo (para cliques fora) --}}
    <div class="flex min-h-screen items-start justify-center px-4"
        onclick="hideScannerModal()">

        <div
            class="panel animate__animated animate__zoomInUp my-8 w-full max-w-lg overflow-hidden rounded-lg border-0 p-0"
            onclick="event.stopPropagation()"> {{-- Impede clique de fechar no conteúdo --}}

            {{-- Header --}}
            <div
                class="flex items-center justify-between bg-[#fbfbfb] px-5 py-3 dark:bg-[#121c2c]">
                <h5 class="text-lg font-bold titulomodal">Scanner Alep</h5>

                {{-- Botão de Fechar usa a nova função JS --}}
                <button type="button" class="text-white-dark hover:text-dark"
                    onclick="hideScannerModal()">
                    {{-- SVG de Fechar (ou outro ícone) --}}
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="w-5 h-5"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
                </button>
            </div>

            {{-- Corpo do Scanner --}}
            <div class="p-5">
                <video id="preview" class="w-full" autoplay></video>
                <div id="qrCodeResult"></div>
            </div>

        </div>
    </div>
</div>