/* Frontend styles for Floating Call Button */
.fcb-floating-button {
	position: fixed;
	bottom: var(--fcb-distance-bottom, 20px);
	left: var(--fcb-left, auto);
	right: var(--fcb-right, 20px);
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	height: var(--fcb-button-size, 60px);
	min-width: var(--fcb-button-size, 60px);
	padding: 0 15px;
	background-color: var(--fcb-button-color, #25D366);
	color: var(--fcb-text-color, #ffffff);
	border-radius: 50px;
	text-decoration: none;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
	transition: all 0.3s ease;
}

.fcb-floating-button:hover,
.fcb-floating-button:focus {
	transform: translateY(-3px);
	box-shadow: 0 6px 14px rgba(0, 0, 0, 0.2);
	color: var(--fcb-text-color, #ffffff);
	text-decoration: none;
}

.fcb-floating-button.fcb-icon-only {
	padding: 0;
	border-radius: 50%;
	width: var(--fcb-button-size, 60px);
}

.fcb-icon {
	display: flex;
	align-items: center;
	justify-content: center;
}

.fcb-icon svg {
	width: calc(var(--fcb-button-size, 60px) * 0.45);
	height: calc(var(--fcb-button-size, 60px) * 0.45);
}

.fcb-text {
	font-size: calc(var(--fcb-button-size, 60px) * 0.28);
	font-weight: 600;
	white-space: nowrap;
	line-height: 1;
}

/* Pulse Animation */
.fcb-pulse {
	animation: fcb-pulse-animation 2s infinite;
}

@keyframes fcb-pulse-animation {
	0% {
		box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.15);
	}
	70% {
		box-shadow: 0 0 0 15px rgba(0, 0, 0, 0);
	}
	100% {
		box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
	}
}

/* Responsive display logic */
@media (max-width: 768px) {
	.fcb-desktop-only {
		display: none !important;
	}
}

@media (min-width: 769px) {
	.fcb-mobile-only {
		display: none !important;
	}
}