/* MD Vue - Shared styles for Vue components */

/* Countdown timer styles */
.countdown-timer {
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--md-blue);
	-webkit-text-fill-color: var(--md-blue);
	background-clip: unset;
	-webkit-background-clip: unset;
}

/* Countdown warning state (≤ 30 seconds) */
.countdown-timer.countdown-warning {
	color: var(--md-orange) !important;
	-webkit-text-fill-color: var(--md-orange) !important;
	background-clip: unset !important;
	-webkit-background-clip: unset !important;
}

/* Countdown critical state (≤ 15 seconds) - with pulse animation */
.countdown-timer.countdown-critical-pulse {
	color: var(--md-orange) !important;
	-webkit-text-fill-color: var(--md-orange) !important;
	background-clip: unset !important;
	-webkit-background-clip: unset !important;
	animation: countdownPulse 1s ease-in-out infinite;
}

/* Countdown pulse animation */
@keyframes countdownPulse {
	0%, 100% {
		opacity: 1;
		transform: scale(1);
	}
	50% {
		opacity: 0.8;
		transform: scale(1.20);
	}
}