/**
 * EazyClean SEO - Lucky Wheel Widget
 * Casino-style discount wheel in washing machine housing.
 *
 * Sections:
 *   1. Idle State
 *   2. Machine Housing
 *   3. LED
 *   4. Drum
 *   5. Wheel SVG
 *   6. Idle Spin Animation
 *   7. Clothing Emojis
 *   8. Rays
 *   9. Spin Button (accessibility overlay)
 *  10. Guilt Trip Modal
 *  11. Overlay
 *  12. Buttons
 *  13. Result
 *  14. Form & Countdown
 *  15. Success
 *  16. Confetti Canvas
 *  17. Particles
 *  18. Shake Animation
 *  19. Responsive
 *  20. Reduced Motion
 *
 * @package EazyClean_SEO
 */

/* ─── 1. Idle State ─────────────────────────────────────────── */

.eazyclean-wheel__idle {
	position: fixed;
	z-index: 99998;
	top: 40%;
	transform: translateY(-50%);
	cursor: pointer;
	transition: opacity 0.3s ease;
}

.eazyclean-wheel--left .eazyclean-wheel__idle {
	left: 16px;
}

.eazyclean-wheel--right .eazyclean-wheel__idle {
	right: 16px;
}

.eazyclean-wheel__idle-close {
	position: absolute;
	top: -10px;
	right: -10px;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: rgba(30, 41, 59, 0.95);
	border: 2px solid rgba(255, 255, 255, 0.5);
	color: #ffffff;
	font-size: 18px;
	line-height: 24px;
	text-align: center;
	cursor: pointer;
	z-index: 10;
	transition: all 0.2s;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.eazyclean-wheel__idle-close:hover {
	background: rgba(255, 107, 107, 0.9);
	color: white;
	border-color: rgba(255, 107, 107, 0.9);
}

.eazyclean-wheel__idle-label {
	display: block;
	text-align: center;
	color: #ffd700;
	font-size: 0.75rem;
	font-weight: 700;
	margin-top: 6px;
	text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
	font-family: 'Outfit', sans-serif;
}

/* ─── 2. Machine Housing ────────────────────────────────────── */

.eazyclean-wheel__machine {
	position: relative;
	border-radius: 1.5rem;
	background: linear-gradient(145deg, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.95));
	border: 3px solid rgba(255, 255, 255, 0.08);
	box-shadow:
		0 0 40px rgba(6, 182, 212, 0.1),
		inset 0 2px 4px rgba(255, 255, 255, 0.05);
}

.eazyclean-wheel__machine--small {
	width: 140px;
	height: 140px;
}

.eazyclean-wheel__machine--large {
	width: 280px;
	height: 280px;
	margin: 0 auto 1.5rem;
}

/* ─── 3. LED ────────────────────────────────────────────────── */

.eazyclean-wheel__led {
	position: absolute;
	top: 12px;
	right: 16px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #00d4ff;
	box-shadow: 0 0 8px rgba(6, 182, 212, 0.3);
	animation: eazyWheelLedPulse 2s ease-in-out infinite;
	z-index: 2;
}

@keyframes eazyWheelLedPulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.5; }
}

/* ─── 4. Drum ───────────────────────────────────────────────── */

.eazyclean-wheel__drum {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	border: 3px solid #00d4ff;
	background: radial-gradient(circle, rgba(6, 182, 212, 0.03), rgba(15, 23, 42, 0.9));
	overflow: hidden;
	box-shadow:
		inset 0 0 30px rgba(6, 182, 212, 0.08),
		0 0 15px rgba(6, 182, 212, 0.15);
}

.eazyclean-wheel__machine--small .eazyclean-wheel__drum {
	width: 100px;
	height: 100px;
}

.eazyclean-wheel__drum--large {
	width: 250px;
	height: 250px;
}

/* ─── 5. Wheel SVG ──────────────────────────────────────────── */

.eazyclean-wheel__svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* ─── 5b. Segments rotation setup ───────────────────────────── */

/* Large rotor uses SVG rotate(X, cx, cy) via setAttribute — no CSS transforms needed. */

/* ─── 6. Idle Spin Animation ────────────────────────────────── */

.eazyclean-wheel__idle .eazyclean-wheel__segments {
	animation: eazyWheelIdleSpin 20s linear infinite;
}

@keyframes eazyWheelIdleSpin {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

/* ─── 7. Clothing Emojis ────────────────────────────────────── */

.eazyclean-wheel__clothes {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.eazyclean-wheel__cloth {
	position: absolute;
	left: 50%;
	top: 50%;
	font-size: 1.2rem;
	will-change: transform;
}

.eazyclean-wheel__clothes--large .eazyclean-wheel__cloth {
	font-size: 1.8rem;
}

/* ─── 8. Rays ───────────────────────────────────────────────── */

.eazyclean-wheel__rays {
	position: absolute;
	inset: -40px;
	border-radius: 50%;
	background: conic-gradient(
		from 0deg,
		transparent 0deg, rgba(255, 215, 0, 0.08) 5deg, transparent 10deg,
		transparent 30deg, rgba(255, 215, 0, 0.08) 35deg, transparent 40deg,
		transparent 60deg, rgba(255, 215, 0, 0.08) 65deg, transparent 70deg,
		transparent 90deg, rgba(255, 215, 0, 0.08) 95deg, transparent 100deg,
		transparent 120deg, rgba(255, 215, 0, 0.08) 125deg, transparent 130deg,
		transparent 150deg, rgba(255, 215, 0, 0.08) 155deg, transparent 160deg,
		transparent 180deg, rgba(255, 215, 0, 0.08) 185deg, transparent 190deg,
		transparent 210deg, rgba(255, 215, 0, 0.08) 215deg, transparent 220deg,
		transparent 240deg, rgba(255, 215, 0, 0.08) 245deg, transparent 250deg,
		transparent 270deg, rgba(255, 215, 0, 0.08) 275deg, transparent 280deg,
		transparent 300deg, rgba(255, 215, 0, 0.08) 305deg, transparent 310deg,
		transparent 330deg, rgba(255, 215, 0, 0.08) 335deg, transparent 340deg,
		transparent 360deg
	);
	animation: eazyWheelRays 10s linear infinite;
	pointer-events: none;
	z-index: 0;
}

@keyframes eazyWheelRays {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

/* ─── 9. Spin Button (accessibility overlay) ────────────────── */

.eazyclean-wheel__spin-btn {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: transparent;
	border: none;
	cursor: pointer;
	z-index: 10;
}

.eazyclean-wheel__spin-btn:focus-visible {
	outline: 2px solid #ffd700;
	outline-offset: 2px;
}

/* ─── 10. Guilt Trip Modal ──────────────────────────────────── */

.eazyclean-wheel__guilt {
	position: fixed;
	inset: 0;
	z-index: 100001;
	display: flex;
	align-items: center;
	justify-content: center;
}

.eazyclean-wheel__guilt-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.75);
	backdrop-filter: blur(4px);
}

.eazyclean-wheel__guilt-box {
	position: relative;
	max-width: 400px;
	padding: 2rem;
	background: linear-gradient(145deg, #1e293b, #0f172a);
	border: 1px solid rgba(255, 215, 0, 0.3);
	border-radius: 1rem;
	text-align: center;
	box-shadow: 0 0 60px rgba(255, 215, 0, 0.1);
}

.eazyclean-wheel__guilt-box p {
	color: rgba(255, 255, 255, 0.9);
	font-size: 1rem;
	line-height: 1.6;
	margin-bottom: 1.5rem;
	font-family: 'Outfit', sans-serif;
}

/* ─── 11. Overlay ───────────────────────────────────────────── */

.eazyclean-wheel__overlay {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow-y: auto;
}

.eazyclean-wheel__overlay-bg {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.75);
	backdrop-filter: blur(6px);
}

.eazyclean-wheel__overlay-close {
	position: fixed;
	top: 16px;
	right: 16px;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(30, 41, 59, 0.95);
	border: 2px solid rgba(255, 255, 255, 0.5);
	color: #ffffff;
	font-size: 22px;
	line-height: 30px;
	text-align: center;
	cursor: pointer;
	z-index: 100003;
	transition: all 0.2s;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

.eazyclean-wheel__overlay-close:hover {
	background: rgba(255, 107, 107, 0.9);
	color: white;
	border-color: rgba(255, 107, 107, 0.9);
}

.eazyclean-wheel__overlay-content {
	position: relative;
	max-width: 500px;
	width: 90%;
	padding: 2rem;
	text-align: center;
	z-index: 1;
}

.eazyclean-wheel__heading {
	color: #ffd700;
	font-size: 1.8rem;
	font-weight: 800;
	margin-bottom: 0.5rem;
	font-family: 'Outfit', sans-serif;
	text-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
}

.eazyclean-wheel__subtext {
	color: rgba(255, 255, 255, 0.7);
	font-size: 0.9rem;
	margin-bottom: 1.5rem;
	font-family: 'Outfit', sans-serif;
}

/* ─── 12. Buttons ───────────────────────────────────────────── */

.eazyclean-wheel__btn {
	display: inline-block;
	padding: 12px 32px;
	border: none;
	border-radius: 50px;
	font-family: 'Outfit', sans-serif;
	font-weight: 700;
	font-size: 1rem;
	cursor: pointer;
	transition: all 0.3s;
}

.eazyclean-wheel__btn--gold {
	background: linear-gradient(135deg, #ffd700, #ffaa00);
	color: #0f172a;
	box-shadow: 0 4px 20px rgba(255, 215, 0, 0.3);
}

.eazyclean-wheel__btn--gold:hover {
	transform: scale(1.05);
	box-shadow: 0 6px 30px rgba(255, 215, 0, 0.5);
}

.eazyclean-wheel__btn--gray {
	background: transparent;
	color: rgba(255, 255, 255, 0.4);
	font-size: 0.75rem;
	padding: 8px 16px;
}

.eazyclean-wheel__btn--pulse {
	animation: eazyWheelPulse 1.5s ease-in-out infinite;
}

@keyframes eazyWheelPulse {
	0%, 100% { transform: scale(1); box-shadow: 0 4px 20px rgba(255, 215, 0, 0.3); }
	50% { transform: scale(1.08); box-shadow: 0 6px 30px rgba(255, 215, 0, 0.6); }
}

.eazyclean-wheel__btn--shimmer {
	position: relative;
	overflow: hidden;
	width: 100%;
}

.eazyclean-wheel__btn--shimmer::after {
	content: '';
	position: absolute;
	top: -50%;
	left: -50%;
	width: 200%;
	height: 200%;
	background: linear-gradient(
		to right,
		transparent 0%,
		rgba(255, 255, 255, 0.3) 50%,
		transparent 100%
	);
	transform: rotate(30deg);
	animation: eazyWheelShimmer 3s ease-in-out infinite;
}

@keyframes eazyWheelShimmer {
	0% { transform: translateX(-100%) rotate(30deg); }
	100% { transform: translateX(100%) rotate(30deg); }
}

/* ─── 13. Result ────────────────────────────────────────────── */

.eazyclean-wheel__result {
	margin: 1rem 0;
}

.eazyclean-wheel__result-text {
	color: white;
	font-size: 1.1rem;
	font-family: 'Outfit', sans-serif;
	line-height: 1.6;
	padding: 1rem;
	background: rgba(255, 255, 255, 0.05);
	border-radius: 0.75rem;
	border: 1px solid rgba(255, 255, 255, 0.1);
}

/* ─── 13b. Win Info (code + countdown + claim in result area) ── */

.eazyclean-wheel__win-info {
	margin-top: 1rem;
}

.eazyclean-wheel__win-info .eazyclean-wheel__btn {
	margin-top: 0.75rem;
}

/* ─── 14. Form & Countdown ──────────────────────────────────── */

.eazyclean-wheel__countdown {
	color: #ff4444;
	font-family: 'Outfit', sans-serif;
	font-weight: 700;
	font-size: 0.9rem;
	margin-bottom: 1rem;
}

.eazyclean-wheel__timer {
	font-size: 1.2rem;
	animation: eazyWheelTimerPulse 2s ease-in-out infinite;
}

@keyframes eazyWheelTimerPulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.7; }
}

.eazyclean-wheel__code-display {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-bottom: 1rem;
	padding: 10px 16px;
	background: rgba(255, 215, 0, 0.1);
	border: 1px solid rgba(255, 215, 0, 0.3);
	border-radius: 8px;
}

.eazyclean-wheel__code-display code {
	color: #ffd700;
	font-size: 1.4rem;
	font-weight: 800;
	letter-spacing: 2px;
	font-family: 'Outfit', monospace;
}

.eazyclean-wheel__copy-btn {
	background: none;
	border: none;
	color: rgba(255, 255, 255, 0.5);
	cursor: pointer;
	padding: 4px;
	transition: color 0.2s;
}

.eazyclean-wheel__copy-btn:hover {
	color: #ffd700;
}

.eazyclean-wheel__input {
	width: 100%;
	padding: 10px 14px;
	margin-bottom: 8px;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 8px;
	color: white;
	font-size: 0.9rem;
	font-family: 'Outfit', sans-serif;
	outline: none;
	box-sizing: border-box;
	transition: border-color 0.2s;
}

.eazyclean-wheel__input:focus {
	border-color: #00d3f2;
}

.eazyclean-wheel__textarea {
	resize: vertical;
	min-height: 60px;
}

.eazyclean-wheel__disclaimer {
	color: rgba(255, 255, 255, 0.5);
	font-size: 0.75rem;
	margin-top: 8px;
	font-family: 'Outfit', sans-serif;
}

/* Turnstile widget: flexible width strip */
.eazyclean-wheel__form .cf-turnstile {
	margin-bottom: 8px;
}

.eazyclean-wheel__contact-info {
	margin-top: 12px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.eazyclean-wheel__contact-info a {
	color: #00d3f2;
	text-decoration: none;
	font-size: 0.85rem;
	font-family: 'Outfit', sans-serif;
}

/* ─── 15. Success ───────────────────────────────────────────── */

.eazyclean-wheel__success {
	text-align: center;
	padding: 2rem;
}

.eazyclean-wheel__checkmark {
	width: 60px;
	height: 60px;
	margin: 0 auto 1rem;
	background: #22c55e;
	border-radius: 50%;
	color: white;
	font-size: 2rem;
	line-height: 60px;
	animation: eazyWheelCheckScale 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes eazyWheelCheckScale {
	0% { transform: scale(0); }
	100% { transform: scale(1); }
}

.eazyclean-wheel__success p {
	color: rgba(255, 255, 255, 0.9);
	font-family: 'Outfit', sans-serif;
	font-size: 1rem;
}

/* ─── 16. Confetti Canvas ───────────────────────────────────── */

.eazyclean-wheel__confetti {
	position: fixed;
	inset: 0;
	z-index: 100002;
	pointer-events: none;
}

/* ─── 17. Particles ─────────────────────────────────────────── */

.eazyclean-wheel__particles {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
}

.eazyclean-wheel__particle {
	position: absolute;
	width: 4px;
	height: 4px;
	background: #ffd700;
	border-radius: 50%;
	opacity: 0;
	animation: eazyWheelFloat 3s ease-in-out infinite;
}

@keyframes eazyWheelFloat {
	0% { transform: translateY(0); opacity: 0; }
	20% { opacity: 0.6; }
	100% { transform: translateY(-200px); opacity: 0; }
}

/* 12 particles with staggered delays and positions */
.eazyclean-wheel__particle:nth-child(1) {
	left: 8%;
	bottom: 10%;
	animation-delay: 0s;
}

.eazyclean-wheel__particle:nth-child(2) {
	left: 16%;
	bottom: 5%;
	animation-delay: 0.25s;
}

.eazyclean-wheel__particle:nth-child(3) {
	left: 25%;
	bottom: 15%;
	animation-delay: 0.5s;
}

.eazyclean-wheel__particle:nth-child(4) {
	left: 33%;
	bottom: 8%;
	animation-delay: 0.75s;
}

.eazyclean-wheel__particle:nth-child(5) {
	left: 42%;
	bottom: 12%;
	animation-delay: 1s;
}

.eazyclean-wheel__particle:nth-child(6) {
	left: 50%;
	bottom: 6%;
	animation-delay: 1.25s;
}

.eazyclean-wheel__particle:nth-child(7) {
	left: 58%;
	bottom: 14%;
	animation-delay: 1.5s;
}

.eazyclean-wheel__particle:nth-child(8) {
	left: 67%;
	bottom: 9%;
	animation-delay: 1.75s;
}

.eazyclean-wheel__particle:nth-child(9) {
	left: 75%;
	bottom: 11%;
	animation-delay: 2s;
}

.eazyclean-wheel__particle:nth-child(10) {
	left: 83%;
	bottom: 7%;
	animation-delay: 2.25s;
}

.eazyclean-wheel__particle:nth-child(11) {
	left: 92%;
	bottom: 13%;
	animation-delay: 2.5s;
}

.eazyclean-wheel__particle:nth-child(12) {
	left: 97%;
	bottom: 4%;
	animation-delay: 2.75s;
}

/* ─── 18. Shake Animation ──────────────────────────────────── */

@keyframes eazyWheelShake {
	0%, 100% { transform: translateX(0); }
	10%, 50%, 90% { transform: translateX(-4px); }
	30%, 70% { transform: translateX(4px); }
}

/* ─── 19. Responsive ────────────────────────────────────────── */

@media (max-width: 600px) {
	.eazyclean-wheel__machine--large {
		width: 220px;
		height: 220px;
	}

	.eazyclean-wheel__drum--large {
		width: 190px;
		height: 190px;
	}

	.eazyclean-wheel__overlay-content {
		padding: 1rem;
	}

	.eazyclean-wheel__heading {
		font-size: 1.3rem;
	}
}

/* ─── 20. Reduced Motion ────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.eazyclean-wheel__idle .eazyclean-wheel__segments,
	.eazyclean-wheel__rays,
	.eazyclean-wheel__led,
	.eazyclean-wheel__btn--pulse,
	.eazyclean-wheel__btn--shimmer::after,
	.eazyclean-wheel__timer,
	.eazyclean-wheel__particle {
		animation: none !important;
	}
}