@charset "UTF-8";
/*--------------------------------------------------------------------------------*/
/*--------------------------SEARCHER PROPERTY - CLEAN REFACTOR-------------------*/
/*--------------------------------------------------------------------------------*/
/* Base: Search bar visible from start - no glitch */
.searcher.searcherProperty {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

/* Container: Grid on mobile, Flex on desktop */
.searcher.searcherProperty > div[class*=grid] {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
  align-items: stretch;
}

/* Ensure correct order: Region (1) → Area (2) → Type (3) → Prices (4,5) → Button (6) */
.searcher.searcherProperty .form-select[data-name=Area] {
  order: 1 !important;
}

.searcher.searcherProperty .form-select[data-name=Sub_Area],
.searcher.searcherProperty #child-area-container,
.searcher.searcherProperty #child-area-container > .form-select[data-name=Sub_Area] {
  order: 2 !important;
}

.searcher.searcherProperty .form-select[data-name=Type_of_Property] {
  order: 3 !important;
}

.searcher.searcherProperty .form-select[data-name=min_price] {
  order: 4 !important;
}

.searcher.searcherProperty .form-select[data-name=max_price] {
  order: 5 !important;
}

.searcher.searcherProperty > div[class*=grid] > button[type=submit] {
  order: 6 !important;
}

/* All form-select fields base styles */
.searcher.searcherProperty .form-select {
  position: relative;
  background: white;
  cursor: pointer;
  transition: background-color 0.2s;
  min-height: 44px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0.75rem;
  border-right: 2px solid var(--color-blue-00);
}

.searcher.searcherProperty .form-select:hover {
  background-color: var(--color-blue-00);
}

/* Text content - prevent wrapping */
.searcher.searcherProperty .form-select .form-select__selected-option,
.searcher.searcherProperty .form-select .form-select__search-input {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  min-width: 0;
}

.searcher.searcherProperty .form-select .flex-1 {
  min-width: 0;
  overflow: hidden;
  flex: 1 1 0%;
}

/* MOBILE (max-width: 767px) */
@media (max-width: 767px) {
  .searcher.searcherProperty > div[class*=grid] {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
  }
  /* Full width fields */
  .searcher.searcherProperty .form-select[data-name=Area],
  .searcher.searcherProperty .form-select[data-name=Sub_Area],
  .searcher.searcherProperty .form-select[data-name=Type_of_Property],
  .searcher.searcherProperty > div[class*=grid] > button[type=submit] {
    grid-column: span 2;
    width: 100%;
  }
  /* Half width price fields */
  .searcher.searcherProperty .form-select[data-name=min_price],
  .searcher.searcherProperty .form-select[data-name=max_price] {
    grid-column: span 1;
  }
  /* Rounded corners on mobile for ALL fields - use !important to override inline classes */
  .searcher.searcherProperty .form-select,
  .searcher.searcherProperty .form-select[data-name=Area],
  .searcher.searcherProperty .form-select[data-name=Sub_Area],
  .searcher.searcherProperty .form-select[data-name=Type_of_Property],
  .searcher.searcherProperty .form-select[data-name=min_price],
  .searcher.searcherProperty .form-select[data-name=max_price],
  .searcher.searcherProperty #child-area-container > .form-select {
    border-radius: 1rem !important;
    border-top-left-radius: 1rem !important;
    border-top-right-radius: 1rem !important;
    border-bottom-left-radius: 1rem !important;
    border-bottom-right-radius: 1rem !important;
  }
  /* Rounded button on mobile */
  .searcher.searcherProperty > div[class*=grid] > button[type=submit] {
    border-radius: 1rem !important;
  }
  /* Child area container */
  .searcher.searcherProperty #child-area-container {
    display: contents;
  }
  .searcher.searcherProperty #child-area-container > * {
    grid-column: span 2;
    width: 100%;
  }
}
/* TABLET (768px - 1279px) */
@media (min-width: 768px) and (max-width: 1279px) {
  /* Rounded corners on tablet for ALL fields */
  .searcher.searcherProperty .form-select,
  .searcher.searcherProperty .form-select[data-name=Area],
  .searcher.searcherProperty .form-select[data-name=Sub_Area],
  .searcher.searcherProperty .form-select[data-name=Type_of_Property],
  .searcher.searcherProperty .form-select[data-name=min_price],
  .searcher.searcherProperty .form-select[data-name=max_price],
  .searcher.searcherProperty #child-area-container > .form-select {
    border-radius: 1rem !important;
    border-top-left-radius: 1rem !important;
    border-top-right-radius: 1rem !important;
    border-bottom-left-radius: 1rem !important;
    border-bottom-right-radius: 1rem !important;
  }
  /* Rounded button on tablet */
  .searcher.searcherProperty > div[class*=grid] > button[type=submit] {
    border-radius: 1rem !important;
  }
}
/* DESKTOP (1280px+) */
@media (min-width: 1280px) {
  .searcher.searcherProperty > div[class*=grid] {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
  }
  /* Child area container */
  .searcher.searcherProperty #child-area-container {
    display: contents !important;
  }
  /* Region - rounded left corners */
  .searcher.searcherProperty .form-select[data-name=Area] {
    border-top-left-radius: 50px !important;
    border-bottom-left-radius: 50px !important;
  }
  /* All fields flex */
  .searcher.searcherProperty .form-select[data-name=Area],
  .searcher.searcherProperty .form-select[data-name=Sub_Area],
  .searcher.searcherProperty .form-select[data-name=Type_of_Property] {
    flex: 1 1 0%;
    min-width: 0;
  }
  /* Price fields */
  .searcher.searcherProperty .form-select[data-name=min_price],
  .searcher.searcherProperty .form-select[data-name=max_price] {
    flex: 0 0 auto;
    min-width: 120px;
    width: 200px;
    max-width: 200px;
  }
  /* Button */
  .searcher.searcherProperty > div[class*=grid] > button[type=submit] {
    flex: 0 0 auto;
    min-width: 200px;
  }
}
/* Child area dropdown styling */
.searcher.searcherProperty #child-area-container .form-select__dropdown {
  overflow-y: scroll;
  max-height: 150px;
}

/* Price dropdown scrolling */
.searcher.searcherProperty .form-select[data-name=min_price] .form-select__dropdown,
.searcher.searcherProperty .form-select[data-name=max_price] .form-select__dropdown {
  overflow-y: auto;
  max-height: 250px;
}

/* Grid centering */
.searcher.searcherProperty > .grid {
  justify-content: center;
}

/*# sourceMappingURL=searcher-property.css.map */