@if(session('success'))
<div class="fixed top-4 right-4 z-50">
    <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded-lg shadow-lg flex items-center animate-slide-in">
        <i class="fas fa-check-circle mr-2"></i>
        <span>{{ session('success') }}</span>
        <button class="ml-4 text-green-700 hover:text-green-900" onclick="this.parentElement.remove()">
            <i class="fas fa-times"></i>
        </button>
    </div>
</div>
@endif

@if(session('error'))
<div class="fixed top-4 right-4 z-50">
    <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded-lg shadow-lg flex items-center animate-slide-in">
        <i class="fas fa-exclamation-circle mr-2"></i>
        <span>{{ session('error') }}</span>
        <button class="ml-4 text-red-700 hover:text-red-900" onclick="this.parentElement.remove()">
            <i class="fas fa-times"></i>
        </button>
    </div>
</div>
@endif

<style>
.animate-slide-in {
    animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}
</style>