/* Sufia Product Clicks - badge. Everything is scoped to .spc-badge so it cannot affect themes or other plugins. */
.spc-badge {
	--spc-bg: #f1f1f1;
	--spc-fg: #444444;
	--spc-gap: 6px;
	display: inline-flex;
	align-items: center;
	gap: var(--spc-gap, 6px);
	vertical-align: middle;
	margin-inline-start: 6px;
	padding: 3px 10px 3px 8px;
	border: 1px solid transparent;
	border-radius: 999px;
	background: var(--spc-bg);
	color: var(--spc-fg);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0;
	text-transform: none;
	white-space: nowrap;
	box-shadow: none;
	cursor: default;
	transition: transform 0.2s ease;
}

.spc-badge[hidden] {
	display: none !important;
}

.spc-badge .spc-ico {
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
	margin: 0;
	opacity: 0.85;
}

.spc-badge .spc-num {
	font-variant-numeric: tabular-nums;
}

.spc-badge.spc-icon-none {
	padding-inline-start: 10px;
}

/* Styles */
.spc-badge.spc-style-outline {
	background: transparent;
	border-color: var(--spc-fg);
}

.spc-badge.spc-style-solid {
	background: var(--spc-fg);
	color: var(--spc-bg);
}

/* Small pop when a refreshed number appears */
.spc-badge.spc-pop {
	animation: spc-pop 0.6s ease;
}

@keyframes spc-pop {
	0%   { transform: scale(1); }
	35%  { transform: scale(1.12); }
	100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
	.spc-badge,
	.spc-badge.spc-pop {
		animation: none;
		transition: none;
	}
}

/* Position: far right of the price row. The price container becomes a flex row and the badge is pushed to the end. */
.price:has(> .spc-badge.spc-pos-right) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 8px;
}

.spc-badge.spc-pos-right {
	margin-inline-start: auto;
}

/* Elementor widget wrapper */
.spc-widget .spc-badge {
	margin-inline-start: 0;
}