/* =================================================================
   【Layui-Fix Ultimate】现代 UI 增强修复包 (最终完美版)
   功能：
   1. 核心修复：Bootstrap 环境下图标错位、截断、滚动条问题
   2. 视觉升级：大圆角、柔光投影、极简标题栏
   3. 特别修正：排除 Loading 层的白色背景，恢复透明
   ================================================================= */

/* -----------------------------------------------------------------
   1. 核心修复区 (Core Fix) - 解决对不齐的问题
   ----------------------------------------------------------------- */

/* 针对 layer.msg / alert / confirm 的内容区：强制 Flex 布局 */
html body .layui-layer-dialog .layui-layer-content {
    display: flex !important;           /* 弹性布局 */
    align-items: center !important;     /* 垂直居中 */
    justify-content: center !important; /* 水平居中 */
    width: auto !important;
    min-width: 260px !important;
    padding: 24px 30px !important;      /* 增加呼吸感 */
    line-height: 1.6 !important;
    font-size: 15px !important;
    color: #4a4a4a !important;          
    overflow: visible !important;       /* 防止图标被切头 */
}

/* 修复图标定位：从绝对定位改为流式布局 */
html body .layui-layer-dialog .layui-layer-content .layui-layer-face {
    position: static !important;
    margin: 0 15px 0 0 !important;      
    top: 0 !important;
    left: 0 !important;
    font-size: 32px !important;         
    line-height: 1 !important;
    display: inline-block !important;
    flex-shrink: 0 !important;
}

/* -----------------------------------------------------------------
   2. 视觉升级区 (UI Upgrade) - 让它变“高级”
   ----------------------------------------------------------------- */

/* 通用弹窗主体：白底、大圆角、柔光投影 */
/* 注意：这里使用了 :not 排除加载层，防止转圈圈带白底 */
html body .layui-layer:not(.layui-layer-loading) {
    background-color: #fff !important;
    box-shadow: 0 6px 16px 0 rgba(0,0,0,0.08), 
                0 3px 6px -4px rgba(0,0,0,0.12), 
                0 9px 28px 8px rgba(0,0,0,0.05) !important;
    border: none !important;            
    border-radius: 8px !important;      
}

/* 标题栏：极简风格 */
html body .layui-layer-title {
    background-color: #fff !important;  
    border-bottom: 1px solid #f0f0f0 !important; 
    color: #333 !important;
    font-weight: 600 !important;        
    font-size: 16px !important;
    height: 50px !important;
    line-height: 50px !important;
    border-radius: 8px 8px 0 0 !important;
    padding-left: 24px !important;      
}

/* 底部按钮区 */
html body .layui-layer-btn {
    padding: 10px 20px 20px !important; 
    background: #fff !important;
    border-radius: 0 0 8px 8px !important;
}

/* 按钮通用样式：扁平化 */
html body .layui-layer-btn a {
    height: 34px !important;
    line-height: 34px !important;
    border-radius: 6px !important;      
    font-size: 14px !important;
    transition: all 0.2s ease-in-out !important; 
    margin: 0 6px !important;
}

/* 确认按钮 (Primary) */
html body .layui-layer-btn .layui-layer-btn0 {
    border-color: #16baaa !important;   
    background-color: #16baaa !important;
    color: #fff !important;
    box-shadow: 0 2px 0 rgba(0,0,0,0.045) !important; 
}
html body .layui-layer-btn .layui-layer-btn0:hover {
    opacity: 0.9;
    transform: translateY(-1px);        
    box-shadow: 0 4px 12px rgba(22,186,170,0.3) !important; 
}

/* 取消按钮 (Secondary) */
html body .layui-layer-btn .layui-layer-btn1 {
    background: #fff !important;
    border: 1px solid #d9d9d9 !important;
    color: #666 !important;
}
html body .layui-layer-btn .layui-layer-btn1:hover {
    color: #16baaa !important;
    border-color: #16baaa !important;
}

/* -----------------------------------------------------------------
   3. 特殊补丁区 (Special Fixes)
   ----------------------------------------------------------------- */

/* 【关键修复】Loading 加载层必须强制透明！ */
html body .layui-layer-loading {
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
}
/* 修复 Loading 图标可能被 flex 影响的问题 */
html body .layui-layer-loading .layui-layer-content {
    width: auto !important;
    height: auto !important;
    margin: 0 auto !important;
}

/* 针对 Msg (黑底/白底提示框) 的微调 */
html body .layui-layer-msg {
    min-width: 180px !important;
    border: 1px solid #ebeef5 !important;
    /* 如果你想要那种经典的“半透明黑底白字”Toast 效果，解开下面这行注释 */
    /* background-color: rgba(0,0,0,0.8) !important; color: #fff !important; border: none !important; */
}