body {
  font-family: Arial, sans-serif;
  margin: 0;
  display: flex;
  height: 100vh;
}

#locationSearch {
}
#locationInput {
  width:100%;
}

#sidebar {
  position:fixed;
  height: 48%;
  top:1%;
  left:1%;
  z-index:1000;
  width: 400px;
  overflow-y: auto;
  box-sizing: border-box;
  padding: 1.5em 1.25em;
  background-color:white;
  border: 1px solid black;
}

/* Add spacing between sidebar sections (brand filters, buttons, list, etc.) */
#sidebar > *:not(:last-child) {
  margin-bottom: 1.25em;
}

#route-selector {
  max-height:100px;
  overflow-y: scroll;
  border:1px solid #ddd;
}

#map {
  width:100%; height:100%;
}

.ghost {
  opacity: 0.5;
  background: #ccc;
}




#selections {
  position:fixed;
  height: 48%;
  bottom:1%;
  left:1%;
  width:400px;
  overflow-y: auto;
  z-index:1000;
  box-sizing: border-box;
  padding: 1.5em 1.25em;
  background-color:white;
  border: 1px solid black;
}


.leaflet-tooltip {
  font-size: 16px;     /* or whatever size you prefer */
  font-weight: bold;   /* optional */
  padding: 6px 8px;    /* optional for spacing */
}

.hotel-tooltip {
  max-width: 200px !important;
  width: max-content !important;           /* Let it grow up to max-width */
  white-space: normal !important;          /* Allow wrapping */
  word-break: normal !important;           /* Don't break each word */
  overflow-wrap: break-word !important;    /* Only wrap if needed */
  display: block !important;               /* Ensure max-width is respected */
}

.hotel-popup {
  max-width: 600px !important;
  width: max-content !important;           /* Let it grow up to max-width */
  white-space: normal !important;          /* Allow wrapping */
  word-break: normal !important;           /* Don't break each word */
  overflow-wrap: break-word !important;    /* Only wrap if needed */
  display: block !important;               /* Ensure max-width is respected */
  font-size: 16px;     /* or whatever size you prefer */
  font-weight: bold;   /* optional */
  padding: 6px 8px;    /* optional for spacing */
  max-height:400px;
  overflow-y:scroll;
}

.delete-saved-point {
  float:right;
}

#route_legs {
  list-style:none;
  padding: 0;
  margin: 0;
}

#route_legs li {
  background: #fff;
  margin: 0.75em;
}

#route_points {
  list-style:none;
  padding: 0;
  margin: 0;
}
#route_points li {
  background: #fff;
  margin-bottom: 0.75em;
  padding: 0.75em;
  padding-right: 2.5em;
  border: 1px solid #ccc;
  border-radius: 6px;
}
#route_points li:hover {
  background: #f0f8ff;
}

#btnClearSavedPoints {
  float:right;
}



/* ===== MOBILE STACKING ===== */
@media (max-width: 768px) {
  body {
    display: block;
    height: auto;
  }

  #sidebar, #selections {
    position: static;
    width: 100%;
    top: auto;
    left: auto;
    right: auto;
  }

  #map {
    width: 100%;
    height: 500px;
  }
}