.lightbox-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0); /* Start transparent */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  padding: 0;
  box-sizing: border-box;
}

.lightbox-overlay.active {
  opacity: 1;
  visibility: visible;
  background-color: rgba(0, 0, 0, 1); /* Always black when active */
  cursor: none !important;
  /* Add transition for smooth fade-in */
  transition: opacity 0.3s ease, background-color 0.3s ease;
}

/* Remove the :not(.loading) rule as it's no longer needed */

/* Ensure cursor applies correctly when lightbox is active */
html.lightbox-active,
html.lightbox-active body,
html.lightbox-active * {
  cursor: none !important;
}

html.lightbox-active,
html.lightbox-active * {
  cursor: none !important;
}

.lightbox-image-container {
  position: relative;
  max-width: 100%;
  max-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  pointer-events: none;
  /* Allow pinch-zoom on the container */
  touch-action: pinch-zoom;
}

.lightbox-image {
  display: block;
  max-width: 100%;
  max-height: 100vh;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  position: relative;
  z-index: 1000;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
  /* Allow manipulation including pinch-zoom on the image */
  touch-action: manipulation;
}

/* When lightbox is NOT active, prevent zoom on the body */
html:not(.lightbox-active) body {
  touch-action: pan-x pan-y;
}

/* Styles for the NEW Loader Overlay */
#lightbox-loader-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--main-color, #DD0044);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1001;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s; /* Fade out */
  cursor: none !important;
}

#lightbox-loader-overlay.active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease, visibility 0s linear 0s; /* Fade in */
}

#lightbox-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

@keyframes show-slash1 {
  0%, 100% { opacity: 1; }
}
@keyframes show-slash2 {
  0%, 33.3% { opacity: 0; }
  33.4%, 100% { opacity: 1; }
}
@keyframes show-slash3 {
  0%, 66.6% { opacity: 0; }
  66.7%, 100% { opacity: 1; }
}

#lightbox-loader svg {
  width: 100%;
  height: 100%;
  object-fit: fill;
}

#lightbox-loader svg path {
  opacity: 0; 
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
  animation-timing-function: steps(1, end);
}

#lightbox-loader svg #slash1 {
  animation-name: show-slash1;
}
#lightbox-loader svg #slash2 {
  animation-name: show-slash2;
}
#lightbox-loader svg #slash3 {
  animation-name: show-slash3;
}

/* Remove old rule hiding image based on main overlay loading class */
/* #lightbox-overlay.loading .lightbox-image { opacity: 0; } */

/* Optional: Explicitly hide image when loader overlay is active */
/* #lightbox-loader-overlay.active ~ #lightbox-overlay .lightbox-image {
  opacity: 0 !important;
} */
/* Relying on JS setting opacity is generally sufficient */