/* ════════════════════════════════════════════════════
 * iDigital Flip Counter — shared shell
 * ════════════════════════════════════════════════════ */

.iddd-flip-counter {
	/* Defaults — dark flip-clock look (override from Elementor) */
	--iddd-fc-digit-color: #f5f5f5;
	--iddd-fc-card-bg: #1f1f1f;
	--iddd-fc-card-bg-bottom: #161616;
	--iddd-fc-card-border: rgba(255, 255, 255, 0.06);
	--iddd-fc-card-shadow: 0 14px 30px rgba(0, 0, 0, 0.45);
	--iddd-fc-hinge: rgba(0, 0, 0, 0.85);
	--iddd-fc-digit-gap: 0.28em;
	--iddd-fc-card-radius: 0.1em;
	--iddd-fc-card-height: 1.6em; /* relative to font-size */
	--iddd-fc-card-width: 1.05em; /* relative to font-size */
	--iddd-fc-flip-ms: 600ms;
	--iddd-fc-skew-ms: 700ms;
	--iddd-fc-font-size: 3em; /* base font-size for em units */
	--iddd-fc-sweep-color: #ff3b3b;
	--iddd-fc-reel-glow: rgba(255, 255, 255, 0.12);
	--iddd-fc-affix-color: #f5f5f5;
	--iddd-fc-affix-font-size: 0.55em;
	--iddd-fc-affix-gap: 0.4em;
	--iddd-fc-sep-color: #f5f5f5;

	display: block;
	line-height: 1.2;
	font-size: var(--iddd-fc-font-size);
}

.iddd-flip-counter__title {
	font-size: 0.3em;
	font-weight: 600;
	opacity: 0.85;
	margin-bottom: 0.8em;
	letter-spacing: 0.02em;
}

.iddd-flip-counter__row {
	display: inline-flex;
	align-items: center;
	justify-content: inherit;
	flex-wrap: wrap;
	gap: var(--iddd-fc-affix-gap, 0.4em);
}

.iddd-flip-counter__prefix,
.iddd-flip-counter__suffix {
	color: var(--iddd-fc-affix-color, var(--iddd-fc-digit-color));
	font-weight: 700;
	opacity: 0.9;
	font-size: var(--iddd-fc-affix-font-size, 0.55em);
	line-height: 1;
	align-self: center;
}

.iddd-flip-counter__digits {
	display: inline-flex;
	align-items: center;
	direction: ltr; /* Ensure LTR for numbers */
}

/* Spacing between digit tiles (no flex `gap` so the separator can be
 * tighter than the inter-digit spacing). */
.iddd-flip-counter__digits > * + * {
	margin-inline-start: var(--iddd-fc-digit-gap);
}

/* Tighten the space on both sides of the thousands separator so the
 * comma sits close to its neighbouring digits instead of looking like
 * a wide empty gap. */
.iddd-flip-counter__digits > * + .iddd-flip-counter__sep,
.iddd-flip-counter__digits > .iddd-flip-counter__sep + * {
	margin-inline-start: calc(var(--iddd-fc-digit-gap) * 0.2);
}

.iddd-flip-counter__sep {
	color: var(--iddd-fc-sep-color, var(--iddd-fc-digit-color));
	opacity: 0.85;
	font-weight: 800;
	line-height: 1;
	font-size: 0.55em;
	user-select: none;
	align-self: flex-end;
	padding-bottom: 0.18em;
}

.iddd-flip-counter__fallback {
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	color: var(--iddd-fc-digit-color);
}

/* Shared digit-card base */
.iddd-fc-digit {
	position: relative;
	width: var(--iddd-fc-card-width);
	height: var(--iddd-fc-card-height);
	flex: 0 0 auto;
	border-radius: var(--iddd-fc-card-radius);
	box-shadow: var(--iddd-fc-card-shadow);
	background: var(--iddd-fc-card-bg);
	border: 1px solid var(--iddd-fc-card-border);
	box-sizing: border-box;
	overflow: hidden;
}

/* ════════════════════════════════════════════════════
 * Effect 1 — Flip Clock (split-flap, jerrylow style)
 * 4 layers per digit:
 *   static-top    → NEW top (revealed when flap-top falls)
 *   static-bottom → OLD bottom (covered by flap-bottom until it rises)
 *   flap-top      → OLD top, hinged at bottom, falls 0 → -90
 *   flap-bottom   → NEW bottom, hinged at top, rises 90 → 0
 *
 * Each half-container is overflow:hidden & half-height.
 * The inner span is the FULL card height (200% of container),
 * with line-height = card height, so the digit glyph is
 * vertically centered on the card mid-line. The top container
 * clips to show the upper half of the glyph; the bottom
 * container clips to show the lower half. They meet at the hinge.
 * ════════════════════════════════════════════════════ */

.iddd-fc-digit--flip {
	perspective: 600px;
	overflow: visible; /* flaps rotate in 3D, must not clip */
}

.iddd-fc-digit--flip .iddd-fc-digit__static-top,
.iddd-fc-digit--flip .iddd-fc-digit__static-bottom,
.iddd-fc-digit--flip .iddd-fc-digit__flap-top,
.iddd-fc-digit--flip .iddd-fc-digit__flap-bottom {
	position: absolute;
	left: 0;
	width: 100%;
	height: 50%;
	overflow: hidden;
	background: var(--iddd-fc-card-bg);
	color: var(--iddd-fc-digit-color);
	backface-visibility: hidden;
	box-sizing: border-box;
}

.iddd-fc-digit--flip .iddd-fc-digit__static-top,
.iddd-fc-digit--flip .iddd-fc-digit__flap-top {
	top: 0;
	border-radius: var(--iddd-fc-card-radius) var(--iddd-fc-card-radius) 0 0;
	border-bottom: none;
	background: linear-gradient(180deg, var(--iddd-fc-card-bg) 0%, var(--iddd-fc-card-bg) 78%, rgba(0, 0, 0, 0.28) 100%);
	box-shadow: inset 0 0 0.5em rgba(0, 0, 0, 0.45);
}

.iddd-fc-digit--flip .iddd-fc-digit__static-bottom,
.iddd-fc-digit--flip .iddd-fc-digit__flap-bottom {
	bottom: 0;
	border-radius: 0 0 var(--iddd-fc-card-radius) var(--iddd-fc-card-radius);
	border-top: none;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, var(--iddd-fc-card-bg-bottom) 28%, var(--iddd-fc-card-bg-bottom) 100%);
	box-shadow: inset 0 0 0.5em rgba(0, 0, 0, 0.5);
}

/* The digit span — fills the FULL card height (200% of half-container),
 * line-height = card height so the glyph is centered on the mid-line. */
.iddd-fc-digit--flip .iddd-fc-digit__static-top span,
.iddd-fc-digit--flip .iddd-fc-digit__static-bottom span,
.iddd-fc-digit--flip .iddd-fc-digit__flap-top span,
.iddd-fc-digit--flip .iddd-fc-digit__flap-bottom span {
	position: absolute;
	left: 0;
	width: 100%;
	height: 200%; /* = full card height */
	display: flex;
	align-items: center; /* glyph centered vertically in the span → sits on mid-line */
	justify-content: center;
	font-size: calc(var(--iddd-fc-card-height) * 0.78);
	line-height: var(--iddd-fc-card-height); /* text-box = card height → glyph centered on hinge */
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	text-shadow: 0 0.04em 0.08em rgba(0, 0, 0, 0.55);
	box-sizing: border-box;
	padding: 0 0.02em;
}

/* Top span anchored to the top of its half-container */
.iddd-fc-digit--flip .iddd-fc-digit__static-top span,
.iddd-fc-digit--flip .iddd-fc-digit__flap-top span {
	top: 0;
}

/* Bottom span anchored to the bottom of its half-container.
 * Because the span is 200% (= full card height) and anchored at
 * bottom:0 of the lower half, it occupies 0..100% of the card —
 * same span as the top one, so the glyph aligns perfectly. */
.iddd-fc-digit--flip .iddd-fc-digit__static-bottom span,
.iddd-fc-digit--flip .iddd-fc-digit__flap-bottom span {
	bottom: 0;
}

/* Hinge line across the middle */
.iddd-fc-digit--flip::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	height: 0.04em;
	background: var(--iddd-fc-hinge);
	transform: translateY(-50%);
	z-index: 6;
	pointer-events: none;
	box-shadow: 0 0.03em 0.1em rgba(0, 0, 0, 0.6);
}

/* z-index stacking — animated flaps above statics */
.iddd-fc-digit--flip .iddd-fc-digit__static-top    { z-index: 1; }
.iddd-fc-digit--flip .iddd-fc-digit__static-bottom { z-index: 1; }
.iddd-fc-digit--flip .iddd-fc-digit__flap-top    { z-index: 3; transform-origin: bottom center; }
.iddd-fc-digit--flip .iddd-fc-digit__flap-bottom { z-index: 2; transform-origin: top center; }

/* Falling top flap: 0 → -90deg (first half) */
.iddd-fc-digit--flip.is-flipping .iddd-fc-digit__flap-top {
	animation: idddFlipFall var(--iddd-fc-flip-ms) cubic-bezier(0.55, 0, 0.7, 0.4) forwards;
}

/* Rising bottom flap: 90 → 0deg (second half, delayed) */
.iddd-fc-digit--flip.is-flipping .iddd-fc-digit__flap-bottom {
	transform: rotateX(90deg);
	animation: idddFlipRise calc(var(--iddd-fc-flip-ms) * 0.9) calc(var(--iddd-fc-flip-ms) / 2) cubic-bezier(0.3, 0.6, 0.4, 1) forwards;
}

/* Shadow sweeping across the falling flap for depth */
.iddd-fc-digit--flip.is-flipping .iddd-fc-digit__flap-top::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 100%);
	opacity: 0;
	animation: idddFlipShade var(--iddd-fc-flip-ms) ease-out forwards;
	pointer-events: none;
}

@keyframes idddFlipFall {
	0%   { transform: rotateX(0deg); }
	100% { transform: rotateX(-90deg); }
}

@keyframes idddFlipRise {
	0%   { transform: rotateX(90deg); }
	100% { transform: rotateX(0deg); }
}

@keyframes idddFlipShade {
	0%   { opacity: 0; }
	50%  { opacity: 1; }
	100% { opacity: 0; }
}

/* ════════════════════════════════════════════════════
 * Effect 2 — Skew & Sweep (blazicke style)
 * Two stacked layers per digit:
 *   current → NEW value (revealed underneath)
 *   leaving → OLD value, skews + slides out + fades
 * A glowing diagonal sweep line rotates across during the change.
 * ════════════════════════════════════════════════════ */

.iddd-fc-digit--skew .iddd-fc-skew__current,
.iddd-fc-digit--skew .iddd-fc-skew__leaving {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	box-sizing: border-box;
}

.iddd-fc-digit--skew .iddd-fc-skew__current {
	z-index: 1;
	background: linear-gradient(180deg, var(--iddd-fc-card-bg) 0%, var(--iddd-fc-card-bg-bottom) 100%);
}

.iddd-fc-digit--skew .iddd-fc-skew__current span,
.iddd-fc-digit--skew .iddd-fc-skew__leaving span {
	font-size: calc(var(--iddd-fc-card-height) * 0.78);
	line-height: 1;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	color: var(--iddd-fc-digit-color);
	text-shadow: 0 0.04em 0.1em rgba(0, 0, 0, 0.5);
}

/* Leaving layer — sits on top, will skew & slide out on change */
.iddd-fc-digit--skew .iddd-fc-skew__leaving {
	z-index: 4;
	background: linear-gradient(180deg, var(--iddd-fc-card-bg) 0%, var(--iddd-fc-card-bg-bottom) 100%);
	border-radius: var(--iddd-fc-card-radius);
	transform: skewY(0deg) translateX(0);
	transform-origin: center;
	will-change: transform, opacity;
}

.iddd-fc-digit--skew .iddd-fc-skew__leaving.is-leaving {
	animation: idddSkewOut var(--iddd-fc-skew-ms) cubic-bezier(0.7, 0, 0.3, 1) forwards;
}

@keyframes idddSkewOut {
	0%   { opacity: 1; transform: skewY(0deg)    translateX(0); }
	35%  { opacity: 1; transform: skewY(-14deg)  translateX(18%); }
	100% { opacity: 0; transform: skewY(-26deg)  translateX(120%); }
}

/* Glowing diagonal sweep line */
.iddd-fc-digit--skew .iddd-fc-skew__sweep {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 140%;
	height: 0.06em;
	background: var(--iddd-fc-sweep-color);
	box-shadow: 0 0 0.5em var(--iddd-fc-sweep-color), 0 0 1.2em var(--iddd-fc-sweep-color);
	transform: translate(-50%, -50%) rotate(-90deg) scaleX(0);
	transform-origin: center;
	z-index: 6;
	pointer-events: none;
	opacity: 0;
}

.iddd-fc-digit--skew.is-sweeping .iddd-fc-skew__sweep {
	animation: idddSweepLine var(--iddd-fc-skew-ms) cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

@keyframes idddSweepLine {
	0%   { opacity: 0; transform: translate(-50%, -50%) rotate(-90deg) scaleX(0); }
	20%  { opacity: 1; transform: translate(-50%, -50%) rotate(-50deg) scaleX(0.6); }
	55%  { opacity: 1; transform: translate(-50%, -50%) rotate(20deg)  scaleX(0.9); }
	100% { opacity: 0; transform: translate(-50%, -50%) rotate(90deg)  scaleX(0); }
}

/* Subtle center hinge line, decorative */
.iddd-fc-digit--skew .iddd-fc-skew__hinge {
	position: absolute;
	top: 50%;
	left: 6%;
	right: 6%;
	height: 0;
	border-top: 0.015em solid rgba(255, 255, 255, 0.08);
	border-bottom: 0.015em solid rgba(0, 0, 0, 0.45);
	transform: translateY(-50%);
	z-index: 5;
	pointer-events: none;
}

/* ════════════════════════════════════════════════════
 * Effect 3 — Slot Reel (trendy slot-machine spin)
 * A vertical strip of 0..9 (duplicated) translates Y to
 * bring the target digit into the visible window. On change
 * the strip spins through a full loop + the delta, then
 * settles with a slight overshoot (cubic-bezier bounce).
 * ════════════════════════════════════════════════════ */

.iddd-fc-digit--reel {
	overflow: hidden;
	background: linear-gradient(180deg, var(--iddd-fc-card-bg) 0%, var(--iddd-fc-card-bg-bottom) 100%);
}

.iddd-fc-digit--reel .iddd-fc-reel__strip {
	display: flex;
	flex-direction: column;
	width: 100%;
	will-change: transform;
}

.iddd-fc-digit--reel .iddd-fc-reel__cell {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: var(--iddd-fc-card-height); /* each cell = one card height */
	font-size: calc(var(--iddd-fc-card-height) * 0.78);
	line-height: 1;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	color: var(--iddd-fc-digit-color);
	text-shadow: 0 0.04em 0.1em rgba(0, 0, 0, 0.5);
	box-sizing: border-box;
	flex: 0 0 auto;
}

/* Top & bottom fade masks so the reel looks like it emerges from shadow */
.iddd-fc-digit--reel::before,
.iddd-fc-digit--reel::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	height: 22%;
	z-index: 5;
	pointer-events: none;
}

.iddd-fc-digit--reel::before {
	top: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 100%);
}

.iddd-fc-digit--reel::after {
	bottom: 0;
	background: linear-gradient(0deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 100%);
}

/* Center accent glow line (the "window" of the slot machine) */
.iddd-fc-digit--reel .iddd-fc-reel__window {
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: 0.04em;
	background: var(--iddd-fc-reel-glow);
	transform: translateY(-50%);
	z-index: 6;
	pointer-events: none;
}

/* Reduce motion accessibility */
@media (prefers-reduced-motion: reduce) {
	.iddd-fc-digit--flip.is-flipping .iddd-fc-digit__flap-top,
	.iddd-fc-digit--flip.is-flipping .iddd-fc-digit__flap-bottom,
	.iddd-fc-digit--flip.is-flipping .iddd-fc-digit__flap-top::after,
	.iddd-fc-digit--skew.is-sweeping .iddd-fc-skew__sweep,
	.iddd-fc-digit--skew .iddd-fc-skew__leaving.is-leaving,
	.iddd-fc-digit--reel .iddd-fc-reel__strip {
		animation: none !important;
		transition: none !important;
		transform: none !important;
		opacity: 1 !important;
	}
}