/* Topo "Compacto" (Painel → Layout → Tema → Topo).
   Junta cidade e busca numa peça só, mostra as buscas populares só ao tocar no campo
   e esconde o topo ao rolar para baixo. Tudo escopado em .topo-compacto. */

.topo-compacto {
    transition: transform 0.25s ease;
}

.topo-compacto.topo-oculto {
    transform: translateY(-100%);
}

/* A cidade deixa de ter barra própria: vai para dentro da busca */
.topo-compacto .top-bar {
    display: none !important;
}

.topo-compacto .header-content {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
}

/* ===== BUSCA ===== */
.topo-compacto .search-container {
    position: relative;
}

.topo-compacto .search-wrapper {
    min-height: 52px;
}

.topo-compacto .search-cidade {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: none;
    max-width: 210px;
    padding: 0 14px;
    border: 0;
    border-right: 1.5px solid #e2e8f0;
    background: #f8fafc;
    font-size: 14px;
    font-weight: 600;
    color: #0f172a;
    white-space: nowrap;
    cursor: pointer;
}

.topo-compacto .search-cidade svg {
    width: 18px;
    height: 18px;
    flex: none;
    color: var(--primary, #2d2b52);
}

.topo-compacto .search-cidade span {
    overflow: hidden;
    text-overflow: ellipsis;
}

.topo-compacto .search-cidade:hover {
    background: #f1f5f9;
}

/* Buscas populares: só ao tocar no campo, enquanto ele está vazio */
.topo-compacto .quick-suggestions {
    display: none !important;
}

.topo-compacto .search-container:focus-within:has(.search-input:placeholder-shown) .quick-suggestions {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 8px);
    z-index: 10003;
    padding: 12px 14px;
    background: #fff;
    border: 1.5px solid #cbd5e1;
    border-radius: 12px;
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.14);
}

.topo-compacto .quick-chip {
    min-height: 40px;
}

/* Pino de cidade da linha do logo (só celular) */
.topo-compacto .topo-pino {
    display: none;
}

@media (max-width: 991.98px) {
    .topo-compacto .search-cidade {
        display: none;
    }

    .topo-compacto .topo-pino {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        border: 1.5px solid #cbd5e1;
        border-radius: 12px;
        background: #fff;
        color: var(--primary, #2d2b52);
    }

    .topo-compacto .topo-pino svg {
        width: 22px;
        height: 22px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .topo-compacto {
        transition: none;
    }
}

/* ===== ALTURA ===== */
.topo-compacto .header-logo .logo-img {
    max-height: 48px !important;
}

.topo-compacto .search-cidade {
    max-width: 250px;
}

.topo-compacto .nav-categories-container {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

.topo-compacto .nav-categories-btn,
.topo-compacto .nav-btn {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

@media (max-width: 991.98px) {
    .topo-compacto .header-logo .logo-img {
        max-height: 32px !important;
    }

    .topo-compacto .header-content {
        gap: 8px !important;
    }
}