/* Winnow Lotto look (reconstructed) */
:root {
	--wl-bg: #2f2d68;
	--wl-bg-2: #2a285f;
	--wl-text: #ffffff;
	--wl-paper: #FFE7BD;
	/* Warm "neon paper" gradient for ticket-like beige areas */
	--wl-paper-grad:
		/* bright warm lift (top-left) */
		radial-gradient(520px 240px at 18% 30%, rgba(255, 250, 235, 0.95) 0%, rgba(255, 250, 235, 0.00) 62%),
		/* buttery glow (right) */
		radial-gradient(640px 320px at 82% 55%, rgba(255, 216, 140, 0.55) 0%, rgba(255, 216, 140, 0.00) 66%),
		/* base creamy paper */
		linear-gradient(135deg, rgba(255, 239, 206, 1) 0%, rgba(255, 231, 189, 1) 55%, rgba(245, 208, 150, 1) 100%);
	--wl-muted: rgba(255, 255, 255, 0.72);
	--wl-muted-2: rgba(255, 255, 255, 0.54);
	--wl-surface: rgba(255, 255, 255, 0.08);
	--wl-surface-2: rgba(255, 255, 255, 0.06);
	--wl-border: rgba(255, 255, 255, 0.14);
	--wl-shadow: 0 18px 44px rgba(0, 0, 0, 0.35);
	--wl-radius-lg: 22px;
	--wl-radius-md: 16px;
	--wl-radius-sm: 12px;
	--wl-btn: #58d0cd;
	--wl-btn-text: #0c1b1a;
	/* Hero banner: opaque neon-pink "lit at night" look (glow contained inside card) */
	--wl-hero-grad:
		/* main wash (keep opaque all the way across; end in warm plum, not blue-purple) */
		radial-gradient(900px 360px at 22% 45%, rgba(255, 118, 186, 1) 0%, rgba(255, 96, 170, 1) 28%, rgba(217, 84, 161, 1) 48%, rgba(150, 64, 140, 1) 72%, rgba(92, 44, 98, 1) 100%),
		/* warm lift on the right so it doesn't read "see-through purple" */
		radial-gradient(780px 420px at 78% 52%, rgba(255, 120, 190, 0.45) 0%, rgba(255, 120, 190, 0.00) 62%),
		radial-gradient(520px 260px at 78% 35%, rgba(255, 165, 214, 0.30) 0%, rgba(255, 165, 214, 0.00) 70%),
		linear-gradient(135deg, rgba(255, 92, 168, 1) 0%, rgba(150, 64, 140, 1) 55%, rgba(92, 44, 98, 1) 100%);
}

body.wl-body {
	background: radial-gradient(1200px 700px at 20% -10%, rgba(224, 97, 143, 0.25) 0%, rgba(47, 45, 104, 0) 55%),
		linear-gradient(180deg, var(--wl-bg) 0%, var(--wl-bg-2) 100%);
	color: var(--wl-text);
}

.wl-container {
	max-width: 1200px;
}

/* Wider container for conversion-heavy pages (e.g. Powerball play) */
.wl-container-wide {
	max-width: 1600px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 18px;
	padding-right: 18px;
}

@media (max-width: 575.98px) {
	.wl-container-wide {
		padding-left: 12px;
		padding-right: 12px;
	}
}

.site-shell {
	padding-top: 110px;   /* room for fixed header (logo enlarged) */
	padding-bottom: 24px;
	min-height: 100vh;
}

.site-main {
	padding-top: 22px;
	padding-bottom: 44px;
}

/* Navbar */
.wl-navbar {
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.wl-brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: #1f1f1f !important;
}

.wl-brand-mark {
	width: 34px;
	height: 34px;
	border-radius: 10px;
	background: linear-gradient(135deg, #4bd2cf 0%, #6f6fdc 55%, #f0c64a 100%);
	box-shadow: 0 10px 26px rgba(0, 0, 0, 0.18);
}

.wl-logo-img {
	height: 68px;
	width: auto;
	object-fit: contain;
}

@media (max-width: 575.98px) {
	.wl-logo-img {
		height: 54px;
	}
	.site-shell {
		padding-top: 96px;
	}
}

.wl-brand-text {
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.02em;
}

.wl-navlink {
	font-weight: 600;
	color: rgba(0, 0, 0, 0.70) !important;
}

.wl-navlink:hover {
	color: rgba(0, 0, 0, 0.92) !important;
}

.wl-nav-account {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.wl-nav-balance {
	display: inline-flex;
	align-items: center;
	padding: 7px 12px;
	border-radius: 999px;
	background: rgba(32, 56, 132, 0.10);
	border: 1px solid rgba(32, 56, 132, 0.16);
	color: rgba(0, 0, 0, 0.78);
	font-weight: 900;
	font-size: 0.95rem;
	line-height: 1;
	letter-spacing: -0.01em;
	white-space: nowrap;
}

@media (max-width: 575.98px) {
	.wl-nav-balance {
		display: none; /* keep header compact on phones */
	}
}

.wl-badge {
	background: #3c5bff;
	color: #ffffff;
	font-weight: 700;
}

.wl-btn {
	background: linear-gradient(135deg, rgba(255, 92, 168, 1) 0%, rgba(217, 84, 161, 1) 55%, rgba(150, 64, 140, 1) 100%);
	border: 0;
	color: #ffffff;
	font-weight: 800;
	border-radius: 999px;
	padding: 10px 16px;
	box-shadow: 0 12px 26px rgba(255, 92, 168, 0.35);
}

.wl-btn:hover {
	background: linear-gradient(135deg, rgba(255, 110, 180, 1) 0%, rgba(230, 100, 175, 1) 55%, rgba(170, 80, 160, 1) 100%);
	color: #ffffff;
	box-shadow: 0 14px 30px rgba(255, 92, 168, 0.45);
}

/* Semantic alias: any "Pay now" CTA should be pink */
.wl-btn-paynow {
	background: linear-gradient(135deg, rgba(255, 92, 168, 1) 0%, rgba(217, 84, 161, 1) 55%, rgba(150, 64, 140, 1) 100%);
	border: 0;
	color: #ffffff;
	font-weight: 800;
	border-radius: 999px;
	padding: 10px 16px;
	box-shadow: 0 12px 26px rgba(255, 92, 168, 0.35);
}
.wl-btn-paynow:hover {
	background: linear-gradient(135deg, rgba(255, 110, 180, 1) 0%, rgba(230, 100, 175, 1) 55%, rgba(170, 80, 160, 1) 100%);
	color: #ffffff;
	box-shadow: 0 14px 30px rgba(255, 92, 168, 0.45);
}

/* Brand palette button variants (use logo colours) */
.wl-btn-teal {
	background: linear-gradient(135deg, rgba(88, 208, 205, 1) 0%, rgba(50, 160, 155, 1) 55%, rgba(20, 100, 95, 1) 100%);
	border: 0;
	color: #ffffff;
	font-weight: 800;
	border-radius: 999px;
	padding: 10px 16px;
	box-shadow: 0 12px 26px rgba(88, 208, 205, 0.30);
}

.wl-btn-teal:hover {
	background: linear-gradient(135deg, rgba(100, 220, 215, 1) 0%, rgba(60, 175, 170, 1) 55%, rgba(25, 115, 110, 1) 100%);
	color: #ffffff;
	box-shadow: 0 14px 30px rgba(88, 208, 205, 0.38);
}

/* Keep brand buttons on-brand even when disabled (avoid browser greying them out) */
.wl-btn-teal:disabled,
.wl-btn-teal[disabled] {
	background: linear-gradient(135deg, rgba(88, 208, 205, 1) 0%, rgba(50, 160, 155, 1) 55%, rgba(20, 100, 95, 1) 100%);
	border: 0;
	color: rgba(255, 255, 255, 0.92);
	opacity: 0.86;
	cursor: not-allowed;
	box-shadow: 0 10px 22px rgba(88, 208, 205, 0.22);
}

.wl-btn-yellow {
	background: linear-gradient(135deg, rgba(240, 198, 74, 1) 0%, rgba(232, 175, 56, 1) 55%, rgba(206, 145, 42, 1) 100%);
	border: 0;
	/* Match agreed CTA style: white text on brand buttons */
	color: rgba(255, 255, 255, 0.98);
	text-shadow: 0 1px 0 rgba(0, 0, 0, 0.22);
	font-weight: 900;
	border-radius: 999px;
	padding: 10px 16px;
	box-shadow: 0 12px 26px rgba(240, 198, 74, 0.26);
}

.wl-btn-yellow:hover {
	background: linear-gradient(135deg, rgba(250, 210, 90, 1) 0%, rgba(242, 188, 68, 1) 55%, rgba(220, 160, 54, 1) 100%);
	color: rgba(255, 255, 255, 0.98);
	box-shadow: 0 14px 30px rgba(240, 198, 74, 0.34);
}

/* Auth / checkout gate: branded glass panel */
.wl-auth-panel {
	background:
		radial-gradient(900px 420px at 18% 20%, rgba(88, 208, 205, 0.20) 0%, rgba(88, 208, 205, 0.00) 62%),
		radial-gradient(760px 420px at 84% 30%, rgba(255, 92, 168, 0.16) 0%, rgba(255, 92, 168, 0.00) 60%),
		linear-gradient(135deg, rgba(32, 56, 132, 0.88) 0%, rgba(40, 52, 120, 0.86) 55%, rgba(24, 34, 92, 0.86) 100%);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 18px;
	box-shadow: 0 18px 46px rgba(0, 0, 0, 0.34);
	backdrop-filter: blur(14px);
	padding: 22px;
	color: rgba(255, 255, 255, 0.96);
	position: relative;
	overflow: hidden;
	font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
	-webkit-font-smoothing: antialiased;
}

.wl-auth-panel::before {
	/* subtle texture */
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		repeating-linear-gradient(
			14deg,
			rgba(255, 255, 255, 0.05) 0px,
			rgba(255, 255, 255, 0.05) 1px,
			rgba(255, 255, 255, 0.00) 1px,
			rgba(255, 255, 255, 0.00) 8px
		),
		radial-gradient(1px 1px at 20% 20%, rgba(255, 255, 255, 0.07) 0 1px, rgba(255, 255, 255, 0.00) 2px),
		radial-gradient(1px 1px at 55% 60%, rgba(255, 255, 255, 0.06) 0 1px, rgba(255, 255, 255, 0.00) 2px),
		radial-gradient(1px 1px at 80% 35%, rgba(255, 255, 255, 0.05) 0 1px, rgba(255, 255, 255, 0.00) 2px);
	opacity: 0.22;
	mix-blend-mode: overlay;
}

.wl-auth-panel > * {
	position: relative;
	z-index: 1;
}

.wl-auth-title {
	font-weight: 950;
	letter-spacing: -0.02em;
	font-size: 1.35rem;
	margin: 0 0 6px;
}

.wl-auth-sub {
	color: rgba(255, 255, 255, 0.78);
	font-size: 1.0rem;
	line-height: 1.4;
}

/* Neon bubble (danger) – used for important notices */
.wl-neon-bubble {
	display: inline-block;
	padding: 8px 12px;
	border-radius: 999px;
	font-weight: 900;
	letter-spacing: -0.01em;
}

.wl-neon-bubble--danger {
	color: rgba(255, 255, 255, 0.98);
	background:
		radial-gradient(420px 220px at 25% 30%, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.00) 62%),
		radial-gradient(520px 260px at 80% 40%, rgba(255, 92, 168, 0.35) 0%, rgba(255, 92, 168, 0.00) 68%),
		linear-gradient(135deg, rgba(255, 70, 70, 0.92) 0%, rgba(224, 30, 110, 0.92) 55%, rgba(255, 92, 168, 0.90) 100%);
	border: 1px solid rgba(255, 255, 255, 0.22);
	box-shadow:
		0 14px 34px rgba(0, 0, 0, 0.28),
		0 0 0 1px rgba(255, 92, 168, 0.18),
		0 0 28px rgba(255, 92, 168, 0.28);
}

.wl-auth-panel .text-muted {
	color: rgba(255, 255, 255, 0.72) !important;
}

.wl-auth-panel .form-label {
	color: rgba(255, 255, 255, 0.88);
	font-weight: 850;
	letter-spacing: -0.01em;
}

.wl-auth-panel .list-group {
	--bs-list-group-bg: transparent;
	--bs-list-group-border-color: rgba(255, 255, 255, 0.16);
}

.wl-auth-panel .list-group-item {
	background: transparent;
	color: rgba(255, 255, 255, 0.92);
	border-color: rgba(255, 255, 255, 0.16);
}

.wl-auth-panel .badge.text-bg-light {
	background: rgba(255, 255, 255, 0.14) !important;
	color: rgba(255, 255, 255, 0.92) !important;
	border: 1px solid rgba(255, 255, 255, 0.18);
	font-weight: 850;
}

.wl-auth-panel a {
	color: rgba(255, 255, 255, 0.92);
}

.wl-auth-actions {
	margin-top: 12px;
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	padding: 12px;
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.16);
	backdrop-filter: blur(12px);
}

.wl-auth-actions .btn {
	flex: 0 0 auto;
}

@media (max-width: 575.98px) {
	.wl-auth-panel {
		padding: 18px;
	}
	.wl-auth-actions .btn {
		width: 100%;
	}
}

.wl-btn-outline {
	border: 1px solid rgba(0, 0, 0, 0.22);
	border-radius: 999px;
	padding: 8px 14px;
	font-weight: 700;
	color: rgba(0, 0, 0, 0.75);
	background: transparent;
}

.wl-btn-outline:hover {
	border-color: rgba(0, 0, 0, 0.32);
	color: rgba(0, 0, 0, 0.9);
	background: rgba(0, 0, 0, 0.02);
}

.wl-btn-ghost {
	border: 1px solid rgba(255, 255, 255, 0.18);
	background: rgba(255, 255, 255, 0.06);
	color: rgba(255, 255, 255, 0.85);
	border-radius: 12px;
}

.wl-btn-ghost:hover {
	background: rgba(255, 255, 255, 0.09);
	color: rgba(255, 255, 255, 0.92);
}

.wl-btn-ghost:disabled {
	opacity: 0.55;
}

.wl-btn-dark {
	background: rgba(16, 16, 18, 0.82);
	color: #ffffff;
	font-weight: 800;
	border-radius: 999px;
	padding: 10px 16px;
	border: 0;
}

.wl-btn-dark:hover {
	background: rgba(16, 16, 18, 0.92);
	color: #ffffff;
}

/* Homepage hero CTA: Winnow-logo gradient + neon glow (keeps pill shape) */
.wl-hero-cta {
	/* Dark base so the flame reads clearly */
	background: linear-gradient(180deg, rgba(25, 25, 35, 0.92) 0%, rgba(12, 12, 18, 0.92) 100%) !important;
	color: rgba(255, 255, 255, 0.98) !important;
	border: 1px solid rgba(255, 255, 255, 0.28) !important;
	box-shadow:
		0 14px 28px rgba(0, 0, 0, 0.28),
		0 0 26px rgba(255, 92, 0, 0.28),
		0 0 18px rgba(255, 0, 120, 0.20);
	text-shadow: 0 1px 0 rgba(0, 0, 0, 0.18);
	position: relative;
	overflow: hidden;
	/* Make the animation more obviously "alive" even if blend layers are subtle on some devices */
	animation: wlCtaGlow 1.15s ease-in-out infinite;
	transform: translateZ(0);
}

/* Flame layer 1 (larger tongues) */
.wl-hero-cta::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	background:
		/* Wider base glow */
		radial-gradient(140% 130% at 50% 122%, rgba(255, 120, 0, 0.55) 0%, rgba(255, 0, 120, 0.00) 72%),
		/* Exaggerated tongues: narrower + taller, with brighter cores */
		radial-gradient(28% 125% at 6% 108%, rgba(255, 255, 210, 0.92) 0%, rgba(255, 190, 60, 0.88) 16%, rgba(255, 95, 0, 0.88) 34%, rgba(255, 0, 120, 0.0) 72%),
		radial-gradient(26% 132% at 15% 102%, rgba(255, 255, 225, 0.86) 0%, rgba(255, 200, 70, 0.84) 18%, rgba(255, 110, 0, 0.86) 36%, rgba(255, 0, 120, 0.0) 74%),
		radial-gradient(28% 128% at 24% 110%, rgba(255, 255, 230, 0.88) 0%, rgba(255, 195, 65, 0.84) 18%, rgba(255, 100, 0, 0.84) 34%, rgba(255, 0, 120, 0.0) 72%),
		radial-gradient(26% 138% at 33% 101%, rgba(255, 255, 240, 0.86) 0%, rgba(255, 210, 80, 0.82) 18%, rgba(255, 105, 0, 0.84) 36%, rgba(255, 0, 120, 0.0) 74%),
		radial-gradient(28% 130% at 42% 112%, rgba(255, 255, 245, 0.90) 0%, rgba(255, 205, 75, 0.84) 18%, rgba(255, 95, 0, 0.84) 34%, rgba(255, 0, 120, 0.0) 72%),
		radial-gradient(26% 138% at 52% 103%, rgba(255, 255, 235, 0.84) 0%, rgba(255, 200, 70, 0.80) 18%, rgba(255, 95, 0, 0.82) 36%, rgba(255, 0, 120, 0.0) 74%),
		radial-gradient(28% 128% at 62% 111%, rgba(255, 255, 230, 0.86) 0%, rgba(255, 195, 65, 0.82) 18%, rgba(255, 105, 0, 0.84) 34%, rgba(255, 0, 120, 0.0) 72%),
		radial-gradient(26% 132% at 72% 102%, rgba(255, 255, 225, 0.84) 0%, rgba(255, 200, 70, 0.80) 18%, rgba(255, 115, 0, 0.86) 36%, rgba(255, 0, 120, 0.0) 74%),
		radial-gradient(28% 125% at 82% 108%, rgba(255, 255, 210, 0.90) 0%, rgba(255, 190, 60, 0.86) 16%, rgba(255, 105, 0, 0.88) 34%, rgba(255, 0, 120, 0.0) 72%),
		radial-gradient(26% 138% at 92% 101%, rgba(255, 255, 230, 0.82) 0%, rgba(255, 205, 75, 0.78) 18%, rgba(255, 120, 0, 0.86) 36%, rgba(255, 0, 120, 0.0) 74%),
		/* Hot tips: larger + more frequent */
		radial-gradient(14% 46% at 10% 78%, rgba(255, 255, 255, 0.70) 0%, rgba(255, 235, 150, 0.34) 36%, rgba(255, 120, 0, 0.0) 78%),
		radial-gradient(12% 44% at 22% 74%, rgba(255, 255, 255, 0.62) 0%, rgba(255, 235, 150, 0.30) 36%, rgba(255, 120, 0, 0.0) 78%),
		radial-gradient(14% 46% at 34% 78%, rgba(255, 255, 255, 0.66) 0%, rgba(255, 235, 150, 0.32) 36%, rgba(255, 120, 0, 0.0) 78%),
		radial-gradient(12% 44% at 46% 72%, rgba(255, 255, 255, 0.58) 0%, rgba(255, 235, 150, 0.28) 36%, rgba(255, 120, 0, 0.0) 78%),
		radial-gradient(14% 46% at 58% 78%, rgba(255, 255, 255, 0.64) 0%, rgba(255, 235, 150, 0.30) 36%, rgba(255, 120, 0, 0.0) 78%),
		radial-gradient(12% 44% at 70% 74%, rgba(255, 255, 255, 0.60) 0%, rgba(255, 235, 150, 0.28) 36%, rgba(255, 120, 0, 0.0) 78%),
		radial-gradient(14% 46% at 82% 78%, rgba(255, 255, 255, 0.66) 0%, rgba(255, 235, 150, 0.32) 36%, rgba(255, 120, 0, 0.0) 78%),
		radial-gradient(12% 44% at 92% 72%, rgba(255, 255, 255, 0.58) 0%, rgba(255, 235, 150, 0.28) 36%, rgba(255, 120, 0, 0.0) 78%);
	filter: blur(0.05px);
	opacity: 0.95;
	mix-blend-mode: screen;
	transform: translateY(2%);
	animation: wlFlameRise 1.35s ease-in-out infinite, wlFlameFlicker 0.55s linear infinite;
}

/* Flame layer 2 (hot core + shimmer) */
.wl-hero-cta::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	background:
		radial-gradient(38% 70% at 26% 108%, rgba(255, 255, 255, 0.62) 0%, rgba(255, 245, 180, 0.44) 22%, rgba(255, 120, 0, 0.0) 66%),
		radial-gradient(40% 72% at 54% 110%, rgba(255, 255, 255, 0.58) 0%, rgba(255, 235, 160, 0.40) 24%, rgba(255, 120, 0, 0.0) 68%),
		radial-gradient(38% 70% at 78% 108%, rgba(255, 255, 255, 0.56) 0%, rgba(255, 230, 150, 0.38) 24%, rgba(255, 120, 0, 0.0) 68%),
		linear-gradient(90deg, rgba(255, 255, 255, 0.0) 0%, rgba(255, 255, 255, 0.18) 45%, rgba(255, 255, 255, 0.0) 60%);
	mix-blend-mode: screen;
	opacity: 0.72;
	transform: translateY(10%);
	animation: wlFlameRise2 1.25s ease-in-out infinite, wlFlameShimmer 1.1s linear infinite;
}

@keyframes wlCtaGlow {
	0%, 100% {
		box-shadow:
			0 14px 28px rgba(0, 0, 0, 0.28),
			0 0 24px rgba(255, 92, 0, 0.26),
			0 0 16px rgba(255, 0, 120, 0.18);
	}
	50% {
		box-shadow:
			0 16px 32px rgba(0, 0, 0, 0.30),
			0 0 34px rgba(255, 92, 0, 0.40),
			0 0 26px rgba(255, 0, 120, 0.28);
	}
}

@keyframes wlFlameRise {
	0%   { transform: translate(0%, 10%) scale(1.06); filter: blur(0.10px); }
	30%  { transform: translate(-1.2%, -2%) scale(1.00); filter: blur(0.55px); }
	60%  { transform: translate(1.2%, -6%) scale(1.03); filter: blur(0.40px); }
	100% { transform: translate(0%, 10%) scale(1.06); filter: blur(0.10px); }
}

@keyframes wlFlameRise2 {
	0%   { transform: translateY(14%) scale(1.00); }
	50%  { transform: translateY(2%)  scale(1.02); }
	100% { transform: translateY(14%) scale(1.00); }
}

@keyframes wlFlameFlicker {
	0%, 100% { opacity: 0.92; }
	25%      { opacity: 0.78; }
	50%      { opacity: 0.96; }
	75%      { opacity: 0.84; }
}

@keyframes wlFlameShimmer {
	0%   { background-position: 0% 0%, 0% 0%, -140% 0%; }
	100% { background-position: 0% 0%, 0% 0%, 220% 0%; }
}

.wl-hero-cta:hover {
	filter: brightness(1.04) saturate(1.08);
	box-shadow:
		0 16px 32px rgba(0, 0, 0, 0.30),
		0 0 32px rgba(255, 92, 0, 0.36),
		0 0 24px rgba(255, 0, 120, 0.28);
}

/* Note: we intentionally keep the homepage hero CTA animated (brand-critical). */

.wl-btn-outline-dark {
	border: 1px solid rgba(16, 16, 18, 0.32);
	border-radius: 999px;
	padding: 10px 16px;
	font-weight: 800;
	color: rgba(16, 16, 18, 0.86);
	background: rgba(255, 255, 255, 0.40);
	backdrop-filter: blur(10px);
}

.wl-btn-outline-dark:hover {
	background: rgba(255, 255, 255, 0.55);
	color: rgba(16, 16, 18, 0.9);
}

.wl-btn-disabled {
	border: 1px solid rgba(255, 255, 255, 0.18);
	background: rgba(255, 255, 255, 0.06);
	color: rgba(255, 255, 255, 0.62);
	border-radius: 12px;
	font-weight: 800;
}

/* Footer */
.wl-footer {
	padding: 18px 0 24px;
	color: rgba(255, 255, 255, 0.78);
}

.wl-footer-brand {
	display: flex;
	align-items: center;
	gap: 10px;
}

.wl-footer-logo {
	height: 34px;
	width: auto;
	object-fit: contain;
}

.wl-footer-name {
	font-weight: 950;
	letter-spacing: -0.02em;
	color: rgba(255, 255, 255, 0.96);
}

.wl-footer-tag {
	margin-top: 2px;
	color: rgba(255, 255, 255, 0.78);
	font-weight: 650;
}

.wl-footer-top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 14px;
	padding-top: 10px;
	border-top: 1px solid rgba(255, 255, 255, 0.10);
}

.wl-footer-badges {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 10px;
}

.wl-footer-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 8px 12px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.14);
	color: rgba(255, 255, 255, 0.92);
	font-weight: 900;
	text-decoration: none;
	font-size: 0.9rem;
}

.wl-footer-badge--link:hover {
	background: rgba(255, 255, 255, 0.10);
	color: rgba(255, 255, 255, 1);
}

.wl-footer-cols {
	margin-top: 16px;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
}

.wl-footer-col {
	min-width: 0;
}

.wl-footer-h {
	font-weight: 950;
	letter-spacing: -0.02em;
	color: rgba(255, 255, 255, 0.96);
	margin-bottom: 8px;
}

.wl-footer-a {
	display: block;
	color: rgba(255, 255, 255, 0.74);
	font-weight: 700;
	text-decoration: none;
	margin: 6px 0;
}

.wl-footer-a:hover {
	color: rgba(255, 255, 255, 0.96);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.wl-footer-bottom {
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid rgba(255, 255, 255, 0.10);
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 14px;
}

.wl-footer-fineprint {
	min-width: 0;
}

.wl-footer-muted {
	color: rgba(255, 255, 255, 0.68);
	font-weight: 650;
	font-size: 0.92rem;
}

@media (max-width: 991.98px) {
	.wl-footer-cols {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.wl-footer-bottom {
		flex-direction: column;
	}
	.wl-footer-badges {
		justify-content: flex-start;
	}
}

/* Mobile sticky mini-cart */
.wl-bottom-stack {
	position: fixed;
	left: 12px;
	right: 12px;
	bottom: 12px;
	z-index: 1050;
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: stretch; /* ensure children use full width */
	pointer-events: none; /* children re-enable */
}

.wl-bottom-stack > * {
	pointer-events: auto;
	width: 100%;
}
.wl-bottom-stack.is-hidden { display: none; }
.wl-entry-bar.is-hidden { display: none; }
.wl-mini-cart.is-hidden { display: none; }

@media (min-width: 992px) {
	.wl-bottom-stack {
		left: 50%;
		right: auto;
		bottom: 18px;
		width: min(640px, calc(100vw - 44px));
		transform: translateX(-50%);
	}
}

.wl-entry-bar {
	border-radius: 18px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	background: rgba(12, 16, 28, 0.62);
	backdrop-filter: blur(14px);
	box-shadow: 0 18px 44px rgba(0, 0, 0, 0.40);
	padding: 12px 12px;
	display: flex;
	align-items: flex-start; /* keep actions at top (not vertically centered) */
	justify-content: space-between;
	gap: 12px;
	width: 100%;
}

.wl-entry-bar__left {
	min-width: 0;
	flex: 1 1 auto;
}

.wl-entry-bar__title {
	font-weight: 950;
	color: rgba(255, 255, 255, 0.96);
	letter-spacing: -0.01em;
}

.wl-entry-bar__sub {
	margin-top: 2px;
	font-size: 0.92rem;
	font-weight: 700;
	color: rgba(255, 255, 255, 0.72);
}

.wl-entry-bar__sep {
	display: inline-block;
	margin: 0 8px;
	color: rgba(255, 255, 255, 0.36);
}

.wl-entry-bar__right {
	display: inline-flex;
	align-items: flex-start; /* top-align total + buttons */
	gap: 10px;
	flex: 0 0 auto;
	justify-content: flex-end;
}

.wl-entry-bar__total {
	font-weight: 950;
	font-size: 1.05rem;
	color: rgba(255, 255, 255, 0.96);
}

.wl-entry-bar__actions {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

/* Entry details dropdown */
.wl-entry-details {
	margin-top: 8px;
}
.wl-entry-details__summary {
	list-style: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	user-select: none;
	font-weight: 850;
	font-size: 0.92rem;
	color: rgba(255, 255, 255, 0.78);
}
.wl-entry-details__summary::-webkit-details-marker { display: none; }
.wl-entry-details__chev {
	width: 24px;
	height: 24px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	background: rgba(255, 255, 255, 0.10);
	position: relative;
}
.wl-entry-details__chev::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 8px;
	height: 8px;
	border-right: 2px solid rgba(255, 255, 255, 0.72);
	border-bottom: 2px solid rgba(255, 255, 255, 0.72);
	transform: translate(-50%, -60%) rotate(45deg);
	transition: transform 160ms ease;
}
.wl-entry-details[open] .wl-entry-details__chev::before {
	transform: translate(-50%, -40%) rotate(-135deg);
}
.wl-entry-details__panel {
	margin-top: 10px;
	padding: 10px 10px;
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.12);
}
.wl-entry-details__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 6px 0;
	border-top: 1px solid rgba(255, 255, 255, 0.10);
}
.wl-entry-details__row:first-child {
	border-top: 0;
	padding-top: 0;
}
.wl-entry-details__label {
	color: rgba(255, 255, 255, 0.70);
	font-weight: 700;
}
.wl-entry-details__value {
	color: rgba(255, 255, 255, 0.92);
	font-weight: 850;
}

.wl-mini-cart {
	border-radius: 18px;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.14);
	background: rgba(12, 16, 28, 0.72);
	backdrop-filter: blur(14px);
	position: relative; /* anchor absolute bar-actions reliably */
	box-shadow: 0 22px 60px rgba(0, 0, 0, 0.48);
}

.wl-mini-cart__bar {
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 12px 12px;
	cursor: pointer;
	user-select: none;
	position: relative;
}

.wl-mini-cart__bar::-webkit-details-marker { display: none; }

.wl-mini-cart__left { min-width: 0; }
.wl-mini-cart__title {
	font-weight: 950;
	color: rgba(255, 255, 255, 0.96);
	letter-spacing: -0.01em;
}
.wl-mini-cart__sub {
	font-size: 0.92rem;
	font-weight: 650;
	color: rgba(255, 255, 255, 0.70);
	line-height: 1.1;
}

.wl-mini-cart__right {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex: 0 0 auto;
}

/* Checkout/Pay now actions in the mini-cart bar */
.wl-mini-cart__bar-actions {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.wl-mini-cart__btn {
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	background: rgba(255, 255, 255, 0.10);
	color: rgba(255, 255, 255, 0.92);
	font-weight: 850;
	padding: 8px 10px;
	line-height: 1;
	text-decoration: none;
}

.wl-mini-cart__btn:hover {
	background: rgba(255, 255, 255, 0.16);
	color: rgba(255, 255, 255, 0.98);
}

.wl-mini-cart__btn--primary {
	background: linear-gradient(135deg, rgba(240, 198, 74, 1) 0%, rgba(232, 175, 56, 1) 55%, rgba(206, 145, 42, 1) 100%);
	border: 0;
	/* Match the "Customise" gold CTA styling */
	border-radius: 999px;
	padding: 10px 16px;
	color: rgba(255, 255, 255, 0.96);
	font-weight: 900;
	box-shadow: 0 12px 26px rgba(240, 198, 74, 0.26);
}

.wl-mini-cart__btn--primary:hover {
	background: linear-gradient(135deg, rgba(250, 210, 90, 1) 0%, rgba(242, 188, 68, 1) 55%, rgba(220, 160, 54, 1) 100%);
	color: rgba(255, 255, 255, 0.98);
	box-shadow: 0 14px 30px rgba(240, 198, 74, 0.34);
}

/* Keep primary CTA visually consistent even when disabled */
.wl-mini-cart__btn--primary:disabled,
.wl-mini-cart__btn--primary[disabled] {
	background: linear-gradient(135deg, rgba(240, 198, 74, 0.70) 0%, rgba(232, 175, 56, 0.70) 55%, rgba(206, 145, 42, 0.70) 100%);
	border: 0;
	color: rgba(255, 255, 255, 0.78);
	opacity: 1;
}

/* "Pay now" buttons inside the sticky mini-cart / entry bar should also be pink */
.wl-mini-cart__btn--paynow {
	background: linear-gradient(135deg, rgba(255, 92, 168, 1) 0%, rgba(217, 84, 161, 1) 55%, rgba(150, 64, 140, 1) 100%);
	border: 0;
	color: #ffffff;
	font-weight: 800;
	border-radius: 999px;
	padding: 10px 16px;
	box-shadow: 0 12px 26px rgba(255, 92, 168, 0.35);
}
.wl-mini-cart__btn--paynow:hover {
	background: linear-gradient(135deg, rgba(255, 110, 180, 1) 0%, rgba(230, 100, 175, 1) 55%, rgba(170, 80, 160, 1) 100%);
	color: #ffffff;
	box-shadow: 0 14px 30px rgba(255, 92, 168, 0.45);
}
.wl-mini-cart__btn--paynow:disabled,
.wl-mini-cart__btn--paynow[disabled] {
	filter: saturate(0.85);
	opacity: 0.72;
}

.wl-mini-cart__btn--danger {
	background: rgba(255, 60, 80, 0.18);
	border-color: rgba(255, 60, 80, 0.30);
}
.wl-mini-cart__btn--danger:hover {
	background: rgba(255, 60, 80, 0.26);
	border-color: rgba(255, 60, 80, 0.44);
}

/* Entry-bar semantic actions: Add (green) + Clear (red) with Winnow glow */
.wl-mini-cart__btn--entry-add {
	background: linear-gradient(135deg, rgba(46, 204, 113, 1) 0%, rgba(22, 160, 133, 1) 60%, rgba(10, 120, 95, 1) 100%);
	border: 0;
	color: rgba(255, 255, 255, 0.98);
	font-weight: 900;
	border-radius: 999px;
	padding: 10px 16px;
	box-shadow: 0 12px 26px rgba(46, 204, 113, 0.34);
	text-shadow: 0 1px 0 rgba(0, 0, 0, 0.20);
}
.wl-mini-cart__btn--entry-add:hover {
	filter: brightness(1.05);
	color: rgba(255, 255, 255, 1);
	box-shadow: 0 14px 30px rgba(46, 204, 113, 0.44);
}
.wl-mini-cart__btn--entry-add:disabled,
.wl-mini-cart__btn--entry-add[disabled] {
	filter: saturate(0.85);
	opacity: 0.72;
}

.wl-mini-cart__btn--entry-clear {
	background: linear-gradient(135deg, rgba(255, 72, 92, 1) 0%, rgba(220, 53, 69, 1) 55%, rgba(150, 20, 32, 1) 100%);
	border: 0;
	color: rgba(255, 255, 255, 0.98);
	font-weight: 900;
	border-radius: 999px;
	padding: 10px 16px;
	box-shadow: 0 12px 26px rgba(255, 72, 92, 0.32);
	text-shadow: 0 1px 0 rgba(0, 0, 0, 0.20);
}
.wl-mini-cart__btn--entry-clear:hover {
	filter: brightness(1.05);
	color: rgba(255, 255, 255, 1);
	box-shadow: 0 14px 30px rgba(255, 72, 92, 0.42);
}
.wl-mini-cart__btn--entry-clear:disabled,
.wl-mini-cart__btn--entry-clear[disabled] {
	filter: saturate(0.85);
	opacity: 0.72;
}

.wl-mini-cart__chev {
	width: 30px;
	height: 30px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	background: rgba(255, 255, 255, 0.10);
	position: relative;
}
.wl-mini-cart__chev::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 10px;
	height: 10px;
	border-right: 2px solid rgba(255, 255, 255, 0.72);
	border-bottom: 2px solid rgba(255, 255, 255, 0.72);
	transform: translate(-50%, -60%) rotate(45deg);
	transition: transform 160ms ease;
}

.wl-mini-cart[open] .wl-mini-cart__chev::before {
	transform: translate(-50%, -40%) rotate(-135deg);
}

.wl-mini-cart__panel {
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	padding: 12px;
	max-height: min(60vh, 520px);
	overflow: auto;
}

.wl-mini-cart__panel-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 10px;
}

.wl-mini-cart__discount-note{
	margin: -6px 0 10px;
	font-size: 0.92rem;
	font-weight: 750;
}
.wl-mini-cart__panel-title {
	font-weight: 950;
	color: rgba(255, 255, 255, 0.96);
}
.wl-mini-cart__panel-actions {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.wl-mini-cart__items {
	display: grid;
	gap: 10px;
}
.wl-mini-cart__item {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 10px;
	padding: 10px;
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.10);
}
.wl-mini-cart__item-name {
	font-weight: 900;
	color: rgba(255, 255, 255, 0.96);
}
.wl-mini-cart__item-meta {
	font-size: 0.9rem;
	font-weight: 650;
	color: rgba(255, 255, 255, 0.70);
}
.wl-mini-cart__badge {
	display: inline-block;
	margin-top: 6px;
	padding: 4px 8px;
	border-radius: 999px;
	font-weight: 900;
	font-size: 0.78rem;
	background: rgba(255, 255, 255, 0.14);
	border: 1px solid rgba(255, 255, 255, 0.16);
	color: rgba(255, 255, 255, 0.92);
}
.wl-mini-cart__item-actions { flex: 0 0 auto; }

/* Prevent the fixed mini-cart from covering bottom content on mobile */
.wl-body.wl-bottom-stack-visible .site-main { padding-bottom: 190px; }

/* ----------------------------
   Mobile performance + scaling
   ---------------------------- */
@media (max-width: 767.98px) {
	/* iOS Safari struggles with blur/backdrop filters + heavy shadows while scrolling */
	.wl-card,
	.wl-panel,
	.wl-mini-cart,
	.wl-entry-bar {
		backdrop-filter: none !important;
	}
	.wl-card,
	.wl-panel,
	.wl-mini-cart,
	.wl-entry-bar {
		box-shadow: 0 12px 26px rgba(0, 0, 0, 0.22) !important;
	}

	/* Blend modes are expensive on iOS; disable where possible */
	* {
		mix-blend-mode: normal !important;
	}
	/* Keep the homepage "Play now" flame CTA effect even on mobile */
	.wl-hero-cta::before,
	.wl-hero-cta::after {
		mix-blend-mode: screen !important;
	}

	/* Simplify very heavy multi-gradient surfaces */
	.wl-card-lottery,
	.wl-panel {
		background-image: none !important;
	}
	/* Keep the hero banner gradient on mobile (brand-critical) */
	.wl-hero-card {
		background: var(--wl-hero-grad) !important;
	}
	.wl-card-lottery {
		background: linear-gradient(135deg, rgba(88, 208, 205, 0.95) 0%, rgba(20, 100, 95, 0.95) 100%) !important;
	}

	/* Reduce expensive transitions on giant number grids (Mega Millions is especially big) */
	.wl-number-picker .np-field {
		box-shadow: none !important;
	}
	.wl-number-picker .np-number {
		transition: none !important;
		box-shadow: none !important;
	}
	/* Ticket pages: kill remaining iOS jank triggers (blur layers, big shadows, blend textures, animations) */
	.wl-pb-lines .wl-number-picker .np-number {
		backdrop-filter: none !important;
		-webkit-backdrop-filter: none !important;
	}
	.wl-pb-lines .wl-number-picker .np-number:hover:not(:disabled) {
		transform: none !important;
	}
	.wl-number-picker .np-number.np-pop,
	.wl-number-picker .np-number.np-pop-off,
	.wl-pb-line.pb-qp-anim .wl-number-picker .np-number:not(.is-selected),
	.wl-number-picker .np-field.np-shake {
		animation: none !important;
	}
	/* Ticket texture overlays: disable on mobile to avoid heavy repaints */
	.wl-pb-lines .wl-lottery-card-header::before,
	.wl-pb-lines .wl-lottery-card-body::before,
	.wl-pb-lines .wl-card-bottom-strip::before,
	.wl-lottery-card-body::after {
		display: none !important;
	}
	/* Ticket card shadow: override the !important desktop shadow with a lighter one */
	.wl-pb-lines .wl-card-lottery {
		box-shadow: 0 12px 26px rgba(0, 0, 0, 0.18) !important;
	}

	/* NOTE: keep hero CTA animation enabled on mobile; reduced-motion users are still respected above */
}

@media (max-width: 767.98px) {
	/* Bottom stack spacing */
	.wl-bottom-stack {
		left: 8px;
		right: 8px;
		bottom: 10px;
		gap: 8px;
	}

	/* Mini-cart bar: allow wrapping so it doesn't overflow */
	.wl-mini-cart__bar {
		flex-wrap: wrap;
		align-items: flex-start;
	}
	.wl-mini-cart__right {
		flex-wrap: wrap;
		justify-content: flex-end;
	}
	.wl-mini-cart__btn {
		padding: 8px 9px;
		font-size: 0.84rem;
	}

	/* Mini-cart actions: keep visible in the bar, allow wrapping */
	.wl-mini-cart__bar-actions {
		justify-content: flex-end;
		gap: 10px;
	}

	/* Mini-cart items: keep remove button visible and tappable */
	.wl-mini-cart__item {
		flex-direction: column;
	}
	.wl-mini-cart__item-actions {
		width: 100%;
		display: flex;
		justify-content: flex-end;
	}
	.wl-mini-cart__btn--danger {
		min-width: 110px;
	}

	/* Entry bar: prevent details panel from covering action buttons */
	.wl-entry-bar {
		flex-direction: column;
		align-items: stretch;
	}
	.wl-entry-bar__left {
		width: 100%;
	}
	.wl-entry-bar__right {
		width: 100%;
		justify-content: space-between;
	}
	.wl-entry-bar__actions {
		width: 100%;
	}
	.wl-entry-bar__actions .btn {
		flex: 1 1 0;
	}
	.wl-entry-details__panel {
		width: 100%;
	}
	.wl-entry-bar__total {
		/* keep total visible but avoid squeezing */
		margin-left: auto;
	}
}

/* HubSpot chat bubble: when our bottom stack is visible, move chat to top-right to avoid overlap */
.wl-body.wl-bottom-stack-visible #hubspot-messages-iframe-container,
.wl-body.wl-bottom-stack-visible .hubspot-messages-iframe-container {
	top: 90px !important; /* below fixed navbar */
	bottom: auto !important;
	right: 12px !important;
	left: auto !important;
}

/* When the cart preview is OPEN (and overlaps bottom-right actions), move chat to top-right */
.wl-body.wl-mini-cart-open #hubspot-messages-iframe-container,
.wl-body.wl-mini-cart-open .hubspot-messages-iframe-container {
	top: 90px !important; /* below fixed navbar */
	bottom: auto !important;
	right: 12px !important;
	left: auto !important;
}

/* Page sections */
.wl-hero {
	margin-top: 8px;
	margin-bottom: 26px;
}

/* Home headline (between nav and hero) */
.wl-home-headline {
	margin: 22px 0 18px;
	text-align: center;
	font-weight: 950;
	letter-spacing: -0.02em;
	font-size: clamp(1.1rem, 2.4vw, 1.55rem);
	color: rgba(255, 255, 255, 0.92);
}

.wl-hero-card {
	border-radius: var(--wl-radius-lg);
	background: var(--wl-hero-grad);
	border: 1px solid rgba(255, 255, 255, 0.10);
	/* Keep depth, but avoid any colored glow outside the edges */
	box-shadow:
		0 22px 52px rgba(0, 0, 0, 0.38),
		inset 0 0 0 1px rgba(255, 255, 255, 0.08),
		inset 0 0 70px rgba(255, 120, 190, 0.22),
		inset 0 0 140px rgba(255, 120, 190, 0.12);
	overflow: hidden;
}

/* Hero "ticket" header + bottom strip to match Top lottery cards */
.wl-hero-ticket-header {
	background: var(--wl-paper-grad);
	padding: 8px 12px;
	border-bottom: 1px dashed rgba(0, 0, 0, 0.18);
	/* Use a 3-column grid so the title stays centered while the logo sits left. */
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	column-gap: 12px;
	position: relative;
	min-height: 86px;
}

.wl-hero-ticket-header::after {
	/* Right-side spacer to balance the left logo column so the title stays centered. */
	content: "";
	grid-column: 3;
}

.wl-hero-ticket-title {
	color: rgba(255, 255, 255, 1);
	font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
	font-weight: 900;
	font-size: clamp(2.2rem, 4.5vw, 3.4rem);
	letter-spacing: 0.02em;
	text-transform: uppercase;
	line-height: 1.0;
	text-align: center;
	/* slightly more "poster" feel */
	text-shadow:
		0 2px 0 rgba(0, 0, 0, 0.10),
		0 10px 22px rgba(0, 0, 0, 0.18);
	grid-column: 2;
	justify-self: center;
	min-width: 0;
	padding: 0 6px;
}

.wl-hero-ticket-logo {
	position: static;
	left: auto;
	top: auto;
	transform: none;
	grid-column: 1;
	justify-self: start;
	max-height: 70px;
	max-width: clamp(120px, 22vw, 220px);
	width: auto;
	height: auto;
	object-fit: contain;
}

/* Per-lottery play page (Powerball) */
.wl-powerball-ticket-header {
	/* Override the default hero ticket header (which is centered + absolute logo) */
	background: var(--wl-paper-grad);
	/* Keep banner height fixed; scale logo within */
	--pb-hero-pad-y: 8px;
	padding: var(--pb-hero-pad-y) 14px;
	align-items: center;
	position: relative;
	height: 140px;
	min-height: 140px;
	border-bottom: 1px dashed rgba(0, 0, 0, 0.18);
	/* Layout (robust across “in-between” widths) */
	display: flex;
	align-items: center;
	justify-content: flex-start;
	flex-wrap: wrap;            /* allows stacking automatically when tight */
	gap: 14px;
	min-height: 140px;          /* keep the ticket-header feel */
	height: auto;               /* allow growth when title wraps */
	overflow: hidden;           /* keep logo from bleeding into the body */
}

/* Flex spacer so title can sit centered without absolute positioning */
.wl-powerball-ticket-header::after {
	display: none;
	content: none;
}

.wl-powerball-ticket-header .wl-hero-ticket-title {
	/* Center within the header without overlapping */
	/* NOTE: use min-width instead of flex-basis so stacked (column) layouts don't get tall */
	flex: 1 1 0;
	min-width: 360px;
	text-align: center;
	margin: 0;
	white-space: normal; /* allow wrap instead of colliding with the logo */
	padding: 0 10px;
	font-size: clamp(1.7rem, 4.2vw, 3.2rem);
	line-height: 1.05;
}

.wl-powerball-ticket-header .wl-hero-ticket-logo {
	position: static;
	left: auto;
	top: auto;
	height: auto;
	width: auto;
	/* Banner logo size (cropped asset now fits better) */
	max-height: 112px;
	max-width: min(520px, 40vw);
	object-fit: contain;
	/* Cropped asset: no extra trimming needed */
	clip-path: none;
	display: block;
}

.wl-powerball-ticket-header .wl-hero-ticket-left {
	max-width: 100%;
	min-width: 0;
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
}

/* Stack earlier on tablets too (prevents “certain scales” overlaps) */
@media (max-width: 1200px) {
	.wl-powerball-ticket-header {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 10px;
		min-height: 0;
		height: auto;
		padding: 12px 12px;
	}

	.wl-powerball-ticket-header::after {
		display: none;
		content: none;
	}

	.wl-powerball-ticket-header .wl-hero-ticket-left {
		flex: 0 0 auto;
		justify-content: center;
	}

	.wl-powerball-ticket-header .wl-hero-ticket-title {
		/* In column layout, flex-basis would affect height; keep it content-sized */
		flex: 0 0 auto;
		min-width: 0;
		margin: 0;
		white-space: normal;
		line-height: 1.05;
	}
}

/* (Removed) duplicate .wl-hero-ticket-title rule that overrode absolute centering */

/* Powerball banner: draw days under countdown */
.wl-hero-card--play .wl-hero-play-drawdays {
	margin-top: 10px;
	font-weight: 850;
	font-size: 1.02rem;
	color: rgba(255, 255, 255, 0.78);
	line-height: 1.05;
	}

.wl-hero-ticket-left {
		grid-column: 1;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	justify-self: start;
	min-width: 0;
}

.wl-hero-ticket-fallback {
	width: 58px;
	height: 58px;
	border-radius: 16px;
	display: grid;
	place-items: center;
	font-weight: 950;
	color: rgba(0, 0, 0, 0.78);
	background: rgba(0, 0, 0, 0.08);
	border: 1px solid rgba(0, 0, 0, 0.12);
}

.wl-hero-ticket-meta {
	min-width: 0;
}

.wl-hero-ticket-game {
	font-weight: 950;
	color: rgba(0, 0, 0, 0.78);
	line-height: 1.05;
}

.wl-hero-ticket-sub {
	margin-top: 2px;
	color: rgba(0, 0, 0, 0.55);
	font-weight: 700;
	font-size: 0.92rem;
	line-height: 1.05;
}

/* Powerball banner: bigger draw-days text */
.wl-powerball-ticket-header .wl-hero-ticket-game {
	font-size: 1.05rem;
}

.wl-powerball-ticket-header .wl-hero-ticket-sub {
	font-size: 1.02rem;
	font-weight: 800;
}

/* Powerball banner: use homepage-style hero numbers */
.wl-hero-card--play .wl-hero-grid {
	grid-template-columns: 1fr;
	padding: 20px 22px 22px;
}

.wl-hero-card--play .wl-hero-value {
	font-size: clamp(3.2rem, 6.6vw, 5.0rem);
}

.wl-hero-card--play .wl-hero-sub-value {
	font-size: clamp(1.7rem, 3.4vw, 2.5rem);
}

.wl-hero-card--play .wl-hero-sub--cutoff .wl-hero-sub-value {
	font-size: clamp(1.05rem, 1.6vw, 1.25rem);
	opacity: 0.92;
}

.wl-powerball-ticket-title {
	color: rgba(255, 255, 255, 1);
	font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
	text-shadow:
		0 2px 0 rgba(0, 0, 0, 0.10),
		0 10px 22px rgba(0, 0, 0, 0.18);
}

.wl-hero-body {
	padding: 16px 18px 18px;
}

.wl-pill-strong {
	font-variant-numeric: tabular-nums;
}

.wl-game-tabs {
	background: rgba(255, 255, 255, 0.10);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 999px;
	padding: 6px;
	display: inline-flex;
	gap: 6px;
	backdrop-filter: blur(14px);
	box-shadow: 0 16px 34px rgba(0, 0, 0, 0.22), inset 0 0 0 1px rgba(255, 255, 255, 0.10);
}

.wl-game-tab {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	color: rgba(255, 255, 255, 0.78);
	font-weight: 900;
	padding: 10px 14px;
	border-radius: 999px;
	white-space: nowrap;
}

.wl-game-tab--single:not(.is-disabled) {
	border: 1px solid rgba(70, 190, 185, 0.55); /* teal */
	color: rgba(70, 210, 205, 0.92);
}

.wl-game-tab--syndicate:not(.is-disabled) {
	border: 1px solid rgba(240, 198, 74, 0.58); /* yellow */
	color: rgba(255, 231, 189, 0.95);
}

.wl-game-tab--bundles:not(.is-disabled) {
	border: 1px solid rgba(255, 92, 168, 0.55); /* pink */
	color: rgba(255, 170, 220, 0.95);
}

.wl-game-tab.is-active {
	background: rgba(255, 255, 255, 0.92);
	color: rgba(0, 0, 0, 0.82);
	box-shadow: 0 12px 26px rgba(0, 0, 0, 0.22);
}

.wl-game-tab--single.is-active {
	background: rgba(70, 190, 185, 0.92);
	color: rgba(0, 0, 0, 0.86);
}

.wl-game-tab--syndicate.is-active {
	background: rgba(240, 198, 74, 0.98);
	color: rgba(0, 0, 0, 0.86);
}

.wl-game-tab--bundles.is-active {
	background: rgba(255, 92, 168, 0.92);
	color: rgba(255, 255, 255, 0.98);
}

.wl-game-tab.is-disabled {
	opacity: 0.55;
	cursor: not-allowed;
	pointer-events: none;
}

/* Powerball: make Build/Entry panels white + bigger headings */
/* NOTE: .wl-panel base styles appear later; use higher specificity. */
.wl-panel.wl-panel-build,
.wl-panel.wl-panel-entry {
	background: #ffffff !important;
	background-image: none !important;
	color: rgba(0, 0, 0, 0.88);
}

.wl-panel-build .wl-panel-title,
.wl-panel-entry .wl-panel-title {
	font-size: 1.55rem;
	line-height: 1.05;
}

.wl-panel-build .wl-panel-sub,
.wl-panel-entry .wl-panel-sub {
	font-size: 1.02rem;
}

/* Powerball: Add Tickets row spans full width + bigger buttons */
.wl-pb-add-tickets {
	width: 100%;
	display: flex;
	align-items: center;
	flex-wrap: wrap; /* prevent overflow at “in-between” widths */
	gap: 12px;
}

.wl-pb-add-tickets-label {
	flex: 0 0 auto;
	min-width: 0;
	white-space: nowrap;
}

.wl-pb-add-tickets .btn {
	flex: 1 1 120px; /* allow wrap/shrink instead of spilling off-screen */
	min-width: 90px;
	padding: 12px 0;
	font-weight: 900;
	border-radius: 12px;
}

@media (max-width: 700px) {
	.wl-pb-add-tickets {
		align-items: stretch;
	}
	.wl-pb-add-tickets .btn {
		flex: 1 1 calc(33.33% - 12px);
	}
}

.wl-sticky {
	position: sticky;
	top: 98px;
}

/* Powerball layout: tabs are above both columns now (no sidebar offset needed). */
@media (min-width: 992px) {
	.wl-entry-col { margin-top: 0; }
}

.wl-placeholder-row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.wl-placeholder-chip {
	background: rgba(0, 0, 0, 0.04);
	border: 1px dashed rgba(0, 0, 0, 0.22);
	border-radius: 14px;
	padding: 10px 12px;
	min-width: 180px;
}

.wl-disabled {
	opacity: 0.6;
}

.wl-number-picker .np-number {
	border-radius: 999px;
}

/* Advanced number board (competitor-style microinteractions) */
.wl-number-picker .np-field {
	background: rgba(255, 255, 255, 0.55);
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 18px;
	padding: 14px;
	box-shadow: 0 10px 22px rgba(0, 0, 0, 0.08);
}

/* Powerball tickets: remove the “second tone” field bubbles */
.wl-pb-lines .wl-number-picker .np-field {
	background: transparent;
	border: 0;
	border-radius: 0;
	padding: 0;
	box-shadow: none;
}

.wl-pb-lines .wl-number-picker .np-field + .np-field {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.wl-pb-lines {
	display: grid;
	/*
	Goal UX:
	- Show 3 tickets on load with room for 2 more (5 slots)
	- Keep tickets smaller by default
	*/
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 12px;
	align-items: start;
}

@media (max-width: 1199.98px) {
	.wl-pb-lines {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 991.98px) {
	.wl-pb-lines {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 575.98px) {
	.wl-pb-lines {
		grid-template-columns: 1fr;
	}
}

.wl-pb-lines .wl-pb-line {
	/* Match Top lotteries ticket-card sizing rules */
	min-width: 0;
}

/* Empty entry state (shown after clearing tickets from the sticky entry shortcut) */
.wl-pb-empty-state {
	/* Match checkout/order-history “glass” panels: smooth, no ticket/paper texture */
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 18px;
	padding: 18px 18px;
	min-height: 140px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	background:
		radial-gradient(900px 420px at 18% 20%, rgba(88, 208, 205, 0.20) 0%, rgba(88, 208, 205, 0.00) 62%),
		radial-gradient(760px 420px at 84% 30%, rgba(255, 92, 168, 0.16) 0%, rgba(255, 92, 168, 0.00) 60%),
		linear-gradient(135deg, rgba(32, 56, 132, 0.88) 0%, rgba(40, 52, 120, 0.86) 55%, rgba(24, 34, 92, 0.86) 100%);
	box-shadow: 0 18px 46px rgba(0, 0, 0, 0.34);
	color: rgba(255, 255, 255, 0.94);
	font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
	-webkit-font-smoothing: antialiased;
}

.wl-pb-empty-title {
	font-weight: 900;
	letter-spacing: -0.01em;
	font-size: 1.10rem;
}

.wl-pb-empty-sub {
	margin-top: 4px;
	color: rgba(255, 255, 255, 0.82);
	font-weight: 650;
}

.wl-pb-picked {
	color: rgba(255, 255, 255, 0.92);
	font-weight: 850;
	font-size: 0.92rem;
}

.wl-pb-picked.is-complete {
	color: rgba(255, 255, 255, 0.96);
}

.wl-pb-picked.is-incomplete {
	color: rgba(255, 255, 255, 0.80);
}

/* Powerball tickets: action buttons */
.wl-pb-action {
	background: linear-gradient(135deg, rgba(255, 92, 168, 0.92) 0%, rgba(217, 84, 161, 0.92) 55%, rgba(150, 64, 140, 0.92) 100%);
	border: 1px solid rgba(255, 255, 255, 0.32);
	color: rgba(255, 255, 255, 0.95);
	font-weight: 850;
	box-shadow:
		0 10px 20px rgba(0, 0, 0, 0.18),
		inset 0 0 0 1px rgba(255, 255, 255, 0.18);
	text-shadow: 0 1px 0 rgba(0, 0, 0, 0.18);
}

.wl-pb-action:hover {
	filter: brightness(1.05);
	color: rgba(255, 255, 255, 1);
	box-shadow:
		0 14px 26px rgba(0, 0, 0, 0.22),
		inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}

.wl-pb-action:disabled,
.wl-pb-action[disabled] {
	/* Keep the same pink action colour; just soften intensity */
	filter: none;
	opacity: 0.86;
	cursor: not-allowed;
}

/* Big “Quick pick all” button under the chips */
.wl-pb-quickpick-all {
	padding: 14px 22px;
	border-radius: 14px;
	font-size: 1.05rem;
	font-weight: 950;
}

.wl-pb-remove {
	background: linear-gradient(135deg, rgba(220, 53, 69, 0.95) 0%, rgba(176, 35, 47, 0.95) 100%);
	border: 1px solid rgba(255, 255, 255, 0.22);
	color: rgba(255, 255, 255, 0.96);
	font-weight: 850;
}

.wl-pb-clear {
	background: linear-gradient(135deg, rgba(240, 198, 74, 1) 0%, rgba(255, 231, 189, 1) 60%, rgba(245, 208, 150, 1) 100%);
	border: 1px solid rgba(0, 0, 0, 0.18);
	color: rgba(0, 0, 0, 0.82);
	font-weight: 900;
}

.wl-pb-clear:hover {
	filter: brightness(1.03);
	color: rgba(0, 0, 0, 0.9);
}

.wl-pb-remove:hover {
	filter: brightness(1.05);
	color: rgba(255, 255, 255, 1);
}

.wl-number-picker .np-numbers {
	/* “board” feel similar to major competitors */
	gap: 8px;
}

.wl-number-picker .np-number {
	border: 1px solid rgba(0, 0, 0, 0.10);
	background: rgba(255, 255, 255, 0.92);
	box-shadow:
		0 8px 16px rgba(0, 0, 0, 0.08),
		inset 0 -1px 0 rgba(0, 0, 0, 0.06);
	transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease;
}

/* Powerball tickets: pink glass number buttons (like the hero pink glass) */
.wl-pb-lines .wl-number-picker .np-number {
	/* Flat glass: no internal gradients, just solid pink + brighter outline */
	background: none;
	background-color: rgba(255, 92, 168, 0.38);
	border: 1px solid rgba(0, 0, 0, 0.18); /* no white outline on unselected */
	backdrop-filter: blur(10px);
	box-shadow:
		0 6px 14px rgba(0, 0, 0, 0.14),
		inset 0 0 0 1px rgba(255, 255, 255, 0.12); /* subtle “glass edge”, not a white ring */
	color: rgba(0, 0, 0, 0.86);
}

.wl-pb-lines .wl-number-picker .np-number:hover:not(:disabled) {
	box-shadow:
		0 12px 26px rgba(0, 0, 0, 0.14),
		inset 0 0 0 1px rgba(255, 255, 255, 0.26);
}

.wl-pb-lines .wl-number-picker .np-number.is-selected {
	background: none;
	background-color: rgba(255, 92, 168, 0.92);
	border-color: rgba(255, 255, 255, 0.65);
	color: #ffffff;
	box-shadow:
		0 10px 22px rgba(0, 0, 0, 0.18),
		inset 0 0 0 2px rgba(255, 255, 255, 0.35);
}

.wl-pb-lines .wl-number-picker .np-number.is-selected .np-label {
	color: #ffffff;
}

/* Quick pick animation: full-board pulse then fade */
.wl-pb-line.pb-qp-anim .wl-number-picker .np-number:not(.is-selected) {
	animation: wlPbQpPulse 620ms ease-in-out;
}

.wl-pb-lines .wl-number-picker .np-number.pb-picked-glow {
	box-shadow:
		0 0 0 1px rgba(255, 255, 255, 0.45),
		0 0 22px rgba(255, 92, 168, 0.38);
}

@keyframes wlPbQpPulse {
	0% {
		background-color: rgba(255, 92, 168, 0.38);
		border-color: rgba(255, 255, 255, 0.45);
		filter: brightness(1);
		transform: translateY(0) scale(1);
		box-shadow: 0 6px 14px rgba(0, 0, 0, 0.14), inset 0 0 0 2px rgba(255, 255, 255, 0.28);
	}
	35% {
		/* “Turn on”: look like selected for a moment */
		background-color: rgba(255, 92, 168, 0.92);
		border-color: rgba(255, 255, 255, 0.65);
		filter: brightness(1.08);
		transform: translateY(-1px) scale(1.02);
		box-shadow:
			0 0 0 1px rgba(255, 255, 255, 0.42),
			0 0 26px rgba(255, 92, 168, 0.34);
	}
	100% {
		background-color: rgba(255, 92, 168, 0.38);
		border-color: rgba(255, 255, 255, 0.45);
		filter: brightness(1);
		transform: translateY(0) scale(1);
		box-shadow: 0 6px 14px rgba(0, 0, 0, 0.14), inset 0 0 0 2px rgba(255, 255, 255, 0.28);
	}
}

.wl-number-picker .np-number:hover:not(:disabled) {
	transform: translateY(-1px);
	box-shadow:
		0 10px 18px rgba(0, 0, 0, 0.12),
		inset 0 -1px 0 rgba(0, 0, 0, 0.06);
}

.wl-number-picker .np-number.is-selected {
	background: rgba(16, 16, 18, 0.86);
	color: #ffffff;
	border-color: rgba(16, 16, 18, 0.86);
}

.wl-number-picker .np-number.is-selected .np-label {
	color: #ffffff;
}

.wl-number-picker .np-number.is-disabled {
	filter: grayscale(0.35);
	opacity: 0.55;
}

/* “GiantLottos-like” selection pop */
.wl-number-picker .np-number.np-pop {
	animation: wlNpPop 220ms ease-out;
}

.wl-number-picker .np-number.np-pop-off {
	animation: wlNpPopOff 200ms ease-out;
}

@keyframes wlNpPop {
	0% { transform: translateY(0) scale(1); }
	55% { transform: translateY(-1px) scale(1.10); }
	100% { transform: translateY(0) scale(1); }
}

@keyframes wlNpPopOff {
	0% { transform: translateY(0) scale(1); }
	55% { transform: translateY(0) scale(0.92); }
	100% { transform: translateY(0) scale(1); }
}

.wl-number-picker .np-field.np-shake {
	animation: wlNpShake 320ms ease-in-out;
}

@keyframes wlNpShake {
	0% { transform: translateX(0); }
	20% { transform: translateX(-4px); }
	40% { transform: translateX(4px); }
	60% { transform: translateX(-3px); }
	80% { transform: translateX(3px); }
	100% { transform: translateX(0); }
}

.wl-number-picker .np-field.np-next {
	outline: 3px solid rgba(88, 208, 205, 0.35);
	outline-offset: 2px;
}

/* Powerball: make the Powerball field feel distinct */
.wl-np-field-powerball .np-number.is-selected {
	background: rgba(255, 80, 120, 0.95);
	color: #ffffff;
	border-color: rgba(255, 80, 120, 0.95);
}

.wl-np-field-powerball .np-number.is-selected .np-label {
	color: #ffffff;
}

/* Bonus boards (Euro numbers, Lucky Stars, Superzahl, Chance, etc.) */
.wl-np-field-bonus .np-number.is-selected {
	background: rgba(88, 208, 205, 0.92);
	color: #ffffff;
	border-color: rgba(88, 208, 205, 0.92);
}

.wl-np-field-bonus .np-number.is-selected .np-label {
	color: #ffffff;
}

/* Huge boards (e.g. SuperEnalotto 1–90): smaller balls + tighter grid */
.wl-pb-lines .wl-np-field-huge {
	--np-size: clamp(34px, 2.0vw, 44px);
	--np-gap: clamp(6px, 0.6vw, 10px);
}

.wl-pb-lines .wl-np-field-huge .np-numbers {
	grid-template-columns: repeat(10, minmax(0, 1fr));
	justify-items: stretch;
}

.wl-pb-lines .wl-np-field-bonus .np-numbers {
	grid-template-columns: repeat(6, minmax(0, 1fr));
	justify-items: stretch;
}

@media (max-width: 520px) {
	.wl-powerball-ticket-header {
		/* Switch to stacked layout when it can't fit side-by-side */
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 8px;
		min-height: 0;
		height: auto;
		padding: 12px 12px;
	}

	.wl-powerball-ticket-header::after {
		display: none;
	}

	.wl-powerball-ticket-header .wl-hero-ticket-left {
		justify-content: center;
	}

	.wl-powerball-ticket-header .wl-hero-ticket-logo {
		max-height: 92px;
		max-width: min(520px, 86vw);
	}

	.wl-powerball-ticket-header .wl-hero-ticket-title {
		flex: 0 0 auto;
		min-width: 0;
		position: static;
		inset: auto;
		transform: none;
		display: block;
		width: 100%;
		text-align: center;
	}
}

/* Hero bottom strip (matches ticket % strip style) */
.wl-hero-bottom-strip {
	background: var(--wl-paper-grad);
	color: #FF0000;
	font-weight: 950;
	font-size: 0.92rem;
	text-align: center;
	letter-spacing: -0.01em;
	line-height: 1.1;
	padding: 8px 10px;
	border-top: 2px dashed rgba(0, 0, 0, 0.18);
	border-radius: 0 0 var(--wl-radius-lg) var(--wl-radius-lg);
}

/* Add a subtle warm "neon diffusion" layer INSIDE the card only */
.wl-hero-card::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	background:
		radial-gradient(700px 320px at 28% 55%, rgba(255, 214, 240, 0.22) 0%, rgba(255, 214, 240, 0.00) 60%),
		radial-gradient(900px 520px at 18% 45%, rgba(255, 92, 168, 0.18) 0%, rgba(255, 92, 168, 0.00) 65%);
	mix-blend-mode: screen;
	opacity: 0.9;
}

.wl-hero-card {
	position: relative;
}

.wl-hero-grid {
	display: grid;
	grid-template-columns: 1.2fr 0.8fr;
	gap: 18px;
	padding: 26px;
}

/* Homepage featured hero: make the promo image flush edge-to-edge on the right */
.wl-hero .wl-hero-grid {
	/* Remove inner padding so the right panel can be full-bleed */
	padding: 0;
	gap: 0;
	grid-template-columns: 1.15fr 0.85fr;
}

.wl-hero .wl-hero-left {
	padding: 26px;
}

.wl-hero .wl-hero-right {
	align-self: stretch;
}

.wl-hero .wl-hero-image {
	/* Fill the full pink bar height and reach the right edge */
	border-radius: 0;
	border: 0;
	background: none;
	backdrop-filter: none;
	padding: 0;
	min-height: 0;
	position: relative;
	overflow: hidden;
}

.wl-hero .wl-hero-promo-img {
	/* Cover the full panel (will crop as needed) */
	border-radius: 0;
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	object-position: center;
	/*
	Fade the IMAGE itself into the hero gradient:
	- At the seam (left edge of the image), opacity is 0
	- It ramps smoothly to fully opaque as you move right
	*/
	/* Wider ramp to avoid a visible “hard line” at some in-between widths */
	-webkit-mask-image: linear-gradient(
		90deg,
		rgba(0, 0, 0, 0) 0%,
		rgba(0, 0, 0, 0.25) 10%,
		rgba(0, 0, 0, 0.70) 26%,
		rgba(0, 0, 0, 1) 45%,
		rgba(0, 0, 0, 1) 100%
	);
	mask-image: linear-gradient(
		90deg,
		rgba(0, 0, 0, 0) 0%,
		rgba(0, 0, 0, 0.25) 10%,
		rgba(0, 0, 0, 0.70) 26%,
		rgba(0, 0, 0, 1) 45%,
		rgba(0, 0, 0, 1) 100%
	);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
}

/* Keep the hero image full-bleed across ALL breakpoints */
@media (max-width: 991.98px) {
	.wl-hero .wl-hero-grid {
		padding: 0;
		gap: 0;
	}
	.wl-hero .wl-hero-left {
		padding: 18px;
	}
	.wl-hero .wl-hero-image {
		border-radius: 0;
	}
	.wl-hero .wl-hero-promo-img {
		border-radius: 0;
	}
}

/* Phones: stack the hero image so it doesn't get squeezed into a tiny column */
@media (max-width: 575.98px) {
	.wl-hero .wl-hero-grid {
		grid-template-columns: 1fr;
		grid-template-areas:
			"right"
			"left";
	}
	.wl-hero .wl-hero-left { grid-area: left; }
	.wl-hero .wl-hero-right { grid-area: right; }

	.wl-hero .wl-hero-image {
		min-height: 210px;
	}
	/* On stacked layout, fade the BOTTOM edge of the photo into the hero gradient (prevents a hard seam) */
	.wl-hero .wl-hero-right .wl-hero-promo-img {
		-webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 72%, rgba(0, 0, 0, 0) 100%);
		mask-image: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 72%, rgba(0, 0, 0, 0) 100%);
		-webkit-mask-repeat: no-repeat;
		mask-repeat: no-repeat;
		-webkit-mask-size: 100% 100%;
		mask-size: 100% 100%;
	}
}

.wl-hero-heading {
	font-size: 1.8rem;
	font-weight: 900;
	text-align: center;
	margin: 0 0 14px 0;
	color: rgba(255, 255, 255, 0.95);
	letter-spacing: -0.02em;
}

.wl-pill {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.18);
	border: 1px solid rgba(255, 255, 255, 0.18);
	color: rgba(255, 255, 255, 0.92);
	font-weight: 800;
	width: fit-content;
}

.wl-hero-game {
	margin-top: 14px;
}

.wl-hero-game-name {
	font-size: 1.35rem;
	font-weight: 800;
	color: rgba(255, 255, 255, 0.96);
}

.wl-hero-game-code {
	font-size: 0.92rem;
	color: rgba(255, 255, 255, 0.75);
}

.wl-hero-amount {
	margin-top: 8px;
	font-weight: 900;
	letter-spacing: -0.03em;
	line-height: 1;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 10px;
}

.wl-hero-currency {
	font-size: 2.1rem;
	color: rgba(255, 255, 255, 0.92);
}

.wl-hero-currency.wl-hero-currency--code {
	font-size: 1.05rem;
	font-weight: 950;
	letter-spacing: -0.01em;
	color: rgba(255, 255, 255, 0.82);
}

.wl-hero-symbol {
	display: inline-block;
	font-size: 0.92em; /* keep it big next to the jackpot number */
	margin-right: 0.08em;
	letter-spacing: -0.02em;
	color: rgba(255, 255, 255, 0.96);
}

.wl-hero-value {
	font-size: clamp(2.6rem, 6vw, 4.1rem);
	color: rgba(255, 255, 255, 0.98);
}

.wl-hero-sub {
	margin-top: 12px;
}

.wl-hero-sub-label {
	font-size: 0.92rem;
	color: rgba(255, 255, 255, 0.75);
}

.wl-hero-sub-value {
	margin-top: 2px;
	font-weight: 900;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
}

.wl-hero-inc {
	margin-top: 10px;
	color: rgba(255, 255, 255, 0.92);
	font-weight: 950;
	font-size: 0.95rem;
}

.wl-hero-roll {
	margin-top: 8px;
	color: rgba(255, 255, 255, 0.86);
	font-weight: 900;
	font-size: 0.92rem;
}

.wl-hero-actions {
	margin-top: 18px;
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.wl-hero-image {
	height: 100%;
	min-height: 220px;
	border-radius: 18px;
	/* Make the promo panel non-transparent so the hero doesn't look "see-through" on the right */
	background: linear-gradient(135deg, rgba(255, 170, 222, 1) 0%, rgba(206, 108, 173, 1) 42%, rgba(118, 70, 138, 1) 100%);
	border: 1px solid rgba(255, 255, 255, 0.18);
	backdrop-filter: blur(12px);
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	padding: 16px;
	color: rgba(255, 255, 255, 0.85);
	overflow: hidden;
	position: relative;
}

/* Promo image bars removed (image now covers the area) */

.wl-hero-promo-img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: top center;
	border-radius: 18px;
	position: relative;
	z-index: 1;
	flex: 1;
}

.wl-hero-image-fallback {
	position: relative;
	z-index: 1;
}

.wl-hero-image-title {
	font-weight: 800;
	font-size: 0.95rem;
}

.wl-hero-image-sub {
	font-weight: 700;
	font-size: 0.85rem;
	color: rgba(255, 255, 255, 0.70);
}

.wl-section {
	margin-top: 26px;
}

.wl-section-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 12px;
	margin-bottom: 14px;
}

.wl-sortbar {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.wl-sort-chip {
	display: inline-flex;
	align-items: center;
	padding: 8px 12px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	background: rgba(255, 255, 255, 0.06);
	color: rgba(255, 255, 255, 0.88);
	font-weight: 800;
	font-size: 0.88rem;
	text-decoration: none;
}

.wl-sort-chip:hover {
	background: rgba(255, 255, 255, 0.10);
	color: rgba(255, 255, 255, 0.98);
}

.wl-sort-chip.is-active {
	background: rgba(255, 255, 255, 0.18);
	border-color: rgba(255, 255, 255, 0.28);
	color: rgba(255, 255, 255, 0.98);
}

/* Mobile: compact sort controls into a 2-column grid */
@media (max-width: 575.98px) {
	.wl-sortbar {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}
	.wl-sort-chip {
		width: 100%;
		justify-content: center;
		padding: 10px 10px;
		font-size: 0.86rem;
	}
}

.wl-sort-note {
	margin-top: 10px;
	color: rgba(255, 255, 255, 0.82);
	font-weight: 750;
	font-size: 0.9rem;
}

.wl-metric-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 8px;
}

.wl-metric-badges-hero {
	margin-top: 10px;
}

.wl-metric-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 2px 6px;
	border-radius: 4px;
	font-weight: 950;
	font-size: 0.80rem;
	letter-spacing: -0.01em;
	white-space: nowrap;
	line-height: 1.1;
}

/* "Red circle behind them" look (bubble) */
.wl-metric-badge-red {
	background: #FF0000;
	border: 1px solid rgba(255, 255, 255, 0.22);
	color: rgba(255, 255, 255, 0.96);
	box-shadow: 0 14px 28px rgba(0, 0, 0, 0.22);
}

.wl-rollover {
	margin-top: 8px;
	color: rgba(255, 255, 255, 0.90);
	font-weight: 900;
	font-size: 0.88rem;
}

.wl-section-title {
	font-size: 1.35rem;
	font-weight: 900;
	letter-spacing: -0.02em;
}

.wl-section-sub {
	color: var(--wl-muted);
	font-size: 0.95rem;
}

.wl-cards-row {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
}

/* Top lotteries: horizontal scroll beyond the first few cards */
.wl-cards-row-scroll {
	display: flex;
	gap: 14px;
	flex-wrap: nowrap;
	align-items: stretch;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	padding-bottom: 6px;
	-webkit-overflow-scrolling: touch;
}

.wl-cards-row-scroll > .wl-lottery-card-v2 {
	/* Keep the original 4-up card width; extra cards overflow to the right */
	flex: 0 0 calc((100% - (14px * 3)) / 4);
	scroll-snap-align: start;
}

@media (max-width: 575.98px) {
	/* Phones: show a 2x2 grid (top 4 only) instead of a horizontal scroller */
	.wl-cards-row-scroll.wl-toplotteries-row {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
		overflow: visible;
		scroll-snap-type: none;
		padding-bottom: 0;
	}
	.wl-cards-row-scroll.wl-toplotteries-row > .wl-lottery-card-v2 {
		flex: unset;
		width: auto;
		scroll-snap-align: unset;
	}
	.wl-cards-row-scroll.wl-toplotteries-row > .wl-lottery-card-v2:nth-child(n+5) {
		display: none;
	}
}

.wl-cards-4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.wl-card {
	background: rgba(255, 255, 255, 0.07);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: var(--wl-radius-md);
	backdrop-filter: blur(14px);
	box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22);
	padding: 14px;
	position: relative;
	z-index: 1;
}

.wl-card-lottery {
	/* Neon green gradient with glow effect similar to hero pink */
	background:
		/* main wash (opaque green gradient) */
		radial-gradient(600px 300px at 25% 50%, rgba(88, 208, 205, 1) 0%, rgba(70, 190, 185, 1) 28%, rgba(50, 160, 155, 1) 48%, rgba(35, 130, 125, 1) 72%, rgba(20, 100, 95, 1) 100%),
		/* bright lift on the right */
		radial-gradient(500px 350px at 75% 50%, rgba(100, 220, 215, 0.45) 0%, rgba(100, 220, 215, 0.00) 62%),
		radial-gradient(400px 200px at 75% 35%, rgba(120, 240, 235, 0.30) 0%, rgba(120, 240, 235, 0.00) 70%),
		linear-gradient(135deg, rgba(88, 208, 205, 1) 0%, rgba(50, 160, 155, 1) 55%, rgba(20, 100, 95, 1) 100%);
	border: 1px solid rgba(88, 208, 205, 0.3);
	box-shadow:
		0 14px 34px rgba(0, 0, 0, 0.22),
		inset 0 0 0 1px rgba(255, 255, 255, 0.08),
		inset 0 0 50px rgba(88, 208, 205, 0.15),
		inset 0 0 100px rgba(88, 208, 205, 0.08);
	position: relative;
	overflow: hidden;
}

/* Redesigned Top Lottery cards: white logo header + teal info body */
.wl-lottery-card-header {
	background: var(--wl-paper-grad);
	padding: 14px;
	border-bottom: 2px dashed rgba(0, 0, 0, 0.18); /* perforation */
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 110px;
	position: relative;
	isolation: isolate;
	flex: 0 0 auto;
}

/* Removed side-notches: they were causing a thin seam/line at the cutout on some screens */

.wl-lottery-logo {
	max-width: 85%;
	max-height: 72px;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
}

/* Powerball tickets: oversized, black logo in header */
.wl-pb-lines .wl-lottery-card-header {
	/* Reduce beige area to hug the logo */
	min-height: 0;
	height: clamp(92px, 9vw, 118px);
	padding: 10px 12px;
	overflow: hidden; /* allows scaling logo without layout jumps */
}

.wl-pb-lines .wl-lottery-card-header::before {
	/* Paper texture overlay (beige header) */
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		/* subtle fibers */
		repeating-linear-gradient(
			-12deg,
			rgba(0, 0, 0, 0.035) 0px,
			rgba(0, 0, 0, 0.035) 1px,
			rgba(255, 255, 255, 0.00) 1px,
			rgba(255, 255, 255, 0.00) 7px
		),
		/* speckle */
		radial-gradient(1px 1px at 18% 28%, rgba(0, 0, 0, 0.06) 0 1px, rgba(0, 0, 0, 0.00) 2px),
		radial-gradient(1px 1px at 62% 42%, rgba(0, 0, 0, 0.05) 0 1px, rgba(0, 0, 0, 0.00) 2px),
		radial-gradient(1px 1px at 78% 66%, rgba(0, 0, 0, 0.04) 0 1px, rgba(0, 0, 0, 0.00) 2px);
	opacity: 0.55;
	mix-blend-mode: multiply;
}

.wl-pb-lines .wl-pb-ticket-logo {
	/* Banner logos are already trimmed; don't crop/grey them */
	max-width: 96%;
	max-height: 92px;
	width: auto;
	height: auto;
	object-fit: contain;
	filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.10));
}

@media (max-width: 991.98px) {
	.wl-pb-lines .wl-lottery-card-header {
		min-height: 0;
		height: clamp(90px, 14vw, 110px);
		padding: 10px 12px;
	}
	.wl-pb-lines .wl-pb-ticket-logo {
		max-height: 88px;
	}
}

@media (max-width: 575.98px) {
	.wl-pb-lines .wl-lottery-card-header {
		min-height: 0;
		height: clamp(86px, 22vw, 105px);
		padding: 8px 10px;
	}
	.wl-pb-lines .wl-pb-ticket-logo {
		max-width: 94%;
		max-height: 74px;
	}
}

.wl-lottery-logo-fallback {
	color: rgba(0, 0, 0, 0.70);
	font-weight: 900;
	font-size: 1rem;
	text-align: center;
}

.wl-lottery-card-body {
	padding: 14px;
	position: relative;
	z-index: 2;
	color: rgba(255, 255, 255, 0.92);
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

/* Powerball tickets: let the picker fill the full ticket width */
.wl-pb-lines .wl-lottery-card-body {
	align-items: stretch;
	padding: 10px;
}

.wl-pb-lines [data-pb-board],
.wl-pb-lines .number-picker,
.wl-pb-lines .number-picker .np-numbers {
	width: 100%;
}

/* Powerball tickets: put the content on the beige paper (not green) */
.wl-pb-lines .wl-card-lottery {
	/* Single-tone blue (no beige bubble) */
	background: transparent !important;
	border: 0 !important;
	box-shadow: 0 18px 46px rgba(0, 0, 0, 0.22) !important;
}

.wl-pb-lines .wl-card-lottery::before {
	display: none;
}

.wl-pb-lines .wl-lottery-card-body {
	background: rgba(32, 56, 132, 0.92);
	color: rgba(255, 255, 255, 0.92);
}

.wl-pb-lines .wl-lottery-card-body::before {
	/* Paper texture overlay (blue body) */
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		repeating-linear-gradient(
			14deg,
			rgba(255, 255, 255, 0.05) 0px,
			rgba(255, 255, 255, 0.05) 1px,
			rgba(255, 255, 255, 0.00) 1px,
			rgba(255, 255, 255, 0.00) 8px
		),
		radial-gradient(1px 1px at 20% 20%, rgba(255, 255, 255, 0.07) 0 1px, rgba(255, 255, 255, 0.00) 2px),
		radial-gradient(1px 1px at 55% 60%, rgba(255, 255, 255, 0.06) 0 1px, rgba(255, 255, 255, 0.00) 2px),
		radial-gradient(1px 1px at 80% 35%, rgba(255, 255, 255, 0.05) 0 1px, rgba(255, 255, 255, 0.00) 2px);
	opacity: 0.38;
	mix-blend-mode: overlay;
}

.wl-pb-lines .wl-lottery-card-body::after {
	display: none;
}

.wl-pb-lines .wl-card-bottom-strip {
	background: rgba(32, 56, 132, 0.92);
	position: relative;
}

.wl-pb-lines .wl-card-bottom-strip::before {
	/* Paper texture overlay (blue strip) */
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		repeating-linear-gradient(
			0deg,
			rgba(255, 255, 255, 0.05) 0px,
			rgba(255, 255, 255, 0.05) 1px,
			rgba(255, 255, 255, 0.00) 1px,
			rgba(255, 255, 255, 0.00) 9px
		);
	opacity: 0.22;
	mix-blend-mode: overlay;
}

.wl-pb-lines .text-muted {
	color: rgba(255, 255, 255, 0.78) !important;
}

/* Subtle ticket "barcode" texture on the right side of the teal section */
.wl-lottery-card-body::after {
	content: "";
	position: absolute;
	top: 12px;
	right: 12px;
	bottom: 12px;
	width: 64px;
	background:
		repeating-linear-gradient(
			90deg,
			rgba(255, 255, 255, 0.22) 0px,
			rgba(255, 255, 255, 0.22) 2px,
			rgba(255, 255, 255, 0.00) 2px,
			rgba(255, 255, 255, 0.00) 5px
		);
	opacity: 0.12;
	border-radius: 8px;
	pointer-events: none;
	mix-blend-mode: soft-light;
}

.wl-lottery-jackpot {
	margin-top: 0;
}

.wl-lottery-currency {
	font-weight: 950;
	font-size: 1.02rem;
	letter-spacing: -0.01em;
	line-height: 1.05;
}

.wl-amt-symbol {
	display: inline-block;
	margin-right: 0.22em;
	font-weight: 950;
}

.wl-lottery-amount {
	margin-top: 4px;
	font-weight: 950;
	/* As large as possible without causing extra wrapping */
	font-size: clamp(1.25rem, 2.4vw, 1.75rem);
	letter-spacing: -0.015em;
	line-height: 1.05;
	white-space: nowrap;
	max-width: 100%;
}

.wl-lottery-countdown {
	margin-top: 6px;
	font-weight: 900;
	font-size: 0.95rem;
	color: rgba(255, 255, 255, 0.90);
}

.wl-lottery-rollover {
	margin-top: 6px;
	font-weight: 850;
	font-size: 0.92rem;
	color: rgba(255, 255, 255, 0.88);
}

.wl-lottery-cta {
	margin-top: 12px;
	align-self: center;
}

/* This layout uses the shared bottom strip component for % increase */

/* Make v2 lottery cards edge-to-edge so the white header fills the whole top */
.wl-lottery-card-v2 {
	padding: 0;
	/* Remove outer outline entirely (prevents thin green line) */
	border: 0 !important;
	box-shadow: 0 18px 46px rgba(0, 0, 0, 0.30) !important;
	display: flex;
	flex-direction: column;
}

/* The green outline was coming from the lottery card border; remove it for ticket cards */
.wl-lottery-card-v2.wl-card-lottery {
	border: 0 !important;
}

/* Ticket side stripe (brand) */
.wl-lottery-card-v2 {
	--wl-ticket-stripe-w: 26px;
	position: relative;
}

.wl-lottery-card-v2::after {
	content: "WINNOW LOTTO WINNOW LOTTO WINNOW LOTTO WINNOW LOTTO WINNOW LOTTO";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: var(--wl-ticket-stripe-w);
	background: #FF0000;
	color: #ffffff;
	font-weight: 950;
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 8px 0;
	writing-mode: vertical-rl;
	text-orientation: mixed;
	transform: rotate(180deg); /* read top-to-bottom */
	white-space: nowrap;       /* keep it to a single vertical column */
	overflow: hidden;          /* clip overflow instead of wrapping into a 2nd column */
	z-index: 3;
	pointer-events: none;
}

/* Powerball tickets: make the stripe text run the full height (not centered) */
.wl-pb-lines .wl-lottery-card-v2::after {
	content: "WINNOW LOTTO WINNOW LOTTO WINNOW LOTTO WINNOW LOTTO WINNOW LOTTO WINNOW LOTTO WINNOW LOTTO WINNOW LOTTO WINNOW LOTTO WINNOW LOTTO WINNOW LOTTO WINNOW LOTTO WINNOW LOTTO WINNOW LOTTO WINNOW LOTTO WINNOW LOTTO WINNOW LOTTO WINNOW LOTTO WINNOW LOTTO WINNOW LOTTO WINNOW LOTTO WINNOW LOTTO WINNOW LOTTO WINNOW LOTTO WINNOW LOTTO WINNOW LOTTO WINNOW LOTTO WINNOW LOTTO WINNOW LOTTO WINNOW LOTTO WINNOW LOTTO WINNOW LOTTO WINNOW LOTTO";
	/* Center within the red bar */
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

/* Shift card sections to make room for stripe */
.wl-lottery-card-v2 .wl-lottery-card-header,
.wl-lottery-card-v2 .wl-lottery-card-body,
.wl-lottery-card-v2 .wl-card-bottom-strip {
	padding-left: calc(14px + var(--wl-ticket-stripe-w));
}

.wl-lottery-card-v2 .wl-card-bottom-strip {
	/* bottom strip uses its own padding; keep it consistent */
	padding-top: 8px;
	padding-bottom: 8px;
}

/* Removed: inner dashed outline (it caused a visible seam near the side notch on teal) */

.wl-lottery-card-v2 .wl-card-bottom-strip {
	/* override the old negative margins; we want full-width strip */
	margin: 0;
	border-radius: 0 0 var(--wl-radius-md) var(--wl-radius-md);
	border-top: 2px dashed rgba(0, 0, 0, 0.18); /* ticket stub feel */
	flex: 0 0 auto;
}

.wl-card-lottery::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	background:
		radial-gradient(500px 250px at 30% 55%, rgba(150, 255, 250, 0.22) 0%, rgba(150, 255, 250, 0.00) 60%),
		radial-gradient(600px 400px at 20% 45%, rgba(88, 208, 205, 0.18) 0%, rgba(88, 208, 205, 0.00) 65%);
	mix-blend-mode: screen;
	opacity: 0.9;
}

.wl-card-top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 10px;
	position: relative;
	z-index: 2;
}

/* Stack name + logo with a shared left edge (prevents "floating" logos) */
.wl-card-game {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.wl-hero-game {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.wl-game-head {
	display: flex;
	align-items: center;
	gap: 10px;
}

.wl-game-logo {
	width: 34px;
	height: 34px;
	border-radius: 10px;
	object-fit: contain;
	object-position: center;
	background: rgba(255, 255, 255, 0.10);
	border: 1px solid rgba(255, 255, 255, 0.16);
	padding: 4px;
}

.wl-game-head-light .wl-game-logo {
	background: rgba(0, 0, 0, 0.04);
	border-color: rgba(0, 0, 0, 0.08);
}

.wl-game-logo-sm {
	width: 28px;
	height: 28px;
	border-radius: 9px;
	padding: 3px;
}

.wl-game-logo-lg {
	width: auto;
	max-width: 220px;
	height: 144px;
	border-radius: 0;
	padding: 0;
	margin-top: 10px;
	display: block;
	align-self: flex-start;
	object-position: left center;
}

.wl-game-logo-plain {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
	border-radius: 0 !important;
}

.wl-card-game-name {
	font-weight: 950;
	font-size: 1.15rem;
	letter-spacing: -0.01em;
}

.wl-card-game-code {
	color: var(--wl-muted);
	font-size: 0.9rem;
}

.wl-card-meta {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.wl-card-amt {
	font-weight: 950;
	font-size: 1.15rem;
	color: rgba(255, 255, 255, 0.92);
}

/* Products page (bootstrap cards) */
.wl-prod-game-name {
	font-size: 1.25rem;
	font-weight: 950;
}

.wl-prod-jackpot {
	font-size: clamp(1.1rem, 2.0vw, 1.5rem);
	font-weight: 950;
	color: rgba(0, 0, 0, 0.82);
}

.wl-card-ct {
	color: rgba(255, 255, 255, 0.78);
	font-size: 0.9rem;
	margin-top: 2px;
}

.wl-card-inc {
	color: rgba(255, 255, 255, 0.90);
	font-weight: 900;
	font-size: 0.85rem;
	margin-top: 6px;
}

.wl-card-roll {
	color: rgba(255, 255, 255, 0.86);
	font-weight: 900;
	font-size: 0.85rem;
	margin-top: 6px;
}

.wl-card-actions {
	margin-top: 12px;
	display: flex;
	align-items: center;
	gap: 10px;
	position: relative;
	z-index: 2;
}

.wl-card-bottom-strip {
	margin: 12px -14px -14px;
	padding: 8px 10px;
	background: var(--wl-paper-grad);
	color: #FF0000;
	font-weight: 950;
	font-size: 0.92rem;
	text-align: center;
	letter-spacing: -0.01em;
	line-height: 1.1;
	/* match card rounding at the bottom */
	border-radius: 0 0 var(--wl-radius-md) var(--wl-radius-md);
	position: relative;
	z-index: 2;
}

.wl-link-sub {
	color: rgba(255, 255, 255, 0.75);
	font-weight: 700;
	font-size: 0.88rem;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.wl-link-sub:hover {
	color: rgba(255, 255, 255, 0.92);
}

.wl-link-sub.disabled {
	opacity: 0.5;
	text-decoration: none;
	cursor: not-allowed;
}

.wl-card-coming {
	background: rgba(255, 255, 255, 0.05);
}

.wl-card-coming-title {
	font-weight: 900;
}

.wl-card-coming-sub {
	color: rgba(255, 255, 255, 0.65);
	font-size: 0.9rem;
	margin-top: 4px;
}

.wl-card-raffle {
	background: rgba(255, 255, 255, 0.06);
}

.wl-bottom {
	margin-top: 30px;
}

/* Home: How it works strip (white text on background, no box) */
.wl-home-hiwstrip {
	margin-top: 14px;
}

.wl-home-hiwstrip__grid {
	display: grid;
	grid-template-columns: 1.35fr 0.65fr;
	gap: 14px;
	align-items: start;
}

@media (max-width: 991.98px) {
	.wl-home-hiwstrip__grid {
		grid-template-columns: 1fr;
	}
}

.wl-home-hiwstrip__title {
	font-size: 1.35rem;
	font-weight: 950;
	letter-spacing: -0.02em;
	color: rgba(255, 255, 255, 0.98);
}

.wl-home-hiwstrip__sub {
	margin-top: 6px;
	color: rgba(255, 255, 255, 0.80);
	font-weight: 650;
}

.wl-home-hiwstrip__steps {
	margin-top: 12px;
	display: grid;
	gap: 10px;
}

.wl-home-step {
	display: flex;
	gap: 10px;
	align-items: flex-start;
}

.wl-home-step__icon {
	width: 34px;
	height: 34px;
	border-radius: 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.10);
	border: 1px solid rgba(255, 255, 255, 0.16);
	color: rgba(255, 255, 255, 0.92);
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
	flex: 0 0 auto;
}

.wl-home-step__title {
	font-weight: 900;
	color: rgba(255, 255, 255, 0.96);
}

.wl-home-step__sub {
	margin-top: 2px;
	color: rgba(255, 255, 255, 0.78);
	font-weight: 600;
}

/* Home: Results checker card (links stylistically + functionally to /results) */
.wl-home-results-card {
	background: rgba(255, 255, 255, 0.07);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 18px;
	padding: 16px;
	box-shadow: 0 18px 46px rgba(0, 0, 0, 0.26);
}

.wl-home-results-card__title {
	font-size: 1.15rem;
	font-weight: 950;
	letter-spacing: -0.02em;
	color: rgba(255, 255, 255, 0.98);
}

.wl-home-results-card__sub {
	margin-top: 6px;
	color: rgba(255, 255, 255, 0.80);
	font-weight: 650;
}

.wl-home-results-card__actions {
	margin-top: 12px;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.wl-page-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 14px;
	margin-bottom: 14px;
}

.wl-page-title {
	font-size: 1.75rem;
	font-weight: 950;
	letter-spacing: -0.03em;
	margin: 0;
}

.wl-results-section-title {
	font-size: 1.25rem;
	margin: 0 0 10px;
}

.wl-results-between-actions {
	display: flex;
	justify-content: center;
	margin: 10px 0 18px;
}

/* Green neon button (used for Results reset action) */
.wl-btn-neon-green {
	background: linear-gradient(135deg, rgba(88, 208, 205, 1) 0%, rgba(50, 160, 155, 1) 55%, rgba(20, 100, 95, 1) 100%);
	border: 1px solid rgba(255, 255, 255, 0.22);
	color: rgba(255, 255, 255, 0.96);
	font-weight: 900;
	border-radius: 999px;
	padding: 10px 18px;
	box-shadow:
		0 14px 34px rgba(0, 0, 0, 0.22),
		0 0 0 2px rgba(88, 208, 205, 0.18),
		0 0 22px rgba(88, 208, 205, 0.30);
	text-shadow: 0 1px 0 rgba(0, 0, 0, 0.16);
}

.wl-btn-neon-green:hover {
	filter: brightness(1.05);
	color: rgba(255, 255, 255, 1);
	box-shadow:
		0 18px 42px rgba(0, 0, 0, 0.26),
		0 0 0 2px rgba(100, 220, 215, 0.22),
		0 0 28px rgba(100, 220, 215, 0.40);
}

.wl-page-sub {
	color: var(--wl-muted);
	margin-top: 6px;
	font-weight: 600;
}

.wl-legal {
	max-width: 980px;
	margin-left: auto;
	margin-right: auto;
}

.wl-legal-block {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--wl-border);
}

.wl-legal-block:first-of-type {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.wl-legal-h {
	margin: 0 0 8px;
	font-size: 1.15rem;
	font-weight: 950;
	letter-spacing: -0.02em;
	color: rgba(255, 255, 255, 0.98);
}

.wl-legal-body {
	color: rgba(255, 255, 255, 0.90);
	font-weight: 600;
	line-height: 1.6;
}

.wl-legal .text-muted {
	color: rgba(255, 255, 255, 0.74) !important;
}

.wl-legal a {
	color: rgba(88, 208, 205, 0.98);
	text-decoration: none;
	font-weight: 800;
}

.wl-legal a:hover {
	text-decoration: underline;
}

.wl-page-cta {
	display: flex;
	gap: 10px;
	align-items: center;
}

.wl-info-card .wl-info-title,
.wl-guide-card .wl-info-title {
	font-weight: 900;
}

.wl-info-card .wl-info-sub,
.wl-guide-card .wl-info-sub {
	margin-top: 4px;
	color: rgba(255, 255, 255, 0.75);
	font-weight: 600;
}

.wl-panel-light {
	background: var(--wl-paper-grad);
}

/* Powerball long-form conversion content */
.wl-powerball-content .accordion-item {
	border-color: rgba(0, 0, 0, 0.10);
	background: rgba(255, 255, 255, 0.55);
}

.wl-powerball-content .accordion-button {
	background: transparent;
	color: rgba(0, 0, 0, 0.86);
	font-weight: 850;
}

.wl-powerball-content .accordion-button:not(.collapsed) {
	box-shadow: none;
}

.wl-powerball-content .accordion-body {
	color: rgba(0, 0, 0, 0.78);
	font-weight: 600;
}

/* Powerball SEO prose */
.wl-seo-prose {
	color: rgba(0, 0, 0, 0.82);
	font-weight: 600;
	line-height: 1.55;
}

.wl-seo-prose.wl-seo-prose--on-dark {
	color: rgba(255, 255, 255, 0.92);
}

.wl-seo-prose.wl-seo-prose--on-dark h3,
.wl-seo-prose.wl-seo-prose--on-dark h4 {
	color: rgba(255, 255, 255, 0.96);
}

.wl-seo-prose.wl-seo-prose--on-dark a {
	color: rgba(255, 92, 168, 0.98);
}

.wl-seo-prose h3 {
	margin: 16px 0 8px;
	font-weight: 950;
	letter-spacing: -0.02em;
}

.wl-seo-prose p {
	margin: 0 0 10px;
}

.wl-seo-prose .table {
	--bs-table-bg: transparent;
}

.wl-seo-prose .table th {
	font-weight: 900;
}

.wl-bullets {
	margin: 10px 0 0;
	padding-left: 18px;
}

.wl-bullets li {
	margin: 6px 0;
}

.wl-faq-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
}

.wl-faq-card .wl-faq-q {
	font-size: 1.05rem;
	font-weight: 950;
	letter-spacing: -0.02em;
}

.wl-faq-card .wl-faq-a {
	margin-top: 8px;
	color: rgba(255, 255, 255, 0.82);
	font-weight: 600;
	font-size: 0.95rem;
}

.wl-faq-actions {
	margin-top: 8px;
}

.wl-faq-index {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 8px 0 14px;
}

.wl-faq-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 12px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.14);
	color: rgba(255, 255, 255, 0.88);
	font-weight: 800;
	text-decoration: none;
}

.wl-faq-chip:hover {
	background: rgba(255, 255, 255, 0.09);
	color: rgba(255, 255, 255, 0.96);
}

.wl-faq-list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
}

.wl-faq-item {
	padding: 16px;
}

.wl-faq-item .wl-faq-q {
	margin: 0 0 8px;
	font-size: 1.2rem;
	font-weight: 950;
	letter-spacing: -0.02em;
}

.wl-faq-item .wl-faq-a {
	color: rgba(255, 255, 255, 0.84);
	font-weight: 600;
}

.wl-faq-help {
	margin-top: 14px;
	padding: 16px;
}

.wl-faq-help-title {
	font-weight: 950;
	font-size: 1.1rem;
}

.wl-faq-help-sub {
	margin-top: 4px;
	color: rgba(255, 255, 255, 0.78);
	font-weight: 600;
}

.wl-faq-help-actions {
	margin-top: 12px;
}

.wl-info-surface {
	padding: 16px;
}

.wl-quote {
	padding: 16px;
}

.wl-quote-text {
	font-weight: 750;
	color: rgba(255, 255, 255, 0.88);
	line-height: 1.4;
}

.wl-quote-meta {
	margin-top: 10px;
	color: rgba(255, 255, 255, 0.70);
	font-weight: 800;
	font-size: 0.92rem;
}

.wl-bottom-grid {
	display: grid;
	grid-template-columns: 1.2fr 0.8fr;
	gap: 14px;
	align-items: start;
}

.wl-panel {
	background: var(--wl-paper-grad);
	color: rgba(0, 0, 0, 0.88);
	border-radius: var(--wl-radius-md);
	padding: 16px;
	box-shadow: 0 18px 44px rgba(0, 0, 0, 0.22);
}

.wl-panel-title {
	font-weight: 900;
	letter-spacing: -0.01em;
}

.wl-panel-sub {
	margin-top: 2px;
	color: rgba(0, 0, 0, 0.55);
	font-weight: 600;
	font-size: 0.95rem;
}

/* Collapsible panels (Powerball content section) */
details.wl-panel-collapse {
	padding: 0; /* summary/content handle padding */
}

details.wl-panel-collapse > summary {
	list-style: none;
	padding: 16px;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	cursor: pointer;
	user-select: none;
}

details.wl-panel-collapse > summary::-webkit-details-marker {
	display: none;
}

details.wl-panel-collapse[open] > summary {
	border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

details.wl-panel-collapse > .wl-panel-content {
	padding: 0 16px 16px;
}

.wl-lotter-seo {
	margin-top: 6px;
}

.wl-lotter-row {
	display: grid;
	grid-template-columns: 92px 1fr;
	gap: 16px;
	align-items: start;
	padding: 18px 0;
	border-top: 1px solid rgba(0, 0, 0, 0.10);
}

.wl-lotter-row:first-child {
	border-top: 0;
	padding-top: 10px;
}

.wl-lotter-icon {
	width: 74px;
	height: 74px;
	border-radius: 999px;
	display: grid;
	place-items: center;
	background: rgba(0, 0, 0, 0.05);
	border: 1px solid rgba(0, 0, 0, 0.10);
	box-shadow: 0 10px 22px rgba(0, 0, 0, 0.10);
}

.wl-lotter-icon .bi {
	font-size: 30px;
	color: rgba(0, 0, 0, 0.68);
}

.wl-lotter-body h3 {
	margin: 0 0 6px 0;
	font-size: 1.2rem;
	font-weight: 950;
	letter-spacing: -0.01em;
}

.wl-lotter-body p {
	margin: 0 0 10px 0;
	color: rgba(0, 0, 0, 0.72);
	font-weight: 600;
}

.wl-lotter-body p:last-child {
	margin-bottom: 0;
}

/* Powerball: show SEO section directly on blue background (no panel/card) */
.wl-pb-seo-only {
	/* Ensure the SEO/guide block is readable on all product pages regardless of parent background */
	background:
		radial-gradient(900px 420px at 18% 20%, rgba(88, 208, 205, 0.20) 0%, rgba(88, 208, 205, 0.00) 62%),
		radial-gradient(760px 420px at 84% 30%, rgba(255, 92, 168, 0.16) 0%, rgba(255, 92, 168, 0.00) 60%),
		linear-gradient(135deg, rgba(32, 56, 132, 0.88) 0%, rgba(40, 52, 120, 0.86) 55%, rgba(24, 34, 92, 0.86) 100%);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 18px;
	padding: 18px 18px 16px;
	box-shadow: 0 18px 46px rgba(0, 0, 0, 0.22);
	overflow: hidden;
	color: rgba(255, 255, 255, 0.92);
}

.wl-pb-seo-only .wl-pb-seo-head {
	padding: 6px 0 2px;
}

.wl-pb-seo-only .wl-pb-seo-title {
	font-size: 1.55rem;
	font-weight: 950;
	letter-spacing: -0.02em;
	color: rgba(255, 255, 255, 0.98);
}

.wl-pb-seo-only .wl-pb-seo-sub {
	margin-top: 4px;
	font-weight: 650;
	color: rgba(255, 255, 255, 0.74);
}

.wl-pb-seo-only .wl-lotter-row {
	border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.wl-pb-seo-only .wl-lotter-icon {
	background: rgba(255, 255, 255, 0.12);
	border-color: rgba(255, 255, 255, 0.16);
	box-shadow: 0 14px 28px rgba(0, 0, 0, 0.24);
}

.wl-pb-seo-only .wl-lotter-icon .bi {
	color: rgba(255, 255, 255, 0.92);
}

.wl-pb-seo-only .wl-lotter-body h3 {
	color: rgba(255, 255, 255, 0.98);
}

.wl-pb-seo-only .wl-lotter-body p {
	color: rgba(255, 255, 255, 0.78);
}

.wl-pb-seo-only .wl-lotter-body a {
	color: rgba(255, 220, 240, 0.95);
	font-weight: 850;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.wl-pb-seo-only .wl-lotter-body a:hover {
	color: rgba(255, 255, 255, 0.98);
}

.wl-pb-seo-only .text-muted {
	color: rgba(255, 255, 255, 0.70) !important;
}

.wl-pb-seo-only .table {
	--bs-table-color: rgba(255, 255, 255, 0.90);
	--bs-table-bg: transparent;
	--bs-table-border-color: rgba(255, 255, 255, 0.16);
}

.wl-pb-seo-only .table thead th {
	color: rgba(255, 255, 255, 0.92);
}

.wl-pb-seo-only code {
	color: rgba(255, 255, 255, 0.92);
}

/* Cart page: reuse product ticket + picker aesthetic */
.wl-cart-surface {
	position: relative;
	padding: 16px;
	border-radius: var(--wl-radius-md);
	background: rgba(32, 56, 132, 0.92);
	box-shadow: 0 18px 46px rgba(0, 0, 0, 0.22);
	overflow: hidden;
}

.wl-wallet-balance {
	/* Match the Account "Primary address" blue glass panel */
	background:
		radial-gradient(900px 420px at 18% 20%, rgba(88, 208, 205, 0.20) 0%, rgba(88, 208, 205, 0.00) 62%),
		radial-gradient(760px 420px at 84% 30%, rgba(255, 92, 168, 0.16) 0%, rgba(255, 92, 168, 0.00) 60%),
		linear-gradient(135deg, rgba(32, 56, 132, 0.88) 0%, rgba(40, 52, 120, 0.86) 55%, rgba(24, 34, 92, 0.86) 100%);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 18px;
	padding: 18px 18px 16px;
	box-shadow:
		0 18px 46px rgba(0, 0, 0, 0.22);
	color: rgba(255, 255, 255, 0.96);
}

.wl-wallet-balance__label {
	font-weight: 800;
	color: rgba(255, 255, 255, 0.82);
	letter-spacing: -0.01em;
}

.wl-wallet-balance__amount {
	margin-top: 8px;
	font-size: 2.15rem;
	line-height: 1.05;
	font-weight: 950;
	letter-spacing: -0.03em;
	color: rgba(255, 255, 255, 0.98);
	text-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
}

.wl-wallet-balance__sub {
	margin-top: 6px;
	color: rgba(255, 255, 255, 0.72);
	font-weight: 650;
}

@media (max-width: 575.98px) {
	.wl-wallet-balance__amount {
		font-size: 1.85rem;
	}
}

.wl-cart-surface--green {
	/* Match the “Complete Your Play” blue glass background */
	background:
		radial-gradient(900px 420px at 18% 20%, rgba(88, 208, 205, 0.20) 0%, rgba(88, 208, 205, 0.00) 62%),
		radial-gradient(760px 420px at 84% 30%, rgba(255, 92, 168, 0.16) 0%, rgba(255, 92, 168, 0.00) 60%),
		linear-gradient(135deg, rgba(32, 56, 132, 0.88) 0%, rgba(40, 52, 120, 0.86) 55%, rgba(24, 34, 92, 0.86) 100%);
	border: 1px solid rgba(255, 255, 255, 0.18);
	backdrop-filter: blur(14px);
}

.wl-cart-surface::before {
	/* Paper texture overlay (match play ticket blue body) */
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		repeating-linear-gradient(
			14deg,
			rgba(255, 255, 255, 0.05) 0px,
			rgba(255, 255, 255, 0.05) 1px,
			rgba(255, 255, 255, 0.00) 1px,
			rgba(255, 255, 255, 0.00) 8px
		),
		radial-gradient(1px 1px at 20% 20%, rgba(255, 255, 255, 0.07) 0 1px, rgba(255, 255, 255, 0.00) 2px),
		radial-gradient(1px 1px at 55% 60%, rgba(255, 255, 255, 0.06) 0 1px, rgba(255, 255, 255, 0.00) 2px),
		radial-gradient(1px 1px at 80% 35%, rgba(255, 255, 255, 0.05) 0 1px, rgba(255, 255, 255, 0.00) 2px);
	opacity: 0.38;
	mix-blend-mode: overlay;
}

.wl-cart-surface--green::before {
	/* Match the “Complete Your Play” panel texture strength */
	opacity: 0.22;
	mix-blend-mode: overlay;
}

.wl-cart-surface > * {
	position: relative;
	z-index: 1;
}

.wl-cart-empty-title {
	font-weight: 950;
	font-size: 1.2rem;
	letter-spacing: -0.01em;
	color: rgba(255, 255, 255, 0.96);
}

.wl-cart-empty-sub {
	margin-top: 6px;
	font-weight: 650;
	color: rgba(255, 255, 255, 0.78);
}

.wl-cart-remove {
	border-color: rgba(255, 255, 255, 0.26);
	color: rgba(255, 255, 255, 0.92);
	background: rgba(255, 255, 255, 0.06);
}

.wl-cart-remove:hover {
	background: rgba(255, 92, 168, 0.18);
	border-color: rgba(255, 92, 168, 0.36);
	color: rgba(255, 255, 255, 0.98);
}

/* Cart: cost breakdown (left) */
.wl-cart-calc {
	margin-top: 10px;
	display: grid;
	gap: 8px;
}

.wl-cart-calc-row {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 12px;
	/* Align the right-side amount with the calculation line (not the label) */
	align-items: end;
	padding-top: 6px;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.wl-cart-calc-row:first-child {
	border-top: 0;
	padding-top: 0;
}

.wl-cart-calc-label {
	font-weight: 900;
	color: rgba(255, 255, 255, 0.92);
	letter-spacing: -0.01em;
}

.wl-cart-calc-expr {
	margin-top: 2px;
	color: rgba(255, 255, 255, 0.78);
	font-weight: 700;
	font-size: 0.92rem;
}

.wl-cart-calc-right {
	font-weight: 950;
	color: rgba(255, 255, 255, 0.92);
	white-space: nowrap;
}

/* Cart: totals (right) */
.wl-cart-total {
	font-weight: 950;
	font-size: 1.2rem;
	letter-spacing: -0.01em;
	color: rgba(255, 255, 255, 0.98);
	white-space: nowrap;
}

.wl-cart-total-sub {
	margin-top: 4px;
	font-weight: 750;
}

/* Cart: list of cart items (financials on top, lines below) */
.wl-cart-list {
	display: grid;
	gap: 12px;
}

.wl-cart-item {
	border-radius: 18px;
	overflow: hidden;
	/* Inner layer: match the lotto offer row card */
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.16);
	box-shadow: 0 14px 32px rgba(0, 0, 0, 0.18);
	backdrop-filter: blur(12px);
}

.wl-cart-item__head {
	/* Use the same blue as the cart item background (match the bottom blue) */
	padding: 12px;
	background: transparent;
	border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.wl-cart-item__head-inner {
	/* Second layer: beige brand “paper” for text */
	display: grid;
	grid-template-columns: 1.15fr 1.35fr;
	gap: 14px;
	align-items: start;
	padding: 14px 14px;
	border-radius: 16px;
	background: var(--wl-paper-grad);
	border: 1px solid rgba(0, 0, 0, 0.10);
	box-shadow:
		0 18px 46px rgba(0, 0, 0, 0.18),
		inset 0 0 0 1px rgba(255, 255, 255, 0.25);
	/* Make left column text readable (match right column feel) */
	color: rgba(16, 16, 18, 0.86);
	font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
	-webkit-font-smoothing: antialiased;
}

/* Order pages: use a darker "glass" header instead of beige paper */
.wl-cart-item__head-inner--dark {
	/* Match the Account "Primary address" blue glass panel */
	background:
		radial-gradient(900px 420px at 18% 20%, rgba(88, 208, 205, 0.20) 0%, rgba(88, 208, 205, 0.00) 62%),
		radial-gradient(760px 420px at 84% 30%, rgba(255, 92, 168, 0.16) 0%, rgba(255, 92, 168, 0.00) 60%),
		linear-gradient(135deg, rgba(32, 56, 132, 0.88) 0%, rgba(40, 52, 120, 0.86) 55%, rgba(24, 34, 92, 0.86) 100%);
	border: 1px solid rgba(255, 255, 255, 0.18);
	box-shadow: 0 18px 46px rgba(0, 0, 0, 0.22);
	color: rgba(255, 255, 255, 0.92);
}
.wl-cart-item__head-inner--dark .wl-cart-item__col--play .fw-semibold {
	color: rgba(255, 255, 255, 0.96);
}
.wl-cart-item__head-inner--dark .wl-cart-item__col--play .small,
.wl-cart-item__head-inner--dark .wl-cart-item__col--play .text-mono {
	color: rgba(255, 255, 255, 0.76);
}
.wl-cart-item__head-inner--dark .text-muted {
	color: rgba(255, 255, 255, 0.72) !important;
}
.wl-cart-item__head-inner--dark .text-mono {
	color: rgba(255, 255, 255, 0.76) !important;
}
.wl-cart-item__head-inner--dark .wl-cart-calc-label,
.wl-cart-item__head-inner--dark .wl-cart-calc-expr,
.wl-cart-item__head-inner--dark .wl-cart-calc-right {
	color: rgba(255, 255, 255, 0.92);
}
.wl-cart-item__head-inner--dark .wl-cart-calc-row {
	border-top-color: rgba(255, 255, 255, 0.14);
}
.wl-cart-item__head-inner--dark .badge.text-bg-secondary {
	background: rgba(255, 255, 255, 0.14) !important;
	color: rgba(255, 255, 255, 0.92) !important;
	border: 1px solid rgba(255, 255, 255, 0.18);
}

.wl-order-details {
	margin-top: 12px;
	border-radius: 16px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	background:
		radial-gradient(900px 420px at 18% 20%, rgba(88, 208, 205, 0.14) 0%, rgba(88, 208, 205, 0.00) 62%),
		radial-gradient(760px 420px at 84% 30%, rgba(255, 92, 168, 0.12) 0%, rgba(255, 92, 168, 0.00) 60%),
		linear-gradient(135deg, rgba(32, 56, 132, 0.72) 0%, rgba(40, 52, 120, 0.68) 55%, rgba(24, 34, 92, 0.68) 100%);
	overflow: hidden;
}
.wl-order-details > summary {
	list-style: none;
	padding: 12px 14px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	color: rgba(255, 255, 255, 0.92);
	font-weight: 850;
}
.wl-order-details > summary::-webkit-details-marker { display: none; }
.wl-order-details__meta { color: rgba(255, 255, 255, 0.72); font-weight: 750; }
.wl-order-details__panel { padding: 12px 12px 14px; border-top: 1px solid rgba(255, 255, 255, 0.10); }

/* Order detail: flatten nested "bubbles" into a single surface (like Account primary address). */
.wl-order-detail .wl-cart-list {
	gap: 0;
}
.wl-order-detail .wl-cart-item {
	background: transparent;
	border: 0;
	box-shadow: none;
	backdrop-filter: none;
	border-radius: 0;
}
.wl-order-detail .wl-cart-item + .wl-cart-item {
	border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.wl-order-detail .wl-cart-item__head {
	padding: 0;
	border-bottom: 0;
}
.wl-order-detail .wl-cart-item__head-inner,
.wl-order-detail .wl-cart-item__head-inner--dark {
	background: transparent;
	border: 0;
	box-shadow: none;
	padding: 14px 14px;
	border-radius: 0;
}

/* Order detail: ensure readable light text (avoid black-on-blue from cart header styles) */
.wl-order-detail .wl-cart-item__head-inner,
.wl-order-detail .wl-cart-item__head-inner--dark,
.wl-order-detail .wl-cart-item__head-inner * ,
.wl-order-detail .wl-cart-item__head-inner--dark * {
	color: inherit;
}

.wl-order-detail .wl-cart-item__head-inner,
.wl-order-detail .wl-cart-item__head-inner--dark {
	color: rgba(255, 255, 255, 0.92);
}

.wl-order-kicker {
	font-size: 0.78rem;
	font-weight: 900;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.72);
}

/* Ensure we never render black text on the blue order surface */
.wl-order-detail,
.wl-order-detail .text-mono,
.wl-order-detail .text-muted,
.wl-order-detail a,
.wl-order-detail .badge {
	color: rgba(255, 255, 255, 0.92) !important;
}

.wl-order-detail .text-muted {
	color: rgba(255, 255, 255, 0.72) !important;
}

.wl-order-detail .wl-cart-calc-right {
	font-size: 1.12rem;
	font-weight: 950;
}

.wl-order-detail .wl-cart-item__head-inner .fw-semibold,
.wl-order-detail .wl-cart-item__head-inner--dark .fw-semibold,
.wl-order-detail .wl-cart-item__head-inner .wl-cart-calc-label,
.wl-order-detail .wl-cart-item__head-inner--dark .wl-cart-calc-label,
.wl-order-detail .wl-cart-item__head-inner .wl-cart-calc-right,
.wl-order-detail .wl-cart-item__head-inner--dark .wl-cart-calc-right {
	color: rgba(255, 255, 255, 0.96) !important;
}

.wl-order-detail .wl-cart-item__head-inner .text-muted,
.wl-order-detail .wl-cart-item__head-inner--dark .text-muted,
.wl-order-detail .wl-cart-item__head-inner .wl-cart-calc-expr,
.wl-order-detail .wl-cart-item__head-inner--dark .wl-cart-calc-expr {
	color: rgba(255, 255, 255, 0.72) !important;
}

.wl-order-detail .wl-cart-item__head-inner .wl-cart-calc-row,
.wl-order-detail .wl-cart-item__head-inner--dark .wl-cart-calc-row {
	border-top-color: rgba(255, 255, 255, 0.14);
}

.wl-order-detail .wl-cart-item__head-inner .badge.text-bg-secondary,
.wl-order-detail .wl-cart-item__head-inner--dark .badge.text-bg-secondary {
	background: rgba(255, 255, 255, 0.14) !important;
	color: rgba(255, 255, 255, 0.92) !important;
	border: 1px solid rgba(255, 255, 255, 0.18);
}
.wl-order-detail .wl-cart-item__body {
	padding: 0 14px 14px;
}

/* Keep the boards expander visually part of the same single panel */
.wl-order-detail .wl-order-details {
	background: rgba(255, 255, 255, 0.06);
	border-color: rgba(255, 255, 255, 0.14);
}

/* Account → Orders list: match the Order detail single-panel cues */
.wl-order-list .wl-cart-list {
	gap: 0;
}
.wl-order-list .wl-cart-item {
	background: transparent;
	border: 0;
	box-shadow: none;
	backdrop-filter: none;
	border-radius: 0;
}
.wl-order-list .wl-cart-item + .wl-cart-item {
	border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.wl-order-list .wl-cart-item__head {
	padding: 0;
	border-bottom: 0;
}
.wl-order-list .wl-cart-item__head-inner {
	background: transparent;
	border: 0;
	box-shadow: none;
	padding: 14px 14px;
	border-radius: 0;
	color: rgba(255, 255, 255, 0.92);
}
.wl-order-list .wl-cart-item__head-inner .text-muted,
.wl-order-list .wl-cart-item__head-inner .wl-cart-calc-expr {
	color: rgba(255, 255, 255, 0.72) !important;
}
.wl-order-list .wl-cart-item__head-inner .fw-semibold,
.wl-order-list .wl-cart-item__head-inner .wl-cart-calc-label,
.wl-order-list .wl-cart-item__head-inner .wl-cart-calc-right,
.wl-order-list .wl-cart-item__head-inner .text-mono {
	color: rgba(255, 255, 255, 0.96) !important;
}
.wl-order-list .wl-cart-item__head-inner .badge.text-bg-secondary {
	background: rgba(255, 255, 255, 0.14) !important;
	color: rgba(255, 255, 255, 0.92) !important;
	border: 1px solid rgba(255, 255, 255, 0.18);
}
.wl-order-list .wl-cart-calc-row {
	border-top-color: rgba(255, 255, 255, 0.14);
}
.wl-order-list .wl-cart-item__actions {
	margin-top: 10px;
	justify-content: flex-end;
}

/* Account → Orders: per-order bubbles that expand in place */
.wl-order-card__expand.is-hidden { display: none; }
.wl-order-card__expand {
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	padding-top: 12px;
}
.wl-order-expand {
	color: rgba(255, 255, 255, 0.92);
}
.wl-order-expand .text-muted { color: rgba(255, 255, 255, 0.72) !important; }
.wl-order-expand__list { margin-top: 12px; display: grid; gap: 14px; }
.wl-order-expand__ticket {
	padding: 12px 12px;
	border-radius: 16px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	background: rgba(255, 255, 255, 0.06);
}
.wl-order-expand__meta {
	margin-top: 10px;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
}
@media (max-width: 767.98px) {
	.wl-order-expand__meta { grid-template-columns: 1fr; }
}
.wl-order-expand__badges { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; }
.wl-order-expand__link { color: rgba(255, 255, 255, 0.92); text-decoration: underline; text-underline-offset: 3px; font-weight: 800; }

/* Account → Orders cards: force light text (avoid global dark-on-light cart header rules) */
.wl-order-card .wl-cart-item__head-inner,
.wl-order-card .wl-cart-item__head-inner--dark {
	color: rgba(255, 255, 255, 0.92);
}
.wl-order-card .wl-cart-item__head-inner .fw-semibold,
.wl-order-card .wl-cart-item__head-inner--dark .fw-semibold,
.wl-order-card .wl-cart-item__head-inner .wl-cart-calc-label,
.wl-order-card .wl-cart-item__head-inner--dark .wl-cart-calc-label,
.wl-order-card .wl-cart-item__head-inner .wl-cart-calc-right,
.wl-order-card .wl-cart-item__head-inner--dark .wl-cart-calc-right,
.wl-order-card .wl-cart-item__head-inner .text-mono,
.wl-order-card .wl-cart-item__head-inner--dark .text-mono {
	color: rgba(255, 255, 255, 0.96) !important;
}
.wl-order-card .wl-cart-item__head-inner .text-muted,
.wl-order-card .wl-cart-item__head-inner--dark .text-muted,
.wl-order-card .wl-cart-item__head-inner .wl-cart-calc-expr,
.wl-order-card .wl-cart-item__head-inner--dark .wl-cart-calc-expr {
	color: rgba(255, 255, 255, 0.72) !important;
}
.wl-order-card .wl-cart-item__head-inner .wl-cart-calc-row,
.wl-order-card .wl-cart-item__head-inner--dark .wl-cart-calc-row {
	border-top-color: rgba(255, 255, 255, 0.14);
}
.wl-order-card .wl-cart-item__head-inner .badge.text-bg-secondary,
.wl-order-card .wl-cart-item__head-inner--dark .badge.text-bg-secondary {
	background: rgba(255, 255, 255, 0.14) !important;
	color: rgba(255, 255, 255, 0.92) !important;
	border: 1px solid rgba(255, 255, 255, 0.18);
}

.wl-cart-item__col {
	min-width: 0;
}

.wl-cart-item__head-inner .wl-cart-item__col--play .fw-semibold {
	color: rgba(16, 16, 18, 0.90);
	font-weight: 900;
	letter-spacing: -0.01em;
}

.wl-cart-item__head-inner .wl-cart-item__col--play .small,
.wl-cart-item__head-inner .wl-cart-item__col--play .text-mono {
	color: rgba(16, 16, 18, 0.62);
}

.wl-cart-item__head-inner .text-muted {
	color: rgba(0, 0, 0, 0.55) !important;
}

.wl-cart-item__actions {
	margin-top: 10px;
	display: flex;
	justify-content: flex-end;
}

.wl-cart-item__body {
	padding: 14px;
}

/* Make the calc readable on white header */
.wl-cart-calc--light .wl-cart-calc-label {
	color: rgba(0, 0, 0, 0.78);
}
.wl-cart-calc--light .wl-cart-calc-expr {
	color: rgba(0, 0, 0, 0.58);
}
.wl-cart-calc--light .wl-cart-calc-right {
	color: rgba(0, 0, 0, 0.78);
}
.wl-cart-calc--light .wl-cart-calc-row {
	border-top-color: rgba(0, 0, 0, 0.10);
}
.wl-cart-calc--light .text-muted {
	color: rgba(0, 0, 0, 0.52) !important;
}

.wl-cart-item__head-inner .wl-cart-total {
	color: rgba(0, 0, 0, 0.86);
}
.wl-cart-item__head-inner .wl-cart-total-sub {
	color: rgba(0, 0, 0, 0.56);
}

.wl-cart-calc-row--total {
	margin-top: 8px;
	padding-top: 10px;
	border-top: 1px solid rgba(0, 0, 0, 0.14);
}

.wl-cart-calc-row--total .wl-cart-calc-label {
	font-weight: 950;
}

.wl-cart-calc-row--total .wl-cart-calc-right {
	font-size: 1.05rem;
	font-weight: 950;
}

@media (max-width: 991.98px) {
	.wl-cart-item__head {
		padding: 10px;
	}
	.wl-cart-item__head-inner {
		grid-template-columns: 1fr;
	}
	.wl-cart-item__actions {
		justify-content: flex-start;
	}
}

/* Cart: collapsible “Lines” container + per-line cards */
details.wl-cart-lines-group,
details.wl-cart-line-card {
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.14);
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
	overflow: hidden;
}

/* Lines group (green) */
details.wl-cart-lines-group {
	/* Neon pink outer container (wraps the Lines box) */
	padding: 10px;
	background:
		radial-gradient(900px 420px at 18% 20%, rgba(255, 92, 168, 0.55) 0%, rgba(255, 92, 168, 0.00) 62%),
		radial-gradient(760px 420px at 84% 30%, rgba(240, 198, 74, 0.18) 0%, rgba(240, 198, 74, 0.00) 60%),
		linear-gradient(135deg, rgba(255, 92, 168, 0.55) 0%, rgba(160, 70, 210, 0.48) 55%, rgba(32, 56, 132, 0.42) 100%);
	border-color: rgba(255, 92, 168, 0.38);
	box-shadow:
		0 18px 46px rgba(0, 0, 0, 0.22),
		0 0 0 1px rgba(255, 92, 168, 0.16),
		0 0 28px rgba(255, 92, 168, 0.18);
	backdrop-filter: blur(14px);
}

/* Second layer inside lines group (like the lotto offer row) */
details.wl-cart-lines-group > summary {
	border-radius: 14px;
	/* Keep the Lines box BLUE; pink should only be a highlight around edges */
	background:
		radial-gradient(900px 420px at 18% 20%, rgba(88, 208, 205, 0.20) 0%, rgba(88, 208, 205, 0.00) 62%),
		radial-gradient(760px 420px at 84% 30%, rgba(255, 92, 168, 0.12) 0%, rgba(255, 92, 168, 0.00) 60%),
		linear-gradient(135deg, rgba(32, 56, 132, 0.84) 0%, rgba(40, 52, 120, 0.82) 55%, rgba(24, 34, 92, 0.82) 100%);
	border: 1px solid rgba(255, 255, 255, 0.18);
	backdrop-filter: blur(12px);
	box-shadow: 0 14px 32px rgba(0, 0, 0, 0.18);
}

details.wl-cart-lines-group[open] > summary {
	margin-bottom: 10px;
}

/* Individual line cards (neon yellow) */
details.wl-cart-line-card {
	background:
		radial-gradient(700px 320px at 18% 25%, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0.00) 62%),
		radial-gradient(650px 320px at 80% 45%, rgba(240, 198, 74, 0.55) 0%, rgba(240, 198, 74, 0.00) 62%),
		linear-gradient(135deg, rgba(250, 210, 90, 0.95) 0%, rgba(242, 188, 68, 0.96) 55%, rgba(220, 160, 54, 0.96) 100%);
	border-color: rgba(0, 0, 0, 0.12);
	box-shadow:
		0 14px 30px rgba(0, 0, 0, 0.18),
		inset 0 0 0 1px rgba(255, 255, 255, 0.25);
}

details.wl-cart-lines-group > summary,
details.wl-cart-line-card > summary {
	list-style: none;
	padding: 12px 12px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	cursor: pointer;
	user-select: none;
}

details.wl-cart-lines-group > summary::-webkit-details-marker,
details.wl-cart-line-card > summary::-webkit-details-marker {
	display: none;
}

.wl-cart-lines-group__left,
.wl-cart-line-card__left {
	min-width: 0;
}

.wl-cart-lines-group__title,
.wl-cart-line-card__title {
	font-weight: 950;
	color: rgba(255, 255, 255, 0.96);
	letter-spacing: -0.01em;
}

/* Override title/meta colors for yellow line cards */
details.wl-cart-line-card .wl-cart-line-card__title {
	color: rgba(16, 16, 18, 0.88);
}
details.wl-cart-line-card .wl-cart-line-card__meta {
	color: rgba(16, 16, 18, 0.70);
}
details.wl-cart-line-card .wl-cart-line-price {
	color: rgba(16, 16, 18, 0.86);
}

.wl-cart-lines-group__meta,
.wl-cart-line-card__meta {
	margin-top: 4px;
	display: flex;
	gap: 8px;
	align-items: center;
	flex-wrap: wrap;
}

.wl-cart-lines-group__right,
.wl-cart-line-card__right {
	display: inline-flex;
	gap: 12px;
	align-items: center;
	flex: 0 0 auto;
}

.wl-cart-toggle {
	width: 34px;
	height: 34px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.10);
	border: 1px solid rgba(255, 255, 255, 0.18);
	display: grid;
	place-items: center;
	box-shadow: 0 10px 22px rgba(0, 0, 0, 0.18);
}

.wl-cart-toggle::before {
	content: "+";
	font-weight: 950;
	font-size: 1.1rem;
	line-height: 1;
	color: rgba(255, 255, 255, 0.96);
	transform: translateY(-1px);
}

/* IMPORTANT: scope “−” to the details that is actually open (otherwise nested details inherit) */
details.wl-cart-lines-group[open] > summary .wl-cart-toggle::before,
details.wl-cart-line-card[open] > summary .wl-cart-toggle::before {
	content: "−";
	transform: translateY(-2px);
}

.wl-cart-toggle--sm {
	width: 30px;
	height: 30px;
}

.wl-cart-toggle--sm::before {
	font-size: 1.0rem;
}

.wl-cart-line-remove-form {
	display: inline-flex;
}

.wl-cart-line-remove {
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.22);
	background: rgba(255, 255, 255, 0.08);
	color: rgba(255, 255, 255, 0.92);
	font-weight: 850;
	padding: 6px 10px;
}

.wl-cart-line-remove:hover {
	background: rgba(255, 92, 168, 0.18);
	border-color: rgba(255, 92, 168, 0.36);
	color: rgba(255, 255, 255, 0.98);
}

/* Line card remove button should read on yellow */
details.wl-cart-line-card .wl-cart-line-remove {
	border-color: rgba(0, 0, 0, 0.16);
	background: rgba(0, 0, 0, 0.06);
	color: rgba(16, 16, 18, 0.86);
}
details.wl-cart-line-card .wl-cart-line-remove:hover {
	background: rgba(255, 92, 168, 0.14);
	border-color: rgba(255, 92, 168, 0.30);
	color: rgba(16, 16, 18, 0.92);
}

/* Line card toggle should read on yellow */
details.wl-cart-line-card .wl-cart-toggle {
	background: rgba(0, 0, 0, 0.06);
	border-color: rgba(0, 0, 0, 0.14);
	box-shadow: 0 10px 22px rgba(0, 0, 0, 0.12);
}
details.wl-cart-line-card .wl-cart-toggle::before {
	color: rgba(16, 16, 18, 0.86);
}

.wl-cart-lines-group__body {
	padding: 0;
}

/* Cart: ticket-style lines (10 lines per ticket) */
.wl-cart-ticket-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 14px;
	align-items: start;
}

@media (min-width: 992px) {
	.wl-cart-ticket-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.wl-cart-ticket {
	position: relative;
	border-radius: 16px;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.18);
	box-shadow: 0 18px 42px rgba(0, 0, 0, 0.22);
	background: rgba(255, 255, 255, 0.06);
	--wl-ticket-stripe-w: 26px;
}

.wl-cart-ticket__ribbon {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: var(--wl-ticket-stripe-w);
	background: #FF0000; /* match play ticket side stripe */
	box-shadow: none;
	z-index: 3;
	pointer-events: none;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.wl-cart-ticket__ribbon::after {
	content: "WINNOW LOTTO WINNOW LOTTO WINNOW LOTTO WINNOW LOTTO WINNOW LOTTO";
	color: #ffffff;
	font-weight: 950;
	font-size: 0.68rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	writing-mode: vertical-rl;
	text-orientation: mixed;
	transform: rotate(180deg); /* read top-to-bottom */
	white-space: nowrap;
}

.wl-cart-ticket__header {
	padding: 12px 14px 12px calc(14px + var(--wl-ticket-stripe-w)); /* room for ribbon */
	background: var(--wl-paper-grad);
	border-bottom: 2px dashed rgba(0, 0, 0, 0.18);
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 76px;
}

.wl-cart-ticket__logo {
	max-width: 90%;
	max-height: 46px;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
}

.wl-cart-ticket__body {
	padding: 12px 12px 12px calc(14px + var(--wl-ticket-stripe-w)); /* room for ribbon */
	color: rgba(255, 255, 255, 0.94);
	background:
		radial-gradient(600px 300px at 25% 50%, rgba(88, 208, 205, 0.92) 0%, rgba(70, 190, 185, 0.92) 28%, rgba(50, 160, 155, 0.92) 48%, rgba(35, 130, 125, 0.92) 72%, rgba(20, 100, 95, 0.92) 100%),
		radial-gradient(500px 350px at 75% 50%, rgba(100, 220, 215, 0.26) 0%, rgba(100, 220, 215, 0.00) 62%),
		radial-gradient(400px 200px at 75% 35%, rgba(120, 240, 235, 0.18) 0%, rgba(120, 240, 235, 0.00) 70%),
		linear-gradient(135deg, rgba(88, 208, 205, 0.92) 0%, rgba(50, 160, 155, 0.92) 55%, rgba(20, 100, 95, 0.92) 100%);
}

.wl-cart-ticket-line {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 10px;
	align-items: center;
	padding: 8px 0;
}

.wl-cart-ticket-line + .wl-cart-ticket-line {
	border-top: 1px dashed rgba(255, 255, 255, 0.18);
}

.wl-cart-ticket-line__idx {
	font-weight: 900;
	font-size: 0.82rem;
	color: rgba(255, 255, 255, 0.86);
	white-space: nowrap;
}

.wl-cart-ticket-line__nums {
	font-weight: 950;
	font-size: 0.95rem;
	letter-spacing: -0.01em;
	line-height: 1.15;
	display: flex;
	gap: 10px;
	align-items: center;
	flex-wrap: wrap;
}

.wl-cart-ticket-main {
	white-space: nowrap;
}

.wl-cart-ticket-bonus {
	white-space: nowrap;
	padding: 3px 10px;
	border-radius: 999px;
	background: rgba(255, 92, 168, 0.88);
	border: 1px solid rgba(255, 255, 255, 0.38);
	box-shadow: 0 10px 22px rgba(0, 0, 0, 0.16);
}

.wl-cart-ticket-line__remove {
	margin: 0;
	display: inline-flex;
}

.wl-cart-ticket-remove {
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.28);
	background: rgba(255, 255, 255, 0.10);
	color: rgba(255, 255, 255, 0.98);
	font-weight: 900;
	padding: 6px 10px;
}

.wl-cart-ticket-remove:hover {
	background: rgba(255, 92, 168, 0.18);
	border-color: rgba(255, 92, 168, 0.36);
	color: rgba(255, 255, 255, 0.98);
}

.wl-cart-lines-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 12px;
	/* Prevent other cards from stretching when one expands */
	align-items: start;
}

details.wl-cart-line-card {
	align-self: start;
}

.wl-cart-line-card__body {
	padding: 0 12px 12px;
}

.wl-cart-line-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}

/* Cart numbers: render selections as “picked balls” like the number picker */
.wl-cart-line + .wl-cart-line {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px dashed rgba(255, 255, 255, 0.18);
}

.wl-cart-line-title {
	font-weight: 900;
	letter-spacing: -0.01em;
	color: rgba(255, 255, 255, 0.92);
}

.wl-cart-line-fields {
	margin-top: 8px;
	display: grid;
	gap: 10px;
}

.wl-cart-line-label {
	font-weight: 800;
	font-size: 0.9rem;
	color: rgba(255, 255, 255, 0.70);
	text-transform: lowercase;
}

details.wl-cart-line-card .wl-cart-line-label {
	color: rgba(16, 16, 18, 0.64);
}

.wl-cart-balls {
	margin-top: 8px;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.wl-cart-ball {
	--wl-cart-ball-size: 44px;
	width: var(--wl-cart-ball-size);
	height: var(--wl-cart-ball-size);
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 950;
	font-size: 1rem;
	line-height: 1;
	color: #ffffff;
	user-select: none;

	/* Mirror the product number-picker selected “pink glass” */
	background: none;
	background-color: rgba(255, 92, 168, 0.92);
	border: 1px solid rgba(255, 255, 255, 0.65);
	box-shadow:
		0 10px 22px rgba(0, 0, 0, 0.18),
		inset 0 0 0 2px rgba(255, 255, 255, 0.35);
}

@media (max-width: 575.98px) {
	.wl-cart-ball {
		--wl-cart-ball-size: 40px;
	}
}

.wl-cart-steps .wl-lotter-row {
	grid-template-columns: 86px 1fr;
}

.wl-cart-steps .wl-lotter-icon {
	width: auto;
	height: auto;
	background: transparent;
	border: 0;
	box-shadow: none;
}

.wl-cart-badge {
	--cart-badge-size: clamp(46px, 3.2vw, 62px);
	width: var(--cart-badge-size);
	height: var(--cart-badge-size);
	border-radius: 999px;
	display: grid;
	place-items: center;
	font-weight: 950;
	font-size: clamp(1.1rem, 1.2vw, 1.4rem);
	line-height: 1;
	color: #ffffff;

	/* Mirror the product number-picker selected “pink glass” */
	background: none;
	background-color: rgba(255, 92, 168, 0.92);
	border: 1px solid rgba(255, 255, 255, 0.65);
	box-shadow:
		0 10px 22px rgba(0, 0, 0, 0.18),
		inset 0 0 0 2px rgba(255, 255, 255, 0.35);
}

@media (max-width: 575.98px) {
	.wl-lotter-row {
		grid-template-columns: 1fr;
	}
	.wl-lotter-icon {
		width: 62px;
		height: 62px;
	}
	.wl-lotter-icon .bi {
		font-size: 26px;
	}
}

.wl-panel-caret {
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.06);
	border: 1px solid rgba(0, 0, 0, 0.10);
	position: relative;
	margin-top: 2px;
}

.wl-panel-caret::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 10px;
	height: 10px;
	border-right: 2px solid rgba(0, 0, 0, 0.55);
	border-bottom: 2px solid rgba(0, 0, 0, 0.55);
	transform: translate(-50%, -60%) rotate(45deg);
	transition: transform 160ms ease;
}

details.wl-panel-collapse[open] .wl-panel-caret::before {
	transform: translate(-50%, -40%) rotate(-135deg);
}

.wl-panel-actions {
	margin-top: 12px;
	display: flex;
	justify-content: flex-end;
}

.wl-steps {
	margin-top: 14px;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
}

.wl-step {
	background: #f3e7c6;
	border-radius: 14px;
	padding: 12px;
	display: flex;
	gap: 10px;
}

.wl-step-num {
	font-weight: 900;
	color: rgba(0, 0, 0, 0.8);
}

.wl-step-title {
	font-weight: 900;
	color: rgba(0, 0, 0, 0.86);
}

.wl-step-sub {
	color: rgba(0, 0, 0, 0.60);
	font-weight: 600;
	font-size: 0.9rem;
	margin-top: 1px;
}

.wl-panel-results {
	background: rgba(255, 255, 255, 0.92);
}

.wl-results-box {
	margin-top: 14px;
	background: #f3e7c6;
	border-radius: 14px;
	padding: 14px;
}

.wl-results-title {
	font-weight: 900;
}

.wl-results-sub {
	margin-top: 2px;
	color: rgba(0, 0, 0, 0.62);
	font-weight: 600;
}

/* Responsive */
@media (max-width: 991.98px) {
	.wl-hero-grid {
		grid-template-columns: 1fr;
	}
	.wl-hero-image {
		min-height: 300px;
	}
	.wl-cards-row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.wl-bottom-grid {
		grid-template-columns: 1fr;
	}
	.wl-steps {
		grid-template-columns: 1fr;
	}
	.wl-footer-grid {
		grid-template-columns: 1fr;
	}
	.wl-footer-links {
		justify-content: flex-start;
	}
	.wl-faq-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 575.98px) {
	.wl-cards-row {
		grid-template-columns: 1fr;
	}
	.wl-hero-value {
		font-size: 2.5rem;
	}
}

.text-mono {
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* Results: red info tooltip for adjusted number mapping */
.wl-results-info {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	border-radius: 999px;
	background: rgba(220, 53, 69, 0.95);
	color: rgba(255, 255, 255, 0.98);
	font-weight: 950;
	font-size: 0.8rem;
	line-height: 1;
	border: 1px solid rgba(255, 255, 255, 0.28);
	box-shadow: 0 10px 18px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(255, 92, 168, 0.10);
	cursor: help;
}

.wl-results-info[data-note] {
	position: relative;
	cursor: help;
}

.wl-results-info[data-note]:hover::after {
	content: attr(data-note);
	position: absolute;
	left: 50%;
	top: 100%;
	transform: translateX(-50%);
	margin-top: 10px;
	min-width: 220px;
	max-width: 340px;
	padding: 10px 12px;
	border-radius: 12px;
	background: rgba(20, 28, 62, 0.96);
	border: 1px solid rgba(255, 255, 255, 0.16);
	color: rgba(255, 255, 255, 0.92);
	font-weight: 650;
	font-size: 0.86rem;
	line-height: 1.35;
	box-shadow: 0 18px 46px rgba(0, 0, 0, 0.32);
	z-index: 50;
	white-space: normal;
	pointer-events: none;
}

.wl-results-info[data-note]:hover::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 100%;
	transform: translateX(-50%);
	margin-top: 4px;
	border: 8px solid transparent;
	border-bottom-color: rgba(20, 28, 62, 0.96);
	z-index: 51;
	pointer-events: none;
}

.wl-results-picker .np-field {
	background: rgba(255, 255, 255, 0.10);
	border: 1px solid rgba(255, 255, 255, 0.16);
}

.wl-results-picker .np-number {
	--np-selected-bg: rgba(255, 92, 168, 0.92);
	--np-selected-fg: rgba(255, 255, 255, 0.98);
}

.wl-results-card-title {
	font-weight: 950;
	letter-spacing: -0.02em;
	font-size: 1.05rem;
}

.wl-results-card-sub {
	color: rgba(255, 255, 255, 0.78) !important;
}

.wl-results-card-meta {
	margin-top: 8px;
	font-weight: 850;
	color: rgba(255, 255, 255, 0.90);
}

.wl-results-entry {
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 16px;
	padding: 14px;
}

.wl-results-entry-group + .wl-results-entry-group {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid rgba(255, 255, 255, 0.10);
}

.wl-results-entry-group__boxes {
	margin-top: 10px;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.wl-results-entry-box {
	width: 74px;
	height: 48px;
	border-radius: 14px;
	border: 1px solid rgba(255, 255, 255, 0.22);
	background: rgba(255, 255, 255, 0.12);
	color: rgba(255, 255, 255, 0.96);
	font-weight: 950;
	font-size: 1.05rem;
	text-align: center;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.wl-results-entry-box:focus {
	outline: none;
	box-shadow: 0 0 0 4px rgba(255, 92, 168, 0.22);
	border-color: rgba(255, 92, 168, 0.55);
}

.wl-results-winbox {
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 18px;
	padding: 14px;
}

.wl-results-winbox,
.wl-results-entry,
.wl-results-compare-row {
	color: rgba(255, 255, 255, 0.92);
}

/* Never let Bootstrap's dark-muted text appear on our dark results surfaces */
.wl-results-winbox .text-muted,
.wl-results-entry .text-muted,
.wl-results-compare-row .text-muted,
.wl-results-compare-list .text-muted {
	color: rgba(255, 255, 255, 0.78) !important;
}

.wl-results-winbox__top {
	display: grid;
	grid-template-columns: 1fr 1.2fr;
	gap: 14px;
	align-items: start;
}

@media (max-width: 991.98px) {
	.wl-results-winbox__top {
		grid-template-columns: 1fr;
	}
}

.wl-results-winbox__amt {
	font-size: clamp(1.6rem, 2.8vw, 2.2rem);
	font-weight: 950;
	letter-spacing: -0.02em;
	color: rgba(255, 255, 255, 0.98);
	text-shadow: 0 14px 30px rgba(0, 0, 0, 0.26);
}

.wl-results-primary-cta {
	margin-top: 12px;
}

.wl-results-compare-list {
	display: grid;
	gap: 10px;
}

/* Results comparisons: restyle as "upsell-like" cards */
.wl-results-compare-card {
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 18px;
	padding: 12px;
	box-shadow: 0 16px 34px rgba(0, 0, 0, 0.22);
}

.wl-results-compare-card__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
}

.wl-results-compare-card__left {
	min-width: 0;
}

.wl-results-compare-card__top {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}

.wl-results-compare-card__logo {
	width: 44px;
	height: 44px;
	border-radius: 12px;
	object-fit: contain;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.14);
	padding: 6px;
	flex-shrink: 0;
}

.wl-results-compare-card__title {
	min-width: 0;
}

.wl-results-compare-card__name {
	font-weight: 950;
	letter-spacing: -0.02em;
	color: rgba(255, 255, 255, 0.98);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.wl-results-compare-card__meta {
	margin-top: 4px;
	display: flex;
	align-items: center;
	gap: 8px;
}

.wl-results-compare-card__headline {
	margin-top: 10px;
	display: flex;
	align-items: baseline;
	gap: 8px;
	flex-wrap: wrap;
}

.wl-results-compare-card__headline-label {
	font-weight: 800;
	color: rgba(255, 255, 255, 0.86);
}

.wl-results-compare-card__headline-amt {
	font-weight: 950;
	font-size: 1.25rem;
	color: rgba(255, 255, 255, 0.98);
	text-shadow: 0 14px 30px rgba(0, 0, 0, 0.20);
}

.wl-results-compare-card__right {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

@media (max-width: 575.98px) {
	.wl-results-compare-card__inner {
		flex-direction: column;
		align-items: flex-start;
	}
	.wl-results-compare-card__right {
		width: 100%;
	}
	.wl-results-compare-card__right .btn {
		width: 100%;
	}
}

.wl-results-empty {
	padding: 12px 14px;
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.10);
	color: rgba(255, 255, 255, 0.92);
}

.wl-results-empty__title {
	font-weight: 950;
	letter-spacing: -0.02em;
}

.wl-results-empty__sub {
	margin-top: 4px;
}

/* Results hub: yellow ticket body + red RESULTS stripes on both sides */
.wl-results-hub-card {
	--wl-ticket-stripe-w: 26px;
	/* Yellow "buttery" gradient body */
	background:
		radial-gradient(640px 340px at 25% 50%, rgba(255, 225, 130, 1) 0%, rgba(248, 205, 92, 1) 28%, rgba(236, 182, 62, 1) 52%, rgba(212, 150, 34, 1) 78%, rgba(176, 118, 18, 1) 100%),
		radial-gradient(520px 360px at 75% 45%, rgba(255, 240, 170, 0.40) 0%, rgba(255, 240, 170, 0.00) 62%),
		linear-gradient(135deg, rgba(255, 225, 130, 1) 0%, rgba(236, 182, 62, 1) 55%, rgba(176, 118, 18, 1) 100%);
	border: 0 !important;
	box-shadow: 0 18px 46px rgba(0, 0, 0, 0.30) !important;
}

/* Results hub: make logos fill the header area more (like Products/Lotteries) */
.wl-results-hub-card .wl-lottery-card-header {
	/* Banner logos are very wide/short; a shorter header makes them feel "filled" */
	min-height: 110px;
	padding: 10px 12px;
	overflow: hidden;
}

.wl-results-hub-card .wl-lottery-logo {
	max-width: 92%;
	max-height: 76px;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
	/* Helps logos pop on the beige paper */
	filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.14));
}

/* Results hub: minimal body layout (date + button) */
.wl-results-hub-card .wl-lottery-card-body {
	align-items: center;
	text-align: center;
}

.wl-results-hub-date {
	margin-top: 2px;
	margin-bottom: 10px;
}

.wl-results-hub-date__label {
	display: block;
	font-weight: 950;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	font-size: 0.92rem;
	/* Winnow blue */
	color: rgba(32, 56, 132, 0.98);
	text-shadow: 0 10px 22px rgba(0, 0, 0, 0.12);
}

.wl-results-hub-date__value {
	display: block;
	margin-top: 6px;
	font-weight: 950;
	font-size: 1.55rem;
	letter-spacing: 0.03em;
	/* Winnow blue */
	color: rgba(32, 56, 132, 1);
	text-shadow: 0 12px 26px rgba(0, 0, 0, 0.14);
}

/* Override the global left stripe (WINNOW LOTTO) with RESULTS, and add right stripe too */
.wl-results-hub-card::after {
	content: "RESULTS RESULTS RESULTS RESULTS RESULTS RESULTS RESULTS RESULTS";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: var(--wl-ticket-stripe-w);
	background: #FF0000;
	color: #ffffff;
	font-weight: 950;
	font-size: 0.72rem;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 8px 0;
	writing-mode: vertical-rl;
	text-orientation: mixed;
	transform: rotate(180deg);
	white-space: nowrap;
	overflow: hidden;
	z-index: 3;
	pointer-events: none;
}

.wl-results-hub-card::before {
	content: "RESULTS RESULTS RESULTS RESULTS RESULTS RESULTS RESULTS RESULTS";
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	width: var(--wl-ticket-stripe-w);
	background: #FF0000;
	color: #ffffff;
	font-weight: 950;
	font-size: 0.72rem;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 8px 0;
	writing-mode: vertical-rl;
	text-orientation: mixed;
	/* Mirror so it reads top-to-bottom */
	transform: rotate(0deg);
	white-space: nowrap;
	overflow: hidden;
	z-index: 3;
	pointer-events: none;
}

/* Shift card sections to make room for BOTH stripes (left + right) */
.wl-results-hub-card .wl-lottery-card-header,
.wl-results-hub-card .wl-lottery-card-body {
	padding-left: calc(14px + var(--wl-ticket-stripe-w));
	padding-right: calc(14px + var(--wl-ticket-stripe-w));
}

/* Number Picker (design-friendly defaults; override these freely) */
.number-picker {
	--np-size: 40px;
	--np-gap: 8px;
	--np-radius: 999px;
	--np-border: #dee2e6;
	--np-bg: #ffffff;
	--np-fg: #212529;
	--np-selected-bg: #0d6efd;
	--np-selected-fg: #ffffff;
	--np-disabled-opacity: .45;
}

.wl-pb-lines .number-picker {
	/* Make the board fill more of the ticket + feel centered */
	--np-size: clamp(42px, 2.4vw, 60px);
	--np-gap: clamp(6px, 0.7vw, 12px);
}

.number-picker .np-numbers {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(var(--np-size), 1fr));
	gap: var(--np-gap);
	justify-items: center; /* default */
}

/* Powerball: make grids span the full width consistently */
.wl-pb-lines .np-field:not(.wl-np-field-powerball) .np-numbers {
	grid-template-columns: repeat(7, minmax(0, 1fr));
	justify-items: stretch;
}

.wl-pb-lines .wl-np-field-powerball .np-numbers {
	/* Keep Powerball's bonus field aligned with the main-board column rhythm (7-across),
	   so the 1–26 range doesn't end with an awkward 2-ball last row. */
	grid-template-columns: repeat(7, minmax(0, 1fr));
	justify-items: stretch;
}

/* Normalize ALL bonus-ball boards to 6 across (MegaBall, Lucky Star, Euro numbers, etc.).
   This must come AFTER the generic non-powerball rule above. */
.wl-pb-lines .wl-np-field-bonus .np-numbers {
	grid-template-columns: repeat(6, minmax(0, 1fr));
	justify-items: stretch;
}

/* Make the buttons fill their grid cells (so the board always fills the ticket) */
.wl-pb-lines .number-picker .np-number {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
}

.wl-pb-lines .number-picker .np-number .np-label {
	/* Cleaner typography (less heavy/bold) */
	font-weight: 600;
	font-size: clamp(0.95rem, 1.1vw, 1.15rem);
}

/* Offer landing pages: prefer 2-up tickets when possible (avoid squished tickets) */
.wl-offer-pb .wl-pb-lines {
	/* Default: responsive, but allow wrapping when space is tight */
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;
}

/* When we have enough width, lock to two columns so tickets sit side-by-side */
@media (min-width: 900px) {
	.wl-offer-pb .wl-pb-lines {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 575.98px) {
	.wl-offer-pb .wl-pb-lines {
		grid-template-columns: 1fr !important;
	}
}

/* Offer landing: trust row (icon + text on background, no bubbles) */
.wl-offer-trust {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px 16px;
	margin-top: 14px;
}

@media (max-width: 575.98px) {
	.wl-offer-trust {
		grid-template-columns: 1fr;
	}
}

.wl-offer-trust__item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 2px 0;
}

.wl-offer-trust__item i {
	font-size: 1.1rem;
	line-height: 1.1;
	color: rgba(255, 255, 255, 0.90);
	margin-top: 1px;
}

.wl-offer-trust__title {
	font-weight: 700;
	color: rgba(255, 255, 255, 0.94);
}

.wl-offer-trust__sub {
	font-size: 0.92rem;
	color: rgba(255, 255, 255, 0.78);
}

/* Offer landing: make the hero banner full-bleed inside the top panel */
.wl-offer-panel .wl-offer-hero {
	margin: -22px -22px 16px;
	border-radius: 0;
}

@media (max-width: 575.98px) {
	.wl-offer-panel .wl-offer-hero {
		margin: -18px -18px 14px;
	}
}

/* Checkout: right-side summary + wallet balance */
.wl-checkout-balance__label {
	color: rgba(255, 255, 255, 0.78);
	font-weight: 800;
}
.wl-checkout-balance__value {
	margin-top: 2px;
	font-size: 1.45rem;
	font-weight: 950;
	color: rgba(255, 255, 255, 0.96);
}

.wl-checkout-summary {
	padding: 12px 14px;
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.14);
}
.wl-checkout-summary__title {
	font-weight: 900;
	color: rgba(255, 255, 255, 0.94);
	margin-bottom: 10px;
}
.wl-checkout-summary__rows {
	display: grid;
	gap: 10px;
}

.wl-checkout-summary__note{
	grid-column: 1 / -1;
	text-align: right;
	margin-top: -2px;
	margin-bottom: 2px;
}
.wl-checkout-summary__row {
	display: grid;
	grid-template-columns: 1fr auto auto;
	gap: 14px;
	align-items: center;
	padding-top: 10px;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.wl-checkout-summary__row:first-child {
	border-top: 0;
	padding-top: 0;
}
.wl-checkout-summary__name {
	font-weight: 850;
	color: rgba(255, 255, 255, 0.92);
}
.wl-checkout-summary__meta {
	margin-top: 2px;
	font-size: 0.92rem;
	color: rgba(255, 255, 255, 0.72);
}
.wl-checkout-summary__right {
	font-weight: 950;
	color: rgba(255, 255, 255, 0.96);
	white-space: nowrap;
}

.wl-checkout-summary__remove{
	display: flex;
	justify-content: flex-end;
}

.wl-checkout-remove{
	width: 30px;
	height: 30px;
	border-radius: 999px;
	border: 1px solid rgba(255, 60, 80, 0.40);
	background: rgba(255, 60, 80, 0.20);
	color: rgba(255, 255, 255, 0.95);
	font-weight: 950;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	box-shadow: 0 10px 22px rgba(255, 60, 80, 0.20);
}

.wl-checkout-remove:hover{
	background: rgba(255, 60, 80, 0.30);
	border-color: rgba(255, 60, 80, 0.55);
}
.wl-checkout-summary__total {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid rgba(255, 255, 255, 0.16);
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 14px;
	align-items: baseline;
}
.wl-checkout-summary__total-label {
	font-weight: 950;
	color: rgba(255, 255, 255, 0.94);
}
.wl-checkout-summary__total-value {
	font-size: 1.25rem;
	font-weight: 950;
	color: rgba(255, 255, 255, 0.98);
	white-space: nowrap;
}

.wl-checkout-summary__total-right{
	text-align: right;
}

.wl-checkout-summary__total-right .wl-promo-note{
	display: block;
	text-align: right;
}

/* Checkout promo confirmation note */
.wl-promo-note{
	color: rgba(190, 255, 210, 0.92);
	font-weight: 700;
}

/* Checkout: left "Your order" panel typography + hierarchy */
.wl-order-panel {
	padding: 18px 18px 14px;
}

/* Checkout upsell: make the "selling feature" + discount much more prominent */
.wl-upsell-card{
	padding: 10px 4px;
	background: transparent;
	border: 0;
}

.wl-upsell-card .wl-upsell-game{
	font-weight: 950;
	letter-spacing: -0.02em;
	color: rgba(255, 255, 255, 0.96);
	line-height: 1.1;
}

.wl-upsell-card .wl-upsell-sub{
	margin-top: 2px;
	color: rgba(255, 255, 255, 0.70);
	font-weight: 650;
	font-size: 0.92rem;
}

.wl-upsell-card .wl-upsell-headline{
	margin-top: 6px;
	font-weight: 950;
	letter-spacing: -0.02em;
	font-size: 1.35rem;
	line-height: 1.08;
	color: rgba(255, 255, 255, 0.98);
	text-wrap: balance;
}

.wl-upsell-card .wl-upsell-discount{
	margin-top: 6px;
	font-weight: 950;
	font-size: 1.10rem;
	color: rgba(190, 255, 210, 0.94);
}

.wl-upsell-card .wl-upsell-scale-note{
	margin-top: 2px;
	font-weight: 650;
	font-size: 0.86rem;
	color: rgba(255, 255, 255, 0.70);
}

@media (max-width: 575.98px) {
	.wl-upsell-card .wl-upsell-headline{
		font-size: 1.18rem;
	}
	.wl-upsell-card .wl-upsell-discount{
		font-size: 1.02rem;
	}
}

.wl-order-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 14px;
	padding-bottom: 12px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	margin-bottom: 12px;
}

.wl-order-title {
	font-weight: 950;
	letter-spacing: -0.02em;
	font-size: 1.22rem;
	color: rgba(255, 255, 255, 0.96);
}

.wl-order-sub {
	margin-top: 2px;
	color: rgba(255, 255, 255, 0.72);
	font-weight: 650;
	font-size: 0.92rem;
}

.wl-order-total-label {
	text-align: right;
	color: rgba(255, 255, 255, 0.72);
	font-weight: 800;
	font-size: 0.85rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.wl-order-total-value {
	text-align: right;
	font-size: 1.65rem;
	font-weight: 950;
	letter-spacing: -0.02em;
	line-height: 1.05;
	color: rgba(255, 255, 255, 0.98);
}

.wl-order-total-sub {
	text-align: right;
	color: rgba(255, 255, 255, 0.60);
	font-weight: 650;
	font-size: 0.88rem;
	margin-top: 2px;
}

.wl-order-item {
	background: transparent;
	border: 0;
}

.wl-order-item + .wl-order-item {
	border-top: 1px solid rgba(255, 255, 255, 0.10);
}

.wl-order-item__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
}

.wl-order-item__name {
	font-weight: 900;
	letter-spacing: -0.01em;
	color: rgba(255, 255, 255, 0.96);
}

.wl-order-item__code {
	display: inline-block;
	margin-left: 8px;
	padding: 2px 8px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.10);
	border: 1px solid rgba(255, 255, 255, 0.14);
	color: rgba(255, 255, 255, 0.82);
	font-weight: 850;
	font-size: 0.82rem;
}

.wl-order-item__meta {
	margin-top: 4px;
	color: rgba(255, 255, 255, 0.72);
	font-weight: 650;
	font-size: 0.94rem;
}

.wl-order-item__price {
	color: rgba(255, 255, 255, 0.96);
	font-weight: 950;
	font-size: 1.05rem;
	white-space: nowrap;
}

.wl-order-item__lines {
	margin-top: 10px;
	padding: 10px 12px;
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.12);
	font-size: 0.92rem;
	line-height: 1.35;
}

.wl-order-line {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 12px;
	padding: 4px 0;
}

.wl-order-line + .wl-order-line {
	border-top: 1px dashed rgba(255, 255, 255, 0.12);
}

.wl-order-line__k {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 28px;
	height: 22px;
	padding: 0 8px;
	border-radius: 999px;
	background: rgba(255, 92, 168, 0.18);
	border: 1px solid rgba(255, 92, 168, 0.22);
	color: rgba(255, 255, 255, 0.88);
	font-weight: 900;
	font-size: 0.82rem;
}

.wl-order-line__pair {
	display: inline-flex;
	gap: 6px;
	align-items: baseline;
}

.wl-order-line__k2 {
	color: rgba(255, 255, 255, 0.70);
	font-weight: 800;
}

.wl-order-line__v {
	color: rgba(255, 255, 255, 0.95);
	font-weight: 850;
}

@media (max-width: 575.98px) {
	.wl-order-total-value { font-size: 1.45rem; }
	.wl-order-item__lines { font-size: 0.88rem; }
}

.number-picker .np-number {
	width: var(--np-size);
	height: var(--np-size);
	border-radius: var(--np-radius);
	border: 1px solid var(--np-border);
	background: var(--np-bg);
	color: var(--np-fg);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	user-select: none;
}

.number-picker .np-number .np-label {
	/* Cleaner typography site-wide */
	font-weight: 500;
	font-size: 0.9rem;
	line-height: 1;
}

.number-picker [data-np-number].is-selected {
	background: var(--np-selected-bg);
	color: var(--np-selected-fg);
	border-color: var(--np-selected-bg);
}

.number-picker [data-np-number].is-disabled {
	opacity: var(--np-disabled-opacity);
	cursor: not-allowed;
}