/*
 * Fluent Forms in MDS clothing.
 *
 * Fluent ships its own look: a blue #1a7efb button, 7px corners and the system font stack. The site
 * uses Arial, square corners and the terracotta accent, and Woodmart draws its inputs 46px tall with
 * a 2px translucent border. Left alone, a migrated form reads as a different website embedded in a
 * page — which is what the visitor notices, not that the plugin changed.
 *
 * Everything is scoped under `.fluentform` so nothing here can reach the checkout or the search bar.
 * Measured against the live theme on 2026-09-09, not chosen by eye.
 */

.fluentform {
	--mds-ff-accent: #e06132;
	--mds-ff-border: rgba(0, 0, 0, 0.1);
	--mds-ff-muted: #767676;
}

/*
 * Rhythm, measured against the live Formidable form on mdsterasos.lt/kontaktai rather than chosen:
 * label 15px bold, input 42px on white, 20px between groups, filled terracotta button. The rule for
 * this migration is that nothing may come out worse than what it replaces, so those are the numbers
 * unless there is a reason to beat them — the label is 14px because 15 above a 14px input reads as
 * a heading, and the input keeps a hairline border because ours also sit on white pages, where the
 * live form's borderless field would vanish.
 */
/*
 * Side padding. Measured on the home page: the panel gives 5px, the heading widget adds 15px of its
 * own, and the form widget adds none — so the fields ran 15px wider than the title above them and
 * touched the grey edge. The form takes the same 15px, which lines the fields up with their heading
 * and keeps them off the panel wall.
 */
.fluentform {
	padding-left: 15px;
	padding-right: 15px;
}

.fluentform .ff-el-group {
	margin-bottom: 20px;
}

.fluentform .ff-el-input--label {
	margin-bottom: 6px;
}

.fluentform .ff-el-input--label label {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px !important;
	font-weight: 700;
	line-height: 1.4;
	color: #312319;
}

/* Fluent's default asterisk is its own red — the only red on the page — and it declares it with
   enough weight that matching specificity is not enough. */
.fluentform .ff-el-is-required.asterisk-left label::before,
.fluentform .ff-el-is-required.asterisk-right label::after {
	color: var(--mds-ff-accent) !important;
}

.fluentform .ff-el-form-control {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #000;
	/* White like the live form. Its fields carry no border at all, which works because it sits on
	   grey; ours also appear on white pages, so they keep a hairline. */
	background: #fff;
	border: 1px solid var(--mds-ff-border);
	border-radius: 0;
	min-height: 42px;
	padding: 8px 12px;
	box-shadow: none;
}

.fluentform textarea.ff-el-form-control {
	min-height: 110px;
	line-height: 1.5;
}

/* The button is an action, not another field — it gets air above it and none of the width. */
.fluentform .ff-el-group.ff_submit_btn_wrapper {
	margin-top: 4px;
	margin-bottom: 0;
}

.fluentform .ff-el-form-control:focus {
	border-color: var(--mds-ff-accent);
	outline: none;
	box-shadow: none;
}

.fluentform .ff-el-form-control::placeholder {
	color: var(--mds-ff-muted);
}

/* The submit button follows the USP cards: outline at rest, filled on hover. */
.fluentform .ff-btn-submit {
	display: inline-block;
	/* Filled, like the live one. An outline button in the same slot would be a weaker call to
	   action than what it replaces. */
	background: var(--mds-ff-accent);
	border: 2px solid var(--mds-ff-accent);
	color: #fff;
	border-radius: 0;
	padding: 11px 24px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	box-shadow: none;
	transition: background 0.15s ease, color 0.15s ease;
}

.fluentform .ff-btn-submit:hover,
.fluentform .ff-btn-submit:focus {
	background: #c9522a;
	border-color: #c9522a;
	color: #fff;
}

.fluentform .ff-el-is-error .ff-el-form-control {
	border-color: var(--mds-ff-accent);
}

.fluentform .error.text-danger,
.fluentform .ff-el-is-error .error {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: var(--mds-ff-accent);
}

.ff-message-success {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #000;
	background: #fdf0e9;
	border: 2px solid var(--mds-ff-accent);
	border-radius: 0;
	padding: 16px 20px;
}

/* The rating and the slider came over from Formidable and arrive in Fluent's own colours — grey
   stars that look disabled, and a blue slider that would be the only blue on the page. */
.fluentform .ff-el-ratings label,
.fluentform .ff-el-ratings span {
	color: #d8cec7;
}

.fluentform .ff-el-ratings label.active,
.fluentform .ff-el-ratings label:hover,
.fluentform .ff-el-ratings span.active,
.fluentform .ff-el-ratings:hover span {
	color: var(--mds-ff-accent);
}

.fluentform input[type="range"] {
	accent-color: var(--mds-ff-accent);
}

/* The upload button is a button, so it follows the submit button rather than staying a grey slab. */
.fluentform .ff_upload_btn.ff-btn {
	background: #fff;
	border: 2px solid var(--mds-ff-accent);
	color: var(--mds-ff-accent);
	border-radius: 0;
	padding: 10px 22px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
}

.fluentform .ff_upload_btn.ff-btn:hover {
	background: var(--mds-ff-accent);
	color: #fff;
}

/*
 * Compact variant, for a form that has to sit in a row beside fixed-height cards.
 *
 * The home page inquiry stands 585px against 460px cards. Five fields, a heading and a button do
 * not fit into 460 at the site's own type sizes, so this recovers about 90 of the 125 and stops
 * there: going further would mean type smaller than the rest of the page, which is a worse trade
 * than a row that is slightly uneven.
 *
 * Applied by adding `mds-ff-compact` to the form widget's CSS classes in Elementor, so it stays a
 * per-page decision rather than something every form inherits. Elementor puts that class on the
 * widget wrapper, not on the form, so the selectors reach down rather than sitting on `.fluentform`.
 */
.mds-ff-compact .fluentform .ff-el-group {
	margin-bottom: 12px;
}

.mds-ff-compact .fluentform .ff-el-input--label {
	margin-bottom: 4px;
}

.mds-ff-compact .fluentform .ff-el-input--label label {
	font-size: 13px !important;
	line-height: 1.25;
}

.mds-ff-compact .fluentform .ff-el-form-control {
	/* Woodmart sets a fixed `height` on inputs, so `min-height` alone changes nothing. */
	height: auto;
	min-height: 38px;
	padding: 7px 12px;
}

.mds-ff-compact .fluentform .ff-btn-submit {
	padding: 9px 20px;
}

/*
 * Dark-panel variant.
 *
 * One page puts the form on the green panel — `terasos-irengimo-kaina`, rgb(43, 95, 81) — where the
 * dark label colour is unreadable. The live Formidable form printed white labels there through its
 * own per-form styling, which is exactly the thing this migration removes, so the same result has
 * to be asked for explicitly.
 *
 * Applied with `mds-ff-on-dark` in the widget's CSS classes, like the compact variant. CSS cannot
 * see what colour is behind an element, so this stays a decision someone makes per page.
 */
.mds-ff-on-dark .fluentform .ff-el-input--label label {
	color: #fff;
}

.mds-ff-on-dark .fluentform .ff-el-form-control {
	border-color: rgba(255, 255, 255, 0.35);
}

.mds-ff-on-dark .fluentform .ff-el-form-control:focus {
	border-color: #fff;
}

.mds-ff-on-dark .fluentform .ff-el-is-required.asterisk-right label::after,
.mds-ff-on-dark .fluentform .ff-el-is-required.asterisk-left label::before {
	color: #ffb59a !important;
}