/* =========================================================
   EchoCall AI
   File: css/login.css

   PREMIUM LOGIN DESIGN
   ========================================================= */


/* =========================================================
   PART 1 — RESET / ROOT / GLOBAL
   ========================================================= */

:root{

    --bg-main:#02040d;
    --bg-secondary:#050816;

    --surface:rgba(10,17,38,.76);
    --surface-strong:rgba(12,20,45,.90);
    --surface-light:rgba(255,255,255,.055);

    --border:rgba(255,255,255,.10);
    --border-bright:rgba(147,197,253,.24);

    --white:#ffffff;
    --text:#f8fafc;
    --text-secondary:#cbd5e1;
    --text-muted:#64748b;

    --blue:#2563eb;
    --blue-light:#3b82f6;
    --blue-bright:#60a5fa;

    --purple:#7c3aed;
    --purple-light:#a78bfa;

    --shadow:
        0 40px 110px rgba(0,0,0,.55);

    --radius:32px;
    --radius-input:18px;
    --radius-button:20px;

    --transition:.3s ease;

}


*{

    margin:0;
    padding:0;

    box-sizing:border-box;

    font-family:"Inter",sans-serif;

    -webkit-tap-highlight-color:transparent;

}


html{

    width:100%;
    min-height:100%;

    scroll-behavior:smooth;

}


body{

    width:100%;
    min-height:100vh;

    overflow-x:hidden;

    background:var(--bg-main);

    color:var(--white);

    -webkit-font-smoothing:antialiased;

    text-rendering:optimizeLegibility;

}


a{

    color:inherit;

    text-decoration:none;

}


img{

    display:block;

    max-width:100%;

}


button,
input{

    font:inherit;

}


.material-symbols-rounded{

    font-family:"Material Symbols Rounded";

    font-weight:normal;
    font-style:normal;

    font-size:24px;

    line-height:1;

    letter-spacing:normal;

    text-transform:none;

    display:inline-block;

    white-space:nowrap;

    word-wrap:normal;

    direction:ltr;

    font-feature-settings:"liga";

    -webkit-font-feature-settings:"liga";

    -webkit-font-smoothing:antialiased;

}


::selection{

    background:rgba(59,130,246,.35);

    color:#ffffff;

}


a:focus-visible,
button:focus-visible,
input:focus-visible{

    outline:2px solid var(--blue-bright);

    outline-offset:4px;

}


::-webkit-scrollbar{

    width:7px;

}


::-webkit-scrollbar-track{

    background:#02040d;

}


::-webkit-scrollbar-thumb{

    background:rgba(96,165,250,.30);

    border-radius:999px;

}


::-webkit-scrollbar-thumb:hover{

    background:rgba(96,165,250,.50);

}


/* =========================================================
   PART 2 — PREMIUM BACKGROUND
   ========================================================= */

.background{

    position:fixed;

    inset:0;

    z-index:-10;

    overflow:hidden;

    background:

        radial-gradient(
            circle at 50% 45%,
            rgba(30,64,175,.17),
            transparent 38%
        ),

        radial-gradient(
            circle at 8% 12%,
            rgba(124,58,237,.15),
            transparent 32%
        ),

        radial-gradient(
            circle at 92% 88%,
            rgba(37,99,235,.14),
            transparent 35%
        ),

        linear-gradient(
            145deg,
            #01030a 0%,
            #020617 45%,
            #050816 100%
        );

}


.background::before{

    content:"";

    position:absolute;

    inset:-20%;

    background-image:

        linear-gradient(
            rgba(96,165,250,.045) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(96,165,250,.045) 1px,
            transparent 1px
        );

    background-size:65px 65px;

    transform:
        perspective(800px)
        rotateX(58deg)
        translateY(20%);

    transform-origin:center;

    opacity:.7;

    mask-image:
        linear-gradient(
            to bottom,
            transparent,
            black 15%,
            black 80%,
            transparent
        );

    -webkit-mask-image:
        linear-gradient(
            to bottom,
            transparent,
            black 15%,
            black 80%,
            transparent
        );

}


.background::after{

    content:"";

    position:absolute;

    width:650px;
    height:650px;

    left:50%;
    top:48%;

    transform:
        translate(-50%,-50%);

    border-radius:50%;

    background:

        radial-gradient(
            circle,
            rgba(37,99,235,.13),
            rgba(124,58,237,.07) 35%,
            transparent 70%
        );

    filter:blur(25px);

    animation:
        backgroundPulse
        7s
        ease-in-out
        infinite;

}


@keyframes backgroundPulse{

    0%,
    100%{

        opacity:.65;

        transform:
            translate(-50%,-50%)
            scale(.95);

    }

    50%{

        opacity:1;

        transform:
            translate(-50%,-50%)
            scale(1.08);

    }

}


/* =========================================================
   PART 3 — MAIN CONTAINER
   ========================================================= */

.home-page{

    position:relative;

    z-index:1;

    width:100%;

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:35px 20px;

    perspective:1400px;

}


/* =========================================================
   PART 4 — LOGIN CARD
   ========================================================= */

.glass-card{

    position:relative;

    width:100%;

    max-width:520px;

    padding:42px 38px;

    overflow:hidden;

    border-radius:var(--radius);

    border:
        1px solid
        rgba(255,255,255,.11);

    background:

        linear-gradient(
            145deg,
            rgba(17,27,58,.88),
            rgba(6,12,29,.80)
        );

    box-shadow:

        0 40px 110px rgba(0,0,0,.55),

        0 20px 70px rgba(37,99,235,.13),

        inset 0 1px 0
        rgba(255,255,255,.10),

        inset 0 -1px 0
        rgba(0,0,0,.30);

    backdrop-filter:blur(28px);

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

    transform:translateZ(0);

    animation:
        cardEntrance
        .9s
        cubic-bezier(.2,.8,.2,1)
        both;

}


.glass-card::before{

    content:"";

    position:absolute;

    top:-2px;

    left:12%;

    width:76%;

    height:1px;

    background:

        linear-gradient(
            90deg,
            transparent,
            rgba(147,197,253,.65),
            rgba(167,139,250,.55),
            transparent
        );

    filter:blur(.5px);

}


.glass-card::after{

    content:"";

    position:absolute;

    width:300px;
    height:300px;

    top:-190px;
    right:-140px;

    border-radius:50%;

    background:
        rgba(37,99,235,.13);

    filter:blur(75px);

    pointer-events:none;

}


@keyframes cardEntrance{

    from{

        opacity:0;

        transform:
            translateY(35px)
            rotateX(5deg)
            scale(.97);

    }

    to{

        opacity:1;

        transform:
            translateY(0)
            rotateX(0)
            scale(1);

    }

}


.glass-card{

    isolation:isolate;

}


.glass-card > *{

    position:relative;

    z-index:2;

}

/* =========================================================
   PART 5 — LOGO
   ========================================================= */

.logo-large{

    position:relative;

    z-index:3;

    width:120px;

    height:120px;

    display:block;

    margin:0 auto;

    object-fit:contain;

    filter:
        drop-shadow(
            0 18px 38px
            rgba(37,99,235,.35)
        );

    animation:
        logoFloat
        5s
        ease-in-out
        infinite,

        logoGlow
        4s
        ease-in-out
        infinite;

}


@keyframes logoFloat{

    0%,
    100%{

        transform:
            translateY(0)
            rotate(0deg);

    }

    50%{

        transform:
            translateY(-9px)
            rotate(1deg);

    }

}


@keyframes logoGlow{

    0%,
    100%{

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

    }

    50%{

        filter:

            drop-shadow(
                0 0 40px
                rgba(96,165,250,.52)
            )

            drop-shadow(
                0 0 70px
                rgba(124,58,237,.20)
            );

    }

}


/* =========================================================
   PART 6 — TITLE
   ========================================================= */

.app-title{

    position:relative;

    z-index:3;

    margin-top:22px;

    text-align:center;

    font-size:
        clamp(
            30px,
            7vw,
            38px
        );

    line-height:1.05;

    font-weight:850;

    letter-spacing:-.055em;

    background:

        linear-gradient(
            110deg,
            #ffffff 0%,
            #dbeafe 30%,
            #60a5fa 62%,
            #a78bfa 100%
        );

    -webkit-background-clip:text;

    background-clip:text;

    -webkit-text-fill-color:transparent;

    color:transparent;

}


.app-title::after{

    content:"";

    display:block;

    width:70px;

    height:3px;

    margin:15px auto 0;

    border-radius:999px;

    background:

        linear-gradient(
            90deg,
            #2563eb,
            #a78bfa
        );

    box-shadow:
        0 0 20px
        rgba(96,165,250,.40);

}


/* =========================================================
   PART 7 — TAGLINE
   ========================================================= */

.tagline{

    position:relative;

    z-index:3;

    max-width:390px;

    margin:17px auto 34px;

    text-align:center;

    color:
        rgba(203,213,225,.72);

    font-size:14px;

    line-height:1.75;

}


/* =========================================================
   PART 8 — LOGIN FORM
   ========================================================= */

#loginForm{

    position:relative;

    z-index:4;

    width:100%;

}


/* =========================================================
   PART 9 — INPUT GROUP
   ========================================================= */

.input-group{

    display:flex;

    flex-direction:column;

    gap:8px;

    margin-bottom:20px;

}


.input-group label{

    color:#e2e8f0;

    font-size:13px;

    font-weight:650;

    letter-spacing:.01em;

}


/* =========================================================
   PART 10 — INPUTS
   ========================================================= */

.input-group input{

    width:100%;

    height:60px;

    padding:0 18px;

    border-radius:18px;

    border:
        1px solid
        rgba(255,255,255,.10);

    outline:none;

    background:

        linear-gradient(
            145deg,
            rgba(255,255,255,.065),
            rgba(255,255,255,.035)
        );

    color:#ffffff;

    font-size:15px;

    transition:

        border-color
        var(--transition),

        box-shadow
        var(--transition),

        transform
        var(--transition),

        background
        var(--transition);

    backdrop-filter:blur(12px);

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

}


.input-group input::placeholder{

    color:#64748b;

}


.input-group input:hover{

    border-color:
        rgba(255,255,255,.22);

    background:
        rgba(255,255,255,.07);

}


.input-group input:focus{

    border-color:
        rgba(59,130,246,.85);

    background:
        rgba(37,99,235,.065);

    box-shadow:

        0 0 0 4px
        rgba(37,99,235,.15),

        0 12px 35px
        rgba(37,99,235,.08);

    transform:
        translateY(-2px);

}


/* =========================================================
   PART 11 — PASSWORD WRAPPER
   ========================================================= */

.password-wrapper{

    position:relative;

    display:flex;

    align-items:center;

}


.password-wrapper input{

    padding-right:62px;

}


/* =========================================================
   PART 12 — PASSWORD TOGGLE
   ========================================================= */

.toggle-password{

    position:absolute;

    top:50%;

    right:9px;

    transform:
        translateY(-50%);

    width:44px;

    height:44px;

    border:none;

    border-radius:50%;

    background:transparent;

    color:#cbd5e1;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    transition:

        background
        var(--transition),

        color
        var(--transition),

        transform
        var(--transition);

}


.toggle-password:hover{

    background:
        rgba(255,255,255,.08);

    color:#ffffff;

}


.toggle-password:active{

    transform:
        translateY(-50%)
        scale(.94);

}


.toggle-password
.material-symbols-rounded{

    font-size:24px;

}
/* =========================================================
   PART 13 — FORGOT PASSWORD
   ========================================================= */

.forgot-password{

    display:flex;

    justify-content:flex-end;

    margin:
        -6px 0 24px;

}


.forgot-password button{

    border:none;

    background:transparent;

    padding:8px 0;

    margin:0;

    color:#60a5fa;

    font-family:"Inter",sans-serif;

    font-size:13px;

    font-weight:650;

    cursor:pointer;

    touch-action:manipulation;

    -webkit-tap-highlight-color:transparent;

    transition:

        color
        var(--transition),

        transform
        var(--transition);

}


.forgot-password button:hover{

    color:#93c5fd;

    text-decoration:underline;

}


.forgot-password button:active{

    transform:
        scale(.97);

}


/* =========================================================
   PART 14 — DIVIDER
   ========================================================= */

.divider{

    display:flex;

    align-items:center;

    gap:14px;

    margin:28px 0;

    color:#94a3b8;

    font-size:13px;

    font-weight:600;

}


.divider::before,
.divider::after{

    content:"";

    flex:1;

    height:1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.12)
        );

}


.divider::after{

    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.12),
            transparent
        );

}


/* =========================================================
   PART 15 — GOOGLE BUTTON
   ========================================================= */

.google-btn{

    position:relative;

    width:100%;

    min-height:60px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    margin-bottom:18px;

    overflow:hidden;

    border-radius:18px;

    text-decoration:none;

    background:
        rgba(255,255,255,.055);

    border:
        1px solid
        rgba(255,255,255,.11);

    color:#ffffff;

    font-size:15px;

    font-weight:700;

    backdrop-filter:blur(14px);

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

    transition:

        transform
        var(--transition),

        background
        var(--transition),

        border-color
        var(--transition),

        box-shadow
        var(--transition);

}


.google-btn::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:75%;

    height:100%;

    background:

        linear-gradient(
            100deg,
            transparent,
            rgba(255,255,255,.13),
            transparent
        );

    transform:
        skewX(-22deg);

    transition:
        left .7s ease;

}


.google-btn:hover::before{

    left:150%;

}


.google-btn img{

    width:23px;

    height:23px;

    object-fit:contain;

    position:relative;

    z-index:2;

}


.google-btn:hover{

    background:
        rgba(255,255,255,.09);

    border-color:
        rgba(255,255,255,.18);

    transform:
        translateY(-3px);

    box-shadow:
        0 18px 40px
        rgba(0,0,0,.24);

}


/* =========================================================
   PART 16 — LOGIN BUTTON
   ========================================================= */

.primary-btn{

    position:relative;

    width:100%;

    min-height:62px;

    border:none;

    outline:none;

    overflow:hidden;

    border-radius:20px;

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:11px;

    background:

        linear-gradient(
            135deg,
            #1d4ed8 0%,
            #2563eb 42%,
            #6366f1 100%
        );

    border:
        1px solid
        rgba(147,197,253,.30);

    color:#ffffff;

    font-size:16px;

    font-weight:750;

    box-shadow:

        0 18px 45px
        rgba(37,99,235,.30),

        inset 0 1px 0
        rgba(255,255,255,.22);

    transition:

        transform
        var(--transition),

        box-shadow
        var(--transition),

        filter
        var(--transition);

}


.primary-btn::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:75%;

    height:100%;

    background:

        linear-gradient(
            100deg,
            transparent,
            rgba(255,255,255,.16),
            transparent
        );

    transform:
        skewX(-22deg);

    transition:
        left .7s ease;

}


.primary-btn:hover::before{

    left:150%;

}


.primary-btn:hover{

    transform:
        translateY(-4px);

    filter:
        brightness(1.08);

    box-shadow:

        0 26px 60px
        rgba(37,99,235,.42),

        0 0 35px
        rgba(99,102,241,.15),

        inset 0 1px 0
        rgba(255,255,255,.28);

}


.primary-btn:active{

    transform:
        translateY(-1px)
        scale(.99);

}


.primary-btn
.material-symbols-rounded{

    position:relative;

    z-index:2;

    font-size:25px;

}


/* =========================================================
   PART 17 — LOADING STATE
   ========================================================= */

.primary-btn.loading{

    pointer-events:none;

    opacity:.82;

}


.primary-btn.loading::after{

    content:"";

    position:absolute;

    width:18px;

    height:18px;

    margin-left:10px;

    border:
        2px solid
        rgba(255,255,255,.30);

    border-top-color:#ffffff;

    border-radius:50%;

    animation:
        spin
        .8s
        linear
        infinite;

}


@keyframes spin{

    from{

        transform:
            rotate(0deg);

    }

    to{

        transform:
            rotate(360deg);

    }

}


/* =========================================================
   PART 18 — AUTH FOOTER
   ========================================================= */

.auth-footer{

    position:relative;

    z-index:3;

    margin-top:30px;

    text-align:center;

    color:#94a3b8;

    font-size:13px;

    line-height:1.7;

}


.auth-footer a{

    color:#60a5fa;

    text-decoration:none;

    font-weight:750;

    transition:
        color
        var(--transition);

}


.auth-footer a:hover{

    color:#93c5fd;

    text-decoration:underline;

}


/* =========================================================
   PART 19 — MOBILE
   ========================================================= */

@media(max-width:600px){

    .home-page{

        min-height:100svh;

        padding:
            18px 14px;

        align-items:flex-start;

    }


    .glass-card{

        max-width:470px;

        margin:
            10px auto 20px;

        padding:
            34px 23px;

        border-radius:27px;

    }


    .logo-large{

        width:105px;

        height:105px;

    }


    .app-title{

        margin-top:19px;

        font-size:29px;

    }


    .tagline{

        margin-bottom:29px;

        font-size:13px;

        line-height:1.7;

    }


    .input-group{

        margin-bottom:17px;

    }


    .input-group input{

        height:57px;

        border-radius:17px;

        font-size:14px;

    }


    .google-btn{

        min-height:57px;

        border-radius:17px;

        font-size:14px;

    }


    .primary-btn{

        min-height:58px;

        border-radius:18px;

        font-size:15px;

    }


    .toggle-password{

        width:41px;

        height:41px;

    }


    .forgot-password{

        margin:
            -4px 0 21px;

    }


    .forgot-password button{

        font-size:12.5px;

    }


    .auth-footer{

        margin-top:25px;

        font-size:12.5px;

    }

}


/* =========================================================
   PART 20 — SMALL PHONES
   ========================================================= */

@media(max-width:380px){

    .home-page{

        padding:
            14px 11px;

    }


    .glass-card{

        padding:
            28px 18px;

        border-radius:24px;

    }


    .logo-large{

        width:88px;

        height:88px;

    }


    .app-title{

        font-size:25px;

        margin-top:17px;

    }


    .app-title::after{

        width:55px;

        height:2px;

        margin-top:12px;

    }


    .tagline{

        margin-top:13px;

        margin-bottom:24px;

        font-size:12px;

    }


    .input-group{

        gap:7px;

        margin-bottom:15px;

    }


    .input-group label{

        font-size:12px;

    }


    .input-group input{

        height:54px;

        border-radius:16px;

        padding:
            0 15px;

        font-size:13px;

    }


    .password-wrapper input{

        padding-right:56px;

    }


    .toggle-password{

        width:38px;

        height:38px;

        right:7px;

    }


    .toggle-password
    .material-symbols-rounded{

        font-size:22px;

    }


    .forgot-password{

        margin:
            -3px 0 18px;

    }


    .divider{

        margin:
            23px 0;

        font-size:12px;

    }


    .google-btn{

        min-height:54px;

        border-radius:16px;

        font-size:13px;

    }


    .primary-btn{

        min-height:55px;

        border-radius:16px;

        font-size:14px;

    }


    .primary-btn
    .material-symbols-rounded{

        font-size:22px;

    }

}


/* =========================================================
   PART 21 — VERY SMALL SCREENS
   ========================================================= */

@media(max-width:320px){

    .glass-card{

        padding:
            24px 15px;

    }


    .logo-large{

        width:78px;

        height:78px;

    }


    .app-title{

        font-size:23px;

    }


    .tagline{

        font-size:11px;

    }


    .input-group input{

        height:52px;

        font-size:12px;

    }


    .google-btn,
    .primary-btn{

        min-height:52px;

    }

}


/* =========================================================
   PART 22 — LANDSCAPE PHONES
   ========================================================= */

@media(max-height:600px) and (orientation:landscape){

    .home-page{

        align-items:flex-start;

        padding:
            20px;

    }


    .glass-card{

        margin:
            10px auto;

        padding:
            25px;

    }


    .logo-large{

        width:72px;

        height:72px;

    }


    .app-title{

        margin-top:12px;

        font-size:25px;

    }


    .tagline{

        margin-top:8px;

        margin-bottom:18px;

    }


    .input-group{

        margin-bottom:12px;

    }


    .input-group input{

        height:48px;

    }


    .google-btn,
    .primary-btn{

        min-height:49px;

    }

}


/* =========================================================
   PART 23 — REDUCED MOTION
   ========================================================= */

@media(prefers-reduced-motion:reduce){

    *,
    *::before,
    *::after{

        animation-duration:.01ms !important;

        animation-iteration-count:1 !important;

        transition-duration:.01ms !important;

        scroll-behavior:auto !important;

    }

}


/* =========================================================
   END OF LOGIN.CSS
   ========================================================= */