/*
 * Markething Herba — pagination.
 * ONLY make the current/active dot wider (a pill). Colors, size, spacing and
 * everything else are intentionally left to Elementor / the theme / your own CSS.
 *
 * Covers Swiper carousel dots and Elementor Loop Grid numbered pagination.
 */

.swiper-pagination-bullet-active,
.elementor-pagination .page-numbers.current,
.elementor-pagination span[aria-current="page"] {
  width: 24px !important;
  border-radius: 999px !important;
}

/*
 * Loop Carousel (progress-bar pagination): gap between the progress bar and the
 * slides (loop). The progress bar sits at the TOP of the carousel, so padding-top
 * on the swiper pushes the slides down, away from the bar. Scoped to progressbar
 * loop carousels only, applied globally.
 */
.elementor-widget-loop-carousel.elementor-pagination-type-progressbar .swiper.elementor-loop-container,
.elementor-widget-loop-carousel.elementor-pagination-type-progressbar .swiper {
  padding-top: 40px !important;
}