:root {
    --bg-primary: #0a0b0f;
    --bg-secondary: #131419;
    --bg-card: #1a1d24;
    --text-primary: #ffffff;
    --text-secondary: #a1a8b5;
    --text-muted: #6b7280;
    --border: #2d3748;
    --border-light: #374151;
    --accent-blue: #3b82f6;
    --accent-green: #10b981;
    --accent-red: #ef4444;
    --accent-yellow: #f59e0b;
    --accent-purple: #8b5cf6;
    --hover: rgba(255, 255, 255, 0.05);
}


.menu-link .menu-title{
    color: #858585 !important;
}

.sabong-container {
    background-color: var(--kt-app-header-base-bg-color);
    border-radius: 10px;
}

.sabong-content {
    opacity: 1;
    padding: 10px;
}

.sabong-content .fight-number {
    background: none !important;
}


.sabong-content .bet-history-table {
    background: #1d1f21;
    border-radius: 0;
}

.sabong-content .bet-history-table h2,  .sabong-content .bet-entry{
    background: none;
}

.sabong-content .bet-history-table h2 {
    box-shadow:  none;
}

/* ===== BET HISTORY PROFESSIONAL STYLES ===== */

.bet-history-container {
    background: var(--bg-card);
    border-radius: 16px;
    border: 1px solid var(--border);
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.bet-history-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 24px 20px;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-secondary) 100%);
}

.bet-history-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.025em;
}

.bet-history-icon {
    width: 24px;
    height: 24px;
    color: var(--accent-blue);
}

.bet-history-count {
    font-size: 14px;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    padding: 6px 12px;
    border-radius: 20px;
    font-weight: 500;
}

.bet-history-content {
    padding: 0;
}

/* Empty State */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 24px;
    text-align: center;
}

.empty-state-icon {
    width: 64px;
    height: 64px;
    color: var(--text-muted);
    margin-bottom: 16px;
}

.empty-state h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 8px;
}

.empty-state p {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0;
    max-width: 300px;
}

/* Bet List */
.bet-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.bet-card {
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    transition: all 0.2s ease;
    position: relative;
}

.bet-card:last-child {
    border-bottom: none;
}

.bet-card:hover {
    background: var(--hover);
}

.bet-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 16px 20px 12px;
    gap: 16px;
}

.bet-info-primary {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.fight-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 12px;
    width: fit-content;
    border: 1px solid transparent;
    line-height: 1.2;
    background: rgba(255, 255, 255, 0.1);
}

.fight-badge.meron {
    background: rgba(239, 68, 68, 0.1);
    color: var(--accent-red);
    border-color: rgba(239, 68, 68, 0.2);
}

.fight-badge.wala {
    background: rgba(59, 130, 246, 0.1);
    color: var(--accent-blue);
    border-color: rgba(59, 130, 246, 0.2);
}

.fight-badge.draw {
    background: rgba(34, 197, 94, 0.1);
    color: var(--accent-green);
    border-color: rgba(34, 197, 94, 0.2);
}

.fight-number {
    font-weight: 700;
}

.bet-action {
    font-weight: 600;
    letter-spacing: 0.5px;
}

.bet-amount-display {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.bet-amount-display .currency {
    font-size: 14px;
    color: var(--text-secondary);
    font-weight: 500;
}

.bet-amount-display .amount {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
}

.bet-status-wrapper {
    display: flex;
    align-items: flex-start;
}

.bet-status {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 12px;
    border: 1px solid transparent;
    line-height: 1.2;
}

.bet-status.win {
    background: rgba(16, 185, 129, 0.1);
    color: var(--accent-green);
    border-color: rgba(16, 185, 129, 0.2);
}

.bet-status.lose {
    background: rgba(239, 68, 68, 0.1);
    color: var(--accent-red);
    border-color: rgba(239, 68, 68, 0.2);
}

.bet-status.draw {
    background: rgba(134, 239, 172, 0.1);
    color: var(--accent-green);
    border-color: rgba(134, 239, 172, 0.2);
}

.bet-status.cancelled {
    background: rgba(107, 114, 128, 0.1);
    color: var(--text-muted);
    border-color: rgba(107, 114, 128, 0.2);
}

.bet-status.pending {
    background: rgba(139, 92, 246, 0.1);
    color: var(--accent-purple);
    border-color: rgba(139, 92, 246, 0.2);
}

.status-icon {
    font-size: 16px;
}

.status-text {
    font-weight: 600;
    letter-spacing: 0.5px;
}

.bet-card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px 12px;
    gap: 16px;
    flex-wrap: wrap;
}

.bet-timestamp,
.bet-reference {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-secondary);
}

.meta-icon {
    width: 16px;
    height: 16px;
    stroke-width: 1.5;
}

.bet-reference {
    background: var(--bg-secondary);
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid var(--border);
}

.ref-label {
    font-weight: 500;
}

.ref-number {
    font-family: 'Monaco', 'Menlo', monospace;
    font-weight: 600;
    color: var(--text-primary);
}

.copy-reference-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: transparent;
    border: 1px solid var(--border-light);
    border-radius: 4px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    margin-left: 6px;
}

.copy-reference-btn:hover {
    background: var(--hover);
    color: var(--text-primary);
    border-color: var(--accent-blue);
}

.copy-reference-btn svg {
    width: 12px;
    height: 12px;
}

.bet-details-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 10px 20px;
    background: transparent;
    border: none;
    border-top: 1px solid var(--border);
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bet-details-toggle:hover {
    background: var(--hover);
    color: var(--text-primary);
}

.toggle-icon {
    width: 16px;
    height: 16px;
    transition: transform 0.2s ease;
}

.bet-details-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border);
}

.bet-details-panel.expanded {
    max-height: 500px;
    padding: 20px 24px;
}

.details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    /* gap: 16px; */
}

.detail-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.detail-item label {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.detail-item value {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.detail-item .amount-win {
    color: var(--accent-green);
}

.detail-item .amount-lose {
    color: var(--accent-red);
}

.detail-item .amount-refund {
    color: var(--accent-green);
}

.detail-item .processing {
    color: var(--accent-purple);
    font-style: italic;
}



.bet-history-pagination {
    padding: 20px 24px;
    border-top: 1px solid var(--border);
    background: var(--bg-secondary);
}

/* Enhanced button hover effects */
.betting-options .payout button.bet:hover:not(.in-active) {
    background: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    color: #000;
    font-weight: 800;
  }
  
  /* Hover effect for bet amount display */

  /* Hover effect for the entire betting container */
  .betting-options:hover li:not(:hover) {
    opacity: 0.8;
  }
  
  /* Meron - Vibrant Red */
  .betting-options .meron{
    width:100%;
    background: linear-gradient(135deg, #ff1744 0%, #d50000 50%, #b71c1c 100%);
    position: relative;
  }
  
  .betting-options .meron:before{
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(255, 23, 68, 0.8) 0%, rgba(213, 0, 0, 0.9) 100%);
    content: '';
    position: absolute;
    opacity: 0.15;
    left: 0;
    top: 0;
    background-size: cover;
  }
  
  .betting-options .meron:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
  }
  
  /* Wala - Vibrant Blue */
  .betting-options .wala{
    width:100%;
    background: linear-gradient(135deg, #2196f3 0%, #1565c0 50%, #0d47a1 100%);
    position: relative;
  }
  
  .betting-options .wala:before{
    width:100%;
    height:100%;
    background: linear-gradient(135deg, rgba(33, 150, 243, 0.8) 0%, rgba(21, 101, 192, 0.9) 100%);
    content:'';
    position:absolute;
    opacity: 0.15;
    left:0;
    top:0;
    background-size: cover;
  }
  
  .betting-options .wala:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
  }
  
  /* Draw - Vibrant Green */
  .betting-options .draw{
    width:100%;
    background: linear-gradient(135deg, #4caf50 0%, #388e3c 50%, #1b5e20 100%);
    position: relative;
  }
  
  .betting-options .draw:before{
    width:100%;
    height:100%;
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.8) 0%, rgba(56, 142, 60, 0.9) 100%);
    content:'';
    position:absolute;
    opacity: 0.15;
    left:0;
    top:0;
    background-size: cover;
  }
  
  .betting-options .draw:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
  }
  
  .betting-options .draw .bid-main{
    position: relative;
    z-index: 2;
  }

/* Responsive Design */
@media (max-width: 768px) {
    .bet-history-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 20px;
    }
    
    .bet-card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        padding: 16px 20px 12px;
    }
    
    .bet-card-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 0 20px 12px;
    }
    
    .bet-amount-display .amount {
        font-size: 20px;
    }
    
    .details-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .bet-details-panel.expanded {
        padding: 16px 20px;
    }
    
    .bet-details-toggle {
        padding: 12px 20px;
    }
}

@media (max-width: 480px) {
    .bet-history-container {
        border-radius: 12px;
        margin: 0 -8px;
    }
    
    .bet-history-header {
        padding: 16px;
    }
    
    .bet-history-title {
        font-size: 18px;
    }
    
    .bet-card-header {
        padding: 12px 16px;
    }
    
    .bet-card-meta {
        padding: 0 16px 12px;
    }
    
    .bet-details-toggle {
        padding: 10px 16px;
    }
    
    .bet-details-panel.expanded {
        padding: 12px 16px;
    }
}


/* ===== POKER CHIP STYLES ===== */

.poker-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    align-items: center;
    padding: 20px 10px !important;
}

.chip-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.poker-chip {
    position: relative;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
    box-shadow: 
        0 8px 16px rgba(0, 0, 0, 0.3),
        0 4px 8px rgba(0, 0, 0, 0.2),
        inset 0 2px 4px rgba(255, 255, 255, 0.3),
        inset 0 -2px 4px rgba(0, 0, 0, 0.3);
    font-family: 'Arial Black', sans-serif;
    font-weight: 900;
    font-size: 14px;
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
    overflow: hidden;
}

.poker-chip:hover {
    transform: translateY(-4px) scale(1.05);
    box-shadow: 
        0 12px 24px rgba(0, 0, 0, 0.4),
        0 6px 12px rgba(0, 0, 0, 0.3),
        inset 0 2px 4px rgba(255, 255, 255, 0.4),
        inset 0 -2px 4px rgba(0, 0, 0, 0.4);
}

.poker-chip:active {
    transform: translateY(-2px) scale(1.02);
    transition: all 0.1s ease;
}

.chip-value {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.5px;
}

.chip-inner-ring {
    position: absolute;
    top: 6px;
    left: 6px;
    right: 6px;
    bottom: 6px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    z-index: 1;
}

.chip-inner-ring::before {
    content: '';
    position: absolute;
    top: 6px;
    left: 6px;
    right: 6px;
    bottom: 6px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
}

/* Individual chip colors and patterns */
.chip-container .chip-50 {
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 50%, #d63384 100%) !important;
    border: 3px solid #c92a2a;
}

.chip-container  .chip-50 .chip-inner-ring {
    border-color: rgba(255, 255, 255, 0.6);
}

.chip-container  .chip-200 {
    background: linear-gradient(135deg, #4ecdc4 0%, #45b7aa 50%, #339989 100%);
    border: 3px solid #2f7d70;
}

.chip-container .chip-200 .chip-inner-ring {
    border-color: rgba(255, 255, 255, 0.6);
}

.chip-container .chip-500 {
    background: linear-gradient(135deg, #a8e6cf 0%, #88d8a3 50%, #56c596 100%);
    border: 3px solid #4caf50;
    color: #fff;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.3);
}

.chip-500 .chip-inner-ring {
    border-color: rgba(27, 94, 32, 0.4);
}

.chip-container  .chip-1000 {
    background: linear-gradient(135deg, #ffd93d 0%, #ffcd02 50%, #f9ca24 100%);
    border: 3px solid #f39c12;
    color: #fff;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
}

.chip-container .chip-1000 .chip-inner-ring {
    border-color: rgba(139, 69, 19, 0.4);
}

.chip-container .chip-5000 {
    background: linear-gradient(135deg, #a29bfe 0%, #8b7cf6 50%, #7c3aed 100%);
    border: 3px solid #6d28d9;
}

.chip-container  .chip-5000 .chip-inner-ring {
    border-color: rgba(255, 255, 255, 0.6);
}

.chip-container  .chip-10000 {
    background: linear-gradient(135deg, #2c2c54 0%, #1a1a2e 50%, #16213e 100%);
    border: 3px solid #0f172a;
    position: relative;
}

.chip-container  .chip-10000::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent 30%, rgba(255, 215, 0, 0.3) 50%, transparent 70%);
    border-radius: 50%;
    z-index: 2;
}

.chip-container .chip-10000 .chip-inner-ring {
    border-color: rgba(255, 215, 0, 0.6);
}

.chip-container .chip-10000 .chip-value {
    color: #ffd700;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}



/* Chip patterns and decorative elements */
.poker-chip::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    z-index: 2;
}

/* Add small decorative dots around the edge */
.poker-chip::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    right: 3px;
    bottom: 3px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 20%, rgba(255, 255, 255, 0.3) 2px, transparent 2px),
                radial-gradient(circle at 80% 50%, rgba(255, 255, 255, 0.3) 2px, transparent 2px),
                radial-gradient(circle at 50% 80%, rgba(255, 255, 255, 0.3) 2px, transparent 2px),
                radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.3) 2px, transparent 2px);
    background-size: 100% 100%;
    z-index: 1;
}

.exact-bet .poker-chip {
    padding: 15px !important;
}

.bid-main .modal .modal-header {
    background: none !important;
}

/* Responsive design for mobile */
@media (max-width: 768px) {
    .poker-chips {
        gap: 8px;
        padding: 15px 5px;
    }
    
    .poker-chip {
        width: 60px;
        height: 60px;
        font-size: 11px;
    }
    
    .chip-value {
        font-size: 10px;
    }
}

@media (max-width: 480px) {
    .poker-chips {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px;
        justify-content: center;
        padding: 10px;
    }
    
    .poker-chip {
        width: 55px;
        height: 55px;
        border-radius: 50%;
        font-size: 10px;
    }
    
    .chip-inner-ring {
        top: 4px;
        left: 4px;
        right: 4px;
        bottom: 4px;
        border-radius: 50%;
    }
    
    .chip-inner-ring::before {
        top: 4px;
        left: 4px;
        right: 4px;
        bottom: 4px;
        border-radius: 50%;
    }
    
    .poker-chip::after {
        width: 14px;
        height: 14px;
        border-radius: 50%;
    }
}

/* Active/Selected state */
.poker-chip.selected {
    transform: translateY(-2px) scale(1.1);
    box-shadow: 
        0 0 20px rgba(59, 130, 246, 0.6),
        0 8px 16px rgba(0, 0, 0, 0.3),
        0 4px 8px rgba(0, 0, 0, 0.2),
        inset 0 2px 4px rgba(255, 255, 255, 0.4);
}

/* Animation for chip selection */
@keyframes chipPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.poker-chip.pulse {
    animation: chipPulse 0.6s ease-in-out;
}

/* Override any conflicting styles from default.css */
.exact-bet .poker-chips {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 20px 10px !important;
    list-style: none !important;
    margin: 0 !important;
}

.exact-bet .chip-container {
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important;
}

/* Ensure our mobile styles override default.css mobile styles */
@media (max-width: 750px) {
    .exact-bet .poker-chips {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        padding: 15px 5px !important;
    }
}

@media (max-width: 480px) {
    .exact-bet .poker-chips {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        justify-content: center !important;
        padding: 10px !important;
    }
}


/* ===== ENHANCED BETTING BUTTON STYLES ===== */

/* Base betting button styles */
.bet.btn {
    position: relative;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: 8px;
    border: 2px solid transparent;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    overflow: hidden;
}

.bet.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
    z-index: 1;
}

.bet.btn:hover::before {
    left: 100%;
}

/* Meron Button - Red Theme */
.bet.btn.bet-meron {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 50%, #991b1b 100%);
    color: #ffffff;
    border-color: #dc2626;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.bet.btn.bet-meron:hover:not(:disabled):not(.in-active) {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 50%, #b91c1c 100%);
    border-color: #ef4444;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.4);
}

.bet.btn.bet-meron:active:not(:disabled):not(.in-active) {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(220, 38, 38, 0.3);
}

/* Wala Button - Blue Theme */
.bet.btn.bet-wala {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 50%, #1e40af 100%);
    color: #ffffff;
    border-color: #2563eb;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.bet.btn.bet-wala:hover:not(:disabled):not(.in-active) {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 50%, #1d4ed8 100%);
    border-color: #3b82f6;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4);
}

.bet.btn.bet-wala:active:not(:disabled):not(.in-active) {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.3);
}

/* Draw Button - Green Theme */
.bet.btn.bet-draw {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 50%, #166534 100%);
    color: #ffffff;
    border-color: #16a34a;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.bet.btn.bet-draw:hover:not(:disabled):not(.in-active) {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 50%, #15803d 100%);
    border-color: #22c55e;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(22, 163, 74, 0.4);
}

.bet.btn.bet-draw:active:not(:disabled):not(.in-active) {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(22, 163, 74, 0.3);
}

/* Disabled/Inactive State */
.bet.btn.in-active,
.bet.btn:disabled {
    background: linear-gradient(135deg, #6b7280 0%, #4b5563 50%, #374151 100%) !important;
    color: #9ca3af !important;
    border: 2px solid #6b7280 !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2) !important;
    text-shadow: none !important;
    opacity: 0.6;
}

.bet.btn.in-active::before,
.bet.btn:disabled::before {
    display: none;
}

.bet.btn.in-active:hover,
.bet.btn:disabled:hover {
    transform: none !important;
    box-shadow: none !important;
}

/* Active/Selected State for when user has placed a bet */
.bet.btn.active {
    position: relative;
    transform: scale(1.05);
    font-weight: 900;
    font-size: 14px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
    border-width: 3px;
    z-index: 10;
}

.bet.btn.active::after {
    content: '✓ ACTIVE';
    position: absolute;
    top: -8px;
    right: -8px;
    background: #ffffff;
    color: #000000;
    font-size: 9px;
    font-weight: 900;
    padding: 2px 6px;
    border-radius: 12px;
    border: 2px solid;
    text-shadow: none;
    animation: activeIndicator 2s infinite;
    z-index: 11;
}

.betting-options li div.bet-amount span{
    margin: 0;
    text-decoration: none;
    color: #fff;
    background: none !important;
    opacity: 0.5;

  }

.betting-options li div.bet-amount.active span {
    background: none !important;
}


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

/* Meron Active State */
.bet.btn.bet-meron.active {
    background: linear-gradient(135deg, #ff1744 0%, #d50000 50%, #b71c1c 100%) !important;
    border-color: #ff1744 !important;
    color: #ffffff !important;
    animation: pulse-meron 1.5s infinite, glow-meron 2s infinite;
    box-shadow: 
        0 0 20px rgba(255, 23, 68, 0.8),
        0 0 40px rgba(255, 23, 68, 0.6),
        0 4px 15px rgba(0, 0, 0, 0.3);
}

.bet.btn.bet-meron.active::after {
    border-color: #ff1744;
    color: #d50000;
}

@keyframes pulse-meron {
    0%, 100% {
        box-shadow: 
            0 0 20px rgba(255, 23, 68, 0.8),
            0 0 40px rgba(255, 23, 68, 0.6),
            0 4px 15px rgba(0, 0, 0, 0.3);
    }
    50% {
        box-shadow: 
            0 0 30px rgba(255, 23, 68, 1),
            0 0 60px rgba(255, 23, 68, 0.8),
            0 6px 20px rgba(0, 0, 0, 0.4);
    }
}

@keyframes glow-meron {
    0%, 100% {
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8), 0 0 10px rgba(255, 23, 68, 0.5);
    }
    50% {
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8), 0 0 20px rgba(255, 23, 68, 0.8);
    }
}

/* Wala Active State */
.bet.btn.bet-wala.active {
    background: linear-gradient(135deg, #2196f3 0%, #1565c0 50%, #0d47a1 100%) !important;
    border-color: #2196f3 !important;
    color: #ffffff !important;
    animation: pulse-wala 1.5s infinite, glow-wala 2s infinite;
    box-shadow: 
        0 0 20px rgba(33, 150, 243, 0.8),
        0 0 40px rgba(33, 150, 243, 0.6),
        0 4px 15px rgba(0, 0, 0, 0.3);
}

.bet.btn.bet-wala.active::after {
    border-color: #2196f3;
    color: #1565c0;
}

@keyframes pulse-wala {
    0%, 100% {
        box-shadow: 
            0 0 20px rgba(33, 150, 243, 0.8),
            0 0 40px rgba(33, 150, 243, 0.6),
            0 4px 15px rgba(0, 0, 0, 0.3);
    }
    50% {
        box-shadow: 
            0 0 30px rgba(33, 150, 243, 1),
            0 0 60px rgba(33, 150, 243, 0.8),
            0 6px 20px rgba(0, 0, 0, 0.4);
    }
}

@keyframes glow-wala {
    0%, 100% {
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8), 0 0 10px rgba(33, 150, 243, 0.5);
    }
    50% {
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8), 0 0 20px rgba(33, 150, 243, 0.8);
    }
}

/* Draw Active State */
.bet.btn.bet-draw.active {
    background: linear-gradient(135deg, #4caf50 0%, #2e7d32 50%, #1b5e20 100%) !important;
    border-color: #4caf50 !important;
    color: #ffffff !important;
    animation: pulse-draw 1.5s infinite, glow-draw 2s infinite;
    box-shadow: 
        0 0 20px rgba(76, 175, 80, 0.8),
        0 0 40px rgba(76, 175, 80, 0.6),
        0 4px 15px rgba(0, 0, 0, 0.3);
}

.bet.btn.bet-draw.active::after {
    border-color: #4caf50;
    color: #2e7d32;
}

@keyframes pulse-draw {
    0%, 100% {
        box-shadow: 
            0 0 20px rgba(76, 175, 80, 0.8),
            0 0 40px rgba(76, 175, 80, 0.6),
            0 4px 15px rgba(0, 0, 0, 0.3);
    }
    50% {
        box-shadow: 
            0 0 30px rgba(76, 175, 80, 1),
            0 0 60px rgba(76, 175, 80, 0.8),
            0 6px 20px rgba(0, 0, 0, 0.4);
    }
}

@keyframes glow-draw {
    0%, 100% {
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8), 0 0 10px rgba(76, 175, 80, 0.5);
    }
    50% {
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8), 0 0 20px rgba(76, 175, 80, 0.8);
    }
}

/* Loading state */
.bet.btn.loading {
    pointer-events: none;
    position: relative;
}

.bet.btn.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border: 2px solid transparent;
    border-top: 2px solid #ffffff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    z-index: 2;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.bet.btn.loading .bet-text {
    opacity: 0;
}

/* Enhanced text visibility for active buttons */
.bet.btn.active {
    text-transform: uppercase;
    letter-spacing: 1px;
    font-family: 'Arial Black', Arial, sans-serif;
}

.bet.btn.active:hover {
    transform: scale(1.08) !important;
}

/* Additional visual emphasis */
.bet.btn.active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%);
    animation: shine 3s infinite;
    z-index: 1;
}

@keyframes shine {
    0% { transform: translateX(-100%) rotate(45deg); }
    100% { transform: translateX(100%) rotate(45deg); }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .bet.btn {
        font-size: 12px;
        padding: 6px 12px;
        border-radius: 6px;
    }
    
    .bet.btn.active {
        font-size: 13px;
        transform: scale(1.03);
    }
    
    .bet.btn.active::after {
        font-size: 8px;
        padding: 1px 4px;
        top: -6px;
        right: -6px;
    }
}

@media (max-width: 480px) {
    .bet.btn {
        font-size: 11px;
        padding: 5px 10px;
        border-radius: 5px;
    }
    
    .bet.btn::before {
        display: none; /* Disable shine effect on very small screens */
    }
    
    .bet.btn.active {
        font-size: 12px;
        transform: scale(1.02);
        letter-spacing: 0.5px;
    }
    
    .bet.btn.active::after {
        content: '✓';
        font-size: 10px;
        padding: 2px 4px;
        top: -5px;
        right: -5px;
        border-radius: 50%;
        width: 16px;
        height: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .bet.btn.active::before {
        display: block; /* Re-enable shine for active buttons on mobile */
    }
}

/* Enhanced active state visibility */
.bet.btn.active {
    outline: 3px solid rgba(255, 255, 255, 0.5);
    outline-offset: 2px;
}

.bet.btn.bet-meron.active {
    outline-color: rgba(255, 23, 68, 0.8);
}

.bet.btn.bet-wala.active {
    outline-color: rgba(33, 150, 243, 0.8);
}

.bet.btn.bet-draw.active {
    outline-color: rgba(76, 175, 80, 0.8);
}

/* Text enhancement for better readability */
.bet.btn.active {
    -webkit-text-stroke: 0.5px rgba(0, 0, 0, 0.3);
    text-stroke: 0.5px rgba(0, 0, 0, 0.3);
}

/* Pulsing border effect */
.bet.btn.active {
    border-style: solid;
    animation: pulse-border 1s infinite alternate;
}

@keyframes pulse-border {
    0% {
        border-width: 3px;
    }
    100% {
        border-width: 4px;
    }
}

.payout {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 10px;
    padding: 12px;
    margin: 8px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Override default styles to ensure our enhanced styles take precedence */
.payout .bet.btn.bet-meron:not(.in-active):not(:disabled) {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 50%, #991b1b 100%) !important;
    opacity: 1 !important;
    color: #ffffff !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 4px 15px rgba(220, 38, 38, 0.4) !important;
}

.payout .bet.btn.bet-wala:not(.in-active):not(:disabled) {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 50%, #1e40af 100%) !important;
    opacity: 1 !important;
    color: #ffffff !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 4px 15px rgba(37, 99, 235, 0.4) !important;
}

.payout .bet.btn.bet-draw:not(.in-active):not(:disabled) {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 50%, #166534 100%) !important;
    opacity: 1 !important;
    color: #ffffff !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 4px 15px rgba(22, 163, 74, 0.4) !important;
}

/* Enhanced hover effects for payout buttons */
.payout .bet.btn.bet-meron:hover:not(.in-active):not(:disabled) {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 50%, #b91c1c 100%) !important;
    transform: translateY(-2px) scale(1.02) !important;
    box-shadow: 0 8px 25px rgba(220, 38, 38, 0.6) !important;
    border: 2px solid rgba(255, 255, 255, 0.5) !important;
}

.payout .bet.btn.bet-wala:hover:not(.in-active):not(:disabled) {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 50%, #1d4ed8 100%) !important;
    transform: translateY(-2px) scale(1.02) !important;
    box-shadow: 0 8px 25px rgba(37, 99, 235, 0.6) !important;
    border: 2px solid rgba(255, 255, 255, 0.5) !important;
}

.payout .bet.btn.bet-draw:hover:not(.in-active):not(:disabled) {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 50%, #15803d 100%) !important;
    transform: translateY(-2px) scale(1.02) !important;
    box-shadow: 0 8px 25px rgba(22, 163, 74, 0.6) !important;
    border: 2px solid rgba(255, 255, 255, 0.5) !important;
}

/* Ensure active state overrides all other states */
.payout .bet.btn.active.bet-meron {
    background: linear-gradient(135deg, #ff1744 0%, #d50000 50%, #b71c1c 100%) !important;
    border: 2px solid #ff1744 !important;
    color: #ffffff !important;
    box-shadow: 0 6px 20px rgba(255, 23, 68, 0.5) !important;
}

.payout .bet.btn.active.bet-wala {
    background: linear-gradient(135deg, #2196f3 0%, #1565c0 50%, #0d47a1 100%) !important;
    border: 2px solid #2196f3 !important;
    color: #ffffff !important;
    box-shadow: 0 6px 20px rgba(33, 150, 243, 0.5) !important;
}

.payout .bet.btn.active.bet-draw {
    background: linear-gradient(135deg, #4caf50 0%, #2e7d32 50%, #1b5e20 100%) !important;
    border: 2px solid #4caf50 !important;
    color: #ffffff !important;
    box-shadow: 0 6px 20px rgba(76, 175, 80, 0.5) !important;
}

/* Additional enhancements for better button visibility */
.payout .bet.btn {
    font-weight: 700 !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    padding: 12px 24px !important;
    border-radius: 8px !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
    overflow: hidden !important;
    z-index: 10 !important;
}

/* Add subtle animation effect */
.payout .bet.btn: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;
    transition: left 0.5s !important;
    z-index: -1 !important;
}

.payout .bet.btn:hover:before:not(.in-active):not(:disabled) {
    left: 100% !important;
}

/* Ensure buttons are always on top of background elements */
.betting-options .payout {
    position: relative !important;
    z-index: 15 !important;
}

.betting-options li div.bet-amount span {
    background-color: transparent !important;
}


/* Mobile Responsive Styles for Betting Buttons */
@media (max-width: 768px) {
    /* Tablet and smaller screens */
    .payout .bet.btn {
        font-size: 12px !important;
        padding: 10px 18px !important;
        border-radius: 6px !important;
        letter-spacing: 0.6px !important;
        margin-top: 6px !important;
    }
    
    /* Adjust hover effects for tablets */
    .payout .bet.btn:hover:not(.in-active):not(:disabled) {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
    }
    
    /* Optimize betting options layout for tablets */
    .betting-options li {
        padding: 10px 0px 25px 0px !important;
    }
    
    .betting-options li h4 {
        font-size: 16px !important;
        margin-bottom: 4px !important;
    }
    
    .betting-options li span {
        font-size: 14px !important;
    }
    
    .betting-options li .payout span {
        font-size: 16px !important;
    }
}

@media (max-width: 480px) {
    /* Mobile phones */
    .payout .bet.btn {
        font-size: 11px !important;
        padding: 6px 12px !important;
        border-radius: 5px !important;
        letter-spacing: 0.4px !important;
        margin-top: 2px !important;
        min-height: 32px !important; /* Ensure touch-friendly minimum size */
        min-width: 75px !important;
    }
    
    /* Disable complex animations on mobile for better performance */
    .payout .bet.btn:before {
        display: none !important;
    }
    
    /* Simplify hover effects for mobile */
    .payout .bet.btn:hover:not(.in-active):not(:disabled) {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
    }
    
    /* Optimize betting options for mobile */
    .betting-options {
        margin: 0 0 20px 0 !important;
    }
    
    .betting-options li {
        padding: 8px 0px 20px 0px !important;
        border-radius: 8px !important;
    }
    
    .betting-options li h4 {
        font-size: 14px !important;
        margin-bottom: 3px !important;
        padding: 6px 10px !important;
    }
    
    .betting-options li span {
        font-size: 12px !important;
        padding: 2px 6px !important;
    }
    
    .betting-options li .payout span {
        font-size: 14px !important;
    }
    
    .betting-options li .payout p {
        font-size: 10px !important;
        margin-bottom: 2px !important;
    }
    
    /* Optimize bet amount display for mobile */
    .betting-options li div.bet-amount {
        bottom: -18px !important;
        padding: 4px 8px !important;
        border-radius: 10px !important;
        min-height: 20px !important;
    }
    
    .betting-options li div.bet-amount span {
        font-size: 12px !important;
        background-color: transparent !important;
    }
    
    .betting-options li div.bet-amount.active span {
        font-size: 13px !important;
        font-weight: 700 !important;
    }
}

@media (max-width: 320px) {
    /* Very small screens */
    .payout .bet.btn {
        font-size: 10px !important;
        padding: 6px 10px !important;
        letter-spacing: 0.2px !important;
        min-width: 70px !important;
        min-height: 32px !important;
    }
    
    .betting-options li h4 {
        font-size: 13px !important;
    }
    
    .betting-options li span {
        font-size: 11px !important;
    }
    
    .betting-options li .payout span {
        font-size: 13px !important;
    }
}

/* Touch-friendly improvements for mobile */
@media (hover: none) and (pointer: coarse) {
    /* Mobile touch devices */
    .payout .bet.btn {
        min-height: 44px !important; /* iOS recommended touch target size */
        min-width: 44px !important;
        padding: 10px 16px !important;
    }
    
    /* Remove hover effects on touch devices */
    .payout .bet.btn:hover:not(.in-active):not(:disabled) {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
    }
    
    /* Add active/pressed state for touch feedback */
    .payout .bet.btn:active:not(.in-active):not(:disabled) {
        opacity: 0.9 !important;
    }
}

/* Landscape orientation adjustments */
@media (max-width: 768px) and (orientation: landscape) {
    .betting-options li {
        padding: 6px 0px 18px 0px !important;
    }
    
    .payout .bet.btn {
        font-size: 10px !important;
        padding: 4px 10px !important;
        margin-top: 2px !important;
    }
    
    .betting-options li h4 {
        font-size: 13px !important;
        margin-bottom: 2px !important;
    }
}