/* Filter bar for the Orders list in My Account.
 *
 * Deliberately a copy of the same control in the bill payments plugin rather
 * than a shared file: the two plugins are independent, and a stylesheet owned
 * by one of them would leave the other's filter unstyled the moment it was
 * deactivated. The look is what is shared, not the file.
 *
 * Palette taken from the active Electro theme — primary #0787ea, body text
 * #333e48, borders #d9d9d9, grey surfaces #f8f9fa — so the control reads as
 * part of the account page.
 */

.smc-filter {
	--smc-primary: #0787ea;
	--smc-primary-soft: #e7f3fd;
	--smc-text: #333e48;
	--smc-muted: #6c757d;
	--smc-border: #d9d9d9;
	--smc-border-soft: #e9ecef;
	--smc-card: #ffffff;
	--smc-surface: #f8f9fa;

	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	align-items: end;
	gap: 0.7rem 0.85rem;
	margin: 0 0 1.35rem;
	padding: 0.95rem 1.05rem;
	border: 1px solid var(--smc-border-soft);
	border-radius: 8px;
	background: var(--smc-surface);
	font-size: 15px;
	line-height: 1.55;
	color: var(--smc-text);
}

.smc-filter *,
.smc-filter *::before,
.smc-filter *::after { box-sizing: border-box; }

/* min-width:0 is what stops a date input — which carries its own intrinsic
   width — from pushing its grid column wider than its share. */
.smc-filter__field {
	min-width: 0;
	margin: 0;
}

.smc-filter__field--wide { grid-column: span 2; }

.smc-filter__label {
	display: block;
	margin: 0 0 0.3rem;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	line-height: 1.3;
	color: var(--smc-muted);
}

/* !important, deliberately, on the handful of properties the theme insists
   on. Electro styles account form controls through long selector chains that
   out-specify anything reasonable here — measured in the browser, the search
   box came out as a 22px pill with the theme's own padding and font size
   while the select and the date inputs took these rules unchanged. Raising
   specificity to guess at a chain nobody can see from here is how the same
   fix gets made twice; the properties that must hold say so. */
.smc-filter input,
.smc-filter select {
	width: 100%;
	min-width: 0;
	max-width: 100%;
	height: auto;
	min-height: 0;
	margin: 0 !important;
	padding: 0.5rem 0.7rem !important;
	border: 1px solid var(--smc-border) !important;
	border-radius: 6px !important;
	background-color: var(--smc-card);
	font-family: inherit;
	font-size: 0.88rem !important;
	line-height: 1.4;
	color: var(--smc-text);
	box-shadow: none;
	transition: border-color .15s, box-shadow .15s;
}

.smc-filter input:focus,
.smc-filter select:focus {
	outline: none;
	border-color: var(--smc-primary);
	box-shadow: 0 0 0 3px var(--smc-primary-soft);
}

/* The theme sets appearance:none on select and supplies its own arrow as a
   background image. Anything that repaints the background loses it, so the
   caret is drawn here and the control looks the same whatever the theme does. */
.smc-filter select {
	-webkit-appearance: none;
	appearance: none;
	padding-right: 2.1rem !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='none' stroke='%236c757d' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.8rem center;
	background-size: 10px 6px;
}

.smc-filter__actions {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	margin: 0;
}

/* The submit is the primary action on this bar, so it is the theme's primary
   blue and not the pale secondary pill every .button gets on the account
   page. The text lives in the button itself, so blanking the theme's icon
   pseudo-element cannot take the control with it. */
.smc-filter__actions .button {
	flex: 0 0 auto;
	margin: 0 !important;
	padding: 0.55rem 1.1rem !important;
	border: 1px solid var(--smc-primary) !important;
	border-radius: 6px !important;
	background: var(--smc-primary) !important;
	color: #fff !important;
	font-size: 0.85rem !important;
	font-weight: 600;
	line-height: 1.3;
	text-transform: none !important;
}

.smc-filter__actions .button:hover,
.smc-filter__actions .button:focus {
	border-color: #067ad4 !important;
	background: #067ad4 !important;
	color: #fff !important;
}

.smc-filter__actions .button::before,
.smc-filter__actions .button::after { content: none !important; }

/* a.smc-filter__clear, not .smc-filter__clear: the theme colours account
   links through a two-class selector, and the element selector is enough to
   win without reaching for !important. */
.smc-filter a.smc-filter__clear {
	white-space: nowrap;
	font-size: 0.85rem;
	color: var(--smc-primary);
	text-decoration: none;
}

.smc-filter a.smc-filter__clear:hover,
.smc-filter a.smc-filter__clear:focus { text-decoration: underline; }

.smc-filter-count {
	margin: 0 0 0.6rem;
	font-size: 0.9rem;
	font-weight: 600;
	color: #212121;
}

.smc-filter-empty {
	margin: 1.5rem 0 0;
	text-align: center;
	color: #6c757d;
}

.smc-filter-empty .button { margin-top: 0.75rem; }

@media (max-width: 640px) {
	.smc-filter {
		grid-template-columns: 1fr 1fr;
		padding: 0.85rem;
	}

	.smc-filter__field--wide,
	.smc-filter__actions { grid-column: 1 / -1; }

	/* The theme stretches buttons on a phone; here the submit shares its row
	   with Clear, and taking the full width pushes Clear off the edge. */
	.smc-filter__actions .button {
		width: auto !important;
		flex: 1 1 auto;
	}
}