/* ATM 繳費資訊：只出現在明細抽屜（列表不置頂待付款卡） */
.atmbox{width:100%;background:var(--bg);border-radius:var(--r-sm);padding:14px 16px;display:flex;flex-direction:column;gap:12px}
.atmbox .af{display:flex;align-items:center;justify-content:space-between;gap:14px}
.atmbox .af span{font-size:12px;color:var(--muted);font-weight:600;flex:none}
.atmbox .af b{font-size:14px;font-weight:700;display:flex;align-items:center;gap:4px;text-align:right}
.atmbox .af b.due{color:var(--danger)}
/* 複製成功的短暫回饋（app.js 換成打勾圖示 1.4 秒）。點了要看得出結果。 */
[data-copy-text].is-done{color:var(--pos)}
[data-copy-text].is-done:hover{background:transparent}

.ltoolbar .lt-right{justify-content:flex-start}
/* 搜尋框可伸縮（本頁與 /wallet 的唯一差異）。
   ⚠️ 必須包斷點：本檔載入在 components.css 之後、權重相同，媒體查詢不加權重，
   裸寫會蓋掉共用檔窄螢幕的 max-width:none。 */
@media(min-width:641px){
  .ltoolbar .search-box{flex:1 1 240px;max-width:340px}
}
.ltoolbar .search-box input{width:100%}
/* 圖示與文字間距全工具列統一 8px（搜尋框 wallet 預設 7px、tbtn 預設 6px，這裡拉齊） */
.ltoolbar .search-box,.ltoolbar .tbtn{gap:8px}
/* 根因：原生 select 的文字左內縮是 appearance:auto 的 UA control 自帶，padding 管不到，
   會讓選項文字比圖示多退一段。改 appearance:none 才拿得掉；原生箭頭一併消失，
   用自訂 chevron 背景補回（右側），padding-right 留出箭頭空間。 */
.ltoolbar .tbtn select{
  min-width:0;
  -webkit-appearance:none;appearance:none;
  padding:0 18px 0 0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='none' stroke='%238b9298' stroke-width='16' stroke-linecap='round' stroke-linejoin='round' d='M208 96 128 176 48 96'/%3E%3C/svg%3E") no-repeat right center / 13px 13px;
}

/* 表格：整列可點開明細；發票外連圖示 */

.wtable tbody tr[data-order-id]{cursor:pointer}
.wtable tbody tr[data-order-id]:hover{background:#fafbfb}
.wtable tbody tr[data-order-id]:focus-visible{outline:2px solid var(--brand-accent);outline-offset:-2px;background:#fafbfb}
/* 欄寬控制：只有「訂單內容」可吸收剩餘寬度，其餘欄一律不換行
   （欄位一旦折行，時間、金額、狀態會被切成兩行，整張表的掃描節奏就壞了） */

.tablewrap{overflow-x:auto;position:relative}
.wtable th,.wtable td{white-space:nowrap}
/* 訂單內容：給寬度區間而不是只給下限。長品名若不設上限會把整張表撐開，
   把來源平台、付款方式等欄位擠掉；設 max-width 後改為在欄內換行。 */
.wtable .item{white-space:normal;min-width:210px;max-width:320px}
.wtable .item b{white-space:normal;overflow-wrap:anywhere}
.wtable .item small{white-space:normal;word-break:keep-all}
/* 來源平台可能帶門市名（如「Knit 商店｜台北信義旗艦門市」），給上限並允許換行。
   ⚠️ 不可用 word-break:keep-all —— 中文整串會變成不可斷點，直接溢出到隔壁欄；
   中文本就該逐字換行，用預設值即可。 */
.wtable td[data-l="來源平台"]{white-space:normal;min-width:124px;max-width:150px}

.wtable td[data-l="狀態"]{white-space:nowrap}
.ext{font-size:14px;vertical-align:-1px;margin-left:4px}
.invlink{display:inline-flex;align-items:center}


.dhead .dno{font-size:12px;color:var(--muted);font-weight:500;margin-top:6px;display:flex;align-items:center;gap:4px}
.dsum{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px}
.dsum .damt{font-size:30px;font-weight:700;line-height:1}
.osec{padding:18px 0;border-bottom:1px solid var(--line)}
.osec:last-child{border-bottom:none}
.osec h3{font-size:13px;font-weight:700;margin-bottom:12px}
.osec-note{font-size:13px;color:var(--ink-2);line-height:1.6}
.osec-note b{font-weight:700;color:var(--ink)}
.odl{display:flex;flex-direction:column;gap:12px}
.odl div{display:flex;justify-content:space-between;align-items:baseline;gap:18px;font-size:13px}
.odl dt{color:var(--muted);flex:none}
.odl dd{color:var(--ink-2);font-weight:600;text-align:right}
/* 與 components.css 同一原則：正數不上色不加號，只有負數紅字帶 - */
.odl dd .pos{color:var(--ink);font-weight:700}
.odl dd .neg{color:var(--neg);font-weight:700}
.odl dd .urgentx{color:var(--danger);font-weight:700}
.gotolink{margin-top:14px;color:var(--ink-2)}
/* 訂單歷程：已完成綠點、未完成灰點、失敗紅點 */
.otl{display:flex;flex-direction:column}
.otl .ev{display:flex;gap:12px;position:relative;padding-bottom:16px}
.otl .ev:last-child{padding-bottom:0}
.otl .ev::before{content:"";position:absolute;left:5px;top:15px;bottom:0;width:1px;background:var(--line)}
.otl .ev:last-child::before{display:none}

.otl .dot{width:11px;height:11px;border-radius:50%;background:var(--green-600);flex:none;margin-top:3px;position:relative;z-index:1}
.otl .ev.wait .dot{background:var(--bar-dim)}
.otl .ev.fail .dot{background:var(--danger)}

.otl .tx b{font-size:13px;font-weight:600;display:block}
.otl .ev.wait .tx b{color:var(--muted)}
.otl .tx small{font-size:12px;color:var(--muted);font-weight:500}
.dfoot{flex:none;padding:16px var(--pad-overlay);border-top:1px solid var(--line);display:flex;gap:10px}
/* 只有主要動作撐滿；危險動作維持內容寬度，單獨存在時靠右，不冒充主要動作 */
.dfoot .btn{justify-content:center}
.dfoot .btn-primary{flex:1}
.dfoot .btn-danger-ghost:only-child{margin-left:auto}
.dfoot[hidden]{display:none}
.dsum[hidden]{display:none}

/* .ltoolbar/.tfoot 是 flex，display 會蓋掉 hidden 屬性，需明確補規則 */
.ltoolbar[hidden],.tfoot[hidden]{display:none}
/* 列表空狀態（兩種語意不同：從未有訂單/篩選後無結果） */
.lempty{padding:64px 16px 56px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px}
.lempty[hidden]{display:none}
.lempty-ico{font-size:44px;color:var(--bar-dim)}
.lempty b{font-size:16px;font-weight:700}
.lempty span{font-size:13px;color:var(--muted);line-height:1.6;max-width:320px}
.lempty .btn{margin-top:10px}

/* 抽屜空狀態：說明原因＋提供下一步，不只印一句錯誤 */
/* 長文案保護：標題與欄位值在窄抽屜內斷行，長編號/英數不撐破版 */
.dhead h2{overflow-wrap:anywhere}
.odl dd{overflow-wrap:anywhere}
.otl .tx b{white-space:normal}

/* ⚠️ 工具列的窄螢幕規則一律寫在 components.css：/wallet 沒有 link 本檔，
   寫在這裡只有訂單頁吃得到。本區塊只放本頁獨有的卡片式表格。 */
@media(max-width:1100px){
  .tablewrap{overflow-x:visible}
  .wtable{min-width:0}
  .wtable,.wtable tbody{display:block;width:100%}
  .wtable thead{display:none}
  .wtable th,.wtable td{white-space:normal}

  .wtable tr{display:grid;grid-template-columns:1fr auto;column-gap:12px;row-gap:4px;padding:14px 16px;
    border:1px solid var(--line);border-radius:var(--r-sm);margin-bottom:10px}
  .wtable tbody tr:last-child{margin-bottom:0}
  /* border:0 只清 components.css 的 td 底線；狀態列的 border-top 權重 (0,3,1) 壓得過這裡 (0,1,1) */
  .wtable td{padding:0;border:0}
  /* 桌機的欄寬限制在卡片版全部歸零：手機每列是滿寬的「欄名｜值」，
     若沿用 max-width，整列會被壓成該欄寬度，值就無法靠右對齊 */
  .wtable .item,.wtable td[data-l="來源平台"]{min-width:0;max-width:none}
  /* 卡片頭的兩格要脫離 wallet 的「欄名｜值」樣式：display/width/::before 都要覆寫，
     否則品名會被 flex 擠成一欄逐字斷行，還會多出「訂單內容」「金額」兩個欄名 */
  .wtable td.num{display:block;width:auto}
  .wtable .item::before,.wtable td.num::before{display:none}

  .wtable .item{display:contents}
  /* 品名 14px/600 與金額 15px/700 字級不同，靠上緣對齊（align-self:start）會看起來沒對齊 ——
     上緣齊的是「行框」，不是「字」。兩格都改 baseline，讓文字坐在同一條基線上。
     品名折多行時對齊的是第一行的基線，金額仍與品名第一行齊頭。 */
  .wtable .item b{grid-column:1;grid-row:1;min-width:0;text-align:left;white-space:normal;align-self:baseline}
  .wtable .item small{grid-column:1/-1;grid-row:2;display:block;margin-top:0;text-align:left;
    white-space:normal;word-break:keep-all}
  .wtable td.num{grid-column:2;grid-row:1;justify-self:end;align-self:baseline;white-space:nowrap;
    text-align:right;font-size:15px;font-weight:700;color:var(--ink)}

  .wtable td:not(.item):not(.num){grid-column:1/-1;display:flex;justify-content:space-between;align-items:baseline;
    gap:12px;width:auto;white-space:normal;font-size:13px;font-weight:600;text-align:right;color:var(--ink-2)}
  .wtable td:not(.item):not(.num)::before{content:attr(data-l);color:var(--muted);font-size:12px;font-weight:400;flex:none;text-align:left}
  /* 狀態排在明細列的第一列，並用分隔線與卡片頭區隔。
     ⚠️ 選擇器加 :not(.num) 把權重拉到 (0,3,1)，才壓得過通用規則
     `.wtable td:not(.item):not(.num){gap:12px;justify-content:space-between}`；
     否則 chip↔時效 會變成 12px(通用 gap)＋4px = 16px，比桌機寬。
     用 gap:4px 統一 chip↔時效＝桌機的 4px；欄名靠 margin-right:auto 推左，chip＋時效成組靠右。 */
  .wtable td[data-l="狀態"]:not(.num){order:-1;justify-content:flex-end;gap:4px;
    margin-top:5px;padding-top:12px;border-top:1px solid var(--line)}
  .wtable td[data-l="狀態"]:not(.num)::before{margin-right:auto}
  /* gap 已提供 4px，st-sub 自身 margin 歸零避免疊加 */
  .wtable td[data-l="狀態"] .st-sub{margin-left:0}
  .wtable tr[data-order-id]::after{content:"查看明細  ›";grid-column:1/-1;margin-top:6px;padding-top:9px;
    border-top:1px solid var(--line);color:var(--ink-2);font-size:12px;font-weight:600;text-align:right}
}

@media(max-width:640px){.drawer{width:100%}}