/* Start:/map/style.css?177487335331884*/
/* Базовая обертка */
.krio-map-wrapper {
	border: 1px solid #ddd;
	background: #f8f9fa;
	position: relative;
	height: calc(100vh - 100px);
	overflow: hidden;
	--panel-width: 380px;
}

/* --- ПАНЕЛИ (ОБЩЕЕ) --- */
.map-panel {
	position: absolute;
	background: #fff;
	z-index: 900; /* Чуть ниже элементов управления, если они поверх */
	box-shadow: 0 0 15px rgba(0,0,0,0.15);
	transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
	display: flex;
	flex-direction: column;
	width: var(--panel-width);
	transform: translateX(0);
	height: 100%;
	top: 0;
}

/* Заголовок */
.panel-content {
	height: 100%;
	position: relative;
	overflow-y: auto;
	padding: 20px;
}


/* Левая панель - позиционирование */
#panelLeft {
	left: 0;
}

/* Когда панель свернута (класс добавляется JS) */
#panelLeft.collapsed {
	transform: translateX(-100%); /* Уезжает влево */
}

/* Общий контейнер для верхней полосы (кнопка + фильтры) */
.top-controls-row {
	position: absolute;
	top: 16px;
	left: calc(var(--panel-width) + 4px);
	z-index: 100; /* Поверх карты */
	display: flex;
	align-items: center;
	gap: 8px;
	transition: left 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
	pointer-events: none; /* Чтобы клики сквозь пустое место проходили на карту */
}

#panelLeft.collapsed + .top-controls-row {
	left: 4px; /* 0 ширина панели + 4px отступа */
}

/* --- ПРАВАЯ ПАНЕЛЬ (Зеркально) --- */
#panelRight {
	right: 0; /* Прижата вправо */
	box-shadow: -2px 0 10px rgba(0,0,0,0.1); /* Тень в другую сторону */
}

/* Свернутое состояние правой панели: сдвигаем вправо на 100% */
#panelRight.collapsed {
	transform: translateX(100%);
}

/* Кнопка сворачивания */
.map-btn {
	width: 24px;
	height: 44px;
	background: #F4F4F4; /* Светло-серый фон */
	border: none;
	border-radius: 4px; /* Легкое скругление */
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 6px rgba(0,0,0,0.15);
	pointer-events: auto; /* Включаем клики */
	transition: background 0.2s;
}
.map-btn svg {
	transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
	transform-origin: center; /* Вращение вокруг центра */
}

#panelLeft.collapsed + .top-controls-row .map-btn svg {
	transform: rotate(180deg);
}

.map-btn:hover {
	background: #fff;
}

/* Кнопка переключения правой панели */
.toggle-right {
	position: absolute;
	right: calc(var(--panel-width) + 4px);

	top: 16px;

	width: 24px;
	height: 44px;

	background: #fff;
	border: none;

	border-radius: 4px;
	box-shadow: -2px 0 6px rgba(0,0,0,0.1); /* Тень слева */

	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1001;

	/* Убираем стандартные рамки */
	padding: 0;
	transition: right 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.3s;

}

#panelRight.collapsed ~ #btnCollapseRight {
	right: 4px; /* Прижимается к правому краю с отступом 4px */
}

.toggle-right.hidden {
	display: none;
}


/* Поворот стрелки при свернутом состоянии */
#panelRight.collapsed ~ #btnCollapseRight svg {
	transform: rotate(180deg);
}
/* При наведении */
.toggle-right:hover {
	background: #f9f9f9;
}

.map-filters-bar {
	background: #fff;
	border-radius: 4px;
	padding: 0 6px;
	display: flex;
	align-items: center;
	box-shadow: 0 2px 6px rgba(0,0,0,0.15);
	pointer-events: auto;
	height: 44px;
}


.filter-btn {
	background: none;
	border: none;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0 12px;
	cursor: pointer;
	font-size: 14px;
	color: #4061A6;
	height: 100%;
	border-radius: 4px;
	transition: background 0.2s;
}
.filter-btn .gray-filter {
	color: #6F6F6F;
}
.filter-btn:hover {
	background: #f5f5f5;
}

.dot-icon { font-size: 18px; line-height: 1; }
.dot-icon.green { color: #28a745; }
.dot-icon.blue { color: #007bff; }
.dot-icon.gray { color: #6c757d; }
/* Разделитель (палочка) */
.filter-divider {
	width: 1px;
	height: 24px;
	background: #E0E0E0;
	margin: 0 4px;
}


/* На мобильных (если нужно) можно разрешить скролл фильтров */
@media (max-width: 600px) {
	.map-filters-bar {
		overflow-x: auto;
		max-width: calc(100vw - 90px); /* Место под кнопку */
	}
}


/* --- КОНТЕНТ ПАНЕЛЕЙ --- */
.input-group-map { margin-bottom: 12px; position: relative; }
.input-group-map label { display: block; font-size: 12px; color: #666; margin-bottom: 4px; }
.input-group-map input { width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; }

.params-row { display: flex; gap: 10px; margin-bottom: 15px; }
.param-col input { width: 100%; padding: 6px; border: 1px solid #ddd; border-radius: 4px; }
.param-col label { font-size: 11px; color: #666; }

.btn-calc {
	width: 100%;
	padding: 10px;
	background: #dc3545;
	color: white;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	font-weight: bold;
}
.btn-calc:hover { background: #218838; }

.btn-red-action {
	width: 100%;
	padding: 10px;
	background: #dc3545;
	color: white;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	font-weight: bold;
	margin-top: 15px;
}
.btn-red-action:hover { background: #c82333; }

/* Автокомплит */
/* Новая обертка для позиционирования */
.search-wrapper {
	position: relative; /* Главное свойство */
	width: 100%;
}

/* Сам выпадающий список */
.search-results-list {
	position: absolute;
	/* Позиционируем прямо под полем */
	top: 100%;
	left: 0;
	width: 100%; /* Ширина равна ширине поля */

	background: white;
	border-radius: 8px; /* Скругление углов */
	box-shadow: 0 4px 15px rgba(0,0,0,0.15); /* Тень чтобы "парил" */

	max-height: 200px;
	overflow-y: auto;
	z-index: 2000; /* Поверх всего */

	margin-top: 4px; /* Небольшой отступ от инпута */
	display: none; /* Скрыто по умолчанию */
}

/* Пункт списка */
.search-result-item {
	padding: 10px 14px;
	cursor: pointer;
	font-size: 14px;
	color: #151416;
	border-bottom: 1px solid #f0f0f0;
	transition: background 0.2s;
}

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

.search-result-item:hover {
	background: #f8f9fa;
}

/* Сетка 2 колонки */
.results-grid {
	display: grid;
	grid-template-columns: 1fr;
	row-gap: 6px;
	margin-top: 10px;
}

/* Строка с данными */
.res-line {
	display: flex;
	align-items: baseline;
	gap: 8px;
	font-size: 16px;
	white-space: nowrap;
}

/* Правая колонка */
.res-line.right {
	justify-content: flex-end;
}

/* Шрифты и цвета */
.res-label {
	color: #6F6F6F;
	font-weight: 400;
}

.res-val {
	color: #151416;
	font-weight: 500;
}

/* Цвет экономии */
.highlight .res-val {
	color: #E40046;
}


.route-stops { margin-top: 15px; }
.stops-list { list-style: none; padding: 0; margin: 0; font-size: 18px; }
.stops-list li {
	position: relative; /* Чтобы иконка позиционировалась относительно этого пункта */
	padding-left: 32px; /* Отступ слева: 24px (ширина иконки) + 8px (зазор) */
	margin-bottom: 12px; /* Отступ между разными станциями */

	/* Для красоты текста внутри */
	display: flex;       /* Вернули flex, но... */
	flex-direction: column; /* ...сделали направление КОЛОНКОЙ, чтобы строки были друг под другом */
	justify-content: center; /* Центрируем контент по вертикали, если иконка большая */
	min-height: 24px;    /* Минимальная высота равна высоте иконки */
}
.stops-list li::before{
	content: '';
	position: absolute; /* Вырываем иконку из потока */
	left: 0;            /* Прижимаем влево */
	top: 0;             /* Прижимаем к верху (или top: 2px для визуальной компенсации) */

	width: 24px;
	height: 24px;

	/* SVG иконка */
	background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.3333 13.6667C11.4493 13.6667 10.6014 13.3155 9.97631 12.6904C9.35119 12.0652 9 11.2174 9 10.3333C9 9.44928 9.35119 8.60143 9.97631 7.97631C10.6014 7.35119 11.4493 7 12.3333 7C13.2174 7 14.0652 7.35119 14.6904 7.97631C15.3155 8.60143 15.6667 9.44928 15.6667 10.3333C15.6667 10.7711 15.5804 11.2045 15.4129 11.6089C15.2454 12.0134 14.9999 12.3808 14.6904 12.6904C14.3808 12.9999 14.0134 13.2454 13.6089 13.4129C13.2045 13.5804 12.7711 13.6667 12.3333 13.6667ZM12.3333 1C9.85798 1 7.48401 1.98333 5.73367 3.73367C3.98333 5.48401 3 7.85798 3 10.3333C3 17.3333 12.3333 22.6667 12.3333 22.6667C12.3333 22.6667 21.6667 17.3333 21.6667 10.3333C21.6667 7.85798 20.6833 5.48401 18.933 3.73367C17.1827 1.98333 14.8087 1 12.3333 1Z' fill='%23CCCCCC'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
}
.stop-price {color: #6F6F6F;}

/* Loader (обновленный) */
.map-loader {
	position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
	background: rgba(255,255,255,0.9); padding: 20px; border-radius: 8px; z-index: 2000;
	box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.spinner { width: 30px; height: 30px; border: 3px solid #f3f3f3; border-top: 3px solid #28a745; border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }


/* Центрирование кастомной иконки */
.krio-marker {
	width: 30px;
	height: 30px;
	/* Сдвигаем на 50% ширины и высоты влево и вверх,
       чтобы координата указывала точно в центр иконки */
	transform: translate(-50%, -50%);
	cursor: pointer;
}



.panel-title {
	font-size: 32px;
	font-weight: 700;
	margin-bottom: 24px;
	color: #151416;
	letter-spacing: -0.5px;
}

/* Карточка ввода (Серые плашки #F4F4F4) */
.input-card {
	background: #F4F4F4;
	border-radius: 10px;
	height: 48px;
	display: flex;
	align-items: center;
	padding: 0 16px;
	position: relative;
	transition: background 0.2s;
	margin-bottom: 8px;
}
.input-card:hover, .input-card:focus-within {
	background: #EDEDED;
}

/* Слот для иконки */
.icon-slot {
	width: 32px;
	display: flex;
	align-items: center;
	justify-content: flex-start;
}

/* Текстовый слот */
.input-slot {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: relative;
}

/* Поля ввода */
.input-slot input {
	background: transparent;
	border: none;
	outline: none;
	font-size: 18px;
	color: #151416;
	width: 100%;
	height: 48px;

}

.input-slot input::placeholder {
	color: rgba(111, 111, 111, 0.7);
	font-weight: 400;
	font-size: 18px;
	line-height: 22px;
}

.input-clear-btn {
	/* Позиционирование: справа 8px, вертикально по центру */
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);

	/* Внешний вид */
	border: none;
	background: transparent;
	font-size: 18px;
	line-height: 1;
	color: #666;
	cursor: pointer;
	padding: 4px;
	border-radius: 50%;

	/* Анимация появления/скрытия */
	transition: all 0.2s ease;

	/* По умолчанию скрыта */
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
}

/* Показываем кнопку, когда инпут не пустой */
.input-clear-btn.visible {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
}

/* Эффекты при наведении и нажатии */
.input-clear-btn:hover {
	color: #0047BB;
	background-color: rgba(0, 71, 187, 0.1);
}

.input-clear-btn:active {
	color: #003380;
	background-color: rgba(0, 71, 187, 0.2);
}

/* Сетка параметров (Расход/Цена) */
.params-grid {
	display: flex;
	gap: 8px;
	margin-bottom: 8px;
}
.input-card.small {
	flex: 1;
}

/* Кнопка расчета */
.btn-calculate-v2 {
	width: 100%;
	height: 52px;
	background: #FF144D;
	color: white;
	border: none;
	border-radius: 10px;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	box-shadow: 0 4px 10px rgba(0, 71, 187, 0.2);
	transition: all 0.2s;
}
.btn-calculate-v2:hover {
	/*background: #00358e;*/
	transform: translateY(-1px);
}
.btn-calculate-v2:active {
	transform: translateY(1px);
}

.btn-reset-route {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	padding: 10px 24px;
	margin-top: 8px;
	background: transparent;
	border: 1px solid #E40046;
	border-radius: 1000px;
	color: #E40046;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	transition: background 0.2s ease;
	justify-content: center;
}

.btn-reset-route:hover {
	background: rgba(228, 0, 70, 0.06);
}

		/* Итоги расчета (Внутри панели) */
.route-results-box {
	margin: 24px 0;
	padding:24px 0;
	border-top:1px solid #DFE5EB;
}

.route-results-hr {
	margin:24px 0;
	border-top:1px solid #DFE5EB;
}
.calc-results-box, .route-stops {
	background: #fff;
	border: 0 none;
	border-left: 3px solid #0047BB;
	padding-left:20px;
}

.calc-results-warning {
	font-weight: bold;
	font-size: 16px;
	text-align: center;
	color: #FF144D;
}


.calc-results-title {
	font-size:20px;
	font-weight:500;
	color: #151416;
	margin-bottom:24px;
}

/* Обертка, чтобы выстроить поля и кнопку в одну строку */
.route-row {
	display: flex;
	align-items: center; /* Центрируем кнопку по вертикали относительно блока полей */
}

/* Колонка для самих полей (чтобы они остались вертикальными) */
.route-inputs-col {
	flex-grow: 1;  /* Занимает все место */
	width: 100%;   /* Исправляет возможные баги с шириной */
}

/* Сама кнопка */
.btn-swap-route {
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	margin-left: 4px; /* Тот самый отступ в 4px */
	flex-shrink: 0;   /* Запрещаем кнопке сжиматься */
	transition: transform 0.3s ease;
}

.btn-swap-route:hover { opacity: 0.7; }


/* --- СТИЛИ ПРАВОЙ ПАНЕЛИ --- */

/* Заголовок и иконка статуса в одну строку */
.station-header-row {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 20px;
}
.station-title {
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
	color: #0047BB; /* Синий цвет заголовка */
	max-width: 85%;
}

/* Иконка типа станции (круглешок справа) */
.station-type-icon {
	width: 24px;
	height: 24px;
	flex-shrink: 0;
}

/* Блок с адресом и координатами */
.station-info-row {
	display: flex;
	gap: 12px;
	margin-bottom: 16px;
}
.info-icon {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	margin-top: 2px;
}
.info-text-col {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.info-address {
	font-size: 14px;
	color: #151416;
}
.info-coords {
	font-size: 13px;
	color: #6F6F6F;
}

/* Цена */
.price-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 24px;
	font-size: 14px;
}
.price-val {
	font-size: 16px;
	font-weight: 700;
	color: #151416;
}

/* КНОПКИ */
.btn-details {
	width: 100%;
	height: 48px;
	border: 1px solid #E40046;
	border-radius: 4px;
	background: #fff;
	color: #E40046;
	font-weight: 600;
	font-size: 14px;
	cursor: pointer;
	margin-bottom: 12px;
	transition: background 0.2s;
}
.btn-details:hover {
	background: #FFF0F5;
}

.btn-add-route {
	width: 100%;
	height: 48px;
	background: #E40046;
	border: none;
	border-radius: 8px; /* Скругление 8px как просили */
	color: #fff;
	font-weight: 600;
	font-size: 14px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between; /* Текст слева, иконка справа */
	padding: 0 20px;
	transition: background 0.2s;
}
.btn-add-route:hover {
	background: #C4003A;
}


/* --- РЕЖИМ "ПОДРОБНО" --- */

/* Поле поиска */
.details-search-box {
	position: relative;
	margin-bottom: 24px;
}
.details-search-input {
	width: 100%;
	height: 40px;
	background: #F4F4F4;
	border: none;
	border-radius: 4px;
	padding: 0 36px 0 36px; /* Место под иконки */
	font-size: 14px;
	color: #151416;
}
.search-icon-left {
	position: absolute;
	left: 10px;
	top: 50%;
	transform: translateY(-50%);
	pointer-events: none;
}
.search-clear-btn {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: none;
	cursor: pointer;
	font-size: 18px;
	color: #999;
	display: none; /* Скрыт по умолчанию */
}
.search-clear-btn.visible { display: block; }

/* Фото */
.station-photo-large {
	width: 357px;
	height: 167px;
	border-radius: 8px;
	object-fit: cover;
	margin-bottom: 24px;
	background: #eee;
}

/* Разделитель */
.details-divider {
	height: 1px;
	background: #DFE5EB;
	margin: 16px 0;
}

/* Панорама */
.panorama-link {
	display: block;
	width: 357px;
	height: 83px;
	border-radius: 8px;
	overflow: hidden;
	position: relative;
	background-size: cover;
	background-position: center;
	text-decoration: none;
}
.panorama-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,0.3);
	display: flex;
	align-items: flex-end;
	padding: 10px;
}
.panorama-text {
	color: #fff;
	font-weight: 600;
	font-size: 12px;
	display: flex;
	align-items: center;
	gap: 6px;
}

/* Результаты поиска в правой панели */
.right-search-results {
	position: absolute;
	top: 45px;
	left: 0;
	right: 0;
	background: #fff;
	border: 1px solid #eee;
	box-shadow: 0 4px 10px rgba(0,0,0,0.1);
	z-index: 2000;
	max-height: 200px;
	overflow-y: auto;
	display: none;
}
.right-search-item {
	padding: 10px;
	cursor: pointer;
	border-bottom: 1px solid #f0f0f0;
}
.right-search-item:hover { background: #f9f9f9; }

/* Контейнер панорамы */
.panorama-overlay-container {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 2000; /* Поверх карты (100-500), но под панелями (900+) если нужно, или поверх всего (3000) */
	background: #000;
	display: none; /* Скрыто по умолчанию */
	opacity: 0;
	transition: opacity 0.3s;
}

/* Если хотите, чтобы панорама перекрывала ВООБЩЕ ВСЁ, поставьте z-index: 3000 */
.panorama-overlay-container.active {
	display: block;
	opacity: 1;
}
/* Общий стиль для кнопок панорамы */
.pano-btn {
	background: #FFFFFF;
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 12px rgba(0,0,0,0.15);
	transition: background 0.2s;
	z-index: 2001; /* Поверх плеера */
}
.pano-btn:hover {
	background: #F5F5F5;
}

/* Кнопка закрытия (Квадратная справа сверху) */
.pano-close {
	position: absolute;
	top: 20px;
	right: 20px;
	width: 44px;
	height: 44px;
	border-radius: 8px;
}

/* Контейнер зума (Справа, чуть ниже середины) */
.pano-zoom-controls {
	position: absolute;
	right: 20px;
	top: 50%; /* По центру по вертикали */
	transform: translateY(-50%);
	display: flex;
	flex-direction: column;
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 4px 12px rgba(0,0,0,0.15);
	overflow: hidden;
}

/* Кнопки зума внутри контейнера */
.pano-zoom {
	width: 44px;
	height: 44px;
	box-shadow: none; /* Тень у родителя */
	border-radius: 0;
}

/* Разделитель между + и - */
.pano-divider {
	height: 1px;
	background: #E0E0E0;
	width: 30px;
	margin: 0 auto;
}

/* Сообщение об ошибке внутри панорамы */
.pano-error-message {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
	color: #fff;
	text-align: center;
	font-family: sans-serif;
}

.pano-error-message h3 {
	margin: 0 0 10px 0;
	font-size: 20px;
	font-weight: 500;
}

.pano-error-message p {
	margin: 0 0 24px 0;
	color: #ccc;
	font-size: 14px;
}

/* Кнопка перехода на Яндекс */
.btn-pano-external {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 20px;
	background: #E40046; /* Ваш фирменный красный */
	color: #fff;
	text-decoration: none;
	border-radius: 4px;
	font-size: 14px;
	font-weight: 600;
	transition: background 0.2s;
}

.btn-pano-external:hover {
	background: #C4003A;
}

/* Кастомный хинт (всплывашка при наведении) */
.krio-map-hint {
	/* Точные требования */
	width: 400px;
	background: rgba(255, 255, 255, 0.5);
	box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.1);

	/* Сохраняем размытие, чтобы текст читался на фоне карты */
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);

	border-radius: 8px;
	padding: 16px;

	/* Отступы между блоками текста */
	display: flex;
	flex-direction: column;
	gap: 16px;

	/* Шрифты */
	font-size: 18px;
	line-height: 1.3;

	color: #151416;

	/* Позиционирование */
	transform: translate(20px, -50%); /* Сдвиг вправо от курсора */
	pointer-events: none; /* Чтобы не мешал клику */
}

/* Название станции */
.krio-hint-title {
	font-weight: 700; /* Жирный */
	color: #151416;
}

/* Адрес */
.krio-hint-address {
	font-weight: 400; /* Обычный */
	color: #151416;
}

/* Строка с ценой */
.krio-hint-price-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	color: #151416;
}

.krio-hint-price-val {
	font-weight: 700; /* Жирные цифры */
}


/* --- Стили для умных лейблов в параметрах --- */

/* 1. Настройка слота для позиционирования */
.params-grid .input-slot {
	position: relative; /* Чтобы абсолюты летали внутри */
}

/* 2. Убираем стрелочки у input type="number" (Chrome, Safari, Edge, Opera) */
.params-grid input[type=number]::-webkit-outer-spin-button,
.params-grid input[type=number]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
/* Firefox */
.params-grid input[type=number] {
	-moz-appearance: textfield;
}

/* 3. Верхний лейбл (На границе) */
.floating-label {
	position: absolute;
	top: -9px; /* Поднимаем на границу */
	left: 10px;

	font-size: 11px;
	color: #999;
	font-weight: 500;

	background: #fff; /* Белый фон, чтобы перекрыть серую рамку */
	padding: 0 4px;   /* Отступы, чтобы рамка не прилипала к тексту */

	opacity: 0;       /* Скрыт по умолчанию */
	pointer-events: none; /* Пропускает клики */
	transition: opacity 0.2s;
	z-index: 5;
}

/* 4. Правая размерность (л, ₽) */
.input-unit {
	position: absolute;
	top: 50%;
	right: 12px;
	transform: translateY(-50%);

	font-size: 14px;
	color: #151416;
	font-weight: 500;

	opacity: 0; /* Скрыт по умолчанию */
	pointer-events: none;
	transition: opacity 0.2s;
}

/* 5. МАГИЯ: Показываем, когда поле НЕ пустое (плейсхолдер исчез) */
.params-grid input:not(:placeholder-shown) ~ .floating-label,
.params-grid input:not(:placeholder-shown) ~ .input-unit {
	opacity: 1;
}

/* 6. Когда поле заполнено, меняем цвет текста внутри на черный и жирный */
.params-grid input:not(:placeholder-shown) {
	font-weight: 600;
	color: #151416;
}

/* --- ВСПЛЫВАЮЩИЙ БАЛУН (КАРТОЧКА) --- */
/* --- ВСПЛЫВАЮЩИЙ БАЛУН (ФИКСИРОВАННЫЙ ВНИЗУ СПРАВА) --- */
.map-balloon {
	position: absolute;
	z-index: 1100; /* Чуть выше карты, но ниже выпадающих списков (2000) */

	/* Фиксированные размеры */
	width: 320px;

	/* Внешний вид */
	background: #FFFFFF;
	border-radius: 12px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
	padding: 20px;
	font-family: 'Stolzl', sans-serif;
	color: #151416;

	/* ПОЗИЦИОНИРОВАНИЕ: ПРАВЫЙ НИЖНИЙ УГОЛ */
	top: auto !important;   /* Сбрасываем то, что мог поставить JS */
	left: auto !important;  /* Сбрасываем то, что мог поставить JS */
	bottom: 40px;           /* Отступ снизу (над копирайтом Яндекса) */
	right: 20px;            /* Отступ справа */

	transform: none;        /* Убираем центровку */
	margin-top: 0;
	pointer-events: auto;

	/* Анимация появления (опционально) */
	animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
	from { transform: translateY(20px); opacity: 0; }
	to { transform: translateY(0); opacity: 1; }
}

/* Убираем треугольник, так как карточка теперь не привязана к пину */
.balloon-tail {
	display: none;
}

/* Курсор-перекрестие при выборе точки */
.krio-map-wrapper.map-click-mode #map {
	cursor: crosshair;
}

/* Подсказка над картой */
.map-click-hint {
	position: absolute;
	top: 60px;
	left: 50%;
	transform: translateX(-50%);
	background: rgba(0, 71, 187, 0.9);
	color: #fff;
	padding: 8px 20px;
	border-radius: 20px;
	font-size: 14px;
	font-weight: 500;
	z-index: 500;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.3s ease;
	white-space: nowrap;
}

.krio-map-wrapper.map-click-mode .map-click-hint {
	opacity: 1;
}

/* На мобильных можно делать на всю ширину снизу */
@media (max-width: 600px) {
	.map-balloon {
		width: auto;
		left: 10px !important;
		right: 10px;
		bottom: 20px;
	}
}

/* Кнопка закрытия (крестик) */
.balloon-close {
	position: absolute;
	top: 16px;
	right: 16px;
	background: none;
	border: none;
	cursor: pointer;
	color: #999;
	font-size: 20px;
	line-height: 1;
	padding: 0;
}
.balloon-close:hover { color: #E40046; }

/* Заголовок */
.balloon-header-row {
	margin-right: 20px; /* Место под крестик */
	margin-bottom: 12px;
}
.balloon-title {
	font-size: 16px;
	font-weight: 700;
	color: #0047BB; /* Синий как на скрине */
	line-height: 1.3;
	margin: 0 0 4px 0;
}
.balloon-status-badge {
	display: inline-block;
	padding: 2px 0;
}

/* Строки информации (Адрес, Координаты, Цена) */
.balloon-row {
	display: flex;
	gap: 10px;
	margin-bottom: 10px;
	font-size: 13px;
	line-height: 1.4;
}
.balloon-row .icon {
	width: 16px;
	flex-shrink: 0;
	color: #999; /* Цвет иконок */
	margin-top: 2px;
}
.balloon-row .text-col {
	display: flex;
	flex-direction: column;
}
.balloon-address { color: #151416; }
.balloon-coords { color: #999; font-size: 12px; margin-top: 2px;}
.balloon-price-label { color: #6F6F6F; margin-right: 4px; }
.balloon-price-val { font-weight: 700; color: #151416; }

/* Кнопки внизу балуна */
.balloon-actions {
	margin-top: 16px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* Кнопка "Подробнее" (Белая с обводкой) */
.btn-balloon-outline {
	width: 100%;
	padding: 10px;
	border: 1px solid #E40046;
	border-radius: 6px;
	background: #fff;
	color: #E40046;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	transition: all 0.2s;
	text-align: center;
}
.btn-balloon-outline:hover { background: #FFF0F5; }

/* Кнопка "В маршрут" (Красная) */
.btn-balloon-fill {
	width: 100%;
	padding: 10px;
	border: none;
	border-radius: 6px;
	background: #E40046;
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	transition: all 0.2s;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-left: 16px;
	padding-right: 16px;
}
.btn-balloon-fill:hover { background: #C4003A; }

/* Линия маршрута в списке остановок */
.stops-list li {
	/* Ваши старые стили */
	position: relative;
	padding-left: 32px;
	margin-bottom: 0; /* Убираем, так как теперь есть промежуточные блоки */
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 24px;
}

/* Блок дистанции между точками (Вертикальная линия с текстом) */
.route-segment-dist {
	padding-left: 32px;
	position: relative;
	margin: 8px 0;
	font-size: 13px;
	color: #999;
}
.route-segment-dist::before {
	content: '';
	position: absolute;
	left: 11px; /* По центру иконки 24px */
	top: 0;
	bottom: 0;
	width: 2px;
	background-color: #E0E0E0; /* Линия */
}

/* Обертка */
.custom-checkbox-wrap {
	margin: 16px 0;
}

/* Скрываем стандартный инпут */
.custom-checkbox-input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
}

/* Лейбл - контейнер для квадрата и текста */
.custom-checkbox-label {
	display: flex;
	align-items: center;
	cursor: pointer;
	user-select: none;
	font-family: 'Stolzl', sans-serif; /* Или ваш шрифт */
}

/* Сам квадрат */
.checkbox-box {
	width: 24px;
	height: 24px;
	border: 1px solid #C4C4C4; /* Серый бордер из макета */
	border-radius: 4px;        /* Скругление 4.5px */
	background-color: #fff;
	margin-right: 12px;        /* Отступ до текста */
	display: flex;
	align-items: center;
	justify-content: center;
	transition: border-color 0.2s, background-color 0.2s;
	flex-shrink: 0;
}

/* Галочка внутри (изначально скрыта) */
.checkbox-box svg {
	display: none;
	width: 14px; /* Размер галочки */
	height: auto;
}

/* Текст */
.checkbox-text {
	font-size: 14px;
	color: #151416;
	font-weight: 400; /* Regular как на макете */
}

/* --- СОСТОЯНИЯ --- */

/* При наведении */
.custom-checkbox-label:hover .checkbox-box {
	border-color: #999;
}

/* Когда выбран (checked) */
.custom-checkbox-input:checked + .custom-checkbox-label .checkbox-box {
	border-color: #C4C4C4; /* Бордер остается серым */
}

/* Показываем галочку при выборе */
.custom-checkbox-input:checked + .custom-checkbox-label .checkbox-box svg {
	display: block;
	animation: checkAnim 0.2s ease-out;
}

/* Анимация появления галочки (легкий зум) */
@keyframes checkAnim {
	from { transform: scale(0); opacity: 0; }
	to { transform: scale(1); opacity: 1; }
}
/* End */
/* /map/style.css?177487335331884 */