/**
 * Frontend and Editor styles for Flip Countdown Timer Block
 */

.flip-countdown-wrapper {
	--digit-size: 80px;
	--card-bg: #333;
	--card-text: #fff;
	--label-color: #fff;
}

.flip-countdown-container {
	display: flex;
	gap: 2rem;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	padding: 2rem 1rem;
}

.flip-countdown-unit {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
}

.countdown-digit {
	width: var(--digit-size);
	height: calc(var(--digit-size) * 0.2);
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	color: var(--card-text);
	font-size: calc(var(--digit-size) * 0.6);
	font-family: 'Courier New', monospace;
	font-weight: bold;
	border-radius: 6px;
	box-shadow: none;
	transition: transform 0.1s ease;
}

.countdown-label {
	font-size: calc(var(--digit-size) * 0.2);
	text-transform: uppercase;
	letter-spacing: 2px;
	color: var(--label-color);
	font-weight: 600;
	margin-top: 0.5rem;
}

/* Responsive */
@media (max-width: 768px) {
	.flip-countdown-container {
		gap: 1rem;
	}
	
	.flip-countdown-wrapper {
		--digit-size: 60px;
	}
}

@media (max-width: 480px) {
	.flip-countdown-wrapper {
		--digit-size: 50px;
	}
	
	.flip-countdown-container {
		gap: 0.5rem;
		padding: 1rem 0.5rem;
	}
}