/**
 * Fluent Forms, restyled to the Sumi & Kin system.
 *
 * The plugin ships its own blue button and its own input styling, which read as
 * a bolted-on third-party form. Overriding it here rather than in the plugin
 * means an update cannot revert the design.
 */

.fluentform .ff-el-input--label label {
	font-family: var(--sk-font-body);
	font-size: var(--sk-text-sm);
	font-weight: 700;
	color: var(--sk-ink);
}

.fluentform .ff-el-form-control {
	padding: 12px 14px;
	/* A hairline is decorative; a field boundary must clear 3:1 (WCAG 1.4.11). */
	border: 1px solid var(--sk-line-strong);
	border-radius: var(--sk-radius-sm);
	font-family: var(--sk-font-body);
	font-size: var(--sk-text-base);
	color: var(--sk-ink);
	background: #fff;
	box-shadow: none;
}

.fluentform .ff-el-form-control:focus {
	border-color: var(--sk-ink);
	outline: 3px solid var(--sk-focus);
	outline-offset: 1px;
	box-shadow: none;
}

.fluentform .ff-el-is-error .ff-el-form-control {
	border-color: #b3261e;
}

.fluentform .error-text,
.fluentform .text-danger {
	color: #b3261e;
	font-size: var(--sk-text-sm);
	font-weight: 600;
}

.fluentform .ff-el-input--label.ff-el-is-required label::after {
	color: #b3261e;
}

.fluentform .ff-btn-submit,
.fluentform button.ff-btn-submit {
	padding: 15px 28px;
	background: linear-gradient(135deg, var(--sk-kin-2), var(--sk-kin));
	border: 2px solid transparent;
	border-radius: var(--sk-radius-pill);
	color: #fff;
	font-family: var(--sk-font-body);
	font-size: 15px;
	font-weight: 700;
	box-shadow: var(--sk-shadow-gold);
	transition: transform var(--sk-transition), box-shadow var(--sk-transition);
}

.fluentform .ff-btn-submit:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 28px rgba(191, 153, 51, 0.35);
}

.fluentform .ff-message-success {
	padding: 16px;
	background: var(--sk-bg-alt);
	border-left: 3px solid var(--sk-kin-2);
	border-radius: var(--sk-radius-sm);
	color: var(--sk-ink);
}

@media (prefers-reduced-motion: reduce) {
	.fluentform .ff-btn-submit:hover {
		transform: none;
	}
}