/* JS WORLD - Bigger Registration Form, No Scroll on Laptop */

html, body{
    min-height:100%;
}

.jsw-registration-body{
    margin:0;
    min-height:100vh;
    overflow-x:hidden;
    background:#f1edff;
}

.jsw-registration-wrapper{
    min-height:100vh;
    padding:0;
}

.jsw-registration-container{
    max-width:1380px;
}

.jsw-registration-wrapper .row{
    min-height:100vh;
    align-items:center;
    padding-top:10px;
    padding-bottom:10px;
}

.jsw-registration-brand{
    padding-right:28px;
}

.jsw-register-card{
    width:100%;
    max-width:660px;
    margin-left:auto;
    padding:24px 30px 20px;
    border-radius:22px;
    background:#fff;
    box-shadow:0 10px 34px rgba(78,37,112,.10);
}

.jsw-register-heading{
    margin-bottom:12px;
    text-align:center;
}

.jsw-register-card .login-title{
    margin:0 0 5px;
    font-size:30px;
    line-height:1.15;
    font-weight:850;
}

.jsw-register-card .reg-subtitle{
    max-width:500px;
    margin:0 auto;
    color:#68616c;
    font-size:12px;
    line-height:1.45;
}

.jsw-registration-grid{
    margin-top:14px;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:11px 14px;
}

.jsw-reg-field{
    min-width:0;
}

.jsw-field-label{
    display:block;
    margin:0 0 4px;
    color:#2c2830;
    font-size:11px;
    font-weight:800;
}

.jsw-reg-control,
.jsw-dob-select{
    width:100%;
    min-height:44px;
    height:44px;
    border:1px solid #d8cdf0!important;
    border-radius:10px!important;
    padding-top:7px!important;
    padding-bottom:7px!important;
    font-size:12px!important;
    box-shadow:none!important;
}

.jsw-reg-control:focus,
.jsw-dob-select:focus{
    border-color:#9200b6!important;
    box-shadow:0 0 0 2px rgba(146,0,182,.08)!important;
}

.jsw-password-wrap{
    position:relative;
}

.jsw-password-wrap .jsw-reg-control{
    padding-right:43px!important;
}

.jsw-password-toggle{
    position:absolute;
    z-index:3;
    top:50%;
    right:7px;
    width:32px;
    height:32px;
    transform:translateY(-50%);
    border:0;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#8d1394;
    background:transparent;
    cursor:pointer;
}

.jsw-password-toggle:hover{
    background:#f5ebf7;
}

.jsw-compact-card{
    height:100%;
    min-height:122px;
    padding:12px 14px;
    border:1px solid #ebe4ef;
    border-radius:13px;
    background:#fcfbfe;
}

.jsw-compact-card-head{
    margin-bottom:8px;
    display:flex;
    justify-content:space-between;
    gap:8px;
}

.jsw-compact-card-head strong,
.jsw-compact-card-head small{
    display:block;
}

.jsw-compact-card-head strong{
    font-size:12.5px;
    font-weight:850;
}

.jsw-compact-card-head small{
    margin-top:1px;
    color:#8d8590;
    font-size:9px;
}

.jsw-compact-card-head > i{
    color:#8f00ff;
    font-size:16px;
}

.jsw-hint-label{
    display:flex;
    justify-content:space-between;
    gap:8px;
}

.jsw-hint-limit{
    color:#918995;
    font-size:9px;
}

.jsw-password-hint-input-wrap{
    position:relative;
}

.jsw-password-hint-input-wrap > i{
    position:absolute;
    z-index:2;
    top:50%;
    left:11px;
    transform:translateY(-50%);
    color:#8f00ff;
    font-size:13px;
}

.jsw-password-hint-input-wrap .jsw-reg-control{
    padding-left:34px!important;
}

.jsw-password-hint-help{
    display:block;
    margin-top:4px;
    color:#8b838d;
    font-size:8px;
}

.jsw-dob-inline{
    display:grid;
    grid-template-columns:.8fr 1.2fr .9fr;
    gap:7px;
}

.jsw-registration-error{
    margin-top:8px;
    padding:8px 10px;
    border-radius:8px;
    color:#b42318;
    background:#fff1f0;
    font-size:10px;
    font-weight:700;
}

.jsw-registration-error[hidden]{
    display:none!important;
}

.jsw-create-account-btn{
    min-height:44px;
    margin-top:10px;
    display:flex!important;
    align-items:center;
    justify-content:center;
    gap:7px;
    border-radius:11px!important;
    font-size:12.5px;
    font-weight:800;
}

.jsw-login-link{
    margin-top:8px!important;
}

.jsw-login-link .back-login{
    font-size:10.5px;
}

/* Password hint warning modal */
.jsw-password-hint-modal[hidden]{
    display:none!important;
}

.jsw-password-hint-modal{
    position:fixed;
    inset:0;
    z-index:11000;
    padding:16px;
    display:grid;
    place-items:center;
}

.jsw-password-hint-modal-backdrop{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.34);
}

.jsw-password-hint-modal-box{
    position:relative;
    z-index:1;
    width:min(390px,100%);
    padding:26px 22px 22px;
    border-radius:16px;
    background:#fff;
    box-shadow:0 18px 55px rgba(0,0,0,.20);
    text-align:center;
}

.jsw-password-hint-modal-close{
    position:absolute;
    top:10px;
    right:10px;
    width:34px;
    height:34px;
    border:0;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#f3f1f4;
    cursor:pointer;
}

.jsw-password-hint-modal-icon{
    width:52px;
    height:52px;
    margin:0 auto 12px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#b42318;
    background:#fff0ef;
    font-size:23px;
}

/* Typical notebook height: keep it bigger, but ensure one-screen fit */
@media (min-width:992px) and (max-height:820px){
    .jsw-register-card{
        max-width:630px;
        padding:18px 24px 14px;
    }

    .jsw-register-card .login-title{
        font-size:27px;
    }

    .jsw-register-card .reg-subtitle{
        font-size:10.5px;
    }

    .jsw-registration-grid{
        margin-top:9px;
        gap:8px 12px;
    }

    .jsw-field-label{
        margin-bottom:3px;
        font-size:10px;
    }

    .jsw-reg-control,
    .jsw-dob-select{
        min-height:39px;
        height:39px;
        font-size:11px!important;
    }

    .jsw-compact-card{
        min-height:105px;
        padding:9px 11px;
    }

    .jsw-compact-card-head{
        margin-bottom:5px;
    }

    .jsw-create-account-btn{
        min-height:39px;
        margin-top:7px;
        font-size:11px;
    }

    .jsw-login-link{
        margin-top:5px!important;
    }
}

/* Short notebook displays */
@media (min-width:992px) and (max-height:740px){
    .jsw-register-card{
        max-width:610px;
        padding:13px 20px 10px;
    }

    .jsw-register-card .login-title{
        font-size:24px;
    }

    .jsw-register-card .reg-subtitle{
        font-size:9px;
    }

    .jsw-registration-grid{
        margin-top:6px;
        gap:5px 10px;
    }

    .jsw-field-label{
        margin-bottom:2px;
        font-size:9px;
    }

    .jsw-reg-control,
    .jsw-dob-select{
        min-height:34px;
        height:34px;
        font-size:10px!important;
    }

    .jsw-compact-card{
        min-height:91px;
        padding:7px 9px;
    }

    .jsw-compact-card-head{
        margin-bottom:3px;
    }

    .jsw-compact-card-head strong{
        font-size:10.5px;
    }

    .jsw-compact-card-head small,
    .jsw-password-hint-help{
        font-size:7px;
    }

    .jsw-create-account-btn{
        min-height:35px;
        margin-top:5px;
    }
}

/* Tablet / mobile WebView */
@media (max-width:991.98px){
    .jsw-register-card{
        max-width:100%;
        margin:0;
    }
}

@media (max-width:767.98px){
    .jsw-registration-body{
        overflow-y:auto;
    }

    .jsw-registration-wrapper{
        padding:14px 0;
    }

    .jsw-registration-container{
        max-width:600px;
    }

    .jsw-registration-grid{
        grid-template-columns:1fr;
    }

    .jsw-compact-card{
        min-height:auto;
    }
}

@media (max-width:420px){
    .jsw-register-card{
        padding:16px 13px 14px;
    }

    .jsw-dob-inline{
        grid-template-columns:1fr;
    }

    .jsw-dob-select{
        min-height:40px;
        height:40px;
    }
}