/* ===========================================================================
   BUSCA DE VENDA ("BUSQUE SEU IMÓVEL"), PARTIAL busca-venda.php: HOME, LISTAGEM
   E FICHA. HOUZEZ + BOOTSTRAP-SELECT, MEDIDOS NO SITE ANTIGO.
   =========================================================================== */

.busca {
    position: relative;
    padding: 30px 0;
    background-color: #ffffffb0;
}

.busca__coluna {
    position: relative;
    float: left;
    width: 100%;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

.busca__titulo {
    margin: 0 0 30px;
    color: inherit;
    font-family: var(--fonte-titulo);
    font-size: 25px;
    font-weight: 500;
    line-height: 20px;
}

.busca__titulo-icone {
    margin-right: 8px;
}

@media (max-width: 991px) {
    .busca__titulo-icone { display: none; }
}

@media (max-width: 767px) {
    .busca__titulo { font-size: 16px; line-height: 16px; }
}

/* COLUNAS DA GRADE DO BOOTSTRAP 3 NA BUSCA: CELULAR / TABLET (768) / DESKTOP (992). */
.campo {
    position: relative;
    float: left;
    width: 100%;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

/* 13px ENTRE AS LINHAS. OS BOTÕES TAMBÉM: NO CELULAR E NO TABLET ELES FICAM NUMA LINHA PRÓPRIA, E A
   BUSCA AVANÇADA ABRE LOGO EMBAIXO DELES. */
.campo--tipo,
.campo--cidade,
.campo--bairro,
.campo--botao {
    margin-bottom: 13px;
}

.campo--3-6,
.campo--2-6 {
    width: 50%;
}

/* GRADE DA BUSCA. LARGURAS ESCOLHIDAS PARA NENHUM RÓTULO CORTAR (MEDIDOS NA ARIAL, A FONTE QUE O
   NAVEGADOR USA NO LUGAR DA ROBOTO, QUE NÃO É CARREGADA):
   - TABLET: OS DOIS BOTÕES DIVIDEM A LINHA (NO SITE ANTIGO, 25% CADA E METADE VAZIA); NA AVANÇADA,
     CÓDIGO E SITUAÇÃO, AS ÁREAS E OS VALORES EM PARES, E QUARTOS, SUÍTES E VAGAS EM TRÊS.
   - 992 A 1199: TIPO, CIDADE E BAIRRO COM 21,5% E OS BOTÕES COM 17,75% (COM 1/6, "Selecione Um Tipo"
     CORTAVA); A AVANÇADA EM TRÊS LINHAS DE TRÊS (COM 1/6, 91px, QUASE TODOS CORTAVAM).
   - 1200 PARA CIMA: A GRADE DO SITE ANTIGO, ONDE TUDO CABE. */
@media (min-width: 768px) {
    .campo--tipo,
    .campo--cidade,
    .campo--bairro { width: 33.33333333%; }
    .campo--botao { width: 50%; }
    .campo--2-6 { width: 33.33333333%; }
    .campo--codigo,
    .campo--3-6,
    .campo--valor { width: 50%; }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .campo--tipo,
    .campo--cidade,
    .campo--bairro { width: 21.5%; }
    .campo--botao { width: 17.75%; }
    .campo--codigo,
    .campo--3-6,
    .campo--2-6,
    .campo--valor { width: 33.33333333%; }
}

@media (min-width: 1200px) {
    .campo--tipo,
    .campo--botao,
    .campo--codigo,
    .campo--3-6,
    .campo--2-6,
    .campo--valor { width: 16.66666667%; }
    .campo--cidade,
    .campo--bairro { width: 25%; }
}

/* A CAIXA FICA COM 42px MESMO QUANDO O BOTÃO CRESCE PARA 50px ABAIXO DE 992px, COMO NO SITE ANTIGO. */
.busca .seletor {
    height: 42px;
    border-radius: 4px;
    background-color: #fff;
    color: #999;
    font-size: 14px;
    font-weight: 300;
}

.busca .seletor__botao {
    height: 42px;
    padding: 0 25px 0 15px;
    color: #959595;
}

@media (max-width: 991px) {
    .busca .seletor__botao { height: 50px; }
}

/* TEXTO QUE NÃO CABE TERMINA EM "…" (E NÃO CORTADO NO MEIO DA LETRA). */
.busca .seletor__atual {
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* CELULAR ESTREITO: OS CAMPOS DE RÓTULO LONGO ("Área Privativa Mín.", "Valor Mínimo") NA LINHA
   TODA; QUARTOS, SUÍTES E VAGAS SEGUEM DOIS POR LINHA. */
@media (max-width: 481px) {
    .campo--3-6,
    .campo--valor { width: 100%; }
}

.busca .seletor__botao:hover,
.busca .seletor.aberto .seletor__botao {
    color: #333;
}

/* BUSCA AVANÇADA: ABRE DENTRO DA FAIXA DA BUSCA, QUE CRESCE JUNTO (O FUNDO TRANSLÚCIDO COBRE OS
   CAMPOS NOVOS), NA MESMA GRADE DA LINHA DE CIMA E COM OS MESMOS 13px ENTRE AS LINHAS.
   ABRE E FECHA DESLIZANDO (busca.js, 400ms COMO O slideDown/slideUp DO TEMA).
   (NO SITE ANTIGO OS CAMPOS ABRIAM POR CIMA DA FOTO, FORA DA FAIXA E 15px À ESQUERDA: O SAMI
   PEDIU ASSIM.) */
/* A CAIXA FICA DENTRO DA LINHA DOS CAMPOS DE CIMA (DEPOIS DOS BOTÕES): DESCE PARA BAIXO DELES E A
   LINHA DE DENTRO NÃO REPETE O RECUO NEGATIVO, PARA OS CAMPOS FICAREM NA MESMA GRADE. */
.busca__campos-avancados {
    clear: both;
}

.busca__campos-avancados > .linha {
    margin-right: 0;
    margin-left: 0;
}

.busca__campos-avancados .campo {
    margin-bottom: 13px;
}

/* CELULAR: A LINHA VIRA COLUNA E A BUSCA AVANÇADA ABRE LOGO ABAIXO DO BAIRRO, ANTES DOS BOTÕES. */
@media (max-width: 767px) {
    .busca__form > .linha {
        display: flex;
        flex-wrap: wrap;
    }
    .busca__form > .linha::before,
    .busca__form > .linha::after { display: none; }
    .busca__form > .linha > .campo { flex: 0 0 100%; }
    .busca__campos-avancados { order: 1; width: 100%; }
    .busca__form > .linha > .campo--botao { order: 2; }
}

.busca__codigo {
    display: block;
    width: 100%;
    height: 42px;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fff;
    box-shadow: none;
    color: #999;
    font-size: 14px;
    font-weight: 300;
    line-height: 1.42857143;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

.busca__codigo::placeholder {
    color: #999;
    opacity: 1;
}

.busca__codigo:focus {
    border-color: #66afe9;
    outline: 0;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
}

.busca__avancada,
.busca__buscar,
.busca__limpar {
    display: block;
    width: 100%;
    margin: 0;
    padding: 11px 15px;
    border: 0;
    border-radius: 4px;
    background-color: #256c4a;
    color: #fff;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857;
    text-align: center;
    white-space: nowrap;
    touch-action: manipulation;
}

.busca__buscar {
    font-weight: 500;
}

@media (max-width: 991px) {
    .busca__avancada,
    .busca__buscar,
    .busca__limpar { padding: 15px; }
}

@media (max-width: 767px) {
    .busca__avancada,
    .busca__buscar,
    .busca__limpar { font-size: 12px; font-weight: 400; }
}

/* "LIMPAR FILTRO" (SÓ NA LISTAGEM, NA BUSCA AVANÇADA): O MESMO BOTÃO VERDE, COM O X À ESQUERDA COMO A
   LUPA DO "BUSCAR". */
.busca__limpar,
.busca__limpar:hover,
.busca__limpar:focus {
    color: #fff;
    text-decoration: none;
}

.busca__x {
    display: inline-block;
    float: left;
    margin-right: 5px;
    line-height: 20px;
}

@media (max-width: 767px) {
    .busca__x { line-height: 12px; }
}

/* O "LIMPAR FILTRO" É O ÚLTIMO CAMPO DA BUSCA AVANÇADA, NA LARGURA DOS CAMPOS DELA: 1/6 A PARTIR DE
   1200 (AO LADO DE VAGAS), UM TERÇO NO TABLET E DE 992 A 1199 E A LINHA TODA NO CELULAR. */
@media (min-width: 768px) {
    .campo--limpar { width: 33.33333333%; }
}

@media (min-width: 1200px) {
    .campo--limpar { width: 16.66666667%; }
}

/* O ÍCONE TEM A ALTURA DE LINHA DO <i> DO SITE ANTIGO: É ELA QUE DÁ A ALTURA DO BOTÃO. */
.busca__engrenagem {
    position: relative;
    display: inline-block;
    margin-right: 6px;
    font-size: 15px;
    line-height: 20px;
}

@media (min-width: 992px) and (max-width: 1199px) {
    .busca__engrenagem { display: none; }
}

.busca__lupa {
    display: inline-block;
    float: left;
    margin-right: 5px;
    line-height: 20px;
}

@media (max-width: 767px) {
    .busca__engrenagem,
    .busca__lupa { line-height: 12px; }
}