/* 按钮基础样式 */
.btn {
    /* 统一使用 a 标签，强制设为 inline-block */
    display: inline-block;
    /* 统一盒模型：padding 和 border 包含在宽度内 */
    box-sizing: border-box;

    /* 尺寸设置 */
    height: 40px;          /* 强制固定高度，确保一致 */
    line-height: 40px;     /* 行高等于高度，实现文字垂直居中 */
    padding: 0 20px;       /* 左右内边距 */

    /* 外观设置 */
    cursor: pointer;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    font-family: "Microsoft YaHei", sans-serif;
    text-decoration: none; /* 去掉下划线 */
    text-align: center;    /* 文字居中 */

    /* 浮动布局，解决 IE 下 inline-block 间隙和对齐问题 */
    float: left;
    margin: 0 5px;         /* 按钮间距 */
}

/* 清除浮动，防止父容器高度塌陷 */
.clearfix:after {
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix { *zoom: 1; } /* IE6/7 清除浮动 */

.btn:hover { background-color: #0056b3; }
.btn-cancel { background-color: #6c757d; }
.btn-cancel:hover { background-color: #5a6268; }


/* 模态框背景遮罩样式 - 改用绝对定位兼容IE */
.modal-overlay {
    display: none;
    position: fixed; /* IE6+ 支持 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 1;
    /*filter: alpha(opacity=50);*/
    z-index: 9999;
    /* 兼容 IE 的居中方案：不使用 flex，而是配合 JS 或 CSS hack */
    text-align: center;
}

.modal-overlay:after {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    width: 0;
    overflow: hidden;
}

/* 模态框内容容器样式 */
.modal-content {
    display: inline-block; /* 关键：让 div 变成行内块元素配合 vertical-align */
    vertical-align: middle;
    background-color: #fff;
    padding: 20px;
    border: 1px solid #ccc;
    width: 400px;
    max-width: 90%; /* 防止小屏幕溢出 */
    /*text-align: center;*/
    text-align: left;
    box-sizing: border-box;
    zoom: 1;
    position: relative;
    z-index: 10000;
}

/* 弹窗图片样式 */
.modal-image {
    border: 1px solid #ddd; /* 增加边框防止图片不可见 */
    margin-bottom: 20px;
    display: block;
}

.old-images-container {
    display: none; /* 默认隐藏 */
    width: 100%;
    margin-bottom: 15px;
}

.old-img-item {
    width: 46.5%; /* 稍微小于50%，留出间隙 */
    height: auto;
    float: left; /* 使用浮动实现并排，兼容IE8 */
    margin-left: 10px;
}

/*.old-img-item:first-child {
    margin-right: 4%;
}*/

/* 单图样式 (新款用) */
.single-image-container {
    display: none; /* 默认隐藏 */
    width: 60%;
    margin-left : 20%;
}
.single-image-container img {
    width: 100%;
    height: 200px;
    /*max-height: 200px;*/
}

.modal-actions .btn {
    margin: 0 5px; /* 按钮间距 */
}

.modal-title { font-size: 18px; margin-bottom: 10px; color: #333;text-align: center; }
/*.modal-desc { font-size: 14px; color: #666; margin-bottom: 20px;text-align: center; }*/

/* 弹窗底部按钮区域 */
.modal-actions {
    display: block; /* 强制块级 */
    *zoom: 1;      /* 触发 hasLayout */
    margin: 20px auto 0; /* 上下20px，左右自动(居中) */
    width: 160px;
}