/* Status public map UI v35
 * Single public-map control system loaded after Leaflet and every plugin CSS.
 * Leaflet retains all functionality; this file only normalizes geometry,
 * surfaces and placement under body.page-map.status-map-ui-v40.
 */

body.page-map.status-map-ui-v40 {
  --status-map-control-size: 40px;
  --status-map-icon-size: 22px;
  --status-map-control-gap: 7px;
  --status-map-control-radius: 9px;
  --status-map-control-surface: rgba(250, 251, 252, .74);
  --status-map-control-hover: rgba(250, 251, 252, .90);
  --status-map-control-border: rgba(33, 37, 41, .14);
  --status-map-control-text: #30363c;
  --status-map-control-shadow: 0 3px 10px rgba(15, 23, 42, .14);
  --status-map-control-filter: blur(8px) saturate(118%);
  --status-map-nav-height: 54px;
  --status-map-nav-surface: rgba(245, 248, 250, .30);
}

@media (max-width: 991.98px) {
  body.page-map.status-map-ui-v40 {
    --status-map-control-size: 42px;
    --status-map-icon-size: 23px;
    --status-map-control-surface: rgba(250, 251, 252, .76);
    --status-map-control-hover: rgba(250, 251, 252, .92);
  }
}

@media (max-width: 991.98px) and (orientation: landscape) {
  body.page-map.status-map-ui-v40 {
    --status-map-control-size: 40px;
    --status-map-icon-size: 22px;
    --status-map-control-gap: 6px;
  }
}

/* -------------------------------------------------------------------------
   Public map canvas and mobile bottom navigation
------------------------------------------------------------------------- */
@media (max-width: 767.98px) and (orientation: portrait) {
  body.page-map.status-map-ui-v40.status-has-mobile-nav #container {
    position: fixed !important;
    z-index: 0 !important;
    top: var(--status-navbar-height, 56px) !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  body.page-map.status-map-ui-v40.status-has-mobile-nav #image-map {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.page-map.status-map-ui-v40.status-has-mobile-nav .status-mobile-nav {
    position: fixed !important;
    z-index: 20100 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    box-sizing: border-box !important;
    height: calc(var(--status-map-nav-height) + var(--status-safe-bottom, 0px)) !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 2px max(3px, var(--status-safe-right, 0px)) var(--status-safe-bottom, 0px) max(3px, var(--status-safe-left, 0px)) !important;
    overflow: hidden !important;
    border: 0 !important;
    border-top: 1px solid rgba(255, 255, 255, .56) !important;
    border-radius: 0 !important;
    background: var(--status-map-nav-surface) !important;
    box-shadow: 0 -2px 8px rgba(15, 23, 42, .08) !important;
    backdrop-filter: blur(7px) saturate(108%) !important;
    -webkit-backdrop-filter: blur(7px) saturate(108%) !important;
  }

  body.page-map.status-map-ui-v40 .status-mobile-nav::before,
  body.page-map.status-map-ui-v40 .status-mobile-nav::after {
    content: none !important;
    display: none !important;
  }

  body.page-map.status-map-ui-v40 .status-mobile-nav-item,
  body.page-map.status-map-ui-v40 .status-mobile-nav-item:hover,
  body.page-map.status-map-ui-v40 .status-mobile-nav-item:focus,
  body.page-map.status-map-ui-v40 .status-mobile-nav-item:focus-visible {
    display: flex !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: 50px !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 1px 2px !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: rgba(39, 46, 53, .82) !important;
    text-decoration: none !important;
  }

  body.page-map.status-map-ui-v40 .status-mobile-nav-item.active,
  body.page-map.status-map-ui-v40 .status-mobile-nav-item.active:hover,
  body.page-map.status-map-ui-v40 .status-mobile-nav-item.active:focus-visible {
    background: rgba(13, 110, 253, .10) !important;
    color: #0b63ce !important;
  }

  body.page-map.status-map-ui-v40 .status-mobile-nav-icon,
  body.page-map.status-map-ui-v40 .status-mobile-nav-icon::before {
    width: 23px !important;
    height: 23px !important;
    margin: 0 !important;
    padding: 0 !important;
    font-family: "Material Design Icons" !important;
    font-size: 23px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 23px !important;
    color: currentColor !important;
  }

  body.page-map.status-map-ui-v40 .status-mobile-nav-label {
    margin: 0 !important;
    color: currentColor !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    line-height: 11px !important;
  }

  /* Leaflet defaults add 10px below every bottom control. Remove that extra
   * gap and place scale/attribution directly above the navigation surface. */
  /* Keep scale and attribution visually attached to the bottom navigation
   * instead of floating too high above it. A small overlap is intentional:
   * the navigation is translucent and remains the actual bottom-most UI. */
  body.page-map.status-map-ui-v40 #image-map .leaflet-bottom {
    bottom: calc(var(--status-map-nav-height) + var(--status-safe-bottom, 0px) - 11px) !important;
  }

  body.page-map.status-map-ui-v40 #image-map .leaflet-bottom .leaflet-control {
    margin-bottom: 0 !important;
  }

  body.page-map.status-map-ui-v40 .status-floating-dock {
    right: max(10px, var(--status-safe-right, 0px)) !important;
    bottom: calc(var(--status-map-nav-height) + var(--status-safe-bottom, 0px) + 7px) !important;
  }
}

@media (max-width: 991.98px) and (orientation: landscape) {
  body.page-map.status-map-ui-v40 .status-mobile-nav,
  body.page-map.status-map-ui-v40 .status-mobile-event-title {
    display: none !important;
  }

  body.page-map.status-map-ui-v40 #container,
  body.page-map.status-map-ui-v40 #image-map {
    bottom: 0 !important;
  }

  body.page-map.status-map-ui-v40 #image-map .leaflet-bottom {
    bottom: max(0px, var(--status-safe-bottom, 0px)) !important;
  }

  body.page-map.status-map-ui-v40 #image-map .leaflet-bottom .leaflet-control {
    margin-bottom: 0 !important;
  }

  body.page-map.status-map-ui-v40 .status-floating-dock {
    right: max(9px, var(--status-safe-right, 0px)) !important;
    bottom: max(44px, calc(var(--status-safe-bottom, 0px) + 42px)) !important;
  }
}

/* -------------------------------------------------------------------------
   Leaflet control positioning and neutral wrappers
------------------------------------------------------------------------- */
body.page-map.status-map-ui-v40 #image-map .leaflet-control-container .leaflet-top .leaflet-control {
  margin-top: var(--status-map-control-gap) !important;
  margin-bottom: 0 !important;
}

body.page-map.status-map-ui-v40 #image-map .leaflet-control-container .leaflet-left .leaflet-control {
  margin-left: max(10px, var(--status-safe-left, 0px)) !important;
  margin-right: 0 !important;
}

body.page-map.status-map-ui-v40 #image-map .leaflet-control-container .leaflet-right .leaflet-control {
  margin-right: max(10px, var(--status-safe-right, 0px)) !important;
  margin-left: 0 !important;
}

body.page-map.status-map-ui-v40 #image-map .leaflet-control-container .leaflet-bar,
body.page-map.status-map-ui-v40 #image-map .leaflet-control-container .leaflet-control-zoom,
body.page-map.status-map-ui-v40 #image-map .leaflet-control-container .leaflet-control-locate,
body.page-map.status-map-ui-v40 #image-map .leaflet-control-container .leaflet-control-fullscreen,
body.page-map.status-map-ui-v40 #image-map .leaflet-control-container .easy-button-container,
body.page-map.status-map-ui-v40 #image-map .leaflet-control-container .geocoder-control,
body.page-map.status-map-ui-v40 #image-map .leaflet-control-container .leaflet-control-layers,
body.page-map.status-map-ui-v40 #image-map .leaflet-control-container .status-map-actions-control {
  box-sizing: border-box !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* -------------------------------------------------------------------------
   One visual surface for every clickable map action
------------------------------------------------------------------------- */
body.page-map.status-map-ui-v40 #image-map .leaflet-control-container .leaflet-control-zoom.leaflet-bar {
  display: flex !important;
  width: var(--status-map-control-size) !important;
  flex-direction: column !important;
  gap: 0 !important;
  overflow: hidden !important;
  border: 1px solid var(--status-map-control-border) !important;
  border-radius: var(--status-map-control-radius) !important;
  background: var(--status-map-control-surface) !important;
  box-shadow: var(--status-map-control-shadow) !important;
  backdrop-filter: var(--status-map-control-filter) !important;
  -webkit-backdrop-filter: var(--status-map-control-filter) !important;
}

body.page-map.status-map-ui-v40 #image-map .leaflet-control-zoom > a,
body.page-map.status-map-ui-v40 #image-map .leaflet-control-zoom > button,
body.page-map.status-map-ui-v40 #image-map .leaflet-control-locate > a,
body.page-map.status-map-ui-v40 #image-map .leaflet-control-fullscreen > a,
body.page-map.status-map-ui-v40 #image-map .easy-button-container > button,
body.page-map.status-map-ui-v40 #image-map .leaflet-control-layers-toggle,
body.page-map.status-map-ui-v40 #image-map .status-map-actions-trigger,
body.page-map.status-map-ui-v40 #image-map .geocoder-control:not(.geocoder-control-expanded) .geocoder-control-input {
  box-sizing: border-box !important;
  display: flex !important;
  width: var(--status-map-control-size) !important;
  min-width: var(--status-map-control-size) !important;
  max-width: var(--status-map-control-size) !important;
  height: var(--status-map-control-size) !important;
  min-height: var(--status-map-control-size) !important;
  max-height: var(--status-map-control-size) !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid var(--status-map-control-border) !important;
  border-radius: var(--status-map-control-radius) !important;
  background-color: var(--status-map-control-surface) !important;
  box-shadow: var(--status-map-control-shadow) !important;
  color: var(--status-map-control-text) !important;
  font-size: var(--status-map-icon-size) !important;
  line-height: var(--status-map-control-size) !important;
  text-align: center !important;
  text-decoration: none !important;
  backdrop-filter: var(--status-map-control-filter) !important;
  -webkit-backdrop-filter: var(--status-map-control-filter) !important;
}

body.page-map.status-map-ui-v40 #image-map .leaflet-control-zoom > a,
body.page-map.status-map-ui-v40 #image-map .leaflet-control-zoom > button {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}


body.page-map.status-map-ui-v40 #image-map .leaflet-control-container .leaflet-control-zoom.leaflet-bar > a:hover,
body.page-map.status-map-ui-v40 #image-map .leaflet-control-container .leaflet-control-zoom.leaflet-bar > a:focus-visible,
body.page-map.status-map-ui-v40 #image-map .leaflet-control-container .leaflet-control-zoom.leaflet-bar > button:hover,
body.page-map.status-map-ui-v40 #image-map .leaflet-control-container .leaflet-control-zoom.leaflet-bar > button:focus-visible {
  background: rgba(255, 255, 255, .28) !important;
}
/* Keep the +, - and fullscreen actions as one control while drawing a
 * crisp separator between every adjacent action. A top border avoids the
 * old negative-margin overlap that hid the lines on some mobile displays. */
body.page-map.status-map-ui-v40 #image-map .leaflet-control-zoom.leaflet-bar > :not(:first-child) {
  margin-top: 0 !important;
  border-top: 1px solid var(--status-map-control-border) !important;
}

body.page-map.status-map-ui-v40 #image-map .leaflet-control-container a:hover,
body.page-map.status-map-ui-v40 #image-map .leaflet-control-container a:focus-visible,
body.page-map.status-map-ui-v40 #image-map .leaflet-control-container button:hover,
body.page-map.status-map-ui-v40 #image-map .leaflet-control-container button:focus-visible,
body.page-map.status-map-ui-v40 #image-map .geocoder-control-input:hover,
body.page-map.status-map-ui-v40 #image-map .geocoder-control-input:focus-visible {
  border-color: rgba(33, 37, 41, .24) !important;
  background-color: var(--status-map-control-hover) !important;
  color: var(--status-map-control-text) !important;
  outline: 0 !important;
  text-shadow: none !important;
}

body.page-map.status-map-ui-v40 #image-map .leaflet-disabled,
body.page-map.status-map-ui-v40 #image-map .leaflet-disabled:hover {
  background-color: rgba(250, 251, 252, .42) !important;
  color: rgba(33, 37, 41, .42) !important;
}

/* Leaflet-owned controls keep their bundled plugin icons. Custom Status
 * controls use MDI below. Do not replace plugin artwork with pseudo-elements. */

body.page-map.status-map-ui-v40 #image-map .easy-button-container .button-state,
body.page-map.status-map-ui-v40 #image-map .easy-button-container .mdi,
body.page-map.status-map-ui-v40 #image-map .status-map-actions-trigger .mdi,
body.page-map.status-map-ui-v40 #image-map .status-leaflet-locate-icon,
body.page-map.status-map-ui-v40 #image-map .status-leaflet-locate-spinner {
  display: inline-flex !important;
  width: 100% !important;
  height: 100% !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: var(--status-map-icon-size) !important;
  line-height: 1 !important;
  color: var(--status-map-control-text) !important;
}

body.page-map.status-map-ui-v40 #image-map .status-leaflet-locate-spinner {
  width: 17px !important;
  height: 17px !important;
  font-size: 17px !important;
}

body.page-map.status-map-ui-v40 #image-map .leaflet-control-locate.active > a,
body.page-map.status-map-ui-v40 #image-map .leaflet-control-locate.status-locate-success > a,
body.page-map.status-map-ui-v40 #image-map .leaflet-control-locate.active .status-leaflet-locate-icon,
body.page-map.status-map-ui-v40 #image-map .leaflet-control-locate.status-locate-success .status-leaflet-locate-icon {
  color: var(--status-map-control-text) !important;
}
body.page-map.status-map-ui-v40 #image-map .leaflet-control-locate.active > a,
body.page-map.status-map-ui-v40 #image-map .leaflet-control-locate.status-locate-success > a {
  border-color: rgba(25, 135, 84, .42) !important;
}


body.page-map.status-map-ui-v40 #image-map .leaflet-control-locate.status-locate-warning > a {
  border-color: rgba(255, 152, 0, .58) !important;
}
/* -------------------------------------------------------------------------
   Geocoder: retain the bundled Esri/Leaflet search icon and only normalize
   geometry/surface. No pseudo-element or generated icon is used.
------------------------------------------------------------------------- */
body.page-map.status-map-ui-v40 #image-map .geocoder-control {
  position: relative !important;
  width: var(--status-map-control-size) !important;
  min-width: var(--status-map-control-size) !important;
  max-width: var(--status-map-control-size) !important;
  height: var(--status-map-control-size) !important;
  min-height: var(--status-map-control-size) !important;
  max-height: var(--status-map-control-size) !important;
  transition: width .15s ease !important;
}

body.page-map.status-map-ui-v40 #image-map .geocoder-control .geocoder-control-input {
  position: absolute !important;
  inset: 0 !important;
  box-sizing: border-box !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid var(--status-map-control-border) !important;
  border-radius: var(--status-map-control-radius) !important;
  background-color: var(--status-map-control-surface) !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 28px 28px !important;
  box-shadow: var(--status-map-control-shadow) !important;
  color: transparent !important;
  caret-color: transparent !important;
  text-indent: 0 !important;
  backdrop-filter: var(--status-map-control-filter) !important;
  -webkit-backdrop-filter: var(--status-map-control-filter) !important;
}

body.page-map.status-map-ui-v40 #image-map .geocoder-control.geocoder-control-expanded {
  width: min(280px, calc(100vw - 76px - var(--status-safe-left, 0px) - var(--status-safe-right, 0px))) !important;
  min-width: 0 !important;
  max-width: calc(100vw - 76px - var(--status-safe-left, 0px) - var(--status-safe-right, 0px)) !important;
}

body.page-map.status-map-ui-v40 #image-map .geocoder-control.geocoder-control-expanded .geocoder-control-input {
  width: 100% !important;
  padding: 0 var(--status-map-control-size) 0 12px !important;
  background-color: rgba(250, 251, 252, .88) !important;
  background-position: right center !important;
  color: var(--status-map-control-text) !important;
  caret-color: auto !important;
  font-size: 16px !important;
  line-height: normal !important;
}

body.page-map.status-map-ui-v40 #image-map .geocoder-control-suggestions,
body.page-map.status-map-ui-v40 #image-map .leaflet-control-layers-expanded,
body.page-map.status-map-ui-v40 #image-map .status-map-actions-menu {
  max-width: min(320px, calc(100vw - 20px)) !important;
  margin-top: 6px !important;
  overflow: auto !important;
  border: 1px solid var(--status-map-control-border) !important;
  border-radius: var(--status-map-control-radius) !important;
  background: rgba(250, 251, 252, .92) !important;
  box-shadow: 0 5px 18px rgba(15, 23, 42, .16) !important;
  backdrop-filter: blur(8px) saturate(112%) !important;
  -webkit-backdrop-filter: blur(8px) saturate(112%) !important;
}

body.page-map.status-map-ui-v40 #image-map .geocoder-control-suggestions {
  top: calc(var(--status-map-control-size) + 6px) !important;
  width: 100% !important;
  max-height: min(45vh, 320px) !important;
  margin: 0 !important;
}


/* One icon colour for every non-connectivity map control. */
body.page-map.status-map-ui-v40 #image-map .leaflet-control-container .mdi,
body.page-map.status-map-ui-v40 #image-map .leaflet-control-container .mdi::before,
body.page-map.status-map-ui-v40 #image-map .leaflet-control-container .material-icons,
body.page-map.status-map-ui-v40 #image-map .leaflet-control-container .button-state,
body.page-map.status-map-ui-v40 #image-map .leaflet-control-container .status-leaflet-locate-icon,
body.page-map.status-map-ui-v40 #image-map .leaflet-control-container .status-leaflet-locate-spinner {
  color: var(--status-map-control-text) !important;
  fill: currentColor !important;
}

/* -------------------------------------------------------------------------
   Connectivity button: same geometry, semantic green surface
------------------------------------------------------------------------- */
body.page-map.status-map-ui-v40 .status-floating-dock {
  z-index: 20040 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: var(--status-map-control-gap) !important;
}
body.page-map.status-map-ui-v40 .status-floating-dock > .status-location-shell {
  display: none !important;
}
body.page-map.status-map-ui-v40 .status-connectivity {
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
body.page-map.status-map-ui-v40 .status-connectivity-main {
  box-sizing: border-box !important;
  display: inline-flex !important;
  width: var(--status-map-control-size) !important;
  min-width: var(--status-map-control-size) !important;
  max-width: var(--status-map-control-size) !important;
  height: var(--status-map-control-size) !important;
  min-height: var(--status-map-control-size) !important;
  max-height: var(--status-map-control-size) !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid var(--status-map-control-border) !important;
  border-radius: var(--status-map-control-radius) !important;
  background: var(--status-map-control-surface) !important;
  box-shadow: var(--status-map-control-shadow) !important;
  backdrop-filter: var(--status-map-control-filter) !important;
  -webkit-backdrop-filter: var(--status-map-control-filter) !important;
}
body.page-map.status-map-ui-v40 .status-connectivity-icon,
body.page-map.status-map-ui-v40 .status-connectivity-icon::before {
  display: block !important;
  width: var(--status-map-icon-size) !important;
  height: var(--status-map-icon-size) !important;
  margin: 0 !important;
  padding: 0 !important;
  font-family: "Material Design Icons" !important;
  font-size: var(--status-map-icon-size) !important;
  line-height: var(--status-map-icon-size) !important;
  color: var(--status-map-control-text) !important;
}
body.page-map.status-map-ui-v40 .status-connectivity.is-online .status-connectivity-main {
  border-color: rgba(25, 135, 84, .42) !important;
}
body.page-map.status-map-ui-v40 .status-connectivity.is-offline .status-connectivity-main,
body.page-map.status-map-ui-v40 .status-connectivity.is-cached .status-connectivity-main {
  border-color: rgba(178, 106, 0, .48) !important;
}

body.page-map.status-map-ui-v40 .status-connectivity:not(.is-expanded) .status-connectivity-dot,
body.page-map.status-map-ui-v40 .status-connectivity:not(.is-expanded) .status-connectivity-label,
body.page-map.status-map-ui-v40 .status-connectivity:not(.is-expanded) .status-connectivity-meta,
body.page-map.status-map-ui-v40 .status-connectivity:not(.is-expanded) .status-connectivity-actions {
  display: none !important;
}

/* Compact landscape menu button remains dark but uses the same size/radius. */
@media (max-width: 991.98px) and (orientation: landscape) {
  body.page-map.status-map-ui-v40.status-compact-landscape .status-navbar .navbar-toggler {
    box-sizing: border-box !important;
    width: var(--status-map-control-size) !important;
    min-width: var(--status-map-control-size) !important;
    height: var(--status-map-control-size) !important;
    min-height: var(--status-map-control-size) !important;
    padding: 0 !important;
    border: 1px solid rgba(255, 255, 255, .18) !important;
    border-radius: var(--status-map-control-radius) !important;
    background: rgba(52, 58, 64, .72) !important;
    box-shadow: var(--status-map-control-shadow) !important;
    backdrop-filter: var(--status-map-control-filter) !important;
    -webkit-backdrop-filter: var(--status-map-control-filter) !important;
  }
}


/* R29: the Esri input is still the clickable/search field, but the visible
 * collapsed icon is a real MDI node inserted by status_map_functions.js. This
 * avoids relying on the geocoder background image, which was repeatedly lost
 * when plugin CSS and normalized control geometry interacted. */
body.page-map.status-map-ui-v40 #image-map .geocoder-control .geocoder-control-input {
  background-image: none !important;
}

body.page-map.status-map-ui-v40 #image-map .geocoder-control .status-geocoder-mdi-icon {
  position: absolute !important;
  z-index: 3 !important;
  top: 50% !important;
  left: 50% !important;
  display: inline-flex !important;
  width: var(--status-map-control-size) !important;
  height: var(--status-map-control-size) !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--status-map-control-text) !important;
  font-size: var(--status-map-icon-size) !important;
  line-height: 1 !important;
  transform: translate(-50%, -50%) !important;
  pointer-events: none !important;
}

body.page-map.status-map-ui-v40 #image-map .geocoder-control.geocoder-control-expanded .status-geocoder-mdi-icon {
  right: 0 !important;
  left: auto !important;
  transform: translateY(-50%) !important;
}

body.page-map.status-map-ui-v40 #image-map .geocoder-control .status-geocoder-mdi-icon::before {
  font-size: inherit !important;
  line-height: 1 !important;
}


/* R30: one icon colour for every public map control and a persistent
 * geocoder glyph in both collapsed and expanded states. */
body.page-map.status-map-ui-v40 {
  --status-map-icon-color: #212529;
}

body.page-map.status-map-ui-v40 #image-map .leaflet-control-container .mdi,
body.page-map.status-map-ui-v40 #image-map .leaflet-control-container .material-icons,
body.page-map.status-map-ui-v40 #image-map .leaflet-control-container .status-leaflet-locate-icon,
body.page-map.status-map-ui-v40 #image-map .leaflet-control-container .status-geocoder-mdi-icon,
body.page-map.status-map-ui-v40 #image-map .leaflet-control-container .leaflet-control-zoom a,
body.page-map.status-map-ui-v40 #image-map .leaflet-control-container .leaflet-control-fullscreen a,
body.page-map.status-map-ui-v40 #image-map .leaflet-control-container .leaflet-control-layers-toggle,
body.page-map.status-map-ui-v40 #image-map .leaflet-control-container .status-map-actions-trigger,
body.page-map.status-map-ui-v40 .status-connectivity-icon {
  color: var(--status-map-icon-color) !important;
  opacity: 1 !important;
  filter: none !important;
  text-shadow: none !important;
  -webkit-text-fill-color: var(--status-map-icon-color) !important;
}

body.page-map.status-map-ui-v40 #image-map .geocoder-control {
  position: relative !important;
}

body.page-map.status-map-ui-v40 #image-map .geocoder-control .status-geocoder-mdi-icon {
  z-index: 20 !important;
  color: var(--status-map-icon-color) !important;
  opacity: 1 !important;
  visibility: visible !important;
  font-size: var(--status-map-icon-size) !important;
  -webkit-text-fill-color: var(--status-map-icon-color) !important;
}

body.page-map.status-map-ui-v40 #image-map .geocoder-control.geocoder-control-expanded .status-geocoder-mdi-icon {
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: auto !important;
  width: var(--status-map-control-size) !important;
  height: var(--status-map-control-size) !important;
  transform: none !important;
}

body.page-map.status-map-ui-v40 #image-map .geocoder-control.geocoder-control-expanded .geocoder-control-input {
  padding-right: calc(var(--status-map-control-size) + 4px) !important;
}

body.page-map.status-map-ui-v40 #image-map .geocoder-control.geocoder-control-expanded .status-geocoder-mdi-icon::before,
body.page-map.status-map-ui-v40 #image-map .geocoder-control:not(.geocoder-control-expanded) .status-geocoder-mdi-icon::before {
  display: block !important;
  color: var(--status-map-icon-color) !important;
  opacity: 1 !important;
}

body.page-map.status-map-ui-v40 #image-map .leaflet-control-container a:hover .mdi,
body.page-map.status-map-ui-v40 #image-map .leaflet-control-container a:focus-visible .mdi,
body.page-map.status-map-ui-v40 #image-map .leaflet-control-container button:hover .mdi,
body.page-map.status-map-ui-v40 #image-map .leaflet-control-container button:focus-visible .mdi,
body.page-map.status-map-ui-v40 #image-map .geocoder-control-input:hover + .status-geocoder-mdi-icon,
body.page-map.status-map-ui-v40 #image-map .geocoder-control-input:focus + .status-geocoder-mdi-icon {
  color: var(--status-map-icon-color) !important;
  opacity: 1 !important;
  -webkit-text-fill-color: var(--status-map-icon-color) !important;
}


/* -------------------------------------------------------------------------
   R35: mobile layers wrapper and bottom-control ordering
------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  html body.page-map.status-map-ui-v40 #image-map.leaflet-touch .leaflet-control-container .leaflet-control-layers:not(.leaflet-control-layers-expanded),
  html body.page-map.status-map-ui-v40 #image-map .leaflet-control-container .leaflet-control-layers:not(.leaflet-control-layers-expanded) {
    box-sizing: border-box !important;
    display: block !important;
    width: var(--status-map-control-size) !important;
    min-width: var(--status-map-control-size) !important;
    max-width: var(--status-map-control-size) !important;
    height: var(--status-map-control-size) !important;
    min-height: var(--status-map-control-size) !important;
    max-height: var(--status-map-control-size) !important;
    margin-left: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: var(--status-map-control-radius) !important;
    background: transparent !important;
    background-clip: border-box !important;
    box-shadow: none !important;
    line-height: 0 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  html body.page-map.status-map-ui-v40 #image-map .leaflet-control-container .leaflet-control-layers:not(.leaflet-control-layers-expanded)::before,
  html body.page-map.status-map-ui-v40 #image-map .leaflet-control-container .leaflet-control-layers:not(.leaflet-control-layers-expanded)::after {
    content: none !important;
    display: none !important;
  }

  html body.page-map.status-map-ui-v40 #image-map .leaflet-control-container .leaflet-control-layers-toggle {
    display: block !important;
    float: none !important;
    width: var(--status-map-control-size) !important;
    min-width: var(--status-map-control-size) !important;
    max-width: var(--status-map-control-size) !important;
    height: var(--status-map-control-size) !important;
    min-height: var(--status-map-control-size) !important;
    max-height: var(--status-map-control-size) !important;
    margin: 0 !important;
  }
}

/* The connectivity button sits above the two Leaflet bottom labels. Scale and
 * attribution stay closest to the bottom navigation / safe area and can no
 * longer share the same vertical band with the online control. */
@media (max-width: 767.98px) and (orientation: portrait) {
  body.page-map.status-map-ui-v40 #image-map .leaflet-bottom {
    bottom: 0 !important;
  }

  body.page-map.status-map-ui-v40 #image-map .leaflet-bottom .leaflet-control {
    margin-bottom: 0 !important;
  }

  body.page-map.status-map-ui-v40 .status-floating-dock {
    bottom: calc(var(--status-map-nav-height) + var(--status-safe-bottom, 0px) + var(--status-map-control-size) + 10px) !important;
  }
}

@media (max-width: 991.98px) and (orientation: landscape) {
  body.page-map.status-map-ui-v40 #image-map .leaflet-bottom {
    bottom: max(1px, var(--status-safe-bottom, 0px)) !important;
  }

  body.page-map.status-map-ui-v40 #image-map .leaflet-bottom .leaflet-control {
    margin-bottom: 0 !important;
  }

  body.page-map.status-map-ui-v40 .status-floating-dock {
    bottom: calc(max(1px, var(--status-safe-bottom, 0px)) + var(--status-map-control-size) + 10px) !important;
  }
}


/* -------------------------------------------------------------------------
   R37: reliable location-state UI and fixed-chrome gesture isolation
------------------------------------------------------------------------- */
body.page-map.status-map-ui-v40 .status-mobile-nav,
body.page-map.status-map-ui-v40 .status-navbar,
body.page-map.status-map-ui-v40 .status-floating-dock,
body.page-map.status-map-ui-v40 #image-map .leaflet-control-container a,
body.page-map.status-map-ui-v40 #image-map .leaflet-control-container button,
body.page-map.status-map-ui-v40 #image-map .leaflet-control-layers-toggle,
body.page-map.status-map-ui-v40 #image-map .geocoder-control-input {
  touch-action: none !important;
  -webkit-user-select: none !important;
  user-select: none !important;
}

/* Make the requesting state deterministic even if LocateControl swaps its
 * classes immediately after the Status state renderer. */
body.page-map.status-map-ui-v40 #image-map .leaflet-control-locate.status-locate-requesting > a,
body.page-map.status-map-ui-v40 #image-map .leaflet-control-locate.requesting > a {
  position: relative !important;
  border-color: rgba(13, 110, 253, .44) !important;
  background: rgba(236, 244, 255, .88) !important;
}

body.page-map.status-map-ui-v40 #image-map .status-leaflet-locate-spinner,
body.page-map.status-map-ui-v40 #image-map .status-leaflet-locate-spinner::before,
body.page-map.status-map-ui-v40 #image-map .leaflet-control-locate.requesting .mdi-loading,
body.page-map.status-map-ui-v40 #image-map .leaflet-control-locate.requesting .mdi-loading::before {
  display: inline-flex !important;
  width: 18px !important;
  height: 18px !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: "Material Design Icons" !important;
  font-size: 18px !important;
  line-height: 18px !important;
  color: #0d6efd !important;
  opacity: 1 !important;
  visibility: visible !important;
  animation: mdi-spin .8s infinite linear !important;
  -webkit-animation: mdi-spin .8s infinite linear !important;
  transform-origin: center center !important;
}

/* Sharing is visible at a glance without changing the primary glyph colour. */
body.page-map.status-map-ui-v40 #image-map .leaflet-control-locate.status-locate-success > a,
body.page-map.status-map-ui-v40 #image-map .leaflet-control-locate.active > a,
body.page-map.status-map-ui-v40 #image-map .leaflet-control-locate.following > a {
  position: relative !important;
  border-color: rgba(25, 135, 84, .62) !important;
  background: rgba(231, 247, 238, .90) !important;
  box-shadow: var(--status-map-control-shadow), inset 0 0 0 1px rgba(25, 135, 84, .12) !important;
}

body.page-map.status-map-ui-v40 #image-map .leaflet-control-locate.status-locate-success > a::after,
body.page-map.status-map-ui-v40 #image-map .leaflet-control-locate.active > a::after,
body.page-map.status-map-ui-v40 #image-map .leaflet-control-locate.following > a::after {
  content: '' !important;
  position: absolute !important;
  top: 5px !important;
  right: 5px !important;
  width: 7px !important;
  height: 7px !important;
  border: 1px solid rgba(255,255,255,.95) !important;
  border-radius: 50% !important;
  background: #198754 !important;
  box-shadow: 0 0 0 1px rgba(25,135,84,.22) !important;
  pointer-events: none !important;
}

body.page-map.status-map-ui-v40 #image-map .leaflet-control-locate.status-locate-warning > a {
  border-color: rgba(217, 119, 6, .56) !important;
  background: rgba(255, 248, 230, .90) !important;
}

body.page-map.status-map-ui-v40 #image-map .leaflet-control-locate.status-locate-error > a {
  border-color: rgba(220, 53, 69, .58) !important;
  background: rgba(255, 238, 240, .92) !important;
}

/* Accuracy geometry must remain visible above tiles and below the own marker. */
body.page-map.status-map-ui-v40 #image-map .status-own-location-accuracy-pane {
  z-index: 430 !important;
  pointer-events: none !important;
}
body.page-map.status-map-ui-v40 #image-map .status-own-location-marker-pane {
  z-index: 590 !important;
}
body.page-map.status-map-ui-v40 #image-map .status-own-location-accuracy {
  pointer-events: none !important;
  mix-blend-mode: normal !important;
}