/* ==========================================================================
   ESTILOS ESPECÍFICOS PARA CALCULADORAS
   ========================================================================== */

/* ===== ESTILOS PARA CALCULADORA PRIMEIRO MILHÃO (FORMULÁRIO E LAYOUT) ===== */
.calculator-form-container {
  background-color: var(--background-white);
  padding: var(--spacing-lg);
  border-radius: 15px;
  box-shadow: var(--box-shadow-medium);
  margin-bottom: var(--spacing-lg);
}

@media (min-width: 1024px) {
  .calculator-grid-inputs {
    grid-template-columns: 1fr 1fr; /* DUAS colunas (desktop) */
  }
}

@media (min-width: 1024px) { 
  .pergunta-1 { grid-column: 1; grid-row: 1; }
  .pergunta-2 { grid-column: 1; grid-row: 2; }
  .pergunta-3 { grid-column: 1; grid-row: 3; }
  .pergunta-4 { grid-column: 1; grid-row: 4; }
  .pergunta-5 { grid-column: 2; grid-row: 1; }
  .pergunta-6 { 
    grid-column: 2; 
    grid-row: 2 / span 3; 
    align-self: start; 
  }
}

.calculator-results-wrapper { 
  display: none; /* Alterado para none para ocultar inicialmente */
  margin-top: var(--spacing-xl);
  padding-top: var(--spacing-lg);
  border-top: 2px solid var(--primary-green);
}

.calculator-results-wrapper h3 { 
  color: var(--primary-green-dark);
  font-size: 1.75rem; 
  margin-bottom: var(--spacing-lg);
  position: relative;
}
.calculator-results-wrapper h3::after { 
  content: '';
  position: absolute;
  bottom: calc(-1 * var(--spacing-sm) / 2);
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 3px;
  background-color: var(--accent-green);
  border-radius: 3px;
}

.calculator-results { 
  background-color: var(--accent-green-xlight); 
  border-radius: 10px; 
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
  box-shadow: var(--box-shadow-light); 
}

.resultado-status {
  margin-bottom: var(--spacing-md);
  font-size: 1.1rem;
  text-align: center;
  line-height: 1.7;
}
.resultado-status .sucesso {
  color: var(--cor-sucesso);
  font-weight: bold;
}
.resultado-status .falha {
  color: var(--cor-erro);
  font-weight: bold;
}

.resultado-valores {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}
.resultado-item {
  font-size: 1rem;
  color: var(--text-dark);
}
.resultado-item .highlight { 
  font-weight: bold;
  color: var(--primary-green);
  font-size: 1.1rem;
}

.calculator-charts-container { 
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-md); 
  margin-bottom: var(--spacing-lg);
}
 
@media (max-width: 1023px) {
  .calculator-charts-container {
    grid-template-columns: 1fr; 
  }
  .calculator-charts-container .chart-box:first-child {
    margin-bottom: var(--spacing-lg); 
  }
  .calculator-charts-container .chart-box { width: 100%; }
  .calculator-charts-container .chart-box canvas {
      max-width: 100% !important; 
      height: auto !important; 
      box-sizing: border-box; 
  }
}
@media (min-width: 992px) { 
  .calculator-charts-container {
    grid-template-columns: 2fr 1fr;
  }
}

.chart-box { 
  background-color: var(--background-white);
  border-radius: 10px;
  padding: var(--spacing-md);
  box-shadow: var(--box-shadow-light);
  height: 380px; 
  display: flex;
  flex-direction: column;
}
.chart-box h4 { 
  font-size: 1.25rem;
  color: var(--primary-green-dark);
  margin-bottom: var(--spacing-sm);
  text-align: center;
}
.chart-box canvas {
  flex-grow: 1; 
  max-height: 300px; 
}

.calculator-alternatives { 
  margin-top: var(--spacing-lg);
}
.calculator-alternatives h4 { 
    color: var(--primary-green-dark);
    font-size: 1.5rem;
    margin-bottom: var(--spacing-md);
}

.alternatives-grid { 
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-md);
}
@media (min-width: 768px) {
  .alternatives-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
}

.alternative-card { 
  background-color: var(--background-light);
  border-radius: 10px;
  padding: var(--spacing-md);
  box-shadow: var(--box-shadow-light);
  border: 1px solid var(--border-color);
}
.alternative-card h5 { 
  color: var(--accent-green);
  font-size: 1.15rem;
  margin-bottom: var(--spacing-sm);
}
.alternative-card p { 
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-secondary);
}
.alternative-card p strong { color: var(--text-dark); }
.alternative-card .highlight {
    font-weight: bold;
    color: var(--primary-green);
}

.bloco-pergunta-unico {
    background-color: var(--background-white, #fff);
    padding: var(--spacing-md, 1.5rem); 
    border: 1px solid var(--border-color, #e9ecef);
    border-radius: var(--border-radius-lg, 12px); 
    box-shadow: var(--box-shadow-card);
    margin-bottom: var(--spacing-md, 1rem); 
}
.bloco-pergunta-unico .form-label { 
    margin-bottom: var(--spacing-md, 1.5rem); 
    font-size: 1.1rem; 
}
.radio-option {
    display: flex;
    align-items: center; 
    padding: var(--spacing-sm, 0.75rem) 0; 
    transition: all 0.3s ease-in-out;
    cursor: pointer;
}
.radio-option:hover { background-color: var(--background-light, #f8f9fa); }
.radio-option.selected-radio-option:hover { background-color: var(--accent-green-xlight, #e8f5e9); }
.bloco-pergunta-unico .radio-option + .radio-option {
  margin-top: 0.25rem; 
  padding-top: 0.25rem; 
  border-top: 1px solid var(--border-color, #e9ecef);
}
.radio-option input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 0; height: 0; opacity: 0; position: absolute; margin: 0; padding: 0;
}
.bloco-pergunta-unico .radio-option label::before {
    content: ''; display: inline-block; width: 20px; height: 20px;
    border-radius: 50%; margin-right: 12px; 
    background-color: var(--background-white); 
    transition: all 0.2s ease; vertical-align: middle; 
    border: 2px solid var(--primary-green); 
}
.bloco-pergunta-unico .radio-option input[type="radio"]:checked + label::before {
    background-color: var(--primary-green); 
    border-color: var(--primary-green); 
}
.radio-option label { margin-bottom: 0; font-weight: 500; color: var(--text-dark); }
.radio-option input[type="radio"]:checked + label { font-weight: 600; color: var(--primary-green-dark); }
.bloco-pergunta-unico .radio-option.selected-radio-option {
    background-color: var(--accent-green-xlight, #e6ffed); 
    padding-left: 20px; 
}

/* ==========================================================================
   ESTILOS PARA CALCULADORA DE OBJETIVO FINANCEIRO (BASEADO NO HTML ORIGINAL)
   ========================================================================== */

.calculator-container { /* Wrapper principal da calculadora original */
  max-width: 800px; 
  margin: 0 auto var(--spacing-lg) auto; 
  background-color: var(--background-white); 
  padding: var(--spacing-lg); 
  border-radius: var(--border-radius-lg); 
  box-shadow: var(--box-shadow-medium); 
}

.calculator-header-original h1 { /* Cabeçalho interno da calculadora */
  color: var(--primary-green-dark);
  font-size: 2.5rem; /* Ajustado para corresponder ao h2 de primeiro-milhao.html */
  font-family: var(--font-heading);
  /* text-align e margin-bottom são controlados por classes utilitárias no HTML */
}

.calculator-header-original p {
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: 1.1rem; /* Ajustado para subtítulo */
  /* text-align e margin-bottom são controlados por classes utilitárias no HTML */
}

.calculator-section { /* Seções internas: Dados Iniciais, Respostas */
  margin-bottom: var(--spacing-lg);
  padding-bottom: var(--spacing-md);
  border-bottom: 1px solid var(--border-color);
}
.calculator-section:last-child {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}

.calculator-section h2 { /* Título de cada seção interna */
  font-size: 1.5em; 
  color: var(--primary-green-dark); 
  margin-bottom: var(--spacing-md);
  font-family: var(--font-heading);
}

/* Grid dos inputs para Calculadora Objetivo Financeiro, 
   agora adaptado para funcionar se o card principal for .calculator-form-container 
   OU .calculator-container (para manter retrocompatibilidade se necessário) */
.calculator-container .form-grid,
.calculator-form-container .form-grid { 
  display: grid;
  grid-template-columns: 1fr; 
  gap: var(--spacing-md); 
}

@media (min-width: 768px) { 
  .calculator-container .form-grid,
  .calculator-form-container .form-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.calculator-container .form-group,
.calculator-form-container .form-group { /* Aplicar a todos os form-groups dentro de ambos os tipos de card */
  display: flex;
  flex-direction: column;
}
.calculator-container .form-group label {
  font-weight: bold; 
  margin-bottom: var(--spacing-xs); 
  color: var(--text-dark); 
  font-family: var(--font-body);
}

.calculator-container .form-group input[type="text"],
.calculator-form-container .form-group input[type="text"] { /* Aplicar a todos os inputs dentro de ambos os tipos de card */
  padding: var(--spacing-sm); 
  border: 1px solid var(--border-color); 
  border-radius: var(--border-radius-md); 
  font-size: 1em; 
  width: 100%;
  box-sizing: border-box;
  font-family: var(--font-body);
}
/* Adiciona padding à esquerda para inputs com símbolo R$ */
/* .calculator-container .form-group .input-wrapper.with-symbol-left input[type="text"].form-control,
.calculator-form-container .form-group .input-wrapper.with-symbol-left input[type="text"].form-control {
  padding-left: 48px !important; /* Aumentado e com !important para garantir a aplicação sobre outros estilos potenciais */
} */

/* Estilos para input monetário com símbolo dinâmico na Calculadora Objetivo Financeiro */
.calculator-form-container .form-group .input-wrapper.with-symbol-left .form-control {
    padding-left: var(--spacing-sm); /* Padding base quando o símbolo está oculto */
    position: relative; /* Necessário para z-index funcionar em alguns navegadores se o placeholder persistir */
    z-index: 1; /* Para garantir que o texto do input fique acima de qualquer resquício de placeholder */
}

.calculator-form-container .form-group .input-wrapper.with-symbol-left .input-symbol {
    display: none; /* Símbolo oculto por padrão */
    position: absolute;
    left: var(--spacing-sm); 
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
    pointer-events: none; 
    line-height: 1; 
    z-index: 0; /* Símbolo atrás do input text/placeholder */
}

.calculator-form-container .form-group .input-wrapper.with-symbol-left.show-symbol .input-symbol {
    display: inline-block; /* Mostra o símbolo */
}

.calculator-form-container .form-group .input-wrapper.with-symbol-left.show-symbol .form-control {
    padding-left: calc(var(--spacing-sm) + 20px + var(--spacing-xs)); /* Padding maior quando o símbolo está visível. Ajuste o "20px" conforme a largura do seu símbolo "R$" */
}


.calculator-container .form-group input[type="text"]:focus,
.calculator-form-container .form-group input[type="text"]:focus {
  outline: none;
  border-color: var(--primary-green); 
  box-shadow: 0 0 0 3px rgba(56, 161, 105, 0.1); 
}

.calculator-container .button-bar,
.calculator-form-container .button-bar { /* Garante que a centralização dos botões funcione em ambos os cards */
  text-align: center;
  margin-top: var(--spacing-lg);
  display: flex;
  gap: var(--spacing-sm);
  justify-content: center;
}

.calculator-container .button-bar button,
.calculator-form-container .button-bar button {
    padding: 12px 25px; 
    font-size: 1em; 
    border-radius: var(--border-radius-md); 
    cursor: pointer;
    transition: background-color 0.3s ease; 
    font-family: var(--font-heading);
    font-weight: 600;
}

.calculator-container .btn-calculate,
.calculator-form-container .btn-calculate {
    background-color: var(--primary-green); 
    color: var(--text-light); 
    border: 1px solid var(--primary-green);
}
.calculator-container .btn-calculate:hover,
.calculator-form-container .btn-calculate:hover {
    background-color: var(--primary-green-dark); 
    border-color: var(--primary-green-dark);
}

.calculator-container .btn-reset,
.calculator-form-container .btn-reset,
.calculator-container .btn-print,
.calculator-form-container .btn-print {
    background-color: var(--background-light); 
    color: var(--text-dark); 
    border: 1px solid var(--border-color); 
}
.calculator-container .btn-reset:hover,
.calculator-form-container .btn-reset:hover,
.calculator-container .btn-print:hover,
.calculator-form-container .btn-print:hover {
    background-color: var(--border-color); 
}

.results-section-custom {  /* Esta classe é específica da objetivo-financeiro, não precisa de .calculator-form-container */
  /* display: none; é controlado pelo JS */
}

.result-block { /* Cada grupo A, B, C, D */
  margin-bottom: var(--spacing-lg);
}

.result-block h3 { /* Títulos dos grupos A, B, C, D */
  color: var(--primary-green-dark);
  margin-bottom: var(--spacing-md);
  border-left: 4px solid var(--primary-green);
  padding-left: var(--spacing-sm);
  font-size: 1.2rem; 
  font-family: var(--font-heading);
}

.result-item { /* Cada linha de resultado dentro de um bloco */
  background-color: var(--accent-green-xlight); 
  border-radius: var(--border-radius-sm); 
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-sm);
}

.result-item p {
  margin: 0;
  font-size: 0.95em;
  line-height: 1.5; 
  font-family: var(--font-body);
}

.result-item .result-value { /* O valor numérico */
  font-weight: bold;
  color: var(--text-dark); 
  margin-left: 8px; 
  font-size: 1.1em; 
}

.result-item .result-label { /* O texto descritivo */
  color: var(--text-secondary); 
}

/* Estilo para campos de formulário inválidos */
.calculator-container .form-group input.is-invalid,
.calculator-form-container .form-group input.is-invalid {
  border-color: var(--cor-erro, #dc3545); /* Usa variável de cor de erro do M5 ou um fallback */
}
.campo-erro { /* Estilo para mensagens de erro */
    color: var(--cor-erro, #dc3545);
    font-size: 0.875em;
    margin-top: var(--spacing-xxs);
}

/* ===== ESTILOS DE IMPRESSÃO ESPECÍFICOS PARA CALCULADORAS ===== */
@media print {
  .calculator-form-container, /* Para Primeiro Milhão */
  .calculator-container /* Para Objetivo Financeiro */ {
    box-shadow: none !important;
    border: none !important;
    padding: 5px 0 !important;
    margin-bottom: 10px !important;
    background-color: #fff !important;
    page-break-inside: avoid !important;
  }
  
  .calculator-grid-inputs, /* Para Primeiro Milhão */
  .calculator-container .form-grid /* Para Objetivo Financeiro */ { 
    gap: 2px !important;
    margin-bottom: 5px !important;
    grid-template-columns: 1fr !important; 
  }

  /* Reseta o posicionamento específico das perguntas para fluxo natural em uma coluna na impressão */
  .pergunta-1, .pergunta-2, .pergunta-3, .pergunta-4, .pergunta-5, .pergunta-6 {
    grid-column: auto !important; grid-row: auto !important; align-self: auto !important;
  }

  /* Pergunta 6 (Tipo de Cálculo) na Calculadora Primeiro Milhão */
  /* .pergunta-6 .bloco-pergunta-unico { display: none !important; } */ /* Removido para usar a regra mais genérica abaixo */

  /* Resultados da Calculadora Primeiro Milhão */
  .calculator-results-wrapper {
    display: block !important; border-top: 1px solid #ccc !important;
    padding-top: 15px !important; margin-top: 20px !important;
  }
  .calculator-results, .alternative-card {
    box-shadow: none !important; border: 1px solid #eee !important;
    background-color: transparent !important; padding: 5px !important; margin-bottom: 5px !important;
  }
  .calculator-results-wrapper > h3.text-center { font-size: 12pt !important; margin-bottom: 5px !important; }
  .calculator-results-wrapper > h3.text-center::after { display: none !important; }
  .resultado-item { font-size: 9pt !important; margin-bottom: 2px !important; }
  .resultado-status { font-size: 9pt !important; margin-bottom: 5px !important; line-height: 1.3; }
  .chart-box h4, .calculator-alternatives > h4.text-center {
    color: #000 !important; font-size: 11pt !important; margin-bottom: 5px !important;
  }
  .calculator-charts-container, .alternatives-grid { page-break-inside: avoid !important; }
  /* .calculator-charts-container { grid-template-columns: 1fr 1fr !important; gap: 10px !important; margin-bottom: 10px !important; } */ /* Removido para usar a regra mais genérica abaixo */
  .chart-box { height: 180px !important; box-shadow: none !important; border: 1px solid #eee !important; padding: 5px !important; }
  .chart-box h4 { font-size: 10pt !important; margin-bottom: 3px !important; }
  .chart-box canvas { max-height: 140px !important; }
  .calculator-alternatives { margin-top: 5px !important; page-break-inside: avoid !important; }
  .alternatives-grid { grid-template-columns: 1fr 1fr 1fr !important; gap: 5px !important; }

  /* Resultados da Calculadora Objetivo Financeiro */
  .calculator-header-original h1 { font-size: 14pt !important; }
  .calculator-header-original p { font-size: 9pt !important; margin-bottom: 10px !important; }
  .calculator-section h2 { font-size: 12pt !important; margin-bottom: 5px !important; }
  
  .results-section-custom h2 { /* Título "Respostas e Alternativas" */
    visibility: visible !important; font-size: 14pt !important; text-align: center !important; margin-bottom: 15px !important;
  }
  .result-block {
    visibility: visible !important; box-shadow: none !important; border: 1px solid #ccc !important;
    padding: 10px !important; page-break-inside: avoid !important; margin-bottom: 10px;
  }
  .result-block h3 {
    font-size: 11pt !important; color: #000 !important; margin-bottom: 0.5rem !important;
    border-left: 2px solid #333 !important; padding-left: 5px !important;
  }
  .result-item {
    background-color: #f9f9f9 !important; padding: 8px !important; margin-bottom: 5px !important;
  }
  .result-item * { visibility: visible !important; }
  .result-item p { font-size: 9pt !important; line-height: 1.4; }
  .result-item .result-label { color: #333 !important; font-size: 8.5pt !important; }
  .result-item .result-value { font-size: 10pt !important; color: #000 !important; }

  /* Termos e Condições (Footer da Calculadora) */
  #footer-calc-placeholder { 
    margin-top: 5px !important; padding-top: 5px !important; 
    border-top: 1px solid #ccc !important; page-break-inside: avoid !important; 
  }
  #footer-calc-placeholder .footer-calculadora-aviso {
    visibility: visible !important; background-color: transparent !important;
    border: none !important; box-shadow: none !important;
    font-size: 8pt !important; line-height: 1.1 !important; padding: 0 !important;
  }
  #footer-calc-placeholder .footer-calculadora-aviso h5,
  #footer-calc-placeholder .footer-calculadora-aviso p,
  #footer-calc-placeholder .footer-calculadora-aviso li { color: #333 !important; }
  #footer-calc-placeholder .footer-calculadora-aviso ol,
  #footer-calc-placeholder .footer-calculadora-aviso ul {
      padding-left: 15px !important; margin-bottom: 2px !important;
  }
  #footer-calc-placeholder .footer-calculadora-aviso h5 { font-size: 9pt !important; margin-bottom: 2px !important; }
  #footer-calc-placeholder .footer-calculadora-aviso p, 
  #footer-calc-placeholder .footer-calculadora-aviso li { font-size: 8pt !important; margin-bottom: 1px !important; }

  /* Adicionando/Ajustando regras de impressão específicas que podem estar faltando ou precisam de ajuste */
  /* Garante que os botões principais da calculadora sejam ocultos */
  .hero-buttons {
      display: none !important;
  }

  /* Ajustes para o container dos gráficos na impressão */
  .calculator-charts-container {
      display: flex !important; /* Garante o flex behavior se não estiver definido */
      flex-direction: column !important; /* Empilha os gráficos na impressão */
      gap: 0 !important; /* Remove o gap na impressão se houver */
      page-break-inside: avoid !important; /* Tenta evitar quebra de página dentro do container */
      margin-top: 10px !important; /* Reduz a margem superior na impressão */
      margin-bottom: 10px !important; /* Adiciona uma margem inferior na impressão */
  }

  /* Ajustes para cada caixa de gráfico na impressão */
  .chart-box {
      width: 100% !important; /* Faz cada gráfico ocupar a largura total */
      flex: none !important; /* Remove a propriedade flex se estiver definida */
      margin-bottom: 10px !important; /* Adiciona um pequeno espaço abaixo de cada gráfico empilhado */
      max-height: 220px !important; /* Limita a altura do gráfico na impressão (reduzido um pouco) */
      padding: 5px !important; /* Reduz o padding interno */
      border: 1px solid #ccc !important; /* Adiciona uma borda sutil */
      box-shadow: none !important; /* Remove sombra na impressão */
  }

  .chart-box h4 { /* Título dentro da caixa do gráfico */
      font-size: 10pt !important;
      margin-bottom: 5px !important;
      color: #000 !important;
  }

  .chart-box canvas {
      max-height: 180px !important; /* Ajusta a altura da tela do gráfico (reduzido um pouco) */
  }

  /* Regra para impressão de perguntas de múltipla escolha (radios/checkboxes) */
  /* Oculta os wrappers de opções de rádio/checkbox e mensagens de erro */
  .form-group .radio-group-wrapper,
  .form-group .bloco-pergunta-unico .radio-group-wrapper, /* Para estrutura de objetivo-financeiro */
  .form-group .checkbox-group-wrapper, /* Se houver checkboxes */
  .form-group .campo-erro { /* Garante que campo-erro seja oculto mesmo se não for filho direto */
      display: none !important;
  }
  /* Oculta o container do botão de compartilhamento na impressão */
  #shareContainer,
  #shareContainerObjetivo {
      display: none !important;
  }

  /* Adicional para resetar estilos do card da pergunta de múltipla escolha na impressão */
  .form-group .bloco-pergunta-unico {
    background-color: transparent !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    margin-bottom: 0 !important;
  }
  /* A regra global em style.css para .form-group[data-valor]::after deve exibir o valor selecionado */
}