/* 弹窗容器 */
.popup-container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10000;
    width: 90%; /* 添加容器宽度约束 */
    max-width: 30rem; /* 保持原有最大宽度 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* 弹窗主体 */
.custom-alert {
    background-color: rgba(42, 42, 64, 0.1);
    color: #fff;
    padding: 1.5rem; /* 默认内边距 */
    border-radius: 15px;
    width: 100%; /* 改为百分比宽度 */
    position: relative;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    flex: 1; /* 新增：让弹窗主体能够灵活伸缩 */
}

/* 响应式调整 */
/* 移动端优化 */
@media (max-width: 768px) {
    .custom-alert {
        width: 90vw !important;
        max-height: 80vh;
        padding: 1rem;
    }

    .popup-content p {
        font-size: 16px !important;
        line-height: 1.4;
    }

    .popup-content ol {
        padding-left: 15px !important;
        font-size: 16px !important; /* 缩小列表字体 */
    }

    .custom-confirm-button-class {
        width: 80% !important;
        padding: 0.6rem;
    }

    .popup-content h1 {
        font-size: 1.5rem !important; /* 缩小标题字体 */
    }
}

/* 确保弹窗层级最高 */
.popup-container {
    z-index: 9999 !important;
}

/* 状态图标 */
.status-icon {
    position: absolute;
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 70px;
    /*margin-top: 0.1rem;*/
}

/* 成功状态 */
.success-circle {
    stroke: #4CAF50;
    stroke-width: 2;
    fill: none;
    animation: scaleIn 0.5s ease-out forwards;
}

.success-check {
    stroke: #4CAF50;
    stroke-width: 2;
    stroke-linecap: round;
    fill: none;
    animation: drawCheck 0.5s 0.3s ease-out forwards;
}

/* 失败状态 */
.failure-circle {
    stroke: #f44336;
    stroke-width: 2;
    fill: none;
    animation: scaleIn 0.5s ease-out forwards;
}

.failure-cross {
    stroke: #f44336;
    stroke-width: 2;
    stroke-linecap: round;
    fill: none;
    animation: drawCross 0.5s 0.3s ease-out forwards;
}

/* 动画关键帧 */
@keyframes scaleIn {
    from { transform: scale(0); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

@keyframes drawCheck {
    0% { stroke-dashoffset: 30; stroke-dasharray: 30; }
    100% { stroke-dashoffset: 0; stroke-dasharray: 30; }
}

@keyframes drawCross {
    0% { stroke-dashoffset: 40; stroke-dasharray: 40; }
    100% { stroke-dashoffset: 0; stroke-dasharray: 40; }
}

/* 内容区域 */
.popup-content {
    margin-top: 5.5rem;
    text-align: center;
}

.popup-content p {
    font-size: 20px; 
    margin: 1rem 0; /* 可选：调整上下间距 */
    color: #e0e0e0;  /* 可选：调整字体颜色 */
    font-weight: 500; /* 可选：调整字体粗细 */
    line-height: 1.6; /* 可选：调整行高 */
}

/* 确认按钮 */
.custom-confirm-button-class {
    width: 50%;
    padding: 0.8rem;
    background: linear-gradient(135deg, #6a11cb, #2575fc);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 2rem;
}

.custom-confirm-button-class:hover {
    background: linear-gradient(135deg, #2575fc, #6a11cb);
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 123, 255, 0.3);
}