/**
 * ==========================================================
 * RAGO ACCOUNT
 * Google Login Module
 * ==========================================================
 *
 * Google Login UI
 *
 * ==========================================================
 */


/*============================================================
GOOGLE LOGIN
============================================================*/

.rago-google-login{

	display:flex;

	align-items:center;

	justify-content:center;

	width:100%;

	padding:30px 20px;

	box-sizing:border-box;

}


/*============================================================
CARD
============================================================*/

.rago-google-login-card{

	width:100%;

	max-width:420px;

	padding:30px;

	box-sizing:border-box;

	border-radius:20px;

	border:1px solid rgba(
		255,
		255,
		255,
		.08
	);

	background:

	linear-gradient(
		180deg,
		rgba(255,255,255,.05),
		rgba(255,255,255,.02)
	);

	box-shadow:

	0 18px 45px
	rgba(0,0,0,.25);

}


/*============================================================
HEADER
============================================================*/

.rago-google-login-header{

	text-align:center;

	margin-bottom:24px;

}


.rago-google-login-header h2{

	margin:0;

	color:#ffffff;

	font-size:26px;

	font-weight:700;

	line-height:1.2;

}


.rago-google-login-header p{

	margin:8px 0 0;

	color:#8ea0b5;

	font-size:13px;

	line-height:1.5;

}


/*============================================================
GOOGLE BUTTON
============================================================*/

.rago-google-login-button{

	display:flex;

	align-items:center;

	justify-content:center;

	gap:12px;

	width:100%;

	min-height:52px;

	padding:0 18px;

	border:1px solid rgba(
		255,
		255,
		255,
		.12
	);

	border-radius:12px;

	background:#ffffff;

	color:#202124;

	font-size:14px;

	font-weight:600;

	cursor:pointer;

	transition:

		transform .25s ease,

		box-shadow .25s ease,

		background .25s ease;

	box-sizing:border-box;

}


/*============================================================
GOOGLE BUTTON HOVER
============================================================*/

.rago-google-login-button:hover{

	transform:translateY(-1px);

	box-shadow:

	0 8px 20px
	rgba(0,0,0,.20);

	background:#f8f9fa;

}


/*============================================================
GOOGLE BUTTON ACTIVE
============================================================*/

.rago-google-login-button:active{

	transform:translateY(0);

}


/*============================================================
GOOGLE ICON
============================================================*/

.rago-google-login-icon{

	display:flex;

	align-items:center;

	justify-content:center;

	width:20px;

	height:20px;

	flex-shrink:0;

}


.rago-google-login-icon svg{

	display:block;

	width:20px;

	height:20px;

}


/*============================================================
BUTTON TEXT
============================================================*/

.rago-google-login-text{

	display:block;

	white-space:nowrap;

}


/*============================================================
LOADING
============================================================*/

.rago-google-login-button.is-loading{

	cursor:wait;

	opacity:.75;

}


.rago-google-login-button.is-loading:hover{

	transform:none;

	box-shadow:none;

}


/*============================================================
MESSAGE
============================================================*/

.rago-google-login-message{

	margin-top:16px;

	color:#8ea0b5;

	font-size:12px;

	line-height:1.5;

	text-align:center;

}


/*============================================================
MOBILE
============================================================*/

@media (max-width:576px){

	.rago-google-login{

		padding:

			20px 14px;

	}


	.rago-google-login-card{

		padding:22px 16px;

		border-radius:16px;

	}


	.rago-google-login-header{

		margin-bottom:20px;

	}


	.rago-google-login-header h2{

		font-size:22px;

	}


	.rago-google-login-button{

		min-height:50px;

		font-size:13px;

	}

}


/*============================================================
VERY SMALL MOBILE
============================================================*/

@media (max-width:380px){

	.rago-google-login{

		padding:

			16px 10px;

	}


	.rago-google-login-card{

		padding:18px 12px;

	}


	.rago-google-login-button{

		min-height:48px;

		padding:0 12px;

	}

}












/* ==========================================================
   RAGO GOOGLE LOGIN
   Hidden by default
   ========================================================== */

#rago-google-login {
	display: none !important;
}


/* Visible only when explicitly opened */

#rago-google-login.is-open {
	display: flex !important;
}