*{
    box-sizing:border-box;
}

html,
body{
    margin:0;
    padding:0;
    width:100%;
    min-height:100%;
}

body{

    min-height:100vh;

    font-family:Arial,sans-serif;

    background:

    radial-gradient(

        circle at top left,

        #3a2368,

        #0b0910 55%

    );

}


.customer-signup-page{

    min-height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:20px;

}


.customer-signup-card{

    width:100%;

    max-width:460px;

    padding:35px 28px;

    text-align:center;

    background:

    rgba(24,22,32,.96);

    border:1px solid

    rgba(255,255,255,.10);

    border-radius:26px;

    box-shadow:

    0 25px 80px

    rgba(0,0,0,.55);

}


.signup-logo{

    width:64px;

    height:64px;

    margin:0 auto 14px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:

    linear-gradient(

        135deg,

        #7548ff,

        #a06eff

    );

    color:white;

    font-size:28px;

    font-weight:bold;

    box-shadow:

    0 10px 30px

    rgba(117,72,255,.35);

}


.customer-signup-card h1{

    margin:0;

    color:white;

    font-size:27px;

}


.signup-subtitle{

    margin:7px 0 28px;

    color:#999;

    font-size:14px;

}


.customer-signup-card h2{

    margin:0 0 22px;

    color:#b18aff;

    font-size:21px;

}


.signup-field{

    margin-bottom:16px;

    text-align:left;

}


.signup-field label{

    display:block;

    margin-bottom:8px;

    color:#ddd;

    font-size:14px;

    font-weight:bold;

}


.signup-field input{

    width:100%;

    height:52px;

    padding:0 16px;

    border:1px solid

    rgba(255,255,255,.13);

    border-radius:13px;

    outline:none;

    background:#111016;

    color:white;

    font-size:15px;

    transition:.25s;

}


.signup-field input::placeholder{

    color:#777;

}


.signup-field input:focus{

    border-color:#8657ff;

    box-shadow:

    0 0 0 4px

    rgba(134,87,255,.12);

}


.customer-signup-btn{

    width:100%;

    height:54px;

    margin-top:6px;

    border:0;

    border-radius:13px;

    background:

    linear-gradient(

        135deg,

        #7040ff,

        #a06eff

    );

    color:white;

    font-size:16px;

    font-weight:bold;

    cursor:pointer;

    box-shadow:

    0 12px 30px

    rgba(112,64,255,.28);

    transition:.25s;

}


.customer-signup-btn:hover{

    transform:translateY(-2px);

}


.customer-signup-btn:active{

    transform:scale(.98);

}


.signup-error{

    margin-bottom:18px;

    padding:12px;

    border-radius:11px;

    color:#ffb5b5;

    background:

    rgba(255,0,0,.12);

    font-size:14px;

}


.login-account{

    margin:23px 0 0;

    color:#999;

    font-size:14px;

}


.login-account a{

    color:#b18aff;

    text-decoration:none;

    font-weight:bold;

}


.back-home{

    display:inline-block;

    margin-top:18px;

    color:#777;

    text-decoration:none;

    font-size:13px;

}


.back-home:hover{

    color:#b18aff;

}


@media(max-width:480px){

    .customer-signup-page{

        padding:14px;

    }


    .customer-signup-card{

        padding:30px 20px;

        border-radius:22px;

    }


    .customer-signup-card h1{

        font-size:24px;

    }


    .customer-signup-card h2{

        font-size:19px;

    }

}