/*
Theme Name: JJJOBS Astra Child
Theme URI: https://yamy.net.et/
Description: JJJOBS Astra Child Theme — Listings Page UI
Author: JJJOBS
Template: astra
Version: 1.0.0
Text Domain: jjjobs-child
*/

/* ============================================================
   JJJOBS — LISTINGS PAGE
   Page: /dm-listing/
   
   IMPORTANT:
   - Does NOT recreate the vacancy-detail system.
   - Does NOT recreate Saved Jobs.
   - Does NOT replace WP Job Manager AJAX.
   - Does NOT touch Forminator/application/package logic.
   ============================================================ */


/* ============================================================
   1. LISTINGS PAGE BASE
   ============================================================ */

body.page-id-695 {
	background: #ffffff;
}

body.page-id-695 .site-content {
	background: #ffffff;
}

body.page-id-695 .ast-container {
	width: 100%;
	max-width: 1400px;
}

body.page-id-695 .entry-content {
	width: 100%;
}


/* ============================================================
   2. WP JOB MANAGER FILTER AREA
   ============================================================ */

body.page-id-695 form.job_filters {
	width: 100%;
	box-sizing: border-box;

	background: #ffffff !important;
	border: 1px solid #e6eeeb !important;
	border-radius: 14px !important;

	padding: 18px !important;
	margin: 0 0 24px !important;

	box-shadow:
		0 3px 14px rgba(31, 71, 60, 0.045) !important;

	position: relative;
	overflow: visible !important;
}


/* Search fields */

body.page-id-695 form.job_filters
.search_jobs input[type="text"],

body.page-id-695 form.job_filters
.search_jobs input[type="search"],

body.page-id-695 form.job_filters
.search_categories select,

body.page-id-695 form.job_filters
.search_categories .select2-container {

	box-sizing: border-box;

	background: #fbfdfc !important;

	border: 1px solid #dfeae6 !important;
	border-radius: 9px !important;

	color: #31443f !important;

	min-height: 42px;

	box-shadow: none !important;
}


/* Placeholder */

body.page-id-695 form.job_filters
input::placeholder {
	color: #9aa9a5 !important;
	opacity: 1;
}


/* Focus */

body.page-id-695 form.job_filters
input[type="text"]:focus,

body.page-id-695 form.job_filters
input[type="search"]:focus,

body.page-id-695 form.job_filters
select:focus {

	border-color: #8fc8b2 !important;

	box-shadow:
		0 0 0 3px rgba(27, 145, 86, 0.08) !important;

	outline: none !important;
}


/* Search button if native button exists */

body.page-id-695 form.job_filters
.search_submit button,

body.page-id-695 form.job_filters
input[type="submit"] {

	background: #1b9156 !important;
	color: #ffffff !important;

	border: 0 !important;
	border-radius: 8px !important;

	min-height: 42px;

	font-weight: 600 !important;

	box-shadow: none !important;
}

body.page-id-695 form.job_filters
.search_submit button:hover,

body.page-id-695 form.job_filters
input[type="submit"]:hover {

	background: #167646 !important;
}


/* ============================================================
   3. JOB TYPE FILTERS
   ============================================================ */

body.page-id-695 form.job_filters ul.job_types {

	display: flex !important;
	flex-wrap: wrap !important;

	align-items: center;

	gap: 8px 16px;

	margin: 12px 0 0 !important;
	padding: 0 !important;

	background: transparent !important;

	border: 0 !important;
}


body.page-id-695 form.job_filters
ul.job_types li {

	margin: 0 !important;
	padding: 0 !important;

	background: transparent !important;
	border: 0 !important;
}


/* Label */

body.page-id-695 form.job_filters
ul.job_types li label {

	display: inline-flex !important;

	align-items: center;
	gap: 6px;

	margin: 0 !important;

	color: #647570 !important;

	font-size: 12px !important;
	line-height: 1.4 !important;

	cursor: pointer;
}


/* Checkbox */

body.page-id-695 form.job_filters
ul.job_types li input[type="checkbox"] {

	width: 14px !important;
	height: 14px !important;

	margin: 0 !important;

	accent-color: #1b9156 !important;
}


/* ============================================================
   4. LISTING RESULTS CONTAINER
   ============================================================ */

body.page-id-695
.job_listings {

	width: 100%;

	margin: 0 !important;
	padding: 0 !important;

	background: transparent !important;
}


/*
 * WP Job Manager normally outputs:
 *
 * ul.job_listings
 *     li.job_listing
 *
 * We intentionally style the existing markup instead of
 * replacing the listing engine.
 */

body.page-id-695
ul.job_listings {

	display: grid !important;

	grid-template-columns:
		repeat(4, minmax(0, 1fr));

	gap: 18px !important;

	width: 100%;

	margin: 0 !important;
	padding: 0 !important;

	list-style: none !important;

	background: transparent !important;
}


/* ============================================================
   5. INDIVIDUAL JOB CARD
   ============================================================ */

body.page-id-695
ul.job_listings li.job_listing {

	position: relative;

	display: flex !important;
	flex-direction: column !important;

	min-width: 0;

	min-height: 238px;

	margin: 0 !important;
	padding: 15px !important;

	box-sizing: border-box;

	background: #ffffff !important;

	border: 1px solid #e5eeeb !important;

	border-radius: 13px !important;

	box-shadow:
		0 3px 13px rgba(34, 67, 57, 0.055) !important;

	transition:
		transform 0.16s ease,
		box-shadow 0.16s ease,
		border-color 0.16s ease;

	overflow: hidden;
}


body.page-id-695
ul.job_listings li.job_listing:hover {

	transform: translateY(-2px);

	border-color: #d4e7df !important;

	box-shadow:
		0 7px 20px rgba(34, 67, 57, 0.09) !important;
}


/* Remove WPJM default clearfix behavior */

body.page-id-695
ul.job_listings li.job_listing::before,

body.page-id-695
ul.job_listings li.job_listing::after {

	display: none !important;
}


/* ============================================================
   6. CARD COMPANY / LOGO AREA
   ============================================================ */

body.page-id-695
ul.job_listings li.job_listing .company {

	display: block !important;

	margin: 3px 0 8px !important;
	padding: 0 !important;

	min-height: 18px;

	color: #78908a !important;

	font-size: 10.5px !important;
	line-height: 1.35 !important;

	background: transparent !important;
}


/*
 * WPJM may put company logo inside .company.
 * Keep it small and circular.
 */

body.page-id-695
ul.job_listings li.job_listing .company img {

	width: 30px !important;
	height: 30px !important;

	object-fit: contain;

	border-radius: 50% !important;

	border: 1px solid #dbe9e4 !important;

	background: #ffffff !important;

	padding: 4px !important;

	float: left;

	margin: 0 8px 4px 0 !important;
}


/* ============================================================
   7. JOB TITLE
   ============================================================ */

body.page-id-695
ul.job_listings li.job_listing h3,

body.page-id-695
ul.job_listings li.job_listing .position h3 {

	margin: 0 !important;

	padding: 0 !important;

	color: #314640 !important;

	font-size: 13px !important;

	font-weight: 700 !important;

	line-height: 1.25 !important;

	letter-spacing: -0.1px;

	white-space: normal;

	overflow: hidden;

	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}


/* Title link */

body.page-id-695
ul.job_listings li.job_listing h3 a,

body.page-id-695
ul.job_listings li.job_listing .position h3 a {

	color: #314640 !important;

	text-decoration: none !important;
}


/* ============================================================
   8. JOB LOCATION
   ============================================================ */

body.page-id-695
ul.job_listings li.job_listing .location {

	margin: 4px 0 7px !important;
	padding: 0 !important;

	color: #71837f !important;

	font-size: 10px !important;
	line-height: 1.35 !important;

	background: transparent !important;

	display: block !important;
}


/* ============================================================
   9. JOB TYPE
   ============================================================ */

body.page-id-695
ul.job_listings li.job_listing .meta {

	display: flex !important;

	align-items: center;
	flex-wrap: wrap;

	gap: 5px;

	margin: 0 0 8px !important;
	padding: 0 !important;

	list-style: none !important;
}


body.page-id-695
ul.job_listings li.job_listing .meta li {

	display: inline-flex !important;
	align-items: center;

	margin: 0 !important;
	padding: 4px 8px !important;

	border-radius: 20px !important;

	background: #edf8f3 !important;

	color: #21845b !important;

	font-size: 8.5px !important;
	font-weight: 600 !important;

	line-height: 1 !important;

	border: 0 !important;
}


/* ============================================================
   10. CARD DESCRIPTION
   ============================================================ */

/*
 * WPJM's .description is the primary card excerpt.
 */

body.page-id-695
ul.job_listings li.job_listing .description {

	display: block !important;

	margin: 0 0 auto !important;
	padding: 0 !important;

	color: #7b8b87 !important;

	font-size: 9.5px !important;

	line-height: 1.48 !important;

	background: transparent !important;

	overflow: hidden !important;

	display: -webkit-box !important;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}


/* ============================================================
   11. DEADLINE / STATUS
   ============================================================ */

/*
 * Keep existing deadline and closing markup.
 * This CSS only gives it the screenshot appearance.
 */

body.page-id-695
ul.job_listings li.job_listing .deadline,

body.page-id-695
ul.job_listings li.job_listing .job-deadline {

	margin-top: 12px;

	padding-top: 8px;

	border-top: 1px solid #eef3f1;

	color: #526760 !important;

	font-size: 9px !important;

	line-height: 1.35;
}


/* Open */

body.page-id-695
ul.job_listings li.job_listing
.open,

body.page-id-695
ul.job_listings li.job_listing
.job-status.open {

	color: #29986a !important;

	font-size: 9px !important;
	font-weight: 600 !important;
}


/* Closed */

body.page-id-695
ul.job_listings li.job_listing
.closed,

body.page-id-695
ul.job_listings li.job_listing
.job-status.closed {

	color: #b56a6a !important;

	font-size: 9px !important;
	font-weight: 600 !important;
}


/* ============================================================
   12. CARD FOOTER
   ============================================================ */

body.page-id-695
ul.job_listings li.job_listing .footer,

body.page-id-695
ul.job_listings li.job_listing .posted-date {

	margin-top: 7px !important;
	padding-top: 7px !important;

	border-top: 1px solid #f0f4f2 !important;

	color: #9aa9a5 !important;

	font-size: 8.5px !important;
	line-height: 1.25 !important;
}


/* ============================================================
   13. EXISTING SAVED-JOBS HEART
   ============================================================ */

/*
 * IMPORTANT:
 *
 * We do NOT recreate the Saved Jobs functionality.
 * We only keep its existing control visually inside the card.
 */

body.page-id-695
ul.job_listings li.job_listing
.cjj-saved-job-heart {

	position: absolute !important;

	right: 10px !important;
	bottom: 9px !important;

	z-index: 5 !important;

	width: 29px !important;
	height: 29px !important;

	min-width: 29px !important;
	min-height: 29px !important;

	margin: 0 !important;
	padding: 0 !important;

	display: flex !important;

	align-items: center !important;
	justify-content: center !important;

	border-radius: 50% !important;

	background: #ffffff !important;

	border: 1px solid #e3ebe8 !important;

	box-shadow: 0 2px 6px rgba(0,0,0,.05) !important;

	color: #8b9a96 !important;
}


body.page-id-695
ul.job_listings li.job_listing
.cjj-saved-job-heart:hover {

	transform: scale(1.05) !important;
}


/* ============================================================
   14. PAGINATION
   ============================================================ */

body.page-id-695
.job-manager-pagination,

body.page-id-695
.pagination {

	display: flex !important;

	align-items: center;
	justify-content: center;

	gap: 5px;

	width: 100%;

	margin: 25px 0 34px !important;
	padding: 0 !important;

	background: transparent !important;

	border: 0 !important;
}


body.page-id-695
.job-manager-pagination a,

body.page-id-695
.job-manager-pagination span,

body.page-id-695
.pagination a,

body.page-id-695
.pagination span {

	display: inline-flex !important;

	align-items: center;
	justify-content: center;

	min-width: 30px;
	height: 30px;

	padding: 0 8px;

	border: 1px solid transparent;

	border-radius: 6px;

	background: transparent;

	color: #72827d !important;

	font-size: 10px !important;

	text-decoration: none !important;
}


body.page-id-695
.job-manager-pagination .current,

body.page-id-695
.pagination .current {

	background: #f1f5f3 !important;

	color: #5d7069 !important;

	border-color: #e7eeeb !important;
}


/* ============================================================
   15. INLINE DETAIL POSITION
   ============================================================ */

/*
 * The inline vacancy-detail snippet already exists.
 *
 * This ensures the detail block remains in normal listing
 * content flow rather than being pulled into the footer.
 */

body.page-id-695
#cjjobs-final-detail-root {

	clear: both !important;

	width: 100% !important;

	margin-top: 18px !important;
	margin-bottom: 20px !important;

	position: relative !important;
}


/* ============================================================
   16. REMOVE UNWANTED WPJM LIST WRAPPER VISUALS
   ============================================================ */

body.page-id-695
.job_listings_loader {

	margin: 15px auto !important;
}


body.page-id-695
.job_listings + .load_more_jobs {

	margin-top: 20px !important;
}


/* ============================================================
   17. DESKTOP
   ============================================================ */

@media (min-width: 1100px) {

	body.page-id-695
	ul.job_listings {

		grid-template-columns:
			repeat(4, minmax(0, 1fr));

		gap: 18px !important;
	}

	body.page-id-695
	ul.job_listings li.job_listing {

		min-height: 238px;
	}
}


/* ============================================================
   18. TABLET
   Screenshot-style 3 columns
   ============================================================ */

@media (min-width: 651px) and (max-width: 1099px) {

	body.page-id-695
	ul.job_listings {

		grid-template-columns:
			repeat(3, minmax(0, 1fr));

		gap: 14px !important;
	}

	body.page-id-695
	ul.job_listings li.job_listing {

		min-height: 225px;

		padding: 13px !important;
	}

	body.page-id-695
	ul.job_listings li.job_listing h3 {

		font-size: 12px !important;
	}

	body.page-id-695
	ul.job_listings li.job_listing .description {

		font-size: 9px !important;
	}
}


/* ============================================================
   19. MOBILE
   ============================================================ */

@media (max-width: 650px) {

	body.page-id-695
	ul.job_listings {

		grid-template-columns:
			repeat(2, minmax(0, 1fr));

		gap: 10px !important;
	}

	body.page-id-695
	ul.job_listings li.job_listing {

		min-height: 225px;

		padding: 12px !important;

		border-radius: 11px !important;
	}

	body.page-id-695
	ul.job_listings li.job_listing h3 {

		font-size: 11.5px !important;
	}

	body.page-id-695
	ul.job_listings li.job_listing .company {

		font-size: 9px !important;
	}

	body.page-id-695
	ul.job_listings li.job_listing .location {

		font-size: 8.5px !important;
	}

	body.page-id-695
	ul.job_listings li.job_listing .description {

		font-size: 8.5px !important;
	}

	body.page-id-695
	ul.job_listings li.job_listing .meta li {

		font-size: 8px !important;
		padding: 4px 7px !important;
	}

	body.page-id-695
	form.job_filters {

		padding: 12px !important;
		border-radius: 11px !important;
	}

	body.page-id-695
	form.job_filters ul.job_types {

		gap: 7px 11px !important;
	}

	body.page-id-695
	.job-manager-pagination,

	body.page-id-695
	.pagination {

		margin-top: 20px !important;
		margin-bottom: 25px !important;
	}
}


/* ============================================================
   20. VERY SMALL PHONES
   ============================================================ */

@media (max-width: 390px) {

	body.page-id-695
	ul.job_listings {

		gap: 8px !important;
	}

	body.page-id-695
	ul.job_listings li.job_listing {

		padding: 10px !important;
		min-height: 215px;
	}

	body.page-id-695
	ul.job_listings li.job_listing h3 {

		font-size: 10.5px !important;
	}

	body.page-id-695
	ul.job_listings li.job_listing .description {

		font-size: 8px !important;
	}
}


/* ============================================================
   END — JJJOBS LISTINGS PAGE
   ============================================================ */


/* ============================================================
   JJJOBS — FIX VACANCY CARD GRID
   IMPORTANT:
   The WP Job Manager results element itself is ul.job_listings.
   ============================================================ */

/* MAIN LIST */
body.cjj-dm-listing-page ul.job_listings,
body.cjj-dm-listing-page .job_listings ul.job_listings {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    list-style: none !important;
    box-sizing: border-box !important;
}

/* EACH CARD */
body.cjj-dm-listing-page ul.job_listings > li.cjj-job-card,
body.cjj-dm-listing-page .job_listings ul.job_listings > li.cjj-job-card {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;

    border: 1px solid #e1ebe8 !important;
    border-radius: 16px !important;
    background: #ffffff !important;

    box-shadow: 0 5px 22px rgba(24, 69, 60, 0.055) !important;

    overflow: hidden !important;
    box-sizing: border-box !important;

    list-style: none !important;
}

/* CARD LINK */
body.cjj-dm-listing-page .cjj-job-card-link {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 285px !important;

    padding: 17px !important;

    color: inherit !important;
    text-decoration: none !important;

    box-sizing: border-box !important;
}

/* REMOVE WPJM DEFAULT LIST ROW STYLING */
body.cjj-dm-listing-page ul.job_listings > li.cjj-job-card::before,
body.cjj-dm-listing-page ul.job_listings > li.cjj-job-card::after {
    display: none !important;
    content: none !important;
}

/* ============================================================
   TABLET / SMALL SCREEN
   ============================================================ */

@media (max-width: 900px) {

    body.cjj-dm-listing-page ul.job_listings,
    body.cjj-dm-listing-page .job_listings ul.job_listings {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }

    body.cjj-dm-listing-page .cjj-job-card-link {
        min-height: 265px !important;
        padding: 14px !important;
    }
}

/* ============================================================
   VERY SMALL PHONES
   ============================================================ */

@media (max-width: 520px) {

    body.cjj-dm-listing-page ul.job_listings,
    body.cjj-dm-listing-page .job_listings ul.job_listings {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    body.cjj-dm-listing-page .cjj-job-card-link {
        min-height: 250px !important;
    }
}




























/* ============================================================
   JJJOBS — INLINE VACANCY DETAILS
   ============================================================ */

.cjj-inline-job-details{
	display:none;
	width:100%;
	margin:34px 0 0;
	padding:0 0 36px;
	scroll-margin-top:90px;
	box-sizing:border-box;
}

.cjj-inline-job-details.is-open{
	display:block;
}

.cjj-inline-job-inner{
	width:100%;
	max-width:1180px;
	margin:0 auto;
	padding:0 18px;
	box-sizing:border-box;
}

.cjj-inline-job-heading{
	display:flex;
	align-items:flex-start;
	justify-content:space-between;
	gap:20px;
	padding:22px 24px;
	margin-bottom:16px;
	background:#fff;
	border:1px solid #e8eeeb;
	border-radius:14px;
	box-shadow:0 5px 20px rgba(18,65,48,.05);
}

.cjj-inline-kicker{
	display:block;
	margin-bottom:5px;
	font-size:10px;
	line-height:1.2;
	font-weight:700;
	letter-spacing:.12em;
	color:#159667;
	text-transform:uppercase;
}

.cjj-inline-job-title{
	margin:0;
	color:#173b2f;
	font-size:25px;
	line-height:1.25;
	font-weight:700;
}

.cjj-inline-job-company{
	margin-top:6px;
	color:#66736d;
	font-size:13px;
}

.cjj-inline-job-close{
	width:34px;
	height:34px;
	flex:0 0 34px;
	border:1px solid #dfe8e3;
	border-radius:50%;
	background:#fff;
	color:#64716c;
	font-size:21px;
	line-height:30px;
	cursor:pointer;
}

.cjj-inline-job-close:hover{
	background:#f3faf6;
	color:#159667;
}


/* ============================================================
   MAIN + SIDEBAR
   ============================================================ */

.cjj-inline-job-grid{
	display:grid;
	grid-template-columns:minmax(0,1fr) 290px;
	gap:18px;
	align-items:start;
}

.cjj-inline-job-main{
	min-width:0;
	background:#fff;
	border:1px solid #e8eeeb;
	border-radius:14px;
	box-shadow:0 5px 20px rgba(18,65,48,.05);
	overflow:hidden;
}

.cjj-inline-job-track{
	display:flex;
	width:100%;
	transform:translateX(0);
	transition:transform .35s ease;
	will-change:transform;
}

.cjj-inline-detail-panel{
	flex:0 0 100%;
	width:100%;
	box-sizing:border-box;
	padding:25px 26px 28px;
	min-width:0;
}

.cjj-inline-detail-panel-head{
	padding-bottom:14px;
	margin-bottom:18px;
	border-bottom:1px solid #edf1ef;
}

.cjj-inline-detail-panel-head span{
	display:block;
	margin-bottom:4px;
	font-size:10px;
	font-weight:700;
	letter-spacing:.1em;
	color:#159667;
	text-transform:uppercase;
}

.cjj-inline-detail-panel-head h3{
	margin:0;
	color:#193d31;
	font-size:19px;
	line-height:1.3;
}

.cjj-inline-detail-content{
	color:#53615b;
	font-size:14px;
	line-height:1.7;
	max-height:390px;
	overflow-y:auto;
	padding-right:8px;
}

.cjj-inline-detail-content p{
	margin:0 0 14px;
}

.cjj-inline-detail-content ul,
.cjj-inline-detail-content ol{
	margin:0 0 16px;
	padding-left:21px;
}

.cjj-inline-detail-content li{
	margin-bottom:6px;
}

.cjj-inline-detail-content h2,
.cjj-inline-detail-content h3,
.cjj-inline-detail-content h4{
	margin:0 0 10px;
	color:#193d31;
}


/* ============================================================
   PREVIOUS / NEXT
   ============================================================ */

.cjj-inline-job-controls{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:12px;
	padding:13px 17px;
	border-top:1px solid #edf1ef;
	background:#fbfdfc;
}

.cjj-inline-nav{
	display:inline-flex;
	align-items:center;
	gap:7px;
	padding:8px 12px;
	border:1px solid #dce8e2;
	border-radius:8px;
	background:#fff;
	color:#23624d;
	font-size:12px;
	font-weight:600;
	cursor:pointer;
}

.cjj-inline-nav:hover:not(:disabled){
	border-color:#159667;
	color:#159667;
}

.cjj-inline-nav:disabled{
	opacity:.4;
	cursor:not-allowed;
}

.cjj-inline-counter{
	color:#7b8781;
	font-size:12px;
	font-weight:600;
}


/* ============================================================
   SIDEBAR
   ============================================================ */

.cjj-inline-job-sidebar{
	display:flex;
	flex-direction:column;
	gap:14px;
}

.cjj-inline-apply{
	width:100%;
	min-height:43px;
	border:0;
	border-radius:8px;
	background:#159667;
	color:#fff;
	font-size:13px;
	font-weight:700;
	cursor:pointer;
	box-shadow:none;
}

.cjj-inline-apply:hover:not(:disabled){
	background:#107e56;
}

.cjj-inline-apply.is-disabled,
.cjj-inline-apply:disabled{
	background:#d9dfdc;
	color:#66706b;
	cursor:not-allowed;
}

.cjj-inline-sidebar-card{
	padding:20px;
	background:#fff;
	border:1px solid #e8eeeb;
	border-radius:14px;
	box-shadow:0 5px 20px rgba(18,65,48,.05);
}

.cjj-inline-sidebar-card h3{
	margin:0 0 15px;
	color:#193d31;
	font-size:15px;
	line-height:1.3;
}

.cjj-inline-meta{
	display:flex;
	flex-direction:column;
}

.cjj-inline-meta-row{
	display:flex;
	align-items:flex-start;
	justify-content:space-between;
	gap:15px;
	padding:10px 0;
	border-bottom:1px solid #edf1ef;
	font-size:12px;
}

.cjj-inline-meta-row:last-child{
	border-bottom:0;
}

.cjj-inline-meta-row span{
	color:#718078;
}

.cjj-inline-meta-row strong{
	color:#168e61;
	text-align:right;
	font-weight:600;
}


/* ============================================================
   SHARE
   ============================================================ */

.cjj-inline-share{
	display:flex;
	gap:8px;
	flex-wrap:wrap;
}

.cjj-inline-share button{
	width:31px;
	height:31px;
	padding:0;
	border:0;
	border-radius:50%;
	background:#eef5f1;
	color:#176b4d;
	font-size:11px;
	font-weight:700;
	cursor:pointer;
}

.cjj-inline-share button:hover{
	background:#159667;
	color:#fff;
}


/* ============================================================
   RELATED JOBS
   ============================================================ */

.cjj-inline-related .job_listings{
	margin:0;
}

.cjj-inline-related .job_listing{
	margin:0 0 8px;
	padding:10px 0;
	border-bottom:1px solid #edf1ef;
}

.cjj-inline-related .job_listing:last-child{
	margin-bottom:0;
	border-bottom:0;
}


/* ============================================================
   LOADING
   ============================================================ */

.cjj-inline-job-details.is-loading{
	opacity:.72;
}

.cjj-inline-job-details.is-loading .cjj-inline-job-main{
	pointer-events:none;
}

.cjj-inline-error{
	text-align:center;
	padding-top:45px;
	padding-bottom:45px;
}

.cjj-inline-error h3{
	margin:0 0 8px;
	color:#193d31;
}

.cjj-inline-error p{
	margin:0;
	color:#737d78;
}


/* ============================================================
   APPLICATION POPUP
   ============================================================ */

.cjj-inline-application-popup{
	display:none;
	position:fixed;
	inset:0;
	z-index:999999;
	align-items:center;
	justify-content:center;
	padding:20px;
	box-sizing:border-box;
}

.cjj-inline-application-popup.is-visible{
	display:flex;
}

.cjj-inline-application-backdrop{
	position:absolute;
	inset:0;
	background:rgba(16,35,28,.58);
	backdrop-filter:blur(2px);
}

.cjj-inline-application-box{
	position:relative;
	z-index:2;
	width:min(720px,100%);
	max-height:90vh;
	overflow-y:auto;
	padding:27px;
	box-sizing:border-box;
	background:#fff;
	border:1px solid #e5ebe8;
	border-radius:16px;
	box-shadow:0 25px 70px rgba(0,0,0,.24);
}

.cjj-inline-application-close{
	position:absolute;
	top:12px;
	right:13px;
	width:34px;
	height:34px;
	border:0;
	border-radius:50%;
	background:#f4f7f5;
	color:#68736e;
	font-size:23px;
	line-height:30px;
	cursor:pointer;
}

.cjj-inline-application-close:hover{
	background:#e9f5ef;
	color:#159667;
}

.cjj-inline-application-header{
	padding-right:40px;
	margin-bottom:20px;
}

.cjj-inline-application-header > span{
	display:block;
	margin-bottom:5px;
	font-size:10px;
	font-weight:700;
	letter-spacing:.12em;
	color:#159667;
	text-transform:uppercase;
}

.cjj-inline-application-header h2{
	margin:0;
	color:#193d31;
	font-size:22px;
	line-height:1.3;
}

.cjj-inline-application-header p{
	margin:5px 0 0;
	color:#6e7974;
	font-size:13px;
}

.cjj-inline-application-form{
	padding-top:3px;
}

body.cjj-inline-modal-open{
	overflow:hidden;
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width:900px){

	.cjj-inline-job-grid{
		grid-template-columns:1fr;
	}

	.cjj-inline-job-sidebar{
		display:grid;
		grid-template-columns:1fr 1fr;
	}

	.cjj-inline-apply{
		grid-column:1 / -1;
	}

}

@media (max-width:640px){

	.cjj-inline-job-inner{
		padding:0 12px;
	}

	.cjj-inline-job-heading{
		padding:18px;
	}

	.cjj-inline-job-title{
		font-size:21px;
	}

	.cjj-inline-detail-panel{
		padding:21px 18px 23px;
	}

	.cjj-inline-detail-content{
		max-height:360px;
		font-size:13px;
	}

	.cjj-inline-job-sidebar{
		display:flex;
	}

	.cjj-inline-sidebar-card{
		padding:17px;
	}

	.cjj-inline-application-box{
		padding:23px 17px;
		max-height:94vh;
		border-radius:13px;
	}

	.cjj-inline-job-controls{
		padding:11px;
	}

	.cjj-inline-nav{
		padding:8px 9px;
	}

}