@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400..900&display=swap');

:root {
    --cor-principal: #F2A900;
    --cor-fundo-content: #1F1F1F;
    --cor-txt: #FFFFFF;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
}

html, body {
    background-color: var(--cor-fundo-content);
    width: 100vw;
    min-height: 100dvh;
    position: relative;
    display: grid;
    place-content: center;
    overflow: auto;
    scrollbar-width: none;
}

body::-webkit-scrollbar {
    display: none;
}

/* background */
#pattern {
    width: 100vw;
    height: 100dvh;
    position: absolute;
    top: -44px;
    left: -50px;
    right: 0;
    bottom: 0;
}

/* background */
#gradient {
    background: radial-gradient(#F2A900, transparent 50%);
    width: 400px;
    height: 400px;
    position: fixed;
    top: -200px;
    left: -200px;
    transform: translate(200px, 200px);
    pointer-events: none;
    will-change: transform;
}

.form-container-cadastro { /* Container do form de cadastro */
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #0d0c0f15;
    backdrop-filter: blur(10px);
    border: 1px solid #f2a90011;
    border-radius: 25px;
    padding: 10px;
    z-index: 1;
}

form { /* Form de cadastro */
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    margin: auto;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
}

form > h1 { /* Título do form de cadastro */
    font-size: 3rem;
    font-family: 'orbitron';
    margin-bottom: 10px;
    color: #F5A900;
}

label { /* Label do form de cadastro */
    color: #F5A900;
    margin-top: 10px;
}

input { /* Input do form de cadastro */
    background-color: transparent;
    color: white;
    padding: 10px;
    border: 1.5px solid white;
    border-radius: 4px;
}

input:focus { /* Input do form de cadastro */
    color: white;
    outline: none;
}

input::placeholder { /* Placeholder do input do form de cadastro */
    color: white;
}

input:-webkit-autofill, /* Input do form de cadastro quando for preenchido automaticamente */
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    background-color: transparent !important;
    color: white !important;
    border: 1px solid white !important;
    transition: background-color 5000s ease-in-out 0s;
    -webkit-text-fill-color: white  !important;
    caret-color: white;
}

.input-box.valid input:-webkit-autofill, /* Input do form de cadastro quando for preenchido automaticamente */
.input-box.valid input:-webkit-autofill:hover,
.input-box.valid input:-webkit-autofill:focus {
    border: 1px solid green !important;
}

.input-box.invalid input:-webkit-autofill, /* Input do form de cadastro quando for preenchido automaticamente */
.input-box.invalid input:-webkit-autofill:hover,
.input-box.invalid input:-webkit-autofill:focus {
    border: 1px solid red !important;
}

.img-perfil { /* Contêiner da imagem de perfil */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    overflow: hidden;
}

.input-img-perfil { /* Contêiner da imagem de perfil */
    position: relative;
}

.img-perfil img { /* Imagem de perfil */
    width: 200px;
    height: 200px;
    object-fit: cover;
    border-radius: 50%;
}

.file-label { /* Label da imagem de perfil */
    justify-content: center;
    align-items: center;
    display: flex;
    position: absolute;
    bottom: 0;
    right: 5px;
    background-color: white;
    color: black;
    width: 35px;
    height: 35px;
    border-radius: 50%;
}

.file-label i { /* Icone da imagem de perfil */
    font-size: 20px;
}

.input-box.invalid input{ /* Input do form de cadastro com erro */
    border: 1px solid red;
}

.input-box.valid input{ /* Input do form de cadastro com sucesso */
    border: 1px solid green;
}

.input-name, .input-outras-infos { /* Input do form de cadastro */
    display: flex;
    width: 100%;
    justify-content: space-between;
}

.input-name > span, .input-outras-infos > span { /* Input do form de cadastro */
    display: flex;
    flex-direction: column;
}

.error { /* Mensagem de erro do form de cadastro */
    color: red;
    margin-top: 5px;
    flex-direction: row;
}

.input-login { /* Input do form com infos de login */
    display: flex;
    flex-direction: column;
    width: 100%;
}

.input-login > .input-box > input { /* Input do form com infos de login */
    margin-bottom: 5px;
}

.input-login span { /* Input do form com infos de login */
    width: 100%;
}

#span-senha, #span-confirmarsenha { /* Input do form com infos de login */
    position: relative;
}

#senha-icon, #confirmarsenha-icon { /* Icone do input do form com infos de login */
    position: absolute;
    bottom: 15px;
    right: 10px;
    color: var(--cor-txt);
}

.invalid #senha-icon, .invalid #confirmarsenha-icon { /* Icone do input do form com infos de login quando tiver erro */
    top: 39px;
    right: 10px;
}

.input-login span input { /* Input do form com infos de login */
    width: 100%;
}

#nome, #sobrenome, #data-nasc, #salario { /* Input do form com infos de login */
    width: 300px;
}

span > label{ /* label do form de cadastro */
    display: block;

}

input[type="date"]::-webkit-calendar-picker-indicator { /* icone padrao do input de data */
    opacity: 0;
    cursor: pointer;
}

/* Esconde o ícone nativo para o Firefox */
input[type="date"] {
    -moz-appearance: textfield;
    appearance: none;
}

.input-outras-infos .input-box:first-child { /* primeiro input da ultima linha */
    position: relative;
}

.bi-calendar3 { /* Icone do input de data */
    position: absolute;
    top: 39px;
    right: 10px;
    color: var(--cor-txt);
    z-index: -1;
}

.btn-form { /* Container dos botões do form de cadastro */
    display: flex;
    justify-content: center;
    gap: 100px;
    margin-top: 10px;
    width: 100%;
}

.disabled { /* Botão de salvar desabilitado */
    background-color: #8a6000;
    cursor: not-allowed;
}

.enable { /* Botão de salvar habilitado */
    background-color: #F5A900;
    cursor: pointer;
}

#btn-salvar { /* Botão de salvar */
    color: white;
    border: none;
    padding: 7px;
    width: 100px;
    font-size: 1rem;
    transition: all .2s;
}

#btn-salvar:hover { /* Botão de salvar ao passar o mouse */
    background-color: #8a6000;
}


button { /* Botão de cancelar */
    background-color: white;
    color: #F5A900;
    padding: 7px;
    width: 100px;
    border: #F5A900;
    border-radius: 4px;
    font-size: 1rem;
    transition: all .2s;
}

button:hover { /* Botão de cancelar ao passar o mouse */
    background-color: rgb(184, 184, 184);
}

.input-termos-politicas { /* Input de termos e politicas */
    position: relative;
    width: 700px;
    margin-top: 10px;
}

.input-termos-politicas span { /* Texto do input de termos e politicas */
    margin-top: 5px;
}

input[type="checkbox"] { /* Checkbox do input de termos e politicas */
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 2px solid #333;
    border-radius: 4px;
    position: relative;
    transition: all .2s;
  }

  /* Estilo do checkbox quando está marcado */
  input[type="checkbox"]:checked {
    background-color: var(--cor-principal);
    border-color: var(--cor-principal);
  }

  /* Adiciona um "check" dentro do checkbox */
  input[type="checkbox"]:checked::before {
    content: "✔";
    color: white;
    position: absolute;
    left: 2px;
    top: -3px;
    font-size: 16px;
  }

  #termos-label { /* Label do input de termos e politicas */
    position: absolute;
    top: 0;
    margin-top: 0;
    left: 25px;
    color: var(--cor-principal);
  }

  .termos-politicas { /* Container dos termos e politicas */
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    padding-top: 10px;
    text-align: left;
    width: 700px;
  }

  .termos-politicas a { /* Link dos termos e politicas */
    color: var(--cor-principal);
    text-decoration: none;
    transition: all .2s;
}

.termos-politicas a:hover { /* Link dos termos e politicas ao passar o mouse */
    color: #8a6000;
}