/* Offer-only styles (scoped using `.wl-offer ...` selectors below). */

/* Make offer pages wider (offer-only). */
.wl-offer .wl-offer-panel {
	width: 100%;
	max-width: 1400px;
	margin-left: auto;
	margin-right: auto;
}

/* Multi-ticket offer layout: ensure each ticket column stretches fully */
.wl-offer [data-offer-ticket],
.wl-offer [data-offer-ticket] [data-pb-root],
.wl-offer [data-offer-ticket] [data-pb-lines],
.wl-offer [data-offer-ticket] [data-pb-line] {
	width: 100%;
	max-width: none;
}

/* Offer ticket grid: 2-up at tablet/desktop, then stack naturally on small screens */
.wl-offer .wl-pb-lines {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
	align-items: start;
}

.wl-offer .wl-pb-lines > .ticket-pick,
.wl-offer .wl-pb-lines > [data-pb-line] {
	min-width: 0;
	max-width: 100%;
}

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

/* Multi-picker offers (e.g. welcome4): each column contains ONE ticket picker,
   so the internal lines grid must stay 1-up; otherwise it makes the ticket skinny.
   IMPORTANT: Do not apply this to single-picker offers with multiple lines (e.g. welcome1 with 3 tickets),
   which should be able to render 2-up on desktop. */
.wl-offer.wl-offer--multi-picker [data-offer-ticket] .wl-pb-lines {
	grid-template-columns: 1fr !important;
}

/* Cap offer-page ticket size so it matches product-page feel, while leaving spare space
   (useful for future 3-ticket offers). Scoped to offer pages only. */
.wl-offer [data-offer-ticket] .ticket-pick,
.wl-offer [data-offer-ticket] [data-pb-line] {
	width: 100%;
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}

/* Nicer number font inside balls (offer-only) */
.wl-offer .number-picker .np-number .np-label {
	font-weight: 500;
	letter-spacing: -0.01em;
	font-variant-numeric: tabular-nums;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* SuperEnalotto / huge boards (1–90): fewer columns so circles can be larger + clearer (offer-only) */
.wl-offer .wl-np-field-huge .np-numbers {
	grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
	justify-items: stretch;
}

@media (min-width: 1200px) {
	.wl-offer .wl-np-field-huge .np-numbers {
		grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
	}
}

.wl-offer .wl-np-field-huge .np-number {
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 1 / 1;
}

/* -----------------------------
   Offer bundle contents card
   ----------------------------- */
.wl-offer .wl-offer-bundle-card {
	padding: 16px 16px;
	border-radius: 18px;
	background:
		linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.05));
	border: 1px solid rgba(255,255,255,0.16);
	box-shadow: 0 14px 36px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.08);
	text-align: center !important;
}

.wl-offer .wl-offer-bundle-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

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

.wl-offer .wl-offer-bundle-pill {
	font-weight: 900;
	font-size: 0.78rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 6px 10px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.10);
	border: 1px solid rgba(255, 255, 255, 0.18);
	color: rgba(255, 255, 255, 0.86);
}

.wl-offer .wl-offer-bundle-desc {
	margin: 16px auto 2px;
	max-width: 16ch;
	font-size: clamp(2.8rem, 6.8vw, 5.6rem) !important;
	line-height: 0.92 !important;
	font-weight: 950 !important;
	letter-spacing: -0.055em;
	color: #ffffff;
	text-align: center !important;
	text-wrap: balance;
	text-shadow:
		0 0 36px rgba(255, 92, 168, 0.24),
		0 10px 34px rgba(0, 0, 0, 0.34);
	position: relative;
	z-index: 2;
	animation: wl-offer-headline-pulse 1800ms ease-out 1;
	display: block;
	width: 100%;
}

.wl-offer .wl-offer-bundle-spotlight {
	position: relative;
	margin: 0 auto;
	padding: 34px 28px 36px;
	border-radius: 28px;
	overflow: hidden;
	text-align: center !important;
	max-width: 980px;
	background:
		radial-gradient(circle at 50% 0%, rgba(255, 232, 124, 0.34), rgba(255, 232, 124, 0) 34%),
		radial-gradient(circle at 10% 12%, rgba(88, 208, 205, 0.3), rgba(88, 208, 205, 0) 28%),
		radial-gradient(circle at 90% 14%, rgba(255, 92, 168, 0.3), rgba(255, 92, 168, 0) 28%),
		linear-gradient(180deg, rgba(255, 255, 255, 0.17), rgba(255, 255, 255, 0.07));
	border: 1px solid rgba(255, 255, 255, 0.26);
	box-shadow:
		0 24px 50px rgba(0, 0, 0, 0.28),
		inset 0 1px 0 rgba(255, 255, 255, 0.2),
		0 0 40px rgba(255, 92, 168, 0.08),
		0 0 0 1px rgba(255, 255, 255, 0.05);
	isolation: isolate;
	animation: wl-offer-spotlight-pop 650ms cubic-bezier(.18,.82,.24,1) both;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.wl-offer .wl-offer-bundle-spotlight::before {
	content: "";
	position: absolute;
	inset: -36% 8%;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 255, 255, 0.32) 0%, rgba(255, 255, 255, 0.12) 22%, rgba(255, 255, 255, 0) 66%);
	filter: blur(16px);
	opacity: 0.98;
	pointer-events: none;
	z-index: 0;
}

.wl-offer .wl-offer-bundle-spotlight::after {
	content: "";
	position: absolute;
	inset: 8px;
	border-radius: 22px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
	pointer-events: none;
	z-index: 0;
}

.wl-offer .wl-offer-bundle-spotlight__eyebrow {
	position: relative;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 8px 14px;
	border-radius: 999px;
	font-size: 0.86rem;
	font-weight: 900;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.88);
	background: rgba(10, 16, 36, 0.34);
	border: 1px solid rgba(255, 255, 255, 0.16);
	box-shadow: 0 10px 18px rgba(0, 0, 0, 0.14);
	margin-left: auto;
	margin-right: auto;
}

.wl-offer .wl-offer-bundle-spotlight__confetti {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 10px;
	height: 18px;
	border-radius: 999px;
	opacity: 0;
	pointer-events: none;
	transform-origin: center;
	animation: wl-offer-confetti-burst 1300ms cubic-bezier(.18,.82,.24,1) 140ms forwards;
	z-index: 1;
}

.wl-offer .wl-offer-bundle-spotlight__confetti--1 {
	background: linear-gradient(180deg, #ffdf6b, #ff8fb5);
	animation-delay: 80ms;
}

.wl-offer .wl-offer-bundle-spotlight__confetti--2 {
	background: linear-gradient(180deg, #7cf2ee, #6bb8ff);
	animation-delay: 150ms;
}

.wl-offer .wl-offer-bundle-spotlight__confetti--3 {
	background: linear-gradient(180deg, #ffe38a, #ffffff);
	animation-delay: 210ms;
}

.wl-offer .wl-offer-bundle-spotlight__confetti--4 {
	background: linear-gradient(180deg, #ff8fd1, #b58dff);
	animation-delay: 120ms;
}

.wl-offer .wl-offer-bundle-spotlight__confetti--5 {
	background: linear-gradient(180deg, #7cf2ee, #ffe38a);
	animation-delay: 260ms;
}

.wl-offer .wl-offer-bundle-spotlight__confetti--6 {
	background: linear-gradient(180deg, #ffffff, #7cf2ee);
	animation-delay: 180ms;
}

@keyframes wl-offer-confetti-burst {
	0% {
		opacity: 0;
		transform: translate(-50%, -50%) rotate(0deg) scale(0.45);
	}
	12% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		transform: translate(calc(-50% + var(--tx, 0px)), calc(-50% + var(--ty, 0px))) rotate(var(--rot, 0deg)) scale(1);
	}
}

.wl-offer .wl-offer-bundle-spotlight__confetti--1 { --tx: -148px; --ty: -88px; --rot: -28deg; }
.wl-offer .wl-offer-bundle-spotlight__confetti--2 { --tx: -110px; --ty: -126px; --rot: 18deg; }
.wl-offer .wl-offer-bundle-spotlight__confetti--3 { --tx: -34px; --ty: -150px; --rot: -14deg; }
.wl-offer .wl-offer-bundle-spotlight__confetti--4 { --tx: 118px; --ty: -118px; --rot: 26deg; }
.wl-offer .wl-offer-bundle-spotlight__confetti--5 { --tx: 152px; --ty: -72px; --rot: -22deg; }
.wl-offer .wl-offer-bundle-spotlight__confetti--6 { --tx: 42px; --ty: -148px; --rot: 12deg; }

.wl-offer .wl-offer-bundle-items {
	margin-top: 12px;
	display: grid;
	gap: 10px;
}

.wl-offer .wl-offer-bundle-item {
	padding: 10px 12px;
	border-radius: 14px;
	background: rgba(0,0,0,0.14);
	border: 1px solid rgba(255,255,255,0.12);
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	text-align: left;
}

.wl-offer .wl-offer-bundle-item__name {
	font-weight: 850;
	min-width: 0;
}

.wl-offer .wl-offer-bundle-item__meta {
	flex: 0 0 auto;
	font-weight: 800;
	color: rgba(255,255,255,0.74);
	font-variant-numeric: tabular-nums;
}

.wl-offer .wl-offer-bundle-hint {
	font-weight: 800;
	color: rgba(255,255,255,0.78);
	text-align: center;
}

@keyframes wl-offer-spotlight-pop {
	0% {
		opacity: 0;
		transform: translateY(12px) scale(0.97);
	}
	100% {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

/* Full-bleed variant: sits directly on the offer panel background, no outer
   "Bundle contents" card around it. Stretches edge-to-edge of the offer panel. */
.wl-offer .wl-offer-bundle-spotlight--bleed {
	max-width: none;
	width: 100%;
	margin: 0;
	border: 0;
	box-shadow:
		0 24px 50px rgba(0, 0, 0, 0.28),
		0 0 40px rgba(255, 92, 168, 0.10);
}

@keyframes wl-offer-headline-pulse {
	0% {
		transform: scale(0.94);
		filter: brightness(1.08);
	}
	45% {
		transform: scale(1.04);
		filter: brightness(1.18);
	}
	100% {
		transform: scale(1);
		filter: brightness(1);
	}
}

@media (max-width: 767.98px) {
	.wl-offer .wl-offer-bundle-spotlight {
		padding: 20px 14px 22px;
		border-radius: 22px;
	}

	.wl-offer .wl-offer-bundle-spotlight__eyebrow {
		font-size: 0.74rem;
		letter-spacing: 0.13em;
	}

	.wl-offer .wl-offer-bundle-desc {
		max-width: 12ch;
		font-size: clamp(2.2rem, 10vw, 3.4rem) !important;
	}

	.wl-offer .wl-offer-bundle-spotlight__confetti--1 { --tx: -88px; --ty: -60px; }
	.wl-offer .wl-offer-bundle-spotlight__confetti--2 { --tx: -64px; --ty: -88px; }
	.wl-offer .wl-offer-bundle-spotlight__confetti--3 { --tx: -20px; --ty: -104px; }
	.wl-offer .wl-offer-bundle-spotlight__confetti--4 { --tx: 70px; --ty: -82px; }
	.wl-offer .wl-offer-bundle-spotlight__confetti--5 { --tx: 94px; --ty: -54px; }
	.wl-offer .wl-offer-bundle-spotlight__confetti--6 { --tx: 28px; --ty: -102px; }
}

@media (prefers-reduced-motion: reduce) {
	.wl-offer .wl-offer-bundle-spotlight,
	.wl-offer .wl-offer-bundle-desc {
		animation: none;
	}

	.wl-offer .wl-offer-bundle-spotlight__confetti {
		animation: none;
		opacity: 0.3;
		transform: translate(-50%, -50%);
	}
}

/* -----------------------------
   In-ticket action buttons (Quick pick / Clear / Delete)
   -----------------------------
   Layout: "Pick your numbers" label sits on its own line above the action row,
   and the buttons stretch equally to fill the full ticket width so they're as
   large as possible while still fitting the ticket frame.

   The template uses dedicated classes (.wl-pb-picked-label and
   .wl-pb-ticket-actions) instead of Bootstrap utility classes so we don't have
   to fight specificity. */
.wl-pb-picked-label,
[data-pb-picked].wl-pb-picked-label {
	display: block !important;
	width: 100% !important;
	text-align: center !important;
	font-weight: 800 !important;
	color: rgba(255, 255, 255, 0.92);
	margin-bottom: 12px !important;
}

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

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

.wl-pb-ticket-actions {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: stretch !important;
	justify-content: stretch !important;
	gap: 10px !important;
	width: 100% !important;
	max-width: 100% !important;
	margin-bottom: 4px !important;
	box-sizing: border-box !important;
}

.wl-pb-ticket-actions > .wl-pb-ticket-actions__btn,
.wl-pb-ticket-actions__btn.btn,
button.wl-pb-ticket-actions__btn {
	flex: 1 1 0 !important;
	min-width: 0 !important;
	width: auto !important;
	max-width: none !important;
	padding: 16px 14px !important;
	font-size: 1.1rem !important;
	font-weight: 900 !important;
	border-radius: 14px !important;
	line-height: 1.1 !important;
	white-space: nowrap;
	letter-spacing: 0.005em;
}

@media (max-width: 480px) {
	.wl-pb-ticket-actions > .wl-pb-ticket-actions__btn,
	.wl-pb-ticket-actions__btn.btn,
	button.wl-pb-ticket-actions__btn {
		padding: 14px 10px !important;
		font-size: 1.02rem !important;
		border-radius: 12px !important;
	}
}

/* -----------------------------
   Offer SEO / info block (under tickets)
   White text on blue background, matching other text pages.
   ----------------------------- */
.wl-offer .wl-offer-seo {
	margin-top: 14px;
	padding: 14px 14px;
	border-radius: 18px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	background:
		radial-gradient(900px 420px at 18% 20%, rgba(88, 208, 205, 0.18) 0%, rgba(88, 208, 205, 0.00) 62%),
		radial-gradient(760px 420px at 84% 30%, rgba(255, 92, 168, 0.14) 0%, rgba(255, 92, 168, 0.00) 60%),
		linear-gradient(135deg, rgba(32, 56, 132, 0.92) 0%, rgba(40, 52, 120, 0.90) 55%, rgba(24, 34, 92, 0.90) 100%);
	box-shadow: 0 18px 46px rgba(0, 0, 0, 0.28);
}

.wl-offer .wl-offer-seo-block + .wl-offer-seo-block {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.wl-offer .wl-offer-seo .accordion-item,
.wl-offer .wl-offer-seo .accordion-button,
.wl-offer .wl-offer-seo .accordion-collapse {
	background: transparent !important;
	color: rgba(255, 255, 255, 0.92);
	border-color: rgba(255, 255, 255, 0.14) !important;
}

.wl-offer .wl-offer-seo .accordion-button {
	font-weight: 850;
	padding-left: 0;
	padding-right: 0;
}

.wl-offer .wl-offer-seo .accordion-button::after {
	filter: invert(1);
	opacity: 0.85;
}

.wl-offer .wl-offer-seo-note {
	padding: 12px 12px;
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.14);
	color: rgba(255, 255, 255, 0.92);
	font-weight: 750;
}

/* -----------------------------
   Offer-only sticky "Your entry"
   -----------------------------
   NOTE: This bar is detached to <body> by offer JS, so do NOT scope under .wl-offer.
*/
.wl-offer-entry-bar.is-hidden { display: none; }

.wl-offer-entry-bar {
	position: fixed;
	left: 12px;
	right: 12px;
	bottom: 12px;
	z-index: 1055; /* above base mini-cart stack (1050) just in case */
	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;
	justify-content: space-between;
	gap: 12px;
	width: auto;
}

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

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

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

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

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

.wl-offer-entry-bar__right {
	display: inline-flex;
	align-items: flex-start;
	gap: 10px;
	flex: 0 0 auto;
	justify-content: flex-end;
}

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

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

/* Offer entry shortcut buttons (match main-site color conventions, but keep offer-only classes). */
.wl-offer-entry-btn {
	/* Override Bootstrap .btn defaults consistently */
	border-radius: 999px !important;
	padding: 10px 16px !important;
	border: 0 !important;
	line-height: 1 !important;
	font-weight: 900 !important;
	font-size: 0.92rem !important;
	color: rgba(255, 255, 255, 0.98) !important;
	text-shadow: 0 1px 0 rgba(0, 0, 0, 0.20);
}

.wl-offer-entry-btn--add {
	background: linear-gradient(135deg, rgba(46, 204, 113, 1) 0%, rgba(22, 160, 133, 1) 60%, rgba(10, 120, 95, 1) 100%);
	box-shadow: 0 12px 26px rgba(46, 204, 113, 0.34);
}
.wl-offer-entry-btn--add:hover {
	filter: brightness(1.05);
	color: rgba(255, 255, 255, 1);
	box-shadow: 0 14px 30px rgba(46, 204, 113, 0.44);
}
.wl-offer-entry-btn--add:disabled,
.wl-offer-entry-btn--add[disabled] {
	filter: saturate(0.85);
	opacity: 0.72;
}

.wl-offer-entry-btn--clear {
	background: linear-gradient(135deg, rgba(255, 72, 92, 1) 0%, rgba(220, 53, 69, 1) 55%, rgba(150, 20, 32, 1) 100%);
	box-shadow: 0 12px 26px rgba(255, 72, 92, 0.32);
}
.wl-offer-entry-btn--clear:hover {
	filter: brightness(1.05);
	color: rgba(255, 255, 255, 1);
	box-shadow: 0 14px 30px rgba(255, 72, 92, 0.42);
}
.wl-offer-entry-btn--clear:disabled,
.wl-offer-entry-btn--clear[disabled] {
	filter: saturate(0.85);
	opacity: 0.72;
}

.wl-offer-entry-btn--paynow {
	background: linear-gradient(135deg, rgba(255, 92, 168, 1) 0%, rgba(217, 84, 161, 1) 55%, rgba(150, 64, 140, 1) 100%);
	box-shadow: 0 12px 26px rgba(255, 92, 168, 0.35);
	font-weight: 800;
	color: #ffffff;
}
.wl-offer-entry-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-offer-entry-btn--paynow:disabled,
.wl-offer-entry-btn--paynow[disabled] {
	filter: saturate(0.85);
	opacity: 0.72;
}