/* Theme CSS Variables */
            :root {
                /* Theme Colors - Default: Red Theme */
                --theme-primary-from: 220, 38, 38;      /* red-600 */
                --theme-primary-via: 239, 68, 68;       /* red-500 */
                --theme-primary-to: 220, 38, 38;        /* red-600 */
                --theme-primary-dark: 185, 28, 28;      /* red-700 */
                --theme-gradient-1-from: 147, 51, 234;  /* purple-600 */
                --theme-gradient-1-to: 37, 99, 235;     /* blue-600 */
                --theme-gradient-2-from: 236, 72, 153;  /* pink-500 */
                --theme-gradient-2-to: 147, 51, 234;    /* purple-600 */
                --theme-gradient-3-from: 37, 99, 235;   /* blue-600 */
                --theme-gradient-3-to: 67, 56, 202;     /* indigo-700 */
                --theme-gradient-4-from: 239, 68, 68;   /* red-500 */
                --theme-gradient-4-to: 236, 72, 153;    /* pink-600 */
                --theme-name: 'red';
            }

            /* Blue Theme */
            [data-theme="blue"] {
                --theme-primary-from: 37, 99, 235;
                --theme-primary-via: 59, 130, 246;
                --theme-primary-to: 37, 99, 235;
                --theme-primary-dark: 29, 78, 216;
                --theme-gradient-1-from: 14, 165, 233;
                --theme-gradient-1-to: 37, 99, 235;
                --theme-gradient-2-from: 59, 130, 246;
                --theme-gradient-2-to: 14, 165, 233;
                --theme-gradient-3-from: 37, 99, 235;
                --theme-gradient-3-to: 67, 56, 202;
                --theme-gradient-4-from: 59, 130, 246;
                --theme-gradient-4-to: 37, 99, 235;
                --theme-name: 'blue';
            }

            /* Green Theme */
            [data-theme="green"] {
                --theme-primary-from: 22, 163, 74;
                --theme-primary-via: 34, 197, 94;
                --theme-primary-to: 22, 163, 74;
                --theme-primary-dark: 21, 128, 61;
                --theme-gradient-1-from: 34, 197, 94;
                --theme-gradient-1-to: 16, 185, 129;
                --theme-gradient-2-from: 16, 185, 129;
                --theme-gradient-2-to: 34, 197, 94;
                --theme-gradient-3-from: 5, 150, 105;
                --theme-gradient-3-to: 4, 120, 87;
                --theme-gradient-4-from: 34, 197, 94;
                --theme-gradient-4-to: 16, 185, 129;
                --theme-name: 'green';
            }

            /* Purple Theme */
            [data-theme="purple"] {
                --theme-primary-from: 147, 51, 234;
                --theme-primary-via: 168, 85, 247;
                --theme-primary-to: 147, 51, 234;
                --theme-primary-dark: 126, 34, 206;
                --theme-gradient-1-from: 168, 85, 247;
                --theme-gradient-1-to: 192, 132, 252;
                --theme-gradient-2-from: 236, 72, 153;
                --theme-gradient-2-to: 168, 85, 247;
                --theme-gradient-3-from: 147, 51, 234;
                --theme-gradient-3-to: 126, 34, 206;
                --theme-gradient-4-from: 168, 85, 247;
                --theme-gradient-4-to: 236, 72, 153;
                --theme-name: 'purple';
            }

            /* Theme Utility Classes */
            .theme-bg-primary {
                background: rgb(var(--theme-primary-from));
            }

            .theme-bg-primary-hover:hover {
                background: rgb(var(--theme-primary-dark));
            }

            .theme-bg-gradient {
                background: linear-gradient(to right, 
                    rgb(var(--theme-primary-from)), 
                    rgb(var(--theme-primary-via)), 
                    rgb(var(--theme-primary-to))
                );
            }

            .theme-gradient-1 {
                background: linear-gradient(to bottom right, 
                    rgb(var(--theme-gradient-1-from)), 
                    rgb(var(--theme-gradient-1-to))
                );
            }

            .theme-gradient-2 {
                background: linear-gradient(to bottom right, 
                    rgb(var(--theme-gradient-2-from)), 
                    rgb(var(--theme-gradient-2-to))
                );
            }

            .theme-gradient-3 {
                background: linear-gradient(to bottom right, 
                    rgb(var(--theme-gradient-3-from)), 
                    rgb(var(--theme-gradient-3-to))
                );
            }

            .theme-gradient-4 {
                background: linear-gradient(to bottom right, 
                    rgb(var(--theme-gradient-4-from)), 
                    rgb(var(--theme-gradient-4-to))
                );
            }

            .hide-scrollbar::-webkit-scrollbar {
                display: none;
            }
            .hide-scrollbar {
                -ms-overflow-style: none;
                scrollbar-width: none;
            }
            
            /* Product grid with balanced columns - 23 columns on large desktop */
            .product-grid-15 {
                grid-template-columns: repeat(6, 1fr);
            }
            
            @media (min-width: 640px) {
                .product-grid-15 {
                    grid-template-columns: repeat(8, 1fr);
                }
            }
            
            @media (min-width: 768px) {
                .product-grid-15 {
                    grid-template-columns: repeat(10, 1fr);
                }
            }
            
            @media (min-width: 1024px) {
                .product-grid-15 {
                    grid-template-columns: repeat(12, 1fr);
                }
            }
            
            @media (min-width: 1280px) {
                .product-grid-15 {
                    grid-template-columns: repeat(18, 1fr);
                }
            }
            
            @media (min-width: 1536px) {
                .product-grid-15 {
                    grid-template-columns: repeat(23, 1fr);
                }
            }
            /*   indes */ 
            .game-card {
                border-radius: 8px;
                overflow: hidden;
                position: relative;
                cursor: pointer;
                transition: transform 0.2s;
            }
            .game-card:hover {
                transform: scale(1.05);
            }
           .game-provider-card {
                box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
                transition: all 0.3s ease;
            }
            .game-provider-card:hover {
                box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
                transform: translateY(-5px);
            }
            .game-provider-card::before {
                content: '';
                position: absolute;
                inset: 0;
                border-radius: 12px;
                padding: 2px;
                background: linear-gradient(135deg, rgba(255,255,255,0.2), transparent);
                -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
                -webkit-mask-composite: xor;
                mask-composite: exclude;
                pointer-events: none;
                z-index: 10;
            }
           .game-providers-container {
                /* border: 1px solid rgba(var(--theme-primary-from), 0.15); */
                box-shadow: 
                    0 4px 15px rgba(var(--theme-primary-from), 0.1),
                    inset 0 0 30px rgba(255, 255, 255, 0.1);
            }
            
            .game-provider-card {
                background: white;
                border: 1px solid rgba(0, 0, 0, 0.05);
            }
            
            .game-provider-card:hover {
                transform: translateY(-2px);
                box-shadow: 0 8px 25px rgba(var(--theme-primary-from), 0.2);
            }
            
            .game-provider-card img {
                background-color: #1a1a2e;
            }
            
            /* Responsive adjustments */
            @media (max-width: 640px) {
                .game-providers-container {
                    padding: 8px !important;
                }
                .game-provider-card {
                    border-radius: 12px !important;
                }
            }
            .live-casino-card {
                aspect-ratio: 4/3;
                border-radius: 8px;
                overflow: hidden;
                position: relative;
                cursor: pointer;
                transition: transform 0.2s;
            }
            .live-casino-card:hover {
                transform: scale(1.05);
            }
            .slider-container {
                position: relative;
                overflow: hidden;
            }
            .slider-wrapper {
                display: flex;
                transition: transform 0.5s ease-in-out;
            }
            .slider-slide {
                min-width: 100%;
                flex-shrink: 0;
            }
            .slider-dot {
                width: 8px;
                height: 8px;
                border-radius: 50%;
                background: rgba(255, 255, 255, 0.5);
                cursor: pointer;
                transition: all 0.3s;
            }
            @media (min-width: 768px) {
                .slider-dot {
                    width: 12px;
                    height: 12px;
                }
            }
            .slider-dot.active {
                background: white;
                width: 20px;
                border-radius: 4px;
            }
            @media (min-width: 768px) {
                .slider-dot.active {
                    width: 32px;
                    border-radius: 6px;
                }
            }
        /* Theme text color for icon */
        .theme-text-primary {
            color: rgb(var(--theme-primary-from));
        }
        
        /* Modal animation */
        #contactModal > div:last-child > div {
            animation: modalSlideIn 0.3s ease-out;
        }
        
        @keyframes modalSlideIn {
            from {
                opacity: 0;
                transform: scale(0.9) translateY(-20px);
            }
            to {
                opacity: 1;
                transform: scale(1) translateY(0);
            }
        }
        
        /* Prevent body scroll when modal is open */
        body.modal-open {
            overflow: hidden;
        }

           /* Category Tab Styles */
            .category-tab {
                background: linear-gradient(135deg, #f5f5f5 0%, #e0e0e0 100%);
                color: #666;
                border: 2px solid transparent;
            }

            .category-tab:hover {
                background: linear-gradient(135deg, #e8e8e8 0%, #d0d0d0 100%);
                transform: translateY(-2px);
            }

            .category-tab.active {
                background: linear-gradient(135deg, 
                    rgb(var(--theme-primary-from)) 0%, 
                    rgb(var(--theme-primary-via)) 50%,
                    rgb(var(--theme-primary-to)) 100%
                );
                color: white;
                border: 2px solid rgba(255, 255, 255, 0.3);
                box-shadow: 0 8px 16px rgba(var(--theme-primary-from), 0.3);
                transform: translateY(-2px);
            }

            /* Animation for promotion cards */
            .promotion-card {
                animation: fadeIn 0.5s ease-in-out;
            }

            .promotion-card.hidden {
                display: none;
            }

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

            /* Smooth fade animation */
            .fade-in {
                animation: fadeIn 0.4s ease-in-out;
            }

            /* Smooth transition for container */
            #promotionsContainer {
                transition: opacity 0.3s ease-in-out;
            }

            /* Category Badge on Cards */
            .promotion-card .absolute.top-3 {
                animation: pulse 2s ease-in-out infinite;
            }

            @keyframes pulse {
                0%, 100% {
                    transform: scale(1);
                }
                50% {
                    transform: scale(1.05);
                }
            }

            /* Category Count Badge */
            .category-count {
                animation: bounce 2s ease-in-out infinite;
            }

            @keyframes bounce {
                0%, 100% {
                    transform: scale(1);
                }
                50% {
                    transform: scale(1.1);
                }
            }

            /* Responsive category tabs */
            @media (max-width: 640px) {
                .category-tab {
                    font-size: 0.75rem;
                    padding: 0.5rem 0.75rem;
                    min-width: 90px !important;
                }
                
                .category-tab i {
                    display: block;
                    margin: 0 auto 0.25rem;
                    font-size: 1rem;
                }
                
                .category-tab > span:not(.category-count) {
                    display: block;
                    font-size: 0.65rem;
                }

                .category-count {
                    font-size: 0.6rem;
                    padding: 0.125rem 0.375rem;
                }
            }
       .gold-border {
        border: 2px solid #ffe082;
        border-radius: 28px;
      }
      .gold-text {
        color: #ffe082;
      }
      .gold-bg {
        background: linear-gradient(180deg, #ffe082 0%, #bfa43a 100%);
      }
      .gold-btn {
        background: linear-gradient(180deg, #ffe082 0%, #bfa43a 100%);
        color: #fff;
        font-weight: bold;
        border-radius: 20px;
        box-shadow: 0 2px 8px 0 rgba(255, 224, 130, 0.2);
      }
      .red-btn {
        background: linear-gradient(180deg, #b71c1c 0%, #d32f2f 100%);
        color: #fff;
        font-weight: bold;
        border-radius: 20px;
        box-shadow: 0 2px 8px 0 rgba(183, 28, 28, 0.2);
      }
      .icon-circle {
        background: rgba(255, 224, 130, 0.1);
        border: 2px solid #ffe082;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
      }
      .icon-gold {
        color: #ffe082;
      }
      .shadow-gold {
        box-shadow: 0 0 10px 2px #ffe08233;
      }
      .shadow-red {
        box-shadow: 0 0 10px 2px #b71c1c33;
      }
      .input-gold {
        background: #10131a;
        border: 2px solid #ffe082;
        border-radius: 20px;
        color: #fff;
        font-weight: bold;
        padding: 0.25rem 1rem;
        font-size: 1rem;
        outline: none;
      }
   /* Smooth scroll offset for fixed header */
            html {
                scroll-behavior: smooth;
                scroll-padding-top: 100px;
    }
  /* Category section styles */
            .category-section {
                animation: fadeIn 0.3s ease-in-out;
            }

            @keyframes fadeIn {
                from {
                    opacity: 0;
                    transform: translateY(10px);
                }
                to {
                    opacity: 1;
                    transform: translateY(0);
                }
            }
            
            /* Navigation button hover effect */
            .category-nav-btn:hover {
                transform: translateY(-2px);
            }
            
            /* Pulse animation for hot items */
            @keyframes pulse-glow {
                0%, 100% {
                    box-shadow: 0 0 20px rgba(239, 68, 68, 0.4);
                }
                50% {
                    box-shadow: 0 0 30px rgba(239, 68, 68, 0.8);
                }
            }
            
            @keyframes float {
                0%, 100% {
                    transform: translateY(0px);
                }
                50% {
                    transform: translateY(-10px);
                }
            }
            
            .hot-badge {
                animation: pulse-glow 2s infinite;
            }
            
            .game-card:hover {
                transform: scale(1.08) translateY(-5px);
                box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
            }
            
            .badge-hot {
                background: linear-gradient(135deg, #ef4444, #dc2626);
                animation: float 3s ease-in-out infinite;
            }
            
            .badge-new {
                background: linear-gradient(135deg, #10b981, #059669);
            }
            
            .badge-popular {
                background: linear-gradient(135deg, #f59e0b, #d97706);
            }
/*  history */
          
            /* Tab Button Styles */
            .tab-button {
                position: relative;
                overflow: hidden;
            }
            
            .tab-button.active {
                background: linear-gradient(135deg, 
                    rgb(var(--theme-primary-from)), 
                    rgb(var(--theme-primary-via))
                );
                color: white;
                box-shadow: 0 10px 25px -5px rgba(var(--theme-primary-from), 0.5);
            }
            
            .tab-button.active svg {
                color: rgb(var(--theme-primary-from));
            }
            
            .tab-button:not(.active) {
                background: linear-gradient(135deg, #f3f4f6, #e5e7eb);
                color: #6b7280;
            }
            
            .tab-button:not(.active):hover {
                background: linear-gradient(135deg, #e5e7eb, #d1d5db);
                transform: translateY(-2px);
            }
            
            .tab-button:not(.active) svg {
                color: #6b7280;
            }
            
            /* Custom scrollbar for table */
            .overflow-x-auto::-webkit-scrollbar {
                height: 10px;
            }
            
            .overflow-x-auto::-webkit-scrollbar-track {
                background: #f1f5f9;
                border-radius: 10px;
            }
            
            .overflow-x-auto::-webkit-scrollbar-thumb {
                background: linear-gradient(to right, 
                    rgb(var(--theme-primary-from)), 
                    rgb(var(--theme-primary-via))
                );
                border-radius: 10px;
            }
            
            .overflow-x-auto::-webkit-scrollbar-thumb:hover {
                background: linear-gradient(to right, 
                    rgb(var(--theme-primary-dark)), 
                    rgb(var(--theme-primary-from))
                );
   }

/*  End history */
/* Deposit Method Button Styles */
.deposit-method-btn {
    border: 3px solid #e5e7eb;
    color: #6b7280;
    background: white;
}

.deposit-method-btn.active {
    border-color: rgb(var(--theme-primary-from));
    color: rgb(var(--theme-primary-from));
    background: linear-gradient(to bottom right, 
        rgba(var(--theme-primary-from), 0.05), 
        rgba(var(--theme-primary-to), 0.05)
    );
}

.deposit-method-btn:hover {
    border-color: rgb(var(--theme-primary-from));
    transform: translateY(-2px);
}


            /*  End index */