  ﻿/* Button State Enhancements */
.btn {
    position: relative;
    transition: all 0.2s ease-in-out;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
}

.btn:disabled {
    pointer-events: none;
    opacity: 0.8;
}

.btn svg {
    margin-right: 8px;
    flex-shrink: 0;
}

.btn.loading {
    opacity: 0.8;
    cursor: not-allowed;
}

.btn.success {
    background-color: #dcfce7 !important;
    color: #16a34a !important;
    border-color: #22c55e !important;
}

.btn.error {
    background-color: #fef2f2 !important;
    color: #dc2626 !important;
    border-color: #ef4444 !important;
}

/* Button spinner animation */
@keyframes button-spin {
    from { 
        transform: rotate(0deg); 
    }
    to { 
        transform: rotate(360deg); 
    }
}

.button-spinner {
    animation: button-spin 1s linear infinite;
    margin-right: 8px !important;
}

/* Success and error icon styles */
.btn svg[stroke="#22c55e"] {
    color: #22c55e;
    stroke: #22c55e;
}

.btn svg[stroke="#ef4444"] {
    color: #ef4444;
    stroke: #ef4444;
}

.loading .loading-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: currentColor;
    animation: button-spin 1s linear infinite;
    margin-right: 8px;
}

.status-message {
    border-radius: 6px;
    padding: 12px 16px;
    margin-bottom: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    line-height: 1.4;
    box-shadow: 2px 3px 6px rgba(0, 0, 0, 0.1);
}

.status-message.status-success {
    background-color: #dcfce7;
    color: black;
}

    .status-message.status-success::before {
        content: '✓';
        font-size: 16px;
        color: #006f29;
        position: relative;
        margin-right: 5px;
    }


    .status-message.status-danger {
        background-color: #fef2f2;
        color: #910000;
    }

    .status-message.status-warning {
        background-color: #fef3c7;
        color: #712e06;
    }

    .status-message.status-info {
        background-color: #ededed;
    }

.status-message svg {
    margin-right: 8px;
    flex-shrink: 0;
}

/* Hide empty status messages */
.status-message:empty {
    display: none !important;
}

/* Ensure buttons maintain consistent height */
.btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn span {
    display: inline-block;
}

/* Rate limit specific styling */
.status-message.rate-limited {
    background-color: #fff7ed;
    color: #ea580c;
    border: 1px solid #fb923c;
}

/* Button hover states for interactive buttons */
.btn:not(:disabled):not(.loading):not(.success):not(.error):hover {
    opacity: 0.9;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Remove blue focus - use original focus styling */
.btn:focus {
    outline: none;
    box-shadow: none; /* Remove blue focus */
}

/* Ensure success and error states are clearly visible */
.btn.success:disabled {
    opacity: 1 !important;
}

.btn.error:disabled {
    opacity: 1 !important;
}