/* 联系 / 询价表单（contact_voohu.html、contact_us.html、inquiry_list.html 的 form.cf-form）：
 * 可访问性补丁，外观保持原样。逻辑见 static/js/contact-form.js。 */

/* 1. 输入框点击区铺满整行：nc.css 的行（.nctds_clist）上下各 13px 内边距、输入框只有 19–28px 高，
 *    点行内空白不会聚焦。输入框上下内边距各多 13px（输入框默认 1px → 14px，下拉默认 0 → 13px）、
 *    再用 -13px 外边距抵消：行高、文字位置与改前逐像素一致，输入框可点高度 = 整行（≥47px）。
 *    不用透明边框撑高：Windows 高对比度（forced-colors）会把透明边框画成系统文字色的粗横条。 */
.dbox .nctds .nctds_box .cf-form .nctds_cbox .nctds_clist > input:not([type="hidden"]):not([type="checkbox"]),
.dbox .nctds .nctds_box .cf-form .nctds_cbox .nctds_clist > select {
    align-self: stretch;
    margin-top: -13px;
    margin-bottom: -13px;
}
.dbox .nctds .nctds_box .cf-form .nctds_cbox .nctds_clist > input:not([type="hidden"]):not([type="checkbox"]) {
    padding-top: 14px;
    padding-bottom: 14px;
}
.dbox .nctds .nctds_box .cf-form .nctds_cbox .nctds_clist > select {
    padding-top: 13px;
    padding-bottom: 13px;
}

/* 原来由内联脚本在 focus/blur 时改行边框色，改用 :focus-within（含下拉、区号行） */
.dbox .nctds .nctds_box .cf-form .nctds_cbox .nctds_clist:focus-within {
    border-color: #c30d23;
}

/* 2. 询价类型：原生 <select>，外观对齐原来的伪下拉（红字居中 + 右侧箭头） */
.dbox .nctds .nctds_box .cf-form .nctds_cbox .nctds_clist > select.cf-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    color: #c30d23;
    text-align: center;
    text-align-last: center;
    cursor: pointer;
    border-radius: 0;
    /* 向右伸到箭头下面，箭头不挡点击；右内边距同量，文字居中位置不变；
     * 上下 14px = 原 input 的默认 1px + 第 1 节铺满整行的 13px（行高不变） */
    margin-right: -30px;
    padding: 14px 30px 14px 0;
}
.dbox .nctds .nctds_box .cf-form .nctds_cbox .nctds_clist > select.cf-select + .fa-angle-down {
    position: relative;
    pointer-events: none;
}
.dbox .nctds .nctds_box .cf-form .nctds_cbox .nctds_clist > select.cf-select option {
    color: #333;
}

/* 3. 提交按钮：<a> 换成 <button type="submit">，照搬 nc.css 里 .nctds_submit a 的样式 */
.dbox .nctds .nctds_box .nctds_form .nctds_submit button {
    display: block;
    width: 270px;
    height: 50px;
    position: relative;
    overflow: hidden;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: #000;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}
.dbox .nctds .nctds_box .nctds_form .nctds_submit button span {
    width: 270px;
    height: 50px;
    padding-left: 57px;
    line-height: 50px;
    color: #fff;
    position: relative;
    z-index: 1;
    transition: .3s;
    text-align: left;
    display: block;
}
.dbox .nctds .nctds_box .nctds_form .nctds_submit button i {
    position: absolute;
    right: 0;
    top: 0;
    height: 50px;
    width: 50px;
    text-align: center;
    font-size: 16px;
    line-height: 50px;
    color: #c30d23;
    border-left: 1px solid #ffffff40;
    transition: .3s;
}
.dbox .nctds .nctds_box .nctds_form .nctds_submit button:before {
    content: '';
    display: block;
    width: 270px;
    height: 50px;
    position: absolute;
    left: -100%;
    top: 0;
    background: #c30d23;
    transition: .3s;
}
.dbox .nctds .nctds_box .nctds_form .nctds_submit button:hover:before,
.dbox .nctds .nctds_box .nctds_form .nctds_submit button:focus-visible:before {
    left: 0;
}
.dbox .nctds .nctds_box .nctds_form .nctds_submit button:hover i,
.dbox .nctds .nctds_box .nctds_form .nctds_submit button:focus-visible i {
    color: #fff;
}
.dbox .nctds .nctds_box .nctds_form .nctds_submit button:focus-visible {
    outline: 2px solid #c30d23;
    outline-offset: 3px;
}
.dbox .nctds .nctds_box .nctds_form .nctds_submit button[aria-disabled="true"] {
    cursor: progress;
    opacity: .75;
}

/* 4. 隐私勾选框（透明的原生 checkbox + .h_check 方块）：键盘聚焦可见；说明文字是 <label>，点文字也能勾选 */
.dbox .nctds .nctds_box .cf-form .nctds_cbox .nctds_cookbox input:focus-visible ~ .h_check {
    outline: 2px solid #c30d23;
    outline-offset: 2px;
}
.dbox .nctds .nctds_box .cf-form .nctds_cbox .nctds_cookbox .nctds_cook {
    cursor: pointer;
}

/* 5. 验证码图片（role=button，Enter / 空格换一张） */
.cf-form .code_img[role="button"] {
    cursor: pointer;
}
.cf-form .code_img[role="button"]:focus-visible {
    outline: 2px solid #c30d23;
    outline-offset: 2px;
}

/* 6. 行内错误与状态区
 *    两列表单（.cf-grid：col-sm-6 浮动）里某一格多出错误文字后浮动会错位，改成 flex 换行：
 *    无错误时各格等高，排版与浮动完全相同；有错误时同一行的两格顶端对齐。 */
.dbox .nctds .nctds_box .cf-form.cf-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}
.dbox .nctds .nctds_box .cf-form.cf-grid > .cf-status,
.dbox .nctds .nctds_box .cf-form.cf-grid > .clear {
    width: 100%;
}
.cf-form .cf-error {
    margin: 6px 0 4px;
    padding: 0 20px;
    color: #c30d23;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
}
.cf-form .vh_form_item .cf-error {
    padding: 0;
}
.dbox .nctds .nctds_box .cf-form .nctds_cbox .nctds_clist.cf-invalid {
    border-color: #c30d23;
    box-shadow: inset 3px 0 0 #c30d23;
}
.dbox .nctds .nctds_box .cf-form .nctds_cbox .nctds_cookbox.cf-invalid .h_check {
    box-shadow: 0 0 0 2px rgba(195, 13, 35, .3);
}
.cf-form .vh_form_item.cf-invalid input,
.cf-form .vh_form_item.cf-invalid textarea {
    border-color: #c30d23;
}
/* 出错的行 / 输入框本身已是红边框（与普通聚焦样式相同），聚焦时再加 2px 外框，否则键盘在出错字段间切换看不出焦点。
 * 用 outline 不用 box-shadow：高对比度模式不画 box-shadow。行外框正好落在 .nctds_cbox 的 2px 内边距里，不压到相邻行 */
.dbox .nctds .nctds_box .cf-form .nctds_cbox .nctds_clist.cf-invalid:focus-within {
    outline: 2px solid #c30d23;
    outline-offset: 0;
}
.cf-form .vh_form_item.cf-invalid input:focus,
.cf-form .vh_form_item.cf-invalid textarea:focus {
    outline: 2px solid #c30d23;
    outline-offset: 1px;
}
.cf-form .cf-status {
    margin: 16px 0 0;
    font-size: 15px;
    line-height: 1.5;
    text-align: center;
    color: #333;
}
/* 空的状态区不占位，但不用 display:none：live region 要一直在无障碍树里，内容出现时读屏才稳定播报 */
.cf-form .cf-status:empty {
    margin: 0;
}
.cf-form .cf-status.is-error {
    color: #c30d23;
}
/* 只给读屏的播报区（role=alert）：焦点本来就在出错字段上时（如在验证码框里回车、验证码错误），
 * 焦点不移动、读屏不会重读字段，由这里读出错误文字 */
.cf-form .cf-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

/* 7. Tab / Shift+Tab 让浏览器滚动到某个控件时、或 contact-form.js 把出错字段所在格 / 状态区滚出来时，
 *    别停在固定页头（>990px 高 130px，≤990px 高 80px）下面 */
.cf-form .nctds_cbox,
.cf-form .vh_form_item,
.cf-form .cf-status,
.cf-form input,
.cf-form select,
.cf-form textarea,
.cf-form button,
.cf-form a[href],
.cf-form .code_img {
    scroll-margin-top: 150px;
    scroll-margin-bottom: 24px;
}
@media (max-width: 990px) {
    .cf-form .nctds_cbox,
    .cf-form .vh_form_item,
    .cf-form .cf-status,
    .cf-form input,
    .cf-form select,
    .cf-form textarea,
    .cf-form button,
    .cf-form a[href],
    .cf-form .code_img {
        scroll-margin-top: 100px;
    }
}

/* 8. 询价单页（.vh_form）：触屏宽度下输入框不低于 44px */
@media (max-width: 1180px), (pointer: coarse) {
    .cf-form .vh_form_item input[type="text"],
    .cf-form .vh_form_item input[type="tel"] {
        min-height: 44px;
    }
}

/* 9. Windows 高对比度（forced-colors）：行边框与输入框边框都换成系统色，"整行 / 输入框描红"的聚焦提示看不出来
 *    （改前也是如此，输入框又是 outline:none），聚焦时加系统高亮色外框 */
@media (forced-colors: active) {
    .dbox .nctds .nctds_box .cf-form .nctds_cbox .nctds_clist:focus-within,
    .dbox .nctds .nctds_box .cf-form .nctds_cbox .nctds_clist.cf-invalid:focus-within {
        outline: 2px solid Highlight;
        outline-offset: 0;
    }
    .cf-form .vh_form_item input:focus,
    .cf-form .vh_form_item textarea:focus,
    .cf-form .vh_form_item.cf-invalid input:focus,
    .cf-form .vh_form_item.cf-invalid textarea:focus {
        outline: 2px solid Highlight;
        outline-offset: 1px;
    }
    /* 提交按钮的黑底在高对比度下会被换成系统底色，补一圈按钮边框，看得出是个按钮 */
    .dbox .nctds .nctds_box .nctds_form .nctds_submit button {
        border: 1px solid ButtonText;
    }
}