/* 弹窗背景 */
.popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.popup-container {
    position: relative;
    background: linear-gradient(135deg, rgba(255, 235, 229) 5.73%, rgba(255, 235, 229) 14.93%, rgba(255, 217, 233) 35.76%, rgba(255, 196, 221) 67.19%, rgba(255, 229, 220) 86.98%);
    border-radius: 16px; /* 更大的圆角 */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    padding: 20px;
    max-width: 400px; /* 调整宽度更适配居中弹窗 */
    width: 90%; /* 保证在窄屏幕上也能显示 */
    overflow: hidden;
    animation: popup-fadein 0.3s ease-out; /* 弹出动画 */
}

/* 标题区域的样式 */
.popup-header {
    background: linear-gradient(90deg, #ff758c, #ff547a); /* 渐变背景 */
    padding: 66px;
    text-align: center;
    background-image: url("https://img.132130.xyz/authorBg01.webp"); /* 背景图像 */
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover !important;
    border-top-left-radius: 16px; /* 圆角 */
    border-top-right-radius: 16px; /* 圆角 */
}

.popup-title {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: bold;
    color: white;
    text-shadow: 4px 4px 8px #ff5a7a;
}

/* 弹窗说明文字 */
.popup-desc {
    padding: 20px 10px;
    text-align: center;
    color: #666666; /* 说明文字颜色 */
    font-size: 14px;
    line-height: 1.6;
}

/* 按钮区域样式 */
.buttons {
    display: flex;
    justify-content: space-between;
    gap: 10px; /* 按钮间距 */
    margin-top: 20px;
}

.popup-btn {
    flex: 1; /* 按钮等宽 */
    text-align: center;
    padding: 10px;
    border-radius: 5px;
    font-size: 14px;
    transition: background-color 0.3s, transform 0.2s;
    color: white !important; /* 按钮文字颜色 */
    cursor: pointer;
    text-decoration: none; /* 去掉下划线 */
}

/* 按钮颜色定义 */
.community-btn {
    background-color: #ff5a7a; /* 更鲜明的粉色 */
}

.community-btn:hover {
    background-color: #ff3f5c; /* 悬停时的颜色 */
}

.public-account-btn {
    background-color: #ff9500; /* 更鲜明的橙色 */
}

.public-account-btn:hover {
    background-color: #ff7a00; /* 悬停时的颜色 */
}

.love-electric-btn {
    background-color: #28a745; /* 绿色按钮 */
}

.love-electric-btn:hover {
    background-color: #218838; /* 悬停时的颜色 */
}

/* 关闭按钮样式 */
.popup-close {
    position: absolute;
    top: 5px;
    right: 5px;
    font-size: 20px;
    font-weight: bold;
    color: #666666; /* 关闭按钮颜色为白色 */
    cursor: pointer;
    transition: color 0.3s;
}

.popup-close:hover {
    color: black; /* 鼠标悬停时变浅 */
}

/* 弹出动画 */
@keyframes popup-fadein {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}
