/* PhotoSwipe custom styles */
.pswp__counter {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 500;
  z-index: 1101;
  user-select: none;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Responsive image sizing - make images larger and more responsive */
.pswp__img {
  max-width: none !important;
  max-height: none !important;
}

/* Default image sizing for different screen sizes */
.pswp__zoom-wrap {
  transition: transform 0.3s ease;
}

/* Large screens (desktop) - make images bigger */
@media (min-width: 1200px) {
  .pswp__img {
    max-width: 95vw !important;
    max-height: 95vh !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
  }
}

/* Medium screens (laptop, tablet landscape) */
@media (min-width: 768px) and (max-width: 1199px) {
  .pswp__img {
    max-width: 90vw !important;
    max-height: 90vh !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
  }
}

/* Small screens (tablet portrait, mobile) */
@media (max-width: 767px) {
  .pswp__img {
    max-width: 95vw !important;
    max-height: 85vh !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
  }
}

/* For MacBook 13" specifically (common resolution 1440x900 or 1280x800) */
@media (min-width: 1280px) and (max-width: 1440px) and (min-height: 800px) and (max-height: 900px) {
  .pswp__img {
    max-width: 90vw !important;
    max-height: 85vh !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
  }
}

/* Override PhotoSwipe's default container sizing */
.pswp__container,
.pswp__zoom-wrap {
  width: 100% !important;
  height: 100% !important;
}

/* Ensure PhotoSwipe UI controls are properly styled */
.pswp__button {
  background: rgba(0, 0, 0, 0.6) !important;
  border-radius: 50% !important;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.pswp__button:hover {
  background: rgba(0, 0, 0, 0.8) !important;
}

/* Improve arrow visibility and always show them */
.pswp__button--arrow--left,
.pswp__button--arrow--right {
  background: rgba(0, 0, 0, 0.7) !important;
  width: 60px !important;
  height: 60px !important;
  margin-top: -30px !important;
  opacity: 1 !important;
  display: block !important;
  transition: all 0.2s ease !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 50% !important;
}

.pswp__button--arrow--left {
  left: 20px !important;
}

.pswp__button--arrow--right {
  right: 20px !important;
}

.pswp__button--arrow--left:hover,
.pswp__button--arrow--right:hover {
  background: rgba(0, 0, 0, 0.9) !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  transform: scale(1.1) !important;
}

/* Make sure arrows are visible even on mobile */
@media (max-width: 768px) {
  .pswp__button--arrow--left,
  .pswp__button--arrow--right {
    width: 50px !important;
    height: 50px !important;
    margin-top: -25px !important;
    opacity: 0.8 !important;
  }
  
  .pswp__button--arrow--left {
    left: 10px !important;
  }
  
  .pswp__button--arrow--right {
    right: 10px !important;
  }
}

/* Close button styling */
.pswp__button--close {
  top: 20px !important;
  right: 20px !important;
  width: 50px !important;
  height: 50px !important;
}

/* Zoom button styling */
.pswp__button--zoom {
  top: 20px !important;
  right: 80px !important;
  width: 50px !important;
  height: 50px !important;
}

/* Improve zoom functionality */
.pswp--zoomed-in .pswp__img {
  cursor: zoom-out !important;
}

.pswp--zoomed-out .pswp__img {
  cursor: zoom-in !important;
}

/* Better loading state */
.pswp__preloader {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-top: 3px solid #fff;
  border-radius: 50%;
  animation: pswpSpin 1s linear infinite;
}

@keyframes pswpSpin {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}