/* PhotoSwipe chrome overrides. */

/* Hide the zoom button (zoom is via click/scroll/pinch instead). */
.pswp__button--zoom { display: none !important; }

/* Give all chrome icons the same drop shadow so they stay legible over
   light images. The close icon is already white; the open-page icon is a
   black SVG asset rendered as an <img>, so it also gets recolored white. */
.pswp__button--close .pswp__icn {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
}
.pswp__button--photo-open .pswp__icn {
  filter: brightness(0) invert(1) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
}

/* Group the counter with the buttons in the top-right. The preloader keeps
   its default margin-right:auto, pushing this whole ordered group to the
   right edge; the counter sits just left of the controls. */
.pswp__counter { order: 1; margin-inline-end: 14px; }
.pswp__button--photo-open { order: 2; }
.pswp__button--close { order: 3; }

.pswp__top-bar,
.pswp__button--arrow--prev,
.pswp__button--arrow--next,
.pswp__custom-caption {
  transition: opacity 0.3s ease;
}

.pswp--controls-hidden .pswp__top-bar,
.pswp--controls-hidden .pswp__button--arrow--prev,
.pswp--controls-hidden .pswp__button--arrow--next,
.pswp--controls-hidden .pswp__custom-caption {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Base look for the custom caption bar; per-slide visibility (opacity) is
   still toggled inline by the controller since it changes on every slide. */
.pswp__custom-caption {
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  font-size: var(--text-sm);
  line-height: 1.5;
  padding: 10px 15px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  max-height: 30%;
  overflow: auto;
  text-align: center;
  cursor: pointer;
  text-decoration: none;
  display: block;
  opacity: 0;
}
.pswp__custom-caption:hover { text-decoration: underline; }

/* Clicking toggles the chrome rather than zooming, so don't show a zoom
   cursor over the image. */
.pswp__img,
.pswp--zoom-allowed .pswp__img,
.pswp--zoomed-in .pswp__img { cursor: default; }

/* Host <dialog> PhotoSwipe is appended to when the lightbox is opened from
   inside another <dialog> (e.g. the admin selection modal), so it can paint
   above that dialog's own top layer. */
dialog.pswp-host-dialog {
  margin: 0;
  padding: 0;
  border: none;
  width: 100vw;
  max-width: none;
  height: 100vh;
  max-height: none;
  background: transparent;
  overflow: visible;
}

dialog.pswp-host-dialog::backdrop {
  background: transparent;
}