/* ============================================
   SLIDESHOW ENHANCEMENTS - PREMIUM FEATURES
   Professional improvements for better UX
   ============================================ */

/* Enhanced Container with Better Shadows */
.product-slideshow-container {
  box-shadow: 
    0 10px 40px rgba(0, 0, 0, 0.12),
    0 4px 16px rgba(0, 0, 0, 0.08),
    0 0 0 1px rgba(0, 0, 0, 0.04) !important;
  transition: box-shadow 0.3s ease, transform 0.3s ease !important;
}

.product-slideshow-container:hover {
  box-shadow: 
    0 20px 60px rgba(0, 0, 0, 0.16),
    0 8px 24px rgba(0, 0, 0, 0.12),
    0 0 0 1px rgba(0, 0, 0, 0.06) !important;
  transform: translateY(-2px) !important;
}

/* Enhanced Navigation Buttons */
.slideshow-btn {
  background: rgba(255, 255, 255, 0.98) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 
    0 4px 12px rgba(0, 0, 0, 0.12),
    0 2px 4px rgba(0, 0, 0, 0.08) !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  opacity: 0.9 !important;
}

.product-slideshow-container:hover .slideshow-btn {
  opacity: 1 !important;
}

.slideshow-btn:hover {
  background: #ffffff !important;
  transform: scale(1.15) !important;
  box-shadow: 
    0 6px 20px rgba(0, 0, 0, 0.18),
    0 3px 8px rgba(0, 0, 0, 0.12) !important;
  color: #111827 !important;
}

.slideshow-btn:active {
  transform: scale(0.9) !important;
}

/* Enhanced Indicators */
.slideshow-indicators {
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  box-shadow: 
    0 4px 16px rgba(0, 0, 0, 0.12),
    0 2px 8px rgba(0, 0, 0, 0.08) !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  padding: 8px 14px !important;
  gap: 8px !important;
}

.indicator {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: rgba(0, 0, 0, 0.25) !important;
  cursor: pointer !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative !important;
}

.indicator:hover {
  background: rgba(0, 0, 0, 0.5) !important;
  transform: scale(1.3) !important;
}

.indicator.active {
  width: 28px !important;
  height: 8px !important;
  border-radius: 4px !important;
  background: #1f2937 !important;
  box-shadow: 0 2px 8px rgba(31, 41, 55, 0.3) !important;
}

/* Smooth Image Transitions */
.slideshow-slide img,
.slideshow-slide .slideshow-image {
  transition: 
    opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.slideshow-slide.active img,
.slideshow-slide.active .slideshow-image {
  transform: scale(1) !important;
}

.slideshow-slide:not(.active) img,
.slideshow-slide:not(.active) .slideshow-image {
  transform: scale(0.98) !important;
}

/* Enhanced Track Transition */
.slideshow-track {
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

/* Pause on Hover */
.product-slideshow-container:hover .slideshow-track {
  transition-duration: 0.8s !important;
}

/* Loading Animation Enhancement */
.loading-spinner {
  border-width: 3px !important;
  border-top-color: #2563eb !important;
  animation: spin 0.6s linear infinite !important;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Image Quality Enhancement */
.slideshow-slide img,
.slideshow-slide .slideshow-image {
  image-rendering: -webkit-optimize-contrast !important;
  image-rendering: crisp-edges !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

/* Better Focus States for Accessibility */
.slideshow-btn:focus-visible {
  outline: 3px solid #2563eb !important;
  outline-offset: 3px !important;
  box-shadow: 
    0 0 0 3px rgba(37, 99, 235, 0.2),
    0 4px 12px rgba(0, 0, 0, 0.12) !important;
}

.indicator:focus-visible {
  outline: 2px solid #2563eb !important;
  outline-offset: 2px !important;
}

/* Mobile Touch Improvements */
@media (max-width: 768px) {
  .slideshow-btn {
    width: 48px !important;
    height: 48px !important;
    font-size: 16px !important;
  }
  
  .slideshow-indicators {
    padding: 10px 16px !important;
    gap: 10px !important;
  }
  
  .indicator {
    width: 10px !important;
    height: 10px !important;
  }
  
  .indicator.active {
    width: 32px !important;
    height: 10px !important;
  }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  .slideshow-track,
  .slideshow-slide img,
  .slideshow-btn,
  .indicator {
    transition: none !important;
    animation: none !important;
  }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
  .slideshow-btn {
    border: 2px solid #000 !important;
  }
  
  .indicator.active {
    background: #000 !important;
  }
}