/* ======================================== */
/* FUTURISTIC SCI-FI BUTTON SYSTEM v2.0   */
/* ======================================== */

.sci-fi-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px; /* Mobile first - smaller padding */
    border: none;
    border-radius: 6px;
    font-family: 'Orbitron', 'Exo 2', monospace;
    font-weight: 600;
    font-size: 12px; /* Mobile first - smaller font */
    text-transform: uppercase;
    letter-spacing: 1px; /* Mobile first - less letter spacing */
    text-decoration: none;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    z-index: 1;
    
    /* Metallic base texture */
    background: linear-gradient(145deg, #1a1a2e 0%, #16213e 50%, #0f1419 100%);
    box-shadow: 
        0 4px 15px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        inset 0 -1px 0 rgba(0, 0, 0, 0.3);
    
    /* Prevent text selection */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Primary Neon Blue Button */
.sci-fi-btn.btn-neon-blue {
    color: #ffffff;
    border: 1px solid #00d4ff;
    background: linear-gradient(145deg, #001a2e 0%, #002844 50%, #00141f 100%);
    box-shadow: 
        0 0 20px rgba(0, 212, 255, 0.3),
        0 4px 15px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(0, 212, 255, 0.2),
        inset 0 -1px 0 rgba(0, 0, 0, 0.3);
}

.sci-fi-btn.btn-neon-blue::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(0, 212, 255, 0.4) 50%, 
        transparent 100%);
    transition: left 0.6s ease;
    z-index: -1;
}

.sci-fi-btn.btn-neon-blue:hover {
    transform: translateY(-2px);
    color: #ffffff;
    border-color: #33ddff;
    background: linear-gradient(145deg, #002a3e 0%, #003854 50%, #00242f 100%);
    box-shadow: 
        0 0 30px rgba(0, 212, 255, 0.5),
        0 8px 25px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(0, 212, 255, 0.3),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2);
}

.sci-fi-btn.btn-neon-blue:hover::before {
    left: 100%;
}

.sci-fi-btn.btn-neon-blue:active {
    transform: translateY(0);
    box-shadow: 
        0 0 20px rgba(0, 212, 255, 0.6),
        0 2px 8px rgba(0, 0, 0, 0.5),
        inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Secondary Neon Orange Button */
.sci-fi-btn.btn-neon-orange {
    color: #ffffff;
    border: 1px solid #ff6b35;
    background: linear-gradient(145deg, #2e1a00 0%, #442800 50%, #1f1400 100%);
    box-shadow: 
        0 0 20px rgba(255, 107, 53, 0.3),
        0 4px 15px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 107, 53, 0.2),
        inset 0 -1px 0 rgba(0, 0, 0, 0.3);
}

.sci-fi-btn.btn-neon-orange::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(255, 107, 53, 0.4) 50%, 
        transparent 100%);
    transition: left 0.6s ease;
    z-index: -1;
}

.sci-fi-btn.btn-neon-orange:hover {
    transform: translateY(-2px);
    color: #ffffff;
    border-color: #ff8855;
    background: linear-gradient(145deg, #3e2a00 0%, #543800 50%, #2f2400 100%);
    box-shadow: 
        0 0 30px rgba(255, 107, 53, 0.5),
        0 8px 25px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 107, 53, 0.3),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2);
}

.sci-fi-btn.btn-neon-orange:hover::before {
    left: 100%;
}

.sci-fi-btn.btn-neon-orange:active {
    transform: translateY(0);
    box-shadow: 
        0 0 20px rgba(255, 107, 53, 0.6),
        0 2px 8px rgba(0, 0, 0, 0.5),
        inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Button Sizes */
.sci-fi-btn.btn-sm {
    padding: 10px 20px;
    font-size: 12px;
    letter-spacing: 1px;
}

.sci-fi-btn.btn-lg {
    padding: 18px 36px;
    font-size: 16px;
    letter-spacing: 2px;
}

.sci-fi-btn.btn-xl {
    padding: 22px 44px;
    font-size: 18px;
    letter-spacing: 2.5px;
}

/* Button with Icon */
.sci-fi-btn .btn-icon {
    margin-right: 8px;
    font-size: 1.1em;
    filter: drop-shadow(0 0 3px currentColor);
}

.sci-fi-btn .btn-icon.icon-right {
    margin-right: 0;
    margin-left: 8px;
}

/* Loading State */
.sci-fi-btn.loading {
    pointer-events: none;
    opacity: 0.8;
}

.sci-fi-btn.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top: 2px solid #ffffff;
    border-radius: 50%;
    animation: sci-fi-btn-spin 1s linear infinite;
}

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

/* Disabled State */
.sci-fi-btn:disabled,
.sci-fi-btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
    transform: none !important;
    box-shadow: 
        0 2px 8px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2) !important;
}

/* Button Group */
.sci-fi-btn-group {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.sci-fi-btn-group .sci-fi-btn {
    margin: 0;
}

/* Mobile First Responsive Design */
/* Tablet sizes */
@media (min-width: 768px) {
    .sci-fi-btn {
        padding: 12px 20px;
        font-size: 13px;
        letter-spacing: 1.2px;
        border-radius: 7px;
    }
    
    .sci-fi-btn.btn-sm {
        padding: 8px 16px;
        font-size: 11px;
    }
    
    .sci-fi-btn.btn-lg {
        padding: 16px 28px;
        font-size: 15px;
    }
    
    .sci-fi-btn.btn-xl {
        padding: 20px 36px;
        font-size: 17px;
    }
}

/* Desktop sizes */
@media (min-width: 1024px) {
    .sci-fi-btn {
        padding: 14px 28px;
        font-size: 14px;
        letter-spacing: 1.5px;
        border-radius: 8px;
    }
    
    .sci-fi-btn.btn-sm {
        padding: 10px 20px;
        font-size: 12px;
    }
    
    .sci-fi-btn.btn-lg {
        padding: 18px 36px;
        font-size: 16px;
    }
    
    .sci-fi-btn.btn-xl {
        padding: 22px 44px;
        font-size: 18px;
        letter-spacing: 2.5px;
    }
}

/* Small mobile adjustments */
@media (max-width: 480px) {
    .sci-fi-btn {
        padding: 8px 12px;
        font-size: 11px;
        letter-spacing: 0.8px;
    }
    
    .sci-fi-btn-group {
        gap: 6px;
    }
}

@media (max-width: 480px) {
    .sci-fi-btn {
        width: 100%;
        justify-content: center;
        padding: 14px 20px;
    }
    
    .sci-fi-btn-group {
        flex-direction: column;
        width: 100%;
    }
    
    .sci-fi-btn-group .sci-fi-btn {
        width: 100%;
        margin-bottom: 8px;
    }
    
    .sci-fi-btn-group .sci-fi-btn:last-child {
        margin-bottom: 0;
    }
}

/* Special Effect Classes */
.sci-fi-btn.pulse {
    animation: sci-fi-pulse 2s infinite;
}

@keyframes sci-fi-pulse {
    0%, 100% {
        box-shadow: 
            0 0 20px rgba(0, 212, 255, 0.3),
            0 4px 15px rgba(0, 0, 0, 0.4);
    }
    50% {
        box-shadow: 
            0 0 30px rgba(0, 212, 255, 0.6),
            0 4px 15px rgba(0, 0, 0, 0.4);
    }
}

.sci-fi-btn.btn-neon-orange.pulse {
    animation: sci-fi-pulse-orange 2s infinite;
}

@keyframes sci-fi-pulse-orange {
    0%, 100% {
        box-shadow: 
            0 0 20px rgba(255, 107, 53, 0.3),
            0 4px 15px rgba(0, 0, 0, 0.4);
    }
    50% {
        box-shadow: 
            0 0 30px rgba(255, 107, 53, 0.6),
            0 4px 15px rgba(0, 0, 0, 0.4);
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .sci-fi-btn {
        border-width: 2px;
    }
    
    .sci-fi-btn.btn-neon-blue {
        color: #ffffff;
        background: #001122;
        border-color: #00d4ff;
    }
    
    .sci-fi-btn.btn-neon-orange {
        color: #ffffff;
        background: #221100;
        border-color: #ff6b35;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .sci-fi-btn {
        transition: none;
    }
    
    .sci-fi-btn::before {
        transition: none;
    }
    
    .sci-fi-btn.pulse {
        animation: none;
    }
    
    .sci-fi-btn:hover {
        transform: none;
    }
}