/**
 * 山西永盛云saas管理系统 - 服务协议页面样式文件
 * 本文件编写程序员：刘永盛
 * 开发时间：2026-03-18 22:00:00
 * 定义服务协议页面的布局和样式，包括导航栏、协议容器、标题、内容等元素的样式
 * @author 山西永盛网络科技开发团队
 * @version 1.0
 */

/* 全局样式设置 */
body {
     background-color: #f8f9fa; /* 设置页面背景颜色为浅灰色 */
     font-family: 'Microsoft YaHei', sans-serif; /* 设置字体为微软雅黑，无衬线字体 */
     padding-top: 76px; /* 为固定导航栏预留空间 */
     /* 为固定导航栏预留空间 */
 }

 /* 导航栏样式 */
 .navbar {
     position: fixed; /* 固定定位，使导航栏始终在页面顶部 */
     top: 0; /* 顶部距离为0 */
     left: 0; /* 左侧距离为0 */
     right: 0; /* 右侧距离为0 */
     z-index: 1030; /* 设置z-index确保导航栏在其他元素之上 */
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加阴影效果，增强层次感 */
 }

 /* 协议容器样式 */
 .agreement-container {
     max-width: 900px; /* 设置最大宽度为900px */
     margin: 0 auto; /* 水平居中 */
     background: white; /* 设置背景为白色 */
     border-radius: 10px; /* 设置圆角边框 */
     box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
     padding: 30px; /* 设置内边距 */
     margin-top: 20px; /* 顶部外边距 */
     margin-bottom: 20px; /* 底部外边距 */
 }

 /* 协议头部样式 */
 .agreement-header {
     border-bottom: 2px solid #007bff; /* 底部边框，蓝色线条 */
     padding-bottom: 20px; /* 底部内边距 */
     margin-bottom: 30px; /* 底部外边距 */
 }

 /* 协议标题样式 */
 .agreement-title {
     color: #007bff; /* 标题颜色为蓝色 */
     font-weight: bold; /* 字体加粗 */
     margin-bottom: 10px; /* 底部外边距 */
     font-size: 26px; /* 调整标题字体大小 */
 }

 /* 协议元信息样式 */
 .agreement-meta {
     color: #6c757d; /* 元信息颜色为灰色 */
     font-size: 0.9rem; /* 字体大小为0.9rem */
 }

 /* 协议内容样式 */
 .agreement-content {
     line-height: 1.8; /* 设置行高为1.8 */
     font-size: 16px; /* 调整字体大小为16px */
 }

 /* 协议内容中h4标题样式 */
 .agreement-content h4 {
     color: #495057; /* 标题颜色为深灰色 */
     margin-top: 25px; /* 顶部外边距 */
     margin-bottom: 15px; /* 底部外边距 */
     border-left: 4px solid #007bff; /* 左侧蓝色边框 */
     padding-left: 10px; /* 左侧内边距 */
     font-size: 20px; /* 调整h4标题字体大小 */
 }

 /* 协议内容中段落样式 */
.agreement-content p {
    margin-bottom: 15px; /* 底部外边距 */
    text-align: justify; /* 文本两端对齐 */
    text-indent: 2em; /* 首行缩进2个字符 */
}

 /* 协议内容中有序列表样式 */
 .agreement-content ol {
     margin-bottom: 15px; /* 底部外边距 */
     padding-left: 20px; /* 左侧内边距 */
 }

 /* 协议内容中列表项样式 */
 .agreement-content li {
     margin-bottom: 8px; /* 底部外边距 */
 }

 /* 返回按钮样式 */
 .back-button {
     margin-top: 30px; /* 顶部外边距 */
 }

 .back-button .btn {
     height: 28px; /* 调整按钮高度为28px */
     display: inline-flex; /* 使用flex布局 */
     align-items: center; /* 垂直居中 */
     justify-content: center; /* 水平居中 */
     font-size: 14px; /* 调整按钮文字大小 */
     padding: 0 12px; /* 调整按钮内边距 */
     background-color: #6c757d; /* 设置按钮背景颜色为灰色 */
     border-color: #6c757d; /* 设置按钮边框颜色为灰色 */
 }

 /* 响应式设计，针对小屏幕设备 */
 @media (max-width: 768px) {
     .agreement-container {
         margin: 10px; /* 减小外边距 */
         padding: 20px; /* 减小内边距 */
     }
 }