/* main_nav.css - Estilos para a barra de navegação principal (busca e categorias) - NO LUGAR CERTO */

/* Variáveis de cores */
:root {
    --cor-primaria-verde: #28a745;
    --cor-primaria-verde-hover: #218838;
    --cor-secundaria-roxo: #6f42c1; /* Roxo para as categorias */
    --cor-secundaria-roxo-hover: #5a3699; /* Roxo mais escuro no hover */
    --cor-texto-escuro: #343a40;
    --cor-texto-claro: #ffffff;
    --cor-fundo-claro: #f8f9fa; /* Fundo leve para o nav */
    --cor-fundo-branco-puro: #ffffff; /* Branco puro para elementos internos */
    --gap-categorias: 10px; /* Espaçamento entre categorias */
}

/* Contêiner principal da seção de navegação (search + categories) */
.main-nav-section {
    background-color: var(--cor-fundo-claro);
    padding: 15px 20px;
    border-bottom: 1px solid #e9ecef;
    display: flex;
    flex-direction: column; /* Busca e categorias empilhadas verticalmente */
    align-items: center; /* Centraliza horizontalmente os blocos de busca/categorias */
    gap: 15px;
    box-shadow: 0 1px 5px rgba(0,0,0,0.05);
}

/* --- Barra de Busca (Novas Classes e Estilos Refinados) --- */
.search-form-new-pesquisa { /* CLASSE DO FORM */
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 650px;
    border: 1px solid #c0c0c0; /* Borda suave */
    border-radius: 25px;
    overflow: hidden;
    background-color: var(--cor-fundo-branco-puro);
    box-shadow: 0 1px 5px rgba(0,0,0,0.08); /* Sombra mais sutil */
    height: 45px; /* Altura ajustada para mais compacidade */
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.search-form-new-pesquisa:focus-within {
    border-color: var(--cor-primaria-verde);
    box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.25);
}

.search-input-new { /* CLASSE DO INPUT */
    flex-grow: 1;
    border: none; /* REMOVIDO !important: Não é mais necessário seletor forte */
    background-color: transparent; /* REMOVIDO !important */
    padding: 0 18px; /* PADDING HORIZONTAL MAIOR */
    font-size: 1.05em; /* FONTE MAIOR PARA LEGIBILIDADE */
    outline: none; /* REMOVIDO !important */
    color: var(--cor-texto-escuro); /* REMOVIDO !important */
    height: 100%; /* REMOVIDO !important */
}

.search-input-new::placeholder {
    color: #a0a0a0;
}

.search-button-new-pesquisa { /* CLASSE DO BOTÃO */
    background-color: var(--cor-primaria-verde); /* REMOVIDO !important */
    color: var(--cor-texto-claro); /* REMOVIDO !important */
    border: none; /* REMOVIDO !important */
    padding: 0 15px; /* PADDING HORIZONTAL AJUSTADO */
    cursor: pointer;
    font-size: 1em; /* TAMANHO DO BOTÃO / TEXTO INTERNO AJUSTADO (antes 1.1em) */
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease;
    flex-shrink: 0;
    box-shadow: 0 1px 4px rgba(0,0,0,0.1); /* Sombra mais suave para o botão */
    height: 100%; /* REMOVIDO !important */
    display: flex; /* REMOVIDO !important */
    align-items: center; /* REMOVIDO !important */
    justify-content: center; /* REMOVIDO !important */
}

.search-button-new-pesquisa i { /* ESTILO ESPECÍFICO PARA O ÍCONE DA LUPA */
    font-size: 1.1em; /* TAMANHO DA LUPA AJUSTADO (antes 1.2em) */
}

.search-button-new-pesquisa:hover {
    background-color: var(--cor-primaria-verde-hover);
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

/* --- Lista de Categorias (Classes Mantidas e Estilos Conforme Última Versão) --- */
.categories-list-new {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--gap-categorias);
    width: 100%;
}

.category-link-new {
    display: flex;
    align-items: center;
    background-color: var(--cor-fundo-branco-puro);
    color: var(--cor-secundaria-roxo);
    border: 1px solid var(--cor-secundaria-roxo);
    padding: 7px 14px;
    border-radius: 15px;
    font-size: 0.9em;
    font-weight: bold;
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease, border-color 0.3s ease, box-shadow 0.2s ease;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: calc(20% - (var(--gap-categorias) * 4 / 5));
    text-align: center;
    justify-content: center;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.category-link-new:hover {
    background-color: var(--cor-secundaria-roxo);
    color: var(--cor-texto-claro);
    transform: translateY(-2px);
    text-decoration: none;
    border-color: var(--cor-secundaria-roxo);
    box-shadow: 0 3px 8px rgba(0,0,0,0.1);
}


/* --- Media Queries para Responsividade --- */

@media (max-width: 1200px) {
    .category-link-new { flex-basis: calc(20% - var(--gap-categorias)); }
}

@media (max-width: 991.98px) {
    .category-link-new { flex-basis: calc(25% - var(--gap-categorias) * 3 / 4); font-size: 0.88em; }
    .search-form-new-pesquisa { height: 40px; }
    .search-input-new { font-size: 1em; padding: 0 15px; }
    .search-button-new-pesquisa { font-size: 1em; padding: 0 15px; }
    .search-button-new-pesquisa i { font-size: 1em; }
}

@media (max-width: 767.98px) {
    .main-nav-section { padding: 10px 0; gap: 10px; }
    .search-form-new-pesquisa { height: 38px; }
    .search-input-new { padding: 0 12px; font-size: 0.95em; }
    .search-button-new-pesquisa { padding: 0 14px; font-size: 0.95em; }
    .search-button-new-pesquisa i { font-size: 0.95em; }
    .categories-list-new { gap: 8px; padding-left: 10px; padding-right: 10px; }
    .category-link-new { padding: 6px 12px; font-size: 0.85em; flex-basis: calc(33.333% - var(--gap-categorias) * 2 / 3); }
}

@media (max-width: 575.98px) {
    .categories-list-new { gap: 6px; }
    .category-link-new { padding: 5px 10px; font-size: 0.8em; flex-basis: calc(50% - var(--gap-categorias) / 2); }
    .search-form-new-pesquisa { height: 35px; }
    .search-input-new { font-size: 0.9em; padding: 0 10px; }
    .search-button-new-pesquisa { font-size: 0.9em; padding: 0 10px; }
    .search-button-new-pesquisa i { font-size: 0.9em; }
}

@media (max-width: 420px) {
    .main-nav-section { padding: 8px 0; gap: 8px; }
    .categories-list-new { gap: 5px; }
    .category-link-new { padding: 4px 8px; font-size: 0.75em; flex-basis: 100%; }
}