/* ========================================
   ewmlt.css - 乌贼二维码聊天 自定义样式
   仅包含 Bootstrap 无法覆盖的个性化样式
   ======================================== */

/* 主容器样式增强 */
.zjwk {
    margin: 10px; /* 每列之间的间隙 */
    background-color: white; /* 背景颜色，可根据需要调整 */
    padding: 15px; /* 内边距 */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); /* 阴影效果 */
    border-radius: 8px; /* 圆角 */
    text-align: left; /* 文字居左 */

    margin-left: 10px; /* 增加左外边距 */
    margin-top: 10px;  /* 增加上边距离 */
    margin-right: 10px;  /* 增加右边距离 */
    height: auto;  /* height: 73vh;  高度占比73% */
}


hr {  
    border: none; /* 移除默认的边框 */
    border-top: 3px solid #0d6efd; /* 设置顶部边框的颜色和粗细 */
    height: 5px; /* 设置高度 */
    background-color: #0d6efd; /* 设置颜色 */
    margin: 20px 0; /* 设置上下边距 */
}
        
h5 {  
    color: #0d6efd;  
    text-align: center;  
}

/* 回复项卡片（用于 view.php） */
.reply-item {
    border: 1px solid #ccc;
    margin: 10px 0;
    padding: 12px;
    border-radius: 10px;
    background: #f0f8ff;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    width: 100%; /* 宽度自适应 */
}

.reply-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}

/* 动画：结果展示 */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.result-box {
    animation: fadeIn 0.5s ease-in;
}

/* 表单区域阴影与圆角 */
.create-section .shadow-sm,
.contact-section img,
.result-box {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.create-section .shadow-sm:hover,
.result-box:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.12) !important;
}

/* 二维码图片样式 */
.qr-code {
    border: 1px solid #ddd;
    padding: 10px;
    background: #f8f9fa;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    width: 100%; /* 宽度自适应 */
}

/* 响应式优化 */
@media (max-width: 576px) {
    .zjwk {
        padding-left: 15px;
        padding-right: 15px;
    }

    .qr-code {
        max-width: 180px;
    }

    .btn {
        font-size: 0.95rem;
    }
}

/* 高对比度模式支持 */
@media (prefers-contrast: high) {
    .qr-code, .reply-item, .card, .form-control {
        border: 2px solid #000 !important;
        background: #fff !important;
        color: #000 !important;
    }
}

/* 底部信息开始 */
.footer {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); /* 阴影效果 */
    position: fixed; /* 固定在屏幕底部 */
    background-color: #0d6efd;
    color: white;    
    padding: 15px 0 1px;  /* 仅保留上下内边距 */
    text-align: center;
    bottom: 0;
    width: 100%;
    /* 添加一些外边距，以防止内容被footer覆盖 */
    margin-top: 15px; /* 根据需要调整 */
    font-size: 12px; /* 控制字体大小，可以根据需要调整 */
    z-index: 1000; /* 确保高于其他内容 */
}

/* 底部导航链接样式 */
.footer-links {  
    padding-left: 0; /* 新增：覆盖浏览器的默认样式 */
    display: flex; /* 使用 Flexbox 布局 */  
    justify-content: space-around; /* 平均分配空间 */  
    list-style-type: none; /* 移除默认项目符号 */  
    padding: 0; /* 移除默认内边距 */  
}

/* 底部导航项样式 */  
.footer-item {  
    position: relative; /* 相对定位 */  
}

/* 底部链接 */  
.footer-item a {  
    color: #fff; /* 链接颜色 */  
    text-decoration: none; /* 移除下划线 */
    transition: color 0.3s ease; /* 添加过渡效果 */
    display: block; /* 占据块级元素的空间 */  
    text-align: center; /* 文本居中 */  
}

/* 鼠标悬停时的链接样式 */
.footer-item a:hover {  
    color: #EA4335; /* 悬停时的颜色 */
}

/* 底部emoji样式 */  
.footer-icon {  
    font-size: 16px; /* emoji大小 */
    color: #EA4335; /* emoji颜色 */
    display: block; /* 占据块级元素的空间 */
    text-align: center; /* 文本居中 */  
    margin-bottom: 1px; /* 与链接之间的间距 */
}
/* 底部信息结束 */