/* =========================================================
 * style.css —— 早产月嫂介绍小程序样式
 * 风格：温馨母婴主题，暖粉色 / 米色系，圆角卡片，移动端优先
 * ========================================================= */

/* ---------- 主题变量 ---------- */
:root {
  --pink: #e8627f;          /* 主色：暖粉 */
  --pink-deep: #d84a6a;     /* 主色加深 */
  --pink-soft: #fdeef1;     /* 粉色浅底 */
  --cream: #fdf6ef;         /* 米色背景 */
  --gold: #f0b06a;          /* 点缀暖金 */
  --text: #4a3f3c;          /* 主文字 */
  --text-2: #8a7a75;        /* 次级文字 */
  --line: #f0e2dc;          /* 分割线 */
  --ok: #3fa97c;            /* 待岗-绿 */
  --busy: #ee9b3e;          /* 在岗-橙 */
  --done: #9aa0a6;          /* 已下户-灰 */
  --shadow: 0 2px 10px rgba(150, 100, 80, .08);
}

* { -webkit-tap-highlight-color: transparent; }

html, body { margin: 0; padding: 0; }

body {
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  background: #f2e7dd;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

/* 移动端优先：内容容器限宽居中，桌面浏览时两侧留白 */
.app {
  max-width: 640px;
  margin: 0 auto;
  min-height: 100vh;
  background: var(--cream);
  box-shadow: 0 0 30px rgba(120, 80, 60, .10);
  position: relative;
}

[hidden] { display: none !important; }

/* ==================== 首页 · 品牌介绍区 ==================== */
.hero {
  position: relative;
  overflow: hidden;
  padding: 26px 20px 24px;
  border-radius: 0 0 28px 28px;
  background: linear-gradient(135deg, #f9c9d4 0%, #fde9e3 58%, #fdf3ec 100%);
}
/* 装饰圆点 */
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, .45);
}
.hero::before { width: 120px; height: 120px; right: -40px; top: -40px; }
.hero::after  { width: 70px; height: 70px; left: -24px; bottom: -26px; }

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(255, 255, 255, .8);
  color: var(--pink-deep);
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 999px;
}

.brand { margin: 12px 0 2px; font-size: 24px; line-height: 1.35; color: var(--text); position: relative; }
@media (min-width: 480px) { .brand { font-size: 27px; } }
.slogan { margin: 0; font-size: 16px; font-weight: 600; color: var(--pink-deep); position: relative; }
.hero-sub { margin: 10px 0 14px; font-size: 13px; color: #8a6a62; line-height: 1.7; position: relative; }

.hero-stats { display: flex; gap: 10px; position: relative; }
.stat {
  flex: 1;
  background: rgba(255, 255, 255, .72);
  border-radius: 12px;
  padding: 9px 6px;
  text-align: center;
}
.stat b { display: block; font-size: 16px; color: var(--pink-deep); }
.stat span { font-size: 11px; color: #9a7a72; }

/* ==================== 筛选栏（吸顶） ==================== */
.filter-bar {
  position: sticky;
  top: 0;
  z-index: 20;
  padding: 10px 14px 8px;
  background: rgba(253, 246, 239, .95);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}
.chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto;
  padding: 6px 15px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--line);
  font-size: 13px;
  color: var(--text-2);
  cursor: pointer;
  transition: all .15s;
}
.chip.active {
  background: var(--pink-soft);
  border-color: var(--pink);
  color: var(--pink-deep);
  font-weight: 600;
}
.sort-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
}
#sortSelect {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 5px 8px;
  font-size: 13px;
  background: #fff;
  color: var(--text);
  outline: none;
}
#countLabel { font-size: 12px; color: var(--text-2); }

/* ==================== 月嫂卡片列表 ==================== */
.nanny-list { padding: 14px; display: flex; flex-direction: column; gap: 12px; }

.nanny-card {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: #fff;
  border-radius: 16px;
  padding: 14px;
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: transform .15s;
  position: relative;
}
.nanny-card:active { transform: scale(.985); }
@media (min-width: 768px) {
  .nanny-card:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(150, 100, 80, .12); }
}

.card-avatar {
  flex: 0 0 auto;
  width: 86px;
  height: 86px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--pink-soft);
  background: #fbe9e2;
}
.card-avatar img, .detail-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

.card-body { flex: 1; min-width: 0; }
.card-name { margin: 0 0 4px; font-size: 17px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* 状态徽标 */
.status-badge { font-size: 11px; padding: 2px 9px; border-radius: 999px; font-weight: 500; white-space: nowrap; }
.status-badge.ok   { background: #e5f6ee; color: #2e8f66; }   /* 待岗 */
.status-badge.busy { background: #fdf0dc; color: #c97f1f; }   /* 在岗 */
.status-badge.done { background: #eef0f2; color: #7a8288; }   /* 已下户 */

.card-meta { margin: 0 0 6px; font-size: 12px; color: var(--text-2); }
.card-meta .price { color: var(--pink-deep); font-weight: 700; }

.card-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.card-tags span {
  font-size: 11px;
  color: #c96a80;
  background: var(--pink-soft);
  padding: 2px 8px;
  border-radius: 999px;
}

.card-intro {
  margin: 0;
  font-size: 12.5px;
  color: var(--text-2);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-arrow { align-self: center; flex: 0 0 auto; color: #d8c4bc; font-size: 22px; }

.empty { text-align: center; color: var(--text-2); font-size: 14px; padding: 40px 0; }

/* ==================== 详情页 ==================== */
.view-detail { padding-bottom: 96px; /* 给底部操作栏留空间 */ }

.detail-hero {
  position: relative;
  padding: 16px 18px 22px;
  border-radius: 0 0 26px 26px;
  background: linear-gradient(160deg, #f9c9d4, #fdeee9 70%);
}
.back-btn {
  position: absolute;
  top: 14px;
  left: 14px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .88);
  border: none;
  font-size: 20px;
  line-height: 1;
  color: var(--pink-deep);
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(150, 80, 80, .15);
  z-index: 2;
}
.detail-avatar-wrap { text-align: center; padding-top: 34px; }
.detail-avatar {
  width: 118px;
  height: 118px;
  margin: 0 auto;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid #fff;
  background: #fbe9e2;
  box-shadow: 0 4px 14px rgba(180, 100, 100, .25);
}
.detail-name-row { text-align: center; margin-top: 12px; }
.detail-name-row h2 { margin: 0 0 4px; font-size: 22px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.detail-price { font-size: 13px; color: var(--text-2); }
.detail-price b { font-size: 21px; color: var(--pink-deep); margin-left: 2px; }
.detail-intro {
  margin: 10px auto 0;
  max-width: 92%;
  text-align: center;
  font-size: 13px;
  color: #8a6a62;
  line-height: 1.7;
}

.detail-body { padding: 14px; display: flex; flex-direction: column; gap: 12px; }

.section-card {
  background: #fff;
  border-radius: 16px;
  padding: 14px;
  box-shadow: var(--shadow);
}
.section-title { margin: 0 0 10px; font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 6px; }

/* 基本信息 3 宫格 */
.meta-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.meta-item { background: var(--pink-soft); border-radius: 10px; text-align: center; padding: 10px 4px; }
.meta-item b { display: block; font-size: 15px; color: var(--pink-deep); }
.meta-item span { font-size: 11px; color: #b06a7a; }

/* 擅长领域标签 */
.tags-wrap { display: flex; flex-wrap: wrap; gap: 8px; }
.tag { background: var(--pink-soft); color: #c96a80; padding: 6px 12px; border-radius: 999px; font-size: 13px; }

/* 经验介绍 */
.exp p { margin: 0 0 8px; font-size: 13.5px; line-height: 1.75; color: #6b5a55; }
.exp p:last-child { margin-bottom: 0; }

/* 证书列表 */
.cert-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cert-list li { display: flex; gap: 8px; align-items: center; font-size: 13.5px; color: #6b5a55; }
.cert-check { color: var(--ok); font-weight: 700; }

/* 当前状态 / 预计可上岗时间 */
.available-box {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fdf6ef;
  border: 1px dashed #e8c9bd;
  border-radius: 12px;
  padding: 10px 12px;
}
.available-box .label { font-size: 12px; color: var(--text-2); flex: 0 0 auto; }
.available-box .val { font-size: 14px; font-weight: 600; color: var(--pink-deep); }

/* 未来 14 天排期网格 */
.schedule-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.slot {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 10px;
  padding: 8px 2px;
  text-align: center;
  cursor: pointer;
  font: inherit;
  color: var(--text);
  transition: transform .12s, background .12s;
}
.slot.free { border-color: #f2b8c6; }
.slot.free:active { background: var(--pink-soft); transform: scale(.95); }
.slot.booked { background: #f4f1ee; color: #b5a9a4; cursor: not-allowed; border-color: transparent; }
.slot-date { display: block; font-size: 12.5px; font-weight: 600; }
.slot-week { display: block; font-size: 10.5px; color: var(--text-2); margin-top: 1px; }
.slot-state { display: block; margin-top: 4px; font-size: 10.5px; }
.slot.free .slot-state { color: var(--pink-deep); font-weight: 600; }
.slot.booked .slot-state { color: #b5a9a4; }
.schedule-hint { margin: 10px 0 0; font-size: 11.5px; color: var(--text-2); }

/* 联系方式区 */
.contact-box { border-radius: 14px; padding: 14px; }
.contact-box.locked { background: #fff; border: 1.5px dashed #e8c9bd; text-align: center; }
.lock-icon { font-size: 22px; }
.contact-title { margin: 6px 0 4px; font-size: 15px; font-weight: 600; }
.contact-masked { margin: 0 0 12px; font-size: 13px; color: var(--text-2); letter-spacing: .5px; }
.btn-unlock {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, var(--pink), var(--pink-deep));
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 10px 22px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(216, 74, 106, .30);
}
.contact-tip { margin: 10px 0 0; font-size: 11px; color: #b39a92; line-height: 1.7; }

.contact-box.unlocked { background: #fff; border: 1px solid var(--line); }
.unlocked-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--ok);
  background: #e5f6ee;
  border-radius: 999px;
  padding: 2px 9px;
  margin-bottom: 8px;
}
.contact-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 0;
  border-bottom: 1px dashed var(--line);
}
.contact-row:last-of-type { border-bottom: none; }
.contact-row .k { font-size: 13px; color: var(--text-2); flex: 0 0 auto; }
.contact-row b { flex: 1; font-size: 15px; letter-spacing: .5px; word-break: break-all; }
.copy-btn {
  flex: 0 0 auto;
  font-size: 12px;
  color: var(--pink-deep);
  background: var(--pink-soft);
  border: none;
  border-radius: 8px;
  padding: 4px 11px;
  cursor: pointer;
}

/* 详情页底部操作栏（吸底） */
.detail-bar {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 640px;
  display: flex;
  gap: 10px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .96);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--line);
  box-sizing: border-box;
  z-index: 30;
}
.bar-btn { flex: 1; border-radius: 12px; padding: 12px 0; font-size: 15px; font-weight: 600; cursor: pointer; border: none; }
.bar-unlock { background: #fff; color: var(--pink-deep); border: 1.5px solid var(--pink); line-height: 1.25; }
.bar-unlock small { display: block; font-size: 11px; color: var(--pink); font-weight: 500; }
.bar-book {
  background: linear-gradient(135deg, var(--pink), var(--pink-deep));
  color: #fff;
  box-shadow: 0 4px 12px rgba(216, 74, 106, .30);
}

/* ==================== 弹窗 ==================== */
.modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.modal-mask { position: absolute; inset: 0; background: rgba(60, 40, 35, .45); animation: fadeIn .2s; }
.modal-card {
  position: relative;
  width: 100%;
  max-width: 480px;
  background: #fff;
  border-radius: 20px 20px 0 0;
  padding: 18px 18px calc(18px + env(safe-area-inset-bottom));
  box-sizing: border-box;
  animation: slideUp .25s ease-out;
  max-height: 86vh;
  overflow-y: auto;
}
@keyframes slideUp { from { transform: translateY(34px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@media (min-width: 480px) {
  .modal { align-items: center; padding: 20px; }
  .modal-card { border-radius: 20px; }
}

.modal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.modal-head h3 { margin: 0; font-size: 17px; }
.modal-close {
  border: none;
  background: #f4f1ee;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 16px;
  line-height: 1;
  color: var(--text-2);
  cursor: pointer;
}
.modal-sub {
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--pink-deep);
  background: var(--pink-soft);
  border-radius: 8px;
  padding: 7px 10px;
}

/* 表单 */
form label { display: block; font-size: 13px; color: var(--text-2); margin-bottom: 12px; }
form input, form textarea {
  width: 100%;
  box-sizing: border-box;
  margin-top: 5px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 14px;
  font-family: inherit;
  background: #fdfaf7;
  color: var(--text);
  outline: none;
}
form input:focus, form textarea:focus { border-color: var(--pink); background: #fff; }
form textarea { resize: none; }

.modal-tip { margin: 0 0 12px; font-size: 11.5px; color: #b39a92; line-height: 1.7; }
.modal-tip b { color: #c97f1f; }

.btn-primary {
  width: 100%;
  border: none;
  background: linear-gradient(135deg, var(--pink), var(--pink-deep));
  color: #fff;
  border-radius: 12px;
  padding: 13px 0;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.btn-primary:disabled { opacity: .6; cursor: not-allowed; }
.btn-ghost {
  flex: 1;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--text-2);
  border-radius: 12px;
  padding: 13px 0;
  font-size: 15px;
  cursor: pointer;
}
.unlock-btns { display: flex; gap: 10px; }
.unlock-price { text-align: center; padding: 14px 0 10px; }
.price-num { font-size: 30px; font-weight: 700; color: var(--pink-deep); }
.unlock-price p { margin: 4px 0 0; font-size: 13px; color: var(--text-2); }

/* 个人收款码（扫码支付解锁） */
.pay-qr-box {
  margin: 0 0 14px;
  padding: 14px;
  background: #fff;
  border: 1px solid var(--line, #f0ddd3);
  border-radius: 14px;
  text-align: center;
}
.pay-qr-img { display: flex; justify-content: center; }
.pay-qr-img img {
  width: 200px;
  max-width: 62vw;
  height: auto;
  border-radius: 10px;
  border: 1px solid #f0e2dc;
  display: block;
}
.pay-qr-empty {
  width: 200px;
  max-width: 62vw;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 13px;
  line-height: 1.7;
  color: #b39a92;
  background: #faf5f2;
  border: 1px dashed #e8c9bd;
  border-radius: 10px;
}
.pay-qr-tip { margin: 10px 0 0; font-size: 12.5px; color: #c97f1f; line-height: 1.6; }

/* 免签聚合支付：平台支付链接（已配置时显示在个人收款码上方） */
.auto-pay-box { margin: 0 0 14px; }
/* 付费页面重要提示（明确付费性质与平台边界） */
.pay-notice {
  margin: 0 0 14px;
  padding: 11px 13px;
  background: #fff7e6;
  border: 1px solid #ffd591;
  border-radius: 10px;
  font-size: 12.5px;
  line-height: 1.7;
  color: #ad6800;
}
.pay-notice b { color: #d4380d; }
.auto-pay-link {
  display: block;
  padding: 13px 16px;
  background: linear-gradient(135deg, #07c160, #0aa84e);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(7,193,96,0.28);
}
.auto-pay-link:active { transform: translateY(1px); }
.auto-pay-box .contact-tip { color: #2a9d5b; margin: 10px 0 0; font-weight: 500; }

/* 付款备注码 */
.memo-box {
  margin-top: 12px;
  padding: 11px 12px;
  background: #fff8f0;
  border: 1px dashed #e8c9a8;
  border-radius: 10px;
  text-align: center;
}
.memo-label { display: block; font-size: 12px; color: #a5764a; }
.memo-code {
  display: block;
  margin: 6px 0 8px;
  font-family: Consolas, Monaco, monospace;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 8px;
  color: #c0392b;
}
.memo-howto { margin: 0; font-size: 11px; line-height: 1.7; color: #b08a68; }

/* 顶部状态条告警 */
.sb-warn { color: #d0453c; font-weight: 600; }

/* 付款凭证（交易单号 / 截图，二选一） */
.proof-box {
  margin: 0 0 14px;
  padding: 12px 14px;
  background: #fdf9f6;
  border: 1px solid #f0ddd3;
  border-radius: 12px;
}
.proof-box > b { font-size: 13px; color: #8a5a4a; }
.proof-sub { margin: 4px 0 10px; font-size: 11.5px; color: #b39a92; }
.proof-box label {
  display: block;
  font-size: 12.5px;
  color: #8a6d60;
  margin-bottom: 6px;
}
.proof-box .input { margin-top: 5px; letter-spacing: 3px; font-weight: 600; text-align: center; }
.proof-howto {
  margin: 0 0 4px;
  font-size: 11px;
  line-height: 1.65;
  color: #b09a92;
}
.proof-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0;
  font-size: 11px;
  color: #c4b0a8;
}
.proof-divider::before,
.proof-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #eedfd8;
}
.proof-shot { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.proof-shot-name { font-size: 11.5px; color: #b39a92; }

/* 免责声明框（解锁前必读） */
.disclaimer-box {
  background: #fdf6ef;
  border: 1px dashed #e8c9bd;
  border-radius: 12px;
  padding: 10px 12px;
  margin: 0 0 10px;
  text-align: left;
}
.disclaimer-box b { font-size: 13px; color: var(--pink-deep); }
.disclaimer-box p { margin: 6px 0 0; font-size: 11.5px; color: #8a6a62; line-height: 1.85; }
.disclaimer-box p b { font-size: 11.5px; color: #d84a6a; }

/* 勾选行（免责声明 / 授权承诺） */
.check-row {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: 12.5px;
  color: var(--text-2);
  margin-bottom: 12px;
  cursor: pointer;
  line-height: 1.6;
  text-align: left;
}
.check-row input { margin: 2px 0 0; width: auto; flex: 0 0 auto; }

/* 成功弹窗 */
.success-card { text-align: center; padding: 30px 20px; }
.success-icon { font-size: 44px; margin-bottom: 8px; }
.success-card h3 { margin: 0 0 6px; font-size: 18px; }
.success-card p { margin: 0 0 18px; font-size: 13.5px; color: var(--text-2); line-height: 1.7; }

/* Toast 轻提示 */
.toast {
  position: fixed;
  left: 50%;
  bottom: 120px;
  transform: translateX(-50%);
  background: rgba(50, 35, 30, .88);
  color: #fff;
  font-size: 13px;
  padding: 9px 18px;
  border-radius: 999px;
  z-index: 99;
  max-width: 80%;
  text-align: center;
  animation: fadeIn .2s;
}

/* ==================== 页脚 ==================== */
.footer { padding: 20px 20px 30px; text-align: center; }
.footer p { margin: 0; font-size: 11px; color: #b39a92; line-height: 1.8; }
.footer .footer-link {
  display: inline-block;
  margin-top: 10px;
  font-size: 12px;
  color: var(--pink-deep);
  background: #fff;
  border: 1px solid #f2c4cd;
  border-radius: 999px;
  padding: 6px 16px;
  text-decoration: none;
}
.footer .footer-link:active { background: var(--pink-soft); }

/* 桌面端容器美化 */
@media (min-width: 768px) {
  .app { border-radius: 0 0 24px 24px; }
}