/**
 * Elementor Loop Carousel Peek v1.0.14
 * Aligned with pro-elements widget-loop-carousel + native swiper buttons.
 * Compatible with Elementor Layout → Equal Height.
 */

.elcp-enabled {
	--elcp-nav-size: 36px;
	--elcp-nav-gap: 12px;
	--elcp-nav-offset-y: 16px;
	--elcp-nav-pos-y: 0px;
	--elcp-nav-inset-right: 0px;
	position: relative;
}

/**
 * Blank until final peek layout is confirmed (.elcp-ready).
 * Instant reveal (no fade) — fade can look like an enlarge flash.
 * Critical duplicate also printed in <head> via PHP (elcp-critical).
 */
.elementor-widget-loop-carousel.elcp-enabled:not(.elcp-ready),
.elementor-widget-loop-carousel[data-elcp-peek]:not(.elcp-ready) {
	visibility: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

.elementor-widget-loop-carousel.elcp-enabled.elcp-ready,
.elementor-widget-loop-carousel[data-elcp-peek].elcp-ready {
	visibility: visible !important;
	opacity: 1 !important;
	pointer-events: auto !important;
}

/* Room under the track for bottom-right arrows (native Elementor buttons). */
.elcp-enabled.elcp-arrows-br {
	/* offset-y = 軌道到箭頭的間距；pos-y 只移動箭頭，不額外撐高 */
	padding-bottom: calc(var(--elcp-nav-size, 36px) + var(--elcp-nav-offset-y, 16px) + 4px);
	overflow: visible;
}

.elcp-enabled.elcp-arrows-br .elementor-widget-container,
.elcp-enabled.elcp-arrows-br .elementor-loop-container {
	overflow: visible;
}

/* Keep slide track clipped so peek is a clean cut-off, not a horizontal scrollbar. */
.elcp-enabled .elementor-loop-container.swiper,
.elcp-enabled .elementor-loop-container.swiper-container {
	overflow: hidden;
	height: auto;
	min-height: 0;
}

/**
 * Native Equal Height (Layout → Equal Height = On)
 * Elementor prints height:100% on `.swiper-slide > .elementor-element`.
 * We reinforce stretch so Peek + Equal Height work together, and beat
 * site-level `height:auto !important` overrides when present.
 */
.elcp-enabled.elcp-equal-height .elementor-loop-container > .swiper-wrapper {
	align-items: stretch;
}

.elcp-enabled.elcp-equal-height .swiper-slide {
	height: auto;
	display: flex;
	box-sizing: border-box;
}

.elcp-enabled.elcp-equal-height.elementor-widget-loop-carousel .swiper-slide > .elementor-element {
	height: 100% !important;
	width: 100%;
	align-self: stretch;
}

/**
 * Reposition native .elementor-swiper-button-* (rendered by Base_Carousel_Trait)
 * into an Apple-style bottom-right pair. Keeps Swiper navigation binding intact.
 */
.elcp-enabled.elcp-arrows-br .elementor-swiper-button.elementor-swiper-button-prev,
.elcp-enabled.elcp-arrows-br .elementor-swiper-button.elementor-swiper-button-next {
	position: absolute !important;
	top: auto !important;
	bottom: var(--elcp-nav-pos-y, 0px) !important;
	left: auto !important;
	width: var(--elcp-nav-size, 36px) !important;
	height: var(--elcp-nav-size, 36px) !important;
	margin: 0 !important;
	border-radius: 50% !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	background-color: #f5f5f7;
	box-shadow: none;
	transform: none !important;
	z-index: 5;
	font-size: 0 !important;
	line-height: 0 !important;
	transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.elcp-enabled.elcp-arrows-br .elementor-swiper-button.elementor-swiper-button-next {
	right: var(--elcp-nav-inset-right, 0px) !important;
}

.elcp-enabled.elcp-arrows-br .elementor-swiper-button.elementor-swiper-button-prev {
	right: calc(
		var(--elcp-nav-inset-right, 0px) + var(--elcp-nav-size, 36px) + var(--elcp-nav-gap, 12px)
	) !important;
}

.elcp-enabled.elcp-arrows-br .elementor-swiper-button svg {
	width: 18px;
	height: 18px;
	display: block;
	fill: currentColor;
	transition: fill 0.2s ease;
}

.elcp-enabled.elcp-arrows-br .elementor-swiper-button svg path {
	fill: currentColor;
}

.elcp-enabled.elcp-arrows-br .elementor-swiper-button.swiper-button-disabled,
.elcp-enabled.elcp-arrows-br .elementor-swiper-button[aria-disabled='true'] {
	opacity: 0.35;
	pointer-events: none;
}

/* Mobile: keep the whole arrow pair on the right (not centered/left). */
@media (max-width: 767px) {
	.elcp-enabled.elcp-arrows-br .elementor-swiper-button.elementor-swiper-button-prev,
	.elcp-enabled.elcp-arrows-br .elementor-swiper-button.elementor-swiper-button-next {
		left: auto !important;
		transform: none !important;
	}
}