/* -----------------------------------------------------------------------
 * LUS Half-Map Mobile Collapse
 * On the Properties List half-map page, the filter sidebar's search form
 * (#advanced_search_map_list) can be collapsed behind a compact "Search
 * Options" pill, at every screen size — same technique as the hero
 * "Search Form Builder" widget (see lus-mobile-search-collapse.css/js).
 *
 * Default state differs by breakpoint, and needs no JS to look right on
 * load (no flash): collapsed at <=768px (original mobile behavior),
 * expanded above it. lus-half-map-mobile-collapse.js's expand()/collapse()
 * don't need to know which breakpoint is active — they always add
 * `.lus-half-map-force-expanded` / `.lus-half-map-collapsed-state`
 * respectively (removing the other), and each one's rule is written to
 * override that breakpoint's default wherever it's actually needed. See
 * that file's comment for why this makes every resize-across-breakpoint
 * case resolve correctly without a resize listener.
 * -------------------------------------------------------------------- */

.lus-half-map-pill {
  display: none;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 18px;
  background-color: #fff;
  border: 1px solid #e2e2e2;
  border-radius: 999px;
  font-size: 15px;
  color: #222;
  text-align: left;
  cursor: pointer;
}

/* Expanded is default above 768px: pill is hidden. */
#advanced_search_map_list.lus-half-map-collapsed-state .lus-half-map-pill {
  display: flex;
}

@media only screen and (max-width: 768px) {
  /* Collapsed is default at <=768px: pill shows unless explicitly
     force-expanded. */
  .lus-half-map-pill {
    display: flex;
  }
  #advanced_search_map_list.lus-half-map-force-expanded .lus-half-map-pill {
    display: none;
  }
}

.lus-half-map-pill-icon {
  flex: 0 0 auto;
  display: inline-flex;
  color: #e52737;
}

.lus-half-map-pill-text {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.6);
}

/* Animated expand/collapse of the real form, height-driven via the
   grid-template-rows 1fr <-> 0fr technique (no JS height measuring,
   works with the field list's natural/variable height). 1fr (expanded)
   is the unconditional default; the <=768px media query below flips that
   default to 0fr (collapsed), and the two JS-added override classes each
   force one state regardless of breakpoint. */
#advanced_search_map_list .advanced_search_map_list_container {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

#advanced_search_map_list.lus-half-map-collapsed-state .advanced_search_map_list_container {
  grid-template-rows: 0fr;
}

@media only screen and (max-width: 768px) {
  #advanced_search_map_list .advanced_search_map_list_container {
    grid-template-rows: 0fr;
  }
  #advanced_search_map_list.lus-half-map-force-expanded .advanced_search_map_list_container {
    grid-template-rows: 1fr;
  }
}

.lus-half-map-collapse-inner {
  min-height: 0;
  overflow: visible;
  opacity: 1;
  transition: opacity 0.2s ease;
}

/* overflow:hidden is needed whenever the row is at 0-height or actively
   animating between the two heights (".lus-half-map-expanding", briefly
   added by JS on every expand — including the mobile force-expand case)
   — without it, the not-yet-sized content would visibly overflow the
   shrunk/growing box mid-transition. Once fully settled at 1fr, overflow
   goes back to visible so popups spawned inside (guest-count dropdown,
   date range calendar) aren't clipped. */
#advanced_search_map_list.lus-half-map-collapsed-state .lus-half-map-collapse-inner,
#advanced_search_map_list.lus-half-map-expanding .lus-half-map-collapse-inner {
  overflow: hidden;
}

#advanced_search_map_list.lus-half-map-collapsed-state .lus-half-map-collapse-inner {
  opacity: 0;
}

@media only screen and (max-width: 768px) {
  .lus-half-map-collapse-inner {
    overflow: hidden;
    opacity: 0;
  }
  #advanced_search_map_list.lus-half-map-force-expanded .lus-half-map-collapse-inner {
    opacity: 1;
  }
  #advanced_search_map_list.lus-half-map-force-expanded:not(.lus-half-map-expanding) .lus-half-map-collapse-inner {
    overflow: visible;
  }
}

.lus-half-map-panel-header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 14px;
}

.lus-half-map-panel-close {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background-color: #f2f2f2;
  color: #222;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}