/* Sign-up page styles */

.privacy-message {
	margin-top: 4px;
	text-align: center;
	width: 100%;
}

.signup-header {
	justify-content: flex-start;
}

.signup-header .login-logo {
	opacity: 1;
	animation: none;
}

.signup-card {
	position: relative;
	padding-top: 56px;
}

.signup-back {
	position: absolute;
	top: 56px;
	left: 56px;
	width: 32px;
	height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	transition: background var(--transition);
}

@media (max-width: 768px) {
	.signup-card {
		padding-top: 72px;
	}

	.signup-back {
		top: 24px;
		left: 24px;
	}
}

@media (max-width: 420px) {
	.signup-back {
		top: 20px;
		left: 20px;
	}
}

.signup-back img {
	width: 32px;
	height: 32px;
}

.signup-back:hover img {
	content: url("../assets/icons/left_hover.svg");
}

.checkbox-row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	font-size: 16px;
	color: #666666;
	cursor: pointer;
	flex-wrap: wrap;
}

.checkbox-input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.checkbox-box {
	width: 24px;
	height: 24px;
	border-radius: 4px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: url("../assets/icons/checkBox_default.svg") no-repeat center / contain;
	transition: background var(--transition);
}

.checkbox-row:hover .checkbox-box {
	background-image: url("../assets/icons/checkBox_hover%20disable.svg");
}

.checkbox-input:checked + .checkbox-box {
	background-image: url("../assets/icons/checked.svg");
}

.checkbox-input:checked + .checkbox-box::after {
	content: none;
}

.checkbox-row:hover .checkbox-input:checked + .checkbox-box {
	background-image: url("../assets/icons/hover%20checked.svg");
}

.checkbox-text {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.checkbox-link {
	color: var(--primary-hover);
}

.checkbox-link:hover {
	text-decoration: underline;
}

.signup-actions {
	margin-top: 16px;
}

@media (max-width: 768px) {
	#success-overlay .success-message {
		--success-stop-offset: 300px;
	}

	.slide-in-bottom {
		animation: slide-up-mobile 0.5s ease-in-out forwards;
	}

	@keyframes slide-up-mobile {
		0% {
			transform: translateY(100vh);
			opacity: 0;
		}
		100% {
			transform: translateY(var(--success-stop-offset));
			opacity: 1;
		}
	}
}