*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Roboto", sans-serif;
    /* user-select: none; */
}

.login-body{
    margin: 0;
    padding: 0;
    display: flex;
    height: 100vh;
    width: 100vw;
    height: 100%;
}

.login-container {
    background-color: var(--login-container-bg);
    display: flex;
    flex-direction: row;
    width: 100vw;
    height: 100vh;
}

.background-login{
    flex-basis: 100%;
    background-size: cover;
    background-position: center;
    position: relative;
}
.background-login::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--login-container-bg-before);
    z-index: 1;
}


.login-body, .background-login {
    height: 100%;
    width: 100%;
}

.background-login {
    background-image: url('/static/assets/images/homem_comprando_carro.jpg');
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
}



.login-box {
    position: relative;
    z-index: 2; /* Garante que fique acima do overlay */
    background-color: var(--login-box-container-bg);
    padding: 3rem;
    border-radius: 10px;
    width: 100%;
    max-width: 400px;
    box-shadow: 0 4px 10px var(--login-box-shadow);
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
}

.div-content{
    padding: 5%;
    width: 90%;
    display: flex;
    flex-direction: column;
    margin-bottom: 10vh;
}

.logo-login-container{
    display: flex;
    align-items: center;
    width: 100%;
}


.logo-login{
    width: 100%;
    margin-bottom: 1vh;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap:15px;
}

.logo-img-login{
    max-width: 10rem;
    height: auto;
    /* mix-blend-mode: multiply; */
}

.logo-text-login {
    margin-left: -2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.2;
}

.logo-name-login{
    font-size: 40px;
	color: var(--logo-font);
}


.form-group-login {
    width: 100%;
    margin-bottom: 15px;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 3vh;
}

.form-group-login input {
    width: 100%;
    padding: 9px;
    box-sizing: border-box;
    border: 1px solid var(--input-border);
    border-radius: 4px;
    font-size: 18px;
    height: 5vh;
}

.btn-login{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 15px;
}
.sign-up {
    width: 100%;
    height: 5vh;
    padding: 5px;
    border: none;
    border-radius: 4px;
    background-color: var(--login-button-bg);
    color: var(--login-button-font);
    font-size: 22px;
    font-weight: 600;
    cursor: pointer;
}

.sign-up:hover {
    background-color: var(--login-button-bg-hover);
}

.esqueceu-senha{
    font-size: 20px;
    display: block;
    color: var(--login-button-bg);
    text-decoration: none;
}

.esqueceu-senha:hover{
    text-decoration: underline;
}
.password-container{
    width: 100%;
    display: flex;
    position: relative;
}
.password-container i{
    font-size: 26px;
    cursor: pointer;
    position: absolute;
    right: 0;
    padding: 6px;
    color: var(--input-icon-font);
}
.password-container i:hover{
    color: var(--input-icon-font-hover);
}

/* Botão em loading */
.sign-up.is-loading {
    position: relative;
    pointer-events: none;
    opacity: 0.9;
}

/* Substitui o texto por um spinner */
.sign-up.is-loading .btn-text {
    visibility: hidden; /* esconde "Entrar" ou "Trocar e Entrar" */
}

/* O spinner em si */
.sign-up.is-loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1.1em;
    height: 1.1em;
    margin: -0.55em 0 0 -0.55em;
    border-radius: 50%;
    border: 4px solid currentColor;
    border-top-color: transparent;
    animation: spin 0.8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }