/* ===================== Order Tracking 页面样式 ===================== */
:root{
  --ot-blue:#1668b4;
  --ot-blue-dark:#0f4c86;
  --ot-orange:#ff8a00;
  --ot-text:#2a3542;
  --ot-light:#8896a6;
  --ot-line:#e8edf3;
}
.order-page{background:#fff;color:var(--ot-text);font-family:"Segoe UI",Roboto,Arial,"PingFang SC",sans-serif;}

/* 查询区（与下方内容同宽对齐，视觉重心上移） */
.order-page .hero{text-align:center;padding:clamp(30px,4vw,52px) clamp(16px,3vw,32px) clamp(16px,2.2vw,28px);max-width:1220px;margin:0 auto;box-sizing:border-box;}
.order-page .hero h1{font-size:clamp(22px,2.2vw,30px);font-weight:600;letter-spacing:.3px;line-height:1.25;}
.order-page .hero p{margin-top:clamp(6px,1vw,10px);font-size:clamp(13px,1.1vw,15px);color:var(--ot-light);}
.order-page .search-box{margin:clamp(16px,2.2vw,26px) auto 0;width:100%;max-width:min(680px,100%);display:flex;align-items:center;border:1.5px solid #d7dfe8;border-radius:28px;overflow:hidden;background:#fafcfe;transition:border-color .2s,box-shadow .2s,background .2s;box-sizing:border-box;}
.order-page .search-box:focus-within{border-color:var(--ot-blue);background:#fff;box-shadow:0 0 0 4px rgba(22,104,180,.08),0 6px 20px rgba(22,104,180,.08);}
.order-page .search-box .search-ico{display:flex;align-items:center;justify-content:center;flex:0 0 auto;padding-left:clamp(14px,2vw,24px);color:#9aa9b8;transition:color .2s;}
.order-page .search-box:focus-within .search-ico{color:var(--ot-blue);}
.order-page .search-box .search-ico svg{width:clamp(17px,1.4vw,19px);height:clamp(17px,1.4vw,19px);}
.order-page .search-box input{flex:1 1 auto;border:0;outline:0;background:transparent;padding:clamp(12px,1.4vw,16px) 12px;font-size:clamp(14px,1.1vw,15px);color:var(--ot-text);min-width:0;}
.order-page .search-box input::placeholder{color:#aab6c4;}
.order-page .search-box button{display:flex;align-items:center;justify-content:center;gap:7px;flex:0 0 auto;border:0;background:var(--ot-blue);color:#fff;font-size:clamp(13px,1vw,14px);font-weight:600;padding:0 clamp(16px,2vw,28px);height:clamp(38px,3.2vw,44px);margin:6px;border-radius:24px;cursor:pointer;transition:background .2s,box-shadow .2s,transform .12s;white-space:nowrap;}
.order-page .search-box button:hover{background:var(--ot-blue-dark);box-shadow:0 4px 14px rgba(15,76,134,.28);}
.order-page .search-box button:active{transform:scale(.97);}
.order-page .search-box .btn-ico{width:16px;height:16px;}

/* 空输入提示 */
.order-page .empty-tip{display:none;margin:14px auto 0;font-size:13px;color:#e05656;}

/* 编号展示 */
.order-page code{font-family:Consolas,Menlo,monospace;background:none;padding:0;}
.order-page .otag{color:var(--ot-orange);font-weight:600;font-size:12.5px;}
.order-page .row .value.code{font-family:Consolas,Menlo,monospace;color:inherit;}

/* 时间轴（精致交互版，流式自适应） */
.order-page .stage{text-align:center;margin-top:clamp(26px,3vw,40px);padding:0 clamp(12px,2vw,24px);}
.order-page .stage .tag{display:inline-block;font-size:clamp(12.5px,1.1vw,14.5px);color:var(--ot-orange);background:#fff6ea;border:1px solid #ffe3bd;border-radius:22px;padding:clamp(5px,.6vw,7px) clamp(16px,2vw,24px);box-shadow:0 2px 8px rgba(255,138,0,.08);max-width:100%;box-sizing:border-box;overflow-wrap:break-word;}
.order-page .timeline{display:flex;justify-content:center;align-items:flex-start;margin:clamp(26px,3vw,42px) auto 0;max-width:1220px;position:relative;box-sizing:border-box;}
.order-page .timeline::before{content:"";position:absolute;top:8.5px;left:calc(100% / (var(--ot-steps,6) * 2));right:calc(100% / (var(--ot-steps,6) * 2));height:5px;border-radius:5px;background:#eaeff5;}
/* 已完成段：纯品牌蓝实线（全部已完成，无渐变），橙色只属于当前节点 */
.order-page .done-line{position:absolute;top:8.5px;left:calc(100% / (var(--ot-steps,6) * 2));height:5px;border-radius:5px;background:#1668b4;box-shadow:0 2px 8px rgba(22,104,180,.18);transition:width 1s cubic-bezier(.22,.61,.36,1);}
/* 推进虚线：当前节点→下一节点之间，向右流动表示流程正在推进（位置/宽度由控制器按节点计算输出，最后节点无下一程故不显示） */
.order-page .transit-line{position:absolute;top:9.5px;height:3px;border-radius:3px;background:repeating-linear-gradient(90deg,#b9c9dc 0 8px,transparent 8px 16px);animation:ot-flow 2.4s linear infinite;}
@keyframes ot-flow{to{background-position-x:16px}}
.order-page .step{position:relative;z-index:1;text-align:center;flex:1 1 0;min-width:0;padding:0 2px;animation:ot-rise .55s cubic-bezier(.22,.61,.36,1) both;}
.order-page .step:nth-child(2){animation-delay:.05s}
.order-page .step:nth-child(3){animation-delay:.1s}
.order-page .step:nth-child(4){animation-delay:.15s}
.order-page .step:nth-child(5){animation-delay:.2s}
.order-page .step:nth-child(6){animation-delay:.25s}
.order-page .step:nth-child(7){animation-delay:.3s}
@keyframes ot-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.order-page .step .dot{width:22px;height:22px;border-radius:50%;margin:0 auto;background:#fff;border:2px solid #d3dde8;position:relative;display:flex;align-items:center;justify-content:center;box-sizing:border-box;transition:transform .28s cubic-bezier(.34,1.56,.64,1),box-shadow .28s,border-color .28s,background .28s;}
.order-page .step:hover .dot{transform:scale(1.16);border-color:#b6c5d6;}
.order-page .step.done .dot{background:linear-gradient(135deg,#2f86cc,#1668b4);border-color:#1668b4;box-shadow:0 0 0 5px rgba(22,104,180,.12),0 2px 6px rgba(22,104,180,.22);}
.order-page .step.done .dot::before{content:"✓";color:#fff;font-size:12px;font-weight:700;line-height:1;}
.order-page .step.current .dot{background:radial-gradient(circle at 50% 50%,#fff 3.4px,#ff8a00 3.6px);border-color:var(--ot-orange);box-shadow:0 0 0 6px rgba(255,138,0,.14),0 3px 12px rgba(255,138,0,.3);transform:scale(1.08);}
.order-page .step.current:hover .dot{transform:scale(1.2);}
.order-page .step.current .dot::after{content:"";position:absolute;inset:-7px;border-radius:50%;border:2px solid var(--ot-orange);animation:ot-pulse 1.8s ease-out infinite;}
@keyframes ot-pulse{0%{transform:scale(.6);opacity:.9}100%{transform:scale(1.75);opacity:0}}
.order-page .step .name{font-size:clamp(11px,1.05vw,14px);margin-top:clamp(10px,1.2vw,16px);color:#b9c5d1;font-weight:500;letter-spacing:.2px;line-height:1.35;transition:color .25s,transform .25s;display:block;overflow-wrap:break-word;}
.order-page .step.done .name{color:var(--ot-text);}
.order-page .step.current .name{color:var(--ot-orange);font-weight:600;}
.order-page .step:hover .name{color:#5b6b7c;}
.order-page .step.current:hover .name{color:var(--ot-orange);}

/* 减少动效偏好：关闭动画，保留最终态 */
@media (prefers-reduced-motion:reduce){
  .order-page .step{animation:none;}
  .order-page .step.current .dot::after{animation:none;opacity:.45;}
  .order-page .done-line{transition:none;}
  .order-page .transit-line{animation:none;}
}

/* 卡片：两张并排（窄屏自动堆叠） */
.order-page .cards{display:flex;gap:clamp(16px,2vw,28px);justify-content:center;max-width:1220px;margin:clamp(28px,3.4vw,44px) auto clamp(22px,2.6vw,34px);padding:0 clamp(16px,3vw,32px);flex-wrap:wrap;box-sizing:border-box;}
.order-page .card{flex:1 1 340px;min-width:0;border:1px solid var(--ot-line);border-radius:14px;background:#fff;padding:clamp(20px,2.2vw,32px) clamp(18px,2.4vw,34px);box-shadow:0 2px 10px rgba(40,70,110,.04);box-sizing:border-box;}
.order-page .card h3{font-size:clamp(15px,1.3vw,18px);font-weight:600;margin-bottom:6px;display:flex;align-items:center;gap:10px;}
.order-page .card h3::before{content:"";flex:0 0 auto;width:4px;height:clamp(15px,1.4vw,18px);background:var(--ot-blue);border-radius:2px;}
.order-page .rows{margin-top:clamp(10px,1.2vw,14px);}
.order-page .row{display:flex;justify-content:space-between;align-items:baseline;gap:clamp(10px,1.4vw,16px);padding:clamp(10px,1.1vw,14px) 0;border-bottom:1px solid #f2f5f8;font-size:clamp(13.5px,1.05vw,15.5px);}
.order-page .row:last-child{border-bottom:0;}
.order-page .row .label{flex:0 0 auto;color:var(--ot-light);white-space:nowrap;}
.order-page .row .value{min-width:0;font-weight:600;text-align:right;overflow-wrap:break-word;word-break:break-word;}
.order-page .row .value.empty{color:#c3ced9;font-weight:400;}
/* 外部跟踪链接（提单号）：品牌蓝 + 常驻↗图标即可识别，不加下划线（hover 时出现作为强化反馈） */
.order-page .row .value a.ext-link{display:inline-flex;align-items:center;gap:5px;color:var(--ot-blue);font-weight:600;text-decoration:none;transition:color .2s;}
.order-page .row .value a.ext-link .lk-ico{flex:0 0 auto;opacity:.75;transition:transform .2s,opacity .2s;}
.order-page .row .value a.ext-link:hover{color:var(--ot-blue-dark);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px;}
.order-page .row .value a.ext-link:hover .lk-ico{transform:translate(2px,-2px);opacity:1;}
.order-page .row .value a.ext-link:focus-visible{outline:2px solid var(--ot-blue);outline-offset:3px;border-radius:2px;}

/* 未找到 / 限流提示 */
.order-page .notfound{max-width:min(520px,calc(100% - 32px));margin:clamp(24px,3vw,40px) auto;padding:clamp(22px,3vw,34px) clamp(18px,3vw,24px);text-align:center;border:1px solid var(--ot-line);border-radius:12px;box-sizing:border-box;min-height:170px;display:flex;flex-direction:column;justify-content:center;}
.order-page .notfound h3{font-size:clamp(15px,1.3vw,16px);margin-bottom:8px;}
.order-page .notfound p{font-size:clamp(12.5px,1vw,13px);color:var(--ot-light);line-height:1.7;}
.order-page .notfound a{color:var(--ot-blue);font-weight:600;}

/* 客户名下在途订单列表（按客户查询时多条结果） */
.order-page .order-list{max-width:1220px;margin:clamp(14px,1.6vw,20px) auto 0;padding:0 clamp(16px,3vw,32px);display:flex;flex-direction:column;gap:clamp(8px,.8vw,12px);box-sizing:border-box;}
.order-page .order-item{display:flex;align-items:center;justify-content:space-between;gap:clamp(10px,1.4vw,24px);padding:clamp(14px,1.4vw,18px) clamp(16px,1.8vw,24px);border:1px solid var(--ot-line);border-radius:12px;background:#fff;text-decoration:none;transition:border-color .2s,box-shadow .2s,transform .2s;}
.order-page .order-item:hover{border-color:var(--ot-blue);box-shadow:0 6px 18px rgba(22,104,180,.10);transform:translateY(-1px);}
.order-page .oi-left{display:flex;flex-direction:column;gap:4px;min-width:0;}
.order-page .oi-no{font-size:clamp(13.5px,1.15vw,15.5px);color:var(--ot-text);letter-spacing:.3px;font-weight:600;}
.order-page .oi-sub{font-size:clamp(11.5px,.95vw,12.5px);color:var(--ot-light);overflow-wrap:break-word;}
.order-page .oi-right{display:flex;align-items:center;gap:clamp(8px,1vw,14px);flex:0 0 auto;}
.order-page .oi-stage{font-size:clamp(11.5px,.95vw,12.5px);font-weight:600;color:#c47c17;background:rgba(255,138,0,.10);border:1px solid rgba(255,138,0,.28);padding:4px 10px;border-radius:20px;white-space:nowrap;}
.order-page .oi-eta{font-size:clamp(11.5px,.95vw,12.5px);color:var(--ot-light);white-space:nowrap;}
.order-page .oi-arrow{color:#b9c5d1;font-size:18px;line-height:1;}
.order-page .order-item:hover .oi-arrow{color:var(--ot-blue);}
.order-page .list-note{text-align:center;font-size:clamp(12px,1vw,13px);color:var(--ot-light);margin:clamp(10px,1.2vw,14px) 0 0;padding:0 16px;}
.order-page .list-note a{color:var(--ot-blue);text-decoration:none;font-weight:600;}
@media (max-width:768px){
  .order-page .order-list{padding:0 14px;gap:10px;}
  .order-page .order-item{padding:14px;align-items:flex-start;}
  .order-page .oi-right{flex-direction:column;align-items:flex-end;gap:6px;}
  .order-page .oi-arrow{display:none;}
}

/* 底部帮助 */
.order-page .help{text-align:center;font-size:clamp(12.5px,1vw,13.5px);color:var(--ot-light);padding:14px 16px clamp(28px,3vw,46px);}
.order-page .help a{color:var(--ot-blue);text-decoration:none;font-weight:600;}

/* ---------- 结果区高度：未输入态 = 提示卡态（同一公式推导，恒等，无跳变） ---------- */
/* 提示卡高度固定 170px（内容居中，文字换行也不再变高），预留值 = 卡片高度 + 上下外边距（同一 clamp 表达式） */
.order-page .result-area{display:flex;flex-direction:column;min-height:calc(170px + 2 * clamp(24px,3vw,40px));}

/* ---------- 响应式：平板 ---------- */
@media (max-width:1024px){
  .order-page .card{flex:1 1 46%;}
  .order-page .step .name{font-size:12.5px;}
}

/* ---------- 响应式：手机 / 竖屏 ---------- */
@media (max-width:768px){
  .order-page .hero{padding:clamp(20px,4vw,32px) 16px clamp(14px,2.4vw,20px);}
  .order-page .hero h1{font-size:22px;}
  .order-page .hero p{font-size:13px;}
  .order-page .search-box{max-width:100%;border-radius:24px;}
  .order-page .search-box .search-ico{padding-left:16px;}
  .order-page .search-box .search-ico svg{width:17px;height:17px;}
  .order-page .search-box input{padding:12px 10px;font-size:14px;}
  .order-page .search-box button{padding:0 16px;height:38px;margin:5px;border-radius:20px;font-size:13px;gap:5px;}
  .order-page .search-box .btn-ico{width:14px;height:14px;}
  .order-page .stage{margin-top:24px;}
  .order-page .timeline{flex-wrap:wrap;gap:20px 0;margin-top:24px;padding:0 10px;}
  .order-page .timeline::before,.order-page .timeline .done-line,.order-page .timeline .transit-line{display:none;}
  .order-page .step{flex:0 0 33.333%;padding:0 4px;}
  .order-page .step .dot{width:20px;height:20px;}
  .order-page .step .name{font-size:12px;margin-top:10px;}
  .order-page .cards{flex-direction:column;gap:16px;padding:0 14px;margin-top:24px;}
  .order-page .card{flex:1 1 auto;width:100%;padding:20px 18px;border-radius:12px;}
  .order-page .card h3{font-size:15.5px;}
  .order-page .row{font-size:14px;padding:11px 0;gap:10px;}
}

/* ---------- 响应式：小屏手机 ---------- */
@media (max-width:400px){
  .order-page .hero h1{font-size:20px;}
  .order-page .step .name{font-size:11px;}
  .order-page .step .dot{width:18px;height:18px;}
  .order-page .card{padding:16px 14px;}
  .order-page .row{font-size:13px;}
  .order-page .search-box button{padding:0 14px;}
}