/*!
 * 登录短信多因子验证弹窗样式
 * Copyright (c) 2013-Now http://jeesite.com All rights reserved.
 * @version 2026-10-16
 */

/* ---------- 遮罩 ---------- */
.mfa-mask {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background-color: rgba(33, 43, 54, .5)
}

.mfa-mask.hide {
    display: none
}

/* ---------- 面板 ---------- */
.mfa-panel {
    width: 460px;
    max-width: 100%;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, .16);
    overflow: hidden
}

/* ---------- 头部 ---------- */
.mfa-head {
    display: flex;
    align-items: center;
    padding: 18px 20px;
    background-color: #3c8dbc;
    color: #fff
}

.mfa-head-icon {
    flex: 0 0 auto;
    margin-right: 12px;
    font-size: 22px;
    line-height: 1
}

.mfa-head-text {
    flex: 1;
    min-width: 0
}

.mfa-head .mfa-title {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.3;
    color: #fff
}

.mfa-head .mfa-subtitle {
    margin-top: 3px;
    font-size: 12px;
    color: rgba(255, 255, 255, .8)
}

.mfa-close {
    flex: 0 0 auto;
    margin-left: 12px;
    padding: 4px 6px;
    font-size: 15px;
    color: rgba(255, 255, 255, .8);
    cursor: pointer;
    border-radius: 4px;
    transition: background-color .15s, color .15s
}

.mfa-close:hover {
    color: #fff;
    background-color: rgba(255, 255, 255, .18)
}

/* ---------- 主体 ---------- */
.mfa-dialog {
    padding: 18px 20px 4px
}

/* 账号信息区 */
.mfa-info {
    padding: 12px 14px;
    margin-bottom: 16px;
    background-color: #f7f9fb;
    border-radius: 6px
}

.mfa-info-item {
    display: flex;
    align-items: center;
    line-height: 1.9
}

/* 内容区为多行时（如多个手机号单选列表），标签保持顶部对齐 */
.mfa-info-item-block {
    align-items: flex-start
}

.mfa-info-item-block .mfa-info-label {
    padding-top: 1px
}

.mfa-info-label {
    flex: 0 0 68px;
    font-size: 13px;
    color: #8a94a6
}

.mfa-info-value {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    color: #2f3c4f;
    word-break: break-all
}

/* 接收手机：内容区（单号码显示文本，多号码显示单选列表） */
.mfa-info-body {
    flex: 1;
    min-width: 0
}

/* 多手机号选择区：内嵌在「接收手机」一行内 */
.mfa-mobile-select {
    margin-top: 2px
}

.mfa-mobile-select-list {
    display: flex;
    flex-direction: column
}

.mfa-mobile-select-tip {
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.6;
    color: #8a94a6
}

.mfa-mobile-option {
    display: flex;
    align-items: center;
    padding: 3px 0;
    font-size: 13px;
    color: #2f3c4f;
    cursor: pointer
}

.mfa-mobile-option input {
    margin: 0 7px 0 0;
    cursor: pointer
}

.mfa-mobile-option:hover {
    color: #3c8dbc
}

/* 表单区 */
.mfa-field {
    margin-bottom: 14px
}

.mfa-field-label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 500;
    color: #5a6472
}

.mfa-field-error {
    margin: 5px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: #e05b4f
}

.mfa-input.mfa-input-error {
    border-color: #e05b4f
}

.mfa-input.mfa-input-error:focus {
    border-color: #e05b4f;
    box-shadow: 0 0 0 3px rgba(224, 91, 79, .12)
}

.mfa-input {
    display: block;
    width: 100%;
    height: 38px;
    padding: 0 12px;
    font-size: 14px;
    color: #2f3c4f;
    background-color: #fff;
    border: 1px solid #d5dbe3;
    border-radius: 6px;
    transition: border-color .15s, box-shadow .15s
}

.mfa-input::placeholder {
    color: #b6bec9
}

.mfa-input:focus {
    border-color: #3c8dbc;
    box-shadow: 0 0 0 3px rgba(60, 141, 188, .12);
    outline: 0
}

.mfa-code-group {
    display: flex;
    align-items: center
}

.mfa-code-group .mfa-input {
    flex: 1;
    min-width: 0
}

.mfa-img {
    flex: 0 0 104px;
    height: 38px;
    margin-left: 10px;
    cursor: pointer;
    border: 1px solid #d5dbe3;
    border-radius: 6px;
    background-color: #fff
}

.mfa-send-btn {
    flex: 0 0 112px;
    height: 38px;
    margin-left: 10px;
    padding: 0;
    font-size: 13px;
    color: #3c8dbc;
    background-color: #fff;
    border: 1px solid #3c8dbc;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color .15s, color .15s, border-color .15s
}

.mfa-send-btn:hover:not(:disabled) {
    color: #fff;
    background-color: #3c8dbc
}

.mfa-send-btn:disabled {
    color: #a8b3c0;
    background-color: #f2f5f8;
    border-color: #d5dbe3;
    cursor: not-allowed
}

/* ---------- 提示 ---------- */
.mfa-tips {
    margin: 0 0 12px;
    font-size: 12px;
    line-height: 1.7;
    color: #8a94a6;
    word-break: break-word
}

.mfa-tips:empty {
    display: none
}

.mfa-tips.error {
    color: #e05b4f
}

.mfa-tips.success {
    color: #2e9e5b
}

.mfa-tips.mfa-company {
    padding: 8px 10px;
    color: #8a6d3b;
    background-color: #fcf8e3;
    border: 1px solid #faebcc;
    border-radius: 6px
}

.mfa-appeal-link {
    margin-left: 4px;
    color: #3c8dbc;
    text-decoration: underline
}

.mfa-appeal-link:hover {
    color: #357ca9
}

.mfa-appeal-link.disabled {
    color: #a8b3c0;
    text-decoration: none;
    cursor: not-allowed
}

/* 兜底确保隐藏生效。
   本文件中部分元素声明了 display，其特异性可能高于 Bootstrap 的
   .hide { display: none }，导致 toggleClass('hide') 失效，
   这里统一用 !important 保证隐藏。 */
.mfa-company.hide,
.mfa-appeal-link.hide,
.mfa-dialog .mfa-tips.hide,
.mfa-dialog .mfa-row.hide,
.mfa-dialog .mfa-field.hide,
.mfa-dialog .mfa-info-item.hide {
    display: none !important
}

/* ---------- 底部按钮 ---------- */
.mfa-footer {
    display: flex;
    justify-content: flex-end;
    padding: 14px 20px 18px
}

.mfa-footer .mfa-btn {
    display: inline-block;
    min-width: 88px;
    height: 38px;
    line-height: 36px;
    padding: 0 20px;
    margin-left: 10px;
    font-size: 14px;
    text-align: center;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color .15s, color .15s, border-color .15s
}

.mfa-footer .mfa-btn-cancel {
    color: #5a6472;
    background-color: #fff;
    border: 1px solid #d5dbe3
}

.mfa-footer .mfa-btn-cancel:hover {
    color: #2f3c4f;
    border-color: #b6bec9
}

.mfa-footer .mfa-btn-confirm {
    color: #fff;
    background-color: #3c8dbc;
    border: 1px solid #3c8dbc
}

.mfa-footer .mfa-btn-confirm:hover:not(.disabled) {
    background-color: #357ca9;
    border-color: #357ca9
}

.mfa-footer .mfa-btn-confirm.disabled {
    color: #fff;
    background-color: #a8c4d8;
    border-color: #a8c4d8;
    cursor: not-allowed
}

/* ---------- 深色皮肤 ---------- */
.skin-dark .mfa-panel {
    background-color: #1c2333
}

.skin-dark .mfa-info {
    background-color: #232b3a
}

.skin-dark .mfa-info-label {
    color: #9aa4b2
}

.skin-dark .mfa-info-value {
    color: #d6d6d6
}

.skin-dark .mfa-mobile-select {
    background-color: transparent;
    border-color: transparent
}

.skin-dark .mfa-mobile-select-tip {
    color: #8a94a6
}

.skin-dark .mfa-mobile-select-list {
    display: flex;
    flex-direction: column
}

.skin-dark .mfa-mobile-select-title {
    color: #9aa4b2
}

.skin-dark .mfa-mobile-option {
    color: #d6d6d6
}

.skin-dark .mfa-mobile-option:hover {
    color: #6baed6
}

.skin-dark .mfa-field-label {
    color: #b6bec9
}

.skin-dark .mfa-input {
    color: #ddd;
    background-color: #313131;
    border-color: #4b4b4b
}

.skin-dark .mfa-input::placeholder {
    color: #6b7684
}

.skin-dark .mfa-input:focus {
    border-color: #357ca9;
    box-shadow: 0 0 0 3px rgba(53, 124, 169, .2)
}

.skin-dark .mfa-img {
    background-color: #fff;
    border-color: #4b4b4b
}

.skin-dark .mfa-send-btn {
    color: #6baed6;
    background-color: transparent;
    border-color: #357ca9
}

.skin-dark .mfa-send-btn:hover:not(:disabled) {
    color: #fff;
    background-color: #357ca9
}

.skin-dark .mfa-send-btn:disabled {
    color: #6b7684;
    background-color: #232b3a;
    border-color: #4b4b4b
}

.skin-dark .mfa-tips {
    color: #9aa4b2
}

.skin-dark .mfa-tips.mfa-company {
    color: #d8b96a;
    background-color: #2f2a1e;
    border-color: #4a4130
}

.skin-dark .mfa-appeal-link {
    color: #6baed6
}

.skin-dark .mfa-appeal-link:hover {
    color: #85c1e9
}

.skin-dark .mfa-appeal-link.disabled {
    color: #6b7684
}

.skin-dark .mfa-footer .mfa-btn-cancel {
    color: #b6bec9;
    background-color: transparent;
    border-color: #4b4b4b
}

.skin-dark .mfa-footer .mfa-btn-cancel:hover {
    color: #ddd;
    border-color: #6b7684
}

/* ---------- 小屏适配 ---------- */
@media (max-width: 480px) {
    .mfa-panel {
        width: 100%
    }

    .mfa-head {
        padding: 16px
    }

    .mfa-dialog {
        padding: 16px 16px 4px
    }

    .mfa-footer {
        padding: 12px 16px 16px
    }

    .mfa-send-btn {
        flex: 0 0 96px;
        font-size: 12px
    }
}