@charset "utf-8";
/* ==========================================================================
   KONGKIM 询盘表单（Contact Form 7 · ID 19）样式 —— v2 现代化改版
   --------------------------------------------------------------------------
   背景（v1）：
     迁移前，页脚/内页的询盘表单由厂商 form.js 以 iframe 渲染（内容来自
     form.globalso.com），样式全部存在于厂商 SaaS 内部。迁移后表单改为站点
     自带的 Contact Form 7（短代码 id="19"），而配套的 /style/public/theme.css
     从未被 header.php 引用过，表单一度以浏览器默认外观输出。
     v1 把厂商 theme.css 里的同名段落抄了回来 —— 能用，但那是 2010 年代的
     外观：灰边直角线框 + 31px 矮输入框 + 黄色渐变按钮，与站点品牌红完全不搭。

   v2 做了什么：
     1) 通用字段：44px 高、圆角 10px、浅灰底 + 极浅描边，focus 时品牌红描边
        + 柔光；输入框统一整宽（原厂 50% 宽在窄容器里会挤掉占位符）
     2) 提交按钮：从黄色渐变改为品牌红实心圆角按钮（与站点主色、联系面板一致）
     3) 页脚（深色 #373737 背景）：表单整体做成一张**白色圆角卡片**，
        在深色页脚上成为清晰的转化焦点
     4) CF7 提交反馈（成功 / 校验失败）提示条保留并统一配色
     5) 移动端：字段加高到 48px、字号 15px，符合触控目标尺寸
     6) 字段栅格改为**纯内在自适应**（flex 45% + min-width 200px）：窄容器
        （页脚 297px）自动单列撑满，宽容器（内页 1144px）自动两列。
        不用媒体查询，所以页脚窄栏在宽屏上也不会被误判成"桌面 → 两列"。
     7) 隐藏原厂的装饰信封 `.inquiry-form-ico` —— 表单没有标题，这个图标
        只会压在第一个输入框右端上。同理隐藏 CF7 的 `refer` 隐藏字段
        （裸 `.none` 会被 `input[type=text]{display:block}` 盖掉）。
     8) 解除主题给 `.inquiry-form-wrap` 钉死的 `height:420px`（嵌 iframe 时代
        的遗留），并给页脚弹窗 `.inquiry-pop` 补圆角 / 投影。

   引用位置：wp-content/themes/global/header.php（style/public/public.css 之后）
   改这个文件不需要清语言页缓存（CSS 是外链，改动即时生效）。
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. 通用：面板与字段
   --------------------------------------------------------------------------- */
/* 主题 style.css 把 .inquiry-form-wrap 钉死在 height:420px（那是当年嵌厂商
   iframe 留下的），表单内容一变高就被裁掉，这里改成自适应。 */
.inquiry-form-wrap { position: relative; width: 100%; height: auto !important; }

.inquiry-form {
	position: relative;
	padding: 24px 28px 28px;
	border: 1px solid #e8eaee;
	border-radius: 16px;
	background: #fff;
}

/* 右上角装饰图标（原厂的线条信封）：表单本身没有标题，这个图标只会压在
   第一个输入框的右端上，纯干扰 —— 直接隐藏。 */
.inquiry-form .inquiry-form-ico { display: none !important; }

.inquiry-form .inquiry-form-title { font-size: 14px; font-weight: normal; line-height: 20px; }

/* --- 字段栅格：纯内在自适应，不用媒体查询 ---
   repeat(auto-fit, minmax(min(300px,100%), 1fr)) 的效果：
     · 页脚窄栏（内容宽 297px）→ 1 列，字段撑满整宽
     · 内页宽栏（内容宽 1144px）→ 3 列，Name / Email / Phone 一行，每个约 372px
     · 中间尺寸（如 700px）→ 自动 2 列
   用 min(300px, 100%) 而不是裸 300px，是为了保证容器窄于 300px 时轨道
   跟着容器缩，不会横向溢出。留言框用 grid-column 强制独占整行。 */
.inquiry-form ul {
	display: -ms-grid; display: grid;
	-ms-grid-columns: 1fr;
	grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
	gap: 0 14px;
	margin: 0; padding: 0;
	list-style: none;
}
.inquiry-form .form-item {
	display: block;
	min-width: 0;
	margin: 0 0 12px;
}
/* 留言框独占整行（refer 隐藏字段是 ul 的直接子元素，不是 li，不受影响） */
.inquiry-form ul > li.form-item:last-of-type { grid-column: 1 / -1; }

/* --- 单行输入框：整宽、44px、圆角浅灰底 --- */
.inquiry-form .form-input,
.inquiry-form input[type="text"],
.inquiry-form input[type="email"] {
	position: relative;
	display: block;
	width: 100%;
	height: 44px;
	line-height: 44px;
	margin: 0;
	padding: 0 14px 0 40px;
	border: 1px solid #e8eaee;
	border-radius: 10px;
	background-color: #f7f8fa;
	color: #14161a;
	font-size: 14px;
	font-family: inherit;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-appearance: none;
	transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}
.inquiry-form .form-input:hover,
.inquiry-form input[type="text"]:hover,
.inquiry-form input[type="email"]:hover { border-color: #d8dce3; }

.inquiry-form .form-input:focus,
.inquiry-form input[type="text"]:focus,
.inquiry-form input[type="email"]:focus,
.inquiry-form textarea:focus {
	outline: none;
	border-color: #e5011a;
	background-color: #fff;
	box-shadow: 0 0 0 3px rgba(229, 1, 26, .12);
}

.inquiry-form input::-webkit-input-placeholder,
.inquiry-form textarea::-webkit-input-placeholder { color: #9aa1ad; }
.inquiry-form input:-ms-input-placeholder,
.inquiry-form textarea:-ms-input-placeholder { color: #9aa1ad; }
.inquiry-form input::placeholder,
.inquiry-form textarea::placeholder { color: #9aa1ad; }

/* --- 左侧字段图标（沿用站点既有 inq04/05/06.png，只调位置） ---
   注意：这里**只能用 background-image 长写**，不能用 background 简写。
   简写会一并重置 background-color，而带 input[type=...] 的图标规则
   （0,3,1）优先级高于 `.inquiry-form .form-input-name:focus`（0,3,0），
   会把 :focus 的白底整个吃掉 —— 之前就是这么踩的。 */
.inquiry-form .form-input-name,
.inquiry-form input[type="text"].form-input-name {
	padding-left: 40px;
	background-image: url(img/inq04.png);
	background-repeat: no-repeat;
	background-position: 15px 50%;
}
.inquiry-form .form-input-email,
.inquiry-form input[type="text"].form-input-email,
.inquiry-form input[type="email"].form-input-email {
	padding-left: 40px;
	background-image: url(img/inq05.png);
	background-repeat: no-repeat;
	background-position: 15px 50%;
}
.inquiry-form .form-input-phone,
.inquiry-form input[type="text"].form-input-phone {
	padding-left: 40px;
	background-image: url(img/inq06.png);
	background-repeat: no-repeat;
	background-position: 15px 50%;
}

/* --- 多行留言 --- */
.inquiry-form .form-text,
.inquiry-form textarea {
	position: relative;
	display: block;
	width: 100% !important;
	height: 112px;
	line-height: 1.65;
	margin: 0 !important;
	padding: 12px 14px !important;
	border: 1px solid #e8eaee;
	border-radius: 10px;
	background-color: #f7f8fa;
	color: #14161a;
	font-size: 14px;
	font-family: inherit;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	resize: vertical;
	transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}
.inquiry-form .form-text:hover,
.inquiry-form textarea:hover { border-color: #d8dce3; }
.inquiry-form textarea:focus { background-color: #fff; }

/* ---------------------------------------------------------------------------
   2. 提交按钮：品牌红实心圆角（替换原来的黄色渐变）
   --------------------------------------------------------------------------- */
.inquiry-form .form-btn-wrapx {
	position: relative !important;
	width: 100%; height: auto !important;
	padding-left: 0; margin-top: 16px;
	text-align: right; z-index: 99;
}
.inquiry-form .form-btn-wrapx .form-btn-submitx {
	position: static !important; top: auto; right: auto; left: auto;
	display: inline-block; vertical-align: top;
	height: 46px; line-height: 46px;
	padding: 0 32px;
	border: 0; border-radius: 11px;
	background: #e5011a;
	color: #fff;
	font-size: 14px; font-weight: 600; letter-spacing: .04em;
	text-shadow: none;
	cursor: pointer;
	-webkit-appearance: none;
	box-shadow: 0 8px 20px rgba(229, 1, 26, .24);
	transition: background .18s ease, box-shadow .18s ease, transform .12s ease;
}
.inquiry-form .form-btn-wrapx .form-btn-submitx:hover {
	background: #c40016;
	box-shadow: 0 10px 26px rgba(229, 1, 26, .32);
}
.inquiry-form .form-btn-wrapx .form-btn-submitx:active { transform: scale(.985); }
.inquiry-form .form-btn-wrapx .form-btn-submitx:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(229, 1, 26, .22), 0 8px 20px rgba(229, 1, 26, .24);
}

.inquiry-form .Validform_checktip { display: block; width: 100%; margin: 2px 0 6px; }
.inquiry-form .Validform_wrong { font-size: 12px; font-weight: bold; color: #da3439; }

/* CF7 隐藏字段（refer）必须隐藏。
   注意必须带 .inquiry-form 前缀 + !important：上面 `input[type="text"]`
   规则里的 display:block（0,3,1）会盖掉裸 `.none`（0,1,0），
   否则表单里会多出一个 44px 高的空输入框。 */
.inquiry-form-wrap .none,
.inquiry-form .none,
.inquiry-form input.none { display: none !important; }

/* ---------------------------------------------------------------------------
   3. 页脚右列：深色背景上的白色卡片
   --------------------------------------------------------------------------- */
.foot_item_follow .inquiry-form-wrap { width: 100% !important; }

.foot_item_follow .inquiry-form {
	padding: 22px 20px 22px;
	border: 0;
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 12px 34px rgba(0, 0, 0, .22);
}

/* 窄栏里按钮整宽，比右对齐的小按钮好点得多 */
.foot_item_follow .inquiry-form .form-btn-wrapx { text-align: left; margin-top: 14px; }
.foot_item_follow .inquiry-form .form-btn-wrapx .form-btn-submitx {
	display: block; width: 100%; padding: 0;
}

/* ---------------------------------------------------------------------------
   3b. 弹窗（footer.php 里的 .inquiry-pop-bd / .inquiry-pop，内嵌同一个 CF7 表单）
   主题给的是直角白盒 + 极弱阴影；这里补圆角与投影，并把表单卡片的多余边框
   去掉 —— 弹窗本身已经是白色面板，再套一层白底描边卡片是重复的。
   --------------------------------------------------------------------------- */
.inquiry-pop-bd { border-radius: 16px; box-shadow: 0 24px 64px rgba(0, 0, 0, .28); }
.inquiry-pop-bd .inquiry-pop { border-radius: 16px; }
.inquiry-pop-bd .inquiry-pop .inquiry-form {
	padding: 0; border: 0; border-radius: 0; background: transparent;
}

/* ---------------------------------------------------------------------------
   4. CF7 提交反馈
   CF7 自带的前端样式（wpcf7.css）在本站并未加载，这里给出成功 / 校验失败的
   提示条。
   ⚠️ 选择器不能写成 `.inquiry-form-wrap .wpcf7-response-output`：这个提示条
   是 `.inquiry-form-wrap` 的**兄弟节点**（两者的父节点都是 `form.wpcf7-form`），
   不在 wrap 里面，写错就完全命不中。所以统一挂在 `.wpcf7-form` 下面。
   ⚠️ 本站 **也没有加载 wpcf7.js**，表单走的是 CF7 的非 JS 回退路径
   （整页 POST + 服务端校验），`.wpcf7-display-none` 这个类必须自己兜住。
   --------------------------------------------------------------------------- */
.wpcf7-form .wpcf7-response-output.wpcf7-display-none,
.wpcf7-form .wpcf7-response-output:empty { display: none !important; }

.wpcf7-form .wpcf7-response-output {
	margin: 14px 0 0; padding: 11px 14px;
	border: 1px solid #e8eaee; border-left: 3px solid #9aa1ad;
	border-radius: 10px;
	background: #f7f8fa; color: #333;
	font-size: 13px; line-height: 1.6;
}
.wpcf7-form .wpcf7-response-output.wpcf7-mail-sent-ok {
	border-color: #c3eed4; border-left-color: #22a35a;
	background: #f1f9f2; color: #1b5e20;
}
.wpcf7-form .wpcf7-response-output.wpcf7-validation-errors {
	border-color: #f6d0d4; border-left-color: #da3439;
	background: #fdf2f2; color: #b3261e;
}
.wpcf7-form .wpcf7-not-valid-tip {
	display: block; margin: 6px 0 0; color: #da3439;
	font-size: 12px; line-height: 1.5;
}
.inquiry-form .wpcf7-not-valid { border-color: #da3439 !important; }

/* ---------------------------------------------------------------------------
   5. 移动端
   --------------------------------------------------------------------------- */
@media screen and (max-width: 768px) {
	.inquiry-form { padding: 20px 16px 22px; border-radius: 14px; }

	/* 移动端一律单列：横屏或大屏手机上也别分栏 */
	.inquiry-form ul { display: block; }

	/* 触控目标：字段加高到 48px */
	.inquiry-form .form-input,
	.inquiry-form input[type="text"],
	.inquiry-form input[type="email"] { height: 48px; line-height: 48px; font-size: 15px; }

	.inquiry-form .form-text,
	.inquiry-form textarea { height: 120px; font-size: 15px; }

	.inquiry-form .form-btn-wrapx { width: 100%; }
	.inquiry-form .form-btn-wrapx .form-btn-submitx { height: 48px; line-height: 48px; font-size: 15px; }

	.foot_item_follow .inquiry-form { padding: 20px 16px; }
}