/* notification.css */
.notifications-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 10000;
    display: flex;
    flex-direction: column-reverse;
    gap: 8px;
    max-height: 60vh;
    padding: 6px;
}

.notification {
    position: relative;
    padding: 12px 35px 12px 40px;
    min-width: 240px;
    max-width: min(350px, calc(100vw - 40px));
    border-radius: 6px;
    color: white;
    font-size: 14px;
    letter-spacing: 0.2px;
    line-height: 1.5;
    font-family: system-ui;
    transform: translateY(10px);
    opacity: 0;
    transition: all 0.3s ease;
    background: #333;
}

/* Иконки только для success/error */
.notification-success::before,
.notification-error::before,
.notification-warning::before {
    content: '';
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    background-size: contain;
    filter: brightness(0) invert(1);
    background-repeat: no-repeat;
}

.notification-success {
    background: #4CAF50;
    border-left: 3px solid #388E3C;
}

.notification-error {
    background: #f44336;
    border-left: 3px solid #D32F2F;
}

.notification-warning {
    background: #B45309;
    border-left: 3px solid #92400E;
}

.notification-success::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22' fill='none'%3E%3Cpath d='M5.37305 5.37305H16.3057' stroke='white' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M5.37305 9.74609H9.7461' stroke='white' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M1 3.18653V20.4523C1 20.9393 1.5888 21.1832 1.93315 20.8388L6.14611 16.6259C6.35113 16.4209 6.62921 16.3057 6.91916 16.3057H18.4922C19.6998 16.3057 20.6787 15.3268 20.6787 14.1192V3.18653C20.6787 1.97894 19.6998 1 18.4922 1H3.18653C1.97894 1 1 1.97894 1 3.18653Z' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.notification-error::before {

    background-image: url("data:image/svg+xml,%3Csvg width='25' height='22' viewBox='0 0 25 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.22404 18.1883L10.0714 2.11673C10.8912 0.627755 13.331 0.627755 14.1508 2.11673L22.9982 18.1883C23.7159 19.492 22.622 21 20.9586 21H3.26367C1.60024 21 0.506344 19.492 1.22404 18.1883Z' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12.1113 7.66699V12.1114' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12.1113 16.5773V16.5557' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.notification-warning::before {
    background-image: url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.0761 2.16311C9.136 1.50438 9.6883 1 10.3497 1H11.6503C12.3117 1 12.864 1.50438 12.9239 2.16311C12.9731 2.70392 13.3623 3.14543 13.8708 3.336C14.0015 3.38499 14.1307 3.43724 14.2582 3.49263C14.7613 3.71129 15.3531 3.66938 15.7745 3.31818C16.2953 2.8842 17.0611 2.91894 17.5404 3.39829L18.4584 4.31623C18.9154 4.77326 18.9485 5.50338 18.5347 5.99992C18.1901 6.41349 18.158 6.99745 18.3897 7.48341C18.49 7.69386 18.5816 7.90926 18.664 8.12916C18.8546 8.63767 19.2961 9.0269 19.8369 9.0761C20.4956 9.136 21 9.6883 21 10.3497V11.6503C21 12.3117 20.4956 12.864 19.8369 12.9239C19.2961 12.9731 18.8546 13.3623 18.664 13.8708C18.59 14.0682 18.5086 14.262 18.4202 14.4518C18.2053 14.913 18.2401 15.4637 18.5658 15.8546C18.962 16.33 18.9303 17.0291 18.4927 17.4667L17.4667 18.4927C17.0291 18.9303 16.33 18.962 15.8546 18.5658C15.4637 18.2401 14.913 18.2053 14.4518 18.4202C14.262 18.5086 14.0682 18.59 13.8708 18.664C13.3623 18.8546 12.9731 19.2961 12.9239 19.8369C12.864 20.4956 12.3117 21 11.6503 21H10.3497C9.6883 21 9.136 20.4956 9.0761 19.8369C9.0269 19.2961 8.63767 18.8546 8.12917 18.664C7.90927 18.5816 7.69387 18.49 7.48343 18.3897C6.99746 18.158 6.4135 18.1901 5.99992 18.5347C5.50338 18.9485 4.77325 18.9154 4.31622 18.4584L3.39829 17.5404C2.91893 17.0611 2.8842 16.2953 3.31818 15.7745C3.66939 15.3531 3.71129 14.7613 3.49263 14.2582C3.43724 14.1307 3.385 14.0016 3.336 13.8708C3.14544 13.3623 2.70392 12.9731 2.16311 12.9239C1.50438 12.864 1 12.3117 1 11.6503V10.3497C1 9.6883 1.50438 9.136 2.16311 9.0761C2.70393 9.0269 3.14544 8.63768 3.33601 8.12917C3.3936 7.9755 3.45568 7.82402 3.52209 7.67489C3.7571 7.14716 3.71804 6.52257 3.34821 6.07877C2.89722 5.53758 2.93332 4.74179 3.43145 4.24365L4.24364 3.43146C4.74178 2.93332 5.53757 2.89722 6.07876 3.34822C6.52256 3.71805 7.14715 3.7571 7.67488 3.52209C7.82401 3.45568 7.97549 3.3936 8.12916 3.33601C8.63767 3.14544 9.0269 2.70393 9.0761 2.16311Z' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M14 11C14 12.6569 12.6569 14 11 14C9.3431 14 8 12.6569 8 11C8 9.3431 9.3431 8 11 8C12.6569 8 14 9.3431 14 11Z' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}


.notification.show {
    opacity: 1;
    transform: translateY(0);
}

.notification-close {
    position: absolute;
    right: 8px;
    top: 53%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    opacity: 0.7;
    cursor: pointer;
}

.notification-close::before,
.notification-close::after {
    content: '';
    position: absolute;
    width: 10px;
    height: 1.5px;
    background: white;
    top: 50%;
    left: 50%;
}

.notification-close::before { transform: translate(-50%, -50%) rotate(45deg); }
.notification-close::after { transform: translate(-50%, -50%) rotate(-45deg); }