/* ==========================================================================
   Component: Input / Field
   Figma: "Mada BNPL" → InputField (node 100:5144) — label + field + helper,
          states: default / hover / focus / filled / disabled / error.
   Used by: Contact form, B2B/merchant enquiry form (→ Salesforce, reCAPTCHA).
   RTL: logical text-align/padding; field flips automatically.
   ========================================================================== */

.mada-field {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	margin-block-end: var(--space-5);
}

.mada-field__label {
	font-weight: var(--fw-medium);
	font-size: var(--fs-md);
	line-height: var(--lh-sm);
	color: var(--color-text);
	text-align: start;
}

.mada-field__required {
	color: var(--color-error);
	margin-inline-start: var(--space-1);
}

.mada-input,
.mada-textarea,
.mada-select {
	inline-size: 100%;
	padding-block: var(--space-4);
	padding-inline: var(--space-5);
	font-family: inherit;
	font-size: var(--fs-md);
	line-height: var(--lh-md);
	color: var(--color-text);
	background-color: var(--color-white);
	border: var(--border-width-thin) solid var(--border-color-default);
	border-radius: var(--radius-lg);
	text-align: start;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
	appearance: none;
}

.mada-input::placeholder,
.mada-textarea::placeholder {
	color: var(--color-neutral-400);
}

.mada-input:hover,
.mada-textarea:hover,
.mada-select:hover {
	border-color: var(--color-neutral-500);
}

.mada-input:focus,
.mada-textarea:focus,
.mada-select:focus {
	outline: none;
	border-color: var(--border-color-primary);
	box-shadow: 0 0 0 var(--border-width-focus) var(--color-mint-20);
}

.mada-textarea {
	min-block-size: var(--space-22);
	resize: vertical;
}

/* Helper / error text */
.mada-field__help {
	font-size: var(--fs-sm);
	line-height: var(--lh-sm);
	color: var(--color-text-muted);
	text-align: start;
}

/* Error state */
.mada-field.is-error .mada-input,
.mada-field.is-error .mada-textarea,
.mada-field.is-error .mada-select {
	border-color: var(--border-color-error);
}
.mada-field.is-error .mada-field__help {
	color: var(--color-error);
}

/* Disabled */
.mada-input[disabled],
.mada-textarea[disabled],
.mada-select[disabled] {
	background-color: var(--color-neutral-100);
	color: var(--color-neutral-400);
	cursor: not-allowed;
}