/* ============================================
   Properties Page Filters - Independent Styling
   High specificity to prevent default CSS overrides
   ============================================ */

/* Container Styles */
.properties-banner-wrapper .properties-search-overlay {
  position: relative !important;
  bottom: auto !important;
  left: auto !important;
  transform: none !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: 20px 0 !important;
  background: #f5f5f5 !important;
  box-sizing: border-box !important;
}

.properties-search-overlay #home-search {
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.properties-search-overlay #home-search .small-12 {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 0 25px !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

.properties-search-overlay #home-search .small-12 form {
  display: flex !important;
  flex-flow: row nowrap !important;
  justify-content: center !important;
  align-items: stretch !important;
  gap: 0 !important;
  width: auto !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 auto !important;
}

/* Responsive layout: 2 rows with 3 filters each when width < 1500px */
@media (max-width: 1499px) {
  .properties-search-overlay #home-search .small-12 form {
    flex-flow: row wrap !important;
    gap: 0 !important;
  }

  /* First row: Where, Date, Nights-People (3 items) */
  .properties-search-overlay #home-search .where,
  .properties-search-overlay #home-search .date,
  .properties-search-overlay #home-search .nights-people-wrapper {
    flex: 0 0 33.333% !important;
    width: 33.333% !important;
    max-width: 33.333% !important;
    border-right: 1px solid #e0e0e0 !important;
    border-top: none !important;
  }

  /* Second row: Flexibility, Search (2 items, but we want 3, so we'll make them wider) */
  /* Actually, let's count: Where, Date, Nights-People (which has 2 fields), Flexibility, Search */
  /* So we have: Where, Date, Nights, People, Flexibility, Search = 6 fields */
  /* Row 1: Where, Date, Nights-People wrapper (which contains Nights and People) */
  /* Row 2: Flexibility, Search, and we need a third... */

  /* Better approach: Split Nights-People into separate fields for responsive */
  .properties-search-overlay #home-search .nights-people-wrapper {
    display: contents !important;
  }

  /* Now we have 6 fields: Where, Date, Nights, People, Flexibility, Search */
  /* Row 1: Where, Date, Nights */
  .properties-search-overlay #home-search .where,
  .properties-search-overlay #home-search .date,
  .properties-search-overlay #home-search .nights {
    flex: 0 0 33.333% !important;
    width: 33.333% !important;
    max-width: 33.333% !important;
    border-right: 1px solid #e0e0e0 !important;
    border-top: none !important;
  }

  /* Row 2: People, Flexibility, Search */
  .properties-search-overlay #home-search .people,
  .properties-search-overlay #home-search .flexibility,
  .properties-search-overlay #home-search .search {
    flex: 0 0 33.333% !important;
    width: 33.333% !important;
    max-width: 33.333% !important;
    border-right: 1px solid #e0e0e0 !important;
    border-top: 1px solid #e0e0e0 !important;
  }

  /* Remove right border from last item in each row */
  .properties-search-overlay #home-search .nights {
    border-right: 1px solid #e0e0e0 !important;
  }

  .properties-search-overlay #home-search .search {
    border-right: none !important;
  }

  /* Nights and People as separate fields - each takes 33.33% */
  .properties-search-overlay #home-search .nights,
  .properties-search-overlay #home-search .people {
    height: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important;
    display: flex !important;
  }

  .properties-search-overlay #home-search .nights {
    border-right: 1px solid #e0e0e0 !important;
  }

  .properties-search-overlay #home-search .people {
    border-right: 1px solid #e0e0e0 !important;
  }
}

/* Hide Code field on desktop to match reference site */
.properties-search-overlay #home-search .code {
  display: none !important;
}

/* Field Container Styles - Full width layout */
.properties-search-overlay #home-search .where,
.properties-search-overlay #home-search .date,
.properties-search-overlay #home-search .property,
.properties-search-overlay #home-search .flexibility,
.properties-search-overlay #home-search .small-12 .where,
.properties-search-overlay #home-search .small-12 .date,
.properties-search-overlay #home-search .small-12 .property,
.properties-search-overlay #home-search .small-12 .flexibility {
  width: auto !important;
  height: 50px !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 50px !important;
  max-height: 50px !important;
  flex: 1 1 0% !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  display: flex !important;
  border-right: 1px solid #e0e0e0 !important;
}

.properties-search-overlay #home-search .where:first-child,
.properties-search-overlay #home-search .small-12 .where:first-child {
  border-left: none !important;
}

.properties-search-overlay #home-search .search,
.properties-search-overlay #home-search .small-12 .search {
  flex: 0 0 auto !important;
  border-right: none !important;
}

/* Reorder fields to match reference: Where, Date, Nights, Flexibility, People, Search */
.properties-search-overlay #home-search .where,
.properties-search-overlay #home-search .small-12 .where {
  order: 1 !important;
}

.properties-search-overlay #home-search .date,
.properties-search-overlay #home-search .small-12 .date {
  order: 2 !important;
}

.properties-search-overlay #home-search .nights-people-wrapper {
  display: contents !important;
}

.properties-search-overlay #home-search .nights-people-wrapper .nights {
  order: 3 !important;
}

.properties-search-overlay #home-search .flexibility,
.properties-search-overlay #home-search .small-12 .flexibility {
  order: 4 !important;
}

.properties-search-overlay #home-search .nights-people-wrapper .people {
  order: 5 !important;
}

.properties-search-overlay #home-search .search,
.properties-search-overlay #home-search .small-12 .search {
  order: 6 !important;
}

/* Nights and People wrapper - Full width flex container */
.properties-search-overlay #home-search .nights-people-wrapper {
  display: flex !important;
  flex: 1 1 0% !important;
  width: auto !important;
  gap: 0 !important;
  border-right: 1px solid #e0e0e0 !important;
}

/* Nights and People as separate fields - Full width */
.properties-search-overlay #home-search .nights-people-wrapper {
  display: flex !important;
  flex: 1 1 0% !important;
  width: auto !important;
  gap: 0 !important;
  border-right: 1px solid #e0e0e0 !important;
}

.properties-search-overlay #home-search .nights-people-wrapper .nights,
.properties-search-overlay #home-search .nights-people-wrapper .people {
  width: 50% !important;
  height: 50px !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 50px !important;
  max-height: 50px !important;
  flex: 1 1 0% !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  display: flex !important;
}

.properties-search-overlay #home-search .nights-people-wrapper .nights {
  border-right: 1px solid #e0e0e0 !important;
}

.properties-search-overlay #home-search .nights,
.properties-search-overlay #home-search .people,
.properties-search-overlay #home-search .small-12 .nights,
.properties-search-overlay #home-search .small-12 .people {
  width: 50% !important;
  height: 50px !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 50px !important;
  max-height: 50px !important;
  flex: 1 1 0% !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  display: flex !important;
}

/* Field Wrapper Styles - Full width */
.properties-search-overlay #home-search .where__wrapper,
.properties-search-overlay #home-search .code__wrapper,
.properties-search-overlay #home-search .date__wrapper,
.properties-search-overlay #home-search .property__wrapper,
.properties-search-overlay #home-search .nights__wrapper,
.properties-search-overlay #home-search .people__wrapper,
.properties-search-overlay #home-search .flexibility__wrapper,
.properties-search-overlay #home-search .small-12 .where__wrapper,
.properties-search-overlay #home-search .small-12 .code__wrapper,
.properties-search-overlay #home-search .small-12 .date__wrapper,
.properties-search-overlay #home-search .small-12 .property__wrapper,
.properties-search-overlay #home-search .small-12 .nights__wrapper,
.properties-search-overlay #home-search .small-12 .people__wrapper,
.properties-search-overlay #home-search .small-12 .flexibility__wrapper {
  width: 100% !important;
  height: 50px !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 50px !important;
  max-height: 50px !important;
  padding: 0 12px !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex: 1 1 0% !important;
  background: #fff !important;
  border-radius: 0 !important;
  border: none !important;
  border-right: 1px solid #e0e0e0 !important;
  gap: 10px !important;
}

.properties-search-overlay #home-search .where__wrapper,
.properties-search-overlay #home-search .small-12 .where__wrapper {
  border-left: none !important;
}

.properties-search-overlay #home-search .nights-people-wrapper .nights__wrapper,
.properties-search-overlay
  #home-search
  .nights-people-wrapper
  .people__wrapper {
  width: 100% !important;
  height: 50px !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 50px !important;
  max-height: 50px !important;
  flex: 1 1 0% !important;
  border-right: 1px solid #e0e0e0 !important;
  border-radius: 0 !important;
  border-top: none !important;
  border-bottom: none !important;
}

.properties-search-overlay
  #home-search
  .nights-people-wrapper
  .people__wrapper {
  border-right: none !important;
}

.properties-search-overlay #home-search .nights__wrapper,
.properties-search-overlay #home-search .people__wrapper,
.properties-search-overlay #home-search .small-12 .nights__wrapper,
.properties-search-overlay #home-search .small-12 .people__wrapper {
  width: 245px !important;
  height: 50px !important;
  min-width: 245px !important;
  max-width: 245px !important;
  min-height: 50px !important;
  max-height: 50px !important;
  flex: 0 0 245px !important;
}

/* Icon Styles */
.properties-search-overlay #home-search .material-icons,
.properties-search-overlay #home-search i {
  font-size: 24px !important;
  font-weight: normal !important;
  color: #e5347e !important;
  display: inline-block !important;
  vertical-align: middle !important;
  flex-shrink: 0 !important;
  line-height: 1 !important;
  margin: 0 !important;
}

/* Input and Select Styles */
.properties-search-overlay #home-search select,
.properties-search-overlay #home-search input[type="text"] {
  width: 100% !important;
  height: 50px !important;
  min-height: 50px !important;
  max-height: 50px !important;
  line-height: 50px !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  padding-left: 0 !important;
  margin: 0 !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  font-size: 15px !important;
  color: #333 !important;
  flex: 1 !important;
  min-width: 0 !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
}

.properties-search-overlay #home-search select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 9L1 4h10z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  padding-right: 35px !important;
  cursor: pointer !important;
}

/* Search Button Styles - Auto width */
.properties-search-overlay #home-search .search {
  display: flex !important;
  width: auto !important;
  padding: 0 !important;
  flex: 0 0 auto !important;
  min-width: 150px !important;
  max-width: none !important;
  box-sizing: border-box !important;
  height: 50px !important;
  min-height: 50px !important;
  max-height: 50px !important;
}

.properties-search-overlay #home-search .search__wrapepr {
  height: 100% !important;
  min-height: 50px !important;
  background: #009fe3 !important;
  cursor: pointer !important;
  position: relative !important;
  border-radius: 3px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 0 20px !important;
  border: none !important;
  box-sizing: border-box !important;
  width: 100% !important;
  flex: 1 !important;
}

.properties-search-overlay #home-search .search__wrapepr .material-icons {
  color: #fff !important;
  font-size: 24px !important;
  pointer-events: none !important;
  flex-shrink: 0 !important;
}

.properties-search-overlay #home-search .search input[type="submit"] {
  background: transparent !important;
  outline: none !important;
  border: none !important;
  color: #fff !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  height: 100% !important;
  display: inline-block !important;
  width: auto !important;
  flex: 1 !important;
  font-size: 15px !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* ============================================
   Tablet Styles (max-width: 1024px)
   ============================================ */
@media screen and (max-width: 1024px) {
  .properties-search-overlay #home-search .small-12 {
    padding: 0 20px !important;
  }

  .properties-search-overlay #home-search .small-12 form {
    gap: 10px !important;
    flex-wrap: wrap !important;
  }

  .properties-search-overlay #home-search .where,
  .properties-search-overlay #home-search .date,
  .properties-search-overlay #home-search .flexibility,
  .properties-search-overlay #home-search .small-12 .where,
  .properties-search-overlay #home-search .small-12 .date,
  .properties-search-overlay #home-search .small-12 .flexibility {
    flex: 1 1 calc(33.333% - 7px) !important;
    min-width: calc(33.333% - 7px) !important;
    max-width: calc(33.333% - 7px) !important;
  }

  .properties-search-overlay #home-search .nights-people-wrapper {
    flex: 1 1 calc(33.333% - 7px) !important;
    min-width: calc(33.333% - 7px) !important;
    max-width: calc(33.333% - 7px) !important;
  }

  .properties-search-overlay #home-search .search {
    flex: 1 1 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    margin-top: 10px !important;
  }

  .properties-search-overlay #home-search .where__wrapper,
  .properties-search-overlay #home-search .date__wrapper,
  .properties-search-overlay #home-search .flexibility__wrapper,
  .properties-search-overlay #home-search .small-12 .where__wrapper,
  .properties-search-overlay #home-search .small-12 .date__wrapper,
  .properties-search-overlay #home-search .small-12 .flexibility__wrapper {
    border-right: 1px solid #e0e0e0 !important;
  }

  .properties-search-overlay #home-search .flexibility__wrapper,
  .properties-search-overlay #home-search .small-12 .flexibility__wrapper {
    border-right: none !important;
  }
}

/* ============================================
   Medium Tablet Styles (max-width: 968px)
   ============================================ */
@media screen and (max-width: 968px) {
  .properties-search-overlay #home-search .where,
  .properties-search-overlay #home-search .date,
  .properties-search-overlay #home-search .flexibility,
  .properties-search-overlay #home-search .small-12 .where,
  .properties-search-overlay #home-search .small-12 .date,
  .properties-search-overlay #home-search .small-12 .flexibility {
    flex: 1 1 calc(50% - 5px) !important;
    min-width: calc(50% - 5px) !important;
    max-width: calc(50% - 5px) !important;
  }

  .properties-search-overlay #home-search .nights-people-wrapper {
    flex: 1 1 calc(50% - 5px) !important;
    min-width: calc(50% - 5px) !important;
    max-width: calc(50% - 5px) !important;
  }

  .properties-search-overlay #home-search .date__wrapper,
  .properties-search-overlay #home-search .small-12 .date__wrapper {
    border-right: none !important;
  }
}

/* ============================================
   Smaller Tablet Styles (max-width: 900px)
   ============================================ */
@media screen and (max-width: 900px) {
  .properties-search-overlay #home-search .small-12 form {
    gap: 10px !important;
  }

  .properties-search-overlay #home-search .where,
  .properties-search-overlay #home-search .date,
  .properties-search-overlay #home-search .flexibility,
  .properties-search-overlay #home-search .nights-people-wrapper,
  .properties-search-overlay #home-search .small-12 .where,
  .properties-search-overlay #home-search .small-12 .date,
  .properties-search-overlay #home-search .small-12 .flexibility {
    flex: 1 1 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    border-right: none !important;
  }

  .properties-search-overlay #home-search .where__wrapper,
  .properties-search-overlay #home-search .date__wrapper,
  .properties-search-overlay #home-search .flexibility__wrapper,
  .properties-search-overlay
    #home-search
    .nights-people-wrapper
    .nights__wrapper,
  .properties-search-overlay
    #home-search
    .nights-people-wrapper
    .people__wrapper,
  .properties-search-overlay #home-search .small-12 .where__wrapper,
  .properties-search-overlay #home-search .small-12 .date__wrapper,
  .properties-search-overlay #home-search .small-12 .flexibility__wrapper {
    border-right: none !important;
    border-radius: 4px !important;
    border: 1px solid #e0e0e0 !important;
    margin-bottom: 0 !important;
  }

  .properties-search-overlay #home-search .nights-people-wrapper {
    border-right: none !important;
    gap: 10px !important;
    display: flex !important;
  }

  .properties-search-overlay #home-search .nights-people-wrapper .nights,
  .properties-search-overlay #home-search .nights-people-wrapper .people {
    flex: 1 1 calc(50% - 5px) !important;
    min-width: calc(50% - 5px) !important;
    max-width: calc(50% - 5px) !important;
  }

  .properties-search-overlay
    #home-search
    .nights-people-wrapper
    .nights__wrapper {
    border-right: 1px solid #e0e0e0 !important;
  }

  .properties-search-overlay #home-search .search {
    margin-top: 0 !important;
  }
}

/* ============================================
   Mobile Styles (max-width: 720px)
   ============================================ */
@media screen and (max-width: 720px) {
  .properties-banner-wrapper .properties-search-overlay,
  .page-template-properties .properties-search-overlay {
    width: 100vw !important;
    max-width: 100vw !important;
    padding: 20px 15px !important;
    background: #fff !important;
    border-radius: 0 !important;
    margin: 0 !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    box-shadow: none !important;
    position: relative !important;
  }
}

/* ============================================
   Small Mobile Devices (iPhone SE - 375px and below)
   ============================================ */
/* Small mobile devices (max-width: 480px) - Homepage filter spacing */
@media screen and (max-width: 480px) {
  /* Homepage filter section - add margin bottom to prevent overlap */
  .home-banner__overlay,
  .home-banner__overlay.properties-search-overlay {
    margin-bottom: 40px !important;
    padding-bottom: 20px !important;
  }

  .home-banner__overlay #home-search {
    margin-bottom: 0 !important;
  }

  /* Ensure proper spacing after banner section */
  .home-banner {
    margin-bottom: 30px !important;
    padding-bottom: 20px !important;
  }
}

@media screen and (max-width: 375px) {
  /* Homepage filter section - add margin bottom */
  .home-banner__overlay.properties-search-overlay,
  .properties-banner-wrapper .properties-search-overlay,
  .page-template-properties .properties-search-overlay,
  .home-banner__overlay {
    margin-bottom: 50px !important;
    padding-bottom: 25px !important;
  }

  /* Additional spacing for very small devices */
  .properties-search-overlay #home-search {
    margin-bottom: 0 !important;
  }

  /* Ensure proper spacing after banner section */
  .home-banner {
    margin-bottom: 40px !important;
    padding-bottom: 25px !important;
  }
}

/* Continue mobile styles for 720px breakpoint */
@media screen and (max-width: 720px) {
  .properties-search-overlay #home-search .small-12,
  .page-template-properties .properties-search-overlay #home-search .small-12 {
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    justify-content: flex-start !important;
  }

  .properties-search-overlay #home-search .small-12 form,
  .page-template-properties
    .properties-search-overlay
    #home-search
    .small-12
    form {
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    justify-content: flex-start !important;
    margin: 0 !important;
  }

  /* Hide Code field on mobile to match reference */
  .properties-search-overlay #home-search .code {
    display: none !important;
  }

  /* Order fields on mobile: Where, Date, Nights, Flexibility, People, Search */
  .properties-search-overlay #home-search .where,
  .properties-search-overlay #home-search .small-12 .where {
    order: 1 !important;
  }

  .properties-search-overlay #home-search .date,
  .properties-search-overlay #home-search .small-12 .date {
    order: 2 !important;
  }

  .properties-search-overlay #home-search .nights-people-wrapper {
    display: contents !important;
  }

  .properties-search-overlay #home-search .nights-people-wrapper .nights {
    order: 3 !important;
  }

  .properties-search-overlay #home-search .flexibility,
  .properties-search-overlay #home-search .small-12 .flexibility {
    order: 4 !important;
  }

  .properties-search-overlay #home-search .nights-people-wrapper .people {
    order: 5 !important;
  }

  .properties-search-overlay #home-search .search,
  .properties-search-overlay #home-search .small-12 .search {
    order: 6 !important;
  }

  .properties-search-overlay #home-search .where,
  .properties-search-overlay #home-search .code,
  .properties-search-overlay #home-search .date,
  .properties-search-overlay #home-search .property,
  .properties-search-overlay #home-search .flexibility,
  .properties-search-overlay #home-search .small-12 .where,
  .properties-search-overlay #home-search .small-12 .code,
  .properties-search-overlay #home-search .small-12 .date,
  .properties-search-overlay #home-search .small-12 .property,
  .properties-search-overlay #home-search .small-12 .flexibility,
  .page-template-properties .properties-search-overlay #home-search .where,
  .page-template-properties .properties-search-overlay #home-search .code,
  .page-template-properties .properties-search-overlay #home-search .date,
  .page-template-properties .properties-search-overlay #home-search .property,
  .page-template-properties
    .properties-search-overlay
    #home-search
    .flexibility,
  .page-template-properties
    .properties-search-overlay
    #home-search
    .small-12
    .where,
  .page-template-properties
    .properties-search-overlay
    #home-search
    .small-12
    .code,
  .page-template-properties
    .properties-search-overlay
    #home-search
    .small-12
    .date,
  .page-template-properties
    .properties-search-overlay
    #home-search
    .small-12
    .property,
  .page-template-properties
    .properties-search-overlay
    #home-search
    .small-12
    .flexibility {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    flex: 1 1 100% !important;
    height: auto !important;
    min-height: 54px !important;
    max-height: none !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  /* Nights and People as separate full-width fields on mobile */
  .properties-search-overlay #home-search .nights,
  .properties-search-overlay #home-search .people,
  .properties-search-overlay #home-search .small-12 .nights,
  .properties-search-overlay #home-search .small-12 .people {
    width: 100% !important;
    flex: 1 1 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 54px !important;
    max-height: none !important;
    padding: 0 !important;
  }

  .properties-search-overlay #home-search .where__wrapper,
  .properties-search-overlay #home-search .date__wrapper,
  .properties-search-overlay #home-search .property__wrapper,
  .properties-search-overlay #home-search .flexibility__wrapper,
  .properties-search-overlay #home-search .nights__wrapper,
  .properties-search-overlay #home-search .people__wrapper,
  .properties-search-overlay #home-search .small-12 .where__wrapper,
  .properties-search-overlay #home-search .small-12 .date__wrapper,
  .properties-search-overlay #home-search .small-12 .property__wrapper,
  .properties-search-overlay #home-search .small-12 .flexibility__wrapper,
  .properties-search-overlay #home-search .small-12 .nights__wrapper,
  .properties-search-overlay #home-search .small-12 .people__wrapper,
  .properties-search-overlay
    #home-search
    .nights-people-wrapper
    .nights__wrapper,
  .properties-search-overlay
    #home-search
    .nights-people-wrapper
    .people__wrapper,
  .page-template-properties
    .properties-search-overlay
    #home-search
    .where__wrapper,
  .page-template-properties
    .properties-search-overlay
    #home-search
    .date__wrapper,
  .page-template-properties
    .properties-search-overlay
    #home-search
    .property__wrapper,
  .page-template-properties
    .properties-search-overlay
    #home-search
    .flexibility__wrapper,
  .page-template-properties
    .properties-search-overlay
    #home-search
    .nights__wrapper,
  .page-template-properties
    .properties-search-overlay
    #home-search
    .people__wrapper,
  .page-template-properties
    .properties-search-overlay
    #home-search
    .small-12
    .where__wrapper,
  .page-template-properties
    .properties-search-overlay
    #home-search
    .small-12
    .date__wrapper,
  .page-template-properties
    .properties-search-overlay
    #home-search
    .small-12
    .property__wrapper,
  .page-template-properties
    .properties-search-overlay
    #home-search
    .small-12
    .flexibility__wrapper,
  .page-template-properties
    .properties-search-overlay
    #home-search
    .small-12
    .nights__wrapper,
  .page-template-properties
    .properties-search-overlay
    #home-search
    .small-12
    .people__wrapper {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    height: auto !important;
    min-height: 54px !important;
    max-height: none !important;
    flex: 1 1 100% !important;
    padding: 15px 12px !important;
    border-radius: 4px !important;
    border: 1px solid #e0e0e0 !important;
    background: #fff !important;
    box-sizing: border-box !important;
  }

  .properties-search-overlay #home-search .search,
  .properties-search-overlay #home-search .small-12 .search {
    width: 100% !important;
    flex: 1 1 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 54px !important;
    max-height: none !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
  }

  .properties-search-overlay #home-search .search__wrapepr,
  .properties-search-overlay #home-search .small-12 .search__wrapepr {
    width: 100% !important;
    height: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;
    background: #009fe3 !important;
    border-radius: 4px !important;
  }

  .properties-search-overlay #home-search select,
  .properties-search-overlay #home-search input[type="text"] {
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    line-height: normal !important;
    font-size: 15px !important;
  }
}

/* ============================================
   Additional Mobile Breakpoint (max-width: 700px)
   ============================================ */
@media screen and (max-width: 700px) {
  .properties-search-overlay #home-search .small-12 {
    padding: 0 !important;
  }
}