/* register.css */

body {
    margin: 0;
    font-family: Helvetica, Arial, sans-serif;
    background-color: #f0f2f5;
    display: flex; /* Adiciona flexbox ao body */
    justify-content: center; /* Centraliza o conteúdo horizontalmente */
    align-items: flex-start; /* Alinha o conteúdo ao topo, para não ocupar 100vh em telas pequenas */
    min-height: 100vh; /* Garante que o body ocupe pelo menos a altura total da viewport */
    padding: 20px 10px; /* Padding geral para evitar que o conteúdo encoste nas bordas */
    box-sizing: border-box; /* Inclui padding e border no cálculo do tamanho total */
}

.register-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%; /* Ocupa a largura total disponível */
    max-width: 500px; /* Limita a largura máxima para não ficar muito esticado em desktops */
    margin: auto; /* Centraliza o container */
}

.logo {
    color: #eb1c91;
    font-size: 40px; /* Tamanho ajustado para mobile */
    font-weight: bold;
    margin-bottom: 20px;
    text-align: center; /* Centraliza o logo */
}

.form-box {
    background: white;
    padding: 20px; /* Padding padrão */
    width: 100%; /* Ocupa 100% da largura do register-container */
    max-width: 430px; /* Largura máxima original para o formulário */
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    box-sizing: border-box; /* Inclui padding e border no cálculo do tamanho total */
}

.form-box h2 {
    margin-bottom: 5px;
    font-size: 24px; /* Tamanho ajustado */
    text-align: center; /* Centraliza o título */
}

.form-box p {
    margin-bottom: 15px;
    font-size: 15px; /* Tamanho ajustado */
    text-align: center; /* Centraliza o parágrafo */
}

/* Campos de input gerais */
input[type="text"],
input[type="email"],
input[type="password"] {
    width: 100%; /* Ocupa 100% do pai */
    padding: 12px; /* Padding ajustado */
    border: 1px solid #ccd0d5;
    border-radius: 6px; /* Borda arredondada */
    box-sizing: border-box; /* Inclui padding e border no cálculo do tamanho total */
    margin-bottom: 12px; /* Espaço entre os campos */
    font-size: 16px; /* Tamanho da fonte do input */
}

.name-fields {
    display: flex;
    flex-direction: column; /* Nomes empilhados em mobile */
    gap: 10px; /* Espaço entre nome e sobrenome */
    margin-bottom: 12px;
}

.name-fields input {
    flex: 1; /* Ocupa o espaço disponível quando lado a lado */
    margin-bottom: 0; /* Remove margem extra entre os campos de nome/sobrenome */
}

.dob-fields {
    display: flex;
    flex-direction: column; /* Campos de data de nascimento empilhados em mobile */
    gap: 10px; /* Espaço entre os selects */
    margin-bottom: 12px;
}

.dob-fields select {
    flex: 1;
    padding: 10px;
    border: 1px solid #ccd0d5;
    border-radius: 6px;
    background-color: white;
    box-sizing: border-box;
    font-size: 16px;
}

.gender-fields {
    display: flex;
    flex-direction: column; /* Gênero empilhado em mobile */
    gap: 8px; /* Espaço entre as opções de gênero */
    margin-bottom: 15px;
}

.gender-fields label {
    display: flex;
    align-items: center;
    padding: 10px; /* Aumenta a área clicável */
    border: 1px solid #ccd0d5;
    border-radius: 6px;
    font-size: 15px; /* Tamanho da fonte do gênero */
    background-color: white;
    cursor: pointer;
}

.gender-fields input[type="radio"] {
    margin-right: 8px;
    margin-bottom: 0; /* Remove a margem inferior padrão de input */
    transform: scale(1.2); /* Aumenta um pouco o radio button para mobile */
}

#customGenderInput {
    margin-top: 10px;
}

.privacy-text {
    font-size: 13px; /* Texto de privacidade menor */
    color: #606770;
    margin-bottom: 20px;
}

.privacy-text a {
    color: #1877f2;
    text-decoration: none;
}

.register-button {
    width: 100%; /* Ocupa 100% do pai */
    padding: 12px 20px;
    background-color: #eb1c91;
    color: white;
    font-size: 18px; /* Tamanho maior para o botão */
    font-weight: bold;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s;
    box-sizing: border-box; /* Garante que padding e border sejam incluídos na largura */
}

.register-button:hover {
    background-color: #f651af;
}

.login-redirect {
    text-align: center;
    margin-top: 15px; /* Mais espaço acima */
    font-size: 15px;
}

.login-redirect a {
    color: #eb1c91;
    text-decoration: none;
    font-weight: bold;
}

.login-redirect:hover a {
    color: #fb57b4;
    text-decoration: none;
    font-weight: bold;
}

#passwordStrength p {
    font-size: 13px; /* Tamanho da fonte para os requisitos de senha */
    margin: 4px 0; /* Espaçamento entre os itens */
}

.valid {
    color: green;
}

.invalid {
    color: red;
}

#passwordStrength {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 0.8rem;
}

#passwordStrength p {
    margin: 0;
    padding: 3px 8px;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.invalid {
    color: #721c24;
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
}

.valid {
    color: #155724;
    background-color: #d4edda;
    border: 1px solid #c3e6cb;
}

/* --- Media Query para Telas Maiores (a partir de 600px - Tablets) --- */
@media (min-width: 600px) {
    .register-container {
        padding: 40px; /* Aumenta o padding geral para tablets */
    }

    .logo {
        font-size: 48px; /* Tamanho original do logo */
    }

    .form-box {
        padding: 30px; /* Padding aumentado para formulário */
    }

    .form-box h2 {
        font-size: 30px; /* Tamanho original do título */
    }

    .form-box p {
        font-size: 17px; /* Tamanho original do parágrafo */
    }

    .name-fields {
        flex-direction: row; /* Nome e sobrenome lado a lado */
    }

    .dob-fields {
        flex-direction: row; /* Data de nascimento lado a lado */
    }

    .gender-fields {
        flex-direction: row; /* Gênero lado a lado */
        justify-content: space-between; /* Distribui o espaço entre as opções */
        gap: 10px; /* Espaço entre as opções */
    }

    .gender-fields label {
        flex: 1; /* Ocupa o espaço de forma igual */
        max-width: calc(33.33% - 10px); /* Ajuste para 3 colunas com gap */
    }

    .privacy-text {
        font-size: 14px; /* Retorna ao tamanho original */
    }

    .login-redirect {
        margin-top: 20px; /* Mais espaço acima */
        font-size: 16px; /* Retorna ao tamanho original */
    }

    #passwordStrength p {
        font-size: 14px; /* Retorna ao tamanho original */
    }
}

/* --- Media Query para Telas de Desktop (a partir de 1024px) --- */
@media (min-width: 1024px) {
    body {
        align-items: center; /* Centraliza o container verticalmente em telas grandes */
        padding: 0; /* Remove padding do body em desktop, pois o container já tem max-width */
    }

    .register-container {
        max-width: 430px; /* Define largura fixa para o container principal */
        margin: 0; /* Remove margem automática, centralizado pelo body */
    }

    .form-box {
        padding: 20px; /* Mantém o padding original */
    }
}

/* === Responsividade básica === */
.responsive-container {
  padding: 10px;
  box-sizing: border-box;
  max-width: 100%;
}

@media (max-width: 768px) {
  .responsive-container {
    padding: 8px;
  }
  .sidebar-left,
  .sidebar-right {
    display: none;
  }
  .content {
    width: 100% !important;
  }
  .post-retro, .form-resposta {
    flex-direction: column;
  }
}

@media (max-width: 480px) {
  .responsive-container {
    padding: 6px;
  }
  header, footer {
    flex-direction: column;
    align-items: flex-start;
  }
  .user-greeting {
    flex-direction: column;
    align-items: flex-start;
  }
}


/* === Ajustes gerais para mobile e tablets === */
@media (max-width: 768px) {
  header, footer {
    flex-direction: column;
    align-items: flex-start;
  }

  .user-greeting, .nav-btn, .create-btn {
    width: 100%;
    text-align: left;
    margin-bottom: 10px;
  }

  .sidebar-left, .sidebar-right {
    display: none !important;
  }

  .content {
    width: 100% !important;
  }

  .post-retro,
  .form-resposta,
  .resposta-retro {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .galeria-postagem {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }

  .galeria-postagem img {
    width: 100%;
    max-width: 100%;
    height: auto;
  }

  textarea,
  input[type="text"],
  input[type="email"],
  input[type="password"],
  button {
    width: 100% !important;
    box-sizing: border-box;
  }

  .participate-input {
    flex-direction: column;
  }

  .icon-upload {
    margin-bottom: 10px;
  }

  .post-actions-bar {
    flex-direction: column;
    gap: 10px;
  }
}

@media (max-width: 480px) {
  .logo-img {
    width: 160px;
    height: auto;
  }

  .responsive-container {
    padding: 6px;
  }

  h2, h3, h4, p, label, button {
    font-size: 90%;
  }

  .btn-principal,
  .btn-secundario {
    font-size: 90%;
    padding: 10px;
  }
}


/* === MENU HAMBÚRGUER === */
.hamburguer-icon {
  display: none;
  font-size: 28px;
  background: none;
  border: none;
  cursor: pointer;
  color: #eb1c91;
  margin: 10px;
}

.menu-mobile {
  display: none;
  flex-direction: column;
  position: absolute;
  top: 60px;
  left: 10px;
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0px 0px 10px rgba(0,0,0,0.2);
  z-index: 999;
}

.menu-mobile a {
  margin: 8px 0;
  text-decoration: none;
  color: #333;
  font-weight: bold;
}

.fechar-menu {
  align-self: flex-end;
  background: none;
  border: none;
  font-size: 22px;
  color: #eb1c91;
  cursor: pointer;
  margin-bottom: 10px;
}

@media (max-width: 768px) {
  .hamburguer-icon {
    display: block;
  }

  .header .nav-btn,
  .header .create-btn {
    display: none !important;
  }
}


/* === Animações de entrada/saída do menu === */
.menu-mobile {
  display: none;
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.menu-mobile.menu-ativo {
  display: flex !important;
  opacity: 1;
  transform: translateX(0);
}

.menu-mobile.menu-fechado {
  opacity: 0;
  transform: translateX(-20px);
}