/**
 * MMX Countdown Timer — Component Styles
 * Loaded into Shadow DOM via styleResourceCodes.
 *
 * Custom Properties (set on :host or a parent selector to theme):
 *   --mmx-countdown-timer__digit-bg          Digit tile background  (default: rgba(0,0,0,.07))
 *   --mmx-countdown-timer__digit-color        Digit tile text color  (default: inherit)
 *   --mmx-countdown-timer__digit-radius       Tile border radius      (default: 0.5rem)
 *   --mmx-countdown-timer__digit-min-width    Tile minimum width      (default: 3.5rem)
 *   --mmx-countdown-timer__sep-color          Separator color         (default: currentColor)
 *   --mmx-countdown-timer__unit-color         Unit label color        (default: currentColor)
 *   --mmx-countdown-timer__gap                Gap between segments    (default: 0.5rem)
 */

/* ── Host ──────────────────────────────────────────────────────────────── */

:host {
	display: block;
	box-sizing: border-box;
}

/* ── Wrapper ───────────────────────────────────────────────────────────── */

.mmx-countdown-timer {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.5rem;
	padding: 2rem 1.5rem;
}

/* ── Label ─────────────────────────────────────────────────────────────── */

.mmx-countdown-timer__label {
	width: 100%;
}

.mmx-countdown-timer__label-text {
	margin: 0;
}

/* ── Segment Row ───────────────────────────────────────────────────────── */

.mmx-countdown-timer__segments {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: var(--mmx-countdown-timer__gap, 0.5rem);
	flex-wrap: wrap;
}

/* ── Individual Segment (tile + unit label) ────────────────────────────── */

.mmx-countdown-timer__segment {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.4rem;
}

/* ── Digit Tile ────────────────────────────────────────────────────────── */

.mmx-countdown-timer__digit {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: var(--mmx-countdown-timer__digit-min-width, 3.5rem);
	padding: 0.625rem 0.875rem;
	border-radius: var(--mmx-countdown-timer__digit-radius, 0.5rem);
	background: var(--mmx-countdown-timer__digit-bg, rgba(0, 0, 0, 0.07));
	color: var(--mmx-countdown-timer__digit-color, inherit);

	/* Typography */
	font-size: clamp(1.75rem, 5vw, 3.25rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.03em;
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum";

	/* Smooth digit flip feel */
	transition: opacity 0.08s ease;
	will-change: opacity;
}

/* Subtle flash on value change, driven via JS class addition
   (the JS doesn't add a class, so this is for future extensibility) */
.mmx-countdown-timer__digit.is-changing {
	opacity: 0.6;
}

/* ── Unit Label ────────────────────────────────────────────────────────── */

.mmx-countdown-timer__unit {
	font-size: 0.6875rem;        /* 11px */
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	line-height: 1;
	color: var(--mmx-countdown-timer__unit-color, currentColor);
	opacity: 0.6;
	white-space: nowrap;
}

/* ── Colon Separator ───────────────────────────────────────────────────── */

.mmx-countdown-timer__sep {
	font-size: clamp(1.75rem, 5vw, 3.25rem);
	font-weight: 700;
	line-height: 1;
	padding: 0.625rem 0;      /* aligns vertically with digit tiles */
	color: var(--mmx-countdown-timer__sep-color, currentColor);
	opacity: 0.3;
	user-select: none;
	animation: mmx-countdown-timer--blink 1s ease-in-out infinite;
}

@keyframes mmx-countdown-timer--blink {
	0%,  100% { opacity: 0.30; }
	50%        { opacity: 0.10; }
}

/* ── Expired Message ───────────────────────────────────────────────────── */

.mmx-countdown-timer__expired {
	font-size: 1rem;
	opacity: 0.65;
	font-style: italic;
}

/* ── CTA Button ─────────────────────────────────────────────────────────── */

.mmx-countdown-timer__cta {
	display: flex;
	justify-content: center;
}

.mmx-countdown-timer__cta-link {
	display: inline-flex;
	text-decoration: none;
	color: inherit;
}

/* ── Responsive ────────────────────────────────────────────────────────── */

@media (max-width: 480px) {
	.mmx-countdown-timer {
		padding: 1.25rem 1rem;
		gap: 1rem;
	}

	.mmx-countdown-timer__digit {
		min-width: 2.75rem;
		padding: 0.5rem 0.625rem;
	}

	.mmx-countdown-timer__unit {
		font-size: 0.625rem;
	}
}

/* ── Focus Accessibility ────────────────────────────────────────────────── */

:host(:focus-visible) {
	outline: 2px solid var(--theme-color-focus, #005fcc);
	outline-offset: 2px;
}