/* ============================================
   TOASTS - Notifications flottantes
   Remplace l'ancien systeme de bannieres flash
   ============================================ */

.toast-stack {
    position: fixed;
    top: 84px;
    right: 24px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 340px;
    max-width: calc(100vw - 32px);
    pointer-events: none;
}

.toast {
    pointer-events: auto;
    background: var(--surface, #FFFFFF);
    border: 0.5px solid var(--border, #E5E5E5);
    border-radius: 14px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.10);
    padding: 12px 14px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    animation: toast-in 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.toast.is-leaving {
    animation: toast-out 0.22s ease-in forwards;
}

@keyframes toast-in {
    from { transform: translateX(32px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes toast-out {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(32px); opacity: 0; }
}

.toast__icon {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
    font-size: 13px;
}

.toast__body {
    flex: 1;
    min-width: 0;
}

.toast__title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary, #1A1A1A);
    margin: 0 0 2px;
}

.toast__message {
    font-size: 12px;
    color: var(--text-secondary, #6B6B6B);
    margin: 0;
    line-height: 1.4;
}

.toast__close {
    background: none;
    border: none;
    color: var(--text-secondary, #6B6B6B);
    cursor: pointer;
    font-size: 13px;
    padding: 2px;
    flex-shrink: 0;
    border-radius: 6px;
    line-height: 1;
}

.toast__close:hover {
    background: var(--background, #FAFAF7);
}

/* Variantes générales (success / error / warning / info) */
.toast--success { border-left: 3px solid #228b57; }
.toast--success .toast__icon { background: #f0f9f4; color: #228b57; }

.toast--error { border-left: 3px solid #A32D2D; }
.toast--error .toast__icon { background: #fdf2f2; color: #A32D2D; }

.toast--warning { border-left: 3px solid #b35a00; }
.toast--warning .toast__icon { background: #fff4e6; color: #b35a00; }

.toast--info { border-left: 3px solid #6B6B6B; }
.toast--info .toast__icon { background: #F1EFE8; color: #5F5E5A; }

/* Variante "panier" : miniature produit + lien */
.toast--cart {
    border-left: 3px solid var(--primary, #F77F00);
}

.toast__thumb {
    position: relative;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
}

.toast__thumb-img {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    object-fit: cover;
    background: var(--primary-light, #FFF4E6);
}

.toast__thumb-placeholder {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    background: var(--primary-light, #FFF4E6);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary, #F77F00);
    font-size: 20px;
}

.toast__thumb-badge {
    position: absolute;
    bottom: -4px;
    right: -4px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #228b57;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--surface, #FFFFFF);
    color: #FFFFFF;
    font-size: 9px;
}

.toast__cart-link {
    font-size: 12px;
    font-weight: 600;
    color: var(--primary, #F77F00);
    white-space: nowrap;
    text-decoration: none;
    align-self: center;
}

@media (max-width: 640px) {
    .toast-stack {
        top: auto;
        bottom: 16px;
        right: 16px;
        left: 16px;
        width: auto;
    }
}