/* BobrCraft universal lightbox — simple media viewer for review photos/videos.
   Per Figma "Review photo/video review": media centered on dark overlay,
   close × top-right. No thumbnails, no prev/next arrows, no counter (clicking
   another thumbnail in the review re-opens the lightbox with that one). */
.bobr-lb-overlay{
  position:fixed;inset:0;z-index:99999;
  background:rgba(0,0,0,.7);
  display:none;align-items:center;justify-content:center;
  padding:24px;
  opacity:0;transition:opacity .2s;
}
.bobr-lb-overlay.is-open{display:flex;opacity:1}

/* Hidden — Figma "Review photo/video review" shows just the media + close.
   Prev/next get re-enabled below when the overlay carries `.has-multi`
   (JS toggle), so users can navigate when a review attached 2+ items. */
.bobr-lb-thumbs,
.bobr-lb-counter{display:none}
.bobr-lb-prev,
.bobr-lb-next{display:none}

.bobr-lb-overlay.has-multi .bobr-lb-prev,
.bobr-lb-overlay.has-multi .bobr-lb-next{
  display:flex;align-items:center;justify-content:center;
  position:absolute;top:50%;transform:translateY(-50%);
  width:48px;height:48px;border-radius:50%;
  background:#fff;border:0;cursor:pointer;
  color:#1a1a1a;font-size:22px;line-height:1;padding:0;
  box-shadow:0 2px 10px rgba(0,0,0,.25);
  transition:background .15s;
  z-index:2;
}
.bobr-lb-overlay.has-multi .bobr-lb-prev{left:24px}
.bobr-lb-overlay.has-multi .bobr-lb-next{right:24px}
.bobr-lb-overlay.has-multi .bobr-lb-prev:hover,
.bobr-lb-overlay.has-multi .bobr-lb-next:hover{background:#f5f5f5}
@media (max-width:768px){
  .bobr-lb-overlay.has-multi .bobr-lb-prev{left:8px;width:40px;height:40px}
  .bobr-lb-overlay.has-multi .bobr-lb-next{right:8px;width:40px;height:40px}
}

.bobr-lb-stage{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  background:#fff;border-radius:8px;overflow:hidden;
  /* Default size used when no modifier class is applied yet (first paint
     race). Modifier classes below override for the per-type final layout. */
  width:818px;height:818px;
  max-width:calc(100vw - 48px);max-height:calc(100vh - 48px);
}
/* Image stage — let the photo size itself to its natural aspect ratio,
   contained to fit the viewport. `width:auto;height:auto` collapses the
   stage box around the image so wide / tall photos are NOT cropped on the
   sides. */
.bobr-lb-stage--image{
  width:auto;height:auto;
  background:#fff;
}
.bobr-lb-stage--image img{
  display:block;
  max-width:calc(100vw - 48px);
  max-height:calc(100vh - 48px);
  width:auto;height:auto;
  object-fit:contain;
  user-select:none;-webkit-user-drag:none;
}
/* Video stage — same auto-sizing strategy as image, with a black backdrop. */
.bobr-lb-stage--video{
  width:auto;height:auto;
  background:#000;
}
.bobr-lb-stage--video video{
  display:block;
  max-width:calc(100vw - 48px);
  max-height:calc(100vh - 48px);
  width:auto;height:auto;
  object-fit:contain;
  background:#000;
  user-select:none;
}

.bobr-lb-close{
  position:absolute;top:24px;right:24px;
  width:44px;height:44px;border-radius:14px;
  background:#fff;border:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  color:#1a1a1a;font-size:22px;line-height:1;padding:0;
  box-shadow:0 2px 10px rgba(0,0,0,.25);
  transition:background .15s;
  z-index:2;
}
.bobr-lb-close:hover{background:#f5f5f5}

/* Trigger cursor on lightbox-able media */
[data-bobr-lightbox]{cursor:zoom-in}

@media (max-width:768px){
  .bobr-lb-overlay{padding:14px}
  .bobr-lb-close{top:10px;right:10px;width:36px;height:36px;font-size:20px}
}