.torch-form {
    max-width: 100%;
    margin: 0 auto;
    padding: 20px;
    box-sizing: border-box;
}

.torch-form * {
    box-sizing: border-box;
}

.torch-form-element-wrapper {
    margin-bottom: 20px;
}

.torch-form-label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
    color: #1d2327;
}

.torch-form-required-mark {
    color: #b32d2e;
    margin-left: 2px;
}

.torch-form-element-input input[type="text"],
.torch-form-element-input input[type="email"],
.torch-form-element-input input[type="password"],
.torch-form-element-input input[type="number"],
.torch-form-element-input input[type="tel"],
.torch-form-element-input input[type="url"],
.torch-form-element-input input[type="date"],
.torch-form-element-input input[type="time"],
.torch-form-element-input textarea,
.torch-form-element-input select {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #8c8f94;
    border-radius: 4px;
    font-size: 14px;
    line-height: 1.5;
    color: #2c3338;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.torch-form-element-input input:focus,
.torch-form-element-input textarea:focus,
.torch-form-element-input select:focus {
    outline: none;
    border-color: #2271b1;
    box-shadow: 0 0 0 2px rgba(34, 113, 177, 0.15);
}

.torch-form-element-input input.torch-form-has-errors,
.torch-form-element-input textarea.torch-form-has-errors,
.torch-form-element-input select.torch-form-has-errors {
    border-color: #b32d2e;
}

.torch-form-element-input textarea {
    min-height: 120px;
    resize: vertical;
}

.torch-form-description {
    margin-top: 5px;
    font-size: 13px;
    color: #50575e;
}

.torch-form-errors {
    margin-top: 8px;
    padding: 10px;
    background-color: #fce4ec;
    border-radius: 4px;
}

.torch-form-error {
    color: #b32d2e;
    font-size: 13px;
    margin: 0;
}

.torch-form-error + .torch-form-error {
    margin-top: 5px;
}

.torch-form-submit-wrapper {
    margin-top: 25px;
}

.torch-form-submit-button {
    padding: 12px 30px;
    background-color: #2271b1;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.torch-form-submit-button:hover {
    background-color: #135e96;
}

.torch-form-submit-button:focus {
    outline: 2px solid #2271b1;
    outline-offset: 2px;
}

.torch-form-submit-button:active {
    background-color: #0e4f7d;
}

.torch-form-submit-button:disabled {
    background-color: #a7aaad;
    color: #fff;
    cursor: not-allowed;
}

.torch-form-success {
    padding: 20px;
    background-color: #e8f5e9;
    border: 1px solid #81c784;
    border-radius: 4px;
    color: #1b5e20;
    text-align: center;
}

.torch-form-error-message {
    padding: 20px;
    background-color: #fce4ec;
    border: 1px solid #ef9a9a;
    border-radius: 4px;
    color: #b71c1c;
    text-align: center;
}

.torch-form-radio-group,
.torch-form-checkbox-group {
    margin-bottom: 10px;
}

.torch-form-radio-options,
.torch-form-checkbox-options {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.torch-form-radio-option,
.torch-form-checkbox-option {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.torch-form-radio-option input,
.torch-form-checkbox-option input {
    margin-right: 8px;
}

.torch-form-html {
    margin-bottom: 20px;
}

.tf-cond-hidden {
    display: none !important;
}

@media (max-width: 768px) {
    .torch-form {
        padding: 15px;
    }

    .torch-form-element-input input[type="text"],
    .torch-form-element-input input[type="email"],
    .torch-form-element-input input[type="password"],
    .torch-form-element-input input[type="number"],
    .torch-form-element-input input[type="tel"],
    .torch-form-element-input input[type="url"],
    .torch-form-element-input input[type="date"],
    .torch-form-element-input input[type="time"],
    .torch-form-element-input textarea,
    .torch-form-element-input select {
        padding: 10px 12px;
    }

    .torch-form-submit-button {
        width: 100%;
        padding: 14px 20px;
    }
}

/* ==========================================================================
   T1.4 多页前端样式
   设计原则：增强标记 .tf-mp 仅由 JS 添加；
   无 JS 时全部页面平铺、页内导航与进度指示隐藏，降级为单页完整表单
   ========================================================================== */

.torch-form {
    --tf-color-primary: #2271b1;
    --tf-color-primary-hover: #135e96;
    --tf-color-success: #46b450;
    --tf-color-text: #2c3338;
    --tf-color-text-muted: #50575e;
    --tf-color-border: #8c8f94;
    --tf-color-track: #e2e4e7;
    --tf-radius: 4px;
    --tf-transition: 0.2s ease;
}

/* ---------- 页面显隐：增强态仅显示当前页；无 JS 全部平铺 ---------- */

.tf-mp .torch-form-page {
    display: none;
}

.tf-mp .torch-form-page.tf-page-current {
    display: block;
}

/* ---------- 页面切换动画（forward 自右 / back 自左） ---------- */

.tf-mp .torch-form-page.tf-page-in {
    animation: tf-page-in 0.3s ease;
}

.tf-mp .torch-form-page.tf-page-in-back {
    animation: tf-page-in-back 0.3s ease;
}

@keyframes tf-page-in {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes tf-page-in-back {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .tf-mp .torch-form-page.tf-page-in,
    .tf-mp .torch-form-page.tf-page-in-back {
        animation: none;
    }
}

/* ---------- 页内导航：无 JS 隐藏（平铺提交）；JS 增强态显示 ---------- */

.torch-form-page-nav {
    display: none;
}

.tf-mp .torch-form-page-nav {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 25px;
}

.torch-form-nav-back,
.torch-form-nav-next {
    padding: 12px 30px;
    border-radius: var(--tf-radius);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--tf-transition), border-color var(--tf-transition);
}

.torch-form-nav-back {
    background-color: #f6f7f7;
    color: var(--tf-color-text);
    border: 1px solid var(--tf-color-border);
}

.torch-form-nav-back:hover {
    background-color: var(--tf-color-track);
}

.torch-form-nav-back:focus {
    outline: 2px solid var(--tf-color-primary);
    outline-offset: 2px;
}

.torch-form-nav-next {
    background-color: var(--tf-color-primary);
    color: #fff;
    border: none;
    /* 首页无 back 时 next 靠右 */
    margin-left: auto;
}

.torch-form-nav-next:hover {
    background-color: var(--tf-color-primary-hover);
}

.torch-form-nav-next:focus {
    outline: 2px solid var(--tf-color-primary);
    outline-offset: 2px;
}

/* ---------- 进度指示：仅增强态显示（无 JS 降级无进度概念） ---------- */

.torch-form-progress,
.torch-form-steps {
    display: none;
}

.tf-mp .torch-form-progress {
    display: block;
}

.tf-mp .torch-form-steps {
    display: flex;
}

/* ---------- 进度条（bar 模式：百分比填充） ---------- */

.torch-form-progress {
    position: relative;
    height: 24px;
    margin-bottom: 25px;
    background-color: var(--tf-color-track);
    border-radius: 12px;
    overflow: hidden;
}

.torch-form-progress-bar {
    height: 100%;
    width: 0;
    background-color: var(--tf-color-primary);
    border-radius: 12px;
    transition: width 0.3s ease;
}

.torch-form-progress-text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--tf-color-text);
}

/* ---------- 步骤条（steps 模式：可点击导航） ---------- */

.torch-form-steps {
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 25px;
    padding: 0;
    list-style: none;
}

.torch-form-steps li {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-bottom: 2px solid var(--tf-color-track);
    color: var(--tf-color-text-muted);
    font-size: 13px;
    cursor: pointer;
    transition: border-color var(--tf-transition), color var(--tf-transition);
}

.torch-form-steps li:hover {
    color: var(--tf-color-primary);
}

.torch-form-step-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    border-radius: 50%;
    background-color: var(--tf-color-track);
    color: var(--tf-color-text);
    font-size: 12px;
    font-weight: 600;
}

.torch-form-steps li.tf-step-current {
    border-bottom-color: var(--tf-color-primary);
    color: var(--tf-color-primary);
    font-weight: 600;
}

.torch-form-steps li.tf-step-current .torch-form-step-index {
    background-color: var(--tf-color-primary);
    color: #fff;
}

.torch-form-steps li.tf-step-done {
    border-bottom-color: var(--tf-color-success);
}

.torch-form-steps li.tf-step-done .torch-form-step-index {
    background-color: var(--tf-color-success);
    color: #fff;
}

/* 条件逻辑隐藏页对应的步骤项（JS 标记） */

.torch-form-steps li.tf-step-hidden {
    display: none;
}

/* ---------- 多页响应式 ---------- */

@media (max-width: 767px) {
    .torch-form-nav-back,
    .torch-form-nav-next {
        flex: 1;
        padding: 14px 20px;
    }

    /* 移动端步骤条仅显示序号，隐藏文案标签 */
    .torch-form-steps li {
        flex: 0 1 auto;
        gap: 0;
        padding: 8px 4px;
    }

    .torch-form-steps li .torch-form-step-label {
        display: none;
    }
}

/* ==========================================================================
   T1.5 row/column 响应式布局
   列宽经 --tf-col-width 百分比变量传递（column.php 输出），布局规则集中在
   本文件；桌面并列，≤767px 断点堆叠为单列
   ========================================================================== */

.torch-form-row {
    display: flex;
    flex-wrap: wrap;
    /* 抵消列内边距，使行边缘与表单对齐（经典负 margin 网格） */
    margin: 0 -10px;
}

.torch-form-col {
    flex: 1 1 0;
    /* 允许收缩，防止长内容（URL/邮箱等）撑破布局 */
    min-width: 0;
    padding: 0 10px;
}

/* 指定百分比宽度的列（--tf-col-width 由服务端按配置输出） */

.torch-form-col[style*="--tf-col-width"] {
    flex: 0 0 var(--tf-col-width);
    max-width: var(--tf-col-width);
}

/* 断点堆叠：≤767px 全部列降为单列 */

@media (max-width: 767px) {
    .torch-form-row {
        flex-direction: column;
    }

    .torch-form-col,
    .torch-form-col[style*="--tf-col-width"] {
        flex: 1 1 auto;
        max-width: 100%;
    }
}

/* ==========================================================================
   T1.8 name 复合元素：子字段并列布局，≤767px 堆叠
   ========================================================================== */

.torch-form-name-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.torch-form-name-field {
    flex: 1 1 0;
    min-width: 120px;
}

.torch-form-sublabel {
    display: block;
    margin-bottom: 4px;
    font-size: 0.85em;
    color: var(--tf-color-muted, #666);
}

.torch-form-name-field .torch-form-input {
    width: 100%;
}

@media (max-width: 767px) {
    .torch-form-name-fields {
        flex-direction: column;
    }

    .torch-form-name-field {
        min-width: 0;
    }
}

/* ------------------------------------------------------------------
 * Wave 8.3: Theme System
 * CSS Custom Properties 兜底 + 与主题类协同工作
 * 变量由 TorchForm_Theme::generateCss() 在 :root 输出，
 * 此处仅提供 fallback 默认值与基于变量的样式覆盖。
 * ------------------------------------------------------------------ */

.torch-form-wrap {
    /* Fallbacks：未输出主题 CSS 时使用 blue 默认配色 */
    --tf-color-primary: #2271b1;
    --tf-color-primary-hover: #135e96;
    --tf-color-accent: #72aee6;
    --tf-color-bg: #ffffff;
    --tf-color-text: #3c434a;
    --tf-color-border: #dcdcde;
    --tf-radius: 6px;
    --tf-padding-y: 10px;
    --tf-padding-x: 14px;
    --tf-font-size: 14px;
    --tf-label-margin: 6px;
}

.torch-form-wrap,
.torch-form {
    background: var(--tf-color-bg);
    color: var(--tf-color-text);
}

.torch-form-label {
    color: var(--tf-color-text);
    margin-bottom: var(--tf-label-margin);
}

.torch-form-element-input input[type="text"],
.torch-form-element-input input[type="email"],
.torch-form-element-input input[type="password"],
.torch-form-element-input input[type="number"],
.torch-form-element-input input[type="tel"],
.torch-form-element-input input[type="url"],
.torch-form-element-input input[type="date"],
.torch-form-element-input input[type="time"],
.torch-form-element-input textarea,
.torch-form-element-input select {
    padding: var(--tf-padding-y) var(--tf-padding-x);
    border: 1px solid var(--tf-color-border);
    border-radius: var(--tf-radius);
    font-size: var(--tf-font-size);
    color: var(--tf-color-text);
    background: var(--tf-color-bg);
}

.torch-form-button,
.torch-form-submit,
.torch-form-submit-wrapper button,
button.torch-form-button {
    background-color: var(--tf-color-primary);
    border-color: var(--tf-color-primary);
    border-radius: var(--tf-radius);
    color: #ffffff;
    padding: var(--tf-padding-y) var(--tf-padding-x);
    font-size: var(--tf-font-size);
    transition: background-color 0.2s ease;
}

.torch-form-button:hover,
.torch-form-submit:hover,
.torch-form-submit-wrapper button:hover,
button.torch-form-button:hover {
    background-color: var(--tf-color-primary-hover);
    border-color: var(--tf-color-primary-hover);
}

/* GDPR consent 特殊样式 */
.torch-form-gdpr-consent {
    background: var(--tf-color-bg);
    border: 1px solid var(--tf-color-border);
    border-radius: var(--tf-radius);
    padding: var(--tf-padding-y) var(--tf-padding-x);
    margin-bottom: 16px;
}

.torch-form-gdpr-consent-label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    cursor: pointer;
    font-size: var(--tf-font-size);
    color: var(--tf-color-text);
}

.torch-form-gdpr-consent-label input[type="checkbox"] {
    margin-top: 4px;
    flex-shrink: 0;
}

.torch-form-gdpr-consent-text {
    line-height: 1.5;
}

.torch-form-gdpr-consent-text a {
    color: var(--tf-color-primary);
}

/* hCaptcha / CAPTCHA widget 容器 */
.torch-form-element-recaptcha .h-captcha,
.torch-form-element-recaptcha .g-recaptcha,
.torch-form-element-recaptcha .cf-turnstile {
    margin-top: 4px;
}