/* --- Carousel Specific Styles --- */

.endorsement-carousel-container {
	width: 100% !important;
	max-width: 100% !important; /* Changed from 100vw */
	overflow: hidden !important;
	box-sizing: border-box !important;
	margin: 0; /* Removed auto */
	padding-left: 0;
	padding-right: 0;
}

/* --- NEW: Carousel Wrapper (contains the track) --- */
.carousel-wrapper {
	width: 100%;
	overflow: hidden; /* Critical: clips overflowing content */
	position: relative;
}

/* --- Carousel Track --- */
.endorsement-carousel-track {
	display: flex;
	flex-wrap: nowrap;
	width: max-content;
	transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
	padding: 2rem 0;
	will-change: transform;
	position: relative;
	left: 0;
}

/* --- Carousel Slides --- */
.endorsement-carousel-slide {
	flex-shrink: 0;
	cursor: pointer;
	transform: scale(0.9);
	opacity: 0.7;
	margin: 0 8px;
	transition:
		opacity 0.5s,
		box-shadow 0.5s,
		width 0.5s,
		transform 0.5s,
		margin 0.5s;
	/* Ensure content stays inside the slide boundary */
	overflow: hidden;
	border-radius: 0.75rem;
	background-color: #000;
}

.endorsement-aspect-video {
	aspect-ratio: 16 / 9;
}

.endorsement-poster-image,
.endorsement-video-element {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.endorsement-play-button-overlay {
	display: none !important; /* Hide by default */
}

.endorsement-carousel-slide.active .endorsement-play-button-overlay {
	display: flex !important; /* Force show when active */
	z-index: 20;
}

.endorsement-carousel-slide.active .endorsement-play-button-overlay {
	display: flex !important;
	opacity: 1;
}

.endorsement-carousel-slide .endorsement-play-button-overlay.hidden {
	opacity: 0;
	pointer-events: none;
}

.endorsement-play-icon {
	width: 75px;
	height: 75px;
	background-color: #faa106;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	transition:
		transform 0.2s,
		background-color 0.2s;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}

.endorsement-play-icon:hover {
	transform: scale(1.1);
}

.endorsement-play-icon svg {
	fill: white;
	margin-left: 4px;
}

/* Navigation SVGs */
.endorsement-svg-container {
	cursor: pointer;
	transition:
		transform 0.2s,
		opacity 0.3s ease;
}

/* physical "press" animation when tapped/clicked */
.endorsement-svg-container:active {
	transform: scale(0.95);
}

/* 1. Default State (Grey background, dark arrow) */
.endorsement-svg-background {
	fill: #f1f1f1;
	transition: fill 0.2s ease;
}

.endorsement-svg-arrow {
	fill: #02071d;
	stroke: #02071d;
	transition:
		fill 0.2s ease,
		stroke 0.2s ease;
}

/* 3. Hover State ONLY for devices with a mouse (fixes mobile sticky hover) */
@media (hover: hover) {
	.endorsement-svg-container:not(.disabled):hover .endorsement-svg-background {
		fill: #f5aa22;
	}

	.endorsement-svg-container:not(.disabled):hover .endorsement-svg-arrow {
		fill: #ffffff;
		stroke: #ffffff;
	}
}

/* 4 & 5. Disabled State (First & Last slides) */
.endorsement-svg-container.disabled {
	opacity: 0.4; /* Fades the button to make it look inactive */
	cursor: not-allowed;
	pointer-events: none; /* Disables hover effects and clicks */
}

/* Force disabled state back to grey in case a touch state gets stuck */
.endorsement-svg-container.disabled .endorsement-svg-background {
	fill: #f1f1f1 !important;
}

.endorsement-svg-container.disabled .endorsement-svg-arrow {
	fill: #02071d !important;
	stroke: #02071d !important;
}

#endorsement-loading-state {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	min-height: 300px;
}

.endorsement-loading-spinner {
	border: 4px solid #f3f3f3;
	border-top: 4px solid #faa106;
	border-radius: 50%;
	width: 40px;
	height: 40px;
	animation: endorsement-spin 1s linear infinite;
}

@keyframes endorsement-spin {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

/* --- Desktop View: Screen >= 480px --- */
@media (min-width: 480px) {
	.endorsement-carousel-container {
		/* This forces full width only on desktop */
		width: 100vw !important;
		position: relative;
		left: 50%;
		right: 50%;
		margin-left: -50vw !important;
		margin-right: -50vw !important;
		overflow: hidden;
	}

	.endorsement-carousel-slide {
		width: 60vw !important;
		max-width: 1000px;
		/* CHANGE: Use a consistent positive margin for ALL slides to ensure symmetry */
		margin: 0 12px !important;
		opacity: 0.45;
		transform: scale(0.85);
		transition: all 0.5s ease;
	}

	.endorsement-carousel-slide.active {
		opacity: 1;
		transform: scale(1);
		z-index: 10;
		/* CHANGE: Keep margin consistent with the base class so centering works perfectly */
		margin: 0 12px !important;
	}

	#endorsementPrevBtn,
	#endorsementNextBtn {
		/* display: block !important; */
		z-index: 50;
	}
	#endorsementPrevBtn {
		left: 40px;
	}

	#endorsementNextBtn {
		right: 40px;
	}
}

/* --- Mobile View (Updated for 12px padding & visible buttons) --- */
@media (max-width: 480px) {
	.endorsement-carousel-container {
		width: 100% !important;
		position: static;
		margin: 0 !important;
		padding: 0 12px !important; /* 12px horizontal padding */
		overflow: hidden;
	}
	.endorsement-carousel-slide {
		width: calc(100vw - 24px) !important;
		margin: 0 !important;
		opacity: 1;
		transform: scale(1);
		flex-shrink: 0;
	}
	/* Position buttons inside the 12px padding area */
	#endorsementPrevBtn,
	#endorsementNextBtn {
		/* display: block !important; */
		margin-top: 36px;
		transform: translateY(-50%);
		z-index: 50;
		background-color: rgba(255, 255, 255, 0.6); /* Semi-transparent on mobile */
	}
	#endorsementPrevBtn {
		left: 16px;
	}
	#endorsementNextBtn {
		right: 16px;
	}
}