/* -----------------------------------------------------------------------
 * LUS Map Collapse
 * On the "Properties List - Half Map" layout (half_map_core.php —
 * #google_map_prop_list_wrapper next to #google_map_prop_list_sidebar),
 * adds a floating pill button that hides the map panel so the listing
 * column can take the full width, at every screen size. On laptop/desktop
 * widths, freeing up the map's ~45-55% of the viewport leaves roughly as
 * much room per card as the single column had before, so while collapsed
 * (body.lus-map-collapsed) the listing grid there switches from one card
 * per row to two, with each card's existing layout left untouched. Below
 * that breakpoint the map simply hides and the list stays a single column,
 * same as it already behaves without a map panel. Pure CSS/JS on top of
 * the plugin's existing markup — no plugin/parent theme files touched.
 * -------------------------------------------------------------------- */

.lus-map-toggle {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 9999;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: #222;
  color: #fff;
  border: none;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28);
  transition: bottom 0.2s ease, background-color 0.15s ease;
}

.lus-map-toggle:hover,
.lus-map-toggle:focus-visible {
  background: #000;
}

.lus-map-toggle svg {
  flex: none;
}

/* Nothing to "collapse" once the map's own fullscreen button already
   covers the whole viewport. */
body:has(#google_map_prop_list_wrapper.halfmapfull) .lus-map-toggle {
  display: none;
}

/* ---- Desktop/tablet: the map is a fixed side panel next to the sidebar ---- */
@media only screen and (min-width: 992px) {
  body.lus-map-collapsed #google_map_prop_list_wrapper {
    display: none;
  }

  body.lus-map-collapsed #google_map_prop_list_sidebar {
    width: 100%;
    left: 0;
    right: 0;
  }
}

/* ---- Mobile/tablet: the map sits in normal flow above the listing ---- */
@media only screen and (max-width: 991px) {
  body.lus-map-collapsed #google_map_prop_list_wrapper {
    display: none;
  }

  /* Parent-theme bug fix: at <=1180px my_media.css gives the admin-bar
     case `top: 102px !important` on both the map wrapper AND the sidebar
     (correct while they're position:fixed panels that must clear the WP
     admin bar). At <=991px both become position:relative — and the theme
     re-zeroes the WRAPPER (`.admin-bar #google_map_prop_list_wrapper
     { top: 0px!important }`) but forgot the SIDEBAR, leaving it
     relatively shifted 102px down: a visible gap between the map and the
     filters, only for logged-in users. Zero it the same way. */
  .admin-bar #google_map_prop_list_sidebar {
    top: 0px !important;
  }
}

/* ---- Two cards per row while the map is collapsed, laptop/desktop only ----
   Cards keep their existing layout untouched — only the grid changes. */
@media only screen and (min-width: 992px) {
  body.lus-map-collapsed #listing_ajax_container {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
  }

  body.lus-map-collapsed #listing_ajax_container > .entry-title,
  body.lus-map-collapsed #listing_ajax_container > .single-content {
    flex: 0 0 100%;
    width: 100%;
  }

  body.lus-map-collapsed #listing_ajax_container > .listing_wrapper {
    flex: 0 0 calc(50% - 12px);
    max-width: calc(50% - 12px);
  }
}

/* ---- Narrow, centered search form while the map is collapsed, 1200px+ ----
   The full-width sidebar (rule above) is fine for the card grid, but the
   search form alone looks stretched-out edge to edge at that width — just
   the form narrows to a centered 60% column; the card list below is
   untouched. float:none is needed for margin:auto centering to apply —
   the base #advanced_search_map_list rule (parent style.css) floats it
   right. The sidebar itself defaults to an off-white #FCFCFC (parent
   style.css), a shade different enough from the form's own white to show
   as a visible band on either side of the centered 60% column — set to
   true white here too so the whole strip reads as one seamless block. */
@media only screen and (min-width: 1200px) {
  body.lus-map-collapsed #google_map_prop_list_sidebar {
    background-color: #fff;
  }

  body.lus-map-collapsed #advanced_search_map_list {
    width: 60%;
    float: none;
    margin: 0 auto;
    background-color: #fff;
  }
}