/* Shared auth surface styles served through PHP to avoid stale static CSS caching. */

:root{
	scrollbar-width:none;
	-ms-overflow-style:none;
	--vipify-auth-font-stack:"Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif;
	--vipify-auth-bg:#050505;
	--vipify-auth-panel:#111111;
	--vipify-auth-panel-2:#191919;
	--vipify-auth-frame:#2E2E2E;
	--vipify-auth-frame-soft:rgba(118, 118, 118, 0.24);
	--vipify-auth-text:#F3F0E7;
	--vipify-auth-muted:#A7A7A7;
	--vipify-auth-gold:#6A6A6A;
	--vipify-auth-gold-soft:#949494;
	--vipify-auth-info:#8FC9E8;
	--vipify-auth-success:#8FD86B;
	--vipify-auth-danger:#D45B5B;
}

:root::-webkit-scrollbar{
	display:none;
}

html,
body{
	height:100%;
	width:100%;
	max-width:100%;
	overflow-x:hidden;
}

body{
	font-family:var(--vipify-auth-font-stack);
	color:var(--vipify-auth-text);
	margin:0;
	padding:0;
	background:#000000;
	font-size:18px;
	-webkit-text-size-adjust:100%;
	scrollbar-width:none;
	min-height:100vh;
	position:relative;
}

body::before{
	content:none;
}

div,
p,
img{
	-webkit-touch-callout:none;
	-webkit-user-select:none;
	-khtml-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none;
}

*{
	box-sizing:border-box;
	-webkit-tap-highlight-color:transparent;
	-webkit-user-drag:none;
}

.topLogin{
	width:min(360px, calc(100vw - 24px));
	max-width:100%;
	margin-left:auto !important;
	margin-right:auto !important;
}

.authPageWrap{
	width:min(430px, calc(100vw - 24px));
	max-width:100%;
	margin:0 auto;
	padding:18px 0 34px 0;
	position:relative;
	z-index:1;
}

.authHero{
	padding-top:10px;
	margin-bottom:0;
	text-align:center;
}

.authHero img{
	display:block;
	margin:0 auto;
	width:min(244px, 72vw);
	height:auto;
	filter:drop-shadow(0 10px 24px rgba(0, 0, 0, 0.32));
}

.authTagline{
	margin:0 auto 0 auto;
	width:min(390px, calc(100vw - 32px));
	max-width:100%;
	text-align:center;
}

.authTaglineCopy{
	display:block;
	margin:0 auto 20px auto;
	font-size:18px;
	font-weight:300 !important;
	letter-spacing:.24px;
	line-height:1.25;
	color:#E8E8E8;
	text-rendering:optimizeLegibility;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
}

.authTitle{
	margin:10px auto 8px auto;
	text-align:center;
	font-size:20px;
	color:#FFFFFF;
}

.authSupportText{
	margin:0 auto 18px auto;
	width:min(390px, calc(100vw - 32px));
	max-width:100%;
	text-align:center;
	font-size:15px;
	line-height:1.5;
	color:var(--vipify-auth-muted);
}

.authCard{
	background:
		linear-gradient(180deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0) 24%),
		linear-gradient(180deg, #181818 0%, #0B0B0B 100%);
	border:1px solid var(--vipify-auth-frame);
	border-radius:20px;
	padding:22px 18px 18px 18px;
	box-shadow:
		0 24px 44px rgba(0, 0, 0, 0.45),
		0 0 0 1px rgba(255, 255, 255, 0.04),
		inset 0 1px 0 rgba(255,255,255,0.04);
	position:relative;
	overflow:hidden;
}

.authCard::before{
	content:"";
	position:absolute;
	inset:0;
	background:linear-gradient(135deg, rgba(255, 255, 255, 0.05), transparent 36%, transparent 68%, rgba(143, 201, 232, 0.05));
	pointer-events:none;
	opacity:.55;
}

.login{
	margin:0 auto;
	background:none;
	width:100%;
	max-width:100%;
	border-radius:0;
	padding:0;
}

.login-field{
	position:relative;
	width:100%;
	max-width:100%;
	margin:0 0 12px 0;
}

.login-field-password{
	margin-bottom:0;
}

.login-input,
.login-field input[type="password"],
.login-field input[type="text"],
.login-field input[type="email"]{
	width:100%;
	box-sizing:border-box;
	font-size:16px;
	letter-spacing:.32px;
	color:var(--vipify-auth-text) !important;
	background:linear-gradient(180deg, #151515 0%, #101010 100%) !important;
	border:1px solid #484848 !important;
	border-radius:10px;
	padding:12px 13px;
	margin:0;
	box-shadow:inset 0 1px 0 rgba(255,255,255,0.04);
}

.login-input::placeholder,
.login-field input[type="password"]::placeholder,
.login-field input[type="text"]::placeholder,
.login-field input[type="email"]::placeholder{
	color:#8D877E;
}

.login-input:-webkit-autofill,
.login-input:-webkit-autofill:hover,
.login-input:-webkit-autofill:focus,
.login-input:-webkit-autofill:active,
.login-field input[type="password"]:-webkit-autofill,
.login-field input[type="password"]:-webkit-autofill:hover,
.login-field input[type="password"]:-webkit-autofill:focus,
.login-field input[type="password"]:-webkit-autofill:active,
.login-field input[type="text"]:-webkit-autofill,
.login-field input[type="text"]:-webkit-autofill:hover,
.login-field input[type="text"]:-webkit-autofill:focus,
.login-field input[type="text"]:-webkit-autofill:active,
.login-field input[type="email"]:-webkit-autofill,
.login-field input[type="email"]:-webkit-autofill:hover,
.login-field input[type="email"]:-webkit-autofill:focus,
.login-field input[type="email"]:-webkit-autofill:active{
	-webkit-text-fill-color:var(--vipify-auth-text) !important;
	caret-color:var(--vipify-auth-text);
	-webkit-box-shadow:0 0 0 1000px #141414 inset !important;
	box-shadow:0 0 0 1000px #141414 inset !important;
	transition:background-color 9999s ease-out 0s;
}

.login-input:focus,
.login-field input[type="password"]:focus,
.login-field input[type="text"]:focus,
.login-field input[type="email"]:focus{
	outline:none;
	border-color:var(--vipify-auth-gold-soft);
	box-shadow:
		0 0 0 1px rgba(148, 148, 148, 0.24),
		0 0 0 5px rgba(148, 148, 148, 0.08);
}

.show-password-checkbox,
.rememberRow{
	display:flex;
	align-items:center;
	justify-content:flex-start;
	gap:8px;
	margin-top:10px;
	color:var(--vipify-auth-muted);
	font-size:14px;
	width:auto;
	max-width:100%;
}

.showPasswordLabel{
	position:relative;
	display:inline-block;
	padding-left:22px;
	margin:0;
	line-height:17px;
}

.showPasswordLabel span{
	display:inline-block;
}

#showPassword{
	position:absolute;
	left:0;
	top:50%;
	transform:translateY(-50%);
	margin:0 !important;
}

.checkbox,
#login-remember{
	width:17px;
	height:17px;
	margin:0;
	accent-color:var(--vipify-auth-gold);
}

.rememberRow{
	justify-content:center;
	margin-top:18px;
	margin-bottom:4px;
	color:#E0D8CC;
}

.redAlertBox,
.yellowInfoBox,
.authInfoBox{
	width:min(430px, calc(100vw - 24px));
	max-width:100%;
	margin:12px auto 16px auto;
	font-family:sans-serif, Helvetica, Proxima Nova, Open Sans;
	font-size:16px;
	font-weight:500;
	text-align:left;
	letter-spacing:0;
	line-height:1.45;
	border-radius:5px;
	padding:11px 13px;
	box-shadow:0 14px 24px rgba(0, 0, 0, 0.18);
}

.redAlertBox{
	color:#FFD8D8;
	background:linear-gradient(180deg, rgba(74, 14, 14, 0.9) 0%, rgba(31, 8, 8, 0.96) 100%);
	border:1px solid #B94A4A;
	margin-bottom:0;
	display:flex;
	align-items:flex-start;
	justify-content:flex-start;
	gap:8px;
}

.yellowInfoBox,
.authInfoBox{
	display:flex;
	align-items:flex-start;
	justify-content:flex-start;
	gap:8px;
}

.yellowInfoBox{
	color:#C09371;
	background:none;
	border:1px solid #C09371;
	box-shadow:none;
	margin-bottom:0;
}

.redAlertBox::before,
.authInfoBoxError::before{
	content:"";
	width:18px;
	height:18px;
	flex:0 0 18px;
	margin-top:1px;
	background:url('/images/button_info.png') center / contain no-repeat;
}

.yellowInfoBox__icon{
	width:18px;
	height:18px;
	flex:0 0 18px;
	margin-top:1px;
}

.yellowInfoBox__text{
	display:block;
	min-width:0;
	flex:1 1 auto;
	width:100%;
}

.redAlertBox__text{
	display:block;
	min-width:0;
}

.authInfoBoxError{
	color:#FFD6D6;
	background:linear-gradient(to bottom, #301010 0%, #170909 100%);
	border:2px solid #C62828;
	box-shadow:0 0 18px rgba(198, 40, 40, 0.15);
}

.authButtonRow{
	text-align:center;
	margin-top:18px;
}

.appPageButton{
	font-family:sans-serif, Helvetica, Proxima Nova, Open Sans;
	font-weight:500;
	letter-spacing:.38px;
	display:inline-block;
	cursor:pointer;
	font-size:17px;
	text-decoration:none;
	text-align:center;
	color:#F7F1E8 !important;
	background:linear-gradient(180deg, #262626 0%, #121212 100%);
	border:1px solid #6A6A6A;
	border-radius:10px;
	padding:11px 18px;
	min-width:min(240px, calc(100vw - 72px - env(safe-area-inset-right) - env(safe-area-inset-left)));
	max-width:calc(100vw - 72px - env(safe-area-inset-right) - env(safe-area-inset-left));
	box-sizing:border-box;
	box-shadow:0 10px 20px rgba(0, 0, 0, 0.24);
	transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease, filter .16s ease;
}

.appPageButton:hover,
.appPageButton:focus{
	color:#FFFFFF !important;
	background:linear-gradient(180deg, #303030 0%, #181818 100%);
	border-color:#949494;
	box-shadow:0 14px 28px rgba(0, 0, 0, 0.3);
	transform:translateY(-1px);
	filter:none;
}

.appPageButton:disabled{
	opacity:.75;
	transform:none;
	box-shadow:none;
	cursor:default;
}

.appPageButtonSuccess{
	border-color:#4FB56E;
	background:linear-gradient(180deg, #1B4224 0%, #102815 100%);
}

.appPageButtonSuccess:hover,
.appPageButtonSuccess:focus{
	border-color:#6EE08F;
	background:linear-gradient(180deg, #23522D 0%, #16351D 100%);
}

.appPageButtonDanger{
	border-color:#C45252;
	background:linear-gradient(180deg, #401717 0%, #1C0C0C 100%);
}

.appPageButtonDanger:hover,
.appPageButtonDanger:focus{
	border-color:#E04343;
	background:linear-gradient(to bottom, #461919 0%, #241010 100%);
}

.authCompactButton{
	min-width:180px;
	max-width:none;
	padding:10px 16px;
	font-size:16px;
}

.authHelperText{
	font-size:15px;
	color:var(--vipify-auth-muted);
	margin:2px 0 14px 0;
	text-align:center;
	line-height:1.5;
}

.authLink,
.authLinkRow{
	text-align:center;
}

.authLink{
	font-size:13px;
	color:#AFAFAF;
	margin-top:14px;
	margin-bottom:0;
}

.authLink a{
	color:#AFAFAF;
	text-decoration:none;
}

.authLink a:hover,
.authLink a:focus{
	color:#D8D8D8;
}

.authLinkRow{
	margin-top:24px;
}

.authInstallHelp{
	width:min(390px, calc(100vw - 32px));
	max-width:100%;
	margin:25px auto 0 auto;
	text-align:center;
}

.authInstallHelpCopy{
	margin:0 auto 12px auto;
	width:min(320px, 100%);
	font-size:17px;
	line-height:1.5;
	color:var(--vipify-auth-muted);
}

.authInstallHelpToggle{
	display:inline-block;
	width:auto;
	padding:0;
	margin:0 auto;
	background:none;
	border:0;
	cursor:pointer;
}

.authInstallHelpToggleInner{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:0;
}

.authInstallHelpArrow{
	display:block;
	height:46px;
	width:auto;
	flex:0 0 auto;
	margin-right:-18px;
}

.authInstallHelpButtonImage{
	display:block;
	width:auto;
	max-width:100%;
	height:auto;
}

.authInstallHelpPanel{
	margin-top:14px;
	padding:16px 14px 18px 14px;
	border:1px solid var(--vipify-auth-frame);
	border-radius:18px;
	background:
		linear-gradient(180deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0) 22%),
		linear-gradient(180deg, #181818 0%, #0B0B0B 100%);
	box-shadow:
		0 20px 36px rgba(0, 0, 0, 0.38),
		0 0 0 1px rgba(255, 255, 255, 0.03),
		inset 0 1px 0 rgba(255,255,255,0.04);
}

.authInstallHelpSteps{
	display:flex;
	flex-direction:column;
	gap:14px;
}

.authInstallHelpSteps img{
	display:block;
	width:100%;
	max-width:100%;
	height:auto;
	border-radius:12px;
	border:1px solid rgba(255, 255, 255, 0.08);
	box-shadow:0 10px 18px rgba(0, 0, 0, 0.28);
}

.authInstallHelpNote{
	margin-top:16px;
	padding:14px 12px;
	border-radius:12px;
	border:1px solid rgba(255, 255, 255, 0.08);
	background:rgba(0, 0, 0, 0.22);
	box-shadow:0 10px 18px rgba(0, 0, 0, 0.20);
	font-size:15px;
	line-height:1.5;
	color:var(--vipify-auth-text);
	text-align:center;
}

.authInstallHelpActions{
	margin-top:18px;
	text-align:center;
}

.authFooter{
	margin:34px auto 0 auto;
	text-align:center;
	font-size:11px;
	line-height:1.6;
	color:#B8B0A4;
}

@media (max-width:430px){
	.authPageWrap{
		width:min(100vw - 18px, 430px);
		padding-top:14px;
	}

	.authCard{
		border-radius:16px;
		padding:18px 14px 16px 14px;
	}

	.authTagline{
		font-size:19px;
	}

	.show-password-checkbox{
		width:auto;
		margin-left:0;
		margin-right:0;
		gap:0;
	}
}