/* =========================================================================
 * 58-house.css —— 家政维修（58 到家 · 本地服务）复刻
 * 基准：真机 411dp 宽截图（480px 截图 / 1.168 = dp），尺寸注释即 dp
 * 依赖：58-tokens.css、58-job.css（预约面板复用 .j58-sheet*）
 * ========================================================================= */

.page--hk58 { background: #fff; }
.page--hk58 .page__scroll { background: #fff; }
.page--hk58 button { font-family: inherit; }

.hk58-i { width: 16px; height: 16px; display: block; flex: 0 0 auto; }

/* ---------------- 头部（绿色渐变 + 竹叶装饰） ---------------- */
.hk58-top {
  position: relative;
  flex: 0 0 auto;
  padding-top: 2px;
  background: linear-gradient(180deg, #E2F8EC 0%, #EBFAF2 54%, #F5FDF9 100%);
  overflow: hidden;
}

/* 竹叶：纯装饰，用极轻的径向渐变模拟真机的春日插画 */
.hk58-leaves {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.hk58-leaves i {
  position: absolute;
  border-radius: 60% 10% 60% 10%;
  background: linear-gradient(140deg, rgba(133, 208, 168, .55), rgba(133, 208, 168, 0));
}
.hk58-leaves i:nth-child(1) { top: -14px; right: -10px; width: 96px; height: 46px; transform: rotate(-18deg); }
.hk58-leaves i:nth-child(2) { top: 26px; right: 26px; width: 64px; height: 26px; transform: rotate(24deg); opacity: .8; }
.hk58-leaves i:nth-child(3) { top: -6px; left: -18px; width: 78px; height: 34px; transform: rotate(14deg); opacity: .55; }

.hk58-nav {
  position: relative;
  display: flex;
  align-items: center;
  height: 44px;
  padding: 0 12px;
}
.hk58-back {
  width: 26px;
  height: 32px;
  padding: 0;
  border: 0;
  background: none;
  color: #1B2B24;
  display: flex;
  align-items: center;
}
.hk58-back__i { width: 21px; height: 21px; }
.hk58-nav__ghost { width: 26px; flex: 0 0 auto; }

/* 地址选择：居中标题 16/600 + 下三角 */
.hk58-addr {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0;
  border: 0;
  background: none;
}
.hk58-addr span {
  font-size: 16px;
  font-weight: 600;
  color: #16241D;
  letter-spacing: .2px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.hk58-addr i {
  flex: 0 0 auto;
  width: 0;
  height: 0;
  margin-top: 3px;
  border-left: 4.2px solid transparent;
  border-right: 4.2px solid transparent;
  border-top: 5px solid #16241D;
}

/* 搜索行：白底胶囊 + 橙色搜索按钮 */
.hk58-searchrow {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 1px 12px 9px;
}
.hk58-search {
  flex: 1 1 auto;
  min-width: 0;
  height: 36px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  border-radius: 18px;
  background: #fff;
  color: #9AA6A0;
  box-shadow: 0 2px 8px rgba(21, 106, 74, .07);
}
.hk58-search__ph { font-size: 14px; color: #8C9A93; }
.hk58-search__go {
  flex: 0 0 auto;
  height: 32px;
  padding: 0 18px;
  border: 0;
  border-radius: 16px;
  background: linear-gradient(120deg, #FF8A34, #FF5A1A);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(255, 96, 26, .26);
}
.hk58-search__go:active { background: linear-gradient(120deg, #FF7A22, #F04C10); }

/* 热词 chips：横向滚动 */
.hk58-chips {
  display: flex;
  gap: 8px;
  padding: 0 12px 10px;
  overflow-x: auto;
}
.hk58-chips::-webkit-scrollbar { height: 0; }
.hk58-chip {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 2px;
  height: 30px;
  padding: 0 12px;
  border: .5px solid #D6EDE0;
  border-radius: 15px;
  background: #fff;
  font-size: 12.5px;
  color: #333;
  white-space: nowrap;
}
.hk58-chip.is-on {
  border-color: #FFD9C7;
  background: #FFF6F1;
  color: #FF552E;
  font-weight: 600;
}
.hk58-chip__fire { font-size: 10px; font-style: normal; }

/* ---------------- hero：春日 banner + 4 特惠卡 ---------------- */
.hk58-hero {
  padding: 0 10px 12px;
  background: linear-gradient(180deg, #F5FDF9 0%, #EEFBF5 34%, #FFFFFF 100%);
}
.hk58-hero__title {
  padding: 4px 0 9px;
  text-align: center;
}
.hk58-hero__title span {
  display: inline-block;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: 1px;
  color: #24794F;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .9);
}

.hk58-promos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
}
.hk58-promo {
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 3px 10px rgba(24, 110, 78, .1);
  display: flex;
  flex-direction: column;
}
.hk58-promo:active { transform: scale(.97); }
.hk58-promo__img {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 62px;
  background: linear-gradient(180deg, #F3FBF6, #FFFFFF);
}
.hk58-promo__img img { width: 46px; height: 46px; object-fit: contain; }
.hk58-promo__foot {
  display: block;
  padding: 5px 4px 6px;
  color: #fff;
  text-align: center;
}
.hk58-promo__foot b {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.25;
}
.hk58-promo__foot em {
  display: block;
  margin-top: 1px;
  font-size: 9.5px;
  font-style: normal;
  line-height: 1.2;
  opacity: .95;
  transform: scale(.98);
}
.hk58-promo--mint .hk58-promo__foot { background: linear-gradient(160deg, #45D2A4, #10A277); }
.hk58-promo--rose .hk58-promo__foot { background: linear-gradient(160deg, #FF9EAA, #FF5E73); }
.hk58-promo--amber .hk58-promo__foot { background: linear-gradient(160deg, #FFC279, #FF8A34); }
.hk58-promo--peach .hk58-promo__foot { background: linear-gradient(160deg, #FFB58F, #FF7748); }

/* ---------------- 25 宫格 ---------------- */
.hk58-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  row-gap: 15px;
  padding: 14px 4px 18px;
  background: #fff;
}
.hk58-cell {
  padding: 0;
  border: 0;
  background: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
.hk58-cell__ico {
  position: relative;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hk58-cell__ico img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.hk58-cell__badge {
  position: absolute;
  top: -3px;
  right: -8px;
  height: 13px;
  padding: 0 4px;
  border-radius: 6.5px;
  background: linear-gradient(120deg, #FF6B4A, #FF3B22);
  color: #fff;
  font-style: normal;
  font-size: 9px;
  line-height: 13px;
}
.hk58-cell__badge.is-official { background: linear-gradient(120deg, #46D6A2, #12A16F); }
.hk58-cell__name {
  font-size: 12px;
  line-height: 1.2;
  color: #333;
  white-space: nowrap;
}
.hk58-cell:active .hk58-cell__ico { transform: scale(.94); }

/* ---------------- 特惠服务 / 当季热销 ---------------- */
.hk58-feats {
  display: flex;
  gap: 10px;
  padding: 2px 10px 4px;
  background: #fff;
}
.hk58-feat {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 10px;
  border: 0;
  border-radius: 11px;
  background: #F6F8F7;
  text-align: left;
}
.hk58-feat--warm { background: #FEF7F2; }
.hk58-feat__title { font-size: 14px; font-weight: 700; color: #111; }
.hk58-feat__body {
  display: flex;
  align-items: flex-end;
  gap: 4px;
}
.hk58-feat__txt { flex: 1 1 auto; min-width: 0; padding-bottom: 2px; }
.hk58-feat__txt b {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #1B2B24;
  line-height: 1.25;
}
.hk58-feat__txt em {
  display: block;
  margin-top: 2px;
  font-size: 10.5px;
  font-style: normal;
  color: #8A9691;
  line-height: 1.3;
}
.hk58-feat__img { flex: 0 0 auto; }
.hk58-feat__img img { width: 46px; height: 46px; object-fit: contain; display: block; }
.hk58-feat__act { display: flex; align-items: center; gap: 6px; }
.hk58-feat__tag {
  font-style: normal;
  font-size: 9.5px;
  line-height: 15px;
  padding: 0 5px;
  border-radius: 3px;
  background: #E7F8F0;
  color: #17A673;
}
.hk58-feat--warm .hk58-feat__tag { background: #FFEAE0; color: #FF552E; }
.hk58-feat__btn {
  font-style: normal;
  font-size: 9.5px;
  line-height: 17px;
  padding: 0 9px;
  border-radius: 9px;
  background: linear-gradient(120deg, #48D6A6, #13A473);
  color: #fff;
  font-weight: 600;
}
.hk58-feat--warm .hk58-feat__btn { background: linear-gradient(120deg, #FF9250, #FF5223); }

.hk58-end {
  /* 底部留白避开中间凸起的「到家VIP」按钮 */
  padding: 18px 0 30px;
  background: #fff;
  text-align: center;
  font-size: 11px;
  color: #C0C0C0;
}

/* ---------------- 到家版底栏 ---------------- */
.hk58-tabbar {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  height: 56px;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: #fff;
  border-top: .5px solid #EFEFEF;
}
.hk58-tab {
  position: relative;
  padding: 0;
  border: 0;
  background: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: #9AA3A0;
}
.hk58-tab .hk58-i { width: 22px; height: 22px; }
.hk58-tab.is-on { color: #FF552E; }
.hk58-tab.is-on .hk58-tab__label { font-weight: 600; }
.hk58-tab__label { font-size: 10px; line-height: 1.1; }

.hk58-tab--fab { justify-content: flex-start; }
.hk58-tab__fab {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-top: -13px;
  border-radius: 50%;
  background: linear-gradient(150deg, #FFE7B6, #FFC24D 62%, #FF9F2B);
  box-shadow: 0 4px 10px rgba(255, 168, 40, .34);
  color: #8A4A00;
}
.hk58-tab__fab .hk58-i { width: 23px; height: 23px; }
.hk58-tab--fab .hk58-tab__label { margin-top: 1px; color: #8A5A12; }

/* ---------------- 预约单 ---------------- */
.hk58-bk-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  padding: 12px;
  border-radius: 10px;
  background: linear-gradient(120deg, #EFFBF5, #F8FEFB);
}
.hk58-bk-ico {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: #fff;
}
.hk58-bk-ico img { width: 34px; height: 34px; object-fit: contain; }
.hk58-bk-main { flex: 1 1 auto; min-width: 0; }
.hk58-bk-main b { display: block; font-size: 16px; color: #111; }
.hk58-bk-main span { display: block; margin-top: 2px; font-size: 11.5px; color: #7E8B85; }
.hk58-bk-price { flex: 0 0 auto; font-style: normal; font-size: 16px; font-weight: 700; color: #FF552E; }

.hk58-bk-block {
  margin-top: 14px;
  padding-top: 11px;
  border-top: .5px solid #F2F2F2;
}
.hk58-bk-block > b {
  display: block;
  margin-bottom: 7px;
  font-size: 13.5px;
  color: #111;
}
.hk58-bk-li {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 0 0 6px;
  font-size: 12.5px;
  line-height: 1.5;
  color: #555;
}
.hk58-bk-li .hk58-i { width: 14px; height: 14px; margin-top: 1px; color: #23C993; }

.hk58-bk-slots { display: flex; flex-wrap: wrap; gap: 8px; }
.hk58-slot {
  height: 31px;
  padding: 0 12px;
  border: .5px solid #E8E8E8;
  border-radius: 15.5px;
  background: #F7F8FA;
  font-size: 12.5px;
  color: #444;
}
.hk58-slot.is-on {
  border-color: #FF552E;
  background: #FFF2EF;
  color: #FF552E;
  font-weight: 600;
}

.hk58-bk-sheet .j58-sheet__foot { margin-top: 18px; }
.hk58-bk-sheet .btn {
  flex: 1 1 0;
  height: 42px;
  border-radius: 21px;
  font-size: 15px;
  font-weight: 600;
}