/* Оверлей для модального окна */
.notification-overlay {
    position: sticky;
    bottom: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    margin: auto;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    padding: 0 0px 20px 0px; 
    max-width: 450px;
}

.notification-overlay.active {
    opacity: 1;
    visibility: visible;
}


.notification-modal {
    background: white;
    border-radius: 8px;
    width: 100%;
    max-width: 95%;
    box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1), 0px 4px 6px -4px rgba(0, 0, 0, 0.1);
    border: 1px solid #e4e4e7;
    transform: translateY(100px);
    transition: transform 0.3s ease;
    position: relative;
}

.notification-overlay.active .notification-modal {
    transform: translateY(0);
}


.notification-content {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 17px;
    width: 100%;
}


.notification-text-section {
    display: flex;
    flex-direction: column;
    gap: 1.4px;
    flex: 1;
}


.notification-title {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 14px;
    margin: 0;
}


.notification-message {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 12px;
    margin: 0;
    padding-bottom: 0.59px;
}


.notification-button-section {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    height: 24px;
    flex-shrink: 0;
}

.notification-button-container {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    height: 24px;
    width: 100%;
}

.notification-button {
    background: white;
    border: none;
    border-radius: 4px;
    height: 24px;
    padding: 3px 8px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 12px;
    text-align: center;
    color: #0f172a;
    white-space: pre-wrap;
}

.notification-button:hover {
    background-color: #f8fafc;
}

.notification-button:active {
    background-color: #f1f5f9;
}


.notification-modal.success .notification-title {
    color: #34c759;
}

.notification-modal.success .notification-message {
    color: #34c759;
}


.notification-modal.error .notification-title {
    color: #ef4343;
}

.notification-modal.error .notification-message {
    color: #ef4343;
}


@keyframes notificationSlideUp {
    from {
        transform: translateY(100px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes notificationSlideDown {
    from {
        transform: translateY(0);
        opacity: 1;
    }
    to {
        transform: translateY(100px);
        opacity: 0;
    }
}


@media (max-width: 375px) {
    .notification-overlay {
        padding: 0 20px 20px 20px;
    }
    
    .notification-modal {
        max-width: calc(100vw - 40px);
    }
}


.notification-modal.warning .notification-title,
.notification-modal.warning .notification-message {
    color: #f59e0b;
}

.notification-modal.info .notification-title,
.notification-modal.info .notification-message {
    color: #3b82f6;
}


.notification-message.multiline {
    white-space: normal;
    word-wrap: break-word;
    max-width: 180px;
}


.notification-modal:focus {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}


.notification-modal.pulse {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% {
        box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1), 0px 4px 6px -4px rgba(0, 0, 0, 0.1);
    }
    50% {
        box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.2), 0px 4px 6px -4px rgba(0, 0, 0, 0.2);
    }
}