/*
 * Fluent Forms integration for Elect.
 * Keep plugin-specific selectors here so another form plugin can be swapped later.
 */

:where(.elect-pattern, .elect-hero-clean, .site-content, .entry-content) :where(.fluentform, .fluent_form_shortcode, .ff-default) {
	--elect-form-bg: var(--elect-box-surface-bg, var(--elect-page-bg));
	--elect-form-bg-rgb: var(--elect-box-surface-bg-rgb, var(--elect-page-bg-rgb));
	--elect-form-text: var(--elect-box-surface-text, var(--elect-body-text));
	--elect-form-heading: var(--elect-box-surface-heading, var(--elect-heading-color));
	--elect-form-border: var(--elect-box-surface-border, var(--elect-border-color));
	--elect-form-border-rgb: var(--elect-box-surface-border-rgb, var(--elect-border-color-rgb));
	--elect-form-accent: var(--elect-primary-accent);
	--elect-form-accent-rgb: var(--elect-primary-accent-rgb);
	color: var(--elect-form-text);
	font-family: var(--elect-body-font);
	font-size: var(--elect-body-size);
	line-height: var(--elect-body-line-height, 1.6);
}

:where(.fluentform, .fluent_form_shortcode, .ff-default) :where(form, .frm-fluent-form) {
	margin: 0;
}

:where(.fluentform, .fluent_form_shortcode, .ff-default) :where(.ff-el-group) {
	margin-bottom: 1rem;
}

:where(.fluentform, .fluent_form_shortcode, .ff-default) :where(.ff-el-input--label, .ff-el-group label) {
	color: var(--elect-form-heading);
	font-family: var(--elect-heading-font);
	font-size: calc(var(--elect-body-size) * 0.86);
	font-weight: 800;
	line-height: 1.25;
}

:where(.fluentform, .fluent_form_shortcode, .ff-default) :where(.ff-el-input--label label) {
	margin-bottom: 0.42rem;
	color: inherit;
}

:where(.fluentform, .fluent_form_shortcode, .ff-default) :where(.ff-el-input--label .required, .ff-el-is-required.asterisk-right label::after) {
	color: var(--elect-form-accent);
}

:where(.fluentform, .fluent_form_shortcode, .ff-default) :where(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], input[type="date"], input[type="time"], input[type="password"], select, textarea, .ff-el-form-control) {
	width: 100%;
	min-height: 3.15rem;
	padding: 0.85rem 1rem;
	border: 1px solid rgba(var(--elect-form-border-rgb), 0.9);
	border-radius: 8px;
	background: rgba(var(--elect-form-bg-rgb), 0.96);
	box-shadow: none;
	color: var(--elect-form-heading);
	font-family: var(--elect-body-font);
	font-size: var(--elect-body-size);
	line-height: 1.35;
	transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

:where(.fluentform, .fluent_form_shortcode, .ff-default) :where(textarea, textarea.ff-el-form-control) {
	min-height: 8.5rem;
	resize: vertical;
}

:where(.fluentform, .fluent_form_shortcode, .ff-default) :where(input::placeholder, textarea::placeholder) {
	color: rgba(var(--elect-box-surface-text-rgb, var(--elect-body-text-rgb)), 0.62);
	opacity: 1;
}

:where(.fluentform, .fluent_form_shortcode, .ff-default) :where(input:focus, select:focus, textarea:focus, .ff-el-form-control:focus) {
	border-color: var(--elect-form-accent);
	background: var(--elect-form-bg);
	box-shadow: 0 0 0 3px rgba(var(--elect-form-accent-rgb), 0.18);
	outline: 0;
}

:where(.fluentform, .fluent_form_shortcode, .ff-default) :where(.ff-el-form-check, .ff-el-form-check-label) {
	color: var(--elect-form-text);
	font-family: var(--elect-body-font);
	font-size: calc(var(--elect-body-size) * 0.94);
	line-height: 1.45;
}

:where(.fluentform, .fluent_form_shortcode, .ff-default) :where(input[type="checkbox"], input[type="radio"]) {
	accent-color: var(--elect-form-accent);
}

:where(.fluentform, .fluent_form_shortcode, .ff-default) :where(.ff-btn-submit, button[type="submit"], input[type="submit"]) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 3rem;
	padding: 0.9rem 1.35rem;
	border: 0;
	border-radius: var(--elect-button-radius, 8px);
	background: var(--elect-button-bg);
	box-shadow: none;
	color: var(--elect-button-text);
	font-family: var(--elect-button-font);
	font-size: var(--elect-button-size);
	font-weight: 800;
	line-height: 1.15;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 160ms ease, color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

:is(.elect-pattern, .elect-hero-clean, .site-content, .entry-content) :is(.fluentform, .fluent_form_shortcode, .ff-default, .frm-fluent-form) :is(.ff-btn, .ff-btn-submit, .ff-btn-primary, button[type="submit"], input[type="submit"]) {
	border-color: transparent !important;
	background: var(--elect-button-bg) !important;
	background-color: var(--elect-button-bg) !important;
	box-shadow: none !important;
	color: var(--elect-button-text) !important;
	font-family: var(--elect-button-font) !important;
	font-size: var(--elect-button-size) !important;
	font-weight: 800 !important;
}

:where(.fluentform, .fluent_form_shortcode, .ff-default) :where(.ff-btn-submit:hover, .ff-btn-submit:focus-visible, button[type="submit"]:hover, button[type="submit"]:focus-visible, input[type="submit"]:hover, input[type="submit"]:focus-visible) {
	background: var(--elect-button-bg-hover);
	color: var(--elect-button-text-hover);
	transform: translateY(-1px);
}

:is(.elect-pattern, .elect-hero-clean, .site-content, .entry-content) :is(.fluentform, .fluent_form_shortcode, .ff-default, .frm-fluent-form) :is(.ff-btn, .ff-btn-submit, .ff-btn-primary, button[type="submit"], input[type="submit"]):is(:hover, :focus-visible) {
	background: var(--elect-button-bg-hover) !important;
	background-color: var(--elect-button-bg-hover) !important;
	color: var(--elect-button-text-hover) !important;
}

:where(.fluentform, .fluent_form_shortcode, .ff-default) :where(.ff-el-is-error input, .ff-el-is-error select, .ff-el-is-error textarea, .ff-el-is-error .ff-el-form-control) {
	border-color: #d64545;
	box-shadow: 0 0 0 3px rgba(214, 69, 69, 0.12);
}

:where(.fluentform, .fluent_form_shortcode, .ff-default) :where(.error, .text-danger, .ff-el-is-error .ff-el-help-message) {
	margin-top: 0.38rem;
	color: #d64545;
	font-size: calc(var(--elect-body-size) * 0.82);
}

:where(.fluentform, .fluent_form_shortcode, .ff-default) :where(.ff-message-success, .ff_success_message) {
	padding: 1rem 1.1rem;
	border: 1px solid rgba(31, 157, 85, 0.32);
	border-radius: 8px;
	background: rgba(31, 157, 85, 0.1);
	color: #137044;
	font-weight: 700;
}

:where(.fluentform, .fluent_form_shortcode, .ff-default) :where(.ff-el-progress-bar) {
	background: var(--elect-form-accent);
}

@media (max-width: 640px) {
	:where(.fluentform, .fluent_form_shortcode, .ff-default) :where(.ff-btn-submit, button[type="submit"], input[type="submit"]) {
		width: 100%;
	}
}