/* ============================================================================
 * 山水壮乡 3.0 全页面细节层 detail.css（M91；依赖 design-tokens + components + polish）
 * 原则：像素级对齐、层级化信息、统一化组件、本地化细节——结构零改动、功能零回归
 * 加载顺序：tokens → components → polish → detail（最后加载，细节覆盖）
 * ============================================================================ */

/* ============ 一、文字与排版规范（像素级） ============ */
.sx-baise .sx-h1 { font-size: 28px; line-height: 1.3; font-weight: 700; }
.sx-baise .sx-h2 { font-size: 20px; line-height: 1.4; font-weight: 600; }
.sx-baise .sx-h3 { font-size: 16px; line-height: 1.4; font-weight: 600; }
.sx-baise .sx-body { font-size: 14px; line-height: 1.6; font-weight: 400; }
.sx-baise .sx-aux { font-size: 12px; line-height: 1.5; font-weight: 400; color: var(--sx-text-3); }
.sx-baise .sx-num { font-size: 24px; line-height: 1.2; font-weight: 600; }  /* 价格/积分/统计数值 */
/* 段落间距：标题-正文 12px、段落 16px、列表项 8px */
.sx-baise .sx-card-body > * + * { margin-top: 8px; }
.sx-baise .sx-card-title + .sx-card-meta { margin-top: 12px; }

/* ============ 二、状态色彩规范（成功/警告/错误/禁用） ============ */
.sx-st-ok { color: #1F8A6B; }        /* 成功：右江青 */
.sx-st-warn { color: #F0B73C; }      /* 警告：芒果黄 */
.sx-st-err { color: #C63227; }       /* 错误：红城红 */
.sx-st-disabled { color: #B0BAB6; }  /* 禁用：浅灰 */
.sx-tag.ok { background: var(--sx-primary-soft); color: #1F8A6B; }
.sx-tag.warn { background: #FDF6E3; color: #A8750C; }
.sx-tag.err { background: #FBEDEC; color: #C63227; }
.sx-tag.disabled { background: #EFF3F1; color: #B0BAB6; }

/* ============ 三、图标与元素规范（尺寸/透明度/位置全局一致） ============ */
.sx-baise .sx-star-corner { width: 10px; height: 10px; }       /* 五角星统一 10px */
.sx-baise .sx-card::before { width: 22px; height: 22px; opacity: 0.25; }  /* 壮锦角标 12px 级 */
.sx-baise .sx-divider::before, .sx-baise .sx-divider::after { width: 6px; height: 6px; }  /* 铜鼓圆点 6px */
.sx-baise .icon-text { display: inline-flex; align-items: center; gap: 8px; }  /* 图标文字间距 8px */

/* ============ 四、间距与圆角规范 ============ */
.sx-baise .sx-section { margin-top: 32px; }                    /* 大板块间距 32px */
.sx-baise .sx-subsection { margin-top: 24px; }                 /* 子板块间距 24px */
.sx-baise .sx-card-body { padding: 20px; }                     /* 卡片内边距统一 20px */

/* ============ 五、表单组件统一细节 ============ */
.sx-baise input[type="text"], .sx-baise input[type="password"], .sx-baise input[type="number"],
.sx-baise input[type="date"], .sx-baise textarea, .sx-baise select {
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--sx-border);
  border-radius: 8px;
  font-size: 14px;
  color: var(--sx-text-1);
  background: var(--sx-white);
  transition: border-color 200ms ease-out, box-shadow 200ms ease-out;
  box-sizing: border-box;
}
.sx-baise textarea { height: auto; padding: 10px 12px; }
.sx-baise input:focus, .sx-baise textarea:focus, .sx-baise select:focus {
  outline: none;
  border-color: var(--sx-primary);
  box-shadow: 0 0 0 3px var(--sx-ai-glow);
}
.sx-baise .sx-field-error {
  font-size: 12px; color: var(--sx-zhuangjin-red);
  margin-top: 6px;
}
/* 单选/复选 20px 方形 */
.sx-baise input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--sx-primary); }

/* ============ 六、弹窗统一细节（圆角 18px/标题 48px/内容边距） ============ */
.sx-baise .sx-modal { border-radius: var(--sx-radius-modal); }
.sx-baise .sx-modal .sx-modal-head { height: 48px; display: flex; align-items: center; font-size: 16px; }
.sx-baise .sx-modal .sx-modal-body { padding: 20px 24px; }
.sx-baise .sx-modal .sx-modal-foot { height: 56px; display: flex; align-items: center; justify-content: flex-end; gap: 12px; }

/* ============ 七、Toast 统一细节（圆角 8px/40px 高/顶部居中） ============ */
.sx-baise .zltc-toast, .sx-baise .h5-toast {
  border-radius: 8px;
  min-height: 40px;
  padding: 10px 20px;
  font-size: 14px;
  color: #fff;
  background: rgba(26, 42, 35, 0.85) !important;
  top: 64px !important;
}

/* ============ 八、加载状态统一（铜鼓 24px + 文字间距 8px） ============ */
.sx-baise .sx-loading::before { width: 24px; height: 24px; }
.sx-baise .sx-loading { gap: 8px; font-size: 12px; color: var(--sx-text-3); }

/* ============ 九、热门标签/交互细节（悬停明度+5% 上浮 1px） ============ */
.sx-baise .nw-hot-word, .sx-baise .sx-tag.gray {
  transition: filter 200ms ease-out, transform 200ms ease-out, background 200ms ease-out;
}
.sx-baise .nw-hot-word:hover, .sx-baise .sx-tag.gray:hover { filter: brightness(1.05); transform: translateY(-1px); }

/* ============ 十、列表项规范（行高 48px/悬停高亮/箭头微移） ============ */
.sx-baise .sx-list-item {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 48px; padding: 0 8px;
  border-bottom: 1px solid var(--sx-border);
  transition: background 200ms ease-out;
  cursor: pointer;
}
.sx-baise .sx-list-item:hover { background: var(--sx-primary-soft); }
.sx-baise .sx-list-item .arrow { transition: transform 200ms ease-out; }
.sx-baise .sx-list-item:hover .arrow { transform: translateX(2px); }

/* ============ 十一、v2 存量页面兼容细节层（chat/详情等未包 sx-baise 的页面） ============ */
/* 状态色彩与表单聚焦统一（作用于全站） */
.zltc-tag.green { background: #E8F5EF; color: #1F8A6B; }
.zltc-tag.red { background: #FBEDEC; color: #C63227; }
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: #1F8A6B;
  transition: border-color 200ms ease-out;
}
/* 卡片细节统一（v2 卡片悬停上浮 + 阴影） */
.zltc-card, .nw-card, .h5-card {
  transition: transform 200ms ease-out, box-shadow 200ms ease-out;
}
.zltc-card:hover, .nw-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(31, 138, 107, 0.10); }

/* ============ 十二、区县色值统一（M91 精确规范） ============ */
.sx-region-dot.youjiang { background: #1F8A6B; }
.sx-region-dot.leye { background: #2E9B6B; }
.sx-region-dot.jingxi { background: #2B7AB0; }
.sx-region-dot.tiandong { background: #E87A3C; }
.sx-tag.leye { background: #EDF6F1; color: #2E9B6B; }
.sx-tag.jingxi { background: #EBF2FA; color: #2B7AB0; }
.sx-tag.tiandong { background: #FBF1E5; color: #E87A3C; }

/* ============ 十三、详情页通用细节（标题层级/评分价格行/操作栏） ============ */
.sx-baise .sx-detail-title { font-size: 24px; font-weight: 700; line-height: 1.3; }
.sx-baise .sx-detail-price { font-size: 24px; font-weight: 600; color: #C63227; }
.sx-baise .sx-detail-score { font-size: 18px; font-weight: 600; color: var(--sx-tonggu-gold); }
.sx-baise .sx-detail-bar {
  position: sticky; bottom: 0;
  height: 64px; display: flex; align-items: center; justify-content: flex-end; gap: 12px;
  background: var(--sx-white);
  box-shadow: 0 -4px 16px rgba(31, 138, 107, 0.08);
  padding: 0 20px;
}
.sx-baise .sx-detail-bar .sx-btn.primary { width: 160px; }
.sx-baise .sx-detail-bar .sx-btn.outline { width: 120px; }

/* ============ 十四、对话页细节（气泡/快捷提问/输入区） ============ */
.sx-baise .sx-user-bubble { max-width: 70%; border-radius: 14px 14px 0 14px; padding: 12px 16px; }
.sx-baise .sx-ai-bubble { max-width: 80%; border-radius: 14px 14px 14px 0; padding: 12px 16px; }
.sx-baise .sx-quick-ask { display: flex; gap: 8px; flex-wrap: wrap; }
.sx-baise .sx-quick-ask .sx-tag { font-size: 12px; border-radius: 16px; cursor: pointer; }

/* ============ 十五、搜索联想层（M94：热门/历史/智能推荐 + 键盘高亮） ============ */
#zltc-suggest .zltc-suggest-item { transition: background 150ms ease-out; }
#zltc-suggest .zltc-suggest-item:hover,
#zltc-suggest .zltc-suggest-item.active { background: var(--sx-primary-soft); color: var(--sx-primary); }

/* ============ 十六、表单增强规范（M95：44px 输入/实时验证/浮动标签/倒计时） ============ */
.sx-baise .sx-form-field { position: relative; margin-bottom: 18px; }
.sx-baise .sx-form-field input {
  height: 44px; width: 100%;
  padding: 0 36px 0 14px;
  border: 1px solid var(--sx-border); border-radius: 10px;
  font-size: 14px; box-sizing: border-box;
  transition: border-color 200ms ease-out, box-shadow 200ms ease-out;
}
.sx-baise .sx-form-field input:focus {
  border-color: var(--sx-primary);
  box-shadow: 0 0 0 3px var(--sx-ai-glow);
  outline: none;
}
/* 实时验证状态：对勾/叉号（JS 切 .ok/.err class） */
.sx-baise .sx-form-field.ok::after {
  content: '✓'; position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  color: #1F8A6B; font-weight: 700; font-size: 14px;
}
.sx-baise .sx-form-field.err::after {
  content: '✕'; position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  color: #C63227; font-weight: 700; font-size: 14px;
}
.sx-baise .sx-form-field.err input { border-color: #C63227; animation: sx-shake 300ms ease-out; }
/* 浮动标签（聚焦上移缩小） */
.sx-baise .sx-form-float { position: relative; margin-bottom: 18px; }
.sx-baise .sx-form-float input {
  height: 44px; width: 100%; padding: 14px 14px 4px;
  border: 1px solid var(--sx-border); border-radius: 10px; font-size: 14px; box-sizing: border-box;
  transition: border-color 200ms ease-out, box-shadow 200ms ease-out;
}
.sx-baise .sx-form-float input:focus { border-color: var(--sx-primary); box-shadow: 0 0 0 3px var(--sx-ai-glow); outline: none; }
.sx-baise .sx-form-float label {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  font-size: 14px; color: var(--sx-text-3); pointer-events: none;
  transition: all 200ms ease-out;
}
.sx-baise .sx-form-float input:focus + label,
.sx-baise .sx-form-float input:not(:placeholder-shown) + label {
  top: 8px; transform: translateY(0); font-size: 12px; color: var(--sx-primary);
}
/* 验证码倒计时（JS 切 .counting class + 文字替换） */
.sx-baise .sx-btn.counting { background: #EFF3F1; color: #B0BAB6; border-color: var(--sx-border); cursor: not-allowed; }
/* 密码强度条（弱红/中黄/强绿） */
.sx-baise .sx-pwd-meter { height: 4px; border-radius: 2px; background: #EFF3F1; margin-top: 6px; overflow: hidden; }
.sx-baise .sx-pwd-meter .bar { height: 100%; width: 0; border-radius: 2px; transition: width 200ms ease-out, background 200ms ease-out; }
.sx-baise .sx-pwd-meter.weak .bar { width: 33%; background: #C63227; }
.sx-baise .sx-pwd-meter.mid .bar { width: 66%; background: #F0B73C; }
.sx-baise .sx-pwd-meter.strong .bar { width: 100%; background: #1F8A6B; }
/* M199 专项：弹窗表单基础规范（.form-group/.form-input 在 PC 端此前零定义——认领弹窗等表单堆叠、输入框裸浏览器样式）
   作用域限定 .zltc-modal（JS 弹窗体系挂 body 级，老布局/新布局页通用；后台 admin.js 弹窗体系由 admin.css 同名全局规则覆盖） */
.zltc-modal .form-group { margin-bottom: 14px; }
.zltc-modal .form-group label { display: block; margin-bottom: 6px; color: var(--sx-text-2, #485851); font-size: 13px; font-weight: 500; }
.zltc-modal .form-input {
  width: 100%; box-sizing: border-box; padding: 9px 12px;
  border: 1px solid var(--sx-border, #E5EDE8); border-radius: 8px;
  font-size: 14px; color: var(--sx-text-1, #1A2A23); background: #fff;
  outline: none; transition: border-color 200ms ease-out, box-shadow 200ms ease-out;
}
.zltc-modal .form-input:focus { border-color: var(--sx-primary, #1F8A6B); box-shadow: 0 0 0 3px var(--sx-ai-glow, rgba(31,138,107,.12)); }
.zltc-modal textarea.form-input { resize: vertical; min-height: 64px; line-height: 1.6; }
.zltc-modal .form-group label .opt { color: var(--sx-text-3, #8A9691); font-weight: 400; }
/* ============ M202 专项：本地商家全模块深度打磨（纯视觉/交互层；对齐美团/大众点评细节） ============ */
/* 卡片按压反馈（点击缩放 0.98 + 轻阴影，任务书卡片规范 0 2px 8px rgba(0,0,0,.06)） */
.sx-ch-card, .m155-card, .zltc-list-item { transition: transform 150ms var(--sx-ease-out), box-shadow 150ms var(--sx-ease-out); box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.sx-ch-card:active, .m155-card:active, .zltc-list-item:active { transform: scale(.98); box-shadow: 0 1px 4px rgba(0,0,0,.08); }
/* 热门搜索词 / 搜索历史标签 */
.m202-hot-tag { display: inline-block; padding: 4px 12px; margin: 0 6px 6px 0; background: var(--sx-primary-soft, #E8F4F0); color: var(--sx-primary, #1F8A6B); border-radius: 999px; font-size: 12px; cursor: pointer; transition: transform 120ms var(--sx-ease-out); }
.m202-hot-tag:active { transform: scale(.95); }
.m202-history-item { display: flex; align-items: center; justify-content: space-between; padding: 8px 4px; font-size: 13px; color: var(--sx-text-2, #485851); border-bottom: 1px solid var(--sx-border, #E5EDE8); cursor: pointer; }
.m202-history-item:active { background: var(--sx-primary-soft, #E8F4F0); }
/* 筛选抽屉（底部弹出 70vh：区域/价格/会员筛选） */
.m202-drawer-mask { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 99990; display: none; }
.m202-drawer { position: fixed; left: 0; right: 0; bottom: 0; height: 70vh; background: #fff; border-radius: 18px 18px 0 0; z-index: 99991; display: flex; flex-direction: column; transform: translateY(100%); transition: transform 220ms var(--sx-ease-out); max-width: 640px; margin: 0 auto; }
.m202-drawer.open { transform: translateY(0); }
.m202-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--sx-border, #E5EDE8); font-weight: 600; font-size: 15px; }
.m202-drawer-body { flex: 1; overflow-y: auto; padding: 14px 16px; }
.m202-drawer-sec { margin-bottom: 18px; }
.m202-drawer-sec h4 { font-size: 13px; color: var(--sx-text-1, #1A2A23); margin-bottom: 8px; font-weight: 600; }
.m202-chip { display: inline-block; padding: 6px 14px; margin: 0 8px 8px 0; border: 1px solid var(--sx-border, #E5EDE8); border-radius: 999px; font-size: 13px; color: var(--sx-text-2, #485851); cursor: pointer; background: #fff; transition: all 120ms var(--sx-ease-out); }
.m202-chip.on { border-color: var(--sx-primary, #1F8A6B); color: var(--sx-primary, #1F8A6B); background: var(--sx-primary-soft, #E8F4F0); }
.m202-drawer-foot { display: flex; gap: 10px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--sx-border, #E5EDE8); }
.m202-drawer-foot .sx-btn { flex: 1; }
/* 营业状态徽章 */
.m202-open-badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; margin-left: 6px; vertical-align: middle; }
.m202-open-badge.open { background: var(--sx-primary-soft, #E8F4F0); color: var(--sx-primary, #1F8A6B); }
.m202-open-badge.closed { background: #EFF2F1; color: #7A8C99; } /* M205：休息中=灰（营业中绿/休息中灰规范） */
/* 顶部轮播（H5 220px；PC 相册 Tab 保持） */
.m202-carousel { position: relative; height: 220px; overflow: hidden; background: #EDF3F0; }
.m202-carousel-track { display: flex; height: 100%; transition: transform 260ms var(--sx-ease-out); }
.m202-carousel-item { flex: 0 0 100%; height: 100%; }
.m202-carousel-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.m202-carousel-count { position: absolute; right: 10px; bottom: 10px; background: rgba(0,0,0,.5); color: #fff; font-size: 11px; padding: 2px 8px; border-radius: 999px; }
.m202-carousel-actions { position: absolute; top: 10px; right: 10px; display: flex; gap: 8px; }
.m202-carousel-actions button { width: 32px; height: 32px; border: none; border-radius: 50%; background: rgba(0,0,0,.35); color: #fff; font-size: 15px; cursor: pointer; }
/* 评价卡（头像圆形 40 / 内容 3 行截断 / 图片网格 / 商家回复灰底缩进） */
.m202-review-card { padding: 14px 0; border-bottom: 1px solid var(--sx-border, #E5EDE8); }
.m202-review-card:last-child { border-bottom: none; }
.m202-review-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.m202-review-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--sx-primary-soft, #E8F4F0); color: var(--sx-primary, #1F8A6B); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 16px; flex-shrink: 0; }
.m202-review-nick { font-size: 13px; font-weight: 600; color: var(--sx-text-1, #1A2A23); }
.m202-review-meta { font-size: 11px; color: var(--sx-text-3, #8A9691); margin-top: 2px; }
.m202-review-stars { color: var(--sx-tonggu-gold, #D4A84B); font-size: 12px; margin-left: 6px; }
.m202-review-content { font-size: 14px; line-height: 1.65; color: var(--sx-text-2, #485851); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.m202-review-content.expand { -webkit-line-clamp: unset; display: block; }
.m202-review-toggle { font-size: 12px; color: var(--sx-primary, #1F8A6B); cursor: pointer; margin-top: 4px; }
.m202-review-imgs { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.m202-review-imgs img { width: 96px; height: 128px; object-fit: cover; border-radius: 8px; cursor: pointer; }
.m202-review-reply { margin-top: 8px; padding: 8px 10px; background: #F6FAF8; border-radius: 8px; font-size: 12px; color: var(--sx-text-2, #485851); line-height: 1.6; }
.m202-review-reply b { color: var(--sx-primary, #1F8A6B); margin-right: 4px; }
/* 入驻分步表单（进度指示器 + 步骤切换 + 字段错误） */
.m202-steps { display: flex; gap: 0; margin-bottom: 14px; }
.m202-step { flex: 1; text-align: center; font-size: 12px; color: var(--sx-text-3, #8A9691); position: relative; padding-top: 22px; }
.m202-step::before { content: ''; position: absolute; top: 6px; left: 50%; transform: translateX(-50%); width: 14px; height: 14px; border-radius: 50%; background: var(--sx-border, #E5EDE8); }
.m202-step::after { content: ''; position: absolute; top: 12px; left: calc(50% + 10px); right: calc(-50% + 10px); height: 2px; background: var(--sx-border, #E5EDE8); }
.m202-step:last-child::after { display: none; }
.m202-step.active { color: var(--sx-primary, #1F8A6B); font-weight: 600; }
.m202-step.active::before { background: var(--sx-primary, #1F8A6B); box-shadow: 0 0 0 3px var(--sx-primary-soft, #E8F4F0); }
.m202-step.done { color: var(--sx-primary, #1F8A6B); }
.m202-step.done::before { background: var(--sx-primary, #1F8A6B); }
.m202-step.done::after { background: var(--sx-primary, #1F8A6B); }
.m202-step-sec { display: none; }
.m202-step-sec.active { display: block; }
.m202-field-err { color: var(--sx-zhuangjin-red, #C63227); font-size: 12px; margin-top: 4px; display: none; }
.m202-upload-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.m202-upload-grid img { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; }
.m202-upload-add { width: 72px; height: 72px; border: 1px dashed var(--sx-border, #E5EDE8); border-radius: 8px; background: #F6FAF8; color: var(--sx-primary, #1F8A6B); font-size: 22px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.m202-upload-item { position: relative; }
.m202-upload-item .del { position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; background: var(--sx-zhuangjin-red, #C63227); color: #fff; font-size: 11px; line-height: 18px; text-align: center; cursor: pointer; }
/* M202 入驻分步表单辅助（内联样式收敛——M156 预算门禁） */
.m202-ma-tip { margin-top: 8px; }
.m202-ma-summary { font-size: 13px; color: var(--sx-text-2, #485851); line-height: 1.8; }
/* ============ M204 专项：详情页全模块补全（服务价格表/消费保障条/同类目推荐） ============ */
.m204-price-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.m204-price-table th { text-align: left; padding: 8px 10px; background: var(--sx-primary-soft, #E8F4F0); color: var(--sx-text-2, #485851); font-weight: 600; font-size: 13px; }
.m204-price-table td { padding: 10px; border-bottom: 1px solid var(--sx-border, #E5EDE8); vertical-align: top; }
.m204-price-table tr:last-child td { border-bottom: none; }
.m204-price-table .price { color: #C0392B; font-weight: 700; }
.m204-assure { display: flex; flex-wrap: wrap; gap: 10px; padding: 12px 14px; margin-top: 12px; background: linear-gradient(135deg, #F6FAF8, #EDF6F1); border: 1px solid var(--sx-border, #E5EDE8); border-radius: 12px; }
.m204-assure .item { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--sx-text-2, #485851); }
.m204-assure .item b { color: var(--sx-primary, #1F8A6B); }
.m204-related-h5 { display: flex; gap: 10px; overflow-x: auto; padding: 4px 0 8px; -webkit-overflow-scrolling: touch; }
.m204-related-h5 .card { flex: 0 0 150px; background: #fff; border: 1px solid var(--sx-border, #E5EDE8); border-radius: 10px; padding: 10px; text-decoration: none; }
.m204-related-h5 .card b { display: block; font-size: 13px; color: var(--sx-text-1, #1A2A23); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m204-related-h5 .card span { display: block; font-size: 11px; color: var(--sx-text-3, #8A9691); margin-top: 4px; }
.m204-related-h5 .card i { display: block; font-style: normal; font-size: 12px; color: #C0392B; font-weight: 600; margin-top: 2px; }