/* BookingGO 共用樣式（f0）
 * 抄 Lesson Go 的零 build 架構，但色票與元件是 BookingGO 自己的
 * （Round 5 複驗：Lesson Go 只有 6/16 頁使用 --lg-*，無全站色票可沿用）。
 * 本檔無內容雜湊 → 不得設長效 immutable 快取（見 public/_headers 註解）。
 */

:root {
  /* BookingGO brand（2026-11-02 Jerry 定稿）：深藍＋金＋米白，與 LINE 頭像／封面／圖文選單同一套。
   * 設計稿：dev-standards/docs/BookingGO/bookinggo_web_{home,book,calendar}_mock.png
   * 內容區一律米白卡＋深藍字；深藍＋金只用在頁首、主要按鈕與已選取狀態。 */
  --bg-page: #F5F2EB;
  --bg-surface: #FBF9F4;
  --bg-surface-2: #EEE8DB;

  --bg-primary: #1E3556;
  --bg-primary-dark: #16294A;
  --bg-primary-soft: #E5EBF3;
  --bg-blue: #3B6496;
  --bg-gold: #B8955D;
  --bg-gold-soft: #EADFC9;

  --bg-text: #1B2A44;
  --bg-text-sub: #5A6274;
  --bg-text-muted: #8C92A0;

  --bg-border: #DCCDB0;
  --bg-warning: #B4690E;
  --bg-warning-bg: #FDF3E3;
  --bg-error: #C0392B;
  --bg-error-bg: #FDECEA;
  --bg-success: #2D6B3C;
  --bg-success-bg: #DCEFD8;

  --bg-radius: 14px;
  --bg-shadow: 0 2px 10px rgba(30, 53, 86, 0.08);
  --bg-header: radial-gradient(120% 140% at 70% 0%, #3B6496 0%, #1E3556 55%, #16294A 100%);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang TC',
               'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
  background: var(--bg-page);
  color: var(--bg-text);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

.wrap {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  padding: 16px;
}

/* 置中的載入／錯誤畫面 */
.center {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
}

.brand {
  font-size: 22px;
  font-weight: 700;
  color: var(--bg-primary);
  font-family: 'Noto Serif TC', 'Songti TC', 'PMingLiU', serif;
  letter-spacing: 1px;
  margin-bottom: 24px;
}

.spinner {
  width: 34px;
  height: 34px;
  border: 3px solid var(--bg-border);
  border-top-color: var(--bg-gold);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
  margin-bottom: 16px;
}
@keyframes spin { to { transform: rotate(360deg); } }

.msg { color: var(--bg-text-sub); font-size: 15px; line-height: 1.6; }
.msg-strong { color: var(--bg-text); font-size: 17px; font-weight: 600; margin-bottom: 8px; }

.errcode {
  margin-top: 20px;
  font-size: 12px;
  color: var(--bg-text-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.card {
  background: var(--bg-surface);
  border: 1px solid var(--bg-border);
  border-radius: var(--bg-radius);
  box-shadow: var(--bg-shadow);
  padding: 16px;
  margin-bottom: 12px;
}

.card-title { font-size: 15px; font-weight: 600; margin-bottom: 10px; }

label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; }

input[type="text"], input[type="tel"] {
  width: 100%;
  font-size: 16px;           /* iOS 小於 16px 會自動放大頁面 */
  padding: 12px;
  border: 1px solid var(--bg-border);
  border-radius: 10px;
  background: var(--bg-surface);
  color: var(--bg-text);
  margin-bottom: 14px;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--bg-gold-soft); border-color: var(--bg-gold); }

.btn {
  display: block;
  width: 100%;
  font-size: 16px;
  font-weight: 600;
  padding: 14px;
  border: 1px solid var(--bg-gold);
  border-radius: 10px;
  background: var(--bg-primary);
  color: #fff;
  box-shadow: 0 2px 8px rgba(30, 53, 86, 0.18);
  cursor: pointer;
}
.btn:disabled { background: var(--bg-text-muted); border-color: var(--bg-text-muted); box-shadow: none; cursor: default; }
.btn-ghost {
  background: var(--bg-surface);
  color: var(--bg-primary);
  border: 1px solid var(--bg-gold);
  box-shadow: none;
}

.hint { font-size: 13px; color: var(--bg-text-sub); line-height: 1.6; margin-bottom: 14px; }

.alert {
  border-radius: 10px;
  padding: 12px;
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 12px;
}
.alert-error { background: var(--bg-error-bg); color: var(--bg-error); }
.alert-warn  { background: var(--bg-warning-bg); color: var(--bg-warning); }

/* 首頁頁首（深藍＋金色光弧＋頭像） */
.hero {
  position: relative;
  overflow: hidden;
  margin: -16px -16px 16px;
  padding: 26px 20px 30px;
  background: var(--bg-header);
  color: #fff;
  display: flex;
  align-items: center;
  gap: 14px;
}
.hero::after {   /* 金色光弧 */
  content: '';
  position: absolute;
  left: -20%; right: -20%; bottom: -60px; height: 90px;
  border-top: 2px solid var(--bg-gold);
  border-radius: 50%;
  box-shadow: 0 -2px 12px rgba(184, 149, 93, 0.55);
  pointer-events: none;
}
.hero-logo { width: 76px; height: 76px; border-radius: 50%; flex: 0 0 auto; box-shadow: 0 0 0 2px var(--bg-gold), 0 0 16px rgba(184, 149, 93, 0.5); }
.hero-name { font-family: 'Noto Serif TC', 'Songti TC', 'PMingLiU', serif; font-size: 30px; font-weight: 700; letter-spacing: 2px; line-height: 1.2; }
.hero-en { font-size: 17px; font-weight: 700; color: var(--bg-gold); letter-spacing: 0.5px; }
.hero-who { position: absolute; right: 18px; bottom: 10px; font-size: 13px; color: #E9EEF6; z-index: 1; }

/* 首頁功能格 */
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }

.tile {
  background: var(--bg-surface);
  border: 1px solid var(--bg-gold);
  border-radius: var(--bg-radius);
  box-shadow: var(--bg-shadow);
  padding: 22px 12px 18px;
  text-align: center;
  text-decoration: none;
  color: var(--bg-text);
  display: block;
}
.tile-icon { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin: 0 auto 10px; border-radius: 50%; border: 1.5px solid var(--bg-gold); }
.tile-icon svg { width: 34px; height: 34px; stroke: var(--bg-primary); }
.tile-name { font-size: 19px; font-weight: 700; letter-spacing: 1px; }
.tile-sub { display: block; font-size: 12px; color: var(--bg-text-sub); margin-top: 4px; }
.tile[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }
/* 主要入口：深藍卡＋金色發光邊 */
.tile-hero { background: var(--bg-header); color: #fff; box-shadow: 0 0 0 1px var(--bg-gold), 0 0 14px rgba(184, 149, 93, 0.45); }
.tile-hero .tile-icon svg { stroke: var(--bg-gold); }
.tile-hero .tile-sub { color: var(--bg-gold-soft); }

.tile-wide { display: flex; align-items: center; gap: 14px; text-align: left; padding: 14px 16px; margin-bottom: 12px; }
.tile-wide .tile-icon { margin: 0; width: 44px; height: 44px; border: none; }
.tile-wide .tile-icon svg { stroke: var(--bg-gold); width: 30px; height: 30px; }
.tile-wide .tile-body { flex: 1; }
.tile-wide::after { content: '›'; font-size: 26px; color: var(--bg-gold); line-height: 1; }

/* 深藍卡（首頁商家管理／平台管理） */
.card-dark { background: var(--bg-header); border-color: var(--bg-gold); color: #fff; }
.card-dark .option { background: transparent; color: #fff; border-color: rgba(184, 149, 93, 0.6); }
.card-dark .option-sub { color: #D5DCE8; }

/* ---------- f2a：預約／我的預訂／教練 ---------- */

/* 各頁頁首：深藍滿版橫條＋金色光弧（.wrap 有 16px padding，用負邊距撐滿） */
.topbar {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  margin: -16px -16px 16px;
  padding: 22px 16px 26px;
  background: var(--bg-header);
  color: #fff;
}
.topbar::after {
  content: '';
  position: absolute;
  left: -20%; right: -20%; bottom: -50px; height: 70px;
  border-top: 2px solid var(--bg-gold);
  border-radius: 50%;
  box-shadow: 0 -2px 10px rgba(184, 149, 93, 0.5);
  pointer-events: none;
}
.topbar-back { color: #fff; text-decoration: none; font-size: 15px; padding: 6px 8px 6px 0; position: relative; z-index: 1; }
/* 22px：Jerry 2026-10-05「每個功能的標題字要大一點，才看得出來」 */
.topbar-title { flex: 1; text-align: center; font-size: 22px; font-weight: 700; letter-spacing: 1px; margin-right: 44px; }

a.btn { text-align: center; text-decoration: none; }
.btn-gap { margin-top: 10px; }
.btn-small { width: auto; font-size: 14px; padding: 9px 14px; }

/* 單選清單（門市、項目） */
.option {
  display: block;
  width: 100%;
  text-align: left;
  font-size: 15px;
  padding: 12px;
  margin-bottom: 8px;
  border: 1px solid var(--bg-border);
  border-radius: 10px;
  background: var(--bg-surface);
  color: var(--bg-text);
  cursor: pointer;
}
.option:last-child { margin-bottom: 0; }
.option[aria-pressed="true"] { border-color: var(--bg-gold); background: var(--bg-gold-soft); box-shadow: inset 0 0 0 1px var(--bg-gold); }
.option-name { display: block; font-weight: 600; }
.option-sub { display: block; font-size: 13px; color: var(--bg-text-sub); margin-top: 3px; }

/* 廠商卡片（f2a.1）：一家一張大卡片 */
.option.vendor { padding: 20px 16px; margin-bottom: 12px; border-radius: var(--bg-radius); box-shadow: var(--bg-shadow); }
.option.vendor .option-name { font-size: 19px; }
.option.vendor .option-sub { font-size: 15px; margin-top: 6px; }
.option-addr { display: block; font-size: 14px; color: var(--bg-text-sub); margin-top: 6px; }
.option:disabled { opacity: 0.55; cursor: default; }

.pick-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.linkbtn { background: none; border: none; color: var(--bg-primary); font-size: 14px; padding: 4px 0; cursor: pointer; }
.alert-info { background: var(--bg-primary-soft); color: var(--bg-primary-dark); }
.alert-info a, .rsv-phone { color: var(--bg-primary-dark); font-weight: 600; }

/* 日期列：橫向捲動 */
.datebar { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
.datechip {
  flex: 0 0 auto;
  font-size: 14px;
  padding: 9px 12px;
  border: 1px solid var(--bg-border);
  border-radius: 999px;
  background: var(--bg-surface);
  color: var(--bg-text);
  white-space: nowrap;
  cursor: pointer;
}
.datechip[aria-pressed="true"] { border-color: var(--bg-gold); background: var(--bg-primary); color: #fff; font-weight: 600; }

/* 預約頁日期方塊：兩週 7 欄全攤開（Jerry 2026-11-04：橫向小膠囊不熟的人找不到） */
.dategrid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.datetile {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 0;
  border: 1px solid var(--bg-gold);
  border-radius: 10px;
  background: var(--bg-surface);
  color: var(--bg-primary);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.datetile-wd { font-size: 12px; color: var(--bg-text-sub); }
.datetile-md { font-size: 15px; font-weight: 600; letter-spacing: -0.3px; white-space: nowrap; }
.datetile[aria-pressed="true"] { background: var(--bg-primary); color: #fff; }
.datetile[aria-pressed="true"] .datetile-wd { color: #fff; }
/* 沒有可約時段的日子：反灰但仍可點；選中時灰得深一點，看得出選到哪天 */
.datetile[data-off="true"] { background: #ecebe8; border-color: #d6d4cf; color: #a8a6a1; }
.datetile[data-off="true"] .datetile-wd { color: #a8a6a1; }
.datetile[data-off="true"][aria-pressed="true"] { background: #c9c7c2; border-color: #9e9c97; color: #4a4946; }
.datetile[data-off="true"][aria-pressed="true"] .datetile-wd { color: #4a4946; }
.site-addr { display: block; margin-top: 6px; font-size: 14px; color: var(--bg-primary-dark); text-decoration: none; }

/* 時段：24 小時制文字按鈕（不使用 native time 控件） */
.timegrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.timechip {
  font-size: 15px;
  font-weight: 600;
  padding: 10px 0;
  border: 1px solid var(--bg-gold);
  border-radius: 10px;
  background: var(--bg-surface);
  color: var(--bg-primary);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
/* 選中的時段要一眼看得出來（Jerry 2026-11-04） */
.timechip[aria-pressed="true"] { background: var(--bg-primary); color: #fff; }

.summary { margin-bottom: 14px; }
.summary-row { display: flex; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--bg-border); font-size: 15px; }
.summary-row:last-child { border-bottom: none; }
/* 帳單列（0018：商家設定的帳單卡、平台管理的收款區） */
.bill-row { padding: 10px 0; border-top: 1px solid var(--bg-border); }
.bill-row .rsv-actions { margin-top: 8px; }
.summary-label { flex: 0 0 44px; color: var(--bg-text-sub); }
.summary-value { flex: 1; font-weight: 600; }

.tabs { display: flex; gap: 8px; margin-bottom: 12px; }
.tab {
  flex: 1;
  font-size: 15px;
  padding: 10px;
  border: 1px solid var(--bg-border);
  border-radius: 10px;
  background: var(--bg-surface);
  color: var(--bg-text-sub);
  cursor: pointer;
}
.tab { border-color: var(--bg-gold); color: var(--bg-primary); }
.tab[aria-pressed="true"] { border-color: var(--bg-gold); background: var(--bg-primary); color: #fff; font-weight: 600; }

.rsv-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.rsv-time { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.rsv-name { font-size: 15px; margin-bottom: 2px; }
.rsv-sub { font-size: 13px; color: var(--bg-text-sub); line-height: 1.6; }
.rsv-ok { color: var(--bg-success); font-weight: 600; }
.rsv-actions { display: flex; gap: 8px; margin-top: 12px; }

.badge { font-size: 12px; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.badge-ok { background: var(--bg-success-bg); color: var(--bg-success); font-weight: 600; }
.badge-warn { background: var(--bg-warning-bg); color: var(--bg-warning); }
.badge-muted { background: var(--bg-surface-2); color: var(--bg-text-sub); }

.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.coach-intro { margin: 8px 0 10px; white-space: pre-line; }

/* 合作夥伴頁：分類標題、照片（無照片＝米白圓框＋分類字樣，兩字一行）、影片連結 */
.partner-group { font-size: 16px; font-weight: 700; color: var(--bg-primary); margin: 18px 0 10px; padding-left: 10px; border-left: 3px solid var(--bg-gold); }
.partner-group:first-child { margin-top: 4px; }
.partner-head { display: flex; align-items: center; gap: 14px; }
.partner-photo {
  flex: none; width: 60px; height: 60px; border-radius: 50%; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-page); border: 1.5px solid var(--bg-gold);
  color: var(--bg-primary); font-weight: 700;
}
.partner-photo-text { width: 2em; font-size: 14px; line-height: 1.25; text-align: center; letter-spacing: 0; }
.partner-photo img { width: 100%; height: 100%; object-fit: cover; }
.partner-body { flex: 1; min-width: 0; }
.partner-name { font-size: 17px; margin-bottom: 2px; }
.partner-label { font-size: 12px; font-weight: 600; color: var(--bg-gold); letter-spacing: 1px; margin-bottom: 6px; }
.partner-videos { list-style: none; margin: 0; padding: 0; }
.partner-videos li { border-top: 1px solid var(--bg-surface-2); }
.partner-videos a { display: block; padding: 9px 0; font-size: 14px; color: var(--bg-blue); text-decoration: none; }
.partner-videos a::before { content: '▶'; color: var(--bg-gold); font-size: 11px; margin-right: 8px; }
a.partner-book { text-align: center; text-decoration: none; }
.partner-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.partner-social { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; }
.partner-social svg { width: 18px; height: 18px; fill: currentColor; }
.partner-social-ig { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }
.partner-social-fb { background: #0866ff; }
.partner-social-yt { background: #ff0000; }
.partner-social-tt { background: #000; }

.modal {
  position: fixed;
  inset: 0;
  background: rgba(22, 41, 74, 0.5);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 16px;
}
.modal-box {
  width: 100%;
  max-width: 420px;
  background: var(--bg-surface);
  border-radius: var(--bg-radius);
  padding: 18px 16px 16px;
}
.modal-box .hint { white-space: pre-line; }

/* 商家端（f2b-1） */
a.option, a.tab { text-decoration: none; text-align: left; }
a.tab { text-align: center; }
select {
  width: 100%;
  font-size: 16px;           /* iOS 小於 16px 會自動放大頁面 */
  padding: 12px;
  border: 1px solid var(--bg-border);
  border-radius: 10px;
  background: var(--bg-surface);
  color: var(--bg-text);
  margin-bottom: 14px;
}
textarea {
  width: 100%;
  font-size: 16px;
  font-family: inherit;
  line-height: 1.5;
  padding: 12px;
  border: 1px solid var(--bg-border);
  border-radius: 10px;
  background: var(--bg-surface);
  color: var(--bg-text);
  margin-bottom: 6px;
  resize: vertical;
}
.pair { display: flex; gap: 8px; }
.pair select:first-child { flex: 3; }
.pair select:last-child { flex: 2; }
.daynav { display: flex; gap: 8px; margin-bottom: 10px; }
.daynav-text { text-align: center; font-size: 17px; }
.hint.pre { white-space: pre-line; }
.rsv-warn { color: var(--bg-warning); font-weight: 600; }
/* 當週檢視的日期標題（可點 → 進那一天） */
.dayhead {
  display: block; width: 100%; text-align: left;
  font-size: 15px; font-weight: 700; color: var(--bg-text);
  background: var(--bg-surface-2); border: none; border-radius: 10px;
  padding: 10px 12px; margin: 14px 0 8px; cursor: pointer;
}
.dayhead-today { background: var(--bg-primary-soft); color: var(--bg-primary-dark); }
/* 封鎖時段：灰色斜紋卡（設計稿；不用彩色左邊條） */
.rsv-block {
  background: repeating-linear-gradient(135deg, #ECEBE8 0 10px, #E4E3DF 10px 20px);
  border-color: #CFCDC7;
}
.rsv-actions { flex-wrap: wrap; }
.btn-small[aria-pressed="true"] { border-color: var(--bg-gold); background: var(--bg-gold-soft); color: var(--bg-primary-dark); }

/* 停用項目收合區（BG.inactiveFold） */
.fold { margin-top: 8px; }
.fold > summary {
  cursor: pointer;
  list-style: none;
  font-size: 14px;
  color: var(--bg-text-sub);
  padding: 10px 12px;
  border: 1px dashed var(--bg-border);
  border-radius: 10px;
  margin-bottom: 8px;
}
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::before { content: '▸ '; color: var(--bg-gold); }
.fold[open] > summary::before { content: '▾ '; }

[hidden] { display: none !important; }

/* 代客預約的客人下拉（0020；Jerry 2026-11-04：只列最近 10 位、一行一位，不佔版面） */
.picklist { border: 1px solid var(--bg-gold); border-radius: 10px; background: var(--bg-surface); margin: -6px 0 12px; overflow: hidden; }
.pickrow { display: flex; justify-content: space-between; gap: 8px; width: 100%; padding: 10px 12px; border: none;
  border-bottom: 1px solid var(--bg-border); background: none; font-size: 15px; color: var(--bg-text); text-align: left; cursor: pointer; }
.pickrow:last-child { border-bottom: none; }
button.pickrow:active, .pickrow[aria-pressed="true"] { background: var(--bg-primary); color: #fff; font-weight: 600; }
button.pickrow:active .pickrow-sub, .pickrow[aria-pressed="true"] .pickrow-sub { color: #fff; }
.pickrow-sub { color: var(--bg-text-sub); font-size: 13px; white-space: nowrap; }
button.pickrow { align-items: center; }
.pickrow-name { flex: 1; min-width: 0; }
.pickrow-cta { flex-shrink: 0; padding: 5px 10px; font-size: 13px; white-space: nowrap; }