/**
 * Casa Terra Closing (Figma Home "V11 Closing · Plan your stay" 7:764), ported from the Canopy
 * Closing. Desktop: the photo fills the section and the cream panel (600 wide, radius 16) sits
 * on its right, lined up with the container. Tablet and phone: the photo as a band (440 / 300),
 * then the panel's content on the section background. The stay form: Villa full width, Dates
 * and Guests side by side (stacked on phones), then "Send your dates"; the FAQ under it.
 */

.ct-closing {
	position: relative;
	background: var(--ct-bg);
}

.ct-closing__media {
	position: absolute;
	inset: 0;
	overflow: hidden;
	background: var(--ct-c-line);
}

.ct .ct-closing__media img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

.ct-closing__stage {
	position: relative;
	display: flex;
	justify-content: flex-end;
	padding-top: var(--ct-pad-t, 48px);
	padding-bottom: var(--ct-pad-b, 48px);
}

.ct-closing__panel {
	width: 600px;
	max-width: 100%;
	padding: 48px 48px 40px;
	border-radius: var(--ct-radius-panel);
	background: var(--ct-bg);
}

.ct-closing__body {
	min-width: 0;
}

.ct-closing .ct-closing__text {
	margin-top: 8px;
	color: var(--ct-muted);
}

.ct-closing__form {
	margin-top: 24px;
}

/* Villa full width; Dates and Guests side by side; the button full width. */
.ct-closing__fields {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

.ct-closing__field--villa,
.ct-closing__submit,
.ct-closing__note {
	grid-column: 1 / -1;
}

.ct-closing__submit {
	margin-top: 8px;
}

/* Boxed fields: label above, the value in a 48 high paper box. */
.ct-closing .ct-closing__field {
	display: block;
}

.ct-closing .ct-closing__field .ct-book-field__label {
	color: var(--ct-text);
	font-size: var(--ct-fs-small);
	line-height: var(--ct-lh-small);
	font-weight: 400;
	text-transform: none;
}

.ct-closing .ct-closing__field .ct-book-field__value {
	display: flex;
	align-items: center;
	min-height: 48px;
	margin-top: 8px;
	padding: 0 12px;
	border: 1px solid var(--ct-c-line);
	border-radius: var(--ct-radius-control);
	background: var(--ct-c-paper);
	font-weight: 400;
}

.ct-closing .ct-closing__field:focus-within .ct-book-field__value {
	border-color: var(--ct-c-earth);
}

.ct-closing__faq,
.ct-closing__actions {
	margin-top: 32px;
}

.ct-closing__body > :first-child {
	margin-top: 0;
}

@media (max-width: 1024px) {
	.ct-closing__media {
		position: relative;
		inset: auto;
		height: 440px;
	}

	.ct-closing__stage {
		padding-top: var(--ct-pad-t, 40px);
		padding-bottom: var(--ct-pad-b, 40px);
	}

	.ct-closing__panel {
		width: 100%;
		padding: 0;
		border-radius: 0;
		background: transparent;
	}
}

@media (max-width: 767px) {
	.ct-closing__media {
		height: 300px;
	}

	.ct-closing__stage {
		padding-bottom: var(--ct-pad-b, 32px);
	}

	.ct-closing__fields {
		grid-template-columns: minmax(0, 1fr);
	}
}