/* Overlay for the middle popup */
.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999; /* Below the popup but above other elements */
  opacity: 0;
  animation: fadeIn 0.5s forwards;
}

/* Base popup container */
.popup-image-container {
  position: fixed;
  z-index: 1000; /* Above the overlay */
  display: inline-block;
  /* Full-width popup for smaller viewports */
}
.popup-image-container.full-width {
  width: 100%;
  max-width: 100%;
}
.popup-image-container {
  /* Middle popup styles */
}
.popup-image-container.popup-middle {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  /* Slide-down class for middle mobile popups */
}
.popup-image-container.popup-middle.slide-down {
  animation: slideDown 0.5s ease-out forwards;
}
.popup-image-container.popup-middle {
  /* Fade-in class for centered middle popups */
}
.popup-image-container.popup-middle.fade-in {
  animation: fadeIn 0.5s ease-out forwards;
}
.popup-image-container.popup-middle {
  /* Fade-out class for centered middle popups */
}
.popup-image-container.popup-middle.fade-out {
  animation: fadeOut 0.5s ease-out forwards;
}
.popup-image-container {
  /* Slide-Up class for middle mobile popups */
}
.popup-image-container.mobile-bottom-slide {
  bottom: 0;
  left: 0;
  top: auto;
  width: 100%;
  max-width: 100%;
  transform: translateY(100%); /* Start off-screen */
  animation: slideUp 0.5s ease-out forwards;
  opacity: 1;
}
.popup-image-container {
  /* Right-side slide-in popup */
}
.popup-image-container.popup-right {
  bottom: 0;
  right: 0;
  transform: translateX(100%);
}
.popup-image-container.popup-right.slide-in {
  animation: slideInRight 0.5s ease-out forwards;
}
.popup-image-container.popup-right.slide-out {
  animation: slideOutRight 0.5s ease-out forwards;
}
.popup-image-container {
  /* Responsive image */
}
.popup-image-container .popup-image {
  height: auto;
}
.popup-image-container .popup-image-responsive {
  width: 100%;
  max-width: 100%;
}

/* Keyframe animations */
/* Fade-in animation */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* Fade-out animation */
@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
/* Slide-up animation */
@keyframes slideUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}
/* Slide-down animation */
@keyframes slideDown {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(100%); /* Move down off-screen */
  }
}
/* Right-side slide-in animation */
@keyframes slideInRight {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}
/* Right-side slide-out animation */
@keyframes slideOutRight {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100%); /* Move out to the right */
  }
}/*# sourceMappingURL=popup.css.map */