/* Fullscreen photo fit — shared Lightroom Web export enhancement */
#loupeContainer div.image-container div.corners {
  display: block;
  width: 100%;
  height: 100%;
}

#loupeContainer div.image-container div.corners > img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: contain;
  object-position: center;
}

/* Keep the photo information below the image, but reserve only the space it
   actually needs.  Lightroom's default 180px footer wastes a large part of
   the screen; this leaves a quiet 8px lower border instead. */
#loupeContainer {
  padding-bottom: 82px !important;
}

#loupeContainer div.info-container {
  height: 72px !important;
  bottom: 8px !important;
  padding: 8px 20px 0 !important;
}

#loupeContainer div.side-navigation {
  padding-bottom: 82px !important;
}

#loupeMeta p.caption {
  height: 32px !important;
}

/* Normal photo view: Index on the left, Auto Play on the right. */
#backToIndex { right: 261px !important; }
#autoPlay { right: 116px !important; }

/* The fullscreen idle timer already adds jimmy-hide-cursor.  Hide the
   playback, fullscreen, and close controls at the same time. */
html.jimmy-hide-cursor #autoPlay,
html.jimmy-hide-cursor #loupeFullscreenButton,
html.jimmy-hide-cursor #loupeCloseButton,
html.jimmy-hide-cursor #loupeControlDivider {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

#loupeFullscreenButton,
#loupeCloseButton,
#loupeControlDivider,
#autoPlay {
  transition: opacity .2s ease, visibility .2s ease !important;
}

/* In browser fullscreen, Auto Play remains available; Index is absent. */
#loupeContainer:fullscreen #autoPlay,
#loupeContainer:-webkit-full-screen #autoPlay {
  display: flex !important;
  top: 18px !important;
  left: auto !important;
  right: 116px !important;
  z-index: 100003 !important;
}

/* Fullscreen retains the normal right-hand control positions; only Index is
   absent. */
#loupeContainer:fullscreen #loupeFullscreenButton,
#loupeContainer:-webkit-full-screen #loupeFullscreenButton {
  position: fixed !important;
  top: 18px !important;
  left: auto !important;
  right: 68px !important;
  z-index: 100003 !important;
}

#loupeContainer:fullscreen #loupeCloseButton,
#loupeContainer:-webkit-full-screen #loupeCloseButton {
  position: fixed !important;
  top: 18px !important;
  left: auto !important;
  right: 20px !important;
  z-index: 100003 !important;
}