.lity-hide {
	display: none !important;
}

.lity {
	background-color: rgba(92, 102, 167, 0.1);
}

.lity-wrap {
	background-color: transparent;
}

.lity-container {
	box-shadow: 0 6px 32px 5px rgba(120, 142, 150, 0.16);
	outline: 1px solid var(--cp-gray-300) !important;
	border-radius: 10px;
	background: #fff;
	padding: 25px 50px 40px;
	width: 680px;
	max-width: 90vw;
	overflow-y: auto;
}

.lity-image .lity-container {
	background: #fff;
	padding: 0;
	min-width: auto;
}

.lity-content:after {
	box-shadow: none;
}

.lity-close {
	position: absolute;
	width: 29px;
	height: 29px;
	top: 10px;
	right: 10px;
	background: #fff;
	border: 1px solid var(--cp-gray-300);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--cp-gray-600);
	cursor: pointer;
	padding: 0;
}

.lity-close:hover,
.lity-close:active {
	top: 10px;
	color: var(--cp-gray-600);
	background: #fff;
}

button.lity-close {
	min-width: 29px;
}

.lity-close svg {
	width: 9px;
	height: 9px;
}

.lity-image .lity-close {
	top: -25px;
	right: -25px;
}

.lity .files,
.lity .multiple-urls {
	margin-top: 20px;
	padding-left: 0;
}

.lity li {
	display: flex;
	align-items: center;
	list-style: none;
	line-height: 1em;
	margin-bottom: 20px;
	position: relative;

	&.slide {
		flex-direction: column;
	}
}

/* File module list items */
.files .file-item {
	display: flex;
	align-items: center;
	gap: 12px;
	border: 1px solid var(--cp-gray-300);
	border-radius: 8px;
	padding: 14px 16px;
	margin-bottom: 12px;
}

.files .file-item--uploading {
	opacity: 0.8;
	transition: background 0.3s ease;
}

.files .file-item.deleting {
	opacity: 0.5;
	pointer-events: none;
}

.files .file-item__icon {
	flex-shrink: 0;
	display: flex;
	align-items: center;
}

.files .file-item__icon svg {
	width: 27px;
	height: 27px;
}

.files .file-item__details {
	flex: 1;
	min-width: 0;
}

.files .file-item__name {
	display: block;
	font-size: var(--cp-h5-sb-size);
	line-height: var(--cp-h5-sb-lh);
	font-weight: var(--cp-h5-sb-weight);
	letter-spacing: var(--cp-h5-sb-spacing);
	color: var(--cp-gray-900);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-align: left;
}

/* Download button - pill style matching .url-item__open */
.files .file-item__download {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: var(--cp-btn-sm-size);
	line-height: var(--cp-btn-sm-lh);
	font-weight: var(--cp-btn-weight);
	letter-spacing: var(--cp-btn-spacing);
	background-color: var(--cp-gray-200);
	color: var(--cp-gray-900);
	border-radius: 9999px;
	padding: 6px 18px 6px 17px;
	cursor: pointer;
	transition: background-color 0.15s ease;
	text-decoration: none;
	white-space: nowrap;
}

.files .file-item__download:hover {
	background-color: var(--cp-gray-300);
	color: var(--cp-gray-900);
	text-decoration: none;
}

.files .file-item__download svg {
	width: 0.8rem;
	height: auto;
}

/* Delete button (client uploads only) */
.files .file-item__delete {
	flex-shrink: 0;
	background: transparent;
	border: none;
	cursor: pointer;
	padding: 4px;
	display: flex;
	align-items: center;
}

.files .file-item__delete svg {
	width: 12px;
	height: 15px;
}

.files .file-item__delete:hover svg path {
	stroke: var(--cp-error);
}

.files .file-item__icon .components-spinner {
	width: 27px;
	height: 27px;
	margin: 0;
}

/* Image slider file download link (legacy styles) */
.lity .files li a.slide-download {
	border: 1px solid #dde7ea;
	color: #8594a3;
	display: block;
	line-height: 1em;
	padding: 18px 17px 18px 22px;
}

.lity .files li a.slide-download:hover {
	border-color: var(--wp--preset--color--leco-cp-secondary);
}

/* URL module list items */
.multiple-urls .url-item {
	display: flex;
	align-items: center;
	gap: 12px;
	border: 1px solid var(--cp-gray-300);
	border-radius: 8px;
	padding: 14px 16px;
	margin-bottom: 12px;
}

.multiple-urls .url-item__icon {
	flex-shrink: 0;
	display: flex;
	align-items: center;
}

.multiple-urls .url-item__icon svg {
	width: 23px;
	height: 14px;
}

.multiple-urls .url-item__details {
	flex: 1;
	min-width: 0;
}

.multiple-urls .url-item__title {
	display: block;
	font-size: var(--cp-h5-sb-size);
	line-height: var(--cp-h5-sb-lh);
	font-weight: var(--cp-h5-sb-weight);
	letter-spacing: var(--cp-h5-sb-spacing);
	color: var(--cp-gray-900);
}

.multiple-urls .url-item__url {
	display: block;
	font-size: var(--cp-small-size);
	line-height: var(--cp-small-lh);
	color: var(--cp-gray-600);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.multiple-urls .url-item__open {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: var(--cp-btn-sm-size);
	line-height: var(--cp-btn-sm-lh);
	font-weight: var(--cp-btn-weight);
	letter-spacing: var(--cp-btn-spacing);
	background-color: var(--cp-gray-200);
	color: var(--cp-gray-900);
	border-radius: 9999px;
	padding: 6px 18px 6px 17px;
	cursor: pointer;
	transition: background-color 0.15s ease;
	text-decoration: none;
	white-space: nowrap;
}

.multiple-urls .url-item__open:hover {
	background-color: var(--cp-gray-300);
	color: var(--cp-gray-900);
	text-decoration: none;
}

.multiple-urls .url-item__open svg {
	width: 0.8rem;
	height: auto;
}

.lity-content .files,
.lity-content .multiple-urls,
.lity-content .client-uploads-container,
.lity-content .image-slider {
	margin-top: 2rem;
}

.lity-content .files,
.lity-content .multiple-urls {
	margin-bottom: 2rem;
}

.lity-content .module_mark_as_complete {
	margin-top: 2rem;
}

.lity-content .module_mark_as_complete,
.lity-content .client-uploads-container {
	text-align: center;
}

.lity-content .choose-files {
	padding: 1.25rem 1rem;
	position: relative;
	background-color: var(--cp-gray-100);
	border: 1px dashed var(--cp-gray-350);
	border-radius: 8px;
	cursor: pointer;
	font-weight: normal;
	line-height: 1.6;
	width: 100%;
	text-align: center;
}

.lity-content .components-drop-zone {
	background-color: #f5fffa;
	border-radius: 2px;
	bottom: 0;
	left: 0;
	opacity: 0;
	position: absolute;
	right: 0;
	top: 0;
	visibility: hidden;
	z-index: 40;
}

.lity-content .components-drop-zone.is-active {
	align-items: center;
	display: flex;
	justify-content: center;
	opacity: 1;
	visibility: visible;
}

.lity-content .choose-files.drag-over,
.lity-content .choose-files:hover {
	border-color: var(--wp--preset--color--leco-cp-primary, #69BDFE);
}

/* Upload error message */
.leco-cp__upload-error {
	display: flex;
	align-items: center;
	gap: 12px;
	background-color: var(--cp-error-light);
	border: 1px solid var(--cp-error-border);
	border-radius: 8px;
	padding: 14px 16px;
	margin-top: 12px;
	color: var(--cp-error-dark);
	font-size: var(--cp-h5-sb-size);
	line-height: var(--cp-h5-sb-lh);
	font-weight: var(--cp-h5-sb-weight);
}

.leco-cp__upload-error p {
	flex: 1;
	margin: 0;
}

.leco-cp__upload-error-dismiss {
	flex-shrink: 0;
	background: transparent;
	border: none;
	cursor: pointer;
	font-size: 18px;
	line-height: 1;
	color: var(--cp-error-dark);
	padding: 0 4px;
}

.leco-cp__upload-error-dismiss:hover {
	opacity: 0.7;
}

.lity-content .choose-files span {
	font-size: var(--cp-h4-size);
	line-height: var(--cp-h4-lh);
	font-weight: var(--cp-h4-weight);
	letter-spacing: var(--cp-h4-spacing);
	color: var(--cp-gray-900);
}

.lity-content .choose-files p.max-upload-size {
	font-size: var(--cp-small-size);
	line-height: var(--cp-small-lh);
	font-weight: 400;
	padding-bottom: 0;
	color: var(--cp-gray-600);
	margin-bottom: 0;
}

.lity-content .choose-files p.allowed-file-types {
	max-width: 584px;
	margin: 0.2rem auto 0;
}

.mark-complete__buttons {
	display: flex;
	justify-content: center;
	gap: 1rem;
	background-color: var(--cp-gray-100);
	margin: 0 -50px -40px;
	padding: 0 50px 40px;
	border-radius: 0 0 10px 10px;
}

.mark-complete__btn-link {
	cursor: pointer;
}

.mark-complete__btn-confirm {
	background-color: var(--wp--preset--color--leco-cp-secondary);
	color: var(--wp--preset--color--leco-cp-secondary-text);
	border: none;
	border-radius: 999px;
	width: 173px;
	padding: 0.625rem 0;
	font-size: var(--cp-h5-size);
	line-height: var(--cp-h5-lh);
	font-weight: var(--cp-btn-weight);
	cursor: pointer;
	text-align: center;
}

.mark-complete__btn-confirm:hover {
	filter: brightness(95%);
}

.mark-complete__btn-cancel {
	background-color: var(--cp-gray-200);
	color: var(--cp-gray-700);
	border: none;
	border-radius: 999px;
	width: 173px;
	padding: 0.625rem 0;
	font-size: var(--cp-h5-size);
	line-height: var(--cp-h5-lh);
	font-weight: var(--cp-btn-weight);
	cursor: pointer;
	text-align: center;
}

.mark-complete__btn-cancel:hover {
	filter: brightness(95%);
}

.iconset {
	display: inline-block;
	margin: 0.2em;
	padding-top: 3px;
	width: 2.25rem;
	height: auto;
}

.iconset svg * {
	stroke: currentColor;
	color: #8594a3;
}

.lity [class^="icon-"] {
	display: block;
	float: right;
	margin-top: -2px;
	margin-right: 5px;
	margin-left: 5px;
}

.lity [class^="icon-"] svg {
	width: 20px;
	height: 20px;
}

.lity [class^="icon-"] .st0 {
	stroke-width: 4px;
}

.lity .icon-download .st0 {
	stroke: currentColor;
	stroke-width: 2px;
}

.module .ico-area {
	display: block;
	line-height: 1;
	font-size: 2.626rem;
	margin: 0 0 0.625rem;
}

.lity .module {
	display: block;
	position: relative;
	font-size: 0.875rem;
	line-height: 1.25;
	text-align: center;
	min-height: auto;
	border-color: #e7eaec;
	color: #8594a3;
}

@media (min-width: 1024px) {
	.lity .module {
		height: calc(100% - 1.25rem);
	}
}

/* Modal header: grey background with tighter spacing */
.lity-content .module {
	border: none;
	border-radius: 10px 10px 0 0;
	text-align: center;
	margin: -25px -50px 0;
	padding: 1.25rem 30px 1.5rem;
	background-color: var(--cp-gray-100);
}

.lity-content .module:hover {
	box-shadow: none;
}

.lity-content .module .ico-area {
	color: var(--cp-gray-600);
	margin-bottom: 0.125rem;
}

.lity-content .module .iconset svg * {
	color: var(--cp-gray-600);
}

.lity-content .module .title {
	font-size: var(--cp-h1-size);
	line-height: var(--cp-h1-lh);
	font-weight: var(--cp-h1-weight);
	letter-spacing: var(--cp-h1-spacing);
	margin-bottom: 0.75rem;
}

.lity-content .module .desc,
.lity-content .module .description {
	display: block;
	font-size: var(--cp-h5-size);
	line-height: var(--cp-h5-lh);
	font-weight: var(--cp-h5-weight);
	letter-spacing: var(--cp-h5-spacing);
	max-width: 500px;
	margin-left: auto;
	margin-right: auto;
}

/* Modal metadata row (due date + file count) */
.lity-content .module .modal-meta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1.5rem;
	margin-top: 20px;
	color: var(--cp-gray-600);
	font-size: var(--cp-small-size);
	line-height: var(--cp-small-lh);
}

.lity-content .module .modal-meta svg {
	width: 11px;
	height: 12px;
}

.lity-content .module .modal-meta svg path {
	fill: var(--cp-gray-600);
}

.lity-content .module .modal-due-date,
.lity-content .module .file-count {
	display: flex;
	align-items: center;
	gap: 6px;
}

/* Mark as complete pill button in modal */
.lity-content .module .modal-complete-btn {
	display: flex;
	justify-content: center;
	margin-top: 1rem;
}

.modal-complete-btn__link {
	background-color: var(--wp--preset--color--leco-cp-secondary);
	color: var(--wp--preset--color--leco-cp-secondary-text);
	border: none;
	border-radius: 999px;
	padding: 0.625rem 2.5rem;
	font-size: var(--cp-h5-size);
	line-height: var(--cp-h5-lh);
	font-weight: var(--cp-btn-weight);
	cursor: pointer;
}

.modal-complete-btn__link:hover {
	filter: brightness(95%);
}

/* Inline confirmation state (replaces button before API call) */
.modal-complete-confirm {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	margin-top: 1rem;
}

.modal-complete-confirm__label {
	font-weight: var(--cp-btn-weight);
	color: var(--cp-gray-900);
	font-size: var(--cp-h5-size);
}

.modal-complete-confirm__yes {
	background-color: var(--wp--preset--color--leco-cp-secondary);
	color: var(--wp--preset--color--leco-cp-secondary-text);
	border: none;
	border-radius: 999px;
	padding: 0.625rem 2rem;
	font-size: var(--cp-h5-size);
	line-height: var(--cp-h5-lh);
	font-weight: var(--cp-btn-weight);
	cursor: pointer;
}

.modal-complete-confirm__yes:hover {
	filter: brightness(95%);
}

.modal-complete-confirm__cancel {
	background-color: var(--cp-gray-200);
	color: var(--cp-gray-700);
	border: none;
	border-radius: 999px;
	padding: 0.625rem 2rem;
	font-size: var(--cp-h5-size);
	line-height: var(--cp-h5-lh);
	font-weight: var(--cp-btn-weight);
	cursor: pointer;
}

.modal-complete-confirm__cancel:hover {
	filter: brightness(95%);
}

/* Completed indicator in modal (replaces button after completion) */
.lity-content .module .modal-completed-indicator {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	margin-top: 1rem;
	color: var(--cp-success);
	font-size: var(--cp-h5-size);
	line-height: var(--cp-h5-lh);
	font-weight: var(--cp-btn-weight);
}

.modal-completed-indicator__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 25px;
	height: 25px;
	border-radius: 50%;
	background-color: var(--cp-success);
}

.modal-completed-indicator__icon svg {
	width: 13px;
	height: auto;
}

/* Empty state when no files/links exist */
/* Module text areas (above/below content in modal) */
.lity-content .module-text {
	padding: 1.5rem 0 0;
	color: var(--cp-gray-900);
	font-size: var(--cp-body-portal-size);
	line-height: var(--cp-body-portal-lh);
}

.lity-content .module-text--below {
	padding-top: 0;
	padding-bottom: 0.5rem;
}

.image-slider-wrapper .module-text--above {
	padding-bottom: 1rem;
}

.image-slider-wrapper .module-text--below {
	padding-top: 1.5rem;
}

.lity-content .module-text p {
	margin: 0 0 1rem;
}

.lity-content .module-text p:last-child {
	margin-bottom: 0;
}

.lity-content .module-text p + ul,
.lity-content .module-text p + ol {
	margin-top: 1.1875rem; /* 19px */
}

.lity-content .module-text h2 {
	font-size: var(--cp-h1-size);
	line-height: var(--cp-h1-lh);
	font-weight: var(--cp-h1-weight);
	letter-spacing: var(--cp-h1-spacing);
	color: var(--cp-gray-900);
	margin-top: 1.75rem;
	margin-bottom: 0;
}

.lity-content .module-text h2:first-child {
	margin-top: 0;
}

.lity-content .module-text h2 + p,
.lity-content .module-text h2 + ul,
.lity-content .module-text h2 + ol {
	margin-top: 0.5rem;
}

.lity-content .module-text h3 {
	font-size: var(--cp-content-h3-size);
	line-height: var(--cp-content-h3-lh);
	font-weight: var(--cp-content-h3-weight);
	letter-spacing: var(--cp-content-h3-spacing);
	color: var(--cp-gray-900);
	margin-top: 1.5625rem; /* 25px */
	margin-bottom: 0;
}

.lity-content .module-text h3:first-child {
	margin-top: 0;
}

.lity-content .module-text h3 + p,
.lity-content .module-text h3 + ul,
.lity-content .module-text h3 + ol {
	margin-top: 0.375rem;
}

.lity-content .module-text h4 {
	font-size: var(--cp-content-h4-size);
	line-height: var(--cp-content-h4-lh);
	font-weight: var(--cp-content-h4-weight);
	letter-spacing: var(--cp-content-h4-spacing);
	color: var(--cp-gray-900);
	margin-top: 1rem;
	margin-bottom: 0;
}

.lity-content .module-text h4:first-child {
	margin-top: 0;
}

.lity-content .module-text h4 + p,
.lity-content .module-text h4 + ul,
.lity-content .module-text h4 + ol {
	margin-top: 0.375rem;
}

.lity-content .module-text ul,
.lity-content .module-text ol {
	list-style: none;
	margin: 0 0 1rem;
	padding-left: 32px;
}

.lity-content .module-text li {
	position: relative;
	margin-bottom: 0.375rem;
	line-height: var(--cp-body-portal-lh);
}

.lity-content .module-text ul li::before {
	content: "";
	position: absolute;
	left: -20px;
	top: 0.6em;
	width: 6px;
	height: 6px;
	background-color: currentColor;
	border-radius: 50%;
}

.lity-content .module-text ol {
	counter-reset: list-counter;
}

.lity-content .module-text ol li {
	counter-increment: list-counter;
}

.lity-content .module-text ol li::before {
	content: counter(list-counter) ".";
	font-weight: 700;
	position: absolute;
	left: -32px;
	width: 24px;
	text-align: right;
}

.lity-content .module-text a {
	color: var(--wp--preset--color--leco-cp-primary);
	font-weight: var(--cp-portal-link-weight);
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--leco-cp-secondary);
	text-decoration-thickness: var(--cp-link-underline-thickness);
	text-underline-offset: var(--cp-link-underline-offset);
	text-decoration-skip-ink: auto;
}

.lity-content .module-text a:hover {
	text-decoration: none;
	color: var(--wp--preset--color--leco-cp-secondary);
}

.lity-content .module-text strong {
	font-weight: 700;
}

.lity-content .module-text em {
	font-style: italic;
}

.lity-content .empty-state {
	padding: 3rem 1rem;
	text-align: center;
	color: var(--cp-gray-600);
	font-size: var(--cp-content-body-size);
	line-height: var(--cp-content-body-lh);
}

.lity-content .empty-state svg {
	display: block;
	margin: 0 auto 1rem;
	width: 167px;
	height: auto;
}

.lity-content .empty-state p {
	max-width: 280px;
	margin: 0 auto;
}