/* Plugin CSS styles here */
/*
 * WPB Photo Modal - styles
 * Comments and variable names in English
 */

.wpb-photo-modal-wrap { display: inline-block; }

.wpb-photo-modal-button {
  font-size: 14px;
  line-height: 1;
  display: inline-block;
  transition: opacity .15s ease, transform .08s ease;
}

.wpb-photo-modal-button:hover { opacity: 0.95; }

/* Modal base */
.wpb-photo-modal-overlay {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 99999;
}

.wpb-photo-modal-overlay.open { display: flex; }

.wpb-photo-modal-inner {
  width: 90%;
  max-width: 1100px;
  max-height: 90vh;
  position: relative;
}

.wpb-photo-modal-close {
  position: absolute;
  right: 12px;
  top: 12px;
  z-index: 100020;
  background: rgba(0,0,0,0.3);
  color: #fff;
  border: none;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
}

/* Swiper container should fill the modal inner area */
.wpb-photo-modal-swiper {
  width: 100%;
  height: 100%;
  background: transparent;
}

.wpb-photo-modal-swiper .swiper-slide img {
  display: block;
  width: 100%;
  height: 90vh;
  object-fit: contain;
}

/* Navigation arrows (use Swiper default classes) */
.wpb-photo-modal-swiper .swiper-button-next,
.wpb-photo-modal-swiper .swiper-button-prev {
  color: #fff;
  top:400px;
  position: absolute;
}

/* Pagination bullets */
.wpb-photo-modal-swiper .swiper-pagination-bullet {
  background: rgba(255,255,255,0.6);
}

@media (max-width: 600px) {
  .wpb-photo-modal-inner { width: 100%; height: 100%; max-width: none; max-height: 100vh; }
}