/* Lightning-themed custom styles */
:root {
    --lightning-yellow: #f7931a;
    --lightning-blue: #00d4ff;
}

.text-lightning {
    color: var(--lightning-yellow) !important;
}

.bg-lightning {
    background-color: var(--lightning-yellow) !important;
}

/* Custom animations */
@keyframes lightning-pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.lightning-pulse {
    animation: lightning-pulse 2s infinite;
}

/* QR Code styling */
#qr-code {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
}

#qr-code canvas {
    border-radius: 0.375rem;
    background: white;
    padding: 1rem;
}

/* Loading states */
.loading {
    opacity: 0.6;
    pointer-events: none;
}

/* Transaction and invoice list styling */
.transaction-item,
.invoice-item {
    border-left: 4px solid transparent;
    transition: all 0.3s ease;
}

.transaction-item:hover,
.invoice-item:hover {
    border-left-color: var(--bs-primary);
    background-color: var(--bs-gray-100);
}

.transaction-incoming {
    border-left-color: var(--bs-success) !important;
}

.transaction-outgoing {
    border-left-color: var(--bs-danger) !important;
}

.invoice-paid {
    border-left-color: var(--bs-success) !important;
}

.invoice-pending {
    border-left-color: var(--bs-warning) !important;
}

.invoice-expired {
    border-left-color: var(--bs-secondary) !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .display-4 {
        font-size: 2rem;
    }
    
    .display-5 {
        font-size: 1.75rem;
    }
}

/* Custom scrollbar for data content */
#data-content {
    max-height: 400px;
    overflow-y: auto;
}

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

#data-content::-webkit-scrollbar-track {
    background: var(--bs-gray-200);
    border-radius: 3px;
}

#data-content::-webkit-scrollbar-thumb {
    background: var(--bs-gray-400);
    border-radius: 3px;
}

#data-content::-webkit-scrollbar-thumb:hover {
    background: var(--bs-gray-500);
}

/* Wallet connection styles */
.wallet-option {
    transition: all 0.2s ease;
    border-radius: 10px;
}

.wallet-option:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.wallet-option i {
    min-width: 2rem;
}

#wallet-connection-card {
    border-left: 4px solid #0d6efd;
    background: linear-gradient(135deg, rgba(13, 110, 253, 0.05) 0%, rgba(13, 110, 253, 0.02) 100%);
}

#wallet-connection-card.connected {
    border-left-color: #198754;
    background: linear-gradient(135deg, rgba(25, 135, 84, 0.05) 0%, rgba(25, 135, 84, 0.02) 100%);
}