/**
 * Scroll Navigation Dots — Common base CSS ( loads for every style ).
 *
 * Owns the fixed placement ( left / right / top / bottom ), list orientation,
 * label positioning per side and the shared dot / marker / number / label
 * skeleton. Per-style files paint the markers and active behaviour. CSS
 * variables drive theme and sizing:
 *   --captwiki-sd-accent  → active colour
 *   --captwiki-sd-color   → inactive colour
 *   --captwiki-sd-size    → dot size
 *   --captwiki-sd-offset  → distance from the screen edge
 *
 * @package captain-widgets-kit
 * @since   1.6.0
 */

.captwiki-scrolldots {
	--captwiki-sd-accent: #6d5efc;
	--captwiki-sd-color: #c7ccd8;
	--captwiki-sd-size: 12px;
	--captwiki-sd-offset: 28px;
	position: fixed;
	z-index: 9990;
	box-sizing: border-box;
}

.captwiki-scrolldots *,
.captwiki-scrolldots *::before,
.captwiki-scrolldots *::after {
	box-sizing: border-box;
}

/* ── Fixed placement ───────────────────────────────────── */
.captwiki-scrolldots--right {
	right: var( --captwiki-sd-offset );
	top: 50%;
	transform: translateY( -50% );
}

.captwiki-scrolldots--left {
	left: var( --captwiki-sd-offset );
	top: 50%;
	transform: translateY( -50% );
}

.captwiki-scrolldots--top {
	top: var( --captwiki-sd-offset );
	left: 50%;
	transform: translateX( -50% );
}

.captwiki-scrolldots--bottom {
	bottom: var( --captwiki-sd-offset );
	left: 50%;
	transform: translateX( -50% );
}

/* ── List ──────────────────────────────────────────────── */
.captwiki-scrolldots__list {
	display: flex;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.captwiki-scrolldots--vertical .captwiki-scrolldots__list {
	flex-direction: column;
	align-items: center;
}

.captwiki-scrolldots--horizontal .captwiki-scrolldots__list {
	flex-direction: row;
	align-items: center;
}

.captwiki-scrolldots__item {
	display: flex;
}

/* ── Dot ───────────────────────────────────────────────── */
.captwiki-scrolldots__dot {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.captwiki-scrolldots__marker {
	display: block;
	width: var( --captwiki-sd-size );
	height: var( --captwiki-sd-size );
	border-radius: 50%;
	background: var( --captwiki-sd-color );
	transition: background-color 0.3s ease, transform 0.3s ease, width 0.3s ease, height 0.3s ease, box-shadow 0.3s ease;
}

.captwiki-scrolldots__num {
	position: absolute;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	color: #ffffff;
	opacity: 0;
	pointer-events: none;
}

/* ── Label ─────────────────────────────────────────────── */
.captwiki-scrolldots__label {
	position: absolute;
	top: 50%;
	transform: translateY( -50% );
	padding: 5px 10px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	color: #ffffff;
	background: #111827;
	border-radius: 6px;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease;
	pointer-events: none;
}

/* Right placement → label sits to the LEFT of the dot. */
.captwiki-scrolldots--right .captwiki-scrolldots__label {
	right: calc( 100% + 12px );
}

.captwiki-scrolldots--right .captwiki-scrolldots__dot:hover .captwiki-scrolldots__label,
.captwiki-scrolldots--right.captwiki-scrolldots--label-always .captwiki-scrolldots__label {
	transform: translateY( -50% ) translateX( 0 );
}

/* Left placement → label sits to the RIGHT of the dot. */
.captwiki-scrolldots--left .captwiki-scrolldots__label {
	left: calc( 100% + 12px );
}

/* Top / bottom ( horizontal ) → label sits below the dot. */
.captwiki-scrolldots--horizontal .captwiki-scrolldots__label {
	top: calc( 100% + 10px );
	left: 50%;
	transform: translateX( -50% );
}

/* Reveal rules. */
.captwiki-scrolldots--label-hover .captwiki-scrolldots__dot:hover .captwiki-scrolldots__label,
.captwiki-scrolldots--label-always .captwiki-scrolldots__label {
	opacity: 1;
	visibility: visible;
}

/* Tiny connector arrow for the tooltip ( vertical placements ). */
.captwiki-scrolldots--vertical .captwiki-scrolldots__label::after {
	content: "";
	position: absolute;
	top: 50%;
	width: 7px;
	height: 7px;
	background: inherit;
	transform: translateY( -50% ) rotate( 45deg );
}

.captwiki-scrolldots--right .captwiki-scrolldots__label::after {
	right: -3px;
}

.captwiki-scrolldots--left .captwiki-scrolldots__label::after {
	left: -3px;
}

/* ── Responsive ────────────────────────────────────────── */
@media ( max-width: 767px ) {
	.captwiki-scrolldots--hide-mobile {
		display: none;
	}
}

/* Editor: keep the fixed nav from sticking under panels while editing. */
.elementor-editor-active .captwiki-scrolldots {
	position: absolute;
}