/* aSS Picker — filter bar styles
   Sits in the same row as .woocommerce-result-count (floated right, matching
   the slot previously occupied by .woocommerce-ordering).
   ------------------------------------------------------------------ */

.ass-picker-bar {
	float: right;
	display: inline-flex;
	align-items: center;
	margin-bottom: 1em;
	font-size: 0.875em;
	line-height: 1;
}

.ass-picker-bar form {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 0;
}

/* Individual field (label + select) */
.ass-picker-field {
	display: flex;
	align-items: center;
	gap: 6px;
}

.ass-picker-field label {
	font-weight: 600;
	white-space: nowrap;
	margin: 0;
	cursor: default;
}

.ass-picker-field select {
	min-width: 140px;
	height: 34px;
	padding: 0 10px 0 8px;
	border: 1px solid #d3d3d3;
	border-radius: 3px;
	background-color: #fff;
	font-size: 1em;
	cursor: pointer;
	appearance: auto;
}

.ass-picker-field select:focus {
	outline: 2px solid currentColor;
	outline-offset: 1px;
	border-color: #7f54b3; /* WC purple accent */
}

/* Thin vertical rule between the two dropdowns */
.ass-picker-sep {
	width: 1px;
	height: 22px;
	background: #ddd;
	flex-shrink: 0;
}

/* × Clear link */
.ass-picker-reset {
	color: #767676;
	text-decoration: none;
	font-size: 0.9em;
	white-space: nowrap;
	padding: 3px 7px;
	border: 1px solid #ddd;
	border-radius: 3px;
	transition: color 0.15s, border-color 0.15s;
}

.ass-picker-reset:hover {
	color: #1a1a1a;
	border-color: #aaa;
	text-decoration: none;
}

/* Highlight active selects with the WC accent colour */
.ass-picker-bar--active .ass-picker-field select {
	border-color: #7f54b3;
}

/* noscript submit button */
.ass-picker-bar .button {
	height: 34px;
	padding: 0 14px;
	font-size: 1em;
	line-height: 34px;
	cursor: pointer;
}

/* ------------------------------------------------------------------ */
/* Responsive: stack the form fields on narrow viewports              */
/* ------------------------------------------------------------------ */
@media ( max-width: 768px ) {
	.ass-picker-bar {
		float: none;
		display: block;
		width: 100%;
		margin-bottom: 1.5em;
	}

	.ass-picker-bar form {
		flex-wrap: wrap;
		gap: 8px;
	}

	.ass-picker-sep {
		display: none;
	}

	.ass-picker-field {
		flex: 1 1 auto;
		min-width: 0;
	}

	.ass-picker-field select {
		min-width: 0;
		width: 100%;
	}

	.ass-picker-reset {
		align-self: center;
	}
}