.cnhc-form__row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--cnhc-space-4);
	margin-bottom: var(--cnhc-space-4);
}

.cnhc-form__row--single {
	grid-template-columns: minmax(0, 1fr);
}

.cnhc-field {
	display: flex;
	flex-direction: column;
	min-width: 0;
	gap: var(--cnhc-space-2);
}

.cnhc-field__label {
	font-size: var(--cnhc-fs-small);
	font-weight: 600;
	color: var(--cnhc-pine-900);
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.cnhc-field__hint {
	font-weight: 400;
	color: var(--cnhc-text-faint);
	font-size: var(--cnhc-fs-caption);
}

.cnhc-input,
.cnhc-select {
	width: 100%;
	/* !important: forces our own box model regardless of any theme rule
	   (e.g. a global `select { height: 30px }`) that assumes a different
	   box-sizing. Without this, a fixed theme height combined with our
	   padding can shrink the actual content area to just a few pixels
	   tall, clipping the text to almost nothing while it's still there
	   and still the right color. */
	box-sizing: border-box !important;
	height: auto !important;
	padding: var(--cnhc-space-3) var(--cnhc-space-4);
	border: 1px solid var(--cnhc-border);
	border-radius: var(--cnhc-radius-sm);
	/* !important below: some themes (e.g. Jannah) declare a bare
	   `textarea, input, select { color: var(--base-color); background-color:
	   transparent; }` rule of their own. It's low-specificity, but on sites
	   where the theme stylesheet loads after ours and the cascade doesn't
	   go our way, it makes text unreadable (e.g. white-on-white). Forcing
	   our own color/background here keeps every install visually
	   consistent regardless of the active theme's own form resets. */
	background: var(--cnhc-surface) !important;
	font-family: var(--cnhc-font-mono) !important;
	font-size: 1rem;
	color: var(--cnhc-text) !important;
	transition: border-color var(--cnhc-transition), box-shadow var(--cnhc-transition);
}

.cnhc-select {
	font-family: var(--cnhc-font-body) !important;
	/* Replace the native OS dropdown chrome (`-webkit-appearance: menulist`,
	   which some themes force on every <select> on the page) with a plain
	   box + custom arrow. The native menulist rendering doesn't respect
	   our custom padding/height and is what was crushing the text down to
	   a few px of visible height. */
	appearance: none !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	padding-inline-end: 2.5rem;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%235c6b60' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 7.5 10 12.5 15 7.5'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right var(--cnhc-space-3) center !important;
	background-size: 16px !important;
}

.cnhc-select option {
	color: var(--cnhc-text);
	background: var(--cnhc-surface);
}

.cnhc-input:focus,
.cnhc-select:focus {
	outline: none;
	border-color: var(--cnhc-pine-600);
	box-shadow: 0 0 0 3px var(--cnhc-pine-100);
}

.cnhc-input-group {
	display: flex;
	gap: var(--cnhc-space-2);
	align-items: center;
}

.cnhc-input-group .cnhc-input {
	flex: 1;
}

.cnhc-field--split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--cnhc-space-2);
}

.cnhc-radio-group {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cnhc-space-2);
}

.cnhc-radio-card {
	position: relative;
}

.cnhc-radio-card input {
	position: absolute;
	opacity: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	cursor: pointer;
}

.cnhc-radio-card label {
	display: block;
	padding: var(--cnhc-space-2) var(--cnhc-space-4);
	border: 1px solid var(--cnhc-border);
	border-radius: var(--cnhc-radius-sm);
	font-size: var(--cnhc-fs-small);
	font-weight: 600;
	color: var(--cnhc-text-muted);
	cursor: pointer;
	transition: all var(--cnhc-transition);
}

.cnhc-radio-card input:checked + label {
	background: var(--cnhc-pine-800);
	border-color: var(--cnhc-pine-800);
	color: #fff;
}

.cnhc-radio-card input:focus-visible + label {
	outline: 2px solid var(--cnhc-pine-600);
	outline-offset: 2px;
}

.cnhc-field-error {
	font-size: var(--cnhc-fs-caption);
	color: var(--cnhc-danger);
	min-height: 1em;
}

/* --- Dual "value or value" fields (e.g. cm or ft/in, kg or lb) ----- */

.cnhc-dual-field {
	display: flex;
	align-items: center;
	gap: var(--cnhc-space-3);
	direction: ltr; /* measurement values read left-to-right even on an RTL page */
}

.cnhc-dual-field__group {
	flex: 1;
	min-width: 0;
	position: relative;
	display: flex;
	align-items: center;
}

.cnhc-dual-field__group .cnhc-input {
	padding-inline-end: 2.75rem;
	min-width: 0;
}

.cnhc-dual-field__unit {
	position: absolute;
	inset-inline-end: var(--cnhc-space-3);
	font-size: var(--cnhc-fs-caption);
	color: var(--cnhc-text-faint);
	font-family: var(--cnhc-font-body);
	pointer-events: none;
}

.cnhc-dual-field__group--split {
	display: grid;
	grid-template-columns: minmax(64px, 1fr) minmax(64px, 1fr);
	gap: var(--cnhc-space-2);
	min-width: 0;
}

.cnhc-dual-field__group--split .cnhc-dual-field__group .cnhc-input {
	padding-inline-end: 2.25rem;
}

/* Remove native number-input spin buttons: they reserve extra width
   inside the same right-hand padding we use for the unit label (cm/ft/
   in/kg/lb), and on the narrow ft/in split fields that overlap could
   push or clip typed digits out of view. */
.cnhc-input[type="number"]::-webkit-outer-spin-button,
.cnhc-input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.cnhc-input[type="number"] {
	-moz-appearance: textfield;
	appearance: textfield;
}

.cnhc-dual-field__divider {
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--cnhc-pine-50);
	color: var(--cnhc-text-muted);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--cnhc-fs-caption);
	font-weight: 600;
}

@media (max-width: 480px) {
	.cnhc-dual-field {
		flex-direction: column;
		align-items: stretch;
	}
	.cnhc-dual-field__divider {
		align-self: center;
	}
}

.cnhc-form__actions {
	display: flex;
	align-items: center;
	gap: var(--cnhc-space-4);
	margin-top: var(--cnhc-space-5);
}

.cnhc-form__error-banner {
	display: none;
	margin-bottom: var(--cnhc-space-4);
	padding: var(--cnhc-space-3) var(--cnhc-space-4);
	background: var(--cnhc-danger-bg);
	border: 1px solid var(--cnhc-danger);
	color: var(--cnhc-danger);
	border-radius: var(--cnhc-radius-sm);
	font-size: var(--cnhc-fs-small);
}

.cnhc-form__error-banner.is-visible {
	display: block;
}