/* Reset básico e fontes */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    height: 100%; /* Necessário para min-height do body funcionar corretamente */
}

body {
    font-family: 'Poppins', sans-serif;
    /* 4) Imagem de fundo */
    background-image: url('calc-finan-veiculos.jpg'); /* Certifique-se que o arquivo está na pasta */
    background-size: cover; /* Cobre toda a área */
    background-position: center center; /* Centraliza a imagem */
    background-repeat: no-repeat; /* Não repetir a imagem */
    background-attachment: fixed; /* Mantém a imagem fixa durante o scroll */

    display: flex; /* Permite alinhar header/main/footer */
    flex-direction: column; /* Empilha os itens verticalmente */
    min-height: 100vh; /* Garante que o body ocupe pelo menos toda a altura da tela */
    color: #333; /* Cor de texto padrão */
}

/* --- 6) Estilos do Header --- */
.header-compact {
    background-color: #0056b3; /* Azul - ajuste a cor se necessário */
    color: white;
    width: 100%;
    padding: 10px 0; /* Espaçamento interno vertical */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    z-index: 10; /* Para ficar acima de outros elementos se necessário */
}

.header-compact-content {
    display: flex;
    align-items: center; /* Alinha verticalmente logo e texto */
    justify-content: center; /* Centraliza o conteúdo */
    gap: 15px; /* Espaço entre logo e texto */
    max-width: 1100px; /* Largura máxima do conteúdo */
    margin: 0 auto; /* Centraliza na página */
    padding: 0 20px; /* Espaçamento nas laterais */
    text-align: center; /* Centraliza o texto dentro do container */
}

.header-logo {
    max-height: 40px; /* Altura máxima do logo */
    width: auto; /* Largura automática */
}

.header-compact-text {
   /* O text-align: center no pai já centraliza */
}

.header-compact-text h1 {
    color: white; /* Cor da primeira linha */
    margin: 0;
    font-size: 1.6em; /* Tamanho da fonte do título principal */
    font-weight: 600;
    line-height: 1.2;
}

.header-compact-text p {
    color: yellow; /* Cor da segunda linha */
    margin: 0;
    font-size: 0.9em; /* Tamanho da fonte do subtítulo */
    font-weight: 400;
}

/* --- Conteúdo Principal --- */
.main-content {
    flex-grow: 1; /* Faz o conteúdo principal ocupar o espaço restante entre header e footer */
    display: flex;
    justify-content: center;
    align-items: center; /* Centraliza o container da calculadora verticalmente */
    padding: 30px 20px; /* Espaçamento acima/abaixo e nas laterais */
}


/* --- Container da Calculadora --- */
.calculator-container {
    /* 5) Efeito Vidro */
    background-color: rgba(255, 255, 255, 0.7); /* Fundo branco semi-transparente */
    backdrop-filter: blur(10px); /* Intensidade do desfoque */
    -webkit-backdrop-filter: blur(10px); /* Para compatibilidade com Safari */
    border: 1px solid rgba(255, 255, 255, 0.15); /* Borda sutil */

    padding: 0; /* Removido padding aqui, será adicionado internamente */
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    max-width: 550px; /* Levemente maior para acomodar padding interno */
    width: 100%;
    text-align: center;
    overflow: hidden; /* Importante para o border-radius funcionar com o backdrop-filter e title-bar */
}

/* Barra de Título da Calculadora (Interna) */
.title-bar {
    background: linear-gradient(to right, #007bff, #0056b3);
    padding: 20px 30px;
}

.title-bar h1 {
    color: #ffffff;
    font-size: 1.7em;
    margin: 0;
    font-weight: 600;
}

.title-bar .subtitle {
    color: #e0e0e0;
    font-size: 0.9em;
    margin-top: 5px;
    font-weight: 400;
}

/* Conteúdo do formulário e resultados (com padding interno) */
#loan-form,
.result-display,
.error-display,
.simulation-details-box,
.ad-placeholder { /* Inclui o placeholder do anúncio no padding */
    padding-left: 40px;
    padding-right: 40px;
}

#loan-form {
    padding-top: 30px; /* Espaço abaixo do title-bar */
    padding-bottom: 10px; /* Espaço antes do botão */
}

/* Grupos de formulário */
.form-group {
    margin-bottom: 20px;
    text-align: left;
}

.form-group-inline {
    display: flex;
    gap: 15px;
    align-items: flex-end;
}

.form-group-inline > div {
    flex: 1;
}

/* Labels */
label {
    display: block;
    margin-bottom: 8px;
    color: #333; /* Cor mais escura para melhor contraste no fundo claro */
    font-weight: 600;
    font-size: 0.9em;
}

/* Inputs e Selects */
input[type="number"],
input[type="text"],
select {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #bbb; /* Borda levemente mais escura */
    border-radius: 8px;
    font-size: 1em;
    font-family: 'Poppins', sans-serif;
    background-color: rgba(255, 255, 255, 0.85); /* Fundo do input levemente transparente */
    color: #333;
    transition: border-color 0.3s ease, background-color 0.3s ease;
}

input[type="number"]:focus,
input[type="text"]:focus,
select:focus {
    border-color: #007bff;
    background-color: rgba(255, 255, 255, 1); /* Totalmente opaco no foco */
    outline: none;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.3);
}

input::placeholder { /* Estilo do placeholder */
    color: #777;
    opacity: 1;
}

/* Remove as setas de incremento/decremento */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none; margin: 0;
}
input[type=number] { -moz-appearance: textfield; }


/* Botão de Calcular */
.calculate-button {
    width: 100%; /* Ocupa a largura do container do form */
    margin: 15px 0 30px 0; /* Margens verticais (top/bottom), sem horizontal */
    padding: 15px;
    background: linear-gradient(to right, #007bff, #0056b3);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 1.1em;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.1s ease;
}

.calculate-button:hover {
    background: linear-gradient(to right, #0056b3, #003d80);
}

.calculate-button:active {
    transform: scale(0.98);
}

/* Área de Resultado Principal */
.result-display {
    margin-top: 0;
    margin-bottom: 20px;
    /* background-color: rgba(233, 245, 255, 0.85); */ /* Removido para usar o estilo padrão */
    /* color: #004085; */ /* Removido para usar o estilo padrão */
    padding-top: 20px;
    padding-bottom: 20px;
    border-radius: 8px;
    border: 1px solid #b8daff; /* Borda padrão */
    background-color: rgba(233, 245, 255, 0.85); /* BG padrão */
    color: #004085; /* Cor padrão */
    text-align: center;
    font-size: 1.1em;
    font-weight: 600;
    animation: fadeIn 0.5s ease;
}
/* Estilo para mensagem especial (veículo pago) */
.result-display.special-message {
     background-color: rgba(212, 237, 218, 0.85); /* Verde claro transparente */
     border-color: #c3e6cb;
     color: #155724;
}


.result-display strong {
    font-size: 1.3em;
    color: #005cbf; /* Cor do destaque padrão */
}
.result-display.special-message strong {
    color: #0f5132; /* Cor do destaque verde */
}

/* Área de Erro */
.error-display {
     margin-top: 0;
     margin-bottom: 20px;
    background-color: rgba(248, 215, 218, 0.9); /* Fundo com transparência */
    color: #721c24;
    padding-top: 15px;
    padding-bottom: 15px;
    border-radius: 8px;
    border: 1px solid #f5c6cb;
    text-align: center;
    font-size: 0.95em;
    animation: fadeIn 0.5s ease;
}

/* Caixa de Detalhes da Simulação */
.simulation-details-box {
    background-color: rgba(248, 249, 250, 0.8); /* Fundo com transparência */
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding-top: 20px;
    padding-bottom: 20px;
    margin-top: 0;
    margin-bottom: 30px;
    text-align: left;
    animation: fadeIn 0.5s ease;
}

.simulation-details-box h2 {
    font-size: 1.3em;
    color: #333;
    margin-bottom: 15px;
    text-align: center;
    font-weight: 600;
}

.simulation-details-box p {
    margin-bottom: 10px;
    color: #444; /* Texto um pouco mais escuro */
    font-size: 0.95em;
    line-height: 1.5;
}

.simulation-details-box p strong {
    color: #222;
    min-width: 190px; /* Aumentado para acomodar texto mais longo */
    display: inline-block;
    font-weight: 600;
    padding-right: 5px; /* Pequeno espaço antes do valor */
}

.simulation-details-box .disclaimer {
    margin-top: 15px;
    font-size: 0.85em;
    color: #555;
    text-align: center;
    border-top: 1px dashed #bbb;
    padding-top: 10px;
}

/* Placeholder do Anúncio */
.ad-placeholder {
    padding-top: 20px;
    padding-bottom: 20px;
    margin-top: 10px; /* Espaço acima do placeholder */
    min-height: 90px; /* Altura mínima para o espaço do anúncio */
    display: flex;
    align-items: center;
    justify-content: center;
}


/* --- 7) Estilos do Footer --- */
.tool-footer {
    background-color: #333; /* Cinza escuro */
    color: #ccc; /* Cor do texto clara */
    text-align: center; /* Centraliza todo o texto */
    padding: 20px;
    width: 100%;
    margin-top: auto; /* Empurra para baixo se o conteúdo for curto */
    font-size: 0.9em;
}

.tool-footer-links {
    margin-bottom: 10px;
}

.tool-footer-links a {
    color: #eee; /* Cor dos links */
    text-decoration: none;
    margin: 0 8px; /* Espaçamento entre os links */
    transition: color 0.2s ease;
}

.tool-footer-links a:hover {
    color: #fff; /* Cor ao passar o mouse */
    text-decoration: underline;
}


/* Animação Fade In */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- Responsividade --- */
@media (max-width: 768px) {
     .header-compact-content {
         flex-direction: column; /* Empilha logo e texto */
         gap: 5px;
     }
      .header-compact-text h1 {
        font-size: 1.4em;
    }
    .header-compact-text p {
        font-size: 0.8em;
    }

    .main-content {
        padding: 20px 15px;
    }

    .calculator-container {
        max-width: 95%; /* Permite ocupar mais a tela */
        backdrop-filter: blur(8px); /* Reduz blur em mobile se necessário */
       -webkit-backdrop-filter: blur(8px);
    }

     .title-bar {
        padding: 15px 20px;
    }
     .title-bar h1 {
        font-size: 1.4em;
    }
    .title-bar .subtitle {
        font-size: 0.8em;
    }

     #loan-form,
     .result-display,
     .error-display,
     .simulation-details-box,
     .ad-placeholder {
        padding-left: 20px; /* Reduz padding interno */
        padding-right: 20px;
     }

     #loan-form {
         padding-top: 20px;
     }

    .form-group-inline {
        flex-direction: column;
        gap: 0;
        align-items: stretch;
    }

     .form-group-inline > div {
        width: 100%;
        margin-bottom: 15px;
    }
     .form-group-inline > div:last-child { margin-bottom: 0; }


    input[type="number"],
    input[type="text"],
    select,
    .calculate-button {
        font-size: 0.95em;
        padding: 10px 12px;
    }

    .calculate-button {
         padding: 12px;
         margin-bottom: 25px;
    }

    .result-display {
        font-size: 1em;
        padding: 15px;
         margin-bottom: 15px;
    }
     .result-display strong { font-size: 1.2em; }
    .error-display { margin-bottom: 15px; }

     .simulation-details-box {
        padding: 15px;
        margin-bottom: 25px;
    }
     .simulation-details-box h2 { font-size: 1.2em; margin-bottom: 12px; }
      .simulation-details-box p { font-size: 0.9em; margin-bottom: 8px; }
      .simulation-details-box p strong { min-width: 150px; /* Ajuste responsivo */ }
       .simulation-details-box .disclaimer { font-size: 0.8em; margin-top: 12px; }

      .ad-placeholder {
          min-height: 60px;
      }

      .tool-footer {
          font-size: 0.8em;
          padding: 15px;
      }
      .tool-footer-links a {
          margin: 0 5px;
      }
}