#map {
      width: 100%;
      height: 400px;
    }
    .control-box {
      position: absolute;
      top: 10px;
      left: 10px;
      background: white;
      border-radius: 8px;
      padding: 8px 12px;
      font-family: sans-serif;
      box-shadow: 0 2px 6px rgba(0,0,0,0.25);
      z-index: 1;
    }
    .zoom-display-area{
      position: absolute;
      top: 10px;
      right: 10px;
      color: #7BB062;
      padding: 6px 6px 4px;
      border-radius: 7px;
      font-size: 12px;
      font-family: sans-serif;
      display: flex;
      align-items: center;
      z-index: 999;
      flex-direction: column;
      border: 2px solid #8CB9B694;
      backdrop-filter: blur(28px);
      background: radial-gradient(50% 50% at 50% 50%, #FFFFFF 0%, #F0FDF9 100%);
      justify-content: center;
    }
    .mapboxgl-ctrl-top-right {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      top: 60px !important;
      right: 10px !important;
    }
    .zoom-display {
      background: rgba(255, 255, 255, 0.9);
      border-radius: 4px;
      padding: 4px 8px;
      margin: 6px;
      font-size: 13px;
      font-weight: bold;
      color: #333;
    }
    .map-wrapper-inner {
        position: relative;
    }
    .geocoder {
        position: absolute;
        top: 10px;
        left: 10px;
    }
    .mapboxgl-popup-content{
      min-width: auto;
      padding-right: 20px !important;
    }
    .map-legend {
      background-color: transparent;
      padding: 10px 15px 10px 0;
      border-radius: 8px;
      font-family: inherit;
      max-width: 100%;
      display: flex;
      flex-wrap: wrap;
      column-gap: 30px;
      row-gap: 0;
  }
  .legend-item {
      display: flex;
      align-items: center;
  }
  .color-box {
      width: 16px;
      height: 16px;
      margin-right: 8px;
      border-radius: 3px;
      border: 1px solid #aaa;
  }
  .geocoder .mapboxgl-ctrl-geocoder--input {
    height: 44px;
    box-shadow: 0px 0px 6px 0px #00000040;
    border: 1px solid #838383;
    border-radius: 22px;
    background: #FFFFFF;
    padding: 12px 35px 12px 50px;
  }
  .geocoder .mapboxgl-ctrl-geocoder--icon-search{
    top: 12px;
    left: 16px;
  }
  .geocoder .mapboxgl-ctrl-geocoder{
    max-width: 500px;
    box-shadow: none;
    background: none;
    min-width: 500px;
  }
@media (max-width: 992px){
  .geocoder .mapboxgl-ctrl-geocoder{
    max-width: 300px;
    min-width: 300px;
  }
}
@media (max-width: 676px){
  #map {
    height: 250px;
  }
  .zoom-display-area {
      display: none;
  }
  
  .mapboxgl-ctrl.mapboxgl-ctrl-group {
      display: none;
  }
  
  div#geocoder {
      width: 95%;
      margin-right: 10px;
  }
  
  input.mapboxgl-ctrl-geocoder--input {
      height: 40px;
  }
  
  svg.mapboxgl-ctrl-geocoder--icon.mapboxgl-ctrl-geocoder--icon-search {
      top: 8px;
  }
}