/*
 * 1. MODAL OVERLAY AND CONTAINER
 * Centers the entire modal on the screen.
 */
.modal-overlay {
  /* Fixes the modal to the viewport and covers the whole screen */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8); /* Semi-transparent black background */
  z-index: 1000; /* Ensure it's on top of everything */

  /* Flexbox to center the modal container */
  display: none;
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
}

.modal-container {
  height: 100%;
  width: auto;
  background-color: #a0a0a0;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);

  /* Flexbox to arrange the header and body vertically */
  display: flex;
  flex-direction: column;
}

/*
 * 2. MODAL HEADER AND CLOSE BUTTON
 * Keeps the header fixed and visible.
 */
.modal-header {
  /* Add padding but keep it flexible */
  padding: 15px;
  /* Use flexbox to easily position the button (if needed for more items) */
  display: flex;
  justify-content: flex-end; /* Push the button to the right */
  /* Prevent the header from shrinking when the image is large */
  flex-shrink: 0; 
}

/*
 * 3. MODAL BODY (THE IMAGE CONTAINER)
 * Ensures the image content scrolls if it exceeds the modal height.
 */
.modal-body {
  /* Occupy remaining vertical space */
  flex-grow: 1; 
  flex-direction: column;
  /* Crucial: Allows the content inside to scroll if it overflows */
  overflow: auto; 
  padding: 0 15px 15px 15px; /* Padding for the sides and bottom */
  
  /* Flexbox can be useful here too, for centering small images */
  display: flex; 
  justify-content: center;
  align-items: center;
}

/*
 * 4. THE IMAGE TAG (The most important part for large images)
 * Scales the image down to fit the modal's available space.
 */
.modal-image {
  /* Ensures the image never exceeds the size of its parent (.modal-body) */
  max-width: 100%; 
  max-height: 100%; 
  /* Prevents image-specific scrollbars inside the main scrollable area */
  display: block; 
  height: auto;
}