/**
 * Vendor Gallery Frontend Styles
 * Styling for the frontend gallery display
 */

/* .vendor-gallery-wrapper {
  margin: 20px 0;
} */

.vendor-gallery-swiper {
  padding: 20px 0;
}

.vendor-gallery-image {
  width: 100% !important;
  height: 236px !important;
  object-fit: cover !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

/* Lightbox trigger styles */
.vendor-gallery-lightbox-trigger {
  display: block;
  cursor: pointer;
  text-decoration: none;
  position: relative;
}

/*.vendor-gallery-lightbox-trigger:hover .vendor-gallery-image {*/
/*  transform: scale(1.05);*/
/*}*/

/* Removed magnify icon - no visual indicator needed */

/* More specific selectors to override SwiperJS */
.vendor-gallery-swiper .swiper-slide img,
.vendor-gallery-wrapper .swiper-slide img {
  /*width: 378px !important;*/
  /*height: 236px !important;*/
  /*object-fit: cover !important;*/
  /*border-radius: 8px !important;*/
}

/* Remove the old hover effect since it's now handled by the lightbox trigger */

.vendor-gallery-next,
.vendor-gallery-prev {
  color: rgba(237,237,237,.9);
  /*background: rgba(255, 255, 255, 0.9);*/
  /*border-radius: 50%;*/
  /*width: 44px;*/
  /*height: 44px;*/
  /*margin-top: -22px;*/
  /*box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);*/
}

.vendor-gallery-next:after,
.vendor-gallery-prev:after {
  font-size: 18px;
  font-weight: bold;
}

.vendor-gallery-next:hover,
.vendor-gallery-prev:hover {
  /*background: #fff;*/
  /*color: #007cba;*/
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .vendor-gallery-image,
  .vendor-gallery-swiper .swiper-slide img,
  .vendor-gallery-wrapper .swiper-slide img {
    /*width: 300px !important;*/
    height: 187px !important;
  }

  .vendor-gallery-next,
  .vendor-gallery-prev {
    width: 36px;
    height: 36px;
    margin-top: -18px;
  }

  /*.vendor-gallery-next:after,*/
  /*.vendor-gallery-prev:after {*/
  /*  font-size: 18px;*/
  /*}*/
}