/*
 * Enqueue this after wp-job-manager's own stylesheet so it can override it.
 * e.g. in functions.php:
 * wp_enqueue_style( 'wpjm-custom', get_stylesheet_directory_uri() . '/job-listing-style.css', array( 'wp-job-manager-frontend' ), '1.0' );
 */

/* --- Filter bar --- */
.job_filters{
	background: transparent !important;
	font-family: "Bai Jamjuree", Sans-serif;
}
.job_filters .search_jobs_dropdowns .search_jobs_dropdowns-wrapper {
	display: flex;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
	background: transparent !important;
}
@media(max-width: 767px){
    .job_filters .search_jobs_dropdowns-wrapper > div{
        flex: 1 0 100%;
    }
    ul.job_listings li.job_listing_row {
        display: flex;
        flex-direction: column;
        align-items: start !important;
    }
}

.search_jobs_dropdowns label {
	display: none; /* mockup shows placeholder text only, no visible label */
}

.search_jobs_dropdowns select,
.job_filters .select2-container--default .select2-selection--single{
	min-width: 220px;
	padding: 10px 15px !important;
	border-radius: 10px  !important;
    background: #F0F0F0 !important;
	font-size: 16px;
	border: none !important;
	margin-bottom: 0 !important;
	line-height: 1em;
    -webkit-appearance: none !important;
    appearance: none;
    background-image: url('data:image/svg+xml; utf8, %3Csvg xmlns="http://www.w3.org/2000/svg" width="512" height="512" x="0" y="0" viewBox="0 0 451.847 451.847" preserveAspectRatio="none" fill="000" style="opacity: 1;"%3E%3Cg%3E%3Cpath d="M225.923,354.706c-8.098,0-16.195-3.092-22.369-9.263L9.27,151.157c-12.359-12.359-12.359-32.397,0-44.751   c12.354-12.354,32.388-12.354,44.748,0l171.905,171.915l171.906-171.909c12.359-12.354,32.391-12.354,44.744,0   c12.365,12.354,12.365,32.392,0,44.751L248.292,345.449C242.115,351.621,234.018,354.706,225.923,354.706z"%3E%3C/path%3E%3C/g%3E%3C/svg%3E') !important;
    background-size: 8px !important;
    background-repeat: no-repeat !important;
    background-position: 90% center !important;
}
.job_filters .select2-container--default .select2-selection--single .select2-selection__arrow{
    display: none;
}
.job_filters .select2-container{
    margin-bottom: 0 !important;
}
.job_filters .select2-container--default .select2-selection--single .select2-selection__rendered{
    line-height: 1.4em !important;
    color: #000 !important;
}
.job_filters .search_jobs div.search_categories{
    width: auto !important;
    padding-top: 0 !important;
}
.search_jobs_dropdows .search_location{
    float: unset;
    padding-left:  unset;
}

.job_filters .search_jobs_dropdowns{
	padding: 0 !important;
	margin-bottom: 30px;
}
.search_jobs_dropdowns .search_location,
.search_jobs_dropdowns .search_keywords{
	float: unset !important;
	padding-left: unset !important;
	width: auto !important;
}
.search_jobs_dropdowns .search_keywords {
	margin-left: auto;
	position: relative;
	min-width: 30%;
	padding-right: unset !important;
}

.search_jobs_dropdowns .search_keywords input {
	width: 100%;
	padding: 10px 40px 10px 15px !important;
	border: none !important;
	border-radius: 10px !important;
	background-color: #F0F0F0 !important;
	font-size: 16px;
	margin-bottom: 0;
}
.job_filters .search_jobs_dropdowns-wrapper select:focus,
.job_filters .search_jobs_dropdowns-wrapper select:active,
.job_filters .search_jobs_dropdowns-wrapper input:focus{
	background-color: #F0F0F0 !important;
	border-radius: 10px;
}
.search_jobs_dropdowns .search_submit_icon {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: none;
	cursor: pointer;
    padding: 10px;
}

.job_filters .showing_jobs {
	background: transparent;
	display: none;
	font-size: .83em;
	padding: .5em 1em;
}
/* --- Listing rows --- */
ul.job_listings {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 0;
}

ul.job_listings li.job_listing_row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 30px;
	background: #F6F6F6;
    gap: 20px;
}

ul.job_listings li.job_listing_row:nth-child(odd) {
	background: #E6E6E6;
}
ul.job_listings li.job_listing_row:first-child {
	border-radius: 10px 10px 0 0;
}

ul.job_listings li.job_listing_row:last-child {
	border-radius: 0 0 10px 10px;
}

ul.job_listings li.job_listing_row:only-child {
	border-radius: 10px;
}
.job_listing_details .position h3 {
	margin: 0 0 10px;
	font-size: 28px;
	font-weight: 600;
}

.job_pills {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.pill {
	display: inline-block;
	padding: 6px 14px;
	border-radius: 20px;
	font-size: 13px;
	border: 1px solid #363636;
	color: #000;
}

/* --- CTA button --- */
.job_listing_action {
	flex-shrink: 0;
}

.job_more_info_btn {
	display: inline-block;
	padding: 12px 24px !important;
	border-radius: 24px;
	background: #23D29A;
	color: #000 !important;
	font-weight: 600;
	font-size: 15px;
	text-decoration: none !important;
	text-transform: uppercase;
}

.job_more_info_btn:hover {
	background: #26b389;
}