/**
 * Form component.
 *
 * Normalises Bootstrap 5 form controls and WooCommerce's own
 * .input-text, .select, and validate-required classes so they
 * share a consistent appearance under brand tokens.
 *
 * WooCommerce renders its own class names (.input-text, .woocommerce-select)
 * that do not automatically inherit Bootstrap's .form-control styles.
 * This file bridges that gap without overriding WooCommerce templates.
 *
 * @package PackagingCommerce
 */

/* ── Shared control base ───────────────────────────────────────────── */

.form-control,
.form-select,
.woocommerce-checkout .input-text,
.woocommerce-page .input-text,
.woocommerce-account .input-text,
input.input-text,
textarea.input-text,
select.woocommerce-select {
	width: 100%;
	min-height: 44px;
	padding-block: var(--brand-space-2);
	padding-inline: var(--brand-space-3);
	font-family: var(--brand-font-body);
	font-size: var(--brand-text-base);
	color: var(--brand-color-ink);
	background-color: var(--brand-color-surface);
	border: 1px solid var(--brand-color-border);
	border-radius: var(--brand-radius-md);
	transition:
		border-color var(--brand-transition-fast),
		box-shadow var(--brand-transition-fast);
	box-shadow: var(--brand-shadow-sm);
}

.form-control:focus,
.form-select:focus,
.woocommerce-checkout .input-text:focus,
.woocommerce-page .input-text:focus,
.woocommerce-account .input-text:focus,
input.input-text:focus,
textarea.input-text:focus,
select.woocommerce-select:focus {
	border-color: var(--brand-color-primary);
	outline: none;
	box-shadow: 0 0 0 3px var(--brand-color-primary-soft);
}

/* ── Labels ────────────────────────────────────────────────────────── */

.form-label,
.woocommerce label {
	display: block;
	margin-block-end: var(--brand-space-1);
	font-weight: var(--brand-weight-medium);
	font-size: var(--brand-text-sm);
	color: var(--brand-color-ink);
}

/* Required field indicator */
.required,
abbr.required {
	color: var(--brand-color-danger);
	text-decoration: none;
}

/* ── Validation states ─────────────────────────────────────────────── */

.is-invalid,
.woocommerce-invalid .input-text,
.woocommerce-invalid select {
	border-color: var(--brand-color-danger);
}

.is-invalid:focus,
.woocommerce-invalid .input-text:focus {
	box-shadow: 0 0 0 3px rgb(220 38 38 / 0.15);
}

.invalid-feedback,
.woocommerce-error small {
	display: block;
	margin-block-start: var(--brand-space-1);
	font-size: var(--brand-text-xs);
	color: var(--brand-color-danger);
}

/* ── Form groups ───────────────────────────────────────────────────── */

.form-group,
.woocommerce-checkout .form-row {
	margin-block-end: var(--brand-space-4);
}

/* ── Checkbox and radio ────────────────────────────────────────────── */

.form-check-input {
	width: 1.1em;
	height: 1.1em;
	margin-block-start: 0.15em;
	border: 1px solid var(--brand-color-border);
	border-radius: var(--brand-radius-sm);
	cursor: pointer;
}

.form-check-input:checked {
	background-color: var(--brand-color-primary);
	border-color:     var(--brand-color-primary);
}

.form-check-label {
	cursor: pointer;
	font-size: var(--brand-text-sm);
}

/* ── Textarea ──────────────────────────────────────────────────────── */

textarea.form-control,
textarea.input-text {
	min-height: 120px;
	resize: vertical;
}