/* Component Styles for Botija Crypto */

.modal {
    animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.toast {
    animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.btn-primary {
    @apply px-4 py-2 bg-green-600 hover:bg-green-700 rounded-lg font-medium transition;
}

.btn-danger {
    @apply px-4 py-2 bg-red-600 hover:bg-red-700 rounded-lg font-medium transition;
}

.btn-secondary {
    @apply px-4 py-2 bg-gray-600 hover:bg-gray-700 rounded-lg font-medium transition;
}

.card {
    @apply bg-gray-800 rounded-lg border border-gray-700 p-6;
}

.badge-success {
    @apply px-3 py-1 bg-green-600 text-white rounded-full text-sm font-medium;
}

.badge-danger {
    @apply px-3 py-1 bg-red-600 text-white rounded-full text-sm font-medium;
}

.badge-warning {
    @apply px-3 py-1 bg-yellow-600 text-white rounded-full text-sm font-medium;
}