/* Кнопки вкладок формы в шапке */
.nav-pills .nav-link {
    background-color: var(--bs-light);
    color: #000;
    font-weight:600;
}
.nav-pills .nav-link.active {
    background-color: var(--bs-primary);
}

/* Модалка «Даты тура»: кликабельный блок отдельной даты (карточку оформляет .dates .item) */
.schedule-date-item {
    border: 0;
    background: none;
    cursor: pointer;
}
.schedule-date-item:hover:not(:disabled) {
    background: rgba(0, 0, 0, .03);
}
.schedule-date-item:disabled {
    opacity: .55;
    cursor: default;
}

/* ==========================================================================
   Модальные формы тура: бронирование, индивидуальный тур, расчёт стоимости
   Дополнение к css/style.css. Правила скоупятся классом .tf-modal, чтобы не
   задевать существующие .modal / .request-modal / .auth-modal. Исключения —
   разделы 12 и 14: они к .tf-modal не относятся и скоупятся сами.
   ========================================================================== */

:root {
	--tf-primary: #e55500;
	--tf-primary-hover: #d54c00;
	--tf-success: #419171;
	--tf-text: #16232b;
	--tf-muted: #878e8f;
	--tf-border: #e3edf4;
	--tf-light: #e4eef0;
	--tf-field-bg: #f2f5f7;
	--tf-field-bg-hover: #eaeff2;
	--tf-panel-bg: #eef3fb;
	--tf-radius-lg: 32px;
	--tf-radius-md: 18px;
	--tf-radius-sm: 14px;
}

/* --------------------------------------------------------------------------
   1. Каркас модалки (сброс глобальных правил .modal из general.scss)
   -------------------------------------------------------------------------- */

.tf-modal .modal-dialog {
	max-width: 520px;
}

.tf-modal .modal-content {
	border: 0;
	border-radius: var(--tf-radius-lg);
	box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
}

.tf-modal .modal-body {
	text-align: left;
	padding: 32px;
}

/* В style.css есть `.modal .modal-body h2 { text-align: center }` — снимаем */
.tf-modal .modal-body h2,
.tf-modal .modal-body .h2 {
	text-align: left;
}

.tf-modal .tf-close {
	position: absolute;
	top: 22px;
	right: 22px;
	z-index: 10;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border-radius: 10px;
	border: 1px solid var(--tf-light);
	background-color: #fff;
	opacity: 1;
}

.tf-modal .tf-close:hover {
	background-color: var(--tf-light);
}

.tf-modal .tf-close:focus {
	box-shadow: 0 0 0 .15rem rgba(22, 35, 43, .15);
}

.tf-modal .tf-title {
	font-size: 1.5rem;
	line-height: 1.2;
	font-weight: 700;
	letter-spacing: .01em;
	color: var(--tf-text);
}

.tf-modal .tf-subtitle {
	font-size: 12px;
	line-height: 1.4;
	color: var(--tf-muted);
}

/* Затемнение подложки как у остальных модалок проекта */
.tf-modal ~ .modal-backdrop.show {
	background-color: #16232b;
	opacity: .65;
}

/* --------------------------------------------------------------------------
   2. Общие поля формы
   -------------------------------------------------------------------------- */

.tf-modal .tf-label {
	display: block;
	margin-bottom: .5rem;
	font-size: .875rem;
	line-height: 1.2;
	font-weight: 600;
	color: var(--tf-text);
}

.tf-modal .tf-hint {
	font-size: .875rem;
	line-height: 1.4;
	font-weight: 400;
	color: var(--tf-muted);
}

/* Поле на сером фоне (макеты 2 и 3) */
.tf-modal .tf-field.form-control,
.tf-modal textarea.tf-field.form-control {
	background-color: var(--tf-field-bg);
	border: 1px solid transparent;
	border-radius: var(--tf-radius-md);
	color: var(--tf-text);
	font-size: 1rem;
	line-height: 1.4;
	padding: 1rem 1.25rem;
}

.tf-modal .tf-field.form-control::placeholder {
	color: var(--tf-muted);
}

.tf-modal .tf-field.form-control:focus {
	background-color: var(--tf-field-bg);
	border-color: var(--tf-border);
	box-shadow: 0 0 0 .15rem rgba(65, 145, 113, .18);
}

.tf-modal textarea.tf-field.form-control {
	min-height: 108px;
	resize: none;
}

/* Поле на белом фоне (внутри светлой панели в макете 3) */
.tf-modal .tf-field-white.form-control {
	background-color: #fff;
	border: 1px solid var(--tf-border);
}

.tf-modal .tf-field-white.form-control:focus {
	background-color: #fff;
}

/* --------------------------------------------------------------------------
   3. Выпадающий список (использует разметку .frm-select проекта)
   -------------------------------------------------------------------------- */

.tf-modal .frm-select .select-btn {
	height: 58px;
	padding: 14px 18px;
	border-radius: var(--tf-radius-md);
	border: 1px solid var(--tf-border);
	font-size: 1rem;
	font-weight: 500;
	color: var(--tf-text);
}

.tf-modal .frm-select .select-btn .select-btn-label {
	color: var(--tf-text);
}

/* Селект на сером фоне без обводки — как в макете «Забронировать» */
.tf-modal .frm-select-filled .select-btn {
	background-color: var(--tf-field-bg);
	border-color: transparent;
}

.tf-modal .frm-select-filled .select-btn.show,
.tf-modal .frm-select-filled .select-btn:hover {
	background-color: var(--tf-field-bg-hover);
}

/* Плейсхолдер селекта, пока значение не выбрано */
.tf-modal .frm-select .select-btn:not(.not-emty) .select-btn-label {
	color: var(--tf-muted);
	font-weight: 400;
}

/* Базовый .frm-select имеет z-index: 99 и создаёт контекст наложения — из-за
   этого следующий селект перекрывает раскрытый список предыдущего. Внутри
   модалок контекст снимаем, порядок задаёт сам .dropdown-menu. */
.tf-modal .frm-select {
	z-index: auto;
}

.tf-modal .frm-select .select-menu {
	border: 1px solid var(--tf-border);
	box-shadow: 0 18px 40px rgba(22, 35, 43, .12);
	z-index: 1070;
}

/* --------------------------------------------------------------------------
   4. Счётчик туристов
   -------------------------------------------------------------------------- */

.tf-modal .tf-counter .btn {
	width: 40px;
	height: 40px;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--tf-radius-sm);
	border: 1px solid var(--tf-light);
	background-color: var(--tf-field-bg);
	color: var(--tf-text);
	font-size: 1.5rem;
	line-height: 1;
}

.tf-modal .tf-counter .btn:hover:not(:disabled) {
	background-color: var(--tf-light);
	border-color: var(--tf-light);
	color: var(--tf-text);
}

.tf-modal .tf-counter .btn:disabled {
	opacity: .45;
}

.tf-modal .tf-counter-value {
	min-width: 32px;
	text-align: center;
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--tf-text);
}

/* --------------------------------------------------------------------------
   5. Телефон с выбором страны
   -------------------------------------------------------------------------- */

.tf-modal .tf-phone {
	display: flex;
	align-items: stretch;
	background-color: var(--tf-field-bg);
	border: 1px solid transparent;
	border-radius: var(--tf-radius-md);
	/* без overflow: hidden — иначе обрезается выпадающий список стран */
}

.tf-modal .tf-phone:focus-within {
	border-color: var(--tf-border);
	box-shadow: 0 0 0 .15rem rgba(65, 145, 113, .18);
}

.tf-modal .tf-phone-white {
	background-color: #fff;
	border-color: var(--tf-border);
}

.tf-modal .tf-phone-toggle.btn {
	display: flex;
	align-items: center;
	gap: .5rem;
	padding: 0 1rem;
	border: 0;
	border-right: 1px solid rgba(22, 35, 43, .1);
	border-radius: var(--tf-radius-md) 0 0 var(--tf-radius-md);
	background-color: transparent;
	color: var(--tf-muted);
	box-shadow: none;
}

.tf-modal .tf-phone-toggle.btn:hover,
.tf-modal .tf-phone-toggle.btn.show {
	background-color: rgba(22, 35, 43, .04);
}

.tf-modal .tf-phone-toggle .tf-flag {
	display: block;
	width: 24px;
	height: 18px;
	border-radius: 3px;
	flex: 0 0 auto;
}

.tf-modal .tf-phone-toggle i {
	font-size: .75rem;
}

.tf-modal .tf-phone-menu {
	min-width: 240px;
	border-radius: var(--tf-radius-sm);
	border: 1px solid var(--tf-border);
	padding: 6px;
	box-shadow: 0 18px 40px rgba(22, 35, 43, .12);
	z-index: 1070;
}

.tf-modal .tf-phone-menu .dropdown-item {
	display: flex;
	align-items: center;
	gap: .625rem;
	padding: .625rem .75rem;
	border-radius: 10px;
	font-size: .875rem;
}

.tf-modal .tf-phone-menu .dropdown-item.active,
.tf-modal .tf-phone-menu .dropdown-item:active {
	background-color: var(--tf-light);
	color: var(--tf-text);
}

/* Плавающий лейбл внутри поля телефона */
.tf-modal .tf-phone .form-floating {
	flex: 1 1 auto;
	min-width: 0;
}

.tf-modal .tf-phone .form-floating > .form-control {
	height: 58px;
	min-height: 58px;
	padding: 1.5rem .875rem .375rem;
	background-color: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	font-size: 1rem;
	font-weight: 500;
	color: var(--tf-text);
}

/* Лейбл поля телефона всегда в «поднятом» состоянии — под ним видно код страны */
.tf-modal .tf-phone .form-floating > label {
	padding: .6rem .875rem;
	color: var(--tf-muted);
	font-size: 1rem;
	border: 0;
	opacity: 1;
	transform: scale(.75) translateY(-.5rem) translateX(.15rem);
}

.tf-modal .tf-phone .form-floating > label::after {
	background-color: transparent !important;
}

/* --------------------------------------------------------------------------
   6. Поле даты
   -------------------------------------------------------------------------- */

.tf-modal .tf-date-wrap {
	position: relative;
}

.tf-modal .tf-date-wrap > .bi {
	position: absolute;
	top: 50%;
	left: 1.25rem;
	transform: translateY(-50%);
	font-size: 1.125rem;
	color: var(--tf-muted);
	pointer-events: none;
}

.tf-modal .tf-date-wrap .tf-field.form-control {
	padding-left: 3.25rem;
}

/* 6.1. Дата выбирается общим календарём проекта (tour/_blocks/calendar.html)
   в режиме одной даты. Синглтон #calendarDropdown переносится в .tf-calendar-slot,
   класс .cal-single на панели ставит jquery.main.js (initTwoMonthsCalendar,
   контракт data-cal-mode="single"). Само поле остаётся носителем значения
   в формате ГГГГ-ММ-ДД и скрывается — подпись рисует календарь.              */

.tf-modal .tf-date-single .tf-date-value {
	display: none;
}

/* Кнопка-триггер выглядит как обычное поле формы (.tf-field.form-control) */
.tf-modal .tf-date-trigger.form-control {
	height: auto;
	cursor: pointer;
}

.tf-modal .tf-date-trigger .tf-date-label.placeholder {
	/*color: var(--tf-muted);*/
	background-color: inherit;
	cursor: auto;
}

/* Панель раскрывается вниз от поля и перекрывает идущие ниже */
.tf-modal .tf-calendar-slot {
	position: relative;
	z-index: 30;
}

/* Снимаем абсолютное центрирование .cal-inner из general.scss: ширину задаёт
   .tf-date-wrap, позиция — от верхнего края слота */
.tf-modal .tf-calendar-slot .cal-inner {
	position: absolute;
	left: 0;
	right: 0;
	top: .5rem;
	transform: none;
	width: auto;
	max-width: none;
}

/* Одна дата — один месяц: правую колонку прячем, левую растягиваем,
   вертикальный разделитель между месяцами убираем */
.tf-modal .tf-calendar-slot .tour-calendar.cal-single .cal-months:before {
	display: none;
}

.tf-modal .tf-calendar-slot .tour-calendar.cal-single .cal-months > .row > div {
	flex: 0 0 100%;
	max-width: 100%;
	width: 100%;
}

.tf-modal .tf-calendar-slot .tour-calendar.cal-single .cal-months > .row > div:nth-child(2) {
	display: none;
}

/* Дата выбирается кликом по дню, поэтому «Применить» не нужна;
   «Очистить» за счёт flex-grow-1 занимает всю ширину футера */
.tf-modal .tf-calendar-slot .tour-calendar.cal-single [data-cal="apply"] {
	display: none;
}

/* --------------------------------------------------------------------------
   7. Кнопки и мелочи
   -------------------------------------------------------------------------- */

.tf-modal .tf-submit-btn.btn {
	height: 58px;
	border-radius: var(--tf-radius-sm);
	background-color: var(--tf-primary);
	border-color: var(--tf-primary);
	color: #fff;
	font-size: 1rem;
	font-weight: 600;
}

.tf-modal .tf-submit-btn.btn:hover,
.tf-modal .tf-submit-btn.btn:focus {
	background-color: var(--tf-primary-hover);
	border-color: var(--tf-primary-hover);
	color: #fff;
}

.tf-modal .tf-ghost-btn.btn {
	height: 56px;
	border-radius: var(--tf-radius-sm);
	border: 1px solid var(--tf-border);
	background-color: #fff;
	color: var(--tf-text);
	font-size: 1rem;
	font-weight: 600;
}

.tf-modal .tf-ghost-btn.btn:hover {
	background-color: var(--tf-field-bg);
	color: var(--tf-text);
}

.tf-modal .tf-check.form-check-input {
	width: 20px;
	height: 20px;
	margin-top: .1rem;
	border-radius: 6px;
	border-color: #ffb580;
	cursor: pointer;
}

.tf-modal .tf-check.form-check-input:checked {
	background-color: var(--tf-primary);
	border-color: var(--tf-primary);
}

.tf-modal .tf-check.form-check-input:focus {
	box-shadow: 0 0 0 .15rem rgba(229, 85, 0, .25);
}

.tf-modal .tf-legal {
	font-size: .75rem;
	line-height: 1.4;
	color: var(--tf-muted);
}

.tf-modal .tf-legal a {
	color: var(--tf-primary);
	text-decoration: none;
}

.tf-modal .tf-legal a:hover {
	text-decoration: underline;
}

.tf-modal .tf-link {
	color: var(--tf-text);
	font-size: .875rem;
	line-height: 1.4;
	font-weight: 600;
	text-decoration: none;
}

.tf-modal .tf-link:hover {
	color: var(--tf-primary);
}

/* --------------------------------------------------------------------------
   8. Модалка «Забронировать»
   -------------------------------------------------------------------------- */

.tf-booking-modal .modal-dialog {
	max-width: 520px;
}

.tf-booking-modal .tf-price {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: .5rem;
	font-size: 1.8rem;
	line-height: 1.1;
	font-weight: 700;
	color: var(--tf-text);
}

.tf-booking-modal .tf-price .tf-price-old {
	font-size: 1rem;
	font-weight: 400;
	font-style: normal;
	color: var(--tf-muted);
	text-decoration: line-through;
}

.tf-booking-modal .tf-price .badge {
	display: inline-flex;
	align-items: center;
	height: 30px;
	padding: 5px 10px;
	border-radius: 10px;
	background-color: var(--tf-primary);
	color: #fff;
	font-size: .875rem;
	font-weight: 600;
}

.tf-booking-modal .tf-price-note {
	font-size: 1rem;
	line-height: 1.4;
	color: var(--tf-muted);
}

.tf-booking-modal .tf-place-value {
	font-size: 1rem;
	line-height: 1.4;
	color: var(--tf-muted);
}

.tf-booking-modal .tf-tickets-link {
	color: var(--tf-primary);
	font-size: .875rem;
	font-weight: 600;
	text-decoration: none;
}

.tf-booking-modal .tf-tickets-link:hover {
	text-decoration: underline;
}

.tf-booking-modal .tf-note {
	color: var(--tf-muted);
	font-size: .875rem;
	line-height: 1.2;
	border-bottom: 1px dashed var(--tf-muted);
	cursor: help;
}

/* --------------------------------------------------------------------------
   9. Модалки «Индивидуальный тур» и «Персональное предложение»
   -------------------------------------------------------------------------- */

.tf-individual-modal .modal-dialog,
.tf-personal-modal .modal-dialog,
.tf-message-modal .modal-dialog,
.tf-call-modal .modal-dialog {
	max-width: 500px;
}

.tf-individual-modal .tf-tour-head img,
.tf-message-modal .tf-tour-head img,
.tf-call-modal .tf-tour-head img {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
	flex: 0 0 auto;
}

.tf-individual-modal .tf-tour-head strong,
.tf-message-modal .tf-tour-head strong,
.tf-call-modal .tf-tour-head strong {
	display: block;
	font-size: 1rem;
	line-height: 1.3;
	font-weight: 700;
	color: var(--tf-text);
}

.tf-individual-modal .tf-tour-head span,
.tf-message-modal .tf-tour-head span,
.tf-call-modal .tf-tour-head span {
	font-size: .9375rem;
	line-height: 1.3;
	color: var(--tf-muted);
}

.tf-individual-modal .tf-captcha-note,
.tf-personal-modal .tf-captcha-note,
.tf-booking-modal .tf-captcha-note,
.tf-calc-modal .tf-captcha-note,
.tf-message-modal .tf-captcha-note {
	font-size: .75rem;
	line-height: 1.4;
	color: var(--tf-muted);
}

.tf-individual-modal .tf-captcha-note a,
.tf-personal-modal .tf-captcha-note a,
.tf-booking-modal .tf-captcha-note a,
.tf-calc-modal .tf-captcha-note a,
.tf-message-modal .tf-captcha-note a {
	color: var(--tf-muted);
	text-decoration: underline;
}

/* --------------------------------------------------------------------------
   10. Модалка «Рассчитать стоимость тура»
   -------------------------------------------------------------------------- */

.tf-calc-modal .modal-dialog {
	max-width: 620px;
}

.tf-calc-modal .tf-calc-icon {
	width: 56px;
	height: 56px;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background-color: var(--tf-field-bg);
	color: var(--tf-primary);
	font-size: 1.375rem;
}

.tf-calc-modal .tf-calc-panel {
	background-color: var(--tf-panel-bg);
	border-radius: 24px;
	padding: 24px;
}

.tf-calc-modal .tf-calc-panel-title {
	font-size: 1.125rem;
	line-height: 1.3;
	font-weight: 700;
	color: var(--tf-text);
}

.tf-calc-modal .tf-calc-panel-note {
	font-size: .8125rem;
	line-height: 1.4;
	color: #6f7d92;
}

/* --------------------------------------------------------------------------
   11. Адаптив
   -------------------------------------------------------------------------- */

@media (max-width: 767.98px) {
	.tf-modal .modal-dialog {
		max-width: none;
		margin: 1rem;
	}

	.tf-modal .modal-content {
		border-radius: 24px;
	}

	.tf-modal .modal-body {
		padding: 24px 18px;
	}

	.tf-modal .tf-close {
		top: 16px;
		right: 16px;
	}

	.tf-modal .tf-title {
		font-size: 1.4375rem;
	}

	.tf-modal .tf-subtitle {
		font-size: 1rem;
	}

	.tf-booking-modal .tf-price {
		font-size: 1.9375rem;
	}

	.tf-calc-modal .tf-calc-panel {
		padding: 18px 16px;
		border-radius: 18px;
	}
}

/* --------------------------------------------------------------------------
   12. intl-tel-input на публичной стороне (lead-формы)
   -------------------------------------------------------------------------- */

/* Библиотека оборачивает input в <div class="iti"> с display: inline-block —
   растягиваем обёртку и само поле на всю ширину колонки/контейнера. */
.iti {
	display: block;
	width: 100%;
}

.iti .iti__tel-input {
	width: 100%;
}

/* Модалка «Персональное предложение»: телефон внутри «пилюли» .tf-phone.
   padding-left библиотека проставляет сама инлайном — под флаг и код страны. */
.tf-modal .tf-phone .iti {
	flex: 1 1 auto;
	min-width: 0;
}

.tf-modal .tf-phone .iti__tel-input,
.tf-modal .tf-phone .iti__tel-input[type="tel"] {
	height: 58px;
	min-height: 58px;
	padding-top: 0;
	padding-bottom: 0;
	padding-right: 1.25rem;
	background-color: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	font-size: 1rem;
	font-weight: 500;
	color: var(--tf-text);
}

.tf-modal .tf-phone .iti__tel-input::placeholder {
	color: var(--tf-muted);
}

/* --------------------------------------------------------------------------
   13. Заявки со страницы тура
   -------------------------------------------------------------------------- */

/* Город отправления: поле ввода с подбором из справочника. */
.tf-modal .tf-city-select .tf-field.form-control {
	height: 58px;
	padding: 14px 18px;
}

.tf-modal .tf-city-results .dropdown-menu {
	border: 1px solid var(--tf-border);
	box-shadow: 0 18px 40px rgba(22, 35, 43, .12);
	border-radius: var(--tf-radius-md);
	max-height: 260px;
	overflow-y: auto;
	z-index: 1070;
}

.tf-modal .tf-city-results .dropdown-item {
	padding: 12px 18px;
	white-space: normal;
}

/* Телефон организатора в модалке «Позвонить» */
.tf-modal .tf-call-phone {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--tf-success);
	text-decoration: none;
}

.tf-modal .tf-call-phone:hover {
	color: var(--tf-success);
	text-decoration: underline;
}

/* --------------------------------------------------------------------------
   14. Модалка «Даты тура»: шапка с фото, названием и ценой ближайшей даты
   Модалка живёт в своей разметке из general.scss и класс .tf-modal не носит,
   поэтому скоуп здесь собственный.
   -------------------------------------------------------------------------- */

.tf-dates-modal .tf-dates-head img {
	width: 88px;
	height: 88px;
	flex: 0 0 auto;
	border-radius: var(--tf-radius-sm);
	object-fit: cover;
}

.tf-dates-modal .tf-dates-head strong {
	display: block;
	font-size: 1.125rem;
	line-height: 1.3;
	font-weight: 700;
	color: var(--tf-text);
}

.tf-dates-modal .tf-dates-price {
	display: block;
	margin-top: .25rem;
	font-size: .9375rem;
	line-height: 1.3;
	font-weight: 600;
	color: var(--tf-muted);
}

.tf-dates-modal .tf-dates-price-old {
	margin-left: .5rem;
	font-style: normal;
	font-weight: 400;
	text-decoration: line-through;
}

/* --------------------------------------------------------------------------
   15. Мобильный фильтр туров
   Панель .mobile-menu-filter и слайд-карточки #filter-form .filter-card
   описаны в general.scss; здесь только то, чего там нет.
   -------------------------------------------------------------------------- */

/* Контейнер скрытых гео-инпутов формы фильтра: сам по себе невидим,
   содержимое (input[type=hidden]) при этом уходит в HTMX-запрос. */
.filter-geo-inputs {
	display: none;
}

/* «Куда поедем» в мобильной панели рендерится общим partial
   tour/_core/search/dest_default_tabs.html, который рассчитан на двухколоночный
   дропдаун шапки (.row.g-0 > .col-md-6). В панели шириной 400px колонки должны
   идти друг под другом — под это в general.scss уже написано правило
   #mobile-search .dest-menu-body .border-end { border-right: none; border-bottom: … },
   но базовое .dest-menu-body > .row { flex-wrap: nowrap } на планшете их
   удерживает рядом. Принудительно стакаем. */
#mobile-search .dest-menu-body > .row {
	display: block;
}

#mobile-search .dest-menu-body > .row > [class*="col-"] {
	display: block;
	width: 100%;
	max-width: 100%;
	flex: 0 0 100%;
	overflow: visible;
}

/* Подвал «Очистить» / «Применить» прижат к низу плашки «Куда поедем».
   В general.scss высота .dest-scroll задана жёстко через calc(100vh - …),
   и бюджет #mobile-search подобран впритык: шапка 60px + скролл + подвал 60px
   в сумме дают ровно высоту плашки. Любая лишняя строка (или правило
   calc(110vh - 218px) на <= 379px) выталкивает подвал за нижний край экрана,
   и до кнопок не добраться. Переводим плашку на flex: скролл забирает остаток
   высоты, подвал фиксирован и виден всегда.
   display самого #mobile-search переопределять нельзя — его показывает
   jQuery.fadeIn() инлайновым display:block, поэтому flex-контекст на .search. */
#mobile-search .search {
	height: calc(100% - 60px); /* 60px — .panel-header плашки */
}

#mobile-search .dest-menu {
	display: flex;
	flex-direction: column;
	height: 100%;
}

#mobile-search .dest-menu .dest-scroll {
	flex: 1 1 auto;
	min-height: 0;
	height: auto;
	max-height: none;
}