/* General body settings: remove default margin, set clean font, base size, and light background */
body {
  margin: 0;
  font-family: Outfit;
  font-size: 1rem;
  line-height: 1.5;
  background-color: #f9f9f9;
}


.title {
  font-family: 'Outfit', sans-serif;
  font-size: 36px;
  font-weight: 600;
  line-height: 34.50px;
  display: flex;
  align-items: baseline;
  gap: 0.1em;
  white-space: nowrap;
}

.title span {
  display: inline;
}

/* Title variants */
.title-black {
  color: #000;
}
.title-gold {
  color: #F2B500;
}
.title-dot {
  display: inline-block;
  width: 0.2em;      /* tweak size */
  height: 0.2em;
  background: currentColor;
  border-radius: 50%;
  vertical-align: baseline;
  margin-left: 0.1em; /* spacing */
}

.controls-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.controls-container .title {
  white-space: nowrap;
  overflow: visible;
  width: max-content;
}


/* Style for main heading: spacing around and slightly larger text */
h1 {
  margin: 1rem;
  font-size: 1.5rem;
}


/* Sidebar filter controls: vertical list, small spacing between rows */
#filter-controls {
  max-width: 500px;
  gap: 1.5rem;
  font-size: 0.9rem;
  /* padding-top: 0.5rem; */
  min-width: 12rem;
}

/* Map area: flexible width, minimum height, soft borders and light background */
#map {
  max-width: 600px; /* or whatever px value works */
  min-height: 60vh;
  width: 100%;
  border: 1px solid #ccc;
  border-radius: 0.5rem;
  background: #e6e6e6;
}

.category-btn {
  -webkit-tap-highlight-color: transparent;
  outline: none;

  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  display: block;
  position: relative;
}
.category-btn.inactive .category-bg {
  opacity: 0.3;
}

.category-btn:focus {
  outline: none;
}


.category-box {
  position: relative;
  height: 33px;           /* match your .category-bg height */
  margin-bottom: 1rem;    /* vertical gutter */
  border-radius: 10px;
  overflow: visible;    
}

.category-bg {
  width: 182px;
  height: 33px;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 10px;
}

.category-label {
  /* width: 120px; */
  height: 27px;
  position: absolute;
  top: 4px;
  left: 10px;
  color: white;
  font-size: 18px;
  font-family: 'Outfit', sans-serif;
  font-weight: 400;
  line-height: 27.5px;
  word-wrap: break-word;
  white-space: nowrap;    /* prevents wrapping */
  text-overflow: ellipsis;/* if ever too long, show “…” */
  overflow: hidden;
}