/* Lightbox, ported from QC Aero's admin.html ac-image-lightbox. Shared
   across every page that includes templates/_lightbox.html, so the markup
   and its styling can never drift out of sync with each other again -
   they were previously copy-pasted per-template and vehicle_new.html was
   missed, causing a live TypeError when a wizard thumbnail was clicked. */
#lightbox-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.85); align-items: center; justify-content: center; z-index: 999; }
#lightbox-overlay.active { display: flex; }
.lightbox-box { position: relative; max-width: 90vw; max-height: 90vh; display: flex; flex-direction: column; align-items: center; }
.lightbox-box img { max-width: 90vw; max-height: 75vh; border-radius: 8px; object-fit: contain; background: #111; }
/* EXTENDED: fixed to the viewport corner, never to .lightbox-box - the
   box's own height (and therefore where -40px-above-it would land) shifts
   with the current image's aspect ratio and the viewport's own height, so
   a box-relative close button has no real floor. max(16px, safe-area +
   12px) keeps a genuine minimum tap-reachable margin from the true screen
   edge on every device, including one with a notch/Dynamic Island
   (env(safe-area-inset-*) - falls back to 0 on a browser that doesn't
   support it, still leaving the 16px floor). No confirmed failure case
   for this app's own (landscape) vehicle photos, but this removes the
   underlying fragility rather than only patching the case that was
   tested. */
.lightbox-close {
  position: fixed;
  top: max(16px, env(safe-area-inset-top, 0px) + 12px);
  right: max(16px, env(safe-area-inset-right, 0px) + 12px);
  width: 44px;
  height: 44px;
  background: rgba(0, 0, 0, 0.5);
  border: none;
  border-radius: 50%;
  color: #fff;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  z-index: 1;
}
/* Item: the arrows were misaligned on both axes, and the cause was the
   box they measured themselves against. They are absolutely positioned
   inside .lightbox-box, which holds the image AND the footer, so
   `top: 50%` was the centre of image-plus-footer rather than of the
   photo, and `left/right: -8px` anchored to whichever of the two is
   wider - which is the footer whenever the photo is portrait.

   Measured live on a 281x499 photo at a 606px viewport: the arrows sat
   26px below the image's centre (exactly half the footer's 40px plus its
   12px margin) and 13px clear of the photo's own edges, floating in the
   black, because the footer was 369px wide against the image's 281px.

   .lightbox-stage wraps the image and nothing else, so the arrows can
   only ever centre on the photo, at any aspect ratio. Inside its edges
   rather than hung outside them: the image is already allowed 90vw, so
   anything outside it has nowhere to go on a phone. */
.lightbox-stage { position: relative; display: flex; align-items: center; justify-content: center; max-width: 100%; }
.lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,0.5); color: #fff; border: none; width: 40px; height: 40px; border-radius: 50%; font-size: 1.4rem; cursor: pointer; }
.lightbox-prev { left: 8px; }
.lightbox-next { right: 8px; }
.lightbox-footer { display: flex; align-items: center; gap: 12px; margin-top: 12px; color: #fff; font-size: 0.8rem; }
/* Item 7: a second, thumb-reachable Close alongside the top-right X -
   mirrors vehicle_detail.html's own top+bottom .vd-close-link pattern
   ("avoids scrolling back up"), applied here to a viewer that opens
   full-screen rather than a long page. Muted/translucent, not the
   global button style's lime fill (theme.css's bare `button` selector) -
   Close isn't the primary action here, Download is. */
.lightbox-close-bottom { background: rgba(255, 255, 255, 0.15); color: #fff; }
.lightbox-close-bottom:hover { background: rgba(255, 255, 255, 0.25); }