/* =========================================
   MARKETPLACE FILTERS
========================================= */

.marketplace-filter-card {
  padding:
    16px 20px;

  margin:
    16px 0 20px;

  background-color:
    #ffffff;

  border:
    1px solid
    var(--border);

  border-radius:
    14px;

  box-shadow:
    0 4px 16px
    rgba(
      15,
      23,
      42,
      0.05
    );
}


.marketplace-filter-card .title {
  margin-bottom:
    12px;

  color:
    var(--navy);

  font-size:
    1.05rem;
}


.marketplace-filter-card .label {
  margin-bottom:
    5px;

  color:
    #374151;

  font-size:
    0.74rem;

  font-weight:
    750;
}


/* =========================================
   MOBILE FILTER TOGGLE
========================================= */

.marketplace-mobile-filter-toggle {
  display:
    none;

  width:
    100%;

  align-items:
    center;

  justify-content:
    space-between;

  min-height:
    46px;

  padding:
    0 14px;

  color:
    var(--navy);

  background-color:
    #ffffff;

  border:
    0;

  border-radius:
    14px;

  cursor:
    pointer;

  font-size:
    0.92rem;

  font-weight:
    800;

  text-align:
    left;
}


.marketplace-mobile-filter-arrow {
  font-size:
    0.72rem;

  transition:
    transform 0.2s ease;
}


.marketplace-filter-card.is-open
.marketplace-mobile-filter-arrow {
  transform:
    rotate(180deg);
}


/* =========================================
   PRIMARY FILTER AREA
========================================= */

.marketplace-primary-filters {
  display:
    flex;

  flex-direction:
    column;

  gap:
    14px;
}


/* =========================================
   MAIN KEYWORD SEARCH
========================================= */

.marketplace-main-search {
  display:
    grid;

  grid-template-columns:
    minmax(
      0,
      1fr
    )
    120px;

  align-items:
    end;

  gap:
    12px;
}


.marketplace-main-search .field {
  margin-bottom:
    0;
}


/* =========================================
   MAIN SEARCH BUTTON
========================================= */

.marketplace-primary-search-button {
  width:
    120px;

  min-height:
    40px;

  padding:
    0 16px;

  margin:
    0;

  color:
    var(--navy);

  background-color:
    var(--orange);

  border-color:
    var(--orange);

  border-radius:
    8px;

  font-size:
    0.82rem;

  font-weight:
    800;
}


.marketplace-primary-search-button:hover {
  color:
    #ffffff;

  background-color:
    var(--orange-dark);

  border-color:
    var(--orange-dark);
}


.marketplace-primary-search-button.is-active {
  color:
    #ffffff;

  background-color:
    var(--navy);

  border-color:
    var(--navy);
}


/* =========================================
   LOCATION SEARCH
========================================= */

.marketplace-location-search {
  display:
    grid;

  grid-template-columns:
    190px
    auto
    minmax(
      0,
      1fr
    );

  align-items:
    start;

  gap:
    14px;

  padding-top:
    14px;

  border-top:
    1px solid
    var(--border);
}


/* =========================================
   LIVE LOCATION
========================================= */

.marketplace-live-location-section {
  display:
    flex;

  flex-direction:
    column;
}


.marketplace-location-button {
  width:
    190px;

  min-height:
    40px;

  padding:
    0 14px;

  color:
    var(--navy);

  background-color:
    #ffffff;

  border:
    1px solid
    var(--border-dark);

  border-radius:
    8px;

  font-size:
    0.76rem;

  font-weight:
    800;

  white-space:
    nowrap;

  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
}


.marketplace-location-button:hover {
  color:
    var(--navy);

  background-color:
    var(--surface-soft);

  border-color:
    var(--navy);
}


.marketplace-location-button:active {
  transform:
    translateY(1px);
}


.marketplace-location-button[disabled] {
  cursor:
    wait;

  opacity:
    0.65;
}


.marketplace-location-button.is-active {
  color:
    #ffffff;

  background-color:
    #16a34a;

  border-color:
    #16a34a;
}


.marketplace-location-button.is-active:hover {
  color:
    #ffffff;

  background-color:
    #15803d;

  border-color:
    #15803d;
}


/* =========================================
   LOCATION DIVIDER
========================================= */

.marketplace-location-divider {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  min-height:
    40px;

  margin-top:
    24px;

  padding-bottom:
    1px;
}


.marketplace-location-divider span {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  min-width:
    32px;

  min-height:
    32px;

  color:
    var(--muted);

  background-color:
    var(--surface-soft);

  border:
    1px solid
    var(--border);

  border-radius:
    999px;

  font-size:
    0.68rem;

  font-weight:
    800;
}


/* =========================================
   MANUAL LOCATION
========================================= */

.marketplace-location-manual {
  display:
    grid;

  grid-template-columns:
    minmax(
      140px,
      0.8fr
    )
    minmax(
      220px,
      1.4fr
    )
    minmax(
      170px,
      0.9fr
    );

  align-items:
    start;

  gap:
    12px;
}


.marketplace-location-manual .field {
  margin-bottom:
    0;
}


/* =========================================
   FILTER INPUTS
========================================= */

.marketplace-filter-card .input,
.marketplace-filter-card .select select {
  min-height:
    40px;

  background-color:
    #ffffff;

  font-size:
    0.88rem;
}


/* =========================================
   SUBURB HELP TEXT
========================================= */

.marketplace-primary-filters
#suburbHelp {
  min-height:
    16px;

  margin-top:
    4px;

  font-size:
    0.72rem;
}


/* =========================================
   MORE FILTERS
========================================= */

.marketplace-more-filters {
  margin-top:
    8px;

  padding-top:
    10px;

  border-top:
    1px solid
    var(--border);
}


.marketplace-more-filters-toggle {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    6px;

  min-height:
    32px;

  padding:
    6px 11px;

  color:
    var(--navy);

  background-color:
    var(--surface-soft);

  border:
    1px solid
    var(--border);

  border-radius:
    999px;

  cursor:
    pointer;

  font-size:
    0.76rem;

  font-weight:
    750;

  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
}


.marketplace-more-filters-toggle:hover {
  color:
    var(--navy);

  background-color:
    #ffffff;

  border-color:
    var(--border-dark);
}


.marketplace-more-filters-toggle:active {
  transform:
    translateY(1px);
}


.marketplace-more-filters-arrow {
  font-size:
    0.66rem;

  transition:
    transform 0.2s ease;
}


.marketplace-more-filters.is-open
.marketplace-more-filters-arrow {
  transform:
    rotate(180deg);
}


.marketplace-more-filters-content {
  display:
    none;

  margin-top:
    12px;
}


.marketplace-more-filters.is-open
.marketplace-more-filters-content {
  display:
    block;
}


/* =========================================
   ADVANCED FILTER GRID
========================================= */

.marketplace-advanced-filter-grid {
  display:
    grid;

  grid-template-columns:
    repeat(
      5,
      minmax(
        0,
        1fr
      )
    );

  gap:
    12px;
}


.marketplace-advanced-filter-grid .field {
  margin-bottom:
    0;
}


/* =========================================
   FILTER ACTIONS
========================================= */

.marketplace-filter-buttons {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    8px;

  margin-top:
    12px;
}


.marketplace-clear-button {
  min-height:
    38px;

  padding:
    0 15px;

  color:
    var(--text);

  background-color:
    #ffffff;

  border:
    1px solid
    var(--border-dark);

  font-size:
    0.8rem;

  font-weight:
    750;
}


.marketplace-clear-button:hover {
  color:
    var(--navy);

  background-color:
    var(--surface-soft);

  border-color:
    #94a3b8;
}


/* =========================================
   LOCATION AUTOCOMPLETE
========================================= */

.location-autocomplete {
  position:
    relative;
}


.suburb-suggestions {
  position:
    absolute;

  top:
    calc(
      100% + 4px
    );

  right:
    0;

  left:
    0;

  z-index:
    40;

  max-height:
    250px;

  overflow-y:
    auto;

  background-color:
    #ffffff;

  border:
    1px solid
    var(--border);

  border-radius:
    8px;

  box-shadow:
    0 8px 20px
    rgba(
      15,
      23,
      42,
      0.1
    );
}


.suburb-suggestion-item {
  display:
    block;

  width:
    100%;

  padding:
    10px 12px;

  background-color:
    #ffffff;

  border:
    0;

  border-bottom:
    1px solid
    var(--border);

  cursor:
    pointer;

  text-align:
    left;

  font:
    inherit;

  font-size:
    0.86rem;
}


.suburb-suggestion-item:last-child {
  border-bottom:
    0;
}


.suburb-suggestion-item:hover {
  background-color:
    var(--surface-soft);
}


.suburb-suggestion-empty {
  padding:
    10px 12px;

  color:
    #6b7280;

  font-size:
    0.84rem;
}


/* =========================================
   TABLET
========================================= */

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

  .marketplace-location-search {
    grid-template-columns:
      1fr;
  }


  .marketplace-location-divider {
    min-height:
      auto;

    margin-top:
      0;
  }


  .marketplace-location-divider::before,
  .marketplace-location-divider::after {
    content:
      "";

    flex:
      1;

    height:
      1px;

    background-color:
      var(--border);
  }


  .marketplace-location-divider span {
    margin:
      0 10px;
  }


  .marketplace-location-button {
    width:
      100%;
  }


  .marketplace-location-manual {
    grid-template-columns:
      repeat(
        3,
        minmax(
          0,
          1fr
        )
      );
  }


  .marketplace-advanced-filter-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }

}


/* =========================================
   MOBILE
========================================= */

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

  .marketplace-filter-card {
    padding:
      0;

    margin:
      14px 0 16px;

    overflow:
      visible;
  }


  .marketplace-mobile-filter-toggle {
    display:
      flex;
  }


  .marketplace-filter-content {
    display:
      none;

    padding:
      4px 14px 14px;

    border-top:
      1px solid
      var(--border);
  }


  .marketplace-filter-card.is-open
  .marketplace-filter-content {
    display:
      block;
  }


  .marketplace-filter-card.is-open
  .marketplace-mobile-filter-toggle {
    border-radius:
      14px 14px 0 0;
  }


  .marketplace-filter-heading {
    padding-top:
      12px;
  }


  .marketplace-main-search {
    display:
      block;
  }


  .marketplace-main-search .field {
    margin-bottom:
      10px;
  }


  .marketplace-primary-search-button {
    width:
      100%;

    min-height:
      44px;
  }


  .marketplace-location-search {
    display:
      flex;

    flex-direction:
      column;

    align-items:
      stretch;

    gap:
      10px;

    margin-top:
      4px;

    padding-top:
      14px;
  }


  .marketplace-live-location-section {
    order:
      1;
  }


  .marketplace-location-divider {
    order:
      2;

    margin:
      2px 0;
  }


  .marketplace-location-manual {
    order:
      3;

    display:
      block;
  }


  .marketplace-location-button {
    width:
      100%;

    min-height:
      42px;
  }


  .marketplace-location-manual .field {
    margin-bottom:
      10px;
  }


  .marketplace-filter-card .input,
  .marketplace-filter-card .select select {
    min-height:
      42px;
  }


  .marketplace-advanced-filter-grid {
    display:
      block;
  }


  .marketplace-advanced-filter-grid .field {
    margin-bottom:
      10px;
  }


  .marketplace-filter-buttons {
    flex-direction:
      column;

    align-items:
      stretch;
  }


  .marketplace-filter-buttons .button {
    width:
      100%;
  }

}


/* =========================================
   COMPACT DESKTOP FILTERS
========================================= */

@media screen and (min-width: 1060px) {

  .marketplace-filter-card {
    padding:
      12px 16px;

    margin:
      8px 0 12px;

    border-radius:
      12px;
  }


  .marketplace-filter-card .title {
    margin-bottom:
      8px;

    font-size:
      0.98rem;
  }


  .marketplace-primary-filters {
    gap:
      9px;
  }


  .marketplace-main-search {
    grid-template-columns:
      minmax(0, 1fr)
      110px;

    gap:
      10px;
  }


  .marketplace-primary-search-button {
    width:
      110px;

    min-height:
      36px;
  }


  .marketplace-location-search {
    grid-template-columns:
      165px
      42px
      minmax(0, 1fr);

    gap:
      10px;

    padding-top:
      9px;
  }


  .marketplace-location-button {
    width:
      165px;

    min-height:
      36px;

    font-size:
      0.72rem;
  }


  .marketplace-location-divider {
    min-height:
      36px;

    margin-top:
      19px;
  }


  .marketplace-location-divider span {
    min-width:
      28px;

    min-height:
      28px;

    font-size:
      0.64rem;
  }


  .marketplace-location-manual {
    grid-template-columns:
      minmax(120px, 0.8fr)
      minmax(190px, 1.35fr)
      minmax(145px, 0.8fr);

    gap:
      10px;
  }


  .marketplace-filter-card .input,
  .marketplace-filter-card .select select {
    min-height:
      36px;

    height:
      36px;

    font-size:
      0.82rem;
  }


  .marketplace-filter-card .label {
    margin-bottom:
      3px;

    font-size:
      0.69rem;
  }


  .marketplace-primary-filters
  #suburbHelp {
    min-height:
      12px;

    margin-top:
      2px;

    font-size:
      0.66rem;
  }


  .marketplace-more-filters {
    margin-top:
      4px;

    padding-top:
      7px;
  }


  .marketplace-more-filters-toggle {
    min-height:
      28px;

    padding:
      4px 10px;

    font-size:
      0.7rem;
  }

}



/* =========================================
   MOBILE SEARCH ACTION AT BOTTOM
========================================= */

.marketplace-mobile-search-submit {
  display:
    none;
}


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

  .marketplace-primary-search-button {
    display:
      none;
  }


  .marketplace-main-search .field {
    margin-bottom:
      0;
  }


  .marketplace-primary-filters {
    gap:
      10px;
  }


  .marketplace-more-filters {
    margin-top:
      2px;
  }


  .marketplace-mobile-search-submit {
    display:
      flex;

    align-items:
      center;

    justify-content:
      center;

    width:
      100%;

    min-height:
      46px;

    margin-top:
      14px;

    color:
      var(--navy);

    background-color:
      var(--orange);

    border:
      1px solid
      var(--orange);

    border-radius:
      9px;

    font-size:
      0.84rem;

    font-weight:
      850;
  }


  .marketplace-mobile-search-submit:hover,
  .marketplace-mobile-search-submit:focus {
    color:
      #ffffff;

    background-color:
      var(--orange-dark);

    border-color:
      var(--orange-dark);
  }

}



/* =========================================
   ALWAYS VISIBLE MOBILE KEYWORD SEARCH
========================================= */

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

  .marketplace-filter-card {
    display:
      flex;

    flex-direction:
      column;

    padding:
      12px;

    gap:
      10px;
  }


  .marketplace-mobile-filter-toggle {
    order:
      2;

    min-height:
      42px;

    padding:
      0 12px;

    background-color:
      var(--surface-soft);

    border:
      1px solid
      var(--border);

    border-radius:
      9px;
  }


  .marketplace-filter-content {
    display:
      block !important;

    order:
      1;

    padding:
      0;

    border-top:
      0;
  }


  .marketplace-filter-heading {
    display:
      none;
  }


  .marketplace-primary-filters {
    gap:
      0;
  }


  .marketplace-main-search {
    display:
      grid;

    grid-template-columns:
      minmax(0, 1fr)
      88px;

    align-items:
      end;

    gap:
      8px;
  }


  .marketplace-main-search .field {
    margin:
      0;
  }


  .marketplace-main-search .label {
    margin-bottom:
      4px;
  }


  .marketplace-primary-search-button {
    display:
      flex !important;

    align-items:
      center;

    justify-content:
      center;

    width:
      88px;

    min-height:
      42px;

    padding:
      0 10px;

    font-size:
      0.76rem;
  }


  .marketplace-location-search,
  .marketplace-more-filters,
  .marketplace-mobile-search-submit {
    display:
      none !important;
  }


  .marketplace-filter-card.is-open
  .marketplace-location-search {
    display:
      flex !important;
  }


  .marketplace-filter-card.is-open
  .marketplace-more-filters {
    display:
      block !important;
  }


  .marketplace-filter-card.is-open
  .marketplace-mobile-search-submit {
    display:
      flex !important;
  }


  .marketplace-filter-card.is-open
  .marketplace-mobile-filter-toggle {
    border-radius:
      9px;
  }


  .marketplace-filter-card.is-open
  .marketplace-mobile-filter-arrow {
    transform:
      rotate(180deg);
  }

}



/* =========================================
   DESKTOP FILTER POLISH
========================================= */

@media screen and (min-width: 1060px) {

  .marketplace-filter-card {
    padding:
      10px 16px 9px;

    margin:
      6px 0 8px;

    border-radius:
      11px;
  }


  .marketplace-filter-card
  .title {
    margin-bottom:
      6px;

    font-size:
      0.94rem;
  }


  .marketplace-primary-filters {
    gap:
      7px;
  }


  .marketplace-main-search {
    grid-template-columns:
      minmax(0, 1fr)
      118px;

    gap:
      10px;
  }


  .marketplace-primary-search-button {
    width:
      118px;

    min-height:
      34px;
  }


  .marketplace-location-search {
    grid-template-columns:
      150px
      34px
      minmax(0, 1fr);

    gap:
      10px;

    padding-top:
      7px;
  }


  .marketplace-location-button {
    width:
      150px;

    min-height:
      34px;

    padding-left:
      10px;

    padding-right:
      10px;

    font-size:
      0.69rem;
  }


  .marketplace-location-divider {
    min-height:
      34px;

    margin-top:
      18px;
  }


  .marketplace-location-divider
  span {
    min-width:
      26px;

    min-height:
      26px;

    font-size:
      0.6rem;
  }


  .marketplace-location-manual {
    grid-template-columns:
      minmax(120px, 0.75fr)
      minmax(280px, 1.55fr)
      minmax(150px, 0.8fr);

    gap:
      10px;
  }


  .marketplace-filter-card
  .input,
  .marketplace-filter-card
  .select
  select {
    min-height:
      34px;

    height:
      34px;

    font-size:
      0.78rem;
  }


  .marketplace-filter-card
  .label {
    margin-bottom:
      2px;

    font-size:
      0.66rem;
  }


  .marketplace-primary-filters
  #suburbHelp {
    min-height:
      10px;

    margin-top:
      1px;

    font-size:
      0.62rem;
  }


  .marketplace-more-filters {
    margin-top:
      2px;

    padding-top:
      5px;
  }


  .marketplace-more-filters-toggle {
    min-height:
      30px;

    padding:
      4px 12px;

    background-color:
      #ffffff;

    border-color:
      var(--border-dark);

    border-radius:
      8px;

    font-size:
      0.68rem;

    font-weight:
      800;
  }


  .marketplace-more-filters-toggle:hover {
    background-color:
      var(--surface-soft);

    border-color:
      var(--navy);
  }


  .marketplace-more-filters-content {
    margin-top:
      8px;
  }


  .marketplace-advanced-filter-grid {
    gap:
      9px;
  }


  .marketplace-filter-buttons {
    margin-top:
      8px;
  }

}