/* ==========================================================
   CARXIS TOOLKIT
   Mobile Header v1.0
========================================================== */



/* ==========================================================
   Mobile Menu
========================================================== */

.cx-mobile-menu {

	position: fixed;
	top: 0;
	left: 0;

	width: 320px;
	max-width: 90vw;
	height: 100vh;

	background: #ffffff;
	box-shadow: 8px 0 30px rgba(0,0,0,.15);

	transform: translateX(-100%);
	transition: transform .25s ease;
	will-change: transform;

	z-index: 1001;
}


.cx-mobile-menu__inner {
	display: flex;
	flex-direction: column;
	height: 100%;

	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

/* ==========================================================
   Open State
========================================================== */

.cx-mobile-menu.is-open {
	transform: translateX(0);
}

.cx-mobile-overlay.is-open {
	opacity: 1;
	visibility: visible;
}

/* ==========================================================
   Overlay
========================================================== */

.cx-mobile-overlay {

	position: fixed;
	inset: 0;

	background: rgba(0,0,0,.45);

	opacity: 0;
	visibility: hidden;

	transition:
		opacity .25s ease,
		visibility .25s ease;

	z-index: 1000;
}

/* ==========================================================
   Mobile Menu Header
========================================================== */

.cx-mobile-menu__header {
	display: flex;
	align-items: center;
	justify-content: space-between;

	padding: 20px;

	border-bottom: 1px solid #ececec;
}

/* ==========================================================
   Close Button
========================================================== */

.cx-mobile-menu__close {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 40px;
	height: 40px;
	padding: 0;

	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;

	color: #111827;

	cursor: pointer;
	flex-shrink: 0;
}

.cx-mobile-menu__close svg {
	width: 24px;
	height: 24px;

	fill: none;
	stroke: currentColor;
}

/* ==========================================================
   Navigation
========================================================== */


.cx-mobile-menu__navigation {
	padding: 24px 20px;
}

/* ==========================================================
   Actions
========================================================== */

.cx-mobile-menu__actions {
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* ==========================================================
   Footer
========================================================== */

.cx-mobile-menu__footer {
	margin-top: auto;
	padding: 20px;

	border-top: 1px solid #ececec;
}

/* ==========================================================
   Menu Toggle
========================================================== */

.cx-menu-toggle {
	display: none;

	align-items: center;
	justify-content: center;

	width: 40px;
	height: 40px;
	padding: 0;

	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;

	color: #111827;

	cursor: pointer;
}

.cx-menu-toggle__icon {
	display: flex;
	align-items: center;
	justify-content: center;
}

.cx-menu-toggle__icon svg,
.cx-menu-toggle svg,
.cx-mobile-menu__close svg {
	display: block;

	width: 24px;
	height: 24px;

	fill: none;
	stroke: currentColor;
	stroke-width: 2;
}

/* ==========================================================
   Mobile
========================================================== */

@media (max-width: 991px) {

	.cx-menu-toggle {
		display: flex;
	}

	.cx-header__navigation,
	.cx-header__actions {
		display: none;
	}

}

body.cx-mobile-menu-open {
	overflow: hidden;
}