/************************************/
/*** Floating WhatsApp & Back-to-Top Buttons ***/
/************************************/

/* ---------- WhatsApp Button (fixed left) ---------- */
.floating-whatsapp-btn{
	position: fixed;
	left: 25px;
	bottom: 30px;
	width: 58px;
	height: 58px;
	background: #25D366;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 6px 20px rgba(37, 211, 102, 0.45);
	z-index: 999;
	transition: all 0.3s ease;
	animation: floatingWhatsappPulse 2.4s infinite;
}

.floating-whatsapp-btn i{
	color: #FFFFFF;
	font-size: 30px;
	line-height: 1;
	transition: transform 0.3s ease;
}

.floating-whatsapp-btn:hover{
	background: #1EBE5A;
	transform: translateY(-4px) scale(1.06);
	box-shadow: 0 10px 26px rgba(37, 211, 102, 0.6);
}

.floating-whatsapp-btn:hover i{
	transform: scale(1.1);
}

@keyframes floatingWhatsappPulse{
	0%{
		box-shadow: 0 6px 20px rgba(37, 211, 102, 0.45), 0 0 0 0 rgba(37, 211, 102, 0.55);
	}
	70%{
		box-shadow: 0 6px 20px rgba(37, 211, 102, 0.45), 0 0 0 14px rgba(37, 211, 102, 0);
	}
	100%{
		box-shadow: 0 6px 20px rgba(37, 211, 102, 0.45), 0 0 0 0 rgba(37, 211, 102, 0);
	}
}

/* ---------- Back to Top Button (fixed right) ---------- */
.floating-backtotop-btn{
	position: fixed;
	right: 25px;
	bottom: 30px;
	width: 58px;
	height: 58px;
	z-index: 999;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(15px);
	transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
}

.floating-backtotop-btn.is-visible{
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.floating-backtotop-btn svg{
	position: absolute;
	top: 0;
	left: 0;
	width: 58px;
	height: 58px;
	transform: rotate(-90deg);
}

.floating-backtotop-btn svg circle{
	fill: none;
	stroke-width: 4;
}

.floating-backtotop-btn .progress-track{
	stroke: rgba(1, 5, 53, 0.1);
}

.floating-backtotop-btn .progress-fill{
	stroke: var(--accent-color, #3662CC);
	stroke-linecap: round;
	transition: stroke-dashoffset 0.1s linear;
}

.floating-backtotop-btn .backtotop-inner{
	position: absolute;
	top: 4px;
	left: 4px;
	width: 50px;
	height: 50px;
	background: var(--primary-color, #010535);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 6px 18px rgba(1, 5, 53, 0.3);
	transition: background 0.3s ease, transform 0.3s ease;
}

.floating-backtotop-btn .backtotop-inner i{
	color: #FFFFFF;
	font-size: 18px;
	transition: transform 0.3s ease;
}

.floating-backtotop-btn:hover .backtotop-inner{
	background: var(--accent-color, #3662CC);
	transform: scale(1.06);
}

.floating-backtotop-btn:hover .backtotop-inner i{
	transform: translateY(-3px);
}

/* ---------- Responsive ---------- */
@media (max-width: 768px){
	.floating-whatsapp-btn,
	.floating-backtotop-btn{
		width: 50px;
		height: 50px;
		bottom: 20px;
	}

	.floating-whatsapp-btn{
		left: 16px;
	}

	.floating-backtotop-btn{
		right: 16px;
	}

	.floating-whatsapp-btn i{
		font-size: 25px;
	}

	.floating-backtotop-btn svg{
		width: 50px;
		height: 50px;
	}

	.floating-backtotop-btn .backtotop-inner{
		width: 42px;
		height: 42px;
		top: 4px;
		left: 4px;
	}

	.floating-backtotop-btn .backtotop-inner i{
		font-size: 16px;
	}
}

@media (max-width: 480px){
	.floating-whatsapp-btn,
	.floating-backtotop-btn{
		width: 46px;
		height: 46px;
		bottom: 16px;
	}

	.floating-whatsapp-btn{
		left: 12px;
	}

	.floating-backtotop-btn{
		right: 12px;
	}

	.floating-whatsapp-btn i{
		font-size: 22px;
	}

	.floating-backtotop-btn svg{
		width: 46px;
		height: 46px;
	}

	.floating-backtotop-btn .backtotop-inner{
		width: 38px;
		height: 38px;
	}

	.floating-backtotop-btn .backtotop-inner i{
		font-size: 14px;
	}
}