/* =====================================
   Login Modal
===================================== */

.ir-login-modal{
    position:fixed;
    inset:0;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:24px;

    background:rgba(10,15,25,.58);

    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);

    opacity:0;
    visibility:hidden;

    transition:.25s ease;

    z-index:999999;
}

.ir-login-modal.active{
    opacity:1;
    visibility:visible;
}

/* =====================================
   Login Card
===================================== */

.ir-login-card{

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

    background:#fff;

    border-radius:28px;

    padding:44px 46px 40px;

    text-align:center;

    box-shadow:
        0 30px 80px rgba(0,0,0,.22),
        0 10px 25px rgba(0,0,0,.08);

    transform:translateY(20px) scale(.96);

    transition:.28s cubic-bezier(.2,.8,.2,1);
}

.ir-login-modal.active .ir-login-card{
    transform:translateY(0) scale(1);
}

.ir-login-logo{

    display:block;

    width:220px;
    height:auto;

    margin:0 auto 34px;
}

.ir-login-card p{

    margin:0 0 28px;

    font-size:16px;
    line-height:1.75;

    color:#5b6576;

    font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}

/* =====================================
   Social Buttons
===================================== */

.ir-google-btn,
.ir-facebook-btn,
.ir-apple-btn{

    width:100%;
    max-width:390px;
    height:46px;

    margin:0 auto 14px;

    padding:0 18px;

    box-sizing:border-box;

    display:grid;
    grid-template-columns:20px 1fr;
    column-gap:16px;
    align-items:center;

    background:#fff;

    border:1px solid #dadce0;
    border-radius:8px;

    cursor:pointer;

    font-family:Roboto,Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    font-size:14px;
    font-weight:500;

    color:#3c4043;

    transition:
        background-color .2s,
        border-color .2s,
        box-shadow .2s,
        transform .2s;

    user-select:none;
}

.ir-google-btn:hover,
.ir-facebook-btn:hover,
.ir-apple-btn:hover{

    background:#f8f9fa;

    border-color:#c6c6c6;

    box-shadow:0 2px 8px rgba(60,64,67,.15);

}

.ir-google-btn:active,
.ir-facebook-btn:active,
.ir-apple-btn:active{
    background:#f1f3f4;
    transform:none;
    box-shadow:none;
}

.ir-google-btn >span,
.ir-facebook-btn >span,
.ir-apple-btn >span{
    text-align:left;
    color:#3c4043;
    white-space:nowrap;
    font:inherit;
    text-transform:none;
}

.ir-google-btn svg{

    width:18px;
    height:18px;
}

.ir-social-icon{

    width:18px;
    height:18px;

    object-fit:contain;
}

.ir-facebook-btn{

    margin-bottom:14px;
}

.ir-apple-btn{

    margin-bottom:44px;
}

.ir-google-btn:focus{

    outline:none;

    border-color:#1a73e8;

    box-shadow:0 0 0 3px rgba(26,115,232,.18);
}

.ir-facebook-btn:focus{

    outline:none;

    border-color:#1877F2;

    box-shadow:0 0 0 3px rgba(24,119,242,.18);
}

.ir-apple-btn:focus{

    outline:none;

    border-color:#111;

    box-shadow:0 0 0 3px rgba(0,0,0,.14);
}

.ir-apple-btn strong{

    font-weight:700;
}

/* =====================================
   Hidden Nextend Buttons
===================================== */

.ir-login-card .nsl-container{

    position:absolute !important;

    width:1px !important;
    height:1px !important;

    margin:0 !important;
    padding:0 !important;

    overflow:hidden !important;

    clip:rect(0,0,0,0) !important;
    clip-path:inset(50%) !important;

    white-space:nowrap !important;

    opacity:0 !important;

    pointer-events:none !important;
}

.ir-login-card .nsl-container-buttons,
.ir-login-card .nsl-container-buttons > a{

    display:block !important;

    width:1px !important;
    height:1px !important;
}

.ir-login-card .nsl-button{

    width:1px !important;
    height:1px !important;

    min-width:1px !important;
    min-height:1px !important;

    margin:0 !important;
    padding:0 !important;

    border:none !important;

    background:transparent !important;

    box-shadow:none !important;

    overflow:hidden !important;

    opacity:0 !important;
}

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

.ir-login-footer{

    margin-top:42px;

    padding-top:26px;

    border-top:1px solid #eef1f5;

    font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

    font-size:14px;

    line-height:1.8;

    color:#8b94a5;
}

.ir-login-footer a{

    color:#2563eb;

    text-decoration:none;

    font-weight:600;

    transition:color .2s;
}

.ir-login-footer a:hover{

    color:#1d4ed8;
}

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

.ir-login-cancel{

    display:inline-flex;

    align-items:center;
    justify-content:center;

    width:220px;
    height:58px;

    margin-top:30px;

    border:none;

    border-radius:999px;

    background:#ef8500;

    color:#fff;

    font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

    font-size:18px;

    font-weight:700;

    cursor:pointer;

    transition:
        background .25s,
        transform .25s,
        box-shadow .25s;

    box-shadow:0 10px 24px rgba(239,133,0,.28);
}

.ir-login-cancel:hover{

    background:#dc7a00;

    transform:translateY(-2px);

    box-shadow:0 18px 36px rgba(239,133,0,.36);
}

.ir-login-cancel:active{

    transform:translateY(0);

    box-shadow:0 8px 18px rgba(239,133,0,.25);
}

.ir-login-cancel:focus{

    outline:none;

    box-shadow:
        0 0 0 4px rgba(239,133,0,.20),
        0 18px 36px rgba(239,133,0,.30);
}

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

@media (max-width:600px){

    .ir-login-modal{
        padding:16px;
    }

    .ir-login-card{

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

        padding:44px 32px 40px;

        border-radius:28px;
    }

    .ir-login-logo{

        width:220px;

        margin:0 auto 34px;
    }

    .ir-login-card p{

        font-size:16px;
        line-height:1.75;

        margin:0 0 28px;
    }

    .ir-google-btn,
    .ir-facebook-btn,
    .ir-apple-btn{

        height:46px;
        max-width:390px;

        padding:0 18px;

        grid-template-columns:20px 1fr;
        column-gap:16px;

        font-size:14px;
    }

    .ir-google-btn > span,
    .ir-facebook-btn > span,
    .ir-apple-btn > span{

        white-space:nowrap;
        line-height:normal;
        text-transform:none;
    }

    .ir-google-btn{
        margin-bottom:14px;
    }

    .ir-facebook-btn{
        margin-bottom:14px;
    }

    .ir-apple-btn{
        margin-bottom:44px;
    }

    .ir-login-footer{

        margin-top:42px;

        padding-top:26px;

        font-size:14px;
    }

    .ir-login-cancel{

        width:220px;
        height:58px;

        margin-top:30px;

        font-size:18px;
    }

}

@media (max-width:380px){

    .ir-login-card{

        padding:36px 20px;
    }

}