/* The territory section stays light, but uses the same live map language as the order flow. */
body.taxi-home .service-area {
  background: #fffdf8 !important;
  color: #111318 !important;
}

body.taxi-home .service-area-inner {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
}

body.taxi-home .service-area-copy {
  position: relative !important;
  z-index: 4 !important;
  max-width: 52% !important;
}

body.taxi-home .service-area-copy h2 {
  color: #111318 !important;
}

body.taxi-home .service-area-copy > p {
  color: #68707b !important;
}

body.taxi-home .service-area-chips span,
body.taxi-home .service-area-chips a {
  border-color: rgba(23, 27, 34, .10) !important;
  background: rgba(255, 255, 255, .88) !important;
  color: #30343a !important;
  box-shadow: 0 8px 20px rgba(30, 33, 38, .05) !important;
}

body.taxi-home .service-area-chips img {
  filter: none !important;
  opacity: .72 !important;
}

body.taxi-home .service-area-map {
  position: absolute !important;
  z-index: 1 !important;
  inset: 0 0 0 auto !important;
  width: 60% !important;
  height: 100% !important;
  min-height: 100% !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #e9eef0 !important;
  opacity: 1 !important;
  filter: none !important;
}

body.taxi-home .service-area-map::before {
  content: "" !important;
  position: absolute !important;
  z-index: 3 !important;
  inset: 0 !important;
  pointer-events: none !important;
  background: linear-gradient(90deg, #fffdf8 0%, rgba(255, 253, 248, .92) 12%, rgba(255, 253, 248, .38) 32%, transparent 56%) !important;
}

body.taxi-home .service-area-map::after {
  content: "" !important;
  position: absolute !important;
  z-index: 3 !important;
  inset: 0 !important;
  pointer-events: none !important;
  background: linear-gradient(180deg, rgba(255, 253, 248, .08), transparent 30%, rgba(255, 253, 248, .06)) !important;
}

body.taxi-home #serviceAreaMap {
  position: absolute !important;
  z-index: 1 !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  opacity: 1 !important;
  filter: none !important;
}

body.taxi-home #serviceAreaMap .maplibregl-map,
body.taxi-home #serviceAreaMap .maplibregl-canvas-container,
body.taxi-home #serviceAreaMap .maplibregl-canvas {
  width: 100% !important;
  height: 100% !important;
}

body.taxi-home #serviceAreaMap .maplibregl-canvas {
  filter: saturate(.82) contrast(1.08) brightness(.98) !important;
}

body.taxi-home #serviceAreaMap .maplibregl-control-container {
  display: none !important;
}

@media (max-width: 900px) {
  body.taxi-home .service-area-copy {
    max-width: 70% !important;
  }

  body.taxi-home .service-area-map {
    width: 72% !important;
  }
}

@media (max-width: 720px) {
  body.taxi-home .service-area-inner {
    min-height: 650px !important;
    padding: 62px 16px 250px !important;
    display: block !important;
  }

  body.taxi-home .service-area-copy {
    max-width: 100% !important;
  }

  body.taxi-home .service-area-map {
    inset: auto 0 0 !important;
    width: 100% !important;
    height: 55% !important;
    min-height: 355px !important;
  }

  body.taxi-home .service-area-map::before {
    background: linear-gradient(180deg, #fffdf8 0%, rgba(255, 253, 248, .70) 18%, rgba(255, 253, 248, .12) 48%, transparent 76%) !important;
  }

  body.taxi-home .service-area-map::after {
    background: linear-gradient(90deg, rgba(255, 253, 248, .10), transparent 30%, rgba(255, 253, 248, .04)) !important;
  }
}