/* theme4 overrides — โหลดหลัง style.css ของต้นแบบเสมอ
 *
 * ไฟล์นี้มีไว้แก้เฉพาะจุดที่ "asset ของเราสัดส่วนไม่เท่าต้นแบบ" เท่านั้น
 * เจตนา: คง geometry ของต้นแบบไว้เป๊ะ แต่ให้รูปจาก API แสดงได้โดยไม่ถูก crop
 * ห้ามแก้ style.css ที่ mirror มา — จะได้ diff กับต้นแบบได้ตลอด
 */

/* ── โลโก้ header ──────────────────────────────────────────────────────────
 * ต้นแบบ: โลโก้ 639×627 (เกือบจัตุรัส) + `width:120px` → สูง 117.7px → .header สูง 139.7px
 * ของเรา: โลโก้จาก API 1040×461 (แนวนอน) → สูงแค่ 53.2px → header เตี้ยลง 64.5px
 * แก้: ล็อกกล่องโลโก้ให้สูงเท่าต้นแบบ แล้ว contain รูปไว้ข้างใน (ไม่ crop ไม่ยืด)
 */
.header .logo {
  /* อัตราส่วนไฟล์โลโก้ต้นแบบจริง (639×627) — ให้ browser คำนวณสูงเอง
     จะได้ตรงกับต้นแบบเป๊ะ ไม่ต้องฝังเลขปัดเศษ */
  aspect-ratio: 639 / 627;
  height: auto;
  object-fit: contain;
  object-position: center;
}

/* ── โลโก้กลาง bottom nav ──────────────────────────────────────────────────
 * ต้นแบบใช้ inline style width:90px + position:absolute; top:-10px
 * รูปแนวนอนจะเตี้ยกว่าเดิมมาก ทำให้หลุดตำแหน่งเดิม — ล็อกความสูงให้เท่ากรอบเดิม
 */
.menuListNavBottom li a img[style*="position: absolute"] {
  height: 60px;
  object-fit: contain;
  object-position: center;
}

/* ── โลโก้ค่ายเกมใน rail ───────────────────────────────────────────────────
 * ต้นแบบ: โลโก้ค่ายเกือบจัตุรัส → สูง ~59.5px ต่อช่อง
 * ของเรา: รูปค่ายจาก API เป็นภาพแนวนอน → สูงแค่ ~21.5px จังหวะ rail เลยผิดไป
 * แก้: ล็อกอัตราส่วนช่องให้เท่าต้นแบบ แล้ว contain รูปไว้ (ไม่ crop โลโก้ค่าย)
 */
.partnerSlider .linkPartner img {
  /* ต้นแบบวัดได้ 59.5px พอดี (โลโก้ค่ายเกือบจัตุรัสที่กว้าง 60px) */
  height: 59.5px;
  object-fit: contain;
  object-position: center;
}

/* ── hamburger scroll ──────────────────────────────────────────────────────
 * ต้นแบบมีเมนู hamburger แค่ 6 ปุ่ม → พอดีจอ · ของเราดึงจาก getMenu.hamburger 17 ปุ่ม
 * → ล้นจอแต่ `.side-menu` เป็น overflow:visible เลย scroll ไม่ได้
 * แก้: ให้ header กับปุ่ม logout ค้างไว้ ส่วน .menu-options ตรงกลาง scroll เอง
 * (min-height:0 จำเป็นให้ flex child หดแล้ว scroll ได้)
 */
.side-menu {
  overflow: hidden; /* กัน bounce ของทั้ง panel — ให้ scroll เฉพาะข้างใน */
}
.side-menu .side-menu-header,
.side-menu .language-selector,
.side-menu .btn-logout {
  flex: 0 0 auto;
}
.side-menu .menu-options {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  margin: 0 -6px; /* กันสกอลบาร์เบียดไอคอน */
  padding: 0 6px;
  scrollbar-width: thin;
  scrollbar-color: gold transparent;
}
.side-menu .menu-options::-webkit-scrollbar {
  width: 6px;
}
.side-menu .menu-options::-webkit-scrollbar-thumb {
  background-color: gold;
  border-radius: 10px;
}

/* title ยาว (เช่น "รางวัลรายชั่วโมง") ไม่ให้ box สูงกว่าตัวอื่น:
 * ล็อกความสูงทุกช่องเท่ากัน + clamp เฉพาะ "ข้อความ" ไว้ 2 บรรทัด (ตัว flex ยังเป็น icon+text) */
.side-menu .menu-options > [class*="col-"] {
  display: flex;
}
.side-menu .menu-item {
  width: 100%;
  min-height: 86px; /* min-height (ไม่ใช่ height) → ป้ายยาวขยาย tile ได้ ไม่โดนตัด */
  justify-content: center;
  gap: 4px;
}
.side-menu .menu-item .menu-icon {
  flex: 0 0 auto;
}
.side-menu .menu-item-label {
  /* display:block (ไม่ใช่ -webkit-box) — ใน -webkit-box ตัว text-align:center ไม่มีผล
     ทำให้ป้ายหลายบรรทัดชิดซ้าย · block + width100% + text-align:center → กึ่งกลางทุกบรรทัด
     ไม่ clamp/ไม่ตัด → เห็นข้อความครบทุกบรรทัด (เช่น "รางวัลรายชั่วโมง" = 3 บรรทัด) */
  display: block;
  width: 100%;
  font-size: 0.78rem;
  line-height: 1.15;
  text-align: center;
  overflow-wrap: anywhere;
}

/* ── ป้ายเมนู grid หน้าหลัก (.menuDashboard .btnMenu) ──────────────────────────
 * .btnMenu เป็น flex + justify-content:center → จัด "กล่อง" span ให้กลาง
 * แต่ span ไม่มี text-align → ป้ายที่ห่อหลายบรรทัด (เช่น "รางวัลรายชั่วโมง")
 * บรรทัดในกล่องยังชิดซ้าย · เติม text-align:center + width100% → ทุกบรรทัดกึ่งกลาง */
/* ── หน้า account ทุก viewport ให้ดูเต็ม/สวย (ดีกว่าต้นฉบับที่แค่วางคอลัมน์มือถือกลางจอ) ──
 * ต้นฉบับ media ≤480 ซ้อนใน @media อื่น (CSS ซ้อนไม่ถูก) เลยตาย → tile สูงตาม content ไม่คุม
 * คุมเองใหม่ 2 breakpoint: mobile กระชับ · desktop ขยายคอลัมน์ + tile ใหญ่จัตุรัส
 *
 * ≥768: ขยายคอลัมน์เนื้อหา (header/balance/menu/lobby/bottomnav) จาก col-md-6 (~360-660px)
 *       → สูงสุด 840px จัดกลาง → เต็มจอขึ้น ไม่โล่งสองข้าง · tile กว้าง ~133px */
@media (min-width: 768px) {
  .acctWide {
    flex: 0 0 auto;
    width: 94%;
    max-width: 840px;
  }
  .menuDashboard .btnMenu {
    height: 120px; /* จัตุรัสกับ tile กว้าง ~133px */
    padding-top: 64px;
    padding-bottom: 10px;
  }
  .menuDashboard .btnMenu img {
    width: 64px;
    height: 64px;
  }
  .menuDashboard .btnMenu span {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 0.9rem;
    line-height: 1.12;
  }
}
/* mobile (<768) — tile กว้าง ~52px → กระชับ ป้ายกึ่งกลาง */
@media (max-width: 767.98px) {
  .menuDashboard .btnMenu {
    height: 78px;
    padding-top: 42px;
    padding-bottom: 5px;
  }
  .menuDashboard .btnMenu img {
    width: 38px;
    height: 38px;
  }
  .menuDashboard .btnMenu span {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 0.68rem;
    line-height: 1.08;
  }
}

/* ── Tab (.tabAff) ให้เข้าธีมทอง ────────────────────────────────
   style.css เดิม (mirror) ใช้ var(--Linear, ม่วง) เป็น fallback — เพราะ theme var --Linear
   ยังไม่ถูกตั้ง (ระบบ getColor พักไว้) → tab เลยออกม่วง. override เป็นทองให้เข้าธีม
   (เฉพาะ .tabAff เท่านั้น ไม่กระทบทั้งเว็บ). */
.tabAff {
  border-bottom: 3px solid #ffbd0c;
}
.tabAff .nav-link {
  color: #f4d488;
  background: rgba(16, 21, 42, 0.35) !important;
}
.tabAff .nav-link.active,
.tabAff .nav-item.show .nav-link {
  color: var(--gold-ink, #fff);
  background: var(--Linear) !important;
}

/* ── §1 reconcile: จุดธีมหลัก → token (ธีมทั้งเว็บสลับตาม data-theme) ── */
/* หัวเว็บ (แถบทอง) */
.header {
  background: var(--Linear) !important;
  border-bottom-color: var(--edge) !important;
}
/* bottom nav — ทั้งแถบใช้ --Linear สีเดียว (แถบนอก .fixedMenu เดิมเป็นทอง → ขอบทองโผล่รอบพื้นเขียว)
   ให้ .fixedMenu เป็น --Linear + .bottomMenu โปร่ง (ไม่ทาซ้อน = ไม่มีขอบชนสี) */
.fixedMenu {
  background: var(--Linear) !important;
}
.fixedMenu .bottomMenu,
.menuListNavBottom {
  background: transparent;
}
/* ระยะเผื่อท้ายหน้าให้พ้นแถบเมนูล่าง (fixed)
   วัดจริงบนมือถือ 390px: กล่อง .fixedMenu สูง 99px + โลโก้ตรงกลางยื่นขึ้นไปอีก 10px (top:-10)
   = สูงจริง 109px → เผื่อ 130px (109 + ที่หายใจ ~20) + safe-area ของ iPhone (home bar)

   ⚠️ ต้องใช้ `padding-bottom` ไม่ใช่ `margin-bottom` — ของต้นแบบตั้ง `.mgMenuBottom{margin-bottom:90px}`
   ซึ่ง **ไม่เคยทำงานเลย** เพราะ margin ท้าย body ถูก collapse ทิ้ง ไม่ขยายพื้นที่ scroll
   (วัดจริง: เลื่อนสุดแล้วเนื้อหาจบที่ขอบล่าง viewport พอดี = ไม่มีระยะเผื่อ) → เกมแถวล่างโดนแถบทับ
   padding ไม่ collapse จึงได้ระยะจริง (วัดหลังแก้: เหลือช่องว่าง +29px) */
body.mgMenuBottom {
  margin-bottom: 0;
  padding-bottom: calc(130px + env(safe-area-inset-bottom, 0px));
}
/* พื้นหลังเว็บ (ไล่เฉดจาก bg1→bg2) — วางใต้ wallpaper */
body {
  background: var(--page-grad) fixed;
}
/* เงาเรืองแสง (glow) ของการ์ด/ปุ่ม */
.promotion img,
.cardNormal,
.btn-main {
  box-shadow: 0 0 14px 0 var(--glow);
}

/* ════════ §4 PWA install banner + layout push (ticket 005) ════════ */
/* §4 banner = บล็อกในเลย์เอาต์ปกติบนสุด (ไม่ fixed → ไม่บัง header · ปิดแล้ว unmount คืนพื้นที่เอง)
   render ก่อน children ใน providers → อยู่เหนือ header เสมอ */
.pwa-install-banner {
  position: relative;
  width: 100%;
  height: 64px;
  display: none;                     /* desktop ซ่อน */
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  background: var(--Linear);
  border-bottom: 1px solid var(--edge);
  box-shadow: 0 2px 12px 0 var(--glow);
}
@media (max-width: 767.98px) { .pwa-install-banner { display: flex; } }

.pwa-install-banner .pwa-x {
  flex: 0 0 auto; cursor: pointer;
  /* พื้นที่กด ≥40px (เดิม glyph เล็ก 13×22 → มือถือจิ้มพลาด) + reset ปุ่ม */
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; margin-left: -6px;
  border: 0; background: transparent; padding: 0;
  font-size: 26px; line-height: 1;
  color: var(--gold-ink); opacity: .85;
  -webkit-tap-highlight-color: transparent;
}
.pwa-install-banner .pwa-x:active { opacity: .5; }
.pwa-install-banner .pwa-appicon {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  border-radius: 9px; object-fit: cover;
  background: #fff2;
}
.pwa-install-banner .pwa-text {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column; line-height: 1.15;
  color: var(--gold-ink);
}
.pwa-install-banner .pwa-title {
  font-weight: 700; font-size: 13px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pwa-install-banner .pwa-sub {
  font-size: 11px; opacity: .85;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pwa-install-banner .pwa-cta {
  flex: 0 0 auto; cursor: pointer; border: 0;
  padding: 7px 16px; border-radius: 20px;
  background: var(--gold-ink); color: var(--gold);
  font-weight: 700; font-size: 13px; white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}

/* ── BankSelect (หน้า register) ────────────────────────────────────────────
 * custom dropdown แทน native <select> เพื่อโชว์โลโก้ธนาคาร (field img จาก /bank/list)
 * trigger ยังใช้ class .form-select → ได้กรอบ/มุมโค้ง/caret + floating label ตรงต้นแบบ
 */
.bankSelect { position: relative; }
.bankSelect__trigger {
  display: flex; align-items: center; gap: 8px;
  width: 100%; text-align: left;
}
/* .form-select ต้นแบบมี padding แนวตั้งของ floating อยู่แล้ว — คงไว้ ให้ชื่อไม่ล้น caret */
.bankSelect__trigger .bankSelect__name {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bankSelect__logo {
  width: 22px; height: 22px; flex: 0 0 auto;
  object-fit: contain; border-radius: 4px; background: #fff;
}
.bankSelect__menu {
  position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; right: 0;
  max-height: 280px; overflow-y: auto; margin: 0; padding: 6px;
  list-style: none;
  /* พื้น "ปกติ" = ทองเข้มโทนการ์ด (mix จาก --gold-lo) ให้ลิสต์เข้าธีมทอง + ขอบทอง
     ตัวอักษรขาวยังอ่านออก · เปลี่ยนพรีเซ็ตธีม → ทองเปลี่ยนตาม token */
  background: color-mix(in srgb, var(--gold-lo) 32%, #000);
  border: 1px solid var(--gold);
  border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
}
.bankSelect__menu li { margin: 0; }
.bankSelect__opt {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 8px 10px; border: 0; border-radius: 8px;
  background: transparent; color: var(--txt);
  text-align: left; cursor: pointer; font-size: 14px;
  transition: background-color .15s;
}
.bankSelect__opt .bankSelect__name {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* hover = ทองสว่างจาง (บนพื้นทองเข้ม) · ตัวที่เลือก = ไล่เฉดสีหลักของธีม (--Linear) อ่านออกชัด */
.bankSelect__opt:hover { background: color-mix(in srgb, var(--gold-hi) 22%, transparent); }
.bankSelect__opt.is-active { background: var(--Linear); color: var(--txt); }