/* Form field wrapper, input with icon, search field. Base input/select styles live in base.css.
   <div class="c-field"><label class="c-field__label" for="x">..</label><input id="x"><p class="c-field__hint">..</p></div> */
.c-field { display: grid; gap: 0.375rem; }
.c-field__label { font-size: var(--fs-14); font-weight: var(--fw-medium); }
.c-field__label .req { color: var(--color-danger); }
.c-field__hint { font-size: var(--fs-13); line-height: var(--lh-13); color: var(--color-text-muted); }
.c-field__error { font-size: var(--fs-13); line-height: var(--lh-13); color: var(--color-danger); font-weight: var(--fw-medium); }
.c-check { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--tap); font-size: var(--fs-14); font-weight: var(--fw-regular); cursor: pointer; }

/* Input with a leading icon */
.c-input-icon { position: relative; }
.c-input-icon > .icon { position: absolute; left: 0.875rem; top: 50%; transform: translateY(-50%); width: 1.125rem; height: 1.125rem; color: var(--color-text-muted); pointer-events: none; }
.c-input-icon > :is(input, select) { padding-left: 2.625rem; }

/* Search field: one row of keyword + location + submit. Stacks under 768px. */
.c-search { display: grid; gap: var(--space-2); padding: var(--space-2); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-rest); }
.c-search :is(input, select) { min-height: 48px; border-color: transparent; background-color: var(--pn-gray-50); }
.c-search :is(input, select):hover { border-color: var(--color-border); }
.c-search .c-btn { min-height: 48px; }
@media (min-width: 768px) {
	.c-search { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; gap: 0; align-items: center; }
	.c-search > * + * { border-left: 1px solid var(--color-border); }
	.c-search > .c-btn, .c-search > * + .c-btn { border-left: 0; margin-left: var(--space-2); }
	.c-search :is(input, select) { background-color: transparent; }
}
/* Compact header search */
.c-search--compact { display: flex; padding: 0; border-radius: var(--radius-pill); box-shadow: none; }
.c-search--compact .c-input-icon { flex: 1; }
.c-search--compact input { min-height: 40px; font-size: var(--fs-14); border-radius: var(--radius-pill); }