*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{

    font-family:'Segoe UI',sans-serif;

    min-height:100vh;

    background:
    linear-gradient(
    135deg,
    #0d0d0d,
    #1d1d1d
    );

    display:flex;

    justify-content:center;

    align-items:center;

    padding:20px;
}

.register-container{

    width:100%;

    max-width:1250px;

    height:90vh;

    background:#fff;

    border-radius:28px;

    overflow:hidden;

    display:flex;

    box-shadow:
    0 20px 60px rgba(0,0,0,0.35);
}

/* LEFT */

.register-left{

    width:58%;

    padding:35px;

    overflow-y:auto;

    background:#fff;
}

.register-left h1{

    font-size:42px;

    font-weight:800;

    line-height:1.1;

    margin-bottom:25px;

    color:#111;
}

/* ALERT */

.alert{

    padding:14px;

    border-radius:14px;

    margin-bottom:18px;

    font-size:14px;

    font-weight:600;
}

.alert.error{

    background:#ffe5e5;

    color:#d8000c;
}

/* STEP */

.step-wrapper{

    display:flex;

    align-items:center;

    margin-bottom:28px;
}

.step{

    width:48px;

    height:48px;

    border-radius:50%;

    background:#ddd;

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:18px;

    font-weight:700;
}

.step.active{

    background:#14a800;
}

.step-line{

    width:90px;

    height:4px;

    background:#ddd;
}

/* GRID */

.grid-2{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:14px;

    margin-bottom:14px;
}

/* INPUTS */

input,
select,
textarea{

    width:100%;

    padding:15px 16px;

    border:1px solid #ddd;

    border-radius:16px;

    font-size:14px;

    outline:none;

    transition:0.3s;

    margin-bottom:14px;
}

input:focus,
select:focus,
textarea:focus{

    border-color:#14a800;

    box-shadow:
    0 0 0 4px rgba(20,168,0,0.08);
}

textarea{

    resize:none;

    min-height:90px;
}

/* PASSWORD */

.password-wrapper{

    position:relative;

    margin-bottom:12px;
}

.password-wrapper input{

    margin-bottom:0;
}

.password-wrapper i{

    position:absolute;

    right:18px;

    top:50%;

    transform:translateY(-50%);

    color:#777;

    cursor:pointer;
}

.password-strength{

    display:block;

    margin-bottom:14px;

    font-size:13px;

    font-weight:700;
}

.password-strength.weak{
    color:#ff3b30;
}

.password-strength.medium{
    color:#ff9500;
}

.password-strength.strong{
    color:#14a800;
}

/* UPLOAD */

.upload-group{

    margin-bottom:16px;
}

.upload-group label{

    display:block;

    font-size:15px;

    font-weight:700;

    margin-bottom:4px;
}

.upload-note{

    display:block;

    font-size:12px;

    color:#777;

    margin-bottom:10px;
}

/* BUTTON */

.btn{

    width:100%;

    border:none;

    background:#14a800;

    color:#fff;

    padding:15px;

    border-radius:16px;

    font-size:15px;

    font-weight:700;

    cursor:pointer;

    transition:0.3s;
}

.btn:hover{

    background:#108400;

    transform:translateY(-2px);
}

/* FOOTER */

.auth-footer{

    margin-top:18px;

    text-align:center;

    font-size:14px;
}

.auth-footer a{

    color:#14a800;

    text-decoration:none;

    font-weight:700;
}

/* RIGHT */

.register-right{

    width:42%;

    position:relative;

    overflow:hidden;

    display:flex;

    align-items:flex-end;

    padding:40px;

    color:#fff;
}

.register-right::before{

    content:'';

    position:absolute;

    inset:0;

    background-image:
    linear-gradient(
        rgba(0,0,0,0.25),
        rgba(0,0,0,0.78)
    ),
    url('../images/register-side.jpeg');

    background-size:cover;

    background-position:center;

    filter:blur(3px);

    transform:scale(1.08);

    z-index:1;
}

.side-content{

    position:relative;

    z-index:2;

    max-width:380px;
}

.side-content h2{

    font-size:46px;

    line-height:1;

    font-weight:800;

    margin-bottom:16px;
}

.side-content p{

    font-size:15px;

    line-height:1.7;

    color:rgba(255,255,255,0.92);
}

/* SCROLLBAR */

.register-left::-webkit-scrollbar{

    width:6px;
}

.register-left::-webkit-scrollbar-thumb{

    background:#ccc;

    border-radius:10px;
}

/* RESPONSIVE */

@media(max-width:1000px){

    .register-container{

        flex-direction:column;

        height:auto;
    }

    .register-left,
    .register-right{

        width:100%;
    }

    .register-right{

        min-height:260px;
    }
}

@media(max-width:700px){

    body{

        padding:0;
    }

    .register-container{

        border-radius:0;

        min-height:100vh;
    }

    .register-left{

        padding:24px;
    }

    .grid-2{

        grid-template-columns:1fr;
    }

    .register-left h1{

        font-size:34px;
    }

    .side-content h2{

        font-size:34px;
    }
}
.form-step{
    display:none;
}

.active-step{
    display:block;
}

.step-buttons{
    display:flex;
    gap:12px;
}

.back-btn{
    background:#ddd;
    color:#111;
}

.back-btn:hover{
    background:#cfcfcf;
}

.email-error{

    display:block;

    margin-top:-6px;

    margin-bottom:12px;

    color:#ff3b30;

    font-size:13px;

    font-weight:600;
}

.terms-wrap{

    margin-top:10px;

    margin-bottom:24px;
}

.terms-label{

    display:flex;

    align-items:flex-start;

    gap:12px;

    font-size:14px;

    line-height:1.6;

    color:#444;
}

.terms-label input{

    width:auto;

    margin-top:4px;

    accent-color:#14a800;
}

.terms-label a{

    color:#14a800;

    text-decoration:none;

    font-weight:700;
}

/* DISABLED BUTTON */

#createBtn:disabled{

    background:#ccc;

    cursor:not-allowed;

    transform:none;
}

.enabled-btn{

    background:#14a800 !important;

    color:#fff !important;
}