/**
 * Shared MOD navigator controls.
 * Loaded only by widgets that render shared arrows.
 */

.mod-shared-arrow {
	--mod-arrow-button-size: 48px;
	--mod-arrow-icon-size: 22px;
	--mod-arrow-side-offset: 16px;
	--mod-arrow-y-offset: 0px;
	--mod-arrow-normal-width: 3px;
	--mod-arrow-hover-width: 48px;
	--mod-arrow-height: 180px;
	--mod-arrow-hit-area: 48px;
	--mod-arrow-color: #fff;
	--mod-arrow-hover-color: #fff;
	--mod-arrow-bg: rgba(0, 0, 0, .28);
	--mod-arrow-hover-bg: rgba(0, 0, 0, .62);
	--mod-arrow-normal-opacity: 1;
	--mod-arrow-hover-opacity: 1;
	--mod-arrow-transition-duration: 240ms;
	--mod-arrow-easing: ease-out;
	--mod-arrow-icon-reveal-delay: 180ms;
	--mod-arrow-icon-reveal-duration: 160ms;
	--mod-arrow-icon-hidden-scale: .72;
	position: absolute !important;
	top: calc(50% + var(--mod-arrow-y-offset)) !important;
	z-index: 20 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-sizing: border-box !important;
	min-width: 0 !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	color: var(--mod-arrow-color) !important;
	font: inherit !important;
	font-size: var(--mod-arrow-icon-size) !important;
	font-weight: 400 !important;
	line-height: 0 !important;
	text-align: center !important;
	appearance: none !important;
	-webkit-appearance: none !important;
	cursor: pointer !important;
	transform: translateY(-50%) !important;
	isolation: isolate;
	overflow: visible;
	-webkit-tap-highlight-color: transparent;
	transition:
		color var(--mod-arrow-transition-duration) var(--mod-arrow-easing),
		opacity var(--mod-arrow-transition-duration) var(--mod-arrow-easing) !important;
}

.mod-shared-arrow--prev { left: var(--mod-arrow-side-offset) !important; }
.mod-shared-arrow--next { right: var(--mod-arrow-side-offset) !important; }

.mod-shared-arrow__surface {
	position: absolute;
	z-index: 0;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	background: var(--mod-arrow-bg);
	opacity: var(--mod-arrow-normal-opacity);
	pointer-events: none;
	transform: none;
	transition:
		width var(--mod-arrow-transition-duration) var(--mod-arrow-easing),
		height var(--mod-arrow-transition-duration) var(--mod-arrow-easing),
		background-color var(--mod-arrow-transition-duration) var(--mod-arrow-easing),
		border-color var(--mod-arrow-transition-duration) var(--mod-arrow-easing),
		border-radius var(--mod-arrow-transition-duration) var(--mod-arrow-easing),
		box-shadow var(--mod-arrow-transition-duration) var(--mod-arrow-easing),
		opacity var(--mod-arrow-transition-duration) var(--mod-arrow-easing),
		transform var(--mod-arrow-transition-duration) var(--mod-arrow-easing);
}

.mod-shared-arrow__icon {
	position: relative !important;
	z-index: 2 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex: 0 0 var(--mod-arrow-icon-size) !important;
	width: var(--mod-arrow-icon-size) !important;
	height: var(--mod-arrow-icon-size) !important;
	min-width: 0 !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	color: inherit !important;
	font-size: inherit !important;
	line-height: 0 !important;
	pointer-events: none !important;
	transform: none !important;
	transition:
		color var(--mod-arrow-transition-duration) var(--mod-arrow-easing),
		opacity var(--mod-arrow-transition-duration) var(--mod-arrow-easing),
		transform var(--mod-arrow-transition-duration) var(--mod-arrow-easing) !important;
}

.mod-shared-arrow__icon > svg,
.mod-shared-arrow__icon > i,
.mod-shared-arrow__glyph {
	position: static !important;
	inset: auto !important;
	display: block !important;
	float: none !important;
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	color: inherit !important;
	line-height: 1 !important;
	transform: none !important;
}

.mod-shared-arrow__icon i::before {
	display: block !important;
	line-height: 1 !important;
}

.mod-shared-arrow__glyph--text {
	display: flex !important;
	align-items: center;
	justify-content: center;
	font-size: 1em;
	line-height: 1 !important;
	white-space: nowrap;
}

.mod-shared-arrow__icon svg [fill]:not([fill="none"]) { fill: currentColor !important; }
.mod-shared-arrow__icon svg [stroke]:not([stroke="none"]) { stroke: currentColor !important; }
.mod-shared-arrow__icon svg path:not([fill="none"]),
.mod-shared-arrow__icon svg polygon:not([fill="none"]),
.mod-shared-arrow__icon svg circle:not([fill="none"]),
.mod-shared-arrow__icon svg rect:not([fill="none"]) { fill: currentColor !important; }

.mod-shared-arrow:hover,
.mod-shared-arrow:focus-visible {
	color: var(--mod-arrow-hover-color) !important;
}

.mod-shared-arrow:hover .mod-shared-arrow__surface,
.mod-shared-arrow:focus-visible .mod-shared-arrow__surface {
	background: var(--mod-arrow-hover-bg);
	opacity: var(--mod-arrow-hover-opacity);
}

.mod-shared-arrow:focus-visible {
	outline: 2px solid currentColor !important;
	outline-offset: 3px !important;
}

.mod-shared-arrow[disabled],
.mod-shared-arrow.is-disabled {
	opacity: .35 !important;
	cursor: not-allowed !important;
	pointer-events: none !important;
}

.mod-shared-arrow--icon-hidden .mod-shared-arrow__icon { display: none !important; }

/* Optional staged reveal: keep the icon hidden while the surface expands. */
.mod-shared-arrow--icon-reveal-hover .mod-shared-arrow__icon,
.mod-shared-arrow--icon-reveal-delayed .mod-shared-arrow__icon {
	opacity: 0 !important;
	transform: scale(var(--mod-arrow-icon-hidden-scale)) !important;
	transition-duration: var(--mod-arrow-icon-reveal-duration) !important;
	transition-delay: 0ms !important;
}

.mod-shared-arrow--icon-reveal-hover:hover .mod-shared-arrow__icon,
.mod-shared-arrow--icon-reveal-hover:focus-visible .mod-shared-arrow__icon,
.mod-shared-arrow--icon-reveal-delayed:hover .mod-shared-arrow__icon,
.mod-shared-arrow--icon-reveal-delayed:focus-visible .mod-shared-arrow__icon {
	opacity: 1 !important;
	transform: scale(1) !important;
}

.mod-shared-arrow--icon-reveal-delayed:hover .mod-shared-arrow__icon,
.mod-shared-arrow--icon-reveal-delayed:focus-visible .mod-shared-arrow__icon {
	transition-delay: var(--mod-arrow-icon-reveal-delay) !important;
}

/* Classic button. */
.mod-shared-arrow--classic,
.mod-shared-arrow--minimal {
	width: var(--mod-arrow-button-size) !important;
	height: var(--mod-arrow-button-size) !important;
}

.mod-shared-arrow--classic .mod-shared-arrow__surface,
.mod-shared-arrow--minimal .mod-shared-arrow__surface {
	inset: 0;
	width: 100%;
	height: 100%;
}

.mod-shared-arrow--classic:hover .mod-shared-arrow__surface,
.mod-shared-arrow--classic:focus-visible .mod-shared-arrow__surface {
	transform: scale(1.04);
}

/* Minimal keeps the hit area but can be visually transparent. */
.mod-shared-arrow--minimal .mod-shared-arrow__surface {
	background: transparent;
	border-color: transparent;
	box-shadow: none;
}
.mod-shared-arrow--minimal:hover .mod-shared-arrow__surface,
.mod-shared-arrow--minimal:focus-visible .mod-shared-arrow__surface {
	background: var(--mod-arrow-hover-bg);
}

/* Edge Rail / Expanding Rail. */
.mod-shared-arrow--edge-rail {
	width: max(var(--mod-arrow-hit-area), var(--mod-arrow-hover-width)) !important;
	height: var(--mod-arrow-height) !important;
}

.mod-shared-arrow--edge-rail .mod-shared-arrow__surface {
	top: 0;
	bottom: 0;
	width: var(--mod-arrow-normal-width);
	height: 100%;
}

.mod-shared-arrow--edge-rail.mod-shared-arrow--prev .mod-shared-arrow__surface { left: 0; }
.mod-shared-arrow--edge-rail.mod-shared-arrow--next .mod-shared-arrow__surface { right: 0; }

.mod-shared-arrow--edge-rail:hover .mod-shared-arrow__surface,
.mod-shared-arrow--edge-rail:focus-visible .mod-shared-arrow__surface {
	width: var(--mod-arrow-hover-width);
}

.mod-shared-arrow--edge-rail.mod-shared-arrow--prev .mod-shared-arrow__icon {
	position: absolute !important;
	left: calc(var(--mod-arrow-hover-width) / 2 - var(--mod-arrow-icon-size) / 2) !important;
}
.mod-shared-arrow--edge-rail.mod-shared-arrow--next .mod-shared-arrow__icon {
	position: absolute !important;
	right: calc(var(--mod-arrow-hover-width) / 2 - var(--mod-arrow-icon-size) / 2) !important;
}

/* Old widget hover transforms must never displace the shared control. */
.mod-slider-v2__arrow.mod-shared-arrow:hover,
.mod-slider-v2__arrow.mod-shared-arrow:focus-visible,
.mod-carousel__arrow.mod-shared-arrow:hover,
.mod-carousel__arrow.mod-shared-arrow:focus-visible,
.mod-woo-carousel-arrow.mod-shared-arrow:hover,
.mod-woo-carousel-arrow.mod-shared-arrow:focus-visible,
.mod-dynamic-post-carousel-arrow.mod-shared-arrow:hover,
.mod-dynamic-post-carousel-arrow.mod-shared-arrow:focus-visible,
.mod-tiktok-nav.mod-shared-arrow:hover,
.mod-tiktok-nav.mod-shared-arrow:focus-visible {
	transform: translateY(-50%) !important;
}

@media (hover: none) {
	.mod-shared-arrow--edge-rail {
		width: max(var(--mod-arrow-hit-area), var(--mod-arrow-hover-width), 44px) !important;
	}

	/* Touch devices have no reliable hover state; arrows must remain discoverable. */
	.mod-shared-arrow--icon-reveal-hover .mod-shared-arrow__icon,
	.mod-shared-arrow--icon-reveal-delayed .mod-shared-arrow__icon {
		opacity: 1 !important;
		transform: scale(1) !important;
		transition-delay: 0ms !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mod-shared-arrow,
	.mod-shared-arrow__surface,
	.mod-shared-arrow__icon {
		transition-duration: 0.01ms !important;
	}
}

/* Widget-specific defaults preserve the established visual language. */
.mod-slider-v2__arrow.mod-shared-arrow {
	--mod-arrow-color: #fff;
	--mod-arrow-hover-color: #fff;
	--mod-arrow-bg: rgba(0, 0, 0, .28);
	--mod-arrow-hover-bg: rgba(0, 0, 0, .55);
}
.mod-slider-v2__arrow.mod-shared-arrow .mod-shared-arrow__surface {
	border: 1px solid rgba(255, 255, 255, .4);
	border-radius: 999px;
}

.mod-carousel__arrow.mod-shared-arrow,
.mod-woo-carousel-arrow.mod-shared-arrow,
.mod-dynamic-post-carousel-arrow.mod-shared-arrow,
.mod-tiktok-nav.mod-shared-arrow {
	--mod-arrow-color: var(--mod-ct-text, #111827);
	--mod-arrow-bg: #fff;
	--mod-arrow-hover-color: #fff;
	--mod-arrow-hover-bg: var(--mod-ct-primary, #c1121f);
}
.mod-carousel__arrow.mod-shared-arrow .mod-shared-arrow__surface,
.mod-woo-carousel-arrow.mod-shared-arrow .mod-shared-arrow__surface,
.mod-dynamic-post-carousel-arrow.mod-shared-arrow .mod-shared-arrow__surface,
.mod-tiktok-nav.mod-shared-arrow .mod-shared-arrow__surface {
	border: 1px solid var(--mod-ct-border, #e5e7eb);
	border-radius: 999px;
	box-shadow: 0 10px 24px rgba(15, 23, 42, .12);
}

.mod-shared-arrow--edge-rail .mod-shared-arrow__surface {
	border-radius: 8px;
}

.mod-woo-carousel-shell--nav-outside .mod-shared-arrow--prev {
	left: calc(var(--mod-arrow-side-offset) * -1) !important;
}
.mod-woo-carousel-shell--nav-outside .mod-shared-arrow--next {
	right: calc(var(--mod-arrow-side-offset) * -1) !important;
}
.mod-dynamic-post-carousel-shell--nav-outside .mod-shared-arrow--prev {
	left: calc(var(--mod-arrow-side-offset) * -1) !important;
}
.mod-dynamic-post-carousel-shell--nav-outside .mod-shared-arrow--next {
	right: calc(var(--mod-arrow-side-offset) * -1) !important;
}