/* =========================================================
   VIIcode Register
   与 Login 页面统一
   ========================================================= */

.register-bg-wrapper{
    width:100%;
    background:#000;
    color:#fff;
    overflow-x:hidden;
}

.register-bg-wrapper *,
.register-bg-wrapper *::before,
.register-bg-wrapper *::after{
    box-sizing:border-box;
}


/* =========================================================
   页面容器
   ========================================================= */

.register-container{
    width:min(92%,1180px);
    margin:0 auto;
}


/* =========================================================
   内容
   ========================================================= */

.register-content{
    width:100% !important;
    margin:0 !important;
    padding:clamp(35px,5vw,70px) 0 clamp(45px,6vw,80px);
    float:none !important;
}


/* =========================================================
   注册框
   ========================================================= */

.register-card{
    width:min(100%,880px);
    margin:0 auto;
    padding:clamp(24px,3vw,38px);

    background:#020202;
    border:1px solid rgba(255,255,255,.18);
}


/* =========================================================
   标题
   ========================================================= */

.register-heading{
    margin-bottom:clamp(25px,3vw,35px);
}

.register-heading h1{
    margin:0 0 8px;
    color:#fff;

    font-size:clamp(24px,2.2vw,31px);
    font-weight:400;
    line-height:1.3;
}

.register-heading p{
    margin:0;
    color:#888;

    font-size:14px;
    line-height:1.6;
}


/* =========================================================
   两列表单
   ========================================================= */

.register-grid{
    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        minmax(0,1fr);

    gap:18px 24px;

    width:100%;
}

.register-grid .form-wide{
    grid-column:1 / -1;
}


/* =========================================================
   单个字段
   ========================================================= */

.register-form .form-item{
    min-width:0;
    margin:0;
}

.register-form .control-label{
    display:block;

    width:100% !important;

    margin:0 0 7px;
    padding:0 !important;

    float:none !important;

    color:#ccc;

    font-size:14px;
    font-weight:400;
    line-height:1.4;
}


/* 必填星号 */

.register-form
.form-item.required
.control-label::before{

    content:"*";

    margin-right:4px;

    color:#c86d6d;
}


/* =========================================================
   输入框
   ========================================================= */

.register-form .form-control{
    display:block;

    width:100% !important;
    max-width:100% !important;

    height:44px;

    margin:0 !important;

    padding:9px 11px;

    background:#fff;

    border:1px solid #ddd;
    border-radius:0;

    color:#222;

    font-size:14px;

    box-shadow:none !important;
}

.register-form .form-control:focus{
    border-color:#888;
    outline:none;
    box-shadow:none !important;
}

.register-form textarea.form-control{
    height:auto;
    min-height:85px;
    resize:vertical;
}

.register-form .form-control[readonly]{
    background:#f4f4f4;
}


/* =========================================================
   错误提示
   ========================================================= */

.register-form .text-danger{
    margin-top:5px;
    color:#df7777;
    font-size:12px;
}


/* =========================================================
   Radio / Checkbox
   ========================================================= */

.choice-group{
    display:flex;
    align-items:center;
    flex-wrap:wrap;

    gap:12px 25px;

    min-height:44px;
}

.register-form .radio-inline,
.register-form .checkbox-inline{
    display:inline-flex;
    align-items:center;

    gap:6px;

    margin:0 !important;
    padding:0 !important;

    color:#ccc;

    font-size:14px;
    font-weight:400;
}

.register-form
.radio-inline input,

.register-form
.checkbox-inline input{
    margin:0;
}


/* =========================================================
   日期
   ========================================================= */

.register-form .input-group{
    display:flex;
    width:100%;
}

.register-form
.input-group .form-control{
    min-width:0;
    flex:1 1 auto;
}

.register-form
.input-group-btn{
    display:flex;
}

.register-form
.date-btn{
    width:44px;
    height:44px;

    padding:0;

    border:1px solid #ddd;
    border-left:0;
    border-radius:0;

    background:#fff;
    color:#222;
}


/* =========================================================
   Upload
   ========================================================= */

.register-form .upload-btn{
    height:44px;

    padding:8px 18px;

    border:1px solid #777;
    border-radius:0;

    background:transparent;
    color:#fff;
}


/* =========================================================
   CAPTCHA
   重点修复验证码
   ========================================================= */

.register-captcha{
    width:100%;
    margin:0;
    padding:0;
}


/* 清除 captcha fieldset 默认样式 */

.register-captcha fieldset{
    width:100%;
    margin:0;
    padding:0;
    border:0;
    min-width:0;
}


.register-captcha fieldset > .form-group{
    width:100%;
    margin:0 !important;
    padding:0 !important;
}


/* =========================================================
   验证码主体
   ========================================================= */

.register-captcha-box{
    width:100%;
}


/* 标题 */

.register-captcha-box .control-label{
    display:block;

    width:100% !important;

    margin:0 0 7px !important;
    padding:0 !important;

    float:none !important;

    color:#ccc;

    font-size:14px;
    font-weight:400;
    line-height:1.4;
}


/* =========================================================
   输入框 + 图片
   ========================================================= */

.register-captcha-row{
    display:flex;

    align-items:stretch;

    width:100%;

    gap:10px;
}


/* 输入框 */

.register-captcha-row .form-control{
    flex:1 1 auto;

    width:100% !important;
    min-width:0;

    height:44px;

    margin:0 !important;

    padding:9px 11px;

    background:#fff;

    border:1px solid #ddd;
    border-radius:0;

    color:#222;

    font-size:14px;

    box-shadow:none !important;
}


.register-captcha-row .form-control:focus{
    border-color:#888;
    outline:none;
    box-shadow:none !important;
}


/* =========================================================
   验证码图片
   ========================================================= */

.register-captcha-image{
    display:block;
    flex:0 0 auto;
    width:auto !important;
    height:44px !important;
    margin:0 !important;
    padding:0;
    border:1px solid #ddd;
    object-fit:contain;
    background:#fff;
}


/* =========================================================
   Error
   ========================================================= */

.register-captcha-box .text-danger{
    margin-top:6px;

    color:#df7777;

    font-size:12px;

    line-height:1.4;
}


/* =========================================================
   Mobile
   ========================================================= */

@media(max-width:767px){

    .register-captcha-row{
        gap:8px;
    }

    .register-captcha-image{
        max-width:130px;
    }

}


@media(max-width:508px){

    .register-captcha-row .form-control{
        height:42px;
    }

    .register-captcha-image{
        height:42px !important;
        max-width:110px;
    }

}

/* Google recaptcha */

.register-captcha .g-recaptcha{
    max-width:100%;
    overflow:hidden;
}


/* =========================================================
   协议
   ========================================================= */

.agree-row{
    padding-top:4px;
}

.agree-label{
    display:flex;

    align-items:flex-start;

    gap:9px;

    margin:0;

    color:#999;

    font-size:13px;
    line-height:1.7;
}

.agree-label input{
    margin-top:4px;
    flex:0 0 auto;
}

.agree-label a{
    color:#fff;
}


/* =========================================================
   注册按钮
   ========================================================= */

.register-submit{
    margin-top:3px !important;
}

.register-submit-btn{
    display:flex !important;

    align-items:center;
    justify-content:center;

    width:100% !important;
    height:45px;

    margin:0 !important;

    padding:10px 20px !important;

    border:1px solid #fff !important;
    border-radius:0 !important;

    background:#fff !important;

    color:#000 !important;

    font-size:15px !important;

    float:none !important;
}

.register-submit-btn:hover{
    background:#ddd !important;
    border-color:#ddd !important;
}


/* =========================================================
   返回登录
   ========================================================= */

.register-login-link{
    margin-top:22px;

    color:#777;

    font-size:13px;
    text-align:center;
}

.register-login-link a{
    margin-left:4px;
    color:#fff;
    text-decoration:none;
}


/* =========================================================
   Alert
   ========================================================= */

.register-alert{
    width:min(100%,880px);

    margin:20px auto 0;

    border-radius:0;
}


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

@media(max-width:991px){

    .register-container{
        width:calc(100% - 36px);
    }

    .register-card{
        width:min(100%,760px);
        padding:28px;
    }

    .register-grid{
        gap:17px 20px;
    }

}


/* =========================================================
   MOBILE <=767
   ========================================================= */

@media(max-width:767px){

    .register-container{
        width:100%;
        padding:0 14px;
    }

    .register-content{
        padding:25px 0 40px;
    }

    .register-card{
        width:100%;
        padding:22px 18px;
    }


    /* 两列变一列 */

    .register-grid{
        grid-template-columns:
            minmax(0,1fr);

        gap:17px;
    }

    .register-grid .form-wide{
        grid-column:auto;
    }

    .register-heading{
        margin-bottom:24px;
    }

    .register-heading h1{
        font-size:23px;
    }


    /* 验证码继续保持横向 */

    .register-captcha
    .captcha-wrapper,

    .register-captcha
    .input-group{

        flex-wrap:nowrap;
        gap:8px;
    }

    .register-captcha img{
        max-width:130px !important;
    }

}


/* =========================================================
   <=508
   ========================================================= */

@media(max-width:508px){

    .register-container{
        padding:0 12px;
    }

    .register-card{
        padding:20px 14px;
    }

    .register-content{
        padding:20px 0 32px;
    }

    .register-form .form-control{
        height:42px;
    }

    .choice-group{
        min-height:38px;
    }

    .register-captcha
    .form-control{

        height:42px !important;
    }

    .register-captcha img{
        height:42px !important;
        max-width:110px !important;
    }

}

/* 出生日期选填字段 */
body.account-register .birthday-field {
    align-self: start;
}

body.account-register .birthday-field .optional-label {
    color: #999;
    font-size: 13px;
    font-weight: 400;
}

body.account-register .birthday-field .field-description {
    margin: 9px 0 0;
    color: #999;
    font-size: 13px;
    line-height: 1.7;
}

body.account-register .birthday-field .text-danger {
    margin-top: 7px;
    color: #e85c5c;
    font-size: 13px;
}

body.account-register .birthday-field input[type="date"] {
    color-scheme: dark;
}

body.account-register .birthday-field input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: .85;
}

@media (max-width: 767px) {
    body.account-register .birthday-field .field-description {
        font-size: 12px;
        line-height: 1.6;
    }
}