/* 全局样式重置及基础样式设置 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Helvetica Neue', Arial, sans-serif;
}

/* 设置页面背景色、文字颜色及行高 */
body {
    background-color: #f8f8f8;
    color: #333;
    line-height: 1.6;
}

/* 容器样式，设置最大宽度、外边距及内边距 */
.container {
    max-width: 100%;
    margin: 0 auto;
    padding: 0 8px;
    position: relative;
}

/* 头部样式，设置背景色、阴影及定位 */
.header {
    background-color: white;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 0;
    z-index: 100;
}

/* 导航容器样式，设置弹性布局、对齐方式及内边距 */
.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
}

/* Logo样式，设置字体大小及粗细 */
.logo {
    font-size: 1.5rem;
    font-weight: bold;
}

/* 导航标签容器样式，设置弹性布局及间隔 */
.nav-tabs {
    display: flex;
    gap: 10px;
}

/* 标签按钮样式，设置内边距、无边框、圆角等 */
.tab-button {
    padding: 10px 20px;
    border: none;
    border-radius: 10px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* 活跃标签按钮样式，设置背景色及文字颜色 */
.tab-button.active {
    background-color: #e74c3c;
    color: white;
}

/* 非活跃标签按钮样式，设置背景色及文字颜色 */
.tab-button:not(.active) {
    background-color: #f1f1f1;
    color: #555;
}

/* 非活跃标签按钮悬停样式，设置背景色 */
.tab-button:hover:not(.active) {
    background-color: #e0e0e0;
}

/* 内容容器样式，设置内边距 */
.content-container {
    padding: 20px 0;
}

/* 隐藏的区域样式，初始状态下隐藏 */
.section {
    display: none;
}

/* 活跃区域样式，设置为显示状态 */
.section.active {
    display: block;
}

/* 介绍区域样式，设置内边距、圆角、阴影及底部边距 */
.intro-section {
    padding: 10px 0; /* 上下内边距，可调整 */
    border-radius: 0 0 8px 8px; /* ← 改成 0 去掉圆角 */
    margin-bottom: 8px; /* ← 调整底部外边距 */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* 眼镜专区颜色样式，设置背景渐变及文字颜色 */
.glasses-color {
    background: linear-gradient(135deg, #ffffff, #ffffff);
    color: #d14040;
}

/* 流量卡专区颜色样式，设置背景渐变及文字颜色 */
.data-card-color {
    background: linear-gradient(135deg, #ffffff, #ffffff);
    color: white;
}

/* 区域Logo样式，设置宽度、高度及底部边距 */
.section-logo {
    width: 60px;
    height: auto;
    margin-bottom: 0px;
}

/* 介绍文本样式，设置标题字体大小及段落样式 */
.intro-text h1 {
    font-size: 1.6rem;
    margin-bottom: 0px;
}

.intro-text p {
    font-size: 0.9rem;
    opacity: 0.9;
}

/* 轮播容器样式，设置位置、底部边距、圆角及阴影 */
.banner-container {
    position: relative;
    margin-bottom: 0px;
    border-radius: 8px 8px 0 0;
    overflow: hidden;
    background-color: white; /* 与筛选区域相同的白色 */
    padding: 8px; /* 内边框宽度 */
    box-shadow: none; /* 完全去掉阴影 */

    /* 去掉真正的边框 */
    border: none;
}

/* 轮播滑块容器 */
.banner-slider {
    display: flex;
    transition: transform 0.5s ease;
    border-radius: 7px; /* 内圆角，比外圆角小一些 */
    overflow: hidden; /* 确保图片也被圆角裁剪 */
}

/* 轮播滑块 */
.banner-slide {
    min-width: 100%;
    display: none;
}

/* 活跃轮播滑块 */
.banner-slide.active {
    display: block;
}

/* 轮播图片 - 确保图片适应内圆角 */
.banner-slide img {
    width: 100%;
    height: auto;
    display: block;
}

/* 轮播指示点容器样式，设置位置、底部边距及水平居中 */
.banner-dots {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
}

/* 轮播指示点样式，设置尺寸、圆角、背景色及光标 */
.dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
}

/* 活跃轮播指示点样式，设置背景色 */
.dot.active {
    background-color: white;
}

/* 筛选区域样式，设置背景色、内边距、圆角及阴影 */
.filter-section {
    background-color: white;
    padding: 5px 0px; /* 修改这里：第一个值是上下内边距，第二个值是左右内边距 */
    border-radius: 0 0 0 0;  /* ← 改成 0 去掉圆角 */
    margin-bottom: 0px;  /* ← 调整底部外边距 */
    box-shadow: none; /* 也去掉筛选区域的阴影 */
}

.filter-options {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: flex-end;
}

/* =========================
   搜索区域整体样式
   ========================= */
.search-section {
    background-color: white;      /* 卡片背景色 */
    padding: 0px 20px;           /* 内边距：上下 15px，左右 20px */
    border-radius: 0 0 8px 8px;  /* ← 改成 0 去掉圆角 */          /* 圆角矩形，8px 圆角 */
    margin-bottom: 20px;          /* 与下方元素保持 20px 间距 */
}

/* 搜索框容器：使用 flex 布局，方便图标与输入框水平对齐 */
.search-container {
    position: relative;           /* 为内部绝对定位图标提供参照 */
    display: flex;                /* 弹性布局，垂直居中 */
    align-items: center;
}

/* 左侧搜索图标 */
.search-icon {
    position: absolute;
    left: 15px;                   /* 距离左侧 15px */
    color: #999;                  /* 图标默认灰色 */
    font-size: 16px;
    z-index: 1;                   /* 确保图标在输入框上方 */
}

/* 搜索输入框本体 */
.search-input {
    width: 100%;                  /* 占满容器宽度 */
    padding: 12px 45px 12px 45px; /* 左右各留 45px，防止文字与图标重叠 */
    border: 2px solid #e0e0e0;    /* 默认边框颜色 */
    border-radius: 25px;          /* 胶囊型圆角 */
    font-size: 16px;
    color: #333;
    background-color: #f9f9f9;    /* 未聚焦时浅灰背景 */
    transition: all 0.3s ease;    /* 平滑过渡动画 */
    outline: none;                /* 去掉浏览器默认聚焦蓝框 */
}

/* 输入框聚焦状态：高亮边框 + 白色背景 + 微光晕 */
.search-input:focus {
    border-color: #4a89dc;        /* 聚焦时边框变为主题蓝 */
    background-color: white;      /* 背景变白，提升对比度 */
    box-shadow: 0 0 0 3px rgba(74, 137, 220, 0.1); /* 淡蓝色光晕 */
}

/* 右侧清空按钮 */
.search-clear {
    position: absolute;
    right: 15px;                  /* 距离右侧 15px */
    color: #999;
    font-size: 16px;
    cursor: pointer;              /* 鼠标悬停显示手型 */
    transition: color 0.3s ease;
    z-index: 1;
}

.search-clear:hover {
    color: #e74c3c;               /* 悬停时变红色，提示可删除 */
}

/* =========================
   无结果提示卡片
   ========================= */
.search-empty-result {
    text-align: center;           /* 文字、图标全部居中 */
    padding: 40px 20px;
    background-color: white;
    border-radius: 10px;
    margin-bottom: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    display: none;                /* 默认隐藏，由 JS 控制显示 */
}

/* 空状态图标：大号灰色图标 */
.search-empty-result .empty-icon {
    font-size: 60px;
    color: #e0e0e0;
    margin-bottom: 20px;
}

.search-empty-result h3 {
    font-size: 20px;
    color: #666;
    margin-bottom: 10px;
    font-weight: 600;
}

.search-empty-result p {
    color: #999;
    font-size: 14px;
}

/* =========================
   为您推荐区域
   ========================= */
.recommended-section {
    margin-top: 20px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    display: none;                /* 默认隐藏，搜索无结果时展示 */
    overflow: hidden; /* 确保产品不会超出圆角 */
}

/* 推荐区域头部：标题 + 分割线 */
.recommended-header {
    margin-bottom: 0;
    padding: 20px 20px 15px;
    border-bottom: 1px solid #f0f0f0; /* 浅灰色分割线 */
}

.recommended-title {
    font-size: 18px;
    color: #4a89dc;               /* 主题蓝色 */
    font-weight: 600;
    margin: 0;
}

/* 标题前加闪光 emoji，提升亲和力 */
.recommended-title::before {
    content: "✨ ";
    margin-right: 8px;
}

/* 推荐产品列表 - 去掉背板，与首页产品列表保持一致 */
#recommended-product-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 5px;
    padding: 0; /* 关键修改：去掉内边距，让产品占满背板宽度 */
    background-color: transparent; /* 透明背景 */
    box-shadow: none; /* 去掉阴影 */
    border-radius: 0; /* 去掉圆角 */
}

/* 确保推荐产品列表中的产品项与首页样式一致 */
#recommended-product-list .product-item {
    background-color: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    margin: 0; /* 确保没有外边距 */
    width: 100%; /* 确保宽度为100% */
}

/* 简洁的加载动画样式 */
.loading {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 150px;
    padding: 20px;
    background-color: rgba(255, 255, 255, 0.95);
    border-radius: 10px;
    margin: 15px 0;
}

.spinner {
    width: 50px;
    height: 50px;
    border: 3px solid #f1f1f1;
    border-top: 3px solid #4a89dc;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.loading-text {
    margin-top: 15px;
    color: #666;
    font-size: 14px;
    font-weight: 500;
}

/* 订单查询加载状态 */
.order-query-loading {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.92);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 1002;
}

.order-query-loading .spinner {
    width: 60px;
    height: 60px;
    border-width: 4px;
}

.order-query-loading .loading-text {
    margin-top: 20px;
    color: #4a89dc;
    font-size: 16px;
}

/* 加载更多提示样式 */
#load-more-prompt .spinner {
    width: 40px;
    height: 40px;
    border-width: 3px;
    border-top-color: #4a89dc;
}

/* 下拉框容器样式 */
.filter-select-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
    position: relative;
}

/* 筛选下拉框样式，设置内边距、边框、圆角及最小宽度 */
.filter-select {
    padding: 10px 15px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    flex: 1;
    min-width: 150px;
    background-color: white;
    color: #333;
    font-size: 14px;
    appearance: none;
    background-image: url('data:image/svg+xml;utf8,<svg fill="grey" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>');
    background-repeat: no-repeat;
    background-position: right 15px center;
    transition: all 0.3s ease;
    margin: 10px; /* 添加外边距 */
}

/* 下拉框悬停样式 */
.filter-select:hover {
    border-color: #bdbdbd;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* 下拉框聚焦样式 */
.filter-select:focus {
    border-color: #e74c3c;
    outline: none;
    box-shadow: 0 0 0 2px rgba(231, 76, 60, 0.2);
}

/* 选项样式 */
.filter-select option {
    background-color: white;
    color: #333;
    padding: 8px 12px;
    border-radius: 4px;
}

/* 筛选按钮样式，设置内边距、背景色等 */
.filter-button {
    padding: 10px 20px;
    background-color: #e74c3c;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    margin-left: 10px; /* 调整左边距 */
}

/* 筛选按钮悬停样式，设置背景色 */
.filter-button:hover {
    background-color: #c0392b;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* 按钮聚焦样式 */
.filter-button:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(231, 76, 60, 0.3);
}

/* 按钮禁用样式 */
.filter-button:disabled {
    background-color: #bdbdbd;
    cursor: not-allowed;
    box-shadow: none;
}

/* 产品列表样式，设置网格布局及间隔 */
.product-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 5px;
}

/* 产品项目样式，设置弹性布局、背景色等 */
.product-item {
    display: flex;
    flex-direction: row; /* 始终为行布局，所有设备都保持左右布局 */
    background-color: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s, box-shadow 0.3s;
}

/* 产品项目悬停样式，设置变换及阴影效果 */
.product-item:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

/* 产品图片样式，设置内边距 */
.product-image {
    position: relative; /* 确保蒙版可以基于此定位 */
    padding: 15px;
    flex: 0 0 45%; /* 图片区域增加到45% */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 新增：产品蒙版样式 - 用于已下架产品 */
.product-overlay {
    position: absolute;
    top: 8px;
    left: 8px;
    width: calc(100% - 16px);
    height: calc(100% - 16px);
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    border-radius: 5px;
}

/* 蒙版文字样式 */
.product-overlay span {
    color: #e8e8e8;
    font-size: 18px;
    font-weight: normal; /* 介于正常和粗体之间 */
    font-family: "Microsoft YaHei", "PingFang SC", sans-serif; /* 更柔和的字体 */
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.9); /* 增强阴影使文字更清晰 */
    padding: 12px 24px;
    background-color: rgba(0, 0, 0, 0.7);
    border-radius: 8px;
    letter-spacing: 1px; /* 略微增加字间距 */
}

/* 产品图片样式，设置宽度、高度及显示方式 */
.product-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 5px;
}

/* 产品信息样式，设置内边距、位置及弹性布局 */
.product-info {
    padding: 15px;
    position: relative;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    flex: 0 0 55%; /* 信息区域减少到55% */
}

/* 产品标题样式，设置字体大小及底部边距 */
.product-info h3 {
    font-size: 1.2rem;
    margin-bottom: 8px;
}

/* 产品评分样式，设置颜色及底部边距 */
.product-rating {
    color: #f39c12;
    margin-bottom: 8px;
    font-size: 0.9rem;
}

/* 星级评分间隔样式 */
.product-rating span {
    margin-left: 2px;
}

/* 产品描述样式，设置颜色、底部边距及字体大小 */
.product-desc {
    color: #666;
    margin-bottom: 15px;
    font-size: 0.9rem;
    line-height: 1.5;
    flex-grow: 1;
}

/* 产品价格样式，设置字体大小、粗细及颜色 */
.product-price {
    font-size: 1.3rem;
    font-weight: bold;
    color: #e74c3c;
    margin-bottom: 15px;
}

/* 产品按钮样式，设置内边距等 */
.product-button {
    margin-top: auto;
    align-self: flex-start;
    position: static;
    margin-top: 15px;
    padding: 10px 25px;
    background-color: #e74c3c;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
    font-size: 0.9rem;
    width: auto;
}

/* 产品按钮悬停样式，设置背景色 */
.product-button:hover {
    background-color: #c0392b;
}

/* 页脚样式，设置背景色、颜色及内边距 */
.footer {
    background-color: #333;
    color: white;
    padding: 20px 0;
    margin-top: 30px;
}

/* 页脚内容样式，设置弹性布局及对齐方式 */
.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

/* 页脚链接样式，设置链接颜色、间隔及无下划线 */
.footer-links a {
    color: #ddd;
    margin-left: 15px;
    text-decoration: none;
}

/* 页脚链接悬停样式，设置下划线 */
.footer-links a:hover {
    text-decoration: underline;
}

/* 模态框样式，设置初始隐藏、定位等 */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 1000;
    overflow-y: auto;
}

/* 模态框内容样式，设置背景色、位置等 */
.modal-content {
    background-color: white;
    margin: 50px auto;
    width: 90%;
    max-width: 800px;
    border-radius: 10px;
    overflow: hidden;
    animation: modalFadeIn 0.3s;
}

/* 模态框淡入动画 */
@keyframes modalFadeIn {
    from {
        opacity: 0;
        transform: translateY(-50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 关闭模态框样式，设置位置、字体大小等 */
.close-modal {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 28px;
    font-weight: bold;
    color: #aaa;
    cursor: pointer;
}

/* 关闭模态框悬停样式，设置颜色 */
.close-modal:hover {
    color: #333;
}

/* 模态框主体样式，设置弹性布局 */
.modal-body {
    display: flex;
    flex-direction: column;
}

/* 模态框产品图片样式，设置尺寸 */
.modal-product-image {
    flex: 0 0 45%; /* 调整模态框图片比例 */
    padding: 20px;
    background-color: #f9f9f9;
}

/* 模态框产品图片样式，设置宽度、高度及显示方式 */
.modal-product-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 5px;
}

/* 模态框产品信息样式，设置尺寸及内边距 */
.modal-product-info {
    flex: 0 0 55%; /* 调整模态框信息比例 */
    padding: 20px;
    position: relative;
}

/* 模态框产品标题样式，设置字体大小及底部边距 */
.modal-product-info h2 {
    font-size: 1.8rem;
    margin-bottom: 10px;
}

/* 模态框产品评分样式，设置颜色及底部边距 */
.modal-product-rating {
    color: #f39c12;
    margin-bottom: 15px;
}

/* 模态框产品描述样式，设置颜色、底部边距及行高 */
.modal-product-desc {
    color: #666;
    margin-bottom: 20px;
    line-height: 1.6;
}

/* 模态框产品价格样式，设置字体大小、粗细及颜色 */
.modal-product-price {
    font-size: 1.8rem;
    font-weight: bold;
    color: #e74c3c;
    margin-bottom: 20px;
}

/* 选项组样式，设置底部边距 */
.option-group {
    margin-bottom: 15px;
}

/* 选项组标签样式，设置显示方式、底部边距及粗细 */
.option-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

/* 数量选择器样式，设置弹性布局及对齐方式 */
.quantity-selector {
    display: flex;
    align-items: center;
    border: 1px solid #ddd;
    border-radius: 5px;
    overflow: hidden;
    width: fit-content; /* 根据内容自动调整宽度 */
}

/* 数量按钮样式，设置尺寸、背景色等 */
.quantity-btn {
    width: 40px;
    height: 40px;
    background-color: #f1f1f1;
    border: none;
    border-radius: 3px;
    overflow: hidden;
}

/* 数量输入框样式，设置尺寸及文本对齐方式 */
.quantity-input {
    width: 40px;
    height: 40px;
    text-align: center;
    border: 1px solid #ddd;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
}

/* 变体选项样式，设置弹性布局及换行 */
.variant-option {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

/* 变体项目样式，设置内边距、背景色等 */
.variant-item {
    padding: 8px 15px;
    background-color: #f1f1f1;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.3s;
}

/* 活跃变体项目样式，设置背景色及文字颜色 */
.variant-item.active {
    background-color: #e74c3c;
    color: white;
}

/* 模态框操作按钮容器样式，设置弹性布局及间隔 */
.modal-actions {
    display: flex;
    gap: 15px;
    margin-top: 30px;
}

/* 加入购物车按钮样式，设置尺寸、背景色等 */
.add-to-cart-btn {
    flex: 1;
    padding: 12px;
    background-color: #f1f1f1;
    color: #333;
    border: none;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s;
}

/* 加入购物车按钮悬停样式，设置背景色 */
.add-to-cart-btn:hover {
    background-color: #ddd;
}

/* 提交订单按钮样式，设置尺寸、背景色等 */
.buy-now-btn {
    flex: 1;
    padding: 12px;
    background-color: #e74c3c;
    color: white;
    border: none;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s;
}

/* 提交订单按钮悬停样式，设置背景色 */
.buy-now-btn:hover {
    background-color: #c0392b;
}

/* 流量卡专区样式调整 */
.data-card-color h1 {
    color: #4a89dc;
}

.data-card-color p {
    color: #5d9cec;
}

.filter-button.data-card {
    background-color: #4a89dc;
}

.filter-button.data-card:hover {
    background-color: #3a70b8;
}

.product-button.data-card {
    background-color: #4a89dc;
    padding: 5px 11px; /* 调整尺寸 */
    font-size: 1rem; /* 调整字体大小 */
}

.product-button.data-card:hover {
    background-color: #3a70b8;
}

/* 新增功能1：提交订单功能相关样式 */
.purchase-result {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    padding: 15px 25px;
    border-radius: 5px;
    font-weight: bold;
    z-index: 1001;
    display: none;
}

.purchase-success {
    background-color: #2ecc71;
    color: white;
}

.purchase-failed {
    background-color: #e74c3c;
    color: white;
}

/* 新增功能2：悬浮购物车相关样式 */
.floating-cart {
    position: fixed;
    bottom: 20px;
    left: 20px;
    width: 60px;
    height: 60px;
    background-color: #e74c3c;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 24px;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    z-index: 100;
    transition: all 0.3s;
}

.floating-cart:hover {
    transform: scale(1.1);
}

.cart-count {
    position: absolute;
    top: -5px;
    right: -5px;
    background-color: #c0392b;
    color: white;
    font-size: 12px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.cart-dropdown {
    position: fixed;
    bottom: 90px;
    left: 20px;
    width: 300px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    padding: 15px;
    z-index: 100;
    display: none;
}

.cart-item {
    display: flex;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}

.cart-item-image {
    width: 60px;
    height: 60px;
    margin-right: 10px;
    border-radius: 5px;
}

.cart-item-info {
    flex: 1;
}

.cart-item-title {
    font-weight: bold;
    margin-bottom: 5px;
}

.cart-item-price {
    color: #e74c3c;
    margin-bottom: 5px;
}

.cart-item-quantity {
    display: flex;
    align-items: center;
}

.cart-item-quantity button {
    width: 25px;
    height: 25px;
    background-color: #f1f1f1;
    border: none;
    border-radius: 3px;
    cursor: pointer;
}

.cart-item-quantity input {
    width: 40px;
    text-align: center;
    margin: 0 5px;
    border: 1px solid #ddd;
    border-radius: 3px;
}

.cart-item-remove {
    color: #e74c3c;
    background: none;
    border: none;
    cursor: pointer;
    margin-left: 10px;
}

.cart-actions {
    display: flex;
    justify-content: space-between;
    margin-top: 15px;
}

.cart-checkout-all {
    padding: 8px 15px;
    background-color: #e74c3c;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

/* 响应式布局调整，针对不同屏幕尺寸 */
@media (max-width: 768px) {
    /* 在平板设备上保持左右布局 */
    .product-item {
        flex-direction: row; /* 保持行布局 */
    }

    /* 调整图片和信息区域的比例 */
    .product-image {
        flex: 0 0 50%; /* 平板端图片占50% */
        padding: 12px;
    }

    .product-info {
        flex: 0 0 50%; /* 平板端信息占50% */
        padding: 12px;
    }

    /* 调整按钮大小 */
    .product-button {
        padding: 8px 18px;
        font-size: 0.85rem;
    }

    .modal-body {
        flex-direction: column;
    }

    .footer-content {
        flex-direction: column;
        gap: 15px;
    }

    .intro-container {
        display: flex;
        align-items: flex-start;
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 15px;
    }

    .logo-container {
        margin-right: 20px;
    }

    .intro-text {
        text-align: left;
        flex-grow: 1;
    }

    /* 搜索区域响应式 */
    .search-section {
        padding: 12px 15px;
        margin-bottom: 15px;
    }

    .search-input {
        padding: 10px 40px 10px 40px;
        font-size: 14px;
    }

    .search-empty-result {
        padding: 30px 15px;
    }

    .search-empty-result .empty-icon {
        font-size: 48px;
    }

    .search-empty-result h3 {
        font-size: 18px;
    }

    .recommended-section {
        padding: 0;
        margin-top: 15px;
    }

    .recommended-title {
        font-size: 16px;
    }
}

/* 只在非常小的手机屏幕上调整布局 */
@media (max-width: 576px) {
    /* 仍然保持左右布局，但调整比例 */
    .product-item {
        flex-direction: row; /* 仍然保持行布局 */
    }

    /* 进一步调整比例，图片更大 */
    .product-image {
        flex: 0 0 48%; /* 小手机上图片占48% */
        padding: 10px;
    }

    .product-info {
        flex: 0 0 52%; /* 小手机上信息占52% */
        padding: 10px;
    }

    /* 调整字体大小 */
    .product-info h3 {
        font-size: 1rem;
    }

    .product-rating {
        font-size: 0.8rem;
    }

    .product-desc {
        font-size: 0.8rem;
        line-height: 1.4;
        margin-bottom: 10px;
    }

    .product-price {
        font-size: 1.1rem;
        margin-bottom: 10px;
    }

    .product-button {
        padding: 6px 14px;
        font-size: 0.8rem;
        margin-top: 10px;
    }
}

/* 超小屏幕的调整 */
@media (max-width: 480px) {
    .product-list {
        grid-template-columns: 1fr;
    }

    /* 仍然保持左右布局 */
    .product-item {
        flex-direction: row;
    }

    /* 调整比例 */
    .product-image {
        flex: 0 0 45%; /* 超小屏幕上图片占45% */
        padding: 8px;
    }

    .product-info {
        flex: 0 0 55%; /* 超小屏幕上信息占55% */
        padding: 8px;
    }

    /* 进一步调整字体 */
    .product-info h3 {
        font-size: 0.9rem;
    }

    .product-desc {
        font-size: 0.75rem;
        -webkit-line-clamp: 2;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .product-price {
        font-size: 1rem;
    }

    .product-button {
        padding: 5px 12px;
        font-size: 0.75rem;
    }

    /* 搜索区域响应式 */
    .search-section {
        padding: 10px 12px;
    }

    .search-input {
        padding: 8px 35px 8px 35px;
    }

    .search-icon {
        left: 12px;
        font-size: 14px;
    }

    .search-clear {
        right: 12px;
        font-size: 14px;
    }
}

/* 登录注册模态框样式 */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}

.modal-content {
    background-color: #fefefe;
    margin: 45% auto;
    padding: 20px;
    border-radius: 5px;
    width: 400px;
    max-width: 90%;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    position: relative;
}

.close-modal {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.close-modal:hover {
    color: #000;
}

.auth-tabs {
    display: flex;
    margin-bottom: 20px;
    border-bottom: 1px solid #ddd;
}

.auth-tab {
    flex: 1;
    padding: 10px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    color: #666;
}

.auth-tab.active {
    color: #333;
    border-bottom: 2px solid #333;
}

.auth-form {
    display: none;
}

.auth-form.active {
    display: block;
}

.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.form-group input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
}

.auth-button {
    width: 100%;
    padding: 12px;
    background-color: #333;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
}

.auth-button:hover {
    background-color: #555;
}

#auth-message {
    margin-top: 15px;
    padding: 10px;
    border-radius: 4px;
    display: none;
}

.success {
    background-color: #dff0d8;
    color: #3c763d;
}

.error {
    background-color: #f2dede;
    color: #a94442;
}

/* 悬浮订单图标 */
.floating-order {
    position: fixed;
    top: 80px;
    right: 20px;
    width: 50px;
    height: 50px;
    background-color: #333;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 1000;
    transition: background-color 0.3s;
}

.floating-order:hover {
    background-color: #555;
}

.floating-order i {
    font-size: 24px;
    color: white;
}

.order-count {
    position: absolute;
    top: -5px;
    right: -5px;
    background-color: #ff6b6b;
    color: white;
    font-size: 12px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 订单详情容器样式 */
.order-detail {
    display: none;
    position: fixed;
    top: 150px;
    right: 20px;
    width: 300px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    padding: 15px;
    z-index: 1000;
    max-height: 400px;
    overflow-y: auto;
}

.close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    font-size: 16px;
    cursor: pointer;
}

.order-item {
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
}

.order-item:last-child {
    border-bottom: none;
}

.order-item p {
    margin: 5px 0;
    text-align: left; /* 左对齐 */
}

/* 关闭按钮样式 */
.close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    font-size: 16px;
    cursor: pointer;
}

/* 新增功能：悬浮帮助图标 */
.floating-help {
    position: fixed;
    bottom: 80px;
    left: 20px;
    width: 50px;
    height: 50px;
    background-color: #333;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 1000;
    transition: background-color 0.3s;
}

.floating-help:hover {
    background-color: #555;
}

.floating-help i {
    font-size: 24px;
    color: white;
}

/* 新增悬浮图标样式 */
.floating-btn {
    position: fixed;
    bottom: 80px;
    right: 20px;
    width: 50px;
    height: 50px;
    background-color: #1a73e8;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 1000;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

.floating-btn:hover {
    transform: scale(1.1);
    background-color: #1557b0;
}

.floating-btn i {
    color: white;
    font-size: 20px;
}

.empty-result {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px;
    text-align: center;
}

.empty-result h3 {
    color: #666;
    font-size: 16px;
}

.empty-list-message {
    text-align: left;
}

/* APlus通讯区域置顶 */
.intro-section.data-card-color {
    position: sticky;
    top: 0;
    z-index: 100; /* 确保在内容上方显示 */
    background-color: white; /* 添加背景色以避免内容被遮挡 */
    box-shadow: 0 2px 10px rgba(0,0,0,0.1); /* 添加阴影效果 */
}

/* 为内容添加内边距，避免与置顶区域重叠 */
.content-container {
    padding-top: 20px; /* 根据实际高度调整 */
}

/* 隐藏专区选择区域 */
.nav-container {
    position: absolute;
    top: -9999px;
    left: -9999px;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* 调整内容顶部内边距 */
.content-container {
    padding-top: 0;
}

/* 角标样式 */
.product-tag {
    position: absolute;
    top: 8px; /* 距离顶部的距离 */
    right: 8px; /* 距离右侧的距离 */
    padding: 1px 2px;
    background-color: #e74c3c;
    color: white;
    border-radius: 4px;
    font-size: 12px;
    font-weight: bold;
    z-index: 1;
}

.loading-indicator {
    text-align: center;
    padding: 20px;
    color: #666;
}

#load-more-prompt {
    background-color: #f5f5f5;
    border-radius: 5px;
    margin: 0px 0;
    cursor: pointer;
    transition: background-color 0.3s;
}

#load-more-prompt:hover {
    background-color: #e0e0e0;
}

/* 新增：产品按钮禁用状态样式 - 添加到现有样式之后 */
.product-button.disabled {
    background-color: #cccccc !important;
    color: #999999 !important;
    cursor: not-allowed !important;
    opacity: 0.6 !important;
    pointer-events: none !important;
}

/* 确保流量卡专区的禁用按钮也有正确样式 */
.product-button.data-card.disabled {
    background-color: #cccccc !important;
    color: #999999 !important;
    cursor: not-allowed !important;
    opacity: 0.6 !important;
    pointer-events: none !important;
}

/* 修改现有产品按钮悬停样式，避免影响禁用按钮 */
.product-button:hover:not(.disabled) {
    background-color: #c0392b !important;
}

/* 修改流量卡专区按钮悬停样式，避免影响禁用按钮 */
.product-button.data-card:hover:not(.disabled) {
    background-color: #3a70b8 !important;
}

/* 筛选按钮容器样式 */
.filter-buttons-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between; /* 修改这里：改为space-between实现均匀分布 */
    align-items: center; /* 垂直居中 */
    padding: 5px 0;
    max-width: 600px; /* 限制最大宽度 */
    margin: 0 auto; /* 水平居中 */
    width: 96%; /* 添加100%宽度确保父容器宽度 */
}

/* 筛选按钮样式 */
.filter-btn {
    padding: 12px 20px;
    background-color: #f5f5f5;
    color: #666;
    border: 2px solid #e0e0e0;
    border-radius: 8px; /* 圆形按钮 */
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 16px;
    font-weight: 600;
    min-width: 80px;
    text-align: center;
    outline: none;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

/* 筛选按钮悬停效果 */
.filter-btn:hover:not(.active) {
    background-color: #e8e8e8;
    border-color: #d0d0d0;
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
}

/* 活跃（选中）按钮样式 */
.filter-btn.active {
    background-color: #4a89dc;
    color: white;
    border-color: #4a89dc;
    box-shadow: 0 4px 12px rgba(74, 137, 220, 0.3);
}

/* 禁用按钮样式（如果需要） */
.filter-btn:disabled {
    background-color: #f0f0f0;
    color: #aaa;
    border-color: #e0e0e0;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* 针对移动端调整 */
@media (max-width: 768px) {
    .filter-buttons-container {
        gap: 8px;
    }

    .filter-btn {
        padding: 10px 16px;
        min-width: 70px;
        font-size: 16px;
    }
}

@media (max-width: 576px) {
    .filter-buttons-container {
        gap: 6px;
        justify-content: space-around;
    }

    .filter-btn {
        padding: 8px 12px;
        min-width: 60px;
        font-size: 16px;
        flex: 1; /* 使按钮在移动端等宽 */
        max-width: calc(20% - 5px); /* 5个按钮平分宽度 */
    }
}

/* 添加下架产品分组相关样式 */

/* 下架产品分组容器 */
.offline-product-group {
    margin-top: 20px;
    background-color: #f8f9fa;
    border-radius: 10px;
    padding: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 分组头部 */
.offline-group-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    cursor: pointer;
    background-color: #f1f1f1;
    border-radius: 10px 10px 0 0;
    border-bottom: 1px solid #e0e0e0;
}

.offline-group-title {
    font-size: 1.1rem;
    color: #666;
    margin: 0;
    font-weight: 600;
}

.toggle-offline-btn {
    background: none;
    border: none;
    font-size: 1.2rem;
    color: #666;
    cursor: pointer;
    transition: transform 0.3s ease;
    padding: 5px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.toggle-offline-btn:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.toggle-offline-btn.expanded i {
    transform: rotate(180deg);
}

/* 下架产品容器 */
.offline-products-container {
    padding: 20px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

/* 空状态提示 */
.offline-empty-message {
    text-align: center;
    padding: 30px;
    color: #999;
    font-style: italic;
}

/* 下架产品的特殊样式 */
.offline-product-item {
    background-color: #f5f5f5;
    opacity: 0.9;
}

.offline-product-item .product-image img {
    filter: grayscale(30%);
}

/* 响应式调整 */
@media (max-width: 768px) {
    .offline-group-header {
        padding: 12px 15px;
    }

    .offline-products-container {
        padding: 15px;
    }
}
/* 下架产品分组相关样式 - 修正版 */
/* 已下架产品分组相关样式 */

/* 下架产品分组容器样式 */
.offline-product-group {
    margin-top: 10px; /* 分组顶部外边距 */
    background-color: #f8f9fa; /* 背景颜色 */
    border-radius: 8px; /* 边框圆角 */
    overflow: hidden; /* 隐藏溢出内容 */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* 阴影效果 */
}

/* 已下架产品分组头部样式 */
.offline-group-header {
    display: flex; /* 使用弹性布局 */
    justify-content: space-between; /* 子元素两端对齐 */
    align-items: center; /* 垂直居中 */
    padding: 12px 15px; /* 内边距 */
    cursor: pointer; /* 鼠标指针样式 */
    background-color: #f1f1f1; /* 头部背景颜色 */
    border-bottom: 1px solid #e0e0e0; /* 底部边框 */
    transition: background-color 0.3s ease; /* 背景颜色过渡动画 */
}

/* 已下架产品分组头部悬停效果 */
.offline-group-header:hover {
    background-color: #e8e8e8; /* 悬停时的背景颜色 */
}

/* 已下架产品分组标题样式 */
.offline-group-title {
    font-size: 1rem; /* 字体大小 */
    color: #666; /* 字体颜色 */
    margin: 0; /* 外边距归零 */
    font-weight: 600; /* 字体粗细 */
}

/* 切换按钮样式 */
.toggle-offline-btn {
    background: none; /* 无背景色 */
    border: none; /* 无边框 */
    font-size: 1rem; /* 字体大小 */
    color: #666; /* 字体颜色 */
    cursor: pointer; /* 鼠标指针样式 */
    transition: transform 0.3s ease; /* 变换过渡动画 */
    padding: 5px; /* 内边距 */
    width: 24px; /* 宽度 */
    height: 24px; /* 高度 */
    display: flex; /* 使用弹性布局 */
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    border-radius: 50%; /* 圆形按钮 */
}

/* 切换按钮悬停效果 */
.toggle-offline-btn:hover {
    background-color: rgba(0, 0, 0, 0.05); /* 悬停时的背景颜色 */
}

/* 已下架产品容器 */
.offline-products-container {
    display: none; /* 默认隐藏 */
    background-color: white;
    padding: 0px; /* 容器内边距 */
}

/* 通过JavaScript设置内联样式 display: grid 时，保持网格布局和间距 */
.offline-products-container[style*="display: block"],
.offline-products-container[style*="display: grid"] {
    display: grid !important; /* 强制使用网格布局 */
    grid-template-columns: 1fr; /* 设置单列布局 */
    gap: 5px !important; /* 产品之间的间距，使用!important确保生效 */
    padding: 0px; /* 容器内边距 */
}

/* 已下架产品在容器中的样式 */
.offline-products-container .product-item {
    opacity: 0.9; /* 透明度 */
    background-color: #fafafa; /* 背景颜色 */
}

/* 已下架产品图片样式 */
.offline-products-container .product-item .product-image img {
    filter: grayscale(30%); /* 图片灰度效果 */
}

/* 已下架产品标题样式 */
.offline-products-container .product-item .product-info h3 {
    color: #888; /* 字体颜色为深灰色 */
}

/* 已下架产品描述样式 */
.offline-products-container .product-item .product-desc {
    color: #999; /* 字体颜色为浅灰色 */
}

/* 大屏幕设备 */
@media (min-width: 992px) {
    .product-list {
        gap: 12px; /* 在大屏幕上增加间距 */
    }

    .offline-products-container {
        gap: 12px; /* 在大屏幕上增加已下架产品间距 */
    }
}

/* 平板设备 */
@media (max-width: 768px) {
    .product-list {
        gap: 6px; /* 在平板上减少间距 */
    }

    .offline-products-container {
        gap: 6px; /* 在平板上减少已下架产品间距 */
    }
}

/* 手机设备 */
@media (max-width: 576px) {
    .product-list {
        gap: 5px; /* 在手机上进一步减少间距 */
    }

    .offline-products-container {
        gap: 5px; /* 在手机上进一步减少已下架产品间距 */
        padding: 4px; /* 在手机上减少内边距 */
    }
}

/* 智能客服浮层样式 */

/* 浮层遮罩 */
.ai-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.ai-overlay.show {
    opacity: 1;
}

/* 智能客服浮层样式 */

/* 浮层容器 */
.ai-floating-layer {
    /* 固定定位：使元素相对于视口定位，不随页面滚动 */
    position: fixed;
    /* 定位在屏幕底部 */
    bottom: 0;
    /* 从左侧开始，占满整个宽度 */
    left: 0;
    /* 宽度占满屏幕100% */
    width: 100%;
    /* 高度占屏幕的80%，提供足够的显示空间 */
    height: 80%;
    /* 最大高度限制，避免在大屏幕上显示过高 */
    max-height: 600px;
    /* 背景色为白色，清晰可读 */
    background-color: white;
    /* 左上角和右上角设置圆角，底部保持直角，形成上拉卡片效果 */
    border-radius: 20px 20px 0 0;
    /* 向上投射阴影，增强层次感和视觉分离效果 */
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
    /* z-index确保浮层位于页面内容之上 */
    z-index: 1000;
    /* 初始状态：完全隐藏在屏幕下方，通过transform实现 */
    transform: translateY(100%);
    /* 动画效果：transform属性变化时，使用cubic-bezier缓动函数，持续0.4秒 */
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    /* 使用flex布局，便于内部元素排列 */
    display: flex;
    /* 垂直方向排列子元素 */
    flex-direction: column;
    /* 隐藏溢出的内容，确保圆角效果不被破坏 */
    overflow: hidden;
}

/* 浮层显示状态 */
.ai-floating-layer.show {
    /* 当添加.show类时，将浮层上移至完全可见的位置 */
    transform: translateY(0);
}

/* 浮层头部 */
.ai-floating-header {
    /* 使用flex布局，水平排列头部元素 */
    display: flex;
    /* 水平方向：标题和关闭按钮分别位于两端 */
    justify-content: space-between;
    /* 垂直方向：居中对齐所有元素 */
    align-items: center;
    /* 内边距：上下20px，左右20px */
    padding: 20px;
    /* 底部边框：1像素实线，浅灰色，分隔头部和内容区域 */
    border-bottom: 1px solid #eee;
    /* 头部背景色保持白色，与浮层整体一致 */
    background-color: #4a89dc;  /* 流量卡专区的蓝色 */
    /* 防止头部被压缩：禁止flex项目缩小 */
    flex-shrink: 0;
}

/* 浮层标题 */
.ai-floating-title {
    /* 清除默认外边距，确保布局紧凑 */
    margin: 0;
    /* 字体大小：18像素，适中可读 */
    font-size: 18px;
    /* 字体粗细：600（中等粗体），突出标题重要性 */
    font-weight: 600;
    /* 字体颜色：深灰色，提供足够对比度 */
    color: white;
}

/* 浮层关闭按钮 */
.ai-floating-close {
    /* 移除按钮默认背景色，实现扁平化设计 */
    background: none;
    /* 移除按钮默认边框 */
    border: none;
    /* 图标大小：20像素，清晰可见 */
    font-size: 20px;
    /* 图标颜色：中灰色，不喧宾夺主 */
    color: #666;
    /* 鼠标悬停时显示手型指针，表示可点击 */
    cursor: pointer;
    /* 按钮尺寸：36x36像素，提供足够点击区域 */
    width: 36px;
    height: 36px;
    /* 将按钮设为圆形，增加视觉亲和力 */
    border-radius: 50%;
    /* 使用flex布局，便于图标居中显示 */
    display: flex;
    /* 垂直居中图标 */
    align-items: center;
    /* 水平居中图标 */
    justify-content: center;
    /* 过渡效果：所有属性变化（如背景色、颜色）在0.3秒内平滑完成 */
    transition: all 0.3s ease;
}

/* 浮层关闭按钮悬停状态 */
.ai-floating-close:hover {
    /* 悬停时添加浅灰色背景，提供视觉反馈 */
    background-color: #f5f5f5;
    /* 悬停时图标颜色加深，增强交互感 */
    color: #333;
}

/* 浮层内容区域 */
.ai-floating-content {
    /* flex:1 使内容区域占据剩余所有可用空间 */
    flex: 1;
    /* 隐藏溢出内容，同时允许内部iframe滚动 */
    overflow: hidden;
    /* 相对定位，为子元素定位提供参考（如有需要） */
    position: relative;
}

/* 响应式调整：平板及以下设备（屏幕宽度≤768px） */
@media (max-width: 768px) {
    .ai-floating-layer {
        /* 在小屏幕上增加浮层高度，提供更多显示空间 */
        height: 85%;
        /* 移除最大高度限制，适应不同屏幕尺寸 */
        max-height: none;
    }
}

/* 响应式调整：手机设备（屏幕宽度≤576px） */
@media (max-width: 576px) {
    .ai-floating-layer {
        /* 在手机上进一步增加浮层高度，充分利用屏幕空间 */
        height: 90%;
        /* 减小圆角半径，适应小屏幕美学 */
        border-radius: 15px 15px 0 0;
    }

    /* 调整头部内边距，减少在小屏幕上的空间占用 */
    .ai-floating-header {
        padding: 15px;
    }

    /* 减小标题字体大小，适应小屏幕显示 */
    .ai-floating-title {
        font-size: 16px;
    }
}

/* 在CSS文件中添加以下样式 */

/*
 * 产品标签容器样式
 * 控制标签的整体布局和间距
 */
.product-tags-container {
    display: flex;              /* 使用弹性布局，标签横向排列 */
    flex-wrap: wrap;            /* 允许标签换行显示 */
    gap: 5px;                   /* 标签之间的间距 - 修改这里调整标签间距 */
    margin-bottom: 12px;        /* 容器底部外边距 */
    margin-top: 8px;           /* 容器顶部外边距 */
}

/*
 * 单个产品标签样式
 * 控制标签的外观和颜色
 */
.product-tag-item {
    padding: 4px 10px;         /* 标签内边距 - 调整这里改变标签大小 */
    background-color: #e8f5e8;  /* 标签背景颜色 - 修改这里调整背景色 */
    border: 1px solid #e8f5e8;  /* 标签边框 - 修改这里调整边框颜色 */
    border-radius: 12px;        /* 圆角大小 - 调整这里改变标签圆角 */
    font-size: 12px;           /* 字体大小 */
    color: #27ae60;            /* 文字颜色 - 修改这里调整文字颜色 */
    white-space: nowrap;       /* 禁止文字换行 */
    font-weight: 500;          /* 字体粗细 */
}

/*
 * 流量卡专区的标签样式
 * 针对流量卡专区的特殊样式
 */
.product-item.data-card .product-tag-item {
    background-color: #f0f7ff;  /* 背景颜色 - 修改这里 */
    border-color: #4a89dc;      /* 边框颜色 - 修改这里 */
    color: #4a89dc;            /* 文字颜色 - 修改这里 */
}

/*
 * 响应式调整 - 平板设备 (屏幕宽度 ≤ 768px)
 */
@media (max-width: 768px) {
    .product-tags-container {
        margin-bottom: 2px;    /* 调整底部外边距 */
        margin-top: 2px;        /* 调整顶部外边距 */
        gap: 8px;               /* 调整标签间距 - 修改这里 */
    }

    .product-tag-item {
        padding: 3px 8px;       /* 调整内边距 */
        font-size: 11px;        /* 调整字体大小 */
    }
}

/*
 * 响应式调整 - 手机设备 (屏幕宽度 ≤ 480px)
 */
@media (max-width: 480px) {
    .product-tags-container {
        margin-bottom: 2px;     /* 调整底部外边距 */
        margin-top: 2px;        /* 调整顶部外边距 */
        gap: 8px;               /* 调整标签间距 - 修改这里 */
    }

    .product-tag-item {
        padding: 2px 6px;       /* 调整内边距 */
        font-size: 10px;        /* 调整字体大小 */
    }
}

/* 加载更多按钮样式 */
#load-more-container {
    margin-top: 20px;
    margin-bottom: 30px;
}

#load-more-btn:hover {
    background-color: #3a70b8;
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(74, 137, 220, 0.3);
}

#load-more-btn:active {
    transform: translateY(0);
}

#load-more-btn:disabled {
    background-color: #cccccc;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* 产品列表为空时的提示样式 */
.empty-list-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px 20px;
    text-align: center;
    width: 100%;
    min-height: 16px;
    color: #999;
    font-size: 18px;
    font-weight: 500;
    background-color: #f9f9f9;
    border-radius: 12px;
    margin: 20px 0;
}

/* 空状态图标样式 */
.empty-list-message::before {
    font-size: 60px;
    margin-bottom: 20px;
    opacity: 0.3;
}

/* 或者使用Font Awesome图标 */
.empty-list-message .empty-icon {
    font-size: 60px;
    color: #e0e0e0;
    margin-bottom: 20px;
}

/* 响应式调整 */
@media (max-width: 768px) {
    .empty-list-message {
        padding: 16px 15px;
        min-height: 16px;
        font-size: 16px;
    }

    .empty-list-message::before {
        font-size: 48px;
        margin-bottom: 15px;
    }
}

/* 轮播箭头样式 */
.banner-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.7);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #333;
    z-index: 10;
    opacity: 0;
    transition: all 0.3s ease;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.banner-arrow:hover {
    background-color: rgba(255, 255, 255, 0.9);
    transform: translateY(-50%) scale(1.1);
}

.banner-container:hover .banner-arrow {
    opacity: 1;
}

.banner-arrow-prev {
    left: 15px;
}

.banner-arrow-next {
    right: 15px;
}

/* 移动端隐藏箭头 */
@media (max-width: 768px) {
    .banner-arrow {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }

    .banner-container:hover .banner-arrow {
        opacity: 0.7;
    }
}

/* 产品列表统一样式 */
.product-list, #recommended-product-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 5px;
    width: 100%; /* 确保宽度为100% */
}

/* 在现有CSS末尾添加以下样式 */

/* 页面内容区域 */
.page-content {
    display: none;
    padding-bottom: 70px; /* 为底部导航栏留出空间 */
}

.page-content.active {
    display: block;
}

/* 底部导航栏 */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background-color: white;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    display: flex;
    z-index: 1000;
}

.nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px 0;
    color: #999;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.nav-item i {
    font-size: 20px;
    margin-bottom: 4px;
}

.nav-item.active {
    color: #4a89dc;
}

.nav-item.active i {
    color: #4a89dc;
}

.nav-item:hover {
    background-color: #f8f9fa;
}

/* 我的页面样式 */
.my-page-header {
    padding: 10px 0;
    border-radius: 0 0 8px 8px;
    margin-bottom: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    background: linear-gradient(135deg, #ffffff, #ffffff);
}

.my-page-header .intro-text h1 {
    color: #4a89dc;
}

.my-page-header .intro-text p {
    color: #5d9cec;
}

.my-section {
    background-color: white;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 15px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.my-section-title {
    font-size: 1.2rem;
    color: #333;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}

/* 订单查询表单 */
.order-query-form {
    max-width: 500px;
    margin: 0 auto;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: #555;
}

.order-query-input {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 16px;
    transition: border-color 0.3s;
    box-sizing: border-box;
}

.order-query-input:focus {
    border-color: #4a89dc;
    outline: none;
    box-shadow: 0 0 0 2px rgba(74, 137, 220, 0.1);
}

.phone-error-message {
    color: #e74c3c;
    font-size: 12px;
    margin-top: 5px;
    height: 16px;
    display: none;
}

.form-actions {
    text-align: center;
}

.submit-query-btn {
    padding: 12px 30px;
    background: #4a89dc;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.3s ease;
    font-size: 16px;
    width: 100%;
    max-width: 200px;
}

.submit-query-btn:hover {
    background-color: #3a70b8;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(74, 137, 220, 0.3);
}

/* FAQ样式 */
.faq-container {
    max-width: 800px;
    margin: 0 auto;
}

.faq-item {
    border-bottom: 1px solid #eee;
    margin-bottom: 10px;
    overflow: hidden;
}

.faq-item:last-child {
    border-bottom: none;
}

.faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    cursor: pointer;
    font-weight: 500;
    color: #333;
    transition: color 0.3s ease;
}

.faq-question:hover {
    color: #4a89dc;
}

.faq-question i {
    transition: transform 0.3s ease;
    color: #999;
}

.faq-item.active .faq-question i {
    transform: rotate(180deg);
    color: #4a89dc;
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    padding: 0;
    color: #666;
    line-height: 1.6;
    transition: max-height 0.3s ease, padding 0.3s ease;
}

.faq-item.active .faq-answer {
    max-height: 200px;
    padding: 0 0 15px 0;
}

/* 优化后的智能客服按钮 */
.ai-floating-btn {
    position: fixed;
    bottom: 80px;
    right: 20px;
    width: 60px;
    height: 60px;
    background-color: #4a89dc;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(74, 137, 220, 0.4);
    z-index: 999;
    transition: all 0.3s ease;
    overflow: hidden;
}

.ai-floating-btn:hover {
    transform: scale(1.1);
    background-color: #3a70b8;
    box-shadow: 0 6px 20px rgba(74, 137, 220, 0.5);
}

.ai-floating-btn i {
    font-size: 24px;
    margin-bottom: 2px;
}

.ai-floating-text {
    font-size: 12px;
    font-weight: 500;
}

/* 响应式调整 */
@media (max-width: 768px) {
    .bottom-nav {
        height: 60px;
    }

    .nav-item {
        font-size: 11px;
    }

    .nav-item i {
        font-size: 18px;
    }

    .my-section {
        padding: 15px;
        margin-bottom: 12px;
    }

    .ai-floating-btn {
        bottom: 70px;
        right: 15px;
        width: 56px;
        height: 56px;
    }
}

@media (max-width: 480px) {
    .bottom-nav {
        height: 55px;
    }

    .my-section {
        padding: 12px;
        margin-bottom: 10px;
    }

    .ai-floating-btn {
        bottom: 65px;
        right: 12px;
        width: 52px;
        height: 52px;
    }

    .ai-floating-btn i {
        font-size: 22px;
    }
}

/* 我的页面特殊样式 - 确保内容显示 */
#my-page .section.active {
    display: block !important;
}

/* 我的页面内容区域调整，避免与固定头部重叠 */
#my-page .content-container {
    padding-top: 0;
}

/* 我的页面头部样式 */
.my-page-header {
    padding: 10px 0;
    border-radius: 0 0 8px 8px;
    margin-bottom: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    background: linear-gradient(135deg, #ffffff, #ffffff);
}

.my-page-header .intro-text h1 {
    color: #4a89dc;
    margin-bottom: 5px;
}

.my-page-header .intro-text p {
    color: #5d9cec;
    margin-bottom: 0;
}

/* 确保页面内容正常显示 */
.page-content {
    display: none;
    padding-bottom: 70px; /* 为底部导航栏留出空间 */
    min-height: calc(100vh - 140px); /* 确保有足够高度 */
}

.page-content.active {
    display: block;
}

/* 在CSS中添加以下样式 */

/* 确保页面切换时section也能正确显示 */
.page-content.active .section.active {
    display: block !important;
}

/* 确保我的页面头部与首页样式一致 */
#my-page .intro-section {
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: white;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    padding: 10px 0;
    border-radius: 0 0 8px 8px;
    margin-bottom: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* 确保我的页面section在页面激活时显示 */
#my-page.page-content.active .section {
    display: block !important;
}

/* 我的页面特殊样式 */
#my-page .section {
    display: block !important; /* 强制显示我的页面内容 */
}

/* 我的页面区域样式调整，避免与固定头部重叠 */
#my-page .my-section {
    background-color: white;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 15px;
    margin-top: 15px; /* 添加上边距，避免紧贴头部 */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

/* 修复页面切换时的显示问题 */
.page-content:not(.active) {
    display: none !important;
}

.page-content.active {
    display: block !important;
}


/* 确保我的页面头部标题颜色正确 */
#my-page .intro-section.data-card-color h1 {
    color: #4a89dc;
}

#my-page .intro-section.data-card-color p {
    color: #5d9cec;
}

/* 调整第一个my-section与头部的间距 */
#my-page .my-section:first-of-type {
    margin-top: 20px;
}

/* 确保我的页面在切换时正确显示 */
#my-page.page-content.active {
    display: block;
}

/* 确保我的页面内容可见 */
#my-page.page-content.active .section {
    display: block;
}

/* 响应式调整 */
@media (max-width: 768px) {
    #my-page .my-section {
        padding: 15px;
        margin-top: 12px;
        margin-bottom: 12px;
    }

    #my-page .my-section:first-of-type {
        margin-top: 15px;
    }
}

@media (max-width: 480px) {
    #my-page .my-section {
        padding: 12px;
        margin-top: 10px;
        margin-bottom: 10px;
    }

    #my-page .my-section:first-of-type {
        margin-top: 12px;
    }
}