/**
 * Application page (sl-application): photo left, journey card and seat form right.
 * States: --inquiry, --error, --ready, --success; --picker when no journey was in the link.
 * Desktop 1440: 720 × 880 photo, panel padding 56 / 120 / 56 / 72.
 * Tablet 834: 420 px photo on top. Phone 390: 440 px photo, fields stacked.
 */

.sl-application {
	--sl-app-photo-h: 880px;
	--sl-app-danger: #a23520;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	min-height: var(--sl-app-photo-h);
}

.sl-application__photo {
	min-height: var(--sl-app-photo-h);
}

.sl .sl-application__photo img {
	object-position: var(--sl-app-focus, 50% 50%);
}

.sl .sl-application__credit {
	left: 24px;
	bottom: 24px;
	max-width: calc(100% - 48px);
	margin: 0;
	padding: 6px 10px;
}

.sl-application__panel {
	display: flex;
	align-items: center;
	/* Right edge lines up with the 1200 px container: the panel is half of the page. */
	padding: var(--sl-pad-t, 56px) max(var(--sl-gutter), calc(100% - var(--sl-max) / 2)) var(--sl-pad-b, 56px) 72px;
}

.sl-application__inner {
	width: 100%;
	max-width: 528px;
}

.sl .sl-application__back {
	margin-bottom: 32px;
}

.sl-application__head {
	margin-bottom: 32px;
}

.sl-application__line {
	margin-top: 16px;
	color: var(--sl-muted);
}

/* Journey card */

.sl-application__card {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 12px;
	border: 1px solid var(--sl-line);
	border-radius: 16px;
}

.sl-application__card-photo {
	flex: none;
	width: 144px;
	height: 108px;
	border-radius: 12px;
}

.sl-application__card-body {
	flex: 1 1 auto;
	min-width: 0;
}

.sl-application__journey {
	margin-top: 6px;
}

.sl-application__dates {
	margin-top: 6px;
	color: var(--sl-muted);
}

.sl-application__price {
	margin-top: 6px;
	color: var(--sl-heading);
}

.sl-application__price[hidden] {
	display: none;
}

/* Fields */

.sl-application__fields,
.sl-application__summary {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-top: 32px;
}

.sl-application__row {
	display: flex;
	gap: 16px;
	margin: 0;
}

.sl-application__field,
.sl-application__item {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}

.sl-application__row--trip > .sl-application__field--seats {
	flex: 0 0 160px;
}

.sl-application__label {
	display: block;
}

.sl-application__error {
	color: var(--sl-app-danger);
	font-size: var(--sl-fs-small);
	line-height: var(--sl-lh-small);
}

.sl-application__error[hidden] {
	display: none;
}

.sl .is-invalid .sl-input,
.sl .is-invalid .sl-select {
	border-color: var(--sl-app-danger);
	box-shadow: inset 0 0 0 1px var(--sl-app-danger);
}

.sl .is-invalid .sl-input::placeholder {
	color: var(--sl-c-ink);
}

.sl-application__value {
	color: var(--sl-heading);
	overflow-wrap: anywhere;
}

/* Buttons */

.sl-application__actions {
	margin-top: 32px;
}

.sl-application__buttons {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 24px;
}

.sl .sl-application__toggle {
	padding: 0;
	border: 0;
	background: none;
	font-family: var(--sl-font-body);
	text-align: left;
	cursor: pointer;
}

.sl-application__note {
	margin-top: 12px;
	color: var(--sl-muted);
}

/* Tablet: photo on top, panel below at the page gutter. */
@media (max-width: 1024px) {
	.sl-application {
		--sl-app-photo-h: 420px;
		grid-template-columns: minmax(0, 1fr);
		min-height: 0;
	}

	.sl-application__photo {
		height: var(--sl-app-photo-h);
		min-height: 0;
	}

	.sl-application__panel {
		display: block;
		padding: var(--sl-pad-t, 48px) var(--sl-gutter) var(--sl-pad-b, 56px);
	}

	.sl-application__inner {
		max-width: none;
	}

	.sl-application__row--trip > .sl-application__field--seats {
		flex: 1 1 0;
	}

	.sl-application__card-photo {
		width: 132px;
		height: 99px;
	}
}

/* Phone: fields and buttons stacked. */
@media (max-width: 767px) {
	.sl-application {
		--sl-app-photo-h: 440px;
	}

	.sl .sl-application__credit {
		left: 20px;
		bottom: 20px;
		max-width: calc(100% - 40px);
	}

	.sl-application__panel {
		padding: var(--sl-pad-t, 40px) var(--sl-gutter) var(--sl-pad-b, 48px);
	}

	.sl-application__card {
		gap: 12px;
	}

	.sl-application__card-photo {
		width: 96px;
		height: 96px;
	}

	.sl-application__row {
		flex-direction: column;
	}

	.sl-application__row > .sl-application__field,
	.sl-application__row > .sl-application__item,
	.sl-application__row--trip > .sl-application__field--seats {
		flex: none;
	}

	.sl-application__buttons {
		flex-direction: column;
		align-items: flex-start;
	}
}