/* Blog Booster — Social Proof Toasts
 * Anonymisierte Recent-Purchase Notifications. Slide-in von der Ecke. */

.bb-sp {
    position: fixed;
    /* Sticky-Bar-Layer (1030) — non-blocking Notification, darf neben (nicht ueber) Modals leben. */
    z-index: var(--z-sticky-bar, 1030);
    max-width: 320px;
    pointer-events: none;
}

.bb-sp--bottom_left  { bottom: 20px; left: 20px; }
.bb-sp--bottom_right { bottom: 20px; right: 20px; }
.bb-sp--top_left     { top: 20px; left: 20px; }
.bb-sp--top_right    { top: 20px; right: 20px; }

.bb-sp__toast {
    pointer-events: auto;
    background: var(--bb-sp-bg, #ffffff);
    color: var(--bb-sp-color, #1f2937);
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
    padding: 12px 36px 12px 12px;
    display: flex;
    gap: 12px;
    align-items: center;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.35;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .3s ease, transform .3s ease;
    position: relative;
}

.bb-sp--top_left .bb-sp__toast,
.bb-sp--top_right .bb-sp__toast {
    transform: translateY(-20px);
}

.bb-sp__toast.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.bb-sp__img {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    background: #f3f4f6 center/cover no-repeat;
    border-radius: 6px;
}

.bb-sp__body {
    flex: 1;
    min-width: 0;
}

.bb-sp__msg {
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.bb-sp__msg strong {
    font-weight: 600;
}

.bb-sp__time {
    margin: 3px 0 0;
    font-size: 12px;
    color: rgba(31, 41, 55, .6);
}

.bb-sp__close {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 24px;
    height: 24px;
    padding: 0;
    background: transparent;
    color: inherit;
    border: 0;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    opacity: .5;
    border-radius: 4px;
}
.bb-sp__close:hover,
.bb-sp__close:focus {
    opacity: 1;
    outline: 1px solid currentColor;
}

@media (max-width: 480px) {
    .bb-sp {
        max-width: calc(100vw - 32px);
        left: 16px !important;
        right: 16px !important;
    }
    .bb-sp__toast {
        font-size: 13px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bb-sp__toast {
        transition: none;
    }
}