/* ================================================
    RESET GERAL E VARIÁVEIS DE CORES
   ================================================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Paleta de cores principal usada no projeto */
:root {
    --black: #000000;
    --white: #ffffff;
    --grey: #808080;

    --shadow: rgba(0, 0, 0, 0.2);

    --color1: #ebe8e8;   /* Fundo principal (claro) */
    --color2: #e8e8e8;   /* Fundo secundário */
    --color3: #e30075;   /* Cor escura para textos */
    --color4: #ff4a4a;   /* Vermelho (erros ou alertas) */
    --color5: #ffb319;   /* Amarelo (hover de botões) */
    --color6: #615c5c;   /* cinza (hover alternativo de botões) */
    --color7: #25e475;

    --lightgrey: #d3d3d3; /* Bordas e separadores suaves */
}

/* ================================================
    CONFIGURAÇÃO DO BODY
   ================================================ */
body {
    font-family: "Roboto", sans-serif;
    height: 100vh;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--color1);
}

.background {
    width: 85%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--color6);
}

#cadastro {
    border-bottom-left-radius: 150px;
    border-top-left-radius: 150px;
    box-shadow: -10px 10px 10px 10px  var(--shadow);
}

#login {
    border-bottom-right-radius: 150px;
    border-top-right-radius: 150px;
    box-shadow: 10px 10px 10px 10px  var(--shadow);
}

.container {
    position: relative; 
    z-index: 10;
}

.containerMonster {
    height: 400px;
    width: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.monsterOne, .monsterTwo, .monsterThree {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    box-shadow: -15px 0px 5px rgba(0, 0, 0, 0.3);
}

.monsterOne {
    background: var(--color5);
    height: 230px;
    width: 100px;
    margin-left: -180px;
    margin-bottom: -70px;
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
}

.monsterTwo {
    background: var(--color4);
    height: 300px;
    width: 140px;
    position: absolute;
    margin-right: -150px;
    margin-top: 0px;
}

.monsterThree {
    background: var(--color3);
    height: 150px;
    width: 200px;
    position: absolute;
    margin-bottom: -150px;
    border-top-left-radius: 100px;
    border-top-right-radius: 100px;
}

.eyeContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 120px;
    height: 45px;
    margin-top: 30px;
    gap: 15px;
}

.eye {
    height: 25px;
    width: 25px;
    background: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.monsterOne .eye {
    position: absolute;
    height: 35px;
    width: 40px;
}

.pupil {
    height: 15px;
    width: 15px;
    background: var(--black);
    border-radius: 50%;
    transition: all 0.3s ease;
}

.monsterOne .mouth {
    width: 40px;
    height: 15px;
    background: var(--black);
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    position: absolute;
    margin-top: 85px;
}

.monsterTwo .mouth {
    height: 10px;
    width: 50px;
    background: var(--black);
    position: absolute;
    margin-top: 90px;
    border-radius: 50px;
}

.monsterThree .mouth {
    background: var(--black);
    height: 10px;
    width: 20px;
    border-radius: 50%;
    position: absolute;
    margin-top: 75px;
}

.pupil, .mouth {
    transition: transform 0.1s ease-out;
}

#cadastro .eye.closed {
    margin-right: -30px;
}

#cadastro .monsterTwo .eye.closed:nth-child(2),
#cadastro .monsterThree .eye.closed:nth-child(2) {
    margin-left: 50px;
}

.eye.closed {
    height: 10px;
    background: black;
    border-radius: 10px;
    margin-right: 30px;
    border-radius: 100% 100% 70% 70%;
    transform: scaleY(1.2);
}

.eye.closed .pupil {
    opacity: 0;
    transform: scale(0.5);
}

#cadastro .monsterTwo .eyeContainer .eye.look-right:nth-child(2) {
    height: 20px;
    margin-left: 10px;
}

#cadastro .monsterThree .eyeContainer .eye.look-right:nth-child(2) {
    height: 20px;
    margin-left: 10px;
}

#cadastro .monsterTwo .eyeContainer .eye.look-right,
#cadastro .monsterThree .eyeContainer .eye.look-right {
    margin-left: -20px;
}

#cadastro .monsterOne .eye.eye.look-right {
    margin-right: 40px;
    height: 20px;
    width: 30px;
}

.eye.look-right {
    height: 20px;
    margin-left : 20px;
}

.monsterOne .eye.look-right {
    height: 20px;
    width: 30px;
    margin-left: 20px;
}

#cadastro .mouth.closed {
    margin-left: 40px;
}

.mouth.closed {
    height: 8px;
    width: 25px;
    margin-right: 20px;
    border-radius: 0;
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
}

/* Estado inicial: todos fora da tela */
.monsterOne, .monsterTwo, .monsterThree {
    opacity: 0;
    position: absolute;
    transition: opacity 0.3s;
}

.monsterOne.enter-top {
    animation: enterTop 0.75s forwards;
}
@keyframes enterTop {
    0% { transform: translateY(300px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

.monsterTwo.enter-bottom {
    animation: enterBottom 0.75s forwards;
}
@keyframes enterBottom {
    0% { transform: translateY(-300px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

.monsterThree.enter-left {
    animation: enterLeft 0.75s forwards;
}
@keyframes enterLeft {
    0% { transform: translateX(-300px); opacity: 0; }
    100% { transform: translateX(0); opacity: 1; }
}

/* ================================================
    CONTAINER PRINCIPAL (ÁREA CENTRAL)
   ================================================ */
.container {
    width: 100%;
    height: 620px;
    margin: 40px;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    display: grid;
    grid-template-rows: 100px 80px 1fr auto auto;
    align-items: center;
    border: none;
}

/* ================================================
    TÍTULO PRINCIPAL E LOGO
   ================================================ */
.title {
    display: flex;
    justify-content: center;
    align-items: center;
}
/* 
.title h1 {
    font-size: 2.5rem;
    color: var(--black);
} */

/* Ícone ou logotipo rotacionado levemente */
.logo {
    max-height: 180px;
    max-width: 200px;
    /*transform: rotate(12deg);*/
    margin-left: -10px;
}

/* ================================================
    SUBTÍTULO (ABAIXO DO TÍTULO)
   ================================================ */
.subtitle {
    display: flex;
    justify-content: center;
    align-items: center;
}

.subtitle h2 {
    font-size: 1.8rem;
    color: var(--black);
}

/* ================================================
    SEÇÃO DE LOGIN / FORMULÁRIO
   ================================================ */
.login {
    height: max-content;
    gap: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.loginContainer {
    width: 400px;
    max-height: 400px;
    gap: 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.mail, .password, .name, .tel {
    max-width: 400px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: flex-start;
    border: 1px solid var(--black);
    border-radius: 50px;
    max-height: 70px;
    width: 100%;
    padding: 8px;
    font-weight: 400;
    font-size: 1.2rem;
    height: 50px;
    position: relative;
}

.password i {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
}

input {
    caret-color: var(--color5);
}
/* ========================================
   ESTILOS DE ERRO NAS DIVS
   ======================================== */

/* Divs com erro - Borda vermelha */
.mail.error, 
.password.error, 
.name.error, 
.tel.error {
    border: 1px solid var(--color4) !important;
    animation: shake 0.3s ease-in-out;
}

/* Animação de tremer */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-3px); }
    20%, 40%, 60%, 80% { transform: translateX(3px); }
}

/* Label com erro dentro das divs */
.mail.error label,
.password.error label,
.name.error label,
.tel.error label {
    color: var(--color4) !important;
    font-weight: 600;
}

/* Remove o erro ao focar no input */
.mail.error input:focus,
.password.error input:focus,
.name.error input:focus,
.tel.error input:focus {
    outline: none;
}

.mail input, .password input, .name input, .tel input {
    border: none;
    border-radius: 8px;
    outline: none;
    width: 100%;
    font-size: 1rem;
    padding-left: 5px;
    background: var(--color1);
    height: 100%;
}

.mail label, .password label, .name label, .tel label {
    position: absolute;
    z-index: 100;
    margin-left: 8px;
    transition: all 0.3s ease;
    background: var(--color1);
    font-size: 15px;
    color: var(--grey);
    pointer-events: none;
}

.mail input:focus + label,
.mail input:not(:placeholder-shown) + label,
.password input:focus + label,
.password input:not(:placeholder-shown) + label,
.name input:focus + label,
.name input:not(:placeholder-shown) + label,
.tel input:focus + label,
.tel input:not(:placeholder-shown) + label {
    position: absolute;
    z-index: 100;
    margin-bottom: 50px;
    margin-left: 20px;
    background: var(--color1);
    font-size: 0.875rem;
    padding: 0 4px;
    color: var(--color5);
}

.mail:has(input:focus),
.mail:has(input:not(:placeholder-shown)),
.password:has(input:focus),
.password:has(input:not(:placeholder-shown)),
.name:has(input:focus),
.name:has(input:not(:placeholder-shown)),
.tel:has(input:focus),
.tel:has(input:not(:placeholder-shown)) {
    border: 1px solid var(--color5);
}

/* ================================================
    ESQUECI MINHA SENHA
   ================================================ */
.forgotPassword {
    margin-top: -10px;
    margin-left: 10px;
    font-size: 0.8rem;
    color: rgba(0, 0, 0, 0.844);
    display: flex; /* Altere para flex se quiser mostrar */
    justify-content: flex-start;
}

.forgotPassword a {
    cursor: pointer;
    text-decoration: none;
    color: var(--black);
    font-weight: bold;
    margin-left: 5px;
}

.forgotPassword a:hover, .forgotPassword a:focus {
    text-decoration: none;
    cursor: pointer;
    outline: none;
    color: var(--color5);
    transition: all 0.2s ease;
}

/* ================================================
    BOTÕES DE LOGIN / CADASTRAR
   ================================================ */
.buttonsCheck {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.buttonsCheck button {
    border: none;
}

/* Ajuste de alinhamento específico da página de cadastro */
#buttonsCheckCadastro {
    margin-bottom: 47px;
}

/* ================================================
    ÁREA DE CADASTRO / LINKS DE NAVEGAÇÃO
   ================================================ */
.signUpContainer {
    display: block;
    text-align: center;
}

/* Texto acima do link “Cadastrar-se” */
.signUpContainer p {
    margin-bottom: 8px;
}

/* Botões principais (login e cadastro) */
.buttonLogin, .buttonSignUp {
    padding: 10px 40px;
    text-decoration: none;
    border-radius: 50px;
    background-color: var(--black);
    color: var(--color2);
    font-size: 1.2rem;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 2px 2px 12px rgba(0,0,0,0.2);
    transition: background-color 0.5s ease;
}

/* Efeito hover (amarelo) */
.buttonLogin:hover, .buttonSignUp:hover, .buttonLogin:focus, .buttonSignUp:focus {
    background-color: var(--color5);
    color: var(--black);
    outline: none;
}

/* Efeito ao clicar (reduz tamanho levemente) */
.buttonLogin:active, .buttonSignUp:active {
    transform: scale(0.98);
}


/* ================================================
    LINKS DE TEXTO (CADASTRAR / VOLTAR)
   ================================================ */
.signUpLink, .backButton {
    text-decoration: none;
    color: var(--black);
    font-weight: bold;
}


.signUpLink:hover, .backButton:hover, .backButton:focus, .signUpLink:focus {
    text-decoration: none;
    color: var(--color5);
    cursor: pointer;
    outline: none; 
    transition: all 0.2s ease;
}

/* Ícone de olho para mostrar/esconder senha */
.eyes-password {
    
    cursor: pointer;
    color: var(--grey);
}

.eyes-password:hover {
    color: var(--color5);
}