/*
 * 表单样式。
 *
 * 铁律：**一行死值都不写。** 颜色、圆角、间距全部走变量，优先吃编辑器色板
 * （--af-color-*，由主题设置页经 SiteTokens 输出），退回主题自己的变量。
 * 表单是主题提供的能力，但它出现在编辑器搭的版面里 —— 自带一套长相就会变成
 * "页面很高级、表单很 WordPress"。
 */
.aum-form {
  --f-text:    var(--af-color-text, var(--text-on-bg, #222));
  --f-muted:   var(--af-color-muted, var(--text-muted, #888));
  --f-line:    var(--af-color-line, var(--border, rgba(127,127,127,.28)));
  --f-surface: var(--af-color-surface, var(--card-bg, transparent));
  --f-brand:   var(--af-color-brand, var(--primary, #3366cc));
  --f-ink:     var(--af-color-brand-ink, #fff);
  --f-danger:  var(--af-color-signal, #e5484d);
  --f-radius:  var(--af-radius-input, 2px);
  --f-gap:     16px;

  color: var(--f-text);
  width: 100%;
}

/* 蜜罐：必须是"视觉上不存在但机器人读得到"。用 display:none 有些机器人会跳过 */
.aum-form-hp {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap;
}

.aum-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--f-gap);
}
.aum-form-field.is-full { grid-column: 1 / -1; }
@media (max-width: 640px) {
  .aum-form-grid { grid-template-columns: 1fr; }
}

.aum-form-label {
  display: block;
  margin-bottom: 7px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .01em;
}
.aum-form-req { color: var(--f-brand); margin-inline-start: 3px; }

.aum-form-input {
  width: 100%;
  padding: 12px 14px;
  font: inherit;
  font-size: 15px;
  color: var(--f-text);
  background: var(--f-surface);
  border: 1px solid var(--f-line);
  border-radius: var(--f-radius);
  transition: border-color .16s, box-shadow .16s;
  /* 表单控件默认不继承页面字体，不写这行会在暗色站里冒出一个白底浅色框 */
  appearance: none;
}
.aum-form-input::placeholder { color: var(--f-muted); }
.aum-form-input:focus {
  outline: none;
  border-color: var(--f-brand);
  /* 焦点环用主色的半透明扩散，而不是浏览器默认的蓝框 */
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--f-brand) 28%, transparent);
}
textarea.aum-form-input { resize: vertical; min-height: 120px; }
select.aum-form-input { cursor: pointer; }

.aum-form-choices { display: flex; flex-wrap: wrap; gap: 10px 18px; }
.aum-form-choice {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; cursor: pointer;
}
.aum-form-choice input { accent-color: var(--f-brand); width: 16px; height: 16px; }
.aum-form-consent { align-items: flex-start; line-height: 1.5; }
.aum-form-consent a { color: var(--f-brand); text-decoration: underline; }

.aum-form-help  { margin: 6px 0 0; font-size: 12px; color: var(--f-muted); }
.aum-form-error {
  margin: 6px 0 0; font-size: 12px; color: var(--f-danger);
  min-height: 0;             /* 没有错误时不占位，避免表单跳动 */
}
.aum-form-error:empty { display: none; }
.aum-form-field.has-error .aum-form-input { border-color: var(--f-danger); }

.aum-form-foot { margin-top: 22px; }
.aum-form-submit {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 28px;
  font: inherit; font-size: 15px; font-weight: 700;
  color: var(--f-ink);
  background: var(--f-brand);
  border: 0; border-radius: var(--f-radius);
  cursor: pointer;
  transition: opacity .16s;
}
/*
 * 按钮里的文字必须**显式**给色，不能靠继承。
 *
 * 主题有一条全局重置，把 71 个元素类型（含 `span`）的颜色都设成 `--text-on-bg`。
 * 按钮文字装在 `<span class="aum-form-submit-label">` 里，那个 span **自己匹配上了**
 * 那条规则 —— 而元素自己匹配到的声明永远压过从父级继承来的值，跟特异性无关。
 *
 * 结果：按钮拿到了"暗色板的底 + 亮色板的字"，荧光绿上压白字，几乎看不清。
 * 这不是对比度算错了（brand-ink 一直是对的），是继承在中途被打断了。
 *
 * 所以：凡是背景色和页面不同的容器，里面的文字元素都要自己写一次颜色。
 */
.aum-form-submit,
.aum-form-submit * { color: var(--f-ink); }

.aum-form-submit:hover { opacity: .86; }
.aum-form-submit[disabled] { opacity: .55; cursor: default; }

.aum-form-spinner { display: none; width: 14px; height: 14px; }
.aum-form.is-sending .aum-form-spinner {
  display: block;
  border: 2px solid color-mix(in srgb, var(--f-ink) 40%, transparent);
  border-top-color: var(--f-ink);
  border-radius: 50%;
  animation: aum-form-spin .7s linear infinite;
}
@keyframes aum-form-spin { to { transform: rotate(360deg); } }
/* 用户要求减弱动效时不转圈 —— 但按钮仍然是禁用态，状态照样传达得出去 */
@media (prefers-reduced-motion: reduce) {
  .aum-form.is-sending .aum-form-spinner { animation: none; }
}

.aum-form-message { margin: 16px 0 0; font-size: 14px; }
.aum-form-message:empty { display: none; }
.aum-form.is-ok   .aum-form-message { color: var(--f-brand); }
.aum-form.is-fail .aum-form-message { color: var(--f-danger); }

.aum-form-missing {
  padding: 12px 14px; font-size: 13px;
  border: 1px dashed var(--f-line, rgba(127,127,127,.4));
  color: var(--f-muted, #888);
}