/* Desktop/Tablet lightbox cleanup (normal page + Full Page overlay) */

/* Tabs and counter sit on the photo (see photo_gallery_view.css) */

/* Stage: positioning context + center image */
#kg-lightbox-stage {
  position: fixed !important;
  transform: none !important;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

#kg-lightbox-stage::before {
  content: none !important;
  display: none !important;
}

@media (min-width: 701px) {
  #kg-lightbox-img {
    width: min(100vw, 100%) !important;
    max-width: 100vw !important;
    height: auto !important;
    max-height: 100dvh !important;
    object-fit: contain !important;
  }
}

.kg-lightbox-close {
  z-index: 4 !important;
  position: absolute !important;
  width: 42px !important;
  height: 42px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  background: rgba(0, 0, 0, 0.45) !important;
  color: #fff !important;
  font-size: 28px !important;
  line-height: 1 !important;
  margin: 0 !important;
  transform: none !important;
  top: 12px !important;
  right: 12px !important;
  left: auto !important;
  bottom: auto !important;
}

/* NOTE:
   This rule was too broad previously (hid all overlay buttons).
   Leave it disabled for now until we target the exact unwanted button.
   If you still need it, we can re-add a precise selector.
*/
/*
@media (min-width: 701px) {
  #kg-overlay-modal-body .kg-overlay-modal__ui button {
    display: none !important;
  }
}
*/

/* Force the close button to behave as an overlay, not a layout item */
.kg-lightbox-close {
  position: absolute !important;
}

#kg-lightbox-stage .kg-lightbox-close,
#kg-lightbox .kg-lightbox-frame .kg-lightbox-close {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  left: auto !important;
  bottom: auto !important;
  transform: none !important;
}