/*
 * Design System - AELITA
 * components/moto-filter.css - moto catalog filter shell (/moto).
 *
 * The filter shell itself (.bg-grey, .carlist-filter, #hidden_filter_body,
 * .hidden_filter_title, .filter, the custom-select plugin) is shared with the
 * car catalog and is NOT redefined here. This file only adds the moto-only
 * bits: the full-width flex field row, the Reset action, the mobile
 * single-column collapse and the #moto-load-more button (catalog-pagination.css
 * owns #cars-load-more).
 *
 * Everything is scoped under .a-moto-filter so cars are never affected.
 * Consumes tokens.css only.
 *
 * Loaded on is_post_type_archive( 'motopost' ) only (see inc/enqueue.php).
 */

/* -------------------------------------------------------------------- */
/* Fields: equal-width flex row filling the whole parent width          */
/* -------------------------------------------------------------------- */
.a-moto-filter .a-moto-filter__body {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	/* Bootstrap .row + .carlist-filter use negative -15px margins, which made
	   the grey filter band wider than the content column. Pull it back to the
	   content width and let flex distribute the fields. */
	margin-left: 0;
	margin-right: 0;
	/* Inner gutter so the selects don't stick to the band edges. */
	padding-left: var(--space-4);
	padding-right: var(--space-4);
	gap: var(--space-3);
}

/* Bootstrap .row clearfix pseudo-elements would become flex items. */
.a-moto-filter .a-moto-filter__body::before,
.a-moto-filter .a-moto-filter__body::after {
	display: none;
	content: none;
}

/* Mobile/tablet filter toggle: keep its grey band within the content width. */
.a-moto-filter .a-catalog-filter__toggle {
	margin-left: 0;
	margin-right: 0;
}

.a-moto-filter .a-moto-filter__field {
	flex: 1 1 0;
	float: none;
	width: auto;
	min-width: 0;
	/* Drop the Bootstrap column gutters so the selects fill the band evenly;
	   spacing comes from the flex gap. */
	padding-left: 0;
	padding-right: 0;
}

.a-moto-filter .a-moto-filter__field select {
	display: block;
	width: 100%;
}

/* -------------------------------------------------------------------- */
/* Reset: rendered inside the filter block, as the last flex cell.      */
/* -------------------------------------------------------------------- */
.a-moto-filter .a-moto-filter__actions {
	display: flex;
	align-items: flex-end;
	justify-content: center;
}

.a-moto-filter .a-moto-filter__reset {
	display: inline-block;
	color: var(--link);
	text-decoration: underline;
	white-space: nowrap;
	cursor: pointer;
}

.a-moto-filter .a-moto-filter__reset:hover,
.a-moto-filter .a-moto-filter__reset:focus {
	color: var(--link-hover);
}

/* -------------------------------------------------------------------- */
/* Load more                                                            */
/* -------------------------------------------------------------------- */
.a-catalog-load-more #moto-load-more {
	display: inline-block;
	width: auto;
	min-width: 0;
	margin: 0 auto;
	padding: 10px 30px;
	font-size: var(--fs-body); /* 16px */
}

/* -------------------------------------------------------------------- */
/* Tablet / mobile (<= 991px): collapsed single-column filter           */
/* -------------------------------------------------------------------- */
@media (max-width: 991px) {
	/* The whole grey toggle row is clickable, not just the label. */
	.a-moto-filter .a-catalog-filter__toggle {
		cursor: pointer;
	}

	.a-moto-filter .hidden_filter_title {
		text-align: center;
		/* Taller tap target for the whole toggle row. */
		padding-top: var(--space-3);
		padding-bottom: var(--space-3);
	}

	.a-moto-filter .hidden_filter_title img {
		display: inline-block;
	}

	.a-moto-filter .hidden_filter_title__link {
		display: inline-block;
		font-weight: var(--fw-bold);
		font-size: 20px;
		line-height: 30px;
		cursor: pointer;
	}

	/* Keep the collapsed body hidden for the whole 769-991 band too. */
	.a-moto-filter #hidden_filter_body {
		display: none;
	}

	.a-moto-filter .a-moto-filter__field {
		flex: 1 1 100%;
	}

	.a-moto-filter .a-moto-filter__actions {
		justify-content: center;
		padding-block-end: var(--space-2);
	}

	/* Small gap between the filter and the cards (works both collapsed and
	   expanded, since it lives on the always-present catalog row). */
	.a-moto-filter .a-catalog-filter__body {
		margin-bottom: 0;
	}

	.a-moto-filter #moto-catalog {
		margin-top: var(--space-4);
	}
}