/*
 * NexoFlow Form - self-contained design tokens (brand-aligned)
 * 颜色/圆角/字体与 SaaS 官方设计系统对齐（主色 #2563EB / Inter / 12px 圆角）
 * 作用域限定在 .nexoflow-form 内，第三方站点无需加载 website.css 也能正常渲染。
 */

.nexoflow-form {
    --nf-primary: var(--nfx-brand-color, #2563EB);
    --nf-primary-700: var(--nfx-brand-secondary, #1D4ED8);
    --nf-primary-50: #EFF4FD;
    --nf-text: #0F172A;
    --nf-muted: #64748B;
    --nf-border: rgba(14,35,80,.10);
    --nf-surface: #F8FAFC;
    --nf-surface-2: #F1F5F9;
    --nf-success: #05b169;
    --nf-success-text: #08754A;
    --nf-danger: #cf202f;
    --nfx-radius-lg: 12px;
    --nfx-radius-sm: 6px;
    --nf-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
    --nf-shadow: 0 1px 3px rgba(37, 99, 235, 0.08), 0 1px 2px rgba(37, 99, 235, 0.06);
    --nf-space-2: 8px;
    --nf-space-3: 12px;
    --nf-space-4: 16px;
    --nf-space-6: 24px;

    font-family: var(--nf-font);
    color: var(--nf-text);
    -webkit-font-smoothing: antialiased;
    max-width: var(--nf-max-width, 640px);
    margin: 0 auto;
    box-sizing: border-box;
}

.nexoflow-form *,
.nexoflow-form *::before,
.nexoflow-form *::after {
    box-sizing: border-box;
}

/* === Progress (stepped) === */
.nexoflow-form-progress {
    display: flex;
    align-items: center;
    gap: var(--nf-space-2);
    margin-bottom: var(--nf-space-6);
}

.nexoflow-form-progress-dot {
    flex: 1;
    height: 6px;
    border-radius: var(--nfx-radius-sm, 6px);
    background: var(--nf-border);
    transition: background 0.2s ease;
}

.nexoflow-form-progress-dot.active {
    background: var(--nf-primary);
}

.nexoflow-form-progress-dot.done {
    background: var(--nf-primary-700);
}

/* === Steps === */
.nexoflow-form-steps {
    position: relative;
}

.nexoflow-form-step {
    display: none;
}

.nexoflow-form-step.active {
    display: block;
    animation: nf-form-fade 0.2s ease;
}

@keyframes nf-form-fade {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* === Fields === */
.nexoflow-form-field {
    margin-bottom: var(--nf-space-4);
}

.nexoflow-form-field label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--nf-text);
    margin-bottom: 4px;
}

.nexoflow-form-field input[type="text"],
.nexoflow-form-field input[type="email"],
.nexoflow-form-field input[type="tel"],
.nexoflow-form-field input[type="url"],
.nexoflow-form-field input[type="number"],
.nexoflow-form-field textarea,
.nexoflow-form-field select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--nf-border);
    border-radius: var(--nfx-radius-sm);
    font-size: 0.9375rem;
    font-family: var(--nf-font);
    color: var(--nf-text);
    background: var(--nfx-bg-surface,#fff);
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.nexoflow-form-field input:focus,
.nexoflow-form-field textarea:focus,
.nexoflow-form-field select:focus {
    border-color: var(--nf-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.nexoflow-form-field textarea {
    resize: vertical;
}

.nexoflow-form-field-error label {
    color: var(--nf-danger);
}

.nexoflow-form-field-error input,
.nexoflow-form-field-error textarea,
.nexoflow-form-field-error select {
    border-color: var(--nf-danger);
}

.nexoflow-form-field-error::after {
    content: attr(data-error);
    display: block;
    margin-top: 4px;
    font-size: 0.75rem;
    color: var(--nf-danger);
}

/* === Help text === */
.nexoflow-form-help {
    display: block;
    margin-top: 4px;
    font-size: 0.75rem;
    color: var(--nf-muted);
    line-height: 1.4;
}

/* === Buttons === */
.nexoflow-form-next,
.nexoflow-form-prev,
.nexoflow-form-submit {
    padding: var(--nf-space-3) var(--nf-space-6);
    border-radius: var(--nfx-radius-sm);
    font-size: 0.9375rem;
    font-weight: 600;
    font-family: var(--nf-font);
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.15s ease;
}

.nexoflow-form-submit {
    background: var(--nf-primary);
    color: var(--nfx-bg-surface,#fff);
    border-color: var(--nf-primary);
    width: 100%;
}

.nexoflow-form-submit:hover:not(:disabled) {
    background: var(--nf-primary-700);
    border-color: var(--nf-primary-700);
}

.nexoflow-form-submit:disabled {
    opacity: 0.6;
    cursor: progress;
}

.nexoflow-form-next,
.nexoflow-form-prev {
    background: var(--nf-surface);
    color: var(--nf-primary);
    border-color: var(--nf-border);
}

.nexoflow-form-next:hover,
.nexoflow-form-prev:hover {
    background: var(--nf-surface-2);
    border-color: var(--nf-primary);
}

.nexoflow-form-next:focus-visible,
.nexoflow-form-prev:focus-visible,
.nexoflow-form-submit:focus-visible {
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

/* === Message === */
.nexoflow-form-message {
    display: none;
    margin-top: var(--nf-space-4);
    padding: var(--nf-space-3) var(--nf-space-4);
    border-radius: var(--nfx-radius-sm);
    font-size: 0.9375rem;
}

.nexoflow-form-message.success {
    display: block;
    background: #E7F5E9;
    color: var(--nf-success-text, #08754A);
    border: 1px solid #BFE6C8;
}

.nexoflow-form-message.error {
    display: block;
    background: #FEF2F2;
    color: var(--nf-danger);
    border: 1px solid #F5C2C7;
}

/* === File upload === */
.nexoflow-form-file {
    width: 100%;
    padding: 8px;
    border: 1px dashed var(--nf-border);
    border-radius: var(--nfx-radius-sm);
    font-size: 0.875rem;
    background: var(--nf-surface);
    cursor: pointer;
}

.nexoflow-form-file-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--nf-space-2);
    margin-top: var(--nf-space-2);
}

.nexoflow-form-file-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: var(--nf-primary-50);
    color: var(--nf-primary);
    border-radius: 6px;
    font-size: 0.8125rem;
}

.nexoflow-form-file-remove {
    cursor: pointer;
    font-weight: 700;
    line-height: 1;
}

@media (prefers-reduced-motion: reduce) {
    .nexoflow-form * {
        transition: none !important;
        animation: none !important;
    }
}