/*
 * 模式卡片
 * 水平布局：图标区 | 文字区 | 行动按钮
 * 三种模式各用色条区分（无伪元素装饰）
 */

.mode-card {
  display: flex;
  align-items: center;
  padding: var(--space-md);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s var(--ease-out);
}

.mode-card:active {
  transform: scale(0.985);
}

/* ── 图标区 ── */
.card-icon-wrap {
  width: 88rpx;
  height: 88rpx;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-right: var(--space-md);
}

.card-icon {
  font-size: 44rpx;
  line-height: 1;
}

/* ── 文字区 ── */
.card-body {
  flex: 1;
  min-width: 0;
}

.card-title {
  font-size: var(--text-body);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 4rpx;
}

.card-desc {
  font-size: var(--text-body-sm);
  color: var(--color-text-muted);
}

/* ── 行动按钮 ── */
.card-action {
  flex-shrink: 0;
  font-size: var(--text-body-sm);
  font-weight: 500;
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-full);
  white-space: nowrap;
}

/* ═══ 各模式专属色 ═══ */

/* 外卖 — 橙 */
.mode-card.takeout .card-icon-wrap {
  background: var(--color-primary-pale);
}
.mode-card.takeout .card-action {
  color: var(--color-primary);
  background: var(--color-primary-pale);
}

/* 冰箱 — 绿 */
.mode-card.fridge .card-icon-wrap {
  background: var(--color-green-pale);
}
.mode-card.fridge .card-action {
  color: var(--color-green);
  background: var(--color-green-pale);
}

/* 探店 — 紫 */
.mode-card.explore .card-icon-wrap {
  background: var(--color-purple-pale);
}
.mode-card.explore .card-action {
  color: var(--color-purple);
  background: var(--color-purple-pale);
}