/* Social Proof Popup v2.0 — Clean Edition */

/* Tabler Icons CDN */
@import url('https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@3.0.0/dist/tabler-icons.min.css');

.spp-wrap {
    position: fixed;
    z-index: 999999;
    display: none;
    align-items: center;
    gap: 13px;
    background: #ffffff;
    border-radius: 16px;
    padding: 14px 16px 14px 14px;
    box-shadow: 0 2px 16px rgba(0,0,0,0.10), 0 0 0 1px rgba(0,0,0,0.06);
    max-width: 310px;
    min-width: 230px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    overflow: hidden;
}

/* Posisi */
.spp-bottom-left  { bottom: 24px; left: 24px; }
.spp-bottom-right { bottom: 24px; right: 24px; }
.spp-top-left     { top: 80px;   left: 24px; }
.spp-top-right    { top: 80px;   right: 24px; }

/* Garis aksen kiri */
.spp-accent {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    border-radius: 16px 0 0 16px;
}

/* Kotak ikon */
.spp-icon-box {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.spp-icon-box .ti {
    font-size: 22px;
}

/* Body */
.spp-body { flex: 1; min-width: 0; }
.spp-name {
    font-size: 13.5px;
    font-weight: 700;
    color: #111111;
    line-height: 1.3;
    margin-bottom: 2px;
}
.spp-action {
    font-size: 12.5px;
    color: #555555;
    line-height: 1.4;
    margin-bottom: 5px;
}
.spp-time-row {
    display: flex;
    align-items: center;
    gap: 5px;
}
.spp-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}
.spp-time {
    font-size: 11.5px;
    color: #999999;
}

/* Tombol tutup */
.spp-close {
    position: absolute;
    top: 10px;
    right: 12px;
    background: none;
    border: none;
    font-size: 17px;
    line-height: 1;
    color: #cccccc;
    cursor: pointer;
    padding: 0;
    font-family: inherit;
    transition: color 0.15s;
}
.spp-close:hover { color: #666; }

/* Animasi masuk — bawah */
.spp-bottom-left.spp-in,
.spp-bottom-right.spp-in {
    animation: sppInBottom 0.45s cubic-bezier(.22,1,.36,1) both;
}
/* Animasi masuk — atas */
.spp-top-left.spp-in,
.spp-top-right.spp-in {
    animation: sppInTop 0.45s cubic-bezier(.22,1,.36,1) both;
}
/* Animasi keluar */
.spp-wrap.spp-out {
    animation: sppOut 0.28s ease forwards;
}

@keyframes sppInBottom {
    from { opacity:0; transform: translateY(18px) scale(0.96); }
    to   { opacity:1; transform: translateY(0)    scale(1); }
}
@keyframes sppInTop {
    from { opacity:0; transform: translateY(-18px) scale(0.96); }
    to   { opacity:1; transform: translateY(0)     scale(1); }
}
@keyframes sppOut {
    from { opacity:1; transform: translateY(0)  scale(1); }
    to   { opacity:0; transform: translateY(10px) scale(0.97); }
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
    .spp-wrap { background:#1c1c1e; box-shadow: 0 2px 16px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.08); }
    .spp-name   { color: #f2f2f7; }
    .spp-action { color: #aeaeb2; }
    .spp-close  { color: #48484a; }
    .spp-close:hover { color: #c7c7cc; }
}

/* Mobile */
@media (max-width: 480px) {
    .spp-wrap {
        max-width: calc(100vw - 32px);
        left: 16px !important;
        right: 16px !important;
    }
    .spp-bottom-left, .spp-bottom-right { bottom: 16px; }
    .spp-top-left,    .spp-top-right    { top: 70px; }
}