/**
 * ==========================================================
 * RAGO ACCOUNT
 * QR Login Module
 * ==========================================================
 */


/*
|--------------------------------------------------------------------------
| Desktop QR Login Modal
|--------------------------------------------------------------------------
*/

.rago-qr-login-modal {

	position: fixed;

	inset: 0;

	z-index: 999999;

	display: flex;

	align-items: center;

	justify-content: center;

}


.rago-qr-login-modal[hidden] {

	display: none;

}


/*
|--------------------------------------------------------------------------
| Overlay
|--------------------------------------------------------------------------
*/

.rago-qr-login-overlay {

	position: absolute;

	inset: 0;

	background: rgba(0, 0, 0, 0.65);

}


/*
|--------------------------------------------------------------------------
| Window
|--------------------------------------------------------------------------
*/

.rago-qr-login-window {

	position: relative;

	z-index: 2;

	width: min(440px, calc(100% - 32px));

	max-height: calc(100vh - 32px);

	overflow-y: auto;

	background: #ffffff;

	border-radius: 16px;

	padding: 28px;

	box-sizing: border-box;

	box-shadow:
		0 20px 60px rgba(0, 0, 0, 0.25);

	text-align: center;

}


/*
|--------------------------------------------------------------------------
| Close
|--------------------------------------------------------------------------
*/

.rago-qr-login-close {

	position: absolute;

	top: 12px;

	right: 14px;

	width: 36px;

	height: 36px;

	border: 0;

	background: transparent;

	font-size: 28px;

	line-height: 1;

	cursor: pointer;

	color: #555;

}


.rago-qr-login-close:hover {

	color: #000;

}


/*
|--------------------------------------------------------------------------
| Header
|--------------------------------------------------------------------------
*/

.rago-qr-login-header {

	margin-bottom: 20px;

}


.rago-qr-login-header h2 {

	margin: 0 0 8px;

	font-size: 24px;

	line-height: 1.3;

}


.rago-qr-login-header p {

	margin: 0;

	color: #666;

	font-size: 14px;

}


/*
|--------------------------------------------------------------------------
| Back
|--------------------------------------------------------------------------
*/

.rago-qr-login-back {

	display: block;

	margin: 0 auto 14px;

	padding: 0;

	border: 0;

	background: transparent;

	font-size: 14px;

	cursor: pointer;

	color: #555;

}


.rago-qr-login-back:hover {

	color: #000;

}


/*
|--------------------------------------------------------------------------
| QR Wrapper
|--------------------------------------------------------------------------
*/

.rago-qr-login-code-wrapper {

	display: flex;

	align-items: center;

	justify-content: center;

	margin: 20px 0;

}


/*
|--------------------------------------------------------------------------
| QR Code
|--------------------------------------------------------------------------
*/

.rago-qr-login-code {

	width: 220px;

	height: 220px;

	display: flex;

	align-items: center;

	justify-content: center;

	background: #ffffff;

	border: 1px solid #e5e5e5;

	border-radius: 10px;

	box-sizing: border-box;

}


/*
|--------------------------------------------------------------------------
| QR Loading
|--------------------------------------------------------------------------
*/

.rago-qr-login-loading {

	font-size: 14px;

	color: #777;

	padding: 20px;

}


/*
|--------------------------------------------------------------------------
| QR Error
|--------------------------------------------------------------------------
*/

.rago-qr-login-error {

	font-size: 14px;

	color: #b42318;

	padding: 20px;

}


/*
|--------------------------------------------------------------------------
| Instructions
|--------------------------------------------------------------------------
*/

.rago-qr-login-instructions {

	margin: 18px 0;

	color: #555;

	font-size: 14px;

	line-height: 1.6;

}


.rago-qr-login-instructions p {

	margin: 6px 0;

}


/*
|--------------------------------------------------------------------------
| Status
|--------------------------------------------------------------------------
*/

.rago-qr-login-status {

	margin: 18px 0 10px;

	padding: 12px 14px;

	background: #f5f5f5;

	border-radius: 8px;

	font-size: 14px;

	color: #444;

}


/*
|--------------------------------------------------------------------------
| Expiry
|--------------------------------------------------------------------------
*/

.rago-qr-login-expiry {

	margin: 8px 0 18px;

	font-size: 13px;

	color: #777;

}


/*
|--------------------------------------------------------------------------
| Cancel
|--------------------------------------------------------------------------
*/

.rago-qr-login-cancel {

	width: 100%;

	padding: 12px 18px;

	border: 1px solid #ddd;

	border-radius: 8px;

	background: #fff;

	color: #333;

	font-size: 14px;

	cursor: pointer;

}


.rago-qr-login-cancel:hover {

	background: #f5f5f5;

}


/*
|--------------------------------------------------------------------------
| Mobile QR Login Page
|--------------------------------------------------------------------------
*/

.rago-qr-mobile-login {

	min-height: 100vh;

	display: flex;

	align-items: center;

	justify-content: center;

	padding: 20px;

	box-sizing: border-box;

	background: #f5f5f5;

}


/*
|--------------------------------------------------------------------------
| Mobile Window
|--------------------------------------------------------------------------
*/

.rago-qr-mobile-login-window {

	width: min(440px, 100%);

	background: #ffffff;

	border-radius: 16px;

	padding: 28px 24px;

	box-sizing: border-box;

	box-shadow:
		0 10px 40px rgba(0, 0, 0, 0.12);

	text-align: center;

}


/*
|--------------------------------------------------------------------------
| Mobile Header
|--------------------------------------------------------------------------
*/

.rago-qr-mobile-login-header {

	margin-bottom: 24px;

}


.rago-qr-mobile-login-header h2 {

	margin: 0 0 8px;

	font-size: 25px;

	line-height: 1.3;

}


.rago-qr-mobile-login-header p {

	margin: 0;

	color: #666;

	font-size: 14px;

	line-height: 1.5;

}


/*
|--------------------------------------------------------------------------
| Security Box
|--------------------------------------------------------------------------
*/

.rago-qr-mobile-login-security {

	margin: 20px 0;

	padding: 18px;

	background: #f7f7f7;

	border-radius: 12px;

}


.rago-qr-mobile-login-icon {

	font-size: 38px;

	margin-bottom: 10px;

}


.rago-qr-mobile-login-security p {

	margin: 0;

	color: #555;

	font-size: 14px;

	line-height: 1.6;

}


/*
|--------------------------------------------------------------------------
| Mobile Message
|--------------------------------------------------------------------------
*/

.rago-qr-mobile-login-form-message {

	min-height: 22px;

	margin: 14px 0;

	font-size: 14px;

	color: #555;

	line-height: 1.5;

}


/*
|--------------------------------------------------------------------------
| Approve Button
|--------------------------------------------------------------------------
*/

.rago-qr-mobile-login-approve {

	width: 100%;

	padding: 14px 20px;

	border: 0;

	border-radius: 9px;

	background: #111;

	color: #fff;

	font-size: 15px;

	font-weight: 600;

	cursor: pointer;

}


.rago-qr-mobile-login-approve:hover {

	opacity: 0.9;

}


.rago-qr-mobile-login-approve:disabled {

	opacity: 0.6;

	cursor: not-allowed;

}


/*
|--------------------------------------------------------------------------
| Cancel Button
|--------------------------------------------------------------------------
*/

.rago-qr-mobile-login-cancel {

	width: 100%;

	margin-top: 10px;

	padding: 12px 18px;

	border: 0;

	background: transparent;

	color: #666;

	font-size: 14px;

	cursor: pointer;

}


.rago-qr-mobile-login-cancel:hover {

	color: #111;

}


/*
|--------------------------------------------------------------------------
| Invalid / Expired
|--------------------------------------------------------------------------
*/

.rago-qr-mobile-login-message {

	margin-top: 15px;

	color: #666;

	font-size: 14px;

	line-height: 1.6;

}


/*
|--------------------------------------------------------------------------
| Responsive
|--------------------------------------------------------------------------
*/

@media (max-width: 480px) {

	.rago-qr-login-window {

		width: calc(100% - 20px);

		padding: 24px 18px;

		border-radius: 14px;

	}


	.rago-qr-login-code {

		width: 200px;

		height: 200px;

	}


	.rago-qr-mobile-login {

		padding: 12px;

	}


	.rago-qr-mobile-login-window {

		padding: 24px 18px;

		border-radius: 14px;

	}

}