/* Slideshow Component Styles */

/* Main slideshow container */
.slideshow {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  background-color: var(--color-gray-100);
}

/* Aspect ratio container - 16:9 by default */
.slideshow__wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  overflow: hidden;
}

/* Container for all slides */
.slideshow__container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Individual slide */
.slideshow__slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1s ease-in-out, visibility 1s ease-in-out;
  z-index: 1;
}

/* Active slide */
.slideshow__slide--active {
  opacity: 1;
  visibility: visible;
  z-index: 2;
}

/* Slide image */
.slideshow__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Optional overlay for better caption readability */
.slideshow__overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
  padding: var(--spacing-3xl) var(--spacing-lg) var(--spacing-4xl);
  z-index: 3;
  pointer-events: none;
}

/* Caption text */
.slideshow__caption {
  color: var(--color-white);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  text-align: center;
  margin: 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  line-height: 1.4;
}

/* Navigation arrows */
.slideshow__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(255, 255, 255, 0.9);
  border: none;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
  box-shadow: var(--shadow-md);
  color: var(--color-text-primary);
  font-size: 20px;
}

.slideshow__arrow:hover {
  background-color: var(--color-white);
  box-shadow: var(--shadow-lg);
  transform: translateY(-50%) scale(1.1);
}

.slideshow__arrow:active {
  transform: translateY(-50%) scale(0.95);
}

/* Previous arrow - positioned on right in RTL */
.slideshow__arrow--prev {
  right: var(--spacing-lg);
}

/* Next arrow - positioned on left in RTL */
.slideshow__arrow--next {
  left: var(--spacing-lg);
}

/* Navigation dots */
.slideshow__dots {
  position: absolute;
  bottom: var(--spacing-md);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  z-index: 4;
  padding: var(--spacing-xs);
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: var(--radius-full);
  backdrop-filter: blur(4px);
}

.slideshow__dot {
  width: 12px;
  height: 12px;
  min-width: 12px;
  min-height: 12px;
  border-radius: var(--radius-full);
  background-color: rgba(255, 255, 255, 0.5);
  border: none;
  cursor: pointer;
  transition: all var(--transition-fast);
  padding: 0;
  flex-shrink: 0;
}

.slideshow__dot:hover {
  background-color: rgba(255, 255, 255, 0.8);
  transform: scale(1.2);
}

.slideshow__dot--active {
  background-color: var(--color-white);
  width: 32px;
  min-width: 32px;
  height: 12px;
  min-height: 12px;
  border-radius: 6px;
}

/* Loading state */
.slideshow--loading .slideshow__slide {
  background-color: var(--color-gray-200);
}

.slideshow--loading::after {
  content: 'جاري التحميل...';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--color-text-secondary);
  font-size: var(--font-size-lg);
  z-index: 5;
}

/* Tablet responsiveness */
@media (max-width: 1024px) {
  .slideshow__caption {
    font-size: var(--font-size-lg);
  }

  .slideshow__arrow {
    width: 40px;
    height: 40px;
    font-size: 18px;
  }

  .slideshow__arrow--prev {
    right: var(--spacing-md);
  }

  .slideshow__arrow--next {
    left: var(--spacing-md);
  }
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .slideshow {
    border-radius: var(--radius-md);
  }

  /* Adjust aspect ratio for mobile - 4:3 */
  .slideshow__wrapper {
    padding-bottom: 75%; /* 4:3 aspect ratio */
  }

  .slideshow__caption {
    font-size: var(--font-size-base);
    padding: 0 var(--spacing-md);
  }

  .slideshow__overlay {
    padding: var(--spacing-xl) var(--spacing-sm) var(--spacing-3xl);
  }

  .slideshow__arrow {
    width: 36px;
    height: 36px;
    font-size: 16px;
  }

  .slideshow__arrow--prev {
    right: var(--spacing-sm);
  }

  .slideshow__arrow--next {
    left: var(--spacing-sm);
  }

  .slideshow__dots {
    bottom: var(--spacing-sm);
    gap: var(--spacing-xs);
  }

  .slideshow__dot {
    width: 10px;
    height: 10px;
  }

  .slideshow__dot--active {
    width: 24px;
  }
}

/* Extra small screens */
@media (max-width: 480px) {
  .slideshow__caption {
    font-size: var(--font-size-sm);
  }

  /* Hide arrows on very small screens, rely on dots and auto-advance */
  .slideshow__arrow {
    display: none;
  }

  .slideshow__dots {
    bottom: var(--spacing-xs);
  }
}

/* Print styles - show first slide only */
@media print {
  .slideshow__slide:not(.slideshow__slide--active) {
    display: none;
  }

  .slideshow__arrow,
  .slideshow__dots {
    display: none;
  }
}

/* Accessibility - Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .slideshow__slide {
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
  }

  .slideshow__arrow {
    transition: background-color 0.1s ease;
  }

  .slideshow__dot {
    transition: background-color 0.1s ease;
  }
}

/* Pause indicator (shown when user hovers) */
.slideshow:hover .slideshow__pause-indicator {
  opacity: 1;
}

.slideshow__pause-indicator {
  position: absolute;
  top: var(--spacing-md);
  right: var(--spacing-md);
  background-color: rgba(0, 0, 0, 0.6);
  color: var(--color-white);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  z-index: 10;
  opacity: 0;
  transition: opacity var(--transition-fast);
  pointer-events: none;
}