/* Toast Container */ #toast-container { position: fixed; top: 140px; right: 20px; display: flex; flex-direction: column; gap: 8px; z-index: 9999; pointer-events: none; } /* Toast */ .toast { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background-color: rgba(50, 50, 50, 0.9); border-radius: 6px; color: #ffffff; font-size: 0.9rem; max-width: 220px; min-width: 100px; animation: slideIn 0.25s ease-out; pointer-events: auto; backdrop-filter: blur(8px); } .toast.success { background-color: rgba(40, 167, 69, 0.15); } .toast.error { background-color: rgba(220, 53, 69, 0.15); } .toast.warning { background-color: rgba(255, 193, 7, 0.15); } .toast.info { background-color: rgba(23, 162, 184, 0.15); } /* Toast Icon */ .toast-icon { flex-shrink: 0; font-size: 18px; display: flex; align-items: center; justify-content: center; } .toast.success .toast-icon { color: #28a745; } .toast.error .toast-icon { color: #dc3545; } .toast.warning .toast-icon { color: #ffc107; } .toast.info .toast-icon { color: #17a2b8; } /* Toast Message */ .toast-message { flex: 1; font-weight: 500; } /* Toast Close Button */ .toast-close { flex-shrink: 0; background: none; border: none; color: currentColor; cursor: pointer; font-size: 18px; padding: 0; display: flex; align-items: center; justify-content: center; opacity: 0.5; transition: opacity 0.2s ease; } .toast-close:hover { opacity: 1; } /* Animations */ @keyframes slideIn { from { transform: translateX(350px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes slideOut { from { transform: translateX(0); opacity: 1; } to { transform: translateX(350px); opacity: 0; } } .toast.removing { animation: slideOut 0.25s ease-out; } /* Responsive */ @media (max-width: 480px) { #toast-container { bottom: 12px; right: 12px; left: 12px; } .toast { max-width: none; min-width: auto; } }