/* =========================================================================
 * 悬浮 WhatsApp 按钮
 * 桌面端：右下角带文案的胶囊按钮；移动端：自适应为圆形图标按钮。
 * 品牌绿 #25D366，深色焦点环 #128C7E（与原站绿色调一致）。
 * ========================================================================= */

.sj-whatsapp {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 99999;

	display: inline-flex;
	align-items: center;
	gap: 10px;

	padding: 12px 18px 12px 14px;
	border-radius: 999px;

	background: #25d366;
	color: #ffffff;
	text-decoration: none;
	font-family: var(--heading-font-family, Poppins, sans-serif);
	font-weight: 600;
	font-size: 15px;
	line-height: 1;
	white-space: nowrap;

	box-shadow: 0 6px 20px rgba(37, 211, 102, 0.35);
	-webkit-tap-highlight-color: transparent;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.sj-whatsapp:hover,
.sj-whatsapp:focus {
	color: #ffffff;
	text-decoration: none;
	transform: translateY(-2px);
	box-shadow: 0 10px 28px rgba(37, 211, 102, 0.45);
}

.sj-whatsapp:focus-visible {
	outline: 3px solid #128c7e;
	outline-offset: 2px;
}

.sj-whatsapp__icon {
	width: 28px;
	height: 28px;
	flex: 0 0 auto;
	display: block;
}

.sj-whatsapp__label {
	display: inline-block;
}

/* 平板：略微收紧间距 */
@media (max-width: 1024px) {
	.sj-whatsapp {
		right: 20px;
		bottom: 20px;
	}
}

/* 移动端：圆形图标按钮，隐藏文案，适配安全区 */
@media (max-width: 600px) {
	.sj-whatsapp {
		right: calc(16px + env(safe-area-inset-right, 0px));
		bottom: calc(16px + env(safe-area-inset-bottom, 0px));
		padding: 0;
		width: 56px;
		height: 56px;
		justify-content: center;
		border-radius: 50%;
		gap: 0;
	}

	.sj-whatsapp__icon {
		width: 30px;
		height: 30px;
	}

	.sj-whatsapp__label {
		display: none;
	}
}

/* 尊重用户的减少动效偏好 */
@media (prefers-reduced-motion: reduce) {
	.sj-whatsapp {
		transition: none;
	}

	.sj-whatsapp:hover,
	.sj-whatsapp:focus {
		transform: none;
	}
}