// --- Detects if any modal overlay (.form-modal_overlay or .modal_overlay) is visible and manages the body's overflow ---

function checkModalVisibility() {
  const modalOverlays = document.querySelectorAll(
    ".form-modal_overlay, .modal_overlay"
  );
  const scrollableElements = document.querySelectorAll(
    ".iti__country-list, .select2-results__options, .form-modal_main"
  );

  if (!modalOverlays.length) {
    // No modals on the page → ensure normal scroll
    document.body.style.overflow = "";
    return;
  }

  // Check if at least one modal overlay is visible
  const anyVisible = Array.from(modalOverlays).some((modal) => {
    const style = window.getComputedStyle(modal);
    const visible =
      style.display !== "none" &&
      style.visibility !== "hidden" &&
      parseFloat(style.opacity) > 0 &&
      modal.offsetWidth > 0 &&
      modal.offsetHeight > 0;
    return visible;
  });

  if (anyVisible) {
    // Disable body scroll while a modal is open
    document.body.style.overflow = "hidden";

    // Allow scroll inside these specific elements
    scrollableElements.forEach((el) => {
      el.style.overflow = "auto";
      el.style.touchAction = "auto"; // keeps scroll working on mobile
    });
  } else {
    // Re-enable normal body scrolling when all modals are closed
    document.body.style.overflow = "";
  }
}

// Observe DOM changes (useful if modals open/close dynamically)
const observer = new MutationObserver(checkModalVisibility);
observer.observe(document.body, {
  attributes: true,
  childList: true,
  subtree: true,
});

// Also check on initial page load
document.addEventListener("DOMContentLoaded", checkModalVisibility);