/* =================================================================
   File:    06-forms.css
   Purpose: Inputs, textareas, selects, checkboxes, radios — glass-styled.
            v0.1 baseline; the B2B form widget gets richer styles in Step 7.
   ================================================================= */

.liqui-form {
	display: grid;
	gap: var(--space-4);
}

.liqui-field {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.liqui-label {
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
	color: var(--c-ink);
}

.liqui-input,
.liqui-textarea,
.liqui-select {
	width: 100%;
	padding: 12px 14px;
	font: inherit;
	color: var(--c-ink);
	background: var(--glass-bg-strong);
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	-webkit-backdrop-filter: blur(var(--glass-blur-sm));
	backdrop-filter:         blur(var(--glass-blur-sm));
	transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.liqui-textarea { min-height: 140px; resize: vertical; }

.liqui-input:focus,
.liqui-textarea:focus,
.liqui-select:focus {
	outline: 0;
	border-color: var(--c-accent);
	box-shadow: 0 0 0 3px color-mix(in oklab, var(--c-accent) 25%, transparent);
	background: #fff;
}

.liqui-input::placeholder,
.liqui-textarea::placeholder { color: var(--c-ink-soft); }

.liqui-checkbox, .liqui-radio {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--fs-sm);
	cursor: pointer;
}
.liqui-checkbox input, .liqui-radio input {
	width: 18px; height: 18px;
	accent-color: var(--c-accent);
}

.liqui-help {
	font-size: var(--fs-xs);
	color: var(--c-ink-soft);
}

.liqui-error {
	font-size: var(--fs-xs);
	color: var(--c-danger);
}