/*
 * Floating WhatsApp button on phones: a badge-styled pill with a hint above.
 * Size, position, hint style and motion come from the Customizer as
 * classes and custom properties on .wa-fab.
 */
.wa-fab {
	position: fixed;
	inset-inline: 0;
	inset-block-end: calc(var(--cj-fab-offset, 12px) + env(safe-area-inset-bottom, 0px));
	z-index: 85;
	display: none;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding-inline: 16px;
	pointer-events: none;
}

.wa-fab--pos-start {
	align-items: flex-start;
}

.wa-fab--pos-end {
	align-items: flex-end;
}

.wa-fab-hint {
	display: flex;
	flex-direction: column;
	align-items: center;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--cj-hint-color, #171717);
	text-shadow: 0 0 6px #fff, 0 0 12px #fff, 0 1px 0 #fff;
}

.wa-fab-hint-icon {
	width: 20px;
	height: 20px;
	margin-block-start: -1px;
}

.wa-fab-hint-emoji {
	width: auto;
	height: auto;
	font-size: 18px;
	line-height: 1.1;
	text-shadow: none;
}

.wa-fab-hint-emoji::after {
	content: attr(data-emoji);
}

.wa-fab-link {
	display: block;
	pointer-events: auto;
	text-decoration: none;
	transition: transform 200ms ease;
}

.wa-fab-link:active {
	transform: scale(0.97);
}

/* Sizes */
.wa-fab .badge {
	font-weight: 700;
}

.wa-fab--size-xs .badge {
	padding: 8px 14px 8px 12px;
	font-size: 12px;
}

.wa-fab--size-xs .badge .badge-icon {
	width: 16px;
	height: 16px;
}

.wa-fab--size-s .badge {
	padding: 10px 16px 10px 13px;
	font-size: 13px;
}

.wa-fab--size-s .badge .badge-icon {
	width: 19px;
	height: 19px;
}

.wa-fab--size-m .badge {
	padding: 12px 20px 12px 16px;
	font-size: 14px;
}

.wa-fab--size-m .badge .badge-icon {
	width: 22px;
	height: 22px;
}

.wa-fab--size-l .badge {
	padding: 13px 22px 13px 18px;
	font-size: 15px;
}

.wa-fab--size-l .badge .badge-icon {
	width: 24px;
	height: 24px;
}

.wa-fab--size-xs .wa-fab-hint {
	font-size: 11px;
}

.wa-fab--size-xs .wa-fab-hint-icon {
	width: 16px;
	height: 16px;
}

.wa-fab--size-l .wa-fab-hint {
	font-size: 13px;
}

/* Hint motion */
.wa-fab--hint-bounce .wa-fab-hint {
	animation: cj-hint-bounce var(--cj-hint-speed, 1.6s) ease-in-out infinite;
}

.wa-fab--hint-float .wa-fab-hint {
	animation: cj-hint-float var(--cj-hint-speed, 1.6s) ease-in-out infinite;
}

.wa-fab--hint-nod .wa-fab-hint-icon {
	animation: cj-hint-nod var(--cj-hint-speed, 1.6s) ease-in-out infinite;
}

.wa-fab--hint-pulse .wa-fab-hint {
	animation: cj-hint-pulse var(--cj-hint-speed, 1.6s) ease-in-out infinite;
}

.wa-fab--hint-shake .wa-fab-hint {
	animation: cj-hint-shake var(--cj-hint-speed, 1.6s) ease-in-out infinite;
}

/* Button motion */
.wa-fab--btn-pulse .wa-fab-link {
	animation: cj-wa-pulse var(--cj-hint-speed, 1.6s) ease-in-out infinite;
}

.wa-fab--btn-glow .wa-fab-link {
	animation: cj-wa-glow var(--cj-hint-speed, 1.6s) ease-in-out infinite;
}

@keyframes cj-hint-bounce {
	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-8px);
	}
}

@keyframes cj-hint-float {
	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-4px);
	}
}

@keyframes cj-hint-nod {
	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(5px);
	}
}

@keyframes cj-hint-pulse {
	0%,
	100% {
		transform: scale(1);
	}

	50% {
		transform: scale(1.12);
	}
}

@keyframes cj-hint-shake {
	0%,
	100% {
		transform: translateX(0);
	}

	25% {
		transform: translateX(-4px);
	}

	75% {
		transform: translateX(4px);
	}
}

@keyframes cj-wa-pulse {
	0%,
	100% {
		transform: scale(1);
	}

	50% {
		transform: scale(1.05);
	}
}

@keyframes cj-wa-glow {
	0%,
	100% {
		filter: drop-shadow(0 0 0 rgba(255, 220, 130, 0));
	}

	50% {
		filter: drop-shadow(0 0 12px rgba(255, 220, 130, 0.95));
	}
}

/* Where it shows */
@media (max-width: 768px) {
	.wa-fab {
		display: flex;
	}

	body.has-wa-fab .chat-bubble {
		display: none;
	}

	body.has-wa-fab .site-footer {
		padding-block-end: 92px;
	}
}

/* Customizer: shown at any width while its section is open */
html.cj-wafab-force .wa-fab {
	display: flex;
}

.woocommerce-checkout .wa-fab,
.woocommerce-cart .wa-fab,
.single-product .wa-fab {
	display: none !important;
}

@media (max-width: 768px) {
	body.single-product.has-wa-fab .chat-bubble {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wa-fab-hint,
	.wa-fab-hint-icon,
	.wa-fab-link {
		animation: none !important;
	}
}