/**
 * FxMedCE Dashboard Card Enhancements
 *
 * Styles for the LifterLMS "My Courses" cards on the WooCommerce account page.
 * Only loaded on the account page, so selectors don't need a page-level scope.
 *
 * @since 1.1.0
 */

/* ── Card hover effects ──────────────────────────────────────────────────────── */

.llms-loop-item {
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.llms-loop-item:hover {
	transform: translateY(-4px);
	box-shadow:
		0 12px 32px rgba(0, 0, 0, 0.12),
		0 4px 12px rgba(0, 0, 0, 0.08);
}

/* ── Image hover ─────────────────────────────────────────────────────────────── */

.llms-loop-item .llms-loop-link {
	display: block;
	overflow: hidden;
}

.llms-loop-item .llms-loop-link img {
	transition: transform 0.3s ease;
}

.llms-loop-item:hover .llms-loop-link img {
	transform: scale(1.04);
}

/* ── Progress bar ────────────────────────────────────────────────────────────── */

.llms-loop .llms-progress {
	height: 1.25rem;
}

.llms-loop .llms-progress .llms-progress-bar {
	height: 1.25rem;
	border-radius: 0.625rem;
}

.llms-loop .progress__indicator {
	font-size: var(--wp--preset--font-size--16);
	font-weight: 700;
	height: 1.25rem;
	line-height: 1.25rem;
}

/* ── Card title ──────────────────────────────────────────────────────────────── */

.llms-loop-item-content h2 {
	font-size: var(--wp--preset--font-size--28, 1.75rem);
}

/* ── Enrollment metadata ─────────────────────────────────────────────────────── */

.llms-loop-item-footer .llms-enroll-status,
.llms-loop-item-footer .llms-enroll-date {
	color: var(--wp--preset--color--contrast-lighter, #9e9e9e);
	font-size: var(--wp--preset--font-size--14, 0.875rem);
}

/* ── Action button ───────────────────────────────────────────────────────────── */

.fxmedce-dashboard-action {
	margin-top: auto;
	padding: 0 var(--wp--preset--spacing--20);
}

.fxmedce-dashboard-action a {
	background-color: var(--wp--preset--color--primary, #466DD8);
	border-radius: calc(var(--wp--custom--border--radius, 4px) * 2);
	color: #fff;
	display: block;
	font-family: var(--wp--custom--heading--font-family, inherit);
	font-size: var(--wp--preset--font-size--16, 1rem);
	font-weight: 600;
	padding: 0.75rem 1.5rem;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.2s ease;
}

.fxmedce-dashboard-action a:hover {
	background-color: var(--wp--preset--color--primary-darker, #3857AD);
	color: #fff;
	text-decoration: none;
}

/* ── Hide categories (CSS fallback) ──────────────────────────────────────────── */

.llms-loop .wp-block-post-terms {
	display: none;
}