/**
 * Live Sold Count - frontend badge.
 * Colours come from CSS vars set by the plugin settings.
 */

.lsc-badge {
	--lsc-bg: #f5f5f5;
	--lsc-text: #6d6d6d;
	--lsc-icon: #e2401c;

	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 14px;
	max-width: 100%;
	font-size: 13px;
	line-height: 1.45;
	vertical-align: middle;
}

.woocommerce div.product .summary .lsc-badge {
	clear: both;
}

.lsc-badge .lsc-icon {
	flex: 0 0 auto;
	color: var(--lsc-icon);
	font-size: 14px;
	line-height: 1;
}

.lsc-badge .lsc-text {
	display: inline-block;
	padding: 5px 10px;
	border-radius: 5px;
	background: var(--lsc-bg);
	color: var(--lsc-text);
}

.lsc-badge .lsc-count {
	display: inline-block; /* needed so the bump transform applies */
	font-weight: 600;
}

/* Small pulse when the number changes, so the update is noticeable. */
.lsc-badge .lsc-count.lsc-bump {
	animation: lsc-bump 0.5s ease;
}

@keyframes lsc-bump {
	0% {
		transform: translateY(0);
		opacity: 1;
	}
	35% {
		transform: translateY(-3px);
		opacity: 0.45;
	}
	100% {
		transform: translateY(0);
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.lsc-badge .lsc-count.lsc-bump {
		animation: none;
	}
}

@media (max-width: 480px) {
	.lsc-badge {
		font-size: 12px;
	}
}