/*!
 * Entrava Inquiry — 前台样式（P3）
 *
 * 约定：
 *   · 所有选择器都用 `eiq-` 前缀或 `#entrava-inquiry` 限定，不碰主题的通用标签，
 *     也不给 `body` 打裸样式（子主题 C-W 类坑：unlayered 的 body 会盖掉后台）。
 *   · 颜色优先取主题变量（--e-brand / --e-ink / --e-line），取不到就用自带回退值，
 *     这样一个插件能复用到不同配色的站。
 *   · 弹窗用原生 <dialog>：::backdrop 做遮罩，不引入任何 JS 库（方案 §5.4 CWV）。
 */

/*
 * 品牌色令牌桥接（2026-11-02，插件 v1.2.2）。
 *
 * 本插件统一用 `--e-brand`，但**父主题只提供 `--theme-color`**；
 * 子主题的 `--e-brand` 定义在 `.entrava-single`（产品详情页）作用域里，
 * 别的页面取不到 → 全部退回兜底棕色 #b45309。
 * 症状：/request-a-quote/ 上「模块按钮是橙色 #ff6200、表单按钮是棕色」，
 * 同一页出现两种主色（C60 老坑，别再写死品牌色）。
 */
:root{--e-brand:var(--theme-color,#b45309)}

#entrava-inquiry.eiq-dialog{
	width:min(560px,calc(100vw - 32px));
	max-height:min(88vh,820px);
	padding:0;border:0;border-radius:18px;overflow:auto;
	background:#fff;color:#211d1a;
	box-shadow:0 24px 70px rgba(12,10,9,.28),0 2px 8px rgba(12,10,9,.12);
	font-size:15px;line-height:1.6;
}

#entrava-inquiry.eiq-dialog::backdrop{
	background:rgba(12,10,9,.55);
	backdrop-filter:blur(2px);
	-webkit-backdrop-filter:blur(2px);
}

#entrava-inquiry.eiq-dialog:not([open]){display:none}

/*
 * 宽屏 = 右侧抽屉，窄屏 = 居中卡片（2026-11-02 客户拍板，见方案 §5.2）。
 *
 * 为什么宽屏要抽屉：产品页首屏左图右文，居中弹窗正好压在图上；
 * 抽屉贴右全高，产品图与规格基本不被挡，买家能「边看边填」。
 *
 * 实现上只换定位，DOM / JS / 提交逻辑一行不动 —— 同一份 `<dialog>`，
 * 靠 UA 默认的 `position:fixed; inset:0`，把 `margin:auto` 改成 `margin-left:auto`
 * 就贴到右边，再把高度撑满视口。
 */
@media (min-width:901px){
	#entrava-inquiry.eiq-dialog{
		width:min(520px,calc(100vw - 40px));
		height:100dvh;max-height:100dvh;
		margin:0 0 0 auto;
		border-radius:16px 0 0 16px;
		animation:eiq-drawer-in .24s ease-out;
	}

	#entrava-inquiry.eiq-dialog::backdrop{background:rgba(12,10,9,.42)}

	#entrava-inquiry .eiq-dialog-inner{padding:30px 30px 24px}
}

@keyframes eiq-drawer-in{from{transform:translateX(60px);opacity:.55}to{transform:none;opacity:1}}

@media (prefers-reduced-motion:reduce){
	#entrava-inquiry.eiq-dialog{animation:none}
}

.eiq-dialog-inner{position:relative;padding:26px 26px 20px}

/* 关闭按钮：不吃 tab 顺序的噪声，但可见、可点、有 aria-label */
#entrava-inquiry .eiq-close{
	position:absolute;top:12px;right:12px;
	width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;
	border:0;border-radius:50%;background:rgba(20,16,13,.06);color:#4a4238;
	font-size:20px;line-height:1;cursor:pointer;transition:background .15s;
}
#entrava-inquiry .eiq-close:hover{background:rgba(20,16,13,.12)}

.eiq-dialog-head{padding-right:36px;margin-bottom:16px}
.eiq-dialog-title{
	margin:0;font-size:20px;line-height:1.3;font-weight:800;letter-spacing:-.01em;color:#1b1714;
}
.eiq-dialog-model{color:var(--e-brand,#b45309)}
.eiq-dialog-sub{margin:6px 0 0;font-size:13px;color:#7a7169}

/* ---------- 表单栅格 ---------- */
.eiq-form{display:block}
.eiq-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px}
.eiq-field{min-width:0}
.eiq-field--full{grid-column:1/-1}

@media (max-width:560px){
	.eiq-grid{grid-template-columns:1fr}
}

.eiq-label{
	display:block;margin-bottom:5px;font-size:12.5px;font-weight:600;color:#4a4238;
}

/*
 * 控件样式锚在 `.eiq-form .eiq-field` 上 —— **不能**锚 `.eiq-inline` 或 `#entrava-inquiry`。
 *
 * 2026-11-02 踩过：一开始把两组作用域并列写成 `.eiq-inline .eiq-form …` 与
 * `#entrava-inquiry .eiq-form …`，结果**主题模板里的内联区完全不匹配** ——
 * `.eiq-inline` 只有短代码 `[entrava_inquiry]` 才输出，而主题的
 * `templates/products-part/inquiry-inline.php` 外层是 `.entrava-single-inquiry`。
 * 症状：网格是对的，但输入框退回浏览器默认宽度（约 150px），看着像「CSS 没生效」。
 * 教训：作用域要挂在**每份表单都有的类**（.eiq-form / .eiq-field）上，不要挂在
 * 「只有某一个入口才有的包装类」上。
 */
.eiq-form .eiq-field input[type="text"],
.eiq-form .eiq-field input[type="email"],
.eiq-form .eiq-field input[type="tel"],
.eiq-form .eiq-field input[type="number"],
.eiq-form .eiq-field input[type="url"],
.eiq-form .eiq-field select,
.eiq-form .eiq-field textarea{
	display:block;width:100%;box-sizing:border-box;
	padding:10px 12px;border:1px solid rgba(20,16,13,.16);border-radius:10px;
	background:#fff;color:#211d1a;font-size:14px;line-height:1.5;
	transition:border-color .15s,box-shadow .15s;
}
.eiq-form .eiq-field textarea{resize:vertical;min-height:92px}

.eiq-form .eiq-field input:focus,
.eiq-form .eiq-field select:focus,
.eiq-form .eiq-field textarea:focus{
	outline:0;border-color:var(--e-brand,#b45309);
	box-shadow:0 0 0 3px rgba(180,83,9,.14);
}

/* ---------- 复选 / 单选 ---------- */
.eiq-check{display:flex;gap:9px;align-items:flex-start;font-size:13px;color:#4a4238;cursor:pointer}
.eiq-check input{margin:3px 0 0;flex:0 0 auto}
.eiq-radios{display:flex;flex-wrap:wrap;gap:8px 16px}
.eiq-radio{display:inline-flex;gap:7px;align-items:center;font-size:13.5px;color:#4a4238;cursor:pointer}

/* ---------- 蜜罐：人看不见，机器会填 ---------- */
.eiq-hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* ---------- 校验与状态 ---------- */
.eiq-err{display:none;margin-top:4px;font-size:12px;color:#b3261e}
.eiq-field.is-invalid .eiq-err{display:block}
.eiq-field.is-invalid input,
.eiq-field.is-invalid select,
.eiq-field.is-invalid textarea{border-color:#b3261e}

.eiq-status{margin:10px 0 0;font-size:13px;color:#b3261e;min-height:0}
.eiq-status:empty{display:none}

/* ---------- 提交区 ---------- */
.eiq-foot{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:16px}
.eiq-submit{
	display:inline-flex;align-items:center;justify-content:center;gap:8px;
	padding:12px 26px;border:0;border-radius:11px;cursor:pointer;
	background:var(--e-brand,#b45309);color:#fff;
	font-size:14px;font-weight:700;letter-spacing:.01em;
	box-shadow:0 3px 10px rgba(20,16,13,.14);transition:.18s;
}
.eiq-submit:hover:not(:disabled){transform:translateY(-1px);filter:brightness(.95)}
.eiq-submit:disabled{opacity:.6;cursor:progress;transform:none}
.eiq-note{margin:0;font-size:12.5px;color:#7a7169}

/* ---------- 成功态 ---------- */
.eiq-done[hidden]{display:none}
.eiq-done{padding:8px 0 4px;text-align:center}
.eiq-done-title{margin:6px 0 8px;font-size:18px;font-weight:800;color:#1b1714}
.eiq-done-text{margin:0 0 18px;font-size:13.5px;color:#5f574e}

/* ---------- 弹窗底部：指向完整报价页 ---------- */
.eiq-dialog-foot{
	margin-top:18px;padding-top:14px;border-top:1px solid rgba(20,16,13,.09);
	font-size:13px;
}
.eiq-more{color:#5f574e;text-decoration:none;display:inline-flex;gap:6px;align-items:center}
.eiq-more:hover{color:var(--e-brand,#b45309);text-decoration:underline}

/* ---------- 内联区 ---------- */
.eiq-inline{
	margin:34px 0;padding:24px;border-radius:16px;
	background:rgba(20,16,13,.025);border:1px solid rgba(20,16,13,.08);
	scroll-margin-top:90px;
}
.eiq-inline-title{margin:0 0 16px;font-size:19px;font-weight:800;letter-spacing:-.01em;color:#1b1714}
.eiq-inline .eiq-foot{margin-top:18px}

/* ---------- 打开弹窗时锁滚动 ---------- */
html.eiq-lock,html.eiq-lock body{overflow:hidden}