/*
 * Классы Bootstrap 3, убранные в пятой версии.
 *
 * В коде сайта их больше двухсот мест: `hidden-xs` на каждой второй странице,
 * панели, сетка `col-xs-*`. Переписывать их по одному — это двести шансов
 * незаметно сломать вёрстку, причём проверить такое можно только глазами.
 * Поэтому классы просто возвращены здесь, с тем же поведением, что было.
 *
 * Файл подключается после bootstrap.min.css (см. components/Html.js) и ничего
 * из пятой версии не переопределяет — только добавляет исчезнувшее.
 *
 * Это временный слой: по мере перевода разметки на новые классы правила
 * отсюда можно убирать по одному, сверяясь с сайтом.
 */

/* ---- Показ и скрытие по ширине экрана ---------------------------------- */
/* В третьей версии рубежи были 768 / 992 / 1200 пикселей */

@media (max-width: 767px) {
  .hidden-xs { display: none !important; }
}
@media (min-width: 768px) and (max-width: 991px) {
  .hidden-sm { display: none !important; }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .hidden-md { display: none !important; }
}
@media (min-width: 1200px) {
  .hidden-lg { display: none !important; }
}

.visible-xs,
.visible-sm,
.visible-md,
.visible-lg,
.visible-xs-block,
.visible-sm-block,
.visible-md-block,
.visible-lg-block { display: none !important; }

@media (max-width: 767px) {
  .visible-xs,
  .visible-xs-block { display: block !important; }
}
@media (min-width: 768px) and (max-width: 991px) {
  .visible-sm,
  .visible-sm-block { display: block !important; }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .visible-md,
  .visible-md-block { display: block !important; }
}
@media (min-width: 1200px) {
  .visible-lg,
  .visible-lg-block { display: block !important; }
}

/* ---- Обтекание --------------------------------------------------------- */

.pull-right { float: right !important; }
.pull-left { float: left !important; }
.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* ---- Сетка col-xs-* ---------------------------------------------------- */
/* В пятой версии приставку xs убрали: col-6 вместо col-xs-6 */

.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6,
.col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
  position: relative;
  width: 100%;
  padding-right: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
  padding-left: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
  float: left;
}

.col-xs-1 { width: 8.33333333%; }
.col-xs-2 { width: 16.66666667%; }
.col-xs-3 { width: 25%; }
.col-xs-4 { width: 33.33333333%; }
.col-xs-5 { width: 41.66666667%; }
.col-xs-6 { width: 50%; }
.col-xs-7 { width: 58.33333333%; }
.col-xs-8 { width: 66.66666667%; }
.col-xs-9 { width: 75%; }
.col-xs-10 { width: 83.33333333%; }
.col-xs-11 { width: 91.66666667%; }
.col-xs-12 { width: 100%; }

/* ---- Картинки ---------------------------------------------------------- */

.img-responsive {
  display: block;
  max-width: 100%;
  height: auto;
}
.img-circle { border-radius: 50%; }
.img-rounded { border-radius: 6px; }

/* ---- Панели ------------------------------------------------------------ */
/* Панель третьей версии — то же, что карточка в пятой, но со своими полями */

.panel {
  margin-bottom: 20px;
  background-color: #fff;
  border: 1px solid transparent;
  border-radius: 4px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}
.panel-body {
  padding: 15px;
}
.panel-heading {
  padding: 10px 15px;
  border-bottom: 1px solid transparent;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}
.panel-footer {
  padding: 10px 15px;
  background-color: #f5f5f5;
  border-top: 1px solid #ddd;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
}
.panel-default { border-color: #ddd; }
.panel-default > .panel-heading {
  color: #333;
  background-color: #f5f5f5;
  border-color: #ddd;
}

.well {
  min-height: 20px;
  padding: 19px;
  margin-bottom: 20px;
  background-color: #f5f5f5;
  border: 1px solid #e3e3e3;
  border-radius: 4px;
}

/* ---- Кнопки и формы ---------------------------------------------------- */

.btn-default {
  color: #333;
  background-color: #fff;
  border-color: #ccc;
}
.btn-default:hover,
.btn-default:focus {
  color: #333;
  background-color: #e6e6e6;
  border-color: #adadad;
}

.input-group-addon {
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  text-align: center;
  white-space: nowrap;
  background-color: #e9ecef;
  border: 1px solid #ced4da;
  border-radius: 0.375rem;
  display: flex;
  align-items: center;
}

.help-block {
  display: block;
  margin-top: 5px;
  margin-bottom: 10px;
  color: #737373;
}

.control-label {
  margin-bottom: 0.5rem;
}

/* В пятой версии form-group убрали, а отступ между полями остался нужен */
.form-group {
  margin-bottom: 15px;
}

/* ---- Что перестала выдавать сама библиотека -------------------------- */
/*
 * В третьей версии эти классы ставились автоматически: у поля формы —
 * form-group, у подписи — control-label. В новой версии их не ставят,
 * а наши стили на них опираются. Поэтому описываем их через новые имена,
 * которые библиотека выдаёт сейчас.
 */

/* Подпись поля: новое имя form-label, старые правила ждут control-label */
.form-label {
  margin-bottom: 0.5rem;
}

/* Отступ между полями формы: раньше его давал form-group */
.mb-3,
.form-group {
  margin-bottom: 15px;
}

/* Стрелка у выпадающего меню: раньше её отключали свойством noCaret,
   в новой версии она рисуется стилями — прячем её так же */
.navbar-nav .dropdown-toggle::after {
  display: none;
}

/* ---- Поведение шапки ---------------------------------------------------
 * В пятой версии шапка стала «гибкой» (display: flex) и сама расставляет
 * содержимое по краям. Наши стили написаны под третью версию, где шапка была
 * обычным блоком с обтеканием: из-за расхождения в зоне хозяина кнопка
 * «Стать гостем» наезжала на кнопку меню. Возвращаем прежнее поведение.
 */
.navbar {
  display: block;
}
.navbar > .container,
.navbar > .container-fluid {
  display: block;
}

/* Обтекание включалось только на широких экранах — на телефоне пункты меню
   шли столбиком. Оставляем ту же границу, что была в третьей версии */
@media (min-width: 768px) {
  .navbar-header { float: left; }
  .navbar-nav { float: left; margin: 0; }
  .navbar-nav > li { float: left; }
  .navbar-right { float: right !important; }
}

/* Пункт меню не переносится по словам: в третьей версии это правило было
   в самой библиотеке, в пятой его убрали — и «Стать хозяином» вставало
   в две строки */
.nav > li > a,
.navbar-nav > li > a,
.navbar-nav .nav-link {
  white-space: nowrap;
}

/* ---- Сетка: колонки снова обтекают -------------------------------------
 * Главное отличие пятой версии: колонки перестали обтекать и работают только
 * внутри «гибкого» ряда. Наша вёрстка написана под третью версию, где ряд мог
 * быть обычным блоком — и во многих местах наши же стили так его и задают.
 * Из-за этого колонки вставали друг под другом: на странице объявления правая
 * колонка с ценой уезжала под всё содержимое.
 *
 * Возвращаем прежнее поведение: ряд — обычный блок, колонки обтекают.
 * Ширины берутся из самой пятой версии, их трогать не нужно.
 */
.row {
  display: block;
}
.row::before,
.row::after {
  content: " ";
  display: table;
}
.row::after {
  clear: both;
}

[class*="col-"] {
  float: left;
  position: relative;
  min-height: 1px;
}

/* Колонка без числа («занять оставшееся место») — это уже приём пятой
   версии, обтекание ей только мешает */
.col,
.col-auto {
  float: none;
}

/* ---- Ссылки без подчёркивания ------------------------------------------
 * Пятая версия подчёркивает все ссылки по умолчанию, третья — нет. Из-за
 * этого подвал и текстовые ссылки на сайте вдруг стали подчёркнутыми.
 * Возвращаем прежнее поведение: подчёркивание только при наведении.
 */
a {
  text-decoration: none;
}
a:hover,
a:focus {
  text-decoration: underline;
}

/* ---- Текст только для чтецов с экрана ----------------------------------
 * В пятой версии класс sr-only переименовали в visually-hidden. Наш код и
 * сторонние компоненты (календарь дат) продолжают ставить sr-only — и все
 * служебные подсказки стали видимыми: на странице объявления поверх формы
 * бронирования появлялся текст «Navigate forward to interact with the
 * calendar…», а дни недели вылезали списком.
 */
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.sr-only-focusable:active,
.sr-only-focusable:focus {
  position: static !important;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}