/* Site-wide toast notifications — replaces alert() and inline
   success/error text across the app. Auto-dismisses after a few
   seconds, per your instruction. Loaded on every page via
   include/header.php + include/footer.php. */

#bcpg-toast-container {
    position: fixed;
    top: 1.25rem;
    right: 1.25rem;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    max-width: 360px;
    width: calc(100% - 2.5rem);
}

.bcpg-toast {
    background: #fff;
    border-left: 4px solid #2e7d32;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    padding: 0.9rem 1rem;
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    font-size: 0.9rem;
    color: #222;
    animation: bcpgToastIn 0.25s ease;
}

.bcpg-toast.bcpg-toast-error { border-left-color: #c0392b; }
.bcpg-toast.bcpg-toast-info { border-left-color: #2980b9; }
.bcpg-toast.bcpg-toast-warning { border-left-color: #f39c12; }

.bcpg-toast-icon { flex-shrink: 0; margin-top: 0.1rem; }
.bcpg-toast-success .bcpg-toast-icon { color: #2e7d32; }
.bcpg-toast-error .bcpg-toast-icon { color: #c0392b; }
.bcpg-toast-info .bcpg-toast-icon { color: #2980b9; }
.bcpg-toast-warning .bcpg-toast-icon { color: #f39c12; }

.bcpg-toast-message { flex: 1; line-height: 1.4; }

.bcpg-toast-close {
    background: none;
    border: none;
    color: #999;
    cursor: pointer;
    font-size: 0.85rem;
    padding: 0;
    line-height: 1;
}
.bcpg-toast-close:hover { color: #333; }

.bcpg-toast.bcpg-toast-out {
    animation: bcpgToastOut 0.25s ease forwards;
}

@keyframes bcpgToastIn {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
}
@keyframes bcpgToastOut {
    from { opacity: 1; transform: translateX(0); }
    to { opacity: 0; transform: translateX(20px); }
}

@media (max-width: 480px) {
    #bcpg-toast-container {
        top: auto;
        bottom: 1rem;
        right: 0.75rem;
        left: 0.75rem;
        max-width: none;
        width: auto;
    }
}