/* ============================================================
   components.css — 可复用组件
   ============================================================ */

/* ---------- 卡片 ---------- */
.card {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: var(--gap-lg);
  margin: 0 var(--pad) var(--gap);
  box-shadow: var(--shadow-soft);
}

/* ---------- 区块标题 ---------- */
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px var(--pad) 10px;
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
}

.section-title::before {
  content: "";
  width: 4px;
  height: 15px;
  background: var(--primary);
  border-radius: 2px;
  margin-right: 8px;
}

.section-more { color: var(--text-muted); font-size: 13px; }

/* ---------- 标签 ---------- */
.tag {
  display: inline-block;
  padding: 3px 9px;
  margin: 4px 6px 0 0;
  font-size: 12px;
  color: var(--primary);
  background: var(--primary-bg);
  border-radius: var(--radius-sm);
}

.mini-tag {
  display: inline-block;
  font-size: 11px;
  color: var(--primary);
  background: var(--primary-bg);
  padding: 2px 7px;
  border-radius: 6px;
  margin-right: 6px;
  white-space: nowrap;
}

/* ---------- 按钮 ---------- */
.btn-primary, .btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  font-size: 15px;
  font-weight: 500;
  padding: 10px 22px;
  transition: opacity 0.15s, transform 0.1s;
}

.btn-primary {
  background: var(--primary);
  color: #fff;
}

.btn-outline {
  background: #fff;
  color: var(--primary);
  border: 1px solid var(--primary);
}

.btn-primary:active, .btn-outline:active {
  opacity: 0.8;
  transform: scale(0.98);
}

.btn-block { width: 100%; }
.btn-primary[disabled] { opacity: 0.5; }

/* ---------- 搜索栏 ---------- */
.search-bar { padding: 10px var(--pad); }

.search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border-radius: var(--radius-pill);
  padding: 9px 16px;
  box-shadow: var(--shadow-soft);
  color: var(--text-faint);
  font-size: 13px;
}

.search-box svg { width: 17px; height: 17px; flex-shrink: 0; }

/* ---------- 模式切换 Tabs ---------- */
.mode-tabs {
  display: flex;
  gap: 8px;
  padding: 4px var(--pad) 12px;
}

.mode-tab {
  padding: 6px 18px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  color: var(--text-sub);
  background: #fff;
  border: 1px solid var(--border);
}

.mode-tab.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

/* ---------- 商铺卡片 ---------- */
.shop-card {
  display: flex;
  background: #fff;
  border-radius: var(--radius);
  padding: 10px;
  margin: 0 var(--pad) var(--gap);
  box-shadow: var(--shadow-soft);
}

.shop-card:active { background: #fafbfc; }

.sc-cover {
  position: relative;
  width: 110px;
  height: 110px;
  flex-shrink: 0;
  border-radius: 10px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
}

.sc-cover img { width: 100%; height: 100%; object-fit: cover; }

.sc-ph {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255, 255, 255, 0.92);
  font-size: 13px;
}

.sc-badge {
  position: absolute;
  top: 0; left: 0;
  background: rgba(230, 162, 60, 0.96);
  color: #fff;
  font-size: 10px;
  padding: 2px 8px;
  border-bottom-right-radius: 8px;
}

.sc-info {
  flex: 1;
  min-width: 0;
  margin-left: 10px;
  display: flex;
  flex-direction: column;
}

.sc-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-main);
}

.sc-subtitle {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}

.sc-tags { margin-top: 6px; }

.sc-addr {
  font-size: 11px;
  color: var(--text-faint);
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 3px;
}

.sc-addr svg { width: 12px; height: 12px; flex-shrink: 0; }

.sc-bottom {
  margin-top: auto;
  padding-top: 6px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.sc-price {
  color: var(--accent);
  font-size: 16px;
  font-weight: 600;
}

.sc-view { font-size: 10px; color: var(--text-faint); }

/* ---------- 空状态 ---------- */
.empty {
  padding: 70px 20px;
  text-align: center;
  color: var(--text-faint);
  font-size: 14px;
}

.empty svg { width: 52px; height: 52px; margin: 0 auto 12px; opacity: 0.5; }

/* ---------- 加载状态 ---------- */
.load-status {
  text-align: center;
  color: var(--text-faint);
  font-size: 13px;
  padding: 14px;
}

.result-count {
  padding: 4px var(--pad) 10px;
  font-size: 13px;
  color: var(--text-muted);
}

/* ---------- 轻提示 Toast ---------- */
.toast {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  background: rgba(20, 28, 38, 0.88);
  color: #fff;
  font-size: 14px;
  padding: 11px 20px;
  border-radius: 10px;
  max-width: 78%;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s, transform 0.18s;
  z-index: 100;
}

.toast.show {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* ---------- 表单 ---------- */
.form-group { margin-bottom: 16px; }

.form-label {
  display: block;
  font-size: 13px;
  color: var(--text-sub);
  margin-bottom: 7px;
  font-weight: 500;
}

.form-input, .form-textarea, .form-select {
  width: 100%;
  background: #f7f9fa;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 11px 13px;
  font-size: 14px;
}

.form-input:focus, .form-textarea:focus, .form-select:focus {
  border-color: var(--primary-light);
  background: #fff;
}

.form-textarea { min-height: 84px; resize: vertical; }

.form-row { display: flex; gap: 10px; }
.form-row .form-group { flex: 1; }

/* ---------- 底部弹层（地图选中） ---------- */
.popup-mask {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: 40;
  animation: fadeIn 0.18s;
}

.sheet {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: #fff;
  border-radius: 18px 18px 0 0;
  padding: 18px 18px calc(18px + var(--safe-bottom));
  z-index: 41;
  animation: sheetUp 0.24s ease;
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes sheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }

.sheet-close {
  position: absolute;
  top: 10px; right: 14px;
  font-size: 22px;
  color: var(--text-faint);
  line-height: 1;
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
}