/* Light Gallery */

/* Toolbar (top) and sub-html (between image and thumbs): remove white backgrounds */
.lg-actions .lg-next,
.lg-actions .lg-prev,
.lg-sub-html,
.lg-toolbar {
  background-color: transparent;
}

/* Sub-html: hide bar and title text but keep the gap (preserve height via padding) */
.lg-sub-html {
  opacity: 0 !important;
  pointer-events: none;
}

/* z-index */
.lg-outer {
  z-index: 1000000;
}

/* Inner elements transparent */
.lg-outer .lg-toogle-thumb,
.lg-outer .lg-thumb-outer,
.lg-outer .lg-img-wrap,
.lg-outer .lg-item {
  background-color: transparent;
}

.lg-outer .lg-object {
  border: 1px solid rgba(0, 0, 0, 0.2);
}

/* Backdrop: black at 80% opacity with blur so the page behind is visible but softened */
.lg-backdrop {
  background-color: rgba(0, 0, 0, 0.80);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 999999;
}

/* All UI text/icons: white */
.lg-outer .lg-toogle-thumb,
.lg-actions .lg-next,
.lg-actions .lg-prev,
.lg-toolbar .lg-icon,
.lg-counter,
.lg-counter-current,
.lg-counter-all {
  color: #ffffff !important;
}

/* Counter: force visible on the left of toolbar */
.lg-counter {
  display: block !important;
  float: left !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Toolbar: hide all icons except close (X) */
.lg-toolbar .lg-icon:not(.lg-close) {
  display: none !important;
}

/* Toolbar icon hover: keep white */
.lg-toolbar .lg-icon:hover {
  color: rgba(255, 255, 255, 0.7);
}

/* Arrows: no background on desktop */
.lg-next,
.lg-prev {
  background-color: transparent !important;
  border-radius: 0;
  color: #ffffff;
  padding: 10px;
}

/* Arrow hover: no background */
.lg-next:hover:not(.disabled),
.lg-prev:hover:not(.disabled) {
  color: rgba(255, 255, 255, 0.7);
  background-color: transparent !important;
}

/* Mobile: hide arrows, show only X and counter */
@media (max-width: 768px) {
  .lg-actions .lg-next,
  .lg-actions .lg-prev {
    display: none !important;
  }

  .lg-toolbar .lg-close {
    float: right !important;
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
  }
}

/* Thumbnails: square corners, no border by default */
.lg-outer .lg-thumb-item {
  border-radius: 0 !important;
  border: 2px solid transparent !important;
}

/* White border only on the active (currently displayed) thumbnail */
.lg-outer .lg-thumb-item.active {
  border-color: #ffffff !important;
}

/* No border on hover — only active gets the white frame */
.lg-outer .lg-thumb-item:hover {
  border-color: transparent !important;
}

/* Lock page scroll when gallery is open */
html.lg-overlay-open,
html.lg-overlay-open body {
  overflow: hidden !important;
}