/*
 * search-form.css - the product search form.
 *
 * LAYER 5, global. Loaded on every page (see inc/enqueue.php).
 *
 * PROVENANCE. These declarations were written at TASK-011 for screens 45/46 and lived in
 * pages/search.css. TASK-012 EXTRACTED them here unchanged - byte-for-byte, no value edited -
 * because the approved 404 screens carry the same form and a second copy of these rules would
 * be a defect (AGENT_RULES rule 7). The markup they style is emitted by ONE function,
 * zahra_v2_search_form() in inc/search.php; there is no second search form implementation.
 *
 * The file owns the form's *appearance* only. Its SIZE differs per surface and belongs to the
 * page that hosts it:
 *
 *   pages/search.css   46px, a fixed 400px box on desktop   (screens 45/46)
 *   pages/404.css      48px mobile / 50px desktop, full width (screens 47/48)
 *
 * The approved HEADER search box is a different component with its own markup and its own
 * rules in components/header.css (.zahra-search__*). It is deliberately not merged in here.
 *
 * Logical properties throughout - no physical left/right in this file.
 */

.zahra-search-form {
	display: flex;
	block-size: 46px;
	border: 1.5px solid var(--zahra-color-ink);
	background: var(--zahra-color-surface);
	min-inline-size: 0;
}

.zahra-search-form__icon {
	display: flex;
	align-items: center;
	padding-inline-start: 12px;
	color: var(--zahra-color-muted);
	flex: 0 0 auto;
}

.zahra-search-form__input {
	flex: 1 1 0;
	min-inline-size: 0;
	border: 0;
	outline: none;
	padding-inline: 10px;
	font-size: 13.5px;
	font-family: inherit;
	background: transparent;
	color: var(--zahra-color-ink);
}

.zahra-search-form__submit {
	flex: 0 0 auto;
	background: var(--zahra-color-brand);
	color: var(--zahra-color-surface);
	border: 0;
	padding-inline: 15px;
	font-size: 13px;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
}

.zahra-search-form__submit:hover,
.zahra-search-form__submit:focus-visible {
	background: var(--zahra-color-brand-dark);
}