/* ── Super Ads — Urgency Bar ── */

@keyframes sa-ubar-blink {
	0%, 100% {
		opacity: 1;
		transform: scale(1);
		box-shadow: 0 0 0 0 color-mix(in srgb, var(--sa-ubar-accent) 55%, transparent);
	}
	50% {
		opacity: 0.85;
		transform: scale(1.08);
		box-shadow: 0 0 0 8px transparent;
	}
}

@keyframes sa-ubar-shimmer {
	0% { transform: translateX(-120%); }
	100% { transform: translateX(120%); }
}

@keyframes sa-ubar-soft {
	0%, 100% { opacity: 0.45; }
	50% { opacity: 0.9; }
}

.sa-ubar {
	--sa-ubar-accent: #22c55e;
	--sa-ubar-text: #ffffff;
	--sa-ubar-bg: #0f1117;
	box-sizing: border-box;
	display: block;
	margin: 0 0 16px;
	padding: 0 10px;
	background: transparent;
	color: var(--sa-ubar-text);
	font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
	text-decoration: none !important;
}

a.sa-ubar,
a.sa-ubar:hover,
a.sa-ubar:focus,
a.sa-ubar:visited {
	color: var(--sa-ubar-text) !important;
	text-decoration: none !important;
	cursor: pointer;
}

.sa-ubar--link .sa-ubar__inner {
	transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.sa-ubar--link:hover .sa-ubar__inner {
	transform: translateY(-1px);
	filter: brightness(1.06);
}

.sa-ubar *,
.sa-ubar *::before,
.sa-ubar *::after {
	box-sizing: border-box;
}

.sa-ubar--sticky {
	position: sticky;
	top: 8px;
	z-index: 999;
}

.sa-ubar__inner {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	flex-wrap: wrap;
	padding: 12px 16px;
	text-align: center;
	border-radius: 999px;
	background:
		radial-gradient(120% 140% at 0% 50%, color-mix(in srgb, var(--sa-ubar-accent) 28%, transparent), transparent 55%),
		linear-gradient(135deg, color-mix(in srgb, var(--sa-ubar-bg) 88%, #000), var(--sa-ubar-bg));
	border: 1px solid color-mix(in srgb, var(--sa-ubar-accent) 35%, rgba(255, 255, 255, 0.1));
	box-shadow:
		0 10px 28px rgba(0, 0, 0, 0.28),
		0 0 0 1px rgba(255, 255, 255, 0.04) inset,
		0 0 24px color-mix(in srgb, var(--sa-ubar-accent) 18%, transparent);
}

.sa-ubar__inner::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(
		105deg,
		transparent 35%,
		rgba(255, 255, 255, 0.12) 50%,
		transparent 65%
	);
	transform: translateX(-120%);
	animation: sa-ubar-shimmer 3.2s ease-in-out infinite;
	pointer-events: none;
}

.sa-ubar__inner::after {
	content: '';
	position: absolute;
	inset: -40% auto auto 55%;
	width: 120px;
	height: 120px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--sa-ubar-accent) 18%, transparent);
	filter: blur(28px);
	pointer-events: none;
	animation: sa-ubar-soft 2.4s ease-in-out infinite;
}

.sa-ubar__dot {
	position: relative;
	z-index: 1;
	flex: 0 0 11px;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: var(--sa-ubar-accent);
	box-shadow: 0 0 12px color-mix(in srgb, var(--sa-ubar-accent) 65%, transparent);
	animation: sa-ubar-blink 1.15s ease-in-out infinite;
}

.sa-ubar__dot::after {
	content: '';
	position: absolute;
	inset: -5px;
	border-radius: 50%;
	border: 1.5px solid color-mix(in srgb, var(--sa-ubar-accent) 70%, transparent);
	opacity: 0.7;
	animation: sa-ubar-blink 1.15s ease-in-out infinite;
}

.sa-ubar__text {
	position: relative;
	z-index: 1;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: -0.01em;
	color: var(--sa-ubar-text);
	text-shadow: 0 1px 10px rgba(0, 0, 0, 0.35);
}

.sa-ubar__count {
	font-variant-numeric: tabular-nums;
	font-weight: 800;
	color: var(--sa-ubar-accent);
	text-shadow: 0 0 14px color-mix(in srgb, var(--sa-ubar-accent) 55%, transparent);
	transition: opacity 0.15s ease, transform 0.15s ease;
}

.sa-ubar__count.is-updating {
	opacity: 0.7;
	transform: scale(1.06);
}

.sa-ubar__btn {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 8px 14px;
	border-radius: 999px;
	background: linear-gradient(135deg, var(--sa-ubar-accent), color-mix(in srgb, var(--sa-ubar-accent) 70%, #fff));
	color: #052e16 !important;
	text-decoration: none !important;
	font-size: 12px;
	font-weight: 800;
	line-height: 1;
	box-shadow: 0 6px 16px color-mix(in srgb, var(--sa-ubar-accent) 40%, transparent);
	transition: filter 0.15s ease, transform 0.15s ease;
}

.sa-ubar__btn:hover {
	filter: brightness(1.08);
	transform: translateY(-1px);
}

@media (max-width: 520px) {
	.sa-ubar {
		padding: 0 8px;
	}

	.sa-ubar__inner {
		border-radius: 18px;
		padding: 12px 14px;
		gap: 10px;
	}

	.sa-ubar__text {
		font-size: 13px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sa-ubar__dot,
	.sa-ubar__dot::after,
	.sa-ubar__inner::before,
	.sa-ubar__inner::after {
		animation: none !important;
	}
}