.sr-wrapper{

    min-height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:60px 20px;

    background:
    linear-gradient(135deg,#eef4ff,#fdfdfd);

}

.sr-card{

    width:100%;
    max-width:760px;

    background:#fff;

    border-radius:24px;

    padding:45px;

    box-shadow:var(--shadow);

    animation:fadeUp .5s ease;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.sr-card h2{

    font-size:34px;

    margin:0;

    text-align:center;

    color:var(--text);

}

.sr-subtitle{

    text-align:center;

    color:var(--muted);

    margin:12px 0 35px;

}


.sr-progress{

    height:10px;

    background:#edf1f7;

    border-radius:50px;

    overflow:hidden;

}

.sr-progress-bar{

    width:0%;

    height:100%;

    background:
    linear-gradient(90deg,#2563eb,#60a5fa);

    transition:.4s;

}

.sr-progress-text{

    margin-top:10px;

    font-size:14px;

    text-align:right;

    color:var(--muted);

}

.sr-progress-text span{

    font-weight:700;

    color:var(--primary);

}


.sr-type{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:20px;

    margin:35px 0;

}

.sr-type-card{

    border:2px solid var(--border);

    border-radius:20px;

    text-align:center;

    padding:25px;

    cursor:pointer;

    transition:var(--transition);

}

.sr-type-card:hover{

    transform:translateY(-4px);

    box-shadow:0 15px 30px rgba(0,0,0,.08);

}

.sr-type-card.active{

    border-color:var(--primary);

    background:#eff6ff;

}

.sr-type-card .icon{

    font-size:42px;

    margin-bottom:10px;

}

.sr-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:20px;

}

.sr-field{

    position:relative;

    margin-bottom:24px;

}

.sr-field input{

    width:100%;

    height:56px;

    padding:18px 18px 0;

    border:2px solid #e5e7eb;

    border-radius:14px;

    outline:none;

    font-size:16px;

    transition:var(--transition);

    box-sizing:border-box;

}

.sr-field input:focus{

    border-color:var(--primary);

    box-shadow:0 0 0 4px rgba(37,99,235,.12);

}

.sr-field label{

    position:absolute;

    left:16px;

    top:18px;

    color:#888;

    pointer-events:none;

    transition:.2s;

    background:#fff;

    padding:0 5px;

}

.sr-field input:focus + label,
.sr-field input:not(:placeholder-shown) + label{

    top:-9px;

    font-size:12px;

    color:var(--primary);

}


.company-fields{

    display:none;

}

.password-strength{

    width:100%;

    height:8px;

    border-radius:20px;

    background:#edf1f7;

    overflow:hidden;

}

@keyframes fadeCompany{

    from{

        opacity:0;
        transform:translateY(-15px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}

.strength-bar{

    width:20%;

    height:100%;

    background:#ef4444;

    transition:.3s;

}

.password-text{

    margin:8px 0 25px;

    font-size:14px;

    color:#666;

}
.sr-section-title{

    margin:35px 0 20px;

    font-size:20px;

    color:#1f2937;

}


.sr-field select{

    width:100%;

    height:56px;

    border:2px solid #e5e7eb;

    border-radius:14px;

    padding:0 15px;

    font-size:16px;

    background:#fff;

}


.sr-checkboxes{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:12px;

}


.sr-checkboxes label{

    padding:14px;

    border:2px solid #e5e7eb;

    border-radius:12px;

    cursor:pointer;

    transition:.2s;

}


.sr-checkboxes label:hover{

    border-color:#2563eb;

    background:#eff6ff;

}


.sr-checkboxes input{

    margin-right:8px;

}


@media(max-width:768px){

    .sr-checkboxes{

        grid-template-columns:1fr;

    }

}


#smart-register-form button{

    width:100%;

    border:none;

    border-radius:14px;

    height:58px;

    cursor:pointer;

    font-size:17px;

    font-weight:700;

    color:white;

    background:
    linear-gradient(90deg,#2563eb,#3b82f6);

    transition:.3s;

}

#smart-register-form button:hover{

    transform:translateY(-3px);

    box-shadow:0 18px 30px rgba(37,99,235,.30);

}

/* responsive */

@media(max-width:768px){

.sr-card{

padding:30px;

}

.sr-grid{

grid-template-columns:1fr;

}

.sr-type{

grid-template-columns:1fr;

}

.sr-card h2{

font-size:28px;

}

}