/* ===== 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 */


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

/* ============================================
   MODERN DESKTOP SIDEBAR - REDESIGNED
   ============================================ */

/* Sidebar Container */
#desktop-sidebar {
    height: 100vh;
    width: 300px;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1000;
    overflow: hidden;
}

#desktop-sidebar #sidebar-content {
    height: 100%;
    width: 100%;
    background: linear-gradient(180deg, 
        rgba(102, 126, 234, 0.98) 0%, 
        rgba(118, 75, 162, 0.98) 50%, 
        rgba(240, 147, 251, 0.95) 100%
    );
    backdrop-filter: blur(20px);
    box-shadow: 2px 0 30px rgba(0, 0, 0, 0.3);
    padding: 0 0.8rem 5rem 0.8rem;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
    animation: slideInLeft 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

#desktop-sidebar #sidebar-content::-webkit-scrollbar {
    width: 6px;
}

#desktop-sidebar #sidebar-content::-webkit-scrollbar-track {
    background: transparent;
}

#desktop-sidebar #sidebar-content::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 10px;
    transition: background 0.3s ease;
}

#desktop-sidebar #sidebar-content::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
}

@keyframes slideInLeft {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Sidebar Navigation Grid */
#sidebar-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 10px 5px;
}

/* Desktop-only: Reduce top padding */
@media (min-width: 768px) {
    #desktop-sidebar #sidebar-nav {
        padding: 2px 5px;
    }
}

/* Base Sidebar Link Styles */
#desktop-sidebar .sidebar-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 16px 8px;
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    aspect-ratio: 1;
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    border: 1px solid rgba(255, 255, 255, 0.2);
    overflow: hidden;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Animated gradient border effect */
#desktop-sidebar .sidebar-link::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 16px;
    padding: 2px;
    background: linear-gradient(135deg, #f093fb, #f5576c, #ffd140, #f093fb);
    background-size: 300% 300%;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.4s ease;
    animation: gradientBorderShift 3s ease infinite;
}

#desktop-sidebar .sidebar-link:hover::before {
    opacity: 1;
}

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

/* Icon and Text Styling */
#desktop-sidebar .sidebar-link span {
    margin-top: 10px;
    font-size: 12px !important;
    font-weight: 600;
    text-align: center;
    color: inherit;
    z-index: 1;
}

#desktop-sidebar .sidebar-link .icon-box {
    width: 45px;
    height: 45px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.1));
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    z-index: 1;
}

#desktop-sidebar .sidebar-link .icon-box svg {
    width: 26px;
    height: 26px;
    fill: #ffffff !important;
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

/* Hover Effects */
#desktop-sidebar .sidebar-link:hover {
    transform: translateY(-8px) scale(1.05);
    background: rgba(255, 255, 255, 0.25);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.4);
    border-color: rgba(255, 255, 255, 0.4);
}

#desktop-sidebar .sidebar-link:hover .icon-box {
    transform: rotate(360deg) scale(1.1);
    background: linear-gradient(135deg, #ffd140, #f093fb);
    box-shadow: 0 8px 25px rgba(240, 147, 251, 0.6);
}

#desktop-sidebar .sidebar-link:hover .icon-box svg {
    fill: #ffffff !important;
    transform: scale(1.15);
}

/* Active State (Home) */
#desktop-sidebar .sidebar-link.active-home {
    background: linear-gradient(135deg, rgba(255, 209, 64, 0.9), rgba(255, 117, 140, 0.9));
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 8px 25px rgba(255, 117, 140, 0.5);
    animation: activePulse 2s ease-in-out infinite;
}

#desktop-sidebar .sidebar-link.active-home .icon-box {
    background: linear-gradient(135deg, #ffffff, rgba(255, 255, 255, 0.8));
}

#desktop-sidebar .sidebar-link.active-home .icon-box svg {
    fill: #f5576c !important;
}

@keyframes activePulse {
    0%, 100% {
        box-shadow: 0 8px 25px rgba(255, 117, 140, 0.5);
    }
    50% {
        box-shadow: 0 8px 35px rgba(255, 117, 140, 0.8);
    }
}

/* Top Items (VIP & Attendance) */
#desktop-sidebar .sidebar-link.top-item {
    flex-direction: row;
    aspect-ratio: auto;
    height: 60px;
    padding: 0 15px;
    gap: 12px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05));
}

#desktop-sidebar .sidebar-link.mission-item {
    background: linear-gradient(135deg, rgba(106, 17, 203, 0.9), rgba(250, 217, 97, 0.8));
    box-shadow: 0 6px 20px rgba(106, 17, 203, 0.4);
}

#desktop-sidebar .sidebar-link.rotate-item {
    background: linear-gradient(135deg, rgba(17, 153, 142, 0.9), rgba(56, 239, 125, 0.8));
    box-shadow: 0 6px 20px rgba(17, 153, 142, 0.4);
}

#desktop-sidebar .sidebar-link.top-item span {
    margin-top: 0;
    font-size: 10px !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

#desktop-sidebar .sidebar-link.top-item .icon-box {
    width: 38px;
    height: 38px;
    border-radius: 12px;
}

#desktop-sidebar .sidebar-link.top-item .icon-box svg {
    width: 22px;
    height: 22px;
}

#desktop-sidebar .sidebar-link.top-item:hover {
    transform: translateX(8px) scale(1.03);
}

/* Banner Item (Fortune Wheel) */
#desktop-sidebar .sidebar-link.banner-item {
    grid-column: span 2;
    aspect-ratio: auto;
    height: 90px;
    background: linear-gradient(135deg, #ff9800 0%, #ff5722 50%, #e91e63 100%);
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 15px;
    padding: 0 20px;
    border-radius: 20px;
    box-shadow: 0 8px 30px rgba(233, 30, 99, 0.5);
    animation: bannerGlow 3s ease-in-out infinite;
    overflow: visible;
}

@keyframes bannerGlow {
    0%, 100% {
        box-shadow: 0 8px 30px rgba(233, 30, 99, 0.5);
    }
    50% {
        box-shadow: 0 12px 40px rgba(233, 30, 99, 0.8);
    }
}

#desktop-sidebar .sidebar-link.banner-item .icon-box {
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 16px;
}

#desktop-sidebar .sidebar-link.banner-item .icon-box svg {
    width: 36px;
    height: 36px;
    animation: spinSlow 8s linear infinite;
}

@keyframes spinSlow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

#desktop-sidebar .sidebar-link.banner-item span {
    font-size: 13px !important;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
}

#desktop-sidebar .sidebar-link.banner-item:hover {
    transform: scale(1.05);
    box-shadow: 0 15px 50px rgba(233, 30, 99, 0.7);
}

#desktop-sidebar .sidebar-link.banner-item:hover .icon-box {
    animation: spinFast 1s linear infinite;
}

@keyframes spinFast {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Grid Items */
#desktop-sidebar .sidebar-link.grid-item {
    order: 4;
}

/* Individual Icon Colors */
#desktop-sidebar .sidebar-link.grid-item .icon-box.home {
    background: linear-gradient(135deg, rgba(0, 198, 255, 0.3), rgba(0, 114, 255, 0.3));
}

#desktop-sidebar .sidebar-link.grid-item .icon-box.casino {
    background: linear-gradient(135deg, rgba(255, 65, 108, 0.3), rgba(255, 75, 43, 0.3));
}

#desktop-sidebar .sidebar-link.grid-item .icon-box.slot {
    background: linear-gradient(135deg, rgba(86, 171, 47, 0.3), rgba(168, 224, 99, 0.3));
}

#desktop-sidebar .sidebar-link.grid-item .icon-box.promotion {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.3), rgba(255, 152, 0, 0.3));
}

#desktop-sidebar .sidebar-link.grid-item .icon-box.affiliate {
    background: linear-gradient(135deg, rgba(156, 39, 176, 0.3), rgba(233, 30, 99, 0.3));
}

#desktop-sidebar .sidebar-link.grid-item .icon-box.invite {
    background: linear-gradient(135deg, rgba(0, 188, 212, 0.3), rgba(0, 150, 136, 0.3));
}

#desktop-sidebar .sidebar-link.grid-item .icon-box.wallet {
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.3), rgba(67, 160, 71, 0.3));
}

#desktop-sidebar .sidebar-link.grid-item .icon-box.account {
    background: linear-gradient(135deg, rgba(63, 81, 181, 0.3), rgba(48, 63, 159, 0.3));
}

#desktop-sidebar .sidebar-link.grid-item .icon-box.language {
    background: linear-gradient(135deg, rgba(255, 87, 34, 0.3), rgba(244, 67, 54, 0.3));
}

/* Responsive - Hide on Mobile */
@media (max-width: 767px) {
    #desktop-sidebar {
        display: none;
        top: 45px;
    }
}

/* 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 --- */
@media screen and (min-width: 768px) {
    /* Make the container full width */
    #app .noticeBar__container {
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Expand the scrolling body area */
    #app .noticeBar__container-body {
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 !important;
        overflow: hidden !important;
    }

    /* Adjust text size and animation for better readability */
    #app .noticeBar__container-body-text {
        font-size: 13px !important;
        line-height: 1.5 !important;
        animation-duration: 25s !important; /* Slower speed for wider screens */
        padding-left: 100% !important; /* Start off-screen */
        white-space: nowrap !important;
    }
}

/* --- 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: linear-gradient(135deg, rgba(6, 27, 121, 0.95) 0%, rgba(54, 12, 97, 0.95) 50%, rgba(44, 4, 49, 0.95) 100%) !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: linear-gradient(135deg, rgba(6, 27, 121, 0.95) 0%, rgba(54, 12, 97, 0.95) 50%, rgba(44, 4, 49, 0.95) 100%) !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: #e6edf7;
    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: 80px !important;
    z-index: 9999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    min-width: 140px !important;
    height: 44px !important;
    padding: 0 16px !important;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%) !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 22px !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: 30px !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) {
    /* Hide floating PWA button on mobile, use sidebar button instead */
    body #app .btn.pwa-btn,
    #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: 130px !important;
        height: 42px !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: 140px !important;
        height: 44px !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;
}

/* 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;
    }
}