/* 国际区号下拉搜索组件 */

/* ===== 分离式布局：区号与手机号并排 ===== */
.country-select-row {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
}

.country-select-row > .iconfont.ico,
.country-select-row > .iconfont.icon {
    position: static !important;
    left: auto !important;
    top: auto !important;
    margin-right: 8px;
    flex-shrink: 0;
}

.country-select-row label.error {
    flex: 0 0 100%;
    width: 100%;
    margin-top: 6px;
    color: #ff4040;
    font-size: 12px;
    line-height: 1.4;
    white-space: normal;
}

.country-select-row .country-select-wrap.country-select-wrap-separate {
    position: relative;
    left: auto;
    top: auto;
    width: 110px;
    height: 46px;
    flex-shrink: 0;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    box-sizing: border-box;
    z-index: 999;
}

.country-select-row input.country-select-phone {
    flex: 1;
    width: auto !important;
    height: 46px;
    margin-left: 10px;
    padding: 0 12px !important;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: #fff;
    box-sizing: border-box;
    outline: none;
    line-height: 46px;
}

.country-select-row input.country-select-phone:focus {
    border-color: #aaa;
}

.country-select-row.error .country-select-wrap-separate,
.country-select-row.error input.country-select-phone {
    border-color: #ff4040 !important;
}

/* ===== 触发按钮 ===== */
.country-select-wrap {
    position: absolute;
    z-index: 999;
    border: 1px solid #ddd;
    border-radius: 6px;
    box-sizing: border-box;
    background: #fff;
}

.country-select-trigger {
    position: relative;
    width: 100%;
    height: 100% !important;
    line-height: normal !important;
    padding: 0 24px 0 10px;
    box-sizing: border-box;
    background: #fff;
    cursor: pointer;
    font-size: 13px;
    color: #333;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: center;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.country-select-trigger .arrow {
    position: absolute;
    right: 10px;
    top: 50%;
    margin-top: -2px;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid #666;
    transition: transform 0.2s ease;
}

.country-select-wrap.open .country-select-trigger .arrow {
    transform: rotate(180deg);
}

/* ===== 下拉面板 ===== */
.country-select-dropdown {
    position: absolute;
    left: 0;
    top: 50px;
    width: 280px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    z-index: 1000;
    overflow: hidden;
}

/* ===== 搜索框 ===== */
.country-select-search {
    position: relative;
    padding: 10px;
    border-bottom: 1px solid #f0f0f0;
    background: #fff;
}

.country-select-search::before {
    content: '';
    position: absolute;
    left: 19px;
    top: 50%;
    width: 9px;
    height: 9px;
    border: 2px solid #bbb;
    border-radius: 50%;
    transform: translateY(-50%);
    margin-top: -2px;
    box-sizing: border-box;
}

.country-select-search::after {
    content: '';
    position: absolute;
    left: 28px;
    top: 50%;
    width: 6px;
    height: 2px;
    background: #bbb;
    transform: rotate(45deg);
    margin-top: 5px;
    border-radius: 1px;
}

.country-select-search input {
    width: 100%;
    height: 34px;
    padding: 0 10px 0 32px;
    box-sizing: border-box;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    font-size: 13px;
    outline: none;
    color: #666;
}

.country-select-search input:focus {
    border-color: #aaa;
}

.country-select-search input::placeholder {
    color: #bbb;
}

/* ===== 下拉列表 ===== */
.country-select-list {
    max-height: 280px;
    overflow-y: auto;
    margin: 0;
    padding: 6px 0;
    list-style: none;
}

.country-select-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 9px 14px;
    cursor: pointer;
    font-size: 13px;
    color: #333;
    transition: background 0.15s ease;
}

.country-select-list li:hover,
.country-select-list li.active {
    background: #e6f7ff;
    color: #1890ff;
}

.country-select-list li.no-result {
    color: #999;
    cursor: default;
    justify-content: center;
    padding: 18px 10px;
}

.country-select-list li.no-result:hover {
    background: transparent;
}

.country-select-list .country-name {
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-right: 10px;
}

.country-select-list .country-code {
    color: #999;
    flex-shrink: 0;
    text-align: right;
}

/* ===== 隐藏登录/注册表单输入框前的图标并统一对齐 ===== */
.page_login .login_form .mc .ico,
.page_login .login_form .mc .icon,
.page_register .register_form .item .ico,
.page_register .register_form .item .icon,
.quick-login .iconfont.icon {
    display: none !important;
}

/* 输入框容器使用 flex 布局 */
.page_login .login_form .mc .item .text-area,
.page_login .login_form .mc .item .country-select-row,
.page_register .register_form .item .item-text,
.quick-login dd {
    display: flex !important;
    align-items: center;
    flex-wrap: wrap;
}

/* 所有输入框自适应宽度，统一高度46px */
.page_login .login_form .mc .item .text,
.page_register .register_form .item .text,
.quick-login dd .text {
    flex: 1 !important;
    width: auto !important;
    height: 46px !important;
    padding: 0 12px !important;
    box-sizing: border-box !important;
    line-height: 46px !important;
    float: none !important;
}

/* 发送按钮/图片验证码左侧间距 */
.page_login .login_form .mc .item .send_code,
.page_login .login_form .mc .item .span,
.page_register .register_form .item .send_code,
.page_register .register_form .item .span,
.quick-login dd .send_code,
.quick-login dd img.fl {
    margin: 0 0 0 10px !important;
    float: none !important;
    flex-shrink: 0;
}

/* ===== 登录/注册选项卡宽度自适应，避免文字换行 ===== */
.page_login .login_form .mt {
    display: flex;
    justify-content: center;
    align-items: center;
}

.page_login .login_form .mt a {
    float: none;
    width: auto;
    padding: 0 25px;
    white-space: nowrap;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.page_login .login_form .mt a span {
    margin-top: 0;
}

/* ===== 优化登录/注册表单整体排版 ===== */
.page_login .login_form {
    width: 440px;
    padding: 35px 50px;
    box-sizing: border-box;
    float: none;
    margin: 0 auto;
}

/* ===== 登录页（.page_login）错误提示不重叠 ===== */
.page_login .login_form .mc .item {
    height: auto !important;
    margin-bottom: 30px !important;
}

.page_login .login_form .mc .item .text-area,
.page_login .login_form .mc .item .country-select-row {
    position: relative;
}

.page_login .login_form .mc .item label.error,
.page_login .login_form .mc .item .country-select-row label.error {
    display: block;
    flex: 0 0 100%;
    width: 100%;
    margin-top: 6px;
    color: #ff4040;
    font-size: 12px;
    line-height: 1.4;
    white-space: normal;
}

/* ===== 找回密码/注册页面（.page_register）表单项对齐 ===== */
.page_register .register_form .item {
    display: flex;
    align-items: flex-start;
    height: auto !important;
    padding-top: 0 !important;
    margin-bottom: 30px !important;
    line-height: normal !important;
}

.page_register .register_form .item .label {
    float: none;
    flex-shrink: 0;
    line-height: 46px;
}

.page_register .register_form .item .item-text {
    float: none;
    width: 300px;
    display: flex;
    align-items: center;
    position: relative;
    flex-wrap: wrap;
}

/* 区号框在 .item-text 中占满宽度 */
.page_register .register_form .item .item-text .country-select-wrap,
.page_register .register_form .item .item-text .country-select-wrap-separate {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    height: 46px;
    border: 1px solid #ddd;
    border-radius: 6px;
    box-sizing: border-box;
}

.page_register .register_form .item .item-text .text {
    flex: 1 !important;
    width: auto !important;
    height: 46px !important;
    padding: 0 12px !important;
    box-sizing: border-box !important;
    line-height: 46px !important;
    border-radius: 6px !important;
    float: none !important;
}

.page_register .register_form .item .item-text .send_code {
    width: 120px !important;
    height: 46px !important;
    margin: 0 0 0 10px !important;
    line-height: 46px !important;
    border-radius: 6px !important;
    text-align: center !important;
    float: none !important;
    flex-shrink: 0;
}

/* 找回密码页验证码框保持内联宽度（仅影响当前页面 #post_form 内的验证码） */
#post_form #sms_captcha,
#post_form #email_captcha {
    width: 120px !important;
}

#post_form #email_captcha {
    width: 130px !important;
}

/* 找回密码/注册页错误提示不重叠 */
.page_register .register_form .item .item-text label.error {
    display: block;
    width: 100%;
    margin-top: 6px;
    color: #ff4040;
    font-size: 12px;
    line-height: 1.4;
    white-space: normal;
}

.page_login .login_form .mc {
    margin-top: 20px;
}

.page_login .login_form .mc .item {
    width: 100%;
    margin-bottom: 18px;
}

.page_login .login_form .mc .item .text-area,
.page_login .login_form .mc .item .item-text {
    width: 100%;
}

/* 验证码发送按钮宽度缩小，比例更协调 */
.page_login .login_form .mc .item .send_code {
    width: 120px;
    border-radius: 6px;
}

/* 图片验证码容器圆角统一 */
.page_login .login_form .mc .item .span {
    border-radius: 6px;
    overflow: hidden;
}