/**
 * Fluent Forms 跟随 Polaris 设计系统。
 *
 * 作用域:只管选了「继承主题样式」的表单。
 * Fluent Forms 自带一个「Form Style Template」开关(区块侧栏 / 表单设置里都有),两个
 * 选项落到包裹层就是两个类名——`默认(表单样式器)` → `.ff-default`,`继承主题样式`
 * → `.ff-inherit-theme-style`(见 FormBuilder.php 拼 $wrapperClasses 那段)。下面所有
 * 规则都挂在 `.fluentform.ff-inherit-theme-style` 上,所以:
 *   - 选「继承主题样式」的表单 → 走 Polaris 设计系统(本文件)。
 *   - 选「默认(表单样式器)」的表单 → 我们完全不插手,FF 自己的样式器/Form Styler
 *     面板(Label Styles / Input & Textarea / Placeholder Styles 那些)照常生效。
 * 客户想让某个表单单独配色,把那个表单切回「默认」即可,不用关掉整个预置。
 *
 * 注意 FF 里「默认」存的是空字符串,新建表单/新插入的区块默认就是它——所以启用本预置
 * 之后还要去把目标表单切成「继承主题样式」,否则看不到任何变化。
 *
 * 取值全部走变量,不再写死任何一个数值:
 * - 颜色/字号 → theme.json 生成的 `--wp--preset--*`(见 assets/design-system.json
 *   的 settings.color / settings.typography)。
 * - 圆角/按钮内边距 → 下面 `.fluentform` 上那组 `--polaris-ff-*`。theme.json 的
 *   `styles.elements.button` 只作用于匹配的区块 markup、不生成 CSS 变量,以前只能
 *   在这里手抄一份 8px / 0.7em 1.5em,站点在「主题设计」里改了圆角就立刻对不上
 *   (radius 是每站可自由填写的字段,不是固定值)。现在改由两个来源供值:
 *   `settings.custom` 出的 `--wp--custom--radius` 系列 token(见 design-system.json),
 *   以及 class-preset-fluentforms-style.php 从站点实际生效样式里解析后内联覆盖的值
 *   ——后者是必需的,因为站点编辑器里的人工调整只写 styles、不写 settings。
 *
 * 分两层生效:
 * 1. 变量层——直接改写 Fluent Forms 自己的 `--fluentform-*`(定义在
 *    fluentform-public-default.css 的 :root,而 fluent-forms-public.css 有几十条
 *    规则在 var() 它们)。写在 `.fluentform` 上而不是 `:root`:自定义属性按继承取
 *    最近的定义方,不比较样式表先后顺序,不用赌加载次序。这一层顺带把上传区、进度
 *    条、错误色、必填星号等一大批组件接进设计系统,不用逐条写选择器。
 * 2. 规则层——FF 写死了值、没走变量的组件,在下面按组件补齐。
 *
 * 选择器基于 Fluent Forms 6.2 的 class 名(.fluentform.ff-inherit-theme-style / .frm-fluent-form /
 * .ff-el-* / .ff-btn-*)。如实际渲染出的 class 对不上(版本差异),用浏览器检查器
 * 核对后调整。
 */

/* ── 1. 变量层:接管 Fluent Forms 自己的 token ────────────────────────── */

.fluentform.ff-inherit-theme-style {
	/* 输入框/下拉/上传区等控件的通用圆角:跟随设计系统的全局圆角 token。 */
	--polaris-ff-radius: var( --wp--custom--radius, 8px );

	/*
	 * 按钮的圆角/内边距单独一组,由 class-preset-fluentforms-style.php 从站点实际生效
	 * 的按钮样式(合并 theme + user 两层)解析后内联覆盖,所以表单按钮跟原生按钮取的是
	 * 同一个源——在「外观 → 编辑 → 样式 → 区块 → 按钮」里人工调过圆角的站点,表单按钮
	 * 会跟着一起变(那种人工覆盖只写 styles,不写 settings,--wp--custom--radius 读不到)。
	 * 下面这两行只是 PHP 解析不出值时的兜底。
	 */
	--polaris-ff-btn-radius: var( --polaris-ff-radius );
	--polaris-ff-btn-padding: var( --wp--custom--button-padding-y, 0.7em ) var( --wp--custom--button-padding-x, 1.5em );

	--fluentform-primary: var( --wp--preset--color--primary );
	--fluentform-secondary: var( --wp--preset--color--ink-65 );
	--fluentform-danger: var( --wp--preset--color--danger );
	--fluentform-border-color: var( --wp--preset--color--border-subtle, var( --wp--preset--color--border, rgba( 0, 0, 0, 0.12 ) ) );
	--fluentform-border-radius: var( --polaris-ff-radius );
}

/* ── 2. 标签 / 说明文字 ──────────────────────────────────────────────── */

.fluentform.ff-inherit-theme-style .ff-el-input--label label,
.fluentform.ff-inherit-theme-style legend {
	font-family: var( --wp--preset--font-family--sans );
	font-size: var( --wp--preset--font-size--sm );
	font-weight: 600;
	color: var( --wp--preset--color--ink-85 );
}

/* FF 写死 12px + 斜体;字号接档位,斜体保留(它是 FF 用来区分说明文字的既有约定)。 */
.fluentform.ff-inherit-theme-style .ff-el-help-message {
	font-family: var( --wp--preset--font-family--sans );
	font-size: var( --wp--preset--font-size--xs );
}

/* ── 3. 输入控件 ─────────────────────────────────────────────────────── */

.fluentform.ff-inherit-theme-style input.ff-el-form-control,
.fluentform.ff-inherit-theme-style textarea.ff-el-form-control,
.fluentform.ff-inherit-theme-style select.ff-el-form-control {
	box-sizing: border-box;
	min-height: 2.75em;
	padding: 0.6em 0.9em;
	font-family: var( --wp--preset--font-family--sans );
	font-size: var( --wp--preset--font-size--md );
	/* FF 默认样式里是 line-height:1,而我们这条规则以前没声明它,于是那个 1 保留了
	   下来——textarea 设了 min-height 却仍是 1 倍行高,多行输入会挤在一起。 */
	line-height: 1.5;
	color: var( --wp--preset--color--ink-85 );
	background-color: var( --wp--preset--color--base );
	border: 1px solid var( --wp--preset--color--border-subtle, var( --wp--preset--color--border, rgba( 0, 0, 0, 0.12 ) ) );
	border-radius: var( --polaris-ff-radius );
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.fluentform.ff-inherit-theme-style textarea.ff-el-form-control {
	min-height: 8em;
}

.fluentform.ff-inherit-theme-style input.ff-el-form-control::placeholder,
.fluentform.ff-inherit-theme-style textarea.ff-el-form-control::placeholder {
	color: var( --wp--preset--color--ink-45 );
	opacity: 1; /* Firefox 默认给 placeholder 再叠一层透明度。 */
}

.fluentform.ff-inherit-theme-style input.ff-el-form-control:focus,
.fluentform.ff-inherit-theme-style textarea.ff-el-form-control:focus,
.fluentform.ff-inherit-theme-style select.ff-el-form-control:focus {
	border-color: var( --wp--preset--color--primary-focus );
	box-shadow: 0 0 0 1px var( --wp--preset--color--primary-focus );
	outline: none;
}

/* 校验失败态:FF 只改边框色(已由 --fluentform-danger 接管),这里补上聚焦环,
   否则报错后一聚焦就又变回主色环,看不出还在错误状态。 */
.fluentform.ff-inherit-theme-style .ff-el-is-error input.ff-el-form-control:focus,
.fluentform.ff-inherit-theme-style .ff-el-is-error textarea.ff-el-form-control:focus,
.fluentform.ff-inherit-theme-style .ff-el-is-error select.ff-el-form-control:focus {
	border-color: var( --wp--preset--color--danger );
	box-shadow: 0 0 0 1px var( --wp--preset--color--danger );
}

.fluentform.ff-inherit-theme-style .ff-el-is-error .text-danger {
	font-family: var( --wp--preset--font-family--sans );
	font-size: var( --wp--preset--font-size--xs );
}

/* ── 4. 复选框 / 单选 ────────────────────────────────────────────────── */

/* FF 默认模板用 `content:none` 关掉了自绘勾选框,渲染的是原生控件——原生控件在
   Polaris 站点里一直是浏览器默认蓝。accent-color 是接管原生勾选色最省的一刀。 */
.fluentform.ff-inherit-theme-style .ff-el-form-check input[ type="checkbox" ],
.fluentform.ff-inherit-theme-style .ff-el-form-check input[ type="radio" ],
.fluentform.ff-inherit-theme-style input.ff-el-form-check-input {
	accent-color: var( --wp--preset--color--primary );
}

.fluentform.ff-inherit-theme-style .ff-el-form-check label.ff-el-form-check-label {
	font-family: var( --wp--preset--font-family--sans );
	font-size: var( --wp--preset--font-size--md );
	color: var( --wp--preset--color--ink-85 );
}

/* 「按钮组」样式的多选/单选(ff_list_buttons):FF 用 !important 写死 4px 圆角和
   #dcdfe6 边框,只能同样用 !important 顶掉。首尾项各自只圆外侧两角。 */
.fluentform.ff-inherit-theme-style .ff-el-group.ff_list_buttons .ff-el-form-check label > span {
	border-color: var( --wp--preset--color--border-subtle, var( --wp--preset--color--border, rgba( 0, 0, 0, 0.12 ) ) ) !important;
	border-radius: 0 !important;
	color: var( --wp--preset--color--ink-85 );
	font-family: var( --wp--preset--font-family--sans );
}

.fluentform.ff-inherit-theme-style .ff-el-group.ff_list_buttons .ff-el-form-check:first-child label > span {
	border-radius: var( --polaris-ff-radius ) 0 0 var( --polaris-ff-radius ) !important;
}

.fluentform.ff-inherit-theme-style .ff-el-group.ff_list_buttons .ff-el-form-check:last-child label > span {
	border-radius: 0 var( --polaris-ff-radius ) var( --polaris-ff-radius ) 0 !important;
}

/* ── 5. 按钮 ─────────────────────────────────────────────────────────── */

/*
 * 提交按钮这条要压过 FF 的「按钮自定义样式」内联 <style>:
 *   form.fluent_form_N .wpf_has_custom_css.ff-btn-submit { background-color:#1a7efb; … }
 * 优先级 (0,3,1),而且 <style> 在 body 里、排在 head 的样式表之后。
 * 注意这段内联样式跟 Form Style Template 选什么无关——选「继承主题样式」它照样输出
 * (FF 只是把按钮的 ff_btn_style 类换成 ff_btn_no_style,不影响这段),所以只能靠优先级
 * 压。本文件统一带 .ff-inherit-theme-style 作用域之后这条是 (0,4,0),已经压得住,不用
 * 再像早先那样重复类名凑优先级。
 * 也就是说:选了「继承主题样式」就以设计系统为准,FF 按钮面板里调的配色/圆角不生效;
 * 要用那套,把这个表单切回「默认(表单样式器)」。
 */
.fluentform.ff-inherit-theme-style .ff-btn.ff-btn-submit {
	display: inline-block;
	font-family: inherit;
	font-size: var( --wp--preset--font-size--md );
	font-weight: 600;
	line-height: normal;
	color: var( --wp--preset--color--on-primary );
	background-color: var( --wp--preset--color--primary );
	border: none;
	border-radius: var( --polaris-ff-btn-radius );
	padding: var( --polaris-ff-btn-padding );
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.fluentform.ff-inherit-theme-style .ff-btn.ff-btn-submit:hover {
	color: var( --wp--preset--color--on-primary );
	background-color: var( --wp--preset--color--primary-hover );
	opacity: 1; /* FF 默认 hover 是 opacity:.8,与设计系统的 hover 色叠加会发灰。 */
}

.fluentform.ff-inherit-theme-style .ff-btn.ff-btn-submit:active,
.fluentform.ff-inherit-theme-style .ff-btn.ff-btn-submit:focus {
	color: var( --wp--preset--color--on-primary );
	background-color: var( --wp--preset--color--primary-active );
	opacity: 1;
}

/* 多步骤表单的上一步/下一步等次要按钮。 */
.fluentform.ff-inherit-theme-style .ff-btn.ff-btn-secondary,
.fluentform.ff-inherit-theme-style .ff-btn.ff-btn-prev {
	font-family: inherit;
	font-size: var( --wp--preset--font-size--md );
	font-weight: 600;
	color: var( --wp--preset--color--on-secondary );
	background-color: var( --wp--preset--color--secondary );
	border: none;
	border-radius: var( --polaris-ff-btn-radius );
	padding: var( --polaris-ff-btn-padding );
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.fluentform.ff-inherit-theme-style .ff-btn.ff-btn-secondary:hover,
.fluentform.ff-inherit-theme-style .ff-btn.ff-btn-prev:hover {
	color: var( --wp--preset--color--on-secondary );
	background-color: var( --wp--preset--color--secondary-hover );
	opacity: 1;
}

/* ── 6. 文件上传 / 进度 / 重复字段 / 输入组 ──────────────────────────── */

/* 上传按钮的虚线框和圆角已经跟着 --fluentform-* 走了,这里只补 FF 写死的那些。 */
.fluentform.ff-inherit-theme-style .ff-upload-preview,
.fluentform.ff-inherit-theme-style .ff-upload-progress-inline {
	border-radius: var( --polaris-ff-radius );
}

.fluentform.ff-inherit-theme-style .ff-upload-preview {
	border-color: var( --wp--preset--color--border-subtle, var( --wp--preset--color--border, rgba( 0, 0, 0, 0.12 ) ) );
}

.fluentform.ff-inherit-theme-style .ff-el-progress,
.fluentform.ff-inherit-theme-style .ff-el-progress-bar {
	border-radius: var( --polaris-ff-radius );
}

.fluentform.ff-inherit-theme-style .ff-el-progress {
	background-color: var( --wp--preset--color--surface-muted );
}

.fluentform.ff-inherit-theme-style .ff_input-group-text {
	border-radius: var( --polaris-ff-radius );
	background-color: var( --wp--preset--color--surface-muted );
	color: var( --wp--preset--color--ink-65 );
	font-family: var( --wp--preset--font-family--sans );
	font-size: var( --wp--preset--font-size--md );
}

.fluentform.ff-inherit-theme-style .ff_repeater_table .repeat_btn .ff-el-repeat-buttons-list span {
	border-radius: var( --polaris-ff-radius );
	background-color: var( --wp--preset--color--surface-muted );
}

.fluentform.ff-inherit-theme-style .ff-el-ratings label {
	border-radius: var( --polaris-ff-radius );
}

/* ── 7. 多步骤进度头 ─────────────────────────────────────────────────── */

.fluentform.ff-inherit-theme-style .ff-step-header--tabs,
.fluentform.ff-inherit-theme-style .ff-step-header--tabs-left {
	border-radius: var( --polaris-ff-radius );
	background: var( --wp--preset--color--surface-muted );
}

.fluentform.ff-inherit-theme-style .ff-step-header--tabs .ff-step-titles li,
.fluentform.ff-inherit-theme-style .ff-step-header--tabs-left .ff-step-titles li {
	border-radius: var( --polaris-ff-radius );
	border-color: var( --wp--preset--color--border-subtle, var( --wp--preset--color--border, rgba( 0, 0, 0, 0.12 ) ) );
	background: var( --wp--preset--color--base );
}

/* ── 8. 提交结果消息 ─────────────────────────────────────────────────── */

.fluentform.ff-inherit-theme-style .ff-message-success {
	border-radius: var( --polaris-ff-radius );
	border-color: var( --wp--preset--color--success );
	background-color: var( --wp--preset--color--success-bg );
	color: var( --wp--preset--color--ink-85 );
	font-family: var( --wp--preset--font-family--sans );
}

/* ── 9. 可搜索下拉(Choices.js,assets/css/choices.css) ───────────────── */

/* FF 那份 choices.css 的选择器是 `.frm-fluent-form .choices__*`(0,2,0);这里前面
   多挂一层 .fluentform.ff-inherit-theme-style 拿到 (0,3,0),不依赖样式表加载顺序。 */
.fluentform.ff-inherit-theme-style .choices__inner {
	border-radius: var( --polaris-ff-radius );
	border-color: var( --wp--preset--color--border-subtle, var( --wp--preset--color--border, rgba( 0, 0, 0, 0.12 ) ) );
	background: var( --wp--preset--color--base );
	color: var( --wp--preset--color--ink-85 );
	font-family: var( --wp--preset--font-family--sans );
	font-size: var( --wp--preset--font-size--md );
}

.fluentform.ff-inherit-theme-style .choices__list--dropdown {
	border-radius: var( --polaris-ff-radius );
	border-color: var( --wp--preset--color--border-subtle, var( --wp--preset--color--border, rgba( 0, 0, 0, 0.12 ) ) );
	background-color: var( --wp--preset--color--base );
	font-family: var( --wp--preset--font-family--sans );
}

.fluentform.ff-inherit-theme-style .choices.is-open .choices__list--dropdown,
.fluentform.ff-inherit-theme-style .choices__list--dropdown.is-active {
	border-color: var( --wp--preset--color--primary-focus );
}

.fluentform.ff-inherit-theme-style .choices__list--dropdown .choices__item--selectable.is-highlighted {
	background-color: var( --wp--preset--color--primary-bg );
	color: var( --wp--preset--color--ink-85 );
}

/* 多选选中项的「胶囊」,FF 写死深灰 + 20px 圆角。 */
.fluentform.ff-inherit-theme-style .choices__list--multiple .choices__item {
	border-radius: var( --polaris-ff-radius );
	border-color: transparent;
	background-color: var( --wp--preset--color--primary );
	color: var( --wp--preset--color--on-primary );
	font-family: var( --wp--preset--font-family--sans );
}