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

   PREMIUM SIGNUP 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;

    --cyan:#22d3ee;
    --green:#22c55e;

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

    --shadow-blue:
        0 25px 80px rgba(37,99,235,.25);

    --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,
select{

    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,
select: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 — SIGNUP 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 — GLASS 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);

    }

}


/* Keep content above decorative layers */

.glass-card{

    isolation:isolate;

}


.glass-card > *{

    position:relative;

    z-index:2;

}

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

.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 0;

    text-align:center;

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

    font-size:14px;

    line-height:1.75;

    font-weight:400;

}


/* =========================================================
   PART 8 — SIGNUP FORM
   ========================================================= */

#signupForm{

    position:relative;

    z-index:4;

    margin-top:34px;

}


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

.input-group{

    position:relative;

    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,
.input-group select{

    width:100%;

    height:60px;

    padding:
        0 18px;

    border-radius:
        var(--radius-input);

    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;

    font-weight:450;

    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,
.input-group select:hover{

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

    background:

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

}


.input-group input:focus,
.input-group select: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 — SELECT
   ========================================================= */

.input-group select{

    cursor:pointer;

    appearance:none;

    -webkit-appearance:none;

    padding-right:45px;

}


.input-group select option{

    background:#0b1226;

    color:#ffffff;

}


/* =========================================================
   PART 12 — DATE
   ========================================================= */

input[type="date"]{

    color:#ffffff;

}


input[type="date"]::-webkit-calendar-picker-indicator{

    filter:invert(1);

    cursor:pointer;

    opacity:.75;

}


input[type="date"]::-webkit-calendar-picker-indicator:hover{

    opacity:1;

}


/* =========================================================
   PART 13 — PASSWORD
   ========================================================= */

input[type="password"]{

    letter-spacing:.4px;

}


/* =========================================================
   PART 14 — DISABLED
   ========================================================= */

input:disabled,
select:disabled{

    opacity:.55;

    cursor:not-allowed;

    filter:saturate(.6);

}

/* =========================================================
   PART 15 — CHECKBOX
   ========================================================= */

.checkbox{

    position:relative;

    display:flex;

    align-items:flex-start;

    gap:12px;

    margin:
        22px 0
        28px;

    color:#cbd5e1;

    font-size:13px;

    line-height:1.65;

    cursor:pointer;

}


.checkbox input{

    flex:0 0 auto;

    width:20px;

    height:20px;

    margin-top:2px;

    accent-color:#2563eb;

    cursor:pointer;

}


.checkbox span{

    flex:1;

}


.checkbox:hover{

    color:#e2e8f0;

}


/* =========================================================
   PART 16 — PRIMARY BUTTON
   ========================================================= */

.primary-btn{

    position:relative;

    width:100%;

    min-height:62px;

    padding:
        0 20px;

    border:none;

    outline:none;

    overflow:hidden;

    border-radius:
        var(--radius-button);

    display:flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    cursor:pointer;

    color:#ffffff;

    font-size:16px;

    font-weight:750;

    letter-spacing:-.01em;

    background:

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

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

    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;

    border-radius:50%;

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

    border-top-color:#ffffff;

    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;

    padding-top:4px;

    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{

        max-width:330px;

        font-size:13px;

        line-height:1.7;

    }


    #signupForm{

        margin-top:29px;

    }


    .input-group{

        margin-bottom:17px;

    }


    .input-group input,
    .input-group select{

        height:57px;

        border-radius:17px;

        font-size:14px;

    }


    .primary-btn{

        min-height:58px;

        border-radius:18px;

        font-size:15px;

    }


    .checkbox{

        margin:
            20px 0 25px;

        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;

        font-size:12px;

    }


    #signupForm{

        margin-top:25px;

    }


    .input-group{

        gap:7px;

        margin-bottom:15px;

    }


    .input-group label{

        font-size:12px;

    }


    .input-group input,
    .input-group select{

        height:54px;

        border-radius:16px;

        font-size:13px;

        padding:
            0 15px;

    }


    .checkbox{

        gap:9px;

        font-size:11.5px;

    }


    .checkbox input{

        width:18px;

        height:18px;

    }


    .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,
    .input-group select{

        height:52px;

        font-size:12px;

    }

}


/* =========================================================
   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;

    }


    #signupForm{

        margin-top:18px;

    }


    .input-group{

        margin-bottom:12px;

    }


    .input-group input,
    .input-group select{

        height:48px;

    }


    .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 SIGNUP.CSS
   ========================================================= */