Zomato：個性驅動的美食使用者體驗

:root {
  /* Core brand red */
  --zomato-red: #e23744;         /* Primary: CTAs, headers, logo */
  --zomato-red-dark: #cb202d;    /* Pressed states, emphasis */
  --zomato-red-light: #f9e5e7;   /* Backgrounds, tags, badges */

  /* Supporting palette */
  --zomato-gold: #eea61b;        /* Ratings, premium, Gold membership */
  --zomato-green: #3ab757;       /* Veg indicator, success states */
  --zomato-green-dark: #1a8d37;  /* Pure veg restaurants */

  /* Surfaces */
  --zomato-white: #ffffff;
  --zomato-gray-50: #f8f8f8;     /* Page backgrounds */
  --zomato-gray-100: #f0f0f0;    /* Card backgrounds */
  --zomato-gray-400: #9c9c9c;    /* Secondary text */
  --zomato-gray-700: #3e4152;    /* Primary text */
  --zomato-gray-900: #1c1c1c;    /* Headings */
}

/* The veg/non-veg indicator is a critical cultural design element */
.food-indicator {
  width: 18px;
  height: 18px;
  border: 2px solid;
  border-radius: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.food-indicator.veg {
  border-color: var(--zomato-green);
}

.food-indicator.veg::after {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--zomato-green);
}

.food-indicator.non-veg {
  border-color: var(--zomato-red);
}

.food-indicator.non-veg::after {
  content: '';
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 8px solid var(--zomato-red);
}

/* Restaurant card */
.restaurant-card {
  background: var(--zomato-white);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: box-shadow 200ms ease;
}

.restaurant-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

/* Hero image with overlays */
.card-image {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

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

/* Discount badge: top-left */
.discount-badge {
  position: absolute;
  bottom: 12px;
  left: 12px;
  background: #2c365e;
  color: white;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
}

.discount-badge .amount {
  display: block;
  font-size: 17px;
}

/* Delivery time: bottom-right */
.delivery-time {
  position: absolute;
  bottom: 12px;
  right: 12px;
  background: rgba(255, 255, 255, 0.95);
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
}

/* Card content */
.card-content {
  padding: 12px 16px;
}

.restaurant-name {
  font-size: 17px;
  font-weight: 700;
  color: var(--zomato-gray-900);
  margin: 0;
}

/* Rating badge */
.rating-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--zomato-green-dark);
  color: white;
  padding: 2px 6px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
}

.card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--zomato-gray-400);
  font-size: 13px;
  margin-top: 4px;
}

.card-meta .separator {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--zomato-gray-400);
}

餐廳卡片解構：
┌─────────────────────────────────────┐
│  [        美食照片                ] │
│  [                                ] │
│  [ 6折優惠        ]   [ 25 分鐘 ] │
│  [ 最高折抵 ₹120  ]               │
├─────────────────────────────────────┤
│  Paradise Biryani                    │
│  ★ 4.3  ·  印度香飯、北印度料理    │
│  雙人 ₹300  ·  2.5 公里             │
└─────────────────────────────────────┘

購物車為空：
「美食永遠在烹調中！快去菜單裡點些美味佳餚吧。」

附近沒有餐廳：
「看來我們這裡還沒有餐廳。不過嘿，我們每天都在成長。」

搜尋無結果：
「我們找不到你要的東西。但我們找到了另外 847 個讓你吃飯的理由。」

訂單送出中：
「稍等！我們正在廚房裡尋找手腳最快的廚師。」

搜尋餐廳中：
「正在為你搜尋附近最棒的美食⋯⋯*戲劇性鼓聲*」

付款處理中：
「正在數你的錢⋯⋯開玩笑的啦，我們正在處理你的付款。」

「我們知道你餓了。我們一直都知道。」
「你的餐點移動的速度比你週一的工作動力還快。」
「劇情翻轉：晚餐也可以在午餐時間點。」
「我們的外送夥伴已經在路上了。試著別一直盯著地圖看。（我們知道你會的。）」

外送追蹤解構：
┌─────────────────────────────────────┐
│            [地圖視圖]                │
│                                      │
│    🏪 ─────── 🛵 ──────── 🏠       │
│   餐廳      外送夥伴     你的位置   │
│                                      │
├─────────────────────────────────────┤
│  預計 12 分鐘後到達                  │
│  ████████████░░░░░░ 65%             │
├─────────────────────────────────────┤
│  ✓ 訂單已確認            下午 4:02  │
│  ✓ 餐廳準備中            下午 4:05  │
│  ✓ 餐點已備妥            下午 4:18  │
│  → 外送夥伴已取餐        下午 4:22  │
│  ○ 配送途中                         │
│  ○ 即將抵達                         │
├─────────────────────────────────────┤
│  外送夥伴：Rahul                     │
│  [撥打電話]  [傳訊息]  [給小費]     │
└─────────────────────────────────────┘