/* ===== TARGETED SCROLL BEHAVIOR OVERRIDE ===== */
/* Block smooth scrolling ONLY on tab elements, not entire page */
.van-tabs,
.van-tabs *,
.van-tabs__wrap,
.van-tabs__nav,
.van-tabs__track,
.van-tab,
.tabs-btn {
    scroll-behavior: auto !important;
    -webkit-scroll-behavior: auto !important;
    -moz-scroll-behavior: auto !important;
    -ms-scroll-behavior: auto !important;
}

/* Disable all Vant slide animations globally */
.van-slide-up-enter, .van-slide-up-leave,
.van-slide-down-enter, .van-slide-down-leave,
.van-slide-left-enter, .van-slide-left-leave,
.van-slide-right-enter, .van-slide-right-leave {
    animation: none !important;
    -webkit-animation: none !important;
    transform: none !important;
    -webkit-transform: none !important;
    transition: none !important;
}

/* Override ALL keyframe animations defined in common-e210f711.css */
@keyframes van-slide-up-enter { from, to { transform: translateZ(0) !important; } }
@keyframes van-slide-up-leave { from, to { transform: translateZ(0) !important; } }
@keyframes van-slide-down-enter { from, to { transform: translateZ(0) !important; } }
@keyframes van-slide-down-leave { from, to { transform: translateZ(0) !important; } }
@keyframes van-slide-left-enter { from, to { transform: translateZ(0) !important; } }
@keyframes van-slide-left-leave { from, to { transform: translateZ(0) !important; } }
@keyframes van-slide-right-enter { from, to { transform: translateZ(0) !important; } }
@keyframes van-slide-right-leave { from, to { transform: translateZ(0) !important; } }

@-webkit-keyframes van-slide-up-enter { from, to { -webkit-transform: translateZ(0) !important; } }
@-webkit-keyframes van-slide-up-leave { from, to { -webkit-transform: translateZ(0) !important; } }
@-webkit-keyframes van-slide-down-enter { from, to { -webkit-transform: translateZ(0) !important; } }
@-webkit-keyframes van-slide-down-leave { from, to { -webkit-transform: translateZ(0) !important; } }
@-webkit-keyframes van-slide-left-enter { from, to { -webkit-transform: translateZ(0) !important; } }
@-webkit-keyframes van-slide-left-leave { from, to { -webkit-transform: translateZ(0) !important; } }
@-webkit-keyframes van-slide-right-enter { from, to { -webkit-transform: translateZ(0) !important; } }
@-webkit-keyframes van-slide-right-leave { from, to { -webkit-transform: translateZ(0) !important; } }

/* Tab 3 Icon - Diamond/VIP */
.van-tab:nth-child(3)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffc107'%3E%3Cpath d='M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 12l-1.25 2.25L12 17.25l1.25 2.25L12 15zm4-4l-1.25 2.25L16 13.25l1.25 2.25L16 11zm-8 0l-1.25 2.25L8 13.25l1.25 2.25L8 11zm4-4l-1.25 2.25L12 9.25l1.25 2.25L12 7z'/%3E%3C/svg%3E");
}

/* Tab 4 Icon - Gift/Promo */
.van-tab:nth-child(4)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffc107'%3E%3Cpath d='M20 6h-2.18c.11-.31.18-.65.18-1 0-1.66-1.34-3-3-3-1.05 0-1.96.54-2.5 1.35l-.5.67-.5-.68C10.96 2.54 10.05 2 9 2 7.34 2 6 3.34 6 5c0 .35.07.69.18 1H4c-1.11 0-1.99.89-1.99 2L2 19c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2zm-5-2c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zM9 4c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm11 15H4v-2h16v2zm0-5H4V8h5.08L7 10.83 8.62 12 11 8.76l1-1.36 1 1.36L15.38 12 17 10.83 14.92 8H20v6z'/%3E%3C/svg%3E");
}

/* ===== LIGHTWEIGHT: Prevent excessive auto-centering while allowing smooth tab switches ===== */

/* Only block transform on nav to prevent excessive auto-centering */
.van-tabs__nav {
    transform: none !important;
}

/* Keep scroll behavior smooth for natural feel */
.van-tabs__wrap {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
}

/* Freeze tabs during any animation attempts */
.van-tabs__nav.van-tabs__nav--line,
.van-tabs__nav.van-tabs__nav--card {
    animation: none !important;
    -webkit-animation: none !important;
    transform: translate3d(0, 0, 0) !important;
    translate: 0 !important;
    left: 0 !important;
    margin-left: 0 !important;
    transition: none !important;
    transition-property: none !important;
    transition-duration: 0s !important;
    will-change: auto !important;
}

/* Block all potential animation/transition properties */
.van-tabs__nav,
.van-tabs__nav * {
    -webkit-transform: none !important;
    -moz-transform: none !important;
    -ms-transform: none !important;
    -o-transform: none !important;
    transform: none !important;
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -ms-transition: none !important;
    -o-transition: none !important;
    transition: none !important;
}

/* Custom Vant Tabs Design & Colors - Modern Redesign */
.van-tabs__wrap {
    height: 80px !important;
    background: transparent !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-radius: 16px !important;
    margin: 10px 0 0 0 !important; /* Removed bottom margin to eliminate gap */
    box-shadow: 
        0 4px 20px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    padding: 10px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.van-tabs__wrap::after {
    display: none !important;
}

.van-tabs__wrap:hover {
    box-shadow: 
        0 6px 24px rgba(0, 0, 0, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

/* Enhanced Nav Container - Modern & Fluid */
.van-tabs__nav,
.van-tabs__nav--line,
.van-tabs__nav--complete {
    background: transparent !important;
    display: flex !important;
    gap: 10px !important;
    height: 100% !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 0 5px !important;
    box-sizing: border-box !important;
    border: none !important;
    transform: none !important;
    border-radius: 0 !important;
    flex-wrap: nowrap !important;
}

/* Specific fix for "line" mode to remove default bottom spacing */
.van-tabs__nav--line {
    padding-bottom: 0 !important;
}

.van-tab {
    flex: 0 0 auto !important;
    min-width: auto !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    margin: 0 !important;
}

/* Hover effect for inactive tabs */
.van-tab:not(.van-tab--active):hover {
    background: transparent !important;
}

/* Remove default active background and apply specific color */
.van-tab--active {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    transform: none !important;
}

/* Ensure tabs-btn inherits or handles the color correctly */
.van-tab--active .tabs-btn {
    background-color: linear-gradient(135deg, rgba(2, 11, 50, 0.95) 0%, rgba(25, 1, 49, 0.95) 50%, rgba(35, 1, 39, 0.95) 100%) !important;
    border: 1px solid rgba(255, 193, 7, 0.3) !important;
    box-shadow: 
        0 4px 12px rgba(255, 193, 7, 0.2),
        inset 0 1px 1px rgba(255, 255, 255, 0.2) !important;
}

.van-tabs__line {
    display: none !important;
}

/* Scrollbar styling for tabs */
.van-tabs__wrap::-webkit-scrollbar {
    height: 6px;
}

.van-tabs__wrap::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}

.van-tabs__wrap::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}

/* ==========================================================================
   Modern Sidebar UI Overrides — Purple Gradient / Glassmorphism Theme
   Appended: creates a modern, responsive sidebar that is mobile-friendly
   and applies a 15px top margin on desktop-sized viewports.
   This block is intentionally scoped as high-specificity overrides and
   placed at the end of the file so it is non-destructive to existing rules.
   ==========================================================================
*/

:root {
    --purple-50: #f6f3ff;
    --purple-100: #e9dbff;
    --purple-300: #b993ff;
    --purple-500: #7a5cff;
    --purple-700: #5a2ea6;
    --accent: linear-gradient(135deg, rgba(122,92,255,0.95), rgba(87,58,173,0.95));
    --glass-bg: rgba(18,12,28,0.48);
    --glass-border: rgba(255,255,255,0.06);
    --muted: rgba(255,255,255,0.7);
    --text: #efeefe;
    --shadow-lg: 0 10px 30px rgba(22,12,40,0.6);
}

/* accessibility helper */
.sr-only { position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }

/* Main sidebar container (apply to commonly used sidebar selectors) */
.sidebar, .app-sidebar, .sideBar, #sidebar, .sidebar-ui {
    box-sizing: border-box;
    width: 280px;
    max-width: 100%;
    height: calc(100vh - 30px);
    position: fixed;
    left: 18px;
    top: 15px; /* baseline for desktop; redundant but explicit */
    padding: 18px 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: var(--glass-bg);
    background-image: var(--accent);
    background-blend-mode: overlay;
    border-radius: 14px;
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(10px) saturate(120%);
    -webkit-backdrop-filter: blur(10px) saturate(120%);
    box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,0.03);
    color: var(--text);
    z-index: 900;
    overflow: hidden;
}

.sidebar .brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 6px;
}
.sidebar .brand .logo {
    width: 44px; height: 44px; border-radius: 10px; overflow: hidden;
    box-shadow: 0 6px 18px rgba(90,46,166,0.25);
    background: linear-gradient(135deg,#fff2 0%, rgba(255,255,255,0.02) 100%);
}
.sidebar .brand .title {
    font-weight: 700; font-size: 1rem; letter-spacing: 0.2px;
    color: #fff;
}

.sidebar .search {
    display: block; width: 100%;
}
.sidebar .search input {
    width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.06);
    background: rgba(255,255,255,0.03); color: var(--text); outline: none;
    font-size: 0.925rem; transition: box-shadow .18s ease, transform .18s ease;
}
.sidebar .search input::placeholder { color: var(--muted); }
.sidebar .search input:focus { box-shadow: 0 6px 18px rgba(122,92,255,0.14); transform: translateY(-1px); }

.sidebar .nav { display:flex; flex-direction:column; gap:8px; overflow:auto; padding-right:6px; }
.sidebar .nav::-webkit-scrollbar{ width:8px }
.sidebar .nav::-webkit-scrollbar-track{ background: transparent }
.sidebar .nav::-webkit-scrollbar-thumb{ background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)); border-radius: 8px; }

.sidebar .nav .item {
    display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:10px; cursor:pointer; transition: transform .18s cubic-bezier(.2,.9,.3,1), box-shadow .18s ease, background .18s ease;
    color: var(--text); text-decoration: none; user-select: none;
    background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.00));
}
.sidebar .nav .item .icon{ width:36px; height:36px; border-radius:8px; display:inline-grid; place-items:center; background: rgba(255,255,255,0.03); }
.sidebar .nav .item .label{ font-size:0.95rem; font-weight:600; color:var(--text) }

.sidebar .nav .item:hover{ transform: translateY(-4px); box-shadow: 0 12px 30px rgba(18,12,28,0.5); background: linear-gradient(90deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01)); }
.sidebar .nav .item.active{ background: linear-gradient(90deg, rgba(122,92,255,0.2), rgba(87,58,173,0.14)); box-shadow: 0 10px 28px rgba(87,58,173,0.18); border-left: 3px solid rgba(255,255,255,0.14); transform: none; }

.sidebar .divider{ height:1px; background: linear-gradient(90deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01)); margin:6px 0; border-radius:2px }

.sidebar .footer { margin-top:auto; display:flex; flex-direction:column; gap:8px }
.sidebar .footer .small { font-size:0.8rem; color:var(--muted) }
.sidebar .footer .cta { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 12px; border-radius:10px; color:#fff; font-weight:700; background:var(--accent); box-shadow: 0 8px 28px rgba(122,92,255,0.24); border: none; cursor:pointer; transition: transform .12s ease, box-shadow .12s ease }
.sidebar .footer .cta:hover { transform: translateY(-3px); box-shadow: 0 12px 38px rgba(122,92,255,0.32) }

/* Compact mode: small sidebar variants (toggle/overlay) */
.sidebar.compact, .sidebar.minified { width: 74px; padding: 12px 10px; border-radius: 12px; }
.sidebar.compact .brand .title, .sidebar.compact .search, .sidebar.compact .nav .item .label, .sidebar.compact .footer .small { display: none }
.sidebar.compact .nav .item { justify-content:center }

/* Responsive: Mobile first adjustments */
@media (max-width: 500px) {
    .sidebar, .app-sidebar, .sideBar, #sidebar, .sidebar-ui {
        position: fixed; left: 0; right: 0; top: auto; bottom: 0; height: auto; width: 100%; max-height: 46vh; border-radius: 12px 12px 0 0; padding: 12px; left:0; transform: translateY(0);
        display:flex; flex-direction:column; gap:10px;
    }
    .sidebar .nav { flex-direction:row; gap:8px; overflow:auto; }
    .sidebar .nav .item{ min-width: 88px; flex: 0 0 auto; justify-content:center; padding:8px }
    .sidebar .brand{ display:flex; align-items:center; gap:8px }
}

/* Desktop / tablet: apply 15px top margin to align with page requirement */
@media (min-width: 768px) {
    .sidebar, .app-sidebar, .sideBar, #sidebar, .sidebar-ui { margin-top: 15px; }
}

/* Larger screens: increase width comfortably */
@media (min-width: 1200px) {
    .sidebar, .app-sidebar, .sideBar, #sidebar, .sidebar-ui { width: 320px; padding: 20px; border-radius: 16px; }
}

/* Lightweight utility for small badges */
.sidebar .badge { background: rgba(255,255,255,0.06); color:var(--text); padding:4px 8px; border-radius: 999px; font-size:0.75rem; font-weight:700 }

/* Ensure prioritized override for Vant/popup sidebars if needed */
.van-sidebar, .van-popup .sidebar, .vue-sidebar { background: var(--glass-bg) !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; }

/* End of modern sidebar overrides */

/* ============================================
   LIGHT MODE OVERRIDES
   Moved to assets/css/theme-modes.css (single source of truth)
   ============================================ */
body.light-mode {
    --bg_color_L1: #eef0f8 !important;
    --bg_color_L2: #f0f2fa !important;
    --bg_color_L3: #e2e6f5 !important;
    --text_color_L1: #111827 !important;
    --text_color_L2: #1f2937 !important;
    --text_color_L3: #374151 !important;
    --text_color_L4: #111827 !important;
    --Dividing-line_color: #d1d5db !important;
    --sheet_detail_bg_color: #ffffff !important;
    --sheet_nva_color: #b45309 !important;
    --darkBg: #ffffff !important;
    /* Vant component variable overrides */
    --van-background: #f0f2f8 !important;
    --van-background-2: #ffffff !important;
    --van-background-3: #ffffff !important;
    --van-text-color: #111827 !important;
    --van-text-color-2: #374151 !important;
    --van-text-color-3: #6b7280 !important;
    --van-border-color: #d1d5db !important;
    --van-active-color: #e5e7eb !important;
    --van-cell-background: #ffffff !important;
    --van-cell-group-background: #ffffff !important;
    --van-popup-background: #ffffff !important;
    --van-dialog-background: #ffffff !important;
    --van-picker-background: #ffffff !important;
    --van-picker-mask-color: linear-gradient(180deg,rgba(240,242,248,.9),rgba(240,242,248,.4)),linear-gradient(0deg,rgba(240,242,248,.9),rgba(240,242,248,.4)) !important;
    --van-picker-option-text-color: #111827 !important;
    --van-action-sheet-item-background: #ffffff !important;
    --van-action-sheet-item-text-color: #111827 !important;
    --van-grid-item-content-background: #ffffff !important;
    --van-collapse-item-content-background: #f9fafb !important;
    --van-popover-light-background: #ffffff !important;
    --van-calendar-background: #ffffff !important;
    --van-field-input-text-color: #111827 !important;
    --van-slider-inactive-background: #e5e7eb !important;
    --van-circle-layer-color: #e5e7eb !important;
    background: #f0f2f8 !important;
    color: #111827 !important;
}
/* html root bg */
body.light-mode,
html body.light-mode {
    background-color: #f0f2f8 !important;
}
/* App root background */
body.light-mode #app {
    background: #f0f2f8 !important;
    color: #111827 !important;
}
/* Navbar */
body.light-mode .navbar-fixed,
body.light-mode .van-nav-bar {
    background: linear-gradient(135deg, #1a3be8 0%, #4a1a8c 50%, #2a0a3a 100%) !important;
}
/* Tabs */
body.light-mode .van-tabs__nav {
    background: #ffffff !important;
}
body.light-mode .van-tab {
    color: #374151 !important;
}
body.light-mode .van-tab--active {
    color: var(--main-color) !important;
}
body.light-mode .van-tabs__line {
    background: var(--main-color) !important;
}
/* Cards & containers */
body.light-mode .van-cell,
body.light-mode .van-cell-group,
body.light-mode .van-list,
body.light-mode .van-pull-refresh {
    background: #ffffff !important;
    color: #111827 !important;
}
body.light-mode .van-cell__title,
body.light-mode .van-cell__value,
body.light-mode .van-cell__label {
    color: #111827 !important;
}
body.light-mode .van-cell::after {
    border-color: #e5e7eb !important;
}
/* Popup & sheets */
body.light-mode .van-popup,
body.light-mode .van-action-sheet,
body.light-mode .van-action-sheet__content,
body.light-mode .van-picker,
body.light-mode .van-picker__toolbar,
body.light-mode .van-picker__columns,
body.light-mode .van-dialog,
body.light-mode .van-dialog__header,
body.light-mode .van-dialog__content,
body.light-mode .van-dialog__footer {
    background: #ffffff !important;
    color: #111827 !important;
}
body.light-mode .van-picker-column__item,
body.light-mode .van-picker__cancel,
body.light-mode .van-picker__confirm {
    color: #111827 !important;
}
/* Inputs */
body.light-mode .van-field__control {
    color: #111827 !important;
    background: #f9fafb !important;
}
body.light-mode .van-field,
body.light-mode .van-field__body {
    background: #f3f4f6 !important;
}
body.light-mode .van-field__label {
    color: #374151 !important;
}
body.light-mode .van-field__placeholder {
    color: #9ca3af !important;
}
/* Buttons — keep gradient, just ensure text is readable */
body.light-mode .van-button--default {
    background: #e5e7eb !important;
    color: #111827 !important;
    border-color: #d1d5db !important;
}
/* Grid items */
body.light-mode .van-grid-item__content {
    background: #ffffff !important;
}
body.light-mode .van-grid-item__text {
    color: #374151 !important;
}
/* Collapse */
body.light-mode .van-collapse-item__content {
    background: #f9fafb !important;
    color: #374151 !important;
}
body.light-mode .van-collapse-item__title {
    background: #ffffff !important;
    color: #111827 !important;
}
/* Switch / checkbox */
body.light-mode .van-switch__background {
    background: #e5e7eb !important;
}
/* Tag */
body.light-mode .van-tag--default {
    background: #e5e7eb !important;
    color: #374151 !important;
}
/* Main page section backgrounds */
body.light-mode .home,
body.light-mode .container,
body.light-mode .main,
body.light-mode .page,
body.light-mode [class*="-wrap"],
body.light-mode [class*="-container"] {
    background: transparent !important;
    color: #111827 !important;
}
/* okwin / wallet / notice main sections */
body.light-mode .okwin,
body.light-mode .okwin2Home,
body.light-mode .Wallet__C,
body.light-mode .totalSavings__container,
body.light-mode .noticeBar__container,
body.light-mode .dailyProfitRank,
body.light-mode .ok_winner,
body.light-mode .onlineGames__container,
body.light-mode .p3-terms {
    background: transparent !important;
    color: #111827 !important;
}
/* Daily profit rank items */
body.light-mode .dailyProfitRank__content,
body.light-mode .dailyProfitRank__item,
body.light-mode .dailyProfitRank__header {
    background: #ffffff !important;
    color: #111827 !important;
}
/* ok_winner items */
body.light-mode .ok_winner-wrapper__item {
    background: #f3f4f6 !important;
    color: #111827 !important;
    border-color: #e5e7eb !important;
}
/* Game list/card items */
body.light-mode .game-item,
body.light-mode .game-card,
body.light-mode .onlineGames__container-list__item {
    background: #ffffff !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.10) !important;
}
body.light-mode .onlineGames__container-list__item span {
    color: #374151 !important;
}
/* Fun-tab pills */
body.light-mode .fun-tabs,
body.light-mode .fun-tab-item {
    background: #e5e7eb !important;
    color: #374151 !important;
}
body.light-mode .fun-tab-item.activeClassName {
    color: #ffffff !important;
}
/* notice bar */
body.light-mode .noticeBar__container {
    background: rgba(255,193,7,0.08) !important;
    border-bottom-color: rgba(255,193,7,0.4) !important;
}
body.light-mode .noticeBar__container-body-text {
    color: #151515 !important;
}
/* swiper dots */
body.light-mode .swiper_box .swiper-button span {
    background: rgba(0,0,0,0.2) !important;
}
/* Scrollbar in light mode */
body.light-mode ::-webkit-scrollbar-track {
    background: #e5e7eb !important;
}
body.light-mode ::-webkit-scrollbar-thumb {
    background: #9ca3af !important;
}
/* Toggle slider colour in light mode: blue = dark active, grey = light */
body.light-mode .sidebar-toggle-switch input:checked + .sidebar-toggle-slider {
    background-color: #4a90e2 !important;
}
body.light-mode .sidebar-darkmode-label {
    color: #a0a8b5 !important;
}


.van-tabs__wrap::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.15);
}

/* ============================================
   DESKTOP SIDEBAR - BET11BD STYLE
   ============================================ */

/* Sidebar Container */
#desktop-sidebar {
    height: 100vh;
    width: 280px;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 10010;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fafafb;
}

/* ---- Sidebar Header ---- */
.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    background: #dad2d2 !important;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    flex-shrink: 0;
    gap: 8px;
    height: 80px !important;
}

.sidebar-cricket-badge {
    background: #8b1908;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    margin-left: -15px;
    padding: 4px 9px;
    border-radius: 15px;
    border: 2px solid #d7d008;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    white-space: nowrap;
    flex-shrink: 0;
}

.sidebar-logo-text {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    flex: 1;
    text-align: center;
    background: none;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    background-clip: unset;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
    filter: none;
    line-height: 1;
}

.sidebar-collapse-btn {
    width: 28px;
    height: 28px;
    background: #FFD700;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: #111;
    padding: 0;
    flex-shrink: 0;
    transition: background 0.2s ease;
}
.sidebar-collapse-btn:hover { background: #ffe033; }

/* ---- Dark Mode Toggle Row ---- */
.sidebar-darkmode-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 14px;
    background: #0d0f14;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    flex-shrink: 0;
}

.sidebar-darkmode-label {
    color: #a0a8b5;
    font-size: 13px;
    font-weight: 500;
}

.sidebar-toggle-switch {
    position: relative;
    display: inline-block;
    width: 42px;
    height: 22px;
}
.sidebar-toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.sidebar-toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #555;
    border-radius: 22px;
    transition: 0.3s;
}
.sidebar-toggle-slider::before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 3px;
    bottom: 3px;
    background: white;
    border-radius: 50%;
    transition: 0.3s;
}
.sidebar-toggle-switch input:checked + .sidebar-toggle-slider {
    background-color: #4a90e2;
}
.sidebar-toggle-switch input:checked + .sidebar-toggle-slider::before {
    transform: translateX(20px);
}

/* ---- Sidebar Scrollable Content ---- */
#desktop-sidebar #sidebar-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    background: #f9fafa;
    padding: 0 0 60px 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.12) transparent;
}

#desktop-sidebar #sidebar-content::-webkit-scrollbar {
    width: 4px;
}
#desktop-sidebar #sidebar-content::-webkit-scrollbar-track {
    background: transparent;
}
#desktop-sidebar #sidebar-content::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.12);
    border-radius: 4px;
}

/* ---- Section Divider ---- */
.sidebar-section-divider {
    height: 1px;
    background: rgba(255,255,255,0.08);
    margin: 6px 0;
}

/* ---- Nav Sections ---- */
#sidebar-nav,
#sidebar-nav-bottom {
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0;
    list-style: none;
}

/* ---- Nav Item ---- */
.sidebar-nav-item {
    display: flex;
    align-items: center;
    padding: 8px 14px;
    text-decoration: none !important;
    color: #dde1ea !important;
    font-size: 14px;
    font-weight: 500;
    gap: 12px;
    cursor: pointer;
    transition: background 0.18s ease;
    position: relative;
    border-left: 3px solid transparent;
}

.sidebar-nav-item:hover {
    background: rgba(255,255,255,0.07);
    border-left-color: #FFD700;
}

.sidebar-nav-item.active {
    background: rgba(120, 100, 0, 0.3);
    border-left-color: #FFD700;
}

/* ---- Nav Icon (Yellow Box) ---- */
.sidebar-nav-icon {
    width: 38px;
    height: 38px;
    background: #FFD700;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.sidebar-nav-icon svg {
    width: 22px;
    height: 22px;
    fill: #1a1200 !important;
}

/* ---- icon-box (dynamic sidebar categories) ---- */
#desktop-sidebar .icon-box {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    background: #FFD700 !important;
    border-radius: 9px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    overflow: hidden !important;
}
#desktop-sidebar .icon-box svg {
    width: 20px !important;
    height: 20px !important;
    fill: #000000 !important;
    stroke: #000000 !important;
    display: block !important;
}
#desktop-sidebar .icon-box svg path,
#desktop-sidebar .icon-box svg rect,
#desktop-sidebar .icon-box svg circle,
#desktop-sidebar .icon-box svg polygon,
#desktop-sidebar .icon-box svg ellipse {
    fill: #000000 !important;
    stroke: #000000 !important;
}
/* Stroke-only icons (from sidebar-ui.js ensureIcon) use currentColor stroke, need fill=none preserved */
#desktop-sidebar .icon-box svg path[stroke="currentColor"] {
    fill: none !important;
    stroke: #000000 !important;
}

/* ---- Nav Label ---- */
.sidebar-nav-label {
    flex: 1;
    font-size: 14px;
    font-weight: 600;
    color: #0e0e0e;
    white-space: nowrap;
}

/* ---- Nav Arrow ---- */
.sidebar-nav-arrow {
    font-size: 11px;
    color: #777;
}

/* ---- Collapsed State (icon-only mode) ---- */
/* Mobile-only close button in sidebar header */
.sidebar-mobile-close {
    display: none;
}
@media (max-width: 767px) {
    .sidebar-mobile-close {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 30px;
        background: rgba(220,30,30,0.85);
        border: 1px solid rgba(255,80,80,0.6);
        border-radius: 50%;
        color: #fff;
        font-size: 16px;
        font-weight: 700;
        cursor: pointer;
        flex-shrink: 0;
        line-height: 1;
        padding: 0;
        transition: background 0.2s;
    }
    .sidebar-mobile-close:hover {
        background: rgba(255,50,50,0.5);
    }
    .sidebar-collapse-btn {
        display: none !important;
    }
}

#desktop-sidebar.collapsed {
    width: 70px;
}
/* Hide dark mode row, nav labels, arrows, dividers */
#desktop-sidebar.collapsed .sidebar-darkmode-row,
#desktop-sidebar.collapsed .sidebar-nav-label,
#desktop-sidebar.collapsed .sidebar-nav-arrow,
#desktop-sidebar.collapsed .sidebar-section-divider {
    display: none !important;
}
/* Header stacks vertically: cricket badge → logo → collapse btn */
#desktop-sidebar.collapsed .sidebar-header {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 7px 4px !important;
    gap: 4px !important;
}
#desktop-sidebar.collapsed .sidebar-cricket-badge {
    font-size: 12px !important;
    padding: 2px 6px !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
    text-align: center;
}
#desktop-sidebar.collapsed .sidebar-logo-text {
    font-size: 11px !important;
    letter-spacing: 1px !important;
    flex: none !important;
    text-align: center;
}
#desktop-sidebar.collapsed .sidebar-collapse-btn {
    width: 26px !important;
    height: 26px !important;
    font-size: 14px !important;
    flex-shrink: 0 !important;
}
/* Icon-only nav items — centered in 70px strip */
#desktop-sidebar.collapsed .sidebar-link {
    justify-content: center !important;
    padding: 8px 0 !important;
    border-left: none !important;
}
#desktop-sidebar.collapsed .sidebar-link::after {
    display: none !important;
}
/* Hide text label spans, keep icon-box spans */
#desktop-sidebar.collapsed .sidebar-link > span:not(.icon-box) {
    display: none !important;
}
#desktop-sidebar.collapsed #sidebar-nav {
    padding: 4px 6px 0 6px;
}
#desktop-sidebar.collapsed .icon-box {
    margin: 0 auto;
}

/* Suppress all transitions during initial page load to prevent arrow/icon flip */
#desktop-sidebar.sidebar-preload,
#desktop-sidebar.sidebar-preload * {
    transition: none !important;
    animation: none !important;
}

/* ===== Sidebar Category Accordion Dropdown ===== */
.sidebar-cat-submenu {
    display: none;
    overflow: hidden;
    background: transparent !important;
}
.sidebar-cat-item.open > .sidebar-cat-submenu {
    display: block;
    color: #000 !important;
}
.sidebar-cat-arrow {
    margin-left: auto;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
    pointer-events: none;
    padding-right: 4px;
}
.sidebar-cat-arrow img {
    width: 14px;
    height: 14px;
    display: block;
    filter: none;
    opacity: 1;
    transition: opacity 0.2s ease;
}
.sidebar-cat-item.open > .sidebar-link .sidebar-cat-arrow img,
.sidebar-cat-item:hover > .sidebar-link .sidebar-cat-arrow img {
    opacity: 1;
    filter: none;
}
.sidebar-cat-item.open > .sidebar-link .sidebar-cat-arrow {
    transform: rotate(180deg);
    color: #0e0e0e;
}
.sidebar-cat-item.open > .sidebar-link {
    background: #fff !important;
    border-left-color: #FFD700 !important;
    color: #0e0e0e !important;
}
.sidebar-vendor-link {
    padding: 8px 14px 8px 18px !important;
    gap: 10px !important;
    font-size: 13px !important;
    color: #111112 !important;
    border-left: 3px solid transparent !important;
    display: flex !important;
    align-items: center !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    transition: background 0.15s ease !important;
}
.sidebar-vendor-link:hover {
    color: #0e0d0d !important;
    background: rgba(255,255,255,0.06) !important;
    border-left-color: #FFD700 !important;
}
.sidebar-vendor-link.active {
    color: #0e0e0e !important;
    border-left-color: #FFD700 !important;
    background: #fff !important;
}
.sidebar-vendor-logo {
    width: 32px;
    height: 20px;
    object-fit: contain;
    flex-shrink: 0;
    border-radius: 3px;
}
.sidebar-vendor-logo-placeholder {
    width: 32px;
    height: 20px;
    display: inline-block;
    flex-shrink: 0;
}
/* Direct-game items inside dropdown */
.sidebar-game-link {
    padding: 7px 14px 7px 18px !important;
    gap: 10px !important;
    font-size: 12px !important;
    color: #0f0f0f !important;
    border-left: 3px solid transparent !important;
    display: flex !important;
    align-items: center !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    transition: background 0.15s ease !important;
    cursor: pointer;
}
.sidebar-game-link:hover {
    color: #131313 !important;
    background: rgba(255,255,255,0.06) !important;
    border-left-color: #FFD700 !important;
}
.sidebar-game-link.active {
    color: #171717 !important;
    border-left-color: #FFD700 !important;
    background: #fff !important;
}
.sidebar-game-thumb {
    width: 36px;
    height: 24px;
    object-fit: cover;
    flex-shrink: 0;
    border-radius: 4px;
    background: #222;
}
/* Hide submenu in collapsed mode */
#desktop-sidebar.collapsed .sidebar-cat-submenu {
    display: none !important;
}
#desktop-sidebar.collapsed .sidebar-cat-arrow {
    display: none !important;
}

/* Mobile: sidebar hidden by default, shown via menu-toggle as full-height left panel */
@media (max-width: 767px) {
    /* Start hidden — JS sets display:flex on toggle */
    #desktop-sidebar {
        display: none;
        position: fixed;
        left: 0;
        top: 0;
        /* 3-col game-cats grid column */
        width: 280px !important;
        height: 100vh !important;
        height: 100dvh !important;
        z-index: 10010;
        overflow: hidden;
        flex-direction: column;
        background: #fbfcfd;
        border-right: 1px solid rgba(255,215,0,0.15);
    }
    #desktop-sidebar[style*="display: block"],
    #desktop-sidebar[style*="display:block"],
    #desktop-sidebar[style*="display: flex"],
    #desktop-sidebar[style*="display:flex"] {
        display: flex !important;
    }
    #desktop-sidebar #sidebar-content {
        overflow-y: scroll !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: contain !important;
        padding-bottom: 80px !important;
    }
    /* Compact header on mobile — cricket + logo + X button */
    #desktop-sidebar .sidebar-header {
        height: 70px !important;
        width: 100% !important;
        padding: 14px 16px !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 10px !important;
        flex-wrap: nowrap !important;
    }
    #desktop-sidebar .sidebar-logo-text {
        font-size: 18px !important;
        font-weight: 800 !important;
        letter-spacing: 1px !important;
        text-align: center !important;
        flex: 1 !important;
        min-width: 0 !important;
    }
    /* Restore cricket badge — pushed further left */
    #desktop-sidebar .sidebar-cricket-badge {
        display: inline-flex !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        padding: 5px 10px !important;
        letter-spacing: 0 !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        margin-left: -15px !important;
        order: -1 !important;
    }
    /* Restore collapse button — shown as a small pill on mobile */
    #desktop-sidebar .sidebar-collapse-btn {
        display: none !important;
    }
    /* Restore mobile-close X button */
    #desktop-sidebar .sidebar-mobile-close {
        display: flex !important;
        width: 35px !important;
        height: 35px !important;
        font-size: 20px !important;
        flex-shrink: 0 !important;
        margin-right: -15px !important;
    }
    /* Non-category static nav links: full-width row — icon + label side by side */
    #desktop-sidebar #sidebar-nav > a.sidebar-link,
    #desktop-sidebar #sidebar-nav > .sidebar-section-divider {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        padding: 13px 14px !important;
        font-size: 14px !important;
        gap: 12px !important;
        border-left: 3px solid transparent !important;
        border-bottom: none !important;
        text-align: left !important;
        width: 100% !important;
    }
    #desktop-sidebar #sidebar-nav > a.sidebar-link:hover,
    #desktop-sidebar #sidebar-nav > a.sidebar-link.active,
    #desktop-sidebar #sidebar-nav > a.sidebar-link.active-home {
        border-left-color: #FFD700 !important;
        border-bottom-color: transparent !important;
        background: rgba(255,215,0,0.1) !important;
        color: #0f0f0e !important;
    }
    /* Game category links: large square cells — 3 per row */
    #desktop-sidebar #sidebar-game-cats .sidebar-link {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 12px 4px !important;
        font-size: 11px !important;
        gap: 6px !important;
        border-left: none !important;
        border-bottom: 2px solid transparent !important;
        text-align: center !important;
        width: 100% !important;
        min-height: 80px !important;
    }
    #desktop-sidebar #sidebar-game-cats .sidebar-link:hover,
    #desktop-sidebar #sidebar-game-cats .sidebar-link.active {
        border-left-color: transparent !important;
        border-bottom-color: #FFD700 !important;
        background: #fff !important;
        color: #0d0d0d !important;
        border-right: none !important;
    }
    /* 3-column grid for game categories */
    #desktop-sidebar #sidebar-game-cats {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 4px !important;
        padding: 6px 4px !important;
    }
    #desktop-sidebar #sidebar-game-cats .sidebar-cat-item {
        display: flex !important;
        flex-direction: column !important;
        min-width: 0 !important;
    }
    /* Hide submenu inside 3-col grid — panel handles content */
    #desktop-sidebar #sidebar-game-cats .sidebar-cat-submenu {
        display: none !important;
    }
    /* Category accordion links same treatment */
    #desktop-sidebar .sidebar-cat-item > .sidebar-link {
        flex-direction: column !important;
        align-items: center !important;
        padding: 12px 4px !important;
        font-size: 11px !important;
        gap: 6px !important;
        border-left: none !important;
        text-align: center !important;
        min-height: 80px !important;
    }
    #desktop-sidebar .sidebar-cat-arrow {
        display: none !important;
    }
    /* Larger icons inside 3-col game-cat grid */
    #desktop-sidebar #sidebar-game-cats .icon-box {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        border-radius: 10px !important;
    }
    #desktop-sidebar #sidebar-game-cats .icon-box svg {
        width: 24px !important;
        height: 24px !important;
    }
    /* Normal-sized icons for static nav links */
    #desktop-sidebar #sidebar-nav > a.sidebar-link .icon-box {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        border-radius: 10px !important;
    }
    #desktop-sidebar #sidebar-nav > a.sidebar-link .icon-box svg {
        width: 22px !important;
        height: 22px !important;
    }
    /* Tighter sidebar section divider */
    #desktop-sidebar .sidebar-section-divider {
        margin: 2px 0 !important;
    }
    /* 3-col grid: My Account, Referral, Affiliate */
    #desktop-sidebar .sidebar-nav-grid-3 {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 4px !important;
        padding: 4px !important;
    }
    /* 2-col grid: Bonus, Wallet — same column width as 3-col grid */
    #desktop-sidebar .sidebar-nav-grid-2 {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 4px !important;
        padding: 4px !important;
    }
    /* Card-style grid items: icon above, label below */
    #desktop-sidebar .sidebar-nav-grid-3 > a.sidebar-link,
    #desktop-sidebar .sidebar-nav-grid-2 > a.sidebar-link {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 12px 4px !important;
        font-size: 11px !important;
        gap: 6px !important;
        border-left: none !important;
        border-bottom: 2px solid transparent !important;
        border-right: none !important;
        text-align: center !important;
        width: 100% !important;
        min-height: 80px !important;
        background: rgba(255,255,255,0.04) !important;
        border-radius: 10px !important;
    }
    #desktop-sidebar .sidebar-nav-grid-3 > a.sidebar-link:hover,
    #desktop-sidebar .sidebar-nav-grid-3 > a.sidebar-link.active,
    #desktop-sidebar .sidebar-nav-grid-2 > a.sidebar-link:hover,
    #desktop-sidebar .sidebar-nav-grid-2 > a.sidebar-link.active {
        border-left-color: transparent !important;
        border-bottom-color: #FFD700 !important;
        background: rgba(255,215,0,0.12) !important;
        color: #FFD700 !important;
    }
    /* Larger icons inside the card grids */
    #desktop-sidebar .sidebar-nav-grid-3 > a.sidebar-link .icon-box,
    #desktop-sidebar .sidebar-nav-grid-2 > a.sidebar-link .icon-box {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        border-radius: 10px !important;
    }
    #desktop-sidebar .sidebar-nav-grid-3 > a.sidebar-link .icon-box svg,
    #desktop-sidebar .sidebar-nav-grid-2 > a.sidebar-link .icon-box svg {
        width: 24px !important;
        height: 24px !important;
    }
    /* Install-app block — compact single-row on mobile */
    #desktop-sidebar .sidebar-install-app {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 8px 10px !important;
        margin: 4px 0 0 0 !important;
    }
    #desktop-sidebar .sidebar-install-app-icon {
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        flex-shrink: 0 !important;
    }
    #desktop-sidebar .sidebar-install-app-icon svg {
        width: 17px !important;
        height: 17px !important;
    }
    #desktop-sidebar .install-title {
        font-size: 11px !important;
    }
    #desktop-sidebar .install-badge {
        font-size: 9px !important;
        padding: 1px 4px !important;
    }
    /* Livechat block — compact single-row on mobile */
    #desktop-sidebar .sidebar-livechat {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 8px 10px !important;
        margin: 10px 0 4px 0 !important;
    }
    #desktop-sidebar .sidebar-livechat-icon {
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        flex-shrink: 0 !important;
    }
    #desktop-sidebar .sidebar-livechat-icon svg {
        width: 16px !important;
        height: 16px !important;
    }
    #desktop-sidebar .lc-title { font-size: 11px !important; }
    #desktop-sidebar .lc-sub { font-size: 9px !important; }
    #desktop-sidebar .sidebar-livechat-badge { font-size: 8px !important; padding: 2px 4px !important; }
}

/* Hide bottom tabbar on Desktop */
@media (min-width: 768px) {
    .tabbar__container {
        display: none !important;
    }
}

/* Enhanced Vant Tabs Content Design */
.van-tabs__content,
.fish .container .all {
    background: transparent !important; /* Deep Yellow */
    padding: 0px !important;
    border-radius: 0 !important; /* Square Shape */
    /* box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); */
    position: relative;
    overflow: visible !important;
    color: #09022d; /* Dark text for contrast */
    min-height: 200px;
    margin-top: 0px !important; /* Spacing from tabs */
}

.container {
    background: transparent !important;  /* Deep Dark Blue */
    padding: 0px !important; /* No padding */
    border-radius: 0 !important; /* Square Shape */
    /* box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); */
    position: relative;
    overflow: visible !important;
    color: #333333; /* Dark text for contrast */
    min-height: 200px;
    margin-top: 0px; /* Spacing from tabs */
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    align-items: flex-start !important; /* Prevent stretching */
}

/* Wallet Container Override - Reset Generic Container Styles */
.wallet-container .container {
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    position: static !important;
    overflow: visible !important;
    color: inherit !important;
    min-height: auto !important;
    margin-top: 0 !important;
    display: block !important;
    flex-wrap: nowrap !important;
    justify-content: normal !important;
    gap: 0 !important;
    align-items: normal !important;
}

.wallet-container .container::after {
    content: none !important;
    display: none !important;
}

/* Reset inner items that might inherit game card styles */
.wallet-container .container .slot-img-wrapper,
.wallet-container {
    background: transparent !important;
    padding: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    aspect-ratio: auto !important;
    display: inline-block !important;
    margin: 0 !important;
    overflow: visible !important;
    transition: none !important;
}

.wallet-container .container .slot-img-wrapper:hover,
.wallet-container .slot-img-wrapper:hover {
    transform: none !important;
    box-shadow: none !important;
    z-index: auto !important;
}

/* Hide Care/Heart Icon in Wallet */
.wallet-container .care-icon,
.wallet-container .container .care-icon {
    display: none !important;
}

/* Reset Image Styles in Wallet */
.wallet-container .container img,
.wallet-container .container .slot-img-wrapper img,
.wallet-container img {
    width: auto !important;
    height: auto !important;
    border-radius: 0 !important;
    object-fit: contain !important;
    background: transparent !important;
    border: none !important;
}

/* Reset Link Styles in Wallet */
.wallet-container .container a,
.wallet-container .container .slot-img-wrapper a,
.wallet-container a {
    width: auto !important;
    height: auto !important;
    border-radius: 0 !important;
    background: transparent !important;
    text-decoration: none !important;
}

/* --- Fix Promotion/Affiliate Page Container Color --- */
.container[data-v-6cf5705a] {
    background-color: transparent !important;
    background-image: none !important;
    padding-top: 0 !important;
}

.container[data-v-6cf5705a] .info_content {
    background-color: transparent !important;
    box-shadow: none !important;
}

/* Remove the pseudo-element blocking the bottom */
.container[data-v-6cf5705a]:after {
    display: none !important;
}

/* --- Fix Promotion Share Container --- */
.promotionShare__container {
    background: transparent !important;
    padding-top: 20px !important;
}

.promotionShare__container .van-nav-bar {
    background-color: transparent !important;
}

.promotionShare__container .van-nav-bar .van-icon,
.promotionShare__container .van-nav-bar .van-nav-bar__title {
    color: #ffffff !important;
}

.promotionShare__container .promotionShare__container-tips {
    color: #ffffff !important;
}

.promotionShare__container .promotionShare__container-slogan p {
    color: #ffffff !important;
}

/* Ensure pointer events are enabled for dragging */
.promotionShare__container .swiper-wrapper {
    pointer-events: auto !important;
}
@media screen and (max-width: 767px) {
    .swiper {
        height: 40% !important;
    }
}
.swiper {
    margin-top: 5px !important;
    border: 1px solid #eede05 !important;
    border-radius: 5px !important;
    box-sizing: border-box !important;
    position: relative !important;
    z-index: 0 !important;
    }


/* --- Fix Notice Bar on Desktop --- */


/* --- Fix Wallet Buttons (Deposit, Withdraw, etc.) --- */
.wallet-container .userDetail {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 10px !important;
    margin-top: 15px !important;
    width: 100% !important;
}

.wallet-container .userDetail > div {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
}

.wallet-container .userDetail .imgD {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1/1 !important;
    background: transparent !important;
    margin-bottom: 0 !important;
    border-radius: 16px !important; /* Matches game items */
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.wallet-container .userDetail .imgD img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* Ensure image fills the box */
    border-radius: 0 !important;
}

/* Text Inside the Box */
.wallet-container .userDetail span {
    position: absolute !important;
    bottom: 8px !important;
    left: 0 !important;
    width: 100% !important;
    text-align: center !important;
    color: #ffffff !important;
    font-size: 11px !important; /* Small text to fit */
    font-weight: 700 !important;
    text-shadow: 0 1px 3px rgba(0,0,0,0.8) !important; /* Readability */
    z-index: 10 !important;
    pointer-events: none !important;
    line-height: 1.1 !important;
    padding: 0 2px !important;
    white-space: normal !important; /* Allow wrapping if needed */
}

/* Animated modifier */
.van-tabs__content--animated,
.fish .container .all,
.container {
    transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
    will-change: transform;
}

/* Add a subtle shine effect */
/* Removed to eliminate top horizontal line
.van-tabs__content::after,
.fish .container .all::after,
.container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(4, 1, 36, 0.5), transparent);
}
*/

/* Responsive adjustments */
@media (max-width: 600px) {
    .van-tabs__content {
        padding: 0px !important;
        margin-top: 0px !important;
        border-radius: 5px;
    }
}

/* --- Attractive Slots Picture Design --- */
.slotsPic,
.fish .container {
    position: relative !important; /* For absolute positioned heart icon */
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    padding: 10px !important;
    background: transparent !important;
    border-radius: 16px;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.5);
    margin: 10px 0;
    overflow: visible !important; /* Allow hover effects and care icons to pop out */
    max-height: none !important; /* Override restrictive height */
}

.hide-when-empty {
    display: none !important;
}
.hide-when-empty img {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* Auto-hide empty slot wrappers inside slotsPic when there is no valid img */
.slotsPic .slot-img-wrapper:not(:has(img)),
.slotsPic .slot-img-wrapper:has(img[src=""]),
.slotsPic .slot-img-wrapper:has(img[src="#"]),
.slotsPic .slot-img-wrapper:has(img[src="about:blank"]) {
    display: none !important;
}


/* Ensure parent fish container allows overflow for hover effects */
.fish {
    overflow: visible !important;
}

.okwin2Home_flash {
    /* Layout matching slotsPic grid */
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    overflow: visible !important;
    max-height: none !important;

    /* Visuals matching .van-tabs__content (Yellow Design) */
    background: linear-gradient(145deg, #020543, #08013a);
    border-radius: 25px 0 25px 0 !important; /* Asymmetric Leaf Shape */
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    color: #333333;
    min-height: 200px;
    position: relative;
    
    /* Animation from .van-tabs__content--animated */
    transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
    will-change: transform;
}

/* Shine effect for okwin2Home_flash */
.okwin2Home_flash::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
}

/* Inner Container Grid Layout */
.okwin2Home_flash .container {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    width: 100% !important;
    overflow: visible !important;
    border-radius: 25px 0 25px 0 !important; /* Asymmetric Leaf Shape */
}

/* Update: Target the wrapper instead of img for layout */
.slotsPic .slot-img-wrapper,
.fish .container .slot-img-wrapper,
.container .slot-img-wrapper {
    position: relative;
    display: inline-block;
    aspect-ratio: 0.8 !important;
    margin-bottom: 0;
    border-radius: 25px 0 25px 0 !important; /* Asymmetric Leaf Shape */
    border: 3px solid #ff0000 !important; /* Bold red border */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5), 
                inset 0 1px 1px rgba(255, 255, 255, 0.4),
                0 0 15px rgba(255, 0, 0, 0.3) !important; /* Red glow */
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    background: linear-gradient(135deg, #ff0000 0%, #b71c1c 100%); /* Red gradient background */
    padding: 4px; /* Space between border and image */
    overflow: visible !important; /* Allow care icon to extend outside */
    cursor: pointer;
    box-sizing: border-box !important; /* Include border and padding in width */
}

/* Ensure wrappers and containers have position relative for heart icon */
.slotsPic > *,
.slotsPic .slot-img-wrapper,
.fish .container > *,
.fish .container .slot-img-wrapper,
.container .slot-img-wrapper {
    position: relative !important;
}

/* Heart Icon on Each Card - Connected to Border */
.slotsPic > *::after,
.slotsPic .slot-img-wrapper::after,
.fish .container > *::after,
.fish .container .slot-img-wrapper::after,
.container .slot-img-wrapper::after {
    content: '♥';
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 20;
    font-size: 24px;
    color: rgba(255, 255, 255, 0.95);
    background: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    width: 36px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 2px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
    pointer-events: auto;
}

/* Heart Icon Green Fill on Hover */
.slotsPic > *:hover::after,
.slotsPic .slot-img-wrapper:hover::after,
.fish .container > *:hover::after,
.fish .container .slot-img-wrapper:hover::after,
.container .slot-img-wrapper:hover::after {
    color: #00ff00;
    background: rgba(0, 200, 0, 0.3);
    border-color: #00ff00;
    box-shadow: 0 4px 16px rgba(0, 255, 0, 0.6);
    transform: scale(1.1);
}

/* Active/Favorited State - Green Filled Heart */
.slotsPic > *.favorited::after,
.slotsPic .slot-img-wrapper.favorited::after,
.fish .container > *.favorited::after,
.fish .container .slot-img-wrapper.favorited::after,
.container .slot-img-wrapper.favorited::after {
    color: #00ff00;
    background: rgba(0, 200, 0, 0.4);
    border-color: #00ff00;
    animation: heartbeat 1.2s ease-in-out infinite;
}

/* Heartbeat Animation for Favorited Games */
@keyframes heartbeat {
    0%, 100% { transform: scale(1); }
    10%, 30% { transform: scale(1.1); }
    20% { transform: scale(0.95); }
}

/* Ensure img fills the wrapper */
.slotsPic img,
.slotsPic .slot-img-wrapper img,
.slotsPic .slot-img-wrapper a,
.okwin2Home_flash img,
.okwin2Home_flash .container img,
.fish .container img,
.fish .container .slot-img-wrapper img,
.fish .container .slot-img-wrapper a {
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
    border-radius: 20px 0 20px 0 !important; /* Matches wrapper radius - padding */
    display: block !important;
}

/* Direct images in slotsPic (fallback before JavaScript wraps them) */
.slotsPic > img,
.slotsPic > a > img {
    border-radius: 25px 0 25px 0 !important;
    border: 3px solid #ff0000 !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5), 
                0 0 15px rgba(255, 0, 0, 0.3) !important;
}

/* 
NOTE: Care icons are added dynamically via JavaScript (custom-ui.js)
Each .slot-img-wrapper will have a .care-icon div injected with heart SVG
The JavaScript wraps images and adds the care icon to each item
*/

/* --- Tabbar Container & Items (Moved from index.css) --- */
.tabbar__container {
    position: fixed;
    bottom: 0;
    left: 50%;
    display: flex;
    align-items: flex-end;
    width: 10rem;
    transform: translate(-50%);
    height: 2.2rem;
    font-size: .29333rem;
    background: #010b42 !important;
    box-shadow: 0 -.02667rem #4b3c0b;
    transition: background .2s ease, box-shadow .2s ease, filter .2s ease;
    cursor: pointer;
    z-index: 100;
}

.tabbar__container:hover {
    background: #04248d;
    box-shadow: 0 -.10667rem #8a6f13;
}

.tabbar__container-item {
    flex: 1;
    height: 100%;
    padding-top: 1.06667rem;
    color: var(--norm_secondary-color);
    text-align: center;
    background-repeat: no-repeat;
    background-size: .53333rem;
    background-position: center .32rem;
}

.tabbar__container-item.promotion {
    background-image: url(/assets/tabbar/promotion.png);
}

.tabbar__container-item.activity {
    background-image: url(/assets/tabbar/activity.png);
}

.tabbar__container-item.home {
    position: relative;
    top: -.4rem;
    background-position: center .18667rem;
    color: transparent !important;
    padding-top: 1.54667rem;
    background-size: 1.76rem 1.94667rem;
    background-image: url(/assets/tabbar/home.png);
}

.tabbar__container-item.wallet {
    background-image: url(/assets/tabbar/wallet.png);
}

.tabbar__container-item.turntableBg {
    background-image: var(--3442ba73-getInvitedWheelImgUrl);
    background-size: cover;
    width: 2.04rem;
    height: 2.04rem;
    position: relative;
    top: -.8rem;
    font-size: .34667rem;
    padding-top: 1.68rem;
    font-weight: 600;
}

.tabbar__container-item.main {
    background-image: url(/assets/tabbar/main.png);
}

.tabbar__container-item.active:not(.home) {
    background-size: 1.06667rem 1.2rem;
    color: var(--main-color);
    padding-top: .98667rem;
}

.tabbar__container-item.active:not(.home).promotion {
    background-image: url(/assets/tabbar/promotion.png);
}

.tabbar__container-item.active:not(.home).activity {
    background-image: url(/assets/tabbar/activity.png);
}

.tabbar__container-item.active:not(.home).wallet {
    background-image: url(/assets/tabbar/wallet.png);
}

.tabbar__container-item.active:not(.home).main {
    background-image: url(/assets/tabbar/main.png);
}

.isTurntable .home {
    top: 0;
    height: 100%;
    background-size: 1.06667rem;
    background-position: center .32rem;
    padding-top: 1.06667rem;
    background-image: url(/assets/tabbar/home.png) !important;
}

.isTurntable .active.home {
    background-size: 1.06667rem 1.2rem;
    background-image: url(/assets/tabbar/home.png) !important;
}

@media screen and (max-width: 500px) {
    .tabbar__container {
        width: 100%;
        left: 0;
        transform: translate(0);
    }

    html:lang(ar) .tabbar__container {
        left: unset;
        right: 0;
    }
}

@media (min-width: 768px) {
    .tabbar__container {
        position: fixed;
        width: 100%;
        left: 0%;
        transform: none;
        height: 2.2rem;
        z-index: 1001;
    }
}

/* --- Tabbar Item Hover Effects --- */
.tabbar__container-item {
    cursor: pointer;
    transition: all 0.2s ease;
}

.tabbar__container-item:hover {
    color: #ffc107 !important; /* Yellow text */
}

/* Swap icons on hover for known items */
.tabbar__container-item.promotion:hover {
    background-image: url(/assets/tabbar/promotion.png) !important;
}
.tabbar__container-item.activity:hover {
    background-image: url(/assets/tabbar/activity.png) !important;
}
.tabbar__container-item.wallet:hover {
    background-image: url(/assets/tabbar/wallet.png) !important;
}
.tabbar__container-item.main:hover {
    background-image: url(/assets/tabbar/main.png) !important;
}

/* For Home, apply brightness filter since active image varies or is unknown */
.tabbar__container-item.home:hover {
    filter: brightness(1.2);
    text-shadow: 0 0 5px rgba(255, 193, 7, 0.5); /* Add glow to text */
}

body .tabbar__container-item:nth-of-type(3) .svg-icon {
    color: var(--text_color_L4);
}

/* --- Index/Home Page Custom Tabbar Styles --- */
/* These styles were originally inline in index.html */
.tabbar__container {
    background: #020f53 !important;
    border-top: 2px solid #ae4106 !important; /* Deep Yellow Border */
    border-top-left-radius: 20px !important;
    border-top-right-radius: 20px !important;
    box-shadow: 0 -10px 30px rgba(2, 1, 75, 0.5) !important;
    padding-bottom: 5px !important;
    z-index: 9999 !important;
}

.tabbar__container .tabbar__container-item {
    transition: transform 0.3s ease, filter 0.3s ease !important;
}

.tabbar__container .tabbar__container-item.active {
    transform: translateY(-8px);
    filter: drop-shadow(0 4px 6px rgba(243, 227, 5, 0.4));
    color: #FFC107 !important;
}

/* --- Bonus Page Custom Tabbar Styles --- */
/* These styles were originally inline in bonus/bonus.php */
.bonus-page .tabbar__container {
    background: linear-gradient(180deg, #2c3e50 0%, #000000 100%) !important;
    border-top: 3px solid #FFC107 !important;
    border-top-left-radius: 20px !important;
    border-top-right-radius: 20px !important;
    box-shadow: 0 -10px 30px rgba(0,0,0,0.5) !important;
    padding: 10px 0;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: auto !important; /* Override base width */
    z-index: 9999 !important;
    display: flex;
    justify-content: space-around;
    align-items: center;
    transform: none !important; /* Override base transform */
}

.bonus-page .tabbar__container .tabbar__container-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: white;
    font-size: 0.8rem;
    transition: transform 0.3s ease, filter 0.3s ease !important;
    background: none !important; /* Override base background image */
    padding-top: 0 !important; /* Override base padding */
    height: auto !important;
}

.bonus-page .tabbar__container .tabbar__container-item i {
    font-size: 1.2rem;
    margin-bottom: 4px;
}

.bonus-page .tabbar__container .tabbar__container-item.active {
    transform: translateY(-8px);
    filter: drop-shadow(0 4px 6px rgba(255, 193, 7, 0.4));
    color: #FFC107 !important;
}

/* Center item special styling for Bonus Page */
.bonus-page .tabbar__container .tabbar__container-item.center-item {
    transform: translateY(-20px);
    background: linear-gradient(135deg, #FFC107 0%, #FF9800 100%) !important;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    justify-content: center;
    border: 4px solid #1a1a1a;
    box-shadow: 0 -5px 15px rgba(255, 193, 7, 0.4);
}

.bonus-page .tabbar__container .tabbar__container-item.center-item i {
    font-size: 1.5rem;
    margin-bottom: 0;
    color: #000;
}

.bonus-page .tabbar__container .tabbar__container-item.center-item span {
    display: none;
}


/* Fix for container images to show fully */

.container .slot-img-wrapper img,
.container .slot-img-wrapper a {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    border-radius: 17px !important;
    display: block;
    border: none !important;
    background-color: transparent;
}

/* Specific reset for a tag to remove default link styles if needed */
.slotsPic .slot-img-wrapper a,
.fish .container .slot-img-wrapper a,
.container .slot-img-wrapper a {
    text-decoration: none;
    padding: 0;
    margin: 0;
}

/* --- TABS BTN IMAGES --- */
/* Add images to elements with class "tabs-btn" */

.tabs-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0px;
    font-size: 0 !important;
    color: transparent !important;
    text-shadow: none !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    transform: none !important;
    border-radius: 12px !important;
    width: 90px !important;
    height: 60px !important;
    padding: 8px !important;
    box-sizing: border-box !important;
    background-color: linear-gradient(135deg, rgba(4, 22, 102, 0.95) 0%, rgba(45, 2, 87, 0.95) 50%, rgba(52, 1, 59, 0.95) 100%) !important;
    box-shadow: 
        0 2px 8px rgba(0, 0, 0, 0.3),
        inset 0 1px 1px rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
}

.tabs-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 
        0 4px 12px rgba(0, 0, 0, 0.4),
        inset 0 1px 1px rgba(255, 255, 255, 0.15) !important;
    background-color: #232942 !important;
}

.van-tab--active .tabs-btn {
    background-color: linear-gradient(135deg, rgba(3, 13, 58, 0.95) 0%, rgba(29, 2, 55, 0.95) 50%, rgba(27, 1, 31, 0.95) 100%) !important;
    border: 1px solid rgba(255, 193, 7, 0.3) !important;
    box-shadow: 
        0 4px 12px rgba(255, 193, 7, 0.2),
        inset 0 1px 1px rgba(255, 255, 255, 0.2) !important;
}

/* Remove the ::before pseudo-element as we're using background-image */
.tabs-btn::before {
    display: none !important;
}


.tabs-btn .van-tab__text,
.tabs-btn span,
.tabs-btn p,
.tabs-btn i,
.tabs-btn b,
.tabs-btn em,
.tabs-btn small {
    display: none !important;
}

/* Background images for provided logos */
.van-tab:nth-child(1) .tabs-btn { 
    background-image: url('/assets/slotspic/jili.png'); 
}
.van-tab:nth-child(2) .tabs-btn { 
    background-image: url('/assets/slotspic/pgsoft.png'); 
}
.van-tab:nth-child(3) .tabs-btn { 
    background-image: url('/assets/slotspic/3Oaks.png'); 
}
.van-tab:nth-child(4) .tabs-btn { 
    background-image: url('/assets/slotspic/playson.png'); 
}
.van-tab:nth-child(5) .tabs-btn { 
    background-image: url('/assets/slotspic/cq9.png'); 
}
.van-tab:nth-child(6) .tabs-btn { 
    background-image: url('/assets/slotspic/jdb.png'); 
}
.van-tab:nth-child(7) .tabs-btn { 
    background-image: url('/assets/slotspic/pragmatic.png'); 
}
.van-tab:nth-child(8) .tabs-btn { 
    background-image: url('/assets/slotspic/playtech.png'); 
}
.van-tab:nth-child(9) .tabs-btn { 
    background-image: url('/assets/slotspic/playngo.png'); 
}
.van-tab:nth-child(10) .tabs-btn { 
    background-image: url('/assets/slotspic/redtiger.png'); 
}
.van-tab:nth-child(11) .tabs-btn { 
    background-image: url('/assets/slotspic/Evoplay.png'); 
}
.van-tab:nth-child(12) .tabs-btn { 
    background-image: url('/assets/slotspic/mg.png'); 
}

/* Enhanced styling for specific provider colors */
.van-tab:nth-child(1) .tabs-btn { background-color: rgb(45, 6, 83) !important; }
.van-tab:nth-child(2) .tabs-btn { background-color: rgb(45, 6, 83) !important; }
.van-tab:nth-child(3) .tabs-btn { background-color: rgb(45, 6, 83) !important; }
.van-tab:nth-child(4) .tabs-btn { background-color: rgb(45, 6, 83) !important; }
.van-tab:nth-child(5) .tabs-btn { background-color: rgb(45, 6, 83) !important; }
.van-tab:nth-child(6) .tabs-btn { background-color: rgb(45, 6, 83) !important; }
.van-tab:nth-child(7) .tabs-btn { background-color: rgb(45, 6, 83) !important; }
.van-tab:nth-child(8) .tabs-btn { background-color: rgb(45, 6, 83) !important; }
.van-tab:nth-child(9) .tabs-btn { background-color: rgb(45, 6, 83) !important; }
.van-tab:nth-child(10) .tabs-btn { background-color: rgb(45, 6, 83) !important; }
.van-tab:nth-child(11) .tabs-btn { background-color: rgb(45, 6, 83) !important; }
.van-tab:nth-child(12) .tabs-btn { background-color: rgb(45, 6, 83) !important; }


/* Hover effects on wrapper - Enhanced */
.slotsPic .slot-img-wrapper:hover,
.fish .container .slot-img-wrapper:hover,
.container .slot-img-wrapper:hover {
    transform: translateY(-8px) scale(1.08); /* Lift up and grow */
    box-shadow: 0 20px 40px rgba(255, 0, 0, 0.5), /* Red glow */
                0 0 20px rgba(255, 0, 0, 0.4),
                inset 0 1px 2px rgba(255, 255, 255, 0.6) !important;
    border-color: #ff4444 !important; /* Brighter red on hover */
    z-index: 100;
    filter: brightness(1.1); /* Slightly brighter */
}

/* Care Icon - Heart on Each Item */
.care-icon {
    position: absolute;
    top: -10px; /* Extend above the border */
    right: -10px; /* Extend to the right of border */
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.95); /* White background for visibility */
    border: 2px solid #ff0000; /* Red border around icon */
    border-radius: 50%; /* Circular background */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 20;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Shadow for depth */
}

.care-icon svg {
    width: 24px; /* Icon size */
    height: 24px;
    fill: rgba(255, 0, 0, 0.2); /* Light red fill */
    stroke: #ff0000; /* Red stroke */
    stroke-width: 2px;
    transition: all 0.3s ease;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

/* Hover Effects */
.care-icon:hover {
    transform: scale(1.2) rotate(-10deg); /* Grow and tilt on hover */
    background: rgba(255, 0, 0, 0.1); /* Light red background */
    border-color: #ff0000;
}

/* Fill with solid red on hover or active */
.care-icon:hover svg,
.slotsPic .slot-img-wrapper:hover .care-icon svg,
.fish .container .slot-img-wrapper:hover .care-icon svg,
.container .slot-img-wrapper:hover .care-icon svg,
.care-icon.active svg {
    fill: #ff0000; /* Solid red fill */
    stroke: #ff0000;
    filter: drop-shadow(0 0 8px rgba(255, 0, 0, 0.8)); /* Strong red glow */
}

.care-icon.active {
    transform: scale(1.2);
    background: rgba(255, 0, 0, 0.15);
    animation: heartbeat 1s ease-in-out infinite; /* Pulse animation */
}

/* Heartbeat animation for active/liked items */
@keyframes heartbeat {
    0%, 100% { transform: scale(1.2); }
    50% { transform: scale(1.3); }
}

/* Game Name Display - Added for User Request */
.slot-img-wrapper {
    position: relative !important;
    margin-bottom: 30px !important;
    overflow: visible !important;
    border-radius: 25px 0 25px 0 !important;
}

.slot-img-wrapper .game-name {
    display: block !important;
    position: relative !important;
    margin-top: 5px !important;
    width: 100% !important;
    height: auto !important;
    min-height: 15px !important;
    padding-left: 0 !important;
    text-align: left !important;
    background: transparent !important;
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    z-index: 100 !important;
    pointer-events: none !important;
    letter-spacing: 0.5px !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Responsive Widths for Wrapper */
/* Mobile: 4 items per row with 12px gaps (3 gaps = 36px total) */
@media (max-width: 767px) {
    .slotsPic .slot-img-wrapper,
    .fish .container .slot-img-wrapper {
        width: calc(33.333% - 8px) !important;
        aspect-ratio: 0.8;
        border-radius: 25px 0 25px 0 !important; /* Asymmetric Leaf Shape */
        height: auto !important; /* 3 items per row */
    }
    
    /* Fallback for direct img if JS fails or loads late */
    .slotsPic > img,
    .okwin2Home_flash > img,
    .okwin2Home_flash .container > img,
    .fish .container > img {
        width: calc(33.333% - 8px) !important;
        aspect-ratio: 0.8;
        border-radius: 25px 0 25px 0 !important; /* Asymmetric Leaf Shape */
        height: auto !important; /* Ensure aspect ratio is respected */
    }

    /* Fix for container mobile width (3 items per row with 12px gaps = 24px total) */
    .container .slot-img-wrapper,
    .container > img {
        width: calc(33.333% - 8px) !important; /* (100% - 24px) / 3 */
    }
    
    /* Mobile: Larger care icon for better touch */
    .care-icon {
        width: 36px;
        height: 36px;
        top: -8px;
        right: -8px;
    }
    
    .care-icon svg {
        width: 20px;
        height: 20px;
    }
}

/* Desktop: 6 items per row with 12px gaps (5 gaps = 60px total) */
@media (min-width: 768px) {
    .okwin2Home_popular .container > img {
        width: calc(16.666% - 10px) !important; /* (100% - 60px) / 6 */
        aspect-ratio: 0.8 !important; /* Much shorter height on desktop */
        border-radius: 25px 0 25px 0 !important;
    }
    
    .slotsPic .slot-img-wrapper {
        width: calc(16.666% - 10px) !important; /* (100% - 60px) / 6 */
        aspect-ratio: 0.8 !important; /* Much shorter height on desktop */
    }
    
    .fish .container .slot-img-wrapper,
    .container .slot-img-wrapper {
        width: calc(16.666% - 10px) !important; /* (100% - 60px) / 6 */
        aspect-ratio: 0.8 !important; /* Much shorter height on desktop */
    }
    
    .slotsPic > img {
        width: calc(16.666% - 10px) !important;
        aspect-ratio: 0.8 !important; /* Much shorter height on desktop */
        border-radius: 25px 0 25px 0 !important; /* Asymmetric Leaf Shape */
    }
    
    .okwin2Home_flash > img,
    .okwin2Home_flash .container > img,
    .fish .container > img,
    .container > img {
        width: calc(16.666% - 10px) !important;
        aspect-ratio: 0.8 !important; /* Much shorter height on desktop */
        border-radius: 25px 0 25px 0 !important; /* Asymmetric Leaf Shape */
    }
    
    /* Desktop: Standard care icon size */
    .care-icon {
        width: 40px;
        height: 40px;
        top: -10px;
        right: -10px;
    }
    
    .care-icon svg {
        width: 24px;
        height: 24px;
    }
    
    /* Desktop: Enhanced hover effects */
    .care-icon:hover {
        transform: scale(1.25) rotate(-15deg);
    }
}

/* --- Game Type List Design (Icon Top, Text Below) - Modern Redesign --- */
.gameTypeList {
   display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    padding: 4px 8px !important;
    padding-left: 8px !important;
    background: linear-gradient(135deg, rgba(58, 1, 13, 0.95) 0%, rgba(50, 6, 94, 0.95) 50%, rgba(46, 2, 52, 0.95) 100%) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    box-shadow: none !important;
    margin: 3px 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    position: relative !important;
    z-index: 1 !important;
    overflow: visible !important;
}

/* Animated Gradient Border Effect */
.gameTypeList::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 22px;
    padding: 2px;
    background: linear-gradient(
        45deg,
        #FFD700,
        #FFA500,
        #FF6B35,
        #C41E3A,
        #8B00FF,
        #4169E1,
        #00CED1,
        #FFD700
    );
    background-size: 300% 300%;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    animation: rotateBorder 6s linear infinite;
    z-index: -1 !important;
    opacity: 0.6;
}

@keyframes rotateBorder {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Inner Background with subtle pattern */
.gameTypeList::after {
    content: '';
    position: absolute;
    inset: 0;
    background: 
        radial-gradient(circle at 20% 50%, rgba(255, 215, 0, 0.03) 0%, transparent 50%),
        radial-gradient(circle at 80% 50%, rgba(65, 105, 225, 0.03) 0%, transparent 50%);
    border-radius: 20px;
    z-index: 0 !important;
    pointer-events: none;
}

/* Ensure content sits on top */
.gameTypeList > * {
    position: relative !important;
    z-index: 2 !important;
}

/* Child items - Modern Card Design */
.gameTypeList > div, 
.gameTypeList > a,
.gameTypeList .item {
    border-radius: 14px !important;
    overflow: visible !important;
    box-shadow: none !important;
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    background: linear-gradient(135deg, rgb(13 40 159 / 95%) 0%, rgb(54 12 97 / 95%) 50%, rgb(44 4 49 / 95%) 100%) !important;
    backdrop-filter: blur(8px) !important;
    padding: 6px 4px !important;
    position: relative !important;
    min-width: 58px;
    min-height: 58px;
    aspect-ratio: 1/1;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5) !important;
    line-height: 1.2 !important;
    cursor: pointer !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* Glow effect on card */
.gameTypeList > div::after,
.gameTypeList > a::after,
.gameTypeList .item::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 16px;
    background: radial-gradient(circle at center, rgba(255, 215, 0, 0.1) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 1;
}

.gameTypeList > div:hover::after,
.gameTypeList > a:hover::after,
.gameTypeList .item:hover::after {
    opacity: 1;
}

/* Smooth entrance animation */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(15px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.gameTypeList > div,
.gameTypeList > a,
.gameTypeList .item {
    animation: fadeInUp 0.5s ease-out backwards;
}

/* Staggered animation delay for each item */
.gameTypeList > div:nth-child(1), .gameTypeList > a:nth-child(1), .gameTypeList .item:nth-child(1) {
    animation-delay: 0.05s;
}
.gameTypeList > div:nth-child(2), .gameTypeList > a:nth-child(2), .gameTypeList .item:nth-child(2) {
    animation-delay: 0.1s;
}
.gameTypeList > div:nth-child(3), .gameTypeList > a:nth-child(3), .gameTypeList .item:nth-child(3) {
    animation-delay: 0.15s;
}
.gameTypeList > div:nth-child(4), .gameTypeList > a:nth-child(4), .gameTypeList .item:nth-child(4) {
    animation-delay: 0.2s;
}
.gameTypeList > div:nth-child(5), .gameTypeList > a:nth-child(5), .gameTypeList .item:nth-child(5) {
    animation-delay: 0.25s;
}
.gameTypeList > div:nth-child(6), .gameTypeList > a:nth-child(6), .gameTypeList .item:nth-child(6) {
    animation-delay: 0.3s;
}
.gameTypeList > div:nth-child(7), .gameTypeList > a:nth-child(7), .gameTypeList .item:nth-child(7) {
    animation-delay: 0.35s;
}

/* Active State for Game Type Items */
.gameTypeList > div.active, 
.gameTypeList > a.active,
.gameTypeList .item.active {
    background: linear-gradient(135deg, rgba(3, 125, 70, 0.95) 0%, rgba(6, 123, 90, 0.95) 50%, rgba(3, 110, 90, 0.95) 100%) !important;
    box-shadow: none !important;
    border: 2px solid rgba(40, 167, 69, 0.8) !important;
    transform: translateY(-2px) scale(1.03) !important;
    z-index: 10 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
}

.gameTypeList > div.active::after,
.gameTypeList > a.active::after,
.gameTypeList .item.active::after {
    opacity: 1 !important;
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.2) 0%, transparent 70%);
}

.gameTypeList > div.active::before,
.gameTypeList > a.active::before,
.gameTypeList .item.active::before {
    transform: scale(1.1) !important;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)) !important;
}

/* Images inside gameTypeList - HIDDEN */
.gameTypeList img {
    display: none !important;
}

/* Base Icon (::before) */
.gameTypeList > div::before, 
.gameTypeList > a::before,
.gameTypeList .item::before {
    content: '';
    display: block;
    width: 26px !important;
    height: 26px !important;
    margin-bottom: 3px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3)) !important;
    z-index: 10 !important;
    position: relative !important;
}

/* --- Specific Icons (Gradient & Colorful) --- */

/* 1. Slots (Red Gradient 7) */
.gameTypeList > div:nth-child(1)::before, 
.gameTypeList > a:nth-child(1)::before, 
.gameTypeList .item:nth-child(1)::before {
    background-image: url('/assets/svg/slots_a-de9dd5ee.svg');
}

/* 2. Casino (Purple Gradient Dice) */
.gameTypeList > div:nth-child(2)::before, 
.gameTypeList > a:nth-child(2)::before, 
.gameTypeList .item:nth-child(2)::before {
    background-image: url('/assets/svg/card_a-1da2e03a.svg');
}
/* 3. Sports (Football Icon) */
.gameTypeList > div:nth-child(3)::before, 
.gameTypeList > a:nth-child(3)::before, 
.gameTypeList .item:nth-child(3)::before {
    background-image: url('/assets/svg/sports_a-5313dd33.svg');
}

/* 4. Fishing (Orange/Red Fish) */
.gameTypeList > div:nth-child(4)::before, 
.gameTypeList > a:nth-child(4)::before, 
.gameTypeList .item:nth-child(4)::before {
    background-image: url('/assets/svg/icon_fish-80dac6e1.svg');
}

/* 5. Crash (Graph/Rocket) */
.gameTypeList > div:nth-child(5)::before, 
.gameTypeList > a:nth-child(5)::before, 
.gameTypeList .item:nth-child(5)::before {
    background-image: url('/assets/svg/crash.png');
}

/* 6. Minigames (Pink/Blue Puzzle) */
.gameTypeList > div:nth-child(6)::before, 
.gameTypeList > a:nth-child(6)::before, 
.gameTypeList .item:nth-child(6)::before {
    background-image: url('/assets/svg/icon_mini-9bd4090f.svg');
}

/* 7. PVC (Card Icon) */
.gameTypeList > div:nth-child(7)::before, 
.gameTypeList > a:nth-child(7)::before, 
.gameTypeList .item:nth-child(7)::before {
    background-image: url('/assets/svg/icon_chess-b71f3e88.svg');
}


/* Hover Effects - Vibrant & Smooth */
.gameTypeList > div:hover, 
.gameTypeList > a:hover,
.gameTypeList .item:hover {
    transform: translateY(-3px) scale(1.03) !important;
    box-shadow: none !important;
    background: linear-gradient(145deg, #053d7c, #5BA3F5) !important;
    border-color: rgba(74, 144, 226, 0.6) !important;
}

.gameTypeList > div:hover::before, 
.gameTypeList > a:hover::before,
.gameTypeList .item:hover::before {
    transform: scale(1.1) !important;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)) !important;
}

/* Mobile Scroll Layout */
.gameTypeItem {
    font-size: 10px !important;
    font-weight: 600 !important;
    width: 58px !important;
    height: 58px !important;
    letter-spacing: 0.2px !important;
}

.gameTypeTitle {
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: 0.2px !important;
    text-transform: capitalize !important;
    background: linear-gradient(135deg, #ffffff, #e0e0e0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

@property --gradient-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@media (max-width: 600px) {
    .gameTypeList {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        padding: 3px 8px !important;
        gap: 8px !important;
        justify-content: flex-start !important;
        position: relative !important;
        scroll-behavior: smooth !important;
        -webkit-overflow-scrolling: touch !important;
        
        /* Modern gradient background for mobile */
        background: linear-gradient(145deg, rgba(10, 15, 40, 0.85), rgba(20, 10, 50, 0.85)) !important;
        backdrop-filter: blur(10px) !important;
    }
    
    /* Keep animated border on mobile */
    .gameTypeList::before {
        display: block !important;
    }
    
    .gameTypeList::after {
        display: block !important;
    }
    
    .gameTypeList::-webkit-scrollbar {
        height: 4px;
    }
    
    .gameTypeList::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.05);
        border-radius: 10px;
    }
    
    .gameTypeList::-webkit-scrollbar-thumb {
        background: linear-gradient(90deg, #4A90E2, #5BA3F5);
        border-radius: 10px;
    }

    .gameTypeList > div, 
    .gameTypeList > a,
    .gameTypeList .item {
        flex: 0 0 auto !important;
        width: 58px !important;
        min-width: 58px !important;
    }
}

/* Fix for slotsPic images visibility - Shorter on desktop only */
@media (min-width: 768px) {
    .okwin2Home_popular .container > img,
    .slotsPic .slot-img-wrapper,
    .slotsPic > img {
        aspect-ratio: 0.8 !important; /* Much shorter height on desktop */
    }
}


/* Fix for van-swipe-item images on desktop to show fully */
@media (min-width: 768px) {
    .van-swipe-item img {
         width: calc(16.666% - 10px) !important; /* (100% - 60px) / 6 */
        aspect-ratio: 0.8 !important; /* Asymmetric Leaf Shape */
       
    

    }
    
}

/* Hide class="all" as requested */
.all {
    display: none !important;
}

/* Attendence Icon - Teal/Green Gradient */
#desktop-sidebar .sidebar-link .icon-box.attendence {
    background: linear-gradient(135deg, #11998e, #38ef7d);
}

/* Invite Friend Icon - Purple/Blue Gradient */
#desktop-sidebar .sidebar-link .icon-box.invite {
    background: linear-gradient(135deg, #02732f, #047f3b);
}

/* Promotion Icon - Pink/Red Gradient */
#desktop-sidebar .sidebar-link .icon-box.promotion {
    background: linear-gradient(135deg, #ff416c, #ff4b2b);
}

/* --- Profile Modal Design --- */
#profileModal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

#profileModal.active {
    display: flex;
}

.profile-box {
    background: linear-gradient(145deg, #1a1f3c, #252b4d);
    width: 90%;
    max-width: 500px;
    padding: 30px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    color: #fff;
    position: relative;
    max-height: 90vh;
    overflow-y: auto;
    border: 1px solid rgba(255, 255, 255, 0.1);
    animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.profile-box h2 {
    text-align: center;
    margin-bottom: 25px;
    font-size: 24px;
    background: linear-gradient(90deg, #00d2ff, #3a7bd5);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
}

.profile-box label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    color: #aab2c8;
    font-weight: 500;
}

.profile-box input[type="text"],
.profile-box input[type="email"],
.profile-box input[type="password"],
.profile-box input[type="file"] {
    width: 100%;
    padding: 12px 15px;
    margin-bottom: 20px;
    background: #13172c;
    border: 1px solid #2d3655;
    border-radius: 10px;
    color: #fff;
    font-size: 15px;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.profile-box input:focus {
    border-color: #3a7bd5;
    box-shadow: 0 0 0 3px rgba(58, 123, 213, 0.2);
    outline: none;
}

.profile-box input:disabled {
    background: #0f1222;
    color: #666;
    cursor: not-allowed;
}

/* OTP Section */
.otp-row {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    align-items: center;
}

.otp-row input {
    margin-bottom: 0;
    flex: 1;
    text-align: center;
    letter-spacing: 1px;
    min-width: 120px;
}

.otp-row .btn {
    padding: 12px 20px;
    font-size: 13px;
    white-space: nowrap;
}

/* Buttons */
.profile-box .btn {
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.btn.save {
    background: linear-gradient(90deg, #00d2ff, #3a7bd5);
    color: white;
    width: 100%;
    padding: 15px;
    font-size: 16px;
    box-shadow: 0 4px 15px rgba(58, 123, 213, 0.4);
}

.btn.save:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(58, 123, 213, 0.6);
}

.btn.cancel {
    background: transparent;
    color: #aab2c8;
    width: 100%;
    padding: 10px;
    margin-top: 10px;
}

.btn.cancel:hover {
    color: #fff;
}

#profile_send_otp, #profile_verify_otp {
    background: #2d3655;
    color: #00d2ff;
    border: 1px solid #3a7bd5;
}

#profile_send_otp:hover, #profile_verify_otp:hover {
    background: #3a7bd5;
    color: white;
}

/* File Upload */
.file-upload-wrapper {
    position: relative;
    overflow: hidden;
    margin-bottom: 15px;
}

.profile-box .preview {
    margin-bottom: 20px;
    border-radius: 10px;
    overflow: hidden;
    max-height: 200px;
    display: flex;
    justify-content: center;
    background: #13172c;
}

.profile-box .preview img {
    max-width: 100%;
    max-height: 200px;
    object-fit: contain;
}

.actions {
    display: flex;
    flex-direction: column-reverse;
    gap: 10px;
}

#profile_verify_status {
    font-size: 13px;
    margin-top: -15px;
    margin-bottom: 15px;
    min-height: 20px;
}
.verify-success { color: #00ff88; }
.verify-error { color: #ff4b4b; }
.verify-info { color: #00d2ff; }

.mt-3 { margin-top: 1rem; }

/* Responsive */
@media (max-width: 767px) {
    .profile-box {
        padding: 20px;
    }
    .otp-row {
        gap: 5px;
    }
    .otp-row .btn {
        padding: 12px 8px;
        font-size: 12px;
    }
    .otp-row input {
        font-size: 12px;
        padding: 12px 5px;
        font-weight: 400px;
        flex: 1.5;
        min-width: 100px;
    }
}

@media (min-width: 768px) {
    .actions {
        flex-direction: row;
        justify-content: flex-end;
    }
    .btn.save, .btn.cancel {
        width: auto;
        min-width: 120px;
        margin-top: 0;
    }
}

#menu-toggle {
    position: fixed;
    top: 8px;
    left: 0;
    margin: 0;
    z-index: 10001;
    width: 48px;
    height: 32px;
    background-color: transparent;
    border: none;
    padding: 0 10px 0 10px;
    border-radius: 0 0 16px 0;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    transition: background-color .2s ease, transform .15s ease;
}

#menu-toggle .menu-toggle__line {
    display: block;
    border-radius: 999px;
    background-color: #0f0f10;
    transition: transform 0.3s ease, opacity 0.3s ease, width 0.3s ease, margin 0.3s ease;
}

#menu-toggle .menu-toggle__line--1 {
    width: 26px;
    height: 4px;
}

#menu-toggle .menu-toggle__line--2 {
    width: 22px;
    height: 3px;
    margin-top: 4px;
}

#menu-toggle .menu-toggle__line--3 {
    width: 18px;
    height: 2px;
    margin-top: 4px;
}

/* Transform menu toggle to X when open */
#menu-toggle.open .menu-toggle__line--1 {
    width: 26px;
    transform: rotate(45deg) translate(7px, 7px);
}

#menu-toggle.open .menu-toggle__line--2 {
    opacity: 0;
    width: 0;
}

#menu-toggle.open .menu-toggle__line--3 {
    width: 26px;
    transform: rotate(-45deg) translate(6px, -6px);
    margin-top: 0;
}

#menu-toggle:hover {
    transform: translate(1px, 1px);
}

#menu-toggle:active {
    transform: translate(0, 0);
}

#menu-toggle img {
    display: none;
}

/* --- GLOBAL INSTANT MOVEMENT OVERRIDES (Applies to ALL screen sizes) --- */
/* Lock the nav container to stop auto-centering */
.van-tabs__nav {
    transform: none !important;
    transition: none !important;
    left: 0 !important;
    margin-left: 0 !important;
    scroll-behavior: none !important;
    display: flex !important;
    position: static !important;
    justify-content: flex-start !important;
}

/* =====================================================
   MODERN PWA INSTALL APP BUTTON - REDESIGNED
   ===================================================== */

/* Base Button Container */
body #app .btn.pwa-btn,
#pwaInstallBtn {
    position: fixed !important;
    right: 16px !important;
    bottom: 100px !important;
    z-index: 9999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    min-width: 190px !important;
    height: 44px !important;
    padding: 0 22px !important;
    background: linear-gradient(135deg, #a97607 0%, #6d9c04 50%, #ffd700 100%) !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 10px !important;
    box-shadow: 
        0 8px 32px rgba(102, 126, 234, 0.4),
        0 4px 16px rgba(118, 75, 162, 0.3),
        inset 0 1px 1px rgba(255, 255, 255, 0.2) !important;
    cursor: pointer !important;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    overflow: visible !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    animation: pwaButtonEntrance 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
               pwaButtonPulse 3s ease-in-out 1s infinite !important;
}

/* Button Entrance Animation */
@keyframes pwaButtonEntrance {
    0% {
        transform: translateX(200px) scale(0.5) rotate(45deg);
        opacity: 0;
    }
    60% {
        transform: translateX(-10px) scale(1.1) rotate(-5deg);
    }
    100% {
        transform: translateX(0) scale(1) rotate(0deg);
        opacity: 1;
    }
}

/* Pulsing Glow Animation */
@keyframes pwaButtonPulse {
    0%, 100% {
        box-shadow: 
            0 8px 32px rgba(102, 126, 234, 0.4),
            0 4px 16px rgba(118, 75, 162, 0.3),
            inset 0 1px 1px rgba(255, 255, 255, 0.2);
    }
    50% {
        box-shadow: 
            0 12px 40px rgba(102, 126, 234, 0.6),
            0 8px 24px rgba(118, 75, 162, 0.5),
            inset 0 1px 1px rgba(255, 255, 255, 0.3);
    }
}

/* Gradient Border Animation */
body #app .btn.pwa-btn::before,
#pwaInstallBtn::before {
    content: '' !important;
    position: absolute !important;
    inset: -3px !important;
    border-radius: 10px !important;
    padding: 3px !important;
    background: linear-gradient(
        45deg,
        #667eea,
        #764ba2,
        #f093fb,
        #ffd140,
        #f5576c,
        #667eea
    ) !important;
    background-size: 400% 400% !important;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
    -webkit-mask-composite: xor !important;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
    mask-composite: exclude !important;
    opacity: 0 !important;
    transition: opacity 0.4s ease !important;
    animation: gradientRotate 4s linear infinite !important;
    z-index: -1 !important;
}

body #app .btn.pwa-btn:hover::before,
#pwaInstallBtn:hover::before {
    opacity: 1 !important;
}

@keyframes gradientRotate {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Download Icon (::after pseudo-element) */
body #app .btn.pwa-btn::after,
#pwaInstallBtn::after {
    content: '' !important;
    display: block !important;
    width: 24px !important;
    height: 24px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M18 15v3H6v-3H4v3c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2v-3h-2zm-1-4l-1.41-1.41L13 12.17V4h-2v8.17L8.41 9.59 7 11l5 5 5-5z'/%3E%3C/svg%3E") !important;
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)) !important;
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
    animation: downloadBounce 2s ease-in-out 0.5s infinite !important;
}

@keyframes downloadBounce {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-4px);
    }
}

/* Button Text */
body #app .btn.pwa-btn .text,
#pwaInstallBtn .text {
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
    text-transform: uppercase !important;
    z-index: 1 !important;
    transition: all 0.3s ease !important;
}

/* Sparkle Effect Container */
body #app .btn.pwa-btn .sparkles,
#pwaInstallBtn .sparkles {
    position: absolute !important;
    width: 100% !important;
    height: 100% !important;
    pointer-events: none !important;
    overflow: hidden !important;
    border-radius: 22px !important;
}

/* Hover Effects */
body #app .btn.pwa-btn:hover,
#pwaInstallBtn:hover {
    transform: translateY(-4px) scale(1.05) !important;
    box-shadow: 
        0 16px 48px rgba(102, 126, 234, 0.55),
        0 8px 24px rgba(118, 75, 162, 0.45),
        inset 0 1px 1px rgba(255, 255, 255, 0.3) !important;
    background: linear-gradient(135deg, #764ba2 0%, #667eea 50%, #f093fb 100%) !important;
}

body #app .btn.pwa-btn:hover::after,
#pwaInstallBtn:hover::after {
    transform: scale(1.2) rotate(360deg) !important;
    animation: downloadBounceFast 0.8s ease-in-out infinite !important;
}

@keyframes downloadBounceFast {
    0%, 100% {
        transform: scale(1.2) rotate(360deg) translateY(0px);
    }
    50% {
        transform: scale(1.2) rotate(360deg) translateY(-6px);
    }
}

body #app .btn.pwa-btn:hover .text,
#pwaInstallBtn:hover .text {
    transform: scale(1.05) !important;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5) !important;
}

/* Active/Click Effects */
body #app .btn.pwa-btn:active,
#pwaInstallBtn:active {
    transform: translateY(-2px) scale(0.98) !important;
    box-shadow: 
        0 6px 20px rgba(102, 126, 234, 0.4),
        0 3px 12px rgba(118, 75, 162, 0.3) !important;
}

/* Shimmer Effect */
body #app .btn.pwa-btn .shimmer,
#pwaInstallBtn .shimmer {
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.3) 50%,
        transparent 100%
    ) !important;
    animation: shimmerSlide 3s ease-in-out infinite !important;
    pointer-events: none !important;
}

@keyframes shimmerSlide {
    0% { left: -100%; }
    50%, 100% { left: 100%; }
}

/* Close Button (if present) */
body #app .btn.pwa-btn .close,
#pwaInstallBtn .close,
.installed-app-btn-modern .close,
#installedAppLinkSidebar .close {
    position: absolute !important;
    top: -8px !important;
    right: -8px !important;
    width: 28px !important;
    height: 28px !important;
    background: linear-gradient(135deg, #ff4b4b, #ff0000) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    box-shadow: 0 4px 12px rgba(255, 0, 0, 0.4) !important;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
    z-index: 10002 !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    pointer-events: auto !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* X Icon for Close Button */
body #app .btn.pwa-btn .close::before,
#pwaInstallBtn .close::before,
.installed-app-btn-modern .close::before,
#installedAppLinkSidebar .close::before {
    content: '×' !important;
    display: block !important;
    font-size: 22px !important;
    line-height: 1 !important;
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
    pointer-events: none !important;
}

body #app .btn.pwa-btn .close:hover,
#pwaInstallBtn .close:hover,
.installed-app-btn-modern .close:hover,
#installedAppLinkSidebar .close:hover {
    transform: scale(1.25) rotate(90deg) !important;
    background: linear-gradient(135deg, #ff0000, #cc0000) !important;
    box-shadow: 0 6px 20px rgba(255, 0, 0, 0.7) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
}

body #app .btn.pwa-btn .close:active,
#pwaInstallBtn .close:active,
.installed-app-btn-modern .close:active,
#installedAppLinkSidebar .close:active {
    transform: scale(1.1) rotate(90deg) !important;
    box-shadow: 0 3px 12px rgba(255, 0, 0, 0.5) !important;
}

/* Installed App Sidebar Container */
#installedAppLinkSidebar {
    position: relative !important;
    width: 100% !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Mobile Responsive */
@media (max-width: 767px) {
    /* Show native PWA button on mobile */
    body #app .btn.pwa-btn {
        display: flex !important;
    }
    #pwaInstallBtn {
        display: none !important;
    }
    
    body #app .btn.pwa-btn .text,
    #pwaInstallBtn .text {
        font-size: 12px !important;
    }
    
    body #app .btn.pwa-btn::after,
    #pwaInstallBtn::after {
        width: 20px !important;
        height: 20px !important;
    }
}

/* Tablet Responsive */
@media (min-width: 768px) and (max-width: 1024px) {
    body #app .btn.pwa-btn,
    #pwaInstallBtn {
        right: 20px !important;
        bottom: 90px !important;
        min-width: 220px !important;
        height: 40px !important;
    }
}

/* Desktop Positioning - Ensure Right Side */
@media (min-width: 1025px) {
    body #app .btn.pwa-btn,
    #pwaInstallBtn {
        right: 24px !important;
        left: auto !important;
        bottom: 100px !important;
        min-width: 290px !important;
        height: 40px !important;
    }
}

/* Hide line element from old design */
body #app .btn.pwa-btn .line,
#pwaInstallBtn .line {
    display: none !important;
}

/* Ensure button is always visible when shown */
body #app .btn.pwa-btn[style*="display: flex"],
body #app .btn.pwa-btn[style*="display: block"],
#pwaInstallBtn[style*="display: flex"],
#pwaInstallBtn[style*="display: block"] {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* ========================================
   MODERN INSTALLED APP BUTTON - SIDEBAR
   ======================================== */

.installed-app-btn-modern {
    position: relative !important;
    display: block !important;
    overflow: visible !important;
    animation: installedAppEntrance 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* Entrance Animation */
@keyframes installedAppEntrance {
    0% {
        opacity: 0;
        transform: translateY(20px) scale(0.9);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Shimmer Animation for Installed App Button */
.installed-app-btn-modern::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent
    ) !important;
    animation: installedAppShimmer 2.5s infinite !important;
    border-radius: 16px !important;
    pointer-events: none !important;
}

@keyframes installedAppShimmer {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

/* Hover Effects */
.installed-app-btn-modern:hover {
    transform: translateY(-4px) scale(1.03) !important;
    box-shadow: 
        0 16px 48px rgba(102, 126, 234, 0.65),
        0 8px 24px rgba(118, 75, 162, 0.55),
        inset 0 1px 1px rgba(255, 255, 255, 0.3) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
}

/* Icon Animation on Hover */
.installed-app-btn-modern:hover svg {
    animation: installedAppIconBounce 0.6s ease-in-out !important;
}

@keyframes installedAppIconBounce {
    0%, 100% {
        transform: translateY(0);
    }
    25% {
        transform: translateY(-4px);
    }
    50% {
        transform: translateY(0);
    }
    75% {
        transform: translateY(-2px);
    }
}

/* Active/Click Effect */
.installed-app-btn-modern:active {
    transform: translateY(-2px) scale(0.98) !important;
    box-shadow: 
        0 8px 24px rgba(102, 126, 234, 0.5),
        0 4px 12px rgba(118, 75, 162, 0.4) !important;
}

/* ══ Sidebar Install App Block ══ */
.sidebar-install-app {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    margin: 8px 8px 0;
    background: linear-gradient(135deg, #1a1f35 0%, #0d1226 100%);
    border: 1px solid rgba(255,215,0,0.2);
    border-radius: 12px;
    text-decoration: none;
    color: #fff;
    transition: background 0.2s, border-color 0.2s;
}
.sidebar-install-app:hover {
    background: linear-gradient(135deg, #252b45 0%, #151b30 100%);
    border-color: rgba(255,215,0,0.5);
}
.sidebar-install-app-icon {
    width: 38px;
    height: 38px;
    min-width: 38px;
    background: #FFD700;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sidebar-install-app-icon svg {
    width: 22px;
    height: 22px;
    stroke: #000;
    fill: none;
}
.sidebar-install-app-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.install-title {
    font-size: 13px;
    font-weight: 700;
    color: #FFD700;
}
.install-platforms {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.install-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    color: #aab;
    background: rgba(255,255,255,0.07);
    border-radius: 4px;
    padding: 2px 6px;
}
.install-badge svg {
    width: 12px;
    height: 12px;
    fill: #aab;
}

/* ══ Sidebar Live Chat Block ══ */
.sidebar-livechat {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    margin: 6px 8px 8px;
    background: linear-gradient(135deg, #0d2a1a 0%, #071a10 100%);
    border: 1px solid rgba(0,200,100,0.25);
    border-radius: 12px;
    text-decoration: none;
    color: #fff;
    position: relative;
    transition: background 0.2s, border-color 0.2s;
}
.sidebar-livechat:hover {
    background: linear-gradient(135deg, #143d26 0%, #0a2318 100%);
    border-color: rgba(0,200,100,0.5);
}
.sidebar-livechat-icon {
    width: 38px;
    height: 38px;
    min-width: 38px;
    background: #00c864;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sidebar-livechat-icon svg {
    width: 20px;
    height: 20px;
    stroke: #fff;
    fill: none;
}
.sidebar-livechat-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.lc-title {
    font-size: 13px;
    font-weight: 700;
    color: #00e875;
}
.lc-sub {
    font-size: 10px;
    color: #7cba96;
}
.sidebar-livechat-badge {
    margin-left: auto;
    background: #00c864;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    letter-spacing: 0.5px;
}

/* Override global .customer { display:none } rule — show livechat inside desktop sidebar */
#desktop-sidebar .sidebar-livechat {
    display: flex !important;
}

/* Pulse Animation */
@keyframes installedAppPulse {
    0%, 100% {
        box-shadow: 
            0 8px 32px rgba(102, 126, 234, 0.5),
            0 4px 16px rgba(118, 75, 162, 0.4);
    }
    50% {
        box-shadow: 
            0 12px 40px rgba(102, 126, 234, 0.7),
            0 6px 20px rgba(118, 75, 162, 0.6);
    }
}

.installed-app-btn-modern {
    animation: installedAppPulse 2.5s ease-in-out infinite !important;
}

/* Gradient Border Animation */
.installed-app-btn-modern::after {
    content: '' !important;
    position: absolute !important;
    inset: -2px !important;
    border-radius: 16px !important;
    background: linear-gradient(
        45deg,
        rgba(102, 126, 234, 0.8),
        rgba(118, 75, 162, 0.8),
        rgba(240, 147, 251, 0.8),
        rgba(102, 126, 234, 0.8)
    ) !important;
    background-size: 300% 300% !important;
    animation: installedAppGradientRotate 4s linear infinite !important;
    z-index: -1 !important;
    opacity: 0 !important;
    transition: opacity 0.4s ease !important;
}

.installed-app-btn-modern:hover::after {
    opacity: 1 !important;
}

@keyframes installedAppGradientRotate {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* Responsive Adjustments for Installed App Button */
@media (max-width: 767px) {
    /* Show sidebar installed app button on mobile */
    #installedAppLinkSidebar,
    .installed-app-btn-modern {
        display: block !important;
        font-size: 0.4rem !important;
        padding: 8px 0 !important;
    }
    
    .installed-app-btn-modern svg {
        width: 10px !important;
        height: 10px !important;
        margin-right: 3px !important;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .installed-app-btn-modern {
        font-size: 0.4rem !important;
        padding: 7px 0 !important;
    }
    
    .installed-app-btn-modern svg {
        width: 9px !important;
        height: 9px !important;
        margin-right: 3px !important;
    }
    
    /* Hide close button on tablet/desktop sidebar */
    #installedAppLinkSidebar .close {
        display: none !important;
    }
}

/* Desktop Responsive - Very Small Text */
@media (min-width: 1025px) {
    .installed-app-btn-modern {
        font-size: 0.35rem !important;
        padding: 6px 0 !important;
    }
    
    .installed-app-btn-modern svg {
        width: 8px !important;
        height: 8px !important;
        margin-right: 2px !important;
    }
    
    /* Hide close button on desktop sidebar */
    #installedAppLinkSidebar .close {
        display: none !important;
    }
}

/* --- GLOBAL INSTANT MOVEMENT OVERRIDES (Applies to ALL screen sizes) --- */
/* Lock the nav container to stop auto-centering */
.van-tabs__nav {
    transform: none !important;
    transition: none !important;
    left: 0 !important;
    margin-left: 0 !important;
    scroll-behavior: none !important;
    display: flex !important;
    position: static !important;
    justify-content: flex-start !important;
}

/* Ensure the wrap doesn't scroll automatically */
.van-tabs__wrap {
    transform: none !important;
    transition: none !important;
    scroll-behavior: none !important;
    overflow-x: auto !important; /* Allow manual scroll */
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    position: relative !important;
    scroll-snap-type: none !important;
}

/* Prevent scrollIntoView behavior */
.van-tabs__wrap * {
    scroll-margin: 0 !important;
    scroll-snap-align: none !important;
}

.van-tabs__track {
    transform: translateZ(0) !important;
    transition: none !important;
    scroll-behavior: none !important;
    position: static !important;
}

/* Ensure tabs button doesn't move */
.tabs-btn {
    transform: none !important;
    transition: all 0.3s ease !important; /* Keep only the visual effects transition */
    scroll-snap-align: none !important;
    position: static !important;
}

/* Prevent individual tabs from triggering scroll */
.van-tab {
    scroll-snap-align: none !important;
    scroll-margin: 0 !important;
    position: static !important;
}

/* Override Vant's active tab positioning */
.van-tab--active {
    position: static !important;
}

/* Disable smooth scrolling on all tab-related elements */
.van-tabs,
.van-tabs__content,
.van-tabs__nav--complete,
.van-tabs__nav--line {
    scroll-behavior: none !important;
    -webkit-overflow-scrolling: none !important;
}

/* Additional safeguards against auto-scrolling */
.van-tabs__wrap[data-v-*] {
    scroll-behavior: none !important;
}

.van-tab[aria-selected="true"],
.van-tab.van-tab--active {
    scroll-margin-inline: 0 !important;
    scroll-margin-block: 0 !important;
    scroll-margin: 0 !important;
}

/* Prevent any scrolling animations */
@media (prefers-reduced-motion: no-preference) {
    .van-tabs__wrap,
    .van-tabs__nav,
    .van-tabs__track {
        scroll-behavior: auto !important;
        padding-bottom: none !important;
    }
}

/* ULTRA AGGRESSIVE: Disable all animations and transitions on tabs during clicks */
.van-tabs__wrap:active,
.van-tabs__nav:active,
.van-tab:active,
.tabs-btn:active {
    scroll-behavior: none !important;
    animation: none !important;
    transition: none !important;
}

/* Force immediate scroll lock on any state change */
.van-tabs__wrap,
.van-tabs__nav {
    animation: none !important;
    transition: none !important;
}

/* Webkit-specific scroll locking */
.van-tabs__wrap::-webkit-scrollbar-thumb {
    pointer-events: none !important;
}

.van-tabs__wrap::-webkit-scrollbar {
    pointer-events: none !important;
}

/* --- Mobile Performance Optimizations --- */
@media (max-width: 1024px) {
    /* Fix for "button response late" - Optimize click targets */
    .tabs-btn, 
    .van-tab, 
    .van-tabs__wrap, 
    .van-tab__text, 
    .van-tabs__nav {
        transition: none !important; /* Remove delay from transitions */
        touch-action: manipulation !important; /* Eliminate 300ms tap delay */
        -webkit-tap-highlight-color: transparent !important; /* Remove tap highlight lag */
        transform: translateZ(0) !important; /* Force GPU layer */
    }
    
    /* Instant feedback on press */
    .tabs-btn:active, 
    .van-tab:active {
        opacity: 0.7 !important;
        transition: none !important;
    }

    /* Fix for "not sliding smoothly" - Optimize slider tracks */
    .van-tabs__content, 
    .van-swipe__track,
    .van-tabs__track,
    .van-swipe-item {
        will-change: transform !important; /* Hint browser to promote layer */
        transform: translateZ(0) !important; /* Force GPU layer */
        -webkit-transform: translateZ(0) !important;
        backface-visibility: hidden !important;
        -webkit-backface-visibility: hidden !important;
        perspective: 1000px !important;
        -webkit-perspective: 1000px !important;
    }
}

.fun-tabs .tabs{
    margin-top: 25px !important;
}


@media screen and (max-width: 500px) {
    .okwin2Home,
    .okwin2Home_flash,
    .okwin[data-v-88d7f5ef] {
        width: 100vw !important;
        max-width: 100vw !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }
    .okwin2Home .container,
    .okwin2Home_flash .container,
    .okwin[data-v-88d7f5ef] .container {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }
    .okwin2Home > div,
    .okwin2Home_flash > div {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Fix for swiper_box full width on mobile with center-mode look */
    .swiper_box,
    .swiper_box[data-v-88d7f5ef] {
        width: 100vw !important;
        max-width: 100vw !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        margin-top: 5px !important;
    }

    .swiper_box .van-swipe-item,
    .swiper_box .my-swipe .van-swipe-item {
        width: 100% !important;
        padding: 0 5px !important;
        box-sizing: border-box !important;
    }

    .swiper_box .van-swipe-item img,
    .swiper_box .my-swipe img {
        width: 100% !important;
        border-radius: 10px !important;
        display: block !important;
        box-shadow: 0 4px 8px rgba(0,0,0,0.1) !important;
    }
}


/* ═══════════════════════════════════════════════════════════════
   RIGHT-SIDE CATEGORY GAMES PANEL — Mobile Sidebar
   On mobile: always-visible right column beside the left sidebar,
   giving a desktop-style dual-panel layout.
   ═══════════════════════════════════════════════════════════════ */

#cat-games-panel {
    position: fixed;
    top: 0;
    /* sits to the right of the 255px left sidebar */
    left: 255px;
    width: calc(100% - 255px);
    height: 100vh;
    height: 100dvh;
    background: #fff !important;
    z-index: 10009;
    display: none;
    flex-direction: column;
    overflow: hidden;
    /* No slide animation — always visible beside sidebar */
    transform: none;
    transition: none;
    box-shadow: none;
    pointer-events: none;
}

/* When the desktop-sidebar is open on mobile, always show the games panel */
#desktop-sidebar[style*="display: flex"] ~ #cat-games-panel,
#desktop-sidebar[style*="display:flex"] ~ #cat-games-panel,
#cat-games-panel.open,
#cat-games-panel.mobile-always-open {
    display: flex !important;
    transform: none !important;
    pointer-events: all !important;
}

/* ---- Panel Header ---- */
.cgp-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 10px;
    height: 46px;
    background: #fcfbfb;
    border-bottom: 1px solid rgba(255, 215, 0, 0.28);
    flex-shrink: 0;
}

.cgp-back {
    background: none;
    border: none;
    color: #FFD700;
    padding: 6px;
    cursor: pointer;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s;
    line-height: 1;
}
.cgp-back:hover,
.cgp-back:active {
    background: rgba(255, 215, 0, 0.15);
}

.cgp-title {
    color: #FFD700;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---- Scrollable game list — single column ---- */
.cgp-list {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 6px 6px 80px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.12) transparent;
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-content: start;
}
.cgp-list::-webkit-scrollbar { width: 3px; }
.cgp-list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 3px;
}

/* ---- Individual Game Card ---- */
.cgp-game-item {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    cursor: pointer;
    border-radius: 8px;
    transition: opacity 0.15s ease;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    overflow: hidden;
    background: #131c30;
    margin-bottom: 0;
    text-decoration: none;
}
.cgp-game-item:active {
    transform: scale(0.97);
}

.cgp-game-thumb {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 8px 8px 0 0;
    background: #1a1a2e;
    display: block;
}

.cgp-game-placeholder {
    width: 100%;
    aspect-ratio: 1 / 1;
    background: linear-gradient(135deg, #1a2040 0%, #0e1628 100%);
    border-radius: 8px 8px 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cgp-game-placeholder::after {
    content: '';
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 215, 0, 0.10);
    border: 2px solid rgba(255,215,0,0.15);
}

.cgp-game-name {
    color: #e8eaf0;
    font-size: 10px;
    font-weight: 600;
    text-align: center;
    padding: 4px 3px 5px;
    line-height: 1.2;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-sizing: border-box;
    background: #131c30;
    border-radius: 0 0 8px 8px;
}

/* ---- Backdrop — not needed for always-visible panel ---- */
#cgp-backdrop {
    display: none !important;
}

/* Only active on mobile (sidebar is hidden on desktop) */
@media (min-width: 768px) {
    #cat-games-panel,
    #cgp-backdrop {
        display: none !important;
    }
}
@media (max-width: 767px) {
    #cat-games-panel {
        left: 255px;
        width: calc(100% - 255px);
        /* Always show as a static right column when sidebar is visible */
        transform: none !important;
        transition: none !important;
    }
    /* Close (X) button becomes a category-switcher chevron — hide it */
    .cgp-back {
        display: flex;
    }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE DUAL-PANEL SIDEBAR — Polish & Layout
   Left nav (100px) + right games panel always side-by-side
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

    /* Left sidebar background to match image dark navy */
    #desktop-sidebar {
        background: #020c30 !important;
        box-shadow: 4px 0 16px rgba(0,0,0,0.5) !important;
    }

    /* Sidebar header centered branding */
    #desktop-sidebar .sidebar-header {
        background: #fff !important;
        border-bottom: 1px solid rgba(255,215,0,0.2) !important;
    }

    /* Nav content scroll area */
    #desktop-sidebar #sidebar-content {
        background: #fff !important;
    }

    /* Game-cat labels: larger, centred under icon */
    #desktop-sidebar #sidebar-game-cats .sidebar-link span:not(.icon-box):not(.sidebar-cat-arrow) {
        display: block !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        color: #000 !important;
        text-align: center !important;
        line-height: 1.2 !important;
        margin-top: 2px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 72px !important;
    }
    #desktop-sidebar #sidebar-game-cats .sidebar-link.active span:not(.icon-box) {
        color: #000 !important;
    }
    /* Static nav labels: normal inline text */
    #desktop-sidebar #sidebar-nav > a.sidebar-link span:not(.icon-box):not(.sidebar-cat-arrow) {
        display: inline !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        color: #000 !important;
        text-align: left !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 160px !important;
    }
    #desktop-sidebar #sidebar-nav > a.sidebar-link.active span:not(.icon-box),
    #desktop-sidebar #sidebar-nav > a.sidebar-link.active-home span:not(.icon-box) {
        color: #0f0f0e !important;
    }

    /* Active static link highlight */
    #desktop-sidebar #sidebar-nav > a.sidebar-link.active,
    #desktop-sidebar #sidebar-nav > a.sidebar-link.active-home {
        background: rgba(255,215,0,0.12) !important;
        border-right: none !important;
        border-left: 3px solid #FFD700 !important;
        border-bottom: none !important;
    }

    /* Icon box centering inside grid cells */
    #desktop-sidebar #sidebar-game-cats .icon-box {
        margin: 0 auto !important;
    }

    /* Right games panel top bar */
    .cgp-header {
        height: 46px !important;
        background: #fff !important;
        border-bottom: 1px solid rgba(255,215,0,0.2) !important;
    }

    /* Games panel background */
    #cat-games-panel {
        background: #fff !important;
    }

    /* Game cards — single column, 1 per row */
    .cgp-list {
        display: flex !important;
        flex-direction: column !important;
        gap: 5px !important;
        padding: 5px 5px 80px 5px !important;
        overflow-y: auto !important;
    }

    .cgp-game-item {
        margin-bottom: 0 !important;
        border-radius: 6px !important;
        overflow: hidden !important;
        background: #131c30 !important;
        box-shadow: 0 2px 6px rgba(0,0,0,0.3) !important;
        flex-shrink: 0 !important;
        width: 75% !important;
        max-width: 75% !important;
        align-self: flex-end !important;
        margin-right: 4px !important;
    }

    .cgp-game-thumb {
        aspect-ratio: 4 / 3 !important;
        border-radius: 6px 6px 0 0 !important;
        width: 100% !important;
        object-fit: cover !important;
        display: block !important;
    }

    .cgp-game-name {
        background: transparent !important;
        color: #fff !important;
        font-size: 10px !important;
        padding: 4px 6px 5px !important;
        border-radius: 0 0 8px 8px !important;
        text-align: center !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        display: block !important;
    }

    /* Category title in right panel header */
    .cgp-title {
        font-size: 13px !important;
        font-weight: 700 !important;
        color: #0b0b0b !important;
    }

    /* X (close all) button in right panel header - styled as home button */
    .cgp-back {
        color: #0b0b0b !important;
    }

    /* sidebar-mobile-close shown via the block above */

    /* Suppress arrow icon on active game cat link */
    #desktop-sidebar .sidebar-cat-arrow {
        display: none !important;
    }
}
.sidebar-darkmode-row{
    display: none !important;
}