/**
 * Xenon Cards Carousel — frontend styles.
 *
 * All adjustable values are driven by CSS custom properties written on the
 * widget wrapper by Elementor style controls; the fallbacks below are the
 * mockup defaults.
 */

.xcc-carousel {
	position: relative;
}

.xcc-viewport {
	position: relative;
}

.xcc-track {
	overflow: hidden;
}

/* Cards stretch to equal height; the card container fills its slide. */
.xcc-track .swiper-slide {
	height: auto;
	box-sizing: border-box;
}

.xcc-track .swiper-slide > .e-con,
.xcc-track .swiper-slide > .elementor-element {
	height: 100%;
}

/*
 * Pre-init layout: approximate the final geometry before Swiper boots so the
 * page doesn't jump. --xcc-spv / --xcc-gap come from the widget controls.
 */
.xcc-track:not(.swiper-initialized) .swiper-wrapper {
	display: flex;
}

.xcc-track:not(.swiper-initialized) .swiper-slide {
	flex-shrink: 0;
	width: calc( ( 100% - ( var(--xcc-spv, 3) - 1 ) * var(--xcc-gap, 24px) ) / var(--xcc-spv, 3) );
	margin-inline-end: var(--xcc-gap, 24px);
}

/* ------------------------------------------------------------------ */
/* Arrows                                                              */
/* ------------------------------------------------------------------ */

.xcc-arrow {
	position: absolute;
	top: var(--xcc-arrow-top, 50%);
	transform: translateY(-50%);
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--xcc-arrow-size, 48px);
	height: var(--xcc-arrow-size, 48px);
	padding: 0;
	border: none;
	border-radius: var(--xcc-arrow-radius, 50%);
	background: var(--xcc-arrow-bg, rgba(255, 255, 255, 0.7));
	-webkit-backdrop-filter: blur(var(--xcc-arrow-blur, 6px));
	backdrop-filter: blur(var(--xcc-arrow-blur, 6px));
	color: var(--xcc-arrow-color, #333333);
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.xcc-arrow--prev {
	inset-inline-start: var(--xcc-arrow-offset, 24px);
}

.xcc-arrow--next {
	inset-inline-end: var(--xcc-arrow-offset, 24px);
}

.xcc-arrow:hover {
	background: var(--xcc-arrow-bg-hover, #ffffff);
	color: var(--xcc-arrow-color-hover, #000000);
}

.xcc-arrow:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.xcc-arrow i {
	font-size: var(--xcc-arrow-icon-size, 20px);
	line-height: 1;
}

.xcc-arrow svg {
	width: var(--xcc-arrow-icon-size, 20px);
	height: auto;
	fill: currentColor;
}

.xcc-arrow.swiper-button-disabled {
	opacity: 0.4;
	cursor: default;
	pointer-events: none;
}

/*
 * When every card fits in view (card count <= Cards Per View), Swiper's
 * watchOverflow locks navigation: the scrubber hides via Swiper's own
 * `.swiper-scrollbar-lock` rule, but the arrows would stay visible-yet-dead
 * because the widget's display rules override `.swiper-button-lock`.
 * `!important` lets the lock state win, so arrows disappear together with
 * the scrubber until there is something to scroll again.
 */
.xcc-arrow.swiper-button-lock {
	display: none !important;
}

/* RTL: flip directional arrow glyphs so "next" still points forward. */
[dir="rtl"] .xcc-arrow i,
[dir="rtl"] .xcc-arrow svg {
	transform: scaleX(-1);
}

/* ------------------------------------------------------------------ */
/* Scrubber                                                            */
/* ------------------------------------------------------------------ */

/*
 * Specificity (0,3,0) intentionally beats Swiper's own
 * `.swiper-scrollbar.swiper-scrollbar-horizontal` absolute positioning.
 */
.xcc-carousel .xcc-scrubber.swiper-scrollbar {
	position: relative;
	inset: auto;
	display: block;
	width: var(--xcc-scrubber-width, 80%);
	height: var(--xcc-rail-height, 4px);
	margin: var(--xcc-scrubber-gap, 40px) auto 0;
	background: var(--xcc-rail-color, #7A7A7A);
	border-radius: var(--xcc-scrubber-radius, 2px);
	cursor: pointer;
}

.xcc-carousel .xcc-scrubber .swiper-scrollbar-drag {
	position: relative;
	height: var(--xcc-handle-height, 4px);
	top: calc( ( var(--xcc-rail-height, 4px) - var(--xcc-handle-height, 4px) ) / 2 );
	background: linear-gradient(
		var(--xcc-handle-angle, 90deg),
		var(--xcc-handle-from, #F60033),
		var(--xcc-handle-to, #14E2E2)
	);
	border-radius: var(--xcc-scrubber-radius, 2px);
	cursor: grab;
}

.xcc-carousel .xcc-scrubber .swiper-scrollbar-drag:active {
	cursor: grabbing;
}

/* Bigger touch target without changing the visual height. */
.xcc-carousel .xcc-scrubber.swiper-scrollbar::before {
	content: "";
	position: absolute;
	inset: -10px 0;
}

/* ------------------------------------------------------------------ */
/* Utilities                                                           */
/* ------------------------------------------------------------------ */

/* Two-line clamp for card descriptions (applied via CSS Classes control). */
.xcc-clamp-2 p {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	margin-bottom: 0;
}