/* =========================================== */
/* Mobile Styling */
/* =========================================== */
@media only screen and (max-width: 768px) {
	.t2m_content {
		display: block !important;
		gap: unset !important;
	}

	.t2m_filter {
		width: 100% !important;
	}

	#t2m-job {
		width: 100% !important;
	}
}

/* =========================================== */
/* General Styling */
/* =========================================== */
.t2m_filter {
	width: 25%;
	margin: 0;
	background-color: unset;
	border-width: unset;
	border-style: unset;
	border-color: unset;
	border-radius: unset;
	box-shadow: unset;
	padding: unset;
}

.t2m_filter:hover,
.t2m_filter:focus {
	background-color: unset;
}

#vacancy_search_form {
	background-color: var(--t2m-filter-bg-color, rgba(232, 246, 244, 1.0));
	border-width: var(--t2m-filter-border-width, 0);
	border-style: var(--t2m-filter-border-style, solid);
	border-color: var(--t2m-filter-border-color, #000);
	border-radius: var(--t2m-filter-border-radius, 0);
	box-shadow: var(--t2m-filter-box-shadow, unset);
	padding: var(--t2m-filter-padding, 20px);
}

#vacancy_search_form:hover,
#vacancy_search_form:focus {
	background-color: var(--t2m-filter-bg-color-hover, rgba(232, 246, 244, 1.0));
}

.t2m_content {
	display: flex;
	gap: 20px;
}

.t2m_filter h2 {
	color: var(--t2m-filter-title-text-color, #000);
	font-family: var(--t2m-filter-title-font, 'Roboto'), sans-serif;
	font-size: var(--t2m-filter-title-font-size, 17px) !important;
}

.t2m_select_field {
	margin: 0;
}

/* =========================================== */
/* Filter CSS */
/* =========================================== */
/* General Styles for Filter Categories */
.filter_toggle {
	padding: 5px 0 7px 0;
	display: block;
	width: 100%;
	position: relative; /* Important for chevron positioning */
	/*font-weight: bold;*/
	cursor: pointer;
}
.filter_toggle,
.filter_toggle:focus,
.t2m_filter_subtitle {
	color: var(--t2m-filter-subtitle-color, #000) !important;
	font-family: var(--t2m-filter-subtitle-font, 'Roboto'), sans-serif !important;
	font-size: var(--t2m-filter-subtitle-font-size, 16px) !important;
}

/* Container for filter groups */
.filter_group {
	margin-bottom: 10px;
	border-width: 0 0 var(--t2m-filter-options-border-width, 1px) 0;
	border-style: var(--t2m-filter-options-border-style, solid);
	border-color: var(--t2m-filter-options-border-color, #000);
}

/* Chevron Arrow Styles */
.filter_toggle .chevron-arrow {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%) rotate(-315deg); /* Starts with up chevron */
	display: inline-block;
	width: var(--t2m-filter-icon-size, 10px);
	height: var(--t2m-filter-icon-size, 10px);
	border-right: var(--t2m-filter-icon-thickness, 2px) solid var(--t2m-filter-icon-color, #000);
	border-bottom: var(--t2m-filter-icon-thickness, 2px) solid var(--t2m-filter-icon-color, #000);
	transition: transform 0.3s ease;
}

/* Rotate chevron when open */
.filter_toggle[data-toggle-state="open"] .chevron-arrow {
	transform: translateY(-50%) rotate(-135deg); /* Rotates to down chevron */
}

/* Filter Options Styles */
.filter_options {
	display: block;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease; /* Smooth transition */
	padding: 0; /* Reset padding for hidden state */
	margin-top: 5px;
}

/* Label styles inside filter options */
.filter_options label {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 4px;
	cursor: pointer;
	padding: var(--t2m-filter-text-padding, 0 0 5px 0);
	color: var(--t2m-filter-text-color, #000);
	font-family: var(--t2m-filter-text-font, 'Roboto'), sans-serif;
	font-size: var(--t2m-filter-text-font-size, 13px);
}
.filter_options label:hover {
	color: var(--t2m-filter-text-color-hover, #000);
}

.filter_options label > input {
	width: 20px;
	height: 20px;
	margin: 2px 2px 2px 0;
}

.filter_options_shortcode {
	display: block;
	overflow: hidden;
	padding: 0;
	margin-top: 5px;
	/*border-width: var(--t2m-filter-options-border-width, 0);*/
	/*border-style: var(--t2m-filter-options-border-style, solid);*/
	/*border-color: var(--t2m-filter-options-border-color, #000);*/
}

/* Label styles inside filter options */
.filter_options_shortcode label {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 4px;
	cursor: pointer;
	padding: var(--t2m-filter-text-padding, 0 0 5px 0);
	color: var(--t2m-filter-text-color, #000);
	font-family: var(--t2m-filter-text-font, 'Roboto'), sans-serif;
	font-size: var(--t2m-filter-text-font-size, 13px);
}
.filter_options_shortcode label:hover {
	color: var(--t2m-filter-text-color-hover, #000);
}

.filter_options_shortcode label > input {
	width: 20px;
	height: 20px;
	margin: 2px 2px 2px 0;
}