/**
 * 统一登录(SSO)插件 - 前端样式
 * Copyright (c) 攸迁科技 All rights reserved.
 */

/* ========== 登录页面 - 第三方登录区域 ========== */
.unified-login-section {
    margin: 15px 0 10px;
    padding: 0 20px;
}

.unified-login-divider {
    text-align: center;
    margin: 15px 0 12px;
    position: relative;
}

.unified-login-divider::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 1px;
    background-color: #e5e5e5;
}

.unified-login-divider span {
    position: relative;
    background-color: #fff;
    padding: 0 15px;
    color: #999;
    font-size: 13px;
}

/* 图标模式 */
.unified-login-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.unified-login-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid #e0e0e0;
    color: #666;
    text-decoration: none;
    transition: all 0.3s ease;
    background: #fff;
}

.unified-login-icon:hover {
    border-color: #1890ff;
    color: #1890ff;
    box-shadow: 0 2px 8px rgba(24, 144, 255, 0.2);
    transform: translateY(-2px);
    text-decoration: none;
}

/* 各平台图标hover颜色 */
.unified-login-icon-wecom:hover { border-color: #2B7CE9; box-shadow: 0 2px 8px rgba(43,124,233,0.2); }
.unified-login-icon-wechat:hover { border-color: #07C160; box-shadow: 0 2px 8px rgba(7,193,96,0.2); }
.unified-login-icon-haiduoke:hover { border-color: #FF6B35; box-shadow: 0 2px 8px rgba(255,107,53,0.2); }
.unified-login-icon-google:hover { border-color: #4285F4; box-shadow: 0 2px 8px rgba(66,133,244,0.2); }
.unified-login-icon-facebook:hover { border-color: #1877F2; box-shadow: 0 2px 8px rgba(24,119,242,0.2); }
.unified-login-icon-github:hover { border-color: #24292e; box-shadow: 0 2px 8px rgba(36,41,46,0.2); }
.unified-login-icon-oauth2:hover { border-color: #6C63FF; box-shadow: 0 2px 8px rgba(108,99,255,0.2); }

/* 图标使用SVG内联背景图 */
.ul-icon-github {
    display: inline-block;
    width: 22px;
    height: 22px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23333' d='M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.ul-icon-haiduoke {
    display: inline-block;
    width: 22px;
    height: 22px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect fill='%23FF6B35' rx='4' width='24' height='24'/%3E%3Ctext x='12' y='16' text-anchor='middle' fill='white' font-size='10' font-weight='bold' font-family='Arial'%3EHDK%3C/text%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.ul-icon-wecom {
    display: inline-block;
    width: 22px;
    height: 22px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%232B7CE9' d='M15.3 6.8c-.4 0-.7.3-.7.7s.3.7.7.7.7-.3.7-.7-.3-.7-.7-.7zm-6.6 0c-.4 0-.7.3-.7.7s.3.7.7.7.7-.3.7-.7-.3-.7-.7-.7zM12 2C6.5 2 2 5.8 2 10.5c0 2.7 1.5 5.1 3.9 6.7l-.5 2.3c-.1.3.1.5.4.4l2.6-1.2c1.1.4 2.3.6 3.6.6 5.5 0 10-3.8 10-8.5S17.5 2 12 2z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.ul-icon-wechat {
    display: inline-block;
    width: 22px;
    height: 22px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2307C160' d='M8.691 2.188C3.891 2.188 0 5.476 0 9.53c0 2.212 1.17 4.203 3.002 5.55a.59.59 0 01.213.665l-.39 1.48c-.019.07-.048.141-.048.213 0 .163.13.295.29.295a.326.326 0 00.167-.054l1.903-1.114a.864.864 0 01.717-.098 10.16 10.16 0 002.837.403c.276 0 .543-.027.811-.05-.857-2.578.157-4.972 1.932-6.446 1.703-1.415 3.882-1.98 5.853-1.838-.576-3.583-4.196-6.348-8.596-6.348z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.ul-icon-google {
    display: inline-block;
    width: 22px;
    height: 22px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%234285F4' d='M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 01-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z'/%3E%3Cpath fill='%2334A853' d='M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z'/%3E%3Cpath fill='%23FBBC05' d='M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z'/%3E%3Cpath fill='%23EA4335' d='M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.ul-icon-facebook {
    display: inline-block;
    width: 22px;
    height: 22px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%231877F2' d='M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.ul-icon-oauth2 {
    display: inline-block;
    width: 22px;
    height: 22px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%236C63FF' d='M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 2.18l7 3.12v4.7c0 4.83-3.13 9.37-7 10.5-3.87-1.13-7-5.67-7-10.5V6.3l7-3.12z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* ========== 按钮模式 ========== */
.unified-login-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    max-width: 300px;
    margin: 8px auto;
    padding: 10px 20px;
    border-radius: 4px;
    border: 1px solid #e5e5e5;
    color: #333;
    font-size: 14px;
    text-decoration: none;
    transition: all 0.3s ease;
    background-color: #fff;
}

.unified-login-btn:hover {
    background-color: #f5f5f5;
    border-color: #ccc;
    text-decoration: none;
    color: #333;
}

.unified-login-btn i {
    font-size: 18px;
}

/* 各平台按钮样式 */
.unified-login-btn-wecom { border-color: #2B7CE9; color: #2B7CE9; }
.unified-login-btn-wecom:hover { background-color: #2B7CE9; color: #fff; }
.unified-login-btn-wechat { border-color: #07C160; color: #07C160; }
.unified-login-btn-wechat:hover { background-color: #07C160; color: #fff; }
.unified-login-btn-haiduoke { border-color: #FF6B35; color: #FF6B35; }
.unified-login-btn-haiduoke:hover { background-color: #FF6B35; color: #fff; }
.unified-login-btn-google { border-color: #4285F4; color: #4285F4; }
.unified-login-btn-google:hover { background-color: #4285F4; color: #fff; }
.unified-login-btn-facebook { border-color: #1877F2; color: #1877F2; }
.unified-login-btn-facebook:hover { background-color: #1877F2; color: #fff; }
.unified-login-btn-github { border-color: #24292e; color: #24292e; }
.unified-login-btn-github:hover { background-color: #24292e; color: #fff; }
.unified-login-btn-oauth2 { border-color: #6C63FF; color: #6C63FF; }
.unified-login-btn-oauth2:hover { background-color: #6C63FF; color: #fff; }

/* ========== 用户中心 - 绑定状态 ========== */
.unified-login-bind-section {
    margin: 15px 0;
    padding: 15px;
    background: #fff;
    border-radius: 4px;
    border: 1px solid #eee;
}

.unified-login-bind-title {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}

.unified-login-bind-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.unified-login-bind-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 15px;
    background: #fafafa;
    border-radius: 4px;
    border: 1px solid #f0f0f0;
}

.bind-provider {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: #333;
}

.bind-provider i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #f5f5f5;
}

.bind-status {
    display: flex;
    align-items: center;
    gap: 10px;
}

.bind-nickname {
    color: #52c41a;
    font-size: 13px;
}

.bind-action {
    padding: 4px 12px;
    border-radius: 3px;
    font-size: 12px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.bind-btn {
    background: #1890ff;
    color: #fff;
    border: 1px solid #1890ff;
}

.bind-btn:hover {
    background: #40a9ff;
    color: #fff;
    text-decoration: none;
}

.unbind-btn {
    background: #fff;
    color: #ff4d4f;
    border: 1px solid #ff4d4f;
}

.unbind-btn:hover {
    background: #ff4d4f;
    color: #fff;
    text-decoration: none;
}

/* ========== 响应式适配 ========== */
@media (max-width: 640px) {
    .unified-login-section {
        padding: 0 10px;
    }
    .unified-login-buttons {
        gap: 15px;
    }
    .unified-login-icon {
        width: 40px;
        height: 40px;
    }
    .unified-login-icon i {
        width: 18px;
        height: 18px;
    }
    .unified-login-btn {
        max-width: 100%;
        padding: 8px 15px;
    }
    .unified-login-bind-item {
        flex-direction: column;
        gap: 8px;
        text-align: center;
    }
}