/* ============================================================

   SEARCH FORM

   ============================================================ */

.cw-search-wrap { width: 100%; }



.cw-search-form {

  border-radius: 0;

  box-shadow: none;

  padding: 20px 24px 14px;

}



.cw-search-fields--reference {

  display: grid;

  grid-template-columns: repeat(4, minmax(0, 1fr));

  grid-template-areas:

    "location keyword keyword submit"

    "type beds baths price";

  gap: 12px 18px;

}



.cw-search-field { display: flex; min-width: 0; }

.cw-search-field--location { position: relative; grid-area: location; }

.cw-search-field--keyword { grid-area: keyword; }

.cw-search-field--type { grid-area: type; }

.cw-search-field--beds { grid-area: beds; }

.cw-search-field--baths { grid-area: baths; }

.cw-search-field--price-range { grid-area: price; display: block; }

.cw-search-actions { grid-area: submit; display: flex; }



.cw-search-field label {

  font-size: .8rem;

  font-weight: 600;

  color: var(--cw-text-light);

  text-transform: uppercase;

  letter-spacing: .04em;

}



.cw-search-field input,

.cw-search-field select {

  height: 27px;

  padding: 0 12px;

  border: 0;

  border-radius: 0;

  font-size: 10px;

  background: var(--cw-white);

  color: #333;

  width: 100%;

  font-family: inherit;

}



.cw-search-field input:focus,

.cw-search-field select:focus {

  outline: 2px solid #fff;

  outline-offset: 2px;

}



.cw-location-button:disabled { cursor: wait; opacity: .7; }



.cw-location-status {

  position: absolute;

  top: calc(100% + 3px);

  left: 0;

  z-index: 1;

  max-width: 240px;

  color: #fff;

  font-size: 10px;

  line-height: 1.2;

}



.cw-search-form .cw-btn--primary {

  border-color: rgba(255, 255, 255, .45);

  background: transparent;

}



.cw-price-label {

  display: block;

  min-height: 12px;

  color: #fff;

  font-size: 9px;

  font-weight: 600;

  line-height: 1;

}



.cw-price-range {

  position: relative;

  height: 15px;

  margin: 0 5px;

}



.cw-price-range::before {

  position: absolute;

  top: 7px;

  right: 0;

  left: 0;

  height: 2px;

  background: rgba(255, 255, 255, .85);

  content: "";

}



.cw-price-range input[type="range"] {

  position: absolute;

  top: 0;

  left: -5px;

  width: calc(100% + 10px);

  height: 15px;

  margin: 0;

  padding: 0;

  appearance: none;

  background: transparent;

  pointer-events: none;

}



.cw-price-range input[type="range"]::-webkit-slider-thumb {

  width: 10px;

  height: 10px;

  border: 0;

  border-radius: 50%;

  appearance: none;

  background: #fff;

  cursor: pointer;

  pointer-events: auto;

}



.cw-price-range input[type="range"]::-moz-range-thumb {

  width: 10px;

  height: 10px;

  border: 0;

  border-radius: 50%;

  background: #fff;

  cursor: pointer;

  pointer-events: auto;

}



/* Results container */

.cw-search-results { margin-top: 2rem; }



@media (max-width: 760px) {

  .cw-search-fields--reference {

    grid-template-columns: repeat(2, minmax(0, 1fr));

    grid-template-areas:

      "location submit"

      "keyword keyword"

      "type beds"

      "baths price";

  }

}



@media (max-width: 480px) {

  .cw-search-form { padding: 16px; }

  .cw-search-fields--reference {

    grid-template-columns: 1fr;

    grid-template-areas:

      "location"

      "keyword"

      "submit"

      "type"

      "beds"

      "baths"

      "price";

  }

  .cw-search-field input,

  .cw-search-field select,

  .cw-location-button,

  .cw-search-submit { min-height: 36px; }

}



/* ============================================================

   BUTTONS

   ============================================================ */

.cw-btn {

  display: inline-flex;

  align-items: center;

  gap: .4rem;

  padding: .65rem 1.4rem;

  border-radius: var(--cw-radius);

  font-size: .95rem;

  font-weight: 600;

  cursor: pointer;

  text-decoration: none;

  border: 2px solid transparent;

  transition: all var(--cw-transition);

  line-height: 1;

}



.cw-btn--primary {

  background: var(--cw-primary);

  color: var(--cw-white);

  border-color: var(--cw-primary);

}



.cw-btn--primary:hover {

  background: var(--cw-primary-dark);

  border-color: var(--cw-primary-dark);

  color: var(--cw-white);

}



.cw-btn--ghost {

  background: transparent;

  color: var(--cw-text-light);

  border-color: var(--cw-border);

}



.cw-btn--ghost:hover {

  border-color: var(--cw-text-light);

  color: var(--cw-text);

}



.cw-btn--block { width: 100%; justify-content: center; }