@import "design-tokens.less";

/* Leads / inquiries (info.html) — overrides bundled /info/css/index14a4fa2c.css */

#main {
	min-height: 100vh;
	background: @home-bg;
	box-sizing: border-box;
}

.info_form {
	width: 100%;
	max-width: 64rem;
	margin: 0 auto;
	margin-top: 0 !important;
	padding: calc(@header-height-desktop + 2.4rem) 1.6rem 9.6rem;
	box-sizing: border-box;
	overflow: visible;

	.form_content {
		width: 100%;
		margin: 0;
		overflow: visible;
		.form-page-card();
		padding: 2.4rem 2.8rem 2rem;
	}

	.form_main {
		margin-top: 0;
		overflow: visible;

		.subtitle {
			font-family: 'Gotham-pro-reg', sans-serif;
			font-size: @form-body-desktop;
			line-height: 1.6;
			color: @color-ink-muted;
			margin-bottom: 2.4rem;
		}

		.form-group {
			position: relative;
			margin-bottom: 1.6rem;

			.form-control {
				display: block;
				width: 100%;
				height: auto;
				min-height: 4.8rem;
				padding: 1rem 2.4rem 1rem 1.6rem;
				font-family: 'Gotham-pro-reg', sans-serif;
				font-size: @form-input-desktop;
				font-weight: 400;
				line-height: 1.4;
				color: @color-ink;
				border-radius: 0.8rem;
				.form-page-field();
			}

			.leaveMessage {
				height: auto !important;
				min-height: 12rem;
				line-height: 1.55;
				padding: 1.2rem 2.4rem 1.2rem 1.6rem;
				resize: vertical;
			}

			.select-view {
				position: relative;
				width: 100%;

				.form-control {
					padding-right: 3.2rem;
				}

				&:after {
					top: 50%;
					right: 1.4rem;
					transform: translateY(-50%);
					pointer-events: none;
				}
			}

			.form-text {
				display: block;
				height: auto;
				min-height: 0;
				margin: 0.5rem 0 0;
				padding: 0;
				font-size: @form-helper-desktop;
				line-height: 1.45;
				color: @color-ink-muted;
				opacity: 1;
			}

			.form-require {
				position: absolute;
				right: 1rem;
				top: 0;
				bottom: auto;
				height: 4.8rem;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: @form-label-desktop;
				line-height: 1;
				color: #d21c1c;
				pointer-events: none;
			}

			&:has(.leaveMessage) .form-require {
				height: auto;
				align-items: flex-start;
				padding-top: 1.2rem;
			}
		}
	}
}

.btn_container {
	left: 0;
	right: 0;
	width: 100%;
	padding: 1.2rem 1.6rem;
	padding-bottom: ~"max(1.2rem, env(safe-area-inset-bottom, 0px))";
	box-shadow: 0 -0.2rem 1.2rem rgba(15, 23, 42, 0.08);
	border-top: 1px solid rgba(15, 23, 42, 0.06);
	z-index: 20;
	box-sizing: border-box;

	.btn {
		width: 100%;
		max-width: 64rem;
		height: auto;
		min-height: 5.2rem;
		margin: 0 auto;
		padding: 1.2rem 2rem;
		font-size: @form-btn-desktop;
		line-height: 1.3;
		border-radius: @radius-pill;
		.form-page-primary-btn();

		&:disabled {
			background: rgba(31, 148, 210, 0.45);
			border-color: transparent;
			opacity: 1;
		}
	}
}

.alert {
	width: ~"min(52rem, calc(100% - 3.2rem))";
	max-width: 52rem;
	height: auto;
	max-height: ~"min(90vh, 100%)";
	margin: 0;
	top: 50%;
	left: 50%;
	right: auto;
	bottom: auto;
	transform: translate(-50%, -50%);
	padding: 2.4rem 1.6rem 2rem;
	border-radius: 1.2rem;
	box-shadow: 0 1.2rem 4rem rgba(15, 23, 42, 0.18);
	overflow-y: auto;
	box-sizing: border-box;
	font-size: @form-body-desktop;
	line-height: 1.5;

	p {
		width: 100%;
		max-width: 40rem;
		margin: 0 auto;
		color: @color-brand;
		font-size: @form-body-desktop;
		line-height: 1.55;
	}

	.btn_group {
		width: 100%;
		max-width: 40rem;
		height: auto;
		margin: 1.6rem auto 0;
		gap: 0.8rem;
		justify-content: flex-start;

		a {
			display: block;
			width: 100%;
			text-decoration: none;
		}

		.btn {
			width: 100%;
			height: auto;
			min-height: 4.4rem;
			padding: 1rem 1.4rem;
			font-size: @form-label-desktop;
			line-height: 1.35;
			white-space: normal;
			border-radius: @radius-pill;
			.form-page-primary-btn();
		}
	}

	.alert-close-button {
		width: 4.4rem;
		height: 4.4rem;
		font-size: 1.8rem;
		top: 0.8rem;
		right: 0.8rem;
	}
}

.alert_show {
	transform: translate(-50%, -50%) scale(1, 1);
}

.alert_hide {
	transform: translate(-50%, -50%) scale(0.92, 0.92);
}

/* 手机端（≤990px） */
@media screen and (max-width: @bp-mobile) {
	.info_form {
		width: 100%;
		max-width: 100%;
		padding: calc(@header-height-mobile + 1.6rem) 1.6rem 8.8rem;

		.form_content {
			padding: 1.6rem 1.4rem 1.2rem;
			border-radius: 1.2rem;
		}

		.form_main .subtitle {
			font-size: @form-body-mobile;
			line-height: 1.55;
			margin-bottom: 1.6rem;
		}

		.form_main .form-group {
			margin-bottom: 1.2rem;

			.form-control {
				min-height: 4.4rem;
				padding: 1rem 2.2rem 1rem 1.2rem;
				font-size: 1.6rem;
			}

			.leaveMessage {
				min-height: 10rem;
				padding: 1rem 2.2rem 1rem 1.2rem;
			}

			.form-require {
				height: 4.4rem;
				right: 0.8rem;
				font-size: @form-label-mobile;
			}

			&:has(.leaveMessage) .form-require {
				padding-top: 1rem;
			}

			.form-text {
				font-size: @form-helper-mobile;
			}
		}
	}

	.btn_container {
		padding: 1rem 1.6rem;
		padding-bottom: ~"max(1rem, env(safe-area-inset-bottom, 0px))";

		.btn {
			min-height: 4.8rem;
			font-size: @form-btn-mobile;
		}
	}

	.alert {
		width: ~"min(100%, calc(100vw - 2.4rem))";
		padding: 2rem 1.4rem 1.6rem;
		font-size: @form-body-mobile;

		p {
			font-size: @form-body-mobile;
		}

		.btn_group .btn {
			min-height: 4.4rem;
			font-size: @form-label-mobile;
			padding: 0.9rem 1.2rem;
		}
	}
}