/* -----------------------------------------------------------------------
 * LUS Filters Collapse
 * The "Recent Listings with Filters" widget's icon row
 * (.wpestate_top_bar_control_widget, rendered by wprentals-core's
 * wpestate_recent_items_top_bar_1()) wraps onto several rows on narrow
 * screens and eats a lot of vertical space. Below the 768px breakpoint it
 * defaults to a single horizontally-scrollable row; a small arrow below it
 * expands the list to its full wrapped layout (scrolling removed) with a
 * smooth height animation, and collapses it back to the scrollable row
 * when tapped again. Height is measured in JS (lus-filters-collapse.js) —
 * flex-wrap itself can't be transitioned by CSS.
 * -------------------------------------------------------------------- */

/* Hidden by default; only the <=768px media query below turns this on. */
.lus-filters-arrow-toggle {
  display: none;
}

@media only screen and (max-width: 768px) {

  .lus-filters-panel {
    overflow: hidden;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .lus-filters-panel .wpestate_top_bar_control_widget {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    overflow-anchor: none;
  }

  /* The widget's own "Alignment" control (Elementor, per-instance CSS —
     needs !important to outrank it) sets justify-content: center. On an
     overflowing flex row that makes the *centered* content the resting
     scroll position, so the row opens scrolled to the middle of the list
     instead of showing item 1 first. Force left-alignment only while
     collapsed/scrollable (:not(.lus-filters-wrap)) — once expanded, the
     site's chosen center alignment applies again, untouched. */
  .lus-filters-panel:not(.lus-filters-wrap) .wpestate_top_bar_control_widget {
    justify-content: flex-start !important;
  }

  .lus-filters-panel .wpestate_top_bar_control_widget::-webkit-scrollbar {
    display: none;
  }

  /* Without this, flex-shrink:1 (the default) squeezes each item to fit the
     row, wrapping "Loft Rooms" etc. onto two lines instead of scrolling —
     keep every item at its natural, single-line width while collapsed. */
  .lus-filters-panel .wpestate_categories_as_tabs_item {
    flex: 0 0 auto;
  }

  .lus-filters-panel .wpestate_categories_as_tabs_item > a {
    white-space: nowrap;
  }

  .lus-filters-panel.lus-filters-wrap .wpestate_top_bar_control_widget {
    flex-wrap: wrap;
    overflow-x: visible;
  }

  .lus-filters-panel.lus-filters-wrap .wpestate_categories_as_tabs_item {
    flex: initial;
  }

  .lus-filters-panel.lus-filters-wrap .wpestate_categories_as_tabs_item > a {
    white-space: normal;
  }

  .lus-filters-arrow-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 0;
    padding: 0 0 6px;
    background: transparent;
    border: none;
    color: rgba(0, 0, 0, 0.6);
    cursor: pointer;
  }

  .lus-filters-arrow-toggle svg {
    transition: transform 0.3s ease;
  }

  .lus-filters-arrow-toggle[aria-expanded="true"] svg {
    transform: rotate(180deg);
  }
}