.sdc-countdown {
	--sdc-accent: #e21b1b;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.35em;
	width: 100%;
	color: var(--sdc-accent);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
}

.sdc-countdown[hidden] {
	display: none !important;
}

.sdc-countdown__time {
	font-variant-numeric: tabular-nums;
}

.sdc-countdown--bar {
	justify-content: center;
	flex-wrap: nowrap;
	margin: 0.75rem 0;
	padding: 9px 14px;
	border-radius: 6px;
	background: var(--sdc-accent);
	color: #ffffff;
	text-align: center;
}

.sdc-countdown--outline,
.sdc-countdown--card {
	justify-content: center;
	margin: 0.75rem 0;
	padding: 10px 14px;
	border: 1px solid #d7d7d7;
	border-left: 4px solid var(--sdc-accent);
	border-radius: 6px;
	background: #ffffff;
	color: #161616;
	text-align: center;
}

.sdc-countdown--outline .sdc-countdown__separator,
.sdc-countdown--card .sdc-countdown__separator {
	color: #999999;
}

.sdc-countdown--outline .sdc-countdown__time,
.sdc-countdown--card .sdc-countdown__time {
	color: var(--sdc-accent);
}

.sdc-countdown--dark {
	justify-content: center;
	margin: 0.75rem 0;
	padding: 8px 10px;
	border: 1px solid #111111;
	border-radius: 6px;
	background: #111111;
	color: #ffffff;
	text-align: center;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.sdc-countdown--dark .sdc-countdown__separator {
	color: #777777;
}

.sdc-countdown--dark .sdc-countdown__time {
	padding: 3px 8px;
	border-radius: 4px;
	background: var(--sdc-accent);
	color: #ffffff;
}

.sdc-countdown--minimal,
.sdc-countdown--inline {
	justify-content: center;
	width: 100%;
	margin: 0.75rem 0;
	padding: 9px 2px;
	border-top: 1px solid #dedede;
	border-bottom: 1px solid #dedede;
	color: #1b1b1b;
	text-align: center;
}

.sdc-countdown--minimal .sdc-countdown__separator,
.sdc-countdown--inline .sdc-countdown__separator {
	color: #a0a0a0;
}

.sdc-countdown--minimal .sdc-countdown__time,
.sdc-countdown--inline .sdc-countdown__time {
	color: var(--sdc-accent);
}

@media (max-width: 600px) {
	.sdc-countdown {
		font-size: 14px;
	}

	.sdc-countdown--bar {
		flex-wrap: wrap;
		gap: 0.25em;
		padding: 9px 10px;
	}

	.sdc-countdown--outline,
	.sdc-countdown--card,
	.sdc-countdown--dark,
	.sdc-countdown--minimal,
	.sdc-countdown--inline {
		gap: 0.25em;
		padding-right: 10px;
		padding-left: 10px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sdc-countdown {
		scroll-behavior: auto;
	}
}