/*
  Smart Property Search visual polish — homepage only.
  Functionality, field order, query parameters and search behavior are intentionally untouched.
*/

body[data-page="index.html"] main .hero-search {
  background: rgba(255, 255, 255, 0.985) !important;
  border: 1px solid rgba(22, 58, 50, 0.07) !important;
  border-radius: 22px !important;
  box-shadow:
    0 22px 58px rgba(8, 35, 28, 0.16),
    0 5px 16px rgba(8, 35, 28, 0.055) !important;
  padding: 14px 15px 15px !important;
  column-gap: 0 !important;
  row-gap: 0 !important;
}

/* Primary natural-language query field. */
body[data-page="index.html"] main .hero-search .smart-property-query {
  grid-column: 1 / -1 !important;
  min-width: 0 !important;
  margin: 0 2px 10px !important;
  padding: 1px 0 13px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(22, 58, 50, 0.075) !important;
  background: transparent !important;
}

body[data-page="index.html"] main .hero-search .smart-property-query > label {
  display: flex !important;
  flex-direction: column !important;
  gap: 7px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

body[data-page="index.html"] main .hero-search .smart-property-query > label > span {
  margin: 0 0 0 2px !important;
  color: #52665f !important;
  font-size: 0.69rem !important;
  font-weight: 850 !important;
  line-height: 1.35 !important;
  letter-spacing: 0.065em !important;
  text-transform: uppercase !important;
}

body[data-page="index.html"] main .hero-search .smart-property-query input[data-search="q"] {
  width: 100% !important;
  min-width: 0 !important;
  height: 50px !important;
  padding: 0 15px 0 45px !important;
  border: 1px solid rgba(22, 58, 50, 0.145) !important;
  border-radius: 12px !important;
  outline: 0 !important;
  background-color: #fbfcfb !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%232e7d65' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: 15px center !important;
  background-size: 19px 19px !important;
  color: #18211e !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
  font-family: Inter, sans-serif !important;
  font-size: 0.96rem !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  transition:
    border-color 0.2s ease,
    background-color 0.2s ease,
    box-shadow 0.2s ease !important;
}

body[data-page="index.html"] main .hero-search .smart-property-query input[data-search="q"]::placeholder {
  color: #687870 !important;
  opacity: 1 !important;
  font-weight: 500 !important;
}

body[data-page="index.html"] main .hero-search .smart-property-query input[data-search="q"]:hover {
  border-color: rgba(46, 125, 101, 0.31) !important;
  background-color: #fff !important;
}

body[data-page="index.html"] main .hero-search .smart-property-query input[data-search="q"]:focus,
body[data-page="index.html"] main .hero-search .smart-property-query input[data-search="q"]:focus-visible {
  border-color: #2e7d65 !important;
  background-color: #fff !important;
  box-shadow:
    0 0 0 3px rgba(46, 125, 101, 0.13),
    0 5px 15px rgba(22, 58, 50, 0.055) !important;
}

/* Keep autocomplete visually aligned with the refined input. */
body[data-page="index.html"] main .hero-search .smart-property-query .smart-search-suggestions {
  top: calc(100% - 4px) !important;
  left: 0 !important;
  right: 0 !important;
  padding: 7px !important;
  border: 1px solid rgba(22, 58, 50, 0.1) !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.99) !important;
  box-shadow:
    0 20px 48px rgba(8, 35, 28, 0.16),
    0 4px 12px rgba(8, 35, 28, 0.06) !important;
}

body[data-page="index.html"] main .hero-search .smart-search-suggestion {
  border-radius: 9px !important;
  padding: 10px 11px !important;
}

/* Filter row — same structure/order, lighter boundaries and consistent controls. */
body[data-page="index.html"] main .hero-search > label {
  padding: 7px 13px !important;
  border-right: 1px solid rgba(22, 58, 50, 0.085) !important;
  border-bottom: 0 !important;
  background: transparent !important;
}

body[data-page="index.html"] main .hero-search > label:last-of-type {
  border-right: 0 !important;
}

body[data-page="index.html"] main .hero-search > label > span {
  margin: 0 0 4px !important;
  color: #66766f !important;
  font-size: 0.67rem !important;
  font-weight: 820 !important;
  letter-spacing: 0.06em !important;
}

body[data-page="index.html"] main .hero-search .premium-select {
  margin-top: 0 !important;
}

body[data-page="index.html"] main .hero-search .premium-select-trigger {
  min-height: 40px !important;
  padding: 6px 31px 6px 9px !important;
  border: 1px solid rgba(22, 58, 50, 0.075) !important;
  border-radius: 10px !important;
  background: #fbfcfb !important;
  color: #18211e !important;
  box-shadow: none !important;
  font-size: 0.93rem !important;
  font-weight: 700 !important;
  transition:
    border-color 0.2s ease,
    background-color 0.2s ease,
    box-shadow 0.2s ease !important;
}

body[data-page="index.html"] main .hero-search .premium-select-trigger:hover {
  border-color: rgba(46, 125, 101, 0.22) !important;
  background: #f7faf8 !important;
  color: #16483b !important;
}

body[data-page="index.html"] main .hero-search .premium-select-trigger:focus-visible,
body[data-page="index.html"] main .hero-search .premium-select.open .premium-select-trigger {
  border-color: rgba(46, 125, 101, 0.46) !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(46, 125, 101, 0.1) !important;
}

body[data-page="index.html"] main .hero-search .premium-select-chevron {
  right: 6px !important;
  color: #61726a !important;
}

body[data-page="index.html"] main .hero-search .premium-select.open .premium-select-chevron {
  background: rgba(46, 125, 101, 0.1) !important;
  color: #1d6a54 !important;
}

/* Search CTA — visually balanced with the controls without increasing panel height. */
body[data-page="index.html"] main .hero-search > button[type="submit"] {
  min-height: 52px !important;
  align-self: center !important;
  margin: 0 2px 0 10px !important;
  padding: 11px 21px !important;
  border-radius: 12px !important;
  gap: 8px !important;
  background: linear-gradient(135deg, #2e7d65, #246b58) !important;
  box-shadow: 0 8px 18px rgba(35, 108, 88, 0.17) !important;
  font-weight: 820 !important;
  transition:
    transform 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease !important;
}

body[data-page="index.html"] main .hero-search > button[type="submit"]:hover {
  background: linear-gradient(135deg, #215f4f, #2e7d65) !important;
  box-shadow: 0 10px 22px rgba(35, 108, 88, 0.22) !important;
  transform: translateY(-1px) !important;
}

body[data-page="index.html"] main .hero-search > button[type="submit"]:active {
  transform: translateY(0) !important;
  box-shadow: 0 5px 13px rgba(35, 108, 88, 0.17) !important;
}

body[data-page="index.html"] main .hero-search > button[type="submit"]:focus-visible {
  outline: 0 !important;
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, 0.92),
    0 0 0 6px rgba(46, 125, 101, 0.3),
    0 8px 18px rgba(35, 108, 88, 0.17) !important;
}

/* Tablet: preserve the existing two-column layout, but remove heavy divider rows. */
@media (max-width: 980px) {
  body[data-page="index.html"] main .hero-search {
    padding: 15px !important;
    row-gap: 2px !important;
  }

  body[data-page="index.html"] main .hero-search .smart-property-query {
    margin: 0 0 9px !important;
    padding: 0 0 12px !important;
  }

  body[data-page="index.html"] main .hero-search > label {
    padding: 8px 10px !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
  }

  body[data-page="index.html"] main .hero-search .premium-select-trigger {
    min-height: 44px !important;
  }

  body[data-page="index.html"] main .hero-search > button[type="submit"] {
    margin: 9px 0 0 !important;
    min-height: 54px !important;
  }
}

/* Homepage V11 mobile layout stays intact; only the search-panel finish is refined. */
@media (max-width: 720px) {
  body[data-page="index.html"] main .hero-search {
    padding: 15px !important;
    border-radius: 20px !important;
    border-color: rgba(22, 58, 50, 0.06) !important;
    box-shadow:
      0 18px 42px rgba(8, 35, 28, 0.15),
      0 4px 12px rgba(8, 35, 28, 0.05) !important;
  }

  body[data-page="index.html"] main .hero-search .smart-property-query {
    grid-column: 1 / -1 !important;
    margin: 0 0 8px !important;
    padding: 0 0 12px !important;
  }

  body[data-page="index.html"] main .hero-search .smart-property-query > label {
    width: 100% !important;
  }

  body[data-page="index.html"] main .hero-search .smart-property-query input[data-search="q"] {
    height: 50px !important;
    padding-left: 44px !important;
    background-position: 14px center !important;
    font-size: 16px !important;
  }

  body[data-page="index.html"] main .hero-search > label {
    padding: 6px !important;
    border: 0 !important;
  }

  body[data-page="index.html"] main .hero-search > label > span {
    margin-bottom: 5px !important;
  }

  body[data-page="index.html"] main .hero-search .premium-select {
    margin-top: 0 !important;
  }

  body[data-page="index.html"] main .hero-search .premium-select-trigger {
    min-height: 46px !important;
    padding: 8px 31px 8px 10px !important;
    border-color: rgba(22, 58, 50, 0.1) !important;
    background: #fafcfb !important;
    font-size: 0.95rem !important;
    font-weight: 650 !important;
  }

  body[data-page="index.html"] main .hero-search > button[type="submit"] {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-height: 52px !important;
    margin: 8px 0 0 !important;
    border-radius: 12px !important;
  }
}

@media (max-width: 450px) {
  body[data-page="index.html"] main .hero-search {
    padding: 13px !important;
  }

  body[data-page="index.html"] main .hero-search .smart-property-query input[data-search="q"] {
    height: 49px !important;
    padding-right: 12px !important;
    font-size: 16px !important;
  }

  body[data-page="index.html"] main .hero-search .smart-search-suggestions {
    max-height: 220px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-page="index.html"] main .hero-search .smart-property-query input[data-search="q"],
  body[data-page="index.html"] main .hero-search .premium-select-trigger,
  body[data-page="index.html"] main .hero-search > button[type="submit"] {
    transition: none !important;
  }
}

/* Homepage: hide only the upper Smart Property Search text-query area */
body[data-page="index.html"] main .hero-search .smart-property-query {
  display: none !important;
}


/* Homepage: keep hero background image stable */
body[data-page="index.html"] .hero-bg {
  animation: none !important;
}


/* Prevent native hero selects flashing before premium-select initialization */
body[data-page="index.html"] main .hero-search select:not(.native-select-hidden) {
  visibility: hidden !important;
}



/* TABLET 768 HERO CTA SEARCH FIX */
@media (min-width:768px) and (max-width:1024px){
  body[data-page="index.html"] main .hero{
    height:960px!important;
    min-height:960px!important;
  }
}