/*
 * TC — Light Orange Theme Override
 * All theme changes live here. To update the brand theme, edit only this file.
 *
 * Palette:
 *   --brand-primary : #E97024    (brand orange — buttons, accents)
 *   --brand-light   : #FF932F    (hover / lighter orange, gradient start)
 *   --brand-dark    : #E97024    (gradient dark end)
 *   --bg-deepest    : #ffffff    (page background)
 *   --bg-card       : #ffffff    (cards, sheets, cells)
 *   --bg-raised     : #f5f5f5    (elevated cards, inputs)
 *   --text-primary  : #1a1a1a
 *   --text-muted    : #666666
 *   --text-dim      : #9a9a9a
 *   --border-color  : #e5e5e5
 */

/* ─── 1. Root CSS Variable Overrides ─────────────────────────────────────── */
:root {
  /* Brand: orange replaces blue */
  --main-color: #E97024;
  --main_gradient-color: linear-gradient(90deg, #FF932F 0%, #E97024 100%);
  --main_gradient-color2: linear-gradient(180deg, #FF932F 0%, #E97024 100%);
  --light-main_gradient-color: #ffffff;
  --light-main-color: #FF932F;
  --norm_secondary-color: #E97024;

  /* Tabs / nav */
  --tab1: #FF932F;
  --tab2: #E97024;
  --sheet_nva_color: #E97024;
  --icon1: rgba(233, 112, 36, 0.6);
  --icon2: rgba(233, 112, 36, 0.3);

  /* Backgrounds — light */
  --bg_color_L1: #ffffff;
  --bg_color_L2: #ffffff;
  --bg_color_L3: #ffffff;
  --sheet_detail_bg_color: #f5f5f5;

  /* Text — dark on light */
  --text_color_L1: #1a1a1a;
  --text_color_L2: #666666;
  --text_color_L3: #9a9a9a;
  --text_color_L4: #ffffff;
  --text_white: #ffffff;
  --light-bg_white: #ffffff;

  /* Dividers */
  --Dividing-line_color: #e5e5e5;

  /* Swiper accent */
  --swiper-theme-color: #E97024;

  /* ── Vant UI component overrides (all reference the vars above) ── */
  --van-background: #ffffff;
  --van-background-2: #ffffff;
  --van-background-3: #f5f5f5;

  --van-text-color: #1a1a1a;
  --van-text-color-2: #666666;
  --van-text-color-3: #9a9a9a;

  --van-border-color: #e5e5e5;
  --van-active-color: #e5e5e5;
  --van-primary-color: #E97024;

  --van-button-primary-background: linear-gradient(90deg, #FF932F 0%, #E97024 100%);
  --van-button-primary-border-color: #E97024;
  --van-button-primary-color: #fff;

  --van-cell-background: #ffffff;
  --van-cell-border-color: #e5e5e5;
  --van-cell-text-color: #1a1a1a;
  --van-cell-value-color: #666666;
  --van-cell-label-color: #666666;
  --van-cell-right-icon-color: #666666;

  --van-field-input-text-color: #1a1a1a;
  --van-field-placeholder-text-color: #9a9a9a;

  --van-dialog-background: #ffffff;
  --van-dialog-has-title-message-text-color: #666666;

  --van-picker-background: #ffffff;
  --van-picker-option-text-color: #666666;
  --van-picker-confirm-action-color: #E97024;
  --van-picker-mask-color:
    linear-gradient(180deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .4)),
    linear-gradient(0deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .4));

  --van-popup-background: #ffffff;
  --van-popover-light-background: #ffffff;

  --van-checkbox-checked-icon-color: #E97024;
  --van-checkbox-label-color: #666666;
  --van-radio-checked-icon-color: #E97024;
  --van-radio-label-color: #666666;

  --van-circle-color: #E97024;
  --van-circle-layer-color: #f5f5f5;

  --van-slider-active-background: #E97024;
  --van-slider-inactive-background: #f5f5f5;

  --van-grid-item-content-background: #f5f5f5;

  --van-calendar-background: #ffffff;
  --van-calendar-range-edge-background: #E97024;
  --van-calendar-selected-day-background: #ffffff;
  --van-calendar-selected-day-color: #E97024;

  --van-collapse-item-content-background: #ffffff;
  --van-action-sheet-item-background: #ffffff;
  --van-action-sheet-item-text-color: #1a1a1a;

  --van-sidebar-text-color: #E97024;

  --van-nav-bar-background: #ffffff;
}

/* ─── 2. App Loader ──────────────────────────────────────────────────────── */
#app-loader {
  position: fixed;
  inset: 0;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999999;
  transition: opacity 0.45s ease;
}

#app-loader.app-loader--hidden {
  opacity: 0;
  pointer-events: none;
}

.app-loader__wrap {
  position: relative;
  width: 220px;
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.app-loader__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
      transparent 0deg,
      rgba(233, 112, 36, 0.03) 8deg,
      rgba(233, 112, 36, 0.12) 90deg,
      rgba(233, 112, 36, 0.35) 180deg,
      rgba(233, 112, 36, 0.65) 270deg,
      #E97024 330deg,
      #FF932F 355deg,
      transparent 360deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), black calc(100% - 3px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), black calc(100% - 3px));
  animation: appLoaderSpin 1.6s linear infinite;
}

.app-loader__dot {
  position: absolute;
  top: -7px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #FF932F;
  box-shadow: 0 0 8px 2px rgba(255, 147, 47, 0.55);
}

.app-loader__logo {
  width: 130px;
  height: auto;
  position: relative;
  z-index: 1;
}

@keyframes appLoaderSpin {
  to {
    transform: rotate(360deg);
  }
}

/* ─── 3. Old app loader (.ar-loading-view) — override to match new design ── */
/* NOTE: NO display override here — Vue v-show sets style="display:none" as
   inline style. A stylesheet !important beats inline style, which would
   permanently block Vue from ever hiding this element. */
.ar-loading-view {
  background-color: #ffffff !important;
  top: 0 !important;
}

/* Wrapper fills the full overlay and flex-centers the logo */
.ar-loading-view .loading-wrapper {
  position: absolute !important;
  width: 100% !important;
  height: 100% !important;
  left: 0 !important;
  top: 0 !important;
  transform: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Ring — absolutely centered in the wrapper via top/left + negative margin */
.ar-loading-view .loading-wrapper::before {
  content: '';
  position: absolute;
  width: 220px;
  height: 220px;
  top: 50%;
  left: 50%;
  margin-top: -110px;
  margin-left: -110px;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
      transparent 0deg,
      rgba(233, 112, 36, 0.03) 8deg,
      rgba(233, 112, 36, 0.12) 90deg,
      rgba(233, 112, 36, 0.35) 180deg,
      rgba(233, 112, 36, 0.65) 270deg,
      #E97024 330deg,
      #FF932F 355deg,
      transparent 360deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), black calc(100% - 3px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), black calc(100% - 3px));
  animation: appLoaderSpin 1.6s linear infinite;
}

/* Dot — orbits the ring center */
.ar-loading-view .loading-wrapper::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #FF932F;
  box-shadow: 0 0 8px 2px rgba(255, 147, 47, 0.55);
  top: calc(50% - 117px);
  left: calc(50% - 7px);
  transform-origin: 7px 117px;
  animation: appLoaderSpin 1.6s linear infinite;
}

/* Hide old spinner elements */
.ar-loading-view .loading-animat,
.ar-loading-view .van-loading,
.ar-loading-view .skeleton-wrapper {
  display: none !important;
}

/* Logo */
.ar-loading-view .loading-wrapper img {
  content: url('/assets/new/bdg-win.png') !important;
  width: 130px !important;
  height: auto !important;
  position: relative !important;
  z-index: 1 !important;
  display: block !important;
}

/* ─── 4. Page & App Base ─────────────────────────────────────────────────── */
/* body stays neutral gray (desktop frame around the centered app) */
body {
  background-color: #9195a2 !important;
}

/* only the app container gets the dark BDG background */
body #app {
  background-color: #ffffff !important;
  color: #1a1a1a;
  /* Prevent horizontal scrollbar during periodic game-list reloads */
  overflow-x: hidden !important;
}

/* Prevent layout collapse + horizontal scroll during periodic game-list refresh.
   The lottery draw cron fires every 30s; Vue clears the list while fetching,
   collapsing the container and reflowing the page. min-height keeps the space
   reserved so the Lottery heading doesn't jump up. */
body #app .p3home {
  overflow-x: hidden !important;
}

body #app .gamelist .con {
  min-height: 8rem !important;
}

body #app .gamelist .con .items {
  min-height: 6rem !important;
}

/* ─── 3. Game type cards (Lottery, Original, Slots, etc.) ───────────────── */
/* Source: page-home-79b3714c.css sets these with !important + data-v scoped specificity.
   Override with body #app (ID) to win the specificity battle. */
body #app .gameTypeHome .van-tabs__wrap .van-tabs__nav .van-tab {
  background: linear-gradient(180deg, #FF932F 0%, #E97024 100%) !important;
  color: #ffffff !important;
}

/* ─── 4. Lottery time-counter ticket card ───────────────────────────────── */
/* Blue PNG ticket → golden PNG ticket */
body #app .TimeLeft__C {
  background-image: url('/assets/png/wingoissue-golden.png') !important;
}

/* ─── 5. Deposit page — balance card ────────────────────────────────────── */
body #app .balanceAssets {
  background-image: url('/assets/png/TotalAssetsBg-golden.png') !important;
}

/* ─── 6. Floating action buttons — changlong & customer service ─────────── */
/* Blue SVG icon → golden SVG */
body #app .changlongEnter {
  background-image: url('/assets/svg/changlong-golden.svg') !important;
  box-shadow: 0 0.02667rem 0.48rem rgba(233, 112, 36, 0.56) !important;
}

/* Blue customer service icon → golden PNG */
body #app .customer img,
#customerId img {
  content: url('/assets/png/icon_sevice-golden.png');
}

/* ─── 6. Input / Field Backgrounds ──────────────────────────────────────── */
.van-field__control,
.van-cell,
.van-field {
  background-color: #f5f5f5;
  color: #1a1a1a;
}

.van-field__control::placeholder,
input::placeholder {
  color: #9a9a9a !important;
}

/* ─── 5. Tab bars — active underline / selected state ───────────────────── */
.van-tabs__line {
  background: linear-gradient(90deg, #E97024 0%, #FF932F 100%) !important;
}

.van-tab--active {
  color: #E97024 !important;
}

.van-tabs__nav--card .van-tab--card.van-tab--active {
  background-color: #E97024 !important;
  color: #fff !important;
}

.van-tabs__nav--card {
  border-color: #E97024 !important;
}

.van-tabs__nav--card .van-tab--card {
  border-color: #E97024 !important;
  color: #E97024;
}

/* ─── 6. Bottom tabbar ───────────────────────────────────────────────────── */
body #app .tabbar__container {
  background-color: #ffffff !important;
  border-top: 1px solid #e5e5e5;
  overflow: visible !important;
}

/* ─── Middle tab — wheel button ──────────────────────────────────────────── */
body #app .tabbar__container-item:nth-of-type(3) {
  position: relative !important;
  overflow: visible !important;
}

/* Hide the gold pill background and its SVG icon */
body #app .tabbar__container-item:nth-of-type(3) .promotionBg {
  background: transparent !important;
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
  overflow: visible !important;
  position: relative !important;
}

body #app .tabbar__container-item:nth-of-type(3) .promotionBg svg,
body #app .tabbar__container-item:nth-of-type(3) .promotionBg .svg-icon {
  display: none !important;
}

/* Hide Vue's existing label so we can add our own via ::after */
body #app .tabbar__container-item:nth-of-type(3)>span,
body #app .tabbar__container-item:nth-of-type(3)>p {
  display: none !important;
}

/* "Get ₹500" label */
/* body #app .tabbar__container-item:nth-of-type(3)::after {
  content: 'Get ₹500';
  font-size: 0.29333rem;
  color: #E97024;
  font-weight: 900;
  white-space: nowrap;
  display: block;
  text-align: center;
  line-height: 1;
  margin-top: 0.3rem;
} */

/* Wheel image — rises above the tabbar */
body #app .tabbar__container-item:nth-of-type(3) .promotionBg::before {
  content: '';
  display: block;
  width: 2rem;
  height: 2rem;
  background: url('/assets/tc/diamond.png') no-repeat center / contain;
  position: absolute;
  bottom: -0.38rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  filter: drop-shadow(0 -3px 10px rgba(233, 112, 36, 0.35));
}

/* ─── 7. Navbar / top header ─────────────────────────────────────────────── */
.van-nav-bar {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border-bottom: 1px solid #e5e5e5;
}

/* Login page nav bar — compiled rule uses [data-v-*] scoped attr, need higher specificity */
body #app .login__container .van-nav-bar,
body #app .van-nav-bar {
  background: #ffffff !important;
  background-color: #ffffff !important;
}

/* Login page heading — compiled CSS uses --light-main_gradient-color which makes it golden */
.login__container-heading {
  background: #f5f5f5 !important;
}

.van-nav-bar__title {
  color: #1a1a1a !important;
}

.van-nav-bar .van-icon,
.van-nav-bar__arrow {
  color: #1a1a1a !important;
}

/* ─── 8. Popups / action sheets ──────────────────────────────────────────── */
.van-popup,
.van-action-sheet,
.van-dialog {
  background-color: #ffffff !important;
  color: #1a1a1a;
}

.van-overlay {
  background-color: rgba(0, 0, 0, 0.75) !important;
}

/* ─── 9. Progress bar ────────────────────────────────────────────────────── */
body #app .progress {
  background: #f5f5f5 !important;
}

/* ─── 10. Primary/CTA buttons ────────────────────────────────────────────── */
.van-button--primary {
  background: linear-gradient(90deg, #E97024 0%, #FF932F 100%) !important;
  border-color: #E97024 !important;
  color: #fff !important;
}

/* ─── 11. Notice bar ─────────────────────────────────────────────────────── */
.van-notice-bar {
  background-color: #f5f5f5 !important;
  color: #1a1a1a;
}

/* ─── 12. Wallet / balance header gradient ───────────────────────────────── */
body #app .Wallet__C:before {
  background: linear-gradient(180deg, #E97024 0%, #ffffff 100%) !important;
}

body #app .Wallet__C-balance {
  background-color: #ffffff !important;
}

/* ─── 13. BettingRecord head / notification navbar ───────────────────────── */
body #app .BettingRecordWin__C-head,
body #app .notification-container .navbar-fixed {
  background: linear-gradient(90deg, #E97024 0%, #FF932F 100%) !important;
  color: #fff;
}

body #app .notification-container .navbar-fixed .van-icon,
body #app .notification-container .navbar-fixed .navbar__content {
  color: #fff !important;
}

/* ─── 14. Championship / team report headers ─────────────────────────────── */
body #app .championship .tabs,
body #app .TeamReport__C-body .header-container {
  background: linear-gradient(90deg, #E97024 0%, #FF932F 100%) !important;
}

body #app .championship .tabs>div,
body #app .TeamReport__C-body .header-container>div,
body #app .TeamReport__C-body .header-container>div>div:last-of-type {
  color: #fff !important;
}

body #app .championship .tabs>div.active:after {
  border-bottom-color: #fff !important;
}

/* ─── 15. Rule/promotion SVG accent ──────────────────────────────────────── */
body #app .ruleHead svg {
  color: #E97024 !important;
}

/* ─── 16. Confirm dialog button ──────────────────────────────────────────── */
body #app .van-dialog__confirm {
  background: linear-gradient(90deg, #E97024 0%, #FF932F 100%) !important;
  color: #fff !important;
}

/* ─── 17. GameList background ────────────────────────────────────────────── */
body #app .GameList__C {
  background-color: #ffffff !important;
}

/* ─── 18. Site popup (Login Welcome / top-up notice) ────────────────────── */
/* Title bar */
.van-popup .dialog-title,
.van-dialog__header {
  color: #1a1a1a !important;
  background: transparent !important;
}

/* Scrollable rich-HTML content area inside the popup */
.van-popup p,
.van-popup span,
.van-popup a,
.van-popup strong {
  color: #1a1a1a !important;
  background-color: transparent !important;
  font-family: inherit !important;
}

.van-popup a {
  color: #FF932F !important;
  text-decoration: underline;
}

/* Images inside popup content stretch to container width */
.van-popup img {
  max-width: 100% !important;
  height: auto !important;
  border-radius: 8px;
}

/* ─── Hide built-in blue StartPage splash (we use #app-loader instead) ─ */
.start-page {
  display: none !important;
}

/* ─── 19. User info header card (Settings / Profile) ───────────────────── */
/* Top card → orange brand gradient (was white, making white text invisible) */
body #app .userInfo__container {
  background: linear-gradient(90deg, #FF932F 0%, #E97024 100%) !important;
}

/* UID pill → white background with black text (was orange, blending into card) */
body #app .userInfo__container-content-uid {
  background-color: #ffffff !important;
  color: #1a1a1a !important;
}

body #app .userInfo__container-content-uid span,
body #app .userInfo__container-content-uid svg {
  color: #1a1a1a !important;
}

/* ─── 20. Wallet header card ────────────────────────────────────────────── */
/* Top card → orange brand gradient (was white, making white balance text invisible) */
body #app .wallet-container-header {
  background: linear-gradient(90deg, #FF932F 0%, #E97024 100%) !important;
}

/* Inner navbar has its own white bg (--bg_color_L2) — make it transparent so the
   parent orange shows across the full card including the "Wallet" title row */
body #app .wallet-container-header .navbar-fixed {
  background: transparent !important;
}

body #app .wallet-container-header .navbar-fixed .van-icon,
body #app .wallet-container-header .navbar__content-title {
  color: #ffffff !important;
}

/* ─── 21. Main navbar — orange across all pages ─────────────────────────── */
/* Every "navbar main" (home, wallet sub-pages, settings, game pages, etc.)
   gets the brand orange gradient. Vertical (180deg) so the bottom edge has a
   uniform E97024 — this lets it merge seamlessly with .Wallet__C:before below. */
body #app .navbar.main .navbar-fixed {
  background: linear-gradient(180deg, #FF932F 0%, #E97024 100%) !important;
}

body #app .navbar.main .navbar-fixed .van-icon,
body #app .navbar.main .navbar-fixed .navbar__content-title {
  color: #ffffff !important;
}

/* Wallet page wraps the navbar in its own orange card — let that bleed through.
   More specific than the broader rule above so this override wins. */
body #app .wallet-container-header .navbar.main .navbar-fixed {
  background: transparent !important;
}

/* Swap the inline bdg-win.png background for the TC name logo and widen the
   slot to match its 3.48:1 aspect ratio (vs the original 2.67:1). */
body #app .headLogo {
  background-image: url('/assets/tc/tc-name.png') !important;
  width: 2.9rem !important;
}

/* ─── 22. Activity page banner ──────────────────────────────────────────── */
/* Top banner → orange brand gradient (was white, making white text invisible) */
body #app .activity-banner {
  background: linear-gradient(90deg, #FF932F 0%, #E97024 100%) !important;
}

/* ─── 22b. Home page cleanup ────────────────────────────────────────────── */
/* The home renders dynamic category sub-components inside .game-content
   (each child gets id={categoryCode}: lottery / original / slot / sport /
   casino / pvc / fishing). Keep only the lottery sub-component visible — it
   already renders the 4 cards (Win Go, Trx Hash Win Go, 5D Lotre, K3 Lotre)
   with the lottery-ball logos on the right, matching the reference design.
   Also hide the tab header, the Recommended/Top games block, and the
   partner-brands strip (.p3-terms) below Basic Tools.
   Keeps: top navbar, banner carousel, notice bar, the 4 lottery cards,
   Winning Information, and Basic Tools. */
body #app .gameTypeHome,
body #app .game-content,
body #app .gameRec,
body #app .hot_container,
body #app .hotGames,
body #app .p3-terms {
  display: none !important;
}

/* ─── 22c. TC custom lottery cards (injected by index.html) ──────────────── */
/* 4 stacked wide cards (Win Go / Trx Hash Win Go / 5D Lotre / K3 Lotre)
   sitting just above the Winning Information section on the home route. */
body #app .tc-lottery-cards {
  display: flex;
  flex-direction: column;
  gap: 0.32rem;
  padding: 0 0.32rem;
  margin: 0.32rem 0 0.4rem;
}

body #app .tc-lcard {
  position: relative;
  display: block;
  border-radius: 0.4rem;
  padding: 0.48rem 0.53333rem;
  color: #ffffff;
  text-decoration: none;
  box-shadow: 0 0.13333rem 0.32rem rgba(0, 0, 0, 0.10);
  overflow: hidden;
  min-height: 2.66667rem;
  display: flex;
  align-items: center;
}

body #app .tc-lcard--blue   { background: linear-gradient(135deg, #6dabff 0%, #4a7bd9 100%); }
body #app .tc-lcard--purple { background: linear-gradient(135deg, #9a78db 0%, #6f4dc0 100%); }
body #app .tc-lcard--violet { background: linear-gradient(135deg, #b18cf0 0%, #7a55d6 100%); }
body #app .tc-lcard--teal   { background: linear-gradient(135deg, #59c5d9 0%, #3699b5 100%); }

body #app .tc-lcard-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.32rem;
  position: relative;
  z-index: 1;
  width: 100%;
}

body #app .tc-lcard-text {
  flex: 1;
  min-width: 0;
}

body #app .tc-lcard-text h3 {
  margin: 0 0 0.18667rem;
  font-size: 0.56rem;
  font-weight: 800;
  line-height: 1.1;
  color: #ffffff;
  letter-spacing: 0.01em;
}

body #app .tc-lcard-text p {
  margin: 0;
  font-size: 0.32rem;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.85);
}

body #app .tc-lcard-logo {
  width: 1.86667rem;
  height: 1.86667rem;
  object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(0 0.05333rem 0.16rem rgba(0, 0, 0, 0.18));
}

/* ─── 23. Wallet page cleanup ───────────────────────────────────────────── */
/* Hide 3rd-party wallet circle, transfer button, and game-list cards.
   Keeps: main-wallet circle + Deposit/Withdraw/Deposit-history/Withdrawal-history row. */

/* 3rd party wallet circle (second child of the .progressBars row) */
body #app .wallet-container-content .progressBars > div:nth-child(2) {
  display: none !important;
}

/* Center the remaining main-wallet circle now that it's alone */
body #app .wallet-container-content .progressBars {
  justify-content: center !important;
}

/* "Main wallet transfer" button */
body #app .wallet-container-content .recycleBtnD {
  display: none !important;
}

/* Lottery / TB_Chess / Wickets9 / CQ9 / MG / JDB / DG / CMD / SaBa game cards */
body #app .wallet-container-content .gameList {
  display: none !important;
}

/* ─── 24. About / content pages (keep readable on dark background) ── */
.about-container-content,
.about-container-content .content {
  background: #ffffff !important;
}

.about-container-content,
.about-container-content .content,
.about-container-content font,
.about-container-content font[color],
.about-container-content font[color="#ffffff"],
.about-container-content p,
.about-container-content h1,
.about-container-content h2,
.about-container-content h3,
.about-container-content li,
.about-container-content span,
.about-container-content strong,
.about-container-content a {
  color: #1a1a1a !important;
}