/**
 * Soft skin for native Learning Templates LXP blocks.
 */

body.cft-lms-skin {
	--learning-templates-lxp-primary-btn-bg: var(--cft-control-navy);
	--learning-templates-lxp-primary-btn-color: #fff;
	--learning-templates-lxp-primary-btn-bg-hover: var(--cft-navy-600);
	--learning-templates-lxp-primary-btn-color-hover: #fff;
}

.cft-lxp-surface {
	font-family: var(--cft-font);
	color: var(--cft-text);
}

/*
 * Learner player buttons: match .cft-btn shape and type. Colors come from the LXP
 * Customizer primary button settings (CFT defaults in CFT_LMS_LXP_Overrides).
 * No display here: LXP hides some toggles per breakpoint.
 */
body.cft-lms-skin .learning-templates-lxp-learner-player__focus-toggle,
body.cft-lms-skin .learning-templates-lxp-learner-player__outline-toggle,
body.cft-lms-skin .learning-templates-lxp-learner-player__mobile-outline,
body.cft-lms-skin .learning-templates-lxp-cmi5-package__launch,
body.cft-lms-skin .learning-templates-lxp-cmi5-package__open-lightbox,
body.cft-lms-skin .learning-templates-lxp-learning-post-footer .button,
body.cft-lms-skin .learning-templates-lxp-learning-post-footer .learning-templates-lxp-adjacent-nav-link,
body.cft-lms-skin .learning-templates-lxp-mark-complete,
body.cft-lms-skin .learning-templates-lxp-congrats-message__button,
body.cft-lms-skin .learning-templates-lxp-curriculum-tree-modal__actions button,
body.cft-lms-skin :where(.learning-templates-lxp-org-user-modal__footer button),
body.cft-lms-skin .learning-templates-lxp-commerce-refund-modal__actions button,
body.cft-lms-skin .learning-templates-lxp-report-purge-modal__actions button {
	gap: 0.4rem;
	border-width: 1px;
	border-style: solid;
	border-radius: 8px;
	padding: 0.55rem 1rem;
	font-family: var(--cft-font);
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.25;
	text-decoration: none;
	box-shadow: none;
	cursor: pointer;
}

/* Same box as the player Focus toggle (that rule lives on the toggle, not on .button). */
body.cft-lms-skin .learning-templates-lxp-cmi5-package__launch,
body.cft-lms-skin .learning-templates-lxp-cmi5-package__open-lightbox {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
}

@media (max-width: 959px) {
	body.cft-lms-skin .learning-templates-lxp-cmi5-package__launch,
	body.cft-lms-skin .learning-templates-lxp-cmi5-package__open-lightbox {
		min-height: 44px;
	}
}

/* Player header "Continue: …" link: secondary (reversed) style, Focus button height. */
body.cft-lms-skin .learning-templates-lxp-learner-player__resume {
	box-sizing: border-box;
	padding: 0.55rem 1rem;
	border: 1px solid var(--cft-control-navy);
	border-radius: 8px;
	background: #fff;
	color: var(--cft-control-navy);
	font-family: var(--cft-font);
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.45;
	box-shadow: none;
}

body.cft-lms-skin .learning-templates-lxp-learner-player__resume:is(:hover, :focus-visible) {
	background: var(--cft-navy-600);
	border-color: var(--cft-navy-600);
	color: #fff;
}

/*
 * LXP modal actions: primary / secondary / danger, matching .cft-btn variants.
 * Org user modal buttons use :where() so the LXP Organization Tree Customizer
 * element settings (body-scoped, loaded after this file) can override them.
 */
body.cft-lms-skin :is(
	.learning-templates-lxp-curriculum-tree-modal__enroll,
	.learning-templates-lxp-commerce-refund-modal__actions .button-primary,
	.learning-templates-lxp-report-purge-modal__actions .button-primary
),
body.cft-lms-skin :where(.learning-templates-lxp-org-user-modal__save) {
	background: var(--learning-templates-lxp-primary-btn-bg, var(--cft-control-navy));
	border-color: var(--learning-templates-lxp-primary-btn-bg, var(--cft-control-navy));
	color: var(--learning-templates-lxp-primary-btn-color, #fff);
}

body.cft-lms-skin :is(
	.learning-templates-lxp-curriculum-tree-modal__enroll,
	.learning-templates-lxp-org-user-modal__save,
	.learning-templates-lxp-commerce-refund-modal__actions .button-primary,
	.learning-templates-lxp-report-purge-modal__actions .button-primary
):is(:hover, :focus-visible):not(:disabled) {
	background: var(--learning-templates-lxp-primary-btn-bg-hover, var(--cft-navy-600));
	border-color: var(--learning-templates-lxp-primary-btn-bg-hover, var(--cft-navy-600));
	color: var(--learning-templates-lxp-primary-btn-color-hover, #fff);
}

body.cft-lms-skin :is(
	.learning-templates-lxp-curriculum-tree-modal__dismiss,
	.learning-templates-lxp-report-purge-cancel,
	#learning-templates-lxp-refund-cancel
),
body.cft-lms-skin :where(.learning-templates-lxp-org-user-modal__cancel) {
	background: #fff;
	border-color: var(--cft-control-navy);
	color: var(--cft-control-navy);
}

body.cft-lms-skin :is(
	.learning-templates-lxp-curriculum-tree-modal__dismiss,
	.learning-templates-lxp-org-user-modal__cancel,
	.learning-templates-lxp-report-purge-cancel,
	#learning-templates-lxp-refund-cancel
):is(:hover, :focus-visible) {
	background: var(--cft-navy-600);
	border-color: var(--cft-navy-600);
	color: #fff;
}

body.cft-lms-skin :where(.learning-templates-lxp-org-user-modal__delete) {
	background: #fff;
	border-color: #b42318;
	color: #b42318;
}

body.cft-lms-skin .learning-templates-lxp-org-user-modal__delete:is(:hover, :focus-visible):not(:disabled) {
	background: #b42318;
	border-color: #b42318;
	color: #fff;
}

body.cft-lms-skin :is(
	.learning-templates-lxp-curriculum-tree-modal__actions,
	.learning-templates-lxp-org-user-modal__footer,
	.learning-templates-lxp-commerce-refund-modal__actions,
	.learning-templates-lxp-report-purge-modal__actions
) button:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.cft-lxp-surface .button.button-primary,
.cft-lxp-surface button.button-primary,
.cft-lxp-surface a.button.button-primary {
	background: var(--cft-control-navy);
	border-color: var(--cft-control-navy);
	color: #fff;
	border-radius: 8px;
}

.cft-lxp-surface .button.button-primary:hover,
.cft-lxp-surface .button.button-primary:focus {
	background: var(--cft-navy-600);
	border-color: var(--cft-navy-600);
	color: #fff;
}

.cft-lxp-surface .learning-templates-lxp-commerce,
.cft-lxp-surface .learning-templates-lxp-form,
.cft-lxp-surface .learning-templates-lxp-catalogue {
	background: var(--cft-surface);
	border-radius: var(--cft-radius);
}

.cft-lxp-surface h1,
.cft-lxp-surface h2,
.cft-lxp-surface h3 {
	color: var(--cft-control-navy);
}

.cft-lxp-surface input[type="text"],
.cft-lxp-surface input[type="email"],
.cft-lxp-surface input[type="password"],
.cft-lxp-surface input[type="number"],
.cft-lxp-surface select,
.cft-lxp-surface textarea {
	border-radius: 8px;
	border-color: var(--cft-border-strong);
}

/*
 * Curriculum pathway tree (front-end): theme / Elementor list padding and float
 * rules stair-step nested learning objects and crush the last node. Mirror the
 * admin pathway-builder resets so the tree stays compact and readable.
 */
body.cft-lms-skin .learning-templates-lxp-curriculum-tree-wrap .learning-templates-lxp-tree-form ul,
body.cft-lms-skin .learning-templates-lxp-curriculum-tree-wrap ul.learning-templates-lxp-curriculum-tree-chain,
body.cft-lms-skin .learning-templates-lxp-curriculum-tree-wrap ul.learning-templates-lxp-curriculum-tree-branches {
	padding-inline-start: 0 !important;
	padding-left: 0 !important;
	margin-left: 0 !important;
	margin-inline-start: 0 !important;
	list-style: none !important;
}

body.cft-lms-skin .learning-templates-lxp-curriculum-tree-wrap ul.learning-templates-lxp-curriculum-tree-chain li {
	float: none !important;
	display: block !important;
	margin-left: auto !important;
	margin-right: auto !important;
	width: auto !important;
	max-width: none !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	padding-inline: 0 !important;
}

body.cft-lms-skin .learning-templates-lxp-curriculum-tree-wrap ul.learning-templates-lxp-curriculum-tree-chain .learning-templates-lxp-curriculum-tree-node {
	min-width: 8rem;
	max-width: 260px;
	width: auto;
}

/*
 * Learner player: curriculum post content often uses alignfull columns around the
 * Curriculum Tree. Those break out of the content pane and paint over the outline.
 */
body.cft-lms-skin .learning-templates-lxp-learner-player__main .alignfull,
body.cft-lms-skin .learning-templates-lxp-learner-player__main .alignwide,
body.cft-lms-skin .learning-templates-lxp-learner-player__content-column .alignfull,
body.cft-lms-skin .learning-templates-lxp-learner-player__content-column .alignwide,
body.cft-lms-skin .learning-templates-lxp-learner-player__main .wp-block-columns.alignfull,
body.cft-lms-skin .learning-templates-lxp-learner-player__main .wp-block-columns.alignwide {
	margin: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	margin-inline: 0 !important;
	margin-inline-start: 0 !important;
	margin-inline-end: 0 !important;
	padding-inline: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
	left: auto !important;
	right: auto !important;
	inset-inline: auto !important;
	transform: none !important;
	position: relative !important;
}

body.cft-lms-skin .learning-templates-lxp-learner-player__main {
	overflow-x: auto;
	display: flow-root;
}

body.cft-lms-skin .learning-templates-lxp-learner-player__content-column {
	overflow-x: clip;
	min-width: 0;
}