/**
 * File: assets/css/components/whatsapp-button.css
 * Description: Floating WhatsApp button styles.
 *
 * MAGIDA GLOBAL UI PASS 4:
 * - Adds local quick-contact action.
 */

.magida-floating-whatsapp {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: var(--magida-z-floating);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	border: 1px solid rgba(37, 211, 102, 0.46);
	border-radius: var(--magida-radius-full);
	background: #25d366;
	color: #06140b;
	box-shadow: 0 14px 34px rgba(37, 211, 102, 0.22);
	transition:
		box-shadow var(--magida-transition),
		transform var(--magida-transition);
}

.magida-floating-whatsapp__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.magida-floating-whatsapp__icon svg {
	width: 25px;
	height: 25px;
}

.magida-floating-whatsapp__tooltip {
	position: absolute;
	right: calc(100% + 12px);
	display: inline-flex;
	align-items: center;
	min-height: 34px;
	padding: 0 12px;
	border: 1px solid rgba(37, 211, 102, 0.28);
	border-radius: var(--magida-radius-full);
	background: rgba(6, 7, 11, 0.92);
	color: var(--magida-white);
	font-size: 0.78rem;
	font-weight: 800;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transform: translateX(6px);
	transition:
		opacity var(--magida-transition),
		transform var(--magida-transition);
}

.magida-floating-whatsapp:hover,
.magida-floating-whatsapp:focus-visible {
	color: #06140b;
	box-shadow: 0 18px 44px rgba(37, 211, 102, 0.34);
	transform: translateY(-2px);
}

.magida-floating-whatsapp:hover .magida-floating-whatsapp__tooltip,
.magida-floating-whatsapp:focus-visible .magida-floating-whatsapp__tooltip {
	opacity: 1;
	transform: translateX(0);
}

@media (max-width: 768px) {
	.magida-floating-whatsapp {
		right: 18px;
		bottom: 22px;
		width: 50px;
		height: 50px;
	}

	.magida-floating-whatsapp__tooltip {
		display: none;
	}
}