/* ═══════════════════════════════════════════════════════════
   RAJ365 — Player App Premium Override (Black & Gold Luxury)
   ═══════════════════════════════════════════════════════════
   কোনো compiled JS/CSS ফাইল বদলানো হয়নি। এই ফাইলটা শুধু
   app-এর নিজস্ব design-token variable-গুলো (index-bc4da944.css
   এ পাওয়া) override করে, যেগুলো পুরো app জুড়ে (Vant component
   সহ) ইতিমধ্যেই ব্যবহৃত হচ্ছে। তাই এই override স্বাভাবিক,
   নিরাপদ ভাবে সব জায়গায় ছড়িয়ে পড়বে — কোনো guess করা selector
   ছাড়াই।
   ═══════════════════════════════════════════════════════════ */

:root {
  /* ── ব্র্যান্ড রং — আগে থেকেই gold ছিল, luxury shade-এ refine করা ── */
  --main-color: #D4AF37;
  --main_gradient-color: linear-gradient(90deg, #D4AF37 0%, #B8942C 100%);
  --main_gradient-color2: linear-gradient(180deg, #E8C558 0%, #B8942C 100%);
  --light-main_gradient-color: var(--main_gradient-color);
  --light-main-color: var(--main-color);

  /* ── Text hierarchy — dark background-এর জন্য উল্টে দেওয়া ── */
  --text_white: #fff;
  --text_color_L1: #F5EFDC;   /* আগে গাঢ় নেভি ছিল — এখন হালকা gold-white */
  --text_color_L2: #C9BFA0;   /* আগে ধূসর — এখন উষ্ণ ধূসর-gold */
  --text_color_L3: #8A8270;   /* আরও হালকা/dim text */
  --text_color_L4: #1A1400;   /* Gold background-এর উপর বসা text-এর জন্য গাঢ় */

  /* ── Background hierarchy — light থেকে black luxury-তে ── */
  --bg_color_L1: #0A0A0A;
  --bg_color_L2: #17140C;
  --bg_color_L3: #1F1B10;
  --light-bg_white: #17140C;
  --sheet_detail_bg_color: #17140C;
  --Dividing-line_color: #3A3226;

  /* ── Popup/sheet gradient — gold রেখেই luxury আরও গাঢ় করা ── */
  --pop_bg-color: linear-gradient(180deg, #E8C558 0%, #B8942C 68.59%);
  --sheet_nva_color: var(--main-color);

  /* ── Semantic রং (success/error ইত্যাদি) — অর্থ বজায় রেখে সামান্য গরম টোন ── */
  --norm_red-color: #E8544A;
  --norm_green-color: #1FB979;
  --norm_secondary-color: #F0C419;
  --Secondary_red_color: #E8544A;
  --Secondary_green_color: #1FB979;

  /* ── অতিরিক্ত, custom design token (নিজস্ব, future-proof) ── */
  --rg-radius: 14px;
  --rg-radius-lg: 20px;
  --rg-shadow: 0 4px 18px rgba(0,0,0,.5);
  --rg-glow: 0 0 16px rgba(212,175,55,.4);
}

/* ═══════════════════════════════════════════════════════════
   Typography
   ═══════════════════════════════════════════════════════════ */
body, .van-nav-bar, .van-tabbar, .van-button, .van-cell, .fun-tabs {
  font-family: 'Inter', -apple-system, "Segoe UI", Roboto, sans-serif !important;
}

/* ═══════════════════════════════════════════════════════════
   Banner (my-swipe carousel)
   ═══════════════════════════════════════════════════════════ */
.my-swipe {
  border-radius: var(--rg-radius-lg) !important;
  overflow: hidden !important;
  box-shadow: var(--rg-shadow) !important;
  margin: 8px !important;
}
.van-swipe-item {
  border-radius: var(--rg-radius-lg) !important;
}
.van-swipe__indicator {
  background: rgba(255,255,255,.4) !important;
}
.van-swipe__indicator--active {
  background: var(--main-color) !important;
  box-shadow: 0 0 6px rgba(212,175,55,.7);
}

/* ═══════════════════════════════════════════════════════════
   Category Tabs (fun-tabs / All, Slots, Lottery, Sports...)
   ═══════════════════════════════════════════════════════════ */
.fun-tabs {
  background: var(--bg_color_L2) !important;
  border-radius: var(--rg-radius) !important;
  margin: 8px !important;
  box-shadow: var(--rg-shadow) !important;
}
.tab_active {
  background: var(--main_gradient-color) !important;
  color: #1A1400 !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  box-shadow: var(--rg-glow) !important;
}
.fun-tab-item {
  color: var(--text_color_L2) !important;
  transition: transform .15s ease;
}

/* ═══════════════════════════════════════════════════════════
   Game Cards
   ═══════════════════════════════════════════════════════════ */
.gameItem1, .gameImte2, .game51, .aloneGame, .all_item, .all_slot, .three_item, .three_item22, .three_item3 {
  border-radius: var(--rg-radius) !important;
  overflow: hidden !important;
  box-shadow: var(--rg-shadow) !important;
  transition: transform .15s ease, box-shadow .2s ease !important;
}
.gameItem1:active, .aloneGame:active, .all_item:active {
  transform: scale(.96);
  box-shadow: var(--rg-glow) !important;
}

/* ═══════════════════════════════════════════════════════════
   Win List (profit__list)
   ═══════════════════════════════════════════════════════════ */
.win_item {
  border-radius: var(--rg-radius) !important;
  box-shadow: var(--rg-shadow) !important;
}
.profit__list-item {
  border-radius: 10px !important;
}
.profit__list-item__info {
  color: var(--text_color_L1) !important;
}

/* ═══════════════════════════════════════════════════════════
   Nav bar / Header
   ═══════════════════════════════════════════════════════════ */
.van-nav-bar {
  background: var(--bg_color_L2) !important;
  border-bottom: 1px solid var(--Dividing-line_color) !important;
}
.van-nav-bar__title {
  color: var(--main-color) !important;
  font-weight: 700 !important;
  letter-spacing: .3px;
}

/* ═══════════════════════════════════════════════════════════
   Bottom Navigation (Home / Promotion / Register / Deposit / Members)
   ═══════════════════════════════════════════════════════════ */
.van-tabbar {
  background: var(--bg_color_L2) !important;
  border-top: 1px solid var(--Dividing-line_color) !important;
  box-shadow: 0 -4px 18px rgba(0,0,0,.4) !important;
}
.van-tabbar-item {
  color: var(--text_color_L3) !important;
}
.van-tabbar-item--active {
  color: var(--main-color) !important;
}

/* ═══════════════════════════════════════════════════════════
   Buttons
   ═══════════════════════════════════════════════════════════ */
.van-button--primary {
  border: none !important;
  border-radius: var(--rg-radius) !important;
  font-weight: 700 !important;
  box-shadow: var(--rg-glow) !important;
  transition: transform .12s ease !important;
}
.van-button--primary:active {
  transform: scale(.97);
}
.van-button--default {
  border-radius: var(--rg-radius) !important;
  background: var(--bg_color_L2) !important;
  border-color: var(--Dividing-line_color) !important;
}

/* ═══════════════════════════════════════════════════════════
   Search Box
   ═══════════════════════════════════════════════════════════ */
.van-search__content {
  background: var(--bg_color_L2) !important;
  border: 1px solid var(--Dividing-line_color) !important;
  border-radius: 999px !important;
}

/* ═══════════════════════════════════════════════════════════
   Cards / Cells / Popups (general)
   ═══════════════════════════════════════════════════════════ */
.van-cell-group, .van-card {
  background: var(--bg_color_L2) !important;
  border-radius: var(--rg-radius) !important;
}
.van-popup, .van-dialog {
  background: var(--bg_color_L2) !important;
  border-radius: 18px !important;
  border: 1px solid var(--Dividing-line_color) !important;
}

/* ═══════════════════════════════════════════════════════════
   Scrollbar polish
   ═══════════════════════════════════════════════════════════ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg_color_L1); }
::-webkit-scrollbar-thumb { background: var(--Dividing-line_color); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--main-color); }

/* ═══════════════════════════════════════════════════════════
   Ripple keyframe (custom.js এটা ব্যবহার করবে)
   ═══════════════════════════════════════════════════════════ */
@keyframes rg-ripple {
  to { transform: scale(3); opacity: 0; }
}
.rg-ripple-span {
  position: absolute;
  border-radius: 50%;
  background: rgba(212,175,55,.55);
  transform: scale(0);
  animation: rg-ripple .5s ease-out;
  pointer-events: none;
}

@keyframes rg-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.rg-fade-in {
  animation: rg-fade-in .4s ease both;
}
