/* Defaults live here; every one is overridable from the widget's Style tab. */
.bsm-countdown,
.bsm-countdown-frame {
	--bsm-accent: #a78bfa;
	--bsm-glow-soft: rgba(150, 110, 255, 0.15);
	--bsm-glow-strong: rgba(150, 110, 255, 0.35);
	--bsm-ring-soft: rgba(168, 130, 255, 0.35);
	--bsm-ring-strong: rgba(168, 130, 255, 0.6);
	--bsm-label-block: 22px;
}

/* inline-flex so the row shrinks to its content and text-align can place it. */
.bsm-countdown {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	line-height: 1.1;
	text-align: initial;
}

.bsm-countdown__unit {
	display: flex;
	align-items: center;
	justify-content: center;
}

.bsm-countdown__value {
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum";
}

/* The card ------------------------------------------------------------ */

.bsm-countdown-frame {
	display: inline-block;
	border-radius: 20px;
	padding: 22px 24px 24px;
	background: rgba(124, 92, 255, 0.1);
	border: 1px solid var(--bsm-ring-soft);
	animation: bsm-glow 3s ease-in-out infinite;
}

.bsm-countdown-frame--static {
	animation: none;
}

@keyframes bsm-glow {
	0%,
	100% {
		box-shadow: 0 0 18px var(--bsm-glow-soft);
	}
	50% {
		box-shadow: 0 0 28px var(--bsm-glow-strong);
	}
}

.bsm-countdown__heading {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-bottom: 18px;
}

.bsm-countdown__dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	flex: 0 0 auto;
	background: var(--bsm-accent);
	box-shadow: 0 0 8px var(--bsm-accent);
}

.bsm-countdown__heading .bsm-countdown__prefix {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* Boxes: a figure over a caption --------------------------------------- */

.bsm-countdown--boxes .bsm-countdown__unit {
	flex-direction: column;
	text-align: center;
	background: linear-gradient(
		180deg,
		var( --bsm-box-top, #1c1430 ),
		var( --bsm-box-bottom, #150f24 )
	);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.bsm-countdown--boxes .bsm-countdown__value {
	font-size: 36px;
	font-weight: 800;
	text-shadow: 0 0 14px rgba(168, 130, 255, 0.5);
}

.bsm-countdown--boxes.bsm-countdown--flat .bsm-countdown__value {
	text-shadow: none;
}

.bsm-countdown--boxes .bsm-countdown__label {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin-top: 6px;
}

/* Colons sit level with the figure, not the caption. */
.bsm-countdown--boxes .bsm-countdown__sep {
	align-self: center;
	margin-bottom: var(--bsm-label-block);
	font-size: 26px;
	font-weight: 800;
	color: var(--bsm-accent);
	animation: bsm-blink 1.6s steps(1) infinite;
}

.bsm-countdown--boxes.bsm-countdown--nolabels {
	--bsm-label-block: 0px;
}

@keyframes bsm-blink {
	0%,
	45% {
		opacity: 1;
	}
	50%,
	95% {
		opacity: 0.15;
	}
	100% {
		opacity: 1;
	}
}

/* Inline: one running line, for a bar ---------------------------------- */

.bsm-countdown--inline {
	gap: 6px;
}

.bsm-countdown--inline .bsm-countdown__unit {
	gap: 1px;
}

.bsm-countdown--inline .bsm-countdown__value,
.bsm-countdown--inline .bsm-countdown__label,
.bsm-countdown--inline .bsm-countdown__prefix {
	font-size: inherit;
	font-weight: inherit;
	letter-spacing: inherit;
}

.bsm-countdown--inline .bsm-countdown__label {
	text-transform: uppercase;
}

.bsm-countdown--inline .bsm-countdown__prefix {
	margin-right: 2px;
}

.bsm-countdown--inline .bsm-countdown__sep {
	opacity: 0.5;
}

/* Shared --------------------------------------------------------------- */

.bsm-countdown__unit[hidden],
.bsm-countdown__sep[hidden],
.bsm-countdown__prefix[hidden],
.bsm-countdown__expired[hidden] {
	display: none;
}

.bsm-countdown__notice {
	padding: 14px 18px;
	border: 1px dashed currentColor;
	border-radius: 6px;
	opacity: 0.7;
	font-size: 13px;
	text-align: center;
}

@media (prefers-reduced-motion: reduce) {
	.bsm-countdown-frame,
	.bsm-countdown__sep {
		animation: none;
	}
}