/* ==========================================================================
   /dealer/ 经销商页
   按 Figma 节点 768:8414「15 Dealer Location 搜索条件」还原。

   设计基准：画布 1920px，1rem = 100px（见 js/fontSize.js）。
   内容容器 .main 为 16rem = 1600px，与设计图 305~1905 的内容区一致。
   地图区域使用真实 Google 地图（方案 C），其余按设计图尺寸还原。
   ========================================================================== */

/* ---------------------------------------------------------------- 页面容器 */

.dealerPage {
  padding: .44rem 0 1.73rem;
  background-color: #181818;
  background-image: url(../images/search-bg.jpg);
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
}

/* 面包屑 → 标题：设计图间距 32px */
.dealerPage .productBreadcrumb {
  margin-bottom: .32rem;
}

/* ---------------------------------------------------------------- 标题区 */

.dealerHero {
  margin-bottom: .58rem;
  text-align: center;
}

.dealerHero h1 {
  color: #fff;
  font-size: clamp(26px, .58rem, 58px);
  font-weight: 700;
  line-height: 1.5;
}

.dealerHero p {
  margin-top: 0;
  color: #fff;
  font-size: clamp(14px, .18rem, 18px);
  line-height: 1.5;
}

/* -------------------------------------------------------------- 搜索条件栏 */

.dealerSearch {
  display: flex;
  align-items: flex-end;
  width: 100%;
}

.dealerField {
  display: block;
}

/* 字段标题：20px / 行高 30px，与控件间距 8px */
.dealerFieldLabel {
  display: block;
  margin-bottom: .08rem;
  color: #fff;
  font-size: clamp(14px, .2rem, 20px);
  line-height: .3rem;
}

/* 设计图各控件宽度与间距（合计正好 16rem = 容器宽度） */
.dealerFieldLocation {
  position: relative;
  width: 3.43rem;
}

/* 当前「搜索圆心」的回显（点卡片 / 点图钉时出现）。
   绝对定位，避免把搜索栏撑高导致同行其他控件错位。 */
.dealerOriginHint {
  position: absolute;
  left: 0;
  top: 100%;
  margin-top: .06rem;
  max-width: 8rem;
  overflow: hidden;
  color: #ffc500;
  font-size: clamp(11px, .13rem, 13px);
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dealerOriginHint[hidden] {
  display: none;
}

.dealerFieldRadius {
  width: 3rem;
  margin-left: .34rem;
}

.dealerFieldResults {
  width: 3rem;
  margin-left: .47rem;
}

.dealerFieldType {
  width: 2.9rem;
  margin-left: .51rem;
}

.dealerInput {
  display: block;
  width: 100%;
  height: .6rem;
  padding: 0 .19rem;
  border: 1px solid #585858;
  border-radius: .04rem;
  background-color: #262525;
  color: #fff;
  font-family: inherit;
  font-size: clamp(13px, .16rem, 16px);
  line-height: .24rem;
}

.dealerInput::placeholder {
  color: #999;
}

.dealerInput:focus {
  border-color: #fff100;
  outline: 0;
}

/* 设计图三个控件右侧都带 #C8C8C8 箭头（Your Location 为自动补全提示） */
.dealerFieldLocation .dealerInput,
.dealerSelect {
  padding-right: .42rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='10' viewBox='0 0 19 10'%3E%3Cpath d='M1 1l8.5 7.6L18 1' fill='none' stroke='%23C8C8C8' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .12rem center;
  background-size: .19rem .1rem;
}

.dealerSelect {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

.dealerSelect option {
  background: #262525;
  color: #fff;
}

/* -------------------------------------------------------------- Type 复选 */

.dealerTypeRow {
  display: flex;
  align-items: center;
  height: .6rem;
  gap: .44rem;
}

.dealerCheck {
  display: inline-flex;
  align-items: center;
  gap: .08rem;
  cursor: pointer;
}

.dealerCheck input {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
}

/* 未选中：设计图 #EBEBEB 实心方框 */
.dealerCheck i {
  position: relative;
  flex: 0 0 .2rem;
  width: .2rem;
  height: .2rem;
  border-radius: .02rem;
  background: #ebebeb;
  transition: background .2s;
}

/* 选中：设计图 #FFF100，配深色对勾保证可读 */
.dealerCheck input:checked+i {
  background: #fff100;
}

.dealerCheck input:checked+i::after {
  content: "";
  position: absolute;
  left: .056rem;
  top: .03rem;
  width: .085rem;
  height: .042rem;
  border-left: .02rem solid #262525;
  border-bottom: .02rem solid #262525;
  transform: rotate(-45deg);
}

.dealerCheck input:focus-visible+i {
  box-shadow: 0 0 0 2px rgba(255, 241, 0, .5);
}

.dealerCheck em {
  color: #fff;
  font-size: clamp(13px, .16rem, 16px);
  font-style: normal;
  line-height: .24rem;
  white-space: nowrap;
}

/* -------------------------------------------------------------- 搜索按钮 */

.dealerSearchBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .11rem;
  width: 1.6rem;
  height: .6rem;
  margin-left: .75rem;
  border: 0;
  border-radius: .04rem;
  background: #fff100;
  color: #000;
  font-family: inherit;
  font-size: clamp(14px, .18rem, 18px);
  font-weight: 700;
  line-height: .27rem;
  cursor: pointer;
}

.dealerSearchBtn img {
  width: .24rem;
  height: .24rem;
  filter: brightness(0);
}

/* ---------------------------------------------------------- 列表 + 地图区 */

.dealerLocator {
  display: grid;
  grid-template-columns: 3.2rem minmax(0, 12.49rem);
  gap: .31rem;
  margin-top: .74rem;
}

/* 左侧列表：320×860，半透明黑，圆角 20px */
.dealerPanel {
  width: 3.2rem;
  height: 8.6rem;
  border-radius: .2rem;
  background: rgba(0, 0, 0, .5);
  overflow: hidden;
}

.dealerList {
  box-sizing: border-box;
  height: 100%;
  padding: 0rem 0rem .1rem .01rem;
  overflow-y: auto;
}

.dealerList::-webkit-scrollbar {
  width: .05rem;
}

.dealerList::-webkit-scrollbar-track {
  border-radius: .1rem;
  background: #626262;
}

.dealerList::-webkit-scrollbar-thumb {
  border-radius: .1rem;
  background: #9a9a9a;
}

/* 经销商卡片：300 宽，名称 20/24 粗体、地址 16/24、电话 16/21.28 */
.dealerItem {
  width: 100%;
  padding: 0.1rem 0 .245rem .18rem;
  border-bottom: 1px solid #4b4b4b;
  cursor: pointer;
  transition: background .2s;
}

.dealerItem:last-child {
  border-bottom: 0;
}

.dealerItem.active,
.dealerItem:hover {
  background: rgba(255, 241, 0, .06);
}

.dealerItem:focus-visible {
  outline: 0;
  background: rgba(255, 241, 0, .12);
}

/* 卡片名称行：名称 + 距离 */
.dealerItemHead {
  display: flex;
  align-items: baseline;
  gap: .08rem;
}

.dealerItemHead h2 {
  flex: 1 1 auto;
  min-width: 0;
}

/* 距离：仅在存在搜索圆心时渲染 */
.dealerItemDist {
  flex: 0 0 auto;
  color: #ffc500;
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(12px, .15rem, 15px);
  font-weight: 700;
  line-height: .24rem;
  white-space: nowrap;
}

.dealerItem h2 {
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(16px, .2rem, 20px);
  font-weight: 700;
  line-height: .24rem;
}

.dealerItem p {
  display: flex;
  align-items: flex-start;
  gap: .07rem;
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(13px, .16rem, 16px);
  line-height: .24rem;
}

.dealerItemAddr {
  margin-top: .15rem;
}

.dealerItemPhone {
  margin-top: .16rem;
  font-family: "Yu Gothic UI", Arial, Helvetica, sans-serif;
  line-height: .2128rem;
}

.dealerItemIcon {
  flex: 0 0 .18rem;
  width: .18rem;
  height: .18rem;
  margin-top: .03rem;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
}

.dealerIconAddress {
  background-image: url(../images/Address1.svg);
}

.dealerIconPhone {
  background-image: url(../images/phone.svg);
}

.dealerEmpty {
  padding: .24rem .12rem;
  color: rgba(255, 255, 255, .72);
  font-size: clamp(13px, .16rem, 16px);
  line-height: .24rem;
}

/* -------------------------------------------------------------- 地图区域 */

/* 地图外层容器。Google Maps 初始化时会清空自己容器内的全部子元素，
   所以地图提示必须放在 .dealerMap 外面，由本层承载。 */
.dealerMapWrap {
  position: relative;
  width: 12.49rem;
  height: 8.6rem;
}

.dealerMap {
  width: 100%;
  height: 100%;
  border-radius: .2rem;
  background: #ece9dd;
  overflow: hidden;
}

/* 结果提示：贴在地图底部，不遮挡地图主体 */
.dealerMapNotice {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: .16rem;
  max-width: 88%;
  padding: .1rem .18rem;
  transform: translateX(-50%);
  border-radius: .04rem;
  background: rgba(0, 0, 0, .8);
  color: #fff;
  font-size: clamp(12px, .15rem, 15px);
  line-height: 1.4;
  text-align: center;
  pointer-events: none;
}

.dealerMapNotice[hidden] {
  display: none;
}

/* 未选定地点时的警告样式：此时半径不会生效，必须明确提醒用户 */
.dealerMapNoticeWarn {
  background: rgba(255, 197, 0, .95);
  color: #262525;
  font-weight: 700;
}

/* ------------------------------------------------------------------ 地图图钉

   图钉用 OverlayView + DOM 元素渲染，不用 google.maps.Marker：
   新版 Google 地图改用矢量渲染后，旧版 Marker 类在当前环境下创建成功但不参与渲染。
   这里用 OverlayView（与本页地图气泡同一套机制，已验证可用），
   造型、尺寸、层级完全可控，也能精确还原设计图。

   设计图图钉：29.58 × 34.5，#FFC500 主体 + 直径 9.86 的白色圆点，
   锚点为底部尖端，因此用 translate(-50%, -100%) 让尖端对准坐标。
--------------------------------------------------------------------------- */

.dealerPins {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
}

.dealerPin {
  position: absolute;
  left: 0;
  top: 0;
  width: .2958rem;
  height: .345rem;
  padding: 0;
  border: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29.58' height='34.5' viewBox='0 0 29.58 34.5'%3E%3Cpath d='M14.79 0C6.62 0 0 6.62 0 14.79c0 8.17 14.79 19.71 14.79 19.71s14.79-11.54 14.79-19.71C29.58 6.62 22.96 0 14.79 0z' fill='%23FFC500'/%3E%3Ccircle cx='14.79' cy='14.79' r='4.93' fill='%23FFFFFF'/%3E%3C/svg%3E") no-repeat center center;
  background-size: contain;
  cursor: pointer;
  will-change: transform;
}

.dealerPin:hover,
.dealerPin.active {
  z-index: 2;
  filter: drop-shadow(0 0 .04rem rgba(0, 0, 0, .55)) brightness(1.08);
}

.dealerPin:focus-visible {
  outline: .02rem solid #fff;
  outline-offset: .02rem;
}

/* -------------------------------------------------------------- 「您的位置」定位点

   默认进入页面时定位访客位置的独立圆点，与黄色经销商图钉区分。
   蓝色圆点 + 白色描边 + 淡蓝光晕，锚点为圆心，用 translate(-50%, -50%) 对准坐标。
--------------------------------------------------------------------------- */

.dealerUserPin {
  position: absolute;
  left: 0;
  top: 0;
  width: .22rem;
  height: .22rem;
  border: .03rem solid #fff;
  border-radius: 50%;
  background: #4285f4;
  box-shadow: 0 0 0 .04rem rgba(66, 133, 244, .35);
  pointer-events: none;
  will-change: transform;
}

/* 地图气泡：设计图 279×150，白底 #FFC500 描边、黑字 */
.dealerPopup {
  position: absolute;
  box-sizing: border-box;
  width: 2.79rem;
  min-height: 1.5rem;
  padding: .16rem .18rem;
  transform: translate(-50%, -100%) translateY(-.35rem);
  border: 2px solid #ffc500;
  border-radius: .06rem;
  background: #fff;
  box-shadow: 0 .04rem .16rem rgba(0, 0, 0, .25);
  font-family: Arial, Helvetica, sans-serif;
  pointer-events: none;
}

.dealerPopup::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -.12rem;
  width: 0;
  height: 0;
  transform: translateX(-50%);
  border-left: .09rem solid transparent;
  border-right: .09rem solid transparent;
  border-top: .12rem solid #ffc500;
}

.dealerPopup h3 {
  color: #000;
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(15px, .2rem, 20px);
  font-weight: 700;
  line-height: .24rem;
}

.dealerPopup p {
  margin-top: .08rem;
  color: #000;
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(12px, .16rem, 16px);
  line-height: .24rem;
}

/* ---------------------------------------------------------------- 响应式 */

@media (max-width: 768px) {
  .dealerPage {
    padding: .3rem 0 .68rem;
  }

  .dealerPage .productBreadcrumb {
    margin-bottom: .24rem;
  }

  .dealerHero {
    margin-bottom: .3rem;
  }

  .dealerSearch {
    display: block;
  }

  .dealerFieldLocation,
  .dealerFieldRadius,
  .dealerFieldResults,
  .dealerFieldType {
    width: 100%;
    margin: 0 0 .16rem;
  }

  .dealerTypeRow {
    height: auto;
    flex-wrap: wrap;
    gap: .2rem;
  }

  .dealerSearchBtn {
    width: 100%;
    margin: .04rem 0 0;
  }

  .dealerLocator {
    grid-template-columns: 1fr;
    gap: .22rem;
    margin-top: .3rem;
  }

  .dealerPanel {
    width: 100%;
    height: 4.2rem;
  }

  .dealerMapWrap {
    width: 100%;
    height: 4.8rem;
  }

  .dealerPopup {
    width: 2.4rem;
    min-height: 1.2rem;
  }
}