/* ============================================================================
 * 山水壮乡 3.0 基础组件库（M88；PC/H5 共用，依赖 design-tokens.css）
 * 作用域 .sx-*：与 v1 .zltc-*（桂红）/ v2 .nw-*（漓江青旧）隔离并存，灰度切换
 * 动画硬件加速（transform/opacity）；图片懒加载由页面层负责
 * ============================================================================ */

/* ---------- AI 智能搜索框（v3.0 信息架构绝对 C 位） ---------- */
.sx-searchbox {
  display: flex;
  align-items: center;
  gap: var(--sx-space-2);
  height: var(--sx-search-height);
  padding: 0 var(--sx-space-3);
  background: var(--sx-white);
  border: 2px solid var(--sx-primary);
  border-radius: var(--sx-radius-search);
  box-shadow: 0 4px 20px rgba(30, 155, 106, 0.08);
  transition: box-shadow var(--sx-dur-base) var(--sx-ease-out);
}
.sx-searchbox:focus-within {
  box-shadow: 0 0 0 4px var(--sx-ai-glow), 0 6px 24px var(--sx-ai-glow-strong); /* 输入光晕动效 */
}
.sx-searchbox input {
  flex: 1;
  height: 100%;
  border: none;
  outline: none;
  background: transparent;
  font-size: var(--sx-font-base);
  color: var(--sx-text-1);
}
.sx-searchbox input::placeholder { color: var(--sx-text-3); }
.sx-searchbox .sx-si-voice,
.sx-searchbox .sx-si-search {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; background: transparent; color: var(--sx-primary);
  cursor: pointer; border-radius: var(--sx-radius-full);
  transition: background var(--sx-dur-fast) var(--sx-ease-out);
}
.sx-searchbox .sx-si-voice:hover,
.sx-searchbox .sx-si-search:hover { background: var(--sx-primary-soft); }
/* 联想下拉 */
.sx-searchbox .sx-suggest {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0;
  background: var(--sx-white);
  border-radius: var(--sx-radius-card);
  box-shadow: var(--sx-shadow-card-hover);
  overflow: hidden; display: none; z-index: 50;
}
.sx-searchbox .sx-suggest.open { display: block; }
.sx-searchbox .sx-suggest a {
  display: flex; align-items: center; gap: var(--sx-space-1);
  padding: 10px var(--sx-space-3);
  font-size: var(--sx-font-sm); color: var(--sx-text-2);
  text-decoration: none;
}
.sx-searchbox .sx-suggest a:hover { background: var(--sx-primary-soft); }
/* AI 搜索中加载态 */
.sx-searchbox .sx-searching {
  font-size: var(--sx-font-xs); color: var(--sx-primary);
  display: none; align-items: center; gap: 6px;
}
.sx-searchbox.searching .sx-searching { display: inline-flex; }

/* ---------- 卡片（14px 圆角 + 壮锦角标 + 悬停上浮 3px） ---------- */
.sx-card {
  position: relative;
  background: var(--sx-white);
  border: 1px solid var(--sx-border);
  border-radius: var(--sx-radius-card);
  box-shadow: var(--sx-shadow-card);
  overflow: hidden;
  transition: transform var(--sx-dur-base) var(--sx-ease-out), box-shadow var(--sx-dur-base) var(--sx-ease-out);
  will-change: transform;
}
.sx-card:hover { transform: translateY(-3px); box-shadow: var(--sx-shadow-card-hover); }
/* 左上角壮锦角标（≤12px 装饰层） */
.sx-card::before {
  content: '';
  position: absolute; top: 0; left: 0;
  width: 22px; height: 22px;
  background: url('/static/images/patterns/sx-zhuangjin-fret.svg') center/22px no-repeat;
  opacity: var(--sx-ornament-opacity);
  pointer-events: none;
}
/* 山水肌理背景（第一层融入法则：3%~5% 只留质感） */
.sx-card.sx-texture-bg { background-image: url('/static/images/patterns/sx-karst-silhouette.svg'); background-repeat: repeat-x; background-position: bottom; }
.sx-card .sx-card-body { padding: var(--sx-space-3); }
.sx-card .sx-card-title { font-size: var(--sx-font-base); font-weight: 600; color: var(--sx-text-1); line-height: var(--sx-line-title); }
.sx-card .sx-card-meta { font-size: var(--sx-font-xs); color: var(--sx-text-3); margin-top: 4px; }

/* ---------- 按钮（主按钮漓江翠填充 44px；次要描边 1.5px） ---------- */
.sx-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: var(--sx-btn-height);
  padding: 0 var(--sx-space-5);
  border: none; border-radius: var(--sx-radius-btn);
  font-size: var(--sx-font-sm); font-weight: 500;
  cursor: pointer; text-decoration: none;
  transition: filter var(--sx-dur-fast) var(--sx-ease-out), background var(--sx-dur-fast) var(--sx-ease-out);
  will-change: filter;
}
.sx-btn.primary { background: var(--sx-primary); color: var(--sx-white); }
.sx-btn.primary:hover { filter: brightness(1.08); } /* 悬停明度 +8% */
.sx-btn.outline { background: transparent; color: var(--sx-primary); border: 1.5px solid var(--sx-primary); }
.sx-btn.outline:hover { background: var(--sx-primary-soft); }
.sx-btn.gold { background: var(--sx-tonggu-gold); color: var(--sx-white); }
.sx-btn.sm { height: 34px; padding: 0 var(--sx-space-3); font-size: var(--sx-font-xs); }

/* ---------- 标签（26px 高 20px 圆角四色） ---------- */
.sx-tag {
  display: inline-flex; align-items: center;
  height: var(--sx-tag-height);
  padding: 0 12px;
  border-radius: var(--sx-radius-tag);
  font-size: var(--sx-font-xs);
  line-height: 1;
}
.sx-tag.green { background: var(--sx-primary-soft); color: var(--sx-primary); }
.sx-tag.red { background: #FBEDEC; color: var(--sx-zhuangjin-red); }
.sx-tag.gold { background: #F8F1E0; color: #A8852F; }
.sx-tag.gray { background: #EFF3F1; color: var(--sx-text-3); }

/* ---------- 弹窗（18px 圆角 + 顶部渐变装饰线） ---------- */
.sx-modal-mask {
  position: fixed; inset: 0; z-index: 999;
  background: var(--sx-mask);
  display: flex; align-items: center; justify-content: center;
}
.sx-modal {
  width: 480px; max-width: 92vw; max-height: 82vh;
  background: var(--sx-white);
  border-radius: var(--sx-radius-modal);
  overflow: hidden; display: flex; flex-direction: column;
  box-shadow: var(--sx-shadow-card-hover);
}
.sx-modal::before {
  content: '';
  height: 4px;
  background: linear-gradient(90deg, var(--sx-primary), var(--sx-tonggu-gold));
}
.sx-modal .sx-modal-head { padding: var(--sx-space-3) var(--sx-space-4) var(--sx-space-2); font-size: var(--sx-font-lg); font-weight: 600; color: var(--sx-text-1); }
.sx-modal .sx-modal-body { padding: 0 var(--sx-space-4); overflow-y: auto; }
.sx-modal .sx-modal-foot { padding: var(--sx-space-3) var(--sx-space-4); display: flex; justify-content: flex-end; gap: var(--sx-space-2); }

/* ---------- 空状态（水墨山水简笔插画 + 文案 + 按钮） ---------- */
.sx-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 200px; padding: var(--sx-space-6) var(--sx-space-3);
  color: var(--sx-text-3); text-align: center;
}
.sx-empty .illus {
  width: 120px; height: 60px; margin-bottom: var(--sx-space-3);
  background: url('/static/images/patterns/sx-karst-silhouette.svg') center/contain no-repeat;
  opacity: 0.8;
}
.sx-empty .text { font-size: var(--sx-font-sm); line-height: var(--sx-line-zhuang); }

/* ---------- 分割线（两端铜鼓圆点装饰） ---------- */
.sx-divider {
  display: flex; align-items: center; gap: var(--sx-space-2);
  color: var(--sx-border); height: 1px;
  background: linear-gradient(90deg, transparent, var(--sx-border), transparent);
}
.sx-divider::before, .sx-divider::after {
  content: '';
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--sx-tonggu-gold);
  opacity: var(--sx-ornament-opacity);
  flex-shrink: 0;
}

/* ---------- 加载（铜鼓太阳纹转圈，硬件加速） ---------- */
.sx-loading {
  display: inline-flex; align-items: center; gap: var(--sx-space-1);
  color: var(--sx-primary); font-size: var(--sx-font-xs);
}
.sx-loading::before {
  content: '';
  width: 22px; height: 22px;
  background: url('/static/images/patterns/sx-tonggu-sun.svg') center/22px no-repeat;
  animation: sx-tonggu-rotate 0.9s linear infinite;
  will-change: transform;
}
@keyframes sx-tonggu-rotate { to { transform: rotate(360deg); } }

/* ---------- AI 对话气泡（左侧主色竖线 + 极淡主色背景） ---------- */
.sx-ai-bubble {
  position: relative;
  background: var(--sx-ai-glow);
  border-radius: 0 var(--sx-radius-card) var(--sx-radius-card) var(--sx-radius-card);
  padding: var(--sx-space-3) var(--sx-space-4);
  color: var(--sx-text-2);
  font-size: var(--sx-font-sm);
  line-height: var(--sx-line-body);
}
.sx-ai-bubble::before {
  content: '';
  position: absolute; left: 0; top: var(--sx-space-2); bottom: var(--sx-space-2);
  width: 3px; border-radius: 2px;
  background: var(--sx-primary);
}
.sx-user-bubble {
  background: linear-gradient(135deg, var(--sx-primary), #2EBD83);
  color: var(--sx-white);
  border-radius: var(--sx-radius-card) 0 var(--sx-radius-card) var(--sx-radius-card);
  padding: var(--sx-space-2) var(--sx-space-4);
  font-size: var(--sx-font-sm);
  line-height: var(--sx-line-body);
}

/* ---------- 结果出现淡入上移动效 ---------- */
.sx-fade-up { animation: sx-fade-up var(--sx-dur-base) var(--sx-ease-out) both; will-change: transform, opacity; }
@keyframes sx-fade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* ---------- 黛山渐变顶（首页 Hero / 卡片顶背景） ---------- */
.sx-gradient-dai { background: var(--sx-gradient-dai); }

/* ============================================================================
 * 百色首发站专属组件（M88 百色定制版；配合 body.sx-baise 主题层使用）
 * ============================================================================ */

/* 试运营标识标签（红底白字）+ 百色本地标签 */
.sx-baise-tag {
  display: inline-flex; align-items: center;
  height: var(--sx-tag-height);
  padding: 0 10px;
  border-radius: var(--sx-radius-tag);
  font-size: var(--sx-font-xs);
  background: var(--sx-zhuangjin-red);
  color: var(--sx-white);
  line-height: 1;
}
.sx-baise-tag.local { background: var(--sx-primary); }

/* 五角星角标（重要操作按钮/推荐标识；≤12px 装饰层） */
.sx-star-corner {
  display: inline-block;
  width: 12px; height: 12px;
  background: url('/static/images/patterns/sx-baise-star.svg') center/12px no-repeat;
  opacity: var(--sx-ornament-opacity);
}

/* 右江水纹分割线（分区标题右侧装饰） */
.sx-divider-water {
  flex: 1;
  height: 12px;
  background: url('/static/images/patterns/sx-baise-wave.svg') right center/auto 12px no-repeat;
  opacity: 0.8;
}

/* 百色四大专区入口卡（240×120、主题色、悬停上浮） */
.sx-zone-card {
  display: flex; flex-direction: column; justify-content: space-between;
  width: 240px; height: 120px;
  padding: var(--sx-space-3);
  border-radius: var(--sx-radius-card);
  box-shadow: var(--sx-shadow-card);
  cursor: pointer;
  transition: transform var(--sx-dur-base) var(--sx-ease-out), box-shadow var(--sx-dur-base) var(--sx-ease-out);
  will-change: transform;
}
.sx-zone-card:hover { transform: translateY(-3px); box-shadow: var(--sx-shadow-card-hover); }
.sx-zone-card .zone-title { font-size: var(--sx-font-base); font-weight: 600; color: var(--sx-text-1); }
.sx-zone-card .zone-sub { font-size: var(--sx-font-xs); color: var(--sx-text-3); }
.sx-zone-card.life { background: linear-gradient(135deg, var(--sx-primary-soft), var(--sx-white)); border-left: 3px solid var(--sx-primary); }
.sx-zone-card.travel { background: linear-gradient(135deg, #EDF6F1, var(--sx-white)); border-left: 3px solid #4FA37E; }
.sx-zone-card.mango { background: linear-gradient(135deg, #FDF6E3, var(--sx-white)); border-left: 3px solid var(--sx-baise-mango); }
.sx-zone-card.red { background: linear-gradient(135deg, var(--sx-baise-redgray), var(--sx-white)); border-left: 3px solid var(--sx-zhuangjin-red); }

/* Hero 大搜索框（百色首页核心：56px 高、聚焦外发光） */
.sx-hero-search {
  display: flex; align-items: center; gap: var(--sx-space-2);
  height: 56px;
  padding: 0 var(--sx-space-3);
  background: var(--sx-white);
  border: 2px solid var(--sx-primary);
  border-radius: var(--sx-radius-search);
  box-shadow: 0 6px 24px rgba(31, 138, 107, 0.10);
  transition: box-shadow var(--sx-dur-base) var(--sx-ease-out);
}
.sx-hero-search:focus-within { box-shadow: 0 0 0 4px var(--sx-ai-glow), 0 8px 32px var(--sx-ai-glow-strong); }
.sx-hero-search input { flex: 1; height: 100%; border: none; outline: none; background: transparent; font-size: var(--sx-font-lg); color: var(--sx-text-1); }
.sx-hero-search input::placeholder { color: var(--sx-text-3); font-size: var(--sx-font-sm); }

/* 天坑轮廓空状态（百色场景文案） */
.sx-empty-tiankeng .illus {
  width: 120px; height: 90px;
  background: url('/static/images/patterns/sx-baise-tiankeng.svg') center/contain no-repeat;
  opacity: 0.85;
}

/* 芒果黄价格标签（特产板块） */
.sx-tag.mango { background: #FDF6E3; color: #A8750C; }

/* 首页 Hero 黛山渐变（右江到红城三色） */
.sx-gradient-baise { background: var(--sx-baise-gradient-dai); }