/* ========================================
   УВЕДОМЛЕНИЕ — ОДНО НА ВЕСЬ САЙТ
   Компонент Toast 30:59
   v1 · 09.10.2026
   ========================================

   Ширина 360, радиус md, фон bg/surface с тенью — читается как
   плавающее над страницей. ТОН НЕСЁТ ТОЧКА 10px, А НЕ ФОН: сплошная
   цветная плашка спорит с лаймовым акцентом сайта.
   Заголовок 14 Semi Bold, тело 14 Regular, закрытие справа.
   Внизу справа на широких видах, сверху — на телефоне.
   ======================================== */

.kslt-toasts {
    position: fixed;
    right: var(--space-4);
    bottom: var(--space-4);
    z-index: 3000;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    pointer-events: none;
}

.kslt-toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    width: 360px;
    max-width: calc(100vw - var(--space-8));
    padding: var(--space-4);
    border-radius: var(--radius-md);
    background: var(--bg-elevated);
    border: var(--bw-hair) solid var(--border-subtle);
    box-shadow: 0 12px 32px var(--alpha-black-50);
}

.kslt-toast-dot {
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    margin-top: 6px;
    border-radius: 50%;
    background: var(--text-secondary);
}

.kslt-toast--info .kslt-toast-dot { background: var(--accent); }
.kslt-toast--ok   .kslt-toast-dot { background: var(--status-success, var(--success)); }
.kslt-toast--warn .kslt-toast-dot { background: var(--status-warning, var(--warning)); }
.kslt-toast--err  .kslt-toast-dot { background: var(--status-danger, var(--red-500)); }

.kslt-toast-body {
    flex: 1;
    min-width: 0;
}

.kslt-toast-title {
    font-size: var(--fs-sm);
    font-weight: 600;
    line-height: 1.3;
    color: var(--text-primary);
    margin-bottom: var(--space-2);
}

.kslt-toast-text {
    font-size: var(--fs-sm);
    line-height: 1.5;
    color: var(--text-secondary);
}

/* Цель нажатия 44 по Button 17:82 — краска у знака меньше, цель нет */
.kslt-toast-close {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    margin: -10px -10px -10px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-radius: var(--radius-full);
    color: var(--text-secondary);
    font-size: var(--fs-lg);
    line-height: 1;
    cursor: pointer;
}

.kslt-toast-close:hover { color: var(--text-primary); }

.kslt-toast-close:focus-visible {
    outline: var(--bw-thick) solid var(--accent);
    outline-offset: 2px;
}

.kslt-toast--uhodit {
    opacity: 0;
    transition: opacity var(--transition-base);
}

@media (max-width: 640px) {
    .kslt-toasts {
        right: var(--space-3);
        left: var(--space-3);
        top: var(--space-3);
        bottom: auto;
    }

    .kslt-toast {
        width: auto;
        max-width: none;
    }
}