/* ==========================================================================
   kosmo-form.css — kosmo-form.js 的共享校验样式
   --------------------------------------------------------------------------
   只负责错误态（.form-error + aria-invalid 控件）与 Cloudflare Turnstile
   widget 的间距。

   页面级布局（.form_frame / .hesai_form_wrap / .basicInfo-frame、字段宽度
   与外边距）属于各模板自身的内联 <style>，这里一律不碰。
   ========================================================================== */

/* --- 行内错误文案 ---------------------------------------------------------
   kosmo-form.js 会插入 <span class="form-error" role="alert">，用
   textContent 填充消息。

   布局约定：错误文案 absolute 定位，挂在字段框（.field-wrap /
   .full-width-field）正下方、叠加进字段原有的下间距（margin-bottom）里，
   不参与文档流 —— 错误出现/消失时下方所有组件的位置零变化（零 layout
   shift）。单行错误（12px × 1.3）约 18px 高，40px 的字段间距足够容纳；
   两行长文案（约 33px）也仍在 40px 间距内。 */

.field-wrap,
.full-width-field {
    position: relative;
}

.form-error {
    position: absolute;
    top: -20px;
    left: 0;
    right: 0;
    margin: 2px 0 0;
    font-family: 'Maven Pro', '思源黑体', sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
    color: #d9534f;
    pointer-events: none;
    z-index: 1;
}

/* 空文案时不占位（:empty 只匹配无任何子节点/文本的 span）。 */
.form-error:empty {
    display: none;
}

/* --- 非法控件 --------------------------------------------------------------
   红色 1px 边框 + 红色光晕。带 !important：模板自带字段规则
   （textarea.textarea、form input[type="tel"]、.iti input.iti__tel-input 等）
   可能因优先级或加载顺序压过本规则；错误态必须可见。
   校验通过后 JS 会移除 aria-invalid，此处的覆盖随之自动解除。 */
input[aria-invalid="true"],
textarea[aria-invalid="true"],
select[aria-invalid="true"] {
    border: 1px solid #d9534f !important;
    box-shadow: 0 0 4px rgba(217, 83, 79, 0.35) !important;
}

/* 非法控件聚焦时：保留清晰的红色信号，去掉浏览器默认 outline，改用稍宽的
   红色光圈。提交失败后 kosmo-form.js 会自动 focus 第一个错误控件。 */
input[aria-invalid="true"]:focus,
textarea[aria-invalid="true"]:focus,
select[aria-invalid="true"]:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(217, 83, 79, 0.18), 0 0 6px rgba(217, 83, 79, 0.45) !important;
}

/* select2 会把原生 <select> 隐藏并生成可见的 .select2-container；
   aria-invalid 落在被隐藏的原生 select 上，因此用通用兄弟选择器把红色
   边框/光晕带到可见的选择框上（错误 span 插在两者之间也不影响匹配）。 */
.kosmo-form select[aria-invalid="true"] ~ .select2-container .select2-selection--single {
    border-color: #d9534f !important;
    box-shadow: 0 0 4px rgba(217, 83, 79, 0.35) !important;
}

/* --- Turnstile widget 间距 ------------------------------------------------
   widget 由 kosmo-form.js 显式渲染进容器（容器类名 .turnstile-widget，
   不带触发 api.js 自动渲染的 .cf-turnstile），这里只负责与上下元素的间距；
   min-height 在渲染前占位，避免提交按钮随渲染上跳。

   js 强制 theme: 'light'，但 hesai 页面整体是深色背景，widget 自身的浅色
   iframe 边缘与页面直接相邻会很突兀 —— 用浅色背景 + 圆角包一层，让 widget
   看起来是页面里的一个独立卡块，而不是悬空的一块玻璃。 */
.turnstile-widget,
.cf-turnstile {
    margin-top: 16px;
    margin-bottom: 16px;
    min-height: 65px;
    padding: 4px;
    background: #ffffff;
    border-radius: 6px;
    box-sizing: border-box;
}

/* --- intl-tel-input 容器宽度 ----------------------------------------------
   intlTelInput 自带 css 把 .iti 设为 inline-block 自适应宽度；在 kosmo 表单
   中统一撑满容器，与其余 input 的 width:100% 保持一致。 */
form.kosmo-form .iti {
    width: 100%;
}