/* ========================================================================
   ELIKA Site Modernizer 9.6.8 — mobile Property Search containment

   Keep the RealPlus search inside the visual viewport and let the expanded
   neighborhood chooser participate in the form flow. This prevents the
   submit/reset controls from covering neighborhood rows on small screens.
   Desktop search geometry is intentionally untouched.
   ======================================================================== */

@media (max-width: 700px) {
  html:has(body.elika-property-search-modern),
  html body.elika-property-search-modern {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: clip !important;
    overscroll-behavior-x: none !important;
  }

  html body.elika-property-search-modern :is(
    #page,
    .site-inner,
    .site-content,
    .site-content > .cs-container,
    #content.main-content,
    #canvas-content.entry-content,
    #eps-search-app,
    #eps-search-app > .wp-block-group__inner-container
  ) {
    right: auto !important;
    left: auto !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    transform: none !important;
  }

  html body.elika-property-search-modern #eps-search-app {
    padding-right: 12px !important;
    padding-left: 12px !important;
    overflow-x: clip !important;
  }

  html body.elika-property-search-modern #eps-search-app :is(
    .vc_rpcontainer,
    #vcrp_search,
    #vcrp_search > .four.fields,
    #vcrp_search > .four.fields > .field,
    #vcrp_search .Home-searchAreaWrapper,
    #vcrp_search .Home-searchField,
    #vcrp_search .SearchAreasDropdown,
    #vcrp_search .SearchAreasDropdown-textInputContainer,
    #vcrp_search .SearchAreasDropdown-areasListContainer,
    #vcrp_search .Collapsible
  ) {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  html body.elika-property-search-modern #eps-search-app #vcrp_search {
    padding-right: 14px !important;
    padding-left: 14px !important;
    overflow: visible !important;
  }

  /* The closed address field remains compact. Once opened, its dropdown is
     placed in normal flow so the remaining search controls move below it. */
  html body.elika-property-search-modern #eps-search-app #vcrp_search
  .Home-searchField:has(.SearchAreasDropdown.isActive) {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  html body.elika-property-search-modern #eps-search-app #vcrp_search
  .SearchAreasDropdown.isActive .SearchAreasDropdown-areasListContainer {
    position: relative !important;
    inset: auto !important;
    z-index: 20 !important;
    display: block !important;
    max-height: none !important;
    overflow: visible !important;
    background: #fff !important;
    transform: none !important;
  }

  html body.elika-property-search-modern #eps-search-app #vcrp_search
  .SearchAreasDropdown.isActive .Collapsible {
    max-height: min(58dvh, 520px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-gutter: stable !important;
  }

  html body.elika-property-search-modern #eps-search-app #vcrp_search
  :is(.Collapsible-trigger, .Collapsible-body, .Collapsible-body > ul,
      .Collapsible-checkbox, .Collapsible-checkboxLabel, .jsSearchAreaItem) {
    box-sizing: border-box !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  html body.elika-property-search-modern #eps-search-app #vcrp_search
  .Collapsible-checkboxLabel {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  /* RealPlus's search-within-neighborhood button belongs after the scrollable
     choices and must never float over a checkbox row. */
  html body.elika-property-search-modern #eps-search-app #vcrp_search
  :is(.SearchAreasDropdown-searchButton, .SearchAreasDropdown-showAllLink) {
    position: static !important;
    inset: auto !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    transform: none !important;
  }

  /* Keep selected criteria inside the form. Wrapping is calmer and more
     discoverable on phones than allowing one long row to widen the page. */
  html body.elika-property-search-modern #eps-search-app #vcrp_search
  .eps-filter-summary {
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    gap: 12px !important;
    overflow: hidden !important;
  }

  html body.elika-property-search-modern #eps-search-app #vcrp_search
  .eps-active-filters {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding-bottom: 0 !important;
    overflow: visible !important;
  }

  html body.elika-property-search-modern #eps-search-app #vcrp_search
  .eps-filter-chip {
    flex: 0 1 auto !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  html body.elika-property-search-modern #eps-search-app #vcrp_search
  .eps-clear-all {
    justify-self: start !important;
  }

  html body.elika-property-search-modern #eps-search-app #vcrp_search
  :is(.em-property-options-strip--v77, .em-property-options-left--v77,
      .em-property-options-list--v77, .em-property-options-right--v77) {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  html body.elika-property-search-modern #eps-search-app #vcrp_search
  .em-property-options-list--v77 {
    flex-wrap: wrap !important;
  }
}