#login-page, 
#signup-page,
#forgot-page{
	min-height: 100dvh;
	overflow-y:auto;
	width: 100%;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	background:
        linear-gradient(
            to left,
            rgba(6,56,90,.35),
            rgba(6,56,90,.15) 35%,
            rgba(6,56,90,0) 70%
        ),
        url("../img/245-160-2.jpg");
	background-position: left center;
	background-size: contain;
	background-repeat: no-repeat;
}

.logo{
    width: 140px;
    height: auto;
    filter: drop-shadow(0 2px 4px rgba(255,255,255,.4));
	margin: 0 auto 24px;
}

.auth-form{
	margin-right: 60px;
    width: 390px;
    z-index: 100;
    background: linear-gradient(
        to bottom,
        var(--primary-color-blur),
        var(--primary-color-medium-blur) 50%,
        var(--primary-color-light-blur)
        );
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,.2);
    padding: 20px 40px;
    text-align: center;
    border-radius: 16px;
    box-shadow: 0 24px 32px rgba(0, 0, 0, 0.12);
}

.form-control{
	width: 100%;
	border-radius: 10px;
	padding: 6px 10px;
	color: var(--text-color);
	font-weight: 500;
	font-family: inherit;
	font-size: 15px;
	border: 1px solid var(--border-color);
	background-color: var(--input-box);
	transition: border-color .3s ease, box-shadow .3s ease;
}

.form-control:focus{
	outline: none;
	box-shadow: 0 0 0 3px rgba(52,152,219,.25);
	border-color: var(--primary-color-light);
}

.form-title{
	padding: 0;
	font-size: 24px;
	color: white;
}

.form-title-h2{
	padding: 4px 0 18px 0;
	font-size: 14px;
	font-weight: 400;
	color: white;
}

.form-group{
	padding: 4px 0;
	text-align: right;
}

.form-group label{
	display: block;
	color: var(--text-color-light-gray);
	font-weight: 500;
	padding-bottom: 4px;
}

.submit-btn{
	padding: 12px 0;
	margin-top: 14px;
}

.btn{
	padding: 8px 20px;
	font-size: 16px;
	font-weight: 500;
	font-family: "Vazirmatn", sans-serif;
	color: white;
	cursor: pointer;
	width: 100%;
	background-color: var(--btn-color);
	border: none;
	border:1px solid rgba(255,255,255,.1);
	border-radius: 10px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
	transition: box-shadow .25s ease, 
	background-color .25s ease,
	transform .2s ease;
}

.btn:hover{
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
	background-color: var(--btn-color-light);
	transform: translateY(-2px);
}

.btn:active{
	transform: translateY(1px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.login-btn{
    margin-top:18px;
}

.btn-secondary{
    margin-top:12px;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.15);
    color:#e2e8f0;
}

.btn-secondary:hover{
    background:rgba(255,255,255,.14);
}

.forgot-password{
	padding: 8px 0;
	color: var(--text-color-light-gray);
	transition: color .2s ease;
}

.forgot-password:hover{
	text-decoration: underline;
	cursor: pointer;
	color:white;
}

.login-error {
    padding: 12px 16px;
    background: transparent;
    color: #b91c1c;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
}

.login-links{
    margin-top:12px;
    display:flex;
    flex-direction:column;
    gap:10px;
    align-items:center;
}

.login-links a{
    color:#2563eb;
    text-decoration:none;
    font-weight:600;
    transition:.2s;
}

.login-links a:hover{
    color:#1d4ed8;
}

.field-error{
    display:block;
    min-height:18px;
    margin-top:6px;

    color:#ef4444;
    font-size:13px;
    font-weight:500;
}

.form-control.error{
    border-color:#ef4444;
    box-shadow:0 0 0 3px rgba(239,68,68,.15);
}

.signup-link{
    color:#58667a;
}

.auth-form{
    /* width:100%; */
    animation:fadeIn .35s ease;
}

.otp-footer{
    margin-top:16px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

#otp-timer{
    color:white;
    font-weight:700;
}

.link-btn{
    background:none;
    border:none;
    color:#9bd5f0;
    cursor:pointer;
    font-family:inherit;
    font-size:14px;
}

.link-btn:disabled{
    opacity:.5;
    cursor:not-allowed;
}

.input-icon{
    position:relative;
}

.input-icon .form-control{
    padding-right:46px;
    padding-left:46px;
}

.input-icon > i:first-child{
    position:absolute;
    right:14px;
    top:50%;
    transform:translateY(-50%);
    color:#8da1b5;
    font-size:18px;
}

.password-toggle{
    position:absolute;
    left:14px;
    top:50%;
    transform:translateY(-50%);
    cursor:pointer;
    color:#8da1b5;
    transition:.2s;
}

.password-toggle:hover{
    color: #7a8fa3;
}

@keyframes fadeIn{
    from{
        opacity:0;
        transform:translateY(12px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }
}

@media (max-width: 1440px){
	.auth-form{
		width: 380px;
        margin-right: 30px;
		padding: 30px;
    }
	.logo{
		margin: 0 auto 8px;
	}
	.submit-btn{
		margin-top: 8px;
	}

}

@media (max-width: 1350px){

	.auth-form{
        width: 360px;
    }
	#login-page,
	#signup-page,
	#forgot-page{
		background-position: left center;
	}

}

/* Move login to center before it overlaps the banner text */
@media (min-width: 769px) and (max-width: 1210px){
	#login-page, 
	#signup-page,
	#forgot-page{
		background-position: top center;
		justify-content: center;
		padding-right: 0;
		padding-top: clamp(190px, 16vh, 220px);
	}
}

@media (max-width: 768px){

    #login-page,
    #signup-page,
    #forgot-page{
        min-height: 100dvh;
        width: 100%;
        box-sizing: border-box;

        display: flex;
        justify-content: flex-start;
        align-items: center;

        padding: 0 14px 24px;

        background-position: top center;
        background-size: 100% auto;
        background-repeat: no-repeat;

        overflow-y: auto;
    }


    .auth-form{
        width: 100%;
        max-width: 370px;
        box-sizing: border-box;

        margin: 105px auto 0;
        padding: 20px 20px;

        border-radius: 16px;
    }


    .logo{
        width: 80px;
        margin: 0 auto 12px;
    }


    .form-title{
        font-size: 19px;
        line-height: 1.5;
    }


    .form-title-h2{
        font-size: 12px;
        line-height: 1.7;
        padding: 2px 0 10px;
    }


    .form-group{
        padding: 2px 0;
    }


    .form-group label{
        font-size: 13px;
        padding-bottom: 3px;
    }


    .form-control{
        font-size: 14px;
        padding: 7px 10px;
    }


    .input-icon .form-control{
        padding-right: 42px;
        padding-left: 42px;
    }


    .btn{
        padding: 9px 12px;
        font-size: 14px;
    }


    .submit-btn{
        margin-top: 8px;
    }


    .login-btn{
        margin-top: 10px;
    }


    .login-links{
        margin-top: 8px;
        gap: 6px;
    }


    .field-error{
        font-size: 12px;
        min-height: 15px;
        margin-top: 3px;
    }
}

/* @media (max-width: 768px){
	.auth-form{
		width: min(90%, 380px);
		padding: 24px;
	}

	.btn{
        padding:12px;
    }

	.form-title{
		font-size: 20px;
	}

	.form-group{
		padding:2px 0;
	}

	.logo{
		width: 100px;
	}

	#login-page,
	#signup-page,
	#forgot-page{
		background-position: center;
	}

	.form-title-h2{
		font-size:13px;
	}
} */