/* 店铺卡片 z-index 修复 */
/* 确保这些元素显示在 p-store-card__full-link 之上 */

.p-store-card__name,
.p-store-card__body,
.p-store-card__features,
.p-store-card__reservation {
  position: relative;
  z-index: 2;
}

.c-bookmark {
  position: relative;
  z-index: 2;
}

/* 确保预约按钮可以点击 */
.p-store-card__reservation {
  pointer-events: auto;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* 店铺卡片统一样式 - 白色背景、圆角、透明边框 */
.p-store-card {
  background-color: #ffffff !important;
  border-radius: 10px !important;
  border: 3px solid transparent !important;
  box-shadow: 0 5px 4px 0 rgba(0, 0, 0, 0.15) !important;
  transition: border-color 0.2s ease !important;
  width: 100% !important; /* 占满父容器宽度 */
  max-width: 100% !important;
}

/* hover时显示红色边框 */
.p-store-card:hover {
  border-color: #d60035 !important;
}

/* 隐藏全屏覆盖按钮,避免影响卡片样式和hover效果 */
.p-store-card__full-link {
  display: none !important;
}

/* 地图中的店铺卡片样式 */
.p-map-store {
  background-color: transparent !important;
  position: absolute !important;
  width: 540px !important; /* 设置容器宽度等于卡片宽度 */
}

/* 手机模式下调整容器宽度 */
@media screen and (max-width: 991px) {
  .p-map-store {
    width: 340px !important;
  }
}

@media screen and (max-width: 575px) {
  .p-map-store {
    width: 280px !important;
  }
}

/* 地图店铺卡片的箭头 - 指向地图上的店铺位置 */
.p-map-store::after {
  content: '';
  position: absolute;
  bottom: -16px; /* 箭头显示在卡片下方 */
  left: 50%; /* 水平居中 */
  transform: translateX(-50%); /* 确保完全居中 */
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 20px solid #ffffff; /* 白色箭头，指向下方 */
  filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.15)); /* 阴影效果 */
  z-index: 1001 !important;
  pointer-events: none; /* 箭头不拦截鼠标事件 */
}

/* 地图中的店铺卡片尺寸和样式 */
.p-map-store .p-store-card--map,
.p-map-store .p-store-card.p-store-card--map {
  background-color: #ffffff !important;
  border-radius: 10px !important;
  border: 1px solid #c9caca !important; /* 默认灰色边框 */
  box-shadow: 0 5px 4px 0 rgba(0, 0, 0, 0.15) !important;
  transition: border-color 0.2s ease !important;
  width: 540px !important; /* 增加宽度到 480px */
  max-width: 540px !important;
  max-height: 36vh !important; /* 最大高度为视口高度的 30% */
  overflow-y: auto !important; /* 超出部分允许滚动 */
  overflow-x: hidden !important; /* 水平方向隐藏 */
  position: relative !important; /* 确保定位正确 */
}

/* 手机模式下调整卡片宽度 */
@media screen and (max-width: 991px) {
  .p-map-store .p-store-card--map,
  .p-map-store .p-store-card.p-store-card--map {
    width: 340px !important;
    max-width: 340px !important;
  }
}

@media screen and (max-width: 575px) {
  .p-map-store .p-store-card--map,
  .p-map-store .p-store-card.p-store-card--map {
    width: 280px !important;
    max-width: 280px !important;
  }

  /* 修复手机模式下info文字超出问题 */
  .p-map-store .p-store-card__info,
  .p-map-store .p-store-card--map .p-store-card__info {
    max-width: calc(280px - 80px - 10px - 20px) !important; /* 卡片宽度 - 图片宽度 - gap - padding */
    overflow: hidden !important;
  }

  .p-map-store .p-store-card__info-item,
  .p-map-store .p-store-card--map .p-store-card__info-item {
    word-break: break-all !important; /* 强制换行 */
    overflow-wrap: break-word !important;
    max-width: 100% !important;
  }
}

/* 禁用common.css中的箭头样式 */
.p-map-store .p-store-card--map::after,
.p-map-store .p-store-card.p-store-card--map::after {
  display: none !important; /* 隐藏common.css中定义的箭头 */
}

/* hover时显示红色边框 */
.p-map-store .p-store-card--map:hover,
.p-map-store .p-store-card.p-store-card--map:hover {
  outline: 2px solid #d60035 !important;
  border-color: #d60035 !important;
}

.p-map-store .p-store-card--map,
.p-map-store .p-store-card.p-store-card--map::-webkit-scrollbar {
  width: 2px;
}

.p-map-store .p-store-card--map,
.p-map-store .p-store-card.p-store-card--map::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 10px;
}

.p-map-store .p-store-card--map,
.p-map-store .p-store-card.p-store-card--map::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.15);
  border-radius: 10px;
}

/* 确保卡片内所有子元素不阻止hover事件,但允许交互 */
.p-store-card--map > * {
  pointer-events: auto !important;
}

/* 地图中的店铺卡片标签背景色改为灰色 */
.p-store-card--map .p-feature-tag {
  background-color: #e5e5e5 !important;
  color: #333333 !important;
}

/* 地图中的预约按钮样式 - 移除背景和边框 */
.p-store-card--map .p-store-card__reservation {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* 隐藏 Leaflet 版权信息 */
/* .leaflet-control-attribution {
  display: none !important;
} */

/* 地图搜索容器整体宽度 */
.p-shop-list {
  max-width: 100% !important; /* 改为100%,不限制宽度 */
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important; /* 添加左右内边距 */
}

/* 手机模式下减少padding */
@media screen and (max-width: 575px) {
  .p-shop-list {
    padding: 0 !important;
  }
}

/* 黑色标题框默认宽度 */
.p-shop-list .p-black-box {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* 地图模式下的黑色标题框宽度需要加上中间间隔 */
/* 如果p-black-box的下一个兄弟元素包含p-map-search,说明是地图模式 */
.p-shop-list .p-black-box:has(+ .p-shop-list__inner .p-map-search) {
  width: calc(100%) !important; /* 地图模式增加30px */
  max-width: calc(100%) !important;
}

/* 地图容器布局修复 - 使用flex代替grid以避免冲突 */
.p-shop-list__inner {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between;
  gap: 34px !important; /* 减少间距到 35px (从40px减少5px) */
  /* min-height: 700px !important; */
  width: 100% !important;
}

/* 店铺列表主体区域 */
.p-shop-list__main {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
  width: auto !important;
  max-width: none !important; /* 移除最大宽度限制 */
}

.p-map-search {
  /* flex: 1 !important; */
  width: 65% !important;
  height: 100dvh !important;
  /* min-height: 700px !important; */
  min-width: 600px !important; /* 增加最小宽度 */
  position: relative !important;
  display: block !important;
}

.p-shop-list__side-menu {
  flex: 0 0 322px !important;
  width: 322px !important;
}

/* 筛选面板宽度 */
.p-filter.p-filter--pc-only {
  width: 100% !important;
  max-width: 100% !important;
}

/* 确保地图容器内的Leaflet容器也有高度和宽度 */
#map-container {
  width: 100% !important;
  height: 100% !important;
  min-height: 700px !important;
}

/* 移动端适配 */
@media screen and (max-width: 991px) {
  .p-shop-list__inner {
    flex-direction: column !important;
    gap: 20px !important;
  }

  .p-shop-list__main {
    width: 100% !important;
  }

  .p-map-search {
    height: calc(100dvh - 85px) !important;
    /* min-height: 500px !important; */
    min-width: unset !important;
    width: 100% !important;
  }

  .p-shop-list__side-menu {
    flex: 1 !important;
    width: 100% !important;
  }

  #map-container {
    height: 100% !important;
    min-height: 500px !important;
  }
}