/* 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;
}
.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); }