/* 车站牌子样式 */
/* 外文站名样式 */
.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;
}

/* 两侧立柱 - 白灰色水泥材质 */
.pillar {
    position: absolute;
    width: 29px;
    height: 380px;
    z-index: 3;
    border-radius: 4px;
    /* 白灰色水泥基础色 */
    background-color: #c8c8c8;
    /* 自然阴影效果 */
    box-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);
    /* 水泥纹理效果 */
    background-image: 
        radial-gradient(circle at 8px 40px, rgba(255,255,255,0.5) 1px, transparent 2px),
        radial-gradient(circle at 20px 90px, rgba(255,255,255,0.4) 1px, transparent 2px),
        radial-gradient(circle at 12px 150px, rgba(255,255,255,0.5) 1px, transparent 2px),
        radial-gradient(circle at 24px 210px, rgba(255,255,255,0.4) 1px, transparent 2px),
        radial-gradient(circle at 6px 270px, rgba(255,255,255,0.5) 1px, transparent 2px),
        radial-gradient(circle at 18px 320px, rgba(255,255,255,0.4) 1px, transparent 2px),
        radial-gradient(circle at 25px 50px, rgba(150,150,150,0.2) 1px, transparent 2px),
        radial-gradient(circle at 5px 120px, rgba(150,150,150,0.2) 1px, transparent 2px),
        radial-gradient(circle at 22px 180px, rgba(150,150,150,0.2) 1px, transparent 2px),
        radial-gradient(circle at 10px 240px, rgba(150,150,150,0.2) 1px, transparent 2px),
        radial-gradient(circle at 28px 300px, rgba(150,150,150,0.2) 1px, transparent 2px),
        radial-gradient(circle at 15px 350px, rgba(150,150,150,0.2) 1px, transparent 2px),
        /* 垂直水泥纹理 */
        linear-gradient(to right, 
            rgba(255,255,255,0.15) 0%,
            rgba(255,255,255,0.08) 20%,
            transparent 30%,
            rgba(0,0,0,0.05) 70%,
            rgba(0,0,0,0.08) 80%,
            transparent 90%,
            rgba(255,255,255,0.05) 100%);
    background-size: 30px 30px, 30px 30px, 30px 30px, 30px 30px, 30px 30px, 30px 30px,
                    30px 30px, 30px 30px, 30px 30px, 30px 30px, 30px 30px, 30px 30px,
                    100% 100%;
    /* 立柱侧面高光和阴影 */
    border-left: 1px solid rgba(255, 255, 255, 0.5);
    border-right: 1px solid rgba(130, 130, 130, 0.3);
}
    
/* 立柱底部的金属盖 */
.pillar::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 8px;
    background: linear-gradient(to top, 
        #e0e0e0, 
        #c0c0c0);
    border-radius: 0 0 4px 4px;
    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: 8px;
    /* 简洁的金属质感 */
    background: linear-gradient(to bottom, 
        #e0e0e0 0%, 
        #d0d0d0 30%, 
        #c8c8c8 60%, 
        #d0d0d0 100%);
    box-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);
    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: 8px 8px 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 8px 8px;
    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; /* 新增：负top，向上移动（-8px可改，数值越负上移越多） */
    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: center;
    gap: -12px;
    margin-top: 0px;
    padding: 0;
    border-radius: 0;
    border: none;
    box-shadow: none;
    position: relative;
    width: 100%;
    align-items: baseline;
}

/* 站牌中的单个箭头样式 */
.station-sign .arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #333;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8);
    padding: 3px;
    position: relative;
}

/* 站牌中的箭头图标 */
.station-sign .arrow-icon {
    font-size: 32px !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: 18px !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;
    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;
}

/* ========================================================
   站牌箭头两侧站名间距和居中修复 - 独立解决方案
   不改变PHP函数调用，纯CSS实现
   ======================================================== */

/* 针对站牌内部的箭头容器进行优化 */
.station-sign .arrows-container {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: -16px !important; /* 控制左右箭头之间的间距 */
    width: 100% !important;
    position: relative !important;
    margin-top: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* 修复箭头容器的布局 */
.station-sign .arrow {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important;
    height: 30px !important; /* 固定高度确保垂直居中 */
}

/* 强制覆盖箭头两侧站名的内联样式 */
.station-sign .arrow-station {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 75px !important; /* 固定宽度 */
    font-size: 18px !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;
}

/* 针对具体的左右位置进行微调 */
.station-sign .arrow:first-child .arrow-station {
    left: -72px !important;
    right: auto !important;
}

.station-sign .arrow:last-child .arrow-station {
    right: -72px !important;
    left: auto !important;
}

/* 确保箭头图标居中 */
.station-sign .arrow-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 30px !important;
    height: 30px !important;
    line-height: 30px !important;
    text-align: center !important;
    vertical-align: middle !important;
    font-size: 24px !important;
    font-weight: bold !important;
    color: #333 !important;
    text-shadow: 
        1px 1px 1px rgba(0, 0, 0, 0.2),
        -1px -1px 1px rgba(255, 255, 255, 0.8) !important;
    z-index: 5 !important;
    position: relative !important;
}

/* 响应式调整 */
@media (max-width: 768px) {
    .station-sign .arrow-station {
        width: 65px !important;
        font-size: 10px !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;
    }
}

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

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