/* ============================================================
   DA娛樂城 — 品牌樣式表
   規則只加不改，不動 style.css，也不碰任何 PHP。
   還原方式：移除 includes/head.php 對本檔的 <link> 引用即可。

   本檔處理三件事：
     A. 文字對比度（金色背景 + 亮色文字，原本多處低於 2:1）
     B. 字級系統（內文 16px、區塊標題 24px）
     C. 間距與版面微調
   ============================================================ */

/* ------------------------------------------------------------
   A-0 共用尺度
   ------------------------------------------------------------ */
:root {
  --brand-text: 16px;         /* 內文與連結 */
  --brand-heading: 24px;      /* 區塊標題 */
  --brand-label: 14px;        /* 卡片上的小標籤，塞不下 16px 的位置 */
  --brand-section-gap: 56px;  /* 區塊間距，只給上方 */
  --brand-section-gap-sm: 36px;
}

/* ------------------------------------------------------------
   A-1 頁首：背景壓暗，讓白字全程站得住
   原本 145deg 金色漸層中段亮到 rgb(229,195,101)，
   白字只有 1.70:1。壓暗 45% 之後同一批文字是 4.88:1。
   壓的是背景層，LOGO 圖與按鈕都不受影響。
   ------------------------------------------------------------ */
.navbar-bg {
  background:
    linear-gradient(rgba(0, 0, 0, .45), rgba(0, 0, 0, .45)),
    var(--gradient-navbar);
}

#navbar .nav-link {
  font-size: var(--brand-text);
}

/* 頁首 LOGO 旁的品牌名
   style.css 早就預留了 `#header .logo a span` 的字級規則，只是 HTML 少了那個
   元素。`flex:0 0 auto` 是關鍵——頁首是 flex，可壓縮的話文字會被擠出容器、
   壓在導覽列上。 */
#header .logo {
  width: auto;
  flex: 0 0 auto;
}

#header .logo a {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  overflow: hidden;
}

#header .logo a .logo-text {
  font-size: 28px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  letter-spacing: .02em;
  color: var(--color-text-primary);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}

@media (max-width: 1410px) {
  #header .logo a .logo-text { font-size: 24px; }
}

/* 992~1409：登入後的頁首本來就滿載——五個導覽連結加上帳號、餘額、儲值、
   轉點、登出、會員要 966px。1280~1409 塞得下但品牌名會跟「遊戲大廳」黏在
   一起；992~1279 則會把原本就有的溢出推得更遠。這段登入後只留 LOGO 圖。
   未登入時導覽列只要 736px，空間夠，照常顯示。 */
@media (min-width: 992px) and (max-width: 1409px) {
  .navbar-bg:has(.u-login) .logo a .logo-text { display: none; }
}

@media (max-width: 991px) {
  #header .logo a { gap: 8px; }
  #header .logo a .logo-text { font-size: 22px; }
}

@media (max-width: 767px) {
  #header .logo a { gap: 6px; }
  #header .logo a .logo-text { font-size: 20px; }
}

@media (max-width: 400px) {
  #header .logo a { gap: 4px; }
  #header .logo a .logo-text { font-size: 19px; }
}

/* 359px 以下塞不下，硬留會多出橫向捲動 */
@media (max-width: 359px) {
  #header .logo a .logo-text { display: none; }
}

/* 頁首上的小型登入／註冊鈕，手機版原本只有 10px。
   style.css 那條寫了 !important，這裡得跟上才蓋得過去。
   高度一併從 30px 提到 36px——離天條要求的 44px 還差一截，
   但再高就會把 70px 的頁首撐開，要拉滿得先重排頁首。 */
#header .btn-login.btn-sm,
#header .btn-register.btn-sm {
  font-size: var(--brand-label) !important;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

/* ------------------------------------------------------------
   A-2 跑馬燈：亮金底改深色字
   底色是 #d4a017→#f1c85c，米白字只有 1.65:1；
   換成站上導覽列「目前所在頁」的深棕，同一塊底是 7.67~11.4:1。
   ------------------------------------------------------------ */
.marquee-content li {
  font-size: var(--brand-text);
}

.marquee-content li a,
.top-bar .marquee-content li a {
  color: var(--color-text-secondary) !important;
  font-weight: 500;
}

@media only screen and (max-width: 768px) {
  .marquee-content li a { color: var(--color-text-secondary) !important; }
}

/* ------------------------------------------------------------
   A-3 遊戲分類頁籤：選中的那顆是亮金底，字要深色
   ------------------------------------------------------------ */
.nav-pills2 .nav-link {
  font-size: var(--brand-text);
}

.nav-pills2 .nav-link.active,
.nav-pills2 .nav-link.color.active {
  color: var(--color-text-secondary) !important;
  font-weight: 700;
}

/* ------------------------------------------------------------
   A-4 遊戲卡片：廠商名與「反水最高」標籤
   ------------------------------------------------------------ */
.game-name {
  font-size: var(--brand-text);
}

.BrandGame .gamesBox--button,
.BrandGame .gamesBox--button span {
  color: var(--color-text-secondary) !important;
  font-size: var(--brand-label);
  font-weight: 700;
}

/* ------------------------------------------------------------
   A-5 頁尾
   欄位標題原本是金色 #d4a017 壓在深金底上，只有 2.13:1。
   改成米白之後 4.77:1；層級改用字重、字距與一條金色短線來拉，
   不靠顏色深淺——金色留給那條線，線不受對比度規範。
   ------------------------------------------------------------ */
#footer .footer-top h5 {
  color: var(--color-text-primary);
  font-size: var(--brand-text);
  font-weight: 900;
  letter-spacing: .08em;
  padding-bottom: 8px;
  margin-bottom: 6px;
  /* 不能用 inline-block——.footer-top 是 text-align:center，
     inline-block 會被置中，跟下面靠左的連結對不齊。
     fit-content 保持 block（維持靠左），寬度又只到文字，底線才不會拉滿整欄。 */
  width: fit-content;
  border-bottom: 2px solid var(--primary);
}

#footer a,
#footer li,
#footer p,
#footer .ft-about p,
#footer .copyright {
  font-size: var(--brand-text);
}

#footer a {
  color: var(--color-text-primary);
}

#footer a:hover,
#footer a:focus {
  color: #ffffff;
  text-decoration: underline;
}

/* ------------------------------------------------------------
   A-6 手機底部固定導覽列
   背景跟頁首是同一支金色漸層，中段最亮的地方剛好落在「首頁」上，
   米白字只有 1.78:1。跟頁首同樣壓暗 45%，五顆全部拉到 4.9:1 以上。

   另外這排字原本是 0.8em（12.8px）且 a 帶 line-height:0——
   文字容器的高度因此算成 0，文字靠溢出畫出來。
   一併給回正常行高與 16px，觸控區也才站得住 44px。
   ------------------------------------------------------------ */
.ft-navbar {
  background:
    linear-gradient(rgba(0, 0, 0, .45), rgba(0, 0, 0, .45)),
    var(--gradient-navbar);
}

.ft-navbar ul {
  height: auto;
  min-height: 52px;
}

.ft-navbar ul li {
  padding: 4px 0;
}

a.ft-link {
  font-size: var(--brand-text);
  line-height: 1.25;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 46px;          /* 觸控目標不小於 44px */
}

.ft-link img {
  margin-bottom: 3px;
}

/* 導覽列變高之後，主內容的下方留白要跟著加，才不會被蓋住 */
@media (max-width: 767px) {
  main {
    padding-bottom: 88px;
  }
}

/* ------------------------------------------------------------
   B 字級系統：內文 16px、區塊標題 24px
   ------------------------------------------------------------ */
main p,
main li,
main .content p {
  font-size: var(--brand-text);
  line-height: 1.75;
}

main h2:not(.title),
main h3,
main h4 {
  font-size: var(--brand-heading);
  line-height: 1.35;
  font-weight: 900;
}

/* .title 是版面上那個裝飾用的巨型英文標（LIVE CASINO），不套一般標題尺寸 */

@media (max-width: 767px) {
  main h2:not(.title),
  main h3,
  main h4 {
    font-size: 22px;
  }
}

/* ------------------------------------------------------------
   C 間距：區塊只留上方間距，避免上下疊加把版面撐長
   ------------------------------------------------------------ */
main > section + section {
  margin-top: var(--brand-section-gap);
}

@media (max-width: 767px) {
  main > section + section {
    margin-top: var(--brand-section-gap-sm);
  }
}

/* ============================================================
   第二輪：其他頁面 ＋ Owner 反映的頁尾／商標帶
   ============================================================ */

/* ------------------------------------------------------------
   C-1 導覽列「目前所在頁」
   原本用深棕 #1c1407 標示 active。頁首壓暗之後，深色字反而變成
   全站最看不清的一項（2.16:1）。改成亮金，並補一條底線來標示——
   層級靠形式，不靠顏色深淺。
   ------------------------------------------------------------ */
#navbar .nav-link.active,
.navbar a.active,
.navbar .active,
.navbar .active:focus {
  color: var(--color-text-light) !important;
  font-weight: 700;
}

#navbar .nav-link.active {
  position: relative;
}

#navbar .nav-link.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  background: var(--primary);
  border-radius: 2px;
}

.navbar a:hover,
.navbar li:hover > a {
  color: var(--color-text-light) !important;
}

/* ------------------------------------------------------------
   C-2 頁尾：整塊壓暗 35%
   Owner 反映對比不夠。原本上緣是 #ab7500，米白字只有 4.77:1，
   剛好卡在門檻上。壓暗後同一批文字 7.9:1 以上。
   ------------------------------------------------------------ */
#footer {
  background:
    linear-gradient(rgba(0, 0, 0, .35), rgba(0, 0, 0, .35)),
    linear-gradient(180deg, #ab7500 0%, #946400 25%, #8e6906 50%, #4e3400 75%, #2b1d00 100%);
}

/* ------------------------------------------------------------
   C-3 廠商商標帶：壓暗拉到 45%，跟頁首同一個尺度
   白色商標壓在亮金底上會糊，28% 還不夠。
   ------------------------------------------------------------ */
.brand-logo {
  background:
    linear-gradient(rgba(0, 0, 0, .45), rgba(0, 0, 0, .45)),
    var(--gradient-marquee);
}

/* ------------------------------------------------------------
   C-4 服務條款頁
   這頁的頁內 <style> 是照淺色底寫的（內文 #363636、標題 #442700），
   但實際背景是深棕，整頁量出來只有 1.00:1——等於看不見。
   頁內 style 排在本檔之後，只能用 !important 蓋。
   ------------------------------------------------------------ */
.news-content {
  color: var(--color-text-primary) !important;
}

.news-content h3,
.bar h3 {
  color: var(--color-text-light) !important;
  border-left-color: var(--primary) !important;
}

.news-content li,
.news-content p {
  color: var(--color-text-primary) !important;
}

/* ------------------------------------------------------------
   C-5 遊戲分類頁的廠商／玩法連結
   8px 的 Bootstrap 預設藍（#0d6efd）壓在深金底上只有 1.21:1，
   而且 8px 遠低於可讀下限。
   ------------------------------------------------------------ */
.nav-tabs .nav-link.small,
a.nav-link.small.text-uppercase {
  color: var(--color-text-primary) !important;
  font-size: var(--brand-label) !important;
}

/* 選中的那顆帶著 Bootstrap 預設的白底，在這個深色站上本來就突兀，
   而且白底配深字、深底配亮字兩種寫法會互相打架。
   底色直接統一成深金，文字用亮色——實測 7.2:1，順便讓分頁看起來像同一套。 */
.nav-tabs .nav-link.small.active,
a.nav-link.small.text-uppercase.active {
  background-color: #6b4a05 !important;
  border-color: transparent !important;
  color: var(--color-text-light) !important;
  font-weight: 700;
}

/* ------------------------------------------------------------
   C-6 線上客服頁
   ------------------------------------------------------------ */
.cs-card h3 {
  color: var(--color-text-light) !important;
}

/* LINE 官方綠配白字只有 2.26:1。深一階仍是 LINE 綠系，
   白字拉到 3.3:1，字級同步到 19px 才算得上大文字。 */
.cs-btn.cs-btn-line {
  background: linear-gradient(180deg, #04a445, #037a33) !important;
  font-size: 19px;
}

/* ------------------------------------------------------------
   C-7 帳戶資料頁的表單標籤
   這頁的灰字 #8b8b8b 是照淺色底寫的，壓在深金卡片上只有 2.01:1。
   只挑這頁確定是深底的那組——同名的 span 在儲值、轉點頁是淺底，
   一起改亮會反過來看不見（第二輪就是這樣改壞的）。
   ------------------------------------------------------------ */
.member-page label,
.member-page label span,
.user-account .form-group > label,
.user-account .form-group > label span {
  /* 實測這頁的卡片是 rgb(255,254,246) 白底，原本的 #8b8b8b 只有 3.37:1。
     往深的方向調——先前改成米白是反方向，那會直接消失在白底上。 */
  color: #5c5c5c !important;
}

/* 手機版會員中心的次要說明，實測在深底上 4.43:1 */
.info.d-md-none {
  color: var(--color-text-primary) !important;
}

/* ------------------------------------------------------------
   C-8 淺底卡片裡的文字（儲值、交易紀錄）
   這些是白底／淺灰底，要往深的方向調，不能跟著變亮。
   ------------------------------------------------------------ */
.section-label {
  color: #3d4757 !important;
  font-size: var(--brand-label) !important;
}

.currency-symbol {
  color: #6b5417 !important;
}

.group-text,
label.group-text {
  color: #444444 !important;
}

.btn.btn-outline-primary {
  color: #444444 !important;
  font-size: var(--brand-label) !important;
}

/* 儲值頁的送出鈕：白字壓在亮金上 2.35:1 */
.submit-btn {
  background: linear-gradient(180deg, #8a6208, #6b4a05) !important;
}

/* 淺灰卡片上的餘額區：標題與金額都要往深的方向調 */
.cash-add,
.cash-add span,
.num.WalletTotal,
.num .WalletTotal,
.num.m-3.WalletTotal,
.num.WalletTotal + span,
.cash-add + .num span {
  color: #5c4708 !important;
}

/* 表單驗證訊息：紅字 #dc3545 對比不足 */
.invalid-feedback {
  color: #ff8f9a;
}

/* ============================================================
   D 圖片改用 WebP
   下面這幾張的 .webp 站上早就有了，只是既有的 CSS 還指向原始檔。
   這裡只改「指到哪一支檔案」，尺寸、重複方式、定位全部照舊。
   ============================================================ */

/* 遊戲卡片底圖（variables.css 的 --gradient-game 用的就是這張） */
:root {
  --gradient-game: url(../images/bg_200.png.webp) #fff8e800;
}

.bankcard.bankcard_bg {
  background-image: url(../images/member/bg-bankcard.png.webp);
}

.box-user {
  background-image: url(../images/member/vip-bg.jpg.webp);
}

.BrandGame .games .gamesBox--logo {
  background-image: url(../images/game/caino_logo_bg.png.webp);
}

/* 這條原本帶 !important，要跟上才蓋得過去 */
.notrans_bg {
  background-image: url(../images/game/notrns_bg.png.webp) !important;
}

/* ------------------------------------------------------------
   C-9 白底卡片上的提示字與連結（帳戶資料頁）
   ------------------------------------------------------------ */

/* 純紅 #ff0000 在米白底上只有 3.95:1 */
.member-page span[style*="color:red"],
.member-page span[style*="color: red"],
.member-page .text-danger,
.member-page font[color="red"] {
  color: #c40000 !important;
}

/* 超商連結 #1a73e8 在米白底上 4.45:1，差一點。
   這頁的頁內 <style> 排在本檔之後，不加 !important 蓋不過去。 */
.member-page .box a:not(.btn),
.member-page .store-link {
  color: #0f56b3 !important;
}

/* 第三方登入鈕是品牌色（Google 紅、LINE 綠），只把底色壓深一階，
   識別度還在，白字才站得住 */
.member-page .btn-google,
.member-page [class*="google"] {
  color: #a52b21 !important;
}

/* ------------------------------------------------------------
   C-10 會員頁的小型操作鈕
   「儲值」「查詢點數」是 Bootstrap 的 btn-warning，
   預設的琥珀底配深字只有 4.29:1，差一點。
   ------------------------------------------------------------ */
.member-page .btn.btn-warning,
.btn.btn-warning {
  /* 白字配琥珀底只有 3.25:1（試過，更差）。
     留 Bootstrap 的琥珀色、文字改深——11.18:1，按鈕在深色頁面上也更跳。 */
  background-color: #ffc107 !important;
  border-color: #e0a800 !important;
  color: #1c1407 !important;
  font-weight: 700;
  font-size: var(--brand-label);
}

/* ------------------------------------------------------------
   C-11 實名認證的上傳欄位改中文
   「Choose File」是瀏覽器原生按鈕的字，網站改不到——只能把原生按鈕
   藏起來、自己畫一顆中文的。

   右邊的檔名維持原生顯示：純 CSS 判斷不到 file input 有沒有選到檔
   （沒有這種偽類），若把整個 input 蓋掉，選完檔案畫面不會有任何變化，
   使用者會不知道自己選到什麼——那是功能退步，寧可留著。

   HTML 完全沒動：input 的 name、id、accept、所屬表單都原封不動。
   ------------------------------------------------------------ */
.custom-file {
  position: relative;
  display: block;
  height: 40px;
  width: 100%;
  max-width: 360px;
}

.custom-file .custom-file-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;                 /* 看不見但照樣可以點、可以選檔 */
  cursor: pointer;
  z-index: 3;
}

/* 狀態文字：預設「尚未選擇檔案」，選了檔之後由 brand.js 寫進 data-file */
.custom-file::after {
  content: "尚未選擇檔案";
  position: absolute;
  left: 122px;
  top: 0;
  height: 40px;
  display: flex;
  align-items: center;
  font-size: var(--brand-label);
  color: #6b6b6b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: calc(100% - 130px);
  z-index: 2;
  pointer-events: none;
}

.custom-file[data-file]::after {
  content: attr(data-file);
  color: #3d3d3d;
  font-weight: 500;
}

/* 原生那顆按鈕收起來，兩種寫法都給，舊版 WebKit 才吃得到 */
.custom-file .custom-file-input::file-selector-button {
  display: none;
}

.custom-file .custom-file-input::-webkit-file-upload-button {
  display: none;
}

/* 自己畫的中文按鈕。pointer-events:none 讓點擊穿透到底下的 input， */
/* 所以按鈕、檔名區、整個容器點哪裡都能開選檔視窗。 */
.custom-file::before {
  content: "選擇檔案";
  white-space: nowrap;
  position: absolute;
  left: 0;
  top: 0;
  height: 40px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  font-size: var(--brand-label);
  font-weight: 700;
  color: #1c1407;
  background: linear-gradient(180deg, #ffc107, #e0a800);
  border: 1px solid #c99a06;
  border-radius: 6px;
  z-index: 2;
  pointer-events: none;
}

.custom-file:hover::before {
  filter: brightness(1.06);
}

.custom-file:focus-within::before {
  outline: 2px solid #8a6208;
  outline-offset: 2px;
}

@media (max-width: 767px) {
  .custom-file::before {
    padding: 0 16px;
  }
  .custom-file::after {
    left: 110px;
    max-width: calc(100% - 118px);
  }
}