/* Bosla feature chunk: offcanvas — conditional bundle (audit P1-A). */

.bosla-offcanvas-open {
	display: none;
	border: 1px solid var(--bosla-color-border, #e2e5e9);
	background: var(--bosla-color-surface, #fff);
	border-radius: 8px;
	padding: 0.5rem;
	cursor: pointer;
	color: inherit;
}

@media (max-width: 782px) {
	.bosla-offcanvas-open { display: inline-flex; }
}

.bosla-offcanvas {
	position: fixed;
	inset: 0;
	z-index: 100000;
}

.bosla-offcanvas[hidden] { display: none; }

.bosla-offcanvas-backdrop {
	position: absolute;
	inset: 0;
	background: rgb(0 0 0 / 0.45);
}

.bosla-offcanvas-drawer {
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	inline-size: min(20rem, 85vw);
	background: var(--bosla-color-surface, #fff);
	padding: 1.25rem;
	overflow-block: auto;
	box-shadow: 0 0 40px rgb(0 0 0 / 0.25);
	animation: bosla-drawer-in 180ms ease;
}

[dir="rtl"] .bosla-offcanvas-drawer {
	inset-inline-start: auto;
	inset-inline-end: 0;
}

@keyframes bosla-drawer-in {
	from { transform: translateX(-100%); }
	to { transform: translateX(0); }
}

[dir="rtl"] .bosla-offcanvas-drawer {
	animation-name: bosla-drawer-in-rtl;
}

@keyframes bosla-drawer-in-rtl {
	from { transform: translateX(100%); }
	to { transform: translateX(0); }
}

.bosla-offcanvas-close {
	position: absolute;
	inset-block-start: 0.75rem;
	inset-inline-end: 0.75rem;
	border: 0;
	background: none;
	font-size: 1.5rem;
	cursor: pointer;
}

.bosla-offcanvas-list {
	list-style: none;
	margin: 1.5rem 0 0;
	padding: 0;
}

.bosla-offcanvas-list li {
	border-block-end: 1px solid var(--bosla-color-border, #e2e5e9);
}

.bosla-offcanvas-list a {
	display: block;
	padding: 0.8rem 0.25rem;
	text-decoration: none;
	color: inherit;
	font-weight: 600;
}