/* ============================================================
   Поле выбора филиала в формах заявки на скидку.
   Общий файл для главной, «Акций», «Оцифровки видео» и «Копирования»:
   стили одинаковые, а сами страницы оформлены по-разному.
   ============================================================ */

.branch-field {
  margin-top: 14px;
}

.branch-field label {
  display: block;
  font-weight: 600;
  margin: 0 0 4px;
  font-size: 14px;
}

/* Стрелка рисуется фоном: у обычного <select> её нельзя ни покрасить,
   ни сдвинуть, а системный вид выбивается из оформления сайта. */
.branch-field select {
  width: 100%;
  padding: 10px 38px 10px 12px;
  border: 1px solid #ccc;
  border-radius: 0;
  font-size: 15px;
  font-family: inherit;
  color: #333d40;
  background-color: #fff;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23F33535' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
  transition: 0.2s;
}

.branch-field select:hover {
  border-color: #9aa4ad;
}

.branch-field select:focus {
  border-color: #F33535;
  outline: none;
  box-shadow: 0 0 0 2px rgba(243, 53, 53, 0.15);
}

/* Пока список адресов не подгрузился, поле показывает один пункт
   «Любой филиал». Так посетитель сразу видит, что выбор есть, и не
   отправляет форму с пустым полем. */
.branch-field select:disabled {
  opacity: 0.6;
  cursor: default;
}

.branch-field .branch-hint {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: #6c7a87;
}

/* В окне скидки на главной ширина задаётся контейнером, поле наследует */
.modal-content .branch-field select {
  font-size: 15px;
}

/* На узких экранах длинные адреса обрезаются многоточием, а не ломают вёрстку */
@media (max-width: 600px) {
  .branch-field select {
    text-overflow: ellipsis;
  }
}