/**
 * Brand Carousel for Elementor Stylesheet
 * Responsive, center-elevated card carousel with edge peek and inactive styling
 */

:root {
	--bc-lift: -26px;
	--bc-transition-speed: 550ms;
	--bc-inactive-opacity: 0.65;
	--bc-inactive-grayscale: 100%;
	--bc-inactive-scale: 0.94;
	--bc-inactive-blur: 0px;
}

/* -----------------------------------------
   Carousel Outer Container
----------------------------------------- */
.brand-carousel-wrapper {
	position: relative;
	width: 100%;
	box-sizing: border-box;
	/* Reserve physical space above so the visually lifted card doesn't overlap other widgets */
	padding-top: calc(0px - var(--bc-lift, -26px) + 30px);
	margin: 0 auto;
}

.brand-carousel-container.swiper {
	width: 100%;
	/* Allow the lifted card to visually break out of the Swiper box vertically */
	overflow: visible !important;
	/* Clip horizontally to contain off-screen slides, but allow 150px overflow top/bottom */
	clip-path: inset(-150px 0 -150px 0);
	position: relative;
	padding-bottom: 28px;
}

/* Allow visible overflow on top if needed for large lift */
.brand-carousel-container.swiper-initialized {
	display: block;
}

/* -----------------------------------------
   Swiper Slide & Inner Wrapper
----------------------------------------- */
.brand-carousel-wrapper .swiper-slide {
	height: auto;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	/* Smooth transitions for carousel sliding */
	transition: transform var(--bc-transition-speed, 550ms) cubic-bezier(0.25, 1, 0.5, 1);
	/* Override Elementor's default Swiper CSS which sometimes sets overflow: hidden on slides */
	overflow: visible !important;
}

.brand-carousel-slide-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
}

/* -----------------------------------------
   Card Element (Active vs Inactive)
----------------------------------------- */
.brand-carousel-card {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 380px;
	border-radius: 16px;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	box-sizing: border-box;
	/* Default inactive state: lower, desaturated, lower opacity, slight scale */
	transform: translateY(0) scale(var(--bc-inactive-scale, 0.94));
	opacity: var(--bc-inactive-opacity, 0.65);
	filter: grayscale(var(--bc-inactive-grayscale, 100%)) blur(var(--bc-inactive-blur, 0px));
	transition: transform var(--bc-transition-speed, 550ms) cubic-bezier(0.25, 1, 0.5, 1),
	            opacity var(--bc-transition-speed, 550ms) ease,
	            filter var(--bc-transition-speed, 550ms) ease,
	            box-shadow var(--bc-transition-speed, 550ms) ease,
	            border-color var(--bc-transition-speed, 550ms) ease;
	cursor: pointer;
	z-index: 1;
	background-color: #1e293b;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

/* Active Center Card: Elevated, 100% Saturation, Full Opacity, Scale 1 */
.brand-carousel-wrapper .swiper-slide-active .brand-carousel-card {
	transform: translateY(var(--bc-lift, -26px)) scale(1);
	opacity: 1;
	filter: grayscale(0%) blur(0px);
	z-index: 5;
}

/* Inactive Card subtle hover hint */
.brand-carousel-wrapper .swiper-slide:not(.swiper-slide-active) .brand-carousel-card:hover {
	opacity: 0.85;
	filter: grayscale(40%) blur(0px);
	transform: translateY(-4px) scale(var(--bc-inactive-scale, 0.94));
}

/* Active Card Hover */
.brand-carousel-wrapper .swiper-slide-active .brand-carousel-card:hover {
	transform: translateY(calc(var(--bc-lift, -26px) - 4px)) scale(1.02);
}

/* -----------------------------------------
   Card Background & Overlay
----------------------------------------- */
.brand-carousel-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	z-index: 1;
	transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.brand-carousel-card:hover .brand-carousel-bg {
	transform: scale(1.06);
}

.brand-carousel-overlay {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(15, 23, 42, 0.45);
	z-index: 2;
	transition: background-color 0.4s ease;
}

/* -----------------------------------------
   Card Inner Content (Media & Inner Title)
----------------------------------------- */
.brand-carousel-inner-content {
	position: relative;
	z-index: 3;
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	padding: 24px;
	box-sizing: border-box;
	justify-content: center;
	pointer-events: none;
}

.brand-carousel-inner-media {
	width: 100%;
	text-align: center;
	margin-bottom: 12px;
	display: flex;
	justify-content: inherit;
}

.brand-carousel-inner-media img {
	display: inline-block;
	width: 120px;
	max-width: 100%;
	height: auto;
	max-height: 120px;
	object-fit: contain;
	transition: transform 0.4s ease;
}

.brand-carousel-card:hover .brand-carousel-inner-media img {
	transform: scale(1.05);
}

.brand-carousel-inner-title {
	font-family: inherit;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.3;
	color: #ffffff;
	text-align: center;
	word-break: break-word;
	margin-top: 12px;
	transition: color 0.3s ease;
}

/* -----------------------------------------
   Bottom Title (Outside Card)
----------------------------------------- */
.brand-carousel-bottom-title {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	text-align: center;
	word-break: break-word;
	margin-top: 18px;
	font-family: inherit;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.4;
	color: #1e293b;
	/* Hidden by default on side/inactive cards */
	opacity: 0;
	visibility: hidden;
	/* Offset matches the card lift so the reveal animation stays relative */
	transform: translateY(calc(var(--bc-lift, -26px) - 8px));
	pointer-events: none;
	transition: opacity var(--bc-transition-speed, 550ms) cubic-bezier(0.25, 1, 0.5, 1),
	            transform var(--bc-transition-speed, 550ms) cubic-bezier(0.25, 1, 0.5, 1),
	            visibility var(--bc-transition-speed, 550ms);
}

.brand-carousel-bottom-title span {
	display: inline-block;
	max-width: 100%;
}

/* Revealed on Active Slide */
.brand-carousel-wrapper .swiper-slide-active .brand-carousel-bottom-title {
	opacity: 1;
	visibility: visible;
	/* Follow the card upward so margin-top reflects the true visual gap */
	transform: translateY(var(--bc-lift, -26px));
	pointer-events: auto;
}

/* -----------------------------------------
   Navigation Arrow Controls Below Carousel
----------------------------------------- */
.brand-carousel-arrows-container {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin-top: 36px;
	position: relative;
	z-index: 10;
}

.brand-carousel-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background-color: #ffffff;
	border: 1px solid #e2e8f0;
	color: #0f172a;
	cursor: pointer;
	outline: none;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
	transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
	padding: 0;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
}

.brand-carousel-arrow:hover {
	background-color: #0f172a;
	border-color: #0f172a;
	color: #ffffff;
	transform: translateY(-2px) scale(1.04);
	box-shadow: 0 8px 20px rgba(15, 23, 42, 0.2);
}

.brand-carousel-arrow:active {
	transform: translateY(0) scale(0.96);
}

.brand-carousel-arrow i {
	font-size: 18px;
	color: inherit;
	transition: color 0.3s ease;
}

.brand-carousel-arrow svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
	transition: fill 0.3s ease;
}

.brand-carousel-arrow.swiper-button-disabled {
	opacity: 0.35;
	cursor: not-allowed;
	pointer-events: none;
}

/* -----------------------------------------
   RTL Compatibility (Hebrew / Arabic)
----------------------------------------- */
[dir="rtl"] .brand-carousel-arrow-prev svg,
[dir="rtl"] .brand-carousel-arrow-next svg {
	transform: scaleX(-1);
}

[dir="rtl"] .brand-carousel-arrow-prev i.fa-arrow-left::before {
	content: "\f061"; /* fa-arrow-right */
}

[dir="rtl"] .brand-carousel-arrow-next i.fa-arrow-right::before {
	content: "\f060"; /* fa-arrow-left */
}

[dir="rtl"] .brand-carousel-arrow-prev i.fa-chevron-left::before {
	content: "\f054"; /* fa-chevron-right */
}

[dir="rtl"] .brand-carousel-arrow-next i.fa-chevron-right::before {
	content: "\f053"; /* fa-chevron-left */
}

/* -----------------------------------------
   Responsive adjustments
----------------------------------------- */
/* Tablet padding-top is now handled dynamically via --bc-lift */

@media (max-width: 767px) {
	/* padding-top is now handled dynamically via --bc-lift */
	.brand-carousel-card {
		height: 320px;
	}
	.brand-carousel-arrow {
		width: 44px;
		height: 44px;
	}
	.brand-carousel-arrow i {
		font-size: 15px;
	}
	.brand-carousel-arrow svg {
		width: 15px;
		height: 15px;
	}
	.brand-carousel-arrows-container {
		margin-top: 24px;
		gap: 12px;
	}
}