/* FoodMap 設計系統 — Neumorphism 柔和擬物 (V14.1)
 * 主色 #4A7C59；所有色碼集中於 :root 變數，禁止在元件中硬寫色碼。
 * 雙模式: body.lite (省流量) / body.full (3D 完整版)
 * 權限隔離: .fm-fullonly (僅 Full 模式顯示) / .fm-lteonly (僅 Lite 模式)
 * PDPO 合規: .fm-pdpo (私隱提示區)
 */
:root {
  --fm-primary: #4A7C59;
  --fm-primary-soft: #5b8f6b;
  --fm-primary-dark: #3a6347;
  --fm-bg: #e8edea;
  --fm-bg-2: #eef2ef;
  --fm-text: #2f3b34;
  --fm-text-soft: #6b7a70;
  --fm-danger: #c2554d;
  --fm-warn: #c79a3e;
  --fm-ok: #4A7C59;
  --fm-shadow-dark: #c5ccc7;
  --fm-shadow-light: #ffffff;
  --fm-surface: #ffffff;
  --fm-border: #d7deda;
  --fm-shadow-lg: 0 10px 28px rgba(31, 41, 35, 0.16);
  --fm-radius: 18px;
  --fm-radius-sm: 12px;
  --fm-gap: 16px;
  --fm-maxw: 1080px;
  /* Lite 模式節流變數 */
  --fm-lite-fps: 30;
}

/* ── 全域盒模型重置（修復輸入框超出邊框問題）── */
*, *::before, *::after { box-sizing: border-box; }

/* ── Neumorphism 卡片 ── */
.fm-card {
  background: var(--fm-bg);
  border-radius: var(--fm-radius);
  box-shadow: 8px 8px 18px var(--fm-shadow-dark), -8px -8px 18px var(--fm-shadow-light);
  padding: 20px;
}
.fm-card-inset {
  background: var(--fm-bg);
  border-radius: var(--fm-radius);
  box-shadow: inset 6px 6px 12px var(--fm-shadow-dark), inset -6px -6px 12px var(--fm-shadow-light);
  padding: 16px;
}

/* ── 按鈕 ── */
.fm-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: none; cursor: pointer; font-size: 15px; font-weight: 600;
  color: #fff; background: var(--fm-primary);
  border-radius: var(--fm-radius-sm); padding: 12px 20px;
  box-shadow: 5px 5px 12px var(--fm-shadow-dark), -5px -5px 12px var(--fm-shadow-light);
  transition: transform .08s ease, filter .15s ease;
}
.fm-btn:active { transform: translateY(1px); }
.fm-btn.ghost { background: var(--fm-bg); color: var(--fm-primary); }
.fm-btn.block { width: 100%; }
.fm-btn:disabled { filter: grayscale(.6) opacity(.6); cursor: not-allowed; }

/* ── 輸入 ── */
.fm-input, .fm-select, .fm-textarea {
  width: 100%; border: none; background: var(--fm-bg); color: var(--fm-text);
  border-radius: var(--fm-radius-sm); padding: 12px 14px; font-size: 15px;
  box-shadow: inset 4px 4px 8px var(--fm-shadow-dark), inset -4px -4px 8px var(--fm-shadow-light);
  outline: none;
}
.fm-input:focus, .fm-textarea:focus { box-shadow: inset 4px 4px 8px var(--fm-shadow-dark), inset -4px -4px 8px var(--fm-shadow-light), 0 0 0 2px var(--fm-primary-soft); }
.fm-label { display: block; font-size: 13px; color: var(--fm-text-soft); margin: 12px 0 6px; font-weight: 600; }

/* ── 標籤 / 徽章 ── */
.fm-badge { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--fm-bg); color: var(--fm-primary); box-shadow: 3px 3px 6px var(--fm-shadow-dark), -3px -3px 6px var(--fm-shadow-light); }
.fm-badge.green { color: var(--fm-ok); }
.fm-badge.three-d { color: #fff; background: var(--fm-primary); box-shadow: 3px 3px 6px var(--fm-shadow-dark); }
.fm-pill { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: 12px; background: var(--fm-bg-2); color: var(--fm-text-soft); margin: 3px 4px 3px 0; }

/* ── 佈局 ── */
.fm-container { max-width: var(--fm-maxw); margin: 0 auto; padding: 16px; }
.fm-row { display: flex; gap: var(--fm-gap); flex-wrap: wrap; }
.fm-col { flex: 1 1 280px; min-width: 0; }
.fm-tabs { display: flex; flex-wrap: wrap; gap: 8px; padding: 6px; border-radius: var(--fm-radius-sm); background: var(--fm-bg); box-shadow: inset 3px 3px 6px var(--fm-shadow-dark), inset -3px -3px 6px var(--fm-shadow-light); }
.fm-tab { padding: 10px 16px; border-radius: var(--fm-radius-sm); cursor: pointer; font-weight: 600; color: var(--fm-text-soft); white-space: nowrap; }
.fm-tab.active { background: var(--fm-primary); color: #fff; box-shadow: 3px 3px 6px var(--fm-shadow-dark); }
.fm-hidden { display: none !important; }
.fm-muted { color: var(--fm-text-soft); }
.fm-err { color: var(--fm-danger); font-size: 13px; min-height: 18px; }
.fm-score { display: flex; align-items: center; gap: 8px; }
.fm-score input { flex: 1; accent-color: var(--fm-primary); }
.fm-score-val { font-weight: 700; color: var(--fm-primary); min-width: 40px; text-align: right; }

/* ── 頂欄 ── */
.fm-topbar {
  display: flex; align-items: center; padding: 12px 16px; gap: 8px;
  background: var(--fm-bg); box-shadow: 4px 4px 10px var(--fm-shadow-dark), -4px -4px 10px var(--fm-shadow-light);
  position: sticky; top: 0; z-index: 100;
}
.fm-topbar .brand { font-size: 18px; font-weight: 800; color: var(--fm-primary); text-decoration: none; }
.fm-spacer { flex: 1; }
.fm-topbar .fm-btn { font-size: 13px; padding: 6px 14px; }

/* ── PDPO 私隱提示 ── */
.fm-pdpo { background: var(--fm-bg-2); border-radius: var(--fm-radius-sm); padding: 12px 16px; margin: 16px 0; box-shadow: inset 2px 2px 4px var(--fm-shadow-dark); }
.fm-pdpo p { margin: 0 0 4px; font-size: 13px; color: var(--fm-text-soft); }

/* ── Lite / Full 雙模式 ── */
body.lite .fm-fullonly { display: none !important; }
body.lite .fm-3d-canvas { display: none !important; }
body.lite .fm-3d-canvas.lite-always { display: block !important; }
body.full .fm-fullonly { display: flex !important; }
body.full .fm-3d-canvas { display: block !important; }

/* Lite 模式下縮減 3D canvas 資源消耗 */
body.lite .fm-3d-canvas {
  max-width: 100%;
  height: auto !important;
}

/* ── 響應式 ── */
.photo-preview { margin-top:8px; }
.photo-preview img, .upload-preview { max-width:200px; border-radius:8px; object-fit:cover; max-height:150px; }

@media (max-width: 640px) {
  .fm-container { padding: 12px; }
  .fm-topbar { padding: 10px 12px; }
  .fm-topbar .brand { font-size: 16px; }
}

/* ============================================================
 * FoodMap 共用元件 — Chips（菜系複選 / 餐廳類別單選 / 設施）
 * + 步驟3 媒體選擇器（門面・室內照片 / 影片 / 3D）
 * 掛載頁面：auth-merchant-onboarding.html、merchant.html
 * 邏輯：/js/fm-media.js
 * 注意：.chip / .chip-group 此前從未定義，導致 33 個菜系只渲染成
 *       無樣式、無游標、無選中態的純文字 → 使用者「睇唔到、點唔到」。
 * ============================================================ */

/* ── Chips ── */
.chip-group { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 4px; }
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 8px 14px; border-radius: 999px;
  font-size: 13px; font-weight: 600; line-height: 1.25;
  color: var(--fm-text-soft); background: var(--fm-bg);
  border: 1px solid var(--fm-border);
  box-shadow: 3px 3px 6px var(--fm-shadow-dark), -3px -3px 6px var(--fm-shadow-light);
  cursor: pointer; user-select: none; white-space: nowrap;
  transition: transform .08s ease, background .15s ease, color .15s ease, box-shadow .15s ease;
}
.chip:hover { color: var(--fm-primary); border-color: var(--fm-primary-soft); }
.chip:active { transform: translateY(1px); }
.chip:focus-visible { outline: 2px solid var(--fm-primary-soft); outline-offset: 2px; }
.chip.on {
  color: #fff; background: var(--fm-primary); border-color: var(--fm-primary);
  box-shadow: inset 2px 2px 5px rgba(0,0,0,.18), 2px 2px 5px var(--fm-shadow-dark);
}
.chip.on::before { content: "✓"; font-size: 11px; line-height: 1; }

/* ── 媒體選擇器（照片 / 影片 / 3D）── */
.fm-media { margin: 6px 0 10px; }
.fm-media-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fm-media-bar .fm-btn { font-size: 12px; padding: 7px 12px; }
.fm-media-count { font-size: 12px; color: var(--fm-text-soft); }
.fm-media-count b { color: var(--fm-primary); font-size: 14px; }
.fm-media-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 10px; margin-top: 10px;
}
.fm-media-tile {
  position: relative; aspect-ratio: 1 / 1; border-radius: 10px; overflow: hidden;
  background: var(--fm-bg-2); border: 2px solid transparent; cursor: pointer;
  box-shadow: 2px 2px 6px var(--fm-shadow-dark);
  transition: transform .08s ease, border-color .15s ease;
}
.fm-media-tile:active { transform: translateY(1px); }
.fm-media-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fm-media-tile.sel { border-color: var(--fm-primary); box-shadow: 0 0 0 3px rgba(74,124,89,.18); }
.fm-media-tile .tick {
  position: absolute; top: 4px; right: 4px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--fm-primary); color: #fff; font-size: 11px; line-height: 18px; text-align: center;
  display: none;
}
.fm-media-tile.sel .tick { display: block; }
.fm-media-tile .tag {
  position: absolute; left: 0; right: 0; bottom: 0;
  font-size: 10px; padding: 3px 4px; text-align: center;
  background: rgba(0,0,0,.55); color: #fff; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.fm-media-tile.pending .tag { background: rgba(199,154,62,.9); }
/* 「設封面」按鈕（多選模式唯一寫入 is_default 的入口）*/
.fm-media-tile .setdef {
  position: absolute; top: 4px; left: 4px;
  border: none; cursor: pointer;
  font-size: 10px; font-weight: 700; line-height: 1;
  padding: 4px 6px; border-radius: 6px;
  background: rgba(255,255,255,.92); color: var(--fm-primary);
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.fm-media-tile .setdef:hover { background: var(--fm-primary); color: #fff; }
.fm-media-empty { font-size: 12px; color: var(--fm-text-soft); padding: 8px 0; }
.fm-media-pdpo {
  font-size: 11px; line-height: 1.5; color: var(--fm-text-soft);
  margin-top: 8px; padding: 8px 10px; border-radius: 8px;
  background: var(--fm-bg-2); border-left: 3px solid var(--fm-warn);
}
.fm-media-note { font-size: 13px; margin: 0 0 10px; color: var(--fm-text); }

/* ── 資源列（影片 / 3D）── */
.fm-res-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 12px; margin-bottom: 8px;
  border-radius: 10px; background: var(--fm-bg-2);
  box-shadow: inset 2px 2px 5px var(--fm-shadow-dark);
}
.fm-res-row .ic { font-size: 20px; line-height: 1; }
.fm-res-row .fm-btn { font-size: 12px; padding: 7px 12px; }

/* ── 私隱確認彈窗（上載前人流模糊）── */
.fm-media-modal {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(20,28,24,.55);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.fm-media-modal-box {
  background: var(--fm-bg); border-radius: var(--fm-radius);
  box-shadow: var(--fm-shadow-lg);
  width: 100%; max-width: 420px; max-height: 90vh; display: flex; flex-direction: column;
  overflow: hidden;
}
.fm-media-modal-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--fm-border);
  color: var(--fm-primary); font-size: 15px;
}
.fm-media-x {
  border: none; background: transparent; cursor: pointer;
  font-size: 16px; color: var(--fm-text-soft); padding: 2px 6px;
}
.fm-media-modal-bd { padding: 16px; overflow-y: auto; }
.fm-media-modal-ft {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 12px 16px; border-top: 1px solid var(--fm-border);
}
.fm-media-modal-ft .fm-btn { font-size: 13px; padding: 9px 16px; }
.fm-media-blurprev {
  width: 100%; border-radius: 10px; display: block; margin-bottom: 10px;
  max-height: 240px; object-fit: contain; background: var(--fm-bg-2);
}
.fm-media-check {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 12px; color: var(--fm-text-soft); margin: 10px 0 4px; cursor: pointer;
}
.fm-media-check input { margin-top: 2px; accent-color: var(--fm-primary); }
.fm-media-vid { width: 100%; border-radius: 10px; display: block; margin-bottom: 10px; background: #000; }

@media (max-width: 640px) {
  .chip { padding: 7px 12px; font-size: 12px; }
  .fm-media-grid { grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 8px; }
  .fm-res-row { padding: 9px 10px; }
}

/* 2026-09-20 brand logo img */
.fm-topbar .brand { display: inline-flex; align-items: center; }
.fm-topbar .brand img { height: 36px; width: auto; display: block; }