/* Google Maps Jump Feature Styles */

/* 脉冲标记点样式 */
.pulse-marker {
  width: 20px;
  height: 20px;
  background-color: rgba(66, 133, 244, 0.8);
  border-radius: 50%;
  border: 2px solid white;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  animation: pulse-animation 2s infinite;
}

/* 谷歌地图标记点样式 */
.google-marker {
  background-color: rgba(66, 133, 244, 0.8); /* 谷歌蓝色 */
  animation: pulse-animation-google 2s infinite;
}

/* 苹果地图标记点样式 */
.apple-marker {
  background-color: rgba(0, 122, 255, 0.8); /* 苹果蓝色 */
  animation: pulse-animation-apple 2s infinite;
}

/* 脉冲动画 - 默认 */
@keyframes pulse-animation {
  0% {
    transform: scale(0.8);
    box-shadow: 0 0 0 0 rgba(66, 133, 244, 0.7);
  }
  70% {
    transform: scale(1.2);
    box-shadow: 0 0 0 10px rgba(66, 133, 244, 0);
  }
  100% {
    transform: scale(0.8);
    box-shadow: 0 0 0 0 rgba(66, 133, 244, 0);
  }
}

/* 脉冲动画 - 谷歌 */
@keyframes pulse-animation-google {
  0% {
    transform: scale(0.8);
    box-shadow: 0 0 0 0 rgba(66, 133, 244, 0.7);
  }
  70% {
    transform: scale(1.2);
    box-shadow: 0 0 0 10px rgba(66, 133, 244, 0);
  }
  100% {
    transform: scale(0.8);
    box-shadow: 0 0 0 0 rgba(66, 133, 244, 0);
  }
}

/* 脉冲动画 - 苹果 */
@keyframes pulse-animation-apple {
  0% {
    transform: scale(0.8);
    box-shadow: 0 0 0 0 rgba(0, 122, 255, 0.7);
  }
  70% {
    transform: scale(1.2);
    box-shadow: 0 0 0 10px rgba(0, 122, 255, 0);
  }
  100% {
    transform: scale(0.8);
    box-shadow: 0 0 0 0 rgba(0, 122, 255, 0);
  }
}

/* 坐标弹出框样式 */
.coords-popup {
  padding: 5px;
  text-align: center;
}

.coords-popup h6 {
  margin-bottom: 8px;
  color: #4285F4;
  font-weight: 600;
}

.coords-popup p {
  margin: 3px 0;
  font-size: 0.9em;
}

/* 来源信息样式 */
.coords-popup .source-info {
  margin-top: 8px;
  font-size: 0.8em;
  color: #777;
  border-top: 1px solid #eee;
  padding-top: 5px;
}

/* 搜索框样式 */
.search-input-wrapper {
  position: relative;
}

/* 为搜索框添加日本电车方向幕效果 */
.search-input.placeholder-rotating {
  position: relative;
  overflow: hidden;
}

/* 创建一个伪元素来显示当前placeholder */
.search-input.placeholder-rotating::placeholder {
  opacity: 0;
}

/* placeholder容器 */
.placeholder-container {
  position: absolute;
  left: 40px;
  top: 0;
  height: 100%;
  width: calc(100% - 80px);
  pointer-events: none;
  overflow: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

/* 自定义placeholder显示元素 */
.placeholder-display {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: #999;
  transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

/* 进入状态 */
.placeholder-display.enter {
  transform: translateY(100%);
  opacity: 0;
}

/* 活跃状态 */
.placeholder-display.active {
  transform: translateY(-50%);
  opacity: 1;
}

/* 离开状态 */
.placeholder-display.leave {
  transform: translateY(-150%);
  opacity: 0;
}

/* 深色模式适配 */
.dark-mode .pulse-marker {
  background-color: rgba(77, 166, 255, 0.8);
}

.dark-mode .google-marker {
  background-color: rgba(77, 166, 255, 0.8);
}

.dark-mode .apple-marker {
  background-color: rgba(64, 156, 255, 0.8);
}

.dark-mode .coords-popup h6 {
  color: #77AAFF;
}

.dark-mode .coords-popup .source-info {
  color: #999;
  border-top-color: #444;
}

/* 深色模式下的placeholder样式 */
.dark-mode .placeholder-display {
  color: #aaa;
}