/* Costa Tropical Real Estate — homepage search as it looked before Costa Estates 2.0:
   a translucent slate panel floating over the slider, white heading and labels,
   blue tabs and button. Values copied from the old MLS plugin's settings. */

.home .search-bar-container {
  --ctre-panel: rgba(41, 51, 61, 0.65);
  --ctre-tab-bg: rgba(41, 51, 61, 0.51);
  --ctre-blue: #0073e1;
  --ctre-blue-hover: rgb(0, 102, 191);
  --ctre-field-ink: rgb(92, 114, 125);
  --ctre-field-line: #cccccc;
  --ctre-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

/* 2.0 draws its own panel and a full-width limestone band; inside the hero both go. */
.home .search-bar-container .cse.cse-search--banner {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  clip-path: none !important;
  color: #fff;
}

.home .search-bar-container .ctre-hero__title {
  margin: 0 0 20px;
  color: #fff;
  font-family: var(--ctre-font);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}

.home .search-bar-container .ctre-hero__tabs {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin: 0 0 20px;
}

.home .search-bar-container .ctre-hero__tab {
  flex: 0 0 auto;
  padding: 13px 23px;
  border-radius: 6px;
  background: var(--ctre-tab-bg);
  color: #9fcbff;
  font-family: var(--ctre-font);
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

.home .search-bar-container .ctre-hero__tab:hover,
.home .search-bar-container .ctre-hero__tab:focus-visible {
  color: #fff;
}

.home .search-bar-container .ctre-hero__tab.is-active {
  background: var(--ctre-blue);
  color: #fff;
}

.home .search-bar-container .cse-field__label,
.home .search-bar-container .cse-toggle__label,
.home .search-bar-container .cse-search__reset {
  text-align: left;
  color: #fff;
  font-family: var(--ctre-font);
  font-size: 15px;
  font-weight: 500;
}

.home .search-bar-container .cse-select,
.home .search-bar-container .cse-input {
  height: 40px;
  min-height: 40px;
  border: 0.8px solid var(--ctre-field-line);
  border-radius: 6px;
  background-color: #fff;
  color: var(--ctre-field-ink);
  font-family: var(--ctre-font);
  font-size: 16px;
}

.home .search-bar-container .cse-btn.cse-btn--accent {
  min-height: 40px;
  height: 40px;
  border: 0;
  border-radius: 4px;
  background: var(--ctre-blue);
  color: #fff;
  font-family: var(--ctre-font);
  font-size: 15px;
  font-weight: 500;
}

.home .search-bar-container .cse-btn.cse-btn--accent:hover,
.home .search-bar-container .cse-btn.cse-btn--accent:focus-visible {
  background: var(--ctre-blue-hover);
}

.home .search-bar-container .cse.cse-search .cse-search__more {
  border: 0 !important;
  border-radius: 4px;
  background: var(--ctre-blue) !important;
  color: #fff !important;
  font-family: var(--ctre-font);
  font-size: 15px;
  font-weight: 500;
}

.home .search-bar-container .cse-search__toggles {
  border-top-color: rgba(255, 255, 255, 0.25);
}

/* Desktop and tablet: the panel itself, over the slider (position comes from the page). */
@media (min-width: 768px) {
  .home .search-bar-container {
    box-sizing: border-box;
    padding: 25px;
    border-radius: 8px;
    background: var(--ctre-panel);
  }

  .home .search-bar-container .cse.cse-search--banner {
    padding: 0 14px !important;
  }

  .home .search-bar-container .ctre-hero__tabs {
    margin-bottom: 28px;
  }
}

/* Phones: no panel; the photo with its dark overlay (costa-tropical-mobile.css) is the ground. */
@media (max-width: 767px) {
  /* Padding, not margin: a top margin here collapsed out through the slider
     wrappers and showed as a white stripe under the site header. */
  .home .search-bar-container {
    padding-top: 20px !important;
  }

  .home .search-bar-container .ctre-hero__title {
    margin: 0 0 16px;
    font-size: 22px;
  }

  /* Four tabs as a 2x2 grid: all visible, nothing cut off at the edge. */
  .home .search-bar-container .ctre-hero__tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 20px;
  }

  .home .search-bar-container .ctre-hero__tab {
    padding: 12px 8px;
    text-align: center;
    white-space: normal;
  }

  .home .search-bar-container .cse.cse-search--banner {
    border-top: 0 !important;
  }
}

/* Feature chips (Pool, Garden, Sea views...): translucent on the panel, white text,
   blue when ticked — the old panel's colours instead of 2.0's white chips. */
.home .search-bar-container .cse-toggle {
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.home .search-bar-container .cse-toggle:hover {
  background: rgba(255, 255, 255, 0.18);
}

.home .search-bar-container .cse-toggle:has(> input:checked) {
  border-color: var(--ctre-blue);
  background: var(--ctre-blue);
  color: #fff;
}

.home .search-bar-container .cse-toggle__label {
  color: inherit;
  font-size: 15px;
}

.home .search-bar-container .cse.cse-search .cse-toggle input {
  border-color: rgba(255, 255, 255, 0.8);
  background: transparent;
}

.home .search-bar-container .cse.cse-search .cse-toggle input::before {
  background: #fff;
}

.home .search-bar-container .cse.cse-search .cse-toggle input:checked {
  border-color: #fff;
}

/* Golden Property: close the gaps above and below the listing strip. */
.home .entry-content > p:empty {
  display: none;
}

.home .entry-content > .cse-results {
  margin-top: 24px;
  margin-bottom: 32px;
}