// menu.scss
// Navs
// --------------------------------------------------
@import "vars/menu.vars";
/*
* NAVIGATION
*/
##{$app-brand-prefix}-megamenu {
    font-family: $megamenu-font-family;
    border-top: $main-border;
    @include container-layout-variant($megamenu-color, $megamenu-bg);    
	.#{$app-brand-prefix}-colorbox{
		display: none !important;
	}
	.navbar{
		background: $megamenu-bg;
		border: 0;
		margin: 0;
		padding: 0;
		@include rounded-corners(0);
	}
	.navbar-collapse{padding: 0;}
	/* menu level 1 */
	.navbar-nav{
    	@include rtl-float-left();
		> li {
			@include rtl-float-left();	
			&.aligned-fullwidth {
				position: static;
				> .dropdown-menu  {
					width: 100%!important;
				}
			}
			&.aligned-right {
				.dropdown-menu  {
					right: 0;
					left: auto;
				}
			}
			&.aligned-left {
				.dropdown-menu  {
					left: 0;
					right: auto;
				}
			}
			&.aligned-center {
				.dropdown-menu  {
					left: 50%;
					@include translate(-50%, 0);
				}
			}
			> a{
				padding: $megamenu-parent-padding;				
				font-size: $megamenu-parent-font-size;
				text-transform:  $megamenu-parent-text-transform;		
				color: $megamenu-link-color;
				background-color: transparent;
				font-weight: $megamenu-font-weight;
				@include transition(all 350ms ease-out);
				&:hover,&:focus,&:active{					
					color: $megamenu-link-hover-color;				
					background-color: $megamenu-link-bg-hover-color;
				}
			} 
			&.active,
			&:hover,
			&:focus{
				> a{
					color: $megamenu-link-hover-color;
					background-color: $megamenu-link-bg-hover-color;
				}
			}
			> .caret{
				position: relative;
				color:$megamenu-link-color;
				margin-left: 5px;
			}	
			&:hover > .caret, &:active > .caret{
				color: $megamenu-link-hover-color;
			}
			&:first-child{
				a{
					@include rtl-padding(22px,25px,22px,0);
				}
			}
			&.home{
				.menu-icon{
					width: 60px;
					height: 48px;
					display: inline-block;
					.menu-title{
						text-indent: -9999px;
						display: inline-block;
					}
				}
				.caret{
					display: none;
				}
				a{
					@include rtl-padding(6px,25px,5px,0);
				}
			}
		} 		
	}
	/* level 2 */
	.dropdown-menu{			
		top: 100%;	
		left: -9999px;	
		height: auto;								
		font-weight: 300;		
		color: $megamenu-sub-text-color;	
		border: $megamenu-sub-border;
		min-width: $megamenu-sub-min-width;
		padding: $megamenu-sub-padding;
		background-color: $megamenu-sub-bg-color;	
		font-family: $megamenu-link-font-family;						
		@include rounded-corners($megamenu-sub-radius);							
		@include box-shadow($megamenu-sub-shadow);
		@include transition(opacity 0.3s linear 0s);			
	    li{
	    	line-height: $line-height-computed + 5;
	    	padding: 3px 0;
		    a{    
		    	color:$megamenu-sub-link-color;
			   	padding: 0;
			   	font-weight: 400;
			   	font-size: 13px;
			   	line-height: $line-height-computed + 5;			   	
			   	&:hover{
			   		background-color: transparent;
			   		color: $megamenu-sub-link-hover-color;			   		
			   		.fa{
			   			color: $megamenu-sub-link-hover-color;	   			
			   		}
			   	}
		    }		    
	    }		
		.menu-title{
			margin-bottom: 10px;
			font-size: $megamenu-parent-font-size;
			font-family: $megamenu-font-family;
			text-transform: $megamenu-parent-text-transform;
			color: $theme-color-secondary;
			font-weight: 700;
			a{
				color: $theme-color-secondary;
				&:hover{
					color: $theme-color-default;
				}
			}
		}
		a > .menu-title{
			text-transform: none;
			font-weight: 400;
			color: $megamenu-sub-text-color;
			font-size: $font-size-base;
			font-family: $megamenu-link-font-family;
			&:hover{
				color: $megamenu-sub-link-hover-color;
			}
		}
	}
	.dropdown{		
		&:hover{
			> .dropdown-menu{						
    			display: block;
    			@include rtl-left(0px);								 		
			}
			> a{		
			color: $megamenu-link-hover-color;
				.fa{
					color: $megamenu-link-hover-color;
				}									
			}
		}		
	}
	/* level > 3 */
	.dropdown-submenu{
		position: relative;
		.dropdown-menu{						
			top: 0;		
			@include rtl-right(-100%);				
			left: auto;						
			position: absolute;
		}
		&:hover{
			> .dropdown-menu{	 
				display: block;	
			    top: 0;											    									      			
			}
		}
	}
	.mega-group {		
		& > .dropdown-toggle {			
			border: 0;	
			display: block;			
			letter-spacing: 3px;				
			text-transform: uppercase;					
			font-family: $megamenu-heading-title-font-family;	
			color: $megamenu-heading-color;			
			.fa{
				color: $white;
			}
		}	
	} 

	.megamenu .cols1{
		min-width: 200px;
	}
	.megamenu .cols2{
		min-width: 500px;
	}
	.megamenu .cols3{
		min-width: 740px;
	}
	// product
	.product-block{

	}
	// manufacture
	.manu-logo{
		img{
			border: $main-border;
			margin-bottom: 10px;
			margin-right: 10px;
		}
	}
	.widget-subcategories {
	    margin-bottom: 15px;
	}
}

/* Product for menu */

.#{$app-brand-prefix}-widget{
	.product-block{
		border: none;
		margin: 0;
		@include rtl-text-align-left();
		.image{ 
			@include rtl-float-left(); 
			@include rtl-margin(0px, 10px, 10px, 0px);
		}
		.product-meta{
			overflow: hidden;
			zoom: 1;
			position: inherit;
			top: inherit;
		}
		.name{
			margin-top: 0;
		}
		.price{
			
		}
		.image{
			border: none;
			.product_img_link:before{display: none;}
		}
	}
	.widget-html{
		p{
			font-size: 13px;
		}
	}
}

/*
 *
 * Vertical menu
 */
##{$app-brand-prefix}-verticalmenu{
	background: #e47277;
    @include rounded-corners(3px);
    .title_block{
    	margin: 0;
    	color: $white;
    	@include rtl-padding(40px, 20px, 20px, 40px);
    	font-family: 'Pacifico';
    	text-transform: none;
    	font-size: 36px;
    }
}

div.verticalmenu{	
	z-index: 100;
	.navbar-collapse, .navbar-vertical {
		margin:0;
		padding:0
	}
	.navbar-nav{			
		position: static;		
		@include clearfloat();	
		padding-bottom: 40px;					
		> li{			
			@include size(100%,auto);
			position: static;																		
			> a{
				display: block;
				color: $vertical-menu-color;
				font-size: $vertical-menu-font-size;				
				padding: $vertical-menu-link-padding;			
				&:before {
				    color: $white;
				    font-size: 10px;
				    top: 9px;
				    content: "\f192";
				    font-family: $font-icon;
				    display: inline-block;
				    position: absolute;
				    @include rtl-left(40px);
				    line-height: 21px;
				    font-style: normal;
				    font-weight: normal;
				}				
			}
			.caret{
				display: none;
			}
			@media (max-width: $screen-sm-max - 1) { // max 990px
				.caret{
					display: block;
				    position: relative;
				    top: -25px;
				    cursor: pointer;
				    border: none;
				    width: 25px;
				    height: 30px;
				    text-align: center;
				    @include rtl-float-right();
				    @include rtl-right(0);
					&:before{
						content: "\f0d9";
						font-family: $font-icon;
						color: #fff;
						font-size: 11px;
						font-weight: normal;
					}
				}
			}
			.dropdown-submenu .caret{
				top: 0;
			}

			&.last a ,&:last-child a{
				border: 0;
			}

			// Hover Effect
			&:hover{
				> a{					
					color: $megamenu-sub-link-hover-color;	
					background: $white;
					&:before{
						color: $megamenu-sub-link-hover-color;
					}	
					&:hover,&:focus{				
						color: $vertical-menu-link-hover-color;
						background: $white;
						border-color: $border-color;
					}	
					.menu-title{
						color: $vertical-menu-color;
					}	
				}
				.caret{
					color: $theme-color-default;
					&:before{
						color: $theme-color-default;
					}
				}
			}
			&.open{
				> a{					
					color: $megamenu-sub-link-hover-color;	
					background: $white;	
					&:hover,&:focus{				
						color: $vertical-menu-link-hover-color;
						background: $white;
						border-color: $border-color;
					}		
				}
				.caret{
					color: $theme-color-default;
					&:before{
						color: $theme-color-default;
						top: -23px;
						content: "\f0d7";
					}
				}
			}
			.parent{
				position: relative;
				> .dropdown-toggle{
					text-transform: none;					
					font-weight: normal;
					color: $vertical-sub-menu-link-color;
					&:hover{
						color: $theme-color-default;
					}					
				}
			}
			&.parent{
				&.dropdown{
					> a{
						&:after{
							position: absolute;
							content: "\f0d9";
							font-family: $font-icon;
							color: #fff;
							font-size: 11px;
							font-weight: normal;
							right: 12px; 
							top: 12px;
							@media (max-width: $screen-sm-max - 1) { // max 990px
								display: none;
							}
						}
					}
					&:hover{
						> a{
							&:after{
								color: $theme-color-default;
							}
						}
					}
				}
			}
		}
	}
	ul{
		li{
			a{
				.menu-icon{
					display: block;		
					@include rtl-background-position-left (center);			
					span{
						display: block;
						@include rtl-margin-left(35px);
					}
					.menu-desc{
						display: none;  
					}
				}
				.menu-title{
					display: block;
					color: $vertical-menu-link;
				}	
				.sub-title{
					font-size: $vertical-menu-font-size; 	
				}
				&:hover,&:focus{
					.menu-title{
						color: $vertical-menu-link-hover-color;
					}					
					color: $vertical-menu-link-hover-color;
					background: $white;
				}
			}
		}
	}	
	.dropdown-menu{					
		left: -9999px;
		top: -9999px;
		right: auto;
		border: 0;		
		min-height: 100px;	
		height: 100% !important;		
		min-width: $vertical-sub-menu-width;
		padding: $vertical-sub-menu-padding;
		background: $vertical-sub-menu-bg; 												
		// @include opacity(0);
		@include rounded-corners(0);					
		@include box-shadow($vertical-sub-shadow);									
		ul{
			li{
				border: 0;				
				padding: 4px 0;
				line-height: normal;
				list-style: none;
				a{
					color: $vertical-sub-menu-link-color;
					font-size: $vertical-sub-menu-link-font-size;	
					font-weight: 400;
					padding: 0;	
					.menu-title{
						color: $vertical-sub-menu-link-color;
						text-transform: none;
					}
				}
			}
		}
		p{
			line-height: 18px;
			font-size: $vertical-sub-menu-link-font-size;
		}
		.#{$app-brand-prefix}-menu-video{
			width: 100%;
			iframe{
				margin-bottom: $padding-small-horizontal;
			}
		}	
		.dropdown-toggle{
			&:hover{
				color: $vertical-sub-menu-heading-color;
			}
		}	
		.dropdown-toggle{			
			font-weight: bold;
			text-transform: uppercase;					
			line-height: normal;
			color: $vertical-sub-menu-heading-color;
			font-family: $vertical-sub-menu-link-font-family;
			font-size: $vertical-sub-menu-link-font-size;
		}
		.action {
			display: none;
		}
	}
	.widget-heading{
		color:$vertical-sub-menu-heading-color;
		text-transform: uppercase;
		font-weight: 600;
	}	 
}
div.active-hover{		
	ul{		
		> li{
			&:hover{
				> .dropdown-menu{							
					left: 100%;						
					top: -1px;
					@include opacity(1);
					display: block;					
				}
			}
		}
	}
}

/* CANVAS MENU */
#off-canvas-button{
	text-align: right; 
	color: #fff;
	margin: 5px;
	&:hover{
		cursor: pointer;
	}
}
.off-canvas body {
  position: relative;
}

.off-canvas-inactive #page,
.off-canvas-inactive #off-canvas-nav {
  	@include transition(all 500ms ease 0s);
  	@include translate(0, 0);
}

.off-canvas-active > #page,
.off-canvas-active > #off-canvas-nav {
  	@include transition(all 500ms ease 0s);
  	@include translate(234px, 0);
  	display: block;
}

.off-canvas-active {
	#page {
	  	position: fixed;
	  	margin: 0 auto;
	}
	#off-canvas-nav .navbar-nav .open .dropdown-menu {
	  	background: white;
	}
}
#off-canvas-nav {
  	position: absolute;
  	left: 0;
  	display: none;
  	top: 0;
  	width: 0;
  	background: white;
  	z-index: 999;
  	font-family: $font-family-base;
  	.navbar-nav > li {
  		> a{
	  		color: #fff;
	  		&:hover, &:focus{
	  			background: none;
	  		}
	  	}
	  	&.home{
	  		.menu-icon{
	  			background: none !important;
	  		}
	  	}
  	}
	.nav .caret {
	  	float: right;
		width: 10px;
		height: 10px;
		margin-top: 10px;
		display: none;
	}
	.ct_menu a.shop-now {
	  	display: block;
	  	margin: 10px;
	}
	.ct_menu a.shop-now:hover {
	  color: #fff;
	}
	.offcanvas-mainnav {
	  	background-color: $theme-color-default;
	  	position: absolute;
	  	top: 0;
	  	left: -234px;
	  	overflow: hidden;
	  	width: 234px;
	}
	.dropdown-menu{ 
		font-size: 14px;
		position: relative;
		display: inline-block;
		left: 0;
		right: 0;
		top: 0;
		float: none;
		margin: 0;
		@include box-shadow(none);
		width: 100%!important;
		border: 0;
		padding: 10px;
		@include translate(0, 0);
		ul{
			li{
				line-height: 30px;
			}
		}
		
	}
	.dropdown-sub{
		.menu-title {
		    font-weight: 700;
		    margin: 10px 0;
		}
	}
	.navbar-nav{
		margin: 0 !important;
	}
	ul.nav-links{
		@include rtl-padding(3px, 3px, 3px, 7px);
		li{
			line-height: 30px;
		}
	}
	.mega-col {
	    display: block;
	    margin-left: 0;
	    position: relative;
	    width: 100%;
	}
}

@media (min-width: $screen-sm-max) { // max 991px
	// Menu Canvas
	.off-canvas-active > #page,
	.off-canvas-active > #off-canvas-nav{		
  		@include translate(0, 0);
		position: relative !important;
	}
	#off-canvas-button{ 
		display: none !important;
	}
}

// float menubar

.float-vertical {
	position: relative;
	margin-bottom: 0;
	.float-vertical-button{
		padding-top: 20px;
		padding-bottom: 20px;
		@include rtl-padding-left(15px);
		cursor: pointer;
		i{@include rtl-margin-right(10px);}
		.fa-angle-down{@include rtl-margin-right(-20px);}
	}
	> .block_content{
		border: none;
		@include transition(height 0.4s ease 0s);
	}
}
.float-vertical.active{
	> .block_content{
		position:absolute;
		z-index:30;
		height: auto;
		overflow: visible;
		width: 100%;
		border: $main-border;
		@include transition(height 0.4s ease 0s);
	}
} 

// Off canvas
.navbar-collapse.in{
	background: $light-background;
	@include rtl-text-align-left();
	.navbar-nav{
		@include rtl-text-align-left();
		height: auto;
	}
}
@media (max-width: $screen-sm-max - 1) { // max 990px
	//Off-Canvas
	.off-canvas-type {
		text-align: left !important;
		.nav .open {
			a {
				&:hover, a:focus {
					background: transparent; 
				}
			}
		}
		.navbar-toggle {
			margin-left: 0;
		}
		.navbar-header {
			float: none;
		}
		#leo-top-menu {
			background: $white;
			max-height: 100%;
			.navbar-nav {
				margin: 0; 
				float: none;
				width: 100%;
				li{
					&:first-child{
						a{padding: 22px 25px;}
					}
				}
				.caret{
					display: block;
					border: none;
					&:before{
						content: "\f067";
						font-family: $font-icon;
						position: absolute;
						@include rtl-right(10px);
						top: 10px;
						color: #000;
					}
				}
				li.open{
					.caret{
						&:before{
							content: "\f068";
						}
					}
				}
			}
			.dropdown:hover > .dropdown-menu {
				display: none;
			}
			.dropdown.open {
				> .dropdown-menu {
					width: 100% !important;  
					overflow-x: hidden;
				}
				&:hover > .dropdown-menu { 
					display: block;
					@include rtl-left(20px);
				}
			}
			.dropdown-menu > div.dropdown-menu-inner{
				padding: 0 0 20px 0;
			}
			.dropdown-menu ul li a { 
				@include rtl-padding(8px,10px,8px,20px);
			}
		}
		.max-height {
			max-height: 100% !important;
		}
	}
}