#search {
  border: 2px solid #09538B;
  border-radius: 8px;
  padding: 1rem;
  background-color: #f8f9fa;
  width: 90%;
  margin: 0 auto 1em auto;
  transition: width 0.3s ease;
}

@media (max-width: 768px) {
  #search {
    width: 98%;
    margin: 0 0 1em 0;
  }
}

#searchSubmit {
  margin-top: 0.5em;
}

#LocationGrid {
  margin-top: 2em;
}

#LocationGrid table {
  font-size: 80%;
  font-family: "Karla-Regular",'Segoe UI', sans;
}

#allFacilitiesBtn {
  background-color: lightgray;
  color: black;
  margin: 10px;
}

#cards,
#instructionsSection {
  margin-bottom: 2em;
}

#stationFilterGroup {
  display: flex;
  width: 100%;
  margin-bottom: 1.25em;
}

/* Base styling for all station filter buttons */
#stationFilterGroup .btn {
  min-width: 120px;
  text-align: center;
  border-color: #09538B;
  color: #808080;
  background-color: white;
  font-size: 0.875rem; /* Slightly smaller text */
  font-weight: 400; /* Normal weight */
  text-transform: none;
  transition: all 0.2s ease-in-out;
}

/* Hover state */
#stationFilterGroup .btn:hover {
  background-color: #f0f0f0;
  color: #09538B;
  border-color: #09538B;
}

/* Active (selected) filter button */
#stationFilterGroup .btn.active,
#stationFilterGroup .btn:active,
#stationFilterGroup input[type="radio"]:checked + .btn {
  background-color: #09538B;
  color: white;
  border-color: #09538B;
  font-weight: 600; /* Bold only when selected */
}

#map {
  height: 600px;
}

#LocationGrid table th,
#LocationGrid table td {
  vertical-align: middle;
}