/* =====================================================
   AUTH POPUP
===================================================== */

.auth-popup-wrapper {
    position: fixed;
    inset: 0;
    z-index: 9999;

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

    padding: 20px;

    opacity: 0;
    visibility: hidden;

    transition:
        opacity 0.25s ease,
        visibility 0.25s ease;
}


.auth-popup-wrapper.show {
    opacity: 1;
    visibility: visible;
}


/* =====================================================
   BACKDROP
===================================================== */

.auth-popup-backdrop {
    position: absolute;
    inset: 0;

    background:
        rgba(0, 0, 0, 0.55);

    backdrop-filter:
        blur(6px);
}


/* =====================================================
   POPUP CARD
===================================================== */

.auth-popup {
    position: relative;
    z-index: 1;

    width: min(420px, 100%);

    padding: 34px 28px 30px;

    text-align: center;

    background:
        var(--card);

    color:
        var(--text);

    border:
        1px solid var(--border);

    border-radius:
        22px;

    box-shadow:
        0 25px 70px
        rgba(0, 0, 0, 0.25);

    transform:
        translateY(20px)
        scale(0.95);

    transition:
        transform 0.3s ease;
}


.auth-popup-wrapper.show
.auth-popup {

    transform:
        translateY(0)
        scale(1);

}


/* =====================================================
   CONTENT
===================================================== */

.auth-popup-content h3 {

    margin:
        18px 0 6px;

    font-size:
        22px;

}


.auth-popup-content p {

    margin:
        0;

    color:
        var(--muted);

    font-size:
        15px;

    line-height:
        1.5;

}


/* =====================================================
   LOADING SPINNER
===================================================== */

.auth-popup-spinner {

    width:
        64px;

    height:
        64px;

    margin:
        0 auto;

    align-items:
        center;

    justify-content:
        center;
}


.auth-popup-spinner span {

    width:
        52px;

    height:
        52px;

    border:
        4px solid
        var(--border);

    border-top-color:
        var(--primary);

    border-radius:
        50%;

    animation:
        authSpin
        0.8s linear infinite;
}


@keyframes authSpin {

    to {
        transform:
            rotate(360deg);
    }

}


/* =====================================================
   SUCCESS ICON
===================================================== */

.auth-success-icon {

    width:
        64px;

    height:
        64px;

    margin:
        0 auto;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        #dcfce7;

    color:
        #16a34a;

    font-size:
        28px;

    animation:
        authSuccessPop
        0.45s ease;
}


.auth-success-icon i {

    animation:
        authCheck
        0.45s ease
        0.15s both;

}


@keyframes authSuccessPop {

    0% {
        transform:
            scale(0.5);
        opacity:
            0;
    }

    70% {
        transform:
            scale(1.1);
    }

    100% {
        transform:
            scale(1);
        opacity:
            1;
    }

}


@keyframes authCheck {

    from {
        transform:
            scale(0)
            rotate(-45deg);

        opacity:
            0;
    }

    to {
        transform:
            scale(1)
            rotate(0);

        opacity:
            1;
    }

}


/* =====================================================
   ERROR ICON
===================================================== */

.auth-error-icon {

    width:
        64px;

    height:
        64px;

    margin:
        0 auto;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        #fee2e2;

    color:
        #dc2626;

    font-size:
        28px;

    animation:
        authErrorPop
        0.35s ease;

}


@keyframes authErrorPop {

    0% {
        transform:
            scale(0.6);

        opacity:
            0;
    }

    70% {
        transform:
            scale(1.08);
    }

    100% {
        transform:
            scale(1);

        opacity:
            1;
    }

}


/* =====================================================
   CLOSE BUTTON
===================================================== */

.auth-popup-close {

    position:
        absolute;

    top:
        12px;

    right:
        12px;

    width:
        34px;

    height:
        34px;

    display:
        none;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        var(--border);

    border-radius:
        50%;

    background:
        transparent;

    color:
        var(--muted);

    cursor:
        pointer;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease;
}


.auth-popup-close:hover {

    background:
        var(--soft);

    color:
        var(--primary);

    border-color:
        var(--primary);

}


/* =====================================================
   DARK MODE
===================================================== */

html[data-theme="dark"]
.auth-success-icon {

    background:
        rgba(22, 163, 74, 0.15);

    color:
        #4ade80;

}


html[data-theme="dark"]
.auth-error-icon {

    background:
        rgba(220, 38, 38, 0.15);

    color:
        #f87171;

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 600px) {

    .auth-popup {

        padding:
            30px 22px 26px;

        border-radius:
            20px;

    }


    .auth-popup-content h3 {

        font-size:
            20px;

    }


    .auth-popup-content p {

        font-size:
            14px;

    }

}