.city-filter-box{
  margin:0 0 28px;
  padding:22px;
  border:1px solid #dde5ee;
  border-radius:18px;
  background:#fff;
  box-shadow:0 8px 28px rgba(15,23,42,.04);
}
.city-filter-heading{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  margin-bottom:18px;
}
.city-filter-heading h2{
  margin:3px 0 0;
  color:#17263a;
  font-size:1.32rem;
  line-height:1.25;
}
.city-filter-clear{
  color:#b32025;
  font-size:.86rem;
  font-weight:700;
  text-decoration:none;
}
.city-filter-clear:hover{
  text-decoration:underline;
  text-underline-offset:3px;
}
.city-filter-form{
  display:grid;
  grid-template-columns:minmax(260px,2fr) minmax(210px,1.2fr) minmax(190px,1fr) auto;
  gap:12px;
  align-items:end;
}
.city-filter-field{
  display:grid;
  gap:6px;
  min-width:0;
}
.city-filter-field>span{
  color:#526176;
  font-size:.73rem;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.city-filter-field input,
.city-filter-field select{
  width:100%;
  min-height:48px;
  padding:0 14px;
  border:1px solid #ccd6e1;
  border-radius:12px;
  background:#fff;
  color:#17263a;
  font:inherit;
  outline:none;
}
.city-filter-field input:focus,
.city-filter-field select:focus{
  border-color:#0d5cab;
  box-shadow:0 0 0 3px rgba(13,92,171,.1);
}
.city-filter-submit{
  min-height:48px;
  white-space:nowrap;
}
.city-filter-result{
  margin:16px 0 0;
  padding-top:14px;
  border-top:1px solid #edf1f5;
  color:#64748b;
  font-size:.88rem;
}
.city-filter-result strong{
  color:#17263a;
}
@media (max-width:1050px){
  .city-filter-form{
    grid-template-columns:1fr 1fr;
  }
  .city-filter-search{
    grid-column:1 / -1;
  }
  .city-filter-submit{
    width:100%;
  }
}
@media (max-width:640px){
  .city-filter-box{
    padding:17px;
    border-radius:15px;
  }
  .city-filter-heading{
    align-items:flex-start;
    flex-direction:column;
    gap:8px;
  }
  .city-filter-form{
    grid-template-columns:1fr;
  }
  .city-filter-search{
    grid-column:auto;
  }
}