/* InnerG Back to Top — fixed circle button, SVG progress ring that fills
   as the visitor scrolls, up-chevron that scrolls smoothly to the top.
   Position is a deliberate admin choice (which corner), not a logical/RTL
   concern, so it uses physical left/right rather than inline-start/end —
   same reasoning as the Search badge's own corner controls. */

.innerg-back-to-top {
	position: fixed;
	bottom: var( --innerg-btt-offset-y, 32px );
	width: var( --innerg-btt-size, 56px );
	height: var( --innerg-btt-size, 56px );
	z-index: 90;
	display: block;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	cursor: pointer;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.35s ease, transform 0.35s ease;
}

.innerg-back-to-top--right {
	right: var( --innerg-btt-right, 32px );
	left: auto;
}

.innerg-back-to-top--left {
	left: var( --innerg-btt-left, 32px );
	right: auto;
}

/* Independent mobile position — its own side + offsets, fully admin-
   configurable (Customizer: Back to Top → Mobile position), not
   auto-computed. Equal specificity to the desktop --right/--left rules
   above, so on a matching viewport these simply win by appearing later
   in source order — no !important needed. */
@media ( max-width: 768px ) {
	.innerg-back-to-top {
		bottom: var( --innerg-btt-offset-y-mobile, 32px );
	}

	.innerg-back-to-top--mobile-right {
		right: var( --innerg-btt-right-mobile, 32px );
		left: auto;
	}

	.innerg-back-to-top--mobile-left {
		left: var( --innerg-btt-left-mobile, 32px );
		right: auto;
	}
}

.innerg-back-to-top.is-visible {
	opacity: 1;
	pointer-events: auto;
}

.innerg-back-to-top:not( .is-visible ) {
	transform: translateY( 8px );
}

.innerg-back-to-top__ring {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.innerg-back-to-top__track {
	stroke: var( --innerg-btt-track-color, var( --border ) );
}

.innerg-back-to-top__progress {
	stroke: var( --innerg-btt-progress-color, var( --accent ) );
	transition: stroke-dashoffset 0.1s linear;
}

.innerg-back-to-top__inner {
	position: absolute;
	inset: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background-color: var( --innerg-btt-bg-color, var( --background ) );
	color: var( --innerg-btt-icon-color, var( --brand-dark ) );
	box-shadow: 0 4px 16px rgba( 43, 41, 26, 0.12 );
	transition: background-color 0.25s ease, color 0.25s ease;
}

.innerg-back-to-top__inner svg {
	width: 16px;
	height: 16px;
}

.innerg-back-to-top:hover .innerg-back-to-top__inner {
	background-color: var( --innerg-btt-hover-bg, var( --brand-dark ) );
	color: var( --innerg-btt-hover-icon, var( --background ) );
}

@media ( prefers-reduced-motion: reduce ) {
	.innerg-back-to-top,
	.innerg-back-to-top__progress,
	.innerg-back-to-top__inner {
		transition: none;
	}
}