/* ============================================================
   Inquiry quiz dialog — 4 步选项卡式询盘引导
   依赖 beauty.css 的 :root 变量（--navy / --orange / --line / --muted）
   ============================================================ */

.cq[hidden],
.cq [hidden]{display:none !important}

/* 悬浮入口按钮：滚动一段距离后出现，避免遮挡首屏 */
.cq-fab{
  position:fixed;right:20px;bottom:20px;z-index:70;
  display:none;align-items:center;gap:8px;
  padding:11px 17px;border:0;border-radius:99px;
  background:var(--orange,#e77939);color:#fff;
  font:700 12.5px/1 Arial,sans-serif;letter-spacing:.2px;
  box-shadow:0 10px 26px rgba(231,121,57,.34);
  transition:transform .16s ease,background .16s ease;
}
.cq-fab.is-visible{display:inline-flex}
.cq-fab:hover{background:#d96b2f;transform:translateY(-1px)}
.cq-fab:active{transform:translateY(0)}
.cq-fab svg{flex-shrink:0}

/* 弹窗容器 */
.cq{
  position:fixed;inset:0;margin:auto;
  width:660px;max-width:calc(100vw - 32px);
  max-height:calc(100vh - 40px);
  padding:0;border:0;border-radius:18px;
  background:#fff;color:var(--navy,#152d40);
  box-shadow:0 30px 90px rgba(9,24,38,.38);
  overflow:hidden;
}
.cq[open]{display:flex}
.cq:focus,.cq:focus-visible{outline:none}
.cq::backdrop{background:rgba(16,36,53,.58);backdrop-filter:blur(2px)}
.cq[open]{animation:cq-in .26s cubic-bezier(.2,.8,.3,1) both}
@keyframes cq-in{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}

.cq-shell{display:flex;flex-direction:column;width:100%;max-height:calc(100vh - 40px)}

/* 顶部进度 */
.cq-top{display:flex;align-items:center;gap:12px;padding:16px 18px 0}
.cq-track{flex:1;height:4px;border-radius:99px;background:#edf0f3;overflow:hidden}
.cq-fill{display:block;height:100%;width:25%;border-radius:99px;background:var(--orange,#e77939);transition:width .32s ease}
.cq-count{font-size:10.5px;letter-spacing:.6px;color:#93a0ab;white-space:nowrap;text-transform:uppercase}
.cq-close{
  display:grid;place-items:center;width:28px;height:28px;flex-shrink:0;
  border:0;border-radius:50%;background:#f2f4f6;color:#6c7a86;
  transition:background .15s ease,color .15s ease;
}
.cq-close:hover{background:#e9ecef;color:var(--navy,#152d40)}

/* 内容区 */
.cq-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:20px 24px 14px;-webkit-overflow-scrolling:touch}
.cq-step[hidden]{display:none}
.cq-kicker{margin:0 0 8px;font-size:9.5px;letter-spacing:2px;text-transform:uppercase;font-weight:700;color:#ad693e}
.cq h2{font-size:23px;line-height:1.25;letter-spacing:-.5px;margin:0 0 7px;font-weight:600;color:var(--navy,#152d40)}
.cq-sub{margin:0 0 18px;font-size:12.5px;line-height:1.55;color:#7b8792;max-width:520px}

.cq-grid{display:grid;gap:9px}
.cq-grid-cat{grid-template-columns:repeat(3,minmax(0,1fr))}
.cq-grid-country{grid-template-columns:repeat(2,minmax(0,1fr))}
.cq-grid-list{grid-template-columns:1fr}

/* 选项卡 */
.cq-opt{
  position:relative;display:flex;align-items:center;gap:10px;
  padding:11px 12px;border:1.5px solid #e7ebee;border-radius:10px;
  background:#fff;color:var(--navy,#152d40);
  font:400 12.5px/1.35 Arial,sans-serif;text-align:left;
  transition:border-color .14s ease,background .14s ease,box-shadow .14s ease;
}
.cq-opt:hover{border-color:#f2bd9b;background:#fffaf6}
.cq-opt[aria-pressed="true"]{border-color:var(--orange,#e77939);background:#fff5ee;box-shadow:0 0 0 3px rgba(231,121,57,.13)}
.cq-opt[aria-pressed="true"]::after{
  content:"";position:absolute;top:7px;right:7px;width:15px;height:15px;border-radius:50%;
  background:var(--orange,#e77939) url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center/9px 9px no-repeat;
}

/* 品类卡：图标在上 */
.cq-grid-cat .cq-opt{flex-direction:column;align-items:flex-start;gap:7px;padding:12px 12px 13px;min-height:96px}
.cq-ico{width:42px;height:42px;object-fit:contain;flex-shrink:0}
.cq-grid-cat .cq-opt span{font-size:11.5px;line-height:1.3}
.cq-opt-wide{grid-column:1/-1;flex-direction:row !important;align-items:center !important;min-height:0 !important;gap:9px !important;color:#6b7884;font-size:12px}
.cq-plus{
  display:grid;place-items:center;width:26px;height:26px;flex-shrink:0;
  border-radius:50%;border:1.5px dashed #cfd7de;color:#95a1ac;font-size:15px;line-height:1;
}
.cq-trust{display:flex;flex-wrap:wrap;gap:5px 18px;margin:16px 0 0;font-size:10.5px;color:#93a0ab}
.cq-trust span{display:inline-flex;align-items:center;gap:5px}
.cq-trust span::before{content:"✓";color:#5f9c76;font-weight:700;font-size:10px}

/* 国家卡 */
.cq-country{padding:10px 12px;gap:11px}
.cq-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cq-flag{
  position:relative;display:grid;place-items:center;
  width:27px;height:20px;flex-shrink:0;border-radius:3px;
  background:#eaeef2;overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(21,45,64,.07);
}
.cq-flag img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.cq-cc{font:700 8.5px/1 Arial,sans-serif;color:#8695a1;letter-spacing:.4px}
.cq-flag-any{background:#f2f4f6;color:#95a1ac;font-size:13px;line-height:1}

.cq-searchwrap{position:relative;display:flex;align-items:center;margin-bottom:11px}
.cq-searchwrap svg{position:absolute;left:11px;color:#95a1ac;pointer-events:none}
.cq-search{
  width:100%;height:38px;padding:0 12px 0 33px;
  border:1px solid #e7ebee;border-radius:8px;background:#fafbfc;
  font:400 12.5px/1 Arial,sans-serif;color:var(--navy,#152d40);
}
.cq-search:focus{outline:0;border-color:#f2bd9b;background:#fff}
.cq-search::-webkit-search-cancel-button{-webkit-appearance:none}
.cq-empty{margin:10px 0 0;font-size:11.5px;color:#95a1ac}

/* 数量 / 货期 行 */
.cq-row{justify-content:space-between;padding:13px 14px;font-size:12.5px}
.cq-radio{
  width:16px;height:16px;flex-shrink:0;border-radius:50%;
  border:1.5px solid #d7dee4;background:#fff;
  transition:border-color .14s ease,box-shadow .14s ease;
}
.cq-opt[aria-pressed="true"] .cq-radio{border-color:var(--orange,#e77939);box-shadow:inset 0 0 0 3px var(--orange,#e77939)}
.cq-row[aria-pressed="true"]::after{display:none}

/* 汇总 chip */
.cq-summary{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 18px}
.cq-chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 10px;border-radius:99px;
  background:#f4f7f9;color:#4e5f6d;font-size:11px;line-height:1.3;
}
.cq-chip::before{content:"";width:5px;height:5px;border-radius:50%;background:#b9c4cd;flex-shrink:0}

/* 表单 */
.cq-field{display:block;margin:0 0 12px}
.cq-field>span{display:block;font-size:11px;font-weight:700;letter-spacing:.3px;color:#5c6b78;margin-bottom:6px}
.cq-field em{font-style:normal;font-weight:400;color:#9aa6b1;text-transform:none;letter-spacing:0}
.cq-field input{
  display:block;width:100%;height:44px;padding:0 13px;
  border:1px solid #e2e8ec;border-radius:8px;background:#fff;
  font:400 13.5px/1 Arial,sans-serif;color:var(--navy,#152d40);
}
.cq-field input:focus{outline:0;border-color:var(--orange,#e77939);box-shadow:0 0 0 3px rgba(231,121,57,.12)}
.cq-field input[aria-invalid="true"]{border-color:#d2453c;box-shadow:0 0 0 3px rgba(210,69,60,.1)}
.cq-error{margin:0 0 12px;font-size:11.5px;color:#b3261e}
.cq-submit{
  display:block;width:100%;padding:14px;border:0;border-radius:9px;
  background:var(--orange,#e77939);color:#fff;
  font:700 13.5px/1 Arial,sans-serif;letter-spacing:.2px;
  transition:background .15s ease;
}
.cq-submit:hover{background:#d96b2f}
.cq-submit:disabled{background:#cbb6a9;cursor:default}
.cq-fine{margin:12px 0 0;font-size:10.5px;line-height:1.5;color:#9aa6b1}

/* 成功 */
.cq-done{text-align:center;padding:14px 0 10px}
.cq-tick{
  width:52px;height:52px;margin:0 auto 16px;border-radius:50%;
  display:grid;place-items:center;background:#eaf7ef;color:#1e6b42;
  font-size:24px;line-height:1;
}
.cq-done h2{font-size:22px}
.cq-done .cq-sub{margin-left:auto;margin-right:auto}
.cq-done b{color:var(--navy,#152d40)}
.cq-link{display:inline-block;margin-top:6px;font-size:12.5px;font-weight:700;color:#b76532;border-bottom:1px solid #e6bda3;padding-bottom:2px}

/* 底部 */
.cq-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 24px 15px;border-top:1px solid #f2f4f6}
.cq-back{border:0;background:transparent;color:#7b8792;font:400 11.5px/1 Arial,sans-serif;padding:6px 2px}
.cq-back:hover{color:var(--navy,#152d40)}
.cq-foot-note{margin-left:auto;font-size:10px;letter-spacing:.8px;text-transform:uppercase;color:#b0bcc6}

@media (max-width:620px){
  .cq{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;border-radius:0}
  .cq-shell{max-height:100dvh;height:100dvh}
  .cq-body{display:flex;flex-direction:column;padding:18px 16px 12px}
  .cq-step:not([hidden]){margin:auto 0}
  .cq-top{padding:14px 14px 0}
  .cq h2{font-size:19.5px}
  .cq-sub{font-size:12px;margin-bottom:14px}
  .cq-grid-cat{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cq-grid-country{grid-template-columns:1fr}
  .cq-grid-cat .cq-opt{min-height:104px;justify-content:center;gap:8px}
  .cq-ico{width:44px;height:44px}
  .cq-trust{margin-top:18px;font-size:10px;gap:5px 14px}
  .cq-foot{padding:9px 16px calc(11px + env(safe-area-inset-bottom))}
  .cq-fab{right:14px;bottom:calc(14px + env(safe-area-inset-bottom));padding:11px 15px;font-size:12px}
  .cq-country{padding:11px 12px}
}

@media (prefers-reduced-motion:reduce){
  .cq[open]{animation:none}
  .cq-fill,.cq-opt,.cq-fab{transition:none}
}