@font-face {
    font-family: iransans;
    src: url('../assets/fonts/IRANSansWeb.ttf');
}
* { 
		margin: 0;
		padding: 0;
		box-sizing: border-box;
		font-family: iransans, Tahoma, sans-serif;
	} 
	body { 
		height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;
		background: url('../assets/images/3.jpg') no-repeat center center/cover;
		position: relative;
	} 
	body::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(30, 136, 229, 0.35);
		backdrop-filter: blur(3px);
	}
	.login-container {
		width: 900px;
		height: 500px;
		background: rgba(255,255,255,0.1);
		border-radius: 20px; overflow: hidden;
		display: flex;
		position: relative;
		z-index: 2;
		box-shadow: 0 25px 60px rgba(0,0,0,0.3);
	}
	.right-side {
		width: 50%;
		background: linear-gradient(135deg,#1e88e5,#1565c0);
		display: flex; justify-content: center; align-items: center;
	} 
	.logo {
		width: 140px;
		height: 140px;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		color: white;
		font-size: 26px;
		font-weight: bold;
		backdrop-filter: blur(5px);
	}
	.left-side { 
		width: 50%;
		background: rgba(255,255,255,0.85);
		display: flex; flex-direction: column;
		justify-content: center;
		padding: 60px;
	} 
		.left-side h2 {
		margin-bottom: 40px;
		color: #333;
		text-align: center;
	} 
	.input-group {
		margin-bottom: 25px;
	} 
	input {
		width: 100%;
		padding: 14px 16px;
		border-radius: 10px;
		border: 1px solid #ddd;
		font-size: 15px;
		outline: none;
		transition: 0.3s;
		text-align: right;
	} 
	input:focus {
		border-color: #1e88e5;
		box-shadow: 0 0 0 2px rgba(30,136,229,0.2);
	} 
	.eye-toggle {
        position: absolute;
        left: 73px;
        top: 58%;
        transform: translateY(-50%);
        cursor: pointer;
        font-size: 16px;
        color: #90979f;
        opacity: 0.7;
    }
    .eye-toggle:hover {
        opacity: 1;
    }
	@media (max-width: 900px) {
	.login-container {
		width: 95%;
		height: auto;
		flex-direction:
		column;
	} 
	.right-side, .left-side {
		width: 100%; height: auto;
	}
	.right-side {
		padding: 40px 0;
	}
} 

    .login-btn {
        width: 100%;
        padding: 14px;
        border: none;
        border-radius: 10px;
        background: linear-gradient(135deg,#1e88e5,#1565c0);
        color: white;
        font-size: 16px;
        cursor: pointer;
        transition: 0.3s;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 8px;
    }
    .login-btn.loading {
        pointer-events: none;
        opacity: 0.9;
    }
    .spinner {
        width: 20px;
        height: 20px;
        border: 3px solid rgba(255,255,255,0.4);
        border-top: 3px solid white;
        border-radius: 50%;
        animation: spin 1s linear infinite;
        display: none;
    }
    @keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
    }
    .login-btn.loading .btn-text {
        display: none;
    }
    .login-btn.loading .spinner {
        display: inline-block;
    }
    .login-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    }
    
    @media (max-width: 900px) {
        .login-container {
        width: 95%;
        height: auto;
        flex-direction: column;
    }
    .right-side,
    .left-side {
        width: 100%;
        height: auto;
    }
    
    .right-side {
        padding: 40px 0;
    }
}

.footer {
    position: fixed;       
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 6px 0;
    text-align: center;
    font-size: 14px;
    color: white;
    background: rgba(255, 255, 255, 0.1); 
    backdrop-filter: blur(8px);           
    border-top: 1px solid rgba(255,255,255,0.2); 
    z-index: 10;
}