.elementor-33372 .elementor-element.elementor-element-c42904b{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:100px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-33372 .elementor-element.elementor-element-6033c62 > .elementor-widget-container{padding:10rem 1rem 10rem 1rem;}.elementor-33372 .elementor-element.elementor-element-625b1b0{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:5rem;--padding-bottom:5rem;--padding-left:2rem;--padding-right:2rem;}.elementor-33372 .elementor-element.elementor-element-9ea643c{--display:flex;}.elementor-33372 .elementor-element.elementor-element-ad28c9e{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:5rem;--margin-bottom:4rem;--margin-left:0rem;--margin-right:0rem;}.elementor-33372 .elementor-element.elementor-element-ef29baf > .elementor-widget-container{background-color:var( --e-global-color-74fcbb4 );margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}body.elementor-page-33372:not(.elementor-motion-effects-element-type-background), body.elementor-page-33372 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-text );}/* Start custom CSS for html, class: .elementor-element-f0c8286 */<style>
  .kk-search-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    gap: 4px;
    font-size: 13px;
  }

  .kk-search-bar > * {
    flex: 1 1 0;
    min-width: 90px;
    box-sizing: border-box;
  }

  /* Location wrapper (for autocomplete dropdown) */

.kk-location-wrapper {
  position: relative;
  flex: 2 1 0;       /* match other fields */
  min-width: 150px;  /* keep it from collapsing */
  box-sizing: border-box;
}
  .kk-location-wrapper input[type="text"] {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid #dcdcdc;
    background: #fff;
    box-sizing: border-box;
  }

  .kk-search-bar select {
    padding: 6px 26px 6px 8px;
    border: 1px solid #dcdcdc;
    background: #f7f7f7;
    font-size: 13px;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, #555 50%),
                      linear-gradient(135deg, #555 50%, transparent 50%);
    background-position: calc(100% - 12px) 50%, calc(100% - 8px) 50%;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
  }

  .kk-search-bar button {
    padding: 6px 12px;
    border: 1px solid #dcdcdc;
    background: #444;
    color: #fff;
    font-size: 13px;
    cursor: pointer;
  }

  /* --- Generic dropdown filter pill --- */

  .kk-filter {
    position: relative;
    flex: 1 1 0;
    box-sizing: border-box;
  }

  .kk-filter-toggle {
    width: 100%;
    text-align: left;
    padding: 6px 26px 6px 8px;
    border: 1px solid #dcdcdc;
    background: #f7f7f7;
    font-size: 13px;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, #555 50%),
                      linear-gradient(135deg, #555 50%, transparent 50%);
    background-position: calc(100% - 12px) 50%, calc(100% - 8px) 50%;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
  }

  .kk-filter-dropdown {
    position: absolute;
    left: 0;
    top: 100%;
    margin-top: 4px;
    padding: 8px;
    background: #fff;
    border: 1px solid #dcdcdc;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    display: none;         /* CLOSED BY DEFAULT */
    z-index: 1000;

    align-items: center;
    gap: 6px;
  }

  .kk-filter.open .kk-filter-dropdown {
    display: flex;
  }

  .kk-filter-separator {
    font-size: 13px;
  }

  /* Property type dropdown layout (stacked checkboxes) */
  .kk-type-dropdown {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .kk-type-dropdown label {
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
  }

  /* --- Autocomplete dropdown for location --- */

  .kk-location-suggestions {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    margin-top: 2px;
    background: #fff;
    border: 1px solid #dcdcdc;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    max-height: 260px;
    overflow-y: auto;
    z-index: 1500;
    display: none;
  }

  .kk-location-suggestions.visible {
    display: block;
  }

  .kk-location-suggestion {
    padding: 6px 10px;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .kk-location-suggestion:hover,
  .kk-location-suggestion.active {
    background: #f0f0f0;
  }
</style>

<div class="kk-search-bar">
  <!-- Location with autocomplete → polygonKey -->
  <div class="kk-location-wrapper">
    <input
      type="text"
      id="kk-location"
      placeholder="Enter city, neighborhood, or ZIP"
      autocomplete="on"
    />
    <div id="kk-location-suggestions" class="kk-location-suggestions"></div>
  </div>

  <!-- searchtype -->
  <select id="kk-searchtype">
    <option value="">For sale</option>
    <option value="forsale">For sale</option>
    <option value="sold">Sold</option>
  </select>

  <!-- Price Min/Max dropdown pill -->
  <div class="kk-filter kk-price-filter">
    <button type="button" class="kk-filter-toggle kk-price-toggle">Price</button>
    <div class="kk-filter-dropdown kk-price-dropdown">
      <select id="kk-price-min">
        <option value="">Min</option>
        <option value="400000">$400k</option>
        <option value="600000">$600k</option>
        <option value="800000">$800k</option>
        <option value="1000000">$1M</option>
        <option value="1500000">$1.5M</option>
        <option value="2000000">$2M</option>
      </select>
      <span class="kk-filter-separator">-</span>
      <select id="kk-price-max">
        <option value="">Max</option>
        <option value="800000">$800k</option>
        <option value="1000000">$1M</option>
        <option value="1500000">$1.5M</option>
        <option value="2000000">$2M</option>
        <option value="3000000">$3M</option>
        <option value="5000000">$5M</option>
      </select>
    </div>
  </div>

  <!-- Property Type = multi-select checkboxes → propertyTypes -->
  <div class="kk-filter kk-type-filter">
    <button type="button" class="kk-filter-toggle kk-type-toggle">Property Type</button>
    <div class="kk-filter-dropdown kk-type-dropdown">
      <!-- values are kvCORE propertyTypes fragments -->
      <label>
        <input type="checkbox" name="kk-type" value="31">
        Townhouse
      </label>
      <label>
        <input type="checkbox" name="kk-type" value="2">
        Condo
      </label>
      <label>
        <input type="checkbox" name="kk-type" value="1">
        Single Family
      </label>
      <label>
        <input type="checkbox" name="kk-type" value="3">
        Multi Family
      </label>
      <label>
        <!-- "Other" bundles multiple types -->
        <input type="checkbox" name="kk-type" value="4|5|8|9|15|28|55|56">
        Other
      </label>
    </div>
  </div>

  <!-- beds -->
  <select id="kk-beds">
    <option value="">Bedrooms (any)</option>
    <option value="1">1+</option>
    <option value="2">2+</option>
    <option value="3">3+</option>
    <option value="4">4+</option>
  </select>

  <!-- baths -->
  <select id="kk-baths">
    <option value="">Bathrooms (any)</option>
    <option value="1">1+</option>
    <option value="2">2+</option>
    <option value="3">3+</option>
  </select>

  <!-- Square Feet → footageMin -->
  <select id="kk-footage-min">
    <option value="">Sq Ft (any)</option>
    <option value="1000">1,000+</option>
    <option value="2000">2,000+</option>
    <option value="3000">3,000+</option>
    <option value="4000">4,000+</option>
  </select>

  <!-- Acres → acresMin -->
  <select id="kk-acres-min">
    <option value="">Acres (any)</option>
    <option value="0.25">0.25+</option>
    <option value="0.5">0.50+</option>
    <option value="1">1.0+</option>
    <option value="2">2.0+</option>
  </select>

  <!-- Sort → order -->
  <select id="kk-order">
    <option value="">Sort: Popular</option>
    <option value="visits|desc">Popular</option>
    <option value="listingdate|desc">Newest</option>
    <option value="price|asc">Price low</option>
    <option value="price|desc">Price high</option>
  </select>

  <button id="kk-search-btn">Search</button>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
  const bar = document.querySelector('.kk-search-bar');
  if (!bar) return;

  const locationInput       = bar.querySelector('#kk-location');
  const locationSuggestions = bar.querySelector('#kk-location-suggestions');

  const searchtypeSelect = bar.querySelector('#kk-searchtype');
  const bedsSelect       = bar.querySelector('#kk-beds');
  const bathsSelect      = bar.querySelector('#kk-baths');
  const footageMinSelect = bar.querySelector('#kk-footage-min');
  const acresMinSelect   = bar.querySelector('#kk-acres-min');
  const orderSelect      = bar.querySelector('#kk-order');
  const searchBtn        = bar.querySelector('#kk-search-btn');

  // Price pill
  const priceFilter    = document.querySelector('.kk-price-filter');
  const priceToggle    = document.querySelector('.kk-price-toggle');
  const priceMinSelect = document.querySelector('#kk-price-min');
  const priceMaxSelect = document.querySelector('#kk-price-max');

  // Property Types
  const typeFilter     = document.querySelector('.kk-type-filter');
  const typeToggle     = document.querySelector('.kk-type-toggle');
  const typeCheckboxes = document.querySelectorAll('input[name="kk-type"]');

  // Sq Ft pill is now a simple select (footageMin), so no pill JS needed

  const baseUrl = 'https://kimberlykramer.com/staging/8335/property-search/?perRow=4&layout=map&page=1&limited=true&limit=800';

  /* ==========
     AUTOCOMPLETE LIST (label → polygonKey)
     ========== */

  // Each item has a label + the raw polygonKey value (unencoded colon).
  const locationItems = [
    { label: 'Carlsbad',         value: 'city%3Ag30_9mus7nhs' },
    { label: 'Carlsbad Village', value: 'neighborhood%3Ag10_9mus9tkp' },
    { label: '92011',            value: 'zip%3A92011' },

    // add 100s more like:
    // { label: 'La Jolla', value: 'city:...' },
    // { label: '92109', value: 'zip%3A92011' },
  ];

  let activeSuggestionIndex = -1;
  let currentMatches = [];
  let selectedPolygonKey = null; // actual value used for polygonKey=

  function clearLocationSuggestions() {
    if (!locationSuggestions) return;
    locationSuggestions.innerHTML = '';
    locationSuggestions.classList.remove('visible');
    activeSuggestionIndex = -1;
    currentMatches = [];
  }

  function showLocationSuggestions(matches) {
    if (!locationSuggestions) return;
    locationSuggestions.innerHTML = '';
    if (!matches.length) {
      clearLocationSuggestions();
      return;
    }
    matches.forEach((item, index) => {
      const div = document.createElement('div');
      div.className = 'kk-location-suggestion';
      div.textContent = item.label;
      div.addEventListener('mousedown', function(e) {
        e.preventDefault(); // prevent blur
        locationInput.value = item.label;
        selectedPolygonKey = item.value; // e.g. "city:g30_..."
        clearLocationSuggestions();
      });
      locationSuggestions.appendChild(div);
    });
    locationSuggestions.classList.add('visible');
  }

  function filterLocationItems(query) {
    const q = query.trim().toLowerCase();
    if (!q) return [];
    return locationItems
      .filter(item => item.label.toLowerCase().includes(q))
      .slice(0, 15);
  }

  if (locationInput) {
    locationInput.addEventListener('input', function() {
      selectedPolygonKey = null; // user is typing, reset selection
      const query = locationInput.value;
      const filtered = filterLocationItems(query);
      currentMatches = filtered;
      showLocationSuggestions(filtered);
    });

    locationInput.addEventListener('keydown', function(e) {
      const suggestions = locationSuggestions
        ? Array.from(locationSuggestions.querySelectorAll('.kk-location-suggestion'))
        : [];

      if (locationSuggestions.classList.contains('visible') && suggestions.length) {
        if (e.key === 'ArrowDown') {
          e.preventDefault();
          activeSuggestionIndex = (activeSuggestionIndex + 1) % suggestions.length;
          suggestions.forEach((s, i) => {
            s.classList.toggle('active', i === activeSuggestionIndex);
          });
        } else if (e.key === 'ArrowUp') {
          e.preventDefault();
          activeSuggestionIndex =
            (activeSuggestionIndex - 1 + suggestions.length) % suggestions.length;
          suggestions.forEach((s, i) => {
            s.classList.toggle('active', i === activeSuggestionIndex);
          });
        } else if (e.key === 'Enter') {
          if (activeSuggestionIndex >= 0 && currentMatches[activeSuggestionIndex]) {
            e.preventDefault();
            const item = currentMatches[activeSuggestionIndex];
            locationInput.value = item.label;
            selectedPolygonKey = item.value;
            clearLocationSuggestions();
          }
        } else if (e.key === 'Escape') {
          clearLocationSuggestions();
        }
      } else if (e.key === 'Enter') {
        // No visible suggestions → trigger search
        e.preventDefault();
        buildAndGo();
      }
    });

    // Close suggestions on blur (slight delay for click)
    locationInput.addEventListener('blur', function() {
      setTimeout(clearLocationSuggestions, 150);
    });
  }

  /* ==========
     FILTER DROPDOWNS (price pill, property types)
     ========== */

  function setupFilterToggle(filter, toggle) {
    if (!filter || !toggle) return;
    toggle.addEventListener('click', function(e) {
      e.stopPropagation();
      filter.classList.toggle('open');
    });
  }

  setupFilterToggle(priceFilter, priceToggle);
  setupFilterToggle(typeFilter, typeToggle);

  // Close dropdowns when clicking outside
  document.addEventListener('click', function(e) {
    [priceFilter, typeFilter].forEach(function(filter) {
      if (filter && !filter.contains(e.target)) {
        filter.classList.remove('open');
      }
    });
  });

  // Close price dropdown on selection
  if (priceMinSelect) priceMinSelect.addEventListener('change', () => priceFilter && priceFilter.classList.remove('open'));
  if (priceMaxSelect) priceMaxSelect.addEventListener('change', () => priceFilter && priceFilter.classList.remove('open'));

  /* ==========
     URL BUILDER
     ========== */

  function buildAndGo() {
    const params = new URLSearchParams();

    // polygonKey from autocomplete
    if (selectedPolygonKey) {
      params.append('polygonKey', selectedPolygonKey);
    }

    // searchtype
    if (searchtypeSelect && searchtypeSelect.value) {
      params.append('searchtype', searchtypeSelect.value);
    }

    // propertyTypes (multi)
    if (typeCheckboxes && typeCheckboxes.length) {
      const types = [];
      typeCheckboxes.forEach(function(cb) {
        if (cb.checked) types.push(cb.value);
      });
      if (types.length) {
        // If some values already contain "|", this still produces a flat pipe-separated list
        params.append('propertyTypes', types.join('|'));
      }
    }

    // Price min/max
    if (priceMinSelect && priceMinSelect.value) {
      params.append('priceMin', priceMinSelect.value);
    }
    if (priceMaxSelect && priceMaxSelect.value) {
      params.append('priceMax', priceMaxSelect.value);
    }

    // beds / baths
    if (bedsSelect && bedsSelect.value) {
      params.append('beds', bedsSelect.value);
    }
    if (bathsSelect && bathsSelect.value) {
      params.append('baths', bathsSelect.value);
    }

    // footageMin
    if (footageMinSelect && footageMinSelect.value) {
      params.append('footageMin', footageMinSelect.value);
    }

    // acresMin
    if (acresMinSelect && acresMinSelect.value) {
      params.append('acresMin', acresMinSelect.value);
    }

    // order
    if (orderSelect && orderSelect.value) {
      params.append('order', orderSelect.value);
    }

    // Close dropdowns & suggestions
    [priceFilter, typeFilter].forEach(f => f && f.classList.remove('open'));
    clearLocationSuggestions();

    const extra = params.toString();
    const finalUrl = extra
      ? baseUrl + '&' + extra
      : baseUrl;

    window.location.href = finalUrl;
  }

  if (searchBtn) {
    searchBtn.addEventListener('click', function(e) {
      e.preventDefault();
      buildAndGo();
    });
  }
});
</script>/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-c04de9b */<style>
  .kk-search-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    gap: 4px;
    font-size: 13px;
  }

  .kk-search-bar > * {
    flex: 1 1 0;
    min-width: 90px;
    box-sizing: border-box;
  }

  /* Location wrapper (for autocomplete dropdown) */

.kk-location-wrapper {
  position: relative;
  flex: 2 1 0;       /* match other fields */
  min-width: 150px;  /* keep it from collapsing */
  box-sizing: border-box;
}
  .kk-location-wrapper input[type="text"] {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid #dcdcdc;
    background: #fff;
    box-sizing: border-box;
  }

  .kk-search-bar select {
    padding: 6px 26px 6px 8px;
    border: 1px solid #dcdcdc;
    background: #f7f7f7;
    font-size: 13px;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, #555 50%),
                      linear-gradient(135deg, #555 50%, transparent 50%);
    background-position: calc(100% - 12px) 50%, calc(100% - 8px) 50%;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
  }

  .kk-search-bar button {
    padding: 6px 12px;
    border: 1px solid #dcdcdc;
    background: #444;
    color: #fff;
    font-size: 13px;
    cursor: pointer;
  }

  /* --- Generic dropdown filter pill --- */

  .kk-filter {
    position: relative;
    flex: 1 1 0;
    box-sizing: border-box;
  }

  .kk-filter-toggle {
    width: 100%;
    text-align: left;
    padding: 6px 26px 6px 8px;
    border: 1px solid #dcdcdc;
    background: #f7f7f7;
    font-size: 13px;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, #555 50%),
                      linear-gradient(135deg, #555 50%, transparent 50%);
    background-position: calc(100% - 12px) 50%, calc(100% - 8px) 50%;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
  }

  .kk-filter-dropdown {
    position: absolute;
    left: 0;
    top: 100%;
    margin-top: 4px;
    padding: 8px;
    background: #fff;
    border: 1px solid #dcdcdc;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    display: none;         /* CLOSED BY DEFAULT */
    z-index: 1000;

    align-items: center;
    gap: 6px;
  }

  .kk-filter.open .kk-filter-dropdown {
    display: flex;
  }

  .kk-filter-separator {
    font-size: 13px;
  }

  /* Property type dropdown layout (stacked checkboxes) */
  .kk-type-dropdown {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .kk-type-dropdown label {
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
  }

  /* --- Autocomplete dropdown for location --- */

  .kk-location-suggestions {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    margin-top: 2px;
    background: #fff;
    border: 1px solid #dcdcdc;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    max-height: 260px;
    overflow-y: auto;
    z-index: 1500;
    display: none;
  }

  .kk-location-suggestions.visible {
    display: block;
  }

  .kk-location-suggestion {
    padding: 6px 10px;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .kk-location-suggestion:hover,
  .kk-location-suggestion.active {
    background: #f0f0f0;
  }
</style>

<div class="kk-search-bar">
  <!-- Location with autocomplete → polygonKey -->
  <div class="kk-location-wrapper">
    <input
      type="text"
      id="kk-location"
      placeholder="Enter city, neighborhood, or ZIP"
      autocomplete="on"
    />
    <div id="kk-location-suggestions" class="kk-location-suggestions"></div>
  </div>

  <!-- searchtype -->
  <select id="kk-searchtype">
    <option value="">For sale</option>
    <option value="forsale">For sale</option>
    <option value="sold">Sold</option>
  </select>

  <!-- Price Min/Max dropdown pill -->
  <div class="kk-filter kk-price-filter">
    <button type="button" class="kk-filter-toggle kk-price-toggle">Price</button>
    <div class="kk-filter-dropdown kk-price-dropdown">
      <select id="kk-price-min">
        <option value="">Min</option>
        <option value="400000">$400k</option>
        <option value="600000">$600k</option>
        <option value="800000">$800k</option>
        <option value="1000000">$1M</option>
        <option value="1500000">$1.5M</option>
        <option value="2000000">$2M</option>
      </select>
      <span class="kk-filter-separator">-</span>
      <select id="kk-price-max">
        <option value="">Max</option>
        <option value="800000">$800k</option>
        <option value="1000000">$1M</option>
        <option value="1500000">$1.5M</option>
        <option value="2000000">$2M</option>
        <option value="3000000">$3M</option>
        <option value="5000000">$5M</option>
      </select>
    </div>
  </div>

  <!-- Property Type = multi-select checkboxes → propertyTypes -->
  <div class="kk-filter kk-type-filter">
    <button type="button" class="kk-filter-toggle kk-type-toggle">Property Type</button>
    <div class="kk-filter-dropdown kk-type-dropdown">
      <!-- values are kvCORE propertyTypes fragments -->
      <label>
        <input type="checkbox" name="kk-type" value="31">
        Townhouse
      </label>
      <label>
        <input type="checkbox" name="kk-type" value="2">
        Condo
      </label>
      <label>
        <input type="checkbox" name="kk-type" value="1">
        Single Family
      </label>
      <label>
        <input type="checkbox" name="kk-type" value="3">
        Multi Family
      </label>
      <label>
        <!-- "Other" bundles multiple types -->
        <input type="checkbox" name="kk-type" value="4|5|8|9|15|28|55|56">
        Other
      </label>
    </div>
  </div>

  <!-- beds -->
  <select id="kk-beds">
    <option value="">Bedrooms (any)</option>
    <option value="1">1+</option>
    <option value="2">2+</option>
    <option value="3">3+</option>
    <option value="4">4+</option>
  </select>

  <!-- baths -->
  <select id="kk-baths">
    <option value="">Bathrooms (any)</option>
    <option value="1">1+</option>
    <option value="2">2+</option>
    <option value="3">3+</option>
  </select>

  <!-- Square Feet → footageMin -->
  <select id="kk-footage-min">
    <option value="">Sq Ft (any)</option>
    <option value="1000">1,000+</option>
    <option value="2000">2,000+</option>
    <option value="3000">3,000+</option>
    <option value="4000">4,000+</option>
  </select>

  <!-- Acres → acresMin -->
  <select id="kk-acres-min">
    <option value="">Acres (any)</option>
    <option value="0.25">0.25+</option>
    <option value="0.5">0.50+</option>
    <option value="1">1.0+</option>
    <option value="2">2.0+</option>
  </select>

  <!-- Sort → order -->
  <select id="kk-order">
    <option value="">Sort: Popular</option>
    <option value="visits|desc">Popular</option>
    <option value="listingdate|desc">Newest</option>
    <option value="price|asc">Price low</option>
    <option value="price|desc">Price high</option>
  </select>

  <button id="kk-search-btn">Search</button>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
  const bar = document.querySelector('.kk-search-bar');
  if (!bar) return;

  const locationInput       = bar.querySelector('#kk-location');
  const locationSuggestions = bar.querySelector('#kk-location-suggestions');

  const searchtypeSelect = bar.querySelector('#kk-searchtype');
  const bedsSelect       = bar.querySelector('#kk-beds');
  const bathsSelect      = bar.querySelector('#kk-baths');
  const footageMinSelect = bar.querySelector('#kk-footage-min');
  const acresMinSelect   = bar.querySelector('#kk-acres-min');
  const orderSelect      = bar.querySelector('#kk-order');
  const searchBtn        = bar.querySelector('#kk-search-btn');

  // Price pill
  const priceFilter    = document.querySelector('.kk-price-filter');
  const priceToggle    = document.querySelector('.kk-price-toggle');
  const priceMinSelect = document.querySelector('#kk-price-min');
  const priceMaxSelect = document.querySelector('#kk-price-max');

  // Property Types
  const typeFilter     = document.querySelector('.kk-type-filter');
  const typeToggle     = document.querySelector('.kk-type-toggle');
  const typeCheckboxes = document.querySelectorAll('input[name="kk-type"]');

  // Sq Ft pill is now a simple select (footageMin), so no pill JS needed

  const baseUrl = 'https://kimberlykramer.com/staging/8335/property-search/?perRow=4&layout=map&page=1&limited=true&limit=800';

  /* ==========
     AUTOCOMPLETE LIST (label → polygonKey)
     ========== */

  // Each item has a label + the raw polygonKey value (unencoded colon).
  const locationItems = [
    { label: 'Carlsbad',         value: 'city%3Ag30_9mus7nhs' },
    { label: 'Carlsbad Village', value: 'neighborhood%3Ag10_9mus9tkp' },
    { label: '92011',            value: 'zip%3A92011' },

    // add 100s more like:
    // { label: 'La Jolla', value: 'city:...' },
    // { label: '92109', value: 'zip%3A92011' },
  ];

  let activeSuggestionIndex = -1;
  let currentMatches = [];
  let selectedPolygonKey = null; // actual value used for polygonKey=

  function clearLocationSuggestions() {
    if (!locationSuggestions) return;
    locationSuggestions.innerHTML = '';
    locationSuggestions.classList.remove('visible');
    activeSuggestionIndex = -1;
    currentMatches = [];
  }

  function showLocationSuggestions(matches) {
    if (!locationSuggestions) return;
    locationSuggestions.innerHTML = '';
    if (!matches.length) {
      clearLocationSuggestions();
      return;
    }
    matches.forEach((item, index) => {
      const div = document.createElement('div');
      div.className = 'kk-location-suggestion';
      div.textContent = item.label;
      div.addEventListener('mousedown', function(e) {
        e.preventDefault(); // prevent blur
        locationInput.value = item.label;
        selectedPolygonKey = item.value; // e.g. "city:g30_..."
        clearLocationSuggestions();
      });
      locationSuggestions.appendChild(div);
    });
    locationSuggestions.classList.add('visible');
  }

  function filterLocationItems(query) {
    const q = query.trim().toLowerCase();
    if (!q) return [];
    return locationItems
      .filter(item => item.label.toLowerCase().includes(q))
      .slice(0, 15);
  }

  if (locationInput) {
    locationInput.addEventListener('input', function() {
      selectedPolygonKey = null; // user is typing, reset selection
      const query = locationInput.value;
      const filtered = filterLocationItems(query);
      currentMatches = filtered;
      showLocationSuggestions(filtered);
    });

    locationInput.addEventListener('keydown', function(e) {
      const suggestions = locationSuggestions
        ? Array.from(locationSuggestions.querySelectorAll('.kk-location-suggestion'))
        : [];

      if (locationSuggestions.classList.contains('visible') && suggestions.length) {
        if (e.key === 'ArrowDown') {
          e.preventDefault();
          activeSuggestionIndex = (activeSuggestionIndex + 1) % suggestions.length;
          suggestions.forEach((s, i) => {
            s.classList.toggle('active', i === activeSuggestionIndex);
          });
        } else if (e.key === 'ArrowUp') {
          e.preventDefault();
          activeSuggestionIndex =
            (activeSuggestionIndex - 1 + suggestions.length) % suggestions.length;
          suggestions.forEach((s, i) => {
            s.classList.toggle('active', i === activeSuggestionIndex);
          });
        } else if (e.key === 'Enter') {
          if (activeSuggestionIndex >= 0 && currentMatches[activeSuggestionIndex]) {
            e.preventDefault();
            const item = currentMatches[activeSuggestionIndex];
            locationInput.value = item.label;
            selectedPolygonKey = item.value;
            clearLocationSuggestions();
          }
        } else if (e.key === 'Escape') {
          clearLocationSuggestions();
        }
      } else if (e.key === 'Enter') {
        // No visible suggestions → trigger search
        e.preventDefault();
        buildAndGo();
      }
    });

    // Close suggestions on blur (slight delay for click)
    locationInput.addEventListener('blur', function() {
      setTimeout(clearLocationSuggestions, 150);
    });
  }

  /* ==========
     FILTER DROPDOWNS (price pill, property types)
     ========== */

  function setupFilterToggle(filter, toggle) {
    if (!filter || !toggle) return;
    toggle.addEventListener('click', function(e) {
      e.stopPropagation();
      filter.classList.toggle('open');
    });
  }

  setupFilterToggle(priceFilter, priceToggle);
  setupFilterToggle(typeFilter, typeToggle);

  // Close dropdowns when clicking outside
  document.addEventListener('click', function(e) {
    [priceFilter, typeFilter].forEach(function(filter) {
      if (filter && !filter.contains(e.target)) {
        filter.classList.remove('open');
      }
    });
  });

  // Close price dropdown on selection
  if (priceMinSelect) priceMinSelect.addEventListener('change', () => priceFilter && priceFilter.classList.remove('open'));
  if (priceMaxSelect) priceMaxSelect.addEventListener('change', () => priceFilter && priceFilter.classList.remove('open'));

  /* ==========
     URL BUILDER
     ========== */

  function buildAndGo() {
    const params = new URLSearchParams();

    // polygonKey from autocomplete
    if (selectedPolygonKey) {
      params.append('polygonKey', selectedPolygonKey);
    }

    // searchtype
    if (searchtypeSelect && searchtypeSelect.value) {
      params.append('searchtype', searchtypeSelect.value);
    }

    // propertyTypes (multi)
    if (typeCheckboxes && typeCheckboxes.length) {
      const types = [];
      typeCheckboxes.forEach(function(cb) {
        if (cb.checked) types.push(cb.value);
      });
      if (types.length) {
        // If some values already contain "|", this still produces a flat pipe-separated list
        params.append('propertyTypes', types.join('|'));
      }
    }

    // Price min/max
    if (priceMinSelect && priceMinSelect.value) {
      params.append('priceMin', priceMinSelect.value);
    }
    if (priceMaxSelect && priceMaxSelect.value) {
      params.append('priceMax', priceMaxSelect.value);
    }

    // beds / baths
    if (bedsSelect && bedsSelect.value) {
      params.append('beds', bedsSelect.value);
    }
    if (bathsSelect && bathsSelect.value) {
      params.append('baths', bathsSelect.value);
    }

    // footageMin
    if (footageMinSelect && footageMinSelect.value) {
      params.append('footageMin', footageMinSelect.value);
    }

    // acresMin
    if (acresMinSelect && acresMinSelect.value) {
      params.append('acresMin', acresMinSelect.value);
    }

    // order
    if (orderSelect && orderSelect.value) {
      params.append('order', orderSelect.value);
    }

    // Close dropdowns & suggestions
    [priceFilter, typeFilter].forEach(f => f && f.classList.remove('open'));
    clearLocationSuggestions();

    const extra = params.toString();
    const finalUrl = extra
      ? baseUrl + '&' + extra
      : baseUrl;

    window.location.href = finalUrl;
  }

  if (searchBtn) {
    searchBtn.addEventListener('click', function(e) {
      e.preventDefault();
      buildAndGo();
    });
  }
});
</script>/* End custom CSS */