/*! PhotoSwipe main CSS by Dmytro Semenov | photoswipe.com */

.pswp {
  --pswp-bg: #000;
  --pswp-placeholder-bg: #222;
  --pswp-root-z-index: 100000;
  --pswp-preloader-color: rgba(79, 79, 79, 0.4);
  --pswp-preloader-color-secondary: rgba(255, 255, 255, 0.9);
  --pswp-icon-color: #fff;
  --pswp-icon-color-secondary: #4f4f4f;
  --pswp-icon-stroke-color: #4f4f4f;
  --pswp-icon-stroke-width: 2px;
  --pswp-error-text-color: var(--pswp-icon-color);
}

.pswp {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: var(--pswp-root-z-index);
  display: none;
  touch-action: none;
  outline: 0;
  opacity: 0.003;
  contain: layout style size;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.pswp--open {
  display: block;
}

.pswp--zoom-allowed .pswp__img {
  cursor: zoom-in;
}

.pswp--zoomed-in .pswp__img {
  cursor: grab;
}

.pswp--dragging .pswp__img {
  cursor: grabbing;
}

.pswp__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--pswp-bg);
  opacity: 0.005;
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.pswp,
.pswp__bg {
  will-change: opacity;
}

.pswp__scroll-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.pswp__container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  user-select: none;
  touch-action: pan-y;
}

.pswp__img,
.pswp__zoom-wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.pswp__zoom-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}

.pswp__img {
  display: block;
  max-width: none;
  max-height: none;
}

.pswp__img--placeholder {
  pointer-events: none;
  object-fit: contain;
}

.pswp__slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  user-select: none;
  overflow: hidden;
}

.pswp__slide--current {
  z-index: 1;
}

.pswp__preloader {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60px;
  height: 60px;
  margin: -30px 0 0 -30px;
  opacity: 0;
  transition: opacity 0.25s ease-out;
  will-change: opacity;
  z-index: 10;
}

.pswp__preloader--active {
  opacity: 1;
}

.pswp__preloader__icn {
  width: 60px;
  height: 60px;
  animation: pswp-spin 1s linear infinite;
}

.pswp__preloader__cut {
  position: absolute;
  width: 30px;
  height: 60px;
  overflow: hidden;
  top: 0;
  left: 0;
}

.pswp__preloader__donut {
  position: absolute;
  width: 46px;
  height: 46px;
  border: 4px solid var(--pswp-preloader-color);
  border-radius: 50%;
  border-left-color: var(--pswp-preloader-color-secondary);
  border-bottom-color: var(--pswp-preloader-color-secondary);
  top: 7px;
  left: 7px;
  box-sizing: border-box;
}

@keyframes pswp-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Top bar / UI */
.pswp__top-bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  display: flex;
  justify-content: flex-end;
  z-index: 10;
  pointer-events: none !important;
  padding: 0 10px;
  box-sizing: border-box;
}

.pswp__top-bar > * {
  pointer-events: auto;
}

/* Buttons */
.pswp__button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 60px;
  padding: 0;
  margin: 0;
  overflow: hidden;
  cursor: pointer;
  background: none;
  border: 0;
  color: var(--pswp-icon-color);
  opacity: 0.85;
  transition: opacity 0.2s, background-color 0.2s;
}

.pswp__button:hover,
.pswp__button:focus {
  opacity: 1;
  background-color: rgba(255, 255, 255, 0.1);
}

.pswp__button:active {
  opacity: 0.9;
}

.pswp__button--disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

.pswp__icn {
  width: 24px;
  height: 24px;
  fill: var(--pswp-icon-color);
  color: var(--pswp-icon-color-secondary);
  pointer-events: none;
}

.pswp__icn-shadow {
  stroke: var(--pswp-icon-stroke-color);
  stroke-width: var(--pswp-icon-stroke-width);
  fill: none;
}

/* Arrow buttons */
.pswp__button--arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 70px;
  height: 100px;
  z-index: 10;
}

.pswp__button--arrow .pswp__icn {
  width: 32px;
  height: 32px;
}

.pswp__button--arrow--prev {
  left: 0;
}

.pswp__button--arrow--next {
  right: 0;
}

/* Counter */
.pswp__counter {
  display: flex;
  align-items: center;
  height: 60px;
  padding: 0 15px;
  font-size: 15px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--pswp-icon-color);
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
  opacity: 0.85;
  margin-right: auto;
}

/* Zoom UI */
.pswp__zoom-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Custom zoom controls */
.pswp__zoom-controls {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 30px;
  padding: 8px 16px;
  z-index: 20;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.pswp__zoom-btn {
  width: 36px;
  height: 36px;
  border: none;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  color: #fff;
  font-size: 20px;
  font-weight: 300;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.pswp__zoom-btn:hover {
  background: rgba(255, 255, 255, 0.25);
}

.pswp__zoom-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.pswp__zoom-level {
  color: #fff;
  font-size: 13px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  min-width: 50px;
  text-align: center;
  user-select: none;
}

.pswp__zoom-slider {
  -webkit-appearance: none;
  width: 100px;
  height: 4px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 2px;
  outline: none;
}

.pswp__zoom-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 50%;
  cursor: pointer;
}

.pswp__zoom-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 50%;
  cursor: pointer;
  border: none;
}

/* Hidden class */
.pswp--hidden-controls .pswp__top-bar,
.pswp--hidden-controls .pswp__zoom-controls,
.pswp--hidden-controls .pswp__button--arrow {
  opacity: 0;
  pointer-events: none;
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .pswp__button--arrow {
    width: 50px;
  }
  
  .pswp__zoom-controls {
    bottom: 80px;
    padding: 6px 12px;
    gap: 8px;
  }
  
  .pswp__zoom-slider {
    width: 80px;
  }
  
  .pswp__zoom-btn {
    width: 32px;
    height: 32px;
    font-size: 18px;
  }
}

/* Error state */
.pswp__error-msg-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.pswp__error-msg {
  color: var(--pswp-error-text-color);
  font-size: 16px;
  text-align: center;
}

/* Transition */
.pswp--ui-visible .pswp__top-bar,
.pswp--ui-visible .pswp__zoom-controls,
.pswp--ui-visible .pswp__button--arrow {
  opacity: 1;
}

/* Info button */
.pswp__button--info {
  background: transparent;
  border: none;
  padding: 8px;
  margin-left: 8px;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s;
  border-radius: 4px;
}

.pswp__button--info:hover {
  opacity: 1;
}

.pswp__button--info.pswp__button--active {
  opacity: 1;
  background: rgba(255,255,255,0.1);
}

.pswp__button--info .pswp__icn {
  fill: white;
}

/* EXIF bar */
.pswp__exif-bar {
  position: absolute;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 30;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 8px;
  padding: 12px 20px;
  max-width: 90%;
}

.pswp__exif-content {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  align-items: center;
}

.pswp__exif-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.9);
  white-space: nowrap;
}

.pswp__exif-item svg {
  opacity: 0.7;
  flex-shrink: 0;
}

@media (max-width: 600px) {
  .pswp__exif-bar {
    bottom: 100px;
    padding: 10px 16px;
  }
  
  .pswp__exif-content {
    gap: 12px;
  }
  
  .pswp__exif-item {
    font-size: 12px;
  }
}