/*.map-container {
  height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: row;
}

#map {
  flex: 1;
  height: 100%;
}

.location-list {
  width: 400px;
  max-width: 100%;
  overflow-y: auto;
  background-color: #f8f9fa;
  padding: 1rem;
  border-left: 1px solid #ddd;
}
.location-list h5{
  color: var(--color-3);
  font-weight: 600;
  font-family: var(--font-02);
  font-size: 18px;
}
.location-card {
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  margin-bottom: 1rem;
}

.leaflet-popup-content-wrapper {
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.leaflet-popup-content {
  margin: 0;
}

.popup-card {
  padding: 0.5rem;
  font-size: 0.9rem;
}

.popup-card h6 {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}

@media (max-width: 768px) {
  .map-container {
    flex-direction: column;
  }

  .location-list {
    width: 100%;
    height: 300px;
    border-left: none;
    border-top: 1px solid #ddd;
  }

  #map {
    height: calc(100vh - 300px);
  }
}
*/
/*Google map code*/
.location-page {
  display: flex;
  flex-direction: column;
  min-height: 350vh;
}

.search-bar {
  display: flex;
  gap: 0.5rem;
  padding: 1rem;
  background-color: #f1f1f1;
  align-items: center;
  flex-wrap: wrap;
}
#locationDetails {
  display: flex;
  flex-wrap: wrap;
  /*gap: 1rem;*/
  /*max-height: 400px;👈 Limit height for scroll */
  overflow-y: auto;
  margin-top: 20px;
}
.search-input,
.location-dropdown {
  flex: 1;
  padding: 0 30px;
  font-size: 1rem;
  border: 1px solid #ccc;
  height: 55px;
  padding: 0 30px;
  background: #fff;
  width: 100%;
  font-size: 14px;
  color: var(--color-4);
  outline: none;
  border: none;
}

.search-btn {
  padding: 0.5rem 1rem;
  background-color: var(--color-3, #007bff);
  border: none;
  color: white;
  border-radius: 6px;
  cursor: pointer;
}

.search-btn i {
  pointer-events: none;
}

.location-list {
  padding: 1rem;
  background-color: #f8f9fa;
  overflow-y: auto;
  max-height: 35vh;
}

.location-card {
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  margin-bottom: 1rem;
  cursor: pointer;
  background-color: white;
  transition: background-color 0.2s ease;
}

.location-card:hover {
  background-color: #e9ecef;
}
.location-card a{
  color: var(--color-3);
}
.map-section {
  flex: 1;
  height: 100%;
}
.job-badge{
  background-color: rgba(37, 99, 235, 0.1);
  color: var(--color-3);
  font-size: 0.8rem;
  border-radius: 20px;
  padding: 5px 12px;
  margin-right: 5px;
}
@media (max-width: 1024px) {
  .location-page {
    min-height: 270vh;
  }
}
@media (max-width: 768px) {
  .location-list {
    max-height: 40vh;
  }
}
@media (max-width: 575px) {
  .location-page {
    min-height: 600vh;
  }
}