/* ============================================
   SCREENSHOTS SECTION
   ============================================ */

.screenshots-section {
  padding: var(--spacing-3xl) var(--spacing-md) !important;
  padding-bottom: var(--spacing-md) !important;
  overflow: visible;
}

.screenshots__tabs {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-md);
  margin-top: var(--spacing-md);
  margin-bottom: var(--spacing-md);
}

.screenshots__tab {
  background: transparent;
  border: 3px solid var(--theme-secondary);
  color: var(--theme-secondary);
  padding: var(--spacing-sm) var(--spacing-lg);
  border-radius: var(--border-radius-md);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: all var(--transition-slower);
}

.dark .screenshots__tab {
  color: var(--color-white);
}

.screenshots__tab:hover {
  background-color: var(--theme-secondary);
  color: var(--color-white);
}

.screenshots__tab--active {
  background-color: var(--theme-secondary);
  color: var(--color-white);
}

/* ============================================
   CAROUSEL / SLIDER
   ============================================ */

.screenshots__carousel {
  padding: var(--spacing-md) !important;
  padding-bottom: 0px !important;
  overflow: visible !important;
}

.screenshots__carousel.swiper {
  display: block;
}

.screenshots__carousel.swiper--hidden {
  display: none;
}

.screenshots__carousel .swiper-wrapper {
  overflow: visible !important;
}

.screenshots__slide {
  position: relative;
  padding: 12px !important;
  user-select: none;
}

.screenshots__carousel .swiper-slide-active {
  /* Scale is now handled dynamically by JavaScript */
}

.screenshots__slide-image {
  border: 5px solid var(--theme-secondary);
  width: 100%;
  border-radius: 12px;
  box-shadow: var(--shadow-md);
  z-index: -1;
}

.screenshots__pagination {
  position: relative !important;
  margin-top: var(--spacing-xl) !important;
  bottom: 0;
}

.screenshots__carousel .swiper-pagination-bullet {
  background-color: var(--text-color) !important;
  width: 12px !important;
  height: 12px !important;
  opacity: 0.7 !important;
  transition: all var(--transition-base) !important;
}

.screenshots__carousel .swiper-pagination-bullet-active {
  background-color: var(--theme-secondary) !important;
  opacity: 1 !important;
}

.screenshots__slide--active {
  transform: scale(1.1) !important;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 600px) {
  .screenshots-section {
    padding: var(--spacing-xl) var(--spacing-md) !important;
  }

  .screenshots__tabs {
    flex-direction: column;
    gap: var(--spacing-sm);
  }

  .screenshots__tab {
    width: 100%;
  }
}