/* =====================================================
   CHIDA AUTH PAGES: LOGIN / REGISTER
===================================================== */

.auth-page{
    min-height:100vh!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    padding:36px 16px!important;
    background:
        radial-gradient(circle at top right, color-mix(in srgb,var(--accent) 16%,transparent), transparent 30%),
        radial-gradient(circle at bottom left, rgba(15,23,42,.10), transparent 32%),
        var(--bg)!important;
    direction:rtl!important;
}

.auth-wrapper{
    width:100%!important;
    max-width:1120px!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 470px!important;
    overflow:hidden!important;
    border-radius:36px!important;
    background:var(--card)!important;
    border:1px solid var(--line)!important;
    box-shadow:0 30px 90px rgba(15,23,42,.12)!important;
}

.auth-wrapper.register-mode{
    grid-template-columns:minmax(0,1fr) 520px!important;
}

.auth-cover{
    position:relative!important;
    min-height:720px!important;
    overflow:hidden!important;
    background:
        linear-gradient(135deg, rgba(15,23,42,.95), rgba(15,23,42,.70)),
        radial-gradient(circle at 20% 20%, rgba(212,175,55,.38), transparent 32%),
        radial-gradient(circle at 80% 80%, rgba(255,255,255,.12), transparent 28%)!important;
}

.auth-cover-pattern{
    position:absolute!important;
    inset:0!important;
    background-image:
        linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px)!important;
    background-size:42px 42px!important;
    opacity:.28!important;
}

.auth-cover::after{
    content:""!important;
    position:absolute!important;
    inset:35px!important;
    border:1px solid rgba(255,255,255,.10)!important;
    border-radius:32px!important;
    pointer-events:none!important;
}

.auth-cover-content{
    position:absolute!important;
    inset:auto 0 0 0!important;
    z-index:3!important;
    padding:50px!important;
    color:#fff!important;
}

.auth-cover-content span{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    padding:10px 18px!important;
    border-radius:999px!important;
    background:rgba(255,255,255,.12)!important;
    backdrop-filter:blur(10px)!important;
    font-size:13px!important;
    margin-bottom:18px!important;
    color:#f3d57b!important;
    font-weight:900!important;
}

.auth-cover-content h2{
    margin:0 0 14px!important;
    font-size:42px!important;
    line-height:1.35!important;
    font-weight:900!important;
}

.auth-cover-content p{
    margin:0!important;
    color:rgba(255,255,255,.78)!important;
    line-height:2.1!important;
    font-size:15px!important;
}

.auth-form-side{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    padding:52px 42px!important;
    background:var(--card)!important;
}

.auth-box{
    width:100%!important;
    max-width:410px!important;
}

.register-mode .auth-box{
    max-width:450px!important;
}

.auth-logo{
    text-align:center!important;
    margin-bottom:24px!important;
}

.auth-logo img{
    max-width:170px!important;
    max-height:70px!important;
    object-fit:contain!important;
}

.auth-logo strong{
    color:var(--text)!important;
    font-size:24px!important;
    font-weight:900!important;
}

html[data-theme="dark"] .auth-logo img{
    filter:invert(1) brightness(2) contrast(1.08)!important;
}

.auth-title{
    text-align:center!important;
    margin-bottom:30px!important;
}

.auth-title h1{
    margin:0 0 10px!important;
    font-size:32px!important;
    color:var(--text)!important;
    font-weight:900!important;
}

.auth-title p{
    margin:0!important;
    color:var(--muted)!important;
    line-height:2!important;
    font-size:14px!important;
}

.auth-form{
    display:grid!important;
    gap:16px!important;
}

.auth-two-col{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:12px!important;
}

.auth-group{
    display:grid!important;
    gap:8px!important;
}

.auth-group label{
    font-size:13px!important;
    color:var(--text)!important;
    font-weight:900!important;
}

.auth-group input{
    width:100%!important;
    height:56px!important;
    border-radius:18px!important;
    border:1px solid var(--line)!important;
    background:var(--bg)!important;
    padding:0 18px!important;
    color:var(--text)!important;
    font-family:inherit!important;
    font-size:14px!important;
    outline:none!important;
    transition:.25s!important;
}

.auth-group input:focus{
    border-color:var(--accent)!important;
    box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 18%,transparent)!important;
}

.auth-row{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:12px!important;
    margin-top:-2px!important;
}

.auth-row a{
    color:var(--accent)!important;
    text-decoration:none!important;
    font-size:13px!important;
    font-weight:900!important;
}

.auth-remember{
    display:flex!important;
    align-items:center!important;
    gap:8px!important;
    color:var(--muted)!important;
    font-size:13px!important;
}

.auth-remember input{
    width:16px!important;
    height:16px!important;
}

.auth-submit{
    width:100%!important;
    height:60px!important;
    border:none!important;
    border-radius:20px!important;
    background:linear-gradient(135deg,var(--accent),#f3d57b)!important;
    color:#111827!important;
    font-size:15px!important;
    font-weight:900!important;
    cursor:pointer!important;
    transition:.25s!important;
    margin-top:6px!important;
    font-family:inherit!important;
}

.auth-submit:hover{
    transform:translateY(-2px)!important;
    box-shadow:0 20px 40px rgba(212,175,55,.28)!important;
}

.auth-footer{
    text-align:center!important;
    margin-top:24px!important;
    color:var(--muted)!important;
    font-size:14px!important;
}

.auth-footer a{
    color:var(--accent)!important;
    text-decoration:none!important;
    font-weight:900!important;
}

.auth-alert{
    padding:14px 18px!important;
    border-radius:18px!important;
    background:#fee2e2!important;
    border:1px solid #fecaca!important;
    color:#991b1b!important;
    font-size:13px!important;
    font-weight:800!important;
    line-height:1.9!important;
    margin-bottom:16px!important;
}

@media(max-width:980px){

    .auth-wrapper,
    .auth-wrapper.register-mode{
        grid-template-columns:1fr!important;
        max-width:620px!important;
    }

    .auth-cover{
        min-height:300px!important;
    }

    .auth-cover-content{
        padding:30px!important;
    }

    .auth-cover-content h2{
        font-size:30px!important;
    }
}

@media(max-width:640px){

    .auth-page{
        padding:18px!important;
    }

    .auth-wrapper{
        border-radius:28px!important;
    }

    .auth-form-side{
        padding:32px 22px!important;
    }

    .auth-title h1{
        font-size:27px!important;
    }

    .auth-cover{
        min-height:235px!important;
    }

    .auth-cover::after{
        inset:18px!important;
        border-radius:22px!important;
    }

    .auth-cover-content{
        padding:22px!important;
    }

    .auth-cover-content h2{
        font-size:23px!important;
    }

    .auth-cover-content p{
        font-size:13px!important;
    }

    .auth-row,
    .auth-two-col{
        grid-template-columns:1fr!important;
        flex-direction:column!important;
        align-items:flex-start!important;
    }

    .auth-group input{
        height:54px!important;
    }

    .auth-submit{
        height:56px!important;
    }
}