/* ============================================
   review-photo-lightbox.css — HappyBud
   Simple "click a review photo, see it bigger" popup — single image,
   close button, no prev/next. Shared by single-product.php's review
   teaser and the [happybud_reviews] hub (see assets/js/review-photo-
   lightbox.js), so it's the same experience in both places.
============================================ */

.hb-photo-modal {
  position: fixed;
  inset: 0;
  z-index: 100020;
  background: rgba(26, 26, 26, 0.92);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  transition: opacity 0.2s;
}
.hb-photo-modal.is-open {
  display: flex;
  opacity: 1;
}
.hb-photo-modal-img {
  max-width: min(90vw, 640px);
  max-height: 85vh;
  border-radius: 16px;
  border: 2px solid #1a1a1a;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}
.hb-photo-modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 44px;
  height: 44px;
  border-radius: 15px;
  background: rgba(26, 26, 26, 0.6);
  border: none;
  color: #fcfaf4;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.hb-photo-modal-close:hover {
  background: #ff6b35;
  color: #1a1a1a;
}

body.hb-photo-modal-lock {
  overflow: hidden;
}

@media (max-width: 480px) {
  .hb-photo-modal {
    padding: 14px;
  }
  .hb-photo-modal-img {
    max-width: 92vw;
    border-radius: 12px;
  }
  .hb-photo-modal-close {
    top: 12px;
    right: 12px;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    font-size: 17px;
  }
}