/* Custom styles for BTC Checkout */

/* Bitcoin orange color variables */
:root {
    --btc-orange: #F7931A;
    --btc-orange-dark: #E8851A;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: var(--btc-orange);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--btc-orange-dark);
}

/* Dark mode scrollbar */
.dark ::-webkit-scrollbar-track {
    background: #374151;
}

/* Focus styles */
.focus\:ring-btc-orange:focus {
    --tw-ring-color: var(--btc-orange);
}

/* Custom animations */
@keyframes pulse-orange {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.animate-pulse-orange {
    animation: pulse-orange 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Bitcoin symbol styling */
.btc-symbol {
    font-family: 'Cascadia Code', sans-serif;
    font-weight: bold;
}

/* Payment status badges */
.status-pending {
    background-color: #FEF3C7;
    color: #92400E;
}

.status-confirmed {
    background-color: #D1FAE5;
    color: #065F46;
}

.status-failed {
    background-color: #FEE2E2;
    color: #991B1B;
}

.status-expired {
    background-color: #F3F4F6;
    color: #374151;
}

/* Dark mode status badges */
.dark .status-pending {
    background-color: #92400E;
    color: #FEF3C7;
}

.dark .status-confirmed {
    background-color: #065F46;
    color: #D1FAE5;
}

.dark .status-failed {
    background-color: #991B1B;
    color: #FEE2E2;
}

.dark .status-expired {
    background-color: #374151;
    color: #F3F4F6;
}

/* QR Code container */
.qr-container {
    background: white;
    padding: 1rem;
    border-radius: 0.5rem;
    display: inline-block;
}

/* Loading spinner */
.spinner {
    border: 2px solid #f3f3f3;
    border-top: 2px solid var(--btc-orange);
    border-radius: 50%;
    width: 20px;
    height: 20px;
    animation: spin 1s linear infinite;
}

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

/* Form validation styles */
.form-error {
    border-color: #EF4444;
}

.form-error:focus {
    --tw-ring-color: #EF4444;
}

/* Success message */
.alert-success {
    background-color: #D1FAE5;
    border-color: #10B981;
    color: #065F46;
}

.dark .alert-success {
    background-color: #065F46;
    border-color: #10B981;
    color: #D1FAE5;
}

/* Error message */
.alert-error {
    background-color: #FEE2E2;
    border-color: #EF4444;
    color: #991B1B;
}

.dark .alert-error {
    background-color: #991B1B;
    border-color: #EF4444;
    color: #FEE2E2;
}

/* Warning message */
.alert-warning {
    background-color: #FEF3C7;
    border-color: #F59E0B;
    color: #92400E;
}

.dark .alert-warning {
    background-color: #92400E;
    border-color: #F59E0B;
    color: #FEF3C7;
}

/* Info message */
.alert-info {
    background-color: #DBEAFE;
    border-color: #3B82F6;
    color: #1E40AF;
}

.dark .alert-info {
    background-color: #1E40AF;
    border-color: #3B82F6;
    color: #DBEAFE;
}