/* Alternative countdown timers (Pro): circular progress + minimal boxes.
   Tailwind-inspired, modern minimal. Colors come from the Pro timer color
   settings via CSS variables set inline. */

.wxg-alt-timer {
	--wxg-tm-bg: #0f172a;
	--wxg-tm-fg: #f8fafc;
	--wxg-tm-label: #64748b;
	--wxg-tm-accent: #6366f1;
	--wxg-tm-radius: 16px;
	font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Inter, "Helvetica Neue", Arial, sans-serif;
	display: block;
	width: 100%;
	box-sizing: border-box;
}

.wxg-alt-timer * {
	box-sizing: border-box;
}

.wxg-alt-timer__grid {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: stretch;
}

.wxg-alt-timer__seg {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	flex: 1 1 76px;
	min-width: 68px;
	max-width: 116px;
}

.wxg-alt-timer__lbl {
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wxg-tm-label);
	line-height: 1;
	text-align: center;
}

.wxg-alt-timer__num {
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	line-height: 1;
	color: var(--wxg-tm-fg);
}

/* ---------- Minimal boxes ---------- */

.wxg-alt-timer--boxes .wxg-alt-timer__ring {
	width: 100%;
	min-height: 78px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px 12px;
	border-radius: var(--wxg-tm-radius);
	background: var(--wxg-tm-bg);
	color: var(--wxg-tm-fg);
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08), 0 10px 24px rgba(15, 23, 42, 0.14);
	position: relative;
	overflow: hidden;
}

.wxg-alt-timer--boxes .wxg-alt-timer__num {
	font-size: 2rem;
	letter-spacing: 0.02em;
}

/* ---------- Circular progress ---------- */

.wxg-alt-timer--circular .wxg-alt-timer__ring {
	--p: 100;
	position: relative;
	width: 88px;
	height: 88px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background:
		conic-gradient(
			var(--wxg-tm-accent) calc(var(--p) * 1%),
			color-mix(in srgb, var(--wxg-tm-accent) 14%, transparent) 0
		);
	filter: drop-shadow(0 6px 14px rgba(15, 23, 42, 0.12));
	transition: background 0.6s linear;
}

@supports not (background: conic-gradient(#000 10%, #fff 0)) {
	.wxg-alt-timer--circular .wxg-alt-timer__ring {
		background: var(--wxg-tm-accent);
	}
}

.wxg-alt-timer--circular .wxg-alt-timer__ring::after {
	content: "";
	position: absolute;
	inset: 7px;
	border-radius: 50%;
	background: var(--wxg-tm-bg);
}

.wxg-alt-timer--circular .wxg-alt-timer__num {
	position: relative;
	z-index: 1;
	font-size: 1.6rem;
}

/* ---------- Ended state ---------- */

.wxg-alt-timer .giveaway-closed-msg {
	margin: 0;
	font-size: 1rem;
	font-weight: 600;
	color: var(--wxg-tm-accent);
}

@media (max-width: 480px) {
	.wxg-alt-timer__grid {
		gap: 10px;
	}

	.wxg-alt-timer__seg {
		flex-basis: 60px;
		min-width: 58px;
	}

	.wxg-alt-timer--circular .wxg-alt-timer__ring {
		width: 70px;
		height: 70px;
	}

	.wxg-alt-timer--circular .wxg-alt-timer__num {
		font-size: 1.3rem;
	}

	.wxg-alt-timer--boxes .wxg-alt-timer__num {
		font-size: 1.6rem;
	}
}