:root {
  --navbar-height: 55px; /* adjust after checking actual navbar height */
}

/* Reset html and body */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  overflow-x: hidden;
}

/* Adjust for fixed navbar */
body {
  padding-top: var(--navbar-height);
}

/* Full-height map and sidebar */
#map{
    height: calc(100vh - var(--navbar-height));
    position: relative;
}

/* Full-height map and sidebar */
#map-listing{
    height: 400px;
    width: 100%; 
    background-color: black;
    position: relative;
}

/* Sidebar scroll if content is taller than viewport */
#sidebar {
  height: calc(100vh - var(--navbar-height));
  overflow-y: auto;
}




/* Desktop: split map + sidebar */
@media (min-width: 768px) {
  #map {
    height: calc(100vh - var(--navbar-height));
  }
  #sidebar {
    height: calc(100vh - var(--navbar-height));
    overflow-y: auto;
  }
}

/* Mobile: map full screen on top, listings below */
@media (max-width: 767px) {
  #map {
    height: calc(100vh - var(--navbar-height));
  }
  #sidebar {
    height: auto;     
    overflow-y: visible; 
  }
}

@media (max-width: 576px) {
  #listing-img img {
    height: 150px; /* smaller images on phones */
  }
}


/* Leaflet */
.leaflet-popup-content-wrapper {
  margin: 0px;
  padding: 0px;
  border-radius: 0; /* Bootstrap's default card radius */
  box-shadow: 0 0.5rem 1rem rgba(0,0,0,.15);
  background: #ffffff;
  border: 1px solid rgba(0,0,0,.125);
  padding: 0; 
  overflow: hidden; 
}

/* Custom popup class */
.leaflet-popup-content {
    font-family: "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif; /* match Bootstrap */
    font-size: 0.875rem;  /* optional: match sidebar card text size */
    color: #212529;       /* Bootstrap body text color */
    padding: 0;           /* remove extra padding if using card inside popup */
}


.leaflet-popup-close-button {
  background-color: blue;       /* your desired color */
  opacity: 0.8;
  width: 100px;
  height: 100px;
  cursor: pointer;
  top: 0.5rem;
  right: 0.5rem;
  transition: all 0.2s ease;
}

/* Hover effect */
.leaflet-popup-close-button:hover {
  opacity: 1;
  transform: scale(1.2);
}


/* Leaflet control container style */
.info-legend {
  background: white;
  bottom: 15px;
  left: 10px;
  padding: 20px 20px;
  font: 14px/16px "Helvetica Neue", Helvetica, Arial, sans-serif;
  box-shadow: 0 1px 5px rgba(0,0,0,0.65);
  border-radius: 4px;
  line-height: 18px;
  color: #333;
  z-index: 5000
}

.leaflet-control {
    z-index: 500;   
}

/* Fullscreen Leaflet */
.leaflet-control-fullscreen a::before {
  font-family: "bootstrap-icons" !important;
  content: "\f3e9";  /* Unicode for `bi-fullscreen` */
  font-size: 18px;
  display: inline-block;
  color: #333; /* adjust to match your theme */
}

.leaflet-control-fullscreen a.leaflet-fullscreen-on::before {
  content: "\f2d0";  /* Unicode for `bi-fullscreen-exit` */
}


#search-panel {
    position: relative;
}

/* Bootstrap dropdown menu */
#search-panel .dropdown-menu {
    z-index: 2000 !important; /* make sure it is above leaflet controls */
}

#listing-features {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
  gap: 0.5rem; 
}

#listing-features .card {
  background-color: rgb(238, 238, 238);
  border-color: rgb(238, 238, 238); 
  text-align: center;
}


/* Listing Features */

#googlemaps-btn, #legend-home {
  font: 14px/16px "Helvetica Neue", Helvetica, Arial, sans-serif;
  background: white;
  border: 1px solid #ccc;
  padding: 10px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

#id_amenities div {
  margin-bottom: 8px;
}