/* Essenza's olive and warm neutral are custom colors in its active Elementor kit. */
.wlwl_lucky_wheel_content {
	color: var(--cse-color-text, var(--e-global-color-text, #171717));
	background: radial-gradient(circle at 20% 30%, color-mix(in srgb, var(--e-global-color-d13ca25, #999966) 12%, #fff), transparent 48%),
		color-mix(in srgb, var(--e-global-color-0c06a4e, #D0CBC6) 22%, #fff);
	box-shadow: none;
}

/* Background → decorative rain → interactive wheel and form. */
.wlwl_lucky_wheel_content .cse-lw-confetti {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
}

.wlwl_lucky_wheel_content .wheel-content-wrapper {
	position: relative;
	z-index: 1;
}

.wlwl_lucky_wheel_content .cse-lw-confetti span {
	position: absolute;
	top: var(--cse-lw-y);
	left: var(--cse-lw-x);
	width: 5px;
	height: 9px;
	border-radius: 1px;
	background: var(--e-global-color-d13ca25, #999966);
	opacity: 0;
	transform: rotate(-20deg);
}

.wlwl_lucky_wheel_content .cse-lw-confetti span:nth-child(3n) {
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--e-global-color-0c06a4e, #D0CBC6);
}

.wlwl_lucky_wheel_content .cse-lw-confetti span:nth-child(4n) {
	width: 3px;
	height: 7px;
}

.wlwl_lucky_wheel_content.lucky_wheel_content_show .cse-lw-confetti span {
	animation: cse-lw-confetti-fall 3.6s ease-in var(--cse-lw-delay) 1 both;
}

.wlwl_lucky_wheel_content .wlwl_pointer::before {
	color: var(--e-global-color-d13ca25, #999966);
}

.wlwl_wheel_icon[class] {
	background-color: var(--e-global-color-d13ca25, #999966);
}

.wlwl_lucky_wheel_content .wheel_content_right .wlwl_user_lucky .wlwl_spin_button,
.wlwl-button-apply-coupon-form .wlwl-button-apply-coupon {
	background-color: var(--e-global-color-d13ca25, #999966);
	color: var(--cse-color-text, var(--e-global-color-text, #000));
}

.wlwl_lucky_wheel_content .wheel_content_right .wlwl_field_input:focus-visible {
	outline: 2px solid var(--e-global-color-d13ca25, #999966);
	outline-offset: 2px;
}

/* The shadow belongs to the disc's outside edge, never to its painted prizes. */
.wlwl_lucky_wheel_content .wlwl_wheel_spin {
	border-radius: 50%;
	box-shadow: 0 16px 32px rgb(38 36 25 / 18%);
}

/* Cover Spinzo's painted center shadow with one clean, stationary site icon. */
.wlwl_lucky_wheel_content.cse-lw-has-site-icon #wlwl_canvas1 {
	box-shadow: none;
}

.wlwl_lucky_wheel_content .cse-lw-center-icon {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	width: 32%;
	aspect-ratio: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--e-global-color-0c06a4e, #D0CBC6);
	box-shadow: none;
	pointer-events: none;
	transform: translate(-50%, -50%);
}

.wlwl_lucky_wheel_content.wlwl_spin_top .cse-lw-center-icon {
	transform: translate(-50%, -50%) rotate(90deg);
}

.wlwl_lucky_wheel_content.wlwl_spin_bottom .cse-lw-center-icon {
	transform: translate(-50%, -50%) rotate(-90deg);
}

.wlwl_lucky_wheel_content .cse-lw-center-icon img {
	display: block;
	width: 74%;
	height: 74%;
	max-width: none;
	object-fit: contain;
}

/* Elementor's kit supplies the family and weights; body typography is the fallback. */
.wlwl_lucky_wheel_content,
.wlwl_lucky_wheel_content .wheel-content-wrapper .wheel_content_right,
.wlwl_lucky_wheel_content .wheel-content-wrapper .wheel_content_right input,
.wlwl_lucky_wheel_content .wheel-content-wrapper .wheel_content_right span,
.wlwl_lucky_wheel_content .wheel-content-wrapper .wheel_content_right a,
.wlwl_lucky_wheel_content .wheel-content-wrapper .wheel_content_right .wlwl-frontend-result {
	font-family: var(--cse-font-text, var(--e-global-typography-text-font-family, inherit)) !important;
}

.wlwl_lucky_wheel_content .wheel_description,
.wlwl_lucky_wheel_content .wlwl_field_input,
.wlwl_lucky_wheel_content .wlwl-gdpr-checkbox-wrap label,
.wlwl_lucky_wheel_content .wlwl-show-again-option span {
	font-weight: var(--e-global-typography-text-font-weight, 400) !important;
}

.wlwl_lucky_wheel_content .wheel_description strong {
	font-weight: var(--e-global-typography-accent-font-weight, 500) !important;
}

.wlwl_lucky_wheel_content .wheel_content_right .wlwl_user_lucky .wlwl_spin_button {
	font-family: var(--cse-font-button, var(--e-global-typography-accent-font-family, var(--e-global-typography-text-font-family, inherit))) !important;
	font-weight: var(--e-global-typography-accent-font-weight, 500) !important;
	font-size: var(--e-global-typography-accent-font-size, 1rem) !important;
	line-height: 1.4 !important;
}

/* Keep the real wheel as the focal point and the form in one reading column. */
.wlwl_lucky_wheel_content .wheel-content-wrapper .wheel_content_right {
	min-height: 0;
	padding: clamp(22px, 3vw, 34px);
	background: #fff;
	border: 1px solid color-mix(in srgb, var(--e-global-color-d13ca25, #999966) 22%, #fff);
	border-radius: 24px;
	box-shadow: 0 12px 40px rgb(0 0 0 / 5%);
}

.wlwl_lucky_wheel_content .wlwl-close-wheel,
.wlwl_lucky_wheel_content .wlwl-hide-after-spin {
	top: 12px;
	right: 12px;
	width: 40px;
	height: 40px;
	line-height: 40px;
	text-align: center;
	background: rgb(255 255 255 / 88%);
	border-radius: 50%;
}

.wlwl_lucky_wheel_content .wheel_description {
	padding: 0;
	line-height: 1.45;
}

.wlwl_lucky_wheel_content .wheel_description p {
	margin: 0;
}

.wlwl_lucky_wheel_content .wheel_description p + p {
	margin-top: 8px;
	color: color-mix(in srgb, var(--e-global-color-text, #171717) 72%, #fff);
}

.wlwl_lucky_wheel_content .wheel_description strong {
	display: block;
	font-size: clamp(22px, 2.3vw, 30px);
	line-height: 1.16;
	letter-spacing: -.02em;
}

.wlwl_lucky_wheel_content .wheel-content-wrapper .wheel_content_right .wlwl_user_lucky {
	max-width: 100%;
	padding: 0;
	margin: 16px 0 0;
}

.wlwl_lucky_wheel_content .wlwl_user_lucky .wlwl_field_name_wrap,
.wlwl_lucky_wheel_content .wlwl_user_lucky .wlwl_field_mobile_wrap,
.wlwl_lucky_wheel_content .wlwl_user_lucky .wlwl_field_email_wrap {
	margin: 0 0 11px;
	text-align: left;
}

.wlwl_lucky_wheel_content .cse-lw-field-label {
	display: block;
	margin-bottom: 5px;
	font-size: 13px;
	line-height: 1.35;
	font-weight: var(--e-global-typography-accent-font-weight, 500);
}

.wlwl_lucky_wheel_content .wlwl_field_input,
.wlwl_lucky_wheel_content .wlwl_field_select {
	min-height: 46px;
	border-radius: 10px;
	border-color: color-mix(in srgb, var(--e-global-color-d13ca25, #999966) 27%, #fff);
	background: #fff;
	font-size: 16px;
}

.wlwl_lucky_wheel_content .wheel_content_right .wlwl_user_lucky .wlwl_spin_button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 50px;
	margin-top: 14px;
	padding: 10px 16px;
	border-radius: 10px;
	white-space: normal;
	text-align: center;
	transition: background-color .2s ease, transform .2s ease;
}

.wlwl_lucky_wheel_content .wheel_content_right .wlwl_user_lucky .wlwl_spin_button:hover {
	transform: translateY(-2px);
	background-color: color-mix(in srgb, var(--e-global-color-d13ca25, #999966) 84%, #fff);
}

.wlwl_lucky_wheel_content .wheel_content_right .wlwl_user_lucky .wlwl_spin_button:focus-visible,
.wlwl_lucky_wheel_content .wlwl-close-wheel:focus-visible {
	outline: 3px solid var(--e-global-color-d13ca25, #999966);
	outline-offset: 3px;
}

.wlwl_lucky_wheel_content .wlwl-gdpr-checkbox-wrap {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	margin: 8px 0 0;
	font-size: 13px;
	line-height: 1.4;
}

.wlwl_lucky_wheel_content .wlwl-gdpr-checkbox-wrap input[type="checkbox"] {
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	margin: 0;
}

.wlwl_lucky_wheel_content .wlwl-gdpr-checkbox-wrap label {
	flex: 1;
	min-width: 0;
}

.wlwl_lucky_wheel_content .wlwl-show-again-option {
	justify-content: center;
	flex-wrap: wrap;
	gap: 6px 16px;
	margin-top: 16px;
	padding: 12px 0 0;
	border-top: 1px solid color-mix(in srgb, var(--e-global-color-0c06a4e, #D0CBC6) 65%, #fff);
}

.wlwl_lucky_wheel_content .wlwl-show-again-option > div {
	padding: 0;
}

.wlwl_lucky_wheel_content .wlwl-show-again-option span {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	font-size: 13px;
}

.wlwl_lucky_wheel_content .wlwl-frontend-result {
	padding: 16px;
	border-radius: 14px;
	background: color-mix(in srgb, var(--e-global-color-d13ca25, #999966) 10%, #fff);
	font-size: 16px;
	line-height: 1.5;
	overflow-wrap: anywhere;
}

.wlwl_lucky_wheel_content.lucky_wheel_content_show .wlwl_wheel_spin {
	animation: cse-lw-wheel-arrive .65s cubic-bezier(.2, .8, .2, 1) both;
}

.wlwl_lucky_wheel_content.lucky_wheel_content_show .wheel_content_right {
	animation: cse-lw-form-arrive .55s ease-out both;
}

.wlwl_lucky_wheel_content.wlwl-finish-spinning .wlwl-frontend-result {
	animation: cse-lw-form-arrive .45s ease-out both;
}

/* Spinzo's own 64px canvas is the mobile invitation. It only animates its
   appearance: the prize spin still requires the visitor to submit the form. */
@media (max-width: 759px) {
	#wlwl_popup_canvas.wlwl_wheel_icon {
		top: 50%;
		bottom: auto;
		left: auto;
		right: max(6px, env(safe-area-inset-right));
		width: 58px;
		height: 58px;
		margin: -29px -75px 0 0;
		border: 3px solid var(--e-global-color-d13ca25, #999966);
		border-radius: 50%;
		background: var(--e-global-color-0c06a4e, #D0CBC6);
		box-shadow: 0 3px 10px rgb(0 0 0 / 18%);
		transition: margin-right .45s ease, opacity .45s ease;
		transform: none;
		touch-action: manipulation;
	}

	#wlwl_popup_canvas.wlwl_wheel_icon.wlwl_show {
		margin-right: 0;
		animation: cse-lw-teaser-intro 3.6s ease-in-out 1 both;
	}

	#wlwl_popup_canvas.wlwl_wheel_icon:focus-visible {
		outline: 3px solid var(--e-global-color-d13ca25, #999966);
		outline-offset: 3px;
	}

	.wlwl_lucky_wheel_content.wlwl_lucky_wheel_content_mobile {
		width: 100%;
		max-width: 100vw !important;
		height: 100vh;
		height: 100dvh;
		padding: calc(52px + env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
			calc(20px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
		overscroll-behavior: contain;
	}

	.wlwl_lucky_wheel_content.wlwl_lucky_wheel_content_mobile .wheel-content-wrapper {
		height: auto;
		min-height: 100%;
		flex-direction: column;
		justify-content: flex-start;
		align-items: stretch;
		gap: 16px;
	}

	.wlwl_lucky_wheel_content.wlwl_lucky_wheel_content_mobile .wheel-content-wrapper .wheel_content_left,
	.wlwl_lucky_wheel_content.wlwl_lucky_wheel_content_mobile .wheel-content-wrapper .wheel_content_right {
		width: 100% !important;
		max-width: 100%;
		min-width: 0;
		margin: 0;
		padding: 0;
	}

	.wlwl_lucky_wheel_content.wlwl_lucky_wheel_content_mobile .wheel-content-wrapper .wheel_content_right {
		padding: 18px 16px;
		border-radius: 20px;
	}

	.wlwl_lucky_wheel_content.wlwl_lucky_wheel_content_mobile .wheel-content-wrapper .wheel_content_left {
		flex: none;
	}

	.wlwl_lucky_wheel_content.wlwl_lucky_wheel_content_mobile .wheel_description {
		min-height: 0 !important;
		padding: 0;
		font-size: clamp(14px, 4vw, 16px);
		line-height: 1.35;
		text-align: left;
	}

	.wlwl_lucky_wheel_content.wlwl_lucky_wheel_content_mobile .wheel_description strong {
		font-size: clamp(21px, 6vw, 25px);
	}

	.wlwl_lucky_wheel_content.wlwl_lucky_wheel_content_mobile .wheel_description h1,
	.wlwl_lucky_wheel_content.wlwl_lucky_wheel_content_mobile .wheel_description h2,
	.wlwl_lucky_wheel_content.wlwl_lucky_wheel_content_mobile .wheel_description h3 {
		font-weight: var(--e-global-typography-accent-font-weight, 500);
		line-height: 1.25;
	}

	.wlwl_lucky_wheel_content.wlwl_lucky_wheel_content_mobile .wheel-content-wrapper .wheel_content_right .wlwl_user_lucky:not(.wlwl_user_lucky_spinning) {
		max-height: none !important;
		overflow: visible;
		margin: 14px 0 0;
	}

	.wlwl_lucky_wheel_content.wlwl_lucky_wheel_content_mobile .wlwl_user_lucky .wlwl_field_name_wrap,
	.wlwl_lucky_wheel_content.wlwl_lucky_wheel_content_mobile .wlwl_user_lucky .wlwl_field_mobile_wrap,
	.wlwl_lucky_wheel_content.wlwl_lucky_wheel_content_mobile .wlwl_user_lucky .wlwl_field_email_wrap {
		margin: 0 0 9px;
		min-width: 0;
	}

	.wlwl_lucky_wheel_content.wlwl_lucky_wheel_content_mobile .wlwl_field_input,
	.wlwl_lucky_wheel_content.wlwl_lucky_wheel_content_mobile .wlwl_field_select {
		min-width: 0;
		min-height: 44px;
		font-size: 16px;
	}

	.wlwl_lucky_wheel_content.wlwl_lucky_wheel_content_mobile .wheel_content_right .wlwl_user_lucky .wlwl_spin_button {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		min-height: 48px;
		margin-top: 8px;
		padding: 10px 12px;
		text-align: center;
		white-space: normal;
	}

	.wlwl_lucky_wheel_content.wlwl_lucky_wheel_content_mobile .wlwl-gdpr-checkbox-wrap {
		margin-top: 8px;
		font-size: 13px;
		line-height: 1.4;
	}

	.wlwl_lucky_wheel_content.wlwl_lucky_wheel_content_mobile .wlwl-show-again-option {
		flex-wrap: wrap;
		gap: 8px 12px;
		padding: 10px 0 0;
	}

	.wlwl_lucky_wheel_content.wlwl_lucky_wheel_content_mobile .wlwl-show-again-option > div {
		padding: 0;
	}

	.wlwl_lucky_wheel_content.wlwl_lucky_wheel_content_mobile .wlwl-close-wheel,
	.wlwl_lucky_wheel_content.wlwl_lucky_wheel_content_mobile .wlwl-hide-after-spin {
		position: fixed;
		top: calc(8px + env(safe-area-inset-top));
		right: calc(8px + env(safe-area-inset-right));
		width: 40px;
		height: 40px;
		line-height: 40px;
		text-align: center;
		background: rgb(255 255 255 / 84%);
		border-radius: 50%;
	}
}

@media (min-width: 760px) {
	#wlwl_popup_canvas.wlwl_wheel_icon.wlwl-wheel-position-middle-right {
		top: auto;
		bottom: 5px;
		right: auto;
		left: 5px;
		margin-right: 0;
		margin-left: -100%;
	}

	#wlwl_popup_canvas.wlwl_wheel_icon.wlwl-wheel-position-middle-right.wlwl_show {
		margin-left: 0;
		transform: none;
		animation: cse-lw-teaser-intro 3.6s ease-in-out 1 both;
	}
}

@keyframes cse-lw-teaser-intro {
	0%, 12% { transform: rotate(-12deg); }
	76% { transform: rotate(350deg); }
	90% { transform: rotate(365deg); }
	100% { transform: rotate(360deg); }
}

@keyframes cse-lw-wheel-arrive {
	from { opacity: .35; scale: .93; }
	to { opacity: 1; scale: 1; }
}

@keyframes cse-lw-form-arrive {
	from { opacity: .4; translate: 0 12px; }
	to { opacity: 1; translate: 0 0; }
}

@keyframes cse-lw-confetti-fall {
	0% { opacity: 0; transform: translate3d(0, -50px, 0) rotate(-20deg); }
	10% { opacity: .3; }
	80% { opacity: .3; }
	100% { opacity: 0; transform: translate3d(var(--cse-lw-drift), calc(100vh + 30px), 0) rotate(430deg); }
}

@media (prefers-reduced-motion: reduce) {
	#wlwl_popup_canvas.wlwl_wheel_icon.wlwl_show,
	.wlwl_lucky_wheel_content.lucky_wheel_content_show .wlwl_wheel_spin,
	.wlwl_lucky_wheel_content.lucky_wheel_content_show .wheel_content_right,
	.wlwl_lucky_wheel_content.wlwl-finish-spinning .wlwl-frontend-result,
	.wlwl_lucky_wheel_content.lucky_wheel_content_show .cse-lw-confetti span {
		animation: none !important;
	}

	#wlwl_popup_canvas.wlwl_wheel_icon.wlwl_show {
		transform: none !important;
		transition: opacity .2s ease, margin .2s ease !important;
	}

	.wlwl_lucky_wheel_content {
		transition: none !important;
	}

	.wlwl_lucky_wheel_content .wheel_content_right .wlwl_user_lucky .wlwl_spin_button:hover {
		transform: none;
	}
}
