/* Root & layout */
.ls {
	font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
	min-height: 80vh;
	display: grid;
}
.ls__body {
	display: grid;
	grid-template-rows: 1fr auto;
	gap: 12px;
	padding: 10px 12px;
}

/* Stage: white card behind your template content */
.ls__stage {
	background: #ffffff;
	border-radius: 12px;
	padding: 15px;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
	overflow: hidden;
}
.ls__slide {
	display: none;
}
.ls__slide.is-active {
	display: block;
}

/* Toolbar */
.ls__toolbar {
	display: grid;
	grid-template-columns: auto auto 1fr auto auto;
	align-items: center;
	gap: 10px;
	padding: 8px;
	background: #d7efef;
	border: 1px solid #cfe6e6;
	border-radius: 12px;
}
.ls__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	border-radius: 10px;
	border: 1px solid #cfd8dc;
	background: #ffffff;
	cursor: pointer;
	line-height: 1;
}
.ls__btn i {
	pointer-events: none;
}
.ls__btn--prev {
	background: #fff;
}
.ls__btn--next {
	background: #bfe6e7;
	border-color: #a8d8d9;
}
.ls__btn--next:hover {
	filter: brightness(0.98);
}
.ls__counter {
	text-align: right;
	font-weight: 600;
	color: #445;
}
.ls__btn-text {
	font-weight: 600;
}

/* Menu overlay */
.ls__menu {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	display: none;
	z-index: 9999;
}
.ls__menu.is-open {
	display: block;
}
.ls__menu-card {
	position: absolute;
	left: 16px;
	bottom: 72px;
	width: min(420px, 92vw);
	max-height: 70vh;
	overflow: auto;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 10px 26px rgba(0, 0, 0, 0.18);
	border: 1px solid #e6eaee;
}
.ls__menu-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 12px;
	border-bottom: 1px solid #eef1f4;
	font-weight: 700;
}
.ls__menu-close {
	background: #fff;
	border: 1px solid #e3e8ed;
	border-radius: 8px;
	width: 36px;
	height: 36px;
	cursor: pointer;
	font-size: 22px;
}
.ls__menu-list {
	list-style: none;
	margin: 0;
	padding: 8px;
	display: grid;
	gap: 6px;
}
.ls__menu-item {
	width: 100%;
	text-align: left;
	display: flex;
	align-items: center;
	gap: 10px;
	border: 1px solid #e7eaee;
	background: #fafcfd;
	border-radius: 8px;
	padding: 10px;
	cursor: pointer;
}
.ls__menu-item:hover {
	background: #f2f7f7;
}
.ls__menu-ix {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 6px;
	background: #e9f4f4;
	font-weight: 700;
	color: #37696c;
}

/* Editor helpers */
.elementor-editor-active .ls__slide {
	display: block !important;
}
.ls__placeholder {
	padding: 16px;
	border: 1px dashed #cfd8dc;
	border-radius: 8px;
	background: #fafafa;
}

/* Small screens */
@media (max-width: 768px) {
	.ls__toolbar {
		grid-template-columns: repeat(5, auto);
		gap: 6px;
		border-radius: 10px;
	}
	.ls__btn {
		padding: 8px 10px;
	}
	.ls__btn-text {
		display: none;
	} /* keep icons only on small screens */
}