/* Curves Spinwheel Main Styles */

/* Stage 1 - Form */
.curves-stage-1 {
	animation: fadeIn 0.5s ease-in;
}

/* Stage 2 - Spinwheel */
.curves-stage-2 {
	animation: fadeIn 0.5s ease-in;
}

#curves-spinwheel {
	display: block;
	margin: 0 auto;
	border-radius: 50%;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

/* Stage 3 - Reward */
.curves-stage-3 {
	animation: fadeIn 0.5s ease-in;
}

/* Animations */
@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Responsive */
@media (max-width: 768px) {
	.curves-stage-1 .grid {
		grid-template-columns: 1fr;
	}

	#curves-spinwheel {
		width: 100% !important;
		max-width: 300px !important;
		height: auto !important;
	}
}

/* Form styling */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="date"],
select {
	transition: all 0.3s ease;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
select:focus {
	box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.1);
}

/* Button hover effects */
button {
	transition: all 0.3s ease;
}

button:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

button:active {
	transform: translateY(0);
}

/* Spinwheel container */
.curves-spinwheel-container {
	position: relative;
	width: 100%;
}

/* Print styles */
@media print {
	.curves-stage-3 button {
		display: none;
	}
}