/* Toast notifications + inline spinner. */

.toast_container
{
    position: fixed;
    bottom: 16px;
    right: 16px;
    z-index: 2000;
    display: flex;
    flex-direction: column-reverse;
    gap: 8px;
    max-width: 380px;
    pointer-events: none;
}

.toast
{
    pointer-events: auto;
    padding: 12px 16px;
    border-radius: 4px;
    box-shadow: 0 4px 16px rgba(46, 46, 45, 0.18);
    background: var(--white);
    border-left: 4px solid var(--gray-medium);
    cursor: pointer;
    animation: toast_in 0.18s ease-out;
}

.toast_text
{
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 14px;
    line-height: 143%;
    color: var(--gray-dark);
}

.toast--success
{
    border-left-color: var(--green-main);
}

.toast--error
{
    border-left-color: var(--red-alert);
}

.toast--info
{
    border-left-color: var(--yellow-main);
}

@keyframes toast_in
{
    from { opacity: 0; transform: translateX(16px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* Inline spinner (reuses the `rot` keyframes from greenbutton.css). */
.z_spinner
{
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid var(--gray-light);
    border-top-color: var(--green-main);
    border-radius: 50%;
    animation: rot 0.7s linear infinite;
    vertical-align: middle;
}

.z_spinner--light
{
    border-color: rgba(255, 255, 255, 0.5);
    border-top-color: var(--white);
    margin-right: 8px;
}