/* ========================================
   JOB DESCRIPTION PAGE - CLEAN LAYOUT
   Based on Figma Design: node 10907-33538
   ======================================== */

/* DESIGN TOKENS */
:root {
	/* Primary Colors */
	--color-primary: #61e437;
	--color-primary-medium: #3EB318;
	--color-primary-dark: #26700D;
	/* Secondary Colors */
	--color-dark-bg: #1F242E;
	--color-dark-text: #1F242E;
	--color-medium-text: #495368;
	--color-light-text: #5F6B85;
	--color-body-text: #343B4B;
	--color-light-bg: #EEF1FA;
	/* Tertiary Colors */
	--color-info-bg: #C1DBFC;
	--color-info-accent: #3E81E8;
	--color-white: #ffffff;
	/* Typography */
	--font-family: 'Poppins', sans-serif;
	--font-size-title: 38px;
	--font-size-body: 16px;
	--font-size-small: 14px;
	--font-size-label: 18px;
	--line-height-title: 40px;
	--line-height-body: 24px;
	--line-height-small: 16px;
	/* Spacing */
	--spacing-xs: 8px;
	--spacing-sm: 12px;
	--spacing-md: 16px;
	--spacing-lg: 24px;
	--spacing-xl: 80px;
	/* Border Radius */
	--radius-button: 12px;
	--radius-card: 10px;
	--radius-small: 8px;
	/* Shadows */
	--shadow-card: 0px 0px 4px 0px rgba(68, 21, 64, 0.04), 0px 0px 8px 0px rgba(68, 21, 64, 0.06), 0px 0px 20px 0px rgba(68, 21, 64, 0.08), 0px 0px 68px 0px rgba(68, 21, 64, 0.12);
}

/* ========================================
   GENERAL STYLES
   ======================================== */

.map-point,
.clock,
.salary-icon,
.document-icon {
	width: 24px !important;
	height: 24px !important;
	aspect-ratio: 1/1;
}

/* ========================================
   PAGE LAYOUT
   ======================================== */

body {
	font-family: var(--font-family);
	color: var(--color-body-text);
	background-color: #ffffff;
}

.job-description-page {
	max-width: 1280px;
	margin: 0 auto;
	padding: var(--spacing-xl) var(--spacing-lg);
	display: grid;
	grid-template-columns: 356px 1fr;
	gap: var(--spacing-lg);
}


.container.home-content-container {
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
	padding: 0;
	box-sizing: border-box;
}

/* ========================================
   MAIN LAYOUT WRAPPER (2-Column)
   ======================================== */

.job-description-wrapper {
	display: contents;
}

/* ========================================
   LEFT SIDEBAR (356px fixed)
   ======================================== */

.job-sidebar {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-lg);
	position: sticky;
	top: var(--spacing-lg);
	grid-column: 1;
	height: fit-content;
	align-self: start;
}

/* Return to Search Link */
.sidebar-item.return-link {
	display: block !important;
}

.return-to-job-search {
	display: flex !important;
	align-items: center;
	gap: 14px;
	color: #495368;
	text-decoration: none;
	font-size: 16px;
	font-weight: 600;
	transition: all 0.3s ease;
	cursor: pointer;
}

	.return-to-job-search:hover {
		color: var(--color-primary-medium);
	}

	.return-to-job-search i {
		font-size: 16px;
	}

	/* Hide return to search when not coming from search */
	.return-to-job-search.hidden {
		display: none !important;
	}

/* ========================================
   COMPANY CARD
   ======================================== */

.company-card {
	background: white;
	border: 1px solid rgba(29, 29, 29, 0.15);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-card);
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 14px;
}

/* Company Card Header */
.company-card__header {
	display: flex;
	flex-direction: column;
	gap: 16px;
	align-items: center;
	padding-bottom: 16px;
	border-bottom: 1px solid #d1d6e0;
}

.company-logo {
	flex-shrink: 0;
	width: 80px;
	height: 80px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-primary);
	border-radius: 50%;
	overflow: hidden;
}

.company-logo__img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 4px;
}

.company-header-info {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-items: center;
	text-align: center;
}

.company-name {
	font-size: 18px;
	font-weight: 600;
	line-height: 24px;
	color: #1f242e;
	margin: 0;
}

.company-website {
	font-size: 14px;
	color: var(--Primary-550, #3EB318);
	margin: 0;
	font-weight: 600;
}

/* Company Description */
.company-description {
	border-bottom: 1px solid #d1d6e0;
	padding-bottom: 16px;
}

	.company-description p {
		font-size: 14px;
		line-height: 16px;
		color: var(--color-body-text);
		margin: 0;
		font-weight: 400;
	}

/* Company Links */
.company-links {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-md);
}

.company-link {
	font-size: 14px;
	color: var(--Primary-550, #3EB318);
	text-decoration: underline;
	transition: color 0.3s ease;
	display: block;
	word-break: break-word;
	font-weight: 600;
}

	.company-link:hover {
		color: var(--Primary-700, #2a8410);
	}

.view-more-jobs {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 4px 10px;
	background: #c8f7b9;
	border-radius: 8px;
	color: #26700d;
	text-decoration: none;
	font-size: 14px;
	font-weight: 600;
	transition: background 0.3s ease;
}

	.view-more-jobs:hover {
		background: #b8f0a5;
	}

	.view-more-jobs i {
		font-size: 16px;
		margin-left: 8px;
	}

/* ========================================
   SIDEBAR ACTION BUTTONS
   ======================================== */

.sidebar-actions {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-md);
}

.btn {
	padding: 12px 16px;
	border: none;
	border-radius: var(--radius-button);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.3s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--spacing-sm);
	text-decoration: none;
	font-family: var(--font-family);
}

.btn-primary-dark {
	background: var(--color-dark-bg);
	color: var(--color-primary);
	border: 2px solid var(--color-dark-bg);
}


.btn-primary-dark {
	background: #1f242e;
	color: #61e437;
	border: none;
	padding: 14px 16px;
	border-radius: 12px;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.3s ease;
	font-family: var(--font-family);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
}

	.btn-primary-dark i {
		font-size: 24px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

.save-job {
	width: 100%;
}

.share-job-btn {
	border-radius: var(--Scale-300, 12px);
	border: 2px solid var(--Secondary-800, #1F242E);
	background: white;
	color: var(--Secondary-800, #1F242E);
	display: flex;
	width: var(--Scale-1550, 356px);
	padding: var(--Scale-225, 10px) var(--Scale-500, 20px) var(--Scale-225, 10px) var(--Scale-300, 12px);
	justify-content: center;
	align-items: center;
	gap: var(--Scale-300, 12px);
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	font-family: var(--font-family);
	transition: none;
}

	.share-job-btn .share {
		display: flex;
		align-items: center;
		justify-content: center;
	}

/* Share Button Container */
.share-job-container {
	position: relative;
	display: inline-block;
	width: 100%;
	margin-block: 5px;
}

/* Share Dropdown */
.share-dropdown {
	position: absolute;
	top: 100%;
	left: 0;
	margin-top: 8px;
	z-index: 1000;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	border-radius: 16px;
	width: 100%;
}

/* ========================================
   RIGHT CONTENT AREA
   ======================================== */

.job-content {
	display: flex;
	flex-direction: column;
	gap: 10px;
	background: var(--color-light-bg);
	border: 1px solid rgba(29, 29, 29, 0.15);
	border-radius: 12px;
	padding: 12px 14px 12px 24px;
	box-shadow: none;
	grid-column: 2;
}

/* ========================================
   JOB HEADER SECTION
   ======================================== */

.job-header {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding-bottom: 16px;
	border-bottom: 1px solid #5f6b85;
}

.job-header__top {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-md);
}

.job-header__title-wrapper {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.job-title {
	font-size: 38px;
	font-weight: 600;
	line-height: 40px;
	color: #1f242e;
	margin: 0;
	flex: 1;
}

.job-favorite-btn {
	background: none;
	border: none;
	font-size: 24px;
	color: #1f242e;
	cursor: pointer;
	padding: 8px;
	margin: -8px 0 0 -8px;
	transition: color 0.3s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
}

	.job-favorite-btn:hover {
		color: #1f242e;
		opacity: 0.7;
	}

	.job-favorite-btn.active,
	.job-favorite-btn.active:hover {
		color: #1f242e;
	}

/* HEADER FAVORITE STYLES */
.header-favorite {
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 8px;
}

.mark-job-favorite {
	font-size: 40px;
	color: #1f242e;
	cursor: pointer;
	transition: opacity 0.3s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px !important;
	height: 34px !important;
	line-height: 1;
	border: none;
	background: none;
	padding: 0;
	margin: 0;
	flex-shrink: 0;
}

	.mark-job-favorite:hover {
		opacity: 0.7;
	}

.job-company {
	font-size: 16px;
	color: #1f242e;
	margin: 0;
	font-weight: 400;
	line-height: 24px;
	margin-top: 8px;
}

/* ========================================
   JOB INFO GRID (2 columns x 3 rows)
   ======================================== */

.job-info-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	padding: 0;
	background: transparent;
	border-radius: 0;
}

.job-info-item {
	display: flex;
	gap: 12px;
	align-items: center;
	background: #c1dbfc;
	padding: 8px 14px;
	border-radius: 8px;
}

	.job-info-item i {
		font-size: 24px;
		color: #495368;
		margin-top: 0;
		flex-shrink: 0;
	}

.job-info-content {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.job-info-label {
	font-size: 16px;
	font-weight: 400;
	color: #343b4b;
	text-transform: none;
	line-height: 24px;
}

.job-info-value {
	font-size: 16px;
	font-weight: 400;
	color: var(--color-body-text);
}

/* ========================================
   JOB SECTIONS
   ======================================== */

.job-sections {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.job-section {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding-bottom: 16px;
}

.section-title {
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
	color: #1f242e;
	margin: 0;
}

.section-list {
	list-style: disc;
	padding: 0 0 0 24px;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0;
}

	.section-list li {
		font-size: 16px;
		line-height: 24px;
		color: #1f242e;
		padding: 0;
		position: relative;
		font-weight: 500;
	}

.section-content {
	font-size: 16px;
	line-height: 24px;
	color: #1f242e;
	font-weight: 500;
}

	.section-content h1,
	.section-content h2,
	.section-content h3,
	.section-content h4 {
		margin: 0
	}

	.section-content h1 {
		font-size: 2em;
	}

	.section-content h2 {
		font-size: 1.5em;
	}

	.section-content h3 {
		font-size: 1.17em;
	}

	.section-content h4 {
		font-size: 16px;
	}

	.section-content ul li {
		list-style: initial;
	}

	.section-content ol li {
		list-style: auto;
	}

	.section-content p {
		margin: 0 0 12px 0;
	}

		.section-content p:last-child {
			margin-bottom: 0;
		}

/* ========================================
   JOB ALERT CTA SECTION
   ======================================== */

.job-alert-cta {
	background: var(--color-dark-bg);
	color: var(--color-white);
	border: 1px solid #495368;
	border-radius: var(--radius-button);
	padding: 28px;
	display: flex;
	flex-direction: column;
	gap: 28px;
	align-items: center;
	text-align: center;
	grid-column: 2;
}

/* BASE TEXT STYLING */
.job-alert-cta__text {
	font-size: var(--font-size-body);
	line-height: var(--line-height-body);
	margin: 0;
	color: var(--color-white);
}

	.job-alert-cta__text strong {
		font-weight: 600;
		font-size: 18px;
		line-height: 24px;
	}

/* LOGGED IN STATE */
.job-alert-cta--logged-in {
	justify-content: center;
}

.job-alert-cta__text--logged-in {
	text-align: center;
}

.job-alert-cta__buttons--logged-in {
	display: flex;
	gap: 24px;
	justify-content: center;
	align-items: center;
	width: 100%;
}

.btn-secondary-outline {
	background: transparent;
	color: white;
	border: none;
	padding: 10px 0;
	border-radius: var(--radius-card);
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.3s ease;
	font-family: var(--font-family);
	width: 200px;
}

	.btn-secondary-outline:hover {
		opacity: 0.8;
	}

/* NOT LOGGED IN STATE */
.job-alert-cta--not-logged-in {
	align-items: flex-start;
	gap: 20px;
}

.job-alert-cta__text--not-logged-in {
	text-align: left;
	width: 100%;
}

.job-alert-cta__input-container {
	width: 100%;
}

.job-alert-cta__input-wrapper {
	display: flex;
	align-items: center;
	gap: 12px;
	background: var(--color-white, #ffffff);
	border-radius: 10px;
	padding: 14px 16px;
	height: 52px;
	box-sizing: border-box;
}

.job-alert-cta__input-icon {
	font-size: 24px;
	color: #5f6b85;
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.job-alert-cta__input {
	flex: 1;
	border: none;
	background: transparent;
	font-size: 16px;
	font-weight: 400;
	color: #1f242e;
	font-family: var(--font-family);
	outline: none;
	box-sizing: border-box;
	min-width: 0;
}

	.job-alert-cta__input:-webkit-autofill,
	.job-alert-cta__input:-webkit-autofill:hover,
	.job-alert-cta__input:-webkit-autofill:focus,
	.job-alert-cta__input:-webkit-autofill:active {
		-webkit-box-shadow: 0 0 0 30px transparent inset !important;
		box-shadow: 0 0 0 30px transparent inset !important;
		-webkit-text-fill-color: #1f242e !important;
	}

	.job-alert-cta__input::placeholder {
		color: #5f6b85;
		font-weight: 400;
	}

.job-alert-cta__buttons--not-logged-in {
	display: flex;
	gap: 0;
	justify-content: flex-end;
	align-items: center;
	width: 100%;
}

/* BUTTON STYLES */
.btn-primary-green {
	background: var(--color-primary);
	color: var(--color-dark-bg);
	border: none;
	padding: 10px 20px;
	border-radius: var(--radius-button);
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.3s ease;
	font-family: var(--font-family);
	min-width: 220px;
	text-transform: uppercase;
}

.btn-secondary {
	background: transparent;
	color: var(--color-white);
	border: 2px solid var(--color-white);
	padding: 12px 24px;
	border-radius: var(--radius-button);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.3s ease;
	font-family: var(--font-family);
}

.btn-primary {
	background: var(--color-primary);
	color: var(--color-dark-bg);
	border: none;
	padding: 12px 32px;
	border-radius: var(--radius-button);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.3s ease;
	font-family: var(--font-family);
}

/* ========================================
   RECOMMENDATIONS & ALERTS
   ======================================== */

.recommender-container {
	margin: var(--spacing-xl) 0;
	grid-column: 2;
	width: 100%;
}

.rec-module {
	background: var(--color-white);
	border-radius: var(--radius-card);
	padding: var(--spacing-lg);
	box-shadow: var(--shadow-card);
}

.module-heading {
	font-size: var(--font-size-label);
	font-weight: 700;
	color: var(--color-dark-text);
	margin: 0 0 var(--spacing-lg) 0;
}

.similar-jobs {
	display: grid;
	gap: var(--spacing-lg);
}

.add-job-alert-container {
	background: var(--color-white);
	border-radius: var(--radius-card);
	padding: var(--spacing-lg);
	box-shadow: var(--shadow-card);
	grid-column: 2;
	width: 100%;
}

.module {
	background: var(--color-white);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-card);
}

.module-content {
	padding: var(--spacing-lg);
}

/* ========================================
   UTILITY CLASSES
   ======================================== */

.clear {
	clear: both;
}

.expiredClass {
	opacity: 0.6;
}

.unactiveCompany {
	opacity: 0.5;
}

/* ========================================
   APPLY BUTTON STICKY (Mobile Only)
   ======================================== */

.apply-job-sticky {
	display: none;
}

@media (max-width: 768px) {
	.apply-job-sticky {
		display: flex;
		position: fixed;
		bottom: 12px;
		left: 12px;
		right: 12px;
		width: auto;
		height: auto;
		border-radius: 12px;
		padding: 14px 16px;
		box-sizing: border-box;
		z-index: 999;
		box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.15);
		background: #1f242e;
		color: #61e437;
		border: none;
		font-size: 16px;
		font-weight: 600;
		cursor: pointer;
		transition: all 0.3s ease;
		font-family: var(--font-family);
		align-items: center;
		justify-content: center;
		gap: 12px;
	}

		.apply-job-sticky:active {
			opacity: 0.8;
		}

		.apply-job-sticky:hover {
			opacity: 0.9;
		}

		.apply-job-sticky span {
			flex: 1;
			text-align: center;
		}
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

@media (max-width: 1024px) {
	.job-description-page {
		grid-template-columns: 1fr;
	}

	.job-sidebar {
		position: static;
		grid-column: 1;
		height: auto;
		align-self: auto;
	}

	.job-content,
	.job-alert-cta,
	.recommender-container,
	.add-job-alert-container {
		grid-column: 1;
	}

	.job-alert-cta__buttons--logged-in,
	.job-alert-cta__buttons--not-logged-in {
		flex-direction: row;
		flex-wrap: wrap;
	}
}

@media (min-width: 1200px) {
	.job-description-page {
		padding-inline: 30px !important;
	}
}

@media (max-width: 768px) {
	div.job-description-page {
		zoom: 0.9;
	}

	.job-description-page {
		padding: var(--spacing-lg);
		padding-inline: 0 !important;
	}

	.job-sidebar {
		margin: 10px;
	}

	.job-content {
		margin: 10px;
	}

	.share-job-container {
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		position: relative;
	}

	.share-dropdown {
		position: static;
		top: auto;
		left: auto;
		transform: none;
		margin-top: 8px;
		width: 100%;
		max-width: none;
		z-index: 9999;
	}

	.apply-job {
		padding: 14px 16px !important;
		font-size: 16px !important;
		width: auto !important;
		min-width: auto !important;
	}

	.job-title {
		font-size: 28px;
		line-height: 32px;
	}

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

	.btn {
		padding: 10px 12px;
		font-size: 12px;
	}

	.share-job-btn {
		width: 100%;
	}

	.job-alert-cta {
		flex-direction: column;
		gap: 20px;
		margin: 10px;
	}

	.job-alert-cta--not-logged-in {
		align-items: center;
	}

	.job-alert-cta__text--not-logged-in {
		text-align: center;
	}

	.job-alert-cta__buttons {
		width: 100%;
	}

	.job-alert-cta__buttons--logged-in {
		flex-direction: column;
		gap: 12px;
	}

	.job-alert-cta__buttons--not-logged-in {
		justify-content: center;
	}

	.btn-secondary,
	.btn-primary,
	.btn-secondary-outline,
	.btn-primary-green {
		width: 100%;
		min-width: 100%;
	}

	span.expiredClass.alert-expired {
		margin: 0 10px;
	}
}

@media (max-width: 480px) {
	div.job-description-page {
		zoom: 0.9;
	}

	.job-description-page {
		padding: var(--spacing-md);
		gap: var(--spacing-md);
	}

	.job-title {
		font-size: 22px;
		line-height: 26px;
	}

	.section-title {
		font-size: 16px;
	}

	.job-alert-cta {
		padding: var(--spacing-lg);
		gap: 16px;
	}

	.job-alert-cta__text {
		font-size: 14px;
		line-height: 20px;
	}

		.job-alert-cta__text strong {
			font-size: 16px;
		}

	.job-alert-cta__buttons {
		flex-direction: column;
		width: 100%;
	}

	.job-alert-cta__buttons--logged-in,
	.job-alert-cta__buttons--not-logged-in {
		flex-direction: column;
		width: 100%;
	}

	.btn-secondary,
	.btn-primary,
	.btn-secondary-outline,
	.btn-primary-green {
		width: 100%;
	}

	.btn-secondary-outline {
		width: 100%;
	}

	.btn-primary-green {
		padding: 12px 16px;
		min-width: auto;
	}

	.job-alert-cta__input-wrapper {
		height: auto;
		padding: 12px 12px;
	}
}
/* ========================================
   TABLE STYLES
   ======================================== */

.details-table {
	width: 100%;
	border-collapse: collapse;
	margin: 0;
	padding: 0;
	color: var(--Secondary-800, #1F242E);
	font-family: Poppins;
	font-size: 16px;
	font-style: normal;
	font-weight: 500;
	line-height: normal;
	list-style: disc;
	display: block;
}

	.details-table tr {
		border: none;
		display: block;
		padding: 0;
		margin: 0;
	}

		.details-table tr::before {
			content: "• ";
			color: var(--Secondary-800, #1F242E);
			font-weight: 500;
			margin-right: 8px;
		}

		.details-table tr:last-child {
			border-bottom: none;
		}

	.details-table td {
		padding: 0;
		color: var(--Secondary-800, #1F242E);
		display: inline;
		border: none;
	}

		.details-table td.label {
			font-weight: 600;
			color: var(--Secondary-800, #1F242E);
			width: auto;
			padding: 0;
			white-space: normal;
			display: inline;
		}

		.details-table td:not(.label) {
			color: var(--Secondary-800, #1F242E);
			display: inline;
			padding: 0;
		}

		.details-table td::before {
			display: none;
		}

/* ========================================
   DOCUMENT & OPTIONAL STYLES
   ======================================== */

.document-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: var(--spacing-md) 0;
	border-bottom: 1px solid #f0f0f0;
}

	.document-item:last-child {
		border-bottom: none;
	}

	.document-item span {
		font-size: var(--font-size-body);
		color: var(--color-body-text);
	}

.doc-link {
	color: var(--color-info-accent);
	text-decoration: none;
	font-weight: 600;
	font-size: var(--font-size-small);
	transition: color 0.3s ease;
}

	.doc-link:hover {
		color: var(--color-primary-medium);
		text-decoration: underline;
	}

.optional {
	font-size: var(--font-size-small);
	color: var(--color-light-text);
	margin-left: var(--spacing-sm);
	font-weight: 400;
}

/* ========================================
   JOB REFERENCE STYLE
   ======================================== */

.job-ref {
	font-size: var(--font-size-small);
	color: var(--color-light-text);
	padding: var(--spacing-md);
	background: var(--color-light-bg);
	border-radius: var(--radius-small);
	display: inline-block;
}

/* ========================================
   APPLY BUTTON STICKY (Mobile)
   ======================================== */

.apply-button-sticky {
	display: none;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 100;
	width: 100%;
	padding: var(--spacing-md);
	background: var(--color-white);
	box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
	box-sizing: border-box;
}

@media (max-width: 768px) {
	.apply-button-sticky {
		display: block;
	}

	body {
		padding-bottom: 70px;
	}
}

/* ========================================
   ALERT EXPIRED STYLE
   ======================================== */

.alert-expired {
	display: block;
	padding: var(--spacing-md) var(--spacing-lg);
	background: #ffebee;
	color: #c62828;
	border-left: 4px solid #c62828;
	border-radius: var(--radius-small);
	font-weight: 600;
	margin-bottom: var(--spacing-lg);
}

/*:::::: SIMILAR JOBS ::::::*/

.similar-jobs {
	flex-wrap: wrap;
	justify-content: center;
}

.similar-jobs,
.SimilarJobsPlaceholder {
	display: flex;
	gap: 12px;
	align-items: center;
}

.SimilarJobsPlaceholder {
	background: white;
	border: none;
	border-radius: 10px;
	padding: 6px 0px;
	box-sizing: border-box;
	width: var(--Scale-1550, 356px);
	height: 120px;
}

.SimilarJobsPlaceholder__logo--content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	flex-shrink: 0;
	height: 100%;
}

.SimilarJobsPlaceholder__logo {
	height: 80px;
	width: 80px;
	min-height: 80px;
	min-width: 80px;
	border-radius: 8px;
	position: relative;
	flex-shrink: 0;
}

.SimilarJobsPlaceholder__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
	color: var(--color-secondary-800);
	flex: 1;
	justify-content: space-between;
	width: 100%;
}

	.SimilarJobsPlaceholder__content h3 {
		margin: 0;
		align-self: stretch;
		font-size: 16px;
		font-style: normal;
		font-weight: 600;
		line-height: 24px;
		color: var(--color-secondary-800);
		text-overflow: ellipsis;
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
		min-height: 48px;
		height: 48px;
	}

	.SimilarJobsPlaceholder__content label {
		margin: 0;
		padding: 0;
		font-size: 14px;
		font-style: normal;
		font-weight: 400;
		line-height: 20px;
		width: 100%;
		color: var(--color-secondary-700);
		height: 20px;
		align-items: center;
	}

		.SimilarJobsPlaceholder__content label.company {
			height: 40px;
			text-overflow: ellipsis;
			overflow: hidden;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			line-clamp: 2;
			-webkit-box-orient: vertical;
			align-items: flex-start;
		}

		.SimilarJobsPlaceholder__content label.location {
			color: var(--color-secondary-700);
			font-size: 13px;
			height: 20px;
			line-height: 20px;
		}

.SimilarJobsPlaceholder__actions {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	width: 24px;
	min-width: 24px;
	max-width: 24px;
	flex-shrink: 0;
	position: relative;
	padding-inline: 5px;
	align-self: flex-start;
}

.new-job-label-mobile {
	display: flex !important;
}

div.SimilarJobsPlaceholder__actions span.new-job-label {
	border-radius: var(--Scale-950);
	background: var(--color-info-400);
	display: flex;
	padding: 4px 8px;
	justify-content: center;
	align-items: center;
	gap: 4px;
	color: var(--color-primary-50);
	font-family: Poppins;
	font-size: 11px;
	font-style: normal;
	font-weight: 500;
	line-height: normal;
	position: absolute;
	top: -8px;
	right: -8px;
}

div.SimilarJobsPlaceholder__logo--content span.new-job-label {
	border-radius: var(--Scale-950);
	background: var(--color-info-400);
	display: flex;
	padding: 4px 8px;
	justify-content: center;
	align-items: center;
	gap: 4px;
	color: var(--color-primary-50);
	font-family: Poppins;
	font-size: 11px;
	font-style: normal;
	font-weight: 500;
	line-height: normal;
	white-space: nowrap;
}

span.expiredClass.alert-expired,
div.module.rec-module.des-rec-container {
	grid-column-start: 1;
	grid-column-end: 4;
}