/* Mask Styling */  
#mask {
  width: 100%;
  height: 100%;
  display: none;
  opacity: 0.4;
  background-color: black;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999; /* Ensure it's below the popup */
}

/* Popup Styling */
#dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none;
  background: white;
  padding: 0; /* No extra padding */
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  z-index: 1000; /* Ensure it's above the mask */
  max-width: 90%; /* Maximum width for both mobile and desktop */
  max-height: 90%; /* Maximum height */
  overflow: hidden; /* Hide overflow */
  animation: fadeIn 0.3s ease; /* Smooth fade-in animation */
}

/* Image Styling */
#dialog img {
  width: 100%; /* Image width takes 100% of dialog width */
  height: auto; /* Maintain aspect ratio without distortion */
  object-fit: contain; /* Keep the image aspect ratio intact */
  display: block;
  margin: auto;
  opacity: 1; /* Ensure both images start with full opacity */
  transition: opacity 0.5s ease; /* Fade transition for image change */
}

/* Close Button Styling */
#closePopup {
  position: absolute; /* Position the close icon inside the dialog */
  top: 10px; /* 10px from the top */
  right: 10px; /* 10px from the right */
  cursor: pointer; /* Indicate clickability */
}

#closePopup img {
  width: 30px; /* Resize close button for mobile */
  height: auto; /* Maintain aspect ratio of the close button */
}

/* Fade-in Animation */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Desktop-specific adjustments */
@media (min-width: 769px) {
  #dialog {
    width: 50vw; /* Set dialog width to 50% of viewport on desktop */
    height: auto; /* Set height to auto, adjust based on content */
  }

  #dialog img {
    width: 100%; /* Image will now take the full width of the dialog */
    height: auto; /* Keep image aspect ratio intact */
  }

  /* Adjusting the size of the close button on desktop */
  #closePopup img {
    width: 40px; /* Slightly larger close button on desktop */
    height: auto; /* Maintain aspect ratio */
  }
}

/* Mobile-specific adjustments */
@media (max-width: 768px) {
  #dialog {
    width: 90vw; /* Dialog takes 90% of viewport width on mobile */
    height: auto; /* Height auto to adjust based on image */
  }

  #dialog img {
    width: 100%; /* Ensure image fills the dialog width */
    height: auto; /* Maintain aspect ratio of the image */
  }

  /* Resize close button for mobile */
  #closePopup img {
    width: 30px; /* Resize close button for mobile */
    height: auto; /* Maintain aspect ratio */
  }
}