/*
.store-distribution 类：用于存储分布的布局样式
- margin-top: 顶部外边距为30px
- display: 使用网格布局
- grid-template-columns: 定义两列宽度分别为380px和1fr（剩余空间）
- gap: 网格间距为25px
- min-height: 最小高度为750px
- border-radius: 边框圆角为16px.store-search-box
- box-shadow: 添加阴影效果
*/
.store-distribution {
    margin-top: 30px;
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 25px;
    min-height: 750px;
    /* background: #fff; */
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.1);
}

/*
#map-container ID：地图容器样式
- width: 宽度为100%
- height: 高度为100%
- border-radius: 边框圆角为12px
- overflow: 隐藏溢出内容
- box-shadow: 添加阴影效果
- background: 背景颜色为#1a1a1a
*/
#map-container {
    width: 100%;
    height: 750px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    background: #f5f5f5;
}

/*
.store-controls 类：控制面板样式
- padding: 内边距为25px
- border-radius: 边框圆角为16px
- display: 使用弹性布局
- flex-direction: 子元素纵向排列
- height: 固定高度为750px
*/
.store-controls {
    /* background: linear-gradient(145deg, #f8f9fa, #ffffff); */
    padding: 25px;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    height: 750px;
    /* box-shadow: inset 0 2px 6px rgba(0,0,0,0.03); */
    width: 100%;
    max-width: 380px;
    overflow: hidden;
    box-sizing: border-box;
}

/*
媒体查询：屏幕宽度小于等于768px时应用
- .store-distribution: 改为单列布局，添加内边距
- #map-container: 设置固定高度，调整顺序
- .store-controls: 自动高度，调整顺序
*/
@media screen and (max-width: 768px) {
    .store-distribution {
        grid-template-columns: 1fr;
        padding: 10px;
    }
    
    #map-container {
        height: 400px;
        order: 2;
    }
    
    .store-controls {
        height: auto;
        order: 1;
    }
}

/*
.store-filter 类：过滤器容器样式
- display: 使用弹性布局
- gap: 元素间距为12px
- border-radius: 边框圆角为12px
- position: 相对定位
- z-index: 层级置顶
*/
.store-filter {
    display: flex;
    gap: 12px;
    /* margin-bottom: 25px; */
    /* padding: 16px; */
    /* background: #fff; */
    border-radius: 12px;
    /* box-shadow: inset 0 2px 6px rgba(0,0,0,0.06); */
    position: relative;
    z-index: 1;
}

/*
.filter-btn 类：过滤器按钮样式
- flex: 按钮伸缩比例为1
- padding: 内边距为14px
- border-radius: 边框圆角为10px
- background: 背景颜色为#f7f8fa
- color: 文字颜色为#666
- font-size: 字号为15px
- font-weight: 字重为500
- cursor: 鼠标指针为手型
- position: 相对定位
- overflow: 隐藏溢出内容
*/
.filter-btn {
    flex: 1;
    padding: 14px;
    border: none;
    border-radius: 10px;
    background: #f7f8fa;
    color: #666;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    /* transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); */
    position: relative;
    overflow: hidden;
    /* box-shadow: inset 0 1px 3px rgba(0,0,0,0.05); */
}

/*
.filter-btn::before 伪元素：涟漪效果背景
- content: 空内容
- position: 绝对定位
- top: 50%
- left: 50%
- width: 0
- height: 0
- background: 半透明白色背景
- border-radius: 圆形
- transform: 居中变换
- transition: 宽高过渡动画0.6秒
*/
.filter-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255,255,255,0.2);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

/*
.filter-btn:hover::before 伪元素：悬停时的涟漪效果
- width: 200px
- height: 200px
*/
.filter-btn:hover::before {
    width: 200px;
    height: 200px;
}

/*
.filter-btn.active 类：激活状态样式
- background: 背景颜色为#e60012
- color: 文字颜色为#fff
- box-shadow: 添加红色阴影效果
*/
.filter-btn.active {
    background: #e60012;
    color: #fff;
    box-shadow: 0 4px 15px rgba(230,0,18,0.2);
}

/*
.store-list 类：店铺列表样式
- flex: 弹性空间填充
- overflow-y: 垂直滚动条
- padding: 内边距为15px
- background: 白色背景
- border-radius: 边框圆角为8px
- box-shadow: 添加阴影效果
- margin-top: 顶部外边距为10px
*/
.store-list {
    overflow-y: auto;
    overflow-x: hidden;
    margin-top: 10px;
    width: 100%;
    box-sizing: border-box;
    flex: 1;
}

/*
.store-list::-webkit-scrollbar 伪元素：自定义滚动条样式
- width: 滚动条宽度为6px
*/
.store-list::-webkit-scrollbar {
    width: 6px;
}

/*
.store-list::-webkit-scrollbar-track 伪元素：滚动条轨道样式
- background: 轨道背景色为#f5f5f5
- border-radius: 边框圆角为3px
*/
.store-list::-webkit-scrollbar-track {
    background: #f5f5f5;
    border-radius: 3px;
}

/*
.store-list::-webkit-scrollbar-thumb 伪元素：滚动条滑块样式
- background: 滑块背景色为#e60012
- border-radius: 边框圆角为3px
*/
.store-list::-webkit-scrollbar-thumb {
    background: #e60012;
    border-radius: 3px;
}

/*
.store-item 类：店铺项样式
- padding: 内边距为22px
- background: 白色背景
- border-radius: 边框圆角为14px
- margin-bottom: 底部外边距为16px
- cursor: 鼠标指针为手型
- transition: 过渡动画0.4秒
- border: 1px实线边框
- position: 相对定位
- box-shadow: 添加阴影效果
*/
.store-item {
    padding: 22px;
    background: #fff;
    border-radius: 14px;
    margin-bottom: 16px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid #eef0f5;
    position: relative;
    box-shadow: 0 2px 8px rgba(0,0,0,0.02);
    width: 100%;
    box-sizing: border-box;
    word-wrap: break-word;
    overflow-wrap: break-word;
    min-width: 0;
}

.store-item.active {
    border-color: #e60012;
    background: rgba(230,0,18,0.02);
    transform: translateX(5px);
}

.store-item.active::after {
    height: 100%;
}

/*
.store-item::after 伪元素：左侧装饰条样式
- content: 空内容
- position: 绝对定位
- left: 0
- top: 0
- width: 4px
- height: 0
- background: 背景色为#e60012
- transition: 高度过渡动画0.3秒
- border-radius: 左侧圆角
*/
.store-item::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 4px;
    height: 0;
    background: #e60012;
    transition: height 0.3s;
    border-radius: 4px 0 0 4px;
}

/*
.store-item:hover 伪类：悬停状态样式
- transform: 向右平移5px
- box-shadow: 添加阴影效果
*/
.store-item:hover {
    transform: translateX(5px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}

/*
.store-item:hover::after 伪元素：悬停时的装饰条样式
- height: 100%
*/
.store-item:hover::after {
    height: 100%;
}

/*
.store-item h4 标签：店铺名称样式
- font-size: 字号为16px
- color: 文字颜色为#333
- margin: 外边距为0 0 10px 0
*/
.store-header {
    display: flex;
    align-items: center;
    gap: 5px;
    /* margin-bottom: 8px; */
    flex-wrap: wrap;
}

.store-item h4 {
    font-size: 16px;
    color: #333;
    margin: 0;
    flex: 1;
}

/*
.store-type-tag 类：店铺类型标签样式
- display: 行内块元素
- padding: 内边距为4px 8px
- border-radius: 边框圆角为4px
- font-size: 字号为12px
- color: 文字颜色为白色
- margin-right: 右边距为8px
- font-weight: 字重为500
*/
.store-type-tag {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    color: #fff;
    margin-right: 8px;
    font-weight: 500;
    white-space: nowrap;
}

.store-type-tag.direct {
    background: #e60012;
}

.store-type-tag.franchise {
    background: #409eff;
}

/*
.store-hours 类：营业时间样式
- color: 文字颜色为#666
- font-size: 字号为14px
- margin: 外边距为8px 0
*/
.store-hours {
    color: #666;
    font-size: 14px;
    margin: 4px 0;
}

/*
.store-address 类：地址信息样式
- color: 文字颜色为#999
- font-size: 字号为14px
- line-height: 行高为1.5
*/
.store-address {
    color: #999;
    font-size: 14px;
    line-height: 1.5;
    margin: 4px 0;
}

/*
媒体查询：屏幕宽度小于等于768px时应用
- #map-container: 设置固定高度
- .store-filter: 允许换行显示
- .filter-btn: 调整宽度、内边距和字号
- .store-list: 设置最大高度
*/
@media screen and (max-width: 768px) {
    #map-container {
        height: 400px;
    }
    
    .store-filter {
        flex-wrap: wrap;
        padding: 10px;
    }
    
    .filter-btn {
        width: calc(33.33% - 10px);
        padding: 8px;
        font-size: 14px;
    }
    
    .store-list {
        max-height: 300px;
    }
}

/*
.store-info 类：信息窗体样式
- padding: 内边距为20px
- min-width: 最小宽度为280px
- max-width: 最大宽度为320px
- background: 白色背景
- border-radius: 边框圆角为12px
- box-shadow: 添加阴影效果
*/
.store-info {
    padding: 15px;
    min-width: 280px;
    max-width: 320px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}

/*
.store-info h3 标签：标题样式
- font-size: 字号为18px
- color: 文字颜色为#333
- margin: 外边距为0 0 15px 0
- border-bottom: 底部边框
- padding-bottom: 下内边距
- position: 相对定位
*/
.store-info h3 {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px;
    color: #333;
}

/*
.store-info p 标签：段落样式
- margin: 外边距为12px 0
- color: 文字颜色为#666
- font-size: 字号为14px
- line-height: 行高为1.6
- display: 使用弹性布局
- align-items: 对齐方式为居中
*/
.store-info p {
    margin: 8px 0;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #666;
}

/*
.store-info .info-type 类：信息类型标签样式
- display: 行内弹性布局
- align-items: 对齐方式为居中
- padding: 内边距为8px 16px
- border-radius: 边框圆角为20px
- font-size: 字号为13px
- margin-bottom: 底部外边距为15px
*/
.store-info .info-type {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 13px;
    margin-bottom: 15px;
}

/*
.store-info .info-type.direct 类：直营店类型样式
- background: 背景色为浅红色
- color: 文字颜色为#e60012
*/
.store-info .info-type.direct {
    background: rgba(230,0,18,0.1);
    color: #e60012;
}

/*
.store-info .info-type.franchise 类：加盟店类型样式
- background: 背景色为浅蓝色
- color: 文字颜色为#409eff
*/
.store-info .info-type.franchise {
    background: rgba(64,158,255,0.1);
    color: #409eff;
}

/*
.store-info i 标签：图标样式
- font-size: 字号为16px
- color: 文字颜色为#999
- text-align: 文本居中
*/
.store-info i,
.store-item i {
    font-size: 16px;
    color: #999;
    text-align: center;
    width: 20px;
    margin-right: 5px;
}

/*
.store-search-box 类：搜索框容器样式
- display: 使用弹性布局
- align-items: 垂直居中
- margin: 外边距为18px 0 10px 0
- gap: 元素间距为8px
*/
.store-search-box {
    display: flex;
    align-items: center;
    margin: 18px 0 10px 0;
    gap: 8px;
}

/*
.store-search-box input 标签：搜索框输入样式
- flex: 填充剩余空间
- padding: 内边距为10px 14px
- border: 1px 实线边框
- border-radius: 边框圆角为6px
- font-size: 字号为15px
- outline: 去除轮廓
- background: 背景颜色为#fafbfc
- transition: 边框颜色过渡0.2秒
*/
.store-search-box input {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    font-size: 15px;
    outline: none;
    background: #fafbfc;
    transition: border 0.2s;
}

/*
.store-search-box input:focus 状态：搜索框获得焦点时样式
- border-color: 边框颜色变为#e60012
*/
.store-search-box input:focus {
    border-color: #e60012;
}

/*
.store-search-box button 标签：搜索按钮样式
- background: 背景颜色为#e60012
- color: 文字颜色为#fff
- border: 无边框
- border-radius: 边框圆角为6px
- padding: 上下内边距为0，左右内边距为16px
- height: 高度为38px
- font-size: 字号为16px
- cursor: 鼠标指针为手型
- display: 使用弹性布局
- align-items: 垂直居中
- transition: 背景颜色过渡0.2秒
*/
.store-search-box button {
    background: #e60012;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 0 16px;
    height: 38px;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: background 0.2s;
}

/*
.store-search-box button:hover 状态：搜索按钮悬停时样式
- background: 背景颜色变为#b8000e
*/
.store-search-box button:hover {
    background: #b8000e;
}

/*
.store-search-box button i 标签：搜索按钮图标样式
- font-size: 字号为18px
*/
.store-search-box button i {
    font-size: 18px;
}

/* 额外的通用类 */

/*
.text-center 类：文本居中
*/
.text-center {
    text-align: center;
}

/*
.text-red-bold 类：红色加粗文本
- color: 红色
- font-size: 字号为16px
- font-weight: 字重为bold
*/
.text-red-bold {
    color: #e22702;
    font-size: 16px;
    font-weight: bold;
}

/*
.support-tag 类：扶持标签样式
- background: 背景颜色为#fff3e0
- color: 红色
- padding: 内边距为2px 6px
- border-radius: 边框圆角为4px
- font-size: 字号为13px
*/
.support-tag {
    background: #fff3e0;
    color: #e22702;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 13px;
}

/*
.text-gray-small 类：灰色小字样式
- font-size: 字号为13px
- color: 灰色
- margin-top: 顶部外边距为2px
*/
.text-gray-small {
    font-size: 13px;
    color: #666;
    margin-top: 2px;
}