body {
  background-color: #f0f2f5; /* Adiciona um fundo suave à página */
}

.container {
  max-width: 850px; /* Limita a largura do formulário para um visual mais contido */
}

fieldset.card {
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  border-style: solid !important;

  /* Bordas Superior e Inferior */
  border-top-width: 4px !important;
  border-bottom-width: 4px !important;
  border-top-color: var(--cor-primaria) !important;
  border-bottom-color: var(--cor-primaria) !important;

  /* Bordas Laterais */
  border-left-width: 1px !important;
  border-right-width: 1px !important;
  border-left-color: var(--cor-secundaria) !important;
  border-right-color: var(--cor-secundaria) !important;
}

.card-header {
  background-color: #ffffff;
  border-bottom: 1px solid #f0f0f0;
  padding: 2rem 1rem;
}

.card-header img {
  max-width: 120px !important; /* Ajusta o tamanho da imagem */
}

.card-header h2 {
  font-size: 1.15rem;
  color: var(--cor-primaria); /* CORREÇÃO: Usa a variável do tema */
  font-weight: 700; /* Negrito */
  font-style: italic; /* Itálico */
}

/* --- INÍCIO DA MODIFICAÇÃO: Cor para o título principal --- */
.container > .text-center > h2 {
  color: var(--cor-primaria); /* CORREÇÃO: Usa a variável do tema */
  font-weight: 600;
  font-size: 1.75rem;
  margin-bottom: 1.5rem;
}
/* --- FIM DA MODIFICAÇÃO --- */

.card-body {
  padding: 2rem;
}

fieldset {
  border: none; /* Remove a borda padrão do fieldset, já que o .card cuida disso */
}

legend {
  font-size: 1.1rem;
  font-weight: 600;
  padding: 0 10px;
  color: var(--cor-primaria); /* CORREÇÃO: Usa a variável do tema */
  position: relative; /* Necessário para posicionar a linha abaixo */
  margin-bottom: 1rem; /* Adiciona espaço após o título */
}

/* --- INÍCIO DA MODIFICAÇÃO: Adiciona a linha abaixo de cada título de seção --- */
legend::after {
  content: "";
  position: absolute;
  bottom: -8px; /* Posição da linha abaixo do texto */
  left: 10px; /* Alinha com o início do texto (considerando o padding) */
  width: 50px; /* Largura da linha */
  height: 3px; /* Espessura da linha */
  background-color: var(--cor-acento); /* Usa a cor de destaque do tema */
  border-radius: 2px;
}
/* --- FIM DA MODIFICAÇÃO --- */

.form-group {
  margin-bottom: 1.25rem;
}

.form-control:focus {
  box-shadow: 0 0 0 0.2rem var(--cor-foco-transparente); /* CORREÇÃO: Usa a variável do tema */
  border-color: #86b7fe;
}

.form-control.is-invalid {
  border-color: #dc3545;
}

.btn-primary {
  font-size: 1.1rem;
  font-weight: 600;
  padding: 12px;
  border-radius: 8px;
  background-color: var(--cor-primaria); /* CORREÇÃO: Usa a variável do tema */
  border: none;
  transition:
    background-color 0.2s ease-in-out,
    box-shadow 0.2s ease-in-out;
}

.btn-primary:hover {
  background-color: var(
    --cor-primaria-hover
  ); /* CORREÇÃO: Usa a variável do tema */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.text-danger {
  font-size: 0.9em;
  font-weight: bold;
}

/* --- INÍCIO DA MODIFICAÇÃO: Estilo para os Radio Buttons Personalizados --- */

/* Container para os novos botões de opção */
.radio-box-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px; /* Espaçamento entre os botões */
}

/* --- INÍCIO DA CORREÇÃO --- */
/* Esconde APENAS os inputs de rádio que estão dentro dos nossos botões personalizados */
.radio-box-container .form-check-input {
  display: none;
}

/* Estilo do botão (label) não selecionado */
.form-check-label.radio-box {
  flex: 1 1 180px; /* Permite que os botões cresçam e quebrem a linha */
  padding: 12px 15px;
  border: 2px solid var(--cor-acento, #1abc9c); /* Borda mais grossa e com a cor de destaque do tema */
  border-radius: 8px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  background-color: #fff;
  color: #868e96; /* COR ALTERADA: Texto ainda mais suave para menos destaque */
}

/* Estilo do botão (label) quando o rádio correspondente está selecionado */
.form-check-input:checked + .form-check-label.radio-box {
  background-color: var(--cor-primaria); /* CORREÇÃO: Usa a variável do tema */
  border-color: var(--cor-primaria);
  color: #fff; /* Texto branco */
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* --- FIM DA CORREÇÃO --- */
/* --- FIM DA MODIFICAÇÃO --- */

/* --- INÍCIO DA MODIFICAÇÃO: Estilo para o Checkbox de Consentimento --- */

/* Aumenta o tamanho do checkbox e ajusta a posição */
.consent-checkbox-area .form-check-input {
  transform: scale(1.3);
  margin-top: 0.25em; /* Alinha verticalmente com o texto */
  border-width: 2px; /* Borda mais grossa */
  border-color: var(--cor-borda); /* CORREÇÃO: Usa a variável do tema */
}

/* Define a cor azul quando a opção está selecionada */
.consent-checkbox-area .form-check-input:checked {
  background-color: var(--cor-primaria); /* CORREÇÃO: Usa a variável do tema */
  border-color: var(--cor-primaria);
}

/* CORREÇÃO: Deixa o texto do consentimento com menos destaque */
.consent-checkbox-area .form-check-label {
  color: #868e96; /* COR ALTERADA: Mesmo tom suave dos outros textos */
  font-size: 0.95em;
}

/* --- FIM DA MODIFICAÇÃO --- */
