/**
 * Element Plus 主題覆寫 — 嘉里大榮橘（風格 06 · 精煉暖橘）
 * --------------------------------------------------------
 * 預設 Element Plus 為藍色主題（#409EFF）。本檔把主色翻成品牌橘 #E96D00，
 * 並把控件圓角調大以呼應 06 圓潤風格。
 *
 * 載入順序：務必在 main.js 的 `element-plus/dist/index.css` 之後 import，
 * 才能覆寫 EP 的 CSS 變數。
 *
 * 不覆寫 success / danger：啟用綠、停用紅屬語意狀態色，設計準則允許保留。
 */
:root {
  /* 主色翻橘 */
  --el-color-primary: #E96D00;
  --el-color-primary-light-3: #ef8c38;
  --el-color-primary-light-5: #f3a866;
  --el-color-primary-light-7: #f7c499;
  --el-color-primary-light-8: #f9d6b8;
  --el-color-primary-light-9: #fdecdd;
  --el-color-primary-dark-2: #c95f00;

  /* 圓角，呼應 06 圓潤控件 */
  --el-border-radius-base: 10px;
  --el-border-radius-small: 8px;
}

/*
 * LIFF 共用版型樣式（單一來源）
 * 取自「貨件查詢」(KtjCargoStatus) 基準。全域匯入；所有 class 一律 .liff- 前綴，
 * 並把元素重置收斂在 .liff-page 之下，避免影響後台 / Element Plus 頁面。
 */

/* 容器 */
.liff-page {
  padding: 22px 18px 36px;
  background: #F7F7F5;
  min-height: 100vh;
  font-family: -apple-system, 'PingFang TC', 'Microsoft JhengHei', sans-serif;
  color: #1a1a1a;
  box-sizing: border-box;
}
.liff-page *,
.liff-page *::before,
.liff-page *::after { box-sizing: border-box; }

/* 標題 */
.liff-title { font-size: 26px; font-weight: 700; color: #1a1a1a; margin: 0 0 6px; }
.liff-subtitle { font-size: 13px; color: #aaa; margin: 0 0 22px; }

/* 卡片 */
.liff-card { background: #fff; border-radius: 16px; border: 0.5px solid #E8E6E1; padding: 18px; margin-bottom: 14px; }
.liff-card-accent { background: #FFF3EA; border: 0.5px solid #F5C99A; border-radius: 16px; padding: 20px 18px; margin-bottom: 14px; }
.liff-card-title { font-size: 16px; font-weight: 700; color: #1a1a1a; margin-bottom: 14px; }

/* 表單欄位 */
.liff-field {
  width: 100%;
  border: 1.5px solid #E8E6E1;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 15px;
  color: #1a1a1a;
  background: #FAFAF8;
  font-family: inherit;
  outline: none;
}
.liff-field:focus { border-color: #E8742A; background: #fff; }
.liff-field:disabled { background: #F0EFEC; color: #bbb; }
.liff-field[readonly] { background: #F0EFEC; color: #888; }
.liff-field-group { margin-bottom: 14px; }
.liff-field-group:last-child { margin-bottom: 0; }
.liff-field-label { display: block; font-size: 13px; font-weight: 600; color: #555; margin-bottom: 6px; }
.liff-fields-2 { display: flex; gap: 10px; }
.liff-fields-2 > * { flex: 1; }
.liff-hint { font-size: 12px; color: #999; margin-top: 6px; padding-left: 2px; }
.liff-warn { font-size: 12px; color: #DD4B39; font-weight: 600; margin-top: 6px; padding-left: 2px; }
.liff-desc { font-size: 14px; color: #666; line-height: 1.6; }
.liff-req { color: #E8742A; }
.liff-links { text-align: center; margin-top: 12px; }
.liff-textlink { color: #E8742A; font-size: 14px; text-decoration: underline; cursor: pointer; background: none; border: none; padding: 0; }

/* 主按鈕 */
.liff-btn {
  display: flex; align-items: center; justify-content: center;
  width: 100%;
  background: #E8742A; color: #fff;
  border: none; border-radius: 10px;
  padding: 14px; font-size: 16px; font-weight: 600;
  font-family: inherit; cursor: pointer; text-decoration: none;
  transition: background .15s ease;
}
.liff-btn:hover { background: #D9651C; }
.liff-btn:disabled,
.liff-btn.is-loading { background: #E9A877; cursor: default; }
/* 按鈕變體 */
.liff-btn.is-danger { background: #DC3B2F; }
.liff-btn.is-danger:hover { background: #C32D22; }
.liff-btn.is-secondary { background: #fff; color: #555; border: 1px solid #E8E6E1; }
.liff-btn.is-secondary:hover { background: #F7F7F5; }

/* 次要 pill 連結（如「先試算」） */
.liff-pill {
  display: inline-block;
  background: #FFF3EA; color: #E8742A;
  border: 0.5px solid #F5C99A; border-radius: 999px;
  padding: 6px 12px; font-size: 13px; font-weight: 600;
  cursor: pointer; text-decoration: none; white-space: nowrap;
}
.liff-pill:hover { background: #FCE6D2; }

/* 淡色文字連結（如「返回」） */
.liff-link { color: #888; font-size: 14px; cursor: pointer; text-decoration: none; }
.liff-link:hover { color: #E8742A; }

/* 區段小標題 + 分隔線 */
.liff-section-label { font-size: 12px; color: #999; font-weight: 600; margin-bottom: 6px; }
.liff-divider { border-top: 1px dashed #E8E6E1; margin: 14px 0; }

/* 鍵值列（label：value），資訊頁共用 */
.liff-kv { display: flex; align-items: baseline; gap: 10px; padding: 6px 0; font-size: 15px; }
.liff-kv-label { color: #888; flex-shrink: 0; min-width: 76px; }
.liff-kv-value { color: #1a1a1a; font-weight: 500; word-break: break-all; }
.liff-kv-value.is-emph { color: #E8742A; font-weight: 700; }

/* 清單型表格 */
.liff-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.liff-table th { text-align: left; color: #999; font-weight: 600; font-size: 12px; padding: 6px 8px; border-bottom: 1px solid #E8E6E1; }
.liff-table td { padding: 10px 8px; color: #444; border-bottom: 0.5px solid #F0EFEC; vertical-align: middle; }
.liff-table tr:last-child td { border-bottom: none; }
.liff-table a { color: #E8742A; font-weight: 600; cursor: pointer; }

/* 載入中遮罩（置中） */
.liff-loading { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 50; }

/* 共用彈窗（modal） */
.liff-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; z-index: 100; padding: 24px; }
.liff-modal-box { position: relative; background: #fff; border-radius: 16px; padding: 26px 20px 20px; width: 100%; max-width: 320px; text-align: center; }
.liff-modal-icon { width: 48px; height: 48px; margin: 0 auto 8px; display: block; }
.liff-modal-title { font-size: 18px; font-weight: 700; color: #1a1a1a; margin: 6px 0 8px; }
.liff-modal-text { font-size: 14px; color: #555; line-height: 1.6; margin-bottom: 18px; }
.liff-modal-text.is-left { text-align: left; }
.liff-modal-actions { display: flex; gap: 10px; }
.liff-modal-actions > * { flex: 1; }
.liff-modal-close { position: absolute; top: 12px; right: 12px; width: 22px; height: 22px; cursor: pointer; }

/* 標記徽章（如「預設」） */
.liff-badge { display: inline-block; background: #E8742A; color: #fff; font-size: 11px; font-weight: 600; border-radius: 10px; padding: 2px 9px; }

/* 單選 / 複選（最小樣式，色彩走品牌橘） */
.liff-radio, .liff-check { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; color: #333; cursor: pointer; }
.liff-radio input, .liff-check input { accent-color: #E8742A; width: 16px; height: 16px; }
.liff-radio-group { display: flex; gap: 18px; }

/* 條款捲動容器 */
.liff-terms-box {
  max-height: 320px; overflow-y: auto;
  border: 0.5px solid #E8E6E1; border-radius: 12px;
  padding: 14px; background: #fff;
  font-size: 14px; line-height: 1.7; color: #444;
}

/* 頁尾 */
.liff-footer { margin-top: 28px; text-align: center; color: #b5b3ad; font-size: 11px; line-height: 1.7; }
.liff-footer a { color: #999; text-decoration: none; margin: 0 6px; }
.liff-footer a:hover { color: #E8742A; }
.liff-footer-links { margin-top: 6px; }