/* Ensure #mobile-menu-pops is visible in Elementor editor */
.elementor-editor-active #mobile-menu-pops {
	display: flex !important;
	transform: translateX(0) !important;
	/* Override off-screen transform */
	position: relative !important;
	/* Adjust positioning for editor */
	width: 100% !important;
	/* Full width for visibility in editor */
	top: 0 !important;
	/* Reset top offset for editor */
	min-height: auto !important;
	/* Allow natural height in editor */
	z-index: 9999 !important;
}

/* Default: Hide mobile menu elements on all devices */
.mobile-menu-toggle, #mobile-menu-pops, .mobile-menu-overlay {
	display: none !important;
}

/* Show and style mobile menu elements on tablet and mobile (max-width: 1024px) */
@media (max-width: 1024px) {
	.mobile-menu-toggle {
		display: block !important;
		z-index: 1002 !important;
		/* Above menu and overlay */
		cursor: pointer;
	}
	
	.hamburger {
		width: 30px;
		height: 20px;
		position: relative;
		display: block !important;
	}
	
	.hamburger::before, .hamburger::after, .hamburger span {
		content: "";
		position: absolute;
		width: 100%;
		height: 3px;
		background: var(--e-global-color-primary);
		transition: all .3s ease !important;
		border-radius: 6px;
	}
	
	.hamburger::before {
		top: 0;
	}
	
	.hamburger span {
		top: 50%;
		transform: translateY(-50%) !important;
	}
	
	.hamburger::after {
		bottom: 0;
	}
	
	.menu-open .hamburger::before {
		transform: translateY(8.5px) rotate(45deg) !important;
	}
	
	.menu-open .hamburger span {
		opacity: 0 !important;
	}
	
	.menu-open .hamburger::after {
		transform: translateY(-8.5px) rotate(-45deg) !important;
	}
	
	#mobile-menu-pops {
		position: fixed;
		top: 0;
		right: 0;
		width: 100%;
		min-height: 100vh;
		/* Adjust for top offset */
		background: #fff;
		transform: translateX(100%) !important;
		/* Hide off-screen to the right */
		transition: transform .3s ease-in-out !important;
		/* Smooth slide-in */
		z-index: 1001 !important;
		/* Above overlay, below toggle */
		display: flex !important;
		flex-direction: column;
	}
	
	#mobile-menu-pops.menu-open {
		transform: translateX(0) !important;
	}
	
	.mobile-menu-overlay {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		background: rgba(7, 65, 99, .31);
		z-index: 1000 !important;
		/* Below menu and toggle */
		opacity: 0;
		visibility: hidden;
		transition: opacity .3s ease, visibility .3s ease !important;
	}
	
	.menu-open.mobile-menu-overlay {
		opacity: 1;
		visibility: visible;
	}
	
	/* Responsive width adjustments */
	@media (max-width: 1024px) {
		#mobile-menu-pops {
			width: 50%;
		}
	}
	
	@media (max-width: 768px) {
		#mobile-menu-pops {
			width: 70%;
		}
	}
	
	@media (max-width: 500px) {
		#mobile-menu-pops {
			width: 100%;
		}
	}
	
	.no-scroll {
		overflow: hidden !important;
		height: 100vh !important;
		/* Lock viewport height */
		
		/* Prevent scrolling on mobile */
		width: 100% !important;
	}
	
	.mobile-menu-header {
		padding: 40px 30px 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.mobile-menu-header img {
		width: 140px;
	}
	
	.mobile-menu-header a {
		display: block;
	}
	
	.mobile-menu-close {
		width: 25px;
		height: 25px;
		position: absolute;
		cursor: pointer;
		top: 30px;
		right: 30px;
	}
	
	.mobile-menu-close::before, .mobile-menu-close::after {
		content: "";
		position: absolute;
		width: 100%;
		height: 3px;
		background: var(--e-global-color-primary);
		border-radius: 6px;
		top: 50%;
		left: 0;
	}
	
	.mobile-menu-close::before {
		transform: rotate(45deg);
	}
	
	.mobile-menu-close::after {
		transform: rotate(-45deg);
	}
	
	.mobile-menu-content {
		flex: 1;
		overflow-y: auto;
		padding: 30px;
	}
	
	.mobile-menu-items {
		list-style: none;
		padding: 0;
		margin: 0;
	}
	
	.sub-menu {
		list-style: none;
		padding: 10px;
		margin: 0;
		display: none;
	}
	
	.sub-menu a {
		font-weight: normal !important;
		font-size: 20px !important;
	}
	
	.mobile-menu-items li {
		margin-bottom: 10px;
	}
	
	.mobile-menu-content a {
		color: var(--e-global-color-primary);
		cursor: pointer;
		text-align: center;
		font-size: 24px;
		font-family: "Proxima Nova", sans-serif;
		font-weight: bold;
		background-color: transparent !important;
		display: flex;
		position: relative;
	}
}

/* Prevent scrolling on html element as well */
html.no-scroll, body.no-scroll {
	overflow: hidden !important;
	height: 100vh !important;
	width: 100% !important;
}