/*
 * Wearparts SKU Lookup — Chosen overrides.
 *
 * Chosen's base styles (.chosen-container, .chosen-drop, .chosen-results, etc.)
 * are loaded from gform_chosen. This file only adds our result-row tweaks and
 * the "Keep typing to narrow" capped sentinel.
 */

/* Pre-init fallback: the bare <select> before Chosen wraps it. */
select.wearparts-sku-select {
	width: 100%;
}

/* Ensure the Chosen container takes full width of its field wrapper. */
.ginput_container_wearparts_sku_search .chosen-container {
	width: 100% !important;
}

/* Loading state: subtle muted text in the no-results slot. */
.wsku-container.wsku-loading .chosen-results li.no-results,
.wsku-container.wsku-empty .chosen-results li.no-results {
	color: #4a5568;
	font-style: italic;
}

.wsku-container.wsku-error .chosen-results li.no-results {
	color: #9b2c2c;
	background: #fff5f5;
	font-style: normal;
}

/* The non-selectable "Keep typing to narrow results" sentinel row. */
.chosen-results li.wsku-capnote {
	padding: 5px 6px;
	font-style: italic;
	font-size: 0.85em;
	color: #4a5568;
	background: #f7fafc;
	border-top: 1px solid #e2e8f0;
	cursor: default;
	pointer-events: none;
}

.chosen-results li.wsku-capnote:hover {
	background: #f7fafc;
	color: #4a5568;
}

/* On narrow viewports (<576px, Bootstrap 4 `sm` breakpoint), bump the row's
   touch target and let long labels wrap cleanly. */
@media ( max-width: 575.98px ) {
	.chosen-results .active-result {
		padding: 10px 12px;
		min-height: 44px;
		white-space: normal;
		word-break: break-word;
	}
}

/* The "Can't find your product? Enter it manually" escape-hatch row. Pinned
   as the last result by the JS module on every populateOptions() refresh.
   Visually separated from real product rows by a top border and italic
   styling so it reads as an alternate action, not as another product. */
.chosen-results li.active-result.wsku-other-row,
.chosen-results li.result-selected.wsku-other-row {
	font-style: italic;
	color: #2c5282;
	border-top: 1px solid #e2e8f0;
	margin-top: 0.25rem;
	padding-top: 8px;
}

.chosen-results li.active-result.wsku-other-row.highlighted {
	background: #ebf8ff;
	color: #2c5282;
}

/* Freetext input revealed when the Other row is selected. Lives inside the
   same ginput_container as the <select>, so theme padding/margins flow through.
   `[hidden]` handles the default display:none — the rule below adds the
   spacing for when JS toggles the attribute off. */
.ginput_container_wearparts_sku_search .wearparts-sku-other-wrap {
	margin-top: 0.5rem;
}

.ginput_container_wearparts_sku_search .wearparts-sku-other-wrap[hidden] {
	display: none;
}

.ginput_container_wearparts_sku_search .wearparts-sku-other-text {
	width: 100%;
	padding: 8px 10px;
	border: 1px solid #cbd5e0;
	border-radius: 4px;
	font-size: 1rem;
	line-height: 1.4;
	background: #fff;
	box-sizing: border-box;
}

.ginput_container_wearparts_sku_search .wearparts-sku-other-text:focus {
	outline: none;
	border-color: #4299e1;
	box-shadow: 0 0 0 3px rgba( 66, 153, 225, 0.15 );
}