/**
 * Core Learn – enrollment box & locked content (course/lesson/quiz pages).
 * Selectors are doubled-up to win over generic theme rules.
 */

.clms-enroll,
.clms-locked {
	--clms-fg: #09090b;
	--clms-muted: #71717a;
	--clms-border: #e4e4e7;
	--clms-subtle: #f4f4f5;
	--clms-primary: #4f46e5;
	--clms-primary-hover: #4338ca;
	--clms-primary-soft: #eef2ff;
	--clms-success: #059669;
	--clms-success-soft: #ecfdf5;
	--clms-warning: #b45309;
	--clms-warning-soft: #fffbeb;
	--clms-danger: #dc2626;
	box-sizing: border-box;
	font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	color: var(--clms-fg);
	text-align: left;
}

.clms-enroll *,
.clms-locked * {
	box-sizing: border-box;
}

/* ---------- Enrollment box ---------- */

.clms-enroll {
	--tone: var(--clms-primary);
	--tone-soft: var(--clms-primary-soft);
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 16px 18px;
	margin: 0 0 28px;
	padding: 20px 22px;
	background: #fff;
	border: 1px solid var(--clms-border);
	border-radius: 16px;
	box-shadow: 0 1px 2px rgba(9, 9, 11, 0.04), 0 8px 24px rgba(9, 9, 11, 0.06);
}

.clms-enroll--enrolled {
	--tone: var(--clms-success);
	--tone-soft: var(--clms-success-soft);
}

.clms-enroll--closed {
	--tone: var(--clms-muted);
	--tone-soft: var(--clms-subtle);
	box-shadow: none;
	background: #fafafa;
}

.clms-enroll--paid {
	--tone: var(--clms-warning);
	--tone-soft: var(--clms-warning-soft);
}

.clms-enroll__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 14px;
	background: var(--tone-soft);
	color: var(--tone);
}

.clms-enroll__body {
	min-width: 0;
}

.clms-enroll .clms-enroll__title {
	margin: 0 0 2px;
	padding: 0;
	font-size: 17px;
	font-weight: 650;
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: var(--clms-fg);
}

.clms-enroll .clms-enroll__text {
	margin: 0;
	padding: 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--clms-muted);
}

.clms-enroll__progress {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 10px;
}

.clms-enroll__bar {
	position: relative;
	flex: 1;
	max-width: 280px;
	height: 6px;
	overflow: hidden;
	border-radius: 999px;
	background: var(--clms-subtle);
}

.clms-enroll__bar > span {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: linear-gradient(90deg, #10b981, var(--clms-success));
}

.clms-enroll__pct {
	font-size: 13px;
	font-weight: 600;
	color: var(--clms-muted);
	font-variant-numeric: tabular-nums;
}

.clms-enroll__actions {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 6px;
	min-width: 190px;
}

.clms-enroll .clms-enroll__btn,
.clms-enroll a.clms-enroll__btn,
.clms-enroll button.clms-enroll__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 44px;
	margin: 0;
	padding: 0 20px;
	border: 0;
	border-radius: 11px;
	background: var(--clms-primary);
	color: #fff;
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	text-transform: none;
	letter-spacing: normal;
	white-space: nowrap;
	box-shadow: 0 1px 2px rgba(79, 70, 229, 0.3), 0 6px 16px rgba(79, 70, 229, 0.18);
	cursor: pointer;
	transition: background-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.clms-enroll .clms-enroll__btn:hover,
.clms-enroll .clms-enroll__btn:focus-visible {
	background: var(--clms-primary-hover);
	color: #fff;
}

.clms-enroll .clms-enroll__btn:active:not(:disabled) {
	transform: translateY(1px);
}

.clms-enroll .clms-enroll__btn:focus-visible {
	outline: 2px solid var(--clms-primary);
	outline-offset: 3px;
}

.clms-enroll .clms-enroll__btn:disabled {
	cursor: progress;
	opacity: 0.85;
}

.clms-enroll.clms-enroll--enrolled .clms-enroll__btn {
	background: var(--clms-success);
	box-shadow: 0 1px 2px rgba(5, 150, 105, 0.3), 0 6px 16px rgba(5, 150, 105, 0.18);
}

.clms-enroll.clms-enroll--enrolled .clms-enroll__btn:hover,
.clms-enroll.clms-enroll--enrolled .clms-enroll__btn:focus-visible {
	background: #047857;
}

.clms-enroll .clms-enroll__btn.is-disabled {
	background: var(--clms-subtle);
	color: var(--clms-muted);
	box-shadow: none;
	cursor: not-allowed;
}

.clms-enroll.is-enrolled .clms-enroll__btn,
.clms-enroll.is-enrolled .clms-enroll__btn:disabled {
	background: var(--clms-success);
}

.clms-enroll a.clms-enroll__link {
	font-size: 13px;
	text-align: center;
	color: var(--clms-primary);
	text-decoration: none;
}

.clms-enroll a.clms-enroll__link:hover {
	text-decoration: underline;
}

.clms-enroll .clms-enroll__msg {
	min-height: 0;
	margin: 0;
	font-size: 13px;
	line-height: 1.4;
	text-align: center;
}

.clms-enroll .clms-enroll__msg:empty {
	display: none;
}

.clms-enroll__msg.is-error {
	color: var(--clms-danger);
}

.clms-enroll__msg.is-success {
	color: var(--clms-success);
}

.clms-enroll__spinner {
	width: 16px;
	height: 16px;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 999px;
	animation: clms-enroll-spin 0.7s linear infinite;
}

/* ---------- Locked lesson / quiz ---------- */

.clms-locked {
	max-width: 720px;
	margin: 8px auto 32px;
}

.clms-locked__hero {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 40px 24px 28px;
	text-align: center;
}

.clms-locked__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	margin-bottom: 16px;
	border-radius: 20px;
	color: #fff;
	background: linear-gradient(135deg, #6366f1, #4f46e5 60%, #4338ca);
	box-shadow: 0 10px 24px rgba(79, 70, 229, 0.28);
}

.clms-locked__eyebrow {
	margin-bottom: 8px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--clms-primary);
}

.clms-locked .clms-locked__title {
	margin: 0 0 10px;
	padding: 0;
	font-size: clamp(22px, 3vw, 28px);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var(--clms-fg);
}

.clms-locked .clms-locked__text {
	max-width: 520px;
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	color: var(--clms-muted);
}

.clms-locked .clms-locked__text a {
	font-weight: 600;
	color: var(--clms-fg);
	text-decoration: underline;
	text-decoration-color: #c7d2fe;
	text-underline-offset: 3px;
}

.clms-locked .clms-enroll {
	margin-bottom: 16px;
}

.clms-locked a.clms-locked__back {
	display: block;
	font-size: 14px;
	font-weight: 500;
	text-align: center;
	color: var(--clms-muted);
	text-decoration: none;
}

.clms-locked a.clms-locked__back:hover {
	color: var(--clms-fg);
}

/* ---------- Responsive ---------- */

@media (max-width: 640px) {
	.clms-enroll {
		grid-template-columns: auto 1fr;
		padding: 18px;
	}

	.clms-enroll__actions {
		grid-column: 1 / -1;
		min-width: 0;
	}

	.clms-enroll .clms-enroll__btn {
		width: 100%;
	}

	.clms-locked__hero {
		padding: 28px 8px 20px;
	}
}

@keyframes clms-enroll-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.clms-enroll *,
	.clms-enroll .clms-enroll__btn {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

/* ---------- Commerce add-ons (price & notes inside the CTA) ---------- */

.clms-enroll .clms-enroll__price {
	font-size: 22px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	color: var(--clms-fg);
	font-variant-numeric: tabular-nums;
}

.clms-enroll .clms-enroll__price del {
	margin-right: 6px;
	font-size: 15px;
	font-weight: 500;
	color: var(--clms-muted);
}

.clms-enroll .clms-enroll__price ins {
	text-decoration: none;
}

.clms-enroll .clms-enroll__note {
	margin-bottom: 4px;
	font-size: 12px;
	text-align: center;
	color: var(--clms-muted);
}

/* ---------- Compact CTA (page builders: button only) ---------- */

.clms-enroll.clms-enroll--compact {
	display: flex;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	box-shadow: none;
}

.clms-enroll.clms-enroll--compact .clms-enroll__actions {
	width: 100%;
	min-width: 0;
	align-items: flex-start;
}