.predictor-countdown {
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	justify-content: var(--predictor-justify, center);
	width: 100%;
}

.predictor-countdown--placeholder,
.predictor-countdown--error {
	margin: 0;
	padding: 0.75rem 1rem;
	border: 1px dashed #ccc;
	border-radius: 4px;
	color: #555;
	font-size: 14px;
}

.predictor-countdown__expired {
	font-size: 1.25rem;
	font-weight: 600;
	text-align: center;
	width: 100%;
}

.predictor-countdown__grid {
	display: flex;
	flex-wrap: wrap;
	gap: var(--predictor-gap, 12px);
	justify-content: var(--predictor-justify, center);
	width: 100%;
}

.predictor-countdown__unit {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	min-width: 3.5rem;
}

.predictor-countdown__value {
	order: 1;
	color: var(--predictor-value-color, #1e1e1e);
	background: var(--predictor-value-bg, #f0f0f0);
	font-size: var(--predictor-value-font-size, 28px);
	font-family: var(--predictor-value-font-family, inherit);
	font-weight: var(--predictor-value-font-weight, 700);
	padding: var(--predictor-value-pt, 12px) var(--predictor-value-pr, 16px)
		var(--predictor-value-pb, 12px) var(--predictor-value-pl, 16px);
	border-width: var(--predictor-value-bw, 0);
	border-style: solid;
	border-color: var(--predictor-value-bc, #ccc);
	border-radius: var(--predictor-value-br, 8px);
	line-height: 1.1;
	min-width: 2.5ch;
	box-sizing: border-box;
}

.predictor-countdown__label {
	order: 2;
	margin-top: 0.4rem;
	color: var(--predictor-label-color, #666);
	font-size: var(--predictor-label-font-size, 14px);
	font-family: var(--predictor-label-font-family, inherit);
	font-weight: var(--predictor-label-font-weight, 600);
	line-height: 1.2;
}