/* 车站牌子样式 */
/* 外文站名样式 */
.foreign-name {
    margin-top: 5px;
    font-style: italic;
    color: #ffffff;
    opacity: 0.9;
}

/* 站牌容器样式 */
.railway-station-sign-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px 0;
    padding: 20px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* 站牌容器 - 固定大小 */
.station-sign {
    position: relative;
    width: 280px;
    height: 350px;
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.2));
    transform: scale(0.9);
    transform-origin: center;
}

/* 共同样式变量 */
:root {
    --metal-gradient: linear-gradient(to bottom, 
        #e0e0e0 0%, 
        #d0d0d0 30%, 
        #c8c8c8 60%, 
        #d0d0d0 100%);
    --metal-shadow: 
        0 5px 10px rgba(0, 0, 0, 0.2),
        inset 0 2px 4px rgba(255, 255, 255, 0.6),
        inset 0 -2px 4px rgba(0, 0, 0, 0.12),
        0 0 0 1px rgba(255, 255, 255, 0.2),
        0 0 0 2px rgba(100, 100, 100, 0.15);
    --concrete-gradient: linear-gradient(to bottom, 
        #f0f0f0 0%, 
        #e8e8e8 30%, 
        #e0e0e0 60%, 
        #e8e8e8 100%);
    --concrete-shadow: 
        0 3px 6px rgba(0, 0, 0, 0.25),
        inset 0 2px 3px rgba(255, 255, 255, 0.5),
        inset 0 -2px 3px rgba(0, 0, 0, 0.15);
    --border-radius: 8px;
}

/* 两侧立柱 - 白色水泥材质 */
.pillar {
    position: absolute;
    width: 29px;
    height: 380px;
    z-index: 3;
    border-radius: var(--border-radius);
    /* 白色水泥基础色 */
    background-color: #f5f5f5;
    /* 自然阴影效果 */
    box-shadow: var(--concrete-shadow);
    /* 水泥纹理效果 - 简化版本 */
    background-image: 
        radial-gradient(circle at 8px 40px, rgba(255,255,255,0.6) 1px, transparent 2px),
        radial-gradient(circle at 20px 90px, rgba(255,255,255,0.5) 1px, transparent 2px),
        radial-gradient(circle at 12px 150px, rgba(255,255,255,0.6) 1px, transparent 2px),
        radial-gradient(circle at 24px 210px, rgba(255,255,255,0.5) 1px, transparent 2px),
        radial-gradient(circle at 6px 270px, rgba(255,255,255,0.6) 1px, transparent 2px),
        radial-gradient(circle at 18px 320px, rgba(255,255,255,0.5) 1px, transparent 2px),
        /* 垂直水泥纹理 */
        linear-gradient(to right, 
            rgba(255,255,255,0.2) 0%,
            rgba(255,255,255,0.1) 20%,
            transparent 30%,
            rgba(0,0,0,0.03) 70%,
            rgba(0,0,0,0.05) 80%,
            transparent 90%,
            rgba(255,255,255,0.1) 100%);
    background-size: 30px 30px, 30px 30px, 30px 30px, 30px 30px, 30px 30px, 30px 30px,
                    100% 100%;
    /* 立柱侧面高光和阴影 */
    border-left: 1px solid rgba(255, 255, 255, 0.6);
    border-right: 1px solid rgba(180, 180, 180, 0.3);
}
    
/* 立柱底部的金属盖 */
.pillar::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 8px;
    background: linear-gradient(to top, 
        #f0f0f0, 
        #d8d8d8);
    border-radius: 0 0 var(--border-radius) var(--border-radius);
    z-index: 2;
    box-shadow: 
        0 -1px 2px rgba(0,0,0,0.15),
        inset 0 -1px 1px rgba(255,255,255,0.2);
}

.pillar.left {
    left: -1px;
    top: 0;
}

.pillar.right {
    right: -1px;
    top: 0;
}

/* 中间主体矩形 */
.sign-body {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 260px;
    height: 170px;
    z-index: 2;
    border-radius: var(--border-radius);
    background: var(--metal-gradient);
    box-shadow: var(--metal-shadow);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* 站牌边框光泽效果 */
.sign-body::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(to right, 
        rgba(255, 255, 255, 0.7) 0%, 
        rgba(255, 255, 255, 0.3) 50%, 
        rgba(255, 255, 255, 0.7) 100%);
    border-radius: var(--border-radius) var(--border-radius) 0 0;
    z-index: 2;
}

.sign-body::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(to right, 
        rgba(0, 0, 0, 0.08) 0%, 
        rgba(0, 0, 0, 0.15) 50%, 
        rgba(0, 0, 0, 0.08) 100%);
    border-radius: 0 0 var(--border-radius) var(--border-radius);
    z-index: 2;
}

/* 站牌内容整体容器 */
.content-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 94%;
    height: 90%;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 4px;
    padding: 12px 0;
    box-shadow: 
        inset 0 1px 3px rgba(0, 0, 0, 0.08),
        0 1px 1px rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(220, 220, 220, 0.3);
    position: relative;
    z-index: 1;
}

/* 站牌中的站名 */
.station-sign .station-name {
    font-size: 38px;
    font-weight: 900;
    color: #000;
    letter-spacing: 8px;
    text-indent: 8px;
    text-shadow: 
        1.5px 1.5px 3px rgba(255, 255, 255, 0.8),
        -1px -1px 2px rgba(0, 0, 0, 0.1);
    margin-bottom: -10px;
    position: relative;
    top: -5px;
    white-space: nowrap;
    font-family: "SimHei", "Microsoft YaHei", sans-serif;
    text-align: center;
    width: 100%;
}

/* 站牌中的拼音/英文 */
.station-sign .station-pinyin {
    font-size: 17px;
    color: #222;
    letter-spacing: 1px;
    text-indent: 1px;
    text-transform: uppercase;
    margin-bottom: 10px;
    font-family: Arial, sans-serif;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8);
    position: relative;
    padding: 0;
    white-space: nowrap;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
}

/* 站牌中的箭头组容器 */
.station-sign .arrows-container {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 0;
  margin-top: 0px; /* 再向下微调10px，实现偏上的效果 */
  padding: 0;
  width: 100%;
  overflow: hidden
}

/* 2. 缩小两个箭头的间距（核心）：通过负margin让箭头靠近 */
.station-sign .arrows-container > .arrow {
  /* 左右负margin，数值越大间距越小（可调整，比如-8px/-10px） */
  margin: 0 -4px; 
  /* 锁定箭头容器大小，防止随图标放大而变形 */
  flex-shrink: 0;
  width: auto; /* 容器宽度自适应图标，不额外扩大 */
}

/* 站牌中的单个箭头样式 */
.station-sign .arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    color: #333;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8);
    padding: 3px;
    position: relative;
   /* 锁定容器尺寸，仅承载图标，不额外扩大 */
  width: auto;
  height: auto;
}

/* 站牌中的箭头图标 */
.station-sign .arrow-icon {
    font-size: 28px !important;
    font-weight: bold;
    color: #333;
    text-shadow: 
        1px 1px 1px rgba(0, 0, 0, 0.2),
        -1px -1px 1px rgba(255, 255, 255, 0.8);
    display: inline-block;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    vertical-align: middle;
}

/* 站牌中箭头两侧的站名 */
.station-sign .arrow-station {
    position: absolute;
    font-size: 20px !important;
    color: #333;
    white-space: nowrap;
    font-family: "SimHei", "Microsoft YaHei", sans-serif;
    font-weight: bold;
    text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.8); 
    z-index: 10;
    vertical-align: middle;
}

/* 站牌编号 */
.sign-number {
    position: absolute;
    bottom: 8px;
    right: 10px;
    font-size: 10px;
    color: #666;
    font-family: Arial, sans-serif;
    letter-spacing: 1px;
    opacity: 0.7;
}

/* 地面阴影 */
.ground-shadow {
    position: absolute;
    bottom: -12px;
    left: 50%;
    transform: translateX(-50%);
    width: 280px;
    height: 10px;
    background: radial-gradient(ellipse at center, 
        rgba(0, 0, 0, 0.2) 0%, 
        transparent 70%);
    border-radius: 50%;
    z-index: 1;
    filter: blur(2px);
}

/* 站牌标签 */
.station-label {
    position: absolute;
    top: 8px;
    left: 10px;
    font-size: 11px;
    color: #666;
    font-family: Arial, sans-serif;
    letter-spacing: 1px;
    opacity: 0.6;
}

/* 拼音名称保持绿色 */
.pinyin-name {
    color: #27ae60;
}

/* 站牌箭头两侧站名间距和居中修复 */
.station-sign .arrow-station {
    position: absolute !important;
    top: 60% !important;
    transform: translateY(-50%) !important;
    width: 75px !important;
    font-size: 17px !important;
    color: #333 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.2 !important;
    padding: 2px 3px !important;
    margin: 0 !important;
    z-index: 10 !important;
    font-family: "SimHei", "Microsoft YaHei", sans-serif !important;
    font-weight: bold !important;
    text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.8) !important;
    box-sizing: border-box !important;
}

/* 左侧站名 */
.station-sign .arrow-station[style*="left:"] {
    left: -75px !important;
    right: auto !important;
    text-align: right !important;
}

/* 右侧站名 */
.station-sign .arrow-station[style*="right:"] {
    right: -75px !important;
    left: auto !important;
    text-align: left !important;
}

/* 确保站牌整体居中 */
.railway-station-sign-container {
    display: flex !important;
    justify-content: center 
    align-items: center !important;
    width: 100% !important;
    overflow: visible !important;
}

/* 响应式调整 */
@media (max-width: 768px) {
    .station-sign .arrow-station {
        width: 65px !important;
        font-size: 16px !important;
    }
    
    .station-sign .arrow-station[style*="left:"] {
        left: -65px !important;
    }
    
    .station-sign .arrow-station[style*="right:"] {
        right: -65px !important;
    }
    
    .station-sign .arrows-container {
        gap: 12px !important;
    }
}

/* 防止站名过长时的溢出问题 */
.station-sign .arrow-station {
    max-width: 80px !important;
    min-width: 60px !important;
    word-break: keep-all !important;
}