/* =========================================================
   Jobs: filter shell and layout
   ========================================================= */

/* =========================================================
   Jobs: filters and search controls
   ========================================================= */

/* =========================================================
   Jobs filter layout
   ========================================================= */

form.job_filters {
	max-width: var(--tr-max-content);
	margin: 0 auto 2rem;
	padding: 2rem !important;
	background: linear-gradient(180deg, #FFFFFF 0%, #F8FCFC 100%) !important;
	border: 1px solid var(--tr-border-soft) !important;
	border-radius: 16px !important;
	box-shadow: var(--tr-shadow-lg) !important;
	box-sizing: border-box !important;
}

form.job_filters .search_jobs {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	grid-template-areas:
		"keywords location"
		"category remote"
		"submit submit"
		"summary summary"
		"sort sort"
		"delivery delivery"
		"requirements requirements"
		"roletypes roletypes";
	gap: 1rem 1.25rem !important;
	align-items: start !important;
}

form.job_filters .tr-job-search__intro {
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(260px, 0.9fr);
	gap: 1rem;
	margin: 0 0 0.45rem;
}

form.job_filters .tr-job-search__headline {
	padding: clamp(1rem, 2vw, 1.35rem) !important;
	border: 1px solid rgba(0, 109, 119, 0.12);
	border-radius: 14px;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(247, 252, 253, 0.9) 100%);
	box-shadow: 0 8px 18px rgba(12, 31, 45, 0.06);
}

form.job_filters .tr-job-search__eyebrow {
	margin: 0 0 0.4rem;
	font-size: 0.74rem;
	font-weight: 800;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--tr-primary);
}

form.job_filters .tr-job-search__title {
	margin: 0;
	font-size: clamp(1.8rem, 3vw, 2.55rem);
	letter-spacing: -0.02em;
	line-height: 1.08;
}

form.job_filters .tr-job-search__copy {
	margin: 0.55rem 0 0;
	max-width: 60ch;
	font-size: 1rem;
	line-height: var(--tr-leading);
	color: var(--tr-muted);
}

form.job_filters .tr-job-search__status {
	display: grid;
	gap: 0.65rem;
	padding: clamp(0.9rem, 1.6vw, 1.15rem);
	border: 1px solid rgba(0, 109, 119, 0.16);
	border-radius: 14px;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(241, 249, 251, 0.94) 100%);
	box-shadow: 0 10px 20px rgba(12, 31, 45, 0.07);
}

form.job_filters .tr-job-search__status-label {
	margin: 0;
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--tr-primary);
}

form.job_filters .tr-job-search__status-text {
	margin: 0;
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.25;
	color: var(--tr-text);
}

form.job_filters .tr-job-search__status-metrics {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.6rem;
}

form.job_filters .tr-job-search__status-metric {
	display: grid;
	gap: 0.2rem;
	padding: 0.55rem 0.65rem;
	border: 1px solid rgba(0, 109, 119, 0.14);
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.86);
}

form.job_filters .tr-job-search__status-metric-label {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--tr-muted);
}

form.job_filters .tr-job-search__status-metric-value {
	font-size: 1.35rem;
	font-weight: 800;
	line-height: 1.1;
	color: var(--tr-text);
}

form.job_filters .tr-job-search__status-note {
	margin: 0;
	font-size: 0.86rem;
	line-height: 1.45;
	color: var(--tr-muted);
}
/* Compatibility fallback for WPJM-generated filter wrappers. */
form.job_filters .search_jobs div.search_keywords,
form.job_filters .search_jobs div.search_location,
form.job_filters .search_jobs div.search_categories,
form.job_filters .search_jobs div.search_remote_position,
form.job_filters .search_jobs div.search_submit,
form.job_filters .search_jobs div.tr-search-summary,
form.job_filters .search_jobs div.tr-price-sort-box,
form.job_filters .search_jobs div.search_delivery_format,
form.job_filters .search_jobs div.search_requirements,
form.job_filters .search_jobs div.tr-job-search__role-types {
	float: none !important;
	width: 100% !important;
	max-width: none !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	box-sizing: border-box !important;
	align-self: start !important;
	justify-self: stretch !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}

form.job_filters .search_jobs > div[style*="clear"] {
	display: none !important;
}

form.job_filters .search_keywords {
	grid-area: keywords;
}

form.job_filters .search_location {
	grid-area: location;
}

form.job_filters .search_categories {
	grid-area: category;
}

form.job_filters .search_remote_position {
	grid-area: remote;
	display: flex !important;
	align-items: center !important;
	gap: 0.75rem !important;
	min-height: 56px !important;
	padding-top: 1.9rem !important;
}

form.job_filters .search_submit {
	grid-area: submit;
}

form.job_filters .tr-search-summary {
	grid-area: summary;
}

form.job_filters .tr-price-sort-box {
	grid-area: sort;
}

form.job_filters .search_delivery_format {
	grid-area: delivery;
}

form.job_filters .search_requirements {
	grid-area: requirements;
}

form.job_filters .tr-job-search__role-types {
	grid-area: roletypes;
}

form.job_filters .search_jobs div.tr-search-summary,
form.job_filters .search_jobs div.tr-price-sort-box,
form.job_filters .search_jobs div.search_delivery_format,
form.job_filters .search_jobs div.search_requirements,
form.job_filters .search_jobs div.tr-job-search__role-types {
	grid-column: 1 / -1 !important;
	width: 100% !important;
	max-width: none !important;
	margin-left: 0 !important;
	padding-left: 0 !important;
}

/* Search panel polish */
form.job_filters {
	position: relative;
	border-radius: 24px !important;
	padding: clamp(1.25rem, 2.3vw, 2.1rem) !important;
	background:
		radial-gradient(circle at top right, rgba(167, 215, 206, 0.2), transparent 35%),
		linear-gradient(180deg, rgba(255, 255, 255, 0.99) 0%, rgba(246, 252, 253, 0.98) 100%) !important;
	border: 1px solid rgba(12, 122, 128, 0.16) !important;
	box-shadow: 0 18px 34px rgba(12, 31, 45, 0.12) !important;
}

form.job_filters::before {
	content: "";
	position: absolute;
	inset: 0 auto auto 0;
	width: 100%;
	height: 4px;
	border-radius: 24px 24px 0 0;
	background: linear-gradient(90deg, #0C7A80 0%, #4E99B3 50%, #A7D7CE 100%);
}

form.job_filters .search_jobs {
	gap: clamp(0.9rem, 1.6vw, 1.4rem);
}

form.job_filters .search_submit input[type="submit"],
form.job_filters .search_submit button {
	background: linear-gradient(120deg, #0C7A80 0%, #0E6679 45%, #245E9A 100%);
	border: 1px solid rgba(12, 122, 128, 0.32);
}

form.job_filters .search_submit input[type="submit"]:hover,
form.job_filters .search_submit input[type="submit"]:focus,
form.job_filters .search_submit button:hover,
form.job_filters .search_submit button:focus {
	transform: translateY(-2px);
	box-shadow: 0 14px 26px rgba(12, 31, 45, 0.22);
}

form.job_filters .showing_jobs {
	margin-top: 1.25rem;
	padding-top: 1.25rem;
}


@media (max-width: 960px) {
    form.job_filters {
        border-radius: 18px;
    }
}

@media (max-width: 640px) {
    form.job_filters::before {
        height: 3px;
    }
}

form.job_filters .search_jobs {
	grid-template-areas:
		"keywords location"
		"category remote"
		"submit submit"
		"summary summary"
		"active active"
		"sort sort"
		"delivery delivery"
		"requirements requirements"
		"roletypes roletypes" !important;
}

@media (max-width: 899px) {
	form.job_filters .search_jobs {
		grid-template-areas:
			"keywords"
			"location"
			"category"
			"remote"
			"submit"
			"summary"
			"active"
			"sort"
			"delivery"
			"requirements"
			"roletypes" !important;
		grid-template-columns: minmax(0, 1fr) !important;
	}

	form.job_filters .tr-job-search__intro {
		grid-template-columns: minmax(0, 1fr);
	}
}
