/* ==========================================================
   AI VISIBILITY ANALYZER
   LOGIN PAGE
========================================================== */


/* ==========================================================
   GLOBAL RESET
========================================================== */

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

}


html{

    min-height:100%;

}


body{

    min-height:100vh;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #1d4ed8
        );

    display:flex;

    justify-content:center;

    align-items:center;

    padding:20px;

}


/* ==========================================================
   LOGIN CARD
========================================================== */

.login-card{

    width:100%;

    max-width:520px;

    background:#ffffff;

    border-radius:22px;

    padding:50px 40px;

    text-align:center;

    box-shadow:
        0 20px 60px
        rgba(0,0,0,.20);

}


.login-card h1{

    font-size:50px;

    line-height:1.15;

    color:#2563eb;

    margin-bottom:20px;

}


.login-card p{

    color:#666666;

    font-size:20px;

    line-height:1.7;

    margin-bottom:40px;

}


/* ==========================================================
   GOOGLE BUTTON
========================================================== */

.google-btn{

    width:100%;

    height:62px;

    border:none;

    border-radius:12px;

    background:#2563eb;

    color:#ffffff;

    font-size:22px;

    font-weight:600;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:15px;

    cursor:pointer;

    transition:

        background .25s ease,

        transform .25s ease,

        box-shadow .25s ease,

        opacity .25s ease;

}


.google-btn:hover{

    background:#1d4ed8;

    transform:translateY(-2px);

    box-shadow:
        0 10px 25px
        rgba(29,78,216,.30);

}


.google-btn:active{

    transform:translateY(0);

}


.google-btn:disabled{

    transform:none;

    cursor:wait;

}


.google-btn img{

    width:28px;

    height:28px;

    background:#ffffff;

    border-radius:50%;

    padding:4px;

}


/* ==========================================================
   BACK HOME
========================================================== */

.back-home{

    display:inline-block;

    margin-top:35px;

    color:#2563eb;

    text-decoration:none;

    font-size:18px;

    font-weight:600;

    transition:.2s ease;

}


.back-home:hover{

    text-decoration:underline;

}


/* ==========================================================
   LOADING OVERLAY
========================================================== */

.loading-overlay{

    position:fixed;

    inset:0;

    width:100%;

    height:100%;

    background:
        rgba(12,25,55,.94);

    display:none;

    justify-content:center;

    align-items:center;

    padding:20px;

    z-index:99999;

}


/* ==========================================================
   LOADER CARD
========================================================== */

.loader-card{

    width:100%;

    max-width:520px;

    background:#ffffff;

    border-radius:22px;

    padding:45px 40px;

    text-align:center;

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

    animation:
        loaderAppear .35s ease;

}


@keyframes loaderAppear{

    from{

        opacity:0;

        transform:scale(.96);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}


/* ==========================================================
   AI LOGO
========================================================== */

.ai-logo{

    font-size:68px;

    line-height:1;

    margin-bottom:18px;

    animation:
        floatAI 2s ease-in-out infinite;

}


@keyframes floatAI{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

    100%{

        transform:translateY(0);

    }

}


/* ==========================================================
   LOADER TITLE
========================================================== */

.loader-card h2{

    margin:0 0 30px;

    font-size:32px;

    line-height:1.25;

    color:#2563eb;

}


/* ==========================================================
   LOGIN PROGRESS CONTAINER
========================================================== */

.login-progress-container{

    width:100%;

    margin:0 auto 30px;

}


/* ==========================================================
   PROGRESS TRACK
========================================================== */

.login-progress-track{

    position:relative;

    width:100%;

    height:28px;

    background:#e5e7eb;

    border-radius:999px;

    overflow:hidden;

    border:1px solid #dbe3ef;

    box-shadow:
        inset 0 2px 5px
        rgba(0,0,0,.08);

}


/* ==========================================================
   PROGRESS BAR
========================================================== */

.login-progress-bar{

    position:relative;

    width:0%;

    height:100%;

    min-width:0;

    border-radius:999px;

    background:
        linear-gradient(
            135deg,
            #2563eb 25%,
            #3b82f6 25%,
            #3b82f6 50%,
            #2563eb 50%,
            #2563eb 75%,
            #3b82f6 75%
        );

    background-size:40px 40px;

    box-shadow:
        0 4px 14px
        rgba(37,99,235,.30);

    transition:
        width .12s linear;

    animation:
        loginProgressStripes
        1s linear infinite;

}


@keyframes loginProgressStripes{

    from{

        background-position:0 0;

    }

    to{

        background-position:40px 0;

    }

}


/* ==========================================================
   PERCENTAGE
========================================================== */

.login-progress-text{

    position:absolute;

    right:12px;

    top:50%;

    transform:translateY(-50%);

    color:#ffffff;

    font-size:13px;

    font-weight:800;

    line-height:1;

    text-shadow:
        0 1px 3px
        rgba(0,0,0,.30);

}


/* ==========================================================
   LOADING MESSAGE
========================================================== */

#loadingMessage{

    margin:0;

    font-size:20px;

    line-height:1.5;

    color:#374151;

    font-weight:700;

}


/* ==========================================================
   LOGIN STATUS
========================================================== */

.login-status{

    margin:10px 0 0;

    color:#64748b;

    font-size:14px;

    line-height:1.6;

}


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

@media(max-width:768px){

    body{

        padding:15px;

    }


    .login-card{

        width:100%;

        padding:35px 25px;

    }


    .login-card h1{

        font-size:38px;

    }


    .login-card p{

        font-size:17px;

        margin-bottom:30px;

    }


    .google-btn{

        height:58px;

        font-size:18px;

    }


    .loader-card{

        width:100%;

        padding:35px 25px;

    }


    .loader-card h2{

        font-size:28px;

        margin-bottom:25px;

    }


    .ai-logo{

        font-size:60px;

    }


    .login-progress-track{

        height:26px;

    }


    #loadingMessage{

        font-size:17px;

    }


    .login-status{

        font-size:13px;

    }

}


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

@media(max-width:480px){

    .login-card{

        padding:30px 20px;

        border-radius:18px;

    }


    .login-card h1{

        font-size:32px;

    }


    .login-card p{

        font-size:15px;

        line-height:1.6;

    }


    .google-btn{

        font-size:16px;

        height:55px;

    }


    .google-btn img{

        width:25px;

        height:25px;

    }


    .loader-card{

        padding:30px 20px;

        border-radius:18px;

    }


    .loader-card h2{

        font-size:24px;

    }


    .ai-logo{

        font-size:52px;

    }


    .login-progress-track{

        height:24px;

    }


    .login-progress-text{

        right:9px;

        font-size:11px;

    }


    #loadingMessage{

        font-size:16px;

    }

}