/* Toast Animation Styles */
@keyframes fadeIn {
    from { 
        opacity: 0; 
        transform: translateY(-20px);
    }
    to { 
        opacity: 1; 
        transform: translateY(0);
    }
}

@keyframes fadeOut {
    from { 
        opacity: 1; 
        transform: translateY(0);
    }
    to { 
        opacity: 0; 
        transform: translateY(-20px);
    }
}

.fadeIn {
    animation: fadeIn 0.3s ease-out;
}

.fadeOut {
    animation: fadeOut 0.3s ease-in;
}

/* Toast Notification Styles */
.bootstrap-notify-container {
    z-index: 9999;
    position: fixed;
    pointer-events: none;
}

/* Desktop Styles */
@media (min-width: 768px) {
    .bootstrap-notify-container {
        top: 20px;
        right: 20px;
        max-width: 350px;
    }
    
    .bootstrap-notify-container .alert {
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        margin-bottom: 10px;
        pointer-events: auto;
        font-size: 14px;
        padding: 12px 16px;
    }
}

/* Mobile Styles */
@media (max-width: 767px) {
    .bootstrap-notify-container {
        top: 10px;
        left: 10px;
        right: 10px;
        max-width: none;
        width: calc(100% - 20px);
    }
    
    .bootstrap-notify-container .alert {
        border-radius: 6px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.2);
        margin-bottom: 8px;
        pointer-events: auto;
        font-size: 13px;
        padding: 10px 12px;
        margin-left: 0;
        margin-right: 0;
    }
    
    /* Ensure toast doesn't overlap with mobile browser UI */
    .bootstrap-notify-container {
        padding-top: env(safe-area-inset-top, 0px);
    }
}

/* Tablet Styles */
@media (min-width: 768px) and (max-width: 1023px) {
    .bootstrap-notify-container {
        top: 15px;
        right: 15px;
        max-width: 400px;
    }
    
    .bootstrap-notify-container .alert {
        border-radius: 6px;
        box-shadow: 0 3px 10px rgba(0,0,0,0.15);
        margin-bottom: 8px;
        pointer-events: auto;
        font-size: 13px;
        padding: 11px 14px;
    }
}

/* Toast Content Styles */
.bootstrap-notify-container .alert-success {
    background-color: #d4edda;
    border-color: #c3e6cb;
    color: #155724;
}

.bootstrap-notify-container .alert-danger {
    background-color: #f8d7da;
    border-color: #f5c6cb;
    color: #721c24;
} 

.bootstrap-notify-container .alert-info {
    background-color: #d1ecf1;
    border-color: #bee5eb;
    color: #0c5460;
}

.bootstrap-notify-container .alert-warning {
    background-color: #fff3cd;
    border-color: #ffeaa7;
    color: #856404;
}

/* Toast Close Button */
.bootstrap-notify-container .alert .close {
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 16px;
    font-weight: bold;
    line-height: 1;
    color: inherit;
    opacity: 0.5;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

.bootstrap-notify-container .alert .close:hover {
    opacity: 1;
}

/* Mobile-specific close button */
@media (max-width: 767px) {
    .bootstrap-notify-container .alert .close {
        top: 6px;
        right: 6px;
        font-size: 14px;
    }
}

/* Toast Message Text */
.bootstrap-notify-container .alert .message {
    margin-right: 20px;
    word-wrap: break-word;
    line-height: 1.4;
}

/* Ensure toast is above all other elements */
.bootstrap-notify-container {
    position: fixed !important;
    z-index: 99999 !important;
}

/* Prevent body scroll when toast is shown */
body.toast-active {
    overflow: hidden;
}

/* Toast container positioning fixes */
.bootstrap-notify-container[data-notify="container"] {
    position: fixed !important;
}

/* Ensure proper stacking on mobile */
@media (max-width: 767px) {
    .bootstrap-notify-container {
        position: fixed !important;
        top: 10px !important;
        left: 10px !important;
        right: 10px !important;
        bottom: auto !important;
        transform: none !important;
    }
}