/*!
 * travel.css —— 旅游组团匹配大厅专属样式（叠加在 hire.css 之上）
 * ---------------------------------------------------------------------------
 * 复用的：.hire-layout / .hire-side-card / .hire-tags / .hire-modal / .hire-mask /
 *        .hire-toast / .hire-wb* / .hire-checks / .pager-v2 …
 * 这里只写旅游特有的：合规横幅、组团卡、报价条、行程信息、侧栏 4 步流程。
 * ⚠️ 网格一律 minmax(0,1fr)：1fr ≡ minmax(auto,1fr)，下限是 min-content，
 *    格子里有 <select>（「不限出发月份」这类长选项）会把整行撑爆。
 * ---------------------------------------------------------------------------
 * 移除方式：删除 travel.html 里对 /assets/travel.css 的引用即可。
 */

/* ===== 首屏合规横幅（红线文案要一眼看到） ===== */
.tr-compliance {
  background: #fff7e6;
  border-top: 1px solid #f0dcb0;
  border-bottom: 1px solid #f0dcb0;
  color: #7a5c17;
  font-size: 13px;
  line-height: 1.85;
  padding: 12px 0;
}
.tr-compliance b { color: #b7791f; }
.tr-compliance .wrap { max-width: 1280px; margin: 0 auto; padding: 0 20px; }

/* ===== 工具条：两行式布局 =====
 * 第一行「视图标签 ←→ 主动作按钮」，第二行「登录 / 额度提示」。
 * ⚠️ 提示**必须**独占一行：#trQuotaHead 的文案会随登录态和剩余次数变长（"登录后可发布组团需求、
 *   查看旅行社联系方式" ≈ 22 字），塞在同一行时会把两个按钮挤到右侧、文案被压着换行，
 *   视觉上像"文字和按钮打架"。拆成两行后主动作按钮的位置**永远稳定**，不随文案长度跳动。
 */
.tr-bar { display: grid; gap: 10px; margin-bottom: 18px; }
.tr-bar-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.tr-bar-acts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tr-bar-note {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--c-ink-light); line-height: 1.5; min-height: 20px;
}
/* 左侧细竖线做视觉锚点，和右侧的主动作按钮在层级上区分开 */
.tr-bar-note > span:first-child { padding-left: 9px; border-left: 2px solid var(--c-line-2); }
/* 「去登录」是次级入口：做成下划线文字链，不再占一个按钮位、不和发布按钮抢注意力 */
.tr-bar-link { color: var(--c-primary); font-weight: 800; white-space: nowrap; border-bottom: 1px solid transparent; transition: border-color .15s; }
.tr-bar-link:hover { border-bottom-color: var(--c-primary); }
/* 提示行整行为空时（理论上不会）不占高度 */
.tr-bar-note:empty { display: none; }

@media (max-width: 640px) {
  /* 移动端：标签一行、两个按钮等分占满一行，视觉更整齐 */
  .tr-bar-top { align-items: stretch; gap: 9px; }
  .tr-bar-acts { width: 100%; }
  .tr-bar-acts .fc-btn { flex: 1 1 0; justify-content: center; padding-left: 10px; padding-right: 10px; }
  #trTabs { max-width: 100%; overflow-x: auto; }
}

/* ===== 筛选栏：6 等分列，关键词与排序共占首行 =====
 * ⚠️ 不要改回「关键词 1.5fr + 固定 px」的老写法，更要保证**列数 = 子元素数**。
 *   本栏容器在 ≥1281px 时恒为 896px（.wrap 1240 − 侧栏 322 − gap 22）。
 *   原先只写了 8 列却有 9 个子元素（关键词 + 4 下拉 + 3 地区 + 排序）：
 *   固定列合计 807px + 8×9px gap = 879px > 872px 可用宽 → 关键词 fr 轨道塌成 0px、
 *   排序控件被甩到第二行第 1 列（正是那条 0 宽的轨道），实测渲染成 10×86px 的竖条。
 * 现在：关键词 span 4、排序 span 2、**三个地区下拉各 span 2**，其余各 1 格
 *   → 3 行：4+1+1 / 1+1+2+2 / 2+2 = 16 格，前两行排满（16 格）。
 *   列宽 (872−45)/6 ≈ 138px，占位文字完整；地区下拉 285px（能放下「新疆维吾尔自治区」需 154px）。
 * ------------------------------------------------------------------------- */
/* 2026-09-13：与 hire.css 一致由 grid 固定列宽改成 flex-wrap，
 * 原因见 hire.css 的 .hire-filters 注释（固定 104px 列会把长省名截断）。
 * 这里只补 travel 特有的两处，其余交给公共的 .hire-filters 规则。 */
.tr-filters #trFilterKeyword { flex: 1 1 300px; min-width: 0; }
.tr-filters #trProdFilterKeyword { flex: 1 1 300px; min-width: 0; }
.tr-filters .hire-sort { flex: 0 0 auto; margin-left: auto; }
/* 出发地三级联动：三格**等宽**（flex:1 1 148px，下限 148px 容得下「新疆维吾尔自治区」146px），
 * 等宽才像一组联动控件；不够宽时整组折到下一行。 */
.tr-filters #trpfilterProv, .tr-filters #trpfilterCity, .tr-filters #trpfilterCounty,
.tr-filters #trpProductProv, .tr-filters #trpProductCity { flex: 1 1 148px; min-width: 0; }
/* 区县未选城市前是 disabled 的占位下拉（保持三格形态一致，不再降级成文本框） */
.tr-filters #trpfilterCounty:disabled, .tr-filters #trpProductCity:disabled { background: #f7f3f0; color: #b3a69c; }
/* ≤640px：一行一个控件（保持 row 方向 + basis 100%，不能用 column——列方向下
   flex-basis 会变成高度，把输入框撑到 300px 高）。ID 选择器与上面的规则同级，
   但本文件在 hire.css 之后加载，所以这里能压住。 */
@media (max-width: 640px) {
  .tr-filters .hire-sort { margin-left: 0; width: 100%; justify-content: center; }
  .tr-filters #trFilterKeyword,
  .tr-filters #trProdFilterKeyword,
  .tr-filters #trpfilterProv, .tr-filters #trpfilterCity, .tr-filters #trpfilterCounty,
  .tr-filters #trpProductProv, .tr-filters #trpProductCity { flex: 1 1 100%; width: 100%; }
}

/* ===== 组团需求卡 ===== */
.tr-need {
  border: 1px solid var(--c-line, #e6d8cf);
  border-radius: 14px;
  background: #fff;
  padding: 16px 18px;
  margin-bottom: 14px;
}
.tr-need-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.tr-need-title { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.tr-need-title b { font-size: 16px; font-weight: 850; color: var(--c-ink, #2f2620); }
.tr-badge { font-size: 11.5px; font-weight: 800; padding: 2px 9px; border-radius: 999px; border: 1px solid #e6d8cf; color: #8a7d72; background: #faf7f4; }
.tr-badge.on { color: #1a7f4b; border-color: rgba(26,127,75,.28); background: #f0fbf5; }
.tr-badge.off { color: #8a6d2f; border-color: rgba(138,109,47,.28); background: #fdf8ec; }
.tr-badge.done { color: #b03021; border-color: rgba(176,48,33,.28); background: #fff4f1; }
.tr-badge.cancel { color: #8a7d72; }
.tr-cat { font-size: 12px; color: #7a6d63; background: #f6f2ee; border-radius: 6px; padding: 2px 8px; }
.tr-need-price { text-align: right; flex: none; }
.tr-need-price b { display: block; font-size: 20px; font-weight: 850; color: var(--c-primary, #c93628); font-variant-numeric: tabular-nums; }
.tr-need-price small { font-size: 11.5px; color: #9a8a80; }
.tr-need-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 10px 0 8px; font-size: 13px; color: #6b5f56; }
.tr-need-desc {
  font-size: 13px; color: #4a4038; background: #faf8f6; border: 1px solid #f0eae4;
  border-radius: 10px; padding: 10px 12px; margin: 8px 0 10px; line-height: 1.75;
}
.tr-need-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; margin-top: 10px; padding-top: 10px; border-top: 1px dashed #eee2d8;
}
.tr-quote-cnt { font-size: 12.5px; color: #8a7d72; }
.tr-quote-cnt b { color: var(--c-primary, #c93628); font-weight: 850; }
.tr-need-btns { display: flex; gap: 8px; flex: none; }

/* ===== 报价条 ===== */
.tr-quotes { display: grid; gap: 10px; }
.tr-quote-row { border: 1px solid var(--c-line, #e6d8cf); border-radius: 12px; background: #fff; padding: 12px 14px; }
.tr-quote-row.winner { border-color: rgba(26,127,75,.4); background: #fbfffc; }
.tr-quote-row.chosen { border-color: rgba(201,54,40,.45); background: #fffaf8; }
.tr-q-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.tr-q-name { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 14px; }
.tr-q-type { font-size: 11.5px; color: #7a6d63; background: #f6f2ee; border-radius: 6px; padding: 1px 7px; }
.tr-q-price { text-align: right; flex: none; }
.tr-q-price b { display: block; font-size: 17px; font-weight: 850; color: var(--c-primary, #c93628); font-variant-numeric: tabular-nums; }
.tr-q-price small { font-size: 11.5px; color: #9a8a80; }
.tr-best { font-size: 11px; font-weight: 850; color: #1a7f4b; background: #eaf8f0; border: 1px solid rgba(26,127,75,.25); border-radius: 999px; padding: 1px 8px; }
.tr-best.chosen { color: #b03021; background: #fff0ec; border-color: rgba(176,48,33,.25); }
.tr-chip.mine { font-size: 11px; color: #3a5a9a; background: #eef3fd; border-radius: 999px; padding: 1px 8px; }
.tr-q-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 8px 0 0; font-size: 12.5px; color: #6b5f56; }
.tr-lic { color: #8a7d72; }
.tr-q-io { margin-top: 8px; font-size: 12.5px; color: #5c5148; display: grid; gap: 3px; }
.tr-q-io b { color: #1a7f4b; margin-right: 6px; font-weight: 850; }
.tr-q-io p { margin: 0; }
.tr-q-brief { margin: 8px 0 0; font-size: 12.5px; color: #5c5148; line-height: 1.7; white-space: pre-wrap; }
.tr-q-locked { margin: 8px 0 0; font-size: 12px; color: #9a8a80; }
.tr-q-contact { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: #3c332c; }
.tr-q-acts { margin-top: 10px; display: flex; justify-content: flex-end; }
.tr-empty-quote { border: 1px dashed var(--c-line, #e6d8cf); border-radius: 12px; padding: 14px; text-align: center; color: #8a7d72; font-size: 13px; }
.tr-empty-quote b { display: block; color: #4a4038; font-size: 13.5px; margin-bottom: 4px; }
.tr-empty-quote p { margin: 0; }

/* ===== 详情弹窗 ===== */
.tr-detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.tr-detail-head b { font-size: 17px; font-weight: 850; color: var(--c-ink, #2f2620); display: block; }
.tr-detail-head span { font-size: 12.5px; color: #8a7d72; }
.tr-detail-price { text-align: right; flex: none; }
.tr-detail-price b { font-size: 20px; font-weight: 850; color: var(--c-primary, #c93628); }
.tr-detail-price small { display: block; font-size: 11.5px; color: #9a8a80; font-weight: 400; }
.tr-kvs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 18px; margin: 14px 0; }
.tr-kv { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; border-bottom: 1px dashed #f0e8e2; padding-bottom: 6px; }
.tr-kv span { color: #8a7d72; flex: none; }
.tr-kv b { color: #3c332c; font-weight: 700; text-align: right; word-break: break-all; }
.tr-h4 { font-size: 13.5px; font-weight: 850; color: var(--c-ink, #2f2620); margin: 16px 0 8px; }
.tr-text { font-size: 13px; color: #4a4038; line-height: 1.8; margin: 0; white-space: pre-wrap; }
@media (max-width: 640px) { .tr-kvs { grid-template-columns: minmax(0, 1fr); } }

/* ===== 联系方式 / 锁定态 ===== */
.tr-locked { border: 1px dashed var(--c-line, #e6d8cf); border-radius: 12px; background: #faf8f6; padding: 14px; text-align: center; }
.tr-locked p { margin: 0 0 6px; font-size: 13px; color: #6b5f56; }
.tr-locked-sub { margin: 0; font-size: 12.5px; color: #9a8a80; }
.tr-notice { font-size: 13.5px; color: #4a4038; line-height: 1.8; margin: 0 0 8px; }
.tr-contact { border: 1px solid rgba(201,54,40,.25); border-radius: 12px; background: #fffaf8; padding: 14px; }
.tr-contact-row { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; padding: 5px 0; border-bottom: 1px dashed #f3e2dc; }
.tr-contact-row:last-of-type { border-bottom: none; }
.tr-contact-row span { color: #8a7d72; }
.tr-contact-row b { color: var(--c-primary, #c93628); font-weight: 850; font-variant-numeric: tabular-nums; }
.tr-contact-note { margin: 10px 0 0; font-size: 12px; color: #9a8a80; line-height: 1.7; }
.tr-disclaim { margin: 16px 0 0; font-size: 12px; color: #9a8a80; line-height: 1.75; border-top: 1px dashed #f0e8e2; padding-top: 10px; }

/* ===== 发布 / 报价表单 ===== */
.tr-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.tr-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tr-field > span { font-size: 12.5px; font-weight: 700; color: #6b5f56; }
.tr-field > span i { color: var(--c-primary, #c93628); font-style: normal; }
.tr-field.wide { grid-column: 1 / -1; }
.tr-field input, .tr-field select, .tr-field textarea {
  width: 100%; min-width: 0; border: 1px solid var(--c-line, #e6d8cf);
  border-radius: 10px; padding: 9px 11px; font-size: 13.5px; color: #3c332c;
  background: #fff; font-family: inherit;
}
.tr-field textarea { resize: vertical; line-height: 1.7; }
.tr-loc { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tr-form-note { margin: 14px 0 0; font-size: 12px; color: #9a8a80; line-height: 1.8; }
.tr-form-note b { color: #6b5f56; }
@media (max-width: 640px) {
  .tr-form { grid-template-columns: minmax(0, 1fr); }
  .tr-loc { grid-template-columns: minmax(0, 1fr); }
}

/* ===== 侧栏：4 步流程 / 热门目的地 ===== */
.tr-flow { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; counter-reset: tr; }
.tr-flow li { position: relative; padding-left: 34px; font-size: 13px; }
.tr-flow li::before {
  counter-increment: tr; content: counter(tr);
  position: absolute; left: 0; top: 1px; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; font-size: 12px; font-weight: 850; color: #fff;
  background: var(--c-primary, #c93628);
}
.tr-flow li b { display: block; font-size: 13px; font-weight: 850; color: var(--c-ink, #2f2620); }
.tr-flow li span { color: #8a7d72; font-size: 12.5px; line-height: 1.6; }
.tr-dests { list-style: none; margin: 0; padding: 0; }
.tr-dests li { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; padding: 8px 0; border-bottom: 1px dashed #f0e8e2; }
.tr-dests li:last-child { border-bottom: none; }
.tr-dests b { color: var(--c-primary, #c93628); font-weight: 850; flex: none; }

/* ===== 我的组团 / 我的报价 ===== */
.tr-mine-sum { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.tr-quota {
  border: 1px solid rgba(201,54,40,.2); border-radius: 12px; background: linear-gradient(180deg, #fff7f3, #fffdfc);
  padding: 12px 14px; display: flex; flex-direction: column; gap: 4px;
}
.tr-quota span { font-size: 12.5px; color: #8a7d72; }
.tr-quota b { font-size: 18px; font-weight: 850; color: var(--c-primary, #c93628); font-variant-numeric: tabular-nums; }
.tr-quota b small { font-size: 12px; color: #9a8a80; font-weight: 400; }
.tr-quota-mini { font-size: 12.5px; color: #8a7d72; }
.tr-need-mine { background: #fffdfc; }
.tr-mine-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.tr-myquotes { display: grid; gap: 10px; }
.tr-myquote {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  border: 1px solid var(--c-line, #e6d8cf); border-radius: 12px; background: #fff; padding: 12px 14px;
}
.tr-myquote.chosen { border-color: rgba(176,48,33,.4); background: #fffaf8; }
.tr-myquote div:first-child b { display: block; font-size: 13.5px; font-weight: 850; color: var(--c-ink, #2f2620); }
.tr-myquote div:first-child span { font-size: 12.5px; color: #8a7d72; }
.tr-myquote-right { text-align: right; display: flex; align-items: center; gap: 8px; }
.tr-myquote-right b { font-size: 16px; font-weight: 850; color: var(--c-primary, #c93628); }
.tr-myquote-right small { font-size: 11.5px; color: #9a8a80; }
@media (max-width: 640px) {
  .tr-mine-sum { grid-template-columns: minmax(0, 1fr); }
  .tr-need-price { text-align: left; }
  .tr-need-head { flex-direction: column; }
}

/* ===== 2026-09-13 新增：旅行社线路产品超市 ===== */
/* 产品卡沿用 .tr-need 的卡片外观，只换外层类名 */
.tr-product {
  border: 1px solid var(--c-line, #e6d8cf); border-radius: 14px; background: #fff;
  padding: 16px 18px; margin-bottom: 14px;
}
.tr-selfcheck { font-style: normal; color: #a3968b; }
.tr-prod-contact { font-size: 12.5px; font-weight: 800; color: var(--c-primary, #c93628); }
/* 价格保密：与「¥面议」区分开，明确告诉用户这是被掩码而不是没报价 */
.tr-q-price.is-locked b { font-size: 13px; color: #9a8a80; }
.tr-q-price.is-locked small { display: block; }
/* 行程标签多选 */
.tr-tagpick { display: flex; flex-wrap: wrap; gap: 8px; }
.tr-tagbtn {
  border: 1px solid var(--c-line, #e6d8cf); background: #fff; color: #6b5f56;
  border-radius: 999px; padding: 6px 13px; font-size: 12.5px; font-weight: 700;
  cursor: pointer; font-family: inherit; white-space: nowrap;
}
.tr-tagbtn:hover { border-color: var(--c-primary, #c93628); color: var(--c-primary, #c93628); }
.tr-tagbtn.on { background: #fff2ef; border-color: var(--c-primary, #c93628); color: var(--c-primary, #c93628); }