/**
 * Clusterbeheer — Fluent Forms style overrides.
 *
 * Brand-token driven: every accent uses `var(--wp--preset--color--primary)`
 * (theme.json palette slug `primary` = #e97563). Mirrors the live reference
 * (stichtingclusterbeheerbrl9348.nl) form layout: full-width inputs in a single
 * column, large full-width orange submit button.
 *
 * Loaded with `array('fluent-form-styles', 'fluentform-public-default')` deps
 * so it cascades AFTER Fluent Forms' own CSS.
 */

/* Labels — bold above each input, brand-token color */
.fluentform .ff-el-input--label label,
.fluentform label.ff-el-form-control {
	font-weight: 700 !important;
	margin-bottom: 8px !important;
	color: var(--wp--preset--color--industrial-dark, #1C1C1C);
	font-size: 14px;
}

/* Inputs — full-width, generous padding, white background, subtle border */
.fluentform input[type="text"],
.fluentform input[type="email"],
.fluentform input[type="tel"],
.fluentform input[type="password"],
.fluentform textarea {
	border-radius: 8px !important;
	padding: 12px 16px !important;
	line-height: 1.5 !important;
	color: var(--wp--preset--color--industrial-dark, #1C1C1C) !important;
	border: 1px solid rgba(28, 28, 28, 0.1) !important;
	background: #ffffff !important;
	font-family: inherit;
	font-size: 16px !important;
	width: 100% !important;
	max-width: 100% !important;
	transition: border-color 0.2s, box-shadow 0.2s;
}

.fluentform textarea {
	min-height: 120px;
	resize: vertical;
}

/* Focus state — brand orange */
.fluentform input:focus,
.fluentform textarea:focus {
	border-color: var(--wp--preset--color--primary, #e97563) !important;
	outline: 0 !important;
	box-shadow: 0 0 0 3px rgba(233, 117, 99, 0.15) !important;
}

/* Submit button — large, full-width, brand orange */
.fluentform .ff-btn-submit,
.fluentform button[type="submit"],
.fluentform .ff-el-input--content button[type="submit"] {
	background-color: var(--wp--preset--color--primary, #e97563) !important;
	color: #ffffff !important;
	font-weight: 700 !important;
	font-size: 18px !important;
	text-decoration: none !important;
	border: 0 !important;
	border-radius: 8px !important;
	padding: 16px 24px !important;
	width: 100% !important;
	max-width: 100% !important;
	line-height: 1.2 !important;
	cursor: pointer;
	transition: background-color 0.2s, transform 0.1s, box-shadow 0.2s;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.fluentform .ff-btn-submit:hover,
.fluentform button[type="submit"]:hover {
	background-color: rgba(233, 117, 99, 0.9) !important;
	box-shadow: 0 4px 12px rgba(233, 117, 99, 0.25);
}

.fluentform .ff-btn-submit:active,
.fluentform button[type="submit"]:active {
	transform: translateY(1px);
}

/* Submit row — full-width container; cancel any float/right-align */
.fluentform .ff_submit_btn_wrapper,
.fluentform .ff-el-group.ff-text-,
.fluentform .ff-el-group.ff-text-right {
	display: block !important;
	width: 100% !important;
	text-align: left !important;
	float: none !important;
	clear: both;
}

.fluentform .ff_btn_style {
	float: none !important;
}

/* Group spacing — one input per row, breathing room */
.fluentform .ff-el-group {
	margin-bottom: 20px;
	width: 100%;
	display: block;
	clear: both;
}

/* Name field native FF table — keep single-column for our form */
.fluentform .ff-t-container {
	display: block;
	width: 100%;
}
.fluentform .ff-t-cell {
	width: 100%;
	display: block;
	margin-bottom: 0;
}
.fluentform .ff-t-cell input {
	width: 100% !important;
	max-width: 100% !important;
}

/* Required-field asterisk — keep red marker */
.fluentform .ff-el-is-required.asterisk-right label::after {
	content: " *";
	color: var(--wp--preset--color--primary, #e97563);
	margin-left: 2px;
}

/* Error state */
.fluentform .ff-el-form-control.error,
.fluentform input.error,
.fluentform textarea.error {
	border-color: #dc2626 !important;
}

.fluentform .error-container,
.fluentform .text-danger {
	color: #dc2626;
	font-size: 13px;
	margin-top: 4px;
}