/**
 * Custom CSS for line-style pagination in the exterior carousel
 * Transforms the standard bullet dots into a continuous line with gradient active state indicator
 */

/* Container for the pagination - ensure it spans full width */
#exterior-interior-exterior-col .swiper-pagination {
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  height: 20px;
  margin-top: 100px;
}

/* Create base line that spans full width */
#exterior-interior-exterior-col .swiper-pagination::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: white;
  transform: translateY(-50%);
  z-index: 1;
}

/* Reset default bullet styling */
#exterior-interior-exterior-col .swiper-pagination-bullet {
  width: calc(100% / var(--total-bullets, 7)); /* Dynamically divide width based on number of bullets */
  height: 1px;
  border-radius: 0;
  margin: 0 !important;
  opacity: 1;
  background-color: transparent !important;
  position: relative;
  z-index: 2;
}

/* Active bullet styling with gradient border */
#exterior-interior-exterior-col .swiper-pagination-bullet-active {
  /* Reset the background color to transparent */
  background-color: transparent !important;
  
  /* Set up the border with a height that will make it stand out */
  height: 1px !important;
  
  /* Position it properly to align with the white line */
  position: relative;
  top: 0.5px;
  
  /* Create the gradient border */
  border: none;
  background-image: linear-gradient(270deg, #B31D2F 0.68%, #7D4A99 36%, #685AB4 51%, #2E75D8 66%, #94B0E8 82.5%, #50BBCA 98%) !important;
}

/* Ensure the pagination is properly positioned */
#exterior-interior-exterior-col .pp-image-carousel-wrapper .swiper-container-horizontal > .swiper-pagination-bullets {
  bottom: 0;
  left: 0;
  right: 0;
}

/* Ensure bullet focus state doesn't disrupt the line */
#exterior-interior-exterior-col .swiper-pagination-bullet:focus {
  outline: none;
}


/* Hide disabled navigation buttons */
#exterior-interior-exterior-col .swiper-button-disabled {
  display: none !important;
}

/* Style the navigation buttons as circles */
#exterior-interior-exterior-col .pp-swiper-button {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.2); /* #00000033 */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease;
  border: none;
}

/* Hover effect for better user experience */
#exterior-interior-exterior-col .pp-swiper-button:hover {
  background-color: rgba(0, 0, 0, 0.3);
}

/* Center the arrow icon inside the circle */
#exterior-interior-exterior-col .pp-swiper-button span {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Make sure the SVG icons are properly sized */
#exterior-interior-exterior-col .pp-swiper-button svg {
  width: 24px;
  height: 24px;
  color: #fff;
}

#exterior-interior-exterior-col .pp-image-carousel-wrapper.pp-nav-outside .pp-swiper-button {
  top: calc(30% - 30px / 2) !important;
}


/* Mobile styles */
@media screen and (max-width: 768px) {
  /* Container for the pagination - ensure it spans full width */
  #exterior-interior-exterior-col .swiper-pagination {
    margin-top: 20px !important;
  }
}