/**
 * Trusted Resources Frontend block — filter bar (scoped to .tr-frontend-root only)
 */

.tr-frontend-root .tr-frontend-filters-bar {
	background: var(--color-primary);
	padding: 20px 0;
	max-width: var(--container-xl);
	margin-left: auto;
	margin-right: auto;
	margin-top: 50px;
	position: relative;
}

/* Apply button: full width on mobile, white to match the inputs in the dark bar.
   Fixed height so it matches the input/dropdown height (it has no vertical padding). */
.tr-frontend-root .tr-fe-apply {
	width: 100%;
	height: 54px;
}

/* Blue keyboard focus ring, matching the inputs/dropdowns. */
.tr-frontend-root .tr-fe-apply:focus-visible {
	outline: none;
	box-shadow: 0 0 0 2px #3B82F6, 0 0 0 4px rgba(59, 130, 246, 0.25);
}

/* Desktop: keep the Apply button on the same row as the filters, matching input height. */
@media (min-width: 768px) {
	.tr-frontend-root .tr-frontend-filters-bar {
		display: flex;
		flex-direction: row;
		align-items: flex-end;
		gap: 1rem;
	}
	.tr-frontend-root .tr-frontend-filters-bar > .grid {
		flex: 1 1 auto;
		min-width: 0;
	}
	.tr-frontend-root .tr-fe-apply {
		width: auto;
		height: 54px;
		flex: 0 0 auto;
	}
}

.tr-frontend-root .tr-fe-search-input {
	box-sizing: border-box;
	width: 100%;
	height: 54px;
	border-radius: 19.5px;
	padding-left: 40px;
	padding-right: 20px;
	font-size: 16px;
	color: #fff;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.3);
}

.tr-frontend-root .tr-fe-search-input::placeholder {
	color: rgba(255, 255, 255, 0.65);
}

.tr-frontend-root .tr-fe-search-input:focus {
	outline: none;
	border-color: rgba(255, 255, 255, 0.85);
	box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25);
}

.tr-frontend-root .tr-fe-search-icon {
	color: #fff;
}

.tr-frontend-root .cff-dropdown-label {
	background: var(--color-primary);
	color: rgba(255, 255, 255, 0.9);
}

.tr-frontend-root .cff-dropdown-label.floating-label-active {
	color: rgba(255, 255, 255, 0.9);
}

.tr-frontend-root .cff-custom-dropdown-wrapper .cff-dropdown-button {
	color: #fff;
	background: transparent;
	border-color: rgba(255, 255, 255, 0.3);
}

.tr-frontend-root .cff-custom-dropdown-wrapper .cff-dropdown-button:hover {
	border-color: rgba(255, 255, 255, 0.75);
}

.tr-frontend-root .cff-custom-dropdown-wrapper .cff-dropdown-button:focus,
.tr-frontend-root .cff-custom-dropdown-wrapper .cff-dropdown-button[aria-expanded="true"] {
	outline: none;
	border-color: rgba(255, 255, 255, 0.85);
	box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25);
}

.tr-frontend-root .cff-dropdown-arrow svg path {
	fill: #fff;
}

@media (max-width: 768px) {
	.tr-frontend-root .tr-fe-search-input {
		height: 48px;
		font-size: 14px;
	}
}