.frm-fluent-form {
font-family: var(--font-body);
max-width: 100%;
}
.frm-fluent-form .ff-el-input--label label {
font-size: var(--text-small);
font-weight: var(--font-weight-medium);
color: var(--color-text);
margin-bottom: var(--space-2);
display: inline-block;
}
.frm-fluent-form .ff-el-is-required label::after {
content: ' *';
color: var(--color-error);
}
.frm-fluent-form .ff-el-form-control {
width: 100%;
font-family: var(--font-body);
font-size: var(--text-body);
padding: var(--space-3);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
color: var(--color-text);
background: var(--color-surface);
transition: border-color var(--motion-fast) var(--motion-ease);
}
.frm-fluent-form .ff-el-form-control:focus {
outline: none;
border-color: var(--color-action);
box-shadow: 0 0 0 3px var(--color-primary-50);
}
.frm-fluent-form textarea.ff-el-form-control {
min-height: 120px;
resize: vertical;
}
.frm-fluent-form .ff-el-group {
margin-bottom: var(--space-4);
}
.frm-fluent-form .ff-btn-submit {
font-family: var(--font-body);
font-weight: var(--font-weight-medium);
font-size: var(--text-body);
background: var(--color-action);
color: var(--color-text-inverse);
border: none;
border-radius: var(--radius-md);
padding: var(--space-3) var(--space-6);
cursor: pointer;
transition: background-color var(--motion-fast) var(--motion-ease);
}
.frm-fluent-form .ff-btn-submit:hover {
background: var(--color-action-hover);
color: var(--color-text-inverse);
} .frm-fluent-form .error,
.frm-fluent-form .ff-el-form-control.is-invalid {
border-color: var(--color-error);
}
.frm-fluent-form .error-message,
.frm-fluent-form .ff-error-message {
color: var(--color-error);
font-size: var(--text-caption);
margin-top: var(--space-1);
}
.frm-fluent-form .ff-message-success {
color: var(--color-success);
background: var(--color-success-bg);
padding: var(--space-4);
border-radius: var(--radius-md);
}