.capm-ads-top-bar {
	display: flex;
	justify-content: flex-end;
	margin-bottom: 1.5rem;
}

.capm-place-ad-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: #f79220;
	color: #fff !important;
	font-size: 15px;
	font-weight: 700;
	text-decoration: none !important;
	padding: 0.75rem 1.5rem;
	border-radius: 8px;
	white-space: nowrap;
	transition: background-color 0.2s ease;
}

.capm-place-ad-btn:hover {
	background-color: #de8112;
	color: #fff !important;
}

.capm-ads-container {
	display: flex;
	gap: 2rem;
}

.capm-ads-filters {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	flex: 0 0 auto;
	min-width: 220px;
}

.capm-ads-filters input,
.capm-ads-filters select {
	padding: 0.75rem 1rem;
	font-size: 16px;
	border: 1px solid #ccc;
	border-radius: 8px;
	background-color: #f4f8fc;
	width: 100%;
	box-sizing: border-box;
}

.capm-ads-filters .capm-search-btn,
.capm-ads-filters #capm-search-btn {
	background-color: #004c3f;
	color: #fff;
	padding: 0.75rem;
	border: none;
	border-radius: 8px;
	cursor: pointer;
	font-size: 16px;
	width: 100%;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.capm-ads-filters .capm-search-btn .dashicons,
.capm-ads-filters #capm-search-btn .dashicons {
	font-size: 18px;
	width: 18px;
	height: 18px;
}

.capm-ads-filters .capm-reset-btn,
.capm-ads-filters #capm-reset-btn {
	background-color: #ff4d4f !important;
	color: #fff;
	padding: 0.75rem;
	border: none;
	border-radius: 8px;
	cursor: pointer;
	font-size: 14px;
	width: 100%;
	box-sizing: border-box;
}

.capm-sort-wrap {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 1rem;
}

.capm-sort-wrap select {
	padding: 0.5rem;
	border-radius: 6px;
	width: 100%;
	box-sizing: border-box;
}

.capm-ads-list {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	align-items: stretch;
	flex: 1 1 auto;
	min-width: 0;
}

/*
 * Ad card footer alignment fix — card width/columns are left untouched
 * (do not set flex-basis/max-width here, that stretches the thumbnail).
 *
 * The card is a flex column with the footer pinned to the bottom via
 * margin-top: auto — the image/title are flex-shrink: 0 (fixed size) and
 * the excerpt is the only piece allowed to grow, so footer_box always sits
 * on the same baseline across a row no matter how much excerpt text there
 * is, or how tall the tallest card in that row ends up being.
 */
.capm-ads-container .capm-ads-list .capm-ad-item {
	display: flex !important;
	flex-direction: column !important;
}

.capm-ads-container .capm-ads-list .capm-ad-item > img {
	flex: 0 0 auto !important;
}

.capm-ads-container .capm-ads-list .capm-ad-item > h3 {
	margin: 16px 16px 6px !important;
	flex: 0 0 auto !important;
}

/* Reset the footer's own nested <h3> (state name) — must NOT inherit the
   title's margin above, or footer_box shifts whenever content height changes. */
.capm-ads-container .capm-ads-list .capm-ad-item .footer_box h3 {
	margin: 0 !important;
	padding: 0 !important;
	flex: 0 1 auto !important;
}

.capm-ads-container .capm-ads-list .capm-ad-item .capm-excerpt {
	padding: 0 16px 16px !important;
	flex: 1 1 auto !important;
}

.capm-ads-container .capm-ads-list .capm-ad-item .footer_box {
	padding: 12px 16px !important;
	margin-top: auto !important;
	flex: 0 0 auto !important;
	width: 100% !important;
	box-sizing: border-box !important;
}

@media only screen and (max-width: 900px) {
	.capm-sort-wrap {
		gap: 0;
	}

	.capm-ads-container {
		flex-direction: column;
	}

	.capm-ads-filters {
		margin: 0 auto;
		width: 100%;
	}

	.capm-ads-top-bar {
		justify-content: center;
	}

	.capm-place-ad-btn {
		width: 100%;
		text-align: center;
	}
}