/* Container Principal usando Flexbox */
.filter-container {
    background-color: #1e1e1e;
    border: 1px solid #333333;
    border-radius: 8px;
    padding: 5px 10px 5px 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-end; /* Alinha os campos por baixo por causa das labels */
    margin: 24px auto;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: #121212;
    color: #ffffff;
}

/* Grupos de filtros individuais */
.filter-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.filter-group label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #aaaaaa;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Estilização base para TODOS os campos (mantém o alinhamento) */
.filter-container select,
.filter-container input {
    height: 42px;
    border-radius: 6px;
    font-size: 0.95rem;
    padding: 0 12px;
    outline: none;
    transition: all 0.25s ease;
    width: 100%;
}

/* ── ESTILIZAÇÃO DO SELECT COM INDICAÇÃO VISUAL EXPLÍCITA ── */
.filter-container select {
    background-color: #252526;          
    color: #e2e8f0;                     
    cursor: pointer;
    font-weight: 500;
    
    /* 1. Remove os padrões do sistema operacional */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    
    /* 2. Cria uma borda lateral esquerda para destacar o campo dos demais */
    border: 1px solid #4a5568;
    border-left: 4px solid #3b82f6; /* Barra azul na esquerda indica campo de ação */

    padding-right: 10px; /* Garante que o texto longo não suma atrás da seta */
    background-repeat: no-repeat;
    background-position: right 1px center;
}

/* Efeito de Hover (passar o mouse) */
.filter-container select:hover {
    background-color: #2d2d30;
    border-color: #718096;
    border-left-color: #2563eb; /* Escurece a barra azul */
}

/* Efeito de Foco e Clique */
.filter-container select:focus {
    border-color: #60a5fa;
    border-left-color: #60a5fa;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.25);
    background-color: #1e1e1f;
    
    /* 4. Troca a seta para cima quando o menu está focado/aberto */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://w3.org' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2360a5fa' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='18 15 12 9 6 15'></polyline></svg>");
}


/* Distribuição de espaço responsivo no Desktop */
.section-group {
    flex: 2; /* Ocupa um espaço médio */
    min-width: 200px;
}

.search-group {
    flex: 3; /* Ocupa a maior parte do espaço central */
    min-width: 250px;
}

.order-group {
    flex: 1.5; /* Ocupa o menor espaço alinhado à direita */
    min-width: 180px;
}

/* Estrutura interna do campo de busca com botão embutido */
.search-wrapper {
    position: relative !important;
    display: flex !important;
    align-items: baseline !important;
}

.search-wrapper input {
    padding-right: 46px !important; /* Espaço para o botão interno */
	background-color: #464646 !important;
	color: white !important;
}

.search-wrapper button {
    position: absolute;
    right: 0px;
    height: 42px;
    width: 46px;
    background-color: #3b82f6;
    border: none;
    border-radius: 4px;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s;
}

.search-wrapper button:hover {
    background-color: #2563eb;
}

/* Regras de Responsividade para Telas Menores (Tablets e Celulares) */
@media (max-width: 768px) {
    .filter-container {
        flex-direction: column;
        align-items: stretch; /* Faz os campos ocuparem a largura total */
        gap: 0;
		margin-top: 12px;
    }

    .filter-group {
        width: 100%;
        flex: none; /* Desativa a proporção do flexbox de desktop */
		gap: 0;
    }

	.filter-group label {
		font-size: 0.65rem;
		font-weight: 600;
		color: #aaaaaa;
		text-transform: uppercase;
		letter-spacing: 0.5px;
	}
	
	.filter-container select {
		font-size: 13px;
	}

	.search-wrapper input {
		font-size: 13px;
	}
}