/* ==========================================================================
   下单与订单界面样式（order-ui.js 专用）
   ==========================================================================
   单独一个文件的原因：交易相关组件（价格区、下单弹窗、订单表格、运费规则）
   集中在这里，改样式不会影响主站其它页面。
   配色沿用 logo 取色：--navy #163561 / --accent #2E8BC0 / --bg #FAFAF8
   ========================================================================== */

/* ---------------- 弹窗：加宽版（下单 / 订单详情用） ---------------- */
.modal-box.modal-lg { max-width: 920px; width: calc(100% - 40px); }
.modal-body { max-height: 72vh; overflow-y: auto; }

/* ---------------- 产品详情页：价格 + 下单区 ---------------- */
.order-box {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  padding: 18px 18px 16px;
  margin-bottom: 18px;
  box-shadow: 0 2px 10px rgba(14, 34, 68, .04);
}
.order-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.order-price .op-label {
  font-size: 12.5px; color: #fff; background: var(--accent);
  border-radius: 999px; padding: 2px 10px; letter-spacing: .5px;
}
.order-price strong { font-size: 30px; color: var(--navy); font-weight: 800; letter-spacing: -.5px; }
.order-price strong::first-letter { font-size: 20px; }
.order-price em { font-style: normal; color: var(--text-2); font-size: 14px; }
.op-valid { flex: 1 1 100%; font-size: 12.5px; color: var(--text-2); }
.op-valid.is-expired { color: #C0392B; font-weight: 600; }
.order-price-mask {
  display: flex; flex-direction: column; gap: 4px;
  background: var(--light-blue); border-radius: 10px; padding: 14px 16px;
}
.order-price-mask strong { font-size: 17px; color: var(--navy); }
.order-price-mask span { font-size: 13px; color: var(--text-2); }
.order-actions { margin-top: 14px; }
.order-tip { font-size: 12.5px; color: var(--text-2); margin: 10px 0 0; line-height: 1.7; }

/* ---------------- 下单表单 ---------------- */
.of-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.of-field { display: flex; flex-direction: column; gap: 6px; }
.of-field > span { font-size: 13px; color: var(--text-2); font-weight: 600; }
.of-field > span i { color: #C0392B; font-style: normal; }
.of-field input, .of-field select, .of-field textarea {
  width: 100%; box-sizing: border-box; padding: 9px 11px;
  border: 1px solid var(--line); border-radius: 9px; font-size: 14px;
  font-family: inherit; background: #fff; color: var(--text);
}
.of-field input:focus, .of-field select:focus, .of-field textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(46, 139, 192, .12);
}
.of-span2 { grid-column: span 2; }
.of-note { font-size: 12.5px; color: var(--text-2); line-height: 1.75; margin: 10px 0 0; }

/* ---------------- 试算结果 ---------------- */
.quote-box {
  margin-top: 16px; border: 1px dashed var(--line); border-radius: 12px;
  padding: 14px 16px; background: #FCFCFB;
}
.quote-empty { margin: 0; font-size: 13px; color: var(--text-2); }
.quote-error { margin: 0; font-size: 13.5px; color: #C0392B; font-weight: 600; }
.quote-lines > div {
  display: flex; align-items: baseline; gap: 10px;
  padding: 7px 0; border-bottom: 1px dashed #EDEFF2; font-size: 14px;
}
.quote-lines > div:last-child { border-bottom: none; }
.quote-lines span { flex: 0 0 132px; color: var(--text-2); font-size: 13px; }
.quote-lines b { color: var(--navy); font-size: 15.5px; }
.quote-lines em { font-style: normal; color: var(--text-2); font-size: 12.5px; }
.quote-freight-note { font-style: normal; font-size: 12px; color: var(--text-2); margin-left: 4px; }
.quote-lines .quote-total b { font-size: 22px; color: var(--accent); }
.quote-meta { margin: 10px 0 0; font-size: 12.5px; color: var(--text-2); }
.quote-expired { color: #C0392B; margin-left: 8px; }

/* ---------------- 价格确认勾选 ---------------- */
.confirm-line {
  display: flex; align-items: flex-start; gap: 10px; margin-top: 14px;
  padding: 12px 14px; border-radius: 10px; cursor: pointer;
  background: var(--light-blue); font-size: 14px; line-height: 1.6;
}
.confirm-line input { width: 17px; height: 17px; margin-top: 2px; flex: 0 0 auto; }
.confirm-line b { color: var(--navy); }

/* ---------------- 下单成功 ---------------- */
.order-done { text-align: center; padding: 8px 4px; }
.order-done .od-icon {
  width: 54px; height: 54px; line-height: 54px; margin: 0 auto 12px;
  border-radius: 50%; background: #E8F5EC; color: #1E8E4E; font-size: 28px; font-weight: 700;
}
.order-done h3 { margin: 0 0 10px; font-size: 18px; color: var(--navy); }
.order-done h3 b { color: var(--accent); }
.order-done p { margin: 6px 0; font-size: 14px; color: var(--text-2); }
.order-done .od-amount b { font-size: 20px; color: var(--accent); }
.order-done .od-note { font-size: 12.5px; }

/* ---------------- 订单详情 ---------------- */
.order-detail { font-size: 14px; }
.od-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.od-sub { margin: 20px 0 8px; font-size: 14.5px; color: var(--navy); }
.od-amount { color: var(--accent); font-size: 18px; }
.od-voucher { margin: 12px 0; }
.kv-table { width: 100%; border-collapse: collapse; }
.kv-table th, .kv-table td {
  border: 1px solid var(--line); padding: 8px 10px; text-align: left;
  vertical-align: top; font-size: 13.5px; font-weight: 400;
}
.kv-table th { background: #F7F9FB; color: var(--text-2); width: 110px; font-weight: 600; }
.timeline-mini { list-style: none; margin: 0; padding: 0; }
.timeline-mini li {
  position: relative; padding: 0 0 12px 18px; font-size: 13px; color: var(--text);
  border-left: 1px solid var(--line); margin-left: 5px;
}
.timeline-mini li:last-child { border-left-color: transparent; padding-bottom: 0; }
.timeline-mini li::before {
  content: ''; position: absolute; left: -4.5px; top: 5px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--accent);
}
.timeline-mini li span { color: var(--text-2); margin-right: 8px; font-size: 12.5px; }

/* ---------------- 状态标签 ---------------- */
.tag {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: 12px; font-weight: 600; white-space: nowrap;
}
.tag-ok   { background: #E8F5EC; color: #1E8E4E; }
.tag-warn { background: #FDF3E3; color: #B87503; }
.tag-info { background: var(--light-blue); color: #1A5E8A; }
.tag-mute { background: #F0F1F3; color: #6B7480; }

/* ---------------- 后台：筛选标签与表格 ---------------- */
.filter-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0 16px; }
.chip {
  border: 1px solid var(--line); background: #fff; color: var(--text-2);
  border-radius: 999px; padding: 6px 14px; font-size: 13.5px; cursor: pointer;
  font-family: inherit; transition: all .18s;
}
.chip:hover { border-color: var(--accent); color: var(--navy); }
.chip.active { background: var(--navy); border-color: var(--navy); color: #fff; font-weight: 600; }
.empty-box {
  text-align: center; padding: 30px 16px; border: 1px dashed var(--line);
  border-radius: 12px; color: var(--text-2);
}
.empty-box p { margin: 0 0 12px; }
.input-sm { padding: 7px 11px; font-size: 13.5px; border: 1px solid var(--line); border-radius: 9px; }

/* ---------------- 手机端适配 ---------------- */
@media (max-width: 860px) {
  .of-grid { grid-template-columns: 1fr; }
  .of-span2 { grid-column: span 1; }
  .quote-lines span { flex: 0 0 96px; font-size: 12.5px; }
  .quote-lines b { font-size: 14.5px; }
  .order-price strong { font-size: 25px; }
  .modal-box.modal-lg { width: calc(100% - 20px); }
  .kv-table th { width: 84px; }
  .filter-tabs { gap: 6px; }
  .chip { padding: 5px 11px; font-size: 12.5px; }
}