.kfbtt-button,
.kfbtt-button * {
	box-sizing: border-box;
}

.kfbtt-button {
	--kfbtt-progress: 0deg;
	position: fixed;
	bottom: calc(var(--kfbtt-bottom-desktop) + env(safe-area-inset-bottom));
	z-index: 9997;
	display: block;
	width: var(--kfbtt-size);
	height: var(--kfbtt-size);
	min-width: var(--kfbtt-size);
	min-height: var(--kfbtt-size);
	aspect-ratio: 1 / 1;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 999px;
	overflow: hidden;
	isolation: isolate;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(18px) scale(.9);
	background: transparent;
	box-shadow:
		0 13px 32px rgba(13, 49, 59, .22),
		0 2px 8px rgba(13, 49, 59, .1);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	appearance: none;
	transition:
		opacity .22s ease,
		visibility .22s ease,
		transform .22s ease,
		box-shadow .22s ease;
}

.kfbtt-button::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	border-radius: inherit;
	background:
		conic-gradient(
			from 0deg,
			var(--kfbtt-primary) 0deg,
			var(--kfbtt-primary) var(--kfbtt-progress),
			rgba(255,255,255,.32) var(--kfbtt-progress),
			rgba(255,255,255,.32) 360deg
		);
}

.kfbtt-button--right {
	right: var(--kfbtt-side-desktop);
}

.kfbtt-button--left {
	left: var(--kfbtt-side-desktop);
}

.kfbtt-button.is-visible {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateY(0) scale(1);
}

.kfbtt-button:hover {
	transform: translateY(-4px) scale(1.035);
	box-shadow:
		0 18px 38px rgba(13, 49, 59, .28),
		0 3px 9px rgba(13, 49, 59, .12);
}

.kfbtt-button:active {
	transform: translateY(-1px) scale(.97);
}

.kfbtt-button:focus-visible {
	outline: 4px solid rgba(114, 93, 168, .28);
	outline-offset: 4px;
}

.kfbtt-button__inner {
	position: absolute;
	inset: 4px;
	z-index: 1;
	display: grid;
	place-items: center;
	border: 1px solid rgba(255,255,255,.22);
	border-radius: 999px;
	background: var(--kfbtt-primary);
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,.24),
		inset 0 -6px 16px rgba(0,0,0,.1);
	transition: background .22s ease, transform .22s ease;
}

.kfbtt-button:hover .kfbtt-button__inner {
	background: var(--kfbtt-hover);
}

.kfbtt-button__arrow {
	position: relative;
	top: -1px;
	display: block;
	color: var(--kfbtt-icon);
	font-family: Arial, sans-serif;
	font-size: calc(var(--kfbtt-size) * .43);
	font-weight: 800;
	line-height: 1;
	text-shadow: 0 2px 7px rgba(0,0,0,.18);
}

.kfbtt-button--no-progress::before {
	display: none;
}

.kfbtt-button--no-progress .kfbtt-button__inner {
	inset: 0;
	border: 3px solid rgba(255,255,255,.28);
}

@media (max-width: 600px) {
	.kfbtt-button {
		bottom: calc(var(--kfbtt-bottom-mobile) + env(safe-area-inset-bottom));
		width: calc(var(--kfbtt-size) - 2px);
		height: calc(var(--kfbtt-size) - 2px);
		min-width: calc(var(--kfbtt-size) - 2px);
		min-height: calc(var(--kfbtt-size) - 2px);
	}

	.kfbtt-button--right {
		right: var(--kfbtt-side-mobile);
	}

	.kfbtt-button--left {
		left: var(--kfbtt-side-mobile);
	}
}

@media (prefers-reduced-motion: reduce) {
	.kfbtt-button,
	.kfbtt-button__inner {
		transition: none;
	}
}

@media print {
	.kfbtt-button {
		display: none !important;
	}
}