/* ============================================================================
   inner-pages.css · 內頁專屬樣式
   ----------------------------------------------------------------------------
   §1  page-head        內頁標題區(breadcrumb + h1 + 副標)
   §2  article-body     單篇文章內文排版
   §3  list-grid        列表頁卡牆
   §4  list-card        列表單張卡
   §5  number-balls     開獎號碼球(沿用首頁 .balls 風格,精簡)
   §6  empty-state      空清單提示
   §7  RWD
   ============================================================================ */


/* ============================================================================
   §1 page-head
   ============================================================================ */
.page-head{
  margin:14px 16px 12px;
  padding:18px 22px;
  background:
    radial-gradient(circle at 12% 8%, rgba(120,70,25,.06), transparent 7rem),
    linear-gradient(180deg, rgba(255,249,226,.96), rgba(238,213,160,.96));
  border:2px solid rgba(155,92,34,.86);
  border-radius:4px;
  box-shadow:
    0 3px 0 rgba(122,75,24,.22),
    0 1px 6px rgba(80,35,10,.08),
    inset 0 0 0 1px rgba(255,255,255,.38);
}

.breadcrumb{
  font-size:14px;
  color:#7a4a1c;
  margin-bottom:8px;
  font-family:var(--font-hei);
}
.breadcrumb a{
  color:#a42318;
  border-bottom:1px solid transparent;
  transition:border-color .15s;
}
.breadcrumb a:hover{ border-bottom-color:#a42318 }
.breadcrumb .sep{ margin:0 6px; color:#b58a4a }
.breadcrumb .current{ color:#3d2510; font-weight:700 }

.page-title{
  margin:0 0 6px;
  font-size:32px;
  font-weight:900;
  letter-spacing:.12em;
  color:#a42318;
  line-height:1.2;
}
.page-subtitle{
  margin:0;
  font-size:16px;
  color:#5f4823;
  letter-spacing:.05em;
}


/* ============================================================================
   §2 article-body  單篇文章內文(版路詳情、教學細節、法律頁)
   ============================================================================ */
.article-body{
  padding:24px 28px 28px;
  line-height:1.9;
  font-size:18px;
  color:#3a2a14;
}
.article-body h3{
  margin:1.6em 0 .6em;
  font-size:22px;
  color:#a42318;
  font-weight:900;
  letter-spacing:.08em;
  border-bottom:1px solid rgba(164,35,24,.25);
  padding-bottom:6px;
}
.article-body h3:first-child{ margin-top:0 }
.article-body p{
  margin:0 0 1em;
  font-size:18px;
}
.article-body ul,
.article-body ol{
  margin:0 0 1em;
  padding-left:1.8em;
}
.article-body li{ margin:.3em 0 }
.article-body strong{ color:#a42318 }

.article-meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;          /* 文字與號碼球垂直置中 */
  gap:14px;
  padding:12px 16px;
  margin:12px;
  background:rgba(255,247,224,.72);
  border:1px solid #cab183;
  border-radius:4px;
  font-size:15px;
  color:#5f4823;
  font-family:var(--font-hei);
}
.article-meta span{ white-space:nowrap }
.article-meta b{ color:#a42318 }


/* ============================================================================
   §3 list-grid  列表頁卡牆(彩報、今日方向、教學)
   ============================================================================ */
.list-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:14px;
  padding:14px 16px 12px;
}


/* ============================================================================
   §4 list-card  單張列表卡
   ============================================================================ */
.list-card{
  display:flex;
  flex-direction:column;
  overflow:hidden;
  position:relative;
  background:
    radial-gradient(circle at 12% 8%, rgba(120,70,25,.07), transparent 7rem),
    linear-gradient(180deg, rgba(255,249,226,.96), rgba(238,213,160,.96));
  border:2px solid rgba(155,92,34,.86);
  border-radius:4px;
  box-shadow:
    0 3px 0 rgba(122,75,24,.22),
    0 1px 6px rgba(80,35,10,.08),
    inset 0 0 0 1px rgba(255,255,255,.38);
  transition:transform .15s ease, box-shadow .15s ease;
}
.list-card:hover{
  transform:translateY(-2px);
  box-shadow:
    0 6px 8px rgba(122,75,24,.25),
    0 2px 10px rgba(80,35,10,.15),
    inset 0 0 0 1px rgba(255,255,255,.45);
}

.list-card .thumb{
  width:100%;
  aspect-ratio:4 / 3;
  overflow:hidden;
  background:#f7e7c5;
  border-bottom:1px solid #b1834a;
}
.list-card .thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}

/* 無權限:整片白霧面占位(不輸出真圖 → 資訊零洩漏)*/
.list-card .thumb.is-frosted{
  position:relative;
  background:linear-gradient(160deg, #ffffff 0%, #faf5ec 60%, #f3ecdd 100%);
}
.list-card .thumb.is-frosted::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(circle at 50% 42%, rgba(255,255,255,.7), rgba(247,240,225,.25));
}
.list-card .thumb.is-frosted .lock-overlay{
  z-index:2;
  background:none;                 /* 白底不需壓暗遮罩(否則深色漸層=灰)*/
  color:#a06912;                   /* 鎖字改深金色,白底可讀 */
  text-shadow:0 1px 0 rgba(255,255,255,.7);
}

/* 彩報列表:框改直式(同首頁彩報專區),圖 cover 填滿——太小放大、太大縮小,
   不管供圖 3:4 或 5:6 都自動配合框。只套彩報列表,不動直播/今日方向等橫式卡 */
.report-grid .thumb{
  aspect-ratio:5 / 6;
}

/* 今日方向列表:框改橫式 5:4(對齊疊圖底圖),內部放 fc-card 疊圖卡 */
.direction-grid .thumb{
  aspect-ratio:5 / 4;
  border-bottom:0;
}

.list-card .body{
  padding:12px 14px 14px;
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.list-card .issue,
.list-card .category{
  font-size:13px;
  color:#7a4a1c;
  font-family:var(--font-hei);
  letter-spacing:.05em;
}
.list-card .title{
  margin:0;
  font-size:19px;
  font-weight:900;
  color:#3a2a14;
  line-height:1.35;
}
.list-card .lead{
  font-size:14px;
  color:#5f4823;
  line-height:1.6;
  margin:0;
}
.list-card .footer{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:6px;
  font-size:13px;
  color:#7a4a1c;
  font-family:var(--font-hei);
}


/* ============================================================================
   §5 number-balls  號碼球(列表 / 細節共用)
   ============================================================================ */
.number-balls{
  display:flex;
  gap:8px;
  margin:6px 0 0;
}
.number-balls span{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border:2px solid #aa2c20;
  border-radius:999px;
  background:#fff0d5;
  color:#a12218;
  font-size:18px;
  font-weight:900;
  font-family:var(--font-hei);
}
/* 細節頁的大球 */
.number-balls.large span{
  width:68px;
  height:68px;
  font-size:31px;
}


/* ============================================================================
   §5.5 auth-form  登入 / 註冊 / 忘記密碼 共用表單樣式
   ============================================================================ */
.auth-form .form-row{
  margin-bottom:14px;
}
.auth-form .form-row label:not(.checkbox-label){
  display:block;
  margin-bottom:6px;
  font-weight:700;
  color:#3a2a14;
  font-size:16px;
  font-family:var(--font-hei);
}
.auth-form .form-row .required{
  color:#a42318;
  margin-left:2px;
}
.auth-form input[type="text"],
.auth-form input[type="tel"],
.auth-form input[type="email"],
.auth-form input[type="password"]{
  width:100%;
  padding:11px 14px;
  border:1px solid #b1834a;
  border-radius:4px;
  background:#fff;
  font-size:16px;
  font-family:var(--font-hei);
  color:#3a2a14;
  transition:border-color .15s, box-shadow .15s;
}
.auth-form input:focus{
  outline:none;
  border-color:#a42318;
  box-shadow:0 0 0 3px rgba(164,35,24,.15);
}
.auth-form .form-hint{
  display:block;
  margin-top:4px;
  font-size:13px;
  color:#7a4a1c;
}
.auth-form .form-row-inline{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  font-size:14px;
}
.auth-form .form-row-inline label{
  margin:0;
  font-weight:500;
  font-size:14px;
  cursor:pointer;
  color:#5f4823;
}
/* 同意條款 checkbox(全站共用樣式,自繪取代原生藍框) */
.auth-form .checkbox-label,
.checkbox-label{
  display:flex;
  flex-direction:row;
  flex-wrap:nowrap;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  margin:6px 0;
  background:rgba(255,247,224,.72);
  border:1px solid #cab183;
  border-radius:4px;
  font-weight:500;
  font-size:14px;
  color:#5f4823;
  line-height:1.6;
  cursor:pointer;
  transition:background .15s, border-color .15s;
}
/* 文字 span 占滿剩餘寬度,允許自然 wrap 但不會跳到 checkbox 下方 */
.auth-form .checkbox-label > span,
.checkbox-label > span{
  flex:1 1 auto;
  min-width:0;
  line-height:1.5;
}
.auth-form .checkbox-label:hover,
.checkbox-label:hover{
  background:#fff5dc;
  border-color:#a42318;
}

/* 自繪 radio:20×20 圓 棕邊框米黃底,選中紅底白點(全站共用) */
.auth-form input[type="radio"],
.checkbox-label input[type="radio"]{
  appearance:none;
  -webkit-appearance:none;
  flex:0 0 auto;
  width:20px;
  height:20px;
  margin:0;
  background:#fff;
  border:2px solid #b1834a;
  border-radius:50%;
  cursor:pointer;
  display:grid;
  place-items:center;
  transition:background .15s, border-color .15s;
}
.auth-form input[type="radio"]:hover{ border-color:#a42318; }
.auth-form input[type="radio"]:checked{
  background:#a42318;
  border-color:#86170f;
}
.auth-form input[type="radio"]:checked::after{
  content:"";
  width:8px;
  height:8px;
  background:#fff5dc;
  border-radius:50%;
}
.auth-form input[type="radio"]:focus-visible{
  outline:2px solid #d6a64d;
  outline-offset:2px;
}

/* 自繪 checkbox:18×18 棕邊框米黃底,勾選時紅底白勾 */
.auth-form .checkbox-label input[type="checkbox"],
.checkbox-label input[type="checkbox"]{
  appearance:none;
  -webkit-appearance:none;
  flex:0 0 auto;
  width:20px;
  height:20px;
  margin:0;
  background:#fff;
  border:2px solid #b1834a;
  border-radius:3px;
  cursor:pointer;
  display:grid;
  place-items:center;
  transition:background .15s, border-color .15s;
  position:relative;
}
.auth-form .checkbox-label input[type="checkbox"]:hover,
.checkbox-label input[type="checkbox"]:hover{
  border-color:#a42318;
}
.auth-form .checkbox-label input[type="checkbox"]:checked,
.checkbox-label input[type="checkbox"]:checked{
  background:#a42318;
  border-color:#86170f;
}
.auth-form .checkbox-label input[type="checkbox"]:checked::after,
.checkbox-label input[type="checkbox"]:checked::after{
  content:"";
  width:6px;
  height:11px;
  border:solid #fff5dc;
  border-width:0 2.5px 2.5px 0;
  transform:rotate(45deg) translate(-1px, -1px);
}
.auth-form .checkbox-label input[type="checkbox"]:focus-visible,
.checkbox-label input[type="checkbox"]:focus-visible{
  outline:2px solid #d6a64d;
  outline-offset:2px;
}

.auth-form .checkbox-label a,
.checkbox-label a{
  color:#a42318;
  font-weight:700;
  border-bottom:1px solid transparent;
}
.auth-form .checkbox-label a:hover,
.checkbox-label a:hover{
  border-bottom-color:#a42318;
}
.auth-form .link-secondary{
  color:#a42318;
  font-weight:500;
}
.auth-form .link-secondary:hover{ text-decoration:underline }
.auth-form button.btn{
  cursor:pointer;
  border:0;
  font-family:inherit;
}


/* ============================================================================
   §5.6 vip-grid / vip-card  會員方案頁
   ============================================================================ */
.vip-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:18px;
  padding:14px 16px 12px;
  align-items:stretch;
}

.vip-card{
  position:relative;
  display:flex;
  flex-direction:column;
  padding:34px 24px 22px;
  background:
    radial-gradient(circle at 12% 8%, rgba(120,70,25,.06), transparent 7rem),
    linear-gradient(180deg, rgba(255,249,226,.97), rgba(238,213,160,.97));
  border:2px solid rgba(155,92,34,.86);
  border-radius:6px;
  box-shadow:
    0 3px 0 rgba(122,75,24,.22),
    0 1px 8px rgba(80,35,10,.10),
    inset 0 0 0 1px rgba(255,255,255,.38);
  text-align:center;
}

/* 最受歡迎方案:金色邊框 + 略放大 */
.vip-card.is-featured{
  border-color:#d6a64d;
  box-shadow:
    0 4px 0 rgba(132,90,30,.32),
    0 4px 18px rgba(214,166,77,.35),
    inset 0 0 0 1px rgba(255,235,180,.55);
  transform:translateY(-6px);
}

.vip-badge{
  position:absolute;
  top:-14px;
  left:50%;
  transform:translateX(-50%);
  padding:5px 18px;
  background:linear-gradient(180deg, #e9c267 0%, #b88330 100%);
  color:#3d1808;
  font-size:14px;
  font-weight:900;
  letter-spacing:.1em;
  border-radius:14px;
  border:1.5px solid #d6a64d;
  box-shadow:0 2px 6px rgba(132,90,30,.35);
  white-space:nowrap;
  font-family:var(--font-hei);
}

.vip-card .vip-name{
  margin:0 0 8px;
  font-size:30px;
  font-weight:900;
  color:#a42318;
  letter-spacing:.15em;
  background:none;
  text-shadow:none;
  padding:0;
  border:0;
  box-shadow:none;
}
.vip-card.is-featured .vip-name{ color:#8f5f1c }

.vip-card .vip-price{
  margin:10px 0;
  font-family:var(--font-hei);
  font-size:36px;
  font-weight:900;
  color:#3a2a14;
  line-height:1.1;
}
.vip-card .vip-price small{
  display:inline-block;
  margin-left:6px;
  font-size:15px;
  font-weight:500;
  color:#7a4a1c;
  vertical-align:middle;
}

.vip-card .vip-tagline{
  margin:0 0 18px;
  font-size:15px;
  color:#5f4823;
  letter-spacing:.05em;
}

.vip-card .vip-features{
  flex:1 1 auto;
  margin:0 0 18px;
  padding:18px 0;
  list-style:none;
  border-top:1px dashed rgba(155,110,50,.45);
  border-bottom:1px dashed rgba(155,110,50,.45);
  text-align:left;
}
.vip-card .vip-features li{
  padding:6px 0 6px 26px;
  position:relative;
  font-size:15px;
  color:#3a2a14;
  line-height:1.5;
}
.vip-card .vip-features li::before{
  content:"✓";
  position:absolute;
  left:6px;
  top:6px;
  color:#175d2c;
  font-weight:900;
}
.vip-card.is-featured .vip-features li::before{ color:#a42318 }

.vip-card .btn{
  width:100%;
  margin:0;
}

/* CTA 4 格 */
.vip-cta{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:14px;
  padding:24px 16px;
  margin:0 16px 12px;
  background:rgba(255,247,224,.55);
  border:1px solid rgba(155,110,50,.35);
  border-radius:6px;
}
.vip-cta-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:6px 8px;
}
.vip-cta-item .vip-cta-ico{
  flex:0 0 auto;
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  font-size:28px;
  background:linear-gradient(180deg, #f6e3b8 0%, #e6c98a 100%);
  border:1.5px solid #b1834a;
  border-radius:50%;
}
.vip-cta-item b{
  display:block;
  font-size:16px;
  color:#3a2a14;
  font-family:var(--font-hei);
  margin-bottom:2px;
}
.vip-cta-item p{
  margin:0;
  font-size:13px;
  color:#7a4a1c;
}


/* ============================================================================
   §5.7 list-filters  彩種 chip + 關鍵字搜尋(列表頁共用)
   ============================================================================ */
.list-filters{
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px 16px 4px;
  flex-wrap:wrap;
}

.lottery-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  flex:1 1 auto;
}
.lottery-tab{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 14px;
  background:rgba(255,247,224,.85);
  border:1.5px solid #b1834a;
  border-radius:18px;
  font-size:14px;
  font-weight:700;
  color:#5f4823;
  font-family:var(--font-hei);
  letter-spacing:.03em;
  transition:background .15s, color .15s, border-color .15s;
}
.lottery-tab .dot{
  width:8px;
  height:8px;
  border-radius:50%;
  flex:0 0 auto;
  box-shadow:0 0 0 1px rgba(0,0,0,.1);
}
.lottery-tab:hover{
  background:#fff5dc;
  border-color:#a42318;
  color:#a42318;
}
.lottery-tab.is-active{
  background:linear-gradient(180deg, #b83225, #86170f);
  color:#fff5dc;
  border-color:#86170f;
  box-shadow:0 2px 4px rgba(70,20,5,.25), inset 0 1px rgba(255,255,255,.15);
}
.lottery-tab.is-active .dot{
  box-shadow:0 0 0 2px rgba(255,245,215,.55);
}
.lottery-tab .chip-mark{
  margin-left:2px;
  font-weight:900;
  font-size:13px;
  color:#ffe79d;
}

/* 關鍵字搜尋 */
.filter-search{
  display:flex;
  align-items:stretch;
  flex:0 0 auto;
}
.filter-search input[type="search"]{
  padding:8px 12px;
  border:1.5px solid #b1834a;
  border-radius:4px 0 0 4px;
  border-right:0;
  background:#fff;
  font-size:14px;
  font-family:var(--font-hei);
  color:#3a2a14;
  width:200px;
  outline:none;
  transition:border-color .15s, box-shadow .15s;
}
.filter-search input[type="search"]:focus{
  border-color:#a42318;
  box-shadow:0 0 0 3px rgba(164,35,24,.12);
  position:relative;
  z-index:1;
}
.filter-search button{
  padding:8px 14px;
  border:1.5px solid #b1834a;
  background:linear-gradient(180deg, #b83225, #86170f);
  color:#fff5dc;
  border-radius:0 4px 4px 0;
  cursor:pointer;
  font-size:16px;
  font-family:inherit;
}
.filter-search button:hover{
  background:linear-gradient(180deg, #c94434, #951d12);
}

/* 篩選摘要列 */
.filter-summary{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  padding:8px 16px 0;
  font-size:14px;
  color:#5f4823;
  font-family:var(--font-hei);
}
.filter-summary-label{
  color:#7a4a1c;
}
.filter-summary-tag{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:3px 10px;
  background:rgba(255,247,224,.85);
  border:1.5px solid #b1834a;
  border-radius:12px;
  font-size:13px;
  color:#3a2a14;
}
.filter-summary-tag .dot{
  width:7px;
  height:7px;
  border-radius:50%;
  box-shadow:0 0 0 1px rgba(0,0,0,.1);
}
.filter-summary-count{
  margin-left:4px;
  color:#a42318;
  font-weight:700;
}
.filter-clear{
  margin-left:auto;
  padding:4px 10px;
  color:#7a4a1c;
  border:1px solid transparent;
  border-radius:3px;
  font-size:13px;
}
.filter-clear:hover{
  background:#fde7e3;
  color:#a42318;
  border-color:#c84735;
}


/* ============================================================================
   §5.8 cycle-grid  付款週期卡(月/季/年,年繳金色「最划算」featured)
   ============================================================================ */
.cycle-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:14px;
  margin-bottom:24px;
  padding-top:12px;       /* 給 featured ribbon 上緣留空間 */
}
.cycle-card{
  position:relative;
  display:flex;        /* 讓內層 .cycle-body 能撐滿高度 */
  cursor:pointer;
}
.cycle-card input[type="radio"]{
  position:absolute;
  opacity:0;
  pointer-events:none;
  width:0;
  height:0;
}
.cycle-card .cycle-body{
  position:relative;
  flex:1 1 auto;            /* 撐滿父層高度,讓三張卡等高 */
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:4px;
  padding:20px 12px 16px;
  text-align:center;
  background:#fffaee;
  border:2px solid #b1834a;
  border-radius:6px;
  transition:border-color .15s, background .15s, box-shadow .15s, transform .15s;
}
.cycle-card .cycle-desc{
  margin-top:auto;          /* desc 推到底,讓卡片內容對齊頂部、底部齊一 */
}
.cycle-card:hover .cycle-body{
  border-color:#a42318;
  background:#fff5dc;
}
/* 選中:用 :has 偵測 radio,免 JS */
.cycle-card:has(input:checked) .cycle-body{
  border-color:#a42318;
  background:linear-gradient(180deg, #fff5dc, #f8e9c3);
  box-shadow:0 0 0 3px rgba(164,35,24,.15), 0 3px 6px rgba(122,75,24,.22);
}

/* 年繳 featured:金色邊框 + 上移 */
.cycle-card.is-featured .cycle-body{
  border-color:#d6a64d;
  background:linear-gradient(180deg, #fff8e0, #f6e3b8);
}
.cycle-card.is-featured:has(input:checked) .cycle-body{
  border-color:#a42318;
  background:linear-gradient(180deg, #fff5dc, #fde0a3);
  box-shadow:0 0 0 3px rgba(214,166,77,.30), 0 3px 8px rgba(132,90,30,.32);
}

/* 「最划算」金色 ribbon */
.cycle-ribbon{
  position:absolute;
  top:-12px;
  left:50%;
  transform:translateX(-50%);
  padding:3px 14px;
  background:linear-gradient(180deg, #e9c267 0%, #b88330 100%);
  color:#3d1808;
  font-size:12px;
  font-weight:900;
  letter-spacing:.08em;
  border-radius:11px;
  border:1.5px solid #d6a64d;
  box-shadow:0 2px 4px rgba(132,90,30,.35);
  white-space:nowrap;
  font-family:var(--font-hei);
}

.cycle-card .cycle-label{
  font-size:17px;
  font-weight:900;
  color:#3a2a14;
  font-family:var(--font-hei);
  letter-spacing:.08em;
}
.cycle-card .cycle-price{
  font-size:22px;
  font-weight:900;
  color:#a42318;
  margin:4px 0 2px;
  font-family:var(--font-hei);
  line-height:1.1;
}
.cycle-card .cycle-badge{
  display:inline-block;
  padding:2px 10px;
  background:#175d2c;
  color:#fff5dc;
  font-size:12px;
  font-weight:900;
  border-radius:10px;
  font-family:var(--font-hei);
  letter-spacing:.05em;
  margin-top:2px;
}
.cycle-card.is-featured .cycle-badge{
  background:#a42318;
}
.cycle-card .cycle-desc{
  font-size:12px;
  color:#5f4823;
  margin-top:4px;
  line-height:1.4;
}

/* ============================================================================
   §5.9 provider-banner  金流商資訊條(後台設定,僅顯示用什麼家)
   ============================================================================ */
.provider-banner{
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px 18px;
  margin-bottom:20px;
  background:linear-gradient(180deg, rgba(255,247,224,.95), rgba(248,233,195,.95));
  border:1.5px solid var(--pv-color, #b1834a);
  border-left:4px solid var(--pv-color, #a42318);
  border-radius:4px;
  font-family:var(--font-hei);
}
.provider-banner-logo{
  display:inline-block;
  padding:6px 14px;
  border-radius:14px;
  font-size:14px;
  font-weight:900;
  letter-spacing:.05em;
  color:#fff;
  background:linear-gradient(180deg, var(--pv-color2, #a42318), var(--pv-color, #86170f));
  white-space:nowrap;
}
.provider-banner-text{
  flex:1 1 auto;
  font-size:14px;
  font-weight:700;
  color:#3a2a14;
}
.provider-banner-ico{
  font-size:20px;
  color:var(--pv-color, #a42318);
}


/* ============================================================================
   §5.10 orders-table  訂單列表 + 狀態 badge + 時間軸(訂單明細)
   ============================================================================ */
.orders-table-wrap{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.orders-table{
  width:100%;
  border-collapse:collapse;
  font-family:var(--font-hei);
  font-size:14px;
  color:#3a2a14;
  min-width:680px;          /* 至少這寬度,否則手機橫向滾 */
}
.orders-table thead{
  background:rgba(255,235,180,.8);
}
.orders-table th{
  padding:12px 10px;
  text-align:left;
  font-size:13px;
  color:#7a4a1c;
  border-bottom:2px solid #b1834a;
  letter-spacing:.05em;
}
.orders-table td{
  padding:14px 10px;
  border-bottom:1px solid #cab183;
  vertical-align:middle;
}
.orders-table tr:hover td{
  background:rgba(255,247,224,.6);
}
.orders-table .td-no a{
  color:#a42318;
  font-size:13px;
  font-family:var(--font-hei);
  border-bottom:1px solid transparent;
}
.orders-table .td-no a:hover{
  border-bottom-color:#a42318;
}
.orders-table .td-amount{
  font-size:16px;
  font-weight:900;
  color:#a42318;
  white-space:nowrap;
}
.orders-table .td-time{
  font-size:13px;
  color:#5f4823;
  white-space:nowrap;
}
.orders-table .td-action{
  white-space:nowrap;
  text-align:right;
}
.orders-table small{
  font-size:12px;
  color:#7a4a1c;
  font-weight:500;
}
.orders-table .btn-link{
  color:#a42318;
  font-weight:700;
  font-size:13px;
  padding:6px 10px;
  border:1px solid #b1834a;
  border-radius:4px;
  background:rgba(255,247,224,.85);
  transition:background .15s, border-color .15s;
}
.orders-table .btn-link:hover{
  background:#fff5dc;
  border-color:#a42318;
}

/* 狀態 badge(訂單列表 + 細節通用) */
.order-status{
  display:inline-block;
  padding:3px 10px;
  border-radius:11px;
  font-size:12px;
  font-weight:900;
  letter-spacing:.05em;
  font-family:var(--font-hei);
  white-space:nowrap;
}

/* 訂單明細 meta 表(2 欄式) */
.order-meta .row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:9px 0;
  border-bottom:1px dashed rgba(155,110,50,.45);
  font-family:var(--font-hei);
  font-size:14px;
}
.order-meta .row:last-child{
  border-bottom:0;
}
.order-meta .row span{
  color:#7a4a1c;
}

/* 訂單處理進度時間軸 */
.order-timeline{
  list-style:none;
  margin:0;
  padding:8px 0;
}
.order-timeline li{
  display:flex;
  align-items:flex-start;
  gap:14px;
  padding:10px 0;
  position:relative;
  font-family:var(--font-hei);
}
.order-timeline li:not(:last-child)::after{
  content:"";
  position:absolute;
  left:9px;
  top:32px;
  bottom:-10px;
  width:2px;
  background:#cab183;
}
.order-timeline .dot{
  flex:0 0 auto;
  width:20px;
  height:20px;
  border-radius:50%;
  background:#fff;
  border:3px solid #b1834a;
  margin-top:2px;
  position:relative;
  z-index:1;
}
.order-timeline .t-label{
  font-size:15px;
  font-weight:700;
  color:#3a2a14;
}
.order-timeline .t-time{
  font-size:13px;
  color:#5f4823;
  margin-top:2px;
}
.order-timeline li.is-done .dot{
  background:#175d2c;
  border-color:#175d2c;
}
.order-timeline li.is-highlight .dot{
  background:#175d2c;
  border-color:#175d2c;
  box-shadow:0 0 0 4px rgba(23,93,44,.18);
  width:22px;
  height:22px;
  margin-top:1px;
}
.order-timeline li.is-highlight .t-label{
  color:#175d2c;
  font-size:16px;
}
.order-timeline li.is-error .dot{
  background:#c84735;
  border-color:#c84735;
}
.order-timeline li.is-error .t-label{
  color:#c84735;
}
.order-timeline li.is-pending .dot{
  background:#fff;
  border-color:#a06912;
  border-style:dashed;
}
.order-timeline li.is-pending .t-label{
  color:#a06912;
}


/* ============================================================================
   §5.11 tier-badge + lock-overlay  用戶分級制度視覺
   ============================================================================ */

/* 等級徽章(用在卡片縮圖右上角 / 論壇 row 行首) */
.tier-badge{
  display:inline-block;
  padding:3px 9px;
  border-radius:11px;
  font-size:11px;
  font-weight:900;
  letter-spacing:.06em;
  font-family:var(--font-hei);
  line-height:1.4;
  vertical-align:middle;
}
/* utility class 用 !important 確保不被父層 color 覆寫
   (例:.forum-row span:nth-child(1) 的暗藍會吃掉 badge 字色) */
.tier-badge.tier-free{
  background:#175d2c;
  color:#fff5dc !important;
}
.tier-badge.tier-vip1{
  background:linear-gradient(180deg, #e9c267, #b88330);
  color:#3d1808 !important;
  border:1px solid #d6a64d;
}
.tier-badge.tier-vip2{
  background:linear-gradient(180deg, #c84735, #86170f);
  color:#fff5dc !important;
}

/* 列表卡 thumb 內的 badge:絕對定位左上角 */
.list-card .thumb{ position:relative }
.list-card .thumb .tier-badge{
  position:absolute;
  top:8px;
  left:8px;
  z-index:2;
  box-shadow:0 1px 3px rgba(0,0,0,.3);
}

/* 鎖卡 overlay(整個 thumb 變暗 + 中央顯示「VIPx 專屬」) */
.list-card .thumb .lock-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.3), rgba(0,0,0,.55));
  color:#ffe79d;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  font-weight:900;
  letter-spacing:.1em;
  font-family:var(--font-hei);
  z-index:1;
  text-shadow:0 2px 4px rgba(0,0,0,.6);
}
.list-card.is-locked .body{
  opacity:.75;             /* 鎖卡內文也降透明度 */
}
.list-card.is-locked:hover{
  transform:translateY(-2px);
  box-shadow:
    0 6px 8px rgba(122,75,24,.25),
    0 0 0 2px #d6a64d,     /* 金邊提示可點(進升級頁) */
    inset 0 0 0 1px rgba(255,255,255,.45);
}

/* 論壇 row 鎖列:整列稍暗、行內加金鎖提示
   標題色:深棕紅(#5f2410),對米黃底對比足夠不會看起來「灰灰的」 */
.forum-row.is-locked{
  background:rgba(255,235,180,.5);
}
.forum-row.is-locked span:nth-child(1){
  color:#5f2410;
  font-weight:900;
}
.forum-row.is-locked span:nth-child(2),
.forum-row.is-locked span:nth-child(3){
  color:#3a2a14;            /* 作者 / 時間也加深一點維持可讀性 */
}
.forum-row.is-locked:hover{
  background:rgba(255,228,160,.85);
}


/* ============================================================================
   §6 empty-state
   ============================================================================ */
.empty-state{
  padding:60px 20px;
  text-align:center;
  color:#7a4a1c;
  font-size:18px;
}


/* ============================================================================
   §7 RWD
   ============================================================================ */
@media (max-width:1180px){
  .list-grid{ grid-template-columns:repeat(2, 1fr) }
  .vip-cta{ grid-template-columns:repeat(2, 1fr) }
}

@media (max-width:760px){
  .page-head{
    margin:10px;
    padding:14px 16px;
  }
  .page-title{ font-size:24px }
  .page-subtitle{ font-size:14px }
  .breadcrumb{ font-size:13px }

  .article-body{
    padding:16px 18px 20px;
    font-size:16px;
  }
  .article-body p{ font-size:16px }
  .article-body h3{ font-size:19px }

  .article-meta{ margin:10px; font-size:13px }

  .list-grid{
    grid-template-columns:1fr;
    gap:10px;
    padding:10px;
  }

  .list-card .title{ font-size:17px }

  .number-balls span{ width:38px; height:38px; font-size:16px }
  .number-balls.large span{ width:58px; height:58px; font-size:26px }

  /* 篩選列手機:標籤橫向滾動,搜尋框獨佔一行 */
  .list-filters{
    flex-direction:column;
    align-items:stretch;
    padding:10px 10px 4px;
  }
  .lottery-tabs{
    flex-wrap:nowrap;
    overflow-x:auto;
    min-width:0;              /* flex item 預設 auto 會被內容撐開,要設 0 才會觸發 overflow */
    max-width:100%;
    padding-bottom:4px;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;     /* 隱藏捲軸(仍可橫滑)— 否則紅色捲軸會像一條粗紅線 */
  }
  .lottery-tabs::-webkit-scrollbar{ display:none; }   /* WebKit/Blink:同上隱藏 */
  .lottery-tab{
    flex:0 0 auto;
    white-space:nowrap;
  }
  .filter-search{
    width:100%;
  }
  .filter-search input[type="search"]{
    flex:1 1 auto;
    width:auto;
  }
  .filter-summary{
    padding:8px 10px 0;
    font-size:13px;
  }
  .filter-clear{
    margin-left:0;
  }

  /* VIP 方案手機:單欄 + 取消「最受歡迎」上移效果 */
  .vip-grid{
    grid-template-columns:1fr;
    gap:24px;
    padding:10px;
  }
  .vip-card{ padding:28px 20px 20px }
  .vip-card.is-featured{ transform:none }
  .vip-card .vip-name{ font-size:24px }
  .vip-card .vip-price{ font-size:30px }

  /* CTA 手機:單欄 */
  .vip-cta{
    grid-template-columns:1fr;
    gap:10px;
    margin:0 10px 10px;
    padding:14px 16px;
  }

  /* 付款週期手機:改單欄 3 列,避免「NT$ 19,990」太長被擠到換行 */
  .cycle-grid{
    grid-template-columns:1fr;
    gap:10px;
  }
  .cycle-card .cycle-body{
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    padding:14px 18px;
    text-align:left;
    gap:10px;
  }
  .cycle-card .cycle-label{
    flex:0 0 auto;
    font-size:16px;
  }
  .cycle-card .cycle-price{
    flex:1 1 auto;
    margin:0;
    text-align:right;
    font-size:20px;
  }
  .cycle-card .cycle-badge{
    flex:0 0 auto;
    margin:0;
  }
  .cycle-card .cycle-desc{
    display:none;             /* 手機行內排版時 desc 隱藏避免擠 */
    margin:0;
  }
  /* 年繳 ribbon 在行內版本要往右靠 */
  .cycle-card.is-featured .cycle-ribbon{
    top:-10px;
    left:auto;
    right:14px;
    transform:none;
  }
}

/* ============================================================================
   分頁列 .pager(AJAX:.page-link 由 list-ajax.js 攔截)
   ============================================================================ */
.pager{
  display:flex;
  gap:8px;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  margin:22px 0 10px;
  font-family:var(--font-hei);
}
.pager .page-link{
  min-width:40px;
  height:40px;
  padding:0 12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,247,224,.85);
  border:1.5px solid #b1834a;
  border-radius:6px;
  color:#5f4823;
  font-size:15px;
  font-weight:700;
  letter-spacing:.03em;
  transition:background .15s, color .15s, border-color .15s;
}
.pager .page-link:hover{
  background:#fff5dc;
  border-color:#a42318;
  color:#a42318;
}
.pager .page-link.is-active{
  background:linear-gradient(180deg, #b83225, #86170f);
  color:#fff5dc;
  border-color:#86170f;
  box-shadow:0 2px 4px rgba(70,20,5,.25), inset 0 1px rgba(255,255,255,.15);
  cursor:default;
}
.pager .page-link.is-disabled{
  opacity:.4;
  pointer-events:none;
}
.pager .page-ellipsis{
  color:#7a4a1c;
  padding:0 2px;
}
@media (max-width:760px){
  .pager .page-link{ min-width:36px; height:36px; padding:0 9px; font-size:14px; }
}

/* AJAX 局部更新載入中:整區淡化 + 鎖點擊(避免連點) */
.list-ajax{ transition:opacity .15s ease; }
.list-ajax.is-loading{ opacity:.5; pointer-events:none; }