/* ==========================================================================
   CUSTOM SWIPER PAGINATION STYLING
   Specialized styling for color selection pagination dots
   ========================================================================== */

/* Creates pill-shaped container for color selection dots */
.body-carousel .swiper-pagination.swiper-pagination-bullets {
	background-color: #F2F1F0; /* Light gray background */
	border-radius: 500px; /* Rounded corners */
	padding: 12px 20px; /* Comfortable padding */
	display: inline-flex; /* Horizontal layout */
	align-items: center; /* Vertical centering */
	justify-content: center; /* Horizontal centering */
	width: auto !important; /* Size to content */
	bottom: 0; /* Override default positioning */
	left: 50%; /* Center horizontally */
	transform: translateX(-50%); /* Perfect centering */
	gap: 6px; /* Space between dots */
}

/* Base styling for all color selection dots */
.body-carousel .swiper-pagination-bullet {
	width: 36px !important; /* Larger size for color dots */
	height: 36px !important; 
	border-radius: 50% !important; /* Perfect circle */
	opacity: 1 !important; /* Fully visible */
	position: relative !important; /* For checkmark positioning */
	transition: all 0.3s ease !important; /* Smooth transition */
	margin: 0 4px !important; /* Horizontal spacing */
	border: none !important; /* No default borders */
	outline: none !important; /* No default outlines */
}

/* First color option - White with light gray border */
.fl-node-7nhzb35t2xfv .pp-image-carousel .swiper-pagination .swiper-pagination-bullet:nth-of-type(1) {
	background-color: #FFFFFF !important; /* White */
	border: 1px solid #E0E0E0 !important; /* Light gray border */
}

/* Second color option - Black */
.fl-node-7nhzb35t2xfv .pp-image-carousel .swiper-pagination .swiper-pagination-bullet:nth-of-type(2) {
	background-color: #000000 !important; /* Black */
}

/* Third color option - Gray */
.fl-node-7nhzb35t2xfv .pp-image-carousel .swiper-pagination .swiper-pagination-bullet:nth-of-type(3) {
	background-color: #919DA5 !important; /* Gray */
}

/* Fourth color option - Dark gray */
.fl-node-7nhzb35t2xfv .pp-image-carousel .swiper-pagination .swiper-pagination-bullet:nth-of-type(4) {
	background-color: #5E5E5E !important; /* Dark gray */
}

/* Fifth color option - Teal/blue */
.fl-node-7nhzb35t2xfv .pp-image-carousel .swiper-pagination .swiper-pagination-bullet:nth-of-type(5) {
	background-color: #437F92 !important; /* Teal/blue */
}

/* Adds checkmark to active color selection */
.body-carousel .swiper-pagination-bullet.swiper-pagination-bullet-active::after {
	content: "" !important;
	position: absolute !important;
	top: 50% !important;
	left: 50% !important;
	transform: translate(-50%, -50%) !important; /* Centers checkmark */
	width: 10px !important;
	height: 10px !important;
	background-image: url('/wp-content/uploads/2025/03/color-active.svg') !important; /* Checkmark SVG */
	background-size: contain !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	z-index: 10 !important; /* Ensures visibility */
}

/* Keeps original black checkmark for white color option */
.body-carousel .swiper-pagination-bullet:nth-of-type(1).swiper-pagination-bullet-active::after {
	filter: none !important; /* No inversion needed for white background */
}

/* Makes checkmark white for all dark-colored bullets (better visibility) */
.body-carousel .swiper-pagination-bullet:nth-of-type(n+2).swiper-pagination-bullet-active::after {
	filter: invert(100%) !important; /* Inverts checkmark to white for better contrast on dark backgrounds */
}


/* 
 * INTERIOR COLOR CAROUSEL CUSTOM STYLING
 * This stylesheet defines custom styling for an interior color carousel component
 */

/* Position the carousel wrapper to allow absolute positioning of child elements */
#interior-color .pp-image-carousel-wrapper {
  position: relative;
}

/* Hide the default pagination dots provided by Swiper JS */
#interior-color .swiper-pagination {
  display: none !important;
}

/* Custom navigation container - centers and spaces our custom controls */
.interior-color-custom-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 0 40px 0;
}

/* 
 * CHEVRON NAVIGATION BUTTONS
 * Styling for the previous/next navigation arrows
 */
.interior-chevron {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  outline: none;
  -webkit-tap-highlight-color: transparent; /* Removes the tap highlight on mobile devices */
}

/* Remove all default browser styling for button states */
.interior-chevron:focus,
.interior-chevron:active,
.interior-chevron:hover {
  outline: none;
  background: transparent !important;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
  border: none !important;
}

/* Set dimensions for the chevron icons */
.interior-chevron img {
  width: 12px;
  height: 12px;
}

/* Position the left chevron with right margin for spacing */
.interior-chevron-left {
  margin-right: 30px;
}

/* Position the right chevron with left margin for spacing */
.interior-chevron-right {
  margin-left: 30px;
}

/* Make all chevron icons black by adjusting brightness filter */
.interior-chevron img {
  filter: brightness(0); /* Make all chevrons black (#000) */
}

/* 
 * CUSTOM PAGINATION INDICATORS
 * Creates a line-based pagination system instead of dots
 */
.interior-custom-pagination {
  display: flex;
  gap: 10px; /* Space between pagination indicators */
}

/* Individual pagination indicator - thin horizontal line */
.interior-pagination-bullet {
  width: 72px;
  height: 2px;
  background-color: #F2F1F0; /* Light gray default state */
  border: none;
  padding: 0;
  margin: 0;
  cursor: default;
  transition: all 0.3s ease; /* Smooth transition for state changes */
  pointer-events: none; /* Prevents clicks on the indicators */
}

/* Active pagination indicator - gradient border line */
.interior-pagination-bullet-active {
  background-color: transparent;
  border: 1px solid;
  /* Multi-color gradient for the active indicator */
  border-image-source: linear-gradient(270deg, #B31D2F 0.68%, #7D4A99 36%, #685AB4 51%, #2E75D8 66%, #94B0E8 82.5%, #50BBCA 98%);
  border-image-slice: 1; /* Ensures the gradient applies to the entire border */
}

/* 
 * COLOR INFORMATION DISPLAY
 * Text styling for displaying the selected color name and model info
 */
.interior-color-info {
  text-align: center;
  font-family: LINESeedSansTH, Verdana, Arial, sans-serif;
  font-size: 20px;
  line-height: 30px;
  font-weight: 700;
  margin-bottom: 0;
}

/* Style for the color name text */
.color-name {
  color: #000000; /* Black text */
}

/* Style for the model information text */
.model-info {
  color: #215469; /* Teal/blue text */
}