/* --- Toast Notification Positioning and Transition --- */
#toastNotification {
    position: fixed;
    z-index: 1000;
    left: 50%;
    /* Centers the toast horizontally */
    transform: translateX(-50%); 

    /* Initial state (off-screen and hidden) */
    bottom: -6rem; 
    opacity: 0;

    /* Snappier "pop-up" transition */
    transition: bottom 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.4s ease-in-out;

    /* Size constraints */
    max-width: 30rem; /* Wide enough for messages */
    width: 91.666667%; /* Responsive width on mobile */
}

/* Custom class added by JavaScript to make the toast visible */
.toast-visible {
    bottom: 1.5rem !important; /* Slide it up from the bottom */
    opacity: 1 !important;
}

/* --- Inner Toast Content Styles (Vibrant Gradient and Shadow) --- */
#toastNotification > div {
    /* Attractive Gradient Background */
    background: linear-gradient(135deg, #23911e 0%, #43e257 100%);
    color: white;
    padding: 1rem;
    border-radius: 0.75rem; 
    
    /* Enhanced Shadow for a floating effect */
    box-shadow: 0 10px 20px rgba(76, 68, 233, 0.4), 0 4px 6px rgba(0, 0, 0, 0.1); 
    
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Content starts from the left */
}

/* Enforce that the content group (icon + message) takes up the majority of the space */
#toastNotification > div > div:first-child {
    display: flex; /* Make the icon and message a nested flex container */
    align-items: center;
    flex-grow: 1; /* Allows content to fill space */
}

/* Icon styling */
.toast-icon {
    width: 1.5rem;
    height: 1.5rem;
    margin-right: 0.75rem;
    color: #ffffff; /* White icon for contrast */
    stroke-width: 2.5; /* Slightly thicker icon stroke */
    flex-shrink: 0; /* Prevent icon from shrinking */
}

/* Message text styling */
#toastMessage {
    font-weight: 500;
    font-size: 2.5rem; /* INCREASED FONT SIZE (was 1rem) */
    min-width: 0; /* Allows message text to shrink gracefully */
    overflow-wrap: break-word; /* Allows long messages to wrap */
}
