/* ========================================
   FLOATING WHATSAPP BUTTON - DESKTOP & MOBILE
   Professional Design with iPhone App Feel
======================================== */

/* Desktop WhatsApp Button */
@media only screen and (min-width: 768px) {
	.whatsapp-float {
		position: fixed;
		bottom: 30px;
		right: 30px;
		z-index: 999;
		width: 64px;
		height: 64px;
		background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 
			0 8px 24px rgba(37, 211, 102, 0.35),
			0 4px 12px rgba(18, 140, 126, 0.25);
		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
		text-decoration: none;
		cursor: pointer;
		animation: whatsapp-pulse 2s infinite;
	}

	.whatsapp-float:hover {
		transform: translateY(-4px) scale(1.05);
		box-shadow: 
			0 12px 32px rgba(37, 211, 102, 0.45),
			0 6px 16px rgba(18, 140, 126, 0.35);
	}

	.whatsapp-float:active {
		transform: translateY(-2px) scale(1.02);
	}

	.whatsapp-float i {
		font-size: 32px;
		color: #ffffff;
		filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
	}

	/* Tooltip on hover */
	.whatsapp-float::before {
		content: 'Chat with us';
		position: absolute;
		right: 75px;
		background: #ffffff;
		color: #128C7E;
		padding: 8px 16px;
		border-radius: 8px;
		font-size: 14px;
		font-weight: 600;
		white-space: nowrap;
		opacity: 0;
		transform: translateX(10px);
		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
		pointer-events: none;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	}

	.whatsapp-float::after {
		content: '';
		position: absolute;
		right: 65px;
		border: 6px solid transparent;
		border-left-color: #ffffff;
		opacity: 0;
		transform: translateX(10px);
		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
		pointer-events: none;
	}

	.whatsapp-float:hover::before,
	.whatsapp-float:hover::after {
		opacity: 1;
		transform: translateX(0);
	}

	@keyframes whatsapp-pulse {
		0%, 100% {
			box-shadow: 
				0 8px 24px rgba(37, 211, 102, 0.35),
				0 4px 12px rgba(18, 140, 126, 0.25);
		}
		50% {
			box-shadow: 
				0 10px 32px rgba(37, 211, 102, 0.5),
				0 5px 16px rgba(18, 140, 126, 0.4);
		}
	}
}

/* Ripple effect on click */
.whatsapp-float .ripple {
	position: absolute;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.6);
	width: 0;
	height: 0;
	transform: translate(-50%, -50%);
	animation: ripple-animation 0.6s ease-out;
}

@keyframes ripple-animation {
	to {
		width: 100px;
		height: 100px;
		opacity: 0;
	}
}