/* ============================================================
 *  统一询盘表单 · 外观样式（OA 业务落地页用）
 * ------------------------------------------------------------
 *  字段、文案、校验规则都来自后台「智能表单」里的那一份定义
 *  （includes/form_schema.php），本文件只管「长什么样」。
 *
 *  用法（落地页里两行）：
 *    <link rel="stylesheet" href="/assets/css/inquiry-form.css?v=…">
 *    <div class="inq-scope">
 *      <div data-inquiry-form="lead" data-lang="zh" data-source="geo_rank_main"></div>
 *    </div>
 *    <script src="/js/inquiry-form.js" defer></script>
 *
 *  主色自动跟随落地页自己的变量：--inq-brand → --pri → 品牌蓝
 *  （所以每个落地页不用改颜色，天生跟页面主色一致）
 * ============================================================ */

.inq-scope {
    --inq-brand:   var(--pri,   var(--brand,   #2F6BFF));
    --inq-brand-d: var(--pri-d, var(--brand-d, #1E54E8));
    --inq-ink:     #0d1b2a;
    --inq-line:    #dfe4ea;
    --inq-soft:    #94a3b8;
}

/* ---------- 表单骨架 ---------- */
.inq-scope .lead-form { display: flex; flex-direction: column; gap: 14px; }

.inq-scope .lead-form > h3 {
    margin: 0 0 2px;
    font-size: 20px;
    font-weight: 800;
    line-height: 1.35;
    color: var(--inq-ink);
}

.inq-scope .field { display: flex; flex-direction: column; gap: 6px; }

.inq-scope .field label {
    font-size: 13.5px;
    font-weight: 700;
    color: #334155;
}

.inq-scope .field input,
.inq-scope .field select,
.inq-scope .field textarea {
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
    font-size: 15px;
    color: var(--inq-ink);
    background: #fff;
    padding: 12px 14px;
    border: 1px solid var(--inq-line);
    border-radius: 10px;
    transition: border-color .18s, box-shadow .18s;
}
.inq-scope .field textarea { resize: vertical; min-height: 84px; }

.inq-scope .field input::placeholder,
.inq-scope .field textarea::placeholder { color: #b6c2d2; }

.inq-scope .field input:focus,
.inq-scope .field select:focus,
.inq-scope .field textarea:focus {
    outline: none;
    border-color: var(--inq-brand);
    box-shadow: 0 0 0 3px rgba(47, 107, 255, .13);
}

.inq-scope .field.error input,
.inq-scope .field.error select,
.inq-scope .field.error textarea {
    border-color: #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, .12);
}

.inq-scope .err-msg { font-size: 12px; color: #ef4444; }

/* ---------- 按钮 ---------- */
.inq-scope .btn--primary {
    display: block;
    width: 100%;
    border: 0;
    cursor: pointer;
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    padding: 14px 18px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--inq-brand), var(--inq-brand-d));
    box-shadow: 0 12px 26px -12px rgba(47, 107, 255, .55);
    transition: transform .18s, box-shadow .18s, opacity .18s;
}
.inq-scope .btn--primary:hover { transform: translateY(-2px); }
.inq-scope .btn--primary:disabled { opacity: .65; cursor: default; transform: none; }

.inq-scope .btn--ghost {
    display: inline-block;
    border: 1px solid var(--inq-line);
    background: #fff;
    color: #475569;
    font-family: inherit;
    font-size: 13.5px;
    padding: 9px 16px;
    border-radius: 9px;
    cursor: pointer;
    transition: .18s;
}
.inq-scope .btn--ghost:hover { border-color: var(--inq-brand); color: var(--inq-brand); }

.inq-scope .form-note {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.7;
    text-align: center;
    color: var(--inq-soft);
}

/* ---------- 提交成功态 ---------- */
.inq-scope .form-success { text-align: center; padding: 10px 0; }
.inq-scope .form-success__icon { display: block; font-size: 30px; margin-bottom: 6px; }
.inq-scope .form-success h4 {
    margin: 0 0 6px;
    font-size: 18px;
    font-weight: 800;
    color: var(--inq-ink);
}
.inq-scope .form-success p {
    margin: 0 0 14px;
    font-size: 13.5px;
    line-height: 1.7;
    color: #64748b;
}

/* 手机端：输入框字号别小于 16px，否则 iOS 聚焦时会放大页面 */
@media (max-width: 576px) {
    .inq-scope .field input,
    .inq-scope .field select,
    .inq-scope .field textarea { font-size: 16px; }
}