.map-legend-control {
  color: #172d24;
}

.map-legend-control > summary {
  list-style: none;
}

.map-legend-control > summary::-webkit-details-marker {
  display: none;
}

.map-legend-toggle {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  gap: 7px;
  padding: 0 12px;
  color: #172d24;
  background: rgba(255, 253, 248, .97);
  border: 1px solid #d7d0c4;
  border-radius: 10px;
  box-shadow: 0 5px 18px rgba(23, 45, 36, .16);
  cursor: pointer;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .075em;
  line-height: 1;
  text-transform: uppercase;
  user-select: none;
}

.map-legend-toggle:hover,
.map-legend-toggle:focus-visible,
.map-legend-control[open] > .map-legend-toggle {
  border-color: #c89442;
  background: #fff8e9;
  outline: none;
}

.map-legend-toggle > span {
  color: #c17b21;
  font-size: 15px;
  line-height: 1;
}

.map-legend-panel {
  color: #172d24;
  background: rgba(255, 253, 248, .98);
  border: 1px solid #d7d0c4;
  border-radius: 12px;
  box-shadow: 0 12px 34px rgba(23, 45, 36, .22);
  backdrop-filter: blur(10px);
}

.map-legend-panel .legend-section-title {
  color: #68736e;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .11em;
  line-height: 1.2;
  text-transform: uppercase;
}

.price-legend.map-legend-control {
  position: relative;
  z-index: 900;
  display: block;
  padding: 8px 24px;
  background: #fffdf8;
  border-bottom: 1px solid #ded8cc;
}

.price-legend .map-legend-panel {
  position: absolute;
  z-index: 950;
  top: calc(100% - 3px);
  left: 24px;
  display: flex;
  width: min(900px, calc(100vw - 48px));
  flex-wrap: wrap;
  align-items: center;
  gap: 9px 15px;
  padding: 14px;
}

.price-legend .map-legend-panel .legend-section-title {
  width: 100%;
  margin: 1px 0 0;
}

.price-legend .map-legend-panel span {
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

.price-legend .legend-symbol {
  display: inline-flex;
  min-width: 22px;
  height: 20px;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  color: #fff;
  border-radius: 6px;
  font-size: 9px;
  line-height: 1;
  text-transform: none;
}

.legend-symbol-sale {
  background: #172d24;
}

.legend-symbol-dpe {
  background: linear-gradient(90deg, #179b52, #f4df36, #d63b32);
}

.legend-symbol-copro {
  background: #6941c6;
}

.legend-symbol-school {
  background: #d97706;
}

.legend-symbol-transport {
  background: #2563a8;
}

.legend-symbol-commerce {
  background: #0f766e;
}

.homepage-price-legend.map-legend-control {
  width: auto;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
}

.homepage-price-legend .map-legend-panel {
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  width: min(560px, calc(100vw - 28px));
  padding: 14px;
}

.homepage-price-legend .legend-section-title {
  display: block;
  margin-bottom: 8px;
}

@media (max-width: 640px) {
  .price-legend.map-legend-control {
    padding: 7px 12px;
  }

  .price-legend .map-legend-panel {
    top: calc(100% - 2px);
    left: 12px;
    width: calc(100vw - 24px);
    max-height: calc(100vh - 180px);
    align-items: flex-start;
    padding: 12px;
    overflow-y: auto;
  }

  .price-legend .map-legend-panel span {
    line-height: 1.35;
  }

  .homepage-price-legend.map-legend-control {
    padding: 0;
  }

  .homepage-price-legend .map-legend-panel {
    width: calc(100vw - 28px);
    max-height: 60vh;
    padding: 12px;
    overflow-y: auto;
  }

  .homepage-price-legend .homepage-price-scale b {
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
  }
}