/* ----------------------------------------------------
   PhotoSwipe bakgrund (Rättad för optimal svärta i v5)
---------------------------------------------------- */
.pswp__bg {
  background: var(--pswp-bg); /* Använder CSS-variabeln istället för rgba */
}

/* ----------------------------------------------------
   Bild (låter PhotoSwipe styra contain/layout)
---------------------------------------------------- */
.pswp__img {
  max-width: none;
  max-height: none;
  object-fit: contain;
  cursor: pointer; /* NYTT: Gör att muspekaren blir en hand på desktop */
}

/* ----------------------------------------------------
   Caption (exakt enligt dokumentationen)
---------------------------------------------------- */
.pswp__caption {
  position: absolute;
  bottom: 60px;
  width: 100%;
  text-align: center;
  color: #fff;
  font-size: 15px;
  pointer-events: none;
  padding: 0 20px;
  box-sizing: border-box;
}

/* ----------------------------------------------------
   Bullets som linje (progress indicator)
---------------------------------------------------- */
.pswp__bullets {
  position: absolute;
  bottom: 25px;
  width: 100%;
  text-align: center;
  pointer-events: none;
}

.pswp__line {
  position: relative;
  width: 60%;
  height: 3px;
  background: rgba(255,255,255,0.3);
  margin: 0 auto;
  border-radius: 2px;
}

.pswp__line-progress {
  position: absolute;
  top: -3px; /* centrerar markören */
  width: 8px;
  height: 8px;
  background: #fff;
  border-radius: 50%;
  transform: translateX(-50%);
  transition: left 0.3s ease; /* NYTT: Gör att pricken glider mjukt */
}

/* ----------------------------------------------------
   Counter (Återställd till din fungerande originalplacering)
---------------------------------------------------- */
.pswp__counter-container {
  position: absolute;
  top: 12px;
  right: 96px; /* JUSTERAD från 70px till 96px för att inte krocka med knapparna i v5 */
  z-index: 10000;
}

.pswp__counter {
  color: #fff;
  font-size: 14px;
  pointer-events: none;
  display: block !important; /* Säkerställer att den alltid syns */
}

/* ----------------------------------------------------
   Knappar (standard PhotoSwipe styling)
---------------------------------------------------- */
.pswp__button {
  width: 44px;
  height: 44px;
  opacity: 0.85;
}

.pswp__button:hover {
  opacity: 1;
}

/* ----------------------------------------------------
   Pilar (standard)
---------------------------------------------------- */
.pswp__button--arrow--prev,
.pswp__button--arrow--next {
  width: 60px;
  height: 60px;
}

/* ----------------------------------------------------
   Close-knapp (standard)
---------------------------------------------------- */
.pswp__button--close {
  width: 44px;
  height: 44px;
}

/* ----------------------------------------------------
   Zoom-knapp (standard)
---------------------------------------------------- */
.pswp__button--zoom {
  width: 44px;
  height: 44px;
}

/* ----------------------------------------------------
   Root container (Styr färgen och opaciteten på rätt sätt)
---------------------------------------------------- */
.pswp {
  --pswp-bg: #000000;        /* Gör grundfärgen helt kolsvart */
  --pswp-bg-opacity: 0.9;    /* Matchar exakt ditt värde (0.9) i JavaScriptet */
}