/* style/fipe.css */

/* --- Formulário de Seleção --- */
.fipe-form-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 30px; /* Espaço entre o formulário e os resultados */
}

.fipe-input-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--cor-texto-paragrafo);
}

.fipe-form-container select {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid var(--cor-borda-card);
    border-radius: 8px;
    font-size: 1rem;
    font-family: var(--fonte-principal);
    background-color: #f9fafb;
    cursor: pointer;
    appearance: none; /* Remove a seta padrão */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1em;
}

.fipe-form-container select:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

/* --- Área Geral de Resultados --- */
#fipe-resultados {
    display: grid;
    grid-template-columns: 1fr; /* Uma coluna por padrão */
    gap: 25px;
    border-top: 1px solid var(--cor-borda-card);
    padding-top: 20px; /* Espaço entre o topo e os resultados */
    margin-top: -10px; /* Espaço entre o formulário e os resultados */
}

.resultado-card {
    background-color: var(--cor-fundo);
    border: 1px solid var(--cor-borda-card);
    border-radius: 12px;
    padding: 20px;
}

/* --- Ficha do Veículo --- */
#resultado-ficha h3 {
    margin-top: 0;
    margin-bottom: 5px;
    font-size: 1.5rem;
    color: var(--cor-texto-h1); /* Título da ficha */
}
#resultado-ficha .preco-final {
    font-size: 2rem;
    font-weight: 700;
    color: var(--cor-primaria);
    margin: 0 0 20px 0;
}
#resultado-ficha ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
#resultado-ficha li {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid #6f6e6e; /* Borda sutil entre os itens */
    font-size: 0.9rem;
}
#resultado-ficha li:last-child {
    border-bottom: none;
}
#resultado-ficha li strong {
    color: var(--cor-texto-h1);
}
#resultado-ficha li span {
    color: var(--cor-texto-paragrafo);
    font-weight: 500;
}

/* --- Gráfico e Histórico --- */
.grafico-container {
    position: relative;
    height: 300px;
    margin-bottom: 20px;
}
#lista-historico-container h4 {
    margin-top: 0;
}
.historico-item {
    display: flex;
    justify-content: space-between;
    padding: 8px;
    border-radius: 6px;
}
.historico-item:nth-child(odd) { /* Linhas alternadas para melhor leitura */
    background-color: var(--cor-fundo-card);
}

/* --- Simulador de Financiamento --- */
#resultado-financiamento h3 {
    text-align: center;
    margin-bottom: 15px; /* Espaço entre o título e o campo de entrada */
}

/* Centraliza e limita a largura do campo de entrada */
#resultado-financiamento .form-group {
    max-width: 350px;
    margin: 0 auto 25px auto;
    text-align: center; /* Centraliza o conteúdo dentro do grupo */
}

/* Container principal dos detalhes financeiros */
.financiamento-detalhes {
    max-width: 450px;
    margin: 0 auto; /* Centraliza o container na página */
    border: 1px solid var(--cor-borda-card);
    border-radius: 8px;
    padding: 10px 20px;
}

/* Transforma cada <p> em uma linha com duas colunas */
.financiamento-detalhes p {
    display: flex;
    justify-content: space-between; /* Alinha o texto à esquerda e o valor à direita */
    align-items: center;
    padding: 8px 0;
    margin: 0;
}

/* Estilo para os valores numéricos */
.financiamento-detalhes span,
.financiamento-detalhes strong {
    font-weight: 600;
}

/* Estilo para a parcela final, dando mais destaque */
.financiamento-detalhes .parcela-final {
    font-size: 1.3rem;
    padding: 15px 0;
    color: var(--cor-primaria);
    font-weight: 700;
}

.financiamento-detalhes .aviso-financiamento {
    display: block; 
    text-align: center;
    margin-top: -10px;
    padding-top: 10px;
}

/* --- TEMA ESCURO --- */
body.dark-mode .fipe-form-container select {
    background-color: #2d3748;
    border-color: #4a5568;
    color: #e2e8f0;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23e2e8f0' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}
body.dark-mode .fipe-input-group label {
    /* Cor do texto do rótulo */
    color: #cfcfcf;
}
body.dark-mode .resultado-card {
    background-color: #1a202c;
    border-color: #4a5568;
}
body.dark-mode .historico-item:nth-child(odd) {
    background-color: #005eff;
}

body.dark-mode .financiamento-detalhes {
    /* Fundo escuro para a caixa interna, igual ao da página, para criar contraste */
    background-color: #1a202c; 
    /* Borda um pouco mais clara para definir a caixa */
    border-color: #4a5568; 
}

body.dark-mode #resultado-ficha li strong {
    /* Cor clara para os títulos da lista (Marca, Ano, etc.) */
    color: #cbccce; 
}

body.dark-mode #resultado-ficha li span {
    /* Cor um pouco mais suave para os valores (BYD, 2024, etc.) */
    color: #cbd5e0;
}

body.dark-mode #resultado-ficha h3 {
    /* Cor um pouco mais suave para os valores (BYD, 2024, etc.) */
    color: #ffffff;
}

/* --- RESPONSIVIDADE --- */
@media (min-width: 900px) {
    #fipe-resultados {
        /* Em telas grandes, coloca a ficha e o gráfico lado a lado */
        grid-template-columns: 1fr 1fr;
    }
    #resultado-financiamento {
        /* O simulador ocupa a largura toda */
        grid-column: 1 / -1;
    }
}

/* --- AJUSTES DE RESPONSIVIDADE PARA TELAS PEQUENAS --- */
@media (max-width: 480px) {
    /* Ajusta o layout para telas pequenas */
    /* Esta regra remove o layout de grid em telas menores */
    #fipe-resultados {
        display: block; /* 'block' é o valor padrão para um <div>, ele desativa o 'grid' */
    }
    .financiamento-detalhes {
        border: none; /* Remove a borda, como você pediu */
        padding: 0;   /* Remove o espaçamento interno para economizar espaço */
    }

}