/* ============================================================
   1. БУРГЕР-МЕНЮ:
   ============================================================ */

/* Сброс контейнеров */
#navigation .navigation-menu,
#navigation .navigation-menu li,
#navigation .sub-menu {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

/* ГЛАВНЫЕ ПУНКТЫ (14px / 600 / 24px) */
#navigation .navigation-menu > li > a,
#navigation .sp_click.drop-down-span {
	font-family: "Montserrat", sans-serif !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	line-height: 24px !important;
	letter-spacing: 1px !important;
	padding: 5px 20px !important;
	text-transform: uppercase !important;
	color: #3c4858 !important;
	display: block !important;
	text-decoration: none !important;
}

/* ЗАГОЛОВОК "ОБЕРІТЬ СВОЄ МІСТО" (Убираем абсолютную стрелку) */
#navigation .drop-down > .sp_click.drop-down-span {
	cursor: pointer;
	display: block !important;
}

/* СТРЕЛОЧКА: Теперь стоит СРАЗУ ПОСЛЕ ТЕКСТА */
.sp_click.drop-down-span:after {
	content: "";
	display: inline-block !important; /* Изменили с absolute */
	margin-left: 10px !important; /* Отступ от слова МІСТО */
	vertical-align: middle !important;
	border: solid #3c4858;
	border-width: 0 2px 2px 0;
	padding: 3px;
	transform: rotate(45deg);
	transition: all 0.3s;
	position: relative !important;
	top: -2px !important;
}

/* Поворот стрелки при открытии */
.sp_click.drop-down-span.open:after {
	transform: rotate(-135deg);
	top: 2px !important;
}

/* СПИСОК ГОРОДОВ (14px / 400 / 21px) */
#navigation .sub-menu {
	display: none;
	background: transparent !important;
}

#navigation .sub-menu .town_list a.sub-menu-item {
	font-family: "Montserrat", sans-serif !important;
	font-size: 14px !important; /* Данные из Computed */
	font-weight: 400 !important; /* Данные из Computed */
	line-height: 21px !important; /* Данные из Computed */
	padding: 0px 20px 0px 40px !important; /* Отступ 40px для иерархии */
	text-transform: uppercase !important;
	color: #3c4858 !important;
	display: block !important;
	text-decoration: none !important;
}

/* Активный город (Ковель) */
#navigation .sub-menu .town_list a.sub-menu-item.active-city {
	color: #1e8ddc !important;
	font-weight: 600 !important;
}

/* Убираем лишние зазоры */
#navigation.open {
	padding: 10px 0 !important;
}

/* ============================================================
   2. КОРРЕКТИРОВКА МОДАЛКИ
   ============================================================ */

.remodal.modal_big {
	max-width: 500px !important;
	border-radius: 16px !important;
	padding: 30px 30px 10px 30px !important;
	text-align: left !important;
}

.modal_big .modal_title {
	font-family: "Montserrat", sans-serif !important;
	color: #333 !important;
	font-size: 22px !important;
	font-weight: 700 !important;
	text-transform: uppercase;
}

/* Подзаголовок (2-я строка) — СТРОГО КАК НА ГЛАВНОМ */
.modal_big .mobile_phone p {
	font-family: "Montserrat", sans-serif !important;
	color: #1e8ddc !important; /* Голубой */
	font-size: 19px !important; /* Размер как в оригинале */
	font-weight: 400 !important; /* Не жирный */
	margin: 0 0 15px 0 !important;
	padding: 0 !important;
	text-transform: none !important; /* Без капса (как написано в переводе) */
	line-height: 1.2 !important;
}

.modal_big .tel-item.mod {
	display: flex !important;
	align-items: center !important;
	margin-bottom: 15px !important;
}

/* Убираем отступ у последнего телефона */
.modal_big .tel-item.mod:last-child {
	margin-bottom: 0 !important;
}

.modal_big .tel-item.mod a {
	font-size: 21px !important;
	color: #222 !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	margin-left: 5px !important;
}

.modal_big .tel-item.mod img {
	width: 22px !important;
}

@media (max-width: 767px) {
	/* 1. Контейнер модалки (твои значения: 10px со всех сторон) */
	.remodal.modal_big {
		padding: 10px !important;
		min-height: auto !important;
		width: 90% !important;
		margin-bottom: 10px !important;
	}

	/* 2. Внутренняя рамка (твои значения: 30px вер/низ, 20px лев/прав) */
	.remodal.modal_big .remodalBorder {
		padding: 30px 20px !important;
	}

	/* Шрифты для мобильной (оставляем как было) */
	.modal_big .modal_title {
		font-size: 18px !important;
	}
	.modal_big .mobile_phone p {
		font-size: 14px !important;
	}
	.modal_big .tel-item.mod a {
		font-size: 19px !important;
	}
}

/* Скрываем бургер-выбор города на десктопе */
@media (min-width: 992px) {
	#navigation .drop-down {
		display: none !important;
	}
}

/* ============================================================
   3. МОБИЛЬНАЯ ВЕРСИЯ: ТАБЛЕТКА CALLBACK (653)
   ============================================================ */

/* Меняем цвет рамки "таблетки" на голубой */
.mob_callback {
	border-color: #1e8ddc !important;
}

/* Меняем цвет слова "callback" на голубой */
.callback_text .top_text {
	color: #1e8ddc !important;
}

/* Если иконка трубки в таблетке тоже должна быть голубой (сейчас она в фоне кружка) */
.phone_call .header-phone-icon-big {
	background-color: #1e8ddc !important;
}

/* ============================================================
   4. МОНОШИРИННОЕ ВЫРАВНИВАНИЕ БЕЗ СМЕНЫ ШРИФТА
   ============================================================ */

/* Оставляем текущий шрифт, но делаем цифры одинаковыми по ширине */
.dig_575 .callback_head,
.tel-line a,
.modal_big .tel-item.mod a {
	color: #000000 !important; /* Чисто черный */
	font-family: "Montserrat", sans-serif !important;
	font-variant-numeric: tabular-nums !important; /* Включает режим моноширинных цифр */
	-moz-font-feature-settings: "tnum" !important;
	-webkit-font-feature-settings: "tnum" !important;
	font-feature-settings: "tnum" !important;
}

/* ============================================================
   5. ПОДСВЕТКА АКТИВНОГО ПУНКТА МЕНЮ (ДЕСТКОП)
   ============================================================ */

/* Принудительный цвет и подчеркивание для активной ссылки */
#topnav .navigation-menu li a.active {
	color: #1e8ddc !important;
	text-decoration: underline !important;
	font-weight: 700 !important;
}

/* Убираем подчеркивание у остальных при наведении, если нужно, или оставляем */
#topnav .navigation-menu li a:hover {
	color: #1e8ddc !important;
}

/* ============================================================
   6. ДЕСКТОПНОЕ МЕНЮ (1-В-1 С ГЛАВНЫМ САЙТОМ)
   ============================================================ */

@media (min-width: 992px) {
	/* Основные пункты меню */
	#topnav .navigation-menu > li > a {
		font-family: "Montserrat", sans-serif !important;
		font-size: 12px !important; /* Как на главном */
		font-weight: 600 !important; /* Как на главном */
		letter-spacing: 1px !important; /* Как на главном */
		text-transform: uppercase !important;
		color: #3c4858 !important; /* Темно-серый */
		padding-top: 25px !important; /* Отступы как на главном */
		padding-bottom: 25px !important;
		padding-left: 15px !important;
		padding-right: 15px !important;
		line-height: 24px !important;
		min-height: 62px !important;
		display: block !important;
		border: none !important; /* Убираем возможные границы */
		background-color: transparent !important;
	}

	/* Ховер (наведение) */
	#topnav .navigation-menu > li > a:hover {
		color: #1e8ddc !important; /* основной голубой */
	}

	/* Активный пункт и Ховер — теперь одинаковые */
	#topnav .navigation-menu > li > a.active,
	#topnav .navigation-menu > li > a:hover {
		color: #1e8ddc !important;
		text-decoration: underline !important;
		text-underline-offset: 5px;
		font-weight: 600 !important;
	}
}

/* Стили номера в футере */
.short-num-foot {
	color: #ffffff !important; /* Белый для темного фона */
	font-family: "Montserrat", sans-serif !important;
	font-size: 32px !important;
	font-weight: 900 !important; /* Максимальная жирность, как у 653 в шапке */
	text-decoration: none !important;
	display: inline-flex !important;
	align-items: center !important;
	margin: 10px 0 0 0 !important;

	/* Сохраняем ровные моноширинные цифры */
	font-variant-numeric: tabular-nums !important;
	-moz-font-feature-settings: "tnum" !important;
	-webkit-font-feature-settings: "tnum" !important;
	font-feature-settings: "tnum" !important;
}

.short-num-foot img {
	width: 24px !important;
	height: auto !important;
	margin-right: 12px !important;
}

/* ============================================================
   9. ПАНЕЛЬ СТАТИСТИКИ (BLUE BAR)
   ============================================================ */
.section-stats {
	background-color: #1e8ddc !important; /* Твой основной голубой */
	padding: 60px 0 !important;
}

.stats-num {
	color: #f5c600 !important; /* Желтый как Mobilauto */
	font-weight: 800 !important;
	font-size: 42px !important;
	margin-bottom: 5px !important;
	font-family: "Montserrat", sans-serif !important;
}

.stats-text {
	color: #ffffff !important;
	font-size: 14px !important;
	margin-bottom: 0 !important;
	line-height: 1.2 !important;
}

@media (max-width: 767px) {
	.section-stats {
		padding: 40px 0 !important;
		margin-bottom: 20px !important; /* Увеличили отступ после блока */
	}
	.stats-num {
		font-size: 32px !important;
	}
	.stats-text {
		font-size: 12px !important;
	}
}

@media (max-width: 991px) {
	/* --- Блок 1: Короткий номер --- */
	/* Заголовок "Наш короткий номер" */
	.footer .col-12:nth-child(1) .footer-head,
	.footer .col-12:nth-child(1) p:first-child {
		margin-bottom: 0 !important;
	}
	/* Сам номер 653 */
	.short-num-foot {
		margin: 5px 0 0 0 !important; /* Уменьшили отступ сверху до 5px, снизу 0 */
	}
	/* Подпись "єдиний номер..." */
	.footer-desc-white {
		margin-top: -5px !important; /* Притягиваем выше к номеру */
	}

	/* --- Блок 2: Маркеты --- */
	/* Заголовок "Завантажуйте..." */
	.footer .col-12:nth-child(2) p:first-child {
		margin-bottom: 0px !important;
	}
	/* Контейнер умной кнопки (верхний отступ) */
	.footer .col-12:nth-child(2) .show_only_mob_smart {
		margin-top: 15px !important;
		margin-bottom: 0 !important;
	}
	/* Желтый текст "Заощаджуй час та гроші!" */
	.footer .col-12:nth-child(2) p[style*="color: #F5C600"] {
		margin-top: 15px !important; /* Максимально близко к кнопкам */
	}

	/* --- Блок 3: Водители --- */
	.footer .col-12:nth-child(3) p {
		margin-bottom: 5px !important;
	}

	/* --- ОТСТУПЫ МЕЖДУ БЛОКАМИ (Колонками) --- */
	/* Увеличиваем расстояние между тремя основными группами */
	.footer .col-12 {
		margin-bottom: 20px !important;
	}
	.footer .col-12:last-child {
		margin-bottom: 0 !important;
	}
}

/* ============================================================
   10. УМНЫЕ КНОПКИ МАРКЕТОВ (ФИКС ЦВЕТА И ШИРИНЫ)
   ============================================================ */

@media (max-width: 767px) {
	/* Базовый сброс для всех умных кнопок, чтобы они не растягивались на весь экран */
	.andro-line a.btn-smart-black,
	.andro-line a.btn-smart-white {
		display: inline-flex !important; /* Чтобы ширина зависела от контента, как вверху */
		width: auto !important;
		min-width: 250px !important; /* Фиксируем минимальную ширину как у верхней кнопки */
		padding: 12px 18px !important;
		align-items: center;
		justify-content: center;
		border-radius: 6px !important;
		text-transform: none !important;
	}

	/* СРЕДНЯЯ КНОПКА (Черная) */
	.telegram-line.andro-line a.btn-smart-black {
		background-color: #000000 !important;
		border-color: #000000 !important;
		color: #ffffff !important;
		box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.3) !important;
	}

	/* КНОПКА В ФУТЕРЕ (Принудительно белая) */
	/* Используем .footer в начале, чтобы перебить ковельский черный !important */
	.footer .andro-line a.btn-smart-white {
		background-color: #ffffff !important;
		border: none !important;
		color: #222222 !important;
		box-shadow: 1px 1px 4px 1px rgba(0, 0, 0, 0.2) !important;
		/* Новые размеры и шрифт как на основном сайте */
		width: 400px !important;
		max-width: 90vw !important;
		padding: 14px 20px !important;
		font-size: 14px !important;
		font-weight: 600 !important;
	}

	/* Иконки в белой кнопке */
	.footer .andro-line a.btn-smart-white img {
		/* filter: brightness(0) !important; /* Делаем их черными */
		filter: none !important; /* Убираем чернение, возвращаем цвета */
		width: 17px !important;
	}

	/* Целевое почернение ТОЛЬКО для иконки Apple в белой кнопке */
	.footer .andro-line a.btn-smart-white img[src*="apple"] {
		filter: brightness(0) !important;
	}

	/* Кнопка "Залишити заявку" в футере Ковеля */
	.footer a.btn-kovel-driver {
		width: 400px !important;
		max-width: 90vw !important;
		padding: 14px 20px !important;
		font-size: 14px !important;
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
	}
}

/* Скрытие/Показ блоков */
@media (max-width: 767px) {
	.hide_mob_smart {
		display: none !important;
	}

	/* Центрируем контейнер умной кнопки на мобильных */
	.show_only_mob_smart {
		display: block !important;
		text-align: center !important;
		width: 100% !important;
	}
}

@media (min-width: 768px) {
	.show_only_mob_smart {
		display: none !important;
	}
}

/* Подсветка активного города в главном заголовке меню */
#navigation2 .navigation-menu > li > a.active-city {
	color: #1e8ddc !important;
	text-decoration: underline !important;
	text-underline-offset: 5px !important;
	font-weight: 600 !important;
	text-transform: uppercase !important;
}

/* Ограничение размера логотипа EasyPay */
.easypay-btn-img {
	width: 160px !important;
	height: auto !important;
	display: inline-block !important;
	vertical-align: middle !important;
}

/* ============================================================
   11. СТИЛИ ДЛЯ НОВЫХ СТРОК ТЕКСТА (ua_1, ua_2)
   ============================================================ */

.subtitle-line {
	font-family: "Montserrat", sans-serif !important;
	font-weight: 600 !important; /* Делаем чуть жирнее */
	font-size: 21px;
	line-height: 1.2 !important; /* Уплотняем межстрочный интервал */
	margin-bottom: 0 !important; /* Убираем отступ снизу у каждой строки */
	color: inherit; /* Цвет подстроится под секцию (белый или темный) */
}

/* Убираем зазор между заголовком и первой строкой */
.title-heading .heading + .subtitle-line {
	margin-top: -10px !important;
}

/* Минимальный зазор между первой и второй строкой */
.subtitle-line + .subtitle-line {
	margin-top: 2px !important;
}

/* Центрирование на мобильных, если родитель имеет центрирование */
@media (max-width: 991px) {
	.subtitle-line {
		text-align: center !important;
		font-size: 15px !important;
	}
	/* 1. Притягиваем текст к заголовку (убираем отступ заголовка) */
	.title-heading .heading {
		margin-bottom: 35px !important;
	}

	/* 2. Убираем лишний верхний отступ у первой строки */
	.subtitle-line:first-of-type {
		margin-top: 0 !important;
	}

	/* 3. Увеличиваем отступ под второй строкой перед "таблеткой" */
	.subtitle-line:last-of-type {
		margin-bottom: 5px !important;
	}
}

/* ============================================================
   12. ДЕСКТОП: ОТСТУПЫ И ПЕРЕСТАНОВКА БЛОКОВ (ОТ 992px)
   ============================================================ */
@media (min-width: 992px) {
	/* Контейнер заголовка делаем флексом для управления порядком */
	.title-heading {
		display: flex !important;
		flex-direction: column !important;
	}

	/* 1. Заголовок - первый */
	.title-heading .heading {
		order: 1 !important;
		margin-bottom: 10px !important; /* Тот самый отступ 10px */
	}

	/* 3. Подзаголовки (ua_1, ua_2) - вторые */
	.title-heading .subtitle-block {
		order: 3 !important;
		margin-top: 10px !important; /* Тот самый большой отступ ("пустая строка") */
		margin-bottom: 5px !important;
		display: block !important;
	}

	/* Увеличиваем отступ между первой и второй строкой подзаголовка на десктопе */
	.subtitle-line + .subtitle-line {
		margin-top: 8px !important;
	}

	/* 2. Описание (параграф) - третье */
	.title-heading .para-desc,
	.title-heading .para-desc2 {
		order: 2 !important;
		margin-top: 0 !important;
		/* margin-bottom: 30px !important; /* Отступ перед новым текстом */
		margin-bottom: 5 !important;
		display: block !important;
	}

	/* 4. Блок телефона 653 (callback) - четвертый */
	.title-heading .call-back_wrap,
	.title-heading .mob_callback {
		order: 4 !important;
		margin-top: 10px !important;
	}

	/* 5. Блок операторов (мобильные номера) - пятый */
	.title-heading .mobil_wrap,
	.title-heading .tel-line:not(.call-back_wrap) {
		order: 5 !important;
		margin-top: 0 !important;
	}

	/* 6. Кнопки маркетов (Google/Apple) - переносим В САМЫЙ НИЗ */
	.title-heading .app-block,
	.title-heading .telegram-line,
	.title-heading .andro-line {
		order: 6 !important;
		margin-top: 25px !important;
	}

	/* Прочие кнопки (например, Telegram/Заказать), если они есть */
	.title-heading .telegram-line,
	.title-heading .andro-line {
		order: 7 !important;
	}
}