/* ==========================================================================
   房源卡片 / 列表 / 筛选栏 —— 复刻自 base.css + list.css
   所有数值均取自原站 CDN CSS，保证像素级一致
   ========================================================================== */

/* ==========================================================================
   1. 房源卡片 (.pictext)  —— 二手房/出租房/商铺/土地 通用
   ========================================================================== */
.pictext { position: relative; }

.pictext .a_mask {
  position: absolute; left: 0; top: 0; right: 0; bottom: 0;
  z-index: 2;
}

.pictext .flexbox { display: flex; }

/* 缩略图区 */
.pictext .mod_media { position: relative; }
.pictext .mod_media .media_main { position: relative; overflow: hidden; }
.pictext .mod_media .media_main img,
.pictext .mod_media img { width: 100%; border-radius: var(--r-sm); display: block; }

/* 视频角标 */
.pictext .mod_media .video_item {
  position: absolute; left: 0; top: 0; right: 0; bottom: 0;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.pictext .mod_media .video_item .play_video { width: 30px; height: 30px; opacity: .9; }

/* 置顶 / 活动 角标 */
.pictext .mod_media .activity {
  position: absolute; left: 0; top: -4px;
  font-size: var(--fs-sm); color: #fff;
  background: var(--c-price);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  line-height: 20px;
  padding: 0 8px 0 5px;
  z-index: 1;
  max-width: 102px;
  overflow: hidden;
  white-space: nowrap;
}

/* 「您最近浏览过」提示 */
.mod_media .zuijinliulan {
  display: none;
  color: var(--c-text-hint);
  font-size: var(--fs-sm);
  text-align: center;
  margin-top: 4px;
}
.mod_media .zuijinliulan img { display: inline-block; width: 13px; vertical-align: -2px; }
.pictext.viewed .mod_media .zuijinliulan { display: block; }

/* 文本区 */
.pictext .item_list { display: block; flex: 1; padding-left: 15px; overflow: hidden; }

.pictext .item_main {
  font-weight: 700; margin-bottom: 4px;
  line-height: 18px; overflow: hidden;
  font-size: var(--fs-md); color: var(--c-title);
}
.pictext .item_other,
.pictext .item_minor {
  margin-bottom: 4px; line-height: 22px;
  color: var(--c-text); font-size: var(--fs-sm);
}

/* 价格 */
.price_total {
  color: var(--c-price);
  font-size: var(--fs-md);
  font-weight: 600;
  white-space: nowrap;
}
.price_total em { font-style: normal; }
.price_total .unit { font-size: var(--fs-xs); font-weight: 400; }
.unit_price { font-size: var(--fs-xs); color: var(--c-muted); }

/* 标签 */
.tag_box { line-height: 14px; margin-top: 2px; height: 20px; overflow: hidden; }
.tag_box > .tag {
  margin: 0 5px 0 0;
  line-height: 16px;
  vertical-align: top;
  display: inline-block;
  padding: 0 5px;
  background: var(--bg-body);
  color: var(--c-text-weak);
  font-size: 11px;
  border-radius: var(--r-sm);
}

.tagitem {
  display: inline-block;
  width: 42px;
  background-color: var(--c-primary-87);
  border-radius: var(--r-md);
  color: #fff;
  height: 16px; line-height: 16px;
  text-align: center;
  font-size: var(--fs-sm);
  vertical-align: middle;
}
.tagitem.geren { background-color: var(--c-geren); color: #fff; width: 35px; }
.tagitem.ershou { background-color: var(--c-primary-light); }

/* ==========================================================================
   2. 列表容器 (.house_lists)
   ========================================================================== */
.house_lists { background: var(--bg-white); }
.house_lists .mod_cont .pictext {
  padding: var(--page-pad) var(--page-pad) var(--page-pad) 0;
  border-bottom: 1px solid var(--line-card);
}
.house_lists .mod_cont .pictext:last-child { border-bottom: 0; }
.house_lists .mod_media,
.house_lists .mod_media .media_main { width: var(--thumb-w); }
.house_lists .mod_media .media_main { height: 81px; background: var(--bg-body); }

/* 列表页码/条数提示条 */
.list_tips {
  padding: 8px var(--page-pad);
  font-size: var(--fs-sm);
  color: var(--c-text-weak);
  background: var(--bg-white);
  border-bottom: 1px solid var(--line);
}
.list_tips em { color: var(--c-price); }

/* ==========================================================================
   3. 筛选栏 (.hm_filter2) —— 复刻自 list.css
   ========================================================================== */
.hm_filter2 {
  position: sticky; top: 44px; z-index: 55;
  background: var(--bg-white);
  border-bottom: 1px solid var(--line);
}
.hm_filter2 .tab { display: flex; border-bottom: 1px solid var(--line); }
.hm_filter2 .tab li { flex: 1; padding: 9px 0; text-align: center; position: relative; }
.hm_filter2 .tab li a {
  color: var(--c-text-sub);
  font-size: var(--fs-sm);
  display: inline-flex; align-items: center; gap: 3px;
}
.hm_filter2 .tab li.on a { color: var(--c-primary); }
.hm_filter2 .tab li.on::after {
  content: ""; position: absolute; left: 50%; bottom: 0;
  transform: translateX(-50%);
  width: 26px; height: 2px; background: var(--c-primary); border-radius: 1px;
}
/* 下拉箭头 */
.hm_filter2 .tab li .arrow {
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid var(--c-text-weak);
  transition: transform .2s;
}
.hm_filter2 .tab li.on .arrow { border-top-color: var(--c-primary); transform: rotate(180deg); }

/* 排序项（价格旁的下拉） */
.hm_filter2 .sort-wrap { position: relative; }
.hm_filter2 .sort-list {
  display: none;
  position: absolute; right: 0; top: 100%;
  background: var(--bg-white);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
  border-radius: var(--r-md);
  overflow: hidden; min-width: 120px; z-index: 10;
}
.hm_filter2 .sort-list.show { display: block; }
.hm_filter2 .sort-list a {
  display: block; padding: 10px 14px;
  font-size: var(--fs-sm); color: var(--c-text-sub);
  white-space: nowrap;
}
.hm_filter2 .sort-list a.on { color: var(--c-primary); background: #f2fbf7; }

/* 筛选下拉面板 */
.filter-panel {
  display: none;
  background: var(--bg-white);
  position: relative;
}
.filter-panel.show { display: block; }
.filter-panel .inner_parent {
  background: var(--bg-white);
  min-height: 420px;
  display: flex;
}
/* 左侧一级 */
.filter-panel .inner_left {
  width: 40%;
  background: var(--bg-panel);
  max-height: 420px; overflow-y: auto;
}
.filter-panel .inner_left li {
  padding: 13px 16px;
  font-size: var(--fs-sm); color: var(--c-text-sub);
  border-bottom: 1px solid var(--line);
}
.filter-panel .inner_left li.on {
  background: var(--bg-white); color: var(--c-primary); font-weight: 700;
  position: relative;
}
.filter-panel .inner_left li.on::before {
  content: ""; position: absolute; left: 0; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 16px; background: var(--c-primary);
}
/* 右侧二级 */
.filter-panel .inner_child {
  flex: 1;
  padding: 12px;
  max-height: 420px; overflow-y: auto;
  display: flex; flex-wrap: wrap; align-content: flex-start; gap: 8px;
}
.filter-panel .inner_child a {
  min-width: calc(33.33% - 6px);
  text-align: center;
  padding: 8px 4px;
  font-size: var(--fs-sm); color: var(--c-text-sub);
  background: var(--bg-panel);
  border-radius: var(--r-md);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.filter-panel .inner_child a.on {
  background: #e6f3ee; color: var(--c-primary); font-weight: 700;
}

/* 筛选底部「重置 / 确定」 */
.filter-foot {
  display: none;
  position: sticky; bottom: calc(var(--nav-h) + 0px);
  background: var(--bg-white);
  border-top: 1px solid var(--line);
  padding: 10px var(--page-pad);
  gap: 12px;
  z-index: 56;
}
.filter-foot.show { display: flex; }
.filter-foot a {
  flex: 1; height: 40px; line-height: 40px; text-align: center;
  border-radius: var(--r-lg); font-size: var(--fs-md); font-weight: 700;
}
.filter-foot .btn-reset { background: var(--bg-body); color: var(--c-text-sub); }
.filter-foot .btn-ok { background: var(--c-primary); color: #fff; }