/* ======================================================
   FragCity Authentication
   Login / Register / Forgot Password / Reset Password
====================================================== */

.auth-page{
    width: calc(100% + 50px);
    min-height: calc(100vh - 66px);
    margin: -25px;

    display:flex;
    justify-content:center;
    align-items:center;
    padding:40px 20px;
    direction:rtl;

    background:
        radial-gradient(circle at top right, rgba(37,99,235,.08), transparent 34%),
        radial-gradient(circle at bottom left, rgba(14,165,233,.05), transparent 30%),
        #070b12;
}

@media (max-width: 700px) {
    .auth-page {
        width: calc(100% + 28px);
        margin: -18px -14px;
    }
}

.auth-container{

    width:100%;
    max-width:470px;

    background:
        linear-gradient(180deg,#111827,#0F172A);

    border:1px solid #22304A;

    border-radius:22px;

    padding:34px;

    box-shadow:
        0 20px 60px rgba(0,0,0,.45),
        0 0 40px rgba(59,130,246,.08);

    animation:authFade .35s ease;

}

@keyframes authFade{

    from{

        opacity:0;
        transform:translateY(18px);

    }

    to{

        opacity:1;
        transform:none;

    }

}

/* ==========================
        Logo
========================== */

.auth-logo{

    display:flex;
    justify-content:center;
    margin-bottom:18px;

}

.auth-logo img{

    width:86px;
    height:86px;
    object-fit:contain;

    filter:
        drop-shadow(0 0 18px rgba(59,130,246,.45));

}

.auth-container h2{

    margin:0;

    text-align:center;

    color:#F8FAFC;

    font-size:28px;

    font-weight:800;

}

.auth-subtitle{

    margin-top:10px;
    margin-bottom:30px;

    text-align:center;

    color:#94A3B8;

    font-size:.92rem;

}

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

.auth-error{

    background:rgba(239,68,68,.12);

    border:1px solid rgba(239,68,68,.35);

    color:#FCA5A5;

    border-radius:14px;

    padding:14px;

    margin-bottom:22px;

    text-align:center;

}

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

.form-group{

    margin-bottom:20px;

}

.form-group label{

    display:block;

    margin-bottom:8px;

    color:#CBD5E1;

    font-size:.92rem;

    font-weight:500;

}

.form-group input{

    width:100%;

    height:52px;

    padding:0 16px;

    background:#0B1220;

    border:1px solid #22304A;

    border-radius:14px;

    color:#F8FAFC;

    font-family:inherit;

    font-size:.95rem;

    transition:.25s;

    box-sizing:border-box;

    outline:none;

}

.form-group input::placeholder{

    color:#64748B;

}

.form-group input:focus{

    border-color:#3B82F6;

    box-shadow:
        0 0 0 4px rgba(59,130,246,.18);

}

/* ==========================
      Password Box
========================== */

.password-box{

    position:relative;

}

.password-box input{

    padding-left:50px;

}

.toggle-password{

    position:absolute;

    left:12px;

    top:50%;

    transform:translateY(-50%);

    width:34px;

    height:34px;

    border:none;

    background:none;

    color:#94A3B8;

    cursor:pointer;

    transition:.2s;

}

.toggle-password:hover{

    color:#60A5FA;

}

.toggle-password i{

    font-size:17px;

}

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

.auth-links{

    display:flex;

    justify-content:flex-start;

}

.forgot-link{

    color:#60A5FA;

    text-decoration:none;

    font-size:.9rem;

    transition:.25s;

}

.forgot-link:hover{

    color:#93C5FD;

}

/* ==========================
        Button
========================== */

.btn-auth-submit{

    width:100%;

    height:54px;

    margin-top:6px;

    border:none;

    border-radius:14px;

    background:
        linear-gradient(135deg,#3B82F6,#2563EB);

    color:#fff;

    font-size:1rem;

    font-weight:700;

    font-family:inherit;

    cursor:pointer;

    transition:.25s;

}

.btn-auth-submit:hover{

    transform:translateY(-2px);

    box-shadow:
        0 12px 30px rgba(59,130,246,.35);

}

.btn-auth-submit:disabled{

    opacity:.65;

    cursor:not-allowed;

}

.btn-auth-submit i{

    margin-left:8px;

}
/* ==========================
      Separator
========================== */

.auth-separator{

    display:flex;

    align-items:center;

    margin:28px 0;

    color:#64748B;

    font-size:.85rem;

}

.auth-separator::before,
.auth-separator::after{

    content:"";

    flex:1;

    height:1px;

    background:#22304A;

}

.auth-separator span{

    padding:0 14px;

}

/* ==========================
      Steam Login
========================== */

.btn-steam-login{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    width:100%;

    height:54px;

    border-radius:14px;

    background:#171F30;

    border:1px solid #22304A;

    color:#F8FAFC;

    text-decoration:none;

    font-size:.95rem;

    font-weight:600;

    transition:.25s;

    box-sizing:border-box;

}

.btn-steam-login i{

    font-size:22px;

    color:#60A5FA;

}

.btn-steam-login:hover{

    background:#1E293B;

    border-color:#3B82F6;

    color:#FFFFFF;

    transform:translateY(-2px);

    box-shadow:
        0 12px 28px rgba(59,130,246,.22);

}

/* ==========================
      Footer
========================== */

.auth-switch{

    margin-top:28px;

    text-align:center;

    color:#94A3B8;

    font-size:.93rem;

}

.auth-switch a{

    color:#60A5FA;

    text-decoration:none;

    font-weight:700;

    transition:.25s;

}

.auth-switch a:hover{

    color:#93C5FD;

}

/* ==========================
      Loading State
========================== */

.btn-auth-submit.is-loading{

    position:relative;

    pointer-events:none;

    opacity:.85;

}

.btn-auth-submit.is-loading::after{

    content:"";

    position:absolute;

    top:50%;

    left:50%;

    width:18px;

    height:18px;

    margin-left:-9px;

    margin-top:-9px;

    border:2px solid rgba(255,255,255,.35);

    border-top-color:#fff;

    border-radius:50%;

    animation:authSpin .8s linear infinite;

}

.btn-auth-submit.is-loading{

    color:transparent;

}

@keyframes authSpin{

    to{

        transform:rotate(360deg);

    }

}

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

@media (max-width:768px){

    .auth-page{

        padding:24px 16px;

    }

    .auth-container{

        padding:26px;

        border-radius:18px;

    }

    .auth-logo img{

        width:72px;

        height:72px;

    }

    .auth-container h2{

        font-size:24px;

    }

    .auth-subtitle{

        font-size:.88rem;

        margin-bottom:24px;

    }

}

@media (max-width:480px){

    .auth-container{

        padding:22px;

    }

    .form-group input{

        height:50px;

    }

    .btn-auth-submit,

    .btn-steam-login{

        height:50px;

        font-size:.92rem;

    }

}
/* ==========================
      Steam Register Button
========================== */

.auth-steam-button{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    width:100%;

    height:54px;

    border-radius:14px;

    background:#171F30;

    border:1px solid #22304A;

    color:#F8FAFC;

    text-decoration:none;

    font-size:.95rem;

    font-weight:600;

    font-family:inherit;

    transition:.25s;

    box-sizing:border-box;

}

.auth-steam-button i{

    color:#60A5FA;

    font-size:22px;

}

.auth-steam-button:hover{

    background:#1E293B;

    border-color:#3B82F6;

    transform:translateY(-2px);

    box-shadow:
        0 12px 28px rgba(59,130,246,.22);

}


/* ==========================
      Steam Avatar
========================== */

.auth-steam-avatar{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    margin-bottom:22px;

}

.auth-steam-avatar img{

    width:82px;

    height:82px;

    border-radius:50%;

    object-fit:cover;

    border:3px solid #3B82F6;

    box-shadow:
        0 0 0 5px rgba(59,130,246,.12),
        0 0 25px rgba(59,130,246,.25);

}

.auth-steam-avatar-label{

    margin-top:10px;

    color:#94A3B8;

    font-size:.8rem;

}


/* ==========================
      Optional / Required
========================== */

.auth-required{

    color:#EF4444;

    margin-right:3px;

}

.auth-optional{

    color:#64748B;

    font-size:.78rem;

    font-weight:400;

    margin-right:4px;

}


/* ==========================
      Switch Divider
========================== */

.auth-switch-divider{

    color:#475569;

    margin:0 6px;

}


/* ==========================
      Register Inputs
========================== */

#registerForm .form-group input{

    direction:rtl;

}

#registerForm input[name="steamid64"],
#registerForm input[name="phone"]{

    direction:ltr;

    text-align:left;

}

#registerForm input[type="email"]{

    direction:ltr;

    text-align:left;

}


/* ==========================
      Mobile
========================== */

@media (max-width:480px){

    .auth-steam-avatar img{

        width:72px;

        height:72px;

    }

}
/* ==========================
      Auth Messages
========================== */

.auth-message{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:15px 16px;

    margin-bottom:22px;

    border-radius:14px;

    font-size:.92rem;

    line-height:1.7;

    text-align:center;

}

.auth-message i{

    font-size:20px;

    flex-shrink:0;

}


/* Success */

.auth-message.success{

    background:
        rgba(34,197,94,.10);

    border:
        1px solid
        rgba(34,197,94,.30);

    color:#86EFAC;

}


/* Error */

.auth-message.error{

    background:
        rgba(239,68,68,.10);

    border:
        1px solid
        rgba(239,68,68,.30);

    color:#FCA5A5;

}


/* ==========================
      Auth Message Buttons
========================== */

.auth-message-button{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    text-decoration:none;

    box-sizing:border-box;

    margin-top:4px;

}


.auth-message-button-secondary{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    width:100%;

    height:52px;

    border-radius:14px;

    background:#171F30;

    border:1px solid #22304A;

    color:#CBD5E1;

    text-decoration:none;

    font-size:.95rem;

    font-weight:600;

    transition:.25s;

    box-sizing:border-box;

}


.auth-message-button-secondary:hover{

    background:#1E293B;

    border-color:#3B82F6;

    color:#F8FAFC;

    transform:translateY(-2px);

    box-shadow:
        0 10px 24px
        rgba(59,130,246,.18);

}


/* ==========================
      Reset Password
========================== */

#resetPasswordForm{

    margin-top:4px;

}


#resetPasswordForm .btn-auth-submit{

    margin-top:6px;

}


/* ==========================
      Mobile
========================== */

@media (max-width:480px){

    .auth-message{

        font-size:.88rem;

    }

}
/* ==========================
      Forgot Password
========================== */

.auth-message-content{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:10px;

    min-width:0;

}

.auth-reset-link{

    display:block;

    max-width:100%;

    color:#60A5FA;

    font-size:.82rem;

    line-height:1.7;

    text-decoration:none;

    word-break:break-all;

    text-align:center;

    transition:.25s;

}

.auth-reset-link:hover{

    color:#93C5FD;

    text-decoration:underline;

}

#forgotPasswordForm{

    margin-top:4px;

}

#forgotPasswordForm input[name="steamid64"]{

    direction:ltr;

    text-align:left;

    letter-spacing:.3px;

}

@media (max-width:480px){

    .auth-reset-link{

        font-size:.75rem;

    }

}

/* Auth Warning Box - Dark Glass Theme */
.auth-warning-box {
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.25);
    color: #fbbf24;
    padding: 14px 16px;
    border-radius: 11px;
    margin-bottom: 20px;
    font-size: 0.88rem;
    line-height: 1.7;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 4px 12px rgba(2, 6, 23, 0.2);
}

.auth-warning-box i {
    font-size: 1.1rem;
    color: #f59e0b;
    flex-shrink: 0;
}