/*
 * Стили темы GoChicago (gochicago.limoorders.com) поверх Bootstrap 3 и общего limo-mobile.css.
 * Подключается в Layouts/default.ctp после limo-mobile.
 */

/* Картинки машин (шаги 2–4) не шире экрана: на телефоне шаг 3 уезжал вбок */
#container img {
	max-width: 100%;
	height: auto;
}

/* Полоса шагов (Elements/order_progress.ctp) в разметке New: кружки с номерами и линии между ними.
   Без Tailwind класс .label давал крошечные бейджи Bootstrap */
.order_progress {
	display: flex;
	align-items: center;
	gap: 7px;
	margin: 10px 0 20px;
}
.order_progress .label {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border-radius: 50%;
	background: #e4e4e4;
	color: #fff;
	font-size: 16px;
	font-weight: bold;
	line-height: 1;
}
.order_progress .label a {
	color: inherit;
	text-decoration: none;
}
.order_progress .first_active,
.order_progress .first,
.order_progress .passed,
.order_progress .active,
.order_progress .last_active {
	background: #337ab7;
}
.order_progress .step_line {
	flex: 0 1 36px;
	height: 1px;
	background: #c9d8ea;
}
.order_progress .first_active + .step_line,
.order_progress .first + .step_line,
.order_progress .passed + .step_line,
.order_progress .active + .step_line {
	background: #337ab7;
}

/* Шаги 1 и 4: форма слева, карта маршрута справа, как в теме New (Orders/step1.ctp, Orders/step4.ctp).
   Карта только на экранах от 1024px: на мобильных её нет и в New */
.trip_layout {
	display: flex;
	align-items: flex-start;
	gap: 30px;
}
.trip_layout__form {
	flex: 1 1 auto;
	min-width: 0;
}
.trip_layout__form img {
	max-width: 100%;
	height: auto;
}
.trip_layout__side {
	flex: 0 0 42%;
}
.trip_map {
	width: 100%;
	height: 420px;
	border-radius: 4px;
	border: 1px solid #ddd;
}
@media (max-width: 1023px) {
	.trip_layout {
		display: block;
	}
	.trip_layout__side,
	.trip_map {
		display: none;
	}
}

/* Страница заказа (Elements/reservation_*.ctp): цвета Bootstrap 3, как у кнопок формы */
.cnf-page.cnf-page--gochicago {
	--cnf-blue: #337ab7;
	--cnf-blue-dark: #286090;
	--cnf-pale: #f5f5f5;
	--cnf-ink: #333;
	--cnf-muted: #777;
}

/* My Orders (RealOrders/my.ctp): ссылка на заказ и кнопки обратной / похожей поездки */
.my_order_link {
	display: block;
	color: inherit;
}
.my_order_link:hover,
.my_order_link:focus {
	color: #337ab7;
	text-decoration: none;
}
.my_order_actions {
	margin-top: 8px;
}

/* Картинки машин (шаги 2–4) одного размера: файлы разной величины вписываются в рамку 96:53, как в теме New */
#container img.car_image {
	display: block;
	width: 280px;
	max-width: 100%;
	height: auto;
	aspect-ratio: 96 / 53;
	object-fit: contain;
}