#map {
    height: 400px; /* Reduced height for mobile */
    width: 100%; /* Full width on mobile */
    float: none; /* Remove float */
    order: 1; /* Map appears first on mobile */
}

.scrollResults {
    margin: 0;
    padding: 15px;
    width: 100%; /* Full width on mobile */
    height: auto; /* Let content determine height */
    overflow-x: hidden;
    overflow-y: visible; /* No scrolling on mobile */
    text-align: left;
    order: 2; /* Results appear below map */
}

/* Create a flex container for map and results */
.Results {
    display: flex;
    flex-direction: column; /* Stack vertically on mobile */
    width: 100%;
    gap: 0;
}

/* Tablet and desktop styles */
@media (min-width: 768px) {
    .Results {
        flex-direction: row; /* Side by side on larger screens */
    }
    
    #map {
        height: 750px;
        width: 50%;
        float: right;
        order: 2;
    }
    
    .scrollResults {
        width: 48%;
        height: 800px;
        overflow-y: auto;
        order: 1;
        margin: 4px;
        padding: 4px;
    }
}

/* Add this to the END of styleMap.css to ensure mobile works */

/* Force mobile layout on small screens */
@media only screen and (max-width: 767px) {
    
    /* Make sure the Results container exists and works */
    .Results {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Map full width and reasonable height */
    #map {
        width: 100% !important;
        height: 300px !important;
        float: none !important;
        order: 1 !important;
        margin: 0 !important;
    }
    
    /* Results full width below map */
    .scrollResults {
        width: 100% !important;
        /*height: auto !important;*/
        min-height: 50vh !important;
        overflow-y: visible !important;
        order: 2 !important;
        margin: 0 !important;
        padding: 10px !important;
    }
}

#map a, #map .gm-style a { pointer-events:auto !important; }

/* #map{
  height: 750px;
  width:50%;
  float:right;
  

}


.scrollResults {
  margin:4px, 4px;
  padding:4px;
  width: 48%;
  height: 800px;
  overflow-x: hidden;
  overflow-y: auto;
  text-align:justify;
} */