.signupPopup-wrapper.step_0 .header .title {margin-top: 70px;}
.signupPopup-wrapper.step_0 .header .title span {font-size: 2rem;}
.signupPopup-wrapper.step_0 .tabs-header {display: none;}

.signupPopup .step_0 .step-header {text-align: center;}
.signupPopup .step_0 .step-body {aspect-ratio: unset; height: 240px;}
.signupPopup .step_0 form {width: 98%; margin: 0 auto;}

/* Email */
.signupPopup .step_0 .email {position: relative;}
.signupPopup .step_0 .email label {width: 100%; position: relative;}
.signupPopup .step_0 .email input {
	height: 4rem !important; margin: 0; padding: 0 1.5rem 0 116px;
	border-radius: 2rem !important; font-size: 18px;
	direction: ltr; text-align: right;
}
.signupPopup .step_0 .email .errorMessage {
	position: absolute; bottom: -1.5rem; right: 0; width: 100%; text-align: center;
}
.signupPopup .step_0 .email button {
	position: absolute; top: 0; left: 0; width: 100px; height: 4rem;
	border-radius: 2rem; background-color: var(--color-main);
}
.signupPopup .step_0 .email button:hover {background-color: var(--color-main-darker);}
.signupPopup .step_0 .email button .timer {font-weight: normal;}

/* Code */
.signupPopup .step_0 .code {display: flex; flex-direction: column; gap: 1rem; align-items: center; margin-top: 2rem;}
.signupPopup .step_0 .code .inputs {display: flex; flex-direction: row-reverse; gap: .5rem;}
.signupPopup .step_0 .code button {width: 100px; padding: 0; border-radius: 20px;}
.signupPopup .step_0 .code button:focus {box-shadow: 0 0 0 3px white, 0 0 0 5px var(--color-main);}
.signupPopup .step_0 .code input {
	width: 40px; direction: ltr; margin: 0; text-align: center; font-size: 24px;
	box-shadow: 0 0 5px #ccc inset; transition: all .2s ease-in-out;
	border-radius: 20px !important; border: solid 1px #ccc; outline: none;
}
.signupPopup .step_0 .code input::selection {background-color: transparent;}
.signupPopup .step_0 .code input.success {
	border-color: #8a48ed !important; box-shadow: 0 0 8px #c6b2e5 inset;
}
.signupPopup .step_0 .code input.error,
.signupPopup .step_0 .code input:invalid {
	border-color: orangered !important; box-shadow: 0 0 8px #ffb2b2 inset;
}
.signupPopup .step_0 .code input:focus {
	border-color: #4792ff !important; box-shadow: 0 0 8px #9abff5 inset;
}
.signupPopup .step_0 .code input.active:invalid {
	border-color: orangered !important; box-shadow: 0 0 5px #ffb2b2 inset;
}

/**/
.signupPopup .step_0 .code-status {flex-direction: column; margin-top: 2rem; justify-content: center;}
.signupPopup .step_0 .code-error {color: orangered;}
.signupPopup .step_0 .continue.disabled {opacity: 1;}
.signupPopup .step_0 .continue-disabled {
	position: absolute; bottom: 4rem; width: 90%;
	text-align: center; font-size: 16px; font-weight: bold; color: orangered;
}

@media screen and (min-width: 40em) {
	.signupPopup-wrapper.step_0 .signupPopup > svg path {stroke-width: 4;}
	.signupPopup-wrapper.step_0 .signupPopup > svg g[clip-path] {display: block;}
	.signupPopup-wrapper.step_0 .content > div {width: 50%;}

	.signupPopup-wrapper.step_0 .button.continue {right: calc(25% - 95px);}

	.signupPopup .step_0 .code {flex-direction: row; justify-content: space-between;}

	.signupPopup .step_0 .continue-disabled {width: calc(50% - 6rem);}
}