/* Состояние плашки уведомления (закреплено СВЕРХУ справа) */
.custom-toast {
    position: fixed;
    top: 1.5rem;                 /* Относительный отступ от верхнего края */
    right: 1.5rem;               /* Относительный отступ от правого края */
    background-color: #4fa4ff;   
    color: #ffffff;            
    padding: 0.875rem 1.5rem;    /* Компактные адаптивные внутренние отступы */
    border-radius: 0.5rem;       /* Скругление углов в rem */
    font-family: Arial, sans-serif;
    font-size: 2rem;         /* Размер шрифта (~14px) */
    box-shadow: 0 0.3125rem 0.9375rem rgba(0, 0, 0, 0.3);
    
    /* Максимальная ширина плашки, чтобы она не растягивалась на весь экран */
    max-width: 40rem;            
    
    z-index: 999999999 !important; 
    
    opacity: 0;
    transform: translateY(-1.875rem); /* Смещение вверх на 30px в эквиваленте rem */
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
}

/* Состояние при появлении */
.custom-toast.show {
    opacity: 1;
    transform: translateY(0);
}

/* Корректировка для мобильных устройств */
@media (max-width: 48rem) {
    .custom-toast {
        top: auto;
        bottom: 3rem;            /* На телефонах переносим плашку вниз для удобства чтения */
        left: 3rem;              /* Растягиваем почти на всю ширину экрана с отступами */
        right: 3rem;
        max-width: none;
        text-align: center;
        transform: translateY(1.875rem); /* Появление снизу вверх */
    }
}