/*=========================================================================
ENTERPRISE REGISTER
PART 1
LAYOUT • CARD • BRAND • HEADER
=========================================================================*/


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

:root{

    --auth-bg:#08111d;

    --auth-surface:#131c2d;

    --auth-surface-2:#172335;

    --auth-border:rgba(255,255,255,.06);

    --auth-border-light:rgba(255,255,255,.10);

    --auth-primary:#2f80ff;

    --auth-primary-soft:rgba(47,128,255,.14);

    --auth-text:#f5f8ff;

    --auth-muted:#8c9bb5;

    --auth-radius:14px;

}


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

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body.auth-body{

    min-height:100vh;

    font-family:Inter,sans-serif;

    background:var(--auth-bg);

    color:var(--auth-text);

    overflow-x:hidden;

}


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

.auth-page{

    position:relative;

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:24px;

    overflow:hidden;

}


/*=========================================================================
TOP GLOW
=========================================================================*/

.auth-page::before{

    content:"";

    position:absolute;

    width:260px;

    height:260px;

    left:-120px;

    top:-120px;

    border-radius:50%;

    background:#2563eb;

    opacity:.10;

    filter:blur(130px);

}


/*=========================================================================
BOTTOM GLOW
=========================================================================*/

.auth-page::after{

    content:"";

    position:absolute;

    width:220px;

    height:220px;

    right:-90px;

    bottom:-90px;

    border-radius:50%;

    background:#00b4ff;

    opacity:.08;

    filter:blur(120px);

}


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

.auth-card{

    position:relative;

    z-index:2;

    width:100%;

    max-width:336px;

    background:linear-gradient(
        180deg,
        var(--auth-surface-2),
        var(--auth-surface)
    );

    border:1px solid var(--auth-border);

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

    padding:18px;

    backdrop-filter:blur(18px);

    box-shadow:

        0 18px 40px rgba(0,0,0,.35),

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

}


/*=========================================================================
TOP STRIP
=========================================================================*/

.auth-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    right:0;

    height:2px;

    background:linear-gradient(

        90deg,

        transparent,

        var(--auth-primary),

        transparent

    );

    opacity:.65;

}


/*=========================================================================
BRAND
=========================================================================*/

.auth-brand{

    display:flex;

    flex-direction:column;

    align-items:center;

    margin-bottom:16px;

}


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

.auth-logo{

    margin-bottom:10px;

}

.auth-logo img{

    width:92px;

    height:auto;

    display:block;

}


/*=========================================================================
BADGE
=========================================================================*/

.auth-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    height:20px;

    padding:0 10px;

    border-radius:999px;

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

    border:1px solid rgba(47,128,255,.16);

    color:#8ebcff;

    font-size:9px;

    font-weight:700;

    letter-spacing:.8px;

    text-transform:uppercase;

}


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

.auth-card-top{

    text-align:center;

    margin-bottom:16px;

}


/*=========================================================================
LABEL
=========================================================================*/

.auth-label{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    height:20px;

    padding:0 10px;

    border-radius:999px;

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

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

    color:#91a3bf;

    font-size:9px;

    font-weight:700;

    letter-spacing:.8px;

    text-transform:uppercase;

    margin-bottom:8px;

}


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

.auth-card-top h2{

    font-size:18px;

    font-weight:700;

    line-height:1.2;

    color:#ffffff;

    margin-bottom:4px;

}


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

.auth-card-top p{

    max-width:250px;

    margin:0 auto;

    color:var(--auth-muted);

    font-size:11px;

    line-height:1.55;

}


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

.auth-message{

    display:none;

    margin-bottom:12px;

    padding:10px 12px;

    border-radius:10px;

    font-size:10px;

    line-height:1.5;

}


/*=========================================================================
RESPONSIVE
=========================================================================*/

@media(max-width:480px){

    .auth-page{

        padding:16px;

    }

    .auth-card{

        max-width:330px;

        padding:16px;

    }

}   
/*=========================================================================
ENTERPRISE REGISTER
PART 2
FORM • INPUTS • SELECT • FOCUS
=========================================================================*/


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

#registerForm{

    display:flex;

    flex-direction:column;

    gap:12px;

}


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

.auth-field{

    display:flex;

    flex-direction:column;

    gap:5px;

}


/*=========================================================================
LABEL
=========================================================================*/

.auth-field label{

    display:flex;

    align-items:center;

    font-size:10px;

    font-weight:600;

    color:#c9d5e8;

    letter-spacing:.2px;

    padding-left:2px;

}


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

.auth-input{

    position:relative;

    display:flex;

    align-items:center;

    height:40px;

    background:#0e1727;

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

    border-radius:10px;

    transition:

        border-color .20s ease,

        box-shadow .20s ease,

        background .20s ease;

}


/*=========================================================================
HOVER
=========================================================================*/

.auth-input:hover{

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

    background:#101b2d;

}


/*=========================================================================
FOCUS
=========================================================================*/

.auth-input:focus-within{

    border-color:#2f80ff;

    box-shadow:

        0 0 0 3px rgba(47,128,255,.12);

}


/*=========================================================================
LEFT ICON
=========================================================================*/

.auth-input svg{

    width:14px;

    height:14px;

    margin-left:12px;

    color:#7285a7;

    flex-shrink:0;

}


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

.auth-input input{

    flex:1;

    border:none;

    outline:none;

    background:none;

    color:#ffffff;

    font-size:12px;

    padding:0 10px;

    font-weight:500;

}


.auth-input input::placeholder{

    color:#6f819f;

}


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

.auth-input select{

    flex:1;

    height:100%;

    border:none;

    outline:none;

    background:transparent;

    color:#ffffff;

    font-size:12px;

    padding:0 10px;

    appearance:none;

    cursor:pointer;

}


.auth-input select option{

    background:#172335;

    color:#ffffff;

}


/*=========================================================================
PASSWORD BUTTON
=========================================================================*/

.auth-toggle{

    width:36px;

    height:36px;

    border:none;

    background:transparent;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    color:#7285a7;

    border-radius:8px;

    margin-right:2px;

    transition:.18s;

}


.auth-toggle svg{

    width:14px;

    height:14px;

    margin:0;

}


.auth-toggle:hover{

    color:#ffffff;

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

}


/*=========================================================================
PASSWORD STRENGTH
=========================================================================*/

.auth-strength{

    display:flex;

    align-items:center;

    gap:6px;

    margin-top:4px;

    font-size:9px;

    color:#7d8ea8;

}


.auth-strength::before{

    content:"";

    width:42px;

    height:3px;

    border-radius:20px;

    background:#2f80ff;

}


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

.auth-input.error{

    border-color:#ff5c72;

}


.auth-input.error:focus-within{

    box-shadow:

        0 0 0 3px rgba(255,92,114,.14);

}


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

.auth-input.success{

    border-color:#27c46a;

}


.auth-input.success:focus-within{

    box-shadow:

        0 0 0 3px rgba(39,196,106,.14);

}


/*=========================================================================
AUTOFILL
=========================================================================*/

.auth-input input:-webkit-autofill,

.auth-input input:-webkit-autofill:hover,

.auth-input input:-webkit-autofill:focus{

    -webkit-text-fill-color:#ffffff;

    -webkit-box-shadow:0 0 0 100px #0e1727 inset;

}


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

@media(max-width:480px){

    .auth-input{

        height:39px;

    }

}
/*=========================================================================
ENTERPRISE REGISTER
PART 3
CHECKBOX • BUTTON • ALERTS • FOOTER
=========================================================================*/


/*=========================================================================
CHECKBOX
=========================================================================*/

.auth-check{

    display:flex;

    align-items:flex-start;

    gap:8px;

    margin-top:2px;

    cursor:pointer;

    user-select:none;

}

.auth-check input{

    width:14px;

    height:14px;

    margin-top:2px;

    accent-color:var(--auth-primary);

    cursor:pointer;

}

.auth-check span{

    flex:1;

    font-size:10px;

    line-height:1.7;

    color:var(--auth-muted);

}

.auth-check a{

    color:#8ebcff;

    text-decoration:none;

    font-weight:600;

    transition:.18s;

}

.auth-check a:hover{

    color:#ffffff;

}


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

.auth-submit{

    width:100%;

    height:40px;

    margin-top:4px;

    border:none;

    border-radius:10px;

    background:linear-gradient(
        180deg,
        #3a8dff 0%,
        #2f80ff 100%
    );

    color:#ffffff;

    font-size:12px;

    font-weight:700;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    cursor:pointer;

    transition:

        transform .18s ease,

        box-shadow .18s ease,

        opacity .18s ease;

    box-shadow:

        0 10px 22px rgba(47,128,255,.22);

}


.auth-submit svg{

    width:14px;

    height:14px;

}


.auth-submit:hover{

    transform:translateY(-1px);

    box-shadow:

        0 14px 26px rgba(47,128,255,.30);

}


.auth-submit:active{

    transform:scale(.985);

}


.auth-submit:disabled{

    opacity:.65;

    cursor:not-allowed;

    transform:none;

    box-shadow:none;

}


/*=========================================================================
LOADING BUTTON
=========================================================================*/

.auth-submit.loading{

    pointer-events:none;

}

.auth-submit.loading span{

    opacity:.75;

}


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

.auth-message{

    display:none;

    padding:10px 12px;

    border-radius:10px;

    font-size:10px;

    line-height:1.6;

    border:1px solid transparent;

}


.auth-message.success{

    display:block;

    color:#8cf2be;

    background:rgba(28,185,84,.10);

    border-color:rgba(28,185,84,.18);

}


.auth-message.error{

    display:block;

    color:#ffc0c8;

    background:rgba(255,74,104,.10);

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

}


.auth-message.info{

    display:block;

    color:#9fd0ff;

    background:rgba(47,128,255,.10);

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

}


/*=========================================================================
FOOTER
=========================================================================*/

.auth-footer{

    text-align:center;

    margin-top:6px;

    font-size:10px;

    color:var(--auth-muted);

}


.auth-footer a{

    color:#8ebcff;

    text-decoration:none;

    font-weight:700;

    margin-left:4px;

    transition:.18s;

}


.auth-footer a:hover{

    color:#ffffff;

}


/*=========================================================================
CARD FADE
=========================================================================*/

.auth-card{

    animation:authFade .35s ease;

}


@keyframes authFade{

    from{

        opacity:0;

        transform:translateY(12px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


/*=========================================================================
FOCUS ACCESSIBILITY
=========================================================================*/

.auth-submit:focus-visible,

.auth-toggle:focus-visible,

.auth-check input:focus-visible{

    outline:2px solid rgba(47,128,255,.45);

    outline-offset:2px;

}
/*=========================================================================
ENTERPRISE REGISTER
PART 4
FINAL POLISH
=========================================================================*/


/*=========================================================================
CUSTOM SELECT ARROW
=========================================================================*/

.auth-input{

    position:relative;

}

.auth-input:has(select)::after{

    content:"";

    position:absolute;

    right:14px;

    top:50%;

    width:7px;

    height:7px;

    margin-top:-5px;

    border-right:2px solid #7d8fab;

    border-bottom:2px solid #7d8fab;

    transform:rotate(45deg);

    pointer-events:none;

}


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

.auth-input,

.auth-submit,

.auth-toggle,

.auth-check input{

    transition:all .20s ease;

}


/*=========================================================================
SVG
=========================================================================*/

.auth-input svg{

    transition:color .20s ease;

}

.auth-input:focus-within svg{

    color:#9cc2ff;

}


/*=========================================================================
TEXT SELECTION
=========================================================================*/

::selection{

    background:#2f80ff;

    color:#ffffff;

}


/*=========================================================================
SCROLLBAR
=========================================================================*/

::-webkit-scrollbar{

    width:8px;

}

::-webkit-scrollbar-track{

    background:#0b1322;

}

::-webkit-scrollbar-thumb{

    background:#2b3b57;

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:#415678;

}


/*=========================================================================
DISABLED
=========================================================================*/

input:disabled,

select:disabled,

button:disabled{

    opacity:.65;

    cursor:not-allowed;

}


/*=========================================================================
SMALL FADE
=========================================================================*/

.auth-field{

    animation:fieldFade .35s ease;

}

@keyframes fieldFade{

    from{

        opacity:0;

        transform:translateY(8px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


/*=========================================================================
PLACEHOLDER
=========================================================================*/

.auth-input input::placeholder{

    transition:opacity .18s ease;

}

.auth-input input:focus::placeholder{

    opacity:.45;

}


/*=========================================================================
LINKS
=========================================================================*/

.auth-footer a,

.auth-check a{

    position:relative;

}

.auth-footer a::after,

.auth-check a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-2px;

    width:0;

    height:1px;

    background:#8ebcff;

    transition:.20s;

}

.auth-footer a:hover::after,

.auth-check a:hover::after{

    width:100%;

}


/*=========================================================================
CARD BORDER GLOW
=========================================================================*/

.auth-card:hover{

    border-color:rgba(47,128,255,.14);

}


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

@media(max-width:480px){

    .auth-page{

        padding:14px;

    }

    .auth-card{

        max-width:320px;

        padding:16px;

        border-radius:12px;

    }

    .auth-logo img{

        width:84px;

    }

    .auth-badge{

        font-size:8px;

        height:18px;

    }

    .auth-label{

        font-size:8px;

    }

    .auth-card-top h2{

        font-size:17px;

    }

    .auth-card-top p{

        font-size:10px;

    }

    .auth-field label{

        font-size:10px;

    }

    .auth-input{

        height:38px;

    }

    .auth-input input,

    .auth-input select{

        font-size:11px;

    }

    .auth-submit{

        height:38px;

        font-size:11px;

    }

}


/*=========================================================================
LARGE SCREEN
=========================================================================*/

@media(min-width:1200px){

    .auth-card{

        transform:scale(.98);

    }

}