.site-access-counter {
	--sac-gold-1: #f4e2ae;
	--sac-gold-2: #c7a65a;
	--sac-ink: #11100f;
	position: relative;
	display: inline-flex;
	align-items: baseline;
	justify-content: center;
	gap: 0.65em;
	box-sizing: border-box;
	vertical-align: middle;
	font-family: inherit;
	line-height: 1;
	isolation: isolate;
}

.site-access-counter__label {
	position: relative;
	z-index: 1;
	font-size: 0.68em;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	white-space: nowrap;
}

.site-access-counter__value {
	position: relative;
	z-index: 1;
	display: inline-block;
	font-weight: 600;
	letter-spacing: 0.035em;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.site-access-counter--small {
	font-size: 13px;
}

.site-access-counter--medium {
	font-size: 16px;
}

.site-access-counter--large {
	font-size: clamp(18px, 1.8vw, 24px);
}

.site-access-counter--luxury,
.site-access-counter--glass {
	min-width: 7.5em;
	padding: 0.82em 1.35em;
	overflow: hidden;
	border: 1px solid rgba(225, 201, 134, 0.48);
	border-radius: 999px;
	color: var(--sac-gold-1);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.1),
		inset 0 -1px 0 rgba(0, 0, 0, 0.26),
		0 12px 32px rgba(0, 0, 0, 0.2);
}

.site-access-counter--luxury {
	background:
		radial-gradient(circle at 18% 0%, rgba(215, 181, 100, 0.19), transparent 42%),
		linear-gradient(135deg, #2a2520 0%, #131210 48%, #080808 100%);
}

.site-access-counter--glass {
	background:
		linear-gradient(135deg, rgba(46, 40, 34, 0.72), rgba(12, 12, 12, 0.55));
	-webkit-backdrop-filter: blur(16px) saturate(135%);
	backdrop-filter: blur(16px) saturate(135%);
}

.site-access-counter--luxury::before,
.site-access-counter--glass::before {
	position: absolute;
	z-index: 0;
	top: -180%;
	left: -45%;
	width: 38%;
	height: 460%;
	background: linear-gradient(90deg, transparent, rgba(255, 242, 201, 0.13), transparent);
	content: '';
	transform: rotate(24deg);
	pointer-events: none;
}

.site-access-counter--luxury::after,
.site-access-counter--glass::after {
	position: absolute;
	z-index: 0;
	inset: 1px;
	border: 1px solid rgba(255, 255, 255, 0.045);
	border-radius: inherit;
	content: '';
	pointer-events: none;
}

.site-access-counter--luxury .site-access-counter__label,
.site-access-counter--glass .site-access-counter__label {
	color: rgba(250, 239, 207, 0.68);
}

.site-access-counter--luxury .site-access-counter__value,
.site-access-counter--glass .site-access-counter__value {
	color: var(--sac-gold-1);
	text-shadow: 0 0 22px rgba(222, 188, 101, 0.2);
}

.site-access-counter--minimal {
	padding: 0.35em 0.1em 0.45em;
	border-bottom: 1px solid rgba(199, 166, 90, 0.55);
	color: var(--sac-ink);
}

.site-access-counter--minimal .site-access-counter__label {
	color: #81755f;
}

.site-access-counter--minimal .site-access-counter__value {
	color: #725b27;
}

.site-access-counter--plain {
	gap: 0.4em;
}

.site-access-counter.is-updated .site-access-counter__value {
	animation: sac-counter-reveal 520ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes sac-counter-reveal {
	0% {
		opacity: 0.35;
		transform: translateY(0.22em) scale(0.97);
	}
	100% {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

@media (prefers-reduced-motion: reduce) {
	.site-access-counter.is-updated .site-access-counter__value {
		animation: none;
	}
}