/*!
 * xq.css —— 相亲对象匹配大厅专属样式（叠加在 hire.css 之上）
 * ---------------------------------------------------------------------------
 * 复用 hire.css 里已有的：.hire-layout / .hire-filters / .hire-side-card /
 * .hire-tags / .hire-tag / .hire-modal / .hire-mask / .hire-toast / .pager-v2 …
 * 这里只写相亲特有的：性别头像、匹配度环、卡片网格、条件多选、联系方式块。
 * ⚠️ 网格一律 minmax(0,1fr)：1fr ≡ minmax(auto,1fr)，下限是 min-content，
 *    格子里有 <select>（最长选项「内蒙古自治区」）会把整行撑爆（本站踩过 4 次）。
 * ---------------------------------------------------------------------------
 * 移除方式：删除 xq.html 里对 /assets/xq.css 的引用即可。
 */

/* ===== 横幅里的隐私说明卡 =====
 * ⚠️ 这张卡原来是给**深色横幅**写的：半透明白底 + #ffd25a 琥珀标题 + #e6e6ee 近白正文。
 *   但本站横幅是 .page-banner 的米色浅底（linear-gradient(160deg,#fffaf2,#f8f1e6,#fdf1e5)），
 *   于是「半透明底 + 近白字」直接糊成一片 —— 实拍正文几乎读不出来。
 *   现在按浅色主题重做：暖白实底 + 琥珀左竖线 + 深色正文。实测 --c-ink-soft(#665b51)
 *   压在 #fffdf9 上对比度 **6.5:1**，远高于 4.5:1 可读线，正文 12.5px 也够清晰；
 *   锁定图标与标题同色，视觉层级清楚。**修复前**是 #e6e6ee 压在 #fffaf2 米色上，仅 **1.19:1**
 *   —— 等于看不见（两处对比度均为实测值，别再凭感觉改这两个色）。
 */
.xq-banner-note {
  background: #fffdf9;
  border: 1px solid #eddfc6;
  border-left: 3px solid #d9a13a;
  border-radius: 12px;
  padding: 14px 16px 15px;
  max-width: 384px;
  box-shadow: 0 1px 2px rgba(38, 33, 29, .04);
  font-size: 12.5px;
  line-height: 1.78;
}
.xq-banner-note b {
  display: flex; align-items: center; gap: 6px;
  color: #8a6116; font-size: 13px; font-weight: 900; margin-bottom: 7px;
}
.xq-banner-note p { color: var(--c-ink-soft); }
.xq-banner-note p b { display: inline; color: var(--c-ink); font-weight: 800; }
@media (max-width: 640px) {
  /* ≤640 横幅改为竖排（.hire-banner-in 变 column），卡片要跟着铺满，别缩成 384px 孤零零一块 */
  .xq-banner-note { max-width: 100%; }
}

/* ===== 筛选栏：6 等分列，关键词与排序共占首行 =====
 * ⚠️ 不要改回「关键词 1.6fr + 固定 px」的老写法。
 *   本栏容器在 ≥1281px 时恒为 896px（.wrap 1240 − 侧栏 322 − gap 22），
 *   8 个控件的固定列合计 807px + 7×9px gap = 870px，只剩 2px 留给 1.6fr
 *   → 关键词的 fr 轨道被压成 0px，输入框溢出叠到下一个下拉上（截图里搜索框整个消失）；
 *   而 1025~1280px 两栏并存时容器还会缩到 641~896px，固定列更撑不住。
 *   根因：minmax(0, Npx) 的下限是 0，合计一超容器浏览器不换行、只把每列压到 0。
 * 现在：关键词 span 4、排序 span 2、**三个地区下拉各 span 2**，其余各 1 格
 *   → 3 行：4+1+1 / 2+2+2 / 1+2 = 15 格。地区三连恰好独占一整行，便于级联选择。
 *   列宽 (872−45)/6 ≈ 138px，足够渲染「不限性别」「不限资产」等完整占位文字；
 *   地区下拉 285px（能放下「新疆维吾尔自治区」需 154px，138px 会切掉末尾）。
 * ------------------------------------------------------------------------- */
/* 筛选栏布局已统一到 hire.css 的 `.hire-filters`（flex + wrap）。
   ⚠️ 不要在这里再写 grid-template-columns / grid-column:span —— 基类是 flex，
   这些声明会 inert。地区下拉靠 `flex: 0 1 auto` 按内容自适应（最长省名 146px），
   等分列方案在窄屏会截断省名。 */
.xq-filters .hire-sort { justify-self: start; }
/* ≤640px：一行一个控件（保持 row 方向 + basis 100%）。本文件在 hire.css 之后加载。 */
@media (max-width: 640px) {
  .xq-filters .hire-sort { margin-left: 0; width: 100%; justify-content: center; }
  .xq-filters #xqFilterKeyword { flex: 1 1 100%; width: 100%; }
  .xq-filters > select { flex: 1 1 100%; width: 100%; }
}

/* ===== 卡片网格 ===== */
.xq-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}
@media (max-width: 860px) { .xq-grid { grid-template-columns: minmax(0, 1fr); } }

.xq-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--c-line, #e3d9cf);
  border-radius: var(--radius, 14px);
  padding: 16px 16px 14px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.xq-card-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.xq-avatar {
  width: 42px; height: 42px; flex: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 17px; color: #fff;
  background: linear-gradient(135deg, #c93628, #e2645a);
}
.xq-avatar.f { background: linear-gradient(135deg, #b3457f, #e07aa8); }
.xq-card-id { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.xq-card-id b { font-size: 16px; color: var(--c-ink, #26211d); }
.xq-card-id span { font-size: 12px; color: #8b8178; }

/* 匹配度 / 热度环（右上角） */
.xq-score {
  position: absolute; top: 12px; right: 12px;
  width: 50px; height: 50px; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border: 2px solid #e3d9cf; background: #fdfaf6; line-height: 1.05;
}
.xq-score b { font-size: 16px; color: #c93628; }
.xq-score small { font-size: 9px; color: #8b8178; }
.xq-score.hot { border-color: #e0cfa8; background: #fdf8ee; }
.xq-score.hot b { color: #b7791f; }
.xq-score.mid b { color: #d97706; }
.xq-score.low b { color: #6b7280; }

.xq-card-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: #6b6560; }
.xq-card-meta b { color: var(--c-ink, #26211d); }

.xq-expect {
  font-size: 13px; color: #4b453f; line-height: 1.65;
  background: #faf7f3; border-radius: 10px; padding: 9px 11px; min-height: 52px;
}
.xq-expect i { font-style: normal; color: #a89c90; margin-right: 6px; font-size: 12px; }

.xq-card-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap;
  border-top: 1px dashed var(--c-line, #e3d9cf); padding-top: 10px;
}
.xq-counts { display: flex; gap: 12px; font-size: 12px; color: #8b8178; }
.xq-card-acts { display: flex; gap: 8px; }
.xq-card-acts .fc-btn { padding: 6px 14px; font-size: 13px; }

.hire-badge.mutual { background: #fde8f1; color: #b3457f; }

/* ===== 我的相亲卡 ===== */
.xq-mycard { margin-top: 14px; max-width: 620px; }
.xq-mycard .xq-card { border-color: #e8b7c8; box-shadow: 0 6px 20px rgba(179, 69, 127, .09); }

/* ===== 详情弹窗 ===== */
.xq-detail-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.xq-detail-head > div { display: flex; flex-direction: column; }
.xq-detail-head b { font-size: 18px; }
.xq-detail-head span { font-size: 12px; color: #8b8178; }
.xq-kvs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; margin-bottom: 12px; }
.xq-kv { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; border-bottom: 1px dotted var(--c-line, #e3d9cf); padding-bottom: 5px; }
.xq-kv span { color: #8b8178; }
.xq-h4 { font-size: 14px; margin: 14px 0 6px; color: var(--c-ink, #26211d); }
.xq-text { font-size: 13px; line-height: 1.75; color: #4b453f; white-space: pre-wrap; }

.xq-locked {
  border: 1px dashed #e0cfa8; background: #fdf8ee;
  border-radius: 12px; padding: 14px; text-align: center;
}
.xq-locked p { font-size: 13px; color: #8a6d1f; }
.xq-locked-sub { font-size: 12px; color: #9a928a; margin-top: 6px; }

.xq-contact { border: 1px solid #cfe3d0; background: #f4fbf4; border-radius: 12px; padding: 14px; }
.xq-contact-row { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; padding: 5px 0; }
.xq-contact-row span { color: #6b8b6d; font-size: 13px; }
.xq-contact-row b { color: #1d6b25; letter-spacing: .5px; }
.xq-contact-note { font-size: 12px; color: #7a927c; margin-top: 8px; }

.xq-notice { font-size: 14px; line-height: 1.8; color: #4b453f; }
.xq-lv-list { margin: 10px 0 0 18px; font-size: 13px; line-height: 2; color: #4b453f; }
.xq-lv-list b { color: var(--c-primary, #c93628); }

/* ===== 发布表单 ===== */
.xq-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 640px) { .xq-form { grid-template-columns: minmax(0, 1fr); } }
.xq-field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.xq-field.wide { grid-column: 1 / -1; }
.xq-field > span { color: #6b6560; }
.xq-field > span i { color: #c93628; font-style: normal; }
.xq-field input[type="text"], .xq-field input[type="number"], .xq-field input[type="tel"],
.xq-field select, .xq-field textarea {
  width: 100%; padding: 9px 11px; border: 1px solid var(--c-line, #e3d9cf);
  border-radius: 10px; font-size: 14px; font-family: inherit; background: #fff; color: var(--c-ink, #26211d);
}
.xq-field textarea { resize: vertical; line-height: 1.7; }
.xq-loc { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 480px) { .xq-loc { grid-template-columns: minmax(0, 1fr); } }
.hire-checks { display: flex; flex-wrap: wrap; gap: 8px; }
.xq-form-note { font-size: 12px; color: #8b8178; line-height: 1.8; margin-top: 12px; }
.xq-form-note b { color: #6b6560; }

.xq-disclaim { font-size: 12px; color: #9a928a; line-height: 1.7; margin-top: 14px; }
.xq-disclaim b { color: #c93628; }