function showToast(category, msg) {
    const toastBox = document.getElementById('toastBox');
    if (!toastBox) return;

    const toast = document.createElement('div');
    toast.classList.add('toast', category);

    let icon = '';

    switch (category) {
        case 'success':
            icon = '<ion-icon name="checkmark-circle"></ion-icon>';
            break;

        case 'error':
            icon = '<ion-icon name="close-circle"></ion-icon>';
            break;

        case 'invalid':
            icon = '<ion-icon name="alert-circle"></ion-icon>';
            break;

        default:
            icon = '';
    }

    toast.innerHTML = icon;

    const text = document.createElement('span');
    text.textContent = msg;
    toast.appendChild(text);

    toastBox.appendChild(toast);

    setTimeout(() => {
        toast.remove();
    }, 3500);
}