:root{
    --primary-color: #2364aa;
    --primary-yellow: #fec601;
    --primary-orange: #ea7317;
    --secondary-blue: #3da5d9;
    --third-blue: #73bfb8;
    --primary-red: #e63946;
    --primary-white: #f8f9fa;
}

body{
    background-color: var(--primary-white);
}

.toast-container {
    position: fixed;
    bottom: 20px;          /* Positions 20px above the bottom of the screen */
    left: 50%;             /* Moves left edge to the horizontal center */
    transform: translateX(-50%); /* Shifts container back left by 50% of its own width */
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;   /* Keeps toast messages centered relative to each other */
}

.toast-message {
    min-width: 300px;
    max-width: 400px;
    background: white;
    border-radius: 10px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    border-left: 5px solid var(--primary-color); /* Default Primary */
    transform-origin: center; /* Ensure scaling originates from middle */
    animation: openInsideOut 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    position: relative;
}

/* Exit animation class applied via JS */
.toast-message.closing {
    animation: closeOutsideIn 0.3s ease-in forwards;
}

/* Dynamic Colors based on Django Tags */
.toast-message.success { border-left-color: var(--primary-color); }
.toast-message.error { border-left-color: var(--primary-red); }
.toast-message.warning { border-left-color: var(--primary-orange); }

.toast-icon {
    font-size: 1.2rem;
}

.toast-message.success .toast-icon { color: var(--primary-color); }
.toast-message.error .toast-icon { color: var(--primary-red); }
.toast-message.info .toast-icon { color: var(--primary-color); }

.toast-content {
    color: #2c3e50;
    font-size: 0.95rem;
    font-weight: 500;
    flex-grow: 1;
}

.toast-close {
    background: none;
    border: none;
    color: #adb5bd;
    cursor: pointer;
    padding: 4px;
    transition: color 0.2s;
}

.toast-close:hover { color: #2c3e50; }

/* Opens from the inside out (expands from zero size) */
@keyframes openInsideOut {
    from { 
        transform: scale(0); 
        opacity: 0; 
    }
    to { 
        transform: scale(1); 
        opacity: 1; 
    }
}

/* Closes from the outside in (shrinks back to center) */
@keyframes closeOutsideIn {
    from { 
        transform: scale(1); 
        opacity: 1; 
    }
    to { 
        transform: scale(0); 
        opacity: 0; 
    }
}