/* Retired exams: product page additions on top of the theme's product.css, and the notice on
   practice test pages (which do not load product.css, hence the token fallbacks). */
.cm-ret {
	--cm-ret-amber: #b45309;
	--cm-ret-amber-bg: #fff7e8;
	--cm-ret-amber-line: #f6d9a8;
}

.cm-ret-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 12px;
}

.cm-ret-pill {
	border: 1px solid var(--cm-product-line, #dedee3);
	border-radius: 999px;
	color: var(--cm-product-muted, #62646b);
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	padding: 7px 12px;
}

.cm-ret-pill--status {
	background: var(--cm-ret-amber-bg);
	border-color: var(--cm-ret-amber-line);
	color: var(--cm-ret-amber);
}

.cm-ret .cm-ret-fact--warn dd {
	color: var(--cm-ret-amber);
}

/* Retirement notice */
.cm-ret-notice {
	background: var(--cm-ret-amber-bg);
	border: 1px solid var(--cm-ret-amber-line);
	border-radius: 8px;
	display: flex;
	gap: 14px;
	margin: 20px 0;
	padding: 16px 18px;
}

.cm-ret-notice-icon {
	color: var(--cm-ret-amber);
	flex: 0 0 auto;
	line-height: 0;
	padding-top: 2px;
}

.cm-ret-notice h2 {
	color: var(--cm-product-ink, #232323);
	font-size: 17px;
	font-weight: 700;
	margin: 0 0 6px;
}

.cm-ret-notice p {
	color: var(--cm-product-ink, #232323);
	font-size: 15px;
	line-height: 1.55;
	margin: 0;
}

.cm-ret-notice .cm-ret-notice-note {
	color: var(--cm-product-muted, #62646b);
	margin-top: 8px;
}

/* Archived questions buy box */
.cm-ret-buy-text {
	color: var(--cm-product-muted, #62646b);
	font-size: 14px;
	line-height: 1.55;
	margin: 0 0 10px;
}

/* "Replaced by" / "Looking for a current exam?" */
.cm-ret-next {
	background: #fff;
	border: 1px solid var(--cm-product-line, #dedee3);
	border-left: 4px solid var(--cm-product-purple, #641fc7);
	border-radius: 8px;
	margin: 28px 0;
	padding: 24px 28px;
}

.cm-ret-next--none {
	border-left-color: var(--cm-product-line, #dedee3);
}

.cm-ret-next-label {
	color: var(--cm-product-purple, #641fc7);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .06em;
	margin: 0 0 6px;
	text-transform: uppercase;
}

.cm-ret-next-title {
	color: var(--cm-product-ink, #232323);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.3;
	margin: 0 0 8px;
}

.cm-ret-next-code {
	background: var(--cm-product-purple, #641fc7);
	border-radius: 4px;
	color: #fff;
	display: inline-block;
	font-size: 15px;
	margin-right: 8px;
	padding: 3px 8px;
	vertical-align: middle;
}

.cm-ret-next-text {
	color: var(--cm-product-muted, #62646b);
	font-size: 15px;
	line-height: 1.55;
	margin: 0 0 16px;
}

.cm-ret-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.cm-ret-btn {
	align-items: center;
	border: 2px solid var(--cm-product-purple, #641fc7);
	border-radius: 6px;
	display: inline-flex;
	font-size: 15px;
	font-weight: 700;
	gap: 8px;
	line-height: 1.2;
	padding: 11px 18px;
	text-decoration: none !important;
	transition: background-color .15s, color .15s;
}

.cm-ret-btn--primary {
	background: var(--cm-product-purple, #641fc7);
	color: #fff !important;
}

.cm-ret-btn--primary:hover,
.cm-ret-btn--primary:focus-visible {
	background: var(--cm-product-purple-dark, #4c129d);
	border-color: var(--cm-product-purple-dark, #4c129d);
}

.cm-ret-btn--ghost {
	background: #fff;
	color: var(--cm-product-purple, #641fc7) !important;
}

.cm-ret-btn--ghost:hover,
.cm-ret-btn--ghost:focus-visible {
	background: #f3edfc;
}

.cm-ret-btn:focus-visible {
	outline: 3px solid #c9b2f0;
	outline-offset: 2px;
}

@media (max-width: 767px) {
	.cm-ret-next {
		padding: 20px 18px;
	}

	.cm-ret-next-title {
		font-size: 19px;
	}

	.cm-ret-btn {
		justify-content: center;
		width: 100%;
	}
}

/* Notice on practice test pages of retired exams (inside the page header) */
.cm-ret-practice {
	margin: 24px 0 0;
}

/* The practice page styles links inside its header; keep the buttons' own colours. */
.cm-ret-practice .cm-ret-btn--primary,
.cm-ret-practice .cm-ret-btn--primary:visited {
	background: var(--cm-product-purple, #641fc7) !important;
	color: #fff !important;
}

.cm-ret-practice .cm-ret-btn--primary:hover {
	background: var(--cm-product-purple-dark, #4c129d) !important;
}

.cm-ret-practice .cm-ret-btn--ghost,
.cm-ret-practice .cm-ret-btn--ghost:visited {
	background: #fff !important;
	color: var(--cm-product-purple, #641fc7) !important;
}

.cm-ret-practice .cm-ret-notice {
	margin: 0;
}

.cm-ret-practice .cm-ret-practice-rep {
	margin-top: 10px;
}

.cm-ret-practice .cm-ret-actions {
	margin-top: 12px;
}