/* Float Button — стили фронтенда */

.flbtn-container {
	position: fixed;
	top: 0;
	left: 0;
	width: 0;
	height: 0;
	pointer-events: none;
}

.flbtn {
	position: fixed;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	padding: 0;
	background-color: var(--flbtn-bg, #25d366);
	color: var(--flbtn-icon, #fff);
	text-decoration: none;
	line-height: 1;
	cursor: pointer;
	pointer-events: auto;
	transform: var(--flbtn-transform, translateX(0));
	transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
	-webkit-tap-highlight-color: transparent;
}

.flbtn:hover,
.flbtn:focus {
	transform: var(--flbtn-transform, translateX(0)) scale(1.08);
	filter: brightness(1.05);
	color: var(--flbtn-icon, #fff);
}

.flbtn:focus-visible {
	outline: 2px solid var(--flbtn-icon, #fff);
	outline-offset: 3px;
}

.flbtn--shadow {
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}

/* Формы */
.flbtn--shape-circle {
	border-radius: 50%;
}

.flbtn--shape-rounded {
	border-radius: var(--flbtn-radius, 16px);
}

.flbtn--shape-pill {
	border-radius: 999px;
	padding: 0 var(--flbtn-label-pad, 20px);
	gap: 10px;
}

/* Иконка */
.flbtn-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--flbtn-icon-size, 28px);
	height: var(--flbtn-icon-size, 28px);
}

.flbtn-icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

.flbtn-icon-img {
	width: var(--flbtn-icon-size, 28px);
	height: var(--flbtn-icon-size, 28px);
	object-fit: contain;
	display: block;
}

/* Подпись */
.flbtn-label {
	display: none;
	font-family: var(--flbtn-label-font, inherit);
	font-size: var(--flbtn-label-size, 15px);
	font-weight: var(--flbtn-label-weight, 600);
	white-space: nowrap;
}

/* В форме «Пилюля» подпись видна всегда */
.flbtn--shape-pill .flbtn-label {
	display: inline-block;
}

/* Для остальных форм — всплывающая подпись слева/справа при наведении */
.flbtn:not(.flbtn--shape-pill) .flbtn-label {
	position: absolute;
	display: inline-block;
	right: calc(100% + 12px);
	background: var(--flbtn-label-bg, #fff);
	color: var(--flbtn-label-color, #333);
	padding: calc(var(--flbtn-label-pad, 18px) * 0.55) var(--flbtn-label-pad, 18px);
	border-radius: 8px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
	opacity: 0;
	visibility: hidden;
	transform: translateX(8px);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
	pointer-events: none;
}

.flbtn:not(.flbtn--shape-pill):hover .flbtn-label,
.flbtn:not(.flbtn--shape-pill):focus-visible .flbtn-label {
	opacity: 1;
	visibility: visible;
	transform: translateX(0);
}

/* Если кнопка слева экрана — подпись показываем справа */
.flbtn--left:not(.flbtn--shape-pill) .flbtn-label {
	right: auto;
	left: calc(100% + 12px);
	transform: translateX(-8px);
}

.flbtn--left:not(.flbtn--shape-pill):hover .flbtn-label,
.flbtn--left:not(.flbtn--shape-pill):focus-visible .flbtn-label {
	transform: translateX(0);
}

/* Пульсация */
.flbtn--pulse::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background-color: var(--flbtn-bg, #25d366);
	z-index: -1;
	animation: flbtn-pulse 2s infinite;
}

@keyframes flbtn-pulse {
	0% {
		transform: scale(1);
		opacity: 0.7;
	}
	70% {
		transform: scale(1.6);
		opacity: 0;
	}
	100% {
		transform: scale(1.6);
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.flbtn--pulse::before {
		animation: none;
	}
	.flbtn {
		transition: none;
	}
}