.imoveis-search-form-container {
    background-color: rgba(255, 255, 255, 0.8);
    padding: 30px;
    border-radius: 5px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
    margin-bottom: 30px;
    backdrop-filter: blur(5px);
	position: relative;
	z-index: 1;
}

.imoveis-search-form .btn-primary {
    background-color: #00aeff;
    border-color: #00aeff;
    font-weight: bold;
}

.imoveis-search-form .btn-primary:hover {
    background-color: #008fcc;
    border-color: #008fcc;
}

.bootstrap-select .dropdown-menu li.selected a .check-mark {
    margin-top: 5px; 
}

.imoveis-search-form .bootstrap-select .dropdown-menu li.selected a {
    color: #212529 !important;
    background-color: #f8f9fa !important;
}

.imoveis-search-form .bootstrap-select .dropdown-menu li.selected a .text {
    color: #212529 !important;
}

.imoveis-search-form .bootstrap-select .dropdown-menu li.selected a:hover {
    background-color: #e9ecef !important;
}

.imoveis-search-form .bootstrap-select > .btn.dropdown-toggle {
    background-color: #fff !important;
    border: 1px solid #ced4da;
    color: #495057;
    box-shadow: none;
    padding-top: .375rem;
    padding-bottom: .375rem;
    line-height: 1.8;
    height: 42px;
}

.imoveis-search-form .bootstrap-select > .btn.dropdown-toggle:focus,
.imoveis-search-form .bootstrap-select.show > .btn.dropdown-toggle {
    outline: 0;
    border-color: #80bdff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.imoveis-search-form .bootstrap-select > .btn.dropdown-toggle:hover {
    background-color: #fff !important;
}

imoveis-search-form .bootstrap-select .dropdown-menu li.selected a .check-mark::after,
.bootstrap-select .bs-ok-default:after {
    display: none !important;
}

.bs-actionsbox .btn-group button {
    border: 1px  solid #D1D5DB;
}

.btn-group-sm>.btn, .btn-sm {
    font-size: .8rem;
}

.imoveis-search-form .bootstrap-select .dropdown-menu li.selected a .check-mark {
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3e%3cpath d='M13.5 4.5L6 12L2.5 8.5' stroke='%2300aeff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center;
}

.bootstrap-select.show-tick .dropdown-menu .selected span.check-mark {
    top: 9px !important;
    right: 10px !important;
}

/* --- LAYOUT DO FORMULÁRIO COM CSS GRID --- */

.form-group-grid label {
    font-size: 12px;
}

.imoveis-grid-form {
    display: grid;
    gap: 15px; /* Espaçamento entre os campos */
    align-items: end; /* Alinha todos os itens pela base */

    /* 1. DESENHO DO LAYOUT: Definimos as "áreas" nomeadas e seus tamanhos com 'fr' */
    grid-template-areas: "situacao tipo metr-min metr-max bairro codigo submit";
    grid-template-columns: 2fr 2fr 1fr 1fr 2fr 1fr 1fr; /* Soma de fr não importa, é proporcional */
}

/* Define a largura de cada campo */
.imoveis-grid-form .field-situacao { grid-area: situacao; }
.imoveis-grid-form .field-tipo     { grid-area: tipo; }
.imoveis-grid-form .field-metr-min { grid-area: metr-min; }
.imoveis-grid-form .field-metr-max { grid-area: metr-max; }
.imoveis-grid-form .field-bairro   { grid-area: bairro; }
.imoveis-grid-form .field-codigo   { grid-area: codigo; }
.imoveis-grid-form .field-submit   { grid-area: submit; }


/* --- RESPONSIVIDADE PARA MOBILE (Grid) --- */

@media (max-width: 991px) {
    .imoveis-search-form .form-group {
        margin-bottom: 15px;
    }
	
	.imoveis-search-form-container {
     margin-top: -30px;
}
}

@media (max-width: 767px) {
    .imoveis-search-form .form-group {
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 15px;
    }
	
	.imoveis-grid-form {
        /* Define que haverá apenas uma coluna */
        grid-template-columns: 1fr;
        
        /* Redesenha o layout para empilhar as áreas verticalmente */
        grid-template-areas:
            "situacao"
            "tipo"
            "metr-min"
            "metr-max"
            "bairro"
            "codigo"
            "submit";
    }

    /* Opcional: Remove a label vazia do botão em telas pequenas */
    .imoveis-grid-form .field-submit label {
        display: none;
    }
}

/* ========== CSS PARA OFF-CANVAS ========== */
/* Força layout mobile quando o formulário está dentro do off-canvas */
.eael-offcanvas-content .imoveis-grid-form {
    /* Força o layout de uma coluna */
    grid-template-columns: 1fr !important;
    
    /* Redesenha o layout para empilhar verticalmente */
    grid-template-areas:
        "situacao"
        "tipo"
        "metr-min"
        "metr-max"
        "bairro"
        "codigo"
        "submit" !important;
}

/* Remove a label vazia do botão no off-canvas */
.eael-offcanvas-content .imoveis-grid-form .field-submit label {
    display: none;
}

/* Ajusta o container para o off-canvas */
.eael-offcanvas-content .imoveis-search-form-container {
    margin-top: 0 !important;
    padding: 20px !important;
    background-color: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

/* Garante que os campos ocupem toda a largura disponível */
.eael-offcanvas-content .form-group-grid {
    width: 100% !important;
}

/* Ajusta os selects e inputs para a largura total */
.eael-offcanvas-content .form-control,
.eael-offcanvas-content .bootstrap-select {
    width: 100% !important;
    max-width: 100% !important;
}

/* Ajusta o botão para ocupar toda a largura */
.eael-offcanvas-content .btn-block {
    width: 100% !important;
}

/* Reduz o gap para economizar espaço vertical */
.eael-offcanvas-content .imoveis-grid-form {
    gap: 12px !important;
}

/* Ajusta labels para economizar espaço */
.eael-offcanvas-content .form-group-grid label {
    font-size: 11px !important;
    margin-bottom: 3px !important;
}