/* Shared styles for slider mode */
.wp-block-cover:where(.finidev-slider, .finidev-cover-slider) {
	position: relative;

	/* Defaults (can be overridden via inline CSS variables) */
	--finidev-arrow-size: 44px;
	--finidev-arrow-color: #fff;
	--finidev-arrow-bg: rgba(0,0,0,0.45);
	--finidev-arrow-hover-bg: rgba(0,0,0,0.62);

	--finidev-dots-bg: rgba(0,0,0,0.35);
	--finidev-dot-size: 9px;
	--finidev-dot-border: rgba(255,255,255,0.9);
	--finidev-dot-inactive: transparent;
	--finidev-dot-active: rgba(255,255,255,0.95);
	--finidev-dot-hover: rgba(255,255,255,0.25);
}

/* Track uses scroll-snap; slides are direct children inside .finidev-slider-track */
.wp-block-cover:where(.finidev-slider, .finidev-cover-slider) .finidev-slider-track {
	display: flex;
	overflow: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	width: 100%;
	height: 100%;
}

.wp-block-cover:where(.finidev-slider, .finidev-cover-slider) .finidev-slide {
	flex: 0 0 100%;
	scroll-snap-align: start;
	min-width: 100%;
	height: 100%;
	position: relative;
}

/* Ensure slide contents stretch naturally */
.wp-block-cover:where(.finidev-slider, .finidev-cover-slider) .finidev-slide > * {
	height: 100%;
}

/* Arrows (force perfect circles + true centering) */
.wp-block-cover:where(.finidev-slider, .finidev-cover-slider) .finidev-arrow {
	position: absolute;
	top: 50% !important;
	transform: translateY(-50%) !important;
	z-index: 5;

	width: var(--finidev-arrow-size);
	height: var(--finidev-arrow-size);
	padding: 0;

	display: flex;
	align-items: center;
	justify-content: center;

	border: none;
	border-radius: 50%;
	cursor: pointer;

	background: var(--finidev-arrow-bg);
	color: var(--finidev-arrow-color);
	line-height: 1;
}

.wp-block-cover:where(.finidev-slider, .finidev-cover-slider) .finidev-arrow:hover,
.wp-block-cover:where(.finidev-slider, .finidev-cover-slider) .finidev-arrow:focus-visible {
	background: var(--finidev-arrow-hover-bg);
}

.wp-block-cover:where(.finidev-slider, .finidev-cover-slider) .finidev-arrow.prev { left: 14px; }
.wp-block-cover:where(.finidev-slider, .finidev-cover-slider) .finidev-arrow.next { right: 14px; }

.wp-block-cover:where(.finidev-slider, .finidev-cover-slider) .finidev-arrow .finidev-arrow-icon {
	display: block;
	width: calc(var(--finidev-arrow-size) * 0.52);
	height: calc(var(--finidev-arrow-size) * 0.52);
}

/* Dots */
.wp-block-cover:where(.finidev-slider, .finidev-cover-slider) .finidev-dots {
	position: absolute;
	left: 50%;
	bottom: 14px;
	transform: translateX(-50%);
	z-index: 5;

	display: flex;
	gap: 8px;

	padding: 8px 10px;
	border-radius: 999px;
	background: var(--finidev-dots-bg);
}

.wp-block-cover:where(.finidev-slider, .finidev-cover-slider) .finidev-dot {
	width: var(--finidev-dot-size);
	height: var(--finidev-dot-size);
	border-radius: 999px;

	border: 1px solid var(--finidev-dot-border);
	background: var(--finidev-dot-inactive);

	cursor: pointer;
	padding: 0;
}

.wp-block-cover:where(.finidev-slider, .finidev-cover-slider) .finidev-dot:hover,
.wp-block-cover:where(.finidev-slider, .finidev-cover-slider) .finidev-dot:focus-visible {
	background: var(--finidev-dot-hover);
}

.wp-block-cover:where(.finidev-slider, .finidev-cover-slider) .finidev-dot[aria-current="true"] {
	background: var(--finidev-dot-active);
}