  <!-- @if (session('success') || session('error') || $errors->any())
    <div class="position-fixed top-0 end-0 p-3" style="z-index: 9999; max-width: 100%;">
        <div id="liveToast"
            class="toast align-items-center text-white {{ session('success') ? 'bg-success' : 'bg-danger' }} border-0 show"
     role="alert"
     aria-live="assertive"
     aria-atomic="true"
     data-bs-delay="3000"
     data-bs-autohide="true"
     style="min-width: 250px; max-width: 90vw;">
            <div class="d-flex">
                <div class="toast-body">
                    @if (session('success'))
                    {{ session('success') }}
                    @elseif (session('error'))
                    {{ session('error') }}
                    @elseif ($errors->any())
                    {{ $errors->first() }}
                    @endif
                </div>
                <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"
                    aria-label="Close"></button>
            </div>
        </div>
    </div>
    @endif
    <script>
         document.addEventListener('DOMContentLoaded', function() {
            const toastEl = document.getElementById('liveToast');
            if (toastEl) {
                const toast = new bootstrap.Toast(toastEl, {
                    delay: 3000
                });
                toast.show();
            }
        });
    </script> -->

<style>
    .toast-container-custom {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
}

/* Base Toast */
.custom-toast {
    display: flex;
    align-items: center;
    gap: 15px;
    min-width: 300px;
    max-width: 380px;
    padding: 16px 18px;
    border-radius: 14px;
    color: #fff;
    font-family: 'Segoe UI', sans-serif;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    position: relative;
    overflow: hidden;

    animation: slideIn 0.5s ease, fadeOut 0.5s ease 3s forwards;
}

/* Success Theme */
.toast-success {
    background: linear-gradient(135deg, #00c853, #43a047);
}

/* Error Theme */
.toast-error {
    background: linear-gradient(135deg, #ff5252, #d32f2f);
}

/* Icon */
.toast-icon {
    font-size: 22px;
    font-weight: bold;
}

/* Content */
.toast-content {
    flex: 1;
}

.toast-title {
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 2px;
}

.toast-message {
    font-size: 13px;
    opacity: 0.9;
}

/* Close Button */
.toast-close {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
}

/* Progress Bar */
.toast-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    width: 100%;
    background: rgba(255,255,255,0.6);
    animation: progressBar 3s linear forwards;
}

/* Animations */
@keyframes slideIn {
    from {
        transform: translateX(120%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes fadeOut {
    to {
        opacity: 0;
        transform: translateX(120%);
    }
}

@keyframes progressBar {
    from { width: 100%; }
    to { width: 0%; }
}
</style>

    @if (session('success') || session('error') || $errors->any())
<div class="toast-container-custom">
    <div id="liveToast"
        class="custom-toast {{ session('success') ? 'toast-success' : 'toast-error' }}">

        <div class="toast-icon">
            @if (session('success'))
                ✓
            @else
                ⚠
            @endif
        </div>

        <div class="toast-content">
            <div class="toast-title">
                {{ session('success') ? 'Success' : 'Error' }}
            </div>

            <div class="toast-message">
                @if (session('success'))
                    {{ session('success') }}
                @elseif (session('error'))
                    {{ session('error') }}
                @elseif ($errors->any())
                    {{ $errors->first() }}
                @endif
            </div>
        </div>

        <button class="toast-close" onclick="closeToast()">×</button>

        <div class="toast-progress"></div>
    </div>
</div>
@endif

<script>
    function closeToast() {
    const toast = document.getElementById('liveToast');
    if (toast) {
        toast.style.animation = 'fadeOut 0.4s forwards';
    }
}

document.addEventListener('DOMContentLoaded', function () {
    const toast = document.getElementById('liveToast');

    if (toast) {
        setTimeout(() => {
            closeToast();
        }, 3000);
    }
});
</script>