* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  background-color: #F7F8FA;
  color: #202A44;

}
.header
{
  max-width: 1480px;
  width: 100%;
  margin: 0 auto;
}
.header img{
  width: 100%;
}
.card {
  max-width: 650px;
  width: 90%;
  margin: 40px auto;
  padding: 30px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.caixa_msg{
    font-weight: bold;
}
h1 {
  font-size: 24px;
  margin-bottom: 10px;
}

h2 {
  font-size: 20px;
  margin-top: 25px;
  margin-bottom: 15px;
  color: #284E80;
}

p {
  font-size: 14px;
  margin-top: 12px;
  margin-bottom: 10px;
  color: #53565A;
}

fieldset {
  border: none;
  padding: 0;
  margin-bottom: 15px;
}

legend {
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 6px;
  color: #0f172a;
}

label {
  margin-right: 15px;
  font-size: 16x;
  cursor: pointer;
  line-height: 22px;

}

input[type="radio"] {
  margin-right: 5px;
}

textarea {
  width: 100%;
  min-height: 80px;
  padding: 8px;
  margin-top: 8px;
  margin-bottom: 8px;
  border: 1px solid #C8C9C7;
  border-radius: 5px;
  resize: vertical;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
}

textarea:focus {
  border-color: #1C6BBA;
  outline: none;
}
.question{
  margin: 25px 0;
}
.form-actions {
  margin-top: 20px;
  display: flex;
  gap: 10px;
}

.btn {
  padding: 10px 20px;
  border-radius: 6px;
  border: none;
  background-color: #3e3e3e;
  color: #fff;
  cursor: pointer;
  font-size: 14px;
}

.btn:hover {
  background-color: #1d1d1d;
}

.btn.secondary {
  background-color: #E5E5E5;
  color: #202A44;
}

.btn.secondary:hover {
  background-color: #c7c7c7;
}
.hidden{
    display: none;
}
input[type="text"] {
  width: 400px;
}
/* Container layout */
.rating-circle {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 8px;
}

/* Hide native radio visually but keep it accessible */
.rating-circle input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none; /* clicks handled by label */
}

/* Label styles so the whole area is clickable */
.rating-circle label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* The circular "button" */
.rating-circle span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid #6b7280; /* neutral border */
  font-size: 16px;
  user-select: none;
  transition: transform .12s ease, background-color .12s ease, color .12s ease, border-color .12s ease;
  box-sizing: border-box;
}

/* Hover effect */
.rating-circle label:hover span {
  transform: translateY(-3px);
}

/* Checked state */
.rating-circle input:checked + span {
  background-color: black; /* accent color */
  color: #fff;
  border-color: gray;
  transform: scale(1.06);
}

/* Focus visible for keyboard users */
.rating-circle input:focus + span {
  outline: 3px solid gray;
  outline-offset: 4px;
}

/* Small screens: reduce size */
@media (max-width: 420px) {
  .rating-circle span {
    width: 36px;
    height: 36px;
    font-size: 14px;
  }
}
@media (max-width: 670px) {
  legend {
  font-size: 15px;
}
label {
  font-size: 15px;
}
p{
  font-size: 13px;
}
  .question fieldset {
    display: flex;
    flex-direction: column;
  }

  .form-actions {
    flex-direction: column;
    gap: 8px;
  }
}



/* Estilo para os campos de input */
#dataCard input[type="email"],
#dataCard input[type="text"] {
  width: 100%;                    /* O campo ocupa toda a largura do card */
  padding: 12px;                  /* Preenchimento do campo */
  font-size: 16px;                /* Tamanho da fonte dentro do campo */
  margin-bottom: 20px;            /* Espaçamento abaixo do campo */
  border: 1px solid #BDC3C7;      /* Cor neutra da borda */
  border-radius: 8px;             /* Bordas arredondadas para suavizar o campo */
  background-color: #f9f9f9;      /* Fundo suave para os campos de entrada */
  transition: border-color 0.3s ease-in-out; /* Transição suave para a borda */
}

/* Efeito de foco no input */
#dataCard input[type="email"]:focus,
#dataCard input[type="text"]:focus {
  border-color: #3498DB;          /* Cor da borda ao focar no campo */
  outline: none;                  /* Remove o contorno padrão de foco */
}

/* Estilo para o botão "Next" */
#dataCard button#nextBtn {
  background-color: #3e3e3e;      /* Cor azul do botão */
  color: white;                   /* Cor do texto do botão */
  border: none;                   /* Remove a borda padrão do botão */
  padding: 12px 25px;             /* Preenchimento interno do botão */
  border-radius: 8px;             /* Bordas arredondadas do botão */
  cursor: pointer;               /* Indicador de clique */
  font-size: 18px;                /* Tamanho de fonte do botão */
  transition: background-color 0.3s; /* Transição suave para a cor de fundo */
  width: 100%;                    /* O botão ocupa toda a largura do card */
}

/* Efeito de hover no botão */
#dataCard button#nextBtn:hover {
  background-color: #1d1d1d;      /* Cor mais escura ao passar o mouse (efeito hover) */
}

/* Efeito de foco no botão */
#dataCard button#nextBtn:focus {
  outline: none;                  /* Remove o contorno do botão ao focar */
}

#dataCard input[type="date"] {
  width: 100%;                    /* O campo ocupa toda a largura do card */
  padding: 12px;                  /* Preenchimento do campo */
  font-size: 16px;                /* Tamanho da fonte dentro do campo */
  margin-bottom: 20px;            /* Espaçamento abaixo do campo */
  border: 1px solid #BDC3C7;      /* Cor neutra da borda */
  border-radius: 8px;             /* Bordas arredondadas para suavizar o campo */
  background-color: #f9f9f9;      /* Fundo suave para os campos de entrada */
  transition: border-color 0.3s ease-in-out; /* Transição suave para a borda */
}

/* Efeito de foco no input de data */
#dataCard input[type="date"]:focus {
  border-color: #3498DB;          /* Cor da borda ao focar no campo */
  outline: none;                  /* Remove o contorno padrão de foco */
}
@media (max-width: 526px) {
  #inputOutro_1_4,
  #inputOutro_1_7,
  #input3,
  #input4,
  #input5 {
    width: 100%;
  }
}