/* --- PROPERTIES PAGE SPECIFIC STYLES --- */

/* --- FILTER BAR SECTION --- */
.filter-section {
    padding: 2rem 0;
    background: #f8f8f8;
    border-bottom: 1px solid #e0e0e0;
}

.page-filter-bar {
    display: flex;
    background: #fff;
    padding: 0.5rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1); /* MODIFIED */
    width: 100%;
    border-radius: 0; /* MODIFIED */
}

.filter-bar-item {
    flex: 1 1 0;
    min-width: 120px;
    border-right: 1px solid #e0e0e0;
    display: flex;
    align-items: center;
    position: relative;
}

.filter-bar-item.location-input {
    flex-grow: 2;
    min-width: 200px;
}

.filter-bar-item:last-of-type {
    border-right: none;
}

.filter-bar-item i {
    color: #888;
    font-size: 1rem;
    padding: 0 0.5rem 0 1rem;
}

.filter-bar-item input,
.filter-bar-item select {
    width: 100%;
    height: 45px;
    border: none;
    background: transparent;
    outline: none;
    font-size: 0.95rem;
    color: #333;
    padding: 0 1rem;
    font-family: 'Poppins', sans-serif;
    appearance: none;
}

.filter-bar-item select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.8rem center;
    background-size: 0.9em 0.9em;
    cursor: pointer;
}

.filter-search-button {
    flex-shrink: 0;
    background: #111;
    color: #fff;
    border: none;
    width: 45px;
    height: 45px;
    border-radius: 0; /* MODIFIED */
    margin-left: 0.5rem;
    cursor: pointer;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease;
}

.filter-search-button:hover {
    background-color: #333;
}

/* --- ALL PROPERTIES LISTING --- */
.all-properties-listing {
    padding: 3rem 0 4rem 0;
    background-color: #fff;
}

/* --- RESPONSIVE FOR PROPERTIES PAGE FILTER BAR --- */
@media (max-width: 1100px) {
    .page-filter-bar {
        flex-wrap: wrap;
        gap: 0.75rem;
        padding: 1rem;
    }
    .filter-bar-item {
        flex: 1 1 calc(33.333% - 1rem); /* Three items per row */
        border: 1px solid #e0e0e0;
        border-radius: 0; /* MODIFIED */
    }
    .filter-bar-item.location-input {
        flex: 1 1 100%; /* Location takes a full row */
    }
    .filter-search-button {
        flex: 1 1 100%;
        height: 50px;
        margin-left: 0;
    }
}

@media (max-width: 768px) {
    .filter-bar-item {
        flex: 1 1 100%; /* Stack all items to a single column */
    }
}
/* --- Styling for the new Clear Filters Button --- */
.filter-clear-button {
    flex-shrink: 0;
    background: #e2e8f0; /* A light grey background */
    color: #4a5568;    /* A darker grey for the icon */
    border: none;
    width: 45px;
    height: 45px;
    border-radius: 0; /* MODIFIED */
    margin-left: 0.5rem; /* Spacing from the search button */
    cursor: pointer;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease;
}

.filter-clear-button:hover {
    background-color: #cbd5e0; /* A slightly darker grey on hover */
}

/* Make sure the form can accommodate the new button */
.page-filter-bar {
    display: flex;
    align-items: center; /* Vertically align items */
}