/* ==========================================================================
   嗷嗷早午餐｜辦公室團購 — 設計系統
   色彩取自店家外送菜單：奶油底、暖橘、蜜桃、莓紅點綴，可可色文字
   ========================================================================== */

:root {
  --cream:        #FFF7EF;
  --cream-deep:   #FDEBD9;
  --surface:      #FFFFFF;
  --surface-alt:  #FFF2E2;
  --border:       #F2DFC8;
  --border-soft:  #F8ECDD;

  --ink:          #3B2A1D;
  --ink-mid:      #6E5947;
  --ink-soft:     #9B8574;

  --orange:       #F08A24;
  --orange-deep:  #D9700F;
  --orange-soft:  #FFE3C2;
  --peach:        #FFD7AE;
  --berry:        #E2607C;
  --berry-soft:   #FCE3E8;
  --leaf:         #4E9A5B;
  --leaf-soft:    #E4F1E4;

  --shadow-sm:  0 1px 2px rgba(90, 60, 30, .06), 0 2px 8px -4px rgba(90, 60, 30, .10);
  --shadow-md:  0 2px 6px rgba(90, 60, 30, .07), 0 12px 28px -14px rgba(90, 60, 30, .22);
  --shadow-lg:  0 8px 40px -12px rgba(90, 60, 30, .30);

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-pill: 999px;

  --font-ui: "Noto Sans TC", -apple-system, BlinkMacSystemFont, "PingFang TC", "Microsoft JhengHei", sans-serif;
  --font-num: "Baloo 2", "Noto Sans TC", -apple-system, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --cream:        #211913;
    --cream-deep:   #2A2019;
    --surface:      #2B211A;
    --surface-alt:  #362920;
    --border:       #45362B;
    --border-soft:  #3A2D24;

    --ink:          #F5E9DC;
    /* 深色模式下這兩個是大量說明文字、小標籤在用的顏色。原本的深度雖然
       數字上過得了 WCAG AA，但整頁都是同色系的暖棕色（背景也偏棕），
       實際看起來還是容易糊在一起、看不清楚，所以調亮一階讓次要文字更
       好辨識。 */
    --ink-mid:      #D6C4B5;
    --ink-soft:     #B4A190;

    --orange:       #F7A248;
    --orange-deep:  #FFB967;
    --orange-soft:  #4A3524;
    --peach:        #55402C;
    --berry:        #F08098;
    --berry-soft:   #46262E;
    --leaf:         #7FBF8B;
    --leaf-soft:    #26361F;

    --shadow-sm:  0 1px 2px rgba(0,0,0,.3), 0 2px 8px -4px rgba(0,0,0,.4);
    --shadow-md:  0 2px 6px rgba(0,0,0,.35), 0 12px 28px -14px rgba(0,0,0,.55);
    --shadow-lg:  0 8px 40px -12px rgba(0,0,0,.6);
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  /* 讓瀏覽器原生的表單控制項（主要是日期欄位的小日曆圖示）跟著同一個
     深色/淺色模式判斷來畫，不然深色模式下那顆日曆圖示預設是深灰色，
     跟深色背景幾乎融在一起、幾乎看不到有東西可以點。 */
  color-scheme: light dark;
}

/* ---------- 頁首 ---------- */

.topbar {
  background: linear-gradient(160deg, var(--orange) 0%, var(--orange-deep) 100%);
  position: relative;
  padding: 18px 20px 26px;
}

.topbar-inner {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  /* 標頭右上角掛了登出之類的按鈕時，寧可讓那些按鈕自己整組掉到下一行，
     也不要把「嗷嗷早午餐」這幾個字擠到換行——品牌名稱要完整、不斷行。 */
  flex-wrap: wrap;
  row-gap: 8px;
}
.topbar-brand { flex-shrink: 0; }

.paw {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  fill: #fff;
  opacity: .95;
}

.brand {
  font-weight: 900;
  font-size: 19px;
  letter-spacing: .04em;
  color: #fff;
  line-height: 1.2;
}

.brand-sub {
  font-size: 12px;
  letter-spacing: .18em;
  color: rgba(255,255,255,.82);
  font-weight: 500;
}

/* 標頭右側的動作區（例如店家後台的「登出」）：預設是空的、不佔空間，
   有內容時才會撐開、貼齊最右邊。按鈕用白色半透明的樣式，跟一般卡片
   裡用的 .btn-ghost（實色背景）不同——那個放在這片橘色底上會很突兀。 */
.topbar-actions {
  margin-left: auto;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.topbar-actions .btn {
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.55);
  color: #fff;
  white-space: nowrap;
}
.topbar-actions .btn:hover:not(:disabled) { background: rgba(255,255,255,.26); border-color: #fff; }
.topbar-actions .btn:disabled { opacity: .6; }

.topbar .wave {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  width: 100%;
  height: 18px;
  display: block;
  fill: var(--cream);
}

/* 用店家形象照當標頭的版本（發起揪團／點餐頁）：拿掉原本的內距，讓
   照片滿版貼齊上緣，底下波浪還是疊在上面當作跟頁面內容的過場，
   背後留著跟一般標頭一樣的橘色漸層，圖片載入前那一瞬間也不會空白。 */
.topbar-hero { padding: 0; }
.hero-banner { display: block; width: 100%; height: auto; }

/* ---------- 版面 ---------- */

.wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 22px 18px 120px;
}

h1 { font-size: 21px; font-weight: 900; margin: 0 0 6px; letter-spacing: .01em; text-wrap: balance; }
h2 { font-size: 15.5px; font-weight: 800; margin: 0; letter-spacing: .01em; }
p  { margin: 0 0 10px; }
p:last-child { margin-bottom: 0; }

.muted { color: var(--ink-mid); font-size: 13.5px; }
.tiny  { color: var(--ink-soft); font-size: 12.5px; }
.num   { font-family: var(--font-num); font-weight: 700; font-variant-numeric: tabular-nums; }

.card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  padding: 18px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-sm);
}

.card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  /* 保險：標題本身很長、又帶了一顆按鈕時，寧可整顆按鈕掉到下一行，
     也不要標題文字跟按鈕文字各自被擠到斷成兩行、變得很難讀。 */
  flex-wrap: wrap;
}
.card-head h2 { min-width: 0; }

.card-head .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--orange);
  flex-shrink: 0;
}

.card-head .spacer { margin-left: auto; }

/* ---------- 點餐頁最上面的行銷文案卡片 ---------- */
.promo-card p { margin: 0 0 10px; line-height: 1.7; }
.promo-card p:last-of-type { margin-bottom: 0; }
.promo-lead { font-weight: 800; font-size: 16.5px; }
.promo-rules div { padding: 3px 0; }

/* ---------- 店家後台：分頁列、區塊標題（不是卡片，跟內容的卡片區分開來） ---------- */

.vendor-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.section-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin: 24px 0 12px;
}
.section-head h2 { margin: 0; font-size: 15px; }
.section-head .spacer { margin-left: auto; }
.section-head:first-child { margin-top: 0; }

/* ---------- 提示區塊 ---------- */

.notice {
  border-radius: var(--r-md);
  padding: 13px 15px;
  font-size: 13.5px;
  line-height: 1.6;
  margin-bottom: 14px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.notice .ico { flex-shrink: 0; font-size: 15px; line-height: 1.4; }
.notice-info  { background: var(--surface-alt); color: var(--ink-mid); }
.notice-warn  { background: var(--berry-soft);  color: var(--berry); }
.notice-good  { background: var(--leaf-soft);   color: var(--leaf); }

/* ---------- 表單 ---------- */

.field { margin-bottom: 15px; }
.field:last-child { margin-bottom: 0; }

.field > label,
.field-label {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--ink-mid);
  margin-bottom: 6px;
}
.req { color: var(--berry); }

input[type="text"], input[type="tel"], input[type="email"],
input[type="date"], input[type="datetime-local"], select, textarea {
  width: 100%;
  max-width: 100%;
  padding: 11px 13px;
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
  font-size: 15px;
  font-family: inherit;
  background: var(--cream);
  color: var(--ink);
  transition: border-color .15s, background .15s;
}
/* select 原生就是瀏覽器預設樣式，沒特別處理的話會跟旁邊的輸入框、
   按鈕格格不入（方角、字體、顏色都對不上）。上面那條規則先讓它跟
   輸入框長得一樣，下拉箭頭本身交給瀏覽器自己畫——color-scheme 已經
   宣告過 light dark，瀏覽器會自動配一個跟深色/淺色模式一致的箭頭
   顏色，不用自己刻。 */
select { cursor: pointer; }
/* iOS（不管是 Safari 還是 iOS 版 Chrome，底層都是 WebKit）的日期欄位
   是已知的老問題：它顯示日期用的內部渲染有自己的一套最小寬度，
   在某些字體大小/地區格式（例如「2026年8月12日」這種較長的完整
   中文日期字串）下，畫出來的內容會比 CSS 設定的寬度還寬，直接畫出
   邊框外面，width:100% 攔不住。開發機（Chromium／WebKit 桌機版）
   都重現不出來，只能用 overflow:hidden 這種「不管你想畫多寬，反正
   邊框外一律裁掉」的保險做法硬擋下來。 */
input[type="date"], input[type="datetime-local"] { overflow: hidden; }
input:focus, textarea:focus {
  outline: none;
  border-color: var(--orange);
  background: var(--surface);
}
input::placeholder, textarea::placeholder { color: var(--ink-soft); }
textarea { resize: vertical; min-height: 62px; line-height: 1.6; }
input:disabled, textarea:disabled { background: var(--surface-alt); color: var(--ink-mid); cursor: not-allowed; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 480px) { .grid-2 { grid-template-columns: 1fr; } }

/* 分段選擇（取代 radio） */
.seg { display: flex; flex-wrap: wrap; gap: 8px; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg label {
  padding: 8px 16px;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--border);
  background: var(--cream);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-mid);
  cursor: pointer;
  transition: all .15s;
  user-select: none;
}
.seg label:hover { border-color: var(--peach); }
.seg input:checked + label,
.seg label.on {
  background: var(--orange);
  border-color: var(--orange);
  color: #fff;
  box-shadow: 0 2px 8px -2px rgba(240,138,36,.55);
}
.seg input:focus-visible + label { outline: 2px solid var(--orange); outline-offset: 2px; }

/* ---------- 按鈕 ---------- */

.btn {
  font-family: inherit;
  font-size: 15px;
  font-weight: 800;
  border: 1.5px solid transparent;
  border-radius: var(--r-pill);
  padding: 12px 24px;
  cursor: pointer;
  transition: transform .12s, box-shadow .15s, background .15s;
  letter-spacing: .02em;
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }

.btn-primary {
  background: var(--orange);
  color: #fff;
  /* 邊框跟陰影都用同色系的話，按鈕邊緣會糊進背景色裡、看起來像一團光暈
     貼在畫面上而不是一顆可以按的按鈕。改成深一階的描邊＋偏中性色的陰影，
     邊緣才切得出來，看起來才立體、像真的能按。 */
  border-color: var(--orange-deep);
  box-shadow: 0 3px 10px -3px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.25);
}
.btn-primary:hover:not(:disabled) { background: var(--orange-deep); border-color: var(--orange-deep); }
.btn-primary:active:not(:disabled) { box-shadow: inset 0 1px 6px rgba(0,0,0,.25); }

.btn-ghost {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--border);
}
.btn-ghost:hover:not(:disabled) { border-color: var(--orange); color: var(--orange-deep); }

.btn-danger { background: var(--berry-soft); color: var(--berry); }

.btn-block { display: block; width: 100%; }
.btn-sm { padding: 8px 16px; font-size: 13.5px; }
.btn-lg { padding: 16px 30px; font-size: 16.5px; }

/* ---------- 分類導覽 ---------- */

.chipnav {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 18px 12px;
  margin: 0 -18px;
  scrollbar-width: none;
  position: sticky;
  top: 0;
  z-index: 20;
  background: linear-gradient(var(--cream) 72%, transparent);
}
.chipnav::-webkit-scrollbar { display: none; }
.chipnav a {
  flex-shrink: 0;
  padding: 7px 15px;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1.5px solid var(--border-soft);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink-mid);
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  white-space: nowrap;
}
.chipnav a:hover { color: var(--orange-deep); border-color: var(--peach); }

/* ---------- 菜單品項 ---------- */

.cat-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 900;
  margin: 24px 2px 10px;
  scroll-margin-top: 60px;
}
.cat-title svg { width: 17px; height: 17px; fill: var(--orange); flex-shrink: 0; }
.cat-title .count { font-size: 12px; font-weight: 600; color: var(--ink-soft); }

.item {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  margin-bottom: 10px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .2s, border-color .2s;
}
.item.open { border-color: var(--peach); box-shadow: var(--shadow-md); }

.item-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  cursor: pointer;
}
.item-row:hover .item-name { color: var(--orange-deep); }

.item-body { flex: 1; min-width: 0; }
.item-name { font-weight: 800; font-size: 15px; line-height: 1.4; transition: color .15s; }
.item-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }

.tag {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: var(--surface-alt);
  color: var(--ink-mid);
  letter-spacing: .02em;
}
.tag-leaf { background: var(--leaf-soft); color: var(--leaf); }
.tag-berry { background: var(--berry-soft); color: var(--berry); }

.price-badge {
  flex-shrink: 0;
  min-width: 62px;
  height: 52px;
  padding: 0 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--orange-soft);
  border-radius: 52% 48% 47% 53% / 50% 52% 48% 50%;
  color: var(--orange-deep);
  font-family: var(--font-num);
  font-weight: 800;
  line-height: 1.05;
}
.price-badge .p { font-size: 17px; }
.price-badge .p-dual { font-size: 12.5px; }

.item-panel {
  display: none;
  padding: 2px 16px 16px;
  border-top: 1px dashed var(--border);
  margin-top: -1px;
}
.item.open .item-panel { display: block; }

/* 點餐清單裡的小縮圖，不改變原本的品項列高度與互動範圍 */
.item-thumb {
  width: 52px;
  height: 52px;
  border-radius: var(--r-sm);
  object-fit: cover;
  flex-shrink: 0;
}

/* 有 data-zoomable 的圖都能點擊放大 */
[data-zoomable] { cursor: zoom-in; }

/* 訂單已經送出過、還沒按「編輯我的餐點」之前，整塊菜單是唯讀的：
   點下去沒反應，用 pointer-events 直接擋掉，不用一個個元件另外判斷；
   調暗一點也讓人一眼看出「現在不能點」。 */
.menu-locked { opacity: .55; pointer-events: none; }

/* 「查看菜單」「你開過的團」這類次要動作固定懸浮在右下角，手機電腦都一樣，
   不用捲到頂端才找得到，也不會佔用表單的版面。 */
.fab-stack {
  position: fixed;
  right: 16px;
  bottom: 20px;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}
.fab-stack .btn {
  position: relative;
  /* 這兩顆是浮在整頁內容「上面」的。原本用跟背景同色系的卡片＋描邊，
     深色模式下還是不夠顯眼、存在感太低。改成跟主要按鈕同一套橘色實心
     風格（不用會隨深色模式一起變暗的色票，直接固定亮色），故意做得
     突兀一點，才會讓人一眼看到這裡有東西可以點。 */
  background: var(--orange);
  color: #fff;
  border-color: var(--orange-deep);
  box-shadow: 0 6px 20px -4px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.3);
}
.fab-stack .btn:hover:not(:disabled) { background: var(--orange-deep); border-color: var(--orange-deep); color: #fff; }
.fab-badge {
  position: absolute;
  top: -7px;
  right: -7px;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--berry);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-shadow: 0 0 0 2px var(--cream);
}
/* 點餐頁手機版底部有一條購物車列（.cartbar），懸浮按鈕要往上挪，不要疊在一起 */
@media (max-width: 899px) {
  .fab-stack.has-cartbar { bottom: 96px; }
}

/* 內文裡的小連結，跟著設計系統的色票走，不用瀏覽器預設的藍色底線 */
.link-inline { color: var(--orange-deep); font-weight: 700; }

/* ---------- 圖片放大檢視（Lightbox） ---------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(20, 14, 10, .82);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
  cursor: zoom-out;
}
.lightbox img {
  /* flex 子項預設 min-width:auto 會用「圖片原始寬度」蓋掉 max-width，
     螢幕比圖片窄的時候（我們的菜單圖是 1400px 寬）就會左右溢出版面，
     一定要明確歸零才會真的照 max-width 縮。 */
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  max-height: 100%;
  border-radius: var(--r-md);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .4);
  cursor: default;
}
.lightbox-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: none;
  background: rgba(255, 255, 255, .18);
  color: #fff;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.lightbox-close:hover { background: rgba(255, 255, 255, .3); }
body.lightbox-open { overflow: hidden; }

/* ---------- 通用浮窗（「你開過的團」這類小面板用） ---------- */

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 998;
  background: rgba(20, 14, 10, .55);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 64px 16px 40px;
  overflow-y: auto;
}
.modal-card-wrap {
  position: relative;
  width: 100%;
  max-width: 480px;
}
.modal-close {
  position: absolute;
  top: -14px;
  right: -8px;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: none;
  background: var(--ink);
  color: var(--cream);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}

.optgroup { margin-top: 14px; }
.optgroup-label {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .05em;
  color: var(--ink-soft);
  margin-bottom: 7px;
}
.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
  padding: 7px 14px;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--border);
  background: var(--cream);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-mid);
  cursor: pointer;
  transition: all .15s;
  font-family: inherit;
}
.chip:hover { border-color: var(--peach); }
.chip.on {
  background: var(--orange);
  border-color: var(--orange);
  color: #fff;
  box-shadow: 0 2px 8px -2px rgba(240,138,36,.55);
}

.panel-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
}

.stepper {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--cream);
  border: 1.5px solid var(--border);
  border-radius: var(--r-pill);
  padding: 3px;
}
.stepper button {
  width: 32px; height: 32px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-mid);
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
  font-family: var(--font-num);
  transition: background .15s, color .15s;
}
.stepper button:hover { background: var(--orange-soft); color: var(--orange-deep); }
.stepper .qty {
  min-width: 26px;
  text-align: center;
  font-family: var(--font-num);
  font-weight: 800;
  font-size: 16px;
}

/* ---------- 購物車 ---------- */

.cart-line {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px dashed var(--border);
}
.cart-line:last-child { border-bottom: none; }
.cart-line-body { flex: 1; min-width: 0; }
.cart-line-name { font-weight: 700; font-size: 14.5px; }
.cart-line-spec { color: var(--ink-soft); font-size: 12.5px; margin-top: 2px; }
.cart-line-note { width: 100%; margin-top: 6px; padding: 6px 10px; font-size: 12.5px; }
.cart-line-price { font-family: var(--font-num); font-weight: 800; color: var(--orange-deep); white-space: nowrap; }
.cart-x {
  border: none;
  background: none;
  color: var(--ink-soft);
  font-size: 18px;
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
}
.cart-x:hover { color: var(--berry); }

.cartbar {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 16px;
  width: calc(100% - 32px);
  max-width: 688px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-lg);
  padding: 10px 10px 10px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  z-index: 40;
}
.cartbar-info { line-height: 1.3; }
.cartbar-count { font-size: 12px; color: var(--ink-soft); font-weight: 600; }
.cartbar-total { font-family: var(--font-num); font-weight: 800; font-size: 19px; color: var(--ink); }

/* ---------- 統計 ---------- */

.stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}
.stat {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  padding: 14px 12px;
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.stat-num { font-family: var(--font-num); font-weight: 800; font-size: 24px; line-height: 1.1; color: var(--ink); }
.stat-num.accent { color: var(--orange-deep); }
.stat-label { font-size: 11.5px; color: var(--ink-soft); font-weight: 600; letter-spacing: .05em; margin-top: 3px; }

.progress {
  height: 8px;
  background: var(--surface-alt);
  border-radius: var(--r-pill);
  overflow: hidden;
  margin: 10px 0 6px;
}
.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--orange), var(--orange-deep));
  border-radius: var(--r-pill);
  transition: width .5s cubic-bezier(.4,0,.2,1);
}
.progress-fill.done { background: linear-gradient(90deg, var(--leaf), #3F8A4C); }

/* ---------- 依人員分組的訂單 ---------- */

.person {
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  padding: 13px 15px;
  margin-bottom: 10px;
  background: var(--cream);
}
.person-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.person-name { font-weight: 800; font-size: 14.5px; }
.person-total { font-family: var(--font-num); font-weight: 800; color: var(--orange-deep); }
.person-item {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 13.5px;
  color: var(--ink-mid);
  padding: 3px 0;
}
.person-item .q { font-family: var(--font-num); font-weight: 700; color: var(--ink); white-space: nowrap; }

/* ---------- 連結盒 ---------- */

.linkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--cream);
  border: 1.5px dashed var(--border);
  border-radius: var(--r-md);
  padding: 11px 13px;
}
.linkbox code {
  flex: 1;
  min-width: 0;
  font-size: 12.5px;
  color: var(--ink-mid);
  word-break: break-all;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  line-height: 1.5;
}

/* ---------- 其他 ---------- */

.badge {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 800;
  padding: 3px 11px;
  border-radius: var(--r-pill);
  background: var(--leaf-soft);
  color: var(--leaf);
  letter-spacing: .03em;
}
.badge.warn { background: var(--berry-soft); color: var(--berry); }
.badge.done { background: var(--border-soft); color: var(--ink-soft); }

.countdown {
  font-family: var(--font-num);
  font-weight: 800;
  color: var(--orange-deep);
}

.meta-row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 0;
  border-bottom: 1px dashed var(--border-soft);
  font-size: 13.5px;
}
.meta-row:last-child { border-bottom: none; }
.meta-row dt { color: var(--ink-soft); flex-shrink: 0; font-weight: 600; }
.meta-row dd { margin: 0; text-align: right; font-weight: 600; }

/* 店家後台訂單卡片的訂購資訊小方格——特地用跟卡片本身不同的底色，
   一眼就看得出這塊是獨立的「客人資訊」區塊。寬螢幕自動排成一整排，
   窄螢幕收成兩三欄，用最小的高度塞下六項欄位。 */
.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(108px, 1fr));
  gap: 7px 12px;
  margin: 0 0 12px;
  padding: 9px 12px;
  background: var(--orange-soft);
  border-radius: var(--r-md);
}
.info-cell { min-width: 0; margin: 0; }
.info-cell dt { font-size: 10.5px; color: var(--ink-soft); font-weight: 600; line-height: 1.3; }
.info-cell dd {
  margin: 1px 0 0; font-size: 13px; font-weight: 700; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Email、備註這種長內容——佔滿整排、允許換行，寧可多佔一點高度
   也不要把內容截斷看不到。 */
.info-cell-wide { grid-column: 1 / -1; }
.info-cell-wide dd { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }

.empty {
  text-align: center;
  padding: 34px 20px;
  color: var(--ink-soft);
}
.empty svg { width: 46px; height: 46px; fill: var(--border); margin-bottom: 10px; }

.center-msg { text-align: center; padding: 60px 20px; }
.center-msg svg { width: 58px; height: 58px; fill: var(--peach); margin-bottom: 14px; }

.foot {
  text-align: center;
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.8;
  padding: 26px 0 6px;
}
.foot strong { color: var(--ink-mid); font-weight: 700; }

.spin {
  display: inline-block;
  width: 15px; height: 15px;
  border: 2px solid var(--orange-soft);
  border-top-color: var(--orange);
  border-radius: 50%;
  animation: spin .7s linear infinite;
  vertical-align: -2px;
}
@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ==========================================================================
   RWD — 手機優先，平板加寬，桌機改成雙欄
   ========================================================================== */

/* 主欄 + 側欄的容器；手機時自然變成單欄堆疊 */
.layout { display: block; }
.col-side > .card:last-of-type { margin-bottom: 14px; }

/* 沒有低消門檻（自己去取、或沒設金額）時這塊是空的，直接不佔位子，
   跟它並排的分享連結卡片才能自動撐滿整排。 */
#minOrderCard:empty { display: none; }
/* #minOrderCard 是外層包一層的 div，.top-row 的 stretch 只會撐高這層
   包裝，裡面真正的 .card 不會跟著長高，要自己再撐一次才會跟右邊的卡片
   等高，不然裡面的卡片還是比較矮、下面留一截空的包裝殼。 */
#minOrderCard { display: flex; }
#minOrderCard > .card { flex: 1; margin-bottom: 0; }

/* 主揪的姓名/狀態放左邊，這團的預訂日期放右邊。手機寬度不夠時自然換行，
   日期那塊還是靠右對齊。 */
.admin-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.admin-head h1 { margin-bottom: 4px; }
.admin-head-date { text-align: right; }
.admin-head-date-val { font-family: var(--font-num); font-weight: 800; font-size: 17px; color: var(--ink); white-space: nowrap; }

/* 購物車 / 送單列的小計 */
.cart-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: 12px;
  margin-top: 4px;
  border-top: 2px solid var(--border);
  font-weight: 800;
}
.cart-total .amount { font-family: var(--font-num); font-size: 21px; color: var(--orange-deep); }

/* 店家後台的訂單卡片：總計＋標記完成擠在同一列，按鈕靠右、故意做大顆一點，
   方便店家在手機／平板上快速點按，不用另外滑到下面找一顆滿版按鈕。 */
.order-card-foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 12px;
  margin-top: 4px;
  border-top: 2px solid var(--border);
}
.order-card-foot .label { font-weight: 800; }
.order-card-foot .amount {
  margin-left: auto;
  font-family: var(--font-num);
  font-weight: 800;
  font-size: 21px;
  color: var(--orange-deep);
}

/* 桌機版的送單按鈕：手機隱藏（手機用底部浮動列） */
.side-submit { display: none; }

/* ---------- 小手機 ---------- */
@media (max-width: 379px) {
  body { font-size: 14.5px; }
  .wrap { padding: 18px 14px 110px; }
  h1 { font-size: 19px; }
  .card { padding: 15px; border-radius: 18px; }
  .price-badge { min-width: 56px; height: 48px; }
  .price-badge .p { font-size: 15.5px; }
  .item-row { padding: 12px 13px; gap: 10px; }
  .cartbar { padding-left: 16px; }
  .cartbar-total { font-size: 17px; }
  .stat-num { font-size: 20px; }
  .stat { padding: 12px 8px; }
  .chip, .seg label { padding: 7px 12px; font-size: 13px; }
}

/* ---------- 平板 ---------- */
@media (min-width: 600px) {
  body { font-size: 15.5px; }
  .wrap { max-width: 760px; padding: 28px 24px 130px; }
  .topbar { padding: 22px 24px 30px; }
  .topbar-inner { max-width: 760px; }
  .paw { width: 44px; height: 44px; }
  .brand { font-size: 21px; }
  h1 { font-size: 25px; }
  .card { padding: 22px; }
  .item-row { padding: 16px 18px; }
  .item-panel { padding: 4px 18px 18px; }
  .stat-num { font-size: 28px; }
  .stat { padding: 18px 14px; }
  .cat-title { font-size: 17.5px; margin-top: 28px; }
  .price-badge { min-width: 70px; height: 58px; }
  .price-badge .p { font-size: 19px; }
  .price-badge .p-dual { font-size: 13.5px; }
  .cartbar { padding: 12px 12px 12px 24px; }
  .cartbar-total { font-size: 21px; }

  /* 「外送低消」跟「分享給同事的點餐連結」寬度夠了就左右並排。
     外送低消卡片是有條件才出現的，用 flex 而不是 grid：空的時候
     另一塊自然撐滿整排，不會留白。 */
  /* align-items 用 stretch（預設值），讓兩張卡片一樣高——外送低消卡片
     內容通常比較少，不然會比旁邊分享連結的卡片矮一截，看起來對不齊。 */
  .top-row { display: flex; align-items: stretch; gap: 16px; }
  .top-row > * { flex: 1 1 0; min-width: 0; margin-bottom: 14px; }
}

/* ---------- 桌機：雙欄 ---------- */
@media (min-width: 900px) {
  .wrap { max-width: 1080px; padding: 32px 32px 60px; }
  .topbar { padding: 24px 32px 32px; }
  .topbar-inner { max-width: 1080px; }

  .layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 26px;
    align-items: start;
  }

  .col-side {
    position: sticky;
    top: 24px;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    scrollbar-width: thin;
    padding-bottom: 4px;
  }

  /* 桌機不需要底部浮動列，側欄就看得到全部資訊 */
  .cartbar { display: none; }
  .side-submit { display: block; }

  /* 分類導覽貼在主欄上方 */
  .chipnav {
    margin: 0 0 4px;
    padding: 2px 0 12px;
    background: linear-gradient(var(--cream) 68%, transparent);
  }

  /* 建立揪團的表單改成雙欄 */
  .form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start;
  }
  .form-grid > .card { margin-bottom: 0; }
  #cardWho  { grid-column: 1; grid-row: 1; }
  #cardWhen { grid-column: 2; grid-row: 1 / span 2; }
  #cardBill { grid-column: 1; grid-row: 2; }
  .form-grid > .full { grid-column: 1 / -1; }

  /* 建立成功後的結果頁不需要那麼寬 */
  .narrow { max-width: 620px; }

  .stat-num { font-size: 30px; }
  .empty { padding: 40px 20px; }
}

/* ---------- 大桌機 ---------- */
@media (min-width: 1200px) {
  .wrap { max-width: 1140px; }
  .topbar-inner { max-width: 1140px; }
  .layout { grid-template-columns: minmax(0, 1fr) 370px; gap: 30px; }
}

/* 滑鼠裝置才做 hover 效果，避免手機點擊後殘留樣式 */
@media (hover: none) {
  .item-row:hover .item-name { color: inherit; }
  .chip:hover, .seg label:hover { border-color: var(--border); }
}

/* 建立揪團頁：表單在桌機不要拉得太寬，結果卡片再收窄一點 */
@media (min-width: 900px) {
  .form-grid { max-width: 900px; margin: 0 auto; }
  /* 只有首頁的大標題／說明文字要在桌機置中收窄，用 .page-hero 特別標記
     這兩個元素——原本用 #page > h1 這種通用選取器，結果連 admin.html／
     order.html／vendor.html 的標題也一起被置中歪掉了，同一份 style.css
     是四個頁面共用的，選取器不能只想著自己那一頁。 */
  #rules, .page-hero { max-width: 900px; margin-left: auto; margin-right: auto; }
  .narrow { max-width: 620px; margin: 0 auto; }
}

/* 桌機時，頁面最上方的揪團摘要改成橫向三欄，不要左右拉太開 */
@media (min-width: 900px) {
  .summary dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 28px; }
  .summary .meta-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    border-bottom: none;
    padding: 6px 0;
  }
  .summary .meta-row dd { text-align: left; font-size: 15px; }
}