/*
 * FOMO Show — v4.2.0
 * All rules use #spp-wrap as a prefix to beat theme overrides.
 * Colors controlled via CSS custom properties injected by PHP.
 */

#spp-wrap {
    --spp-bg:        #1c3a1e;
    --spp-accent:    #4ade80;
    --spp-text:      #ffffff;
    --spp-subtext:   #86a887;
    --spp-highlight: #4ade80;

    position: fixed !important;
    z-index: 2147483647 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    pointer-events: none !important;
    max-width: 320px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

#spp-wrap.spp-bottom-left  { bottom: 80px !important; left: 24px !important; right: auto !important; top: auto !important; }
#spp-wrap.spp-bottom-right { bottom: 80px !important; right: 24px !important; left: auto !important; top: auto !important; }

#spp-wrap .spp-popup {
    all: unset !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    background: var(--spp-bg) !important;
    border-radius: 10px !important;
    padding: 13px 15px !important;
    width: 305px !important;
    box-sizing: border-box !important;
    box-shadow: 0 6px 32px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.06) !important;
    border-left: 3px solid var(--spp-accent) !important;
    pointer-events: all !important;
    position: relative !important;
    overflow: hidden !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    cursor: default !important;
}

/* Slide in from left */
#spp-wrap.spp-bottom-left .spp-popup {
    transform: translateX(-345px) !important;
    opacity: 0 !important;
    transition: transform 0.42s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease !important;
}
#spp-wrap.spp-bottom-right .spp-popup {
    transform: translateX(345px) !important;
    opacity: 0 !important;
    transition: transform 0.42s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease !important;
}
#spp-wrap .spp-popup.spp-show {
    transform: translateX(0) !important;
    opacity: 1 !important;
}
#spp-wrap .spp-popup.spp-hide {
    transform: translateX(-345px) !important;
    opacity: 0 !important;
    transition: transform 0.3s ease, opacity 0.25s ease !important;
}
#spp-wrap.spp-bottom-right .spp-popup.spp-hide {
    transform: translateX(345px) !important;
}

/* Progress bar */
#spp-wrap .spp-progress {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    height: 2px !important;
    background: var(--spp-accent) !important;
    width: 100% !important;
    transform-origin: left !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Avatar */
#spp-wrap .spp-avatar {
    width: 42px !important;
    height: 42px !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    color: var(--spp-bg) !important;
    background: var(--spp-accent) !important;
    position: relative !important;
    border: 2px solid rgba(255,255,255,0.15) !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    text-decoration: none !important;
}
#spp-wrap .spp-avatar-dot {
    position: absolute !important;
    bottom: 1px !important;
    right: 1px !important;
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    background: #86efac !important;
    border: 2px solid var(--spp-bg) !important;
    display: block !important;
}

/* Body */
#spp-wrap .spp-body {
    flex: 1 !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

#spp-wrap .spp-name {
    display: block !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    color: var(--spp-text) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin: 0 0 3px 0 !important;
    padding: 0 !important;
    letter-spacing: 0.01em !important;
    line-height: 1.3 !important;
    background: transparent !important;
    text-decoration: none !important;
}
#spp-wrap .spp-message {
    display: block !important;
    font-size: 12px !important;
    color: var(--spp-subtext) !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}
#spp-wrap .spp-message strong {
    color: var(--spp-highlight) !important;
    font-weight: 600 !important;
    background: transparent !important;
}

/* Icon */
#spp-wrap .spp-icon {
    width: 34px !important;
    height: 34px !important;
    border-radius: 7px !important;
    background: rgba(255,255,255,0.07) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 17px !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
}

/* Close button */
#spp-wrap .spp-close {
    all: unset !important;
    position: absolute !important;
    top: 7px !important;
    right: 7px !important;
    width: 18px !important;
    height: 18px !important;
    border-radius: 50% !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--spp-subtext) !important;
    font-size: 14px !important;
    line-height: 1 !important;
    padding: 0 !important;
    transition: background 0.15s, color 0.15s !important;
    box-shadow: none !important;
    text-decoration: none !important;
}
#spp-wrap .spp-close:hover {
    background: rgba(255,255,255,0.1) !important;
    color: var(--spp-text) !important;
}