/* WWeb Social Proof — Badge Styles */

.wweb-social-proof {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 8px;
}

.wweb-social-proof--single {
	gap: 10px;
	margin: 12px 0;
}

.wweb-sp-badge {
	display: inline-flex;
	align-items: center;
	padding: 3px 10px;
	border-radius: 20px;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.5;
	white-space: nowrap;
	letter-spacing: 0.02em;
	transition: opacity 0.3s ease;
}

.wweb-social-proof--single .wweb-sp-badge {
	padding: 5px 14px;
	font-size: 13px;
}

/* Views badge — blue */
.wweb-sp-badge--views {
	background: #e8f0fe;
	color: #1a73e8;
}

/* Sales badge — green */
.wweb-sp-badge--sales {
	background: #e6f4ea;
	color: #137333;
}

/* Hot / Popular badge — red */
.wweb-sp-badge--hot {
	background: #fce8e6;
	color: #c5221f;
}

/* Today views badge — purple */
.wweb-sp-badge--today {
	background: #f3e8fd;
	color: #7627bb;
}

/* Hover */
.wweb-sp-badge:hover {
	opacity: 0.85;
}

/* Count-up animation */
.wweb-sp-badge--animate {
	opacity: 0;
	transform: translateY(6px);
	transition: opacity 0.4s ease, transform 0.4s ease;
}

.wweb-sp-badge--visible {
	opacity: 1;
	transform: translateY(0);
}