/**
 * dikkebirdpics — lightbox styling
 * Aanpasbaar via de variabelen hieronder.
 */
:root {
  --dbp-lb-bg: rgba(15, 15, 15, 0.94);   /* overlay-achtergrond */
  --dbp-lb-fg: #f5f5f5;                   /* knoppen / tekst */
  --dbp-lb-max-h: 88vh;                   /* max foto-hoogte */
  --dbp-lb-max-w: 92vw;                   /* max foto-breedte */
  --dbp-lb-fade: 0.25s;                   /* fade-snelheid */
}

/* pagina-scroll vergrendelen als de lightbox open is */
html.dbp-lb-lock,
html.dbp-lb-lock body {
  overflow: hidden;
}

#dbp-lightbox {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--dbp-lb-bg);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dbp-lb-fade) ease, visibility var(--dbp-lb-fade) ease;
}
#dbp-lightbox.is-open {
  opacity: 1;
  visibility: visible;
}

.dbp-lb-figure {
  margin: 0;
  max-width: var(--dbp-lb-max-w);
  max-height: var(--dbp-lb-max-h);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.dbp-lb-img {
  max-width: var(--dbp-lb-max-w);
  max-height: var(--dbp-lb-max-h);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 2px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transform: scale(0.98);
  transition: opacity var(--dbp-lb-fade) ease, transform var(--dbp-lb-fade) ease;
}
.dbp-lb-img.is-loaded {
  opacity: 1;
  transform: scale(1);
}

.dbp-lb-caption {
  margin-top: 0.7rem;
  color: var(--dbp-lb-fg);
  font-size: 0.95rem;
  text-align: center;
  max-width: var(--dbp-lb-max-w);
}

.dbp-lb-counter {
  margin-top: 0.25rem;
  color: var(--dbp-lb-fg);
  opacity: 0.6;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
}

/* knoppen */
#dbp-lightbox button {
  position: absolute;
  background: transparent;
  border: 0;
  color: var(--dbp-lb-fg);
  cursor: pointer;
  line-height: 1;
  opacity: 0.75;
  transition: opacity 0.15s ease;
  padding: 0.2em 0.4em;
  -webkit-tap-highlight-color: transparent;
}
#dbp-lightbox button:hover,
#dbp-lightbox button:focus-visible {
  opacity: 1;
  outline: none;
}

.dbp-lb-close {
  top: 0.4rem;
  right: 0.8rem;
  font-size: 2.6rem;
}
.dbp-lb-prev,
.dbp-lb-next {
  top: 50%;
  transform: translateY(-50%);
  font-size: 3.4rem;
}
.dbp-lb-prev { left: 0.6rem; }
.dbp-lb-next { right: 0.6rem; }

@media (max-width: 600px) {
  .dbp-lb-prev, .dbp-lb-next { font-size: 2.6rem; }
  .dbp-lb-close { font-size: 2.2rem; }
}