/**
 * Cookie管理弹窗样式文件
 * 
 * 功能说明：
 * 1. 提供GDPR合规的Cookie同意弹窗样式
 * 2. 包含响应式设计，适配PC和移动端
 * 3. 支持Cookie设置模态窗口
 * 4. 包含开关按钮、表格等组件样式
 * 
 * 文件结构：
 * - Cookie横幅样式
 * - Cookie设置模态窗口样式
 * - 响应式设计
 * 
 * @author Cookie管理系统
 * @version 1.0
 * @date 2024-01-01
 */

/* ==========================================================================
   Cookie横幅样式
   ========================================================================== */

/**
 * 主要的Cookie同意横幅容器
 * 
 * 特性：
 * - 固定在页面底部
 * - 默认隐藏在屏幕下方，通过动画显示
 * - 高层级z-index确保在最上层显示
 * - 顶部边框突出品牌色
 */
.cookie-banner {
    position: fixed;          /* 固定定位，不随页面滚动 */
    bottom: 0;               /* 贴近页面底部 */
    left: 0;                 /* 横跨整个页面宽度 */
    right: 0;
    background: #ffffff;      /* 白色背景确保可读性 */
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);  /* 向上的阴影效果 */
    z-index: 9999;           /* 最高层级，确保在其他元素之上 */
    padding: 20px;           /* 内边距提供舒适的视觉空间 */
    transform: translateY(100%);  /* 初始状态隐藏在屏幕下方 */
    transition: transform 0.3s ease-in-out;  /* 平滑的进入/退出动画 */
    border-top: 3px solid #e85e44;  /* 品牌色顶部边框 */
}

/**
 * 横幅显示状态
 * 当添加.show类时，横幅从底部滑入视野
 */
.cookie-banner.show {
    transform: translateY(0);    /* 重置位置，显示横幅 */
}

/**
 * 横幅内容容器
 * 
 * 特性：
 * - 居中布局，最大宽度限制
 * - Flexbox布局，支持换行
 * - 在文本和按钮之间合理分配空间
 */
.cookie-banner-content {
    max-width: 1200px;           /* 最大宽度限制，避免在大屏幕上过宽 */
    margin: 0 auto;              /* 水平居中 */
    display: flex;               /* 弹性布局 */
    align-items: center;         /* 垂直居中对齐 */
    justify-content: space-between;  /* 两端对齐 */
    flex-wrap: wrap;             /* 允许换行，适应小屏幕 */
    gap: 20px;                   /* 元素间距 */
}

/**
 * 横幅文本区域
 * 占据主要空间，包含标题和描述
 */
.cookie-banner-text {
    flex: 1;                     /* 占据剩余空间 */
    min-width: 300px;            /* 最小宽度确保可读性 */
}

/**
 * 横幅标题样式
 * 突出显示，引起用户注意
 */
.cookie-banner-title {
    font-size: 18px;             /* 较大字体突出重要性 */
    font-weight: 600;            /* 加粗字体 */
    color: #333;                 /* 深色文字确保可读性 */
    margin-bottom: 8px;          /* 与描述文字的间距 */
}

/**
 * 横幅描述文字
 * 包含Cookie使用说明和隐私政策链接
 */
.cookie-banner-description {
    font-size: 14px;             /* 适中的字体大小 */
    color: #666;                 /* 较浅的颜色，层次分明 */
    line-height: 1.5;            /* 提高可读性的行距 */
}

/**
 * 描述文字中的链接样式
 * 使用品牌色突出链接
 */
.cookie-banner-description a {
    color: #e85e44;              /* 品牌色 */
    text-decoration: none;       /* 移除默认下划线 */
}

/**
 * 链接悬停效果
 */
.cookie-banner-description a:hover {
    text-decoration: underline;  /* 悬停时显示下划线 */
}

/**
 * 按钮容器
 * 支持多个按钮的横向排列和换行
 */
.cookie-banner-buttons {
    display: flex;               /* 弹性布局 */
    gap: 15px;                   /* 按钮间距 */
    flex-wrap: wrap;             /* 允许换行 */
}

/* ==========================================================================
   按钮样式
   ========================================================================== */

/**
 * 通用按钮样式
 * 所有Cookie相关按钮的基础样式
 */
.cookie-btn {
    padding: 10px 20px;          /* 内边距提供点击区域 */
    border: none;                /* 移除默认边框 */
    border-radius: 4px;          /* 圆角边框 */
    font-size: 14px;             /* 适中的字体大小 */
    cursor: pointer;             /* 指针样式表示可点击 */
    transition: all 0.3s ease;   /* 平滑的悬停效果 */
    text-decoration: none;       /* 用于链接时移除下划线 */
    display: inline-block;       /* 允许设置尺寸 */
    min-width: 100px;            /* 最小宽度确保美观 */
    text-align: center;          /* 文字居中 */
}

/**
 * 主要按钮样式（接受所有）
 * 使用品牌色，突出主要操作
 */
.cookie-btn-primary {
    background: #e85e44;         /* 品牌色背景 */
    color: white;                /* 白色文字确保对比度 */
}

/**
 * 主要按钮悬停效果
 */
.cookie-btn-primary:hover {
    background: #d4543d;         /* 更深的品牌色 */
}

/**
 * 次要按钮样式（拒绝非必要）
 * 中性的颜色，不突出但可见
 */
.cookie-btn-secondary {
    background: #f5f5f5;         /* 浅灰色背景 */
    color: #333;                 /* 深色文字 */
    border: 1px solid #ddd;      /* 边框增加定义 */
}

/**
 * 次要按钮悬停效果
 */
.cookie-btn-secondary:hover {
    background: #e9e9e9;         /* 稍深的灰色 */
}

/**
 * 设置按钮样式
 * 透明背景，边框设计，表示高级选项
 */
.cookie-btn-settings {
    background: transparent;      /* 透明背景 */
    color: #e85e44;              /* 品牌色文字 */
    border: 1px solid #e85e44;   /* 品牌色边框 */
}

/**
 * 设置按钮悬停效果
 * 填充背景色，反转颜色
 */
.cookie-btn-settings:hover {
    background: #e85e44;         /* 品牌色背景 */
    color: white;                /* 白色文字 */
}

/* ==========================================================================
   Cookie设置模态窗口
   ========================================================================== */

/**
 * 模态窗口遮罩层
 * 
 * 特性：
 * - 全屏覆盖，阻止与背景页面的交互
 * - 半透明背景突出模态窗口
 * - 更高的z-index确保在横幅之上
 * - 默认隐藏，通过透明度控制显示
 */
.cookie-settings-modal {
    position: fixed;                    /* 固定定位，覆盖整个视口 */
    top: 0;                            /* 覆盖整个屏幕 */
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);    /* 半透明黑色遮罩 */
    z-index: 10000;                    /* 比横幅更高的层级 */
    display: none;                     /* 默认隐藏 */
    opacity: 0;                        /* 透明度控制 */
    transition: opacity 0.3s ease;     /* 平滑的透明度变化 */
}

/**
 * 模态窗口显示状态
 * 当添加.show类时显示模态窗口
 */
.cookie-settings-modal.show {
    display: flex;                     /* 弹性布局用于居中 */
    opacity: 1;                        /* 完全不透明 */
    align-items: center;               /* 垂直居中 */
    justify-content: center;           /* 水平居中 */
}

/**
 * 模态窗口内容容器
 * 包含所有Cookie设置选项
 */
.cookie-settings-content {
    background: white;                 /* 白色背景确保可读性 */
    border-radius: 8px;                /* 圆角边框 */
    max-width: 600px;                  /* 最大宽度限制 */
    width: 90%;                        /* 响应式宽度 */
    max-height: 80vh;                  /* 最大高度避免超出视口 */
    overflow-y: auto;                  /* 内容溢出时显示滚动条 */
    padding: 30px;                     /* 内边距 */
    position: relative;                /* 为关闭按钮定位 */
}

/**
 * 模态窗口头部
 * 包含标题和关闭按钮
 */
.cookie-settings-header {
    display: flex;                     /* 弹性布局 */
    justify-content: space-between;    /* 两端对齐 */
    align-items: center;               /* 垂直居中 */
    margin-bottom: 20px;               /* 与内容的间距 */
    padding-bottom: 15px;              /* 下内边距 */
    border-bottom: 1px solid #eee;     /* 分隔线 */
}

/**
 * 模态窗口标题
 */
.cookie-settings-title {
    font-size: 24px;                  /* 大标题字体 */
    font-weight: 600;                 /* 加粗 */
    color: #333;                      /* 深色文字 */
}

/**
 * 关闭按钮
 * X形状的关闭图标
 */
.cookie-settings-close {
    width: 30px;                      /* 固定尺寸 */
    height: 30px;
    border: none;                     /* 移除边框 */
    background: none;                 /* 透明背景 */
    font-size: 20px;                  /* 较大的X符号 */
    cursor: pointer;                  /* 指针样式 */
    color: #666;                      /* 灰色 */
    padding: 0;                       /* 移除内边距 */
    display: flex;                    /* 弹性布局用于居中 */
    align-items: center;              /* 垂直居中 */
    justify-content: center;          /* 水平居中 */
}

/**
 * 关闭按钮悬停效果
 */
.cookie-settings-close:hover {
    color: #333;                      /* 更深的颜色 */
}

/* ==========================================================================
   Cookie类别设置
   ========================================================================== */

/**
 * Cookie类别容器
 * 每个Cookie类型的设置区域
 */
.cookie-category {
    margin-bottom: 25px;              /* 类别间距 */
    padding-bottom: 20px;             /* 下内边距 */
    border-bottom: 1px solid #f0f0f0; /* 分隔线 */
}

/**
 * 最后一个类别移除底部边框
 */
.cookie-category:last-child {
    border-bottom: none;
}

/**
 * 类别头部
 * 包含标题和开关按钮
 */
.cookie-category-header {
    display: flex;                    /* 弹性布局 */
    justify-content: space-between;   /* 两端对齐 */
    align-items: center;              /* 垂直居中 */
    margin-bottom: 10px;              /* 与描述的间距 */
}

/**
 * 类别标题
 */
.cookie-category-title {
    font-size: 16px;                 /* 中等字体大小 */
    font-weight: 600;                /* 加粗 */
    color: #333;                     /* 深色文字 */
}

/* ==========================================================================
   开关按钮样式
   ========================================================================== */

/**
 * 开关按钮容器
 * iOS风格的滑动开关
 */
.cookie-toggle {
    position: relative;               /* 相对定位 */
    display: inline-block;            /* 行内块元素 */
    width: 50px;                      /* 固定宽度 */
    height: 24px;                     /* 固定高度 */
}

/**
 * 隐藏原始复选框
 */
.cookie-toggle input {
    opacity: 0;                       /* 完全透明 */
    width: 0;                         /* 无宽度 */
    height: 0;                        /* 无高度 */
}

/**
 * 开关背景滑块
 */
.cookie-toggle-slider {
    position: absolute;               /* 绝对定位 */
    cursor: pointer;                  /* 指针样式 */
    top: 0;                          /* 覆盖整个容器 */
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;           /* 默认灰色背景 */
    transition: 0.4s;                /* 平滑过渡 */
    border-radius: 24px;              /* 圆角边框 */
}

/**
 * 开关滑块圆点
 * 表示开关状态的白色圆点
 */
.cookie-toggle-slider:before {
    position: absolute;               /* 绝对定位 */
    content: "";                      /* 空内容 */
    height: 18px;                     /* 圆点尺寸 */
    width: 18px;
    left: 3px;                        /* 左边距 */
    bottom: 3px;                      /* 底边距 */
    background-color: white;          /* 白色圆点 */
    transition: 0.4s;                /* 滑动动画 */
    border-radius: 50%;               /* 完全圆形 */
}

/**
 * 开关激活状态
 * 当复选框选中时的样式
 */
.cookie-toggle input:checked + .cookie-toggle-slider {
    background-color: #e85e44;        /* 品牌色背景 */
}

/**
 * 开关激活时圆点位置
 * 圆点滑动到右侧
 */
.cookie-toggle input:checked + .cookie-toggle-slider:before {
    transform: translateX(26px);      /* 向右移动26px */
}

/**
 * 禁用状态的开关
 * 用于必要Cookie，强制启用
 */
.cookie-toggle input:disabled + .cookie-toggle-slider {
    background-color: #e85e44;        /* 强制显示品牌色 */
    cursor: not-allowed;              /* 禁用光标 */
}

/**
 * 类别描述文字
 * 解释每种Cookie类型的用途
 */
.cookie-category-description {
    font-size: 14px;                 /* 较小字体 */
    color: #666;                      /* 灰色文字 */
    line-height: 1.5;                /* 提高可读性 */
}

/**
 * 模态窗口底部
 * 包含操作按钮
 */
.cookie-settings-footer {
    display: flex;                    /* 弹性布局 */
    justify-content: flex-end;        /* 右对齐 */
    gap: 15px;                        /* 按钮间距 */
    margin-top: 30px;                 /* 与内容的间距 */
    padding-top: 20px;                /* 上内边距 */
    border-top: 1px solid #eee;       /* 分隔线 */
}

/* ==========================================================================
   响应式设计
   ========================================================================== */

/**
 * 平板和小屏设备适配 (768px及以下)
 * 
 * 主要调整：
 * - 减少内边距节省空间
 * - 改变布局方向为垂直排列
 * - 调整按钮尺寸和排列方式
 * - 优化模态窗口的空间利用
 */
@media (max-width: 768px) {
    
    /**
     * 横幅在小屏设备上的调整
     * 减少内边距节省空间
     */
    .cookie-banner {
        padding: 15px;                /* 减少内边距 */
    }
    
    /**
     * 横幅内容改为垂直布局
     * 文本和按钮分层显示
     */
    .cookie-banner-content {
        flex-direction: column;       /* 垂直排列 */
        align-items: stretch;         /* 拉伸对齐 */
    }
    
    /**
     * 文本区域调整
     * 移除最小宽度限制，添加底部间距
     */
    .cookie-banner-text {
        min-width: auto;              /* 移除最小宽度限制 */
        margin-bottom: 15px;          /* 与按钮区域的间距 */
    }
    
    /**
     * 按钮区域居中对齐
     */
    .cookie-banner-buttons {
        justify-content: center;      /* 按钮居中对齐 */
    }
    
    /**
     * 按钮在小屏设备上的调整
     * 弹性伸缩，设置最小宽度
     */
    .cookie-btn {
        flex: 1;                      /* 弹性伸缩 */
        min-width: 120px;             /* 最小宽度确保可读性 */
    }
    
    /**
     * 模态窗口内容调整
     * 减少内边距，增加外边距
     */
    .cookie-settings-content {
        padding: 20px;                /* 减少内边距 */
        margin: 20px;                 /* 增加外边距 */
    }
    
    /**
     * 模态窗口底部按钮垂直排列
     */
    .cookie-settings-footer {
        flex-direction: column;       /* 垂直排列按钮 */
    }
    
    /**
     * Cookie类别头部垂直排列
     * 标题和开关分行显示
     */
    .cookie-category-header {
        flex-direction: column;       /* 垂直排列 */
        align-items: flex-start;      /* 左对齐 */
        gap: 10px;                    /* 元素间距 */
    }
}

/**
 * 手机设备适配 (480px及以下)
 * 
 * 主要调整：
 * - 按钮完全垂直排列
 * - 进一步减少空间占用
 * - 优化触摸操作体验
 */
@media (max-width: 480px) {
    
    /**
     * 横幅按钮完全垂直排列
     * 每个按钮占据一行
     */
    .cookie-banner-buttons {
        flex-direction: column;       /* 垂直排列所有按钮 */
    }
    
    /**
     * 按钮在手机上占据全宽
     * 提供更大的触摸区域
     */
    .cookie-btn {
        width: 100%;                  /* 全宽按钮 */
        min-width: auto;              /* 移除最小宽度限制 */
    }
    
    /**
     * 模态窗口在手机上的进一步优化
     * 最小化边距，最大化内容空间
     */
    .cookie-settings-content {
        margin: 10px;                 /* 最小外边距 */
        padding: 15px;                /* 最小内边距 */
    }
}