/* =====================================================
   JAICLUB PINK THEME — ANTI-GRAVITY FINAL v3
   Source-verified. All icons preserved. Light pink bg.
   Borders: Pink primary + soft blue accent finish.
   ===================================================== */

 /* ── DESIGN TOKENS ─────────────────────────────────── */
 :root {
   --main-color: #FF2D8D !important;
   --bg_color_L1: #FFF0F7 !important;
   --bg_color_L2: #FFFFFF !important;
   --bg_color_L3: #FFE4F2 !important;
   --text_color_L1: #1A1A1A !important;
   --text_color_L2: #555555 !important;
   --text_color_L3: #999999 !important;
   --text_color_L4: #FFFFFF !important;
   --Dividing-line_color: #F3C6DE !important;
   --borderColor-5: #F3C6DE !important;
   --bgColor-10: #FFE4F2 !important;
   --bgcolor-54: #F3C6DE !important;
   --main_gradient-color: linear-gradient(90deg, #FF2D8D 0%, #FF6FAF 100%) !important;
   --main_gradient-color2: linear-gradient(180deg, #FF2D8D 0%, #E91E74 100%) !important;
   --light-main_gradient-color: linear-gradient(90deg, #FF2D8D 0%, #FF6FAF 100%) !important;
   --norm_red-color: #EF4444 !important;
   --norm_green-color: #22C55E !important;
   --norm_secondary-color: #F59E0B !important;
   --norm_bule-color: #3B82F6 !important;
   --button_dis_color: #E8E8E8 !important;
   --van-primary-color: #FF2D8D !important;
   --van-text-color: #1A1A1A !important;
   --van-border-color: #F3C6DE !important;
   --van-background: #FFF0F7 !important;
   --van-background-2: #FFFFFF !important;
   --van-background-3: #FFFFFF !important;
   --van-cell-background: #FFFFFF !important;
   --van-dialog-background: #FFFFFF !important;
   --van-popup-background: #FFF0F7 !important;
   --van-button-primary-background: #FF2D8D !important;
   --van-button-primary-border-color: #FF2D8D !important;
   --light-bg_white: #FFFFFF !important;
   --darkBg: #FFFFFF !important;

   /* Soft blue accent border for finishing polish */
   --blue-accent-border: #B8D9F8 !important;
 }

 /* ── GLOBAL BODY ─────────────────────────────────────── */
 body {
   background-color: #FFF0F7 !important;
   color: #1A1A1A !important;
 }

 #app {
   background: #FFF0F7 !important;
 }

 /* ── TOP HEADER / HANG BAR ───────────────────────────── */
 .hangBar .hang,
 body .hangBar .hang {
   background: #FFFFFF !important;
   border-bottom: 1px solid #F3C6DE !important;
 }

 /* Main navbar (homepage top bar with gradient) — keep pink */
 .navbar.main .navbar-fixed,
 .navbar.downBar .navbar-fixed {
   background: linear-gradient(90deg, #FF2D8D 0%, #FF6FAF 100%) !important;
   background-image: none !important;
 }

 /* Other page navbars — white with blue-tinted border */
 .navbar-fixed,
 .van-nav-bar {
   background: #FFFFFF !important;
   background-image: none !important;
   border-bottom: 1px solid #D4E9FB !important;
   box-shadow: 0 2px 12px rgba(184, 217, 248, 0.12) !important;
 }

 .van-nav-bar__title,
 .navbar__content-center {
   color: #1A1A1A !important;
   font-weight: 700 !important;
 }

 .van-nav-bar__arrow,
 .navbar__content-left .van-icon {
   color: #1A1A1A !important;
 }

 /* ═══════════════════════════════════════════════════════
   HOME PAGE TOP NAVBAR FIX (.purple-home__nav)
   ═══════════════════════════════════════════════════════ */
 .purple-home__nav {
   background-color: #FFFFFF !important;
   border-bottom: 1px solid #D4E9FB !important;
   box-shadow: 0 2px 12px rgba(184, 217, 248, 0.12) !important;
 }

 /* Hide the legacy purple gradient image in the nav */
 .purple-home__nav-bg {
   display: none !important;
 }

 /* Fix text and icon colors in the nav */
 .purple-home__nav-right .languageName {
   color: #1A1A1A !important;
 }

 .purple-home__nav-chip__amount {
   color: #FF2D8D !important;
 }

 /* Login/Register Buttons in Navbar */
 .purple-home__nav-auth__login {
   background: #FFFFFF !important;
   color: #1A1A1A !important;
   border: 1px solid #D4E9FB !important;
   box-shadow: 0 2px 8px rgba(184, 217, 248, 0.07) !important;
 }

 .purple-home__nav-auth__register {
   background: linear-gradient(90deg, #FF2D8D 0%, #FF6FAF 100%) !important;
   color: #FFFFFF !important;
   border: none !important;
   box-shadow: 0 4px 14px rgba(255, 45, 141, 0.12) !important;
 }

 /* ═══════════════════════════════════════════════════════
   BOTTOM TABBAR — PREMIUM PINK
   ═══════════════════════════════════════════════════════ */

 /* Restore original structure, animation, and apply Pink Hue filter */
 .tabbar {
   filter: hue-rotate(70deg) !important;
   -webkit-filter: hue-rotate(70deg) !important;
 }

 /* ── NOTIFICATION BADGES FIX ───────────────────────── */
 .van-info,
 .van-badge,
 .tabbar__items-tab .van-info,
 .tabbar__items-tab .van-badge,
 .purple-home__nav .van-badge,
 .purple-home__nav .van-info,
 #app .van-badge,
 #app .van-info {
   background-color: #FF2D8D !important;
   color: #FFFFFF !important;
   border: 1px solid #FFFFFF !important;
   box-shadow: 0 2px 4px rgba(255, 45, 141, 0.15) !important;
 }

 /* ═══════════════════════════════════════════════════════
   HOME PAGE — REMOVE ALL DARK PURPLE SECTIONS
   ═══════════════════════════════════════════════════════ */

 .purple-home {
   background: #FFF0F7 !important;
 }

 .purple-home__section-card,
 .recommended-games,
 .game-section,
 .partner-logos,
 .gameTypeHome {
   background: #FFFFFF !important;
   border: 1px solid #D4E9FB !important;
   box-shadow: 0 4px 16px rgba(184, 217, 248, 0.1) !important;
 }

 /* Lottery section header */
 .section-header,
 .game-section .section-header {
   background: linear-gradient(90deg, #FF2D8D 0%, #FF6FAF 100%) !important;
   color: #FFFFFF !important;
 }

 /* GameList container */
 #app .GameList__C {
   background: #FFF0F7 !important;
 }

 .GameList__C-item {
   background: #FFFFFF !important;
   border: 1px solid #D4E9FB !important;
 }

 body .GameList__C-item.active {
   background: linear-gradient(180deg, #FF6FAF 0%, #FF2D8D 100%) !important;
 }

 /* Notice bar */
 .noticeBar__container,
 #app .noticeBar__container {
   background: #FFF0F7 !important;
   background-image: none !important;
   border: 1px solid #F3C6DE !important;
   box-shadow: none !important;
   filter: none !important;
 }

 /* FORCE notification text to be visible! */
 .noticeBar__container,
 .noticeBar__container *,
 .noticeBar__container span,
 .noticeBar__container div {
   color: #FF2D8D !important;
 }

 .noticeBar__container .notice_svg {
   filter: none !important;
 }

 /* Game tab pills */
 .game-tabs__scroll-item {
   background: #FFFFFF !important;
   color: #555555 !important;
   border: 1px solid #D4E9FB !important;
   border-radius: 8px !important;
 }

 .game-tabs__scroll-item span {
   color: #555555 !important;
 }

 .game-tabs__scroll-item.active {
   background: linear-gradient(135deg, #FF2D8D, #FF6FAF) !important;
   border-color: transparent !important;
 }

 .game-tabs__scroll-item.active span {
   color: #FFFFFF !important;
 }

 .game-tabs__scroll--sticky {
   background: rgba(255, 240, 247, 0.95) !important;
   backdrop-filter: blur(15px) !important;
   -webkit-backdrop-filter: blur(15px) !important;
   box-shadow: 0 4px 16px rgba(184, 217, 248, 0.1) !important;
 }

 /* Lottery cards */
 .lottery-info,
 .lottery-container {
   background: #FFF0F7 !important;
 }

 /* ═══════════════════════════════════════════════════════
   VANT COMPONENTS
   ═══════════════════════════════════════════════════════ */

 .van-cell {
   background-color: #FFFFFF !important;
   color: #1A1A1A !important;
 }

 .van-cell::after {
   border-color: #D4E9FB !important;
 }

 .van-cell__title {
   color: #1A1A1A !important;
 }

 .van-cell__value {
   color: #555555 !important;
 }

 .van-cell__label {
   color: #999999 !important;
 }

 .van-tabs__nav {
   background-color: #FFFFFF !important;
 }

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

 .van-tab--active {
   color: #FF2D8D !important;
   font-weight: 700 !important;
 }

 .van-tabs__line {
   background-color: #FF2D8D !important;
 }

 .van-action-sheet {
   background-color: #FFFFFF !important;
   border-radius: 20px 20px 0 0 !important;
 }

 .van-action-sheet__header {
   color: #1A1A1A !important;
   font-weight: 700 !important;
 }

 .van-action-sheet__item {
   color: #1A1A1A !important;
 }

 .van-action-sheet__cancel {
   color: #999999 !important;
   background-color: #FFF0F7 !important;
 }

 .van-popup,
 .van-dialog {
   background-color: #FFFFFF !important;
   border-radius: 20px !important;
   border: 1px solid #D4E9FB !important;
   box-shadow: 0 20px 50px rgba(184, 217, 248, 0.12) !important;
 }

 .van-overlay,
 .popup-overlay {
   background-color: rgba(0, 0, 0, 0.45) !important;
   backdrop-filter: blur(6px) !important;
   -webkit-backdrop-filter: blur(6px) !important;
 }

 .van-dialog__header {
   color: #1A1A1A !important;
   font-weight: 700 !important;
 }

 .van-dialog__confirm,
 body .van-dialog__confirm {
   background: linear-gradient(90deg, #FF2D8D 0%, #FF6FAF 100%) !important;
   color: #FFFFFF !important;
   border: none !important;
 }

 .van-dialog__cancel,
 body .van-dialog__cancel {
   background: #E8E8E8 !important;
   color: #1A1A1A !important;
 }

 .van-notice-bar {
   background-color: #EEF6FF !important;
   color: #4A90D9 !important;
 }

 .van-switch--on {
   background-color: #FF2D8D !important;
 }

 .van-tag--primary {
   background-color: #FF2D8D !important;
 }

 .van-swipe__indicator--active {
   background-color: #FF2D8D !important;
 }

 .van-grid-item__content {
   background-color: #FFFFFF !important;
 }

 .van-skeleton__row,
 .van-skeleton__title {
   background-color: #EEF6FF !important;
 }

 /* ═══════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════ */
 .van-button--primary,
 .btn-primary {
   background: linear-gradient(90deg, #FF2D8D 0%, #FF6FAF 100%) !important;
   border: none !important;
   color: #FFFFFF !important;
   box-shadow: 0 4px 14px rgba(255, 45, 141, 0.15) !important;
   border-radius: 12px !important;
 }

 .van-button--primary:active {
   transform: scale(0.97) !important;
 }

 .van-button--default {
   background-color: #FFFFFF !important;
   border: 1.5px solid #B8D9F8 !important;
   color: #4A90D9 !important;
   border-radius: 12px !important;
 }

 /* ═══════════════════════════════════════════════════════
   WALLET PAGE
   ═══════════════════════════════════════════════════════ */
 #app .Wallet__C:before {
   background: linear-gradient(90deg, #FF2D8D 0%, #FF6FAF 100%) !important;
 }

 #app .Wallet__C-balance {
   background-color: #EEF6FF !important;
   background-image: none !important;
 }

 /* ═══════════════════════════════════════════════════════
   INPUTS
   ═══════════════════════════════════════════════════════ */
 input,
 textarea {
   color: #1A1A1A !important;
   background-color: #FFFFFF !important;
   border: 1px solid #C8DFFA !important;
   border-radius: 8px !important;
 }

 input:focus,
 textarea:focus {
   border-color: #FF2D8D !important;
   box-shadow: 0 0 0 3px rgba(255, 45, 141, 0.07) !important;
   outline: none !important;
 }

 /* ═══════════════════════════════════════════════════════
   CARDS
   ═══════════════════════════════════════════════════════ */
 .card,
 .van-card,
 .list-item,
 .record-panel-item,
 .bonus-item,
 .task-item,
 .activity-item,
 .commission-card,
 .invitation-card,
 .recharge-channel,
 .withdraw-channel,
 .game-card,
 .game-item {
   background-color: #FFFFFF !important;
   border: 1px solid #D4E9FB !important;
   border-radius: 14px !important;
   box-shadow: 0 4px 16px rgba(184, 217, 248, 0.09) !important;
 }

 /* ═══════════════════════════════════════════════════════
   SCROLLBAR
   ═══════════════════════════════════════════════════════ */
 ::-webkit-scrollbar {
   width: 5px;
   height: 5px;
 }

 ::-webkit-scrollbar-track {
   background: #FFF0F7 !important;
 }

 ::-webkit-scrollbar-thumb {
   background: #FF6FAF !important;
   border-radius: 10px !important;
 }

 /* ═══════════════════════════════════════════════════════
   MISC FIXES
   ═══════════════════════════════════════════════════════ */
 svg[style*="position: absolute"] {
   height: 0 !important;
   width: 0 !important;
   overflow: hidden !important;
 }

 .content {
   background: #FFF0F7 !important;
 }

 .start-page {
   background-image: linear-gradient(160deg, #FFF0F7 0%, #E8F4FF 100%) !important;
 }

 .login-card,
 .websit_info {
   background-color: rgba(255, 255, 255, 0.92) !important;
   border: 1px solid #C8DFFA !important;
 }

 /* Fix website info bottom text so it's readable */
 .websit_info,
 .websit_info *,
 .copy-right,
 .copy-right *,
 .GameContainer_games~div,
 .GameContainer_games~div * {
   color: #555555 !important;
 }

 /* ═══════════════════════════════════════════════════════
   TODAY'S EARNINGS CHART & LOTTERY GAMES — PINK THEME
   ═══════════════════════════════════════════════════════ */

 /* Remove any glowing filters and use a clean background override */
 .Winningdata {
   background: transparent !important;
   filter: none !important;
   -webkit-filter: none !important;
 }

 /* Give the inner chart a solid, clean pink backdrop (No Glow) */
 .profitRanking {
   background: #FFF0F7 !important;
   border: 1px solid #F3C6DE !important;
   border-radius: 16px !important;
   box-shadow: 0 4px 15px rgba(255, 45, 141, 0.05) !important;
 }

 /* Ensure the text is dark enough to read on the light pink background */
 .mainContainer_profitContainer_title {
   color: #1A1A1A !important;
 }

 .mainContainer_profitContainer_amount {
   color: #FF2D8D !important;
 }

 .mainContainer_profitContainer_bg svg,
 .mainContainer_profitContainer_bg svg path {
   fill: #FFFFFF !important;
 }

 /* Apply pink hue-rotate ONLY to Lottery Game Cards (Win Go, K3, 5D) */
 .GameContainer_games>div img[src*="WinGo"],
 .GameContainer_games>div img[src*="K3"],
 .GameContainer_games>div img[src*="5D"],
 .GameContainer_games>div img[src*="Trx"],
 .GameContainer_games>div img[src*="Moto"] {
   filter: hue-rotate(120deg) !important;
   -webkit-filter: hue-rotate(120deg) !important;
 }

 /* ═══════════════════════════════════════════════════════
   WINGO / LOTTERY GAME PAGE FIXES
   ═══════════════════════════════════════════════════════ */

 /* 1. Remove legacy background image from TimeLeft section */
 .TimeLeft__C,
 .videowingo .TimeLeft__C,
 .PreSaleRule .head {
   background-image: none !important;
   background-color: #FFFFFF !important;
   border: 1px solid #F3C6DE !important;
   border-radius: 12px !important;
   box-shadow: 0 4px 16px rgba(255, 45, 141, 0.07) !important;
 }

 /* Fix text colors inside the TimeLeft block */
 .TimeLeft__C {
   color: #1A1A1A !important;
 }

 .TimeLeft__C-id,
 .TimeLeft__C-text,
 .TimeLeft__C-time>div {
   color: #1A1A1A !important;
 }

 /* 2. Fix the huge '0 0' white blinding blocks (Betting__C-mark) */
 .Betting__C-mark {
   background: rgba(0, 0, 0, 0.65) !important;
   backdrop-filter: blur(4px) !important;
   -webkit-backdrop-filter: blur(4px) !important;
 }

 .Betting__C-mark>div {
   background-color: #FF2D8D !important;
   color: #FFFFFF !important;
   box-shadow: 0 8px 30px rgba(255, 45, 141, 0.25) !important;
   border: 2px solid #FFFFFF !important;
   text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
 }

 /* 3. Wingo Tab active states */
 .GameList__C-time .item.active {
   background-color: #FF2D8D !important;
   color: #FFFFFF !important;
 }

 .GameList__C-time .item.active::before,
 .GameList__C-time .item.active::after {
   background: radial-gradient(circle at 0 0, rgba(204, 0, 0, 0) 0.4rem, #FF2D8D 0.41333rem) !important;
 }

 /* Ensure background of the whole Wingo game is perfectly clean pink-white */
 .videowingo,
 .lottery-container {
   background-color: #FFF0F7 !important;
 }

 .Betting__C {
   background-color: #FFFFFF !important;
   border: 1px solid #D4E9FB !important;
 }

 /* Profit Ranking Section - Premium Clean Card */
 .profit-rank {
     background: linear-gradient(135deg, #FFE4F2 0%, #FFD1E3 100%) !important;
     border: 2px solid #FFFFFF !important;
     border-radius: 16px !important;
     box-shadow: 0 4px 16px rgba(255, 45, 141, 0.15) !important;
     margin-bottom: 20px !important;
 }

 /* Ranking List - Clean White */
 .profit-rank__list {
     background: #FFFFFF !important;
     border: 1px solid #F3C6DE !important;
     border-radius: 12px !important;
     box-shadow: 0 2px 8px rgba(255, 45, 141, 0.05) !important;
     backdrop-filter: none !important;
     -webkit-backdrop-filter: none !important;
 }

 /* Podium Text Colors (Make them dark so they are readable on white background) */
 .profit-rank__podium-item__name {
     color: #1A1A1A !important;
     font-weight: 500 !important;
 }
 .profit-rank__podium-item__amount {
     background: #FFE4F2 !important;
     color: #FF2D8D !important;
     border: 1px solid #F3C6DE !important;
 }

 /* List Text Colors */
 .profit-rank__list-item__name {
     color: #1A1A1A !important;
 }
 .profit-rank__list-item__amount {
     color: #FF2D8D !important;
     font-weight: 700 !important;
 }
 .profit-rank__list-item__rank i {
     color: #FF2D8D !important;
 }
 .profit-rank__list-item {
     border-bottom: 1px solid #F3C6DE !important;
 }

/* =====================================================
   SAFE PARTNER LOGOS (PINK MIX)
   ===================================================== */
.partner-logos__grid-item {
    border-radius: 12px !important;
    border: 1px solid #FF2D8D !important;
    box-shadow: 0 4px 12px rgba(255, 45, 141, 0.2) !important;
    /* Use a nice pink gradient background */
    background: linear-gradient(135deg, #FFE4F2 0%, #FFB6C1 100%) !important;
    overflow: hidden !important;
}

.partner-logos__grid-item img {
    width: 100% !important;
    display: block !important;
    border-radius: 12px !important;
    /* Screen mode removes the black background of the images and blends the logos with the pink gradient */
    mix-blend-mode: screen !important;
    /* Enhance colors to pop over the pink */
    filter: brightness(1.2) contrast(1.2) saturate(1.5) !important;
}




/* Fix wallet circles area spacing when recycle button is hidden */
.progressBars {
    margin-bottom: 16px !important;
}

/* =====================================================
   LOADING / REFRESH - HIDE SKELETON PLACEHOLDER BOXES
   ===================================================== */

/* Hide any visible loading skeleton boxes that appear on refresh */
.van-skeleton--animate .van-skeleton__row,
.van-skeleton--animate .van-skeleton__title {
    background: linear-gradient(90deg, #FFE4F2 25%, #FFF0F7 37%, #FFE4F2 63%) !important;
    background-size: 400px 100% !important;
    animation: van-skeleton-blink 1.8s ease infinite !important;
}

/* Fix for toast messages appearing as blank white boxes due to van-popup override */
.van-toast {
    background-color: rgba(0, 0, 0, 0.7) !important;
    color: #FFFFFF !important;
    border: none !important;
    box-shadow: none !important;
}
.van-toast__text {
    color: #FFFFFF !important;
}