:where([class^="ri-"])::before {
	content: "\f3c2";
}

body {
	font-family: 'Inter', sans-serif;
	background-color: #f9f9fc;
}

@keyframes fade-in {
	from {
		opacity: 0;
		transform: translateY(-1rem);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.animate-fade-in {
	animation: fade-in 0.3s ease-out forwards;
}

.verification-input {
	width: 3rem;
	height: 3.5rem;
	font-size: 1.5rem;
	text-align: center;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	background-color: white;
}

.verification-input:focus {
	outline: none;
	border-color: #6366f1;
	box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.purpose-option input[type="checkbox"] {
	position: absolute;
	opacity: 0;
}

.purpose-option input[type="checkbox"]:checked+label {
	border-color: #6366f1;
	background-color: rgba(99, 102, 241, 0.05);
}

.purpose-option input[type="checkbox"]:checked+label .check-icon {
	opacity: 1;
}

.custom-checkbox {
	width: 20px;
	height: 20px;
	border: 2px solid #cbd5e1;
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.2s;
}

.custom-checkbox-input:checked~.custom-checkbox {
	border-color: #6366f1;
	background-color: #6366f1;
}

.custom-checkbox-input:checked~.custom-checkbox i {
	opacity: 1;
}

.custom-checkbox i {
	opacity: 0;
	color: white;
	transition: opacity 0.2s;
}

/* Candle flame animation */
@keyframes flicker {
  0%, 100% { transform: scaleY(1) translateY(0); opacity: 1; }
  50% { transform: scaleY(1.1) translateY(-2px); opacity: 0.9; }
}

.candle-flame {
  display: inline-block;
  animation: flicker 2s ease-in-out infinite;
}