/* ===================================================
   Club91 Premium Dark Emerald Theme Override v2.0
   Deep Black + Vibrant Green Accent + Gold Highlights
   =================================================== */

/* ========== 1. ROOT CSS VARIABLE OVERRIDE ========== */
:root {
    --main-color: #22c55e !important;
    --main_gradient-color: linear-gradient(135deg, #16a34a 0%, #22c55e 100%) !important;
    --main_gradient-color2: linear-gradient(180deg, #16a34a 0%, #22c55e 100%) !important;
    --light-main_gradient-color: linear-gradient(135deg, #16a34a 0%, #22c55e 100%) !important;
    --norm_red-color: #ef4444 !important;
    --norm_green-color: #22c55e !important;
    --norm_secondary-color: #f59e0b !important;
    --norm_Purple-color: #a855f7 !important;
    --norm_bule-color: #22c55e !important;
    --button_dis_color: #1a2718 !important;
    --text_color_L1: #e2e8f0 !important;
    --text_color_L2: #94a3b8 !important;
    --text_color_L3: #475569 !important;
    --text_color_L4: #ffffff !important;
    --bg_color_L1: #050a05 !important;
    --bg_color_L2: #0a1a0e !important;
    --bg_color_L3: #0f2416 !important;
    --Dividing-line_color: #1a3a22 !important;
    --sheet_nva_color: #0f2416 !important;
    --sheet_detail_bg_color: #0f2416 !important;
    --icon1: rgba(34, 197, 94, 0.6) !important;
    --icon2: rgba(34, 197, 94, 0.3) !important;
    --van-popup-background: #0a1a0e !important;
    --van-dialog-background: #0a1a0e !important;
    --van-picker-background: #0a1a0e !important;
    --van-cell-background: #0a1a0e !important;
    --van-grid-item-content-background: #050a05 !important;
    --van-calendar-background: #050a05 !important;
    --van-action-sheet-item-background: #0a1a0e !important;
    --van-collapse-item-content-background: #050a05 !important;
    --van-popover-light-background: #0a1a0e !important;
    --van-picker-mask-color: linear-gradient(180deg, rgba(5, 10, 5, 0.9), rgba(5, 10, 5, 0.4)), linear-gradient(0deg, rgba(5, 10, 5, 0.9), rgba(5, 10, 5, 0.4)) !important;
    --GradiantBlue: linear-gradient(135deg, #16a34a 0%, #22c55e 100%) !important;
}

/* ========== 2. GLOBAL BACKGROUND ========== */
html, body {
    background-color: #020502 !important;
}

#app {
    background: #050a05 !important;
}

.content {
    background: #050a05 !important;
}

/* ========== 2.1 BANNER & SWIPER ENHANCEMENTS ========== */
.my-swipe, .swiper, .van-swipe, [data-v-a1417a9f].my-swipe {
    width: 100% !important;
    min-height: 140px !important;
    height: auto !important;
    aspect-ratio: 16 / 7.2 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    display: block !important;
    position: relative !important;
    background: #0d1a10 !important;
    margin: 8px 0 14px 0 !important;
}

.my-swipe .swiper-wrapper, .swiper-wrapper {
    display: flex !important;
    width: 100% !important;
    height: 100% !important;
}

.my-swipe .swiper-slide, .swiper-slide {
    width: 100% !important;
    height: 100% !important;
    flex-shrink: 0 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
}

.my-swipe img, .swiper-slide img, .van-swipe-item img, [data-v-a1417a9f].my-swipe img {
    width: 100% !important;
    height: 100% !important;
    min-height: 140px !important;
    object-fit: cover !important;
    border-radius: 12px !important;
    display: block !important;
}

/* ========== 2.2 BRAND LOGO & HOTGAMES ICONS ========== */
.headLogo, .navbar__content-center .headLogo, [data-v-12a80a3e].headLogo {
    background-image: url("/assets/png/head-e5e097e3.png") !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    background-position: center !important;
    width: 3.2rem !important;
    height: 1.15rem !important;
    display: inline-block !important;
}

.hotGames_icon img, .titleActivity .icon img, [data-v-c3914f91] .icon img, .icon img[src*="Fire"], .icon img[src*="HotGames"], .OriginalContainer .insideOriginal .icon img {
    width: 20px !important;
    height: 20px !important;
    max-width: 20px !important;
    max-height: 20px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    object-fit: contain !important;
    display: inline-block !important;
    vertical-align: middle !important;
}

/* ========== 3. BOTTOM TAB BAR ========== */
body #app .tabbar__container {
    background: #0a120c !important;
    border-top: 1px solid rgba(34, 197, 94, 0.15) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.6), 0 -1px 0 rgba(34, 197, 94, 0.1) !important;
    background-image: none !important;
    height: 1.5rem !important;
    padding-block: 0.08rem 0.1rem !important;
}

body #app .tabbar__container-item {
    color: #64748b !important;
    transition: color 0.2s ease !important;
}

body #app .tabbar__container-item.active {
    color: #22c55e !important;
    text-shadow: 0 0 8px rgba(34, 197, 94, 0.5) !important;
}

body #app .tabbar__container-item.active svg path,
body #app .tabbar__container-item.active svg {
    color: #22c55e !important;
    fill: #22c55e !important;
    filter: drop-shadow(0 0 6px rgba(34, 197, 94, 0.6)) !important;
}

body #app .tabbar__container-item svg path {
    transition: all 0.2s ease !important;
}

/* Center promotion tab circle */
body #app .tabbar__container-item:nth-of-type(3) .promotionBg {
    background: #0a120c !important;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.4) !important;
}

body #app .tabbar__container-item:nth-of-type(3) .promotionBg:after {
    background: linear-gradient(180deg, #16a34a 0%, #22c55e 100%) !important;
    border: 0.06rem solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 0 15px rgba(34, 197, 94, 0.5) !important;
}

body #app .tabbar__container-item:nth-of-type(3) .svg-icon {
    color: #ffffff !important;
}

/* ========== 4. HEADER / NAVBAR ========== */
body #app .login__container .login__container-heading,
body #app .login__container .navbar-fixed,
body #app .resgister__C .resgister__C-heading,
body #app .resgister__C .navbar-fixed {
    background: linear-gradient(135deg, #0a1a0e 0%, #0f2d18 100%) !important;
    border-bottom: 1px solid rgba(34, 197, 94, 0.2) !important;
}

/* ========== 5. GAME CARDS & GRID ========== */
#app .homeNav .more {
    background-color: #0f1f14 !important;
    border: 1px solid rgba(34, 197, 94, 0.12) !important;
    border-radius: 0.24rem !important;
    overflow: hidden !important;
    transition: all 0.25s ease !important;
}

#app .homeNav .more:active {
    border-color: rgba(34, 197, 94, 0.4) !important;
    box-shadow: 0 0 12px rgba(34, 197, 94, 0.2) !important;
    transform: scale(0.97) !important;
}

#app .homeNav .more-l2 {
    background: linear-gradient(180deg, rgba(10, 26, 14, 0.5) -25%, #0f2416 58%) !important;
}

/* Game card images */
img[class*="gameItem"],
div[class*="gameItem"] img,
.ar img[src*="gamelist"],
.ar img[src*="game_icon"] {
    border-radius: 0.2rem !important;
    transition: all 0.2s ease !important;
}

img[class*="gameItem"]:active,
div[class*="gameItem"] img:active {
    transform: scale(0.96) !important;
}

/* ========== 6. VAN-TABS (Category Tabs) ========== */
#app .homeNav .van-tabs__wrap .van-tabs__nav {
    background: #0a1a0e !important;
    border-radius: 0.8rem !important;
    padding: 0.05rem !important;
    border: 1px solid rgba(34, 197, 94, 0.1) !important;
}

#app .homeNav .van-tabs__wrap .van-tabs__nav .van-tab {
    color: #94a3b8 !important;
    border-radius: 0.8rem !important;
    transition: all 0.2s ease !important;
    font-weight: 600 !important;
}

#app .homeNav .van-tabs__wrap .van-tabs__nav .van-tab.van-tab--active {
    color: #ffffff !important;
    background: linear-gradient(135deg, #16a34a 0%, #22c55e 100%) !important;
    box-shadow: 0 2px 10px rgba(34, 197, 94, 0.4) !important;
}

/* ========== 7. BUTTONS ========== */
.x-btn:active,
.van-button--primary,
.dialog-wrapper .dialog-btn,
.footer .btn {
    background: linear-gradient(135deg, #16a34a 0%, #22c55e 100%) !important;
    box-shadow: 0 3px 12px rgba(34, 197, 94, 0.35) !important;
    border: none !important;
}

/* ========== 8. NOTICE BAR ========== */
#app .noticeBar__container {
    background-color: #0f1f14 !important;
    border: 1px solid rgba(34, 197, 94, 0.1) !important;
}

#app .noticeBar__container button {
    background: linear-gradient(135deg, #16a34a 0%, #22c55e 100%) !important;
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.3) !important;
}

/* ========== 9. DIALOGS & POPUPS ========== */
.van-dialog,
.van-popup {
    background: #0a1a0e !important;
    border: 1px solid rgba(34, 197, 94, 0.15) !important;
}

.van-dialog__confirm {
    background: linear-gradient(135deg, #16a34a 0%, #22c55e 100%) !important;
    color: #ffffff !important;
}

/* ========== 10. CARDS & PANELS ========== */
.van-cell,
.van-cell-group {
    background: #0a1a0e !important;
}

.van-sidebar-item--select {
    color: #22c55e !important;
}

/* ========== 11. WALLET / BALANCE AREA ========== */
body #app .wallet-container-header-belly svg path:nth-child(1) {
    fill: #0f2416 !important;
}

body #app .wallet-container-header-belly svg path:nth-child(2) {
    fill: #22c55e !important;
}

body #app .wallet-container-header-belly svg path:nth-child(3) {
    fill: #0f2416 !important;
}

/* ========== 12. INPUT FIELDS ========== */
input, textarea {
    background-color: #0a1a0e !important;
    border-color: rgba(34, 197, 94, 0.2) !important;
    color: #e2e8f0 !important;
}

input:focus, textarea:focus {
    outline-color: rgba(34, 197, 94, 0.5) !important;
    border-color: rgba(34, 197, 94, 0.4) !important;
    box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.1) !important;
}

/* ========== 13. SCROLLBAR HIDE (Mobile Feel) ========== */
::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
}

* {
    scrollbar-width: none !important;
}

/* ========== 14. SWIPER / BANNER CAROUSEL ========== */
.van-swipe,
.van-swipe-item img {
    border-radius: 0.24rem !important;
}

/* ========== 15. SPLASH / START PAGE ========== */
.start-page {
    background: #050a05 !important;
}

/* ========== 16. ANIMATIONS & MICRO-INTERACTIONS ========== */
@keyframes greenPulse {
    0%, 100% { box-shadow: 0 0 8px rgba(34, 197, 94, 0.3); }
    50% { box-shadow: 0 0 18px rgba(34, 197, 94, 0.65); }
}

@keyframes greenGlow {
    0%, 100% { text-shadow: 0 0 4px rgba(34, 197, 94, 0.3); }
    50% { text-shadow: 0 0 12px rgba(34, 197, 94, 0.7); }
}

/* Active button glow */
.van-button--primary:active {
    animation: greenPulse 0.3s ease !important;
}

/* ========== 17. FINANCIAL SERVICES FOOTER ========== */
body #app .financialServices__container-footer > div {
    background: linear-gradient(135deg, #16a34a 0%, #22c55e 100%) !important;
}

/* ========== 18. VIP & PROMOTION PAGES ========== */
body #app .ruleHead svg {
    color: #0f2416 !important;
}

body #app .promotion-grade-th,
body #app .ruleHead .promotion-title {
    color: #ffffff !important;
}

/* ========== 19. CUSTOMER SERVICE FLOATING BUTTON ========== */
.customer {
    box-shadow: 0 4px 15px rgba(34, 197, 94, 0.3) !important;
    border: 2px solid rgba(34, 197, 94, 0.25) !important;
}

/* ========== 20. CALENDAR ========== */
body #app .van-calendar__day--start,
body #app .van-calendar__day--end {
    background: #22c55e !important;
}

/* ========== 21. AVATAR & PROFILE ========== */
.avatar-container {
    background: #050a05 !important;
}

.avatar-container .van-grid-item__content {
    background: rgba(10, 26, 14, 0.85) !important;
    border-color: rgba(34, 197, 94, 0.15) !important;
}

.avatar-container .van-grid-item__content:active {
    border-color: #22c55e !important;
}

.avatar-container img.active {
    border-color: #22c55e !important;
    box-shadow: 0 0 16px rgba(34, 197, 94, 0.6) !important;
}

.userInfo__container-content__avatar img.userAvatar,
.userInfo__container-content__avatar img {
    border-color: rgba(34, 197, 94, 0.5) !important;
    box-shadow: 0 0 12px rgba(34, 197, 94, 0.3) !important;
}

/* ========== 22. FIRST DEPOSIT DIALOG ========== */
.firstSaveDialog .close,
[data-v-9cd12fb2].close,
.van-dialog .close {
    background: rgba(10, 26, 14, 0.95) !important;
    border-color: rgba(34, 197, 94, 0.5) !important;
}

.firstSaveDialog .close:hover,
[data-v-9cd12fb2].close:hover {
    background: rgba(34, 197, 94, 0.9) !important;
    border-color: #fff !important;
}

/* ========== 23. GREEN AMBIENT GLOW EFFECTS ========== */
#app::before {
    content: "";
    position: fixed;
    top: -30%;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 40%;
    background: radial-gradient(ellipse at center, rgba(34, 197, 94, 0.06) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

/* ========== 24. HOME CATEGORY NAV (Home/Lottery/Originals/Slots/More) ========== */
#app .homeNav .van-tabs__wrap {
    background: transparent !important;
    margin-bottom: 0.24rem !important;
}

/* Category row container */
#app [class*="home__container"] [class*="nav"],
#app [class*="homeNav"] [class*="tabs"] {
    background: transparent !important;
}

/* Active home tab */
#app .homeNav .van-tab--active {
    background: linear-gradient(135deg, #16a34a 0%, #22c55e 100%) !important;
    color: #ffffff !important;
    border-radius: 0.16rem !important;
    box-shadow: 0 2px 10px rgba(34, 197, 94, 0.35) !important;
}

/* ========== 25. ACTIVITY / INVITE CARDS ========== */
#app [class*="activity"],
#app [class*="invite"] {
    border-radius: 0.24rem !important;
    overflow: hidden !important;
}

/* ========== 26. GAME CARD IMPROVEMENTS ========== */
#app [class*="game_item"],
#app [class*="gameItem"],
#app [class*="lottery__container-game"],
#app [class*="original__container-game"],
#app [class*="hotGame"] {
    border-radius: 0.24rem !important;
    overflow: hidden !important;
    transition: all 0.2s ease !important;
    border: 1px solid rgba(34, 197, 94, 0.08) !important;
}

#app [class*="game_item"]:active,
#app [class*="gameItem"]:active {
    transform: scale(0.96) !important;
    border-color: rgba(34, 197, 94, 0.3) !important;
    box-shadow: 0 0 12px rgba(34, 197, 94, 0.2) !important;
}

/* ========== 27. SECTION HEADERS ========== */
#app [class*="section-title"],
#app [class*="Lottery games"],
#app [class*="Original"],
#app [class*="Hot games"] {
    color: #e2e8f0 !important;
}

/* All badge counters */
#app [class*="badge"],
#app [class*="Badge"] {
    background: linear-gradient(135deg, #16a34a 0%, #22c55e 100%) !important;
    color: #ffffff !important;
    border-radius: 0.8rem !important;
}

/* ========== 28. NAVIGATION ARROWS ========== */
#app [class*="arrow-btn"],
#app [class*="arrowBtn"],
#app [class*="van-swipe__indicator--active"] {
    background: rgba(34, 197, 94, 0.7) !important;
}

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

.van-swipe__indicator {
    background-color: rgba(34, 197, 94, 0.25) !important;
}

/* ========== 29. BOTTOM TAB BAR REFINED ========== */
body #app .tabbar__container {
    background: linear-gradient(180deg, rgba(8, 16, 10, 0.97) 0%, rgba(5, 10, 5, 1) 100%) !important;
    height: 1.6rem !important;
}

body #app .tabbar__container-item span {
    font-weight: 600 !important;
    font-size: 0.28rem !important;
    letter-spacing: 0.3px !important;
}

/* Home tab active green text */
body #app .tabbar__container-item.active span {
    color: #22c55e !important;
}

/* ========== 30. POPUP & OVERLAY REFINEMENTS ========== */
.van-overlay {
    background: rgba(0, 0, 0, 0.65) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
}

/* ========== 31. LOADING & SKELETON ========== */
.van-skeleton__row,
.van-skeleton__title {
    background: rgba(34, 197, 94, 0.1) !important;
}

/* ========== 32. CUSTOMER SERVICE BUTTON GLOW ========== */
.customer {
    animation: greenPulse 3s ease-in-out infinite !important;
}

/* ========== 33. TOAST NOTIFICATIONS ========== */
.van-toast {
    background: rgba(10, 26, 14, 0.95) !important;
    border: 1px solid rgba(34, 197, 94, 0.2) !important;
    backdrop-filter: blur(12px) !important;
}

/* ========== 34. DOWNLOAD BAR ========== */
#app [class*="downloadMobileApp"],
#app [class*="download"] {
    background: #0a1a0e !important;
    border-bottom: 1px solid rgba(34, 197, 94, 0.15) !important;
}

/* ========== 35. SMOOTH TRANSITIONS GLOBALLY ========== */
*, *::before, *::after {
    transition-duration: 0.15s !important;
    transition-timing-function: ease !important;
}

/* Exclude animations */
@keyframes greenPulse {
    0%, 100% { box-shadow: 0 0 8px rgba(34, 197, 94, 0.3); }
    50% { box-shadow: 0 0 18px rgba(34, 197, 94, 0.65); }
}

/* ========== 36. REGISTER/LOGIN BUTTON ========== */
#app [class*="register"],
#app button[class*="register"],
#app a[class*="register"] {
    border-color: #22c55e !important;
}

/* ========== 37. FORTUNE WHEEL GLOW ========== */
.customer img {
    filter: drop-shadow(0 0 8px rgba(34, 197, 94, 0.3)) !important;
}