/**
 * Visit Bedford
 * Authentication
 */

/*--------------------------------------------------------------
# Reset
--------------------------------------------------------------*/

*,
*::before,
*::after{

	box-sizing:border-box;

}

html,
body{

	margin:0;
	padding:0;
	height:100%;

}

body.vb-auth-page{

	font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

	color:#0f172a;

	background:
		radial-gradient(circle at top,#eef4ff 0%,#f8fafc 45%,#ffffff 100%);

	-webkit-font-smoothing:antialiased;

}

/*--------------------------------------------------------------
# Layout
--------------------------------------------------------------*/

.vb-auth-wrapper{

	min-height:100vh;

	display:flex;

	align-items:center;

	justify-content:center;

	padding:60px 24px;

}

.vb-login-page{

	display:flex;

	flex-direction:column;

	align-items:center;

	justify-content:center;

	gap:30px;

}

/*--------------------------------------------------------------
# Card
--------------------------------------------------------------*/

.vb-login-card{

	width:100%;
	max-width:500px;

	background:#fff;

	border-radius:20px;

	padding:34px;

	border:1px solid #edf2f7;

	box-shadow:
		0 10px 35px rgba(15,23,42,.05),
		0 30px 80px rgba(15,23,42,.08);

	transition:.25s ease;

}

.vb-login-card:hover{

	transform:translateY(-2px);

	box-shadow:
		0 18px 50px rgba(15,23,42,.08),
		0 40px 90px rgba(15,23,42,.10);

}

/*--------------------------------------------------------------
# Branding
--------------------------------------------------------------*/

.vb-login-brand{

	text-align:center;

	margin-bottom:26px;

}

.vb-login-logo{

	margin-bottom:18px;

}

.vb-login-logo img{

	max-width:150px;

	height:auto;

}

.vb-login-site-title{

	margin:0;

	font-size:2.4rem;

	font-weight:700;

	color:#0f172a;

}

.vb-login-title{

    margin:12px 0 8px;
    
	font-size:1.85rem;

	font-weight:700;

	line-height:1.2;

	letter-spacing:-.03em;

	color:#0f172a;

}

.vb-login-subtitle{

	max-width:360px;

	margin:0 auto;

	font-size:1rem;

	line-height:1.45;

	color:#64748b;

}

/*--------------------------------------------------------------
# Notices
--------------------------------------------------------------*/

.vb-login-notice{

	margin:0 0 30px;

	padding:18px 20px;

	border-radius:16px;

	font-size:.95rem;

	line-height:1.6;

	font-weight:500;

}

.vb-login-success{

	background:#ecfdf5;

	border:1px solid #a7f3d0;

	color:#065f46;

}

.vb-login-error{

	background:#fef2f2;

	border:1px solid #fecaca;

	color:#991b1b;

}

/*--------------------------------------------------------------
# Form
--------------------------------------------------------------*/

.vb-login-form{

	margin-top:10px;

}

.vb-form-group{

	margin-bottom:18px;

}

.vb-form-group label{

	display:block;

	margin-bottom:10px;

	font-size:.92rem;

	font-weight:600;

	color:#334155;

	letter-spacing:.01em;

}

/*--------------------------------------------------------------
# Inputs
--------------------------------------------------------------*/

.vb-input{

	position:relative;

}

.vb-input i:first-child{

	position:absolute;

	left:20px;

	top:50%;

	transform:translateY(-50%);

	color:#94a3b8;

	font-size:16px;

	pointer-events:none;

}

.vb-input input{

	width:100%;

	height:54px;

	padding:0 58px;

	border:1px solid #dbe4ee;

	border-radius:16px;

	background:#fff;

	font-size:15px;

	color:#0f172a;

	transition:
		border-color .2s ease,
		box-shadow .2s ease,
		background .2s ease;

}

.vb-input input::placeholder{

	color:#94a3b8;

}

.vb-input input:hover{

	border-color:#cbd5e1;

}

.vb-input input:focus{

	outline:none;

	border-color:#2563eb;

	box-shadow:0 0 0 4px rgba(37,99,235,.10);

	background:#fff;

}

/*--------------------------------------------------------------
# Password Toggle
--------------------------------------------------------------*/

.vb-password-toggle{

	position:absolute;

	right:12px;

	top:50%;

	transform:translateY(-50%);

	width:42px;

	height:42px;

	border:none;

	border-radius:10px;

	background:transparent;

	color:#94a3b8;

	cursor:pointer;

	display:flex;

	align-items:center;

	justify-content:center;

	transition:.2s ease;

}

.vb-password-toggle:hover{

	background:#f1f5f9;

	color:#2563eb;

}

.vb-password-toggle:focus{

	outline:none;

	box-shadow:0 0 0 3px rgba(37,99,235,.15);

}

/*--------------------------------------------------------------
# Options
--------------------------------------------------------------*/

.vb-login-options{

	display:flex;
	
	justify-content:space-between;
	
	align-items:center;

	margin:18px 0 26px;

}

.vb-checkbox{

	display:flex;

	align-items:center;

	gap:10px;

	font-size:.95rem;

	font-weight:500;

	color:#475569;

	cursor:pointer;

}

.vb-checkbox input{

	width:18px;

	height:18px;

	accent-color:#2563eb;

}

/*--------------------------------------------------------------
# Forgot Password
--------------------------------------------------------------*/

.vb-login-options a{

	color:#2563eb;

	font-weight:600;

	text-decoration:none;

}

.vb-login-options a:hover{

	text-decoration:underline;

}

.vb-forgot-password a{

	font-size:.92rem;

	font-weight:600;

	color:#2563eb;

	text-decoration:none;

	transition:.2s ease;

}

.vb-forgot-password a:hover{

	color:#1d4ed8;

	text-decoration:underline;

}

/*--------------------------------------------------------------
# Primary Button
--------------------------------------------------------------*/

.vb-login-button{

	width:100%;

	height:60px;

	border:none;

	border-radius:16px;

	background:#2563eb;

	color:#fff;

	font-size:1rem;

	font-weight:700;

	letter-spacing:.02em;

	cursor:pointer;

	display:flex;

	align-items:center;

	justify-content:center;

	gap:12px;

	transition:all .2s ease;

	box-shadow:
		0 10px 25px rgba(37,99,235,.25);

}

.vb-login-button:hover{

	background:#1d4ed8;

	transform:translateY(-2px);

	box-shadow:
		0 18px 35px rgba(37,99,235,.35);

}

.vb-login-button:active{

	transform:translateY(0);

}

.vb-login-button:disabled{

	cursor:not-allowed;

	opacity:.75;

	transform:none;

	box-shadow:none;

}

/*--------------------------------------------------------------
# Loading State
--------------------------------------------------------------*/

.vb-login-button.is-loading{

	pointer-events:none;

}

.vb-login-button .fa-spinner{

	font-size:16px;

}

/*--------------------------------------------------------------
# Divider
--------------------------------------------------------------*/

.vb-login-divider{

	position:relative;

	margin:40px 0;

	text-align:center;

}

.vb-login-divider::before{

	content:"";

	position:absolute;

	left:0;

	right:0;

	top:50%;

	height:1px;

	background:#e2e8f0;

}

.vb-login-divider span{

	position:relative;

	display:inline-block;

	padding:0 16px;

	background:#fff;

	font-size:.85rem;

	font-weight:600;

	color:#94a3b8;

	text-transform:uppercase;

	letter-spacing:.08em;

}

/*--------------------------------------------------------------
# Help Section
--------------------------------------------------------------*/

.vb-login-help{

	max-width:500px;

	text-align:center;

	margin:0;

	padding:0;

	border:none;


}

.vb-login-help-title{

	margin:0;

	font-size:1.05rem;

	font-weight:700;

	color:#0f172a;

}

.vb-login-help-text{

	max-width:340px;

	margin:14px auto 24px;

	font-size:.95rem;

	line-height:1.7;

	color:#64748b;

}

.vb-login-help-link{

	display:inline-flex;

	align-items:center;

	gap:8px;

	padding:14px 24px;

	border-radius:14px;

	background:#eff6ff;

	color:#2563eb;

	font-weight:700;

	text-decoration:none;

	transition:.2s ease;

}

.vb-login-help-link:hover{

	background:#dbeafe;

	transform:translateY(-1px);

}

/*--------------------------------------------------------------
# Links
--------------------------------------------------------------*/

a{

	transition:color .2s ease;

}

a:hover{

	text-decoration:none;

}

/*--------------------------------------------------------------
# Autofill
--------------------------------------------------------------*/

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus{

	-webkit-box-shadow:0 0 0 1000px #ffffff inset !important;

	-webkit-text-fill-color:#0f172a !important;

	transition:background-color 9999s ease-in-out 0s;

}

/*--------------------------------------------------------------
# Focus Accessibility
--------------------------------------------------------------*/

button:focus-visible,
a:focus-visible,
input:focus-visible{

	outline:none;

	box-shadow:0 0 0 4px rgba(37,99,235,.18);

}

/*--------------------------------------------------------------
# Animations
--------------------------------------------------------------*/

.vb-login-card{

	animation:vbFadeUp .45s ease;

}

@keyframes vbFadeUp{

	from{

		opacity:0;

		transform:translateY(20px);

	}

	to{

		opacity:1;

		transform:translateY(0);

	}

}

/*--------------------------------------------------------------
# Mobile
--------------------------------------------------------------*/

@media (max-width:768px){

	.vb-auth-wrapper{

		padding:30px 18px;

	}

	.vb-login-card{

		padding:40px 28px;

		border-radius:20px;

	}

	.vb-login-logo img{

		max-width:180px;

	}

	.vb-login-title{

		font-size:2rem;

	}

	.vb-login-subtitle{

		font-size:.95rem;

	}

}

@media (max-width:480px){

	.vb-login-card{

		padding:30px 22px;

	}

	.vb-login-title{

		font-size:1.75rem;

	}

	.vb-login-options{

		flex-direction:column;

		align-items:flex-start;

		gap:16px;

	}

	.vb-forgot-password{

		width:100%;

		text-align:left;

		margin-bottom:26px;

	}

	.vb-input input{

		height:56px;

	}

	.vb-login-button{

		height:56px;

	}

}

/*--------------------------------------------------------------
# Dark Mode Ready
--------------------------------------------------------------*/

@media (prefers-color-scheme:dark){

	body.vb-auth-page{

		background:
			radial-gradient(circle at top,#1e293b 0%,#0f172a 100%);

	}

}

/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/

.vb-hidden{

	display:none !important;

}

.vb-text-center{

	text-align:center;

}

.vb-mb-0{

	margin-bottom:0 !important;

}

.vb-mt-0{

	margin-top:0 !important;

}