/* ============================================================
   Jamisan Social Proof – Frontend Styles
   ============================================================ */

/* --- Base popup --- */
#jsp-popup {
    position: fixed;
    /* needed for the absolute-positioned progress bar child */
    z-index: 999999;
    /* min/max-width set via inline style from admin settings */
    padding: 14px 16px 14px 14px;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 14px;
    line-height: 1.4;
    transition: opacity 0.35s ease, transform 0.35s ease;
    opacity: 0;
    pointer-events: none;
    box-sizing: border-box;
}

#jsp-popup.jsp-visible {
    opacity: 1;
    pointer-events: auto;
}

/* Position variants */
/* top/bottom offset is set via inline style from admin settings (default 24px) */
#jsp-popup.jsp-bottom-left  { bottom: 24px; left: 24px; }
#jsp-popup.jsp-bottom-right { bottom: 24px; right: 24px; }
#jsp-popup.jsp-top-left     { top: 24px;    left: 24px; }
#jsp-popup.jsp-top-right    { top: 24px;    right: 24px; }

/* Slide-in from bottom for bottom positions */
#jsp-popup.jsp-bottom-left,
#jsp-popup.jsp-bottom-right {
    transform: translateY(16px);
}
#jsp-popup.jsp-bottom-left.jsp-visible,
#jsp-popup.jsp-bottom-right.jsp-visible {
    transform: translateY(0);
}

/* Slide-in from top for top positions */
#jsp-popup.jsp-top-left,
#jsp-popup.jsp-top-right {
    transform: translateY(-16px);
}
#jsp-popup.jsp-top-left.jsp-visible,
#jsp-popup.jsp-top-right.jsp-visible {
    transform: translateY(0);
}

/* ── Pulse entry animation (alternative to slide) ──────────── */
@keyframes jsp-pulse-in {
    0%   { opacity: 0; transform: scale(0.82); }
    60%  { opacity: 1; transform: scale(1.04); }
    80%  { transform: scale(0.98); }
    100% { transform: scale(1); }
}

/* Slide is the default — handled by translateY above.
   Pulse overrides the slide transform entirely. */
#jsp-popup.jsp-anim-pulse {
    transform: scale(0.82) !important;
    transition: opacity 0.3s ease;
}
#jsp-popup.jsp-anim-pulse.jsp-visible {
    transform: scale(1) !important;
}
#jsp-popup.jsp-anim-pulse.jsp-pulse-enter {
    animation: jsp-pulse-in 0.42s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Close button */
.jsp-close {
    position: absolute;
    top: 8px;
    right: 10px;
    background: none;
    border: none;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    opacity: 0.5;
    transition: opacity 0.2s;
}
.jsp-close:hover { opacity: 1; }

/* Thumbnail wrapper — holds either image or emoji icon */
.jsp-thumb {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.06);
    margin-top: 2px;
}

/* Featured image */
.jsp-thumb-img {
    width: 52px;
    height: 52px;
    object-fit: cover;
    display: block;
    border-radius: 8px;
}

/* Emoji fallback */
.jsp-thumb-icon {
    font-size: 24px;
    line-height: 1;
}

/* When image loads, make the background transparent */
#jsp-popup.jsp-has-image .jsp-thumb {
    background: transparent;
}

/* Body */
.jsp-body { flex: 1; padding-right: 16px; }
.jsp-message {
    margin: 0 0 4px;
    font-weight: 600;
}
.jsp-ago {
    margin: 0;
    font-size: 12px;
    opacity: 0.6;
}

/* Verified purchase badge */
.jsp-verified {
    margin: 5px 0 0;
    font-size: 11px;
    font-weight: 600;
    color: #16a34a;
    letter-spacing: 0.02em;
}

/* ============================================================
   Progress bar (Feature 4)
   ============================================================ */
.jsp-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    width: 100%;
    border-radius: 0 0 10px 10px;
    background: rgba(0, 0, 0, 0.12);
    overflow: hidden;
    pointer-events: none;
}

/* The fill colour is set per-template below */
.jsp-progress::after {
    content: '';
    display: block;
    height: 100%;
    width: inherit;
    border-radius: 0 0 10px 10px;
    background: currentColor;
    opacity: 0.35;
}

/* ============================================================
   Template 1 – Clean White (default)
   ============================================================ */
#jsp-popup.jsp-template-1 {
    background: #ffffff;
    border: 1px solid #e8e8e8;
    color: #1a1a1a;
}
#jsp-popup.jsp-template-1 .jsp-close { color: #333; }
#jsp-popup.jsp-template-1 .jsp-message { color: #1a1a1a; }

/* ============================================================
   Template 2 – Dark Card
   ============================================================ */
#jsp-popup.jsp-template-2 {
    background: #1e1e2e;
    border: 1px solid #2e2e3e;
    color: #e0e0f0;
}
#jsp-popup.jsp-template-2 .jsp-close { color: #aaa; }
#jsp-popup.jsp-template-2 .jsp-message { color: #ffffff; }
#jsp-popup.jsp-template-2 .jsp-ago { color: #888; }
#jsp-popup.jsp-template-2 .jsp-progress { background: rgba(255,255,255,0.1); }
#jsp-popup.jsp-template-2 .jsp-progress::after { background: #818cf8; opacity: 0.7; }

/* ============================================================
   Template 3 – Green Accent
   ============================================================ */
#jsp-popup.jsp-template-3 {
    background: #f0faf4;
    border-left: 4px solid #22c55e;
    border-top: 1px solid #d1fae5;
    border-right: 1px solid #d1fae5;
    border-bottom: 1px solid #d1fae5;
    color: #14532d;
}
#jsp-popup.jsp-template-3 .jsp-close { color: #166534; }
#jsp-popup.jsp-template-3 .jsp-message { color: #15803d; }
#jsp-popup.jsp-template-3 .jsp-progress::after { background: #22c55e; opacity: 0.6; }

/* ============================================================
   Template 4 – Bold Orange
   ============================================================ */
#jsp-popup.jsp-template-4 {
    background: #fff7ed;
    border-left: 4px solid #f97316;
    border-top: 1px solid #fed7aa;
    border-right: 1px solid #fed7aa;
    border-bottom: 1px solid #fed7aa;
    color: #7c2d12;
}
#jsp-popup.jsp-template-4 .jsp-close { color: #9a3412; }
#jsp-popup.jsp-template-4 .jsp-message { color: #c2410c; }
#jsp-popup.jsp-template-4 .jsp-progress::after { background: #f97316; opacity: 0.6; }

/* ============================================================
   Template 5 – Purple Glow
   ============================================================ */
#jsp-popup.jsp-template-5 {
    background: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%);
    border: 1px solid #4338ca;
    color: #e0e7ff;
    box-shadow: 0 4px 24px rgba(99, 102, 241, 0.35);
}
#jsp-popup.jsp-template-5 .jsp-close { color: #a5b4fc; }
#jsp-popup.jsp-template-5 .jsp-message { color: #ffffff; }
#jsp-popup.jsp-template-5 .jsp-ago { color: #a5b4fc; }
#jsp-popup.jsp-template-5 .jsp-progress { background: rgba(255,255,255,0.08); }
#jsp-popup.jsp-template-5 .jsp-progress::after { background: #a5b4fc; opacity: 0.7; }

/* ============================================================
   Mobile
   ============================================================ */
@media (max-width: 480px) {
    #jsp-popup {
        max-width: calc(100vw - 32px);
        min-width: unset;
        left: 16px !important;
        right: 16px !important;
        bottom: 16px !important;
        top: unset !important;
        font-size: 13px;
    }
}

/* ============================================================
   [jsp_viewers] Shortcode
   ============================================================ */
.jsp-viewers {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 500;
    color: #c0392b;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    line-height: 1.4;
}

.jsp-viewers-icon {
    font-size: 15px;
    flex-shrink: 0;
}

.jsp-viewer-count {
    font-weight: 700;
    transition: opacity 0.3s ease;
}

/* ============================================================
   [jsp_stock] Shortcode
   ============================================================ */
.jsp-stock {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 500;
    color: #b91c1c;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    line-height: 1.4;
}

.jsp-stock-icon {
    font-size: 15px;
    flex-shrink: 0;
}

.jsp-stock-count {
    font-weight: 700;
}

/* ============================================================
   [jsp_orders_today] Shortcode
   ============================================================ */
.jsp-orders-today {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 500;
    color: #b45309;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    line-height: 1.4;
}

.jsp-orders-icon {
    font-size: 15px;
    flex-shrink: 0;
}

.jsp-orders-count {
    font-weight: 700;
}

/* ============================================================
   Background Themes (jsp-theme-*)
   Applied as a second class on #jsp-popup alongside jsp-template-*
   Images are 517×111px banners — cover the popup width, anchored right
   so the decorative elements in the bottom-right corner stay visible.
   ============================================================ */

/* Shared: all themed popups use the bg image */
#jsp-popup[class*="jsp-theme-"] {
    background-size: cover;
    background-position: center right;
    background-repeat: no-repeat;
    border: none;
    border-radius: 10px;
}

/* Override text/close colours for light bg themes */
#jsp-popup[class*="jsp-theme-"] .jsp-message   { color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.25); }
#jsp-popup[class*="jsp-theme-"] .jsp-ago        { color: rgba(255,255,255,0.85); }
#jsp-popup[class*="jsp-theme-"] .jsp-verified   { color: rgba(255,255,255,0.9); }
#jsp-popup[class*="jsp-theme-"] .jsp-close      { color: rgba(255,255,255,0.8); }
#jsp-popup[class*="jsp-theme-"] .jsp-close:hover { color: #fff; }
#jsp-popup[class*="jsp-theme-"] .jsp-thumb      { background: rgba(255,255,255,0.2); }
#jsp-popup[class*="jsp-theme-"] .jsp-progress   { background: rgba(255,255,255,0.2); }
#jsp-popup[class*="jsp-theme-"] .jsp-progress::after { background: rgba(255,255,255,0.75); opacity: 1; }

/* ── Spring (green leaves) ── */
#jsp-popup.jsp-theme-spring {
    background-image: url('../img/bg_spring.png');
    box-shadow: 0 4px 20px rgba(67, 160, 71, 0.4);
}

/* ── Yellow (floating spheres) ── */
#jsp-popup.jsp-theme-yellow {
    background-image: url('../img/bg_yellow.png');
    box-shadow: 0 4px 20px rgba(251, 192, 45, 0.45);
}
/* Yellow bg is bright — use dark text for readability */
#jsp-popup.jsp-theme-yellow .jsp-message  { color: #4a3500; text-shadow: none; }
#jsp-popup.jsp-theme-yellow .jsp-ago      { color: rgba(74, 53, 0, 0.75); }
#jsp-popup.jsp-theme-yellow .jsp-verified { color: rgba(74, 53, 0, 0.85); }
#jsp-popup.jsp-theme-yellow .jsp-close    { color: rgba(74, 53, 0, 0.6); }
#jsp-popup.jsp-theme-yellow .jsp-close:hover { color: #4a3500; }
#jsp-popup.jsp-theme-yellow .jsp-thumb    { background: rgba(0,0,0,0.08); }
#jsp-popup.jsp-theme-yellow .jsp-progress { background: rgba(0,0,0,0.12); }
#jsp-popup.jsp-theme-yellow .jsp-progress::after { background: rgba(74,53,0,0.5); opacity: 1; }

/* ── Blue sky (clouds) ── */
#jsp-popup.jsp-theme-blue {
    background-image: url('../img/bg_blue_v2.png');
    box-shadow: 0 4px 20px rgba(41, 182, 246, 0.4);
}

/* ── Christmas (Santa sleigh, green) ── */
#jsp-popup.jsp-theme-christmas {
    background-image: url('../img/bg_christmas_v2.png');
    box-shadow: 0 4px 20px rgba(27, 94, 32, 0.45);
}

/* ── New Year (red, gold florals) ── */
#jsp-popup.jsp-theme-newyear {
    background-image: url('../img/bg_new_year.png');
    box-shadow: 0 4px 20px rgba(183, 28, 28, 0.45);
}

/* ── Orange (citrus/juice) ── */
#jsp-popup.jsp-theme-orange {
    background-image: url('../img/bg_orange_v2.png');
    box-shadow: 0 4px 20px rgba(230, 81, 0, 0.4);
}

/* ── Pink (abstract waves) ── */
#jsp-popup.jsp-theme-pink {
    background-image: url('../img/bg_pink.png');
    box-shadow: 0 4px 20px rgba(233, 30, 99, 0.4);
}

/* ============================================================
   Clickable popup — cursor + hover lift when a link is set
   (cursor:pointer is applied via JS only when popupLinkUrl is set)
   ============================================================ */
#jsp-popup[style*="cursor: pointer"],
#jsp-popup[style*="cursor:pointer"] {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
#jsp-popup[style*="cursor: pointer"]:hover,
#jsp-popup[style*="cursor:pointer"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
}