/* =========================
   ADMIN LOGIN
========================= */

.admin-login-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;

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

    padding: 24px;

    background: rgba(25, 22, 48, 0.18);

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

    opacity: 0;
    visibility: hidden;

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

.admin-login-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

.admin-login-box {
    width: min(360px, 100%);

    padding: 30px;

    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 20px;

    background: rgba(255, 255, 255, 0.88);

    box-shadow:
        0 24px 70px rgba(31, 27, 65, 0.24),
        0 8px 28px rgba(31, 27, 65, 0.14);

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

    transform: translateY(8px) scale(0.98);

    transition:
        transform 0.22s ease;
}

.admin-login-overlay.is-open .admin-login-box {
    transform: translateY(0) scale(1);
}

.admin-password-input {
    display: block;

    width: 100%;
    height: 48px;

    padding: 0 16px;

    border: 1px solid rgba(48, 45, 85, 0.13);
    border-radius: 12px;

    outline: none;

    background: rgba(255, 255, 255, 0.92);

    color: #302D55;

    font: inherit;
    font-size: 15px;

    text-align: center;

    box-shadow:
        inset 0 1px 2px rgba(48, 45, 85, 0.03);

    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease;
}

.admin-password-input:focus {
    border-color:
        rgba(108, 124, 255, 0.48);

    box-shadow:
        0 0 0 4px rgba(108, 124, 255, 0.10);
}

.admin-password-input::placeholder {
    color:
        rgba(48, 45, 85, 0.42);
}

.admin-login-box.is-shaking {
    animation: admin-login-shake 0.28s linear;
}

@keyframes admin-login-shake {

    0% {
        transform: translateX(0);
    }

    10% {
        transform: translateX(-16px);
    }

    20% {
        transform: translateX(15px);
    }

    30% {
        transform: translateX(-14px);
    }

    40% {
        transform: translateX(13px);
    }

    50% {
        transform: translateX(-11px);
    }

    60% {
        transform: translateX(10px);
    }

    70% {
        transform: translateX(-8px);
    }

    80% {
        transform: translateX(7px);
    }

    90% {
        transform: translateX(-4px);
    }

    100% {
        transform: translateX(0);
    }

}