/* ===========================
   Iranian Union - Auth Page
=========================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: "Vazirmatn", sans-serif;
    background: #0f172a;
    color: #fff;
    overflow-x: hidden;
}

a {
    text-decoration: none;
}

.auth-page {
    width: 100%;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    background: url("../image/banner/home-banner.jpg") center center;
    background-size: cover;
    background-repeat: no-repeat;
}

.background-overlay {
    position: absolute;
    inset: 0;
    background: rgba(5, 10, 20, .75);
    backdrop-filter: blur(8px);
}

.auth-container {
    position: relative;
    z-index: 2;
    width: 1100px;
    max-width: 95%;
    min-height: 650px;
    display: flex;
    overflow: hidden;
    border-radius: 20px;
    background: rgba(20, 30, 50, .95);
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 20px 50px rgba(0,0,0,.45);
}
.auth-left{
    width:45%;
    padding:60px 50px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    background:linear-gradient(135deg,#2563eb,#1e40af);
}

.auth-left .logo{
    width:110px;
    margin-bottom:20px;
}

.auth-left h1{
    font-size:36px;
    font-weight:800;
    margin-bottom:10px;
}

.auth-left h2{
    font-size:22px;
    font-weight:500;
    color:#dbeafe;
    margin-bottom:25px;
}

.auth-left p{
    line-height:2;
    color:#e5e7eb;
    margin-bottom:30px;
}

.auth-left ul{
    list-style:none;
}

.auth-left ul li{
    padding:10px 0;
    font-size:16px;
    color:#fff;
}

.auth-right{
    width:55%;
    padding:60px;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.auth-right h2{
    font-size:32px;
    margin-bottom:10px;
}

.auth-right p{
    color:#94a3b8;
    margin-bottom:35px;
}
.input-box{
    display:flex;
    flex-direction:column;
    margin-bottom:20px;
}

.input-box label{
    margin-bottom:8px;
    color:#e2e8f0;
    font-size:15px;
    font-weight:500;
}

.input-box input{
    width:100%;
    height:55px;
    border:none;
    outline:none;
    border-radius:12px;
    padding:0 18px;
    background:#1e293b;
    color:#fff;
    font-size:15px;
    transition:.3s;
}

.input-box input:focus{
    border:2px solid #3b82f6;
    background:#0f172a;
}

.remember{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin:15px 0 25px;
    font-size:14px;
}

.remember label{
    display:flex;
    align-items:center;
    gap:8px;
    color:#cbd5e1;
}

.remember a{
    color:#60a5fa;
    transition:.3s;
}

.remember a:hover{
    color:#93c5fd;
}

.login-btn{
    width:100%;
    height:55px;
    border:none;
    border-radius:12px;
    background:#2563eb;
    color:#fff;
    font-size:17px;
    font-weight:700;
    cursor:pointer;
    transition:.3s;
}

.login-btn:hover{
    background:#1d4ed8;
    transform:translateY(-2px);
}
.divider{
    margin:30px 0;
    text-align:center;
    position:relative;
}

.divider::before{
    content:"";
    position:absolute;
    width:100%;
    height:1px;
    background:#334155;
    left:0;
    top:50%;
}

.divider span{
    position:relative;
    background:#14203a;
    padding:0 15px;
    color:#94a3b8;
}

.register-btn{
    width:100%;
    height:55px;
    display:flex;
    justify-content:center;
    align-items:center;
    border:2px solid #2563eb;
    border-radius:12px;
    color:#60a5fa;
    font-weight:700;
    transition:.3s;
}

.register-btn:hover{
    background:#2563eb;
    color:#fff;
}

.back-home{
    margin-top:25px;
    text-align:center;
}

.back-home a{
    color:#94a3b8;
    transition:.3s;
}

.back-home a:hover{
    color:#fff;
}

@media(max-width:900px){

.auth-container{
    flex-direction:column;
}

.auth-left,
.auth-right{
    width:100%;
    padding:40px 30px;
}

.auth-left{
    text-align:center;
}

.auth-left .logo{
    margin:auto auto 20px;
}

.remember{
    flex-direction:column;
    gap:15px;
    align-items:flex-start;
}

}