//FOOTER ====
.footer{
    height: auto;
    align-items: center;
    display: flex;
    z-index: 1;
    flex-direction: column;
    
	&.fixed{
        width: 100%;
        left: 0;
        bottom: 0;
        z-index: 999;
        position: fixed;
		
        .btn{
            .cart{
                transform: scale(1.5);
            }
        }
    }
    &.transparent{
        background-color: #e5eff5;        
    }
	&.shadow{
		box-shadow: 0px 0px 30px 0px rgba(69, 41, 1, 0.10)!important;
	}
    .form-check{
        &.checkmark{
            padding:0;
            .form-check-label{
                width: 48px;
                height: 48px;
                cursor: pointer;
                border-radius: 30px;
                text-align: center;
                line-height: 45px;
                border: 1px solid #EAEAEA;
            }
            .form-check-input{
                display:none;
            }
            .form-check-input:checked + .form-check-label{
                background-color:#EAEAEA;
                svg{
                    path{
                        fill: var(--primary);
                    }
                }
            }	
        }
    }
}
//Menu style ======

.menubar-area{
	padding: 0;
	position: unset;
	background-color: var(--bg-white)!important;
	box-shadow: 0px 0 30px 0px rgba(2, 81, 53, 0.10);
	height: 60px;
    &.footer-fixed{
		position: fixed !important;
		bottom: 0;
		left: 0;
		z-index: 10;
		width: 100%;
	}
	.toolbar-inner {
        padding-left: 15px;
        padding-right: 15px;
        display: flex;
        max-width: 600px;
        margin-right: auto;
        margin-left: auto;
        align-items: center;
		
		.circle{
			position: relative;
			display: flex;
			align-items: center;
			&:after{
				content: "";
				position: absolute;
				top: 0;
				right: -5px;
				width: 12px;
				height: 12px;
				background-color: #FFA902;
				border: 2px solid var(--primary);
				border-radius: 50%
			}
		}
        .nav-link,
		.menu-toggler{
			position: relative;
            color: var(--title);
			text-align: center;
			width: 25%;
			padding: 0 0;
			font-size: 18px;
			svg{
				width: 24px;
				height: 24px;
				path{
					fill: #7d8fab;
				}
			}
			&.active{
				svg{
					path{
						fill: var(--primary);
					}
				}
			}
			&.item-active{
				width: 55px;
				min-width: 55px;
				height: 55px;
				font-size: 24px;
				color: #fff;
				font-weight: 900;
				background: var(--primary);
				line-height: 45px;
				text-align: center;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 50px;
				svg{
					path{
						fill: #fff;
					}
				}
			}
            .title{
                display: block;
                margin-top: 5px;
                font-weight: 500;
                font-size: 12px;
            }
        }
    }
	.menubar-nav{
		.nav-link{
			padding: 8px 8px 8px;
			color: var(--rgba-primary-7);
			&:after{
				content: "";
				position: absolute;
				top: 50%;
				left: 50%;
				width: 40px;
				height: 40px;
				border-radius: 50%;
				transform: translate(-50%, -50%);
				display: none;
				background: var(--primary);
			}
			span{
				font-size: 12px;
				display: block;
			}
			.cart-badge{
				width: 16px;
				height: 16px;
				background-color: #FF3131;
				position: absolute;
				top: 6px;
				right: 6px;
				font-family: var(--font-family-title);
				font-style: normal;
				color: #fff;
				border-radius: 10px;
				font-size: 10px;
				line-height: 16px;
				text-align: center;
				z-index: 1;
			}
			i{
				font-size: 18px;
				height: 45px;
				width: 45px;
				margin: 0 auto;
				color: var(--primary);
				opacity: 0.8;
				text-align: center;
				border-radius: 50%;
				z-index: 1;
				position: relative;
				display: flex;
				align-items: center;
				justify-content: center;
				transform: scale(1.1);
				position: relative;
			}
			&.active{
				color: var(--primary);
				i{
					color: #fff;
				}
				&:after{
					display: block;
				}
			}
		}
	}
}


// Footer Fixed Button ==
.footer-fixed-btn{
	position: fixed;
	background-color: var(--body-bg);
	bottom: 60px;
	left: 50%;
	width: 100%;
	max-width: 600px;
	padding: 15px;
	box-shadow: 0px 0px 30px 0px var(--rgba-primary-1);
	z-index: 9;
	transform: translateX(-50%);
}