/* =======================================================================
 * AX Saved Roles
 * Cookie-backed saved-jobs list + saved-state for the .save_career button.
 * ==================================================================== */

#top .ax-saved {
	--ax-purple: #444192;
	--ax-green: #00bd87;
	--ax-ink: #1a1a1a;
	--ax-grey: #f5f5f5;
	font-family: "Montserrat", sans-serif;
}

#top .ax-saved__heading {
	margin: 0 0 24px;
	color: var(--ax-ink);
	font-size: 28px;
	font-weight: 700;
	line-height: 1.2;
}

#top .ax-saved__list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

#top .ax-saved__card {
	position: relative;
	background: #ffffff;
	border: 1px solid #ececf4;
	border-radius: 20px;
	overflow: hidden;
	transition: box-shadow .25s ease, transform .25s ease;
}

#top .ax-saved__card:hover {
	box-shadow: 0 18px 40px rgba(68, 65, 146, .12);
	transform: translateY(-2px);
}

#top .ax-saved__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

#top .ax-saved__media {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	background: var(--ax-grey) center / cover no-repeat;
}

#top .ax-saved__media--empty {
	background: linear-gradient(135deg, #ecebf6, #f5f5f5);
}

#top .ax-saved__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 20px;
}

#top .ax-saved__title {
	color: var(--ax-ink);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
}

#top .ax-saved__meta {
	color: #6b6b7b;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
}

#top .ax-saved__cta {
	margin-top: 6px;
	color: var(--ax-purple);
	font-size: 14px;
	font-weight: 700;
}

#top .ax-saved__remove {
	position: absolute;
	top: 14px;
	right: 14px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, .92);
	box-shadow: 0 4px 12px rgba(26, 26, 26, .12);
	color: var(--ax-purple);
	cursor: pointer;
	transition: background .2s ease, color .2s ease;
}

#top .ax-saved__remove svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
}

#top .ax-saved__remove:hover {
	background: var(--ax-purple);
	color: #ffffff;
}

#top .ax-saved__empty {
	grid-column: 1 / -1;
	padding: 48px 24px;
	color: #6b6b7b;
	font-size: 16px;
	text-align: center;
}

/* Saved state for the on-page Save button (single role page / job cards).
   The button's own icon inherits this colour via fill:currentColor. The
   label pills (.career_saved / .career_removed) carry their own explicit
   fills, so this does not recolour them. */
#top .save_career.is-saved {
	background: #00BD87 !important;
	border-color: #00BD87 !important;
}

#top .save_career.is-saved > svg.career_saved,
#top .save_career.is-saved > svg.career_removed {
	fill: none;
}

/* ---- "Saved" / "Removed" flash pills --------------------------------
 * Both inline label SVGs sit hidden above the button; a click reveals the
 * matching one for a couple of seconds (JS toggles .show-saved /
 * .show-removed), then it fades back out. The SVGs include their own
 * downward tail, so no extra arrow is needed. */
#top .save_career {
	position: relative;
}

#top .save_career .career_saved,
#top .save_career .career_removed {
	position: absolute;
	bottom: calc(100% + 6px);
	left: 50%;
	transform: translateX(-50%) translateY(4px);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	filter: drop-shadow(0 6px 14px rgba(26, 26, 26, .18));
	transition: opacity .2s ease, transform .2s ease, visibility .2s;
	z-index: 5;
}

#top .save_career.show-saved .career_saved,
#top .save_career.show-removed .career_removed {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}

@media only screen and (max-width: 989px) {

	#top .ax-saved__list {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media only screen and (max-width: 640px) {

	#top .ax-saved__list {
		grid-template-columns: 1fr;
	}
}