/*
 * Fuse5 part search bar.
 *
 * Every colour, the corner radius, size, shadow and width come from CSS
 * variables set on the wrapper (see Fuse5_Search_Style::style_attr()), so
 * the look is edited under WooCommerce > Fuse5 Part Search, not here. The
 * values below are only fallbacks. Selectors are deliberately specific
 * (.fuse5-part-search .fuse5-ps-...) so theme styles for bare inputs and
 * buttons don't override the design.
 */

.fuse5-part-search {
	--fps-accent: #cc5500;
	--fps-btn-text: #ffffff;
	--fps-input-bg: #ffffff;
	--fps-input-text: #1d2327;
	--fps-border: #e3e5e8;
	--fps-drop-bg: #ffffff;
	--fps-drop-text: #1d2327;
	--fps-radius: 12px;
	--fps-pad-y: 12px;
	--fps-pad-x: 16px;
	--fps-font: 16px;
	--fps-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
	--fps-maxw: 720px;

	position: relative;
	width: 100%;
	max-width: var(--fps-maxw);
	font-size: var(--fps-font);
	line-height: 1.4;
	text-align: left;
}

.fuse5-part-search,
.fuse5-part-search *,
.fuse5-part-search *::before,
.fuse5-part-search *::after {
	box-sizing: border-box;
}

.fuse5-part-search.fuse5-ps--align-center {
	margin-left: auto;
	margin-right: auto;
}

.fuse5-part-search.fuse5-ps--align-left {
	margin-left: 0;
	margin-right: auto;
}

/* ---------- The bar ---------- */

.fuse5-part-search .fuse5-ps-form {
	display: flex;
	align-items: stretch;
	margin: 0;
	padding: 0;
	background: var(--fps-input-bg);
	border: 1px solid var(--fps-border);
	border-radius: var(--fps-radius);
	box-shadow: var(--fps-shadow);
	transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.fuse5-part-search .fuse5-ps-form:focus-within {
	border-color: var(--fps-accent);
	box-shadow: var(--fps-shadow), 0 0 0 3px rgba(128, 128, 128, 0.25);
	box-shadow: var(--fps-shadow), 0 0 0 3px color-mix(in srgb, var(--fps-accent) 25%, transparent);
}

.fuse5-part-search .fuse5-ps-field {
	position: relative;
	display: flex;
	flex: 1;
	align-items: center;
	min-width: 0;
}

.fuse5-part-search .fuse5-ps-input {
	flex: 1;
	width: 100%;
	min-width: 0;
	height: auto;
	margin: 0;
	padding: var(--fps-pad-y) var(--fps-pad-x);
	font-family: inherit;
	font-size: var(--fps-font);
	line-height: 1.4;
	color: var(--fps-input-text);
	background: transparent;
	border: 0;
	border-radius: 0;
	outline: 0;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
}

.fuse5-part-search .fuse5-ps-input::placeholder {
	color: var(--fps-input-text);
	opacity: 0.55;
}

/* The browser's built-in "x" clear button ignores the page's colours, so
   it is redrawn with a mask in the box's own text colour. */
.fuse5-part-search .fuse5-ps-input::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
	width: 16px;
	height: 16px;
	margin: 0 0 0 8px;
	cursor: pointer;
	background-color: var(--fps-input-text);
	opacity: 0.45;
	-webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 5l14 14M19 5L5 19' stroke='black' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 5l14 14M19 5L5 19' stroke='black' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.fuse5-part-search .fuse5-ps-input::-webkit-search-cancel-button:hover {
	opacity: 0.8;
}

.fuse5-part-search .fuse5-ps-input-icon {
	position: absolute;
	top: 50%;
	left: var(--fps-pad-x);
	display: none;
	color: var(--fps-input-text);
	opacity: 0.55;
	pointer-events: none;
	transform: translateY(-50%);
}

.fuse5-part-search.fuse5-ps--has-input-icon .fuse5-ps-input-icon {
	display: flex;
}

.fuse5-part-search.fuse5-ps--has-input-icon {
	--fps-in-pl: calc(var(--fps-pad-x) + 30px);
}

.fuse5-part-search .fuse5-ps-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	flex: 0 0 auto;
	margin: 4px;
	padding: 0 calc(var(--fps-pad-x) + 4px);
	font-family: inherit;
	font-size: var(--fps-font);
	font-weight: 600;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	white-space: nowrap;
	color: var(--fps-btn-text);
	background: var(--fps-accent);
	border: 0;
	border-radius: max(calc(var(--fps-radius) - 4px), 0px);
	box-shadow: none;
	cursor: pointer;
	transition: filter 0.15s ease, transform 0.05s ease;
}

.fuse5-part-search .fuse5-ps-button:active {
	filter: brightness(0.95);
}

/* Hover effects only where a pointer can hover; on a touch screen a tapped
   control would otherwise stay "hovered". */
@media (hover: hover) {
	.fuse5-part-search .fuse5-ps-button:hover {
		filter: brightness(1.08);
	}
}

.fuse5-part-search .fuse5-ps-button:active {
	transform: translateY(1px);
}

.fuse5-part-search .fuse5-ps-button:focus-visible {
	outline: 2px solid var(--fps-accent);
	outline-offset: 2px;
}

.fuse5-part-search .fuse5-ps-svg {
	display: block;
	flex: 0 0 auto;
}

/* Button content: icon only / text only / both. */
.fuse5-part-search.fuse5-ps--btn-icon .fuse5-ps-button-text,
.fuse5-part-search.fuse5-ps--btn-text .fuse5-ps-button .fuse5-ps-svg {
	display: none;
}

.fuse5-part-search.fuse5-ps--btn-icon {
	--fps-btn-pad: calc(var(--fps-pad-x) + 2px);
}

/* ---------- Layout: separate (button apart from the box) ---------- */

.fuse5-part-search.fuse5-ps--layout-separate .fuse5-ps-form {
	gap: 10px;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.fuse5-part-search.fuse5-ps--layout-separate .fuse5-ps-field {
	background: var(--fps-input-bg);
	border: 1px solid var(--fps-border);
	border-radius: var(--fps-radius);
	box-shadow: var(--fps-shadow);
	transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.fuse5-part-search.fuse5-ps--layout-separate .fuse5-ps-field:focus-within {
	border-color: var(--fps-accent);
	box-shadow: var(--fps-shadow), 0 0 0 3px rgba(128, 128, 128, 0.25);
	box-shadow: var(--fps-shadow), 0 0 0 3px color-mix(in srgb, var(--fps-accent) 25%, transparent);
}

.fuse5-part-search.fuse5-ps--layout-separate .fuse5-ps-form:focus-within {
	border: 0;
	box-shadow: none;
}

.fuse5-part-search.fuse5-ps--layout-separate {
	--fps-btn-margin: 0;
}

.fuse5-part-search.fuse5-ps--layout-separate .fuse5-ps-button {
	border-radius: var(--fps-radius);
}

/* ---------- Input style: underline only ---------- */

.fuse5-part-search.fuse5-ps--input-underline .fuse5-ps-form,
.fuse5-part-search.fuse5-ps--input-underline.fuse5-ps--layout-separate .fuse5-ps-form {
	gap: 0;
	background: transparent;
	border: 0;
	border-bottom: 2px solid var(--fps-border);
	border-radius: 0;
	box-shadow: none;
}

.fuse5-part-search.fuse5-ps--input-underline .fuse5-ps-form:focus-within,
.fuse5-part-search.fuse5-ps--input-underline.fuse5-ps--layout-separate .fuse5-ps-form:focus-within {
	border-bottom-color: var(--fps-accent);
	box-shadow: none;
}

.fuse5-part-search.fuse5-ps--input-underline .fuse5-ps-field,
.fuse5-part-search.fuse5-ps--input-underline.fuse5-ps--layout-separate .fuse5-ps-field {
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.fuse5-part-search.fuse5-ps--input-underline {
	--fps-in-pl: 0px;
	--fps-btn-margin: 0;
}

.fuse5-part-search.fuse5-ps--input-underline.fuse5-ps--has-input-icon {
	--fps-in-pl: 30px;
}

.fuse5-part-search.fuse5-ps--input-underline .fuse5-ps-input-icon {
	left: 0;
}

.fuse5-part-search.fuse5-ps--input-underline .fuse5-ps-button,
.fuse5-part-search.fuse5-ps--input-underline.fuse5-ps--layout-separate .fuse5-ps-button {
	color: var(--fps-accent);
	background: transparent;
	border-radius: 0;
}

/* ---------- Results dropdown ---------- */

.fuse5-part-search .fuse5-ps-results {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	left: 0;
	z-index: 99999;
	max-height: min(480px, 60vh);
	padding: 6px;
	overflow-y: auto;
	color: var(--fps-drop-text);
	text-align: left;
	background: var(--fps-drop-bg);
	border: 1px solid var(--fps-border);
	border-radius: min(var(--fps-radius), 16px);
	box-shadow: 0 14px 36px rgba(0, 0, 0, 0.18);
}

.fuse5-part-search .fuse5-ps-results[hidden] {
	display: none;
}

.fuse5-part-search .fuse5-ps-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px;
	color: inherit;
	text-decoration: none;
	border: 0;
	border-radius: min(var(--fps-radius), 12px);
}

.fuse5-part-search .fuse5-ps-item.is-active {
	background: rgba(128, 128, 128, 0.12);
	background: color-mix(in srgb, var(--fps-accent) 10%, transparent);
}

@media (hover: hover) {
	.fuse5-part-search .fuse5-ps-item:hover {
		background: rgba(128, 128, 128, 0.12);
		background: color-mix(in srgb, var(--fps-accent) 10%, transparent);
	}
}

.fuse5-part-search .fuse5-ps-item img {
	flex: 0 0 52px;
	width: 52px;
	height: 52px;
	object-fit: cover;
	background: #e7e9ec;
	border-radius: 8px;
}

.fuse5-part-search .fuse5-ps-body {
	min-width: 0;
	flex: 1;
}

.fuse5-part-search .fuse5-ps-title {
	font-size: 0.92em;
	font-weight: 600;
	line-height: 1.3;
	overflow-wrap: anywhere;
}

.fuse5-part-search .fuse5-ps-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2px 12px;
	margin-top: 3px;
	font-size: 0.8em;
}

.fuse5-part-search .fuse5-ps-part {
	opacity: 0.7;
}

.fuse5-part-search .fuse5-ps-price {
	font-weight: 700;
	color: var(--fps-accent);
}

.fuse5-part-search .fuse5-ps-stock.is-in {
	color: #1a7f37;
}

.fuse5-part-search .fuse5-ps-stock.is-out {
	color: #c0392b;
}

.fuse5-part-search .fuse5-ps-stock.is-catalog {
	opacity: 0.75;
}

.fuse5-part-search.fuse5-ps--drop-dark .fuse5-ps-stock.is-in {
	color: #4ade80;
}

.fuse5-part-search.fuse5-ps--drop-dark .fuse5-ps-stock.is-out {
	color: #f87171;
}

.fuse5-part-search .fuse5-ps-badge {
	flex: 0 0 auto;
	padding: 3px 9px;
	font-size: 0.72em;
	font-weight: 600;
	white-space: nowrap;
	color: var(--fps-accent);
	background: rgba(128, 128, 128, 0.16);
	background: color-mix(in srgb, var(--fps-accent) 14%, transparent);
	border-radius: 999px;
}

.fuse5-part-search .fuse5-ps-status {
	padding: 12px;
	font-size: 0.9em;
	opacity: 0.7;
}

.fuse5-part-search .fuse5-ps-all {
	display: block;
	margin-top: 4px;
	padding: 12px;
	font-size: 0.9em;
	font-weight: 600;
	color: var(--fps-accent);
	text-align: center;
	text-decoration: none;
	border-top: 1px solid var(--fps-border);
}

.fuse5-part-search .fuse5-ps-all:hover {
	text-decoration: underline;
}

/* Hide result details switched off in the design settings. */
.fuse5-part-search.fuse5-ps--no-images .fuse5-ps-item img,
.fuse5-part-search.fuse5-ps--no-price .fuse5-ps-price,
.fuse5-part-search.fuse5-ps--no-stock .fuse5-ps-stock {
	display: none;
}

/* Notice shown above search results (on-demand import message). */
.fuse5-ps-notice {
	margin-bottom: 20px;
}

/* ---------- Small screens ---------- */

@media (max-width: 768px) {
	/* 16px stops iPhone Safari zooming the page when the box is tapped. */
	.fuse5-part-search .fuse5-ps-input {
		font-size: 16px;
	}
}

@media (max-width: 480px) {
	/* The badge moves under the text so the product name keeps its width.
	   64px = image (52) + gap (12). */
	.fuse5-part-search .fuse5-ps-item {
		flex-wrap: wrap;
	}

	.fuse5-part-search .fuse5-ps-body {
		flex: 1 1 calc(100% - 64px);
	}

	.fuse5-part-search.fuse5-ps--no-images .fuse5-ps-body {
		flex-basis: 100%;
	}

	.fuse5-part-search .fuse5-ps-badge {
		margin-left: 64px;
	}

	.fuse5-part-search.fuse5-ps--no-images .fuse5-ps-badge {
		margin-left: 0;
	}
}

@media (max-width: 420px) {
	.fuse5-part-search.fuse5-ps--btn-both .fuse5-ps-button-text {
		display: none;
	}

	.fuse5-part-search.fuse5-ps--layout-separate .fuse5-ps-form {
		gap: 8px;
	}
}

/* ---------- Touch screens and narrow bars ---------- */

/* Thumb-sized targets (44px is the usual minimum) on any touch screen, and
   on any small screen. */
@media (pointer: coarse), (max-width: 700px) {
	.fuse5-part-search .fuse5-ps-input {
		min-height: 44px;
	}

	.fuse5-part-search .fuse5-ps-button {
		min-width: 48px;
		min-height: 44px;
	}

	.fuse5-part-search .fuse5-ps-all,
	.fuse5-part-search .fuse5-ps-item {
		min-height: 48px;
	}
}

/* Set by part-search.js when the BAR itself is under 420px wide, whatever
   the screen is: a theme sidebar or a squeezed column is just as narrow as a
   phone. Icon-only button, and a shorter results list. */
.fuse5-part-search.fuse5-ps--narrow.fuse5-ps--btn-both .fuse5-ps-button-text {
	display: none;
}

.fuse5-part-search.fuse5-ps--narrow .fuse5-ps-results {
	max-height: min(420px, 55vh);
}

/* When tapping the box scrolls the bar to the top of the screen (so the
   results have room above the keyboard), keep it clear of the very edge. */
.fuse5-part-search {
	scroll-margin-top: 12px;
}


/* ---------- Hardening against theme styles ----------
   Themes size bare inputs and buttons with selectors longer than a plugin's
   (".woocommerce-account input[type=search] { min-width: 300px }"). Ordinary
   rules lose to those and the box is pushed out of its container, over the
   button, past the card. So the properties that decide SIZE and POSITION
   below carry !important. Colours are left alone: a theme recolouring the
   button is a style difference, not a broken layout. The variants (icon in
   the box, icon-only button, underline, separate) feed the variables read
   here instead of setting padding or margin themselves. */

.fuse5-part-search .fuse5-ps-form {
	box-sizing: border-box !important;
	width: 100% !important;
	min-width: 0 !important;
	max-width: 100% !important;
}

.fuse5-part-search .fuse5-ps-field {
	box-sizing: border-box !important;
	flex: 1 1 0% !important;
	width: auto !important;
	min-width: 0 !important;
	max-width: 100% !important;
}

.fuse5-part-search .fuse5-ps-input {
	box-sizing: border-box !important;
	flex: 1 1 0% !important;
	width: 100% !important;
	min-width: 0 !important;
	max-width: 100% !important;
	height: auto !important;
	margin: 0 !important;
	padding: var(--fps-pad-y) var(--fps-in-pr, var(--fps-pad-x)) var(--fps-pad-y) var(--fps-in-pl, var(--fps-pad-x)) !important;
	font-size: var(--fps-font) !important;
	line-height: 1.4 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	/* The bar's own wrapper draws the border and background. */
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

.fuse5-part-search .fuse5-ps-button {
	box-sizing: border-box !important;
	flex: 0 0 auto !important;
	width: auto !important;
	min-width: 44px !important;
	height: auto !important;
	min-height: 44px !important;
	margin: var(--fps-btn-margin, 4px) !important;
	padding: 0 var(--fps-btn-pad, calc(var(--fps-pad-x) + 4px)) !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	white-space: nowrap !important;
}

@media (max-width: 768px) {
	.fuse5-part-search .fuse5-ps-input {
		font-size: 16px !important; /* 16px stops iPhone Safari zooming in on tap. */
	}
}

/* ---------- Phone: just an icon that opens the bar ----------
   part-search.js adds .fuse5-ps--phone when this bar is set to collapse and
   the screen is small, and .fuse5-ps--collapsed while it is closed. Without
   the script none of this applies and the normal bar shows. */

.fuse5-part-search .fuse5-ps-toggle,
.fuse5-part-search .fuse5-ps-close {
	display: none;
}

.fuse5-part-search.fuse5-ps--collapsed .fuse5-ps-toggle {
	display: flex !important;
	align-items: center;
	justify-content: center;
	box-sizing: border-box !important;
	width: 48px !important;
	min-width: 48px !important;
	height: 48px !important;
	min-height: 48px !important;
	margin: 0 !important;
	padding: 0 !important;
	color: var(--fps-btn-text);
	background: var(--fps-accent);
	border: 0;
	border-radius: 50%;
	box-shadow: var(--fps-shadow);
	cursor: pointer;
	text-transform: none;
	touch-action: manipulation;
}

.fuse5-part-search.fuse5-ps--collapsed.fuse5-ps--align-center .fuse5-ps-toggle {
	margin-right: auto !important;
	margin-left: auto !important;
}

.fuse5-part-search.fuse5-ps--collapsed .fuse5-ps-form,
.fuse5-part-search.fuse5-ps--collapsed .fuse5-ps-results {
	display: none !important;
}

.fuse5-part-search.fuse5-ps--phone {
	--fps-in-pr: 48px; /* Room for the close button inside the box. */
}

.fuse5-part-search.fuse5-ps--phone:not(.fuse5-ps--collapsed) .fuse5-ps-close {
	position: absolute;
	top: 50%;
	right: 4px;
	display: flex !important;
	align-items: center;
	justify-content: center;
	box-sizing: border-box !important;
	width: 40px !important;
	min-width: 40px !important;
	height: 40px !important;
	min-height: 40px !important;
	margin: 0 !important;
	padding: 0 !important;
	color: var(--fps-input-text);
	background: transparent;
	border: 0;
	border-radius: 50%;
	opacity: 0.65;
	cursor: pointer;
	text-transform: none;
	transform: translateY(-50%);
	touch-action: manipulation;
}

/* The close button replaces the browser's own clear (x). */
.fuse5-part-search.fuse5-ps--phone .fuse5-ps-input::-webkit-search-cancel-button {
	display: none;
	-webkit-appearance: none;
}

/* Icon sizes. Themes often reset every svg (`svg { width: 100% }`) or size
   the icon inside any button (`.woocommerce-account button svg`), which
   stretches the magnifier and pushes the bar out of shape. The sizes are
   fixed here and the icon's margin is cleared so a theme can't shift it. */
.fuse5-part-search .fuse5-ps-svg {
	display: block !important;
	flex: 0 0 auto !important;
	width: 20px !important;
	height: 20px !important;
	min-width: 20px !important;
	max-width: none !important;
	margin: 0 !important;
}

.fuse5-part-search .fuse5-ps-close .fuse5-ps-svg {
	width: 18px !important;
	height: 18px !important;
	min-width: 18px !important;
}