/*
 * Pagination — progress-bar style pills.
 * Shared across hero, benefits, and banner_group swipers (any swiper that uses .swiper-pagination).
 * Active bullet width animates wider on slide change. Bullets are tinted primary color via inline rule in index.php.
 */

.swiper-pagination-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px 0 0;
  z-index: 10;
  width: fit-content;
}

.swiper-pagination {
  position: relative !important;
  bottom: auto !important;
  right: auto !important;
  left: auto !important;
  top: auto !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 10px;
  width: auto !important;
}

/* !important here is deliberate — overriding the swiper-bundle.min.css defaults that load after this file. */
.swiper-pagination-bullet {
  width: 18px !important;
  height: 8px !important;
  border-radius: 999px !important;
  background-color: #D6D6D6; /* fallback — overridden by inline rule in index.php with the template primary color */
  opacity: 0.35 !important;
  margin: 0 !important;
  transition: width 0.3s ease, opacity 0.3s ease;
}

.swiper-pagination-bullet-active {
  width: 26px !important;
  opacity: 1 !important;
}

@media (max-width: 768px) {
  .swiper-pagination-bullet {
    width: 12px !important;
    height: 6px !important;
  }

  .swiper-pagination-bullet-active {
    width: 18px !important;
  }
}

/* Counter text hidden — pagination bars carry the visual progress on their own */
.swiper-counter {
  display: none !important;
}