#geolocation-search-container {
    max-width: 65%;
    overflow-x: visible;
    position: relative;
    background: white;
}

@media (max-width: 1024px) {
    #geolocation-search-container {
        max-width: 80%;
    }
}

@media (max-width: 768px) {
    #geolocation-search-container {
        max-width: 100%;
    }
}

#geolocation-search-form {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    background: white;
    padding: 0px;
    border-radius: 10px;
    box-sizing: border-box;
    width: 100%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    align-items: center;
    position: relative;
}

#geolocation-search-form::before,
#geolocation-search-form::after {
    content: '';
    position: absolute;
    left: -50vw; /* Extend past the left edge of the page */
    right: -50vw; /* Extend past the right edge of the page */
    width: 200vw; /* Full viewport width plus the overflow */
    height: 1px;
    background: #ccc;
}

#geolocation-search-form::before {
    top: 0; /* Position at the top of the form */
}

#geolocation-search-form::after {
    bottom: 0; /* Position at the bottom of the form */
}

/* Form Field Classes */
.form-field-city {
    flex: 1 1 15%; /* 15% width with flex-grow and flex-shrink */
}

.form-field-city input {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 5px;
    height: 40px; /* Fixed height for input */
    background: white;
}

.form-field-max-price {
    flex: 1 1 15%; /* 15% width with flex-grow and flex-shrink */
}

.form-field-max-price select {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 5px;
    height: 40px; /* Fixed height for select */
    background: white;
}

.form-field-property-type {
    flex: 1 1 15%; /* 15% width with flex-grow and flex-shrink */
}

.form-field-property-type select {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 5px;
    height: 40px; /* Fixed height for select */
    background: white;
}

.form-field-property-status {
    flex: 1 1 15%; /* 15% width with flex-grow and flex-shrink */
}

.form-field-property-status select {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 5px;
    height: 40px; /* Fixed height for select */
    background: white;
}

.form-field-beds-baths {
    position: relative;
    flex: 1 1 15%; /* 15% width with flex-grow and flex-shrink */
}

#beds-baths-dropdown {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background: white;
    cursor: pointer;
    height: 40px; /* Fixed height for dropdown */
}

#beds-baths-options {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    z-index: 1000;
}

.form-field-min-size {
    flex: 1 1 15%; /* 15% width with flex-grow and flex-shrink */
}

.form-field-min-size select {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 5px;
    height: 40px; /* Fixed height for select */
    background: white;
}

#more-filters-popup {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    z-index: 1000;
}

#more-filters-popup label {
    display: block; /* Ensure labels are displayed in the popup */
}

.btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.bedroom-btn,
.bathroom-btn,
.bedroom-btn-popup,
.bathroom-btn-popup {
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background: white;
    cursor: pointer;
    height: 40px; /* Fixed height for buttons */
}

.bedroom-btn.active,
.bathroom-btn.active,
.bedroom-btn-popup.active,
.bathroom-btn-popup.active {
    background-color: #ccc;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
    border-color: #aaa;
}

#results-section {
    flex: 1;
    overflow-y: auto;
}

#show-more-fields-btn {
    background: white;
    color: #000;
    border: 1px solid #ccc;
    border-radius: 5px;
    cursor: pointer;
    display: none; /* Hide by default */
    height: 40px; /* Fixed height for button */
    padding: 8px; /* Matching padding to other fields */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    flex: 1 1 15%; /* 15% width with flex-grow and flex-shrink */
}

@media (max-width: 1024px) {
    .optional-field {
        display: none;
    }

    .mandatory-field {
        display: flex;
    }

    #show-more-fields-btn {
        display: block;
    }
}

@media (max-width: 768px) {
    #geolocation-search-form {
        flex-direction: column;
    }

    #geolocation-search-form > .form-field {
        width: 100%;
        margin-bottom: 10px;
    }

    .mandatory-field {
        display: flex;
    }

    .optional-field {
        display: none;
    }

    #show-more-fields-btn {
        display: block;
    }

    #map-section, #results-section {
        height: auto; /* Ensure both sections are displayed correctly */
        width: 100%;
    }
}

.optional-field.show-label label {
    display: block; /* Show labels when "Show More Filters" is selected */
}

@media (min-width: 768px) and (max-width: 1024px) {
    .form-field-more-max-price,
    .form-field-more-property-type,
    .form-field-more-property-status {
        display: none;
    }
    
    .form-field-max-price,
    .form-field-property-type,
    .form-field-property-status {
        display: flex;
    }
}

@media (min-width: 1024px) {
    #beds-baths-options label {
        display: block; /* Ensure labels are displayed in beds-baths-options on desktop view */
    }
}

@media (max-width: 768px) {
    #geolocation-search-form .optional-field {
        display: none; /* Hide optional fields in mobile view */
    }

    #more-filters-popup .form-field {
        display: block; /* Display optional fields in more-filters-popup */
    }
}