/* "Grace exhausted" course card state.
 *
 * Only the thumbnail image is desaturated/dimmed here - the caption
 * (title, category, progress) stays at full opacity so the card still
 * reads clearly instead of looking like a broken/disabled element. The
 * grace-specific messaging + call to action live in a bottom banner over
 * the image, not a flat overlay covering the whole card. */
.egr-grace-expired {
	position: relative;
}

.egr-grace-expired .wdm-course-image {
	filter: grayscale(60%);
	opacity: 0.85;
}

.egr-grace-expired .egr-overlay-message {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 14px 16px;
	background: linear-gradient(180deg, rgba(176, 42, 42, 0) 0%, rgba(139, 27, 27, 0.92) 55%);
	color: #fff;
	font-size: 12.5px;
	font-weight: 500;
	line-height: 1.45;
	letter-spacing: 0.1px;
	z-index: 5;
	pointer-events: none;
}

/* The exhausted-state action button ("Contact Support" by default): a
 * distinct warm-red treatment so it reads as "this needs attention" rather
 * than a plain disabled-looking gray button. */
.egr-grace-expired [class*="eb-course-action-btn"] {
	background: linear-gradient(180deg, #d64545 0%, #b02a2a 100%) !important;
	border-color: #b02a2a !important;
	color: #fff !important;
}

.egr-grace-expired [class*="eb-course-action-btn"]:hover {
	background: linear-gradient(180deg, #c93d3d 0%, #9c2424 100%) !important;
}

/* Expired + grace available: highlight the extend-action card.
 * Note: this class can land either on the outer card wrapper (default
 * filter-based path) or directly on .wdm-course-thumbnail itself (DOM
 * fallback path for non-standard themes), so we style both the descendant
 * case and the self case explicitly rather than relying on one selector. */
.egr-extend-available .wdm-course-thumbnail,
.egr-extend-available.wdm-course-thumbnail,
.egr-extend-available .wdm-course-image,
.egr-extend-available .wdm-caption {
	box-shadow: 0 0 0 2px #e2a03f;
}

.egr-extend-available [class*="eb-course-action-btn"] {
	background-color: #e2a03f !important;
	border-color: #e2a03f !important;
	color: #fff !important;
}

.egr-extend-available [class*="eb-course-action-btn"]:hover {
	background-color: #cc8a34 !important;
}

.egr-extend-available .wdm-course-image,
.egr-grace-expired .wdm-course-image {
	position: relative;
}