/*
   Поле поиска в попапе выбора города.
   Скомпилировано вручную из city-choice.less — сборщика в проекте нет.
   Правите одно — правьте и второе.

   Цвета взяты из существующей вёрстки попапа в site.css: на десктопе карточка
   белая с тёмным текстом и салатовым #AECB18 на наведении, а на ширине до
   599px она перекрашивается в зелёный #235C33 с белым текстом — поэтому у
   поля два вида.
*/
#city-modal .city-search {
  position: relative;
  margin-bottom: 20px;
}
@media (max-width: 599px) {
  #city-modal .city-search {
    margin: 0;
    padding: 20px 20px 0;
  }
}
#city-modal .city-search__input {
  width: 100%;
  height: 46px;
  padding: 0 16px;
  border: 1px solid rgba(35, 92, 51, 0.25);
  border-radius: 8px;
  background: #fff;
  color: #2E2F30;
  font-family: Montserrat, sans-serif;
  font-size: 16px;
  line-height: 46px;
  outline: none;
  transition: border-color 0.2s ease;
}
#city-modal .city-search__input::placeholder {
  color: rgba(46, 47, 48, 0.5);
}
#city-modal .city-search__input:focus {
  border-color: #AECB18;
}
@media (max-width: 599px) {
  #city-modal .city-search__input {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
    color: #fff;
  }
  #city-modal .city-search__input::placeholder {
    color: rgba(255, 255, 255, 0.6);
  }
}
#city-modal .city-search__empty {
  padding: 10px 0;
  color: rgba(46, 47, 48, 0.6);
  font-family: Montserrat, sans-serif;
  font-size: 16px;
}
@media (max-width: 599px) {
  #city-modal .city-search__empty {
    padding: 0 20px 20px;
    color: rgba(255, 255, 255, 0.7);
  }
}
/* Один класс на скрытие и пунктов, и целых буквенных колонок.
   display:none, а не visibility: иначе колонка продолжала бы занимать место
   в сетке и в списке появлялись бы дыры. */
#city-modal .city-hidden {
  display: none !important;
}