
/* ===== 拼车列表视觉增强层 pcx-ui (2026-10-07) ===== */
/* 注意：只改装饰属性（颜色/阴影/圆角/动画），绝不改布局属性，避免破坏列表绝对定位 */

/* 1) 条目：微妙阴影层次 + 按压反馈 */
.pcx-item{background:#fff;-webkit-transition:background-color .18s ease;transition:background-color .18s ease;}
.pcx-item:active{background:#f7f9fb;}
.pcx-item .pcx_item{-webkit-tap-highlight-color:rgba(0,0,0,.03);}

/* 2) 分隔线：更柔和，右侧略缩进 */
.pcx-item{border-bottom:1px solid #f0f2f5;}

/* 3) 类型标签：轻微阴影与更好的字距 */
.pcx-item .pcx-tab{-webkit-box-shadow:0 1px 2px rgba(0,0,0,.12);box-shadow:0 1px 2px rgba(0,0,0,.12);letter-spacing:.5px;}
.pcx-item .pcx-tab.pcx-top{-webkit-box-shadow:0 2px 5px rgba(229,57,53,.32);box-shadow:0 2px 5px rgba(229,57,53,.32);}

/* 4) 徽章：更精致的圆角与底色 */
.pcx-item .pcx-badge{
  background:rgba(255,152,0,.07);
  -webkit-border-radius:5px;border-radius:5px;
  border-color:rgba(245,124,0,.55);
}

/* 5) 拨号按钮：柔和阴影 + 按压下沉 */
.pcx-item .pcx-dial{
  -webkit-box-shadow:0 2px 7px rgba(255,152,0,.34);box-shadow:0 2px 7px rgba(255,152,0,.34);
  -webkit-transition:-webkit-transform .14s ease, box-shadow .14s ease;
  transition:transform .14s ease, box-shadow .14s ease;
}
.pcx-item .pcx-dial:active{
  -webkit-transform:scale(.94);transform:scale(.94);
  -webkit-box-shadow:0 1px 3px rgba(255,152,0,.3);box-shadow:0 1px 3px rgba(255,152,0,.3);
}
.pcx-item .pcx-dial.pcx-gray{-webkit-box-shadow:none;box-shadow:none;}

/* 6) 线路：字重与行高微调（不改布局） */
.pcx-item .pcx-route{line-height:1.5;}
.pcx-item .pcx-via{opacity:.85;}

/* 7) 备注：更小更淡 */
.pcx-item .pcx-note{color:#a3aab3;}

/* ===== 动效：入场 / 涟漪 / 进度条 / 骨架屏 ===== */
@-webkit-keyframes pcxRise{from{opacity:0;-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0);}to{opacity:1;-webkit-transform:none;transform:none;}}
@keyframes pcxRise{from{opacity:0;-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0);}to{opacity:1;-webkit-transform:none;transform:none;}}

.pcx-in{-webkit-animation:pcxRise .42s cubic-bezier(.22,.61,.36,1) both;animation:pcxRise .42s cubic-bezier(.22,.61,.36,1) both;}

/* 图片渐显 */
.pcx-media{-webkit-animation:pcxFade .5s ease both;animation:pcxFade .5s ease both;}
@-webkit-keyframes pcxFade{from{opacity:0}to{opacity:1}}
@keyframes pcxFade{from{opacity:0}to{opacity:1}}

/* 顶部滚动进度条（fixed，注意不要给 its 父级加 transform） */
#pcx-bar{
  position:fixed;top:0;left:0;height:2.5px;width:100%;z-index:9999;
  background:linear-gradient(90deg,#0f7bf6,#10b7a5);
  -webkit-transform:scaleX(0);transform:scaleX(0);
  -webkit-transform-origin:0 50%;transform-origin:0 50%;
  pointer-events:none;
}

/* 骨架屏 shimmer */
.pcx-skeleton{padding:12px 16px;background:#fff;border-bottom:1px solid #f0f2f5;}
.pcx-skeleton .pcx-sk-line{height:13px;-webkit-border-radius:6px;border-radius:6px;background:#eef1f4;position:relative;overflow:hidden;}
.pcx-skeleton .pcx-sk-line + .pcx-sk-line{margin-top:9px;}
.pcx-skeleton .pcx-sk-line.w60{width:60%}
.pcx-skeleton .pcx-sk-line.w40{width:40%}
.pcx-skeleton .pcx-sk-line::after{
  content:"";position:absolute;top:0;left:0;right:0;bottom:0;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.75),rgba(255,255,255,0));
  -webkit-animation:pcxShimmer 1.25s infinite;animation:pcxShimmer 1.25s infinite;
}
@-webkit-keyframes pcxShimmer{from{-webkit-transform:translateX(-100%);transform:translateX(-100%)}to{-webkit-transform:translateX(100%);transform:translateX(100%)}}
@keyframes pcxShimmer{from{-webkit-transform:translateX(-100%);transform:translateX(-100%)}to{-webkit-transform:translateX(100%);transform:translateX(100%)}}

/* 点击涟漪 */
.pcx-ripple{
  position:absolute;-webkit-border-radius:50%;border-radius:50%;
  background:rgba(15,123,246,.22);pointer-events:none;z-index:1;
  -webkit-transform:scale(0);transform:scale(0);
  -webkit-animation:pcxRipple .55s ease-out forwards;animation:pcxRipple .55s ease-out forwards;
}
@-webkit-keyframes pcxRipple{to{-webkit-transform:scale(1);transform:scale(1);opacity:0}}
@keyframes pcxRipple{to{-webkit-transform:scale(1);transform:scale(1);opacity:0}}

@media (prefers-reduced-motion: reduce){
  .pcx-in,.pcx-media,.pcx-skeleton .pcx-sk-line::after,.pcx-ripple{-webkit-animation:none !important;animation:none !important;}
  .pcx-item,.pcx-dial{-webkit-transition:none !important;transition:none !important;}
}
/* ===== end pcx-ui ===== */

/* ===== pcx-ui fix (20261007u2) 对比度与细节 ===== */
.pcx-item .pcx-note{color:#8a939e;}
.pcx-item .pcx-car{color:#6c757d;}
.pcx-item .pcx-badge{display:inline-block;vertical-align:top;}
.pcx-item .pcx-badge.pcx-empty{display:none !important;}
/* ===== end ===== */

/* ===== pcx route-top (20261008r3) 标签+路线同行(inline 文字流)，路线大字（车找人） ===== */
.pcx-item .pcx-route{display:inline;font-weight:700;}
.pcx-item .pcx-route-top{font-size:17px;line-height:1.7;font-weight:800;color:#111;}
.pcx-item .pcx-route-top .pcx-arrow{margin:0 3px;font-weight:800;color:#111;}
.pcx-item .pcx-route-top .pcx-via{font-size:12.5px;font-weight:400;}
.pcx-item .pcx-r1{line-height:2;}
.pcx-item .pcx-tab{vertical-align:middle;}
/* ===== end route-top ===== */

/* ===== pcx date-level (20261008d1) 出发时间分级：每天 / 今天 / 明天 / 后天 / 大后天 / 具体日期 / 已过期 ===== */
.pcx-item .pcx-meta .pcx-tm__every{color:#e53935;}
.pcx-item .pcx-meta .pcx-tm__d0{color:#e5341a;}
.pcx-item .pcx-meta .pcx-tm__d1{color:#176fe0;}
.pcx-item .pcx-meta .pcx-tm__d2{color:#2d93cf;}
.pcx-item .pcx-meta .pcx-tm__d3{color:#5aa0c8;}
.pcx-item .pcx-meta .pcx-tm__later{color:#5b6b7c;}
.pcx-item .pcx-meta .pcx-tm__later .pcx-day{margin-right:3px;}
.pcx-item .pcx-meta .pcx-tm__past{color:#a3abb4;font-weight:400;}
.pcx-item .pcx-meta .pcx-tm__past .pcx-day{margin-right:3px;}
/* ===== end date-level ===== */
