/* variaveis */
:root{
    --font-family: 'Poppins', sans-serif;
    --default-text-color: #444444;
    --default-placeholder-color: #999999;
    --default-login-color: #FC5003;
    --disabled-bg-button: #EEEEEE;
    --enable-bg-button: #FB5003;
    --enable-color-button: #FFFFFFFF;
    --error-bg: #FFE0E0;
    --error-msg-color: #D82828;
    --input-error-bg: #FFF8F8;
}

html{
    font-size: 10px;
}

/* reset e padroes */
*, body {
    padding: 0;
    margin: 0;
    font-family: var(--font-family);
}

body {
    background-color: #F9F9F9;
}

main{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    row-gap: 5rem;
    color: var(--default-text-color);
}

a{
    color: #444444;
    font-weight: bold;
    outline: none;
}

input{
    transition: 200ms ease-in-out;
}

p, label{
    font-size: 1.4rem
}

h1{
    font-size: 2.4rem
}

.main-padding{
    padding-top: 10rem;
}

.second-padding {
    padding-bottom: 6rem;
}

/* termos de uso */
.terms{
    color: #444444;
    font-weight: bold;
    outline: none;
    text-decoration: underline;
    cursor: pointer;
}

/* modal */
.modal-wrapper{
    position: fixed;
    background-color: rgba(0, 0, 0, .8);
    width: 100%;
    height: 100vh;
    top: 0;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 9rem 1rem;
}
.modal{
    background-color: #fff;
    width: 80rem;
    height: 100%;
    border-radius: 1rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}
.modal__title {
    padding: 3rem;
    border-bottom: 1px solid #DDDDDD;
}
.modal__title h2{
    color:#444444;
    font-size: 2.4rem;
    text-align: left;
}
.modal__content h3 {
    font-size: 1.4rem;
}
.modal__content{
    width: 100%;
    height: 100%;
    padding: 3rem;
    box-sizing: border-box;
    overflow: hidden;
}

.modal__content .content-term {
    max-height: 100%;
    overflow-x: hidden;
    padding-right: 3rem;
}

@media screen and (max-width:800px){
    .modal__title h2 {
        font-size: 2.4rem;
    }
    .modal__title {
        padding: 2.5rem;
    }
    .modal__content {
        padding: 2rem;
    }


}

.content-term::-webkit-scrollbar {
    width: 1rem
}

/* Track */
.content-term::-webkit-scrollbar-track {
  background: #CCCCCC; 
  border-radius: 1rem;
}
 
/* Handle */
.content-term::-webkit-scrollbar-thumb {
  background: #444444;
  border-radius: 1rem;
}

.terms__button {
    margin-top: 5rem;
    width: 100%;
}

/* loader */
.loader {
    width: 2.5rem;
    height: 2.5rem;
    border: .3rem solid #FFF;
    border-bottom-color: transparent;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
    margin-top:2px;
}

    @keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
} 
.loader.grey {
    border: .5rem solid var(--default-placeholder-color);
    border-bottom-color: transparent;
    border-radius: 50%;
}
/* esconder elemento */
.hidden{
    display: none !important;
}

/* bloco de erro */
.wrapper-box__error{
    background-color: var(--error-bg);
    padding: 2rem;
    border: .1rem solid #F0F0F0;
    border-radius: 1rem;
}

.wrapper-box__error__msg {
    font-weight: 600;
    color: var(--error-msg-color);
}

/* erro do input */
input.input__error{
    border: .1rem solid #FFB2B2;
    background-color: var(--input-error-bg);
}

.input-error__msg{
    color: var(--error-msg-color);
    font-size: 1.2rem;
}

/* logo */
.logo{
    width: 18rem;
}

/* link de login */
.login{
    text-align: center;
    color: var(--default-login-color);
}

.login a{
    color: #FC5003;
    text-decoration: none;
}

/* responder depois */
.anwser-later{
    color: var(--default-placeholder-color);
    cursor: pointer;
    font-size: 1.2rem;
    user-select: none;
}

.change-email {
    color: var(--default-text-color);
    cursor: pointer;
    font-size: 1.4rem;
    user-select: none;
    text-align:center;
}


/* containers principais */
.wrapper-box{
    box-sizing: border-box;
    padding: 5rem;
    box-shadow: .1rem .1rem .1rem #00000029;
    border: .1rem solid #F0F0F0;
    border-radius: 1rem;
    max-width: 50rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 5rem;
    background-color:#FFF;
}

.wrapper-box__introduction{
    display: flex;
    flex-direction: column;
    row-gap: 1rem;
    text-align: center;
}

.screen{
    animation: fadeIn 500ms;
}

@keyframes fadeIn {
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}

/* inputs */
.wrapper-box__user-infos{
    display: flex;
    flex-direction: column;
    row-gap: 3rem;
}

.user-inputs__input-container{
    display: flex;
    flex-direction: column;
    row-gap: .5rem;
}

.input-container__label{
    font-weight: 600;
}

.input-container__input{
    border: .1rem solid #DDDDDD;
    border-radius: 1rem;
    padding: 0 2rem;
    height: 5rem;
    box-sizing: border-box;
    width: 100%;
    outline: .1rem solid transparent;
}

.input-container__input:focus-visible{
    outline: .1rem solid #0063FF;
}

.input-container__input::placeholder{
    color: var(--default-placeholder-color);
}

.user-infos__button{
    height: 5rem;
    border-radius: 1rem;
    background-color: var(--enable-bg-button);
    color: var(--enable-color-button);
    border: none;
    cursor: pointer;
    font-weight: bold;
    outline: none;
    user-select: none;
    transition: 300ms ease-in-out;
}

.user-infos__button:not(.disabled):hover{
    opacity: .8;
}

.user-infos__button.disabled{
    background-color: var(--disabled-bg-button);
    color: var(--default-placeholder-color);
    display: flex;
    align-items: center;
    justify-content: center;
}

.user-infos__terms{
    font-size: 1.4rem;
    text-align: center;
}

/* primeira tela */
.input-container__password-container{
    position: relative;    
}

#password::-ms-reveal,
#password::-ms-clear{
    display: none;
}

.eye{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 2rem;
    cursor: pointer;
    margin-top:.2rem;
}

.eye svg path{
    stroke:#999 !important;
}

/* segunda tela */
.second-screen .wrapper-box__introduction{
    row-gap: 0;
}

.wrapper-box__introduction__email{
    font-weight: bold;
}

.input-container__verification-nums{
    display: flex;
    column-gap: 2rem;
}

.verification-nums__input{
    width: 100%;
    aspect-ratio: 1;
    text-align: center;
    font-size: 3.6rem;
    border: .1rem solid #DDDDDD;
    border-radius: 1rem;
    outline: none;
}
.verification-nums__input:focus{
    border: .1rem solid #0063FF;
}

.resend-email{
    font-size: 1.4rem;
    color: #707070;
    text-align: center;
}

.resend-active{
    color: var(--enable-bg-button);
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
}

.txt-placerholder{
    display: inline-block;
}

/* terceira tela */
select.input-container__input {
    -webkit-appearance: none;
    appearance: none;
    -moz-appearance: none;
    background-image: url('https://www.svgrepo.com/show/80156/down-arrow.svg');
    background-size: 1rem;
    background-repeat: no-repeat;
    background-position: calc(100% - 1.5rem) center;
}

.third-screen .input-container__input:invalid{
    color: #999999;
}


.third-screen .input-container__input option{
    color: #232323;
}

/* quarta pagina */
.user-type-container{
    display: flex;
    border-bottom: 1px solid var(--disabled-bg-button);
}
.user-type-container .half{
    width: 50%;
    display: flex;
    justify-content: center;
}

.half input[type="radio"] ~ label{
    cursor: pointer;
    padding: 1rem 0;
    user-select: none;
    text-align: center;
    width: 100%;
}

.half input[type="radio"]:checked ~ label{
    font-weight: 600;
    border-bottom: .3rem solid var(--default-text-color);
}

input[type="radio"]{
    display: none;
}

/* quinta tela */
.loader-container{
    display: flex;
    justify-content: center;
    align-items: center;
}

.input-container__complemento{
    display: grid;
    column-gap: 1rem;
}

.input-container__complemento .complemento{
    grid-row: 1;
    grid-column: 2;
}

.input-container__complemento .error__complemento{
    grid-column: 2;
}


/* sexta tela */

.sixth-screen .wrapper-box__introduction {
    row-gap: 2rem;
}
.sixth-screen{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
#numero{
    grid-column: 1;
}

.numero-error{
    grid-row: 3;
    grid-column: 1;
}
.button__ending{
    width: 100%;
}

.finalization-process{
    animation: screenGoingUp 400ms ease-in-out
}

@keyframes screenGoingUp {
    0%{
        transform: translateY(10rem);
        opacity: 0;
    }
    100%{
        transform: translateY(0);
        opacity: 1;
    }
}

/* mobile */
@media (max-width: 700px) {
    main{
        row-gap: 1.8rem;
    }
    p{
        font-size: 1.4rem;
    }
    h1{
        font-size: 2.4rem;
    }
    .logo{
        width: 19rem;
    }
    .login{
        /*max-width: 32rem;*/
    }
    .login a {
        display:block;
    }
    .main-padding{
        padding: 1.6rem;
        padding-top: 5rem
    }
    .second-padding{
        padding-bottom: 5rem 0;
    }
    .wrapper-box{
        max-width: 100%;
        padding: 2.4rem;
    }
    .input-container__verification-nums{
        column-gap: .4rem;
    }
    .change-email span{
        display:block;
    }
}