/* ==========================================================
   USER.CSS - GUIA.ZONA-LESTE.COM (VERSÃO FINAL SINCRONIZADA)
   Ajuste: Alinhamento Cirúrgico Menu + Busca
   ========================================================== */

/* 1. IMPORTAÇÃO DA FONTE */
@import url('https://fonts.googleapis.com/css2?family=Bungee&display=swap');

/* 2. ESTRUTURA DO CABEÇALHO */
body header.header {
    background-color: silver !important;
    background-image: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 6px 0 !important;
    gap: 0px !important;
    border-bottom: 2px solid #8e6d62 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* 3. CENTRALIZAÇÃO DA MARCA */
body .header .container-header, 
body .header .grid-child, 
body .navbar-brand {
    display: flex !important;
    justify-content: center !important; 
    align-items: center !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

/* 4. LOGO E TÍTULO */
body .navbar-brand a.brand-logo {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 15px !important;
    text-decoration: none !important;
}

/* ✅ TÍTULO COM EFEITO ALTO RELEVO */
body .navbar-brand a.brand-logo::after {
    content: "Guia da Zona Leste" !important;
    display: block !important;
    color: white !important;
    font-family: 'Bungee', sans-serif !important;
    font-size: 2.2rem !important;
    line-height: 1 !important;
    letter-spacing: 0.5px !important;
    text-align: center !important;
    text-shadow: 
        1px 1px 0px #fff,               
        -1px -1px 1px rgba(0,0,0,0.2),  
        2px 2px 3px rgba(0,0,0,0.4),    
        0px 0px 5px rgba(255, 215, 0, 0.2) !important;
    white-space: nowrap !important;
    margin: 0 !important;
}

/* Logo */
body .navbar-brand a.brand-logo img {
    max-height: 55px !important;
    width: auto !important;
    order: -1 !important;
    display: block;
    filter: drop-shadow(2px 2px 3px rgba(0,0,0,0.3));
}

/* ========================================
   DESKTOP: MENU + BUSCA (SINCRONIA TOTAL)
   ======================================== */
@media (min-width: 769px) {
    
    body .container-nav {
        display: flex !important;
        flex-direction: row !important;
        /* Alinha os itens pelo CENTRO exato para evitar que um fique mais baixo */
        align-items: center !important; 
        justify-content: center !important;
        gap: 30px !important; 
        width: 100% !important;
        padding: 10px 14px !important;
        margin-top: 15px !important;
    }
    
    body .navbar-custom {
        height: 42.5px !important;
        display: flex !important;
        align-items: center !important;
        background-color: #8e6d62 !important;
        border-radius: 6px !important;
        box-sizing: border-box !important;
        margin: 0 !important;
    }
    
    /* REMOVENDO MARGENS DO MÓDULO DE BUSCA QUE EMPURRAM PARA BAIXO */
    body .container-search,
    body .container-search .mod-finder,
    body .container-search form {
        height: 42.5px !important;
        display: flex !important;
        align-items: center !important;
        margin: 0 !important; /* Zera qualquer margem padrão do formulário */
        padding: 0 !important;
    }

    body .container-search input[type="search"],
    body .container-search input[type="text"],
    body .container-search .js-finder-search-query {
        height: 42.5px !important;
        line-height: 42.5px !important;
        padding: 0 14px !important;
        border-radius: 6px !important;
        border: 1px solid black !important;
        background-color: #EEE9BF !important;
        box-sizing: border-box !important;
        font-size: 15px !important;
        margin: 0 !important;
        vertical-align: middle !important;
    }
}

/* ========================================
   MOBILE E TRADUÇÃO VISUAL
   ======================================== */
@media (max-width: 768px) {
    body .navbar-brand a.brand-logo {
        flex-direction: column !important;
        gap: 10px !important;
    }
    body .navbar-brand a.brand-logo::after {
        font-size: 1.5rem !important;
        white-space: normal !important;
    }
    body .container-nav {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
        width: 100% !important;
        padding: 10px !important;
    }
}

/* TRADUÇÃO VISUAL (Fora do media query para pegar em tudo) */
#mod-finder-searchword123::placeholder,
.js-finder-search-query::placeholder {
    color: transparent !important;
}

.js-finder-search-query.form-control {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="40"><text x="10" y="25" fill="grey" font-family="Arial" font-size="14">Pesquisar...</text></svg>') !important;
    background-repeat: no-repeat !important;
    background-position: left center !important;
}

.js-finder-search-query:focus, 
.js-finder-search-query:not(:placeholder-shown) {
    background-image: none !important;
}