/* -----------------------------------------------------------------------
 * LUS Mobile Search Collapse
 * On mobile, the hero "Search Form Builder" widget (.search_wr_elementor,
 * rendered by the parent theme/plugin) is replaced by a compact pill —
 * similar to Airbnb's "Start your search" bar. Tapping it expands the
 * real form in place with a smooth height/opacity animation; the form
 * itself and its fields are untouched, only wrapped/toggled.
 * -------------------------------------------------------------------- */

/* Hidden by default; only the <=766px media query below turns these on.
   A <button> has no display:none by default, so without this base rule
   the pill and panel header would render on every screen size. */
.lus-search-pill,
.lus-search-panel-header {
  display: none;
}

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

  /* !important: Elementor generates a per-widget-instance responsive rule
     (.elementor-<kit> .elementor-element.elementor-element-<id>.search_wr_elementor)
     with higher specificity than a plain class selector, which is what was
     producing the uneven 20px/10px padding from the widget's own responsive
     settings — this is the only way to guarantee even padding regardless of
     which page/widget instance renders the form. Same story for box-shadow:
     .search_wr_elementor_shadow (also Elementor-generated) keeps a shadow on
     the card at rest — override it to none, and only bring the shadow back
     while the panel is expanded (i.e. after a tap), not sitting there always. */
  .search_wr_elementor {
    padding: 16px !important;
    box-shadow: none !important;
    transition: padding 0.35s ease, box-shadow 0.2s ease;
  }

  .search_wr_elementor.lus-expanded {
    padding: 18px !important;
    box-shadow: 1px 2px 12px 0px rgba(0, 0, 0, 0.1) !important;
  }

  /* Compact pill trigger, closed state */
  .lus-search-pill {
    display: flex;
    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;
  }

  .search_wr_elementor.lus-expanded .lus-search-pill {
    display: none;
  }

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

  .lus-search-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 0fr -> 1fr technique (no JS height measuring,
     works with the field list's natural/variable height). */
  .search_wr_elementor .wpestate-adv-holder {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .search_wr_elementor.lus-expanded .wpestate-adv-holder {
    grid-template-rows: 1fr;
  }

  .lus-collapse-inner {
    min-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.2s ease;
  }

  .search_wr_elementor.lus-expanded .lus-collapse-inner {
    opacity: 1;
    transition: opacity 0.25s ease 0.12s;
  }

  /* Once the open animation has actually finished (".lus-settled", added by
     JS after the transition), let content overflow the panel again — the
     guest-count dropdown is a plain position:absolute popup meant to float
     past the form's own box, and overflow:hidden (needed while the height
     is animating, so the not-yet-grown fields don't just show at once)
     would otherwise clip it. */
  .search_wr_elementor.lus-settled .lus-collapse-inner {
    overflow: visible;
  }

  .lus-search-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
  }

  .lus-search-panel-title {
    font-size: 16px;
    font-weight: 600;
    color: #222;
  }

  .lus-search-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;
  }
}