/* =====================================================================
   Caixa de busca do cabeçalho (_CaixaBusca.cshtml): a lupa abre um painel
   logo abaixo do cabeçalho fixo, com as sugestões. Prefixo cb-.
   ===================================================================== */

/* Fica no início de .nav-buttons; o painel se posiciona pelo cabeçalho fixo (.modern-header). */
.cb-busca {
    display: flex;
    align-items: center;
}

.cb-abrir {
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #1e3a5f;
    font-size: 1.05rem;
    cursor: pointer;
    transition: background 0.2s;
}

.cb-abrir:hover,
.cb-abrir[aria-expanded="true"] {
    background: #f1f4f8;
}

.cb-painel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border-top: 1px solid #e6eaf0;
    box-shadow: 0 12px 28px rgba(15, 34, 56, 0.14);
    padding: 0.85rem 0 1rem;
}

.cb-painel[hidden] {
    display: none;
}

.cb-form {
    max-width: 820px;
}

.cb-campos {
    display: flex;
    gap: 0.5rem;
}

.cb-campos input,
.cb-campos select {
    border: 1px solid #d5dbe3;
    border-radius: 10px;
    padding: 0.6rem 0.85rem;
    /* 16px: o iPhone não dá zoom ao tocar no campo */
    font-size: 16px;
    color: #1f2d3d;
    background: #fff;
}

.cb-campos input {
    flex: 1 1 auto;
    min-width: 0;
}

.cb-campos input:focus,
.cb-campos select:focus {
    outline: none;
    border-color: #ff7b54;
    box-shadow: 0 0 0 3px rgba(255, 123, 84, 0.18);
}

.cb-campos select {
    flex: 0 0 190px;
}

.cb-enviar {
    flex: 0 0 auto;
    border: 0;
    border-radius: 10px;
    padding: 0 1rem;
    color: #fff;
    background: #ff7b54;
}

.cb-sugestoes {
    list-style: none;
    margin: 0.6rem 0 0;
    padding: 0;
    border: 1px solid #e6eaf0;
    border-radius: 12px;
    overflow: hidden;
}

.cb-sugestoes[hidden] {
    display: none;
}

.cb-sugestoes a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.9rem;
    color: #1f2d3d;
    text-decoration: none;
    border-top: 1px solid #eef1f5;
}

.cb-sugestoes li:first-child a {
    border-top: 0;
}

.cb-sugestoes a:hover,
.cb-sugestoes li.cb-ativa a {
    background: #fff4ef;
}

.cb-icone {
    flex: 0 0 32px;
    height: 32px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f1f4f8;
    color: #1e3a5f;
    font-size: 0.85rem;
}

.cb-texto {
    min-width: 0;
}

.cb-texto strong {
    display: block;
    font-weight: 600;
    font-size: 0.92rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cb-texto small {
    display: block;
    color: #64748b;
    font-size: 0.78rem;
}

.cb-sugestoes .cb-ver-todos a {
    justify-content: center;
    font-weight: 600;
    font-size: 0.85rem;
    color: #e8603a;
    background: #fafbfd;
}

@media (max-width: 768px) {
    .cb-campos {
        flex-wrap: wrap;
    }

    .cb-campos input {
        flex: 1 1 100%;
    }

    .cb-campos select {
        flex: 1 1 auto;
    }

    /* O painel fica abaixo do cabeçalho e rola sozinho se as sugestões não couberem. */
    .cb-painel {
        max-height: calc(100vh - 70px);
        overflow-y: auto;
    }
}

/* Com a lupa, o cabeçalho das páginas com mais links (ex.: resultado do concurso) não cabia entre 769 e 1199 px:
   nessas larguras os links do menu ficam mais próximos. */
@media (min-width: 769px) and (max-width: 1199px) {
    .modern-header .nav-menu {
        gap: 1rem;
    }
}

/* Celular: o cabeçalho (logo, Fazer Login, Cadastrar e menu) já ocupava a largura toda. Para a lupa caber, nessas
   telas ela, os espaços entre os botões e o logo ficam um pouco menores. */
@media (max-width: 480px) {
    .cb-abrir {
        width: 34px;
        height: 34px;
        font-size: 0.95rem;
    }

    .modern-header .nav-buttons {
        gap: 4px;
    }

    .modern-header .mobile-menu-toggle {
        padding: 8px 4px;
    }

    .modern-header .img-logo {
        max-width: 125px;
        height: auto;
    }
}