@charset "UTF-8";
/* ============================================================
   jin-member.css —— 會員中心（帳戶頁、會員中心首頁、各紀錄頁）

   只加不改：不動 jin-ui.css / jin-missing.css，也不動原始的
   style.css / member.css。要還原就是把 head_v2.php 裡這一行拿掉。

   色票、字級、間距全部沿用 jin-ui.css 的 token，這裡不新開一套。
   載入順序在 jin-ui.css 之後 —— 設計層放最後（第三批那次的教訓）。
   ============================================================ */

/* ============================================================
   1. 標題帶
   ============================================================ */
.jm-top .jm-top-sub{ color:var(--ink-2); font-weight:400; }

/* ============================================================
   2. 手機分頁列
   六等分不捲動；圖示在上、文字在下。
   桌機沿用左側的 .member-menu_web，這條列子只在 md 以下出現。
   ============================================================ */
.jm-tabs{
  display:flex;
  margin-top:var(--s3);
  background:var(--sf-2);
  border:1px solid var(--line);
  border-radius:var(--r-card);
  overflow:hidden;
}
.jm-tabs .jm-tab{
  flex:1 1 0;
  min-width:0;
  min-height:56px;                       /* 觸控目標 ≥44px */
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:3px;
  padding:8px 2px;
  color:var(--ink-2);
  font-size:12px; line-height:1.2;
  text-decoration:none; text-align:center;
  border-right:1px solid var(--line);
  transition:color .15s, background .15s;
}
.jm-tabs .jm-tab:last-child{ border-right:0; }
.jm-tabs .jm-tab img{
  width:20px; height:20px; object-fit:contain;
  filter:brightness(0) invert(.86);      /* 圖檔是深色線稿，深底上要翻白 */
  opacity:.9;
}
.jm-tabs .jm-tab:hover{ color:var(--ink); background:var(--sf-3); }
.jm-tabs .jm-tab.is-on{
  color:var(--gold-hi);
  background:var(--sf-3);
  box-shadow:inset 0 -2px 0 var(--gold-2);
}
.jm-tabs .jm-tab.is-on img{
  filter:brightness(0) invert(.92) sepia(.55) saturate(4) hue-rotate(348deg);
  opacity:1;
}

/* ============================================================
   3. 設定引導卡（三步驟任務卡）
   ============================================================ */
.jm-tasks{
  margin-top:var(--s4);
  padding:var(--s4);
  background:var(--sf-2);
  border:1px solid var(--line-strong);
  border-radius:var(--r-card);
}
.jm-tasks.is-waiting{ border-color:var(--line); }

.jm-tasks-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:var(--s3);
}
.jm-tasks-head h2{
  margin:0;
  font-size:18px; font-weight:700; line-height:1.4;
  color:var(--ink);
}
.jm-tasks-count{
  flex:none;
  font-size:14px; font-weight:700;
  color:var(--gold-hi);
  font-variant-numeric:tabular-nums;
}
.jm-tasks-note{
  margin:var(--s2) 0 0;
  font-size:14px; line-height:1.6;
  color:var(--ink-2);
}

.jm-steps{
  list-style:none;
  margin:var(--s4) 0 0;
  padding:0;
  display:flex; flex-direction:column; gap:var(--s2);
}
.jm-step{
  display:flex; align-items:center; gap:var(--s3);
  padding:var(--s3);
  background:var(--sf-1);
  border:1px solid var(--line);
  border-radius:12px;
}
.jm-step-no{
  flex:none;
  width:28px; height:28px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  font-size:14px; font-weight:700;
  background:var(--sf-3); color:var(--ink-2);
  border:1px solid var(--line);
}
.jm-step.is-done .jm-step-no{
  background:var(--ok-bg); color:var(--ok); border-color:var(--ok);
}
.jm-step.is-todo .jm-step-no{
  background:var(--warn-bg); color:var(--warn); border-color:var(--warn);
}
.jm-step-body{ flex:1 1 auto; min-width:0; }
.jm-step-body h3{
  margin:0;
  font-size:16px; font-weight:700; line-height:1.4;
  color:var(--ink);
}
.jm-step-body p{
  margin:2px 0 0;
  font-size:13px; line-height:1.5;
  color:var(--ink-3);
}
.jm-step.is-done .jm-step-body h3{ color:var(--ink-2); }

.jm-step-state{
  flex:none;
  font-size:13px; color:var(--ok);
  padding:0 var(--s2);
}
.jm-step-go{
  flex:none;
  min-height:44px;                       /* 觸控目標 */
  display:inline-flex; align-items:center; justify-content:center;
  padding:0 var(--s4);
  border:0; border-radius:999px;
  background:var(--g-gold); color:var(--on-gold);
  font-size:15px; font-weight:700;
  text-decoration:none; white-space:nowrap;
  cursor:pointer;
}
.jm-step-go:hover{ filter:brightness(1.06); color:var(--on-gold); }
.jm-step-go:focus-visible{ outline:2px solid var(--gold-hi); outline-offset:2px; }

/* 從任務卡跳過去時閃一下，讓人知道要看哪裡 */
@keyframes jmFlash{
  0%,100%{ box-shadow:0 0 0 0 rgba(233,185,80,0); }
  30%    { box-shadow:0 0 0 3px rgba(233,185,80,.55); }
}
.jm-card.jm-flash{ animation:jmFlash 1.1s ease-out 2; }
@media (prefers-reduced-motion:reduce){
  .jm-card.jm-flash{ animation:none; box-shadow:0 0 0 3px rgba(233,185,80,.55); }
}

/* ============================================================
   4. 折疊卡
   收起來只看得到標題和狀態籤；已經設定好的預設收起，
   還沒設定的預設打開 —— 新帳號進來就直接看到要填的東西。
   表單的 name / id / JS 掛鉤一個字都沒動，只是外面包一層 details。
   ============================================================ */
.jm-card{
  display:block;
  margin-top:var(--s4);
}
.jm-card>.jm-card-sum{
  display:flex; align-items:center; gap:var(--s3);
  min-height:52px;
  padding:var(--s3) var(--s4);
  margin:calc(var(--s4) * -1) calc(var(--s4) * -1) 0;
  list-style:none;
  cursor:pointer;
  border-radius:var(--r-card) var(--r-card) 0 0;
  transition:background .15s;
}
.jm-card>.jm-card-sum::-webkit-details-marker{ display:none; }
.jm-card>.jm-card-sum:hover{ background:var(--sf-3); }
.jm-card>.jm-card-sum:focus-visible{ outline:2px solid var(--gold-hi); outline-offset:-2px; }

.jm-card-name{
  flex:1 1 auto;
  font-size:17px; font-weight:700; color:var(--ink);
}
.jm-card-state{
  flex:none;
  font-size:12px; line-height:1;
  padding:5px 10px;
  border-radius:999px;
  background:var(--warn-bg); color:var(--warn);
  border:1px solid currentColor;
}
.jm-card-state.is-on{ background:var(--ok-bg); color:var(--ok); }

/* 收合指示：右邊一個箭頭，展開時轉向 */
.jm-card>.jm-card-sum::after{
  content:""; flex:none;
  width:9px; height:9px;
  border-right:2px solid var(--ink-3);
  border-bottom:2px solid var(--ink-3);
  transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .18s;
}
.jm-card[open]>.jm-card-sum::after{
  transform:rotate(225deg) translate(-2px,-2px);
}

/* 收起來的時候不要留下方那條分隔線，看起來才像一列一列的清單 */
.jm-card:not([open]){ padding-bottom:0; }
.jm-card[open]>.jm-card-sum{
  border-bottom:1px solid var(--line);
  margin-bottom:var(--s3);
}

/* ============================================================
   5. 平板（768~1024）
   側欄在這個區間已經出現，內容區會被壓窄，分頁列不需要，
   但任務卡的按鈕要避免被文字擠掉。
   ============================================================ */
@media (min-width:768px) and (max-width:1024px){
  .jm-step{ flex-wrap:wrap; }
  .jm-step-body{ flex:1 1 60%; }
  .jm-step-go{ margin-left:auto; }
}

/* ============================================================
   6. 手機
   ============================================================ */
@media (max-width:575.98px){
  .jm-tasks{ padding:var(--s3); }
  .jm-tasks-head h2{ font-size:17px; }
  .jm-step{
    flex-wrap:wrap;
    gap:var(--s2) var(--s3);
  }
  .jm-step-body{ flex:1 1 calc(100% - 40px); }
  .jm-step-state,
  .jm-step-go{
    margin-left:40px;                    /* 對齊步驟編號右邊 */
    width:calc(100% - 40px);
  }
  .jm-card>.jm-card-sum{
    padding:var(--s3);
    margin:calc(var(--s3) * -1) calc(var(--s3) * -1) 0;
  }
  .jm-card-name{ font-size:16px; }
}

/* ============================================================
   7. 帳戶頁的零件
   ============================================================ */
/* 任務卡跟第一張卡之間那行說明，不給樣式的話會變成一行孤兒 */
.jm-intro{
  margin:var(--s4) 0 0;
  font-size:14px; line-height:1.6;
  color:var(--ink-3);
}

/* 沒填的欄位印「未設定」，不留白 —— 留白那格只剩標籤，跟隔壁對不齊 */
.jm-unset{
  font-style:normal;
  color:var(--ink-3);
}

/* ============================================================
   8. 會員中心首頁的帳號摘要
   原本這頁只有一份選單，右邊整片空的。
   ============================================================ */
.jm-sum{
  margin-top:var(--s4);
  padding:var(--s4);
  background:var(--g-card);
  border:1px solid var(--line-gold);
  border-radius:var(--r-card);
}
.jm-sum-top{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:var(--s3);
}
.jm-sum-label{
  display:block;
  font-size:12px; letter-spacing:.06em;
  color:var(--ink-3);
}
.jm-sum-id{
  font-size:20px; font-weight:700; color:var(--ink);
  word-break:break-all;
}
.jm-sum-pt{ text-align:right; }
.jm-sum-num{
  font-size:30px; font-weight:900; line-height:1.1;
  color:var(--gold-hi);
  font-variant-numeric:tabular-nums;
}

.jm-sum-acts{
  display:flex; flex-wrap:wrap; gap:var(--s2);
  margin-top:var(--s4);
}
.jm-act{
  flex:1 1 0; min-width:88px;
  min-height:44px;
  display:inline-flex; align-items:center; justify-content:center;
  padding:0 var(--s3);
  border:1px solid var(--line-strong);
  border-radius:999px;
  background:var(--sf-1); color:var(--ink);
  font-size:15px; font-weight:700;
  text-decoration:none;
}
.jm-act:hover{ background:var(--sf-3); color:var(--gold-hi); }
.jm-act:focus-visible{ outline:2px solid var(--gold-hi); outline-offset:2px; }
/* 一頁只留一顆實心 */
.jm-act-main{
  background:var(--g-gold); color:var(--on-gold); border-color:transparent;
}
.jm-act-main:hover{ filter:brightness(1.06); color:var(--on-gold); }

@media (max-width:575.98px){
  .jm-sum{ padding:var(--s3); }
  .jm-sum-num{ font-size:26px; }
}

/* 會員中心首頁的排序：
   HTML 上帳號摘要排在選單前面 —— 手機那個斷點的容器是 display:block，
   CSS order 不會生效，只能靠 HTML 順序。
   桌機是 flex，再用 order 把側欄拉回左邊。 */
@media (min-width:768px){
  .jm-menu-second{ order:-1; }
}

/* ============================================================
   9. 同名 class 撞在一起造成的破版
   jin-ui.css 那批把 .status 當成「狀態徽章」、.payment 當成「付款選項清單」，
   但站上另有樣板拿同樣的名字當別的東西用，整個區塊就被那兩條規則吃掉。
   徽章與清單的規則不動（別的頁面正在用），這裡只把被誤中的還原。
   ============================================================ */

/* 紅利返水頁的「VIP尊享」是一個大區塊，卻剛好也叫 .status，
   被徽章規則的 inline-flex + 膠囊 + nowrap 壓成一顆小標籤，
   裡面真人／體育／電子三欄只剩 20px 寬，文字跟「立即領取」疊成一團。 */
.box.status{
  display:block;
  padding:var(--s4);
  border-radius:var(--r-card);
  font-size:16px; font-weight:400; white-space:normal;
}
.box.status .row{ margin-top:var(--s3); }
.box.status .statusBox p{ font-variant-numeric:tabular-nums; }

/* 手機上三欄各 118px，洗碼金額（六位數）跟標題都塞不下 —— 改成一欄一種遊戲 */
@media (max-width:575.98px){
  .box.status .row>[class*="col-"]{ flex:0 0 100%; max-width:100%; }
  .box.status .statusBox{
    display:grid;
    grid-template-columns:56px 1fr 1fr;
    align-items:center; gap:var(--s2) var(--s3);
    text-align:left;
    padding:var(--s3) 0;
    border-bottom:1px solid var(--line);
  }
  .box.status .statusBox .img-status{ grid-row:span 2; width:56px; height:56px; margin:0; padding:8px; }
  .box.status .statusBox h5{ margin:0; height:auto; font-size:14px; color:var(--ink-2); }
  .box.status .statusBox p{ margin:0; font-size:16px; font-weight:700; }
  .box.status .border-l-r{ border-left:0; border-right:0; }
}

/* bonus.php 的 .payment 是 radio 本身，不是清單容器 —— 被設成 display:grid 會走樣 */
input.payment{ display:inline-block; width:auto; }

/* 付款方式原本只有圖、圖又全部 404（指向不存在的 _images 目錄），
   玩家看到的是幾個空框。改成真文字，label 也接上 input，點字就能選。 */
.jm-pay{
  display:flex; align-items:center;
  min-height:44px;
  margin:0; padding:0 var(--s3);
  font-size:16px; font-weight:500;
  color:var(--ink);
  cursor:pointer;
}
.bank,.atm,.store{
  display:flex; align-items:center; gap:var(--s2);
  min-height:48px;
  margin-top:var(--s2);
  padding:0 var(--s3);
  background:var(--sf-1);
  border:1px solid var(--line);
  border-radius:12px;
}
.bank:hover,.atm:hover,.store:hover{ border-color:var(--line-strong); }
.bank input.payment,.atm input.payment,.store input.payment{
  order:-1; flex:none; margin:0;
  width:20px; height:20px;
  accent-color:var(--gold-2);
}
.bank .jm-pay,.atm .jm-pay,.store .jm-pay{ flex:1 1 auto; padding-left:0; }

/* ============================================================
   10. 上傳檔案的欄位
   瀏覽器原生的檔案按鈕是英文的（Choose File / No file chosen），
   文字改不掉，只能把原生的整個蓋掉，用 label 顯示中文。
   選好之後頁尾既有的 JS 會把檔名寫進這個 label（::after 那顆按鈕不受影響）。
   ============================================================ */
.custom-file{
  position:relative;
  display:block;
}
.custom-file .custom-file-input{
  position:absolute;
  top:0; left:0; width:100%; height:100%;
  margin:0; padding:0;
  opacity:0;                       /* 原生按鈕藏起來，但點擊區域留著 */
  cursor:pointer;
  z-index:2;
}
.custom-file .custom-file-label{
  display:flex; align-items:center;
  min-height:48px;
  margin:0; padding:0 var(--s3);
  background:var(--sf-1);
  border:1px dashed var(--line-strong);
  border-radius:12px;
  color:var(--ink-3);
  font-size:15px; font-weight:400;
  cursor:pointer;
  overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
}
.custom-file .custom-file-label::after{
  content:"瀏覽";
  flex:none;
  margin-left:auto; margin-right:calc(var(--s3) * -1);
  padding:0 16px;
  height:46px;
  display:flex; align-items:center;
  background:var(--sf-3);
  border-left:1px dashed var(--line-strong);
  border-radius:0 12px 12px 0;
  color:var(--ink-2);
  font-size:14px; font-weight:700;
}
/* 選好檔案之後（JS 會加 selected 並把檔名寫進去） */
.custom-file .custom-file-label.selected{
  color:var(--ink);
  border-style:solid;
  border-color:var(--gold-3);
}
.custom-file .custom-file-input:focus-visible + .custom-file-label{
  outline:2px solid var(--gold-hi); outline-offset:2px;
}
.custom-file .custom-file-input:hover + .custom-file-label{
  border-color:var(--gold-2);
}