body, html { 
  margin: 0; 
  padding: 0; 
  height: 100%; 
  background-color: #f4f4f4; 
}
#map { 
  height: 100%; 
  width: 100%; 
}
#filters { 
  padding: 10px; background: #f4f4f4; 
}
#container {
  display: flex;
  height: 85vh;
}
#map {
  flex: 3;
}
#resetFilters {
  margin-left: 10px;
  padding: 5px 10px;
  cursor: pointer;
}
.header {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem;
  border-bottom: 2px solid #ddd;
  gap: 1rem;
  flex-wrap: wrap;
  background-color: #f4f4f4; 
}
@media (max-width: 600px) {
  .header {
    flex-direction: column;
  }
}
.header__logo{
  width: 100px;
  height: 79px;
}
#filters {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
@media (max-width: 600px) {
  #filters {
    flex-direction: column;
  }
}
/* Styled selects */
#filters select {
  padding: 0.5rem 1rem;
  border: 1px solid #ccc;
  border-radius: 8px;
  background-color: #f7f7f7;
  font-size: 0.95rem;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg fill='%23333' height='16' viewBox='0 0 24 24' width='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1rem;
  min-width: 200px;
  cursor: pointer;
}
/* Disabled look */
#filters select:disabled {
  background-color: #eee;
  cursor: not-allowed;
  opacity: 0.6;
}
/* Reset button */
#resetFilters {
  padding: 0.5rem 1rem;
  background-color: #004494;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
#resetFilters:hover {
  background-color: #002d66;
}
#filters select {
  max-width: 220px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#filters select option {
  white-space: normal; /* enables line breaks in dropdowns in Firefox */
}
/* Optional: show full text on hover */
#filters select:hover {
  cursor: pointer;
}
#filters select[title]::after {
  content: attr(title);
}