/* Keyframes for the progress bar animation */
:root {
    --success: #0aac76;     /* Green */
    --danger: #eb4f4f;      /* Red */
    --info: #89aee9;        /* Blue */
    --light-text: #ffffff;
    --dark-text: #1e293b;
}

@keyframes fill-progress {
  from { width: 0%; }
  to { width: 100%; }
}

/* Main container for positioning toasts */
.toast-container {
    z-index: 1090; /* High z-index to appear above other elements */
}

/* Base style for each toast */
.toast {
    /* Required for positioning the progress bar inside */
    position: relative; 
    overflow: hidden; /* Clips the progress bar to the toast's rounded corners */
    border-left: none; /* Remove the old side-border */
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

/* The progress bar element */
.toast-progress-bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 4px;
    width: 0; /* Starts at 0 width */
    /* The animation will be applied by category-specific rules */
    animation-timing-function: linear;
    animation-fill-mode: forwards; /* Stays at 100% when finished */
}

/* Pausing the animation on hover */
.toast:hover .toast-progress-bar {
    animation-play-state: paused;
}

/* Styling for the toast body to align icon, text, and button */
.toast-body {
    display: flex;
    align-items: center;
    gap: 1rem; /* Space between icon and text */
}

.toast-body i {
    font-size: 1.5rem;
    flex-shrink: 0; /* Prevents the icon from shrinking */
}

.toast-body .btn-close {
    margin-left: auto; /* Pushes the close button to the far right */
}

/* --- Category-specific color variants --- */

/* Success (Green) */
.toast-success {
    background-color: var(--success);
    color: var(--light-text);
}
.toast-success .toast-progress-bar {
    background-color: rgba(255, 255, 255, 0.6);
}

/* Danger (Red) */
.toast-danger {
    background-color: var(--danger);
    color: var(--light-text);
}
.toast-danger .toast-progress-bar {
    background-color: rgba(255, 255, 255, 0.6);
}

/* Info (Blue) */
.toast-info {
    background-color: var(--info);
    color: var(--dark-text); /* Info color is light, so use dark text */
}
.toast-info .toast-progress-bar {
    background-color: rgba(0, 0, 0, 0.2);
}