/*
 * FlowCommerce global form system (ADR-011).
 *
 * The field contract accepted on the FC-016 checkout, lifted out of
 * checkout.css so every theme form uses one component instead of each page
 * re-declaring its own borders, radii and focus rings.
 *
 * Scope
 * -----
 * Frontend only. Every selector is anchored to a theme surface
 * (`.site-main`, `.site-content`, `.fcsu-form`) or to a WooCommerce frontend
 * wrapper. There is no bare `input {}` / `select {}` / `textarea {}` rule, so
 * wp-admin, the block editor and plugin screens are untouched.
 *
 * Payment safety
 * --------------
 * Nothing here reaches inside a payment iframe — an iframe is a separate
 * document and CSS does not cross that boundary — and no rule sizes, hides or
 * repositions an iframe or a gateway payment surface.
 *
 * Consumers add layout only. A page stylesheet that redeclares the base
 * border, radius, background, height or focus ring is a duplication bug; the
 * guard in tests/forms-css-contract-test.php fails on it.
 */

:root {
	/* The one place these values are defined. */
	--fc-field-radius: 12px;
	--fc-field-height: 3rem;
	--fc-field-height-textarea: 6.5rem;
	--fc-field-border: var(--fc-border, #ded8ce);
	--fc-field-border-hover: var(--fc-text-muted, #686e68);
	--fc-field-surface: var(--fc-surface, #ffffff);
	--fc-field-text: var(--fc-text, #20231f);
	--fc-field-label: var(--fc-text-muted, #686e68);
	--fc-field-accent: var(--fc-brand-accent, #c17658);
	--fc-field-danger: var(--fc-danger, #a33a32);
	--fc-field-disabled-surface: var(--fc-background, #f7f2ea);

	/*
	 * Focus ring. Fallback first for browsers without color-mix(); both
	 * values come from existing tokens, no new brand colours.
	 */
	--fc-field-ring: var(--fc-background, #f7f2ea);
	--fc-field-ring-danger: var(--fc-background, #f7f2ea);
}

@supports (color: color-mix(in srgb, red 50%, blue)) {
	:root {
		--fc-field-ring: color-mix(in srgb, var(--fc-brand-accent, #c17658) 28%, transparent);
		--fc-field-ring-danger: color-mix(in srgb, var(--fc-danger, #a33a32) 25%, transparent);
	}
}

/* ------------------------------------------------------------ controls --- */

/*
 * The field family. Types are listed explicitly rather than using a bare
 * `input` selector so checkboxes, radios, ranges, colour swatches and file
 * pickers keep their native rendering.
 *
 * WooCommerce Blocks are excluded from the generic layer on purpose. Their
 * controls carry behaviour the theme must not overwrite — floating labels
 * live in the control's own asymmetric padding, for example — so a Block
 * control is adapted by its page stylesheet (checkout.css) using the tokens
 * above, never restyled from here. `.fcsu-form` and the WooCommerce classic
 * adapters further down are unaffected by the exclusion.
 */
.site-main :not(.wp-block-woocommerce-checkout *, .wp-block-woocommerce-cart *):is(input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="url"], input[type="number"], input[type="search"], input[type="date"], input[type="month"], input[type="week"], input[type="time"], input[type="datetime-local"], select, textarea),
.fcsu-form :is(input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="url"], input[type="number"], input[type="search"], input[type="date"], input[type="month"], input[type="week"], input[type="time"], input[type="datetime-local"], select, textarea) {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	min-height: var(--fc-field-height);
	padding: 0.75rem 1rem;
	border: 1px solid var(--fc-field-border);
	border-radius: var(--fc-field-radius);
	color: var(--fc-field-text);
	background-color: var(--fc-field-surface);
	box-shadow: none;
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.4;
}

.site-main :not(.wp-block-woocommerce-checkout *, .wp-block-woocommerce-cart *):is(textarea),
.fcsu-form textarea {
	min-height: var(--fc-field-height-textarea);
	line-height: 1.55;
	resize: vertical;
}

/* --------------------------------------------------------------- states -- */

.site-main :not(.wp-block-woocommerce-checkout *, .wp-block-woocommerce-cart *):is(input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="url"], input[type="number"], input[type="search"], select, textarea):hover,
.fcsu-form :is(input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="url"], input[type="number"], input[type="search"], select, textarea):hover {
	border-color: var(--fc-field-border-hover);
}

/*
 * Exactly one visible focus treatment: the copper border plus its own ring.
 * `outline: 0` is paired with a box-shadow that is always painted, so the
 * accessible focus indicator is replaced, never removed. Both :focus and
 * :focus-visible are matched so a field looks the same however it was
 * reached, and so a generic focus-visible outline elsewhere in the cascade
 * cannot stack a second ring on top.
 */
.site-main :not(.wp-block-woocommerce-checkout *, .wp-block-woocommerce-cart *):is(input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="url"], input[type="number"], input[type="search"], input[type="date"], input[type="month"], input[type="week"], input[type="time"], input[type="datetime-local"], select, textarea):is(:focus, :focus-visible),
.fcsu-form :is(input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="url"], input[type="number"], input[type="search"], input[type="date"], input[type="month"], input[type="week"], input[type="time"], input[type="datetime-local"], select, textarea):is(:focus, :focus-visible) {
	border-color: var(--fc-field-accent);
	box-shadow: 0 0 0 2px var(--fc-field-ring);
	outline: 0;
}

.site-main :not(.wp-block-woocommerce-checkout *, .wp-block-woocommerce-cart *):is(input, select, textarea):disabled,
.fcsu-form :is(input, select, textarea):disabled {
	border-color: var(--fc-field-border);
	color: var(--fc-field-label);
	background-color: var(--fc-field-disabled-surface);
	cursor: not-allowed;
	opacity: 1;
}

.site-main :not(.wp-block-woocommerce-checkout *, .wp-block-woocommerce-cart *):is(input, textarea)::placeholder,
.fcsu-form :is(input, textarea)::placeholder {
	color: var(--fc-field-label);
	opacity: 1;
}

/* --------------------------------------------------------------- labels -- */

.fcsu-form label,
.fcsu-form .fcsu-field__label {
	display: block;
	margin-bottom: 0.35rem;
	color: var(--fc-field-label);
	font-family: inherit;
	font-size: 0.86rem;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0;
	text-transform: none;
}

.fcsu-form .required,
.fcsu-form .fcsu-field__required {
	color: var(--fc-field-danger);
	text-decoration: none;
}

/*
 * A label wrapping its own control (checkbox and radio rows) is a flex row,
 * not a stacked field label.
 */
.fcsu-form label:has(> input[type="checkbox"]),
.fcsu-form label:has(> input[type="radio"]) {
	display: flex;
	gap: 0.55rem;
	align-items: flex-start;
	margin-bottom: 0;
	color: var(--fc-field-text);
	font-weight: 400;
}

/* --------------------------------------------------- checkbox and radio -- */

.site-main :not(.wp-block-woocommerce-checkout *, .wp-block-woocommerce-cart *):is(input[type="checkbox"], input[type="radio"]),
.fcsu-form :is(input[type="checkbox"], input[type="radio"]) {
	flex: 0 0 auto;
	width: 1.15rem;
	height: 1.15rem;
	margin: 0;
	accent-color: var(--fc-field-accent);
}

/*
 * The toggles keep the browser's own rendering, so their focus indicator is a
 * themed outline rather than the border+ring the text fields use. Without this
 * they would fall back to the platform default ring, which is the one control
 * type the copper accent would otherwise miss.
 */
.site-main :not(.wp-block-woocommerce-checkout *, .wp-block-woocommerce-cart *):is(input[type="checkbox"], input[type="radio"]):is(:focus, :focus-visible),
.fcsu-form :is(input[type="checkbox"], input[type="radio"]):is(:focus, :focus-visible) {
	outline: 2px solid var(--fc-field-accent);
	outline-offset: 2px;
}

/*
 * Native checkbox and radio rendering is left alone; only the hit area is
 * enlarged so the control still meets a comfortable touch target without
 * changing how the browser draws or announces it.
 */
.fcsu-form :is(input[type="checkbox"], input[type="radio"]) {
	position: relative;
}

.fcsu-form :is(input[type="checkbox"], input[type="radio"])::before {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 2.75rem;
	height: 2.75rem;
	transform: translate(-50%, -50%);
	content: "";
}

/* ----------------------------------------------------------- validation -- */

.site-main :not(.wp-block-woocommerce-checkout *, .wp-block-woocommerce-cart *):is(input, select, textarea):is([aria-invalid="true"], .has-error, .is-error),
.fcsu-form :is(input, select, textarea):is([aria-invalid="true"], .has-error, .is-error),
.fcsu-form .fcsu-field--error :is(input, select, textarea) {
	border-color: var(--fc-field-danger);
}

.site-main :not(.wp-block-woocommerce-checkout *, .wp-block-woocommerce-cart *):is(input, select, textarea):is([aria-invalid="true"], .has-error, .is-error):is(:focus, :focus-visible),
.fcsu-form :is(input, select, textarea):is([aria-invalid="true"], .has-error, .is-error):is(:focus, :focus-visible),
.fcsu-form .fcsu-field--error :is(input, select, textarea):is(:focus, :focus-visible) {
	border-color: var(--fc-field-danger);
	box-shadow: 0 0 0 2px var(--fc-field-ring-danger);
	outline: 0;
}

.fcsu-form .fcsu-field__error,
.fcsu-form .fcsu-field--error > .fcsu-field__label {
	color: var(--fc-field-danger);
}

.fcsu-form .fcsu-field__error {
	margin-top: 0.35rem;
	font-size: 0.85rem;
	line-height: 1.45;
	overflow-wrap: anywhere;
}

/* ------------------------------------------------------------- helpers --- */

.fcsu-form .fcsu-field {
	min-width: 0;
	margin-bottom: var(--fc-space-2, 1rem);
}

.fcsu-form .fcsu-field__hint {
	margin-top: 0.35rem;
	color: var(--fc-field-label);
	font-size: 0.85rem;
	line-height: 1.45;
}

/* ------------------------------------------- WooCommerce frontend forms -- */

/*
 * WooCommerce classic forms render their own wrappers. These adapters map
 * them onto the field system above without WooCommerce's default label
 * casing or its square, dark controls.
 *
 * `body.` prefix on purpose: WooCommerce's own rules for these controls have
 * exactly the same weight as `.woocommerce form .form-row input.input-text`,
 * so at equal specificity the winner would be whichever stylesheet the page
 * happens to load last. The element selector lifts the adapter above that
 * race without reaching for !important.
 */
body.woocommerce form .form-row,
body.woocommerce-page form .form-row {
	margin: 0 0 var(--fc-space-2, 1rem);
	padding: 0;
}

body.woocommerce form .form-row label,
body.woocommerce-page form .form-row label {
	display: block;
	margin-bottom: 0.35rem;
	color: var(--fc-field-label);
	font-family: inherit;
	font-size: 0.86rem;
	font-weight: 600;
	line-height: 1.4;
	text-transform: none;
}

body.woocommerce form .form-row label.checkbox,
body.woocommerce form .form-row label.woocommerce-form__label-for-checkbox,
body.woocommerce-page form .form-row label.checkbox,
body.woocommerce-page form .form-row label.woocommerce-form__label-for-checkbox {
	display: flex;
	gap: 0.55rem;
	align-items: flex-start;
	color: var(--fc-field-text);
	font-weight: 400;
}

body.woocommerce form .form-row .required,
body.woocommerce-page form .form-row .required {
	color: var(--fc-field-danger);
	text-decoration: none;
}

body.woocommerce form .form-row input.input-text,
body.woocommerce form .form-row select,
body.woocommerce form .form-row textarea,
body.woocommerce-page form .form-row input.input-text,
body.woocommerce-page form .form-row select,
body.woocommerce-page form .form-row textarea {
	width: 100%;
	max-width: 100%;
	min-height: var(--fc-field-height);
	padding: 0.75rem 1rem;
	border: 1px solid var(--fc-field-border);
	border-radius: var(--fc-field-radius);
	color: var(--fc-field-text);
	background-color: var(--fc-field-surface);
	box-shadow: none;
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.4;
}

body.woocommerce form .form-row textarea,
body.woocommerce-page form .form-row textarea {
	min-height: var(--fc-field-height-textarea);
	line-height: 1.55;
}

body.woocommerce form .form-row :is(input.input-text, select, textarea):is(:focus, :focus-visible),
body.woocommerce-page form .form-row :is(input.input-text, select, textarea):is(:focus, :focus-visible) {
	border-color: var(--fc-field-accent);
	box-shadow: 0 0 0 2px var(--fc-field-ring);
	outline: 0;
}

body.woocommerce form .woocommerce-invalid :is(input.input-text, select, textarea),
body.woocommerce-page form .woocommerce-invalid :is(input.input-text, select, textarea) {
	border-color: var(--fc-field-danger);
}

body.woocommerce form .woocommerce-invalid :is(input.input-text, select, textarea):is(:focus, :focus-visible),
body.woocommerce-page form .woocommerce-invalid :is(input.input-text, select, textarea):is(:focus, :focus-visible) {
	border-color: var(--fc-field-danger);
	box-shadow: 0 0 0 2px var(--fc-field-ring-danger);
	outline: 0;
}

body.woocommerce form .form-row :is(input, select, textarea):disabled,
body.woocommerce-page form .form-row :is(input, select, textarea):disabled {
	border-color: var(--fc-field-border);
	color: var(--fc-field-label);
	background-color: var(--fc-field-disabled-surface);
	cursor: not-allowed;
	opacity: 1;
}

body.woocommerce form .form-row :is(input, textarea)::placeholder,
body.woocommerce-page form .form-row :is(input, textarea)::placeholder {
	color: var(--fc-field-label);
	opacity: 1;
}

/*
 * WooCommerce marks the invalid *row*, so the aria-invalid control inside it
 * is matched here too — the generic layer sits below WooCommerce's own weight.
 */
body.woocommerce form .form-row :is(input, select, textarea)[aria-invalid="true"],
body.woocommerce-page form .form-row :is(input, select, textarea)[aria-invalid="true"] {
	border-color: var(--fc-field-danger);
}

/*
 * Select2, used by WooCommerce for country and state pickers, ships its own
 * frame. Flatten the wrapper and let the rendered control carry the surface.
 */
body.woocommerce .select2-container .select2-selection,
body.woocommerce-page .select2-container .select2-selection {
	min-height: var(--fc-field-height);
	padding: 0.25rem 0.5rem;
	border: 1px solid var(--fc-field-border);
	border-radius: var(--fc-field-radius);
	background-color: var(--fc-field-surface);
	box-shadow: none;
}

body.woocommerce .select2-container--focus .select2-selection,
body.woocommerce .select2-container--open .select2-selection,
body.woocommerce-page .select2-container--focus .select2-selection,
body.woocommerce-page .select2-container--open .select2-selection {
	border-color: var(--fc-field-accent);
	box-shadow: 0 0 0 2px var(--fc-field-ring);
	outline: 0;
}

/* ------------------------------------------------------ password fields -- */

/*
 * WooCommerce wraps a password field at runtime and appends its own reveal
 * control. The wrapper is not a field, so it must not carry a second frame,
 * and the control has to sit inside the field instead of on top of its text.
 * This is presentation only: the class WooCommerce toggles, the input type it
 * swaps and the account form's submit behaviour are untouched.
 */
body.woocommerce form .form-row .password-input,
body.woocommerce-page form .form-row .password-input {
	position: relative;
	display: block;
	width: 100%;
	min-width: 0;
}

body.woocommerce form .form-row .password-input input.input-text,
body.woocommerce-page form .form-row .password-input input.input-text {
	padding-inline-end: 3rem;
}

body.woocommerce form .form-row .password-input .show-password-input,
body.woocommerce-page form .form-row .password-input .show-password-input {
	position: absolute;
	top: 50%;
	inset-inline-end: 0.5rem;
	display: inline-flex;
	width: 2.25rem;
	height: 2.25rem;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	border-radius: var(--fc-radius-pill, 999px);
	color: var(--fc-field-label);
	background: none;
	cursor: pointer;
	transform: translateY(-50%);
}

body.woocommerce form .form-row .password-input .show-password-input:hover,
body.woocommerce-page form .form-row .password-input .show-password-input:hover {
	color: var(--fc-field-text);
}

/*
 * The reveal control is reachable by keyboard, so it keeps a visible focus
 * indicator of its own — the same copper the fields use.
 */
body.woocommerce form .form-row .password-input .show-password-input:focus-visible,
body.woocommerce-page form .form-row .password-input .show-password-input:focus-visible {
	outline: 2px solid var(--fc-field-accent);
	outline-offset: 2px;
}

body.woocommerce form .form-row .password-input .show-password-input.display-password,
body.woocommerce-page form .form-row .password-input .show-password-input.display-password {
	color: var(--fc-field-accent);
}

/*
 * Strength meter and hint are helper text under the control, on the same
 * measure and rhythm as every other hint in the form system. The state is a
 * text cue only: no tinted panel, per the state-surface rule in tokens.css.
 */
body.woocommerce form .form-row .woocommerce-password-strength,
body.woocommerce form .form-row .woocommerce-password-hint,
body.woocommerce-page form .form-row .woocommerce-password-strength,
body.woocommerce-page form .form-row .woocommerce-password-hint {
	display: block;
	margin-top: 0.35rem;
	padding: 0;
	border: 0;
	background: none;
	color: var(--fc-field-label);
	font-size: 0.85rem;
	line-height: 1.45;
	text-align: left;
	overflow-wrap: anywhere;
}

body.woocommerce form .form-row .woocommerce-password-strength,
body.woocommerce-page form .form-row .woocommerce-password-strength {
	font-weight: 700;
}

body.woocommerce form .form-row .woocommerce-password-strength.short,
body.woocommerce form .form-row .woocommerce-password-strength.bad,
body.woocommerce-page form .form-row .woocommerce-password-strength.short,
body.woocommerce-page form .form-row .woocommerce-password-strength.bad {
	color: var(--fc-field-danger);
}

body.woocommerce form .form-row .woocommerce-password-strength.good,
body.woocommerce-page form .form-row .woocommerce-password-strength.good {
	color: var(--fc-warning, #a66a2c);
}

body.woocommerce form .form-row .woocommerce-password-strength.strong,
body.woocommerce-page form .form-row .woocommerce-password-strength.strong {
	color: var(--fc-success, #2f7d4a);
}