/**
 * Form labels outside WooCommerce.
 *
 * Same root cause as woo-fixes.css: the Elementor global kit puts the brand's
 * ivory *background* colour in its Text slot and then paints it onto labels -
 *
 *   .elementor-kit-11 label { color: var( --e-global-color-text ); }   #F5F1E8
 *
 * - so any form the page design does not colour itself renders its labels in
 * ivory on ivory, at 1.00:1. woo-fixes.css covers the shop; the Fluent Forms
 * enquiry form on the contact page is the other place it shows, where "Име",
 * "Имейл", "Телефон" and "Съобщение" were invisible above their inputs.
 *
 * Scoped to Fluent Forms rather than to `label` globally: a section designed on
 * a dark background may legitimately want light labels, and this must not take
 * those with it.
 *
 * Specificity: the kit is (0,1,1), these are (0,2,1). No !important.
 * Contrast: #1A1712 on #F5F1E8 = 15.85:1, #6E6657 on #F5F1E8 = 5.03:1.
 */

.fluentform .ff-el-input--label label,
.fluentform .ff-el-form-check-label,
.fluentform legend {
	color: var(--ezi-ink);
}

.fluentform .ff-el-help-message,
.fluentform .ff-el-input--label .ff-el-help-message {
	color: var(--ezi-ink-muted);
}

.fluentform input::placeholder,
.fluentform textarea::placeholder {
	color: var(--ezi-ink-muted);
	opacity: 1;
}

/* ==========================================================================
 * The brand's form field, applied to every form layer on the site.
 *
 * From the design system's forms/Input component:
 *   label   Nunito Sans 700, 12px, 0.06em, UPPERCASE, ink-muted, 8px below
 *   field   ivory-2 ground, 1.5px warm hairline, 8px radius, 17px body ink
 *   focus   deep-gold border + a 3px soft-gold halo
 *   error   #9C3B2E
 *   required asterisk in gold-deep, not red
 *
 * This also retires the off-palette borders each plugin was supplying on its
 * own: #DADBDD and #EFEFEF (Fluent Forms), #CFC8D8 (the login form and the
 * pagination), #200707 (WooCommerce's account inputs).
 * ========================================================================== */

body .fluentform .ff-el-input--label label,
body.woocommerce-page .woocommerce-form-row.form-row > label,
body.woocommerce-page .wc-block-components-text-input label {
	font-family: var(--ezi-font-body);
	font-weight: var(--ezi-fw-body-bold);
	font-size: var(--ezi-t-overline);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ezi-ink-muted);
	margin-bottom: 8px;
}

/* The required marker is a gold accent in the kit, not an error colour -
   nothing has gone wrong yet when the form first paints. */
body .fluentform .ff-el-input--label.ff-el-is-required.asterisk-right label::after,
body.woocommerce-page .woocommerce-form-row abbr.required,
body.woocommerce-page form.woocommerce-form abbr.required,
body.woocommerce-page .wc-block-components-text-input .required {
	color: var(--ezi-gold-deep);
	text-decoration: none;
}

body .fluentform .ff-el-group input.ff-el-form-control,
body .fluentform .ff-el-group textarea.ff-el-form-control,
body .fluentform .ff-el-group select.ff-el-form-control,
body.woocommerce-page .woocommerce-form-row input.input-text,
body.woocommerce-page .woocommerce-form-row input.woocommerce-Input,
body.woocommerce-page form.woocommerce-form input.input-text {
	box-sizing: border-box;
	width: 100%;
	font-family: var(--ezi-font-body);
	font-size: var(--ezi-t-body);
	font-weight: var(--ezi-fw-body);
	color: var(--ezi-ink);
	background: var(--ezi-ivory-2);
	border: var(--ezi-border-frame) solid var(--ezi-line-on-light);
	border-radius: var(--ezi-radius-md);
	padding: 13px 15px;
	outline: none;
	transition:
		border-color var(--ezi-dur-fast) var(--ezi-ease-standard),
		box-shadow var(--ezi-dur-fast) var(--ezi-ease-standard);
}

body .fluentform .ff-el-group input.ff-el-form-control:focus,
body .fluentform .ff-el-group textarea.ff-el-form-control:focus,
body .fluentform .ff-el-group select.ff-el-form-control:focus,
body.woocommerce-page .woocommerce-form-row input.input-text:focus,
body.woocommerce-page .woocommerce-form-row input.woocommerce-Input:focus,
body.woocommerce-page form.woocommerce-form input.input-text:focus {
	border-color: var(--ezi-gold-deep);
	box-shadow: var(--ezi-focus-halo);
}

/* Help text and validation, at the kit's caption size. */
.fluentform .ff-el-help-message {
	font-size: var(--ezi-t-caption);
}

.fluentform .error.text-danger,
.fluentform .ff-el-is-error .text-danger {
	color: var(--ezi-error);
}