/*
 * Design System - AELITA
 * components/catalog-meta.css - compact results + sort row shared by every
 * "КУПИТИ" catalog (cars, moto, quadro, generator, jetski).
 *
 * Replaces the former full-width .a-catalog-toolbar sort row: the result count
 * and a lightweight sort control now sit between the filter panel and the card
 * grid. The sort keeps the existing <select name="sort-price"> (and therefore
 * the existing submit / URL logic); only its skin changes. The jQuery
 * custom-select plugin turns the native select into the dropdown.
 *
 * Class-scoped (.a-catalog-meta / .a-catalog-sort), so it has no effect on any
 * page that does not render the row. Tokens only.
 *
 * Loaded on every catalog archive (see inc/enqueue.php).
 */

/* -------------------------------------------------------------------- */
/* Row                                                                  */
/* -------------------------------------------------------------------- */
.a-catalog-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2) var(--space-4);
	/* Undo the Bootstrap .row negative margins when used inside a row. */
	margin: var(--space-4) 0 var(--space-5);
	min-height: 40px;
}

/* -------------------------------------------------------------------- */
/* Results count                                                        */
/* -------------------------------------------------------------------- */
.a-catalog-meta__count {
	margin: 0;
	min-width: 0;
	color: var(--text-secondary);
	font-family: var(--font-body);
	font-size: var(--fs-small);
	font-weight: var(--fw-regular);
	line-height: var(--lh-body);
}

.a-catalog-meta__count-num {
	color: var(--text-primary);
}

/* -------------------------------------------------------------------- */
/* Sort: lightweight trigger + dropdown                                 */
/* -------------------------------------------------------------------- */
.a-catalog-sort {
	position: relative;
	margin-left: auto;
	min-width: 0;
}

.a-catalog-sort .custom-select {
	position: relative;
	width: auto;
	z-index: 1;
}

.a-catalog-sort .custom-select--active {
	z-index: var(--z-sticky);
}

/* Trigger. */
.a-catalog-sort .custom-select__option--value {
	display: inline-block;
	box-sizing: border-box;
	min-height: 40px;
	height: auto;
	margin: 0;
	/* Symmetric padding: left room for the sort icon, right for the caret. */
	padding: 0 calc(var(--space-4) + var(--space-2));
	border: 0;
	border-radius: var(--radius);
	background-color: transparent;
	color: var(--text-primary);
	font-family: var(--font-body);
	font-size: var(--fs-small);
	font-weight: var(--fw-regular);
	line-height: 40px;
	text-align: left;
	white-space: nowrap;
	cursor: pointer;
	transition: color var(--dur-press) var(--ease-out);
}

/* Sort icon (left). Font Awesome ships with the theme. */
.a-catalog-sort .custom-select__option--value::before {
	position: absolute;
	top: 50%;
	left: var(--space-2);
	transform: translateY(-50%);
	font-family: 'FontAwesome';
	font-size: var(--fs-small);
	line-height: 1;
	color: currentColor;
	content: "\f0dc";
	pointer-events: none;
}

/* Disclosure caret (right): shared plugin caret, made smaller. */
.a-catalog-sort .custom-select__option--value::after {
	right: var(--space-3);
	border-width: 0.24rem;
	border-bottom-width: 0;
	color: currentColor;
}

@media (hover: hover) and (pointer: fine) {
	.a-catalog-sort .custom-select:not(.custom-select--active) .custom-select__option--value:hover {
		color: var(--link-hover);
	}
}

.a-catalog-sort .custom-select--active .custom-select__option--value {
	color: var(--link-hover);
}

.a-catalog-sort .custom-select__option--value:focus-visible {
	outline: 2px solid var(--focus-ring) !important;
	outline-offset: 2px;
}

/* Dropdown: right-aligned so it never overflows the viewport. */
.a-catalog-sort .custom-select__dropdown {
	right: 0;
	left: auto;
	width: max-content;
	min-width: 100%;
	max-width: min(90vw, 320px);
	border: var(--border-w) solid var(--border);
	border-radius: var(--radius);
	background-color: var(--bg);
	box-shadow: var(--shadow-overlay);
}

.a-catalog-sort .custom-select__dropdown .custom-select__option {
	margin: 0;
	padding: var(--space-2) var(--space-4);
	color: var(--text-primary);
	font-family: var(--font-body);
	font-size: var(--fs-small);
	line-height: var(--lh-heading);
	white-space: nowrap;
}

.a-catalog-sort .custom-select__dropdown .custom-select__option:hover,
.a-catalog-sort .custom-select__dropdown .custom-select__option:focus {
	background-color: var(--bg-muted);
}

.a-catalog-sort .custom-select__dropdown .custom-select__option--selected {
	background-color: var(--bg-muted);
	font-weight: var(--fw-semibold);
}

/* -------------------------------------------------------------------- */
/* Mobile: keep a single compact row and a 44px tap target              */
/* -------------------------------------------------------------------- */
@media (max-width: 767px) {
	.a-catalog-meta {
		flex-wrap: nowrap;
		gap: var(--space-2);
	}

	.a-catalog-sort .custom-select__option--value {
		min-height: 44px;
		line-height: 44px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.a-catalog-sort .custom-select__option--value {
		transition-duration: 0.01ms;
	}
}