/**
 * Listing Search Block — Modern Command Palette Styles
 */

/* ─── Search Container ─── */

.listora-search {
	margin-block-end: var(--listora-space-6);
}

/* ─── Search Bar ─── */

.listora-search__bar {
	display: flex;
	gap: var(--listora-space-2);
	align-items: stretch;
	background: var(--listora-bg-elevated);
	border: var(--listora-card-border);
	border-radius: var(--listora-radius-xl);
	padding: var(--listora-space-2);
	box-shadow: var(--listora-shadow-sm);
	transition: box-shadow var(--listora-transition-slow), transform var(--listora-transition-slow);
}

.listora-search__bar:focus-within {
	box-shadow: var(--listora-shadow-xl);
	transform: translateY(-1px);
}

/* ─── Search Fields ─── */

.listora-search__field {
	position: relative;
	flex: 1;
	min-width: 0;
}

.listora-search__field--keyword {
	flex: 2;
}

.listora-search__field--type {
	flex: 0 0 auto;
	min-width: 140px;
}

.listora-search__icon {
	position: absolute;
	inset-inline-start: 0.6rem;
	top: 50%;
	transform: translateY(-50%);
	color: var(--listora-fg-faint);
	pointer-events: none;
	z-index: 1;
}

.listora-search__field .listora-search__input {
	padding-inline-start: 2.2rem;
	border: none;
	background: transparent;
	height: 100%;
	box-shadow: none;
	font-size: var(--listora-text-size-base);
}

.listora-search__field .listora-search__input:focus {
	box-shadow: none;
	outline: 2px solid var(--listora-input-focus-border);
	outline-offset: -2px;
	border-radius: var(--listora-radius-md);
}

.listora-search__field .listora-search__select {
	border: none;
	background-color: transparent;
	height: 100%;
}

/* Divider between fields */
.listora-search__field + .listora-search__field::before {
	content: '';
	position: absolute;
	inset-inline-start: 0;
	top: 20%;
	height: 60%;
	width: 1px;
	background: var(--listora-border);
}

/* ─── Inline utility buttons (Clear "X" + Near-Me location) ───
 *
 * Specificity boost: `.listora-search .listora-search__clear` lands at
 * 0,2,0 — beats any theme's single-class `.wp-element-button` button rule
 * (0,1,0) and ties / beats `button.wp-element-button` (0,1,1) via the
 * extra class. These are icon-only ghost buttons sitting INSIDE input
 * fields; they must always be transparent + neutral colour, regardless
 * of the active theme.
 *
 * Background-color set explicitly to `transparent` rather than relying
 * on inherit/initial — themes ship `.wp-element-button { background-color }`
 * in their compiled theme.json output and we need to win that cascade.
 * ──────────────────────────────────────────────────────────────────── */
.listora-search .listora-search__clear,
.listora-search .listora-search__near-me {
	all: unset;
	box-sizing: border-box;
	cursor: pointer;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	inset-inline-end: 0.4rem;
	display: flex;
	align-items: center;
	justify-content: center;
	/* Mobile UX audit 2026-05-25: meet the 40px tap-target floor.
	 * Was 1.75rem (28px) which failed at 390px viewports. */
	min-width: var(--listora-tap-target, 40px);
	min-height: var(--listora-tap-target, 40px);
	width: var(--listora-tap-target, 40px);
	height: var(--listora-tap-target, 40px);
	padding: 0;
	background-color: transparent;
	border: 0;
	border-radius: 50%;
	color: var(--listora-fg-faint);
	transition:
		color var(--listora-transition-fast),
		background-color var(--listora-transition-fast),
		transform var(--listora-transition-fast);
}

/* Card 9895489254 — reserve room for the Near Me / Clear button so typed
 * text doesn't slide under the absolutely-positioned button at narrow
 * viewports. The button is 1.75rem wide + 0.4rem right offset; pad by
 * 2.5rem to leave clear breathing room. */
.listora-search__field--location .listora-input,
.listora-search__field--keyword .listora-input {
	padding-inline-end: 2.5rem;
}

.listora-search .listora-search__clear {
	display: none;
}

.listora-search .listora-search__clear:hover,
.listora-search .listora-search__clear:focus-visible {
	color: var(--listora-fg-default);
	background-color: color-mix(in srgb, var(--listora-fg-default) 8%, transparent);
}

.listora-search .listora-search__near-me:hover,
.listora-search .listora-search__near-me:focus-visible {
	color: var(--listora-primary);
	background-color: color-mix(in srgb, var(--listora-primary) 10%, transparent);
}

.listora-search .listora-search__clear:focus-visible,
.listora-search .listora-search__near-me:focus-visible {
	outline: 2px solid var(--listora-primary);
	outline-offset: 2px;
}

.listora-search .listora-search__clear:active,
.listora-search .listora-search__near-me:active {
	transform: translateY(-50%) scale(0.92);
}

.listora-search__field--keyword:has(.listora-search__input:not(:placeholder-shown)) .listora-search__clear {
	display: flex;
}

/* Submit button */
.listora-search__submit {
	flex-shrink: 0;
	border-radius: var(--listora-radius-lg);
	padding-inline: 1.2rem;
}

.listora-search__submit span {
	display: none;
}

@media (min-width: 768px) {
	.listora-search__submit span {
		display: inline;
	}
}

/* ─── Autocomplete Suggestions ─── */

.listora-search__suggestions {
	position: absolute;
	top: calc(100% + 4px);
	inset-inline-start: 0;
	inset-inline-end: 0;
	background: var(--listora-bg-elevated);
	border-radius: var(--listora-radius-lg);
	box-shadow: var(--listora-shadow-xl);
	max-height: 320px;
	overflow-y: auto;
	z-index: 100;
	animation: listora-slideDown 0.15s ease;
}

.listora-search__suggestions[hidden] {
	display: none;
}

.listora-search__suggestion-group {
	padding: var(--listora-space-1) 0;
}

.listora-search__suggestion-group + .listora-search__suggestion-group {
	border-block-start: 1px solid var(--listora-border);
}

.listora-search__suggestion-heading {
	padding: var(--listora-space-1) var(--listora-space-4);
	font-size: var(--listora-text-size-xs);
	font-weight: var(--listora-weight-semibold);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--listora-fg-faint);
}

.listora-search__suggestion-item {
	display: flex;
	align-items: center;
	gap: var(--listora-space-2);
	padding: var(--listora-space-2) var(--listora-space-4);
	font-size: var(--listora-text-size-sm);
	color: var(--listora-fg-default);
	cursor: pointer;
	transition: background var(--listora-transition-fast);
}

.listora-search__suggestion-item:hover,
.listora-search__suggestion-item.is-highlighted {
	background: var(--listora-bg-surface);
}

.listora-search__suggestion-item svg {
	flex-shrink: 0;
	color: var(--listora-fg-faint);
}

.listora-search__suggestion-item mark {
	background: color-mix(in srgb, var(--listora-primary) 20%, transparent);
	color: inherit;
	border-radius: 2px;
}

/* ─── Type Tabs ─── */

.listora-search__type-tabs {
	display: flex;
	gap: 0.35rem;
	margin-block-start: var(--listora-space-2);
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	padding-block-end: 2px;
}

.listora-search__type-tabs::-webkit-scrollbar {
	display: none;
}

/* ─── Type filter pills ───
 *
 * Specificity boost via `.listora-search .listora-search__type-tab`
 * (0,2,0) — wins over single-class theme rules + sits at the same
 * specificity as `button.wp-element-button` (0,1,1) so source order
 * resolves in Listora's favour (plugin CSS loads after theme).
 *
 * Visual contract:
 *   Inactive  →  pill on neutral bg, muted text, no border. Hover lifts
 *                slightly with a soft tint.
 *   Active    →  filled with the type's accent colour (--listora-type-color
 *                bound per-listing-type) or the plugin primary, white text,
 *                subtle shadow for elevation. Reads as a clearly-selected
 *                state without depending on theme.
 *
 * Background-color set explicitly to overwrite any theme.json compiled
 * .wp-element-button { background-color } declaration.
 * ──────────────────────────────────────────────────────────────────── */
.listora-search .listora-search__type-tab {
	all: unset;
	box-sizing: border-box;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	min-height: var(--listora-tap-target, 40px);
	padding: 0.45em 0.95em;
	font-family: inherit;
	font-size: var(--listora-text-size-sm);
	font-weight: var(--listora-weight-medium);
	line-height: 1.2;
	color: var(--listora-fg-muted);
	background-color: var(--listora-bg-elevated);
	border: 1px solid var(--listora-border);
	border-radius: var(--listora-radius-full);
	white-space: nowrap;
	transition:
		background-color var(--listora-transition-fast),
		color var(--listora-transition-fast),
		border-color var(--listora-transition-fast),
		box-shadow var(--listora-transition-fast),
		transform var(--listora-transition-fast);
}

.listora-search .listora-search__type-tab svg,
.listora-search .listora-search__type-tab .dashicons {
	width: 1em;
	height: 1em;
	line-height: 1;
	flex-shrink: 0;
}

.listora-search .listora-search__type-tab:hover {
	color: var(--listora-fg-default);
	border-color: color-mix(in srgb, var(--listora-fg-default) 24%, transparent);
	background-color: var(--listora-bg-elevated);
	box-shadow: var(--listora-shadow-sm);
	transform: translateY(-1px);
}

.listora-search .listora-search__type-tab:focus-visible {
	outline: 2px solid var(--listora-primary);
	outline-offset: 2px;
}

.listora-search .listora-search__type-tab.is-active {
	color: var(--listora-fg-inverse, #ffffff);
	background-color: var(--listora-type-color, var(--listora-primary));
	border-color: var(--listora-type-color, var(--listora-primary));
	box-shadow: var(--listora-shadow-sm);
}

.listora-search .listora-search__type-tab.is-active:hover {
	transform: translateY(-1px);
	box-shadow: var(--listora-shadow-md);
}

/* ─── Actions Row (Filters toggle + Save Search) ─── */

.listora-search__actions-row {
	display: flex;
	align-items: center;
	gap: var(--listora-space-4);
	margin-block-start: var(--listora-space-2);
}

.listora-search__actions-row .listora-search__filters-toggle {
	margin-block-start: 0;
}

/* ─── Save Search Button (Pro) ─── */

.listora-search__save-btn {
	font-size: var(--listora-text-size-sm);
	opacity: 0.7;
	transition: opacity var(--listora-transition-fast);
}

.listora-search__save-btn:hover {
	opacity: 1;
}

/* ─── More Filters ─── */

.listora-search__filters-toggle {
	margin-block-start: var(--listora-space-2);
}

.listora-search__toggle-btn {
	font-size: var(--listora-card-meta-size);
}

.listora-search__filter-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.3em;
	height: 1.3em;
	padding: 0 0.3em;
	font-size: 0.75em;
	font-weight: var(--listora-weight-semibold);
	background: var(--listora-primary);
	color: var(--listora-fg-inverse, var(--listora-bg-elevated));
	border-radius: var(--listora-radius-full);
	margin-inline-start: 0.3em;
	animation: listora-countPop 0.3s ease;
}

/* ─── Filters Panel ─── */

.listora-search__filters-panel {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: var(--listora-space-4);
	padding: var(--listora-space-4);
	margin-block-start: var(--listora-space-2);
	background: var(--listora-bg-elevated);
	border: var(--listora-card-border);
	border-radius: var(--listora-radius-lg);
	animation: listora-fadeInUp 0.25s ease;
}

.listora-search__filter-group {
	display: flex;
	flex-direction: column;
	gap: var(--listora-space-2);
}

.listora-search__filter-label {
	font-size: var(--listora-text-size-xs);
	font-weight: var(--listora-weight-semibold);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--listora-fg-faint);
}

.listora-search__filter-select {
	font-size: var(--listora-card-meta-size);
}

/* Checkboxes */
.listora-search__filter-checkboxes {
	display: flex;
	flex-wrap: wrap;
	gap: var(--listora-space-2);
}

.listora-search__filter-checkbox {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	font-size: var(--listora-card-meta-size);
	color: var(--listora-fg-muted);
	cursor: pointer;
	white-space: nowrap;
}

.listora-search__filter-checkbox input[type="checkbox"] {
	accent-color: var(--listora-primary);
}

/* Toggle */
.listora-search__filter-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	font-size: var(--listora-card-meta-size);
	color: var(--listora-fg-muted);
	cursor: pointer;
}

.listora-search__filter-toggle input[type="checkbox"] {
	accent-color: var(--listora-primary);
}

/* Range inputs */
.listora-search__filter-range {
	display: flex;
	align-items: center;
	gap: var(--listora-space-2);
}

.listora-search__range-input {
	flex: 1;
	min-width: 0;
	font-size: var(--listora-card-meta-size);
}

.listora-search__range-separator {
	color: var(--listora-fg-faint);
	flex-shrink: 0;
}

/* Filter actions */
.listora-search__filter-actions {
	grid-column: 1 / -1;
	display: flex;
	justify-content: flex-end;
}

/* ─── Date Filters ─── */

.listora-search__date-filters {
	display: flex;
	flex-direction: column;
	gap: var(--listora-space-2);
}

.listora-search__date-presets {
	display: flex;
	flex-wrap: wrap;
	gap: var(--listora-space-1);
}

.listora-search__date-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	padding: 0.35em 0.7em;
	font-size: var(--listora-card-meta-size);
	font-weight: var(--listora-weight-medium);
	color: var(--listora-fg-muted);
	background: var(--listora-bg-muted);
	border: 1px solid var(--listora-border);
	border-radius: var(--listora-radius-full);
	cursor: pointer;
	white-space: nowrap;
	transition: background var(--listora-transition-fast), color var(--listora-transition-fast), border-color var(--listora-transition-fast);
}

.listora-search__date-btn:hover {
	background: var(--listora-border);
	color: var(--listora-fg-default);
}

.listora-search__date-btn:focus-visible {
	outline: 2px solid var(--listora-input-focus-border);
	outline-offset: 2px;
}

.listora-search__date-btn.is-active {
	background: var(--listora-primary);
	color: var(--listora-fg-inverse, var(--listora-bg-elevated));
	border-color: var(--listora-primary);
}

.listora-search__date-btn svg {
	flex-shrink: 0;
}

.listora-search__date-range {
	display: flex;
	align-items: center;
	gap: var(--listora-space-2);
}

.listora-search__date-input {
	flex: 1;
	min-width: 0;
	font-size: var(--listora-card-meta-size);
}

@media (max-width: 767px) {
	.listora-search__date-presets {
		gap: 0.35rem;
	}

	.listora-search__date-btn {
		font-size: 0.78rem;
		padding: 0.4em 0.65em;
	}

	.listora-search__date-range {
		flex-direction: column;
		gap: var(--listora-space-1);
	}

	.listora-search__date-range .listora-search__range-separator {
		display: none;
	}

	.listora-search__date-input {
		width: 100%;
	}
}

/* ─── Active Filter Pills ─── */

.listora-search__active-filters {
	display: flex;
	flex-wrap: wrap;
	gap: var(--listora-space-2);
	margin-block-start: var(--listora-space-2);
}

.listora-search__active-filters .listora-filter-pill {
	animation: listora-fadeInScale 0.2s ease;
}

/* ─── Error ─── */

.listora-search__error {
	padding: var(--listora-space-2) var(--listora-space-4);
	margin-block-start: var(--listora-space-2);
	background: color-mix(in srgb, var(--listora-danger) 8%, transparent);
	color: var(--listora-danger);
	border-radius: var(--listora-radius-md);
	font-size: var(--listora-card-meta-size);
}

/* ─── Hidden State ─── */

.is-hidden {
	display: none !important;
}

/* ─── Loading Bar ─── */

.listora-search__loading-bar {
	position: relative;
	width: 100%;
	height: 3px;
	background: var(--listora-border);
	border-radius: var(--listora-radius-full);
	overflow: hidden;
}

.listora-search__loading-bar[hidden] {
	display: none;
}

.listora-search__loading-bar-inner {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	width: 40%;
	height: 100%;
	background: var(--listora-primary);
	border-radius: var(--listora-radius-full);
	animation: listora-loadingSlide 1.2s ease-in-out infinite;
}

@keyframes listora-loadingSlide {
	0% { inset-inline-start: -40%; }
	100% { inset-inline-start: 100%; }
}

/* ─── Loading State ─── */

.listora-search.is-loading .listora-search__submit {
	opacity: 0.7;
	pointer-events: none;
}

/* ─── Responsive ─── */

@media (max-width: 767px) {
	.listora-search__bar {
		flex-direction: column;
		gap: 0;
		border-radius: var(--listora-radius-lg);
	}

	.listora-search__field + .listora-search__field::before {
		display: none;
	}

	.listora-search__field {
		border-block-end: 1px solid var(--listora-border);
	}

	.listora-search__field:last-of-type {
		border-block-end: none;
	}

	.listora-search__field .listora-search__input,
	.listora-search__field .listora-search__select {
		padding-block: 0.75rem;
	}

	.listora-search__submit {
		margin-block-start: var(--listora-space-2);
		border-radius: var(--listora-radius-md);
		justify-content: center;
		min-height: 2.75rem;
		padding-block: 0.75rem;
	}

	.listora-search__submit span {
		display: inline;
	}

	.listora-search__filters-panel {
		grid-template-columns: minmax(0, 1fr);
	}

	.listora-search__type-tabs {
		gap: 0.3rem;
	}

	.listora-search__type-tab {
		font-size: 0.78rem;
		padding: 0.3em 0.65em;
	}

	.listora-search__actions-row {
		flex-wrap: wrap;
	}
}

/* ─── Stacked Layout Variant ─── */

.listora-search--stacked .listora-search__bar {
	flex-direction: column;
	gap: 0;
}

.listora-search--stacked .listora-search__field + .listora-search__field::before {
	display: none;
}

.listora-search--stacked .listora-search__field {
	border-block-end: 1px solid var(--listora-border);
}

.listora-search--stacked .listora-search__field:last-of-type {
	border-block-end: none;
}