/* ==========================================================================
   GLightbox Styles
   ========================================================================== */

@layer components {

/* Overlay backdrop -- dark semi-transparent background */
.goverlay {
  background: rgba(0, 0, 0, 0.92) !important;
}

/* Slide content container -- transparent so overlay shows through */
.glightbox-clean .gslide-media {
  background: transparent;
  box-shadow: none;
}

/* Inline content wrapper -- use theme background */
.glightbox-clean .ginlined-content {
  background: var(--color-background);
  border-radius: var(--radius-lg);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  overflow: auto;

  /* Themed scrollbar - Firefox */
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
}

/* Themed scrollbar - WebKit (Chrome, Safari, Edge) */
.glightbox-clean .ginlined-content::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.glightbox-clean .ginlined-content::-webkit-scrollbar-track {
  background: transparent;
}

.glightbox-clean .ginlined-content::-webkit-scrollbar-thumb {
  background-color: var(--color-border);
  border-radius: 3px;
}

.glightbox-clean .ginlined-content::-webkit-scrollbar-thumb:hover {
  background-color: var(--color-text-muted);
}

/* Also theme scrollbars on nested overflow containers (e.g. tall SVGs) */
.glightbox-clean .gslide-inner-content {
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
}

.glightbox-clean .gslide-inner-content::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.glightbox-clean .gslide-inner-content::-webkit-scrollbar-track {
  background: transparent;
}

.glightbox-clean .gslide-inner-content::-webkit-scrollbar-thumb {
  background-color: var(--color-border);
  border-radius: 3px;
}

.glightbox-clean .gslide-inner-content::-webkit-scrollbar-thumb:hover {
  background-color: var(--color-text-muted);
}

/* Description area */

.glightbox-clean .gslide-description {
  background: var(--color-surface);
  color: var(--color-text);
}

.glightbox-clean .gslide-title {
  color: var(--color-text);
}

/* Close button -- ensure visibility on dark overlay */
.glightbox-clean .gclose,
.glightbox-clean .gnext,
.glightbox-clean .gprev {
  background: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  backdrop-filter: blur(4px);
}

.glightbox-clean .gclose:hover,
.glightbox-clean .gnext:hover,
.glightbox-clean .gprev:hover {
  background: rgba(0, 0, 0, 0.7);
}

/* Image slides -- no white background behind images */
.glightbox-clean .gslide-image img {
  background: transparent;
}

}