/**
 * Button Components - Matrix Theme
 * All button styles and variants
 */

/* Primary Matrix Button */
.btn-matrix-primary {
    background-color: var(--matrix-green) !important;
    color: #000000 !important; /* Force black text on green background */
    border-color: var(--matrix-green) !important;
    font-weight: 700 !important;
    text-shadow: none !important; /* Remove any text shadows that might interfere */
    position: relative;
    z-index: 1;
    font-family: 'Courier New', monospace;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: none !important;
    border-radius: 4px;
    padding: 0.75rem 1.5rem;
    transition: all var(--matrix-duration-300) var(--matrix-ease-out);
    transform: scale(1);
    overflow: hidden;
    cursor: pointer;
    box-shadow: 
        0 0 5px rgba(0, 255, 65, 0.2),
        0 2px 8px rgba(0, 0, 0, 0.2);
}

.btn-matrix-primary:hover {
    background-color: var(--matrix-glow-secondary) !important;
    color: #000000 !important; /* Maintain black text on hover */
    transform: scale(1.02) translateY(-2px);
    box-shadow: 
        0 0 15px rgba(0, 255, 65, 0.4),
        0 0 25px rgba(0, 255, 65, 0.2),
        0 4px 20px rgba(0, 0, 0, 0.3);
    text-shadow: 0 0 8px rgba(0, 0, 0, 0.8);
}

.btn-matrix-primary:active {
    transform: scale(0.98) translateY(0px);
    transition: all var(--matrix-duration-100) var(--matrix-ease-in);
    box-shadow: 
        0 0 10px rgba(0, 255, 65, 0.3),
        0 1px 4px rgba(0, 0, 0, 0.4);
}

.btn-matrix-primary:focus {
    outline: 2px solid var(--matrix-green) !important;
    outline-offset: 2px !important;
    border: none !important;
}

/* Secondary Matrix Button */
.btn-matrix-secondary {
    background-color: transparent !important;
    color: var(--matrix-green) !important;
    border: 2px solid var(--matrix-green) !important;
    font-weight: 600 !important;
    font-family: 'Courier New', monospace;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 4px;
    padding: 0.75rem 1.5rem;
    transition: all var(--matrix-duration-300) var(--matrix-ease-out);
    transform: scale(1);
    overflow: hidden;
    cursor: pointer;
    position: relative;
    box-shadow: 
        0 0 5px rgba(0, 255, 65, 0.1),
        0 2px 8px rgba(0, 0, 0, 0.2);
}

.btn-matrix-secondary:hover {
    background-color: rgba(0, 255, 65, 0.05) !important;
    color: var(--matrix-glow-secondary) !important;
    border-color: var(--matrix-glow-secondary) !important;
    transform: scale(1.02) translateY(-2px);
    box-shadow: 
        0 0 15px rgba(0, 255, 65, 0.3),
        0 0 25px rgba(0, 255, 65, 0.15),
        0 4px 20px rgba(0, 0, 0, 0.3);
    text-shadow: 0 0 8px rgba(0, 255, 65, 0.5);
}

.btn-matrix-secondary:active {
    transform: scale(0.98) translateY(0px);
    transition: all var(--matrix-duration-100) var(--matrix-ease-in);
    background-color: rgba(0, 255, 65, 0.08) !important;
    box-shadow: 
        0 0 10px rgba(0, 255, 65, 0.2),
        0 1px 4px rgba(0, 0, 0, 0.4);
}

.btn-matrix-secondary:focus {
    outline: 2px solid var(--matrix-green) !important;
    outline-offset: 2px !important;
}

/* Navigation Button Fixes */
.navbar .btn,
.navbar-nav .btn,
.nav .btn,
nav .btn,
header .btn {
    border: none !important;
    box-shadow: none !important;
}

.navbar .btn:focus,
.navbar-nav .btn:focus,
.nav .btn:focus,
nav .btn:focus,
header .btn:focus {
    border: none !important;
    outline: 2px solid var(--matrix-green) !important;
    outline-offset: 2px !important;
    box-shadow: none !important;
}

.navbar .btn-matrix-primary,
.navbar-nav .btn-matrix-primary,
.nav .btn-matrix-primary {
    border: none !important;
}

.navbar .btn-matrix-secondary,
.navbar-nav .btn-matrix-secondary,
.nav .btn-matrix-secondary {
    border: 2px solid var(--matrix-green) !important;
}

/* Button Group Spacing */
.btn-group {
    display: flex !important;
    gap: 1rem !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
}

/* Mobile Button Styles */
@media (max-width: 768px) {
    .btn-group {
        flex-direction: column !important;
        width: 100% !important;
    }
    
    .btn-matrix-primary,
    .btn-matrix-secondary {
        width: 100% !important;
        padding: 1rem !important;
        font-size: 0.9rem !important;
    }
}

/* Performance & Accessibility Optimizations */

/* Reduced motion support for animations */
@media (prefers-reduced-motion: reduce) {
    .btn-matrix-primary,
    .btn-matrix-secondary {
        transition: none !important;
        animation: none !important;
    }
    
    .btn-matrix-primary:hover,
    .btn-matrix-secondary:hover {
        transform: none !important;
    }
    
    .btn-matrix-primary:active,
    .btn-matrix-secondary:active {
        transform: none !important;
    }
}

/* Enhanced focus states for better accessibility */
.btn-matrix-primary:focus-visible,
.btn-matrix-secondary:focus-visible {
    outline: 3px solid var(--matrix-glow-secondary) !important;
    outline-offset: 2px !important;
    box-shadow: 
        0 0 0 4px rgba(0, 255, 65, 0.2),
        0 0 15px rgba(0, 255, 65, 0.4) !important;
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
    /* Mobile/touch devices - reduce hover intensity */
    .btn-matrix-primary:hover,
    .btn-matrix-secondary:hover {
        transform: scale(1.01) translateY(-1px);
        box-shadow: 
            0 0 12px rgba(0, 255, 65, 0.3),
            0 2px 12px rgba(0, 0, 0, 0.25);
    }
}

/* Performance optimization: will-change for animated elements */
.btn-matrix-primary,
.btn-matrix-secondary {
    will-change: transform, box-shadow;
}

/* Remove will-change after animation to free resources */
.btn-matrix-primary:not(:hover):not(:active),
.btn-matrix-secondary:not(:hover):not(:active) {
    will-change: auto;
}

/* High Contrast Support */
@media (prefers-contrast: high) {
    .btn-matrix-primary {
        background-color: #00ff41 !important;
        color: #000000 !important;
        border: 2px solid #000000 !important;
    }
    
    .btn-matrix-secondary {
        border-width: 3px !important;
        color: #00ff41 !important;
    }
}