/*==============================
MASB AUTH POPUP
==============================*/

.masb-auth-overlay{
	position:fixed;
	inset:0;
	background:rgba(0,0,0,.45);
	backdrop-filter:blur(4px);
	z-index:999999;
	opacity:0;
	visibility:hidden;
	transition:.35s;
}

.masb-auth-overlay.active{
	opacity:1;
	visibility:visible;
}

.masb-auth-popup{
	position:absolute;
	top:0;
	right:-520px;
	width:460px;
	max-width:100%;
	height:100%;
	background:#fff;
	box-shadow:-10px 0 35px rgba(0,0,0,.15);
	transition:.35s;
	padding:35px;
	overflow-y:auto;
}

.masb-auth-overlay.active .masb-auth-popup{
	right:0;
}

.masb-auth-close{
	position:absolute;
	right:20px;
	top:18px;
	border:none;
	background:none;
	font-size:34px;
	cursor:pointer;
	line-height:1;
}

.masb-auth-header h2{
	margin:0;
	font-size:34px;
	font-weight:700;
	color:#111;
}

.masb-auth-header p{
	margin:10px 0 35px;
	color:#777;
}

.masb-auth-tabs{
	display:flex;
	gap:15px;
	margin-bottom:30px;
}

.masb-auth-tabs button{
	flex:1;
	height:48px;
	border:none;
	border-radius:8px;
	background:#f4f4f4;
	font-weight:600;
	cursor:pointer;
}

.masb-auth-tabs button.active{
	background:#ef3b36;
	color:#fff;
}

@media(max-width:768px){

	.masb-auth-popup{
		width:100%;
	}

}
/*==============================
PHONE LOGIN
==============================*/

.masb-field{
	margin-bottom:20px;
}

.masb-phone-group,
.masb-register-phone-group{
	display:flex;
	align-items:center;
	width:100%;
	height:56px;
	border:1px solid #ddd;
	border-radius:10px;
	overflow:hidden;
	background:#fff;
}

.masb-country-code{
	display:flex;
	align-items:center;
	justify-content:center;
	width:110px;
	height:100%;
	border-right:1px solid #ddd;
	background:#f7f7f7;
	font-weight:600;
	flex-shrink:0;
}

.masb-phone-group input,
.masb-register-phone-group input{
	flex:1;
	height:100%;
	border:none;
	outline:none;
	padding:0 16px;
	font-size:15px;
	background:#fff;
}

.masb-phone-group{
	display:flex;
	border:1px solid #ddd;
	border-radius:10px;
	overflow:hidden;
}

.masb-country-code{
	background:#f5f5f5;
	padding:0 16px;
	display:flex;
	align-items:center;
	font-weight:600;
	white-space:nowrap;
	border-right:1px solid #ddd;
}

.masb-phone-group input{
	flex:1;
	border:none;
	outline:none;
	height:52px;
	padding:0 15px;
	font-size:15px;
}

.masb-field input[type="password"]{
	width:100%;
	height:52px;
	border:1px solid #ddd;
	border-radius:10px;
	padding:0 15px;
	font-size:15px;
}

.masb-auth-row{
	display:flex;
	justify-content:space-between;
	align-items:center;
	margin-bottom:22px;
	font-size:14px;
}

.masb-auth-row a{
	text-decoration:none;
	color:#ef3b36;
	font-weight:600;
}

.masb-login-btn{
	width:100%;
	height:54px;
	border:none;
	border-radius:10px;
	background:#ef3b36;
	color:#fff;
	font-size:16px;
	font-weight:700;
	cursor:pointer;
}
/*==============================
LOGIN SWITCH
==============================*/

.masb-field-head{
	display:flex;
	justify-content:space-between;
	align-items:center;
	margin-bottom:8px;
}

.masb-field-head label{
	margin:0;
	font-size:14px;
	font-weight:600;
	color:#333;
}

.masb-toggle-login{
	text-decoration:none;
	font-size:13px;
	font-weight:600;
	color:#ef3b36;
	cursor:pointer;
}

.masb-toggle-login:hover{
	text-decoration:underline;
}

.masb-email-login{
	display:none;
}

.masb-email-login input{
	width:100%;
	height:52px;
	border:1px solid #ddd;
	border-radius:10px;
	padding:0 15px;
	font-size:15px;
	outline:none;
}
/*==============================
TOP RIGHT
==============================*/

.top-right{
	display:flex;
	align-items:center;
	gap:22px;
}

.top-right a{
	position:relative;
	display:flex;
	align-items:center;
	gap:6px;
	text-decoration:none;
	color:#fff;
	font-size:14px;
	font-weight:500;
	transition:.25s;
}

.top-right a:hover{
	opacity:.85;
}

.masb-notification-trigger i{
	font-size:16px;
}

.masb-notification-count{
	position:absolute;
	top:-7px;
	right:-10px;
	min-width:18px;
	height:18px;
	padding:0 5px;
	border-radius:50px;
	background:#ffffff;
	color:#ef3b36;
	font-size:11px;
	font-weight:700;
	display:flex;
	align-items:center;
	justify-content:center;
}
/*==============================
SOCIAL LOGIN ICON
==============================*/

.masb-social-wrap{
	display:flex;
	justify-content:center;
	align-items:center;
	gap:18px;
	margin:22px 0;
}

.masb-social-icon{
	width:52px;
	height:52px;
	border:1px solid #e5e5e5;
	border-radius:50%;
	background:#fff;
	display:flex;
	align-items:center;
	justify-content:center;
	cursor:pointer;
	transition:.25s;
	font-size:22px;
}

.masb-social-icon.google{
	color:#DB4437;
}

.masb-social-icon.facebook{
	color:#1877F2;
}

.masb-social-icon:hover{
	transform:translateY(-3px);
	box-shadow:0 10px 25px rgba(0,0,0,.12);
}