/* R3-10: tap-to-enlarge lightbox for menu photos.
   Self-contained dark surface so it reads the same on light or dark menu
   palettes. All lightbox CSS lives in this file only. */

/* Subtle affordance on tappable images. */
.menu-item-media img,
.menu-category-media img {
  cursor: zoom-in;
}

.menu-lightbox {
  position: fixed;
  inset: 0;
  z-index: 2147483000; /* above sticky nav, FAB, return-top, dialogs */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 48px);
  background: rgba(10, 12, 16, 0.88);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.18s ease;
}

.menu-lightbox.is-open {
  opacity: 1;
}

.menu-lightbox__img {
  max-width: 90vw;
  max-height: 90vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 14px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
  background: #1b1d22;
  transform: scale(0.96);
  transition: transform 0.18s ease;
}

.menu-lightbox.is-open .menu-lightbox__img {
  transform: scale(1);
}

.menu-lightbox__close {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  line-height: 1;
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background 0.15s ease, transform 0.15s ease;
}

.menu-lightbox__close:hover,
.menu-lightbox__close:focus-visible {
  background: rgba(255, 255, 255, 0.26);
  transform: scale(1.05);
  outline: none;
}

/* Keep body from scrolling behind the overlay. */
body.menu-lightbox-open {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .menu-lightbox,
  .menu-lightbox__img,
  .menu-lightbox__close {
    transition: none;
  }
}