/**
 * NMR Booking — 2-Column Booking Form layout.
 *
 * Scoped to `.ltg-booking-widget.nmr-2col`, so it has NO effect on the standard
 * [nmr_booking_form]. Colors come from the shared stylesheet / Appearance page;
 * this file only widens the widget and arranges the sections into two columns.
 *
 * Small screens: the grid collapses to a single column and, because the markup
 * is in the SAME source order as the standard form, customers see the identical
 * sequence (vehicle selection stays in its normal position).
 *
 * Wide screens: the vehicle section moves to a second, narrower column and the
 * price / summary / checkout reflow to the end of the left column.
 */

/* Wider container so two columns have room (base form is capped at 640px). */
.ltg-booking-widget.nmr-2col {
	max-width: 1180px !important;
	width: 100% !important;
}

/* Mobile-first: single column, natural source order (matches standard form). */
.ltg-booking-widget.nmr-2col .nmr-2col-grid {
	display: block;
}

/* Two columns once there's room: wider left (form), narrower right (vehicles). */
@media (min-width: 900px) {
	.ltg-booking-widget.nmr-2col .nmr-2col-grid {
		display: grid;
		grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
		column-gap: 32px;
		align-items: start;
	}

	/* Default every section to the left column. */
	.ltg-booking-widget.nmr-2col .nmr-2col-grid > * {
		grid-column: 1;
		min-width: 0;
	}

	/* Vehicle selection: right column, pinned to the top, spanning the height. */
	.ltg-booking-widget.nmr-2col .nmr-2col-grid > .nmr-col-vehicle {
		grid-column: 2;
		grid-row: 1 / span 50;
		align-self: start;
		margin-top: 0 !important;
	}

	/* Left-column reflow: passenger details, then price + checkout at the end. */
	.ltg-booking-widget.nmr-2col .nmr-2col-grid > .nmr-col-passenger { order: 1; }
	.ltg-booking-widget.nmr-2col .nmr-2col-grid > .nmr-col-end       { order: 2; }
	.ltg-booking-widget.nmr-2col .nmr-2col-grid > .nmr-col-end-btn   { order: 3; }
	.ltg-booking-widget.nmr-2col .nmr-2col-grid > .nmr-col-end-pay   { order: 4; }
}

/* Vehicle cards always stack vertically in the narrower column. */
.ltg-booking-widget.nmr-2col .nmr-col-vehicle .ltg-vehicle-grid {
	grid-template-columns: 1fr !important;
}