#img-popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.9);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1055;
}

#img-popup-overlay.show {
  display: flex !important;
  animation: fadeIn 0.2s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

#img-popup-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100vw;
  max-height: 100vh;
}

#img-popup-img {
  max-width: 95vw;
  max-height: 95vh;
  object-fit: contain;
  border: none;
  box-shadow: none;
  cursor: zoom-out;
  user-select: none;
  transition: transform 0.2s ease;
}

/* Хрестик */
#img-popup-close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: rgba(0,0,0,0.4);
  border: none;
  color: #fff;
  font-size: 2rem;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Стрілки */
#img-popup-prev, #img-popup-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.4);
  border: none;
  color: #fff;
  font-size: 2.5rem;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

#img-popup-prev:hover, #img-popup-next:hover, #img-popup-close:hover {
  background: rgba(255,255,255,0.2);
}

#img-popup-prev { left: 1rem; }
#img-popup-next { right: 1rem; }

body.popup-open {
  overflow: hidden;
}