/*
* FooGallery Custom CSS
* This file is created by adding custom CSS on FooGallery Settings page in wp-admin
* Created : 27 Jun 2026, 11:55 am
*/

/* ── Lightbox-Hintergrund: leicht abgedunkelt, Seite bleibt sichtbar ── */
.fg-lightbox-overlay,
.foogallery-lightbox-overlay {
  background: rgba(245, 243, 239, 0.88) !important;
  backdrop-filter: blur(2px);
}

/* ── Navigations-Pfeile: schlank, kein Button-Rahmen ── */
.fg-lightbox-nav-prev,
.fg-lightbox-nav-next,
.foogallery-lightbox .pswp__button--arrow--left,
.foogallery-lightbox .pswp__button--arrow--right {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  color: #3a3a38 !important;
  opacity: 0.55;
  font-size: 2rem;
  transition: opacity 0.2s;
}
.fg-lightbox-nav-prev:hover,
.fg-lightbox-nav-next:hover,
.foogallery-lightbox .pswp__button--arrow--left:hover,
.foogallery-lightbox .pswp__button--arrow--right:hover {
  opacity: 1;
  background: none !important;
}

/* ── Schließen-Button ── */
.fg-lightbox-close,
.foogallery-lightbox .pswp__button--close {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  color: #3a3a38 !important;
  opacity: 0.55;
  transition: opacity 0.2s;
}
.fg-lightbox-close:hover,
.foogallery-lightbox .pswp__button--close:hover {
  opacity: 1;
  background: none !important;
}

/* ── Thumbnail-Leiste: keine grauen Trennlinien, kein schwarzer Rahmen ── */
.fg-lightbox-thumbnails,
.foogallery-lightbox .pswp__thumbnails {
  background: transparent !important;
  border-top: none !important;
  border: none !important;
}

/* aktives Thumbnail: subtil hervorheben statt schwarzem Rahmen */
.fg-lightbox-thumbnails .active,
.fg-lightbox-thumbnails .fg-thumb-active,
.foogallery-lightbox .pswp__thumbnail--active {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
  opacity: 1;
  filter: brightness(1.05);
}

/* inaktive Thumbnails etwas zurückhalten */
.fg-lightbox-thumbnails .fg-thumb,
.foogallery-lightbox .pswp__thumbnail {
  border: none !important;
  box-shadow: none !important;
  opacity: 0.5;
  border-radius: 2px;
  transition: opacity 0.2s;
}
.fg-lightbox-thumbnails .fg-thumb:hover,
.foogallery-lightbox .pswp__thumbnail:hover {
  opacity: 0.85;
}

/* ── Beschriftung: lesbar, zentriert, leicht ── */
.fg-lightbox-caption,
.foogallery-lightbox .pswp__caption__center {
  background: transparent !important;
  color: #3a3a38 !important;
  font-size: 0.85rem;
  text-align: center;
  padding: 10px 40px;
  line-height: 1.65;
}