/**
 * 子比账户注销 - 样式文件
 * 参考子比主题签到弹窗风格
 */

/* 注销按钮样式 - 用户中心侧边栏 */
.icon-but-account-delete {
    cursor: pointer;
    transition: all 0.3s ease;
}

.icon-but-account-delete:hover {
    opacity: 0.85;
}

.icon-but-account-delete .c-red {
    color: #ff6b6b !important;
}

/* 用户信息卡片 */
.zb-delete-user-card .user-info {
    padding: 10px;
}

.zb-delete-user-card .avatar-img {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
}

.zb-delete-user-card .avatar-img img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.zb-delete-user-card .user-right {
    overflow: hidden;
}

.zb-delete-user-card .display-name {
    font-size: 1.1em;
}

.zb-delete-user-card .img-icon {
    height: 16px;
    vertical-align: middle;
}

/* 声明内容区域 */
.zb-delete-notice {
    padding: 15px;
}

.zb-delete-notice ol,
.zb-delete-notice ul {
    padding-left: 20px;
    margin: 10px 0;
}

.zb-delete-notice li {
    margin-bottom: 8px;
    line-height: 1.8;
}

.zb-delete-notice strong {
    color: #c62828;
}

/* 资产网格布局 */
.zb-delete-assets {
    margin-bottom: 10px;
}

.assets-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

@media (max-width: 576px) {
    .assets-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.asset-item {
    transition: all 0.2s ease;
    min-height: 70px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 1px solid var(--muted-3-color, #e8e8e8);
    background: var(--main-bg-color, #fff);
}

.asset-item:hover {
    border-color: var(--focus-color, #2196f3);
}

.asset-item .fa {
    font-size: 1.2em;
}

.asset-item .font-bold {
    font-size: 1.1em;
    color: var(--color-default, #333);
}

/* 警告框样式 */
.zb-delete-warning {
    background: #fff5f5;
    border: 1px solid #ffcdd2;
}

/* 表单输入框 */
.zb-delete-form .form-control {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--muted-3-color, #e0e0e0);
    border-radius: 6px;
    font-size: 14px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    background: var(--main-bg-color, #fff);
}

.zb-delete-form .form-control:focus {
    border-color: var(--focus-color, #2196f3);
    outline: none;
    box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);
}

.zb-delete-form .form-control::placeholder {
    color: var(--muted-2-color, #999);
}

/* 按钮样式增强 */
.modal-buts .but.jb-red {
    background: linear-gradient(135deg, #f44336, #d32f2f) !important;
    color: #fff !important;
    border: none !important;
}

.modal-buts .but.jb-red:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

.modal-buts .but.c-red {
    color: #fff !important;
    background: #f44336 !important;
    border-color: #f44336 !important;
}

.modal-buts .but.c-red:hover {
    background: #d32f2f !important;
    border-color: #d32f2f !important;
}

/* 最终确认页面图标动画 */
.zb-delete-final-icon {
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.05);
        opacity: 0.8;
    }
}

/* 内容切换动画 */
.modal-content {
    transition: opacity 0.2s ease;
}

/* 响应式调整 */
@media (max-width: 576px) {
    .modal-buts.but-average {
        flex-wrap: wrap;
        gap: 8px;
    }
    
    .modal-buts.but-average .but {
        flex: 1 1 45%;
        min-width: 120px;
    }
    
    .zb-delete-notice {
        padding: 10px;
    }
}

/* 滚动条美化 - 继承子比主题 */
.zb-delete-notice.mini-scrollbar::-webkit-scrollbar {
    width: 4px;
}

.zb-delete-notice.mini-scrollbar::-webkit-scrollbar-thumb {
    background: var(--muted-3-color, #ddd);
    border-radius: 4px;
}

.zb-delete-notice.mini-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}