/* ============================================================
   sunn-form 统一表单组件（2026-10-30 定版）
   全站前台提交表单共用单一入口：评论/自定义表单/预约/询价/留资。
   规则：
   1. 本文件只放「视觉原语」（标签/输入框/按钮/错误/选项组），
      插件自己的布局（卡片容器、验证码行、栅格行、宽度收窄钩子）留在插件内。
   2. 谁渲染表单，谁输出 FormUI::cssLink()（按需加载，未渲染不请求）。
   3. 类名统一 .sf- 前缀；个别皮肤微调时在自己 style.css 里用更高
      优先级覆盖 .sf-*，不改本文件。
   ============================================================ */

/* ---- 字段：label 在上 ---- */
.sf-field{display:block;margin:0 0 14px}
.sf-label{display:block;font-size:13px;font-weight:600;color:#475569;margin-bottom:6px}
.sf-label .req{color:#e02424;font-style:normal;font-weight:700;margin-left:3px}
.sf-optional{font-style:normal;font-weight:400;color:#94a3b8;font-size:12px;margin-left:6px}

/* ---- 输入控件（text/email/tel/url/number/date/file/select/textarea 通用） ----
   选择器用「元素+类」凑足 (0,1,1)：与主题 input[type=text] 同优先级，
   本文件在主题样式之后加载，平级后者胜 → 保证边框不被主题覆盖 */
input.sf-input,select.sf-input,textarea.sf-input{display:block;width:100%;box-sizing:border-box;border:1px solid #cbd5e1;border-radius:10px;padding:11px 12px;font-size:14px;font-family:inherit;background:#fff;color:#0f172a;transition:border-color .15s,box-shadow .15s}
input.sf-input:focus,select.sf-input:focus,textarea.sf-input:focus{outline:none;border-color:#2563eb;box-shadow:0 0 0 3px rgba(37,99,235,.12)}
textarea.sf-input{resize:vertical}

/* ---- 提交按钮（蓝色渐变胶囊） ---- */
.sf-btn{display:inline-block;background:linear-gradient(135deg,#2563eb,#1d4ed8);color:#fff;border:none;border-radius:999px;padding:12px 30px;font-size:14px;font-weight:600;cursor:pointer;box-shadow:0 8px 22px rgba(37,99,235,.3);font-family:inherit;transition:transform .18s,box-shadow .18s}
.sf-btn:hover{transform:translateY(-1px);box-shadow:0 12px 28px rgba(37,99,235,.4)}
.sf-btn--block{display:block;width:100%}
.sf-btn:disabled{opacity:.6;cursor:not-allowed;transform:none}

/* ---- 错误提示 ---- */
.sf-err{color:#dc2626;font-style:normal;font-size:12px;margin-left:4px}
.sf-errbox{color:#dc2626;background:#fef2f2;border:1px solid #fecaca;border-radius:8px;padding:10px 14px;margin:0 0 14px;font-size:13px;list-style:none}
.sf-errbox li{margin:2px 0}

/* ---- 选项组（单选/多选） ---- */
.sf-opts{display:flex;flex-wrap:wrap;gap:14px;margin-top:4px}
.sf-opt{font-size:14px;color:#334155;cursor:pointer}

/* ---- 修饰符：窄宽度（昵称/联系方式等短输入） ---- */
.sf-field--sm .sf-input{max-width:360px}

/* ---- 蜜罐字段（防机器人：视觉隐藏但仍在文档流外可被填写） ---- */
.sf-hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none}