/**
 * VolatusPay Custom Notification Styles
 * Estilo pequeno, discreto e moderno para notificações
 */

.volatus-notify-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10000;
    pointer-events: none;
    max-width: 320px;
}

.volatus-notification {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(139, 92, 246, 0.3);
    margin-bottom: 8px;
    opacity: 0;
    transform: translateX(100%);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: auto;
    backdrop-filter: blur(10px);
    border: 1px solid #8B5CF6;
    max-width: 320px;
    word-wrap: break-word;
}

.volatus-notification.show {
    opacity: 1;
    transform: translateX(0);
}

.volatus-notification.hide {
    opacity: 0;
    transform: translateX(100%);
}

.volatus-notification-content {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    gap: 10px;
    position: relative;
}

.volatus-notification-icon {
    font-size: 16px;
    flex-shrink: 0;
}

.volatus-notification-message {
    font-size: 13px;
    line-height: 1.4;
    flex: 1;
    font-weight: 500;
    color: #E5E7EB;
}

.volatus-notification-close {
    background: none;
    border: none;
    color: #9CA3AF;
    cursor: pointer;
    padding: 2px;
    border-radius: 4px;
    transition: all 0.2s;
    font-size: 12px;
    flex-shrink: 0;
}

.volatus-notification-close:hover {
    color: #8B5CF6;
    background: rgba(139, 92, 246, 0.15);
}

/* Tipos de notificação - Paleta VolatusPay */
.volatus-success {
    border-left: 4px solid #10B981;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, #1a1a2e 30%);
}

.volatus-success .volatus-notification-icon {
    color: #10B981;
}

.volatus-error {
    border-left: 4px solid #EF4444;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, #1a1a2e 30%);
}

.volatus-error .volatus-notification-icon {
    color: #EF4444;
}

.volatus-warning {
    border-left: 4px solid #F59E0B;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, #1a1a2e 30%);
}

.volatus-warning .volatus-notification-icon {
    color: #F59E0B;
}

.volatus-info {
    border-left: 4px solid #8B5CF6;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15) 0%, #1a1a2e 30%);
}

.volatus-info .volatus-notification-icon {
    color: #8B5CF6;
}

.volatus-loading {
    border-left: 4px solid #8B5CF6;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15) 0%, #1a1a2e 30%);
}

.volatus-loading .volatus-notification-icon {
    color: #8B5CF6;
}

/* Responsividade */
@media (max-width: 768px) {
    .volatus-notify-container {
        top: 10px;
        right: 10px;
        left: 10px;
        max-width: none;
    }
    
    .volatus-notification {
        max-width: none;
    }
    
    .volatus-notification-content {
        padding: 10px 12px;
    }
    
    .volatus-notification-message {
        font-size: 12px;
    }
}

/* Ocultar TODAS as notificações nativas do sistema */
/* Notificações do Chrome/Browser */
div[data-testid="notification"],
div[class*="notification"],
div[class*="toast"]:not(.volatus-notification),
div[class*="alert"]:not(.volatus-notification),
.chrome-notification,
.browser-notification,
.replit-notification,
.google-notification,
/* Dialogs nativos */
dialog:not(.volatus-dialog),
/* Modais externos */
div[role="dialog"]:not(.modal):not(.volatus-notification),
/* Popups de erro do sistema */
div[data-type="error-popup"],
div[class*="error-popup"],
div[class*="system-popup"],
/* Notificações do Replit */
div[data-cy*="notification"],
div[class*="replit"],
.replit-toast,
.replit-alert,
/* Notificações do Google */
div[data-google*="notification"],
div[class*="google-notification"],
/* Confirmações nativas do browser */
div[class*="confirm-dialog"]:not(.modal),
div[class*="browser-confirm"],
/* Outras notificações comuns */
.snackbar:not(.volatus-notification),
.popup:not(.modal):not(.volatus-notification),
.overlay:not(.modal):not(.volatus-notification) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    z-index: -1 !important;
}

/* Garantir que nosso sistema sempre apareça por cima */
.volatus-notify-container,
.volatus-notification {
    z-index: 999999 !important;
    position: fixed !important;
}

/* Ocultar notificações que possam aparecer dinamicamente */
body > div:not([id]):not([class*="volatus"]):not([class*="modal"]):not([class*="main"]):not([class*="sidebar"]) {
    /* Verificar se parece com notificação */
}

/* Estilos específicos para interceptar notificações do Replit */
[data-cy*="toast"],
[data-cy*="notification"],
[data-cy*="alert"],
[data-testid*="notification"],
[data-testid*="toast"],
[data-testid*="alert"] {
    display: none !important;
}

/* CSS para esconder confirmações nativas */
div[role="alertdialog"]:not(.modal) {
    display: none !important;
}

/* Tema VolatusPay - Sempre roxo escuro */
[data-bs-theme="dark"] .volatus-notification,
.volatus-notification {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    border: 1px solid #8B5CF6;
    box-shadow: 0 8px 32px rgba(139, 92, 246, 0.3);
}

[data-bs-theme="dark"] .volatus-notification-message,
.volatus-notification-message {
    color: #E5E7EB;
}

[data-bs-theme="dark"] .volatus-notification-close,
.volatus-notification-close {
    color: #9CA3AF;
}

[data-bs-theme="dark"] .volatus-notification-close:hover,
.volatus-notification-close:hover {
    color: #8B5CF6;
    background: rgba(139, 92, 246, 0.15);
}

/* Animação de entrada suave */
@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Animação de saída suave */
@keyframes slideOutRight {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(100%);
    }
}