/*
  CSS do Componente SearchFilter
  Ele define uma cor de tema padrão e permite que ela seja
  sobrescrita por classes de contexto (market-*).
*/

/* Container principal para centralização e espaçamento */
.search-filter-container {
    padding-top: 20vh;
    padding-bottom: 1vh;
    display: flex;
    justify-content: center;
    
    /* --- LÓGICA DO TEMA --- */
    /* 1. Define uma cor de tema padrão para o componente */
    --search-theme-color: var(--color-primary); 
    --search-theme-color-hover: #004494; /* Um tom mais escuro para o hover padrão */
}

.search-filter-container.index {
    padding-top: 1vh;
}

/* 2. Classes de Tema: Cada classe de mercado sobrescreve a variável de tema */
.search-filter-container.market-fiis {
    --search-theme-color: var(--color-fiis);
    --search-theme-color-hover: #9b133b; /* Versão mais escura de --color-fiis */
}
.search-filter-container.market-acoes {
    --search-theme-color: var(--color-acoes);
    --search-theme-color-hover: #4c309b; /* Versão mais escura de --color-acoes */
}
.search-filter-container.market-bdrs {
    --search-theme-color: var(--color-bdrs);
    --search-theme-color-hover: #a956e4; /* Versão mais escura de --color-acoes */
}
.search-filter-container.market-etfs {
    --search-theme-color: var(--color-etfs);
    --search-theme-color-hover: #0083ca; /* Versão mais escura de --color-acoes */
}
.search-filter-container.market-forex {
    --search-theme-color: var(--color-forex);
    --search-theme-color-hover: #333333; /* Versão mais escura de --color-forex */
}
.search-filter-container.market-fiagros {
    --search-theme-color: var(--color-fiagros);
    --search-theme-color-hover: #095859; /* Versão mais escura de --color-fiagros */
}
.search-filter-container.market-falkcapital {
    --search-theme-color: var(--color-primary);
    --search-theme-color-hover: #2F7CE0;
}

/* Formulário usando Flexbox para alinhar os itens */
.search-form {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 600px;
}

/* Wrapper para o input e o ícone */
.search-input-wrapper {
    position: relative;
    flex-grow: 1;
}

.search-icon {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #888;
}

/* Estilo do campo de busca */
.search-input {
    width: 100%;
    padding: 12px 15px 12px 45px;
    font-size: 1em;
    border: 1px solid #ccc;    
    border-radius: 8px 0 0 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    transition: border-color 0.3s, box-shadow 0.3s;
    outline: none;
}

/* Efeito de foco para melhor UX */
.search-input:focus {
    /* 3. Usa a variável de tema para a cor da borda e do box-shadow */
    border-color: var(--search-theme-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--search-theme-color) 20%, transparent);
}

.search-loader {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
}

/* Estilo do botão de busca */
.search-button {
    padding: 12px 25px;
    font-size: 1em;
    font-weight: bold;
    color: #fff;
    /* 3. Usa a variável de tema para a cor de fundo e borda */
    background-color: var(--search-theme-color);
    border: 1px solid var(--search-theme-color);
    border-radius: 0 8px 8px 0;
    cursor: pointer;
    transition: background-color 0.3s;
}

.search-button:hover {
    /* 3. Usa a variável de tema para a cor do hover */
    background-color: var(--search-theme-color-hover);
}

/* Classe de acessibilidade */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* --- ESTILO PARA A SEÇÃO COMPLETA DE BUSCA NA HOME --- */

.home-search-section {
    padding: 4rem 1rem; /* Espaçamento generoso */
    /* Fundo suave para destacar do resto da página, se for o caso */
    background-color: #f8f9fa; 
}

.home-search-header {
    text-align: center;
    max-width: 650px;
    margin: 0 auto 2rem; /* Centraliza o texto e adiciona margem inferior */
}

/* Título de Impacto */
.home-search-title {
    font-size: 1.5em;
    text-transform: uppercase;
    font-weight: 700;
    color: #333333;
    margin-bottom: 0.75em;
}

/* Subtítulo Claro */
.home-search-subtitle {
    font-size: 1em;
    color: #5e6b78;
    font-weight: 500;
}

/* --- ESTILO DE DESTAQUE DO FORMULÁRIO (market-highlight) --- */

.home-search-section.market-highlight .search-filter-container {
    max-width: 700px; /* Deixa o formulário um pouco mais largo na home */
    margin: 0 auto;
    /* Destaque visual: borda mais espessa ou sombra mais pronunciada */
    box-shadow: 0 10px 30px rgba(47, 124, 224, 0.15); /* Sombra suave azulada */
    border-radius: 8px; /* Mantém o visual clean */
    background-color: #ffffff; /* Fundo branco */
}

/* Ajuste na cor do botão para ser mais chamativo na index */
.home-search-section.market-highlight .search-button {
    background-color: #2F7CE0;
    /* Outras cores do botão */
}