/* ==========================================================
   CHINMUN ERP
   REGISTER PAGE
   FULL UPDATED CSS
========================================================== */


/* ==========================================================
   ROOT PAGE
========================================================== */

.website-register-page{

    position:relative;

    min-height:100vh;

    overflow:hidden;

    background:
        #050816;

    padding-top:60px;

    padding-bottom:80px;

}


/* ==========================================================
   BACKGROUND GRID
========================================================== */

.website-register-grid-bg{

    position:absolute;

    inset:0;

    z-index:0;

    pointer-events:none;

    opacity:.32;

    background-image:

        linear-gradient(
            rgba(255,255,255,.035) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,.035) 1px,
            transparent 1px
        );

    background-size:

        70px 70px;

}


/* ==========================================================
   BACKGROUND ORBS
========================================================== */

.website-register-orb{

    position:absolute;

    z-index:0;

    width:560px;

    height:560px;

    border-radius:50%;

    filter:blur(120px);

    pointer-events:none;

}


.website-register-orb-one{

    top:-230px;

    left:-220px;

    background:

        rgba(
            124,
            58,
            237,
            .42
        );

}


.website-register-orb-two{

    right:-230px;

    bottom:-220px;

    background:

        rgba(
            37,
            99,
            235,
            .35
        );

}



/* ==========================================================
   MAIN SECTION
========================================================== */

.website-register-section{

    position:relative;

    z-index:2;

    width:100%;

}


.website-register-grid{

    display:grid;

    grid-template-columns:

        minmax(0,1fr)
        minmax(520px,620px);

    gap:100px;

    align-items:center;

    min-height:

        calc(
            100vh - 200px
        );

}



/* ==========================================================
   LEFT SIDE
========================================================== */

.website-register-content{

    width:100%;

    max-width:650px;

    padding:

        20px 0;

}



/* ==========================================================
   EYEBROW
========================================================== */

.eyebrow{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:

        9px
        15px;

    border:

        1px solid
        rgba(
            167,
            139,
            250,
            .28
        );

    border-radius:

        100px;

    background:

        rgba(
            124,
            58,
            237,
            .09
        );

    color:

        #c4b5fd;

    font-size:

        11px;

    font-weight:

        700;

    letter-spacing:

        .15em;

    box-shadow:

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

}



/* ==========================================================
   LEFT HEADING
========================================================== */

.website-register-content h1{

    margin:

        22px
        0
        25px;

    color:

        #ffffff;

    font-size:

        clamp(
            44px,
            5vw,
            72px
        );

    line-height:

        1.08;

    font-weight:

        750;

    letter-spacing:

        -.05em;

}


.website-register-content h1 span{

    background:

        linear-gradient(
            135deg,
            #a78bfa 0%,
            #8b5cf6 40%,
            #60a5fa 100%
        );

    -webkit-background-clip:

        text;

    -webkit-text-fill-color:

        transparent;

    background-clip:

        text;

}



/* ==========================================================
   LEFT DESCRIPTION
========================================================== */

.website-register-content > p{

    width:100%;

    max-width:620px;

    margin:0;

    color:

        rgba(
            226,
            232,
            240,
            .70
        );

    font-size:

        17px;

    line-height:

        1.9;

}



/* ==========================================================
   BENEFITS
========================================================== */

.website-register-benefits{

    display:flex;

    flex-direction:column;

    gap:24px;

    margin-top:45px;

}


.website-register-benefit{

    display:flex;

    align-items:flex-start;

    gap:17px;

}


.register-benefit-icon{

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

    width:40px;

    height:40px;

    margin-top:1px;

    border-radius:

        13px;

    background:

        linear-gradient(
            135deg,
            #7c3aed,
            #2563eb
        );

    color:

        #ffffff;

    font-size:

        17px;

    font-weight:

        800;

    box-shadow:

        0
        15px
        35px
        rgba(
            124,
            58,
            237,
            .28
        );

}


.website-register-benefit > div:last-child{

    min-width:0;

}


.website-register-benefit strong{

    display:block;

    margin-bottom:6px;

    color:

        #f8fafc;

    font-size:

        15px;

    font-weight:

        700;

}


.website-register-benefit p{

    margin:0;

    color:

        rgba(
            226,
            232,
            240,
            .56
        );

    font-size:

        13px;

    line-height:

        1.75;

}



/* ==========================================================
   TRUST CARD
========================================================== */

.website-register-trust-card{

    display:flex;

    align-items:center;

    gap:17px;

    width:100%;

    max-width:520px;

    margin-top:44px;

    padding:

        20px
        22px;

    border:

        1px solid
        rgba(
            255,
            255,
            255,
            .08
        );

    border-radius:

        20px;

    background:

        linear-gradient(
            135deg,
            rgba(
                15,
                23,
                42,
                .72
            ),
            rgba(
                10,
                15,
                30,
                .48
            )
        );

    backdrop-filter:

        blur(20px);

    -webkit-backdrop-filter:

        blur(20px);

    box-shadow:

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

}


.register-trust-icon{

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

    width:50px;

    height:50px;

    border-radius:

        15px;

    background:

        linear-gradient(
            135deg,
            rgba(
                124,
                58,
                237,
                .28
            ),
            rgba(
                37,
                99,
                235,
                .20
            )
        );

    font-size:

        21px;

}


.website-register-trust-card small{

    display:block;

    margin-bottom:5px;

    color:

        #a78bfa;

    font-size:

        10px;

    font-weight:

        700;

    letter-spacing:

        .13em;

}


.website-register-trust-card strong{

    display:block;

    color:

        #f8fafc;

    font-size:

        14px;

    line-height:

        1.5;

}



/* ==========================================================
   RIGHT FORM WRAPPER
========================================================== */

.website-register-form-wrapper{

    position:relative;

    width:100%;

}



/* ==========================================================
   FORM CARD
========================================================== */

.website-register-form-card{

    position:relative;

    width:100%;

    padding:

        36px;

    border:

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

    border-radius:

        30px;

    background:

        linear-gradient(
            145deg,
            rgba(
                18,
                27,
                50,
                .96
            ),
            rgba(
                8,
                13,
                28,
                .94
            )
        );

    backdrop-filter:

        blur(30px);

    -webkit-backdrop-filter:

        blur(30px);

    box-shadow:

        0
        35px
        100px
        rgba(
            0,
            0,
            0,
            .42
        ),

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

}



/* ==========================================================
   FORM HEADER
========================================================== */

.website-register-form-header{

    display:flex;

    align-items:center;

    gap:18px;

    margin-bottom:32px;

}


.website-register-form-logo{

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

    width:68px;

    height:68px;

    padding:

        10px;

    border:

        1px solid
        rgba(
            255,
            255,
            255,
            .08
        );

    border-radius:

        18px;

    background:

        rgba(
            255,
            255,
            255,
            .035
        );

}


.website-register-form-logo img{

    display:block;

    width:100%;

    height:100%;

    object-fit:

        contain;

}


.website-register-label{

    margin-bottom:7px;

    color:

        #a78bfa;

    font-size:

        10px;

    font-weight:

        700;

    letter-spacing:

        .16em;

}


.website-register-form-header h2{

    margin:0;

    color:

        #ffffff;

    font-size:

        28px;

    line-height:

        1.2;

    letter-spacing:

        -.02em;

}


.website-register-form-header p{

    margin:

        7px
        0
        0;

    color:

        rgba(
            226,
            232,
            240,
            .56
        );

    font-size:

        13px;

    line-height:

        1.65;

}



/* ==========================================================
   REGISTER FORM GRID
========================================================== */

.website-register-form{

    display:grid;

    grid-template-columns:

        repeat(
            2,
            minmax(
                0,
                1fr
            )
        );

    gap:

        19px
        16px;

}



/* ==========================================================
   SECTION HEADING
========================================================== */

.website-register-section-heading{

    grid-column:

        1 / -1;

    display:flex;

    align-items:center;

    gap:12px;

    margin-top:

        8px;

    padding-top:

        22px;

    border-top:

        1px solid
        rgba(
            255,
            255,
            255,
            .07
        );

}


.website-register-section-heading:first-child{

    margin-top:0;

    padding-top:0;

    border-top:0;

}


.website-register-section-number{

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

    width:34px;

    height:34px;

    border-radius:

        10px;

    background:

        linear-gradient(
            135deg,
            rgba(
                124,
                58,
                237,
                .95
            ),
            rgba(
                37,
                99,
                235,
                .95
            )
        );

    color:

        #ffffff;

    font-size:

        11px;

    font-weight:

        800;

    letter-spacing:

        .04em;

    box-shadow:

        0
        10px
        25px
        rgba(
            124,
            58,
            237,
            .22
        );

}


.website-register-section-heading strong{

    display:block;

    margin-bottom:3px;

    color:

        #f8fafc;

    font-size:

        14px;

    font-weight:

        700;

}


.website-register-section-heading span{

    display:block;

    color:

        rgba(
            148,
            163,
            184,
            .72
        );

    font-size:

        11px;

}



/* ==========================================================
   FORM FIELD
========================================================== */

.website-register-field{

    min-width:0;

}


.website-register-field-full{

    grid-column:

        1 / -1;

}


.website-register-field label{

    display:block;

    margin-bottom:8px;

    color:

        #e2e8f0;

    font-size:

        12px;

    font-weight:

        600;

}


.website-register-field label span{

    margin-left:5px;

    color:

        rgba(
            148,
            163,
            184,
            .70
        );

    font-size:

        10px;

    font-weight:

        500;

}



/* ==========================================================
   INPUT WRAPPER
========================================================== */

.website-register-input-wrap{

    position:relative;

    display:flex;

    align-items:center;

    width:100%;

}


.website-register-input-icon{

    position:absolute;

    left:14px;

    z-index:2;

    display:flex;

    align-items:center;

    justify-content:center;

    pointer-events:none;

    font-size:

        14px;

    opacity:

        .88;

}



/* ==========================================================
   INPUT
========================================================== */

.website-register-input-wrap input{

    width:100%;

    height:50px;

    padding:

        0
        46px
        0
        43px;

    border:

        1px solid
        rgba(
            255,
            255,
            255,
            .09
        );

    border-radius:

        13px;

    outline:none;

    background:

        rgba(
            255,
            255,
            255,
            .035
        );

    color:

        #ffffff;

    font-family:

        inherit;

    font-size:

        13px;

    transition:

        border-color
        .25s ease,

        background
        .25s ease,

        box-shadow
        .25s ease;

}


.website-register-input-wrap input::placeholder{

    color:

        rgba(
            148,
            163,
            184,
            .62
        );

}


.website-register-input-wrap input:focus{

    border-color:

        rgba(
            139,
            92,
            246,
            .80
        );

    background:

        rgba(
            124,
            58,
            237,
            .07
        );

    box-shadow:

        0
        0
        0
        4px
        rgba(
            124,
            58,
            237,
            .09
        );

}



/* ==========================================================
   SELECT
========================================================== */

.website-register-select-wrap{

    position:relative;

    width:100%;

}


.website-register-select-wrap::after{

    content:

        "⌄";

    position:absolute;

    top:50%;

    right:15px;

    transform:

        translateY(
            -55%
        );

    pointer-events:none;

    color:

        #a78bfa;

    font-size:

        18px;

}


.website-register-select-wrap select{

    width:100%;

    height:50px;

    padding:

        0
        42px
        0
        15px;

    border:

        1px solid
        rgba(
            255,
            255,
            255,
            .09
        );

    border-radius:

        13px;

    outline:none;

    appearance:

        none;

    -webkit-appearance:

        none;

    background:

        rgba(
            255,
            255,
            255,
            .035
        );

    color:

        #e2e8f0;

    font-family:

        inherit;

    font-size:

        13px;

    cursor:pointer;

    transition:

        .25s ease;

}


.website-register-select-wrap select:focus{

    border-color:

        rgba(
            139,
            92,
            246,
            .80
        );

    background:

        rgba(
            124,
            58,
            237,
            .07
        );

    box-shadow:

        0
        0
        0
        4px
        rgba(
            124,
            58,
            237,
            .09
        );

}


.website-register-select-wrap select option{

    background:

        #111827;

    color:

        #ffffff;

}



/* ==========================================================
   TEXTAREA
========================================================== */

.website-register-textarea-wrap{

    width:100%;

}


.website-register-textarea-wrap textarea{

    display:block;

    width:100%;

    min-height:

        105px;

    padding:

        14px
        15px;

    border:

        1px solid
        rgba(
            255,
            255,
            255,
            .09
        );

    border-radius:

        14px;

    outline:none;

    resize:

        vertical;

    background:

        rgba(
            255,
            255,
            255,
            .035
        );

    color:

        #ffffff;

    font-family:

        inherit;

    font-size:

        13px;

    line-height:

        1.65;

    transition:

        .25s ease;

}


.website-register-textarea-wrap textarea::placeholder{

    color:

        rgba(
            148,
            163,
            184,
            .62
        );

}


.website-register-textarea-wrap textarea:focus{

    border-color:

        rgba(
            139,
            92,
            246,
            .80
        );

    background:

        rgba(
            124,
            58,
            237,
            .07
        );

    box-shadow:

        0
        0
        0
        4px
        rgba(
            124,
            58,
            237,
            .09
        );

}



/* ==========================================================
   FIELD HELP
========================================================== */

.website-register-field-help{

    display:block;

    margin-top:7px;

    color:

        rgba(
            148,
            163,
            184,
            .65
        );

    font-size:

        10px;

    line-height:

        1.6;

}



/* ==========================================================
   PASSWORD TOGGLE
========================================================== */

.website-register-password-toggle{

    position:absolute;

    right:9px;

    z-index:4;

    display:flex;

    align-items:center;

    justify-content:center;

    width:34px;

    height:34px;

    padding:0;

    border:0;

    border-radius:

        9px;

    background:

        transparent;

    color:

        #cbd5e1;

    cursor:pointer;

    font-size:

        15px;

}



/* ==========================================================
   TERMS
========================================================== */

.website-register-terms{

    grid-column:

        1 / -1;

    display:flex;

    align-items:flex-start;

    gap:10px;

    margin-top:

        4px;

    color:

        rgba(
            226,
            232,
            240,
            .68
        );

    font-size:

        12px;

    line-height:

        1.75;

    cursor:pointer;

}


.website-register-terms input{

    flex-shrink:0;

    width:16px;

    height:16px;

    margin-top:

        3px;

    accent-color:

        #7c3aed;

    cursor:pointer;

}


.website-register-terms a{

    color:

        #a78bfa;

    font-weight:

        600;

    text-decoration:

        none;

}


.website-register-terms a:hover{

    color:

        #c4b5fd;

}



/* ==========================================================
   SUBMIT BUTTON
========================================================== */

.website-register-submit{

    grid-column:

        1 / -1;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:14px;

    width:100%;

    height:55px;

    margin-top:

        3px;

    border:0;

    border-radius:

        15px;

    background:

        linear-gradient(
            135deg,
            #7c3aed,
            #2563eb
        );

    color:

        #ffffff;

    font-family:

        inherit;

    font-size:

        14px;

    font-weight:

        700;

    cursor:pointer;

    transition:

        transform
        .25s ease,

        box-shadow
        .25s ease,

        opacity
        .25s ease;

    box-shadow:

        0
        15px
        40px
        rgba(
            124,
            58,
            237,
            .30
        );

}


.website-register-submit:hover{

    transform:

        translateY(
            -2px
        );

    box-shadow:

        0
        22px
        50px
        rgba(
            124,
            58,
            237,
            .45
        );

}


.website-register-submit:active{

    transform:

        translateY(
            0
        );

}


.website-register-submit b{

    font-size:

        19px;

    line-height:

        1;

}



/* ==========================================================
   SECURITY
========================================================== */

.website-register-security{

    grid-column:

        1 / -1;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    margin-top:

        2px;

    text-align:

        center;

}


.website-register-security span{

    font-size:

        13px;

}


.website-register-security p{

    margin:0;

    color:

        rgba(
            148,
            163,
            184,
            .70
        );

    font-size:

        11px;

    line-height:

        1.6;

}



/* ==========================================================
   LOGIN LINK
========================================================== */

.website-register-login{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:7px;

    margin-top:

        25px;

    padding-top:

        23px;

    border-top:

        1px solid
        rgba(
            255,
            255,
            255,
            .07
        );

    color:

        rgba(
            226,
            232,
            240,
            .58
        );

    font-size:

        13px;

}


.website-register-login button{

    padding:0;

    border:0;

    background:

        transparent;

    color:

        #a78bfa;

    font-family:

        inherit;

    font-size:

        13px;

    font-weight:

        700;

    cursor:pointer;

}


.website-register-login button:hover{

    color:

        #c4b5fd;

}



/* ==========================================================
   LARGE TABLET
========================================================== */

@media (
    max-width:1200px
){

    .website-register-grid{

        grid-template-columns:

            minmax(
                0,
                1fr
            )

            minmax(
                480px,
                560px
            );

        gap:

            65px;

    }


    .website-register-content h1{

        font-size:

            clamp(
                42px,
                5vw,
                62px
            );

    }

}



/* ==========================================================
   TABLET
========================================================== */

@media (
    max-width:1050px
){

    .website-register-page{

        padding-top:

           70px;

    }


    .website-register-grid{

        grid-template-columns:

            1fr;

        gap:

            60px;

    }


    .website-register-content{

        max-width:

            800px;

    }


    .website-register-form-wrapper{

        max-width:

            720px;

        margin:

            0 auto;

    }


    .website-register-trust-card{

        max-width:

            600px;

    }

}



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

@media (
    max-width:768px
){

    .website-register-page{

        padding-top:

            95px;

        padding-bottom:

            55px;

    }


    .website-register-grid{

        gap:

            48px;

        min-height:

            auto;

    }


    .website-register-content{

        padding:

            0;

    }


    .website-register-content h1{

        margin:

            18px
            0
            22px;

        font-size:

            42px;

    }


    .website-register-content > p{

        font-size:

            15px;

        line-height:

            1.85;

    }


    .website-register-benefits{

        gap:

            20px;

        margin-top:

            34px;

    }


    .website-register-trust-card{

        margin-top:

            34px;

    }


    .website-register-form-card{

        padding:

            28px
            22px;

        border-radius:

            25px;

    }


    .website-register-form-header{

        align-items:

            flex-start;

    }


    .website-register-form{

        grid-template-columns:

            1fr;

        gap:

            18px;

    }


    .website-register-field-full{

        grid-column:

            1;

    }


    .website-register-section-heading{

        grid-column:

            1;

    }


    .website-register-terms{

        grid-column:

            1;

    }


    .website-register-submit{

        grid-column:

            1;

    }


    .website-register-security{

        grid-column:

            1;

    }

}



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

@media (
    max-width:480px
){

    .website-register-page{

        padding-top:

            82px;

        padding-bottom:

            45px;

    }


    .eyebrow{

        padding:

            8px
            12px;

        font-size:

            10px;

    }


    .website-register-content h1{

        font-size:

            35px;

        line-height:

            1.12;

    }


    .website-register-content > p{

        font-size:

            14px;

    }


    .website-register-benefit{

        gap:

            13px;

    }


    .register-benefit-icon{

        width:

            36px;

        height:

            36px;

        border-radius:

            11px;

        font-size:

            15px;

    }


    .website-register-trust-card{

        gap:

            13px;

        padding:

            17px;

        border-radius:

            17px;

    }


    .register-trust-icon{

        width:

            44px;

        height:

            44px;

        border-radius:

            13px;

    }


    .website-register-form-card{

        padding:

            23px
            16px;

        border-radius:

            22px;

    }


    .website-register-form-header{

        gap:

            13px;

        margin-bottom:

            27px;

    }


    .website-register-form-logo{

        width:

            52px;

        height:

            52px;

        padding:

            8px;

        border-radius:

            15px;

    }


    .website-register-form-header h2{

        font-size:

            21px;

    }


    .website-register-form-header p{

        font-size:

            11px;

    }


    .website-register-section-heading{

        gap:

            10px;

        padding-top:

            19px;

    }


    .website-register-section-number{

        width:

            31px;

        height:

            31px;

        border-radius:

            9px;

        font-size:

            10px;

    }


    .website-register-section-heading strong{

        font-size:

            13px;

    }


    .website-register-section-heading span{

        font-size:

            10px;

    }


    .website-register-input-wrap input{

        height:

            48px;

        font-size:

            12px;

    }


    .website-register-select-wrap select{

        height:

            48px;

        font-size:

            12px;

    }


    .website-register-textarea-wrap textarea{

        min-height:

            100px;

        font-size:

            12px;

    }


    .website-register-submit{

        height:

            53px;

    }


    .website-register-login{

        flex-wrap:

            wrap;

        margin-top:

            22px;

        padding-top:

            20px;

    }

}