/* ========================================
   V2.3 FINAL FIXES CSS
   Correções finais: formulário + cores de destaque
   ======================================== */

/* ========== CORREÇÃO TOTAL DO FORMULÁRIO ========== */

/* Formulário - Background consistente */
.form-progressive,
.form-step,
.qualification-form {
  background: linear-gradient(135deg, #f8f8f8 0%, #ffffff 100%) !important;
  border: 2px solid rgba(212, 175, 143, 0.3) !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1) !important;
  padding: var(--spacing-xl) !important;
  border-radius: var(--radius-lg) !important;
}

/* Título da Pergunta - PRETO para contraste perfeito em fundo claro */
.form-step h3,
.form-step .form-question,
.form-question,
.qualification-form h3 {
  color: #1a1a1a !important;
  text-shadow: none !important;
  font-weight: 700 !important;
  margin-bottom: var(--spacing-lg) !important;
  font-size: var(--text-xl) !important;
  line-height: 1.4 !important;
}

/* Labels - PRETO */
.form-step label,
.form-label,
.qualification-form label {
  color: #1a1a1a !important;
  font-weight: 600 !important;
  margin-bottom: var(--spacing-sm) !important;
  display: block !important;
}

/* Inputs - Background branco com texto preto */
.form-step input[type="text"],
.form-step input[type="email"],
.form-step input[type="tel"],
.form-step textarea,
.form-input,
.qualification-form input {
  background-color: #ffffff !important;
  color: #1a1a1a !important;
  border: 2px solid #e0e0e0 !important;
  padding: var(--spacing-md) !important;
  border-radius: var(--radius-md) !important;
  transition: all 0.3s ease !important;
  font-size: var(--text-base) !important;
  font-weight: 500 !important;
}

.form-step input:focus,
.form-step textarea:focus,
.qualification-form input:focus {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px rgba(212, 175, 143, 0.15) !important;
  outline: none !important;
}

/* Opções de Radio/Checkbox - Background branco SEMPRE */
.form-option,
.radio-option,
.checkbox-option,
.qualification-form .form-option {
  background-color: #ffffff !important;
  color: #1a1a1a !important;
  border: 2px solid #e0e0e0 !important;
  padding: var(--spacing-md) var(--spacing-lg) !important;
  border-radius: var(--radius-md) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  min-height: 52px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 600 !important;
  font-size: var(--text-base) !important;
  text-align: center !important;
  margin-bottom: var(--spacing-sm) !important;
  /* Previne crescimento */
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.form-option:hover,
.radio-option:hover,
.checkbox-option:hover {
  background-color: #f8f8f8 !important;
  border-color: var(--color-primary) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 8px rgba(212, 175, 143, 0.15) !important;
}

/* Opção Selecionada - Cor primária com texto branco */
.form-option.selected,
.radio-option.selected,
.checkbox-option.selected,
.form-option:checked,
.radio-option:checked,
.form-option.active,
.qualification-form .form-option.selected {
  background-color: var(--color-primary) !important;
  color: #ffffff !important;
  border-color: var(--color-primary) !important;
  box-shadow: 0 4px 12px rgba(212, 175, 143, 0.3) !important;
  transform: translateY(0) !important;
}

/* Botões do Formulário - Tamanho fixo */
.form-button,
.btn-form-next,
.btn-form-prev,
.qualification-form button[type="submit"],
.qualification-form .btn {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%) !important;
  color: #ffffff !important;
  border: none !important;
  padding: var(--spacing-md) var(--spacing-xl) !important;
  border-radius: var(--radius-md) !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  min-height: 52px !important;
  font-size: var(--text-base) !important;
  /* Previne crescimento */
  max-width: 100% !important;
  width: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-top: var(--spacing-lg) !important;
}

.form-button:hover,
.btn-form-next:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(212, 175, 143, 0.3) !important;
}

.form-button:active,
.btn-form-next:active {
  transform: translateY(0) !important;
}

/* Progress Text - Contraste perfeito */
.form-progress-text {
  background-color: #ffffff !important;
  color: #1a1a1a !important;
  padding: var(--spacing-sm) var(--spacing-md) !important;
  border-radius: var(--radius-md) !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
  border: 1px solid #e0e0e0 !important;
  margin-bottom: var(--spacing-md) !important;
  text-align: center !important;
}

/* Progress Bar */
.form-progress {
  background-color: #e0e0e0 !important;
  border-radius: var(--radius-full) !important;
  height: 8px !important;
  margin-bottom: var(--spacing-lg) !important;
  overflow: hidden !important;
}

.form-progress-bar {
  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-accent) 100%) !important;
  height: 100% !important;
  transition: width 0.4s ease !important;
  border-radius: var(--radius-full) !important;
}

/* Container de Opções */
.form-options,
.radio-group,
.checkbox-group {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--spacing-sm) !important;
  margin-top: var(--spacing-md) !important;
  margin-bottom: var(--spacing-md) !important;
}

/* ========== CORES DE DESTAQUE OTIMIZADAS ========== */

/* Strong/Bold - Cor primária escura para destaque */
strong,
b {
  color: var(--color-primary-dark) !important;
  font-weight: 700 !important;
}

/* Strong dentro de textos claros (hero, sections escuras) */
.hero strong,
.hero b,
.section-dark strong,
.section-dark b,
.footer strong,
.footer b {
  color: var(--color-primary) !important;
  font-weight: 700 !important;
}

/* Strong dentro de textos escuros (sections claras) */
.section-text strong,
.section-text b,
.section-text-large strong,
.section-text-large b,
.hero-description strong,
.hero-description b {
  color: var(--color-primary-dark) !important;
  font-weight: 700 !important;
  text-shadow: none !important;
}

/* Links - Cor primária */
a {
  color: var(--color-primary-dark) !important;
  text-decoration: none !important;
  transition: color 0.3s ease !important;
}

a:hover {
  color: var(--color-accent) !important;
}

/* Links em backgrounds escuros */
.hero a,
.section-dark a,
.footer a {
  color: var(--color-primary) !important;
}

.hero a:hover,
.section-dark a:hover,
.footer a:hover {
  color: var(--color-accent) !important;
}

/* Citações - Cor primária escura */
blockquote,
.authority-quote {
  color: var(--color-text) !important;
  border-left: 4px solid var(--color-primary) !important;
}

/* Títulos com destaque */
.section-title strong,
.section-title b {
  color: var(--color-primary-dark) !important;
  font-weight: 800 !important;
}

/* Hero title com gradiente sutil */
.hero-title {
  background: linear-gradient(135deg, #1a1a1a 0%, var(--color-primary-dark) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* Badges e Pills */
.badge,
.pill,
.tag {
  background-color: var(--color-primary) !important;
  color: #ffffff !important;
  padding: var(--spacing-xs) var(--spacing-sm) !important;
  border-radius: var(--radius-full) !important;
  font-weight: 600 !important;
  font-size: var(--text-sm) !important;
}

/* ========== AJUSTES DE LEGIBILIDADE ========== */

/* Garantir contraste em todos os textos */
.section-text,
.section-text-large,
.hero-description,
p {
  color: var(--color-text) !important;
  line-height: 1.7 !important;
}

/* Textos em backgrounds claros */
.section-diagnosis .section-text,
.section-method .section-text-large,
.section-fit .section-text {
  color: #2a2a2a !important;
}

/* Textos em backgrounds escuros */
.hero .hero-description,
.section-dark p {
  color: rgba(255, 255, 255, 0.95) !important;
}

/* ========== RESPONSIVIDADE ========== */

@media (max-width: 768px) {
  .form-progressive,
  .form-step,
  .qualification-form {
    padding: var(--spacing-lg) !important;
  }
  
  .form-option,
  .radio-option,
  .checkbox-option {
    padding: var(--spacing-sm) var(--spacing-md) !important;
    font-size: var(--text-sm) !important;
    min-height: 48px !important;
  }
  
  .form-button,
  .btn-form-next {
    padding: var(--spacing-sm) var(--spacing-lg) !important;
    font-size: var(--text-sm) !important;
    min-height: 48px !important;
    width: 100% !important;
  }
  
  .form-step h3,
  .form-question {
    font-size: var(--text-lg) !important;
  }
}

@media (max-width: 480px) {
  .form-progressive,
  .form-step,
  .qualification-form {
    padding: var(--spacing-md) !important;
  }
  
  .form-option,
  .radio-option,
  .checkbox-option {
    padding: var(--spacing-xs) var(--spacing-sm) !important;
    font-size: 0.875rem !important;
    min-height: 44px !important;
  }
}

/* ========== PREVENIR COMPORTAMENTOS ESTRANHOS ========== */

/* Prevenir zoom em iOS */
input,
textarea,
select {
  font-size: 16px !important;
}

/* Prevenir double-tap zoom */
button,
.btn,
.form-option {
  touch-action: manipulation !important;
}

/* Prevenir crescimento de elementos */
* {
  box-sizing: border-box !important;
}

/* Smooth transitions */
.form-option,
.form-button,
.btn {
  will-change: transform !important;
  backface-visibility: hidden !important;
  -webkit-font-smoothing: antialiased !important;
}

/* ========== ACESSIBILIDADE ========== */

/* Focus visível */
.form-option:focus,
.form-button:focus,
input:focus,
textarea:focus {
  outline: 2px solid var(--color-primary) !important;
  outline-offset: 2px !important;
}

/* Garantir contraste mínimo */
::selection {
  background-color: var(--color-primary) !important;
  color: #ffffff !important;
}

/* ========== PERFORMANCE ========== */

/* GPU acceleration */
.form-option,
.form-button {
  transform: translateZ(0) !important;
}

/* Reduzir repaints */
.form-progressive {
  contain: layout style paint !important;
}