/**
 * AKAVA ScrollTop frontend.
 * All selectors and custom properties are plugin-prefixed. Logical properties
 * keep positioning native in LTR and RTL. Critical SVG paint rules are scoped
 * and important only to survive legacy theme resets that also use !important.
 */

.akava-btt {
	box-sizing: border-box;
	position: fixed;
	isolation: isolate;
	inline-size: var(--akava-btt-desktop-size, 54px);
	block-size: var(--akava-btt-desktop-size, 54px);
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--akava-btt-icon, #fff);
	font: inherit;
	line-height: 1;
	appearance: none;
	cursor: pointer;
	z-index: var(--akava-btt-z-index, 9990);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	translate: var(--akava-btt-dock-x, 0px) var(--akava-btt-dock-y, 0px);
	transform: translateY(12px);
	transition:
		opacity 180ms ease,
		visibility 180ms ease,
		translate 220ms cubic-bezier(.2, .8, .2, 1),
		transform 220ms cubic-bezier(.2, .8, .2, 1);
	-webkit-tap-highlight-color: transparent;
	--akava-btt-safe-start: env(safe-area-inset-left);
	--akava-btt-safe-end: env(safe-area-inset-right);
	--akava-btt-current-icon-size: var(--akava-btt-desktop-icon-size, 24px);
	--akava-btt-admin-bar-offset: 0px;
	--akava-btt-dock-x: 0px;
	--akava-btt-dock-y: 0px;
}

[dir="rtl"] .akava-btt {
	--akava-btt-safe-start: env(safe-area-inset-right);
	--akava-btt-safe-end: env(safe-area-inset-left);
}

body.admin-bar .akava-btt {
	--akava-btt-admin-bar-offset: 32px;
}

@media (max-width: 782px) {
	body.admin-bar .akava-btt {
		--akava-btt-admin-bar-offset: 46px;
	}
}

.akava-btt,
.akava-btt *,
.akava-btt *::before,
.akava-btt *::after {
	box-sizing: border-box;
}

.akava-btt--ready.akava-btt--visible {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateY(0);
}

.akava-btt--suspended {
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none !important;
}

.akava-btt[data-shape="rounded"] {
	border-radius: clamp(12px, calc(var(--akava-btt-current-size, 54px) * .3), 20px);
}

.akava-btt__motion {
	position: absolute;
	inset: 0;
	display: block;
	border-radius: inherit;
	transform: translateY(0) scale(1);
	transition: transform 180ms ease;
	pointer-events: none;
}

.akava-btt__surface {
	position: absolute;
	inset: 0;
	z-index: 0;
	border: var(--akava-btt-border-width, 0) solid var(--akava-btt-border, #fff);
	border-radius: inherit;
	overflow: hidden;
	background: linear-gradient(145deg, var(--akava-btt-bg-start, #2563eb), var(--akava-btt-bg-end, #1d4ed8));
	box-shadow:
		0 calc(10px * var(--akava-btt-shadow, 1)) calc(28px * var(--akava-btt-shadow, 1)) rgba(15, 23, 42, calc(.22 * var(--akava-btt-shadow, 1))),
		inset 0 1px 0 rgba(255, 255, 255, .22);
	transition:
		box-shadow 180ms ease,
		background-color 180ms ease;
}

.akava-btt[data-style="solid"] .akava-btt__surface {
	background: var(--akava-btt-bg-start, #2563eb);
}

.akava-btt__surface::before,
.akava-btt__surface::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	opacity: 0;
	pointer-events: none;
	transition: opacity 180ms ease;
}

.akava-btt[data-style="glass"] .akava-btt__surface {
	background: rgba(248, 250, 252, .2);
	background:
		linear-gradient(
			145deg,
			color-mix(in srgb, var(--akava-btt-bg-start, #2563eb) 24%, rgba(255, 255, 255, .28)),
			color-mix(in srgb, var(--akava-btt-bg-end, #1d4ed8) 18%, rgba(255, 255, 255, .08))
		);
	border-width: max(1px, var(--akava-btt-border-width, 0px));
	border-color: rgba(255, 255, 255, .48);
	border-color: color-mix(in srgb, var(--akava-btt-border, #fff) 58%, transparent);
	box-shadow:
		0 calc(10px * var(--akava-btt-shadow, 1)) calc(30px * var(--akava-btt-shadow, 1)) rgba(15, 23, 42, calc(.2 * var(--akava-btt-shadow, 1))),
		0 1px 0 rgba(255, 255, 255, .32),
		inset 0 1px 0 rgba(255, 255, 255, .72),
		inset 0 -1px 0 rgba(255, 255, 255, .12);
	-webkit-backdrop-filter: blur(24px) saturate(1.75) brightness(1.08);
	backdrop-filter: blur(24px) saturate(1.75) brightness(1.08);
}

.akava-btt[data-style="glass"] .akava-btt__surface::before {
	inset: 1px;
	opacity: 1;
	background: linear-gradient(150deg, rgba(255, 255, 255, .68) 0%, rgba(255, 255, 255, .18) 30%, transparent 58%);
}

.akava-btt[data-style="glass"] .akava-btt__surface::after {
	opacity: 1;
	background:
		radial-gradient(circle at 26% 17%, rgba(255, 255, 255, .42), transparent 38%),
		linear-gradient(180deg, transparent 48%, rgba(15, 23, 42, .13) 100%);
}

.akava-btt[data-style="outline"] {
	color: var(--akava-btt-bg-start, #2563eb);
}

.akava-btt[data-style="outline"] .akava-btt__surface {
	background: transparent;
	background: color-mix(in srgb, var(--akava-btt-bg-start, #2563eb) 7%, transparent);
	border-width: max(2px, var(--akava-btt-border-width, 0px));
	border-color: currentColor;
	box-shadow: 0 calc(8px * var(--akava-btt-shadow, 1)) calc(22px * var(--akava-btt-shadow, 1)) rgba(15, 23, 42, calc(.12 * var(--akava-btt-shadow, 1)));
}

.akava-btt__icon {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	z-index: 2;
	pointer-events: none;
	transition: transform 180ms ease;
}

.akava-btt__icon--top,
.akava-btt__icon--return {
	transition: opacity 160ms ease, transform 180ms ease;
}

.akava-btt__icon--return {
	opacity: 0;
	transform: translateY(-5px) scale(.86);
}

.akava-btt[data-state="return"] .akava-btt__icon--top {
	opacity: 0;
	transform: translateY(5px) scale(.86);
}

.akava-btt[data-state="return"] .akava-btt__icon--return {
	opacity: 1;
	transform: translateY(0) scale(1);
}

svg.akava-btt__svg,
.akava-btt__image {
	display: block;
	inline-size: var(--akava-btt-current-icon-size, 24px) !important;
	block-size: var(--akava-btt-current-icon-size, 24px) !important;
	max-inline-size: none !important;
	max-block-size: none !important;
}

svg.akava-btt__svg,
svg.akava-btt__svg * {
	fill: none !important;
	stroke: currentColor !important;
}

.akava-btt__image {
	object-fit: contain;
}

svg.akava-btt__progress {
	position: absolute;
	inset: 1px;
	inline-size: calc(100% - 2px) !important;
	block-size: calc(100% - 2px) !important;
	max-inline-size: none !important;
	max-block-size: none !important;
	z-index: 3;
	pointer-events: none;
	transform: rotate(-90deg);
	overflow: visible;
}

svg.akava-btt__progress *,
.akava-btt__progress-track,
.akava-btt__progress-value {
	fill: none !important;
}

.akava-btt__progress-track,
.akava-btt__progress-value {
	stroke-width: 2;
	vector-effect: non-scaling-stroke;
	stroke-dashoffset: 0;
}

.akava-btt__progress-track {
	stroke: currentColor !important;
	stroke-dasharray: none;
	opacity: .16;
}

.akava-btt__progress-value {
	stroke: var(--akava-btt-progress, #93c5fd) !important;
	stroke-dasharray: 0 999;
	stroke-linecap: round;
	opacity: 0;
}

.akava-btt__progress-shape--rounded {
	display: none;
}

.akava-btt[data-shape="rounded"] .akava-btt__progress-shape--circle {
	display: none;
}

.akava-btt[data-shape="rounded"] .akava-btt__progress-shape--rounded {
	display: inline;
}

.akava-btt__tooltip {
	position: absolute;
	z-index: 5;
	inline-size: max-content;
	max-inline-size: min(220px, calc(100vw - 32px));
	padding: 7px 10px;
	border-radius: 8px;
	background: #111827;
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.25;
	text-align: start;
	white-space: normal;
	overflow-wrap: anywhere;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(4px);
	transition: opacity 140ms ease, visibility 140ms ease, transform 140ms ease;
	filter: drop-shadow(0 8px 20px rgba(15, 23, 42, .2));
}

.akava-btt:hover .akava-btt__tooltip,
.akava-btt:focus-visible .akava-btt__tooltip {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.akava-btt__return-cue {
	position: absolute;
	inset-block-start: 50%;
	z-index: 6;
	inline-size: max-content;
	min-inline-size: min(8rem, 60vw);
	max-inline-size: min(190px, calc(100vw - var(--akava-btt-current-size, 54px) - 42px));
	padding: 8px 10px;
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: 10px;
	background: #111827;
	color: #fff;
	box-shadow: 0 10px 28px rgba(15, 23, 42, .22);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.25;
	text-align: start;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(-50%) scale(.96);
	transform-origin: center;
	transition: opacity 160ms ease, visibility 160ms ease, transform 180ms ease;
}

.akava-btt__return-cue > span {
	display: -webkit-box;
	overflow: hidden;
	overflow-wrap: break-word;
	word-break: normal;
	hyphens: auto;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.akava-btt[data-state="return"].akava-btt--return-cue-visible .akava-btt__return-cue,
.akava-btt[data-state="return"]:hover .akava-btt__return-cue,
.akava-btt[data-state="return"]:focus-visible .akava-btt__return-cue {
	opacity: 1;
	visibility: visible;
	transform: translateY(-50%) scale(1);
}

.akava-btt__status {
	position: absolute !important;
	inline-size: 1px !important;
	block-size: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

.akava-btt:focus-visible {
	outline: 3px solid var(--akava-btt-progress, #93c5fd);
	outline-color: color-mix(in srgb, var(--akava-btt-progress, #93c5fd) 85%, #fff);
	outline-offset: 4px;
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--akava-btt-progress, #93c5fd) 28%, transparent);
}

@media (hover: hover) and (pointer: fine) {
	.akava-btt--visible:hover .akava-btt__motion {
		transform: translateY(calc(-4px * var(--akava-btt-hover, 1))) scale(calc(1 + (.025 * var(--akava-btt-hover, 1))));
	}

	.akava-btt--visible:hover .akava-btt__surface {
		box-shadow:
			0 calc(15px * var(--akava-btt-shadow, 1)) calc(36px * var(--akava-btt-shadow, 1)) rgba(15, 23, 42, calc(.27 * var(--akava-btt-shadow, 1))),
			inset 0 1px 0 rgba(255, 255, 255, .3);
	}

	.akava-btt--visible:hover .akava-btt__icon {
		transform: translateY(calc(-1px * var(--akava-btt-hover, 1)));
	}
}

.akava-btt:active .akava-btt__motion {
	transform: scale(.96);
}

.akava-btt--preview {
	cursor: default;
}

[data-akava-btt-focus-target],
.akava-btt:target {
	scroll-margin-block-start: 1rem;
}

@media (prefers-reduced-motion: reduce) {
	.akava-btt,
	.akava-btt *,
	.akava-btt *::before,
	.akava-btt *::after {
		animation: none;
		transition-duration: .001ms;
		scroll-behavior: auto;
	}
}

@media (prefers-contrast: more) {
	.akava-btt__surface {
		border-width: max(2px, var(--akava-btt-border-width, 0px));
	}

	.akava-btt__progress-track {
		opacity: .38;
	}

	.akava-btt__tooltip {
		border: 1px solid currentColor;
	}
}

@media (prefers-reduced-transparency: reduce) {
	.akava-btt[data-style="glass"] .akava-btt__surface {
		background: var(--akava-btt-bg-start, #2563eb);
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}

	.akava-btt[data-style="glass"] .akava-btt__surface::before,
	.akava-btt[data-style="glass"] .akava-btt__surface::after {
		opacity: 0;
	}
}

@media (forced-colors: active) {
	.akava-btt {
		forced-color-adjust: none;
		color: ButtonText;
	}

	.akava-btt__surface {
		background: ButtonFace;
		border: 2px solid ButtonText;
		box-shadow: none;
	}

	.akava-btt__surface::before,
	.akava-btt__surface::after {
		display: none;
	}

	.akava-btt__progress-value {
		stroke: Highlight !important;
	}

	.akava-btt:focus-visible {
		outline-color: Highlight;
	}

	.akava-btt__return-cue,
	.akava-btt__tooltip {
		background: Canvas;
		color: CanvasText;
		border: 1px solid CanvasText;
	}
}

/* SmartDock may move the control across the viewport. Keep labels opening
 * toward free space rather than toward the originally configured corner. */
.akava-btt[data-dock-side="start"] .akava-btt__tooltip {
	inset-inline-start: 0 !important;
	inset-inline-end: auto !important;
}

.akava-btt[data-dock-side="end"] .akava-btt__tooltip {
	inset-inline-start: auto !important;
	inset-inline-end: 0 !important;
}

.akava-btt[data-dock-side="start"] .akava-btt__return-cue {
	inset-inline-start: calc(100% + 10px) !important;
	inset-inline-end: auto !important;
}

.akava-btt[data-dock-side="end"] .akava-btt__return-cue {
	inset-inline-start: auto !important;
	inset-inline-end: calc(100% + 10px) !important;
}

.akava-btt[data-dock-vertical="top"] .akava-btt__tooltip {
	inset-block-start: calc(100% + 10px) !important;
	inset-block-end: auto !important;
}

.akava-btt[data-dock-vertical="bottom"] .akava-btt__tooltip {
	inset-block-start: auto !important;
	inset-block-end: calc(100% + 10px) !important;
}

@media print {
	.akava-btt {
		display: none;
	}
}

.akava-btt[data-state="return"] .akava-btt__tooltip {
	display: none;
}
