/* Product Gallery - Modern & Elegant Design */

.product-gallery {
  width: 100%;
  margin-bottom: 0.5rem !important;
  /* Giảm khoảng cách giữa gallery và tiêu đề */
}

/* Giảm khoảng cách sau tiêu đề sản phẩm */
.product-detail-title-wrapper {
  margin-bottom: 0.5rem !important;
}

/* Đảm bảo badge align với baseline của H1 title */
.product-detail-title-wrapper {
  align-items: baseline;
  /* Căn theo baseline của text */
}

/* Badge container align với baseline của H1 */
.product-detail-title-wrapper>div:last-child {
  align-self: baseline;
  /* Căn theo baseline của H1 text */
  display: flex;
  align-items: baseline;
  /* Badge text align với H1 baseline */
}

/* Main Image Wrapper - Tự động điều chỉnh theo ảnh */
.product-gallery .gallery-main {
  position: relative;
  margin-bottom: 0 !important;
  /* Loại bỏ hoàn toàn margin-bottom để tránh khoảng cách */
  padding-bottom: 0 !important;
  /* Loại bỏ padding-bottom */
  display: block !important;
  /* Đảm bảo display block */
}

/* Main Image Container - Tỉ lệ 16:9 nhất quán với rendition 800x450 */
.product-gallery .gallery-main-container {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  /* Tỉ lệ 16:9 - khớp với rendition 800x450 */
  min-height: 280px;
  /* Chiều cao tối thiểu */
  max-height: 500px;
  /* Chiều cao tối đa */
  border-radius: 0.5rem;
  /* rounded-lg */
  background-color: transparent;
  /* Nền trong suốt */
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Main Images - Hidden by default, shown when active */
.gallery-main-image {
  @apply absolute inset-0;
  display: none;
  pointer-events: none;
  /* ✅ FIXED: Sử dụng CSS variable thay vì hard-coded z-index */
  z-index: var(--z-index-base, 1);
  width: 100%;
  height: 100%;
}

.gallery-main-image.active {
  display: block;
  pointer-events: auto;
  /* ✅ FIXED: Sử dụng CSS variable thay vì hard-coded z-index */
  z-index: calc(var(--z-index-base, 1) + 1);
  animation: fadeInImage 0.3s ease-in-out;
  width: 100%;
  height: 100%;
}

/* Ensure only active image is visible - Force hide non-active */
.gallery-main-image:not(.active) {
  display: none !important;
  opacity: 0;
  visibility: hidden;
  width: 0;
  height: 0;
}

@keyframes fadeInImage {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Ensure picture and img inside gallery-main-image fill container - object-contain để căn giữa */
.gallery-main-image picture,
.gallery-main-image img {
  @apply w-full h-full;
  object-fit: contain;
  display: block;
  /* Bỏ hoàn toàn transition và hover effect - không có hover cho ảnh trong product detail */
  transition: none !important;
  transform: none !important;
}

/* Đảm bảo không có hover effect cho ảnh trong gallery */
.gallery-main-image:hover picture,
.gallery-main-image:hover img,
.gallery-main-image.active:hover picture,
.gallery-main-image.active:hover img,
.gallery-main-container:hover .gallery-main-image img,
.gallery-main-container:hover .gallery-main-image.active img {
  transform: none !important;
  scale: 1 !important;
}

/* Navigation Buttons - Always visible when multiple images */
.gallery-nav-btn {
  @apply opacity-100;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

/* Show more prominently on hover */
.gallery-main-container:hover .gallery-nav-btn {
  @apply bg-white;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.gallery-nav-btn:hover {
  transform: scale(1.1) translateY(-50%);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.gallery-nav-btn:active {
  transform: scale(0.95) translateY(-50%);
}

/* Thumbnail Gallery Wrapper */
.product-gallery .gallery-thumbnails-wrapper {
  position: relative;
  margin-left: -0.5rem;
  /* -mx-2 */
  margin-right: -0.5rem;
  /* -mx-2 */
  padding-left: 0.5rem;
  /* px-2 */
  padding-right: 0.5rem;
  /* px-2 */
  margin-top: 0.5rem !important;
  /* 8px - Khoảng cách hợp lý giữa ảnh và thumbnails */
  padding-top: 0 !important;
  /* Loại bỏ padding-top */
}

/* Thumbnail Gallery Container */
.gallery-thumbnails {
  @apply -mx-2 px-2;
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE/Edge */
  position: relative;
}

.gallery-thumbnails::-webkit-scrollbar {
  display: none;
  /* Chrome/Safari */
}

/* Thumbnail Navigation Buttons */
.gallery-thumb-nav {
  @apply transition-all duration-200;
  will-change: transform, opacity;
  /* ✅ FIXED: Sử dụng CSS variable thay vì hard-coded z-index */
  z-index: calc(var(--z-index-base, 1) + 2);
  opacity: 0;
  pointer-events: none;
}

.gallery-thumb-nav.visible {
  opacity: 1 !important;
  pointer-events: auto !important;
}

.gallery-thumb-nav:hover {
  @apply scale-110;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.gallery-thumb-nav:active {
  @apply scale-95;
}

.gallery-thumb {
  @apply focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2;
}

.gallery-thumb.active {
  @apply border-blue-500 ring-2 ring-blue-200;
}

.gallery-thumb:hover:not(.active) {
  @apply border-gray-400 scale-105;
}

.gallery-thumb img {
  @apply transition-transform duration-200;
}

.gallery-thumb:hover img {
  @apply scale-110;
}


/* Responsive - Điều chỉnh cho mobile */
@media (max-width: 639px) {
  .product-gallery .gallery-main-container {
    aspect-ratio: 16 / 9;
    /* Giữ tỉ lệ 16:9 trên mobile */
    min-height: 180px;
    /* Chiều cao tối thiểu trên mobile */
    max-height: 300px;
    /* Chiều cao tối đa trên mobile */
  }

  .gallery-nav-btn {
    @apply opacity-100;
    @apply bg-white/80;
  }

  .gallery-thumb {
    @apply w-16;
    aspect-ratio: 16 / 9;
  }

  .gallery-thumbnails-wrapper {
    @apply px-2;
    /* Giảm padding trên mobile để phù hợp với desktop */
  }

  .gallery-thumb-nav {
    @apply p-1;
    /* Nút nhỏ hơn trên mobile */
  }

  .gallery-thumb-nav svg {
    @apply w-4 h-4;
  }

  /* Lightbox responsive cho mobile */
  .gallery-lightbox .lightbox-image-wrapper {
    width: 95vw !important;
    height: auto !important;
    aspect-ratio: 16 / 9;
    max-height: 55vh !important;
  }

  .gallery-lightbox .lightbox-controls {
    @apply px-3 py-1.5 gap-3;
  }

  .gallery-lightbox .lightbox-nav {
    @apply p-1;
  }

  .gallery-lightbox .lightbox-nav svg {
    @apply w-4 h-4;
  }
}

/* Smooth scrolling for thumbnails */
.gallery-thumbnails {
  scroll-behavior: smooth;
}

/* Loading state */
.gallery-main-image img {
  @apply transition-opacity duration-200;
}

.gallery-main-image img[loading="lazy"] {
  @apply opacity-0;
}

.gallery-main-image img[loading="lazy"].loaded {
  @apply opacity-100;
}

/* Image Zoom Popup Styles */
.gallery-lightbox {
  animation: fadeIn 0.15s ease-out;
}

.gallery-lightbox.hidden {
  @apply hidden;
}

/* Lightbox backdrop */
.gallery-lightbox .lightbox-backdrop {
  cursor: pointer;
}

/* Lightbox close button */
.gallery-lightbox .lightbox-close {
  @apply focus:outline-none focus:ring-2 focus:ring-white/50;
  transition: all 0.15s ease-in-out;
  /* Ensure button is always clickable */
  pointer-events: auto !important;
}

.gallery-lightbox .lightbox-close:hover {
  transform: scale(1.1);
  background-color: rgba(0, 0, 0, 0.8);
}

.gallery-lightbox .lightbox-close:active {
  transform: scale(0.95);
}

/* Loading indicator */
.gallery-lightbox .lightbox-loading {
  @apply transition-opacity duration-200;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.gallery-lightbox .lightbox-content {
  animation: zoomIn 0.2s ease-out;
}

@keyframes zoomIn {
  from {
    transform: scale(0.95);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* Lightbox image wrapper - kích thước cố định 16:9 - CSP Compliant */
.gallery-lightbox .lightbox-image-wrapper {
  width: 880px;
  height: 495px;
  max-width: 92vw;
  max-height: 75vh;
  transition: none;
}

.gallery-lightbox .lightbox-image {
  transition: opacity 0.15s ease-in-out;
}

.gallery-lightbox .lightbox-close {
  @apply focus:outline-none focus:ring-2 focus:ring-white;
  transition: all 0.15s ease-in-out;
}

.gallery-lightbox .lightbox-close:hover {
  transform: scale(1.1);
}

.gallery-lightbox .lightbox-nav {
  @apply focus:outline-none focus:ring-2 focus:ring-blue-500;
  transition: all 0.15s ease-in-out;
}

.gallery-lightbox .lightbox-nav:hover {
  transform: scale(1.1);
}

.gallery-lightbox .lightbox-nav:active {
  transform: scale(0.95);
}

/* Bỏ hover effects cho ảnh - chỉ giữ transition cho opacity khi chuyển ảnh */
.gallery-main-image.active {
  transition: opacity 0.3s ease-in-out;
}

/* Đảm bảo không có transform khi hover */
.gallery-main-image.active:hover {
  transform: none !important;
}

.gallery-main-image.active:hover picture,
.gallery-main-image.active:hover img {
  transform: none !important;
  scale: 1 !important;
}