/**
 * Native property filters.
 *
 * Reproduces the look the Search & Filter Pro controls had, using the same
 * class hooks the theme already styles (.search-filter-field,
 * .search-filter-field__input) so nothing in the existing design changes.
 *
 * White outlined, transparent, square cornered controls on the blue panel.
 */

.plett-filter-form {
	display: contents;
}

.plett-filter-field {
	max-width: 400px;
	width: 100%;
	position: relative;
}

/* Shared control styling: select, search input and submit button. */
.plett-filter-input,
.plett-filter-submit,
.plett-filter-reset {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background: transparent;
	color: #fff;
	border: 1px solid #fff;
	border-radius: 0;
	width: 100%;
	min-width: 150px;
	max-width: unset;
	height: 38px;
	padding: 0 32px 0 12px;
	font-size: 14px;
	line-height: 1.2;
	font-family: inherit;
	cursor: pointer;
	text-overflow: ellipsis;
}

.plett-filter-input::placeholder {
	color: #fff;
	opacity: 1;
}

/* Chevron for the selects, drawn inline so there is no extra request. */
select.plett-filter-input {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='1.5' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 12px 8px;
}

input.plett-filter-input {
	cursor: text;
	padding-right: 12px;
}

/* The dropdown list itself is drawn by the browser, so give it readable
   colours rather than white on white. */
.plett-filter-input option {
	background: #fff;
	color: #1e1a1c;
}

.plett-filter-input option:first-child {
	color: #6b7c88;
}

.plett-filter-input:hover,
.plett-filter-submit:hover,
.plett-filter-reset:hover {
	background-color: rgba(255, 255, 255, 0.12);
}

.plett-filter-input:focus-visible,
.plett-filter-submit:focus-visible,
.plett-filter-reset:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.plett-filter-submit,
.plett-filter-reset {
	padding: 0 12px;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	text-decoration: none;
	display: flex;
	align-items: center;
	justify-content: center;
}

.plett-filter-reset {
	border-style: dashed;
}

/* The sort and collection controls sit on a light background rather than the
   blue panel, so they need the inverse treatment. */
.filter-results .plett-filter-input {
	color: #4b728d;
	border-color: #4b728d;
	min-width: 170px;
}

.filter-results select.plett-filter-input {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%234b728d' stroke-width='1.5' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
}

.filter-results .plett-filter-input:hover {
	background-color: rgba(75, 114, 141, 0.08);
}

.filter-results .plett-filter-input:focus-visible {
	outline-color: #4b728d;
}

.filter-results .plett-filter-field {
	width: auto;
}

@media (max-width: 979px) {
	.plett-filter-field {
		max-width: none;
	}
}

/* While option counts are refreshing after a change. */
.plett-filter-form--loading .plett-filter-input {
	opacity: 0.65;
	transition: opacity 120ms ease;
}

/* ---------------------------------------------------------------------------
   Property name suggestions

   The native <datalist> dropdown is drawn by the browser's own UI and cannot
   be styled, so it looked nothing like the rest of the panel. This replaces it
   with a list we control, matching the <select> dropdowns: white surface,
   dark text, brand blue on the active row.
   --------------------------------------------------------------------------- */

/*
 * Specificity note: the theme sets ".searchandfilter_archive ul { display:grid;
 * grid-template-columns: repeat(5,1fr) }" and ".searchandfilter ul li { width:100% }",
 * which caught this list and laid it out as a truncated 5 column grid. The
 * selectors below are deliberately specific enough to win, and reset the grid
 * properties rather than relying on display alone.
 */
.plett-filter-field ul.plett-suggest,
ul.plett-suggest {
	display: block;
	grid-template-columns: none;
	grid-template-rows: none;
	column-gap: 0;
	row-gap: 0;
	position: absolute;
	top: calc(100% - 1px);
	left: 0;
	right: 0;
	width: auto;
	z-index: 1000000;
	margin: 0;
	padding: 4px 0;
	list-style: none;
	max-height: 300px;
	overflow-y: auto;
	overscroll-behavior: contain;
	background: #fff;
	border: 1px solid #4b728d;
	box-shadow: 0 8px 20px rgba(30, 26, 28, 0.16);
	text-align: left;
	-webkit-overflow-scrolling: touch;
}

.plett-filter-field ul.plett-suggest[hidden],
ul.plett-suggest[hidden] {
	display: none;
}

.plett-filter-field ul.plett-suggest > li.plett-suggest__item,
ul.plett-suggest > li.plett-suggest__item {
	display: block;
	width: auto;
	margin: 0;
	padding: 9px 14px;
	font-size: 14px;
	line-height: 1.35;
	color: #1e1a1c;
	cursor: pointer;
	white-space: normal;
	overflow: visible;
	text-overflow: clip;
}

.plett-suggest__item mark {
	background: none;
	color: #4b728d;
	font-weight: 600;
}

.plett-suggest__item:hover,
.plett-suggest__item[aria-selected="true"] {
	background: #4b728d;
	color: #fff;
}

.plett-suggest__item:hover mark,
.plett-suggest__item[aria-selected="true"] mark {
	color: #fff;
}

.plett-filter-field ul.plett-suggest > li.plett-suggest__empty,
ul.plett-suggest > li.plett-suggest__empty {
	display: block;
	width: auto;
	padding: 9px 14px;
	font-size: 14px;
	color: #6b7c88;
	cursor: default;
}

/* Scrollbar tuned to the panel rather than the browser default. */
.plett-suggest::-webkit-scrollbar {
	width: 8px;
}

.plett-suggest::-webkit-scrollbar-thumb {
	background: #c3d0d8;
}

.plett-suggest::-webkit-scrollbar-thumb:hover {
	background: #8aa6b6;
}

/*
 * Chrome draws its own dropdown arrow on an <input list="...">. JavaScript
 * removes the list attribute once the styled suggestions take over, but this
 * hides the arrow immediately so it never flashes on load, and keeps the field
 * looking like a text input when JavaScript is unavailable.
 */
input.plett-filter-input::-webkit-calendar-picker-indicator {
	display: none !important;
	opacity: 0;
}

input.plett-filter-search::-webkit-search-decoration,
input.plett-filter-search::-webkit-search-results-button {
	-webkit-appearance: none;
}

/* Keep the native clear button visible but tinted to the panel. */
input.plett-filter-search::-webkit-search-cancel-button {
	-webkit-appearance: none;
	height: 12px;
	width: 12px;
	cursor: pointer;
	background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' d='M2 2l8 8M10 2l-8 8'/%3E%3C/svg%3E") no-repeat center / 12px 12px;
}

.filter-results input.plett-filter-search::-webkit-search-cancel-button {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%234b728d' stroke-width='1.6' stroke-linecap='round' d='M2 2l8 8M10 2l-8 8'/%3E%3C/svg%3E");
}

/* ===========================================================================
   Custom dropdown

   Native <select> dropdowns are drawn by the operating system and cannot be
   styled, so they never matched the panel. Each select is kept in the form as
   the source of truth (so the form still works without JavaScript) and this
   component is layered over it.

   Two contexts: the blue search panel, and the light sort row beneath the
   grid, which inverts the palette.
   =========================================================================== */

.plett-select {
	position: relative;
	width: 100%;
	min-width: 150px;
}

/* The real control stays in the form but out of sight. */
.plett-select__native {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.plett-select__button {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	height: 38px;
	padding: 0 12px;
	background: transparent;
	border: 1px solid #fff;
	border-radius: 2px;
	color: #fff;
	font-family: inherit;
	font-size: 14px;
	line-height: 1.2;
	text-align: left;
	cursor: pointer;
	transition: background-color 140ms ease, border-color 140ms ease;
}

.plett-select__button:hover {
	background-color: rgba(255, 255, 255, 0.12);
}

.plett-select__button:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.plett-select__label {
	flex: 1 1 auto;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.plett-select--empty .plett-select__label {
	opacity: 0.72;
}

.plett-select__chevron {
	flex: 0 0 auto;
	width: 11px;
	height: 7px;
	transition: transform 160ms ease;
}

.plett-select[data-open="true"] .plett-select__chevron {
	transform: rotate(180deg);
}

.plett-select[data-open="true"] .plett-select__button {
	background-color: rgba(255, 255, 255, 0.14);
}

/* --- panel --- */

.plett-select ul.plett-select__panel,
.plett-filter-field ul.plett-suggest,
ul.plett-suggest {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	width: auto;
	z-index: 1000000;
	display: block;
	grid-template-columns: none;
	grid-template-rows: none;
	column-gap: 0;
	row-gap: 0;
	margin: 0;
	padding: 4px;
	list-style: none;
	max-height: 300px;
	overflow-y: auto;
	overscroll-behavior: contain;
	background: #3f6580;
	border: 1px solid rgba(255, 255, 255, 0.55);
	border-radius: 2px;
	box-shadow: 0 14px 32px rgba(15, 32, 45, 0.32);
	text-align: left;
	-webkit-overflow-scrolling: touch;
	animation: plett-select-in 130ms ease-out;
}

@keyframes plett-select-in {
	from { opacity: 0; transform: translateY(-4px); }
	to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
	.plett-select ul.plett-select__panel,
	ul.plett-suggest { animation: none; }
	.plett-select__chevron,
	.plett-select__button { transition: none; }
}

.plett-select ul.plett-select__panel[hidden],
.plett-filter-field ul.plett-suggest[hidden],
ul.plett-suggest[hidden] {
	display: none;
}

/* --- options --- */

.plett-select ul.plett-select__panel > li,
.plett-filter-field ul.plett-suggest > li.plett-suggest__item,
ul.plett-suggest > li.plett-suggest__item,
.plett-filter-field ul.plett-suggest > li.plett-suggest__empty,
ul.plett-suggest > li.plett-suggest__empty {
	width: auto;
	margin: 0;
	padding: 9px 10px;
	border-radius: 2px;
	font-size: 14px;
	line-height: 1.35;
	color: #fff;
	cursor: pointer;
	white-space: normal;
	overflow: visible;
	text-overflow: clip;
	transition: background-color 90ms ease;
}

/*
 * Only the select options need flex, because they lay a label against a count.
 * Suggestion rows stay as normal inline text, otherwise every <mark> becomes
 * its own flex item and the gap opens a space around each highlighted letter.
 */
.plett-select ul.plett-select__panel > li {
	display: flex;
	align-items: baseline;
	gap: 8px;
}

.plett-filter-field ul.plett-suggest > li,
ul.plett-suggest > li {
	display: block;
}

.plett-select ul.plett-select__panel > li:hover,
.plett-select ul.plett-select__panel > li[aria-selected="true"],
.plett-filter-field ul.plett-suggest > li.plett-suggest__item:hover,
ul.plett-suggest > li.plett-suggest__item:hover,
.plett-filter-field ul.plett-suggest > li.plett-suggest__item[aria-selected="true"],
ul.plett-suggest > li.plett-suggest__item[aria-selected="true"] {
	background-color: rgba(255, 255, 255, 0.16);
}

/* The option currently chosen, marked with a tick rather than a colour alone. */
.plett-select ul.plett-select__panel > li.is-current {
	background-color: rgba(255, 255, 255, 0.1);
	font-weight: 600;
}

.plett-select ul.plett-select__panel > li.is-current::after {
	content: "";
	flex: 0 0 auto;
	width: 12px;
	height: 9px;
	margin-left: auto;
	background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 9'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M1 4.6 4.4 8 11 1.2'/%3E%3C/svg%3E") no-repeat center / 12px 9px;
}

.plett-select__count {
	flex: 0 0 auto;
	margin-left: auto;
	font-size: 12.5px;
	font-variant-numeric: tabular-nums;
	color: rgba(255, 255, 255, 0.62);
}

.plett-select ul.plett-select__panel > li.is-current .plett-select__count {
	margin-left: 0;
}

.plett-filter-field ul.plett-suggest mark,
ul.plett-suggest mark {
	/* Inline, no box, no spacing: the word must not break apart. */
	display: inline;
	padding: 0;
	margin: 0;
	background: rgba(255, 255, 255, 0.22);
	border-radius: 2px;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.22);
	color: #fff;
	font-weight: 600;
}

.plett-suggest__empty {
	color: rgba(255, 255, 255, 0.62);
	cursor: default;
}

.plett-select ul.plett-select__panel > li.plett-select__placeholder {
	color: rgba(255, 255, 255, 0.62);
}

/* --- scrollbar --- */

.plett-select ul.plett-select__panel::-webkit-scrollbar,
ul.plett-suggest::-webkit-scrollbar {
	width: 8px;
}

.plett-select ul.plett-select__panel::-webkit-scrollbar-thumb,
ul.plett-suggest::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.28);
	border-radius: 4px;
}

.plett-select ul.plett-select__panel::-webkit-scrollbar-thumb:hover,
ul.plett-suggest::-webkit-scrollbar-thumb:hover {
	background: rgba(255, 255, 255, 0.45);
}

/* --- light context: the sort row under the grid --- */

.filter-results .plett-select__button {
	color: #4b728d;
	border-color: #4b728d;
}

.filter-results .plett-select__button:hover,
.filter-results .plett-select[data-open="true"] .plett-select__button {
	background-color: rgba(75, 114, 141, 0.08);
}

.filter-results .plett-select__button:focus-visible {
	outline-color: #4b728d;
}

.filter-results .plett-select ul.plett-select__panel {
	background: #fff;
	border-color: #4b728d;
	box-shadow: 0 14px 32px rgba(30, 26, 28, 0.18);
}

.filter-results .plett-select ul.plett-select__panel > li {
	color: #1e1a1c;
}

.filter-results .plett-select ul.plett-select__panel > li:hover,
.filter-results .plett-select ul.plett-select__panel > li[aria-selected="true"] {
	background-color: rgba(75, 114, 141, 0.14);
}

.filter-results .plett-select ul.plett-select__panel > li.is-current {
	background-color: rgba(75, 114, 141, 0.09);
}

.filter-results .plett-select ul.plett-select__panel > li.is-current::after {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 9'%3E%3Cpath fill='none' stroke='%234b728d' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M1 4.6 4.4 8 11 1.2'/%3E%3C/svg%3E");
}

.filter-results .plett-select__count {
	color: #6b7c88;
}

.filter-results .plett-select ul.plett-select__panel::-webkit-scrollbar-thumb {
	background: #c3d0d8;
}

.filter-results .plett-select {
	width: auto;
	min-width: 170px;
}

@media (max-width: 979px) {
	.plett-select { min-width: 0; }
}

/* ===========================================================================
   Submit and Reset

   Solid buttons rather than outlined, matching the original design: Submit is
   white with blue text, Reset is the secondary blue with white text. Colours
   are set explicitly because Reset is an <a>, which would otherwise pick up
   the theme's link colour (and its visited colour, which was tinting part of
   the label).
   =========================================================================== */

.plett-filter-field .plett-filter-submit,
.plett-filter-field .plett-filter-reset {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-width: 150px;
	height: 38px;
	padding: 0 16px;
	border-radius: 2px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease;
}

/* Submit: white */
.plett-filter-field .plett-filter-submit,
.plett-filter-field .plett-filter-submit:visited {
	background: #fff;
	border: 1px solid #fff;
	color: #4b728d;
}

.plett-filter-field .plett-filter-submit:hover,
.plett-filter-field .plett-filter-submit:focus {
	background: #eef3f6;
	border-color: #eef3f6;
	color: #3f6580;
}

/* Reset: secondary blue */
.plett-filter-field .plett-filter-reset,
.plett-filter-field .plett-filter-reset:visited {
	background: #71a3b9;
	border: 1px solid #71a3b9;
	color: #fff;
}

.plett-filter-field .plett-filter-reset:hover,
.plett-filter-field .plett-filter-reset:focus {
	background: #82b1c5;
	border-color: #82b1c5;
	color: #fff;
}

.plett-filter-field .plett-filter-submit:focus-visible,
.plett-filter-field .plett-filter-reset:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* =============================================================
 * Clear ("x") buttons
 *
 * One on each select and each free-text box, shown only when the field
 * actually holds something. Selectors are deliberately more specific than a
 * bare class: the archive markup inherits some broad plugin-era rules and a
 * single class has lost that fight before.
 *
 * The select's chevron sits inside the button as a flex item, so the clear
 * cannot join that row without nesting a button inside a button. It is
 * absolutely positioned just left of the chevron instead, and the label is
 * given matching right padding so long text ellipsises before it reaches the
 * icon rather than running underneath it.
 * ============================================================= */

.plett-select {
	position: relative;
}

.plett-select button.plett-select__clear,
.plett-filter-field button.plett-filter-clear {
	position: absolute;
	top: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 38px;
	min-width: 0;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	color: #fff;
	line-height: 1;
	opacity: 0.65;
	cursor: pointer;
	transition: opacity 120ms ease;
}

/* Clear of the chevron: 12px padding + 11px chevron + a 6px gap. */
.plett-select button.plett-select__clear {
	right: 29px;
}

.plett-filter-field button.plett-filter-clear {
	right: 6px;
}

.plett-select button.plett-select__clear:hover,
.plett-filter-field button.plett-filter-clear:hover {
	background: none;
	opacity: 1;
}

.plett-select button.plett-select__clear:focus-visible,
.plett-filter-field button.plett-filter-clear:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 1px;
	opacity: 1;
}

.plett-select button.plett-select__clear .plett-clear__icon,
.plett-filter-field button.plett-filter-clear .plett-clear__icon {
	display: block;
	width: 10px;
	height: 10px;
}

/* Nothing selected or typed means nothing to clear. */
.plett-select.plett-select--empty button.plett-select__clear,
.plett-filter-field:not(.plett-filter-field--filled) button.plett-filter-clear {
	display: none;
}

/* Reserve room so the value never sits under the icon. */
.plett-select:not(.plett-select--empty) .plett-select__label {
	padding-right: 22px;
}

.plett-filter-field--filled input.plett-filter-input {
	padding-right: 32px;
}

/* The sort row sits on a light background rather than the blue bar. */
.filter-results .plett-select button.plett-select__clear,
.filter-results .plett-filter-field button.plett-filter-clear {
	color: #4b728d;
}

.filter-results .plett-select button.plett-select__clear:focus-visible,
.filter-results .plett-filter-field button.plett-filter-clear:focus-visible {
	outline-color: #4b728d;
}