/* ====================================================
   BOOTSTRAP CUSTOM THEME - Academia Fernandinho Beltrão 2026
   Layout moderno para público jovem (14-22 anos)
   Paleta: Tons de azul e branco com Bootstrap 5
   ==================================================== */

/* ==================== VARIÁVEIS CSS ==================== */
:root {
  --bs-primary: #2563eb;
  --bs-primary-rgb: 37, 99, 235;
  --bs-secondary: #0ea5e9;
  --bs-body-font-family: 'Inter', system-ui, -apple-system, sans-serif;
  
  /* Custom colors */
  --fb-blue-dark: #1e3a8a;
  --fb-blue: #2563eb;
  --fb-blue-light: #3b82f6;
  --fb-cyan: #0ea5e9;
  --fb-gradient: linear-gradient(135deg, #1e3a8a 0%, #2563eb 50%, #0ea5e9 100%);
}

/* ==================== BASE ==================== */
* {
  box-sizing: border-box;
}

body {
  font-family: var(--bs-body-font-family);
  background: var(--fb-gradient);
  min-height: 100vh;
  margin: 0;
  padding: 0;
}

/* ==================== LAYOUT PRINCIPAL ==================== */
.main {
  padding: 30px 15px;
  min-height: 100vh;
  overflow-x: hidden;
}

.container {
  max-width: 900px !important;
  width: 100% !important;
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  padding: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ==================== HEADER ==================== */
.header-section {
  text-align: center;
  padding: 40px 20px 20px;
  background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
}

.logo {
  max-width: 180px;
  height: auto;
  margin-bottom: 15px;
  transition: transform 0.3s ease;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
}

.logo:hover {
  transform: scale(1.05);
}

.header-section h2 {
  color: var(--fb-blue-dark);
  font-weight: 700;
  font-size: 1.6rem;
  margin: 0;
  padding: 0;
}

/* ==================== VÍDEO SECTION ==================== */
.video-section {
  background: var(--fb-gradient);
  margin: 0 20px 20px;
  border-radius: 20px;
  padding: 30px 25px;
  box-shadow: 0 10px 30px rgba(30, 58, 138, 0.3);
}

.video-section h2 {
  color: #fff !important;
  font-size: 1.1rem;
  margin-bottom: 20px;
  font-weight: 600;
}

.video-section h2 i {
  font-size: 1.3rem;
}

.video-wrapper {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
  background: #000;
}

.video-wrapper iframe {
  width: 100%;
  aspect-ratio: 16/9;
  border: none;
  display: block;
}

/* ==================== BOTÃO DIRETORES ==================== */
.btn-directors {
  background: var(--fb-gradient);
  color: #fff !important;
  padding: 14px 32px;
  border-radius: 50px;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(37, 99, 235, 0.4);
  border: none;
  font-size: 1rem;
}

.btn-directors:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(37, 99, 235, 0.5);
  color: #fff !important;
}

.btn-directors:active {
  transform: translateY(-1px);
}

/* ==================== WIZARD STEPS ==================== */
.steps {
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  padding: 0 !important;
  width: 100%;
}

.steps ul {
  display: flex !important;
  justify-content: stretch !important;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

.steps ul li {
  flex: 1 1 0;
  max-width: none;
  padding: 0 !important;
  text-align: center;
}

.steps ul li:after {
  display: none !important;
}

.steps ul li a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 15px;
  text-decoration: none;
  color: #94a3b8;
  border-bottom: 3px solid transparent;
  transition: all 0.3s ease;
  width: 100%;
  min-height: 100px;
}

.steps ul li a:hover {
  color: var(--fb-blue);
  background: rgba(37, 99, 235, 0.05);
}

.steps ul li.current a,
.steps ul li a[aria-selected="true"] {
  color: var(--fb-blue);
  border-bottom-color: var(--fb-blue);
  background: rgba(37, 99, 235, 0.08);
}

.steps ul li.done a {
  color: #10b981;
  border-bottom-color: #10b981;
}

/* Step numbers */
.number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #e2e8f0;
  color: #64748b;
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: 8px;
  transition: all 0.3s ease;
}

.steps ul li.current .number,
.steps ul li a[aria-selected="true"] .number {
  background: var(--fb-gradient);
  color: #fff;
  box-shadow: 0 4px 15px rgba(37, 99, 235, 0.4);
}

.steps ul li.done .number {
  background: #10b981;
  color: #fff;
}

.title_text {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}

/* ==================== FORMULÁRIO ==================== */
.signup-form {
  padding: 0;
}

fieldset {
  padding: 40px;
  background: #fff;
  border: none !important;
}

.fieldset-content {
  max-width: 100%;
}

/* Form Groups & Margins */
.mb-4 {
  margin-bottom: 1.5rem !important;
  width: 100%;
}

/* Wrapper dos campos de formulário */
.signup-form .mb-4 {
  display: block;
  width: 100%;
}

/* Labels */
.form-label {
  font-weight: 600;
  color: #334155;
  font-size: 0.95rem;
  margin-bottom: 0.5rem;
  display: block !important;
  text-align: left !important;
  line-height: 1.4;
  width: 100% !important;
  max-width: 100% !important;
  margin-right: 0 !important;
}

.form-label i {
  color: var(--fb-blue);
  font-size: 1.1rem;
  margin-right: 6px;
  vertical-align: middle;
}

.form-label span {
  flex: 1;
  min-width: 0;
}

/* Inputs com Bootstrap */
.form-control,
.form-select {
  padding: 14px 18px;
  font-size: 1rem;
  font-family: var(--bs-body-font-family);
  color: #1e293b;
  background-color: #fff;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  transition: all 0.2s ease;
  width: 100%;
}

.form-control:hover,
.form-select:hover {
  border-color: #cbd5e1;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--fb-blue);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.15) !important;
  outline: none;
}

.form-control::placeholder {
  color: #94a3b8;
}

/* Select customizado */
.form-select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 18px;
  padding-right: 45px;
}

/* Checkbox & Form Check */
.form-check {
  padding-left: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.form-check-input {
  width: 20px;
  height: 20px;
  min-width: 20px;
  max-width: 20px;
  margin: 0 !important;
  border: 2px solid #cbd5e1;
  border-radius: 6px;
  cursor: pointer;
  flex-shrink: 0;
}

.form-check-input:checked {
  background-color: var(--fb-blue);
  border-color: var(--fb-blue);
}

.form-check-input:focus {
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.15);
}

.form-check-label {
  font-weight: 500;
  color: #475569;
  cursor: pointer;
  display: flex;
  align-items: center;
}

/* Erros & Validação */
.invalid-feedback {
  display: none;
  color: #ef4444;
  font-size: 0.85rem;
  margin-top: 6px;
  padding: 8px 12px;
  background: #fef2f2;
  border-radius: 8px;
  border: 1px solid #fee2e2;
}

/* Estilo específico para mensagens de CPF inválido */
#txtCPF,
#txtCPF2 {
  display: none;
  color: #dc2626 !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  margin-top: 8px !important;
  padding: 10px 14px !important;
  background: #fef2f2 !important;
  border: 1px solid #fee2e2 !important;
  border-radius: 8px !important;
  width: 100% !important;
  text-align: left !important;
}

/* Quando o JavaScript usar .show(), garantir que fique visível */
#txtCPF[style*="display: block"],
#txtCPF[style*="display:block"],
#txtCPF2[style*="display: block"],
#txtCPF2[style*="display:block"] {
  display: block !important;
}

/* Esconder label.error do jQuery Validate quando a mensagem customizada de CPF está visível */
/* Isso evita duplicidade de mensagens */
#txtCPF[style*="display: block"] ~ label.error,
#txtCPF[style*="display:block"] ~ label.error,
#txtCPF2[style*="display: block"] ~ label.error,
#txtCPF2[style*="display:block"] ~ label.error {
  display: none !important;
}

/* Mensagem de CPF - esconder label.error do campo quando txtCPF está visível */
#validaCPF ~ #txtCPF[style*="display: block"] ~ label.error[for="validaCPF"],
#validaCPF ~ #txtCPF[style*="display:block"] ~ label.error[for="validaCPF"] {
  display: none !important;
}

/* Inputs com erro - borda e fundo normais, apenas label vermelha */
.form-control.error,
.form-select.error,
input.error {
  border-color: #e2e8f0 !important;
  background-color: #fff !important;
}

label.error {
  color: #ef4444 !important;
  font-size: 0.85rem !important;
  margin-top: 10px !important;
  margin-bottom: 0 !important;
  display: block !important;
  padding: 10px 14px !important;
  background: #fef2f2 !important;
  border: 1px solid #fee2e2 !important;
  border-radius: 8px !important;
  /* Sobrescrever style2.css */
  position: relative !important;
  right: auto !important;
  /* Garante que a mensagem fique abaixo do input */
  order: 99 !important;
}

/* Esconder label.error quando está vazio (sem texto) */
label.error:empty,
label.error:blank {
  display: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* Esconder label.error válido (quando campo foi corrigido) */
label.error.valid,
label.error[style*="display: none"],
label.error[style*="display:none"] {
  display: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  height: 0 !important;
  width: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
}

/* ==================== FIX: Ordem dos elementos com Flexbox ==================== */
/* Usar flexbox para garantir que label.error apareça DEPOIS do input */
.mb-4,
.mb-3,
fieldset .mb-4 {
  display: flex !important;
  flex-direction: column !important;
}

/* Ordem dos elementos dentro de .mb-4 */
.mb-4 > .form-label,
.mb-3 > .form-label {
  order: 1 !important;
}

.mb-4 > .form-control,
.mb-4 > .form-select,
.mb-3 > .form-control,
.mb-3 > .form-select,
.mb-4 > input,
.mb-3 > input,
.mb-4 > select,
.mb-3 > select {
  order: 2 !important;
}

.mb-4 > label.error,
.mb-3 > label.error {
  order: 99 !important;
}

.mb-4 > .invalid-feedback,
.mb-4 > #txtCPF,
.mb-4 > #txtCPF2,
.mb-3 > .invalid-feedback {
  order: 100 !important;
}

/* ==================== SEÇÕES DO FORMULÁRIO ==================== */
.form-section-title {
  text-align: center;
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--fb-blue-dark);
  margin: 40px 0 25px;
  padding: 20px 0;
  border-top: 2px solid #f1f5f9;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.form-section-title::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 3px;
  background: var(--fb-gradient);
  border-radius: 3px;
}

.form-section-title i {
  color: var(--fb-blue);
  font-size: 1.3rem;
}

/* ==================== GRID ROW ==================== */
.row {
  --bs-gutter-x: 1rem;
}

.g-3 {
  --bs-gutter-y: 1rem;
  --bs-gutter-x: 1rem;
}

/* Row Labels - campos lado a lado */
.row .form-label {
  font-size: 0.88rem;
  min-height: auto;
  width: 100%;
  display: block;
}

.row .form-label i {
  display: inline;
  margin-right: 4px;
}

/* ==================== CHECKBOX DE TERMOS ==================== */
.terms-check {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-radius: 14px;
  padding: 18px 22px;
  border: 2px solid #e2e8f0;
  transition: all 0.3s ease;
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
  /* Flexbox para reordenar elementos */
  display: flex !important;
  flex-direction: column !important;
}

/* O form-check (checkbox + label) deve aparecer PRIMEIRO usando order */
.terms-check .form-check {
  max-width: 100%;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center;
  gap: 12px;
  order: 1 !important;  /* Aparece primeiro */
}

/* Erro do checkbox deve aparecer DEPOIS do form-check (na linha de baixo) */
.terms-check > label.error {
  width: 100% !important;
  order: 99 !important;  /* Aparece por último */
  margin-top: 12px !important;
  margin-bottom: 0 !important;
  flex-basis: 100% !important;
}

/* Esconder label.error válido ou vazio dentro do terms-check */
.terms-check > label.error.valid,
.terms-check > label.error:empty {
  display: none !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
}

/* Se o erro estiver dentro do .form-check */
.terms-check .form-check > label.error {
  width: 100% !important;
  order: 99 !important;
  margin-top: 12px !important;
  margin-bottom: 0 !important;
  flex-basis: 100% !important;
}

/* Garantir que o checkbox e label tenham ordem correta dentro do form-check */
.terms-check .form-check-input {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  max-width: 22px !important;
  flex-shrink: 0;
  margin: 0 !important;
  order: 1 !important;
}

.terms-check .form-check-label {
  font-size: 0.95rem;
  word-wrap: break-word;
  flex: 1;
  min-width: 0;
  margin: 0;
  white-space: normal;
  order: 2 !important;
}

.terms-check:hover {
  border-color: var(--fb-blue-light);
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
}

.terms-check .form-check-label i {
  color: var(--fb-blue);
}

/* ==================== BOTÕES DE NAVEGAÇÃO ==================== */

/* Esconde o .actions duplicado que aparece dentro do .content */
.content > .actions {
  display: none !important;
}

/* Esconde o .steps duplicado e vazio que fica dentro do wizard */
.wizard > .steps:first-child:empty,
.wizard > .steps:first-child ul:empty {
  display: none !important;
}

/* IMPORTANTE: Sobrescreve a regra .actions ul .disabled { display: none } do style2.css */
/* Isso garante que o botão Próximo não fique invisível */
.actions ul li {
  display: block !important;
}

/* Mas esconde o botão "Anterior" no primeiro step (quando tem classe disabled) */
.actions ul li:first-child.disabled {
  display: none !important;
}

/* Esconde o botão "Registrar" até o último step */
.actions ul li:last-child {
  display: none !important;
}

/* Mostra apenas o botão "Próximo" (segundo item) */
.actions ul li:nth-child(2) {
  display: block !important;
}

/* No último step, esconde Próximo e mostra Registrar */
.wizard[data-current-step="2"] .actions ul li:nth-child(2),
.steps ul li:last-child.current ~ .content + .actions ul li:nth-child(2) {
  display: none !important;
}

.wizard[data-current-step="2"] .actions ul li:last-child {
  display: block !important;
}

.actions {
  background: #f8fafc;
  padding: 25px 40px;
  border-top: 1px solid #e2e8f0;
  position: relative !important;
  bottom: auto !important;
  margin-top: 20px;
}

.actions ul {
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* CORREÇÃO: Sobrescrever regra do style2.css que esconde botões disabled */
/* A regra original ".actions ul .disabled { display: none; }" esconde todos os botões */
/* Aqui garantimos que os li's são exibidos corretamente */
.actions ul li {
  display: inline-block !important;
}

/* Apenas o botão Anterior no Step 1 deve ficar escondido */
.actions ul li:first-child.disabled {
  display: none !important;
}

/* Botão Próximo NÃO deve ficar escondido mesmo com classe disabled temporária */
.actions ul li:not(:first-child):not(:last-child) {
  display: inline-block !important;
}

/* Esconder o botão duplicado dentro de .content */
.content > .actions {
  display: none !important;
}

.actions ul li a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 36px;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 50px;
  text-decoration: none;
  transition: all 0.3s ease;
  min-width: 150px;
}

/* Botão Anterior */
.actions ul li:first-child a {
  background: #fff;
  color: #475569;
  border: 2px solid #cbd5e1;
}

.actions ul li:first-child a:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
  color: #334155;
}

/* Botão Próximo / Registrar */
.actions ul li:last-child a {
  background: var(--fb-gradient);
  color: #fff;
  border: none;
  box-shadow: 0 4px 15px rgba(37, 99, 235, 0.4);
}

.actions ul li:last-child a:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.5);
}

/* Botão desabilitado */
.actions ul li.disabled a {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* ==================== FOOTER DO STEP ==================== */
.fieldset-footer {
  text-align: center;
  padding-top: 25px;
  margin-top: 30px;
  border-top: 1px solid #f1f5f9;
}

.fieldset-footer .badge {
  font-size: 0.9rem;
  font-weight: 600;
  border-radius: 50px;
}

/* ==================== MENSAGEM CARREGANDO ==================== */
#msgPag {
  display: none;
  padding: 20px;
  background: linear-gradient(135deg, #dbeafe 0%, #e0f2fe 100%);
  border: 2px solid var(--fb-blue-light);
  border-radius: 14px;
  color: var(--fb-blue-dark);
  text-align: center;
  margin-top: 20px;
}

#msgPag img {
  max-width: 40px;
}

/* ==================== ALERTS ==================== */
.alert-info {
  background: linear-gradient(135deg, #dbeafe 0%, #e0f2fe 100%);
  border: 2px solid var(--fb-blue-light);
  color: var(--fb-blue-dark);
  border-radius: 14px;
}

/* ==================== RESPONSIVO ==================== */

/* Tablet */
@media (max-width: 768px) {
  .main {
    padding: 15px 10px;
  }
  
  .container {
    border-radius: 20px;
  }
  
  .header-section {
    padding: 30px 15px 15px;
  }
  
  .header-section h2 {
    font-size: 1.35rem;
  }
  
  fieldset {
    padding: 30px 20px;
  }
  
  .actions {
    padding: 20px;
    position: relative !important;
    bottom: auto !important;
    margin-top: 15px;
  }
  
  .steps ul li a {
    padding: 15px 8px;
  }
  
  .number {
    width: 38px;
    height: 38px;
    font-size: 0.9rem;
  }
  
  .title_text {
    font-size: 0.7rem;
  }
  
  .video-section {
    margin: 0 15px 15px;
    padding: 25px 20px;
  }
  
  .video-section h2 {
    font-size: 1rem;
  }
  
  .form-section-title {
    font-size: 1.05rem;
    margin: 30px 0 20px;
  }
  
  /* Labels em tablet */
  .row .form-label {
    font-size: 0.85rem;
  }
}

/* Mobile */
@media (max-width: 576px) {
  .main {
    padding: 10px 5px;
  }
  
  .container {
    border-radius: 16px;
  }
  
  .header-section {
    padding: 25px 15px 15px;
  }
  
  .logo {
    max-width: 140px;
  }
  
  .header-section h2 {
    font-size: 1.15rem;
  }
  
  .video-section {
    margin: 0 10px 10px;
    padding: 20px 15px;
    border-radius: 16px;
  }
  
  .video-section h2 {
    font-size: 0.9rem;
  }
  
  .btn-directors {
    padding: 12px 24px;
    font-size: 0.95rem;
  }
  
  /* Steps mobile - layout vertical */
  .steps {
    padding: 15px 20px !important;
  }
  
  .steps ul {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
  }
  
  .steps ul li {
    min-width: 100% !important;
    width: 100% !important;
    border-bottom: 1px solid #e2e8f0;
  }
  
  .steps ul li:last-child {
    border-bottom: none;
  }
  
  .steps ul li a {
    flex-direction: row !important;
    justify-content: flex-start !important;
    padding: 15px 10px !important;
    min-height: auto !important;
    gap: 12px;
    border-bottom: none !important;
    border-left: 3px solid transparent;
  }
  
  .steps ul li.current a,
  .steps ul li a[aria-selected="true"] {
    border-left-color: var(--fb-blue) !important;
    border-bottom-color: transparent !important;
  }
  
  .steps ul li.done a {
    border-left-color: #10b981 !important;
    border-bottom-color: transparent !important;
  }
  
  .number {
    width: 36px;
    height: 36px;
    font-size: 0.85rem;
    margin-bottom: 0 !important;
    flex-shrink: 0;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1;
    text-align: center !important;
  }
  
  .steps ul li a .number,
  .steps ul li a .title .number {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }
  
  .title_text {
    font-size: 0.75rem;
    text-align: left !important;
    flex: 1;
  }
  
  .steps ul li a {
    text-align: left !important;
  }
  
  .steps ul li a .title_text,
  .steps ul li a span {
    text-align: left !important;
    justify-content: flex-start !important;
  }
  
  /* Alinha o container .title dentro do link */
  .steps ul li a .title {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px;
    width: 100%;
  }
  
  /* Form mobile */
  fieldset {
    padding: 25px 15px;
  }
  
  .form-control,
  .form-select {
    padding: 12px 14px;
    font-size: 0.95rem;
    border-radius: 10px;
  }
  
  .form-label {
    font-size: 0.9rem;
    flex-wrap: wrap;
  }
  
  .form-label i {
    font-size: 1rem;
  }
  
  /* Row labels mobile */
  .row .form-label {
    font-size: 0.82rem;
  }
  
  /* Actions mobile */
  .actions {
    padding: 15px;
    position: relative !important;
    bottom: auto !important;
    margin-top: 20px;
  }
  
  .actions ul {
    flex-direction: column-reverse;
    gap: 12px;
    justify-content: center !important;
  }
  
  .actions ul li {
    width: 100%;
  }
  
  .actions ul li a {
    width: 100%;
    padding: 14px 20px;
  }
  
  .fieldset-footer {
    margin-top: 20px;
    padding-top: 15px;
  }
  
  .form-section-title {
    font-size: 1rem;
    margin: 25px 0 20px;
    padding: 15px 0;
  }
  
  .form-section-title i {
    font-size: 1.1rem;
  }
  
  .terms-check {
    padding: 15px 18px;
  }
  
  .terms-check .form-check-label {
    font-size: 0.9rem;
  }
  
  .form-check-input {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    max-width: 20px !important;
  }
}

/* Extra Small Mobile */
@media (max-width: 375px) {
  .header-section h2 {
    font-size: 1rem;
  }
  
  .video-section h2 {
    font-size: 0.85rem;
  }
  
  .form-control,
  .form-select {
    padding: 10px 12px;
    font-size: 0.9rem;
  }
  
  .form-label {
    font-size: 0.85rem;
  }
  
  .row .form-label {
    font-size: 0.78rem;
  }
  
  .terms-check {
    padding: 12px 15px;
  }
  
  .terms-check .form-check-label {
    font-size: 0.85rem;
  }
  
  .form-check-input {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    max-width: 18px !important;
    margin: 0 !important;
  }
}

/* ==================== ANIMAÇÕES ==================== */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.02);
  }
}

.container {
  animation: fadeIn 0.6s ease-out;
}

/* Animação sutil nos inputs ao focar */
.form-control:focus,
.form-select:focus {
  animation: pulse 0.3s ease-out;
}

/* ==================== UTILITÁRIOS ==================== */
.text-gradient {
  background: var(--fb-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.bg-gradient-primary {
  background: var(--fb-gradient) !important;
}

/* Hide default error messages initially */
#txtCPF,
#txtCPF2 {
  display: none;
}

/* Smooth scroll behavior */
html {
  scroll-behavior: smooth;
}

/* Selection color */
::selection {
  background: var(--fb-blue-light);
  color: #fff;
}

/* Focus visible for accessibility */
:focus-visible {
  outline: 2px solid var(--fb-blue);
  outline-offset: 2px;
}

/* ==================== CORREÇÕES DE CONFLITOS ==================== */
/* Sobrescreve estilos do style2.css que causam problemas de layout */

/* Reset global de labels - sobrescreve style2.css */
.signup-form label,
fieldset label,
.fieldset-content label {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  text-align: left !important;
  margin-right: 0 !important;
}

.fieldset-content {
  padding-right: 0 !important;
  padding-left: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: visible !important;
}

/* Reset container */
.main .container {
  width: 100% !important;
  max-width: 900px !important;
  overflow: hidden !important;
}

/* Reset de inputs - garantir que fiquem dentro do container */
.signup-form input,
.signup-form select,
.signup-form textarea {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Reset de rows Bootstrap - corrige margem negativa padrão */
.signup-form .row {
  margin-left: calc(var(--bs-gutter-x) * -0.5) !important;
  margin-right: calc(var(--bs-gutter-x) * -0.5) !important;
  width: calc(100% + var(--bs-gutter-x)) !important;
  display: flex !important;
  flex-wrap: wrap !important;
}

/* Reset de colunas Bootstrap */
.signup-form [class*="col-"] {
  padding-left: calc(var(--bs-gutter-x) * 0.5) !important;
  padding-right: calc(var(--bs-gutter-x) * 0.5) !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
}

/* Labels não devem quebrar para fora */
.form-label {
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  white-space: normal !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Labels dentro de divs de campo */
.signup-form > fieldset .mb-4 > label,
.signup-form .fieldset-content .mb-4 > label {
  display: block !important;
  width: 100% !important;
}

/* Garantir que mb-4 funcione corretamente */
.signup-form .mb-4 {
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Fix para fieldset não exceder largura */
fieldset {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* ==================== CORREÇÕES MOBILE PARA CAMPOS E MENSAGENS DE ERRO ==================== */

/* Garante que .mb-4 ocupa toda a largura disponível */
.signup-form .mb-4 {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  margin-bottom: 1.5rem !important;
  position: relative !important;
}

/* Labels devem ocupar toda a largura e ficar alinhadas à esquerda */
.signup-form .form-label,
.signup-form label.form-label,
fieldset .form-label {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  text-align: left !important;
  margin-right: 0 !important;
  margin-bottom: 0.5rem !important;
  position: relative !important;
  right: auto !important;
  left: auto !important;
}

/* Mensagens de erro - posição relativa abaixo do campo */
.signup-form label.error,
fieldset label.error,
.mb-4 label.error {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  position: relative !important;
  right: auto !important;
  left: auto !important;
  top: auto !important;
  bottom: auto !important;
  text-align: left !important;
  margin-top: 6px !important;
  margin-bottom: 0 !important;
  padding: 8px 12px !important;
  background: #fef2f2 !important;
  border: 1px solid #fee2e2 !important;
  border-radius: 8px !important;
  color: #ef4444 !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  box-sizing: border-box !important;
}

/* Inputs devem ocupar 100% da largura */
.signup-form .form-control,
.signup-form .form-select,
.signup-form input,
.signup-form select,
.signup-form textarea {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  margin-right: 0 !important;
}

/* Fieldset content sem padding que cause overflow */
.fieldset-content {
  padding-left: 0 !important;
  padding-right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

/* Row Bootstrap - correção de overflow */
.signup-form .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  display: flex !important;
  flex-wrap: wrap !important;
  box-sizing: border-box !important;
}

/* Colunas dentro do row */
.signup-form .row > [class*="col-"] {
  padding-left: 8px !important;
  padding-right: 8px !important;
  box-sizing: border-box !important;
  max-width: 100% !important;
}

/* Primeira e última coluna sem padding extra */
.signup-form .row > [class*="col-"]:first-child {
  padding-left: 0 !important;
}

.signup-form .row > [class*="col-"]:last-child {
  padding-right: 0 !important;
}

/* ==================== MEDIA QUERIES ESPECÍFICAS PARA MOBILE ==================== */

@media (max-width: 767px) {
  /* Colunas empilham verticalmente no mobile */
  .signup-form .row > [class*="col-"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-bottom: 1rem !important;
  }
  
  /* Última coluna sem margin extra */
  .signup-form .row > [class*="col-"]:last-child {
    margin-bottom: 0 !important;
  }
  
  /* Row com gap para espaçamento */
  .signup-form .row {
    gap: 0 !important;
  }
  
  /* Labels no mobile */
  .signup-form .form-label {
    font-size: 0.9rem !important;
    padding-right: 0 !important;
  }
  
  /* Mensagens de erro no mobile - mais compactas */
  .signup-form label.error {
    font-size: 0.8rem !important;
    padding: 6px 10px !important;
    margin-top: 4px !important;
  }
  
  /* Inputs no mobile */
  .signup-form .form-control,
  .signup-form .form-select {
    font-size: 1rem !important;
    padding: 12px 14px !important;
  }
  
  /* Fieldset padding mobile */
  fieldset {
    padding: 20px 15px !important;
  }
  
  /* Container padding mobile */
  .container {
    margin: 0 5px !important;
    width: calc(100% - 10px) !important;
  }
  
  /* Títulos de seção */
  .form-section-title {
    font-size: 0.95rem !important;
    padding: 12px 0 !important;
    margin: 20px 0 15px !important;
    flex-wrap: wrap !important;
    text-align: center !important;
  }
  
  /* Checkbox de termos */
  .terms-check {
    padding: 12px !important;
  }
  
  .terms-check .form-check {
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
  }
  
  .terms-check .form-check-input {
    order: 1 !important;
  }
  
  .terms-check .form-check-label {
    order: 2 !important;
    font-size: 0.85rem !important;
    line-height: 1.4 !important;
    flex: 1 !important;
  }
  
  .terms-check label.error {
    order: 10 !important;
    width: 100% !important;
    margin-top: 10px !important;
  }
}

@media (max-width: 575px) {
  /* Extra small screens */
  .signup-form .form-label {
    font-size: 0.85rem !important;
  }
  
  .signup-form .form-control,
  .signup-form .form-select {
    font-size: 0.95rem !important;
    padding: 10px 12px !important;
  }
  
  fieldset {
    padding: 15px 12px !important;
  }
  
  .form-section-title {
    font-size: 0.9rem !important;
  }
  
  .signup-form label.error {
    font-size: 0.75rem !important;
    padding: 5px 8px !important;
  }
}

@media (max-width: 375px) {
  /* Very small screens (iPhone SE, etc) */
  fieldset {
    padding: 12px 10px !important;
  }
  
  .signup-form .form-label {
    font-size: 0.8rem !important;
  }
  
  .signup-form .form-control,
  .signup-form .form-select {
    font-size: 0.9rem !important;
    padding: 8px 10px !important;
  }
  
  .form-section-title {
    font-size: 0.85rem !important;
    margin: 15px 0 12px !important;
  }
  
  .terms-check .form-check-label {
    font-size: 0.8rem !important;
  }
}

/* ==================== FIM DAS CORREÇÕES MOBILE ==================== */