/**
 * PREMIUM CRYPTOCITY NOTIFICATION SYSTEM
 * Glassmorphism + Glowing HUD Aesthetics
 */

/* Toastr Base Overrides */
#toast-container>.toast {
    background-image: none !important;
    background-color: rgba(15, 23, 42, 0.7) !important;
    backdrop-filter: blur(12px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(180%) !important;
    border-radius: 20px !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37) !important;
    padding: 20px 24px 20px 60px !important;
    width: 380px !important;
    opacity: 1 !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

#toast-container>.toast:hover {
    box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.45) !important;
    transform: translateY(-2px) scale(1.01) !important;
}

/* Icons Replacement with Bio-haz/Circuit-tech Style */
#toast-container>.toast::before {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-family: "bootstrap-icons" !important;
    font-size: 24px;
    line-height: 1;
}

/* Success - Emerald Green Glow */
#toast-container>.toast-success {
    border-left: 4px solid #10b981 !important;
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.15), 0 8px 32px 0 rgba(0, 0, 0, 0.37) !important;
}

#toast-container>.toast-success::before {
    content: "\F26E";
    /* bi-check-circle-fill */
    color: #10b981;
    filter: drop-shadow(0 0 8px rgba(16, 185, 129, 0.6));
}

/* Info - Neon Indigo Glow */
#toast-container>.toast-info {
    border-left: 4px solid #6366f1 !important;
    box-shadow: 0 0 20px rgba(99, 102, 241, 0.15), 0 8px 32px 0 rgba(0, 0, 0, 0.37) !important;
}

#toast-container>.toast-info::before {
    content: "\F431";
    /* bi-info-circle-fill */
    color: #6366f1;
    filter: drop-shadow(0 0 8px rgba(99, 102, 241, 0.6));
}

/* Warning - Radioactive Amber Glow */
#toast-container>.toast-warning {
    border-left: 4px solid #f59e0b !important;
    box-shadow: 0 0 20px rgba(245, 158, 11, 0.15), 0 8px 32px 0 rgba(0, 0, 0, 0.37) !important;
}

#toast-container>.toast-warning::before {
    content: "\F33A";
    /* bi-exclamation-triangle-fill */
    color: #f59e0b;
    filter: drop-shadow(0 0 8px rgba(245, 158, 11, 0.6));
}

/* Error - Blood Red Glow */
#toast-container>.toast-error {
    border-left: 4px solid #ef4444 !important;
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.15), 0 8px 32px 0 rgba(0, 0, 0, 0.37) !important;
}

#toast-container>.toast-error::before {
    content: "\F622";
    /* bi-x-circle-fill */
    color: #ef4444;
    filter: drop-shadow(0 0 8px rgba(239, 68, 68, 0.6));
}

/* Text Styling */
.toast-title {
    font-family: 'Inter', sans-serif !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    font-size: 11px !important;
    margin-bottom: 4px !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

.toast-message {
    font-family: 'Inter', sans-serif !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    color: rgba(255, 255, 255, 0.7) !important;
    line-height: 1.5 !important;
}

/* Progress Bar */
.toast-progress {
    height: 3px !important;
    opacity: 0.4 !important;
    background-color: #fff !important;
}

/* Close Button */
.toast-close-button {
    position: absolute !important;
    top: 50% !important;
    right: 12px !important;
    transform: translateY(-50%) !important;
    font-size: 20px !important;
    color: #fff !important;
    opacity: 0.5 !important;
    transition: all 0.2s !important;
    z-index: 9999 !important;
    pointer-events: auto !important;
}

.toast-close-button:hover {
    opacity: 1 !important;
    transform: translateY(-50%) scale(1.1) !important;
}

/* Responsiveness */
@media (max-width: 480px) {
    #toast-container>.toast {
        width: calc(100vw - 40px) !important;
        margin: 0 20px 12px !important;
    }
}