/* ==========================================
   Login Hero
========================================== */

.login-section{

    padding:90px 0;

    background:#F8FAFC;

}

.login-grid{

    display:grid;

    grid-template-columns:1.05fr .95fr;

    gap:70px;

    align-items:center;

}

.login-left h1{

    font-size:58px;

    line-height:1.1;

    font-weight:800;

    margin:20px 0;

    color:#111827;

}

.login-left>p{

    font-size:18px;

    color:#64748B;

    line-height:1.8;

    margin-bottom:40px;

}


/* ==========================================
   Form
========================================== */

.form-group{

    margin-bottom:22px;

    position:relative;

}

.form-group input{

    width:100%;

    height:64px;

    border:1px solid #E5E7EB;

    border-radius:16px;

    padding:0 22px;

    font-size:16px;

    background:#fff;

    transition:.2s;

}

.form-group input:focus{

    outline:none;

    border-color:#6366F1;

    box-shadow:0 0 0 4px rgba(99,102,241,.12);

}


/* ==========================================
   Password Eye
========================================== */

.password-group{

    position:relative;

}

.toggle-password{

    position:absolute;

    right:18px;

    top:50%;

    transform:translateY(-50%);

    border:none;

    background:none;

    cursor:pointer;

    color:#94A3B8;

    font-size:18px;

}


/* ==========================================
   Links
========================================== */

.login-links{

    display:flex;

    justify-content:flex-end;

    margin-top:-6px;

    margin-bottom:28px;

}

.login-links a{

    color:#4F46E5;

    font-size:15px;

    text-decoration:none;

    font-weight:600;

}

.bottom-link{

    text-align:center;

    margin-top:28px;

    color:#64748B;

}

.bottom-link a{

    color:#4F46E5;

    font-weight:700;

    text-decoration:none;

}


/* ==========================================
   Right Card
========================================== */

.feature-card{

    background:#fff;

    border:1px solid #E8ECF5;

    border-radius:28px;

    padding:45px;

    box-shadow:0 20px 50px rgba(15,23,42,.05);

}

.feature-card h2{

    margin:20px 0 30px;

    font-size:42px;

    line-height:1.2;

    color:#111827;

}

.feature-list{

    list-style:none;

    margin:0;

    padding:0;

}

.feature-list li{

    padding:18px 0;

    border-bottom:1px solid #EEF2F7;

    color:#374151;

    display:flex;

    align-items:center;

    gap:14px;

    font-size:17px;

}

.feature-list li:last-child{

    border-bottom:none;

}

.feature-list li::before{

    content:"✦";

    color:#4F46E5;

    font-size:14px;

}


/* ==========================================
   Error Box
========================================== */

.login-error{

    margin-bottom:30px;

}


/* ==========================================
   Responsive
========================================== */

@media(max-width:992px){

.login-grid{

    grid-template-columns:1fr;

    gap:50px;

}

.feature-card{

    order:-1;

}

}

@media(max-width:768px){

.login-section{

    padding:70px 0;

}

.login-left h1{

    font-size:40px;

}

.feature-card{

    padding:32px;

}

.feature-card h2{

    font-size:30px;

}

}

/* ==========================================
   Authentication Error
========================================== */

.auth-error{

    display:flex;

    align-items:flex-start;

    gap:18px;

    margin-bottom:28px;

    padding:20px 22px;

    background:#FEF2F2;

    border:1px solid #FECACA;

    border-radius:18px;

}

.error-icon{

    width:46px;

    height:46px;

    border-radius:50%;

    background:#DC2626;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

    font-size:18px;

}

.error-content{

    flex:1;

}

.error-content h4{

    margin:0 0 8px;

    font-size:20px;

    font-weight:700;

    color:#991B1B;

}

.error-content p{

    margin:0;

    color:#7F1D1D;

    line-height:1.7;

    font-size:15px;

}