/*
 * Darealmop_SocialProof — recent-purchase toast.
 *
 * Theme-agnostic: every value is a --dm-social-proof-* custom property with a
 * sensible fallback, so any theme can restyle the toast (colours, size, offsets,
 * radius, shadow) without touching the JS. Bottom-left, slide-in / slide-out,
 * and honours prefers-reduced-motion (fades instead of slides).
 *
 * The container (.dm-social-proof) is a fixed anchor holding a stack; the JS
 * injects/removes one .dm-social-proof__toast at a time.
 */

.dm-social-proof {
    position: fixed;
    z-index: var(--dm-social-proof-z, 60);
    left: var(--dm-social-proof-side, 20px);
    bottom: var(--dm-social-proof-bottom, 20px);
    width: var(--dm-social-proof-width, 340px);
    max-width: calc(100vw - (var(--dm-social-proof-side, 20px) * 2));
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none; /* only the toasts themselves are interactive */
}

.dm-social-proof__toast {
    pointer-events: auto;
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--dm-social-proof-gap, 12px);
    padding: var(--dm-social-proof-padding, 12px 14px);
    border-radius: var(--dm-social-proof-radius, 12px);
    background: var(--dm-social-proof-bg, #ffffff);
    color: var(--dm-social-proof-color, #1f2937);
    border: var(--dm-social-proof-border, 1px solid rgba(0, 0, 0, .08));
    box-shadow: var(--dm-social-proof-shadow, 0 10px 30px rgba(0, 0, 0, .16));
    text-decoration: none;
    /* Enter/leave animation state (JS toggles .is-visible). */
    opacity: 0;
    transform: translateX(-16px);
    transition:
        opacity var(--dm-social-proof-anim, .32s) ease,
        transform var(--dm-social-proof-anim, .32s) cubic-bezier(.22, 1, .36, 1);
    will-change: opacity, transform;
}

.dm-social-proof__toast.is-visible {
    opacity: 1;
    transform: translateX(0);
}

/* Leaving: slide back out to the left. */
.dm-social-proof__toast.is-leaving {
    opacity: 0;
    transform: translateX(-16px);
}

/* A toast can be a link (wraps to the product) or a plain div. */
a.dm-social-proof__toast:hover {
    box-shadow: var(--dm-social-proof-shadow-hover, 0 14px 36px rgba(0, 0, 0, .22));
}

.dm-social-proof__media {
    flex: 0 0 auto;
    width: var(--dm-social-proof-thumb, 48px);
    height: var(--dm-social-proof-thumb, 48px);
    border-radius: var(--dm-social-proof-thumb-radius, 8px);
    overflow: hidden;
    background: var(--dm-social-proof-thumb-bg, rgba(0, 0, 0, .05));
    display: flex;
    align-items: center;
    justify-content: center;
}

.dm-social-proof__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Accent dot shown when a product has no image. */
.dm-social-proof__media--empty::after {
    content: '';
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--dm-social-proof-accent, currentColor);
}

.dm-social-proof__body {
    flex: 1 1 auto;
    min-width: 0; /* allow the product name to ellipsis */
    line-height: 1.35;
}

.dm-social-proof__eyebrow {
    display: block;
    font-size: var(--dm-social-proof-eyebrow-size, .68rem);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--dm-social-proof-accent, currentColor);
    margin-bottom: 2px;
}

.dm-social-proof__text {
    display: block;
    font-size: var(--dm-social-proof-text-size, .85rem);
}

.dm-social-proof__product {
    font-weight: 600;
    /* Clamp long product names to one line so the toast stays compact. */
    display: inline-block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
}

.dm-social-proof__meta {
    display: block;
    margin-top: 3px;
    font-size: var(--dm-social-proof-meta-size, .72rem);
    color: var(--dm-social-proof-meta-color, rgba(0, 0, 0, .6));
}

.dm-social-proof__meta-time::before {
    content: '·';
    margin: 0 5px;
    opacity: .6;
}

/* Dismiss button (× — also auto-hides). */
.dm-social-proof__close {
    flex: 0 0 auto;
    align-self: flex-start;
    width: 22px;
    height: 22px;
    margin: -2px -4px 0 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--dm-social-proof-close-color, rgba(0, 0, 0, .45));
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .15s ease, color .15s ease;
    -webkit-tap-highlight-color: transparent;
}

.dm-social-proof__close:hover {
    background: var(--dm-social-proof-close-hover-bg, rgba(0, 0, 0, .08));
    color: var(--dm-social-proof-close-hover-color, #1f2937);
}

@media (max-width: 480px) {
    .dm-social-proof {
        left: var(--dm-social-proof-side-mobile, 12px);
        right: var(--dm-social-proof-side-mobile, 12px);
        bottom: var(--dm-social-proof-bottom-mobile, 12px);
        width: auto;
        max-width: none;
    }
}

/* Reduced motion: fade only, no horizontal slide. */
@media (prefers-reduced-motion: reduce) {
    .dm-social-proof__toast {
        transition: opacity var(--dm-social-proof-anim, .32s) ease;
        transform: none;
    }
    .dm-social-proof__toast.is-visible,
    .dm-social-proof__toast.is-leaving {
        transform: none;
    }
}