@charset "utf-8";

:root {
	/* Цветовая палитра */
	--color-primary: #1e7edd;
	--color-primary-dark: #196ab8;
	--color-secondary: #0044bb;
	--color-accent: #00bfff;
	--color-success: #00c74b;
	--color-success-dark: #00b245;
	--color-warning: #ff8c18;
	--color-danger: #e3443c;
	--color-danger-dark: #da2713;
	--color-text: #1c2c43;
	--color-text-light: #7b828a;
	--color-text-muted: #9a8297;
	--color-white: #fff;
	--color-light: #f9f9fb;
	--color-light-gray: #f3f4f7;
	--color-gray: #eee;
	--color-gray-medium: #d9d9d9;
	--color-gray-dark: #282d34;
	--color-dark: #263440;
	--color-dark-blue: #032842;
	--color-bg-message-map: #ffeba0;
	--color-bg-message-map-night: #3a414b;

	/* Фоновые цвета */
	--bg-body: #fff;
	--bg-dark: #1c2c43;
	--bg-light: #fafafa;
	--bg-tooltip: #263440;
	--bg-success-light: #56c456;
	--bg-gray: #7b94a4;
	--bg-gray-dark: #5f798d;
	--bg-green: #89977d;
	--bg-green-light: #94a189;

	/* Цвета иконок и состояний */
	--color-checkbox: #878a94;
	--color-checkbox-active: #ce5300;
	--color-placeholder: #7b828a;
	--color-focus: #1e7edd;
	--color-hover: #1a84e9;
	--color-link: #0044bb;
	--color-link-hover: #1a84e9;

	/* Цвета кнопок управления */
	--color-p2p-btn: #0076bd;
	--color-p2p-btn-hover: #005a8d;
	--color-chain-add-btn: lch(61.86 38.8 125.51);
	--color-chain-add-btn-hover: lch(51.86 38.8 125.51);
	--color-unlock-btn: oklch(0.4655 0.1012 16.83);
	--color-unlock-btn-hover: #ae4f4c;

	/* Цвет подсветки панелей */
	--color-panel-highlight: rgb(18, 206, 106);

	/* Размеры и отступы */
	--space-xs: 5px;
	--space-sm: 10px;
	--space-md: 15px;
	--space-lg: 20px;
	--space-xl: 25px;
	--space-xxl: 50px;

	/* Размеры шрифтов */
	--font-size-xs: 13px;
	--font-size-sm: 14px;
	--font-size-base: 16px;
	--font-size-md: 17px;
	--font-size-lg: 19px;
	--font-size-xl: 20px;
	--font-size-xxl: 22px;
	--font-size-huge: 26px;
	--font-size-display: 33px;
	--font-size-display-lg: 40px;

	/* Межстрочные интервалы */
	--line-height-sm: 1.2;
	--line-height-base: 1.4;
	--line-height-md: 1.5;
	--line-height-lg: 1.6;

	/* Ширины */
	--container-sm: 710px;
	--container-md: 964px;
	--container-lg: 1140px;
	--container-xl: 1320px;
	--container-xxl: 1400px;
	--container-xxxl: 1490px;
	--container-xxxxl: 1560px;
	--container-max: 1880px;

	/* Брейкпоинты */
	--breakpoint-sm: 738px;
	--breakpoint-md: 994px;
	--breakpoint-lg: 1170px;
	--breakpoint-xl: 1366px;
	--breakpoint-xxl: 1440px;
	--breakpoint-xxxl: 1536px;
	--breakpoint-xxxxl: 1600px;
	--breakpoint-max: 1920px;

	/* Тени */
	--shadow-sm: 0 0 2px rgba(135, 138, 148, 0.5);
	--shadow-md: 0 3px 3px rgba(238, 238, 238, 0.5);
	--shadow-inset: inset 0 0 2px rgba(135, 138, 148, 0.5);

	/* Анимации */
	--transition-fast: 0.2s ease;
	--transition-normal: 0.3s ease-in-out;
	--transition-slow: 0.5s ease;
	--animation-duration: 0.6s;

	/* Радиусы */
	--radius-none: 0;
	--radius-sm: 4px;
	--radius-md: 50px;
	--radius-circle: 50%;

	/* Z-index слои */
	--z-tooltip: 1;
	--z-fixed: 2;
	--z-modal: 10;
	--z-dropdown: 11;
	--z-cookie: 100000000;
}

.disabled,
button:disabled,
input:disabled {
	opacity: 0.5;
	/* cursor: not-allowed; */
}

/* ==========================================================================
   Основные стили для карты и интерфейса построения маршрутов
   ========================================================================== */

/* Контейнер карты */
#map {
	width: 100%;
	margin: 0 auto;
	height: 500px;
	position: relative;
}

/* Стили для индикатора загрузки и сообщений */
.loader,
.msg {
	padding: var(--space-sm);
	width: auto;
	display: flex;
	gap: 16px;
	text-align: left;
	left: 50%;
	position: absolute;
	top: 50%;
	z-index: var(--z-tooltip);
	align-items: center;
	transform: translate(-50%, -50%);
	/* Центрирование через transform */
}

/* Стили для индикатора загрузки */
.loader {
	background-color: var(--color-white);
	border-radius: var(--radius-sm);
	/* margin и transform теперь в общем правиле */
}

/* Общие стили для спиннера */
.loader__spinner {
	width: 60px;
	height: 60px;
	flex-shrink: 0;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	animation: loader-spin 1.5s linear infinite;
}

/* Конкретный спиннер с синим котом */
.loader__cat-blue {
	background-image: url('https://www.online-perevozka.ru/script/ot_mkad/images/loading/cat-blue.svg');
}

/* Конкретный спиннер - кометами */
.loader__comets {
	background-image: url('https://www.online-perevozka.ru/script/ot_mkad/images/loading/comets.svg');
}

/* Конкретный спиннер - призрак */
.loader__spookyghost {
	background-image: url('https://www.online-perevozka.ru/script/ot_mkad/images/loading/spookyghost.svg');
}

/* Стили текста */
.loader__text,
.msg__text {
	font-size: var(--font-size-lg);
	color: var(--color-dark-blue);
	font-weight: 500;
}

/* Стили для сообщений (отличаются от индикатора загрузки) */
.msg {
	background-color: var(--color-bg-message-map);
	border-radius: var(--radius-sm);
}

/* Стили для элементов автодополнения (саджетов) */
.custom-suggest-item:hover {
	background-color: #f5f5f5 !important;
}

.custom-suggest-item:last-child {
	border-bottom: none !important;
}

/* Кнопка принудительной разблокировки интерфейса */
.force-unlock-btn {
	position: absolute;
	bottom: 30px;
	right: 7px;
	z-index: 10000;
	background-color: var(--color-unlock-btn);
	color: white;
	border: none;
	border-radius: 3px;
	padding: 8px 6px;
	font-size: 14px;
	font-weight: bold;
	cursor: pointer;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
	display: none;
	transition: background-color var(--transition-normal), transform 0.2s;
	opacity: 0;
}

.force-unlock-btn:hover {
	background-color: var(--color-unlock-btn-hover);
	transform: translateY(0);
}

.force-unlock-btn:active {
	transform: translateY(0);
}

/* ==========================================================================
   Стили панелей ввода для режимов "точка-точка" и "цепочка точек"
   ========================================================================== */

/* Контейнеры панелей ввода */
.app-map-inputs-panel {
	margin: 4px 0 0 0;
}

.p2p-input-panel,
.chain-input-panel {
	width: 100%;
	margin: 0 auto;
	position: relative;
}

/* Анимация подсветки для панели цепочки точек */
@keyframes chainPanelFlash {
	0% {
		box-shadow: 0 0 0 0 rgba(18, 206, 106, 0);
		background-color: transparent;
	}

	15% {
		box-shadow: 0 0 0 4px rgba(18, 206, 106, 0.6);
		background-color: var(--color-panel-highlight);
	}

	70% {
		box-shadow: 0 0 0 4px rgba(18, 206, 106, 0.6);
		background-color: var(--color-panel-highlight);
	}

	100% {
		box-shadow: 0 0 0 0 rgba(18, 206, 106, 0);
		background-color: transparent;
	}
}

/* Классы для активации анимации подсветки */
.p2p-panel-highlight,
.chain-panel-highlight {
	animation: chainPanelFlash 2.5s ease-out;
}

/* Контейнер для полей ввода цепочки с вертикальной прокруткой */
.chain-inputs {
	max-height: 99px;
	overflow-y: auto;
}

/* Строки ввода (содержат input и кнопки) */
.p2p-input-row,
.chain-input-row {
	display: flex;
}

/* Стили полей ввода */
.p2p-input-row input,
.chain-input-row input {
	flex: 1;
	padding: 6px 4px;
	margin: 1px 0;
	font-size: var(--font-size-sm);
	box-sizing: border-box;
	background-color: var(--color-light);
	color: #101417;
}

body.night .msg__text {
	color: var(--color-light);
}

/* Стили для сообщений (отличаются от индикатора загрузки) */
body.night .msg {
	background-color: var(--color-bg-message-map-night);
	border-radius: var(--radius-sm);
}

/* Стиль для полей ввода - тёмный режим */
body.night .p2p-input-row input,
body.night .chain-input-row input {
	background-color: var(--color-gray-dark);
	color: #f8f8ff;
	border: 1px solid var(--color-gray-dark);
}

/* Стиль для активного поля ввода в цепочке */
.chain-input-active {
	color: #101417 !important;
	background-color: #ecf8de !important;
}

/* Стиль для активного поля ввода в цепочке - тёмный режим */
body.night .chain-input-active {
	color: #101417 !important;
	background-color: #f8f8ff !important;
}

/* Кнопки в строках ввода */
.chain-input-row button {
	margin-left: var(--space-xs);
	padding: var(--space-xs) var(--space-sm);
}

/* ==========================================================================
   Стили кнопок управления
   ========================================================================== */

/* Общие стили для кнопок построения маршрута и очистки */
.p2p-build-route-btn,
.clear-fields-btn,
.chain-add-row-btn,
.chain-build-route-btn,
.chain-finish-btn {
	color: white;
	border: none;
	padding: 6px 4px;
	border-radius: 0px;
	cursor: pointer;
	font-size: 14px;
	width: auto;
	margin-top: 2px;
}

/* Кнопка построения маршрута точка-точка */
.p2p-build-route-btn {
	background-color: var(--color-p2p-btn);
}

.p2p-build-route-btn:hover {
	background-color: var(--color-p2p-btn-hover);
}

/* Кнопка очистки полей */
.clear-fields-btn {
	background-color: var(--color-gray-dark);
	/* или другая подходящая переменная, например #393d46, но можно добавить */
}

.clear-fields-btn:hover {
	background-color: #21262c;
	/* можно тоже вынести в переменную при необходимости */
}

/* Кнопка добавления нового поля для MKAD-CHAIN */
.chain-add-row-btn {
	background-color: var(--color-chain-add-btn);
}

.chain-add-row-btn:hover {
	background-color: var(--color-chain-add-btn-hover);
}

/* Кнопка построения маршрута для цепочки точек */
.chain-build-route-btn {
	background-color: var(--color-p2p-btn);
}

.chain-build-route-btn:hover {
	background-color: var(--color-p2p-btn-hover);
}

/* Кнопка завершения цепочки */
.chain-finish-btn {
	background-color: var(--color-gray-dark);
	/* или другая */
}

.chain-finish-btn:hover {
	background-color: #21262c;
}

/* ==========================================================================
   Кастомизация элементов Яндекс.Карт
   ========================================================================== */

/* Панель управления картой */
.ymaps-2-1-79-controls__toolbar {
	margin-top: var(--space-xs) !important;
}

.ymaps-2-1-79-controls__control_toolbar {
	margin: 0 0 var(--space-xs) var(--space-xs) !important;
}

/* Поисковая строка */
.ymaps-2-1-79-searchbox {
	margin-right: var(--space-xs) !important;
}

/* Скрытие промо-копирайтов */
.ymaps-2-1-79-map-copyrights-promo {
	display: none;
}

/* Настройки плавающих кнопок */
.ymaps-2-1-79-float-button-icon+.ymaps-2-1-79-float-button-text {
	padding-left: 3px !important;
}

.ymaps-2-1-79-float-button-text {
	padding-right: 3px !important;
}

/* Курсор по умолчанию */
.ymaps-2-1-79-events-pane,
.ymaps-2-1-79-user-selection-none {
	cursor: default !important;
}

/* Стили для курсора при зажатой левой кнопке мыши на карте */
.map-grabbing .ymaps-2-1-79-events-pane,
.map-grabbing .ymaps-2-1-79-user-selection-none {
	cursor: grabbing !important;
}

.ymaps-2-1-79-controls__toolbar *,
.ymaps-2-1-79-controls__control * {
	cursor: pointer !important;
}

/* Стили при блокировке интерфейса */
.ui-blocked .ymaps-2-1-79-events-pane,
.ui-blocked .ymaps-2-1-79-user-selection-none {
	cursor: wait !important;
}

.ui-blocked .p2p-input,
.ui-blocked .p2p-build-route-btn,
.ui-blocked .clear-fields-btn,
.ui-blocked .chain-input,
.ui-blocked .chain-build-route-btn,
.ui-blocked .chain-finish-btn,
.ui-blocked .ymaps-2-1-79-controls__toolbar *,
.ui-blocked .ymaps-2-1-79-controls__control *,
.ui-blocked .ymaps-2-1-79-balloon * {
	cursor: not-allowed !important;
}

/* ==========================================================================
   Стили для балунов (всплывающих окон на карте)
   ========================================================================== */

/* Контейнер для кнопок в балуне */
.balloon-copy-wrap {
	text-align: right;
	margin-top: 6px;
}

/* Кнопки в балуне */
.copy-balloon-btn,
.finish-chain-btn {
	cursor: pointer;
	padding: 4px 8px;
	border-radius: var(--radius-sm);
	border: 1px solid var(--color-gray-medium);
	background-color: var(--color-white);
	font: inherit;
}

.finish-chain-btn {
	margin-left: 8px;
}

.copy-balloon-btn:hover,
.finish-chain-btn:hover {
	background-color: var(--color-light-gray);
}

/* ====================== СТИЛИ ДЛЯ АВТОПОДСКАЗОК ====================== */

/* Общие стили для контейнера (светлая и тёмная тема) */
.custom-suggest-container {
	position: absolute;
	border-radius: 0px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
	max-height: 300px;
	overflow-y: auto;
	z-index: 10000;
	display: none;
	min-width: 300px;
	font-family: inherit;
	scrollbar-width: thin;
	animation: fadeIn 0.2s ease-out;
	padding: 0 !important;
	box-sizing: border-box;
}

.custom-suggest-container:empty {
	display: none !important;
}

/* Общие стили для элементов подсказок */
.suggest-item {
	padding: 6px 4px;
	cursor: pointer;
	border-bottom: 1px solid #f0f0f0;
	font-size: 14px;
	line-height: 1.4;
	transition: all 0.2s ease;
	display: block;
	width: 100%;
	box-sizing: border-box;
	margin: 0;
	user-select: none;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.suggest-item:last-child {
	border-bottom: none;
}

.suggest-item * {
	margin: 0;
	padding: 0;
}

/* Стили для scrollbar (общие для обеих тем) */
.custom-suggest-container::-webkit-scrollbar {
	width: 8px;
}

.custom-suggest-container::-webkit-scrollbar-track {
	border-radius: 0px;
}

.custom-suggest-container::-webkit-scrollbar-thumb {
	border-radius: 0px;
	border: 2px solid transparent;
	background-clip: content-box;
}

.custom-suggest-container::-webkit-scrollbar-thumb:hover {
	background-color: #a8a8a8;
}

/* Стили для выделения текста */
.suggest-item strong {
	font-weight: 600;
}

/* Общие состояния */
.suggest-item.loading,
.suggest-item.no-results {
	cursor: default;
	text-align: center;
	font-style: italic;
	padding: 12px;
}

.suggest-item.loading:hover,
.suggest-item.no-results:hover {
	background-color: transparent !important;
	cursor: default;
}

/* Анимация появления */
@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(-5px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ====================== СВЕТЛАЯ ТЕМА (по умолчанию) ====================== */
.custom-suggest-container {
	background-color: #ffffff;
	border: 1px solid #e0e0e0;
	scrollbar-color: #c1c1c1 #ffffff;
}

.custom-suggest-container::-webkit-scrollbar-track {
	background-color: #f5f5f5;
}

.custom-suggest-container::-webkit-scrollbar-thumb {
	background-color: #c1c1c1;
	border-color: #f5f5f5;
}

.custom-suggest-container::-webkit-scrollbar-thumb:hover {
	background-color: #a8a8a8;
}

.suggest-item {
	color: #333333;
	background-color: #ffffff;
}

.suggest-item:hover {
	background-color: #e3f2fd !important;
	color: #1976d2;
}

.suggest-item.selected {
	background-color: #e3f2fd !important;
	color: #1976d2;
}

.suggest-item.selected:hover {
	background-color: #bbdefb !important;
}

.suggest-item strong {
	color: #1976d2;
}

.suggest-item.loading,
.suggest-item.no-results {
	color: #666;
	background-color: #ffffff;
}

/* ====================== ТЕМНАЯ ТЕМА ====================== */
body.night .custom-suggest-container {
	background-color: var(--color-gray-dark);
	border: 1px solid var(--color-gray-dark);
	border-top: 1px solid lch(61.86 38.8 125.51);
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
	scrollbar-color: #505662 var(--color-gray-dark);
}

body.night .custom-suggest-container::-webkit-scrollbar-track {
	background-color: var(--color-gray-dark);
}

body.night .custom-suggest-container::-webkit-scrollbar-thumb {
	background-color: var(--color-gray-dark);
	border-color: var(--color-gray-dark);
}

body.night .custom-suggest-container::-webkit-scrollbar-thumb:hover {
	background-color: #ACACB9;
}

body.night .suggest-item {
	border-bottom-color: #101417;
	color: #ACACB9;
	background-color: var(--color-gray-dark);
}

body.night .suggest-item:hover {
	background-color: #101417 !important;
	color: #ffffff;
}

body.night .suggest-item.selected {
	background-color: #101417 !important;
	color: #ffffff;
}

body.night .suggest-item.selected:hover {
	background-color: #0a0d0f !important;
}

body.night .suggest-item strong {
	color: #ffffff;
}

body.night .suggest-item.loading,
body.night .suggest-item.no-results {
	color: #ACACB9;
	background-color: #1D272A;
}

/* ====================== ДОПОЛНИТЕЛЬНО ====================== */

/* Гарантируем, что контейнер не создает пустых кликабельных областей */
.custom-suggest-container::before,
.custom-suggest-container::after {
	display: none !important;
}

/* Улучшаем визуальную обратную связь при клике */
.suggest-item:active {
	transform: translateY(1px);
	transition: transform 0.1s;
}

/* Для длинных текстов разрешаем перенос, но ограничиваем высоту */
.suggest-item.multiline {
	white-space: normal;
	line-height: 1.3;
	min-height: 36px;
	display: flex;
	align-items: center;
}

/* ====================== АДАПТИВНОСТЬ ====================== */
@media (max-width: 768px) {
	.custom-suggest-container {
		min-width: calc(100vw - 30px);
		max-width: calc(100vw - 30px);
		left: 15px !important;
		right: 15px !important;
		width: auto !important;
	}

	.suggest-item {
		/* padding: 10px 12px; */
		/* font-size: 16px; */
		white-space: wrap;
	}
}

/* ==========================================================================
   Медиа-запросы для адаптивного дизайна
   ========================================================================== */

/* Для экранов от 738px (планшеты и выше) */
@media only screen and (min-width: 738px) {

	#map,
	.p2p-input-panel,
	.chain-input-panel {
		width: 100%;
	}
}

/* Для экранов от 1170px (большие десктопы) */
@media only screen and (min-width: 1170px) {
	#map {
		height: 600px;
	}
}