/*----------体验中心地图页面样式----------*/

.dealer-locator{

  width:85%;

  margin:0 auto;

  min-height:100vh;

  display:flex;

  padding-bottom:80px;

  padding-top:80px; /* 与Hero首屏保持80px间距 */

}

/* 左侧筛选面板 */

.dealer-sidebar{

  width:380px;

  min-width:380px;

  background:#f8f8f8;

  padding:48px 32px;

  border-radius:10px;

  box-shadow:0 2px 12px rgba(0,0,0,0.08);

  overflow:hidden;

  margin-right:20px;

}

.sidebar-title{

  font-size:28px;

  font-weight:500;

  margin-bottom:12px;

}

.sidebar-desc{

  font-size:15px;

  color:#555;

  line-height:1.6;

  margin-bottom:32px;

}

.province-select,.city-select{

  width:100%;

  padding:13px 16px;

  border:1px solid #d1d1d1;

  border-radius:6px;

  font-size:15px;

  background:#fff;

}

.province-select{

  margin-bottom:14px;

}

.city-select{

  margin-bottom:28px;

}

/* 网点列表卡片 */

.store-list-wrap{}

.store-card{

  background:#ffffff;

  border-radius:10px;

  padding:22px;

  margin-bottom:16px;

  border:1px solid #e9e9e9;

  cursor:pointer;

  transition:0.2s;

}

.store-card:hover{

  background:#f4f4f4;

}

.store-name{

  font-size:17px;

  font-weight:600;

  margin-bottom:8px;

}

.store-info p{

  font-size:14px;

  line-height:1.7;

  color:#444;

  margin:5px 0;

}

.store-btn-group{

  margin-top:12px;

  display:flex;

  gap:10px;

}

.store-btn{

  padding:6px 12px;

  border-radius:4px;

  border:1px solid #ccc;

  background:#fff;

  font-size:13px;

  cursor:pointer;

  transition:0.2s;

}

.store-btn:hover{

  background:#efefef;

}

.empty-tip{

  color:#888;

  text-align:center;

  padding:40px 0;

}

/* 复制成功提示 */

.toast{

  position:fixed;

  left:50%;

  top:40%;

  transform:translate(-50%,-50%);

  background:rgba(0,0,0,0.75);

  color:#fff;

  padding:10px 20px;

  border-radius:6px;

  z-index:9999;

  display:none;

}

/* 右侧地图容器 */

.map-wrap{

  flex:1;

  height:calc(100vh - 80px);

  border-radius:10px;

  box-shadow:0 2px 12px rgba(0,0,0,0.08);

  overflow:hidden;

}

#amap-container{

  width:100%;

  height:100%;

}



/* 自定义水滴标注容器 */

.custom-marker-wrap{

  position:relative;

  width:200px;

  height:72px;

  transform:translate(-100px,-72px);

}

.marker-logo{

  position:absolute;

  left:0;

  top:0;

  width:160px;

  height:48px;

  background:#fff;

  border-radius:6px;

  box-shadow:0 2px 8px rgba(0,0,0,.15);

  display:flex;

  align-items:center;

  justify-content:center;

  z-index:2;

}

.marker-logo img{

  width:auto;

  height:36px;

  max-width:180px;

}

.marker-drip{

  position:absolute;

  left:50%;

  top:42px;

  width:22px;

  height:22px;

  margin-left:-11px;

  background:#d9001b;

  border-radius:50% 50% 50% 0;

  transform:rotate(-45deg);

  box-shadow:0 0 0 rgba(217,0,27,.4);

  animation:drip-pulse 2s infinite;

  z-index:1;

}

.marker-drip::after{

  content:"";

  position:absolute;

  left:50%;

  top:50%;

  width:8px;

  height:8px;

  margin:-4px 0 0 -4px;

  background:#fff;

  border-radius:50%;

}

@keyframes drip-pulse{

  0%{box-shadow:0 0 0 0 rgba(217,0,27,.4);}

  70%{box-shadow:0 0 0 10px rgba(217,0,27,0);}

  100%{box-shadow:0 0 0 0 rgba(217,0,27,0);}

}



/* 响应式 移动端上下布局，宽度恢复100% */

@media (max-width:900px){

  .dealer-locator{

    width:100%;

    margin:0;

    flex-direction:column;

  }

  .dealer-sidebar{

    width:100%;

    min-width:auto;

    padding:28px 20px;

    max-height:80vh;

  }

  .map-wrap{

    height:50vh;

  }

}



/*----------Hero首屏（体验中心页）----------*/

#hero {

  width: 100%;

  height: 100vh;

  position: relative;

  overflow: hidden;

  margin-top: -80px;

  padding-top: 80px;

}

.swiper-item {

  position: absolute;

  top: 0; right: 0; bottom: 0; left: 0;

  opacity: 0;

  transition: opacity 0.6s ease;

}

.swiper-item.active {

  opacity: 1;

}

.swiper-bg {

  width: 100%;

  height: 100%;

  object-fit: cover;

}



/* 轮播banner背景图：切换时缓缓滑动一次 */

.banner-img {

  width: 108%;

  height: 100%;

  background-size: cover;

  background-position: center;

  background-repeat: no-repeat;

  transform: translateX(-2.5%);

}

.banner-img.move-active {

  animation: swiperMicroMove 12s ease-in-out forwards;

}

@keyframes swiperMicroMove {

  0% { transform: translateX(-2.5%); }

  100% { transform: translateX(2.5%); }

}



.swiper-text {

  position: absolute;

  left: 16px;

  bottom: 64px;

  color: #fff;

  z-index: 2;

}

@media (min-width:768px) { .swiper-text { left: 32px; } }

@media (min-width:1024px) { .swiper-text { left: 64px; } }

@media (min-width:768px) { .swiper-text h1 { font-size: 30px; margin-bottom: 16px; color: var(--muted-foreground); } }

@media (max-width:767.98px) { .swiper-text h1 { font-size: 20px; margin-bottom: 16px; color: #fff; } }

@media (max-width:767.98px) { .swiper-text p { font-size: 14px; margin-bottom: 16px; color: #fff; } }

@media (min-width:1024px) { .swiper-text h1 { font-size: 40px; margin-bottom: 16px; color: var(--muted-foreground); } }

@media (min-width:768px) {.swiper-text p { font-size: 18px; color: var(--muted-foreground); }}

@media (min-width:1024px){.swiper-text p { font-size: 18px; color: var(--muted-foreground); }}

.swiper-dots {

  position: absolute;

  left: 50%;

  bottom: 32px;

  transform: translateX(-50%);

  display: flex;

  gap: 12px;

  z-index:2;

}

.dot {

  width: 12px;

  height: 12px;

  border: 1px solid rgba(255,255,255,0.6);

  background: transparent;

  cursor: pointer;

  border-radius: 50%;

}

.dot.active {

  background: var(--primary);

  border-color: var(--primary);

}



/* 抽屉菜单第8个导航项（全局统一导航） */

.drawer.open .nav-list a:nth-child(8) {

  transition-delay: 0.66s;

  opacity: 1;

  transform: translateX(0);

  padding-left: 20px;

}