/* 
 * Modal Compatibility CSS
 * Ensures modals work properly with custom theme editors like Divi
 */

/* Modal base styles with high z-index to override theme styles */
.modal.fade.show {
  display: block !important;
  opacity: 1 !important;
  z-index: 999999 !important;
  padding-right: 17px !important; /* Prevents content shift */
}

/* Modal dialog positioning */
.modal-dialog {
  position: relative !important;
  margin: 1.75rem auto !important;
  pointer-events: auto !important;
  transform: none !important;
}

/* Modal backdrop with high z-index but below modal */
.modal-backdrop.show {
  opacity: 0.5 !important;
  z-index: 999998 !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
}

/* Modal content styles */
.modal-content {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  pointer-events: auto !important;
  background-color: #fff !important;
  background-clip: padding-box !important;
  border: 1px solid rgba(0, 0, 0, 0.2) !important;
  border-radius: 0.3rem !important;
  outline: 0 !important;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

/* Ensure body styles when modal is open */
body.modal-open {
  overflow: hidden !important;
  padding-right: 17px !important; /* Prevents content shift */
}

/* Fix for Divi theme specifically */
.et-db #et-boc .et-l .modal-backdrop,
.et-db #et-boc .et-l .modal.show {
  z-index: 999998 !important;
}

.et-db #et-boc .et-l .modal.show {
  z-index: 999999 !important;
}

/* Fix for other page builders */
.elementor-page .modal-backdrop,
.fl-builder-content .modal-backdrop,
.siteorigin-panels-stretch .modal-backdrop {
  z-index: 999998 !important;
}

.elementor-page .modal.show,
.fl-builder-content .modal.show,
.siteorigin-panels-stretch .modal.show {
  z-index: 999999 !important;
}

/* Ensure modals are properly centered */
.modal-dialog-centered {
  display: flex !important;
  align-items: center !important;
  min-height: calc(100% - 3.5rem) !important;
}

/* Fix for modals on mobile devices */
@media (max-width: 576px) {
  .modal-dialog {
    margin: 0.5rem !important;
    max-width: calc(100% - 1rem) !important;
  }
}