/* FlowPOS Login with Mascot Background */

html,
body{
    min-height:100%;
}

body.flow-login-page{
    margin:0;
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:32px;
    position:relative;
    overflow-x:hidden;

    background:
        linear-gradient(
            90deg,
            rgba(235,246,255,.10) 0%,
            rgba(255,255,255,.05) 46%,
            rgba(234,244,255,.14) 100%
        ),
        url("../images/login-bg.png") center center / cover no-repeat fixed;
}

body.flow-login-page::before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    background:linear-gradient(
        90deg,
        rgba(255,255,255,.04),
        rgba(255,255,255,.01)
    );
}

.flow-login-page .flow-login-card{
    width:min(420px,92vw);
    margin-left:clamp(280px,31vw,600px);
    padding:34px;
    position:relative;
    z-index:2;
    overflow:hidden;

    background:rgba(255,255,255,.88);
    border:1px solid rgba(255,255,255,.82);
    border-radius:24px;

    box-shadow:
        0 28px 70px rgba(22,62,120,.20),
        inset 0 1px 0 rgba(255,255,255,.88);

    -webkit-backdrop-filter:blur(18px) saturate(125%);
    backdrop-filter:blur(18px) saturate(125%);

    animation:flowLoginEnter .55s ease both;
}

.flow-login-page .flow-login-card::before{
    content:"";
    position:absolute;
    inset:0 0 auto;
    height:4px;
    background:linear-gradient(90deg,#55b5ff,#1767ff,#19b8b0);
}

.flow-login-page .login-brand{
    display:flex;
    align-items:center;
    gap:13px;
    margin-bottom:26px;
}

.flow-login-page .login-brand span{
    display:grid;
    place-items:center;
    width:44px;
    min-width:44px;
    height:44px;
    border-radius:14px;
    background:linear-gradient(135deg,#55b5ff,#1767ff);
    color:#fff;
    font-size:18px;
    font-weight:900;
    box-shadow:0 10px 24px rgba(23,103,255,.24);
}

.flow-login-page .login-brand h1{
    margin:0;
    color:#14213a;
    font-size:30px;
    line-height:1;
    letter-spacing:-.03em;
}

.flow-login-page .login-brand p{
    margin:6px 0 0;
    color:#77859c;
    font-size:13px;
}

.flow-login-page .flow-login-card label{
    display:block;
    margin:16px 0 0;
    color:#23314d;
    font-size:14px;
    font-weight:700;
}

.flow-login-page .flow-login-card input{
    display:block;
    width:100%;
    height:50px;
    margin-top:8px;
    padding:0 14px;
    border:1px solid rgba(202,216,235,.95);
    border-radius:13px;
    outline:0;
    background:rgba(249,252,255,.92);
    color:#17243c;
    font-size:16px;
    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        background .18s ease;
}

.flow-login-page .flow-login-card input:focus{
    border-color:#82b4ff;
    background:#fff;
    box-shadow:0 0 0 4px rgba(47,128,255,.10);
}

.flow-login-page .flow-login-card .primary{
    width:100%;
    min-height:50px;
    margin:22px 0 18px;
    border:0;
    border-radius:13px;
    background:linear-gradient(135deg,#55b5ff,#1767ff);
    color:#fff;
    font-weight:800;
    cursor:pointer;
    box-shadow:0 12px 26px rgba(23,103,255,.23);
    transition:
        transform .18s ease,
        box-shadow .18s ease,
        filter .18s ease;
}

.flow-login-page .flow-login-card .primary:hover{
    filter:brightness(1.03);
    transform:translateY(-1px);
    box-shadow:0 16px 30px rgba(23,103,255,.28);
}

.flow-login-page .flow-login-card .primary:active{
    transform:translateY(0) scale(.99);
}

.flow-login-page .flow-login-card > small{
    display:block;
    color:#8b97aa;
    text-align:center;
}

.flow-login-page .alert{
    margin-bottom:15px;
    padding:12px 14px;
    border-radius:10px;
    background:#fff0f0;
    color:#bd3434;
}

@keyframes flowLoginEnter{
    from{
        opacity:0;
        transform:translateY(16px) scale(.985);
    }
    to{
        opacity:1;
        transform:none;
    }
}

/* Notebook */
@media(max-width:1280px){
    .flow-login-page .flow-login-card{
        margin-left:clamp(180px,24vw,380px);
    }
}

/* Tablet */
@media(max-width:1024px){
    body.flow-login-page{
        justify-content:flex-start;
        background-position:58% center;
    }

    .flow-login-page .flow-login-card{
        margin-left:0;
    }
}

/* Mobile */
@media(max-width:767px){
    body.flow-login-page{
        align-items:flex-end;
        justify-content:center;
        padding:18px;

        background:
            linear-gradient(
                rgba(236,247,255,.55),
                rgba(245,250,255,.76)
            ),
            url("../images/login-bg.png") 68% center / cover no-repeat;
    }

    .flow-login-page .flow-login-card{
        width:100%;
        margin:0;
        padding:26px 22px;
        border-radius:22px;
        background:rgba(255,255,255,.94);
    }

    .flow-login-page .login-brand h1{
        font-size:27px;
    }
}

@media(max-width:420px){
    body.flow-login-page{
        padding:12px;
    }

    .flow-login-page .flow-login-card{
        padding:23px 18px;
        border-radius:20px;
    }
}

@media(prefers-reduced-motion:reduce){
    .flow-login-page .flow-login-card{
        animation:none;
    }
}.auth-switch{margin:16px 0 6px;text-align:center;color:#60708a;font-size:14px}.auth-switch a{color:#1767ff;font-weight:750;text-decoration:none}.flow-register-page{align-items:flex-start;overflow:auto}.flow-register-card{width:min(620px,100%);margin:28px auto;padding:28px}.register-form{display:grid;gap:14px}.register-password-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.register-form label small{font-weight:500;color:#78869b}.alert.success{background:#ecfdf3;color:#087a43}@media(max-width:640px){.register-password-grid{grid-template-columns:1fr}.flow-register-card{margin:0}}
.auth-forgot-link{display:flex;justify-content:flex-end;margin-top:9px}.auth-forgot-link a{color:#1767ff;font-size:13px;font-weight:750;text-decoration:none}
.auth-forgot-link a:hover,.auth-switch a:hover{text-decoration:underline}
.auth-primary-link{display:flex;align-items:center;justify-content:center;min-height:50px;margin:18px 0;border-radius:13px;background:linear-gradient(135deg,#55b5ff,#1767ff);color:#fff;font-weight:800;text-decoration:none;box-shadow:0 12px 26px rgba(23,103,255,.23)}