/**
 * Custom Toast Notification Styles for Edirectz
 * Enhances Toastify with app-specific design
 */

/* Base toast styling */
.toast-edirectz {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    letter-spacing: -0.01em !important;
    min-width: 300px !important;
    max-width: 400px !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 16px 54px 16px 20px !important;
    box-sizing: border-box !important;
}

.toastify-right {
    right: 1px !important;
}

/* Success toast */
.toast-edirectz.toast-success {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    color: var(--text-inverse) !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3), 0 0 0 1px rgba(16, 185, 129, 0.1) !important;
}

/* Error toast */
.toast-edirectz.toast-error {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
    color: var(--text-inverse) !important;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3), 0 0 0 1px rgba(239, 68, 68, 0.1) !important;
}

/* Warning toast */
.toast-edirectz.toast-warning {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    color: var(--text-inverse) !important;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3), 0 0 0 1px rgba(245, 158, 11, 0.1) !important;
}

/* Info toast */
.toast-edirectz.toast-info {
    background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%) !important;
    color: var(--text-inverse) !important;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3), 0 0 0 1px rgba(79, 70, 229, 0.1) !important;
}

/* Close button styling */
.toast-edirectz .toast-close {
    color: color-mix(in oklab, var(--text-inverse) 80%, transparent 20%) !important;
    opacity: 0.7 !important;
    transition: opacity 0.2s ease !important;
    position: absolute !important;
    right: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    padding: 8px !important;
    width: 30px !important;
    height: 30px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.toast-edirectz .toast-close:hover {
    opacity: 1 !important;
    color: var(--text-inverse) !important;
}

/* Animation enhancements */
@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutRight {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

/* Apply animations */
.toast-edirectz {
    animation: slideInRight 0.3s ease-out !important;
}

.toast-edirectz.hiding {
    animation: slideOutRight 0.3s ease-in !important;
}

/* Responsive adjustments */
@media (max-width: 640px) {
    .toast-edirectz {
        min-width: auto !important;
        max-width: calc(100vw - 32px) !important;
        margin: 0 16px !important;
        font-size: 13px !important;
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .toast-edirectz {
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
    }
}

/* Focus state for accessibility */
.toast-edirectz:focus {
    outline: 2px solid color-mix(in oklab, var(--text-inverse) 50%, transparent 50%) !important;
    outline-offset: 2px !important;
}

/* Progress bar styling (if duration is shown) */
.toast-edirectz .toast-progress {
    background: color-mix(in oklab, var(--text-inverse) 30%, transparent 70%) !important;
    height: 3px !important;
    border-radius: 0 0 12px 12px !important;
}