/* ============================================================
   设备界面重绘 — 驿直查查件机
   独立于模板 style.css,仅提供 .device / .scr-* 系列
   ============================================================ */
:root{
  --brand:#f5a11a;
  --brand-d:#ef5f0d;
  --brand-glow:rgba(245,161,26,.3);
  --ease:cubic-bezier(.16,1,.3,1);
  --spring:cubic-bezier(.34,1.56,.64,1);
  --ui-bg:#f1f0f8;
  --ui-card:#fff;
  --ui-tx:#1e2330;
  --ui-tx-2:#6b7280;
  --ui-line:#e2e1ec;
}

.device{
  position:relative;width:100%;max-width:366px;margin:0 auto;
  border-radius:38px;padding:13px;
  background:linear-gradient(168deg,#2b3140,#171b24 42%,#0f1219);
  border:1px solid rgba(255,255,255,.1);
  box-shadow:
    0 42px 80px -28px rgba(12,15,25,.6),
    0 12px 30px -12px rgba(12,15,25,.4),
    inset 0 1px 0 rgba(255,255,255,.14);
}
.device.on-light{box-shadow:0 42px 80px -30px rgba(30,35,55,.42),0 12px 30px -12px rgba(30,35,55,.22),inset 0 1px 0 rgba(255,255,255,.14)}
.device::before{
  content:"";position:absolute;top:7px;left:50%;transform:translateX(-50%);
  width:56px;height:5px;border-radius:3px;background:rgba(255,255,255,.14);
}
.device-scr{border-radius:27px;overflow:hidden;background:var(--ui-bg);color:var(--ui-tx);position:relative}
.device-float{animation:devFloat 6s ease-in-out infinite}
@keyframes devFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}

/* ============================================================
   真机截图屏(v5.8.0 实机截图)
   保留 .device 设备外壳,.device-scr.shot 内放整幅截图;
   .win-kb / .win-set 只露截图的下半屏,用于局部特写
   ============================================================ */
.device-scr.shot{background:#fff;padding:0;aspect-ratio:800/1280}
.device-scr.shot img{
  display:block;width:100%;height:100%;
  object-fit:cover;object-position:50% 0;
  border:0;border-radius:0;
}
.device-scr.shot.win-kb{aspect-ratio:1/0.92}
.device-scr.shot.win-kb img{object-position:50% 100%}
.device-scr.shot.win-set{aspect-ratio:1/0.86}
.device-scr.shot.win-set img{object-position:50% 100%}
/* 只露上半屏:顶部栏 + 输入框 + 平台列表 + 微信扫码取件 */
.device-scr.shot.win-top{aspect-ratio:1/0.9}
.device-scr.shot.win-top img{object-position:50% 0}

@media (max-width:520px){
  .device{max-width:310px;border-radius:32px;padding:11px}
  .device-scr{border-radius:23px}
}


/* ==========================================================================
   模板微调层(本文件最后加载,用于覆盖模板默认值)
   —— 只做"适配中文内容"的修正,不改变模板原有视觉语言
   ========================================================================== */

/* 1) 导航:中文两字词被 padding 挤断成两行 → 禁止换行并收紧间距 */
.topnav .navbar-links li > a,
.navbar-links li > a{white-space:nowrap;line-height:1.2;padding:10px 15px}
.topnav .header-bar{gap:12px}
.topnav .header-bar > a.logo{flex:none}
/* 官方图标是 2x2「驿直查」方形标记，40px 下小字糊成一团 → 提到 52px（.header-bar 本身 110px 高，放得下） */
.topnav .header-bar img{max-width:none;height:52px;width:auto}
/* 移动菜单 / 页脚 logo：显式给高度，避免按 288x130 原始尺寸撑开 */
#mobile-nav .res-log img{height:44px;width:auto;max-width:none}
.copyrights a img{height:46px;width:auto;max-width:none;flex:none}
.copyrights > .d-flex{gap:18px}
@media (max-width:1400px){
  .navbar-links li > a{font-size:15px;padding:10px 11px}
}
@media (max-width:1200px){
  .navbar-links li > a{font-size:14px;padding:10px 9px}
}

/* 2) 按钮/标题里的中文加粗略重,统一压一点字重差异 */
.services h4,.heading h2,.projects-style h4{letter-spacing:0}

/* 3) 结果/参数区在浅色底上给设备加一层柔和投影,避免与背景糊在一起 */
.device.on-light{box-shadow:0 26px 60px -22px rgba(43,18,6,.28),0 0 0 1px rgba(43,18,6,.06)}

/* 4) 手风琴标题里的等宽数字(查件方式/参数项)对齐更整齐 */
.accordion-section .accordion-button{letter-spacing:0}

/* 5) 区块副标题里的补充说明句 */
.heading-note{
  font-size:17px;line-height:1.75;color:#5b6270;font-weight:500;
  margin:12px auto 0;max-width:640px;
}
.heading.two .heading-note{margin-left:0}
@media (max-width:767px){.heading-note{font-size:15px;max-width:100%}}

/* 6) 展示卡图片:
   模板全局 img{object-fit:cover} + owl 的 .owl-item img{width:auto}(优先级更高),
   会让图片按"原始像素宽"渲染并横向溢出(原模板图恰好 400px 宽所以看不出来)。
   这里显式按列宽缩放,并保留高分辨率源图做 2x。 */
.projects .projects-img img,
.owl-carousel .owl-item .projects-img img{width:100%;height:auto;object-fit:fill}
.projects .projects-img figure{overflow:hidden}

/* 7) 页脚版权行:中文在 space-between 里容易折行,给单行 + 窄屏堆叠 */
.copyrights{padding-top:70px;padding-bottom:24px}
.copyrights span,.copyrights p{white-space:nowrap}
@media (max-width:991px){
  .copyrights{flex-direction:column;gap:14px;text-align:center}
  .copyrights span,.copyrights p{white-space:normal}
  .copyrights .boder{display:none}
}


/* ==========================================================================
   9) 还原被模板误伤的"设备截图"
   模板把下面这些容器里的 <img> 当成**自由浮动的装饰图**来对待:
     .hero-one-img img { position:absolute; right:13%; top:9%; animation:animation02 }
       —— animation02 带 rotate(5deg),截图会歪出机身、不在正中（首屏就是这个问题）
     .together-img img { animation: top 7s infinite }
       —— 截图会相对机身上下浮动 15px,像屏幕和机身脱开了
   我们的截图是嵌在机身里的,必须回到普通文档流。
   选择器比模板更具体(0,2,1 > 0,1,1),不用 !important。
   ========================================================================== */
.hero-one-img .device img,
.together-img .device img,
.business-img .device img,
.accordio-img .device img,
.propel-img .device img{
  position:static;left:auto;right:auto;top:auto;bottom:auto;
  animation:none;transform:none;
  width:100%;height:100%;
}

/* ==========================================================================
   10) 联系我们 · 二维码弹窗
   ========================================================================== */
.qr-modal{
  position:fixed;left:0;top:0;right:0;bottom:0;z-index:99999;
  display:none;align-items:center;justify-content:center;padding:26px;
}
.qr-modal.open{display:flex}
.qr-modal-bg{position:absolute;left:0;top:0;right:0;bottom:0;background:rgba(14,10,6,.74)}
.qr-modal-card{
  position:relative;z-index:1;background:#fff;border-radius:22px;padding:16px;
  width:100%;max-width:352px;
  box-shadow:0 34px 78px -22px rgba(0,0,0,.6);
  animation:qrIn .28s cubic-bezier(.2,.8,.3,1);
}
@keyframes qrIn{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:none}}
.qr-modal-card img{display:block;width:100%;height:auto;border-radius:14px;object-fit:contain}
.qr-modal-card p{margin:12px 0 2px;text-align:center;font-size:15px;font-weight:600;color:#4a5162}
.qr-modal-x{
  position:absolute;top:-13px;right:-13px;width:38px;height:38px;border-radius:50%;
  background:#fff;border:0;cursor:pointer;font-size:20px;line-height:1;color:#3a3f4d;
  box-shadow:0 8px 20px -6px rgba(0,0,0,.35);
  display:flex;align-items:center;justify-content:center;padding:0;
}
.qr-modal-x:hover{background:#ef5f0d;color:#fff}
body.qr-open{overflow:hidden}

/* 触发按钮：让 <a> 表现得像按钮,并和模板 .btn 协调 */
a.qr-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer}
.menu-sidebar-single-widget a.qr-btn{margin-top:6px}
footer .qr-cta{display:flex;align-items:center;justify-content:flex-end;padding:28px 0 0}
@media (max-width:991px){
  footer .qr-cta{justify-content:flex-start;padding-top:6px}
}

/* 页脚关键词行（便于搜索收录,视觉上做弱化处理） */
.seo-tags{
  border-top:1px solid rgba(255,255,255,.1);
  margin-top:26px;padding-top:16px;
  font-size:13px;line-height:2;color:rgba(255,255,255,.5);
  text-align:center;letter-spacing:.2px;
}
.seo-tags a{color:rgba(255,255,255,.62)}
.seo-tags a:hover{color:#f5a11a}

@media (max-width:520px){
  .qr-modal{padding:16px}
  .qr-modal-card{max-width:330px;padding:13px}
  .qr-modal-x{top:-10px;right:-4px}
}