/**
 * Studio256 Carousel Navigation — base styles only.
 *
 * Arrow colours run through CSS custom properties so that every interaction
 * state has an explicit, predictable value. Themes and Elementor both ship
 * button:hover / button:focus / button:active rules whose pseudo-class
 * specificity outranks a flat .class rule, which is how a stray theme
 * background leaks in on click. Defining each state here at equal-or-higher
 * specificity closes that door without resorting to !important.
 */

.s256-cn {
	display: flex;
	align-items: center;
	gap: 14px;
	line-height: 1;
}

/* ------------------------------------------------------------------
 * Arrow buttons — base
 * ------------------------------------------------------------------ */

.s256-cn__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0;
	border: 0 solid transparent;
	color: var( --s256cn-color, inherit );
	background-color: var( --s256cn-bg, transparent );
	background-image: none;
	box-shadow: none;
	font-size: 18px;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	-webkit-tap-highlight-color: transparent;
	transition-property: color, background-color, border-color, opacity, transform, scale, box-shadow;
	transition-duration: 250ms;
	transition-timing-function: ease;
}

.s256-cn__arrow svg {
	display: block;
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.s256-cn__arrow i {
	font-size: inherit;
	line-height: 1;
}

/* ------------------------------------------------------------------
 * States. Order matters: later rules of equal specificity win.
 * ------------------------------------------------------------------ */

/* Hover, plus keyboard focus so it reads the same way. */
.s256-cn__arrow:hover,
.s256-cn__arrow:focus-visible {
	color: var( --s256cn-color-hover, var( --s256cn-color, inherit ) );
	background-color: var( --s256cn-bg-hover, var( --s256cn-bg, transparent ) );
}

/* Pressed. Falls back to the hover values, then to base. */
.s256-cn__arrow:active {
	color: var( --s256cn-color-active, var( --s256cn-color-hover, var( --s256cn-color, inherit ) ) );
	background-color: var( --s256cn-bg-active, var( --s256cn-bg-hover, var( --s256cn-bg, transparent ) ) );
}

/*
 * Lingering focus after a mouse click. Browsers keep :focus on a clicked
 * button, and themes love to paint it. Reset to base, but only while the
 * pointer is elsewhere so genuine hover and press states still win.
 */
.s256-cn__arrow:focus:not( :focus-visible ):not( :hover ):not( :active ) {
	color: var( --s256cn-color, inherit );
	background-color: var( --s256cn-bg, transparent );
	box-shadow: none;
}

.s256-cn__arrow:focus {
	outline: none;
}

.s256-cn[data-ring="yes"] .s256-cn__arrow:focus-visible {
	outline: 2px solid var( --s256cn-ring, currentColor );
	outline-offset: 2px;
}

.s256-cn__arrow[disabled] {
	color: var( --s256cn-color-disabled, var( --s256cn-color, inherit ) );
	background-color: var( --s256cn-bg, transparent );
	cursor: default;
	pointer-events: none;
}

.s256-cn[data-disabled="fade"] .s256-cn__arrow[disabled] {
	opacity: 0.3;
}

.s256-cn[data-disabled="hide"] .s256-cn__arrow[disabled] {
	visibility: hidden;
}

/* ------------------------------------------------------------------
 * Counter
 * ------------------------------------------------------------------ */

.s256-cn__counter {
	display: inline-flex;
	align-items: baseline;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.s256-cn__sep {
	margin: 0 0.25em;
}

/* Screen-reader announcement, visually hidden. */
.s256-cn__sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
	border: 0;
}

/* ------------------------------------------------------------------
 * Target carousel + editor helpers
 * ------------------------------------------------------------------ */

.s256-cn-hide-native .elementor-swiper-button,
.s256-cn-hide-native .swiper-button-next,
.s256-cn-hide-native .swiper-button-prev,
.s256-cn-hide-native .swiper-pagination,
.s256-cn-hide-native .elementor-pagination {
	display: none !important;
}

body.elementor-editor-active .s256-cn--orphan,
body.elementor-editor-preview .s256-cn--orphan {
	outline: 1px dashed #d9534f;
	outline-offset: 4px;
}

@media ( prefers-reduced-motion: reduce ) {
	.s256-cn__arrow {
		transition: none;
	}
	.s256-cn__arrow:hover,
	.s256-cn__arrow:active {
		transform: none;
		scale: 1;
	}
}