/* Compatible IT Solutions — Fluent Forms theming
   ------------------------------------------------------------------
   Fluent Forms (6.2.x) ships its own `fluentform-public-default.css`.
   It exposes a handful of CSS variables on `:root` (primary colour,
   border colour/radius, …) but the SUBMIT BUTTON colour is hard-coded
   (#007bff), not variable-driven — so it must be overridden directly.

   Everything here is written to win regardless of stylesheet load
   order: variables are set on `.ff-default` (nearer the elements than
   the plugin's `:root`), and the button rules carry a `body` prefix to
   out-specify the plugin's `.ff-default .ff-btn-primary …` selectors. */

/* ── Map Fluent Forms variables onto the theme palette ──
   Scoped to the form wrapper so descendants inherit these instead of
   the plugin's :root defaults, no matter which stylesheet loads last. */
.ff-default {
	--fluentform-primary: var(--main-color);   /* focus ring, accents, checkboxes */
	--fluentform-secondary: var(--color-two);  /* field text colour (navy) */
	--fluentform-border-color: transparent;    /* borderless fields like the mockup */
	--fluentform-border-radius: 30px;          /* pill-shaped fields */
}

/* ── Fields: white, rounded, roomy ──
   The plugin only sets a background on :focus, so at rest the field is
   transparent and the dark section shows through. Give it a solid white
   fill and more breathing room. */
.ff-default .ff-el-form-control {
	background-color: var(--white-color);
	padding: 14px 24px;
	line-height: 1.5;
	height: auto;
}

.ff-default .ff-el-form-control::placeholder {
	color: rgba(var(--color-two-rgb), 0.55);
	opacity: 1; /* Firefox dims placeholders by default */
}

/* Keep the white fill on focus (plugin already does this) and show the
   brand-blue border the mapped --fluentform-primary now provides. */
.ff-default .ff-el-form-control:focus {
	background-color: var(--white-color);
	box-shadow: 0 0 0 3px rgba(var(--main-color-rgb), 0.15);
}

/* ── Submit button: match the theme buttons (`.btn-style-one`) ──
   Same pill shape and left-to-right gradient wipe on hover. `body`
   prefix beats the plugin's hard-coded primary-button colours. */
body .ff-default .ff-btn-submit,
body .ff-default .ff-btn-primary:not(.ff_btn_no_style) {
	position: relative;
	overflow: hidden;
	border: none;
	border-radius: 50px;
	padding: 16px 40px;
	font-weight: 500;
	letter-spacing: 1px;
	color: var(--white-color);
	background-color: var(--main-color);
	background-image: linear-gradient(
		to right,
		var(--color-two) 0,
		var(--color-two) 50%,
		var(--main-color) 50%,
		var(--main-color) 100%
	);
	background-size: 200% 100%;
	background-position: 100% 0;
	transition: background-position 0.4s ease;
}

body .ff-default .ff-btn-submit:hover,
body .ff-default .ff-btn-submit:focus,
body .ff-default .ff-btn-primary:not(.ff_btn_no_style):hover,
body .ff-default .ff-btn-primary:not(.ff_btn_no_style):focus {
	background-position: 0 0;
	color: var(--white-color);
}