/**
 * 子比增强功能合集 - 评论删除美化弹窗样式
 *
 * 说明：弹窗外观【完全复用主题 zib_modal() 的 colorful_header 类】
 *   .modal-colorful-header .colorful-bg .jb-yellow .colorful-make .em2x .modal-buts.but-average
 * 这些类的样式（含动态 random1 装饰动画）全部来自主题 main.css，本文件
 * 只负责：① 外层遮罩定位与显隐过渡；② 弹窗容器定位/圆角/缩放动画；
 * ③ 内容区与文案的微小排版。不重复定义主题已有的视觉样式，确保与
 * 退出登录弹窗 100% 一致。
 */

/* 外层遮罩 + 容器（自管显隐，不依赖 Bootstrap） */
.zib-del-comment-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.zib-del-comment-modal.zib-dcm-visible {
    opacity: 1;
    visibility: visible;
}

/* 黑色半透明背景（自管，避免 Bootstrap 双 backdrop 残留黑屏） */
.zib-dcm-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
}

/* 弹窗容器：position:relative 让主题绝对定位的彩色头部正确附着 */
.zib-dcm-dialog {
    position: relative;
    width: 360px;
    max-width: calc(100% - 20px);
    background: var(--main-bg-color, #fff);
    border-radius: var(--main-radius, 12px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    transform: scale(0.92);
    transition: transform 0.25s cubic-bezier(0.32, 0.85, 0.45, 1.18);
    z-index: 1;
}

.zib-del-comment-modal.zib-dcm-visible .zib-dcm-dialog {
    transform: scale(1);
}

/* 显式保证彩色头部文字/图标为白色（jb-yellow 仅设了 --this-bg，未设 --this-color） */
.zib-dcm-dialog .modal-colorful-header.colorful-bg {
    --this-color: #fff;
}

/* 内容区：主题 .modal-colorful-header + * 已自动 margin-top:120px 让出头部高度，
   这里仅补充分区内边距 */
.zib-dcm-body {
    padding: 18px 20px 16px;
    text-align: center;
    background: var(--main-bg-color, #fff);
}

.zib-dcm-subtitle {
    font-size: 14px;
    color: var(--muted-color, #999);
    margin-bottom: 6px;
}

.zib-dcm-question {
    font-size: 15px;
    color: #f04494;
    font-weight: 500;
}

/* 移动端适配 */
@media (max-width: 480px) {
    .zib-dcm-dialog {
        width: 100%;
        max-width: calc(100% - 20px);
    }
}