/**
 * FxMedCE Lesson Enhancements
 *
 * Styles for the Mark Complete button and lesson UI.
 * Only loaded on lesson pages.
 *
 * @since 1.1.0
 */

/* ── Wrapper ─────────────────────────────────────────────────────────────────── */

.llms-lesson-button-wrapper.llms-lesson-button-wrapper {
	background-color: transparent;
	border-radius: 0;
	justify-content: flex-end;
	padding: var(--wp--preset--spacing--20) 0;
}

/* ── Mark Complete button ────────────────────────────────────────────────────── */

.llms-lesson-button-wrapper .llms-button-primary.llms-button-primary,
.llms-lesson-button-wrapper .llms-button-primary.llms-button-primary:disabled:hover {
	background-color: var(--wp--preset--color--base, #fff);
	border: 1px solid var(--wp--preset--color--contrast-lightest, #e0e0e0);
	border-radius: 100px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
	color: var(--wp--preset--color--contrast, #090909);
	font-size: var(--wp--preset--font-size--18, 1.125rem);
	padding: 0.75rem 2rem 0.75rem 1.25rem;
	transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.llms-lesson-button-wrapper .llms-button-primary.llms-button-primary:hover {
	background-color: var(--wp--preset--color--base, #fff);
	border-color: var(--wp--preset--color--contrast-lighter, #9e9e9e);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	color: var(--wp--preset--color--contrast, #090909);
}

/* Checkmark circle icon */
.llms-lesson-button-wrapper .llms-button-primary::before {
	content: "";
	display: inline-block;
	width: 1.5rem;
	height: 1.5rem;
	margin-right: 0.5rem;
	vertical-align: middle;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
	background-size: contain;
	background-repeat: no-repeat;
}

/* ── Completed state: purple Mark Incomplete button, centered ────────────────── */

/* The "Lesson Complete" text is removed via PHP filter, but hide the
   theme's span as a fallback in case the filter doesn't run */
.llms-lesson-button-wrapper .llms-lesson-complete {
	display: none;
}

/* Style Mark Incomplete as a purple "completed" pill button */
.llms-lesson-button-wrapper .llms-button-secondary.llms-button-secondary {
	background-color: #554bb9f2;
	border: 1px solid #554bb9f2;
	border-radius: 100px;
	color: #fff;
	font-size: var(--wp--preset--font-size--18, 1.125rem);
	padding: 0.75rem 2rem 0.75rem 1.25rem;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.llms-lesson-button-wrapper .llms-button-secondary.llms-button-secondary:hover {
	background-color: #a78bfa;
	border-color: #a78bfa;
	color: #fff;
}

/* Filled checkmark icon for completed state */
.llms-lesson-button-wrapper .llms-button-secondary::before {
	content: "";
	display: inline-block;
	width: 1.5rem;
	height: 1.5rem;
	margin-right: 0.5rem;
	vertical-align: middle;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10' fill='rgba(255,255,255,0.25)'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
	background-size: contain;
	background-repeat: no-repeat;
}