/* Filter Section Mobile Styles (max-width: 768px) */
.filter-section {
    padding: 40px 0;
}

.filter-section .section-title {
    font-size: 2rem;
    margin-bottom: 8px;
}

.filter-section .section-subtitle {
    font-size: 1.2rem;
    margin-bottom: 30px;
}

.property-filter-form {
    /* CRITICAL FIX 1: Use a two-column layout that forces centering. 
       This creates two narrow columns, allowing for the asymmetrical, unified look.
       By setting a max-width and margin: auto, the form centers, and elements wrap predictably.
    */
    grid-template-columns: 1fr 1fr; /* Two equal columns for a more compact layout */
    max-width: 450px; /* Constrain max width for better centering and visual balance */
    margin: 0 auto; /* Center the form itself */
    gap: 15px;
    padding: 20px;
    justify-content: center; /* Center the grid items horizontally within the max-width */
}

/* CRITICAL FIX 2: Center alignment and unified narrow width for single-input groups */
.filter-group {
    display: flex;
    flex-direction: column;
    align-items: center; /* CRITICAL: Center input fields under the label */
    text-align: center; /* Center the label text itself */
    width: 100%; /* Take full width of the grid column */
}

.filter-label {
    font-size: 1rem; 
    margin-bottom: 5px;
}

.form-control {
    /* Unified Narrow Width: Apply to all single inputs (selects, generic inputs) */
    width: 100%; /* Take full width of the grid column */
    padding: 10px 12px;
    font-size: 1rem; 
    box-sizing: border-box;
}

/* CRITICAL FIX 3: Unified Wider Width for Paired Inputs (like min/max Area/Price) */
.input-pair {
    display: flex;
    flex-direction: row; 
    gap: 5px;
    width: 100%; /* Take full width of the grid column */
    box-sizing: border-box;
}
.input-pair input {
    width: 50%; /* Each input takes half the width of the pair container */
}


.price-range-display {
    font-size: 0.9rem;
    /* CRITICAL FIX 4: Ensure price display is centered under the range inputs */
    text-align: center;
    width: 100%;
}

.land-specific-group {
    /* CRITICAL FIX 5: Force checkbox groups to span both columns and center */
    grid-column: span 2; 
    display: flex;
    flex-direction: column; /* Stack checkboxes vertically if they get too long */
    align-items: center; /* Center the entire group */
    justify-content: center;
    padding-top: 10px;
}

.land-specific-group .form-check-inline {
    /* Ensure individual checkbox items are aligned */
    justify-content: center;
}

.btn-search {
    /* CRITICAL FIX 6: Force button to span both columns and center itself */
    grid-column: span 2;
    width: 80%; /* Asymmetrical but unified wider width */
    max-width: 300px; /* Maximum width for a nice punchy button */
    padding: 12px 20px; 
    font-size: 1.1rem; 
    margin-top: 15px;
    justify-self: center; /* Center the button in its grid cell */
}