.notification {

    position: fixed;

    top: 20px;

    right: 20px;

    padding: 1rem 1.5rem;

    border-radius: var(--radius);

    background: white;

    box-shadow: var(--shadow);

    display: flex;

    align-items: center;

    gap: 0.75rem;

    transform: translateX(120%);

    opacity: 0;

    transition: all 0.3s ease;

    z-index: 1000;

}



.notification.show {

    transform: translateX(0);

    opacity: 1;

}



.notification.success {

    border-left: 4px solid var(--success);

}



.notification.error {

    border-left: 4px solid var(--danger);

}



.notification i {

    font-size: 1.25rem;

}



.notification.success i {

    color: var(--success);

}



.notification.error i {

    color: var(--danger);

}



.cart-counter {

    position: absolute;

    top: -8px;

    right: -8px;

    background: var(--accent);

    color: white;

    border-radius: 50%;

    width: 20px;

    height: 20px;

    font-size: 0.75rem;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: transform 0.3s ease;

}



.cart-counter.pulse {

    animation: pulse 0.3s ease;

}



@keyframes pulse {

    0% { transform: scale(1); }

    50% { transform: scale(1.2); }

    100% { transform: scale(1); }

}