/* 联系与报价表单；Contact 编排覆盖须在本文件之后加载。 */

/*
   询盘表单与联系工作面板 */

.pattrix-inquiry-form {
	background: var(--pattrix-color-inverse);
	color: var(--pattrix-color-on-inverse);
}

.pattrix-inquiry-form h2,
.pattrix-inquiry-form p {
	color: inherit;
}

.pattrix-inquiry-form :where(a, button, input, select, textarea, summary):focus-visible {
	outline-color: var(--pattrix-color-on-inverse);
}

.pattrix-contact {
	background: var(--pattrix-color-bg);
	color: var(--pattrix-color-text);
	font-family: var(--wp--preset--font-family--sans);
}

.pattrix-contact-container {
	width: min(100% - 30px, 1400px);
	margin: 0 auto;
}

.pattrix-contact-form-section {
	padding: clamp(72px, 9vw, 132px) 0;
	background: var(--pattrix-color-bg);
}

.pattrix-contact-workspace {
	display: grid;
	grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
	gap: clamp(48px, 8vw, 144px);
	align-items: start;
}

.pattrix-contact-overview {
	display: grid;
	gap: 48px;
}

.pattrix-contact-intro h2 {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--section-title);
	font-weight: 500;
	line-height: 1.12;
}

.pattrix-contact-intro p {
	max-width: 480px;
	margin: 16px 0 0;
	color: var(--pattrix-color-text-muted);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.75;
}

.pattrix-contact-kicker,
.pattrix-contact-form-heading {
	margin: 0 0 16px;
	color: var(--pattrix-color-text-secondary);
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 600;
	letter-spacing: 0.08em;
}

.pattrix-contact-intro .pattrix-contact-response {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	margin-top: 24px;
	color: var(--pattrix-color-text);
	font-weight: 700;
}

.pattrix-contact-intro .pattrix-contact-response::before {
	display: block;
	width: 8px;
	height: 8px;
	flex: 0 0 8px;
	background: var(--pattrix-color-brand);
	border-radius: 50%;
	content: "";
}

.pattrix-contact-direct {
	display: grid;
	gap: 12px;
	padding-top: 24px;
	border-top: 1px solid var(--pattrix-color-border-strong);
}

.pattrix-contact-direct h3,
.pattrix-contact-direct p {
	margin: 0;
}

.pattrix-contact-direct h3 {
	font-size: var(--wp--preset--font-size--h-4);
	line-height: 1.3;
}

.pattrix-contact-direct p {
	max-width: 360px;
	color: var(--pattrix-color-text-secondary);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
}

.pattrix-contact-direct a {
	width: fit-content;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	color: var(--pattrix-color-text);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 4px;
}

.pattrix-contact-direct-link {
	gap: var(--wp--preset--spacing--20);
}

.pattrix-contact-direct-link .pattrix-ui-icon {
	--pattrix-icon-size: 18px;
	text-decoration: none;
}

.pattrix-contact-qr {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	margin-top: 12px;
	max-width: 390px;
}

.pattrix-contact-qr figure {
	min-width: 0;
	margin: 0;
}

.pattrix-contact-qr img {
	display: block;
	width: 100%;
	height: auto;
	background: #fff;
}

.pattrix-contact-form-panel {
	min-width: 0;
}

.pattrix-contact-form {
	margin-top: 28px;
	/* 联系入口的锚点需避开固定页头，防止表单开头被遮挡。 */
	scroll-margin-top: calc(var(--pattrix-header-height) + 24px);
}

/* 反垃圾字段必须在每个复用此表单的页面隐藏，不能依赖产品页专用样式。 */
.pattrix-inquiry-honeypot {
	position: absolute !important;
	left: -10000px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

.pattrix-contact-consent {
	display: inline-flex;
	align-items: flex-start;
	gap: 10px;
	color: var(--pattrix-color-text);
	font-size: 15.5px;
	line-height: 1.5;
	cursor: pointer;
}

.pattrix-contact-salutation input,
.pattrix-contact-consent input {
	flex: 0 0 16px;
	width: 16px;
	height: 16px;
	min-height: 16px;
	margin: 4px 0 0;
	accent-color: var(--pattrix-color-inverse);
}

.pattrix-contact-fields {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 38px;
	row-gap: 32px;
}

.pattrix-contact-field {
	display: grid;
	gap: 8px;
	min-width: 0;
}

.pattrix-contact-field--wide {
	grid-column: 1 / -1;
}

.pattrix-contact-contact-guide {
	grid-column: 1 / -1;
	margin: 4px 0 -14px;
	color: var(--pattrix-color-text);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: 1.5;
}

.pattrix-contact-field-control {
	position: relative;
	min-width: 0;
}

.pattrix-contact-field-label {
	position: absolute;
	z-index: 1;
	inset-block-start: 0;
	inset-inline-start: 0;
	color: var(--pattrix-color-text-muted);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.35;
	pointer-events: none;
	transform: translateY(21px);
	transform-origin: top left;
	transition: transform 0.4s var(--pattrix-ease-standard), color var(--pattrix-duration-fast) var(--pattrix-ease-standard);
}

.pattrix-contact-field input,
.pattrix-contact-field textarea {
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
	min-height: 48px;
	padding: 24px 0 8px;
	border: 0;
	border-bottom: 1px solid var(--pattrix-color-border-strong);
	border-radius: 0;
	background: var(--pattrix-color-bg);
	color: var(--pattrix-color-text);
	font: inherit;
	line-height: 1.5;
	transition: border-bottom-color var(--pattrix-duration-fast) var(--pattrix-ease-standard), box-shadow var(--pattrix-duration-fast) var(--pattrix-ease-standard);
}

.pattrix-contact-field textarea {
	min-height: 128px;
	padding-top: 28px;
	resize: vertical;
}

.pattrix-contact-field input:focus:not(:focus-visible),
.pattrix-contact-field textarea:focus:not(:focus-visible) {
	border-bottom-color: var(--pattrix-form-field-focus, var(--pattrix-color-inverse-mid));
	box-shadow: inset 0 -1px 0 var(--pattrix-form-field-focus, var(--pattrix-color-inverse-mid));
	outline: none;
}

.pattrix-contact-field input:focus-visible,
.pattrix-contact-field textarea:focus-visible {
	border-bottom-color: var(--pattrix-form-field-focus, var(--pattrix-color-inverse-mid));
	box-shadow: inset 0 -1px 0 var(--pattrix-form-field-focus, var(--pattrix-color-inverse-mid));
	outline: 2px solid var(--pattrix-form-field-focus, var(--pattrix-color-inverse-mid));
	outline-offset: 2px;
}

.pattrix-contact-field:is(:focus-within, .is-filled) .pattrix-contact-field-label {
	color: var(--pattrix-color-text);
	transform: translateY(0);
}

.pattrix-contact-field input[type="file"] {
	padding-top: 28px;
	font-size: var(--wp--preset--font-size--small);
}

.pattrix-contact-field input[type="file"]::file-selector-button {
	margin-right: 12px;
	padding: 7px 12px;
	border: 1px solid var(--pattrix-color-border-strong);
	border-radius: 999px;
	background: var(--pattrix-color-bg);
	color: var(--pattrix-color-text);
	font: inherit;
	cursor: pointer;
}

.pattrix-contact-field-hint {
	margin: 0;
	color: var(--pattrix-color-text-muted);
	font-size: var(--wp--preset--font-size--caption);
	line-height: 1.5;
}

.pattrix-contact-field :is(input, textarea)[aria-invalid="true"] {
	border-bottom-color: var(--pattrix-color-status-error);
	box-shadow: inset 0 -1px 0 var(--pattrix-color-status-error);
}

/*
   验证码

   验证码不可用时必须禁用输入并保留说明，不能静默提交。 */

.pattrix-contact-captcha {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: end;
	gap: 24px;
}

.pattrix-contact-captcha-refresh {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: 12px;
	min-height: 56px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--pattrix-color-text);
	font: inherit;
	font-size: var(--wp--preset--font-size--caption);
	line-height: 1.35;
	text-align: start;
	cursor: pointer;
}

.pattrix-contact-captcha-refresh img {
	display: block;
	width: 168px;
	height: 56px;
	border: 1px solid var(--pattrix-color-border-strong);
	background: var(--pattrix-color-surface);
	object-fit: cover;
}

.pattrix-contact-captcha-refresh:hover span {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.pattrix-contact-captcha-refresh:active img {
	transform: scale(0.985);
}

.pattrix-contact-captcha-refresh:focus-visible {
	outline: 2px solid var(--pattrix-color-inverse);
	outline-offset: 4px;
}

.pattrix-contact-captcha-refresh:disabled {
	color: var(--pattrix-color-text-muted);
	cursor: not-allowed;
	opacity: .65;
}

.pattrix-contact-captcha-field.has-error .pattrix-contact-field-label {
	color: var(--pattrix-color-status-error);
}

.pattrix-contact-consent-wrap {
	margin-top: 40px;
}

.pattrix-contact-consent {
	margin: 0;
}

.pattrix-contact-consent label {
	cursor: pointer;
}

.pattrix-contact-consent a {
	color: inherit;
	text-underline-offset: 3px;
}

.pattrix-contact-consent-error {
	margin: 8px 0 0;
	color: var(--pattrix-color-status-error);
	font-size: var(--wp--preset--font-size--caption);
	line-height: 1.45;
}

.pattrix-contact-consent-hint {
	margin: 8px 0 0;
	color: var(--pattrix-color-text-muted);
	font-size: var(--wp--preset--font-size--caption);
	line-height: 1.45;
}

.pattrix-contact-actions {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	margin-top: 24px;
}

/* 提交时刻的回复承诺紧挨提交按钮：高焦虑动作前最后一次确认，必须出现在同一视野内。 */
.pattrix-contact-response-note {
	margin: 0;
	color: var(--pattrix-color-text-secondary);
	font-size: var(--wp--preset--font-size--caption);
	line-height: 1.5;
}

.pattrix-contact-submit {
	min-width: 146px;
	min-height: 45px;
	padding: 12px 24px;
	border: 0;
	border-radius: 999px;
	background: var(--pattrix-color-inverse);
	color: var(--pattrix-color-on-inverse);
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	cursor: pointer;
	transition: background-color var(--pattrix-duration-fast) var(--pattrix-ease-standard), transform var(--pattrix-duration-fast) var(--pattrix-ease-standard);
}

.pattrix-contact-submit:hover {
	background: var(--pattrix-color-brand);
}

.pattrix-contact-submit:active {
	transform: scale(0.98);
}

.pattrix-contact-client-status {
	max-width: 62ch;
	margin: 0;
	color: var(--pattrix-color-text-secondary);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.55;
}

.pattrix-contact-client-status.is-error {
	color: var(--pattrix-color-status-error);
}

.pattrix-contact-client-status.is-success {
	color: var(--pattrix-color-status-success);
}

.pattrix-contact-status {
	margin: 0;
	color: var(--pattrix-color-text-muted);
	font-size: var(--wp--preset--font-size--caption);
}

.pattrix-contact-submit:disabled {
	border: 1px solid var(--pattrix-color-border-strong);
	background: transparent;
	color: var(--pattrix-color-text-muted);
	cursor: not-allowed;
	opacity: 1;
	transform: none;
}

.pattrix-contact-form[aria-busy="true"] .pattrix-contact-submit:disabled {
	cursor: wait;
	opacity: .65;
}

.pattrix-contact-form[aria-busy="true"] .pattrix-contact-submit {
	position: relative;
	padding-inline-end: 48px;
}

.pattrix-contact-form[aria-busy="true"] .pattrix-contact-submit::after {
	position: absolute;
	inset-inline-end: 16px;
	width: 16px;
	height: 16px;
	border: 2px solid color-mix(in srgb, var(--pattrix-color-on-inverse) 42%, transparent);
	border-top-color: var(--pattrix-color-on-inverse);
	border-radius: 50%;
	content: "";
	animation: pattrix-contact-spinner 700ms linear infinite;
}

@keyframes pattrix-contact-spinner {
	to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
	.pattrix-contact-form[aria-busy="true"] .pattrix-contact-submit::after { animation: none; }
}

/*
   报价请求页

   报价页复用联系表单字段身份，避免两套字段映射。 */

.pattrix-request-quote {
	background: var(--pattrix-color-bg);
	color: var(--pattrix-color-text);
}

.pattrix-request-quote-section {
	padding: clamp(72px, 9vw, 132px) 0;
}

.pattrix-request-quote-container {
	width: min(calc(100% - 48px), 1120px);
	margin: 0 auto;
}

.pattrix-request-quote .pattrix-contact-form {
	margin-top: 64px;
}
.pattrix-contact-trust {
	padding: clamp(48px, 5vw, 64px) 0;
	border-top: 1px solid var(--pattrix-color-border);
	background: var(--pattrix-color-surface-strong);
}

.pattrix-contact-trust-inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--40);
	align-items: center;
}

.pattrix-contact-trust-inner--facts {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
	gap: clamp(32px, 4vw, 64px);
}

.pattrix-contact-trust-intro {
	display: grid;
	gap: var(--wp--preset--spacing--20);
}

.pattrix-contact-trust-intro .pattrix-contact-trust-label {
	margin: 0;
	color: var(--pattrix-color-text);
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.pattrix-contact-trust-intro p {
	margin: 0;
	color: var(--pattrix-color-text-secondary);
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.6;
	max-width: 50ch;
}

.pattrix-contact-trust-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	width: fit-content;
	margin-top: 4px;
	color: var(--pattrix-color-interaction);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	text-decoration: none;
}

.pattrix-contact-trust-link:hover {
	color: var(--pattrix-color-text);
}

.pattrix-contact-trust-link:focus-visible {
	outline: 2px solid var(--pattrix-color-focus, var(--pattrix-color-interaction));
	outline-offset: 3px;
}

/* 三格事实：数字加大到 h2、去除顶线改为列间细竖线，更有秩序感。 */
.pattrix-contact-trust-facts {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pattrix-contact-trust-facts li {
	position: relative;
	min-width: 0;
	padding: 0 var(--wp--preset--spacing--30);
	border-left: 1px solid var(--pattrix-color-border-strong);
}

.pattrix-contact-trust-facts li:first-child {
	border-left: 0;
	padding-left: 0;
}

.pattrix-contact-trust-facts strong {
	display: block;
	color: var(--pattrix-color-text);
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(32px, 3.2vw, 44px);
	font-weight: 600;
	line-height: 1.1;
}

.pattrix-contact-trust-facts span {
	display: block;
	margin-top: 8px;
	color: var(--pattrix-color-text-secondary);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.4;
}

@media (prefers-reduced-motion: reduce) {
	.pattrix-contact-field-label,
	.pattrix-contact-field :is(input, textarea),
	.pattrix-contact-captcha-refresh img,
	.pattrix-contact-submit {
		transition-duration: 0.01ms;
	}
}

@media (max-width: 767px) {
	.pattrix-contact-form-section { padding: 48px 0 64px; }
	.pattrix-contact-workspace { grid-template-columns: minmax(0, 1fr); gap: 48px; }
	.pattrix-contact-overview { gap: 32px; }
	.pattrix-contact-intro p { margin-top: 12px; line-height: 1.75; }
	.pattrix-contact-form { margin-top: 24px; }
	.pattrix-contact-fields { grid-template-columns: minmax(0, 1fr); row-gap: 26px; }
	.pattrix-contact-field--wide { grid-column: auto; }
	.pattrix-contact-contact-guide { grid-column: auto; margin-bottom: -10px; }
	.pattrix-contact-field { min-height: auto; }
	.pattrix-contact-field input,
	.pattrix-contact-field textarea { min-height: 59px; padding-top: 26px; }
	.pattrix-contact-field textarea { min-height: 96px; }
	.pattrix-contact-captcha { gap: 16px; }
	.pattrix-contact-captcha-refresh { grid-template-columns: auto; gap: 6px; }
	.pattrix-contact-captcha-refresh span { text-align: center; }
	.pattrix-contact-consent-wrap { margin-top: 32px; }
	.pattrix-contact-consent { align-items: flex-start; }
	.pattrix-contact-actions { margin-top: 16px; display: block; }
	.pattrix-contact-status { margin-top: 12px; }
	.pattrix-contact-submit { min-width: 131px; min-height: 44px; padding: 10px 20px; }
	.pattrix-contact-trust { padding: var(--wp--preset--spacing--50) 0; }
	.pattrix-contact-trust-inner, .pattrix-contact-trust-inner--facts { grid-template-columns: minmax(0, 1fr); gap: var(--wp--preset--spacing--40); }
	.pattrix-contact-trust-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
	.pattrix-contact-trust-facts li { padding: 0 var(--wp--preset--spacing--20); border-left: 1px solid var(--pattrix-color-border-strong); }
	.pattrix-contact-trust-facts li:first-child { border-left: 0; padding-left: 0; }
	.pattrix-contact-trust-facts strong { font-size: 28px; }
	.pattrix-contact-trust-facts span { font-size: var(--wp--preset--font-size--caption); margin-top: 4px; }
	.pattrix-request-quote-container { width: min(100% - 32px, 560px); }
	.pattrix-request-quote .pattrix-contact-form { margin-top: 44px; }
}

@media (max-width: 420px) {
	.pattrix-contact-captcha { grid-template-columns: minmax(0, 1fr); align-items: start; }
	.pattrix-contact-captcha-refresh { grid-template-columns: auto minmax(0, 1fr); justify-self: start; }
	.pattrix-contact-captcha-refresh span { text-align: start; }
	.pattrix-contact-actions { display: block; }
	.pattrix-contact-submit { width: 100%; }
}