/* Mobile map opens first and keeps desktop-like framing of property markers. */
@media (max-width: 900px) {
  html {
    min-height: 100dvh !important;
    background: #fff !important;
  }

  body {
    min-height: 100dvh !important;
  }

  body.public-footer-reveal .public-page-surface {
    min-height: 100dvh !important;
    border-radius: 0 !important;
    background: #fff !important;
  }

  /* Keep the mobile search under the transparent navbar, a little higher. */
  body.map-mobile-show-map .map-search-experience {
    padding-top: calc(var(--public-navbar-height, 76px) - 4px) !important;
  }

  body.map-mobile-show-map .map-search-experience .map-page-toolbar.map-unified-toolbar {
    top: calc(var(--public-navbar-height, 76px) - 6px) !important;
    margin-top: 0 !important;
  }

  /* Remove the navbar surface when the user moves down through the mobile map/list. */
  body.map-mobile-show-map.map-navbar-bg-hidden > .site-header,
  body.map-mobile-show-map.map-navbar-bg-hidden .site-header {
    background: transparent !important;
    background-color: transparent !important;
    border-bottom-color: transparent !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  body.map-mobile-show-map .site-header {
    transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease, backdrop-filter .2s ease !important;
  }

  /* Mobile navigation drawer must be clean white instead of the legacy beige. */
  body.map-mobile-show-map:not(.dark):not(.dark-mode) .site-header .site-nav,
  body.map-mobile-show-map:not(.dark):not(.dark-mode) .site-header .site-nav.open,
  body.map-mobile-show-map:not(.dark):not(.dark-mode) .site-header .site-nav.active,
  body.map-mobile-show-map:not(.dark):not(.dark-mode) .site-header .nav-more__menu {
    background: #ffffff !important;
    background-color: #ffffff !important;
  }

  body.map-mobile-show-map:not(.dark):not(.dark-mode) .site-header .site-nav a,
  body.map-mobile-show-map:not(.dark):not(.dark-mode) .site-header .nav-more__trigger,
  body.map-mobile-show-map:not(.dark):not(.dark-mode) .site-header .nav-more__menu a {
    color: #071a33 !important;
    -webkit-text-fill-color: #071a33 !important;
  }

  body.map-mobile-show-map .map-canvas-panel {
    display: block !important;
    height: calc(100dvh - var(--public-navbar-height, 76px) - 132px) !important;
    min-height: 430px !important;
  }

  body.map-mobile-show-map .map-results-panel {
    display: none !important;
  }

  body.map-mobile-show-map .properties-map-full,
  body.map-mobile-show-map #propertiesMap {
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
  }

  .map-mobile-view-toggle {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }

  .map-mobile-view-toggle [data-map-mobile-view="map"] {
    order: 1;
  }

  .map-mobile-view-toggle [data-map-mobile-view="list"] {
    order: 2;
  }
}

@media (max-width: 560px) {
  body.map-mobile-show-map .map-search-experience {
    padding-top: calc(var(--public-navbar-height, 76px) - 6px) !important;
  }

  body.map-mobile-show-map .map-search-experience .map-page-toolbar.map-unified-toolbar {
    top: calc(var(--public-navbar-height, 76px) - 8px) !important;
  }

  body.map-mobile-show-map .map-canvas-panel {
    height: calc(100dvh - var(--public-navbar-height, 76px) - 118px) !important;
    min-height: 390px !important;
  }
}