/**
 * Modal Centering Fix CSS
 * This CSS ensures proper vertical centering of images in the modal.
 */

/* Ensure modal dialog is centered */
#imageModal .modal-dialog {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100% !important;
  margin: 0 auto !important;
  max-width: 100% !important;
}

/* Make the modal content take up the full height */
#imageModal .modal-content {
  display: flex !important;
  flex-direction: column !important;
  height: 100vh !important;
  background-color: rgba(0, 0, 0, 0.95) !important;
}

/* Ensure the modal body is centered */
#imageModal .modal-body {
  flex: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  height: calc(100vh - 60px) !important;
  overflow-y: auto !important;
}

/* Style the image wrapper */
#imageModal .image-wrapper {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
}

/* Ensure the image itself is centered */
#modalImage {
  max-height: 85vh !important;
  max-width: 90vw !important;
  object-fit: contain !important;
  object-position: center !important; 
  margin: 0 auto !important;
  display: block !important;
}

/* Fix for the navigation control positioning */
#imageModal .modal-navigation-controls {
  position: absolute !important;
  width: 100% !important;
  height: 100% !important;
  top: 0 !important;
  left: 0 !important;
  pointer-events: none !important;
}

/* Allow the buttons to receive pointer events */
#imageModal .modal-nav-btn {
  pointer-events: auto !important;
}