@import url('font.css');
/* importa o arquivo css de fontes */
@import url('rodape.css');
/*importa o arquivo css do rodapé*/
@import url('menu.css');
@import url('selecaodecadastro.css');

* {
  margin: 0;
  /*tira a margem de todos elementos da pagina, inclusive da propria pagina */
  padding: 0;
  /*tira o espaçamento interno de todos os elementos da pagina e da propria pagina*/
}

/* Fonte base */
body {
  background-color: #F5F5CC;
  /* define a cor de fundo da pagina */
  background-image: url(../imagens/cadastrobackshop.jpeg);
  /*Coloca a imagem de fundo no começo da pagina*/
  background-repeat: no-repeat;
  /* define que a imagem de fundo não se repita */
  background-size: 100%;
  /* define que a imagem de fundo ocupe 100% da largura da pagina */

}

#bodylogin {
  background-image: url(../imagens/fundoshoplogin.jpeg);
  /*Coloca a imagem de fundo no começo da pagina*/
}

/* Cabeçalho com imagem de fundo */
header {
  position: relative;
  /* define a posição relativa para o cabeçalho */
  width: auto;
  /* define a largura do cabeçalho para 100% */
}

/* Barra superior */
.cabecalho {
  background-color: #ACEB64;
  /*define a cor de fundo do cabecalho*/
  border-radius: 0 0 40px 40px;
  /*arredonda somente as bordas inferiores do cabecalo*/
  display: flex;
  /*Permirte que os elementos dentro dele podem ser organizados e alinhados de forma flexivel*/
  justify-content: space-between;
  /* define um espaçamento igual entre os elementos */
  align-items: center;
  /*alinha os elementos do cabeçalho de forma que eles fiquem centralizados*/
  padding: 10px 20px;
  /*define o espaçamento interno entre a borda do cabeçalho e os elementos dentro dele*/
  position: relative;
  /* define a posição relativa para o cabeçalho */
  height: 76px;
  /*define a altura do cabeçalho*/
}

.cabecalho .logo {
  /*estiliza a logo do link que esta dentro do cabecalho*/
  /*configura a logo presente no cabeçalho*/
  width: 90px;
  /*define a largura da logo do link em 90 pixels*/
  height: 90px;
  /*define a altura da logo do link em 90 pixels*/
  filter: grayscale(100%) brightness(200%) contrast(200%);
  /*define um filtro para deixar a logo do link com a cor branca*/
}

#quebramobilelogin {
  display: none;
}

/* Logo central */
.center-logo {
  position: absolute;
  /* define a posição absoluta para a logo central do cabeçalho */
  top: 50%;
  /* define a posição vertical da logo central para 50% */
  left: 50%;
  /* define a posição horizontal esquerda da logo central para 50% */
  transform: translate(-50%, -50%);
  /* define a transformação da logo central para que ela fique centralizada */
  max-width: 300px;
  /* define a largura maxima da logo central para 300 pixels */
  height: auto;
  /* define a altura da logo central para ser automatica */
}

/* Estilo para o contêiner principal */
.conteudo {
  display: flex;
  /* Usa Flexbox para layout */
  flex-direction: row;
  /* Organiza os itens horizontalmente (linha) */
  justify-content: space-between;
  /* Distribui os itens com espaçamento igual entre eles */
  align-items: center;
  /* Alinha os itens verticalmente ao centro */
}

/* Estilo para a seção lateral (lado) */
.lado {
  display: flex;
  /* Usa Flexbox para layout */
  flex-direction: column;
  /* Organiza os itens verticalmente (coluna) */
  justify-content: center;
  /* Alinha os itens verticalmente ao centro */
  align-items: center;
  /* Centraliza os itens horizontalmente */
  margin-top: 30px;
  /* Espaçamento superior de 30px */
  margin-bottom: 50px;
  /* Espaçamento inferior de 50px */
  margin-right: 150px;
  /* Espaçamento à direita de 150px */
}


.lado .texto {
  color: white;
  text-align: center;
  text-shadow: 0 4px 0 #000;
  -webkit-text-stroke-width: 1px;
  /*largura do contorno no texto */
  -webkit-text-stroke-color: black;
  /*cor do contorno no texto */
  font-family: poppinsBold;
  /*muda a fonte da letra*/
  font-size: 70px;
  /*muda o tamanho da letra */
  margin-top: 60px;
  /*coloca uma margem sobre o topo de 60 pixels*/
}

/*desativa todos os br que foram feitos para o mobile*/
.quebramobile {
  display: none;
}

/*estiliza todo o formulario de cadastro*/
form {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 504px;
  height: 609px;
  border-radius: 40px;
  border: 1px solid #000;
  background: #FFF;
  margin-top: 30px;
  margin-bottom: 50px;
  padding: 10px;
  margin-left: 100px;
  font-size: 16px;
  font-family: poppinsExtraBold;
  gap: 2px;


  /* Estilo para os títulos h1 */
  h1 {
    font-size: 25px;
    /* Tamanho da fonte de 25px */
    font-family: poppinsExtraBold;
    /* Usa a fonte "Poppins ExtraBold" */
  }

  /* Estilo para a linha horizontal hr */
  hr {
    width: 169px;
    /* Largura de 169px */
    height: 5px;
    /* Altura de 5px */
    border-radius: 10px;
    /* Bordas arredondadas com raio de 10px */
    background-color: black;
    /* Cor de fundo preta */
  }

  /* Estilo para as imagens img */
  img {
    max-width: 100px;
    /* Largura máxima de 100px */
    max-height: 100px;
    /* Altura máxima de 100px */
    min-height: 85px;
    /* Altura mínima de 85px */
    min-width: 85px;
    /* Largura mínima de 85px */
    outline: 1px solid black;
    /* Borda externa preta de 1px */
    border-radius: 50%;
    /* Bordas arredondadas para criar um círculo */
  }

  /* Estilo para os campos de input */
  input {
    font-size: 17px;
    /* Tamanho da fonte de 17px */
    font-family: poppinsExtraBold;
    /* Usa a fonte "Poppins ExtraBold" */
    border-radius: 30px;
    /* Bordas arredondadas com raio de 30px */
    border: 1px solid #000;
    /* Borda preta de 1px */
    background: #F4F4F4;
    /* Cor de fundo cinza claro */
    padding: 5px;
    /* Espaçamento interno de 5px */
    width: 403px;
    /* Largura de 403px */
    height: 20px;
    /* Altura de 20px */
  }


  /* Estilo para os parágrafos (p) */
  p {
    font-size: 17px;
    /* Tamanho da fonte de 17px */
    color: #348145;
    /* Cor do texto verde (#348145) */
  }

  /* Estilo para os links (a) */
  a {
    display: flex;
    /* Define o link como um container flexível */
    justify-content: center;
    /* Alinha o conteúdo ao centro do link */
    width: 87px;
    /* Largura do link de 87px */
    height: 30px;
    /* Altura do link de 30px */
    border-radius: 80px;
    /* Bordas arredondadas com raio de 80px */
    border: 1px solid #000;
    /* Borda preta de 1px */
    color: black;
    /* Cor do texto do link preta */
    letter-spacing: 1.19px;
    /* Espaçamento entre as letras de 1.19px */
  }

  /* Estilo para o link quando o cursor estiver sobre ele (hover) */
  a:hover {
    background-color: #348145;
    /* Cor de fundo verde quando o link é hover */
    color: white;
    /* Cor do texto branca quando o link é hover */
  }

  /* Estilo para o elemento strong */
  strong {
    width: 403px;
    /* Largura de 403px para o elemento strong */
  }


}

/* Estilo para o botão "Cadastrar" */
#cadastrar {
  display: flex;
  /* Usa o modelo flexbox para o layout */
  width: 168px;
  /* Largura do botão de 168px */
  height: 40px;
  /* Altura do botão de 40px */
  flex-direction: column;
  /* Organiza os elementos em coluna */
  justify-content: center;
  /* Alinha o conteúdo verticalmente no centro */
  align-items: center;
  /* Alinha o conteúdo horizontalmente no centro */
  border-radius: 0 80px;
  /* Bordas arredondadas somente no canto superior direito e inferior esquerdo */
  background-color: white;
  /* Cor de fundo branca */
  border: 1px solid #000;
  /* Borda preta de 1px */
  cursor: pointer;
  /* O cursor muda para "pointer" para indicar que é clicável */
  letter-spacing: 1.19px;
  /* Espaçamento entre as letras */
}

/* Efeito hover para o botão "Cadastrar" */
#cadastrar:hover {
  background-color: #348145;
  /* Altera a cor de fundo para verde (#348145) quando o mouse passa sobre o botão */
  color: white;
  /* Altera a cor do texto para branco quando o mouse passa sobre o botão */
}

/* Estilo para o botão "Logar" */
#logar {
  display: flex;
  /* Usa o modelo flexbox para o layout */
  width: 168px;
  /* Largura do botão de 168px */
  height: 40px;
  /* Altura do botão de 40px */
  flex-direction: column;
  /* Organiza os elementos em coluna */
  justify-content: center;
  /* Alinha o conteúdo verticalmente no centro */
  align-items: center;
  /* Alinha o conteúdo horizontalmente no centro */
  border-radius: 0 80px;
  /* Bordas arredondadas somente no canto superior direito e inferior esquerdo */
  background-color: white;
  /* Cor de fundo branca */
  border: 1px solid #000;
  /* Borda preta de 1px */
  cursor: pointer;
  /* O cursor muda para "pointer" para indicar que é clicável */
  letter-spacing: 1.19px;
  /* Espaçamento entre as letras */
}

/* Efeito hover para o botão "Logar" */
#logar:hover {
  background-color: #348145;
  /* Altera a cor de fundo para verde (#348145) quando o mouse passa sobre o botão */
  color: white;
  /* Altera a cor do texto para branco quando o mouse passa sobre o botão */
}

/* Estilo para o "botão fake" */
#botaoFake {
  border-radius: 30px;
  /* Bordas arredondadas de 30px */
  border: 1px solid #000;
  /* Borda preta de 1px */
  background: #FFF;
  /* Cor de fundo branca */
  padding: 5px;
  /* Espaçamento interno de 5px */
  font-size: 17px;
  /* Tamanho da fonte de 17px */
  font-family: poppinsExtraBold;
  /* Usa a fonte "Poppins Extra Bold" */
  cursor: pointer;
  /* O cursor muda para "pointer" para indicar que é clicável */
}

.mensagem {
  display: none;
  position: fixed;
  /* fixa no viewport */
  margin: auto;
  /* joga pro meio na vertical */
  left: 50%;
  /* joga pro meio na horizontal */
  background-color: white;
  /* deixa o fundo branco */
  padding: 20px;
  /* espaçamento interno de 20 pixels */
  border-radius: 10px;
  /* arrendona em 10 pixels as bordas da mensagem */
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.3);
  /* adiciona um sombreamento para fazer com que a mensagem pareça que esta elevada*/
}

/* Estilo para o botão "Ainda não tem cadastro?" */
.aindacadastro {
  display: flex;
  /* Usa o modelo flexbox para o layout */
  font-size: 20px;
  /* Tamanho da fonte do texto */
  width: 218px;
  /* Largura do botão de 218px */
  height: 70px;
  /* Altura do botão de 70px */
  padding: 12px 24px 10px 24px;
  /* Espaçamento interno (topo, direita, fundo, esquerda) */
  flex-direction: column;
  /* Organiza os elementos em coluna */
  justify-content: center;
  /* Alinha o conteúdo verticalmente no centro */
  align-items: center;
  /* Alinha o conteúdo horizontalmente no centro */
  flex-shrink: 0;
  /* Impede que o botão encolha */
}

/* Estilo para o input "login" */
.login {
  width: 403px;
  /* Largura do campo de login */
  height: 36.191px;
  /* Altura do campo de login */
  font-size: 14px;
  /* Tamanho da fonte no campo de login */
}

/* Estilo para o botão de login "loginnn" */
#loginnn {
  font-size: 25px;
  /* Tamanho da fonte do texto no botão de login */
}

/* Estilo específico para telas menores ou dispositivos móveis (max-width: 600px) */
@media (max-width: 600px) {

  /* Remove a imagem de fundo no body */
  body {
    background-image: none;
  }

  /* Remove a imagem de fundo no #bodylogin */
  #bodylogin {
    background-image: none;
  }

  /* Esconde o elemento .lado em telas menores */
  .lado {
    display: none;
  }

  /* Alinha o conteúdo centralizado na tela */
  .conteudo {
    justify-content: center;
    align-items: center;
  }

  /* Estilo para o form */
  form {
    margin-top: 30px;
    /* Margem superior de 30px */
    margin-bottom: 50px;
    /* Margem inferior de 50px */
    margin-left: 0px;
    /* Nenhuma margem à esquerda */
    width: 400px;
    /* Largura do formulário */
    height: auto;
    /* Altura automática */
  }

  /* Torna o elemento .quebramobile visível */
  .quebramobile {
    display: block;
    /* Torna o elemento visível */
  }

  /* Estilo para a imagem #foto */
  #foto {
    max-width: 150px;
    /* Largura máxima de 150px */
    max-height: 150px;
    /* Altura máxima de 150px */
    min-height: 150px;
    /* Altura mínima de 150px */
    min-width: 150px;
    /* Largura mínima de 150px */
    outline: 1px solid black;
    /* Borda preta de 1px */
    border-radius: 50%;
    /* Bordas arredondadas (circular) */
  }

  /* Ajusta o tamanho do botão "Ainda não tem cadastro?" */
  .aindacadastro {
    width: 100px;
    /* Largura reduzida para telas pequenas */
    height: 40px;
    /* Altura reduzida para telas pequenas */
  }

  /* Ajusta o tamanho do botão de login #logar */
  #logar {
    width: 200px;
    /* Largura reduzida para telas pequenas */
    height: 60px;
    /* Altura aumentada para telas pequenas */
    font-size: 25px;
    /* Tamanho da fonte maior no botão */
  }

  /* Esconde o elemento .espacologarpc em telas menores */
  .espacologarpc {
    display: none;
  }
}