/**
 * TAO 表单控件共享层
 * 首页 (.th-*) 与二级页 (.tao-*) 统一：四边框输入、纸面感、主题色聚焦。
 *
 * 本文件是表单控件的**唯一样式来源**：homepage.css 里的历史输入框规则不再
 * 参与竞争（早期版本这里是「下划线」与「方框」两套样式互相 !important 压制）。
 * 仍保留的 !important 只用于压住 Elementor Kit / WP 核心可能注入的控件样式。
 */

/* —— 全站预算表单分区（首页/行程/指南/归档底部复用）—— */
/* ===== 二级页表单分区对齐首页（客户要求：样式与底色一致）=====
   首页基准（1440 实测）：底色 cream #fbf8f4、上留白 72 / 下 32、头部 800px 居中、
   标题 Cormorant `clamp(2.5rem,4.15vw,3.75rem)`、引言 ~15.7px、表单盒子内容宽 ~748px。 */
.tao-form-budget,
.th-budget {
  background: var(--tao-color-cream, #fbf8f4);
  padding: 72px 0 32px;
}
.tao-form-budget .tao-shell {
  padding-inline: 10px;
}
.tao-form-budget .tao-form-budget__head {
  max-width: 800px;
  margin-inline: auto;
  margin-bottom: 28px;
  text-align: center;
}
.tao-form-budget__head .tao-eyebrow {
  display: block;
  margin-bottom: 14px;
  color: var(--tao-color-brand);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.tao-form-budget__head .tao-section-title-xl {
  margin: 0;
  color: var(--tao-color-ink);
  font-family: var(--tao-font-display), serif;
  font-size: clamp(2.5rem, 4.15vw, 3.75rem);
  font-weight: 600;
  line-height: 1.03;
  letter-spacing: -.025em;
}
.tao-form-budget__head .tao-section-intro {
  max-width: 760px;
  margin: 15px auto 0;
  color: var(--tao-color-muted, #6f6862);
  font-size: .98rem;
  line-height: 1.68;
}
.tao-form-budget .th-form-box,
.tao-form-budget .tao-exp-budget__box {
  max-width: 748px;
  margin-inline: auto;
}
@media (max-width: 900px) {
  .tao-form-budget { padding: 44px 0 28px; }
}
@media (max-width: 640px) {
  .tao-form-budget { padding: 36px 0 24px; }
  .tao-form-budget .tao-shell { padding-inline: 0; }
}

.tao-form-budget .th-form-box {
  margin-inline: auto;
}
.tao-form-budget .th-form-box .th-form-grid {
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 640px) {
  .tao-form-budget .th-form-box .th-form-grid {
    grid-template-columns: 1fr;
  }
}

/* —— 表单上方信任条（参考稿 Opción B）—— */
.th-form-trust {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px 20px;
  margin: 0 0 34px;
  padding: 0;
  list-style: none;
}
.th-form-trust li {
  display: flex;
  align-items: center;
  gap: 11px;
  color: var(--tao-color-ink);
  font-size: .82rem;
  font-weight: 600;
  line-height: 1.35;
}
.th-form-trust__icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: var(--tao-color-brand);
  background: color-mix(in srgb, var(--tao-color-brand) 8%, transparent);
}
.th-form-trust__icon svg {
  width: 19px;
  height: 19px;
  stroke-width: 1.9;
}

/* —— Shortlist：分区线，不套米色卡 —— */
.th-saved-block,
.tao-saved-block {
  margin: 0 0 32px;
  padding: 0 0 28px;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.th-saved-title,
.tao-saved-title {
  margin-bottom: 13px;
  color: var(--tao-color-ink);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .04em;
}
.th-selected-experiences,
.tao-selected-experiences {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}
.th-exp-chip,
.tao-exp-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 12px 8px 14px;
  border-radius: 999px;
  background: var(--tao-color-brand, #7a201a);
  color: #fff;
  font-size: .79rem;
  font-weight: 600;
}
.th-exp-chip button,
.tao-exp-chip button {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .16);
  color: #fff;
  font: inherit;
  line-height: 1;
  cursor: pointer;
}
.th-exp-chip button:hover,
.tao-exp-chip button:hover {
  background: rgba(255, 255, 255, .28);
}
.th-saved-empty,
.tao-saved-empty {
  color: var(--tao-color-muted);
  font-size: .9rem;
}
.th-saved-help,
.tao-saved-help {
  margin-top: 12px;
  color: var(--tao-color-muted);
  font-size: .76rem;
  line-height: 1.55;
}

/* —— 字段：四边框纸面输入（客户 9.18 意见 f）—— */
.th-field,
.tao-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  /* input 有约 330px 的固有最小宽度，栅格/弹性列里会把整页顶宽 → 必须允许收缩 */
  min-width: 0;
}
.th-field label,
.tao-field label,
.tao-check-title,
.th-interests legend {
  margin-bottom: 0;
  color: var(--tao-color-ink);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .015em;
}
.th-field input,
.th-field select,
.th-field textarea,
.tao-field input,
.tao-field select,
.tao-field textarea {
  width: 100%;
  min-width: 0;
  min-height: 50px;
  padding: 12px 15px;
  border: 1px solid var(--tao-color-line-strong, rgba(119, 29, 24, .24)) !important;
  border-radius: var(--tao-radius-control, 14px) !important;
  background-color: var(--tao-color-paper, #fffefc) !important;
  box-shadow: none !important;
  outline: none !important;
  color: var(--tao-color-ink);
  font: inherit;
  font-size: .92rem;
  transition: border-color .18s ease-out, box-shadow .18s ease-out, background-color .18s ease-out;
}
.th-field input::placeholder,
.th-field textarea::placeholder,
.tao-field input::placeholder,
.tao-field textarea::placeholder {
  color: color-mix(in srgb, var(--tao-color-muted) 70%, transparent);
}
.th-field textarea,
.tao-field textarea {
  min-height: 128px;
  padding-top: 12px;
  resize: vertical;
}
.th-field:focus-within input,
.th-field:focus-within select,
.th-field:focus-within textarea,
.tao-field:focus-within input,
.tao-field:focus-within select,
.tao-field:focus-within textarea {
  border-color: var(--tao-color-brand, #771d18) !important;
  background-color: #fff !important;
  box-shadow: var(--tao-focus) !important;
}
.th-field input:focus,
.th-field input:focus-visible,
.th-field select:focus,
.th-field select:focus-visible,
.th-field textarea:focus,
.th-field textarea:focus-visible,
.tao-field input:focus,
.tao-field input:focus-visible,
.tao-field select:focus,
.tao-field select:focus-visible,
.tao-field textarea:focus,
.tao-field textarea:focus-visible {
  outline: none !important;
  outline-offset: 0 !important;
}

/* —— 电话：国际区号 + 号码 —— */
.th-phone {
  display: flex;
  align-items: stretch;
  gap: 8px;
}
/* 提高优先级压过通用 .th-field select/input 规则（否则区号下拉会占满整行、号码框被挤成一条） */
.th-field .th-phone select.th-phone__code {
  flex: 0 0 auto;
  width: 96px;
  min-width: 96px;
}
.th-field .th-phone input {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
}

/* —— 日期区间：原生日历选择器（客户 9.18 意见 g）—— */
.th-dates {
  display: flex;
  align-items: center;
  gap: 10px;
}
.th-dates input {
  flex: 1 1 0;
  min-width: 0;
  min-height: 50px;
}
.th-dates__sep {
  color: var(--tao-color-muted);
  font-size: .9rem;
}
.th-dates input::-webkit-calendar-picker-indicator,
.th-field input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: .6;
}
.th-dates input::-webkit-calendar-picker-indicator:hover,
.th-field input[type="date"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}

/* —— 下拉：原生 select + 主题 CSS —— */
.th-field select,
.tao-field select {
  appearance: none !important;
  -webkit-appearance: none !important;
  cursor: pointer;
  padding-right: 40px !important;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23771D18' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 15px center !important;
  background-size: 12px 12px !important;
}
.th-field select:hover,
.tao-field select:hover {
  border-color: color-mix(in srgb, var(--tao-color-brand) 55%, var(--tao-color-line-strong)) !important;
  color: var(--tao-color-brand);
}
.th-field select:invalid,
.th-field select:has(option[value=""]:checked),
.tao-field select:invalid,
.tao-field select:has(option[value=""]:checked) {
  color: var(--tao-color-muted);
}
.th-field select option,
.tao-field select option {
  color: var(--tao-color-ink);
  background: var(--tao-color-paper, #fffefc);
}

/* —— 提示 / 错误 —— */
.th-hint,
.tao-field-hint {
  color: var(--tao-color-muted);
  font-size: .71rem;
  line-height: 1.45;
}
.th-error,
.tao-field-error {
  color: var(--tao-color-brand);
  font-size: .71rem;
}
.tao-field-error { display: none; }
.tao-field.invalid .tao-field-error { display: block; }
.th-field.invalid input,
.th-field.invalid select,
.th-field.invalid textarea,
.tao-field.invalid input,
.tao-field.invalid select,
.tao-field.invalid textarea {
  border-color: var(--tao-color-error, #9a2e27) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tao-color-error) 14%, transparent) !important;
}

/* —— 提交按钮下方的数据说明 —— */
.th-form-secure {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 16px 0 0;
  color: var(--tao-color-muted);
  font-size: .78rem;
  line-height: 1.5;
}
.th-form-secure__icon {
  flex: 0 0 auto;
  margin-top: 1px;
  color: var(--tao-color-success, #35634a);
}
.th-form-secure__icon svg {
  width: 18px;
  height: 18px;
  stroke-width: 1.75;
}

/* —— 兴趣区：无圆角框 —— */
.th-interests,
.tao-interest-box {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}
.th-interests {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px 16px;
}
.tao-interests {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-top: 12px;
}
.th-interests label,
.tao-interests label {
  display: flex !important;
  align-items: center !important;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 4px;
  color: var(--tao-color-muted);
  font-size: .81rem;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease;
}
.th-interests label:hover,
.tao-interests label:hover {
  background: color-mix(in srgb, var(--tao-color-brand) 8%, transparent);
  color: var(--tao-color-brand);
}
.th-interests input[type="checkbox"],
.tao-interests input[type="checkbox"] {
  flex: 0 0 auto;
  width: 1.05rem;
  height: 1.05rem;
  margin: 0;
  accent-color: var(--tao-color-brand);
  cursor: pointer;
}
.th-interests-hint {
  display: block;
  margin-top: 6px;
  color: var(--tao-color-muted);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

/* —— 勾选：与首行顶对齐 —— */
.th-consent,
.tao-consent {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-items: start !important;
  column-gap: 12px;
  row-gap: 4px;
  margin: 0;
  color: var(--tao-color-muted);
  font-size: .86rem;
  line-height: 1.55;
}
.th-consent input[type="checkbox"],
.tao-consent input[type="checkbox"] {
  grid-column: 1;
  grid-row: 1;
  width: 1.05rem;
  height: 1.05rem;
  /* 字段的 min-height:50px 也会套到 checkbox，导致勾选框被拉成 17×50、看着像掉到文字下方 */
  min-height: 0;
  margin: 0.28em 0 0;
  padding: 0;
  accent-color: var(--tao-color-brand);
  cursor: pointer;
}
.th-consent > span:not(.th-error),
.tao-consent > span {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
}
.th-consent .th-error {
  grid-column: 2;
  margin-left: 0 !important;
}

/* —— 成功态：谢谢确认弹窗（客户 9.18 意见 d）—— */
body.th-modal-open {
  overflow: hidden;
}

.th-success,
.th-success[hidden],
.tao-budget-success[hidden] {
  display: none !important;
}
.th-success:not([hidden]),
.tao-budget-success:not([hidden]) {
  display: grid;
  place-items: center;
  position: fixed;
  inset: 0;
  z-index: 1200;
  padding: 24px;
  overflow-y: auto;
  background: rgba(28, 16, 14, .55);
  backdrop-filter: blur(3px);
}
.th-success__card {
  position: relative;
  width: min(560px, 100%);
  margin: auto;
  padding: 46px 40px 38px;
  border-radius: var(--tao-radius-card, 22px);
  background: var(--tao-color-paper, #fffefc);
  box-shadow: 0 30px 80px rgba(28, 16, 14, .3);
  text-align: center;
}
.th-success__glyph {
  display: block;
  color: var(--tao-color-brand);
  font-family: var(--tao-font-display), serif;
  font-size: clamp(3.1rem, 7vw, 4.4rem);
  font-weight: 600;
  line-height: 1;
}
.th-success__pinyin {
  display: block;
  margin-top: 12px;
  color: var(--tao-color-muted);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .34em;
  text-transform: uppercase;
}
.th-success__rule {
  width: 96px;
  height: 1px;
  margin: 22px auto 24px;
  border: 0;
  background: var(--tao-color-line-strong, rgba(119, 29, 24, .24));
}
.th-success h3,
.tao-budget-success h3 {
  margin: 0 0 14px;
  color: var(--tao-color-ink);
  font-family: var(--tao-font-display), serif;
  font-size: clamp(1.45rem, 3vw, 1.95rem);
  font-weight: 600;
  line-height: 1.2;
}
.th-success p,
.tao-budget-success p {
  margin: 0 auto;
  max-width: 44ch;
  color: var(--tao-color-muted);
  font-size: .96rem;
  line-height: 1.7;
}
.th-success__action {
  min-height: 50px;
  margin-top: 28px;
  padding: 0 30px;
  border: 0;
  border-radius: 999px;
  background: var(--tao-color-brand);
  color: #fff;
  font: inherit;
  font-size: .92rem;
  font-weight: 700;
  cursor: pointer;
}
.th-success__action:hover {
  background: var(--tao-color-brand-dark, #56100e);
}
.th-success__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--tao-color-muted);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.th-success__close:hover,
.th-success__close:focus-visible {
  color: var(--tao-color-brand);
  background: color-mix(in srgb, var(--tao-color-brand) 8%, transparent);
}

/* —— 二级页外壳：与首页一致压平 —— */
.tao-exp-budget__box {
  max-width: 1080px;
  margin: 0 auto;
  padding: 8px 0 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

@media (max-width: 700px) {
  .th-interests {
    grid-template-columns: 1fr 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .th-field input,
  .th-field select,
  .th-field textarea,
  .tao-field input,
  .tao-field select,
  .tao-field textarea {
    transition: none;
  }
}

/* —— 表单网格与分步 UI（全站共享，非仅首页） —— */
.th-form-box {
  padding: 8px 0 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.th-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 24px;
}

.th-full {
  grid-column: 1 / -1;
}

/* 步骤标题：客户 9.18 意见 a —— 数字与正文同字体，不再用衬线老式数字 */
.th-form-group-title {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 22px 0 12px;
  border-bottom: 0;
}

.th-form-group-title:first-child {
  padding-top: 0;
}

.th-form-group-title span {
  color: var(--tao-color-brand, #771d18);
  font-family: var(--tao-font-body), sans-serif;
  font-size: .95rem;
  font-weight: 800;
  letter-spacing: .02em;
  line-height: 1.2;
  font-variant-numeric: lining-nums;
}

.th-form-group-title strong {
  color: var(--tao-color-ink);
  font-size: .76rem;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.th-error {
  display: block;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  margin-top: 0;
  transform: translateY(-4px);
  transition: max-height .28s ease-out, opacity .22s ease-out, transform .22s ease-out;
}

.th-field.invalid .th-error,
.th-consent.invalid .th-error {
  max-height: 3.5rem;
  opacity: 1;
  transform: none;
}

.th-submit {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  margin-top: 4px;
  padding: 0 30px;
  border: 0;
  border-radius: 999px;
  background: var(--tao-color-brand, #771d18);
  color: #fff;
  font: inherit;
  font-size: .9rem;
  font-weight: 700;
  cursor: pointer;
}

.th-submit:hover {
  background: var(--tao-color-brand-dark, #56100e);
}

.th-submit:disabled {
  opacity: .6;
  cursor: progress;
}

.th-submit:focus-visible {
  outline-offset: 3px;
}

.th-form--steps .th-form-grid {
  display: flex !important;
  flex-direction: column;
  gap: 0 !important;
}

.th-form-progress {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin: 0 0 34px;
  border-bottom: 1px solid var(--tao-color-line, rgba(122, 32, 26, .12));
}

.th-form-progress__dot {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 10px;
  width: 100%;
  min-height: 44px; /* 触控目标底线（原来实测 42px，qa-form.cjs 断言拦下） */
  padding: 10px 8px 14px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  margin-bottom: -1px;
  background: transparent;
  color: var(--tao-color-muted);
  text-align: left;
  cursor: pointer;
  box-shadow: none !important;
  transition: color .2s ease, border-color .2s ease, background-color .2s ease;
}

.th-form-progress__dot:hover {
  background: color-mix(in srgb, var(--tao-color-brand) 8%, transparent);
  color: var(--tao-color-brand);
}

.th-form-progress__dot.is-active,
.th-form-progress__dot[aria-current="step"] {
  border-bottom-color: var(--tao-color-brand);
  background: color-mix(in srgb, var(--tao-color-brand) 6%, transparent);
  color: var(--tao-color-ink);
}

.th-form-progress__dot.is-done {
  border-bottom-color: transparent;
  color: var(--tao-color-brand);
}

.th-form-progress__num {
  font-family: var(--tao-font-body), sans-serif;
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .04em;
  line-height: 1.2;
  font-variant-numeric: lining-nums;
}

.th-form-progress__label {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.th-form--steps .th-form-step .th-form-group-title {
  display: none !important;
}

.th-form-step {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 24px;
}

.th-form-step[hidden] {
  display: none !important;
}

.th-form-step .th-full,
.th-form-step .th-form-group-title,
.th-form-step .th-interests,
.th-form-step .th-consent,
.th-form-step .th-submit,
.th-form-step .th-form-secure {
  grid-column: 1 / -1;
}

.th-form-nav {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 8px;
  padding-top: 22px;
  border-top: 0;
  min-height: 70px;
}

.th-form-nav__back[hidden],
.th-form-nav__next[hidden],
.th-form--steps .th-submit[hidden] {
  display: none !important;
}

.th-form-nav__back,
.th-form-nav__next,
.th-form--steps .th-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 24px;
  border-radius: 999px;
  font-family: var(--tao-font-body), sans-serif;
  font-size: .9rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.th-form-nav__back {
  border: 1px solid var(--tao-color-line-strong, rgba(119, 29, 24, .24));
  padding: 0 22px;
  background: transparent;
  color: var(--tao-color-ink);
}

.th-form-nav__back:hover {
  border-color: color-mix(in srgb, var(--tao-color-brand) 40%, transparent);
  color: var(--tao-color-brand);
  background: color-mix(in srgb, var(--tao-color-brand) 6%, transparent);
}

.th-form-nav__next,
.th-form--steps .th-submit {
  margin-left: auto;
  border: 0;
  background: var(--tao-color-brand);
  color: #fff;
}

.th-form-nav__next:hover,
.th-form--steps .th-submit:hover {
  background: var(--tao-color-brand-dark, #56100e);
}

@media (max-width: 700px) {
  .th-form-grid,
  .th-form-step {
    grid-template-columns: 1fr;
  }

  /* 客户 9.18 首页移动端意见：三步指示器保持同一行 */
  .th-form-progress {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .th-form-progress__dot {
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    min-width: 0;
    min-height: 44px;
    padding: 9px 4px 12px;
  }

  .th-form-progress__label {
    min-width: 0;
    font-size: .55rem;
    letter-spacing: .05em;
    line-height: 1.25;
    /* button 默认 nowrap，会让「Intereses y presupuesto」撑出容器造成横向滚动 */
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .th-form-trust {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 26px;
  }

  .th-dates {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .th-dates__sep {
    display: none;
  }
}

/* ===== 修复（2026-09-22）：校验文案从页面加载起就常驻可见 =====
   PHP 输出的类名是 .th-error / .tao-error，而隐藏规则只写了 .th-field-error / .tao-field-error
   → 类名不匹配 → 所有「必填提示」永久显示（实测页面加载后即可见 "Indica tu nombre." 等 5 条）。
   这里补上实际类名的显示/隐藏规则：默认隐藏，仅在所属字段被标记 .invalid 时显示。 */
.th-error,
.tao-error {
  display: none;
}
.th-field.invalid .th-error,
.tao-field.invalid .tao-error,
.th-consent.invalid .th-error {
  display: block;
}

/* ===== 修复（2026-09-22）：成功弹窗提交后不显示 =====
   site.js 用 hidden 属性切换弹窗（showSuccess 里 el.hidden = false），
   但 CSS 只给了 .th-success { display: none }，没有配套的「非 hidden 时显示」规则
   → JS 已取消 hidden，元素仍被 display:none 挡住（实测 hidden=false 但 display:none、0×0）。
   改为属性驱动：hidden 时隐藏，非 hidden 时显示为遮罩层。 */
.th-success[hidden] {
  display: none !important;
}
.th-success:not([hidden]) {
  display: flex !important;
  align-items: center;
  justify-content: center;
}