/* ===============================
   LIGHTBOX
=================================*/
#lightbox {
  position: fixed;
  top:0; left:0;
  width:100%; height:100%;
  background: rgba(0,0,0,0.95);
  display:flex;
  justify-content:center;
  align-items:center;
  opacity:0;
  pointer-events:none;
  transition:opacity 0.3s ease;
  z-index:9999;
}

#lightbox.show {
  opacity:1;
  pointer-events:auto;
}

#lightbox-content {
  position: relative;
  display: flex;
  justify-content:center;
  align-items:center;
}

/* Afbeelding */
#lightbox-img {
  max-width: 75vw;
  max-height: 75vh;
  display: block;
  border: 3px solid #fff;
  border-radius: 8px;
}

/* Tekst onderaan op de afbeelding */
#lightbox-text {
  position: absolute;
  bottom: 0;
  left: 0;
  width:100%;
  background: rgba(0,0,0,0.7);
  color:#fff;
  padding:10px;
  text-align:center;
  box-sizing:border-box;
  border-radius:0 0 8px 8px;
}

/* Sluitknop – rechtsboven OP de afbeelding */
#closeLightbox {
  position: absolute;
  top:10px;
  right:10px;
  background: rgba(0,0,0,0.7);
  border:1px solid #fff;
  color:#fff;
  font-size:16px;
  padding:4px 8px;
  border-radius:4px;
  cursor:pointer;
  z-index:2;
}

/* Pijlen – in het midden LINKS & RECHTS OP de afbeelding */
#prevLightbox, #nextLightbox {
  position: absolute;
  top:50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.7);
  border:1px solid #fff;
  color:#fff;
  font-size:32px;
  padding:6px 10px;
  border-radius:4px;
  cursor:pointer;
  z-index:2;
}

/* Links tegen de rand van de afbeelding */
#prevLightbox { 
  left: 10px;
}

/* Rechts tegen de rand van de afbeelding */
#nextLightbox { 
  right: 10px;
}

/* Responsive */
@media (max-width:768px){
  #lightbox-img{ max-width:90vw; max-height:60vh; }
  #prevLightbox,#nextLightbox{ font-size:24px; }
}