/**
 * B2B RFQ Pro — Live Search widget (SPEC.md §3.6). Baseline, theme-agnostic
 * structure and behaviour only — every colour, size, spacing, and hover
 * value is an Elementor control (LiveSearchWidget) targeting the classes
 * below via a {{WRAPPER}}-scoped selector. Registered as this widget's own
 * style dependency (LiveSearchWidget::get_style_depends()), so it loads
 * only on a page that actually uses this widget.
 *
 * The clear button sits inside the input's own box (absolutely positioned
 * within `.b2b-rfq-live-search-input-wrap`); the submit button is a
 * regular sibling after it, never overlapping — see LiveSearchWidget's own
 * render() for why these are two separate wrapping elements rather than
 * one.
 */

.b2b-rfq-live-search {
	box-sizing: border-box;
	max-width: 100%;
}

.b2b-rfq-live-search-form {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.b2b-rfq-live-search-label {
	display: block;
}

.b2b-rfq-live-search-control {
	display: flex;
	align-items: stretch;
	gap: 8px;
	width: 100%;
}

.b2b-rfq-live-search-input-wrap {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
}

.b2b-rfq-live-search-input {
	width: 100%;
	box-sizing: border-box;
	border: 1px solid #d4d4d8;
	border-radius: 4px;
	padding: 8px 36px 8px 12px;
	font: inherit;
	color: inherit;
	background-color: #ffffff;
	appearance: none;
}

/* Suppress the native browser "clear" affordance some engines draw inside
 * type="search" inputs — this widget's own clear button replaces it. */
.b2b-rfq-live-search-input::-webkit-search-cancel-button {
	appearance: none;
}

.b2b-rfq-live-search-input:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.b2b-rfq-live-search-clear {
	position: absolute;
	top: 50%;
	right: 8px;
	transform: translateY( -50% );
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	padding: 0;
	border: 0;
	background: transparent;
	color: #71717a;
	cursor: pointer;
}

.b2b-rfq-live-search-clear[hidden] {
	display: none;
}

.b2b-rfq-live-search-clear svg {
	width: 100%;
	height: 100%;
}

.b2b-rfq-live-search-submit {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: 1px solid transparent;
	border-radius: 4px;
	padding: 8px 16px;
	font: inherit;
	background-color: #18181b;
	color: #ffffff;
	cursor: pointer;
}

.b2b-rfq-live-search-submit:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/**
 * font-size-driven, not a fixed svg width/height: LiveSearchWidget's own
 * "Icon Size" style control (register_button_style_controls()) sets
 * font-size here, which sizes both an Elementor-rendered font icon (an
 * `<i>` tag, sized directly by font-size) and the `<svg>` this rule/the
 * fallback markup both use (1em width/height, so it tracks font-size too)
 * — one selector, either icon source.
 */
.b2b-rfq-live-search-submit-icon {
	display: inline-flex;
	font-size: 18px;
	line-height: 1;
}

.b2b-rfq-live-search-submit-icon svg {
	display: block;
	width: 1em;
	height: 1em;
}

.b2b-rfq-live-search-message {
	margin: 6px 0 0;
	font-size: 0.875em;
	color: #52525b;
}

.b2b-rfq-live-search-message:empty {
	display: none;
}

.b2b-rfq-live-search-editor-notice {
	margin: 6px 0 0;
	padding: 8px 12px;
	border: 1px dashed #f59e0b;
	border-radius: 4px;
	background-color: #fffbeb;
	color: #92400e;
	font-size: 0.875em;
}

/* Mirrors the paired archive's own documented `.is-loading` class (see
 * product-archive-engine.js) — a subtle, non-layout-shifting fade, the
 * same treatment that class gets on the archive itself. */
.b2b-rfq-live-search.is-loading .b2b-rfq-live-search-control {
	opacity: 0.7;
}