/**
 * Flavors Number Odometer - base layout & rolling-reel mechanics.
 *
 * Per-instance values (typography, colors, digit-box background/border/radius/
 * padding/shadow, gaps, label spacing, alignment) are injected by Elementor
 * control `selectors`, so this file stays static and HTTP-cacheable (no
 * per-render inline <style>).
 *
 * Mechanics: each digit is a fixed-height "window" (.flavor-odometer-digit).
 * A static glyph (.flavor-odometer-static) shows the FINAL digit and is the
 * no-JS / reduced-motion fallback - it is always correct on its own. When the
 * JS enhances the widget it adds .flavor-od-ready to .flavor-odometer, which
 * hides the static glyph and reveals .flavor-odometer-reel (a column 0-9) that
 * is translated via --flavor-od-final (0..9) to land on the target digit. The
 * roll itself is driven by a CSS transition the JS toggles.
 */

.flavor-odometer-wrap {
	display: flex;
	flex-direction: column;
}

.flavor-odometer-number {
	display: inline-flex;
	align-items: baseline;
	margin: 0;
	line-height: 1.1;
}

.flavor-odometer {
	display: inline-flex;
	align-items: stretch;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum";
}

/* One digit window. Height tracks the font's line height (1em) so the reel
   steps are exactly one glyph tall. */
.flavor-odometer-digit {
	position: relative;
	display: inline-block;
	overflow: hidden;
	height: 1em;
	line-height: 1;
	text-align: center;
	vertical-align: baseline;
}

/* Static fallback glyph (always the final digit). */
.flavor-odometer-static {
	display: block;
	height: 1em;
	line-height: 1;
}

/* The rolling reel: a vertical stack of 0-9, hidden until JS is ready. */
.flavor-odometer-reel {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	display: none;
	flex-direction: column;
	will-change: transform;
	transform: translateY(calc(var(--flavor-od-final, 0) * -1em));
}

.flavor-odometer-reel.flavor-od-rolling {
	transition: transform var(--flavor-od-duration, 2000ms) cubic-bezier(0.16, 1, 0.3, 1);
}

.flavor-odometer-num {
	display: block;
	height: 1em;
	line-height: 1;
}

/* Enhanced state: hide static glyph, reveal reels. */
.flavor-odometer.flavor-od-ready .flavor-odometer-static {
	visibility: hidden;
}

.flavor-odometer.flavor-od-ready .flavor-odometer-reel {
	display: flex;
}

/* Separators (comma / dot) - plain glyphs, no window clipping. */
.flavor-odometer-sep {
	display: inline-block;
	line-height: 1;
}

.flavor-odometer-prefix,
.flavor-odometer-suffix {
	line-height: 1.1;
}

.flavor-odometer-label {
	display: block;
	line-height: 1.4;
}

@media (prefers-reduced-motion: reduce) {
	.flavor-odometer-reel.flavor-od-rolling {
		transition: none;
	}
}

/* Screen-reader copy of the final value (the reels are aria-hidden). */
.flavor-odometer-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}