/**
 * Countdown Timer & Instant Win Badge — Premium Styles
 *
 * CSS-only variants with animations, 3D transforms, shimmer effects,
 * glassmorphism, and hover micro-interactions. GPU-accelerated using
 * only transform/opacity. Respects prefers-reduced-motion.
 *
 * @package RaffleForWooCommercePro
 * @since   1.0.0
 */

/* ==========================================================================
   COUNTDOWN STYLES
   ========================================================================== */

/* --------------------------------------------------------------------------
   Pill — Rounded pill segments, modern feel
   -------------------------------------------------------------------------- */

.rfwc-countdown--pill .rfwc-countdown {
	gap: 8px;
}

.rfwc-countdown--pill .rfwc-countdown-item {
	min-width: 64px;
	padding: 10px 14px 8px;
	background: var(--rfwc-accent-bg-medium);
	border: 1px solid var(--rfwc-accent-border-solid);
	border-radius: 999px;
	box-shadow: none;
	transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.rfwc-countdown--pill .rfwc-countdown-item:hover {
	transform: translateY(-2px);
}

.rfwc-countdown--pill .rfwc-countdown-value {
	font-size: 1.5em;
	font-weight: 800;
	color: var(--rfwc-accent-dark);
}

.rfwc-countdown--pill .rfwc-countdown-unit {
	font-size: 0.65em;
	color: var(--rfwc-accent);
	margin-top: 2px;
}

/* --------------------------------------------------------------------------
   Minimal — Text-only, no boxes, typography-driven
   -------------------------------------------------------------------------- */

.rfwc-countdown--minimal .rfwc-countdown {
	gap: 20px;
}

.rfwc-countdown--minimal .rfwc-countdown-item {
	min-width: auto;
	padding: 0;
	background: none;
	border-radius: 0;
	box-shadow: none;
}

.rfwc-countdown--minimal .rfwc-countdown-value {
	font-size: 2.4em;
	font-weight: 300;
	color: var(--rfwc-accent-dark);
	letter-spacing: -0.03em;
	transition: color 0.2s ease;
}

.rfwc-countdown--minimal .rfwc-countdown-unit {
	font-size: 0.65em;
	font-weight: 600;
	color: #aaa;
	margin-top: 4px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.rfwc-countdown--minimal .rfwc-countdown-label {
	font-weight: 400;
	font-size: 0.85em;
	color: #999;
	text-transform: none;
	letter-spacing: 0;
}

/* --------------------------------------------------------------------------
   Underline — Bottom-accent-bar, professional
   -------------------------------------------------------------------------- */

.rfwc-countdown--underline .rfwc-countdown {
	gap: 16px;
}

.rfwc-countdown--underline .rfwc-countdown-item {
	min-width: 56px;
	padding: 8px 10px 10px;
	background: none;
	border-radius: 0;
	box-shadow: none;
	position: relative;
}

.rfwc-countdown--underline .rfwc-countdown-item::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 0;
	height: 3px;
	background: var(--rfwc-accent);
	border-radius: 2px;
	transform: translateX(-50%);
	transition: width 0.3s cubic-bezier(0.22, 1, 0.36, 1);
	width: 100%;
}

.rfwc-countdown--underline .rfwc-countdown-item:hover::after {
	width: 120%;
}

.rfwc-countdown--underline .rfwc-countdown-value {
	font-size: 2em;
	font-weight: 700;
	color: #222;
}

.rfwc-countdown--underline .rfwc-countdown-unit {
	font-size: 0.65em;
	font-weight: 500;
	color: #777;
	margin-top: 6px;
}

/* --------------------------------------------------------------------------
   Neon Glow — Dark cards with bright pulsing accent glow + glowing text
   -------------------------------------------------------------------------- */

.rfwc-countdown--neon .rfwc-countdown {
	gap: 10px;
}

.rfwc-countdown--neon .rfwc-countdown-item {
	min-width: 68px;
	padding: 16px 10px 12px;
	background: linear-gradient(160deg, #1a1a2e, #0d0d1a);
	border: 1px solid rgba(var(--rfwc-accent-rgb), 0.4);
	border-radius: 12px;
	box-shadow:
		0 0 8px rgba(var(--rfwc-accent-rgb), 0.25),
		0 0 24px rgba(var(--rfwc-accent-rgb), 0.15),
		inset 0 1px 0 rgba(var(--rfwc-accent-rgb), 0.1);
	position: relative;
	overflow: hidden;
	animation: rfwc-neon-pulse 2.5s ease-in-out infinite;
	transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.rfwc-countdown--neon .rfwc-countdown-item:hover {
	transform: translateY(-3px) scale(1.04);
}

.rfwc-countdown--neon .rfwc-countdown-item::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--rfwc-accent-light);
	box-shadow:
		0 0 8px var(--rfwc-accent),
		0 0 20px var(--rfwc-accent);
	border-radius: 3px;
}

.rfwc-countdown--neon .rfwc-countdown-value {
	font-size: 2em;
	font-weight: 700;
	color: #fff;
	text-shadow:
		0 0 10px rgba(var(--rfwc-accent-rgb), 0.8),
		0 0 30px rgba(var(--rfwc-accent-rgb), 0.5),
		0 0 60px rgba(var(--rfwc-accent-rgb), 0.25);
	position: relative;
}

.rfwc-countdown--neon .rfwc-countdown-unit {
	font-size: 0.6em;
	color: var(--rfwc-accent-light);
	margin-top: 6px;
	letter-spacing: 0.1em;
	text-shadow: 0 0 8px rgba(var(--rfwc-accent-rgb), 0.4);
	position: relative;
}

@keyframes rfwc-neon-pulse {
	0%,
	100% {
		box-shadow:
			0 0 8px rgba(var(--rfwc-accent-rgb), 0.25),
			0 0 24px rgba(var(--rfwc-accent-rgb), 0.15),
			inset 0 1px 0 rgba(var(--rfwc-accent-rgb), 0.1);
	}
	50% {
		box-shadow:
			0 0 14px rgba(var(--rfwc-accent-rgb), 0.5),
			0 0 40px rgba(var(--rfwc-accent-rgb), 0.3),
			0 0 80px rgba(var(--rfwc-accent-rgb), 0.1),
			inset 0 1px 0 rgba(var(--rfwc-accent-rgb), 0.2);
	}
}

/* --------------------------------------------------------------------------
   Gradient — Animated multi-color shifting gradient background
   -------------------------------------------------------------------------- */

.rfwc-countdown--gradient .rfwc-countdown {
	gap: 10px;
}

.rfwc-countdown--gradient .rfwc-countdown-item {
	min-width: 68px;
	padding: 16px 10px 12px;
	background: linear-gradient(
		135deg,
		var(--rfwc-accent),
		#e040a0,
		#ff6b6b,
		var(--rfwc-accent-light),
		var(--rfwc-accent)
	);
	background-size: 300% 300%;
	border: none;
	border-radius: 12px;
	box-shadow: 0 4px 20px rgba(var(--rfwc-accent-rgb), 0.35);
	position: relative;
	overflow: hidden;
	animation: rfwc-gradient-shift 6s ease infinite;
	transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.rfwc-countdown--gradient .rfwc-countdown-item:hover {
	transform: translateY(-3px) scale(1.03);
	box-shadow: 0 8px 32px rgba(var(--rfwc-accent-rgb), 0.5);
}

.rfwc-countdown--gradient .rfwc-countdown-value {
	font-size: 1.9em;
	font-weight: 800;
	color: #fff;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
	position: relative;
}

.rfwc-countdown--gradient .rfwc-countdown-unit {
	font-size: 0.6em;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.9);
	margin-top: 4px;
	letter-spacing: 0.08em;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
	position: relative;
}

@keyframes rfwc-gradient-shift {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

/* --------------------------------------------------------------------------
   Glass — Accent-tinted frosted glass with visible gradient layer
   -------------------------------------------------------------------------- */

.rfwc-countdown--glass .rfwc-countdown {
	gap: 10px;
}

.rfwc-countdown--glass .rfwc-countdown-item {
	min-width: 68px;
	padding: 16px 10px 12px;
	background:
		linear-gradient(
			135deg,
			rgba(var(--rfwc-accent-rgb), 0.12),
			rgba(var(--rfwc-accent-rgb), 0.04)
		);
	-webkit-backdrop-filter: blur(16px) saturate(1.4);
	backdrop-filter: blur(16px) saturate(1.4);
	border: 1px solid rgba(var(--rfwc-accent-rgb), 0.2);
	border-top-color: rgba(var(--rfwc-accent-rgb), 0.35);
	border-left-color: rgba(var(--rfwc-accent-rgb), 0.3);
	border-radius: 14px;
	box-shadow:
		0 4px 24px rgba(var(--rfwc-accent-rgb), 0.1),
		0 1px 2px rgba(0, 0, 0, 0.06),
		inset 0 1px 0 rgba(255, 255, 255, 0.5),
		inset 0 -1px 0 rgba(0, 0, 0, 0.03);
	position: relative;
	overflow: hidden;
	transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.rfwc-countdown--glass .rfwc-countdown-item:hover {
	transform: translateY(-2px);
	box-shadow:
		0 8px 32px rgba(var(--rfwc-accent-rgb), 0.18),
		0 2px 4px rgba(0, 0, 0, 0.06),
		inset 0 1px 0 rgba(255, 255, 255, 0.6),
		inset 0 -1px 0 rgba(0, 0, 0, 0.03);
}

.rfwc-countdown--glass .rfwc-countdown-item::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 50%;
	background: linear-gradient(
		180deg,
		rgba(255, 255, 255, 0.25),
		transparent
	);
	border-radius: 14px 14px 0 0;
	pointer-events: none;
}

.rfwc-countdown--glass .rfwc-countdown-value {
	font-size: 1.9em;
	font-weight: 700;
	color: var(--rfwc-accent-darker);
	position: relative;
}

.rfwc-countdown--glass .rfwc-countdown-unit {
	font-size: 0.6em;
	font-weight: 600;
	color: var(--rfwc-accent);
	margin-top: 4px;
	position: relative;
}

/* --------------------------------------------------------------------------
   Elegant — Refined with centered accent bars, serif-like feel
   -------------------------------------------------------------------------- */

.rfwc-countdown--elegant .rfwc-countdown-label {
	font-style: italic;
	color: #777;
	font-weight: 400;
	font-size: 0.9em;
	letter-spacing: 0.02em;
}

.rfwc-countdown--elegant .rfwc-countdown {
	gap: 6px;
}

.rfwc-countdown--elegant .rfwc-countdown-item {
	min-width: 72px;
	padding: 16px 10px 14px;
	background: #fff;
	border: 1px solid #e5e5e5;
	border-radius: 2px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
	position: relative;
	transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.rfwc-countdown--elegant .rfwc-countdown-item:hover {
	transform: translateY(-1px);
	box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08);
}

.rfwc-countdown--elegant .rfwc-countdown-item::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 20px;
	height: 2px;
	background: var(--rfwc-accent);
	transition: width 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.rfwc-countdown--elegant .rfwc-countdown-item:hover::after {
	width: 36px;
}

.rfwc-countdown--elegant .rfwc-countdown-value {
	font-size: 2em;
	font-weight: 400;
	color: #1a1a1a;
	letter-spacing: -0.03em;
}

.rfwc-countdown--elegant .rfwc-countdown-unit {
	font-size: 0.55em;
	font-weight: 400;
	color: #aaa;
	margin-top: 6px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Dark Contrast — Dark cards with center divider line
   -------------------------------------------------------------------------- */

.rfwc-countdown--dark .rfwc-countdown {
	gap: 8px;
	perspective: 600px;
}

.rfwc-countdown--dark .rfwc-countdown-item {
	min-width: 72px;
	padding: 16px 10px 12px;
	background: #1a1a1a;
	border: none;
	border-radius: 10px;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
	position: relative;
	overflow: hidden;
	transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.rfwc-countdown--dark .rfwc-countdown-item:hover {
	transform: translateY(-3px) rotateX(2deg);
}

.rfwc-countdown--dark .rfwc-countdown-item::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 4px;
	right: 4px;
	height: 1px;
	background: rgba(255, 255, 255, 0.07);
}

.rfwc-countdown--dark .rfwc-countdown-item::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 50%;
	background: rgba(255, 255, 255, 0.03);
	border-radius: 10px 10px 0 0;
}

.rfwc-countdown--dark .rfwc-countdown-value {
	font-size: 2.2em;
	font-weight: 800;
	color: #fff;
	position: relative;
	z-index: 1;
}

.rfwc-countdown--dark .rfwc-countdown-unit {
	font-size: 0.6em;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.4);
	margin-top: 6px;
	letter-spacing: 0.1em;
	position: relative;
	z-index: 1;
}

/* --------------------------------------------------------------------------
   Shadow Lift — Elevated cards with layered depth
   -------------------------------------------------------------------------- */

.rfwc-countdown--shadow .rfwc-countdown {
	gap: 12px;
}

.rfwc-countdown--shadow .rfwc-countdown-item {
	min-width: 72px;
	padding: 18px 12px 14px;
	background: #fff;
	border: none;
	border-radius: 14px;
	box-shadow:
		0 1px 2px rgba(0, 0, 0, 0.04),
		0 4px 8px rgba(0, 0, 0, 0.04),
		0 8px 16px rgba(0, 0, 0, 0.04),
		0 16px 32px rgba(0, 0, 0, 0.04);
	transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.rfwc-countdown--shadow .rfwc-countdown-item:hover {
	transform: translateY(-4px);
	box-shadow:
		0 2px 4px rgba(0, 0, 0, 0.04),
		0 8px 16px rgba(0, 0, 0, 0.06),
		0 16px 32px rgba(0, 0, 0, 0.06),
		0 32px 64px rgba(0, 0, 0, 0.06);
}

.rfwc-countdown--shadow .rfwc-countdown-value {
	font-size: 2em;
	font-weight: 800;
	background: linear-gradient(135deg, var(--rfwc-accent), var(--rfwc-accent-dark));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.rfwc-countdown--shadow .rfwc-countdown-unit {
	font-size: 0.6em;
	font-weight: 600;
	color: #bbb;
	margin-top: 6px;
	letter-spacing: 0.06em;
}

/* --------------------------------------------------------------------------
   Stacked — Vertical bars with accent left-border
   -------------------------------------------------------------------------- */

.rfwc-countdown--stacked .rfwc-countdown {
	flex-direction: column;
	gap: 6px;
	max-width: 300px;
	margin: 0 auto;
}

.rfwc-countdown--stacked .rfwc-countdown-item {
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	min-width: 100%;
	padding: 10px 16px;
	background: var(--rfwc-accent-bg-light);
	border-left: 4px solid var(--rfwc-accent);
	border-radius: 0 8px 8px 0;
	box-shadow: none;
	transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1),
		border-left-width 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.rfwc-countdown--stacked .rfwc-countdown-item:hover {
	transform: translateX(4px);
}

.rfwc-countdown--stacked .rfwc-countdown-value {
	font-size: 1.6em;
	font-weight: 800;
	color: var(--rfwc-accent-dark);
	order: 2;
}

.rfwc-countdown--stacked .rfwc-countdown-unit {
	font-size: 0.8em;
	font-weight: 600;
	color: #666;
	order: 1;
	margin-top: 0;
}


/* --------------------------------------------------------------------------
   Neumorphism — Proper soft-UI with raised outer + pressed inner shadows
   -------------------------------------------------------------------------- */

.rfwc-countdown--neumorphism .rfwc-countdown {
	gap: 16px;
}

.rfwc-countdown--neumorphism .rfwc-countdown-item {
	min-width: 74px;
	padding: 18px 12px 14px;
	background: linear-gradient(145deg, #f0f0f0, #cacaca);
	border: none;
	border-radius: 20px;
	box-shadow:
		10px 10px 20px #bebebe,
		-10px -10px 20px #ffffff;
	transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.rfwc-countdown--neumorphism .rfwc-countdown-item:hover {
	transform: translateY(-2px);
	box-shadow:
		12px 12px 24px #b0b0b0,
		-12px -12px 24px #ffffff,
		inset 2px 2px 4px rgba(255, 255, 255, 0.4),
		inset -1px -1px 3px rgba(0, 0, 0, 0.05);
}

.rfwc-countdown--neumorphism .rfwc-countdown-value {
	font-size: 2em;
	font-weight: 800;
	color: #3a3a3a;
	text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.6);
}

.rfwc-countdown--neumorphism .rfwc-countdown-unit {
	font-size: 0.6em;
	font-weight: 700;
	color: #888;
	margin-top: 4px;
	letter-spacing: 0.06em;
	text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.5);
}

/* --------------------------------------------------------------------------
   Outline — Border-only cards, transparent bg, accent-colored numbers
   -------------------------------------------------------------------------- */

.rfwc-countdown--outline .rfwc-countdown {
	gap: 10px;
}

.rfwc-countdown--outline .rfwc-countdown-item {
	min-width: 68px;
	padding: 14px 10px 10px;
	background: transparent;
	border: 2px solid var(--rfwc-accent);
	border-radius: 12px;
	box-shadow: none;
	transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1),
		background-color 0.2s ease,
		box-shadow 0.2s ease;
}

.rfwc-countdown--outline .rfwc-countdown-item:hover {
	transform: translateY(-2px);
	background: var(--rfwc-accent-bg-light);
	box-shadow: 0 4px 16px rgba(var(--rfwc-accent-rgb), 0.15);
}

.rfwc-countdown--outline .rfwc-countdown-value {
	font-size: 2em;
	font-weight: 800;
	color: var(--rfwc-accent);
}

.rfwc-countdown--outline .rfwc-countdown-unit {
	font-size: 0.6em;
	font-weight: 600;
	color: var(--rfwc-accent-dark);
	margin-top: 4px;
	letter-spacing: 0.06em;
}

/* --------------------------------------------------------------------------
   Frosted Dark — Dark translucent glass with blur
   -------------------------------------------------------------------------- */

.rfwc-countdown--frosted-dark .rfwc-countdown {
	gap: 10px;
}

.rfwc-countdown--frosted-dark .rfwc-countdown-item {
	min-width: 68px;
	padding: 16px 10px 12px;
	background:
		linear-gradient(
			145deg,
			rgba(20, 20, 40, 0.85),
			rgba(10, 10, 25, 0.75)
		);
	-webkit-backdrop-filter: blur(16px) saturate(1.2);
	backdrop-filter: blur(16px) saturate(1.2);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-top-color: rgba(255, 255, 255, 0.15);
	border-left-color: rgba(255, 255, 255, 0.1);
	border-radius: 14px;
	box-shadow:
		0 4px 24px rgba(0, 0, 0, 0.3),
		inset 0 1px 0 rgba(255, 255, 255, 0.08);
	position: relative;
	overflow: hidden;
	transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.rfwc-countdown--frosted-dark .rfwc-countdown-item:hover {
	transform: translateY(-2px);
	box-shadow:
		0 8px 32px rgba(0, 0, 0, 0.4),
		inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.rfwc-countdown--frosted-dark .rfwc-countdown-item::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 50%;
	background: linear-gradient(
		180deg,
		rgba(255, 255, 255, 0.06),
		transparent
	);
	pointer-events: none;
}

.rfwc-countdown--frosted-dark .rfwc-countdown-value {
	font-size: 1.9em;
	font-weight: 700;
	color: #fff;
	position: relative;
}

.rfwc-countdown--frosted-dark .rfwc-countdown-unit {
	font-size: 0.6em;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.5);
	margin-top: 4px;
	letter-spacing: 0.08em;
	position: relative;
}

/* --------------------------------------------------------------------------
   Circular — Round cards
   -------------------------------------------------------------------------- */

.rfwc-countdown--circular .rfwc-countdown {
	gap: 12px;
}

.rfwc-countdown--circular .rfwc-countdown-item {
	min-width: 76px;
	width: 76px;
	height: 76px;
	padding: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: var(--rfwc-accent-bg-medium);
	border: 2px solid var(--rfwc-accent);
	border-radius: 50%;
	box-shadow: 0 2px 12px rgba(var(--rfwc-accent-rgb), 0.15);
	transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.rfwc-countdown--circular .rfwc-countdown-item:hover {
	transform: scale(1.08);
	box-shadow: 0 4px 20px rgba(var(--rfwc-accent-rgb), 0.25);
}

.rfwc-countdown--circular .rfwc-countdown-value {
	font-size: 1.6em;
	font-weight: 800;
	color: var(--rfwc-accent-dark);
	line-height: 1;
}

.rfwc-countdown--circular .rfwc-countdown-unit {
	font-size: 0.5em;
	font-weight: 700;
	color: var(--rfwc-accent);
	margin-top: 2px;
	letter-spacing: 0.06em;
}

/* --------------------------------------------------------------------------
   Accent Top — White cards with thick accent-colored top edge
   -------------------------------------------------------------------------- */

.rfwc-countdown--accent-top .rfwc-countdown {
	gap: 10px;
}

.rfwc-countdown--accent-top .rfwc-countdown-item {
	min-width: 68px;
	padding: 16px 10px 12px;
	background: #fff;
	border: 1px solid #eee;
	border-top: 4px solid var(--rfwc-accent);
	border-radius: 4px 4px 8px 8px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
	transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.rfwc-countdown--accent-top .rfwc-countdown-item:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}

.rfwc-countdown--accent-top .rfwc-countdown-value {
	font-size: 2em;
	font-weight: 800;
	color: #222;
}

.rfwc-countdown--accent-top .rfwc-countdown-unit {
	font-size: 0.6em;
	font-weight: 600;
	color: var(--rfwc-accent);
	margin-top: 4px;
	letter-spacing: 0.06em;
}

/* --------------------------------------------------------------------------
   Border Gradient — Transparent bg, animated gradient border ring
   -------------------------------------------------------------------------- */

.rfwc-countdown--border-gradient .rfwc-countdown {
	gap: 12px;
}

.rfwc-countdown--border-gradient .rfwc-countdown-item {
	min-width: 72px;
	padding: 16px 10px 12px;
	background: #fff;
	border: none;
	border-radius: 12px;
	position: relative;
	z-index: 0;
	overflow: hidden;
	transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.rfwc-countdown--border-gradient .rfwc-countdown-item:hover {
	transform: translateY(-3px);
}

.rfwc-countdown--border-gradient .rfwc-countdown-item::before {
	content: "";
	position: absolute;
	top: -3px;
	left: -3px;
	right: -3px;
	bottom: -3px;
	z-index: -2;
	border-radius: 15px;
	background: conic-gradient(
		from var(--rfwc-border-angle, 0deg),
		var(--rfwc-accent),
		#e040a0,
		#ff6b6b,
		#f0c040,
		#40d0a0,
		var(--rfwc-accent-light),
		var(--rfwc-accent)
	);
	animation: rfwc-border-spin 3s linear infinite;
}

.rfwc-countdown--border-gradient .rfwc-countdown-item::after {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	right: 3px;
	bottom: 3px;
	z-index: -1;
	border-radius: 9px;
	background: #fff;
}

.rfwc-countdown--border-gradient .rfwc-countdown-value {
	font-size: 2em;
	font-weight: 800;
	background: linear-gradient(135deg, var(--rfwc-accent), #e040a0);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	position: relative;
}

.rfwc-countdown--border-gradient .rfwc-countdown-unit {
	font-size: 0.6em;
	font-weight: 600;
	color: #999;
	margin-top: 4px;
	position: relative;
}

@property --rfwc-border-angle {
	syntax: "<angle>";
	initial-value: 0deg;
	inherits: false;
}

@keyframes rfwc-border-spin {
	to {
		--rfwc-border-angle: 360deg;
	}
}


/* ==========================================================================
   BADGE STYLES
   ========================================================================== */

/* --------------------------------------------------------------------------
   Gradient Banner — Accent gradient with shine sweep
   -------------------------------------------------------------------------- */

.rfwc-badge--gradient {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	background: linear-gradient(
		135deg,
		var(--rfwc-accent),
		#e040a0,
		#ff6b6b,
		var(--rfwc-accent-light),
		var(--rfwc-accent)
	);
	background-size: 300% 300%;
	border: none;
	padding: 12px 20px;
	border-radius: 8px;
	gap: 2px;
	position: relative;
	overflow: hidden;
	animation: rfwc-gradient-shift 6s ease infinite;
}

.rfwc-badge--gradient .rfwc-iw-badge-icon {
	background: rgba(255, 255, 255, 0.2);
	color: #fff;
}

.rfwc-badge--gradient .rfwc-iw-badge-text {
	color: #fff;
}

.rfwc-badge--gradient .rfwc-iw-badge-sub {
	color: rgba(255, 255, 255, 0.85);
}

/* --------------------------------------------------------------------------
   Pill Badge — Compact inline pill
   -------------------------------------------------------------------------- */

.rfwc-badge--pill {
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	text-align: left;
	background: var(--rfwc-accent-bg-medium);
	border: 1px solid var(--rfwc-accent-border-solid);
	padding: 6px 14px;
	border-radius: 999px;
	gap: 6px;
	transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.rfwc-badge--pill:hover {
	transform: translateY(-1px);
}

.rfwc-badge--pill .rfwc-iw-badge-title {
	gap: 4px;
}

.rfwc-badge--pill .rfwc-iw-badge-icon {
	width: 18px;
	height: 18px;
	font-size: 0.65em;
}

.rfwc-badge--pill .rfwc-iw-badge-text {
	font-size: 0.82em;
}

.rfwc-badge--pill .rfwc-iw-badge-sub {
	display: none;
}

/* --------------------------------------------------------------------------
   Animated Glow — Pulsing border glow
   -------------------------------------------------------------------------- */

.rfwc-badge--animated-glow {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	background: var(--rfwc-accent-bg-light);
	border: 2px solid var(--rfwc-accent);
	padding: 10px 16px;
	border-radius: 8px;
	gap: 2px;
	animation: rfwc-badge-glow 2s ease-in-out infinite;
}

@keyframes rfwc-badge-glow {
	0%,
	100% {
		box-shadow: 0 0 6px rgba(var(--rfwc-accent-rgb), 0.15);
	}
	50% {
		box-shadow:
			0 0 18px rgba(var(--rfwc-accent-rgb), 0.3),
			0 0 40px rgba(var(--rfwc-accent-rgb), 0.1);
	}
}

/* --------------------------------------------------------------------------
   Minimal — Icon + text only
   -------------------------------------------------------------------------- */

.rfwc-badge--minimal {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	text-align: center;
	background: none;
	border: none;
	padding: 6px 0;
	border-radius: 0;
	gap: 6px;
}

.rfwc-badge--minimal .rfwc-iw-badge-icon {
	background: none;
	color: var(--rfwc-accent);
	width: auto;
	height: auto;
	font-size: 1em;
}

.rfwc-badge--minimal .rfwc-iw-badge-text {
	font-size: 0.9em;
	font-weight: 600;
	color: var(--rfwc-accent-dark);
}

.rfwc-badge--minimal .rfwc-iw-badge-sub {
	display: none;
}

/* --------------------------------------------------------------------------
   Neon Badge — Dark background, matching neon countdown
   -------------------------------------------------------------------------- */

.rfwc-badge--neon {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	background: linear-gradient(160deg, #1a1a2e, #0d0d1a);
	border: 1px solid rgba(var(--rfwc-accent-rgb), 0.4);
	padding: 12px 20px;
	border-radius: 10px;
	gap: 2px;
	box-shadow:
		0 0 8px rgba(var(--rfwc-accent-rgb), 0.25),
		0 0 24px rgba(var(--rfwc-accent-rgb), 0.15);
	position: relative;
	overflow: hidden;
}

.rfwc-badge--neon::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--rfwc-accent-light);
	box-shadow:
		0 0 8px var(--rfwc-accent),
		0 0 16px var(--rfwc-accent);
}

.rfwc-badge--neon .rfwc-iw-badge-icon {
	background: rgba(var(--rfwc-accent-rgb), 0.15);
	color: var(--rfwc-accent-light);
	text-shadow: 0 0 8px rgba(var(--rfwc-accent-rgb), 0.5);
}

.rfwc-badge--neon .rfwc-iw-badge-text {
	color: #fff;
	text-shadow: 0 0 10px rgba(var(--rfwc-accent-rgb), 0.3);
}

.rfwc-badge--neon .rfwc-iw-badge-sub {
	color: rgba(255, 255, 255, 0.55);
}

/* --------------------------------------------------------------------------
   Glass Badge — Glassmorphism
   -------------------------------------------------------------------------- */

.rfwc-badge--glass {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	background:
		linear-gradient(
			135deg,
			rgba(var(--rfwc-accent-rgb), 0.12),
			rgba(var(--rfwc-accent-rgb), 0.04)
		);
	-webkit-backdrop-filter: blur(16px) saturate(1.4);
	backdrop-filter: blur(16px) saturate(1.4);
	border: 1px solid rgba(var(--rfwc-accent-rgb), 0.2);
	border-top-color: rgba(var(--rfwc-accent-rgb), 0.35);
	padding: 12px 20px;
	border-radius: 12px;
	gap: 2px;
	box-shadow:
		0 4px 16px rgba(var(--rfwc-accent-rgb), 0.1),
		inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.rfwc-badge--glass .rfwc-iw-badge-icon {
	background: rgba(var(--rfwc-accent-rgb), 0.12);
}

.rfwc-badge--glass .rfwc-iw-badge-text {
	color: var(--rfwc-accent-dark);
}

.rfwc-badge--glass .rfwc-iw-badge-sub {
	color: #666;
}

/* --------------------------------------------------------------------------
   Outlined Badge — Clean border-only
   -------------------------------------------------------------------------- */

.rfwc-badge--outlined {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	background: transparent;
	border: 2px solid var(--rfwc-accent);
	padding: 10px 20px;
	border-radius: 8px;
	gap: 2px;
	transition: background-color 0.2s ease;
}

.rfwc-badge--outlined:hover {
	background: var(--rfwc-accent-bg-light);
}

.rfwc-badge--outlined .rfwc-iw-badge-icon {
	background: var(--rfwc-accent);
	color: #fff;
}

.rfwc-badge--outlined .rfwc-iw-badge-text {
	color: var(--rfwc-accent-dark);
	font-weight: 700;
}

.rfwc-badge--outlined .rfwc-iw-badge-sub {
	color: #666;
}

/* --------------------------------------------------------------------------
   Border Gradient Badge — Animated spinning rainbow border
   -------------------------------------------------------------------------- */

.rfwc-badge--border-gradient {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	background: #fff;
	border: none;
	padding: 12px 20px;
	border-radius: 12px;
	gap: 2px;
	position: relative;
	z-index: 0;
	overflow: hidden;
}

.rfwc-badge--border-gradient::before {
	content: "";
	position: absolute;
	top: -3px;
	left: -3px;
	right: -3px;
	bottom: -3px;
	z-index: -2;
	border-radius: 15px;
	background: conic-gradient(
		from var(--rfwc-border-angle, 0deg),
		var(--rfwc-accent),
		#e040a0,
		#ff6b6b,
		#f0c040,
		#40d0a0,
		var(--rfwc-accent-light),
		var(--rfwc-accent)
	);
	animation: rfwc-border-spin 3s linear infinite;
}

.rfwc-badge--border-gradient::after {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	right: 3px;
	bottom: 3px;
	z-index: -1;
	border-radius: 9px;
	background: #fff;
}

.rfwc-badge--border-gradient .rfwc-iw-badge-icon {
	background: linear-gradient(135deg, var(--rfwc-accent), #e040a0);
	color: #fff;
}

.rfwc-badge--border-gradient .rfwc-iw-badge-text {
	font-weight: 700;
	background: linear-gradient(135deg, var(--rfwc-accent), #e040a0);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.rfwc-badge--border-gradient .rfwc-iw-badge-sub {
	color: #666;
	position: relative;
}


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media screen and (max-width: 480px) {
	.rfwc-countdown--pill .rfwc-countdown-item {
		min-width: 54px;
		padding: 8px 10px 6px;
	}

	.rfwc-countdown--pill .rfwc-countdown-value {
		font-size: 1.3em;
	}

	.rfwc-countdown--minimal .rfwc-countdown {
		gap: 14px;
	}

	.rfwc-countdown--minimal .rfwc-countdown-value {
		font-size: 1.8em;
	}

	.rfwc-countdown--underline .rfwc-countdown {
		gap: 10px;
	}

	.rfwc-countdown--underline .rfwc-countdown-value {
		font-size: 1.6em;
	}

	.rfwc-countdown--neon .rfwc-countdown-item {
		min-width: 58px;
		padding: 12px 8px 10px;
	}

	.rfwc-countdown--neon .rfwc-countdown-value {
		font-size: 1.6em;
	}

	.rfwc-countdown--gradient .rfwc-countdown-item {
		min-width: 58px;
	}

	.rfwc-countdown--gradient .rfwc-countdown-value {
		font-size: 1.5em;
	}

	.rfwc-countdown--glass .rfwc-countdown-item {
		min-width: 58px;
	}

	.rfwc-countdown--glass .rfwc-countdown-value {
		font-size: 1.5em;
	}

	.rfwc-countdown--elegant .rfwc-countdown-item {
		min-width: 60px;
	}

	.rfwc-countdown--elegant .rfwc-countdown-value {
		font-size: 1.6em;
	}

	.rfwc-countdown--dark .rfwc-countdown-item {
		min-width: 60px;
	}

	.rfwc-countdown--dark .rfwc-countdown-value {
		font-size: 1.7em;
	}

	.rfwc-countdown--shadow .rfwc-countdown {
		gap: 8px;
	}

	.rfwc-countdown--shadow .rfwc-countdown-item {
		min-width: 60px;
		padding: 14px 10px 10px;
	}

	.rfwc-countdown--shadow .rfwc-countdown-value {
		font-size: 1.6em;
	}

	.rfwc-countdown--stacked .rfwc-countdown {
		max-width: 260px;
	}

	.rfwc-countdown--stacked .rfwc-countdown-value {
		font-size: 1.3em;
	}

	.rfwc-countdown--outline .rfwc-countdown-item {
		min-width: 58px;
	}

	.rfwc-countdown--outline .rfwc-countdown-value {
		font-size: 1.6em;
	}

	.rfwc-countdown--frosted-dark .rfwc-countdown-item {
		min-width: 58px;
	}

	.rfwc-countdown--frosted-dark .rfwc-countdown-value {
		font-size: 1.5em;
	}

	.rfwc-countdown--circular .rfwc-countdown {
		gap: 8px;
	}

	.rfwc-countdown--circular .rfwc-countdown-item {
		min-width: 62px;
		width: 62px;
		height: 62px;
	}

	.rfwc-countdown--circular .rfwc-countdown-value {
		font-size: 1.3em;
	}

	.rfwc-countdown--accent-top .rfwc-countdown-item {
		min-width: 58px;
	}

	.rfwc-countdown--accent-top .rfwc-countdown-value {
		font-size: 1.6em;
	}

	.rfwc-countdown--neumorphism .rfwc-countdown {
		gap: 10px;
	}

	.rfwc-countdown--neumorphism .rfwc-countdown-item {
		min-width: 60px;
		padding: 14px 10px 10px;
	}

	.rfwc-countdown--neumorphism .rfwc-countdown-value {
		font-size: 1.6em;
	}

	.rfwc-countdown--border-gradient .rfwc-countdown {
		gap: 8px;
	}

	.rfwc-countdown--border-gradient .rfwc-countdown-item {
		min-width: 60px;
	}

	.rfwc-countdown--border-gradient .rfwc-countdown-value {
		font-size: 1.6em;
	}
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.rfwc-badge--animated-glow {
		animation: none;
		box-shadow: 0 0 10px rgba(var(--rfwc-accent-rgb), 0.2);
	}

	.rfwc-countdown--neon .rfwc-countdown-item {
		animation: none;
		box-shadow:
			0 0 12px rgba(var(--rfwc-accent-rgb), 0.3),
			0 0 30px rgba(var(--rfwc-accent-rgb), 0.15),
			inset 0 1px 0 rgba(var(--rfwc-accent-rgb), 0.1);
	}

	.rfwc-countdown--gradient .rfwc-countdown-item {
		animation: none;
		background-size: 100% 100%;
	}

	.rfwc-badge--neon::before {
		animation: none;
	}

	.rfwc-badge--border-gradient::before {
		animation: none;
	}

	.rfwc-countdown--neon .rfwc-countdown-item,
	.rfwc-countdown--gradient .rfwc-countdown-item,
	.rfwc-countdown--glass .rfwc-countdown-item,
	.rfwc-countdown--elegant .rfwc-countdown-item,
	.rfwc-countdown--dark .rfwc-countdown-item,
	.rfwc-countdown--shadow .rfwc-countdown-item,
	.rfwc-countdown--pill .rfwc-countdown-item,
	.rfwc-countdown--stacked .rfwc-countdown-item,
	.rfwc-countdown--outline .rfwc-countdown-item,
	.rfwc-countdown--frosted-dark .rfwc-countdown-item,
	.rfwc-countdown--circular .rfwc-countdown-item,
	.rfwc-countdown--accent-top .rfwc-countdown-item,
	.rfwc-countdown--neumorphism .rfwc-countdown-item,
	.rfwc-countdown--border-gradient .rfwc-countdown-item {
		transition: none;
	}

	.rfwc-countdown--border-gradient .rfwc-countdown-item::before {
		animation: none;
	}
}