<script>
  document.addEventListener('click', (event) => {
    const openTrigger = event.target.closest('[modal-open]');
    const modal = event.target.closest('.modal');
    const modalContent = event.target.closest('.modal-content');

    // Open modal
    if (openTrigger) {
      event.preventDefault();
      const modalName = openTrigger.getAttribute('modal-open');
      const modalWrap = document.querySelector(`.modal[modal="${modalName}"]`);
      if (modalWrap) {
        modalWrap.style.display = 'block';
        document.body.style.overflow = 'hidden'; // Lock body scroll
      }
    }

    // Close modal when clicking outside modal content
    if (modal && !modalContent) {
      modal.style.display = 'none';
      document.body.style.overflow = ''; // Reset body
    }
  });
</script>