/* Bright Addons: shared carousel (native scroll snap, no slider library) */
.bafe-carousel {
	--bafe-spv: 3;
	--bafe-gap: 24px;
	--bafe-arrow-size: 42px;
	--bafe-dot: #d4d4dc;
	--bafe-dot-active: #5b4bff;
	position: relative;
}

.bafe-carousel__viewport {
	position: relative;
}

.bafe-carousel__track {
	display: flex;
	gap: var(--bafe-gap);
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	padding: 4px 2px 12px;
	margin: -4px -2px -12px;
}

.bafe-carousel__track::-webkit-scrollbar {
	display: none;
}

.bafe-carousel__track:focus-visible {
	outline: 2px solid var(--bafe-dot-active);
	outline-offset: 4px;
}

.bafe-carousel__slide {
	flex: 0 0 calc((100% - (var(--bafe-spv) - 1) * var(--bafe-gap)) / var(--bafe-spv));
	min-width: 0;
	scroll-snap-align: start;
}

.bafe-carousel__arrow {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--bafe-arrow-size);
	height: var(--bafe-arrow-size);
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: #fff;
	box-shadow: 0 4px 14px rgba(20, 16, 60, 0.14);
	color: #1d1b36;
	cursor: pointer;
	transform: translateY(-50%);
	transition: color 0.2s ease, background-color 0.2s ease, opacity 0.2s ease;
}

.bafe-carousel__arrow:hover,
.bafe-carousel__arrow:focus-visible {
	background-color: #5b4bff;
	color: #fff;
}

.bafe-carousel__arrow:focus-visible {
	outline: 2px solid #5b4bff;
	outline-offset: 2px;
}

.bafe-carousel__arrow[disabled] {
	opacity: 0.35;
	cursor: default;
}

.bafe-carousel__arrow--prev {
	left: calc(var(--bafe-arrow-size) / -2);
}

.bafe-carousel__arrow--next {
	right: calc(var(--bafe-arrow-size) / -2);
}

[dir="rtl"] .bafe-carousel__arrow--prev {
	right: calc(var(--bafe-arrow-size) / -2);
	left: auto;
}

[dir="rtl"] .bafe-carousel__arrow--next {
	right: auto;
	left: calc(var(--bafe-arrow-size) / -2);
}

[dir="rtl"] .bafe-carousel__arrow svg {
	transform: scaleX(-1);
}

.bafe-carousel__arrow.is-hidden {
	display: none;
}

.bafe-carousel__dots {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin-top: 22px;
}

.bafe-carousel__dots:empty {
	display: none;
}

.bafe-carousel__dot {
	width: 9px;
	height: 9px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background-color: var(--bafe-dot);
	cursor: pointer;
	transition: width 0.25s ease, background-color 0.25s ease;
}

.bafe-carousel__dot[aria-current="true"] {
	width: 24px;
	background-color: var(--bafe-dot-active);
}

.bafe-carousel__dot:focus-visible {
	outline: 2px solid var(--bafe-dot-active);
	outline-offset: 2px;
}

@media (max-width: 767px) {
	.bafe-carousel__arrow--prev {
		left: 4px;
	}

	.bafe-carousel__arrow--next {
		right: 4px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bafe-carousel__track {
		scroll-behavior: auto;
	}
}