/* =======================================================
    RESET BÁSICO
    ======================================================= */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

body {
  font-family: 'Poppins', sans-serif;
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* Garante que o body ocupa no mínimo 100% da altura da viewport */
  background-color: var(--cor-cinza-claro2); /* Altera a cor de fundo da página*/
}

input,
button {
  font-family: inherit;
}

.container {
  flex: 1; /* Faz com que o conteúdo cresça para ocupar o espaço restante */
}

/* =======================================================
    CONTAINER GERAL
    ======================================================= */
.container,
.header__container,
.footer__container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* =======================================================
    HEADER
    ======================================================= */
.header {
  background-color: var(--cor-primaria);
  padding: 0.5px 0; /* Diminui a espessura do cabeçalho */
  color: var(--cor-branco);
}

.header__container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header__logo a {
  color: var(--cor-branco);
  text-decoration: none;
  font-size: 1.8rem;
  font-weight: bold;
}

/* Estilo padrão para navegação em telas maiores */
.header__nav {
  display: flex; /* Garante que os links apareçam um ao lado do outro em telas grandes */
  gap: 20px; /* Adiciona espaçamento entre os links */
}

.header__nav a {
  color: var(--cor-branco);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.3s ease;
}

.header__nav a:hover {
  color: var(--cor-secundaria);
}

/* Esconde o botão do menu hamburguer por padrão (para desktop) */
.header__menu-btn {
  display: none;
}

/* =======================================================
    FOOTER
    ======================================================= */
.footer {
  background-color: var(--cor-cinza-medio); /* Altera a cor do footer */
  padding: 15px 0;
  color: var(--cor-preto); /* Altera a cor do texto que está dentro do footer */
  text-align: center;
}

/* Removido o seletor genérico 'footer' que estava no final, pois o '.footer' já cobre. */

/* =======================================================
    PRINCIPAL CONTENT AREA (MAIN)
    ======================================================= */
/* Adicione esta regra para garantir que sua main (seja .layout ou .painel)
   ocupe o espaço restante e empurre o footer para baixo. */
main {
  flex: 1; /* Isso é o segredo para empurrar o footer */
  display: flex; /* Para que o conteúdo dentro do main possa usar flexbox se necessário */
  flex-direction: column; /* Para empilhar o conteúdo dentro do main */
  padding: 2em 1em; /* Valor que você já tinha, ajuste se precisar de mais espaço */
  padding-top: 10px; /* Mantém o padding top que você tinha */
}

/* Aplica flex: 1 também para a classe .painel usada no seu painel.php */
.painel {
  flex: 1; /* Garante que o painel cresça e empurre o footer */
  max-width: 900px;
  margin: 2rem auto;
  padding: 1.5rem;
}

/* =======================================================
    HERO SECTION (INDEX)
    ======================================================= */
.hero {
  text-align: center;
  margin-bottom: 50px;
  padding: 40px 20px; /* Consolidado do media query */
}

.hero__title {
  font-size: 2.8rem;
  color: var(--cor-primaria);
  margin-bottom: 15px;
  line-height: 1.3; /* Consolidado do media query */
}

.hero__subtitle {
  font-size: 1.2rem;
  color: var(--cor-texto-secundario);
  margin-bottom: 25px;
  line-height: 1.5; /* Consolidado do media query */
}

.hero__button,
.index__button {
  background-color: var(--cor-primaria);
  color: var(--cor-branco);
  padding: 12px 30px;
  border: none;
  border-radius: 5px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.hero__button:hover,
.index__botao:hover {
  background-color: var(--cor-primaria-hover);
}

/* =======================================================
    INDEX PAGE
    ======================================================= */
.index {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 20px;
}

.index__caixa {
  background-color: #fff;
  border-radius: 8px;
  padding: 30px 35px; /* Diminui o espaço entre o que está dentro da caixa até a borda */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  text-align: center;
  max-width: 500px; /* Diminui o tamanho da caixa */
  width: 100%;
  margin-bottom: 30px; /* Sobe a caixa no index.php */
}

.index__titulo {
  font-size: 2rem; /* Diminui o texto "Encontre o profissional certo para o seu projeto" dentro da caixa */
  color: var(--cor-primaria);
  margin-bottom: 15px; /* Diminui ou aumenta o espaçamento entre textos dentro da caixa*/
}

.index__subtitulo {
  font-size: 0.9rem; /* Diminui o texto "Descubra serviços como fotografia, construção, design, confeitaria e ..." dentro da caixa */
  color: #666;
  margin-bottom: 25px; /* Diminui ou aumenta o espaçamento entre o texto secundário é o botão dentro da caixa*/
}

/* =======================================================
    DESTAQUES
    ======================================================= */
.destaques {
  max-width: 900px;
  margin: 0px auto 0 auto; /* Sobe a áera de destaque no index.php */
}

.destaques__titulo {
  font-size: 1.5rem; /* Diminui o texto "Serviços em destaque" no index.php */
  margin-bottom: 25px;
  color: var(--cor-primaria);
  text-align: center;
}

.destaques__lista {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  flex-wrap: wrap;
}

.destaques__item {
  flex: 1 1 200px;
  background-color: var(--cor-cinza-claro);
  padding: 25px 15px;
  border-radius: 6px;
  text-align: center;
  font-weight: 600;
  color: var(--cor-primaria);
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.destaques__item:hover {
  background-color: var(--cor-secundaria);
  color: var(--cor-branco);
}

/* =======================================================
    PÁGINA RECUPERAR SENHA
    ======================================================= */
.card--recuperacao {
  max-width: 400px; /* Altera a largura da caixa */
  min-height: 300px; /* Altera a altura da caixa */
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* centraliza conteúdo verticalmente */
  align-items: center; /* Centraliza na horizontal */
  padding: 40px; /* Ajusta a altura do conteúdo dentro da caixa */
  box-sizing: border-box;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* =======================================================
    PÁGINA SOBRE
    ======================================================= */
.sobre__conteudo {
  max-width: 800px;
  margin: 0 auto;
  padding: 40px 20px;
}

.sobre__titulo {
  font-size: 2rem;
  margin-bottom: 20px;
  color: var(--cor-primaria);
  text-align: center;
}

.sobre__texto {
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 20px;
  text-align: justify;
}

/* =======================================================
    AJUSTES GERAIS
    ======================================================= */
.texto-menor {
  font-size: 0.9em;
}

.link-cadastre {
  color: var(--cor-primaria); /* Mudar cor do link Cadastra-se*/
  font-weight: 600;
  text-decoration: none;
}

.link-cadastre:hover {
  text-decoration: underline;
}

/* Ajusta o espaçamento do título e texto: "Para encontrar os melhores profissionais para o seu projeto,
faça login abaixo. É rápido e gratuito!"*/
.frase-login {
  margin-bottom: 4px; /* ou 2px, dependendo do quanto quer colado */
  margin-top: 0;
}

h1.centralizado {
  margin-bottom: 8px; /* ou menos, se quiser mais colado na frase */
}

/* Diminui o tamanho do texto secundário */
.frase-secundaria {
  font-size: 0.85rem; /* ou experimente 0.8rem ou 13px */
  margin-top: 2px;
  margin-bottom: 2px;
}

/* =======================================================
    PÁGINA TRABALHAR
    ======================================================= */
.trabalhar {
  padding: 2rem 1rem;
}

.trabalhar__titulo {
  font-size: 2rem;
  margin-bottom: 1.5rem;
  text-align: center;
}

.trabalhar__filtros {
  display: grid;
  gap: 1rem;
  max-width: 600px;
  margin: 0 auto 2rem;
}

.trabalhar__campo {
  display: flex;
  flex-direction: column;
}

.trabalhar__acoes {
  display: flex;
  gap: 1rem;
  justify-content: center;
}

.trabalhar__mensagem {
  text-align: center;
  color: #555;
}

.trabalhar__lista {
  list-style: none;
  padding: 0;
  max-width: 600px;
  margin: 0 auto;
}

.trabalhar__item {
  margin-bottom: 1rem;
  background-color: #f4f4f4;
  padding: 1rem;
  border-radius: 8px;
}

.trabalhar__link {
  text-decoration: none;
  color: #000;
}

.trabalhar__link:hover {
  text-decoration: underline;
}

.btn--azul {
  background-color: #007bff;
  color: #fff;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

.btn--link {
  background: none;
  color: #007bff;
  border: none;
  cursor: pointer;
  text-decoration: underline;
  padding: 0.5rem 1rem;
}

/* =======================================================
    PÁGINA MINHA CONTA
    ======================================================= */
/* Regras para .painel já foram movidas para a seção MAIN CONTENT AREA acima */

.painel__perfil {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

.painel__foto {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #007BFF;
}

.painel__info {
  flex: 1;
  min-width: 200px;
}

.painel__nome {
  font-size: 1.6rem;
  margin-bottom: 0.2rem;
}

.painel__profissao,
.painel__local,
.painel__email {
  margin: 0.3rem 0;
  color: #555;
}

.painel__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 2.5rem;
}

.botao {
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  border-radius: 8px;
  text-decoration: none;
  transition: background-color 0.3s ease;
  border: none;
  text-align: center;
  display: inline-block;
}

.botao--primario {
  background-color: #007BFF;
  color: white;
}
.botao--primario:hover {
  background-color: #0056b3;
}

.botao--secundario {
  background-color: #e0e0e0;
  color: #333;
}
.botao--secundario:hover {
  background-color: #cfcfcf;
}

.botao--azul {
  background-color: #17a2b8;
  color: white;
}
.botao--azul:hover {
  background-color: #117a8b;
}

.botao--neutro {
  background-color: #6c757d;
  color: white;
}
.botao--neutro:hover {
  background-color: #5a6268;
}

.painel__mensagem {
  background-color: #f8f9fa;
  padding: 1.5rem;
  border-left: 4px solid #007BFF;
  border-radius: 8px;
}

.painel__slogan {
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
  color: #333;
}

.painel__descricao {
  color: #555;
}

/* EDITAR PERFIL */
.formulario {
  max-width: 600px;
  margin: auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.formulario input[type="text"],
.formulario input[type="file"] {
  padding: 0.6rem;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 1rem;
}

.formulario button,
.formulario a.botao {
  max-width: 200px;
}

.sucesso {
  color: green;
  background-color: #e6ffed;
  padding: 1rem;
  border-left: 4px solid green;
  border-radius: 4px;
  margin-bottom: 1rem;
}

/* =======================================================
    AVALIAÇÃO DE SERVIÇOS - ESTRELAS
    ======================================================= */
.avaliacao-estrelas span {
  font-size: 20px; /* Ajusta o tamanho das estrelas */
  cursor: pointer;
  color: #ccc;
  -webkit-text-stroke: 0.6px black; /* borda fina preta */
  text-stroke: 0.5px black; /* para outros navegadores que suportem */
  transition: color 0.3s, -webkit-text-stroke 0.3s;
}

.avaliacao-estrelas span.filled {
  color: gold;
  -webkit-text-stroke: 0.5px black;
}

/* =======================================================
    PÁGINA CONTRATAR
    ======================================================= */
.centralizado {
  text-align: center;
  margin-bottom: 1em;
}

/* Bloco: resultado-card */
.resultado-card {
  border: 1px solid #ccc;
  padding: 1em;
  border-radius: 8px;
  margin-bottom: 1em;
  background: #f9f9f9;
}

/* Elemento: título dentro do resultado-card */
.resultado-card__title {
  margin: 0;
}

/* Elemento: parágrafo dentro do resultado-card */
.resultado-card__description {
  margin: 0.5em 0;
}

/* Elemento: link dentro do resultado-card */
.resultado-card__link {
  display: inline-block;
  margin-top: 0.5em;
  padding: 0.5em 1em;
  background: #007bff;
  color: white;
  text-decoration: none;
  border-radius: 4px;
}

/* Modificador: hover do link */
.resultado-card__link--hover:hover {
  background: #0056b3;
}

/* =======================================================
    RESPONSIVIDADE
    ======================================================= */
/* Regras para telas menores (mobile-first approach com sobrescrita) */
@media (max-width: 767px) {
  .header__menu-btn {
    display: block; /* Mostra o botão do menu hamburguer em telas pequenas */
    background: none;
    border: none;
    color: var(--cor-branco); /* Ajuste a cor do ícone do hamburguer */
    font-size: 1.5rem; /* Ajuste o tamanho do ícone */
    cursor: pointer;
    z-index: 1001;
  }

  .header__menu-icon {
    /* Se você tiver um ícone de hamburguer baseado em CSS (linhas) */
    display: block;
    width: 25px;
    height: 3px;
    background-color: var(--cor-branco); /* Cor do ícone */
    margin: 4px 0;
    border-radius: 2px;
  }

  .header__nav {
    display: none; /* Esconde a navegação por padrão em telas pequenas */
    flex-direction: column;
    gap: 15px;
    position: absolute;
    top: 60px; /* Ajuste a posição abaixo do cabeçalho */
    right: 10px;
    background-color: var(--cor-branco);
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    width: 200px;
  }

  .header__nav.active {
    display: flex; /* Mostra o menu quando a classe 'active' é adicionada via JavaScript */
  }

  .header__nav a {
    color: var(--cor-primaria); /* Cor dos links no menu responsivo (quando aberto) */
    margin-left: 0; /* Remove margem para alinhamento no menu coluna */
    padding: 10px 0;
  }

  .hero__title {
    font-size: 2rem;
  }
  .hero__subtitle {
    font-size: 1rem;
  }
  .hero__btn {
    font-size: 1rem;
    padding: 10px 20px;
  }
}

/* Regras para telas maiores ou iguais a 768px (desktop) */
@media (min-width: 768px) {
  .header__nav {
    display: flex; /* Garante que os links da nav apareçam em linha em telas grandes */
    flex-direction: row; /* Links um ao lado do outro */
    position: static; /* Remove posicionamento absoluto */
    background-color: transparent; /* Remove fundo para o menu de desktop */
    padding: 0; /* Remove padding extra */
    box-shadow: none; /* Remove sombra */
    width: auto; /* Largura automática */
    gap: 20px; /* Mantém o espaçamento entre os links */
  }

  .header__nav a {
    color: var(--cor-branco); /* Cor dos links em telas grandes (header cor) */
    margin-left: 0; /* A margem já está no gap do flexbox */
  }
}

@media (max-width: 600px) {
  .auth-hero__info {
    font-size: 0.65rem;
  }

  .auth-hero__links a {
    font-size: 0.85rem;
  }
}

@media (max-width: 480px) {
  .hero__title {
    font-size: 1.6rem;
  }

  .hero__subtitle {
    font-size: 0.95rem;
  }
  
}