/* ============================================================
   Vine Agent — Frontend Popup CSS v8.9.6
   VineSub Tech — Emmanuel Abimbola
   ============================================================ */

/* ── Container ───────────────────────────────────────────── */
.va-popup-container {
    position: fixed;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
    z-index: var(--va-z, 99999);
}

.va-popup-container.va-pos-bottom-left   { bottom: var(--va-oy,24px); left:  var(--va-ox,24px); align-items: flex-start; }
.va-popup-container.va-pos-bottom-right  { bottom: var(--va-oy,24px); right: var(--va-ox,24px); align-items: flex-end; }
.va-popup-container.va-pos-bottom-center { bottom: var(--va-oy,24px); left: 50%; transform: translateX(-50%); align-items: center; }
.va-popup-container.va-pos-top-left      { top: var(--va-oy,24px); left:  var(--va-ox,24px); align-items: flex-start; flex-direction: column-reverse; }
.va-popup-container.va-pos-top-right     { top: var(--va-oy,24px); right: var(--va-ox,24px); align-items: flex-end;   flex-direction: column-reverse; }
.va-popup-container.va-pos-top-center    { top: var(--va-oy,24px); left: 50%; transform: translateX(-50%); align-items: center; flex-direction: column-reverse; }

/* ── Popup card ──────────────────────────────────────────── */
.va-popup {
    pointer-events: all;
    width: var(--va-width, 320px);
    max-width: calc(100vw - 32px);
    background: var(--va-bg, #0f0f23);
    color: var(--va-text, #f0f0ff);
    border-radius: var(--va-radius, 14px);
    padding: 14px 16px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    position: relative;
    overflow: hidden;
    cursor: default;
    box-sizing: border-box;
    font-family: var(--va-font, 'DM Sans', sans-serif);
    font-size: var(--va-fs, 13px);
    line-height: 1.45;
    border: 1px solid rgba(255,255,255,.08);
    transition: opacity .25s, transform .25s;
}

.va-popup.va-shadow { box-shadow: 0 8px 32px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.2); }
.va-popup.va-blur-bg { backdrop-filter: blur(14px) saturate(1.5); -webkit-backdrop-filter: blur(14px) saturate(1.5); }

/* Accent strip */
.va-popup::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--va-accent, #7c3aed);
    border-radius: 14px 0 0 14px;
}

/* ── Themes ──────────────────────────────────────────────── */
/* dark is the default — explicit class for completeness */
.va-theme-dark.va-popup {
    background: var(--va-bg, #0f0f23);
    color: var(--va-text, #f0f0ff);
}
.va-theme-light.va-popup {
    background: rgba(255,255,255,.95);
    color: #1a1a2e;
    border: 1px solid rgba(0,0,0,.08);
    box-shadow: 0 4px 24px rgba(0,0,0,.12);
}
.va-theme-glass.va-popup {
    background: rgba(255,255,255,.12);
    color: #fff;
    border: 1px solid rgba(255,255,255,.2);
    backdrop-filter: blur(20px);
}
.va-theme-neon.va-popup {
    background: #060612;
    color: #e0e0ff;
    border: 1px solid var(--va-accent, #7c3aed);
    box-shadow: 0 0 20px rgba(124,58,237,.4), inset 0 0 30px rgba(124,58,237,.05);
}

/* ── Icon ────────────────────────────────────────────────── */
.va-popup-icon {
    font-size: 20px;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 1px;
}

/* ── Body ────────────────────────────────────────────────── */
.va-popup-body { flex: 1; min-width: 0; }

.va-popup-pre-text {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: .6;
    margin-bottom: 2px;
}

.va-popup-number {
    font-size: 22px;
    font-weight: 800;
    color: var(--va-accent, #7c3aed);
    line-height: 1;
    margin-bottom: 2px;
    letter-spacing: -.02em;
}

.va-popup-label {
    font-size: 12px;
    opacity: .75;
    font-weight: 500;
    margin-bottom: 0;
}

.va-popup-post-text {
    font-size: 10px;
    opacity: .5;
    margin-top: 3px;
}

/* ── Flag popup ──────────────────────────────────────────── */
.va-popup-flag-row {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 5px;
}
.va-popup-flag-icon { font-size: 16px; flex-shrink: 0; }
.va-popup-flag-img {
    width: 24px;
    height: 18px;
    border-radius: 2px;
    object-fit: cover;
    flex-shrink: 0;
    vertical-align: middle;
}
.va-popup-flag-country {
    font-weight: 700;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Media: image ────────────────────────────────────────── */
.va-popup-image {
    width: 100%;
    max-height: 140px;
    object-fit: cover;
    border-radius: 8px;
    margin-top: 8px;
    display: block;
}

/* ── Media: video ────────────────────────────────────────── */
.va-popup-video {
    width: 100%;
    max-height: 140px;
    border-radius: 8px;
    margin-top: 8px;
    display: block;
}

/* ── Media: audio ────────────────────────────────────────── */
.va-popup-audio {
    width: 100%;
    margin-top: 8px;
    height: 36px;
}

/* ── CTA Button ──────────────────────────────────────────── */
.va-popup-cta {
    display: inline-flex;
    align-items: center;
    margin-top: 10px;
    padding: 5px 12px;
    background: var(--va-accent, #7c3aed);
    color: #fff !important;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: opacity .2s, transform .15s;
    letter-spacing: .02em;
}
.va-popup-cta:hover { opacity: .88; transform: translateY(-1px); }

/* ── Pulse dot ───────────────────────────────────────────── */
.va-pulse-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    position: absolute;
    top: 12px;
    right: 34px;
    box-shadow: 0 0 0 0 rgba(34,197,94,.6);
    animation: va-pulse-anim 2s infinite;
}
@keyframes va-pulse-anim {
    0%   { box-shadow: 0 0 0 0 rgba(34,197,94,.6); }
    70%  { box-shadow: 0 0 0 8px rgba(34,197,94,0); }
    100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}

/* ── Close button ────────────────────────────────────────── */
.va-popup-close {
    position: absolute;
    top: 8px; right: 8px;
    width: 20px; height: 20px;
    border: none; background: none; cursor: pointer;
    color: inherit; opacity: .4; padding: 0; line-height: 1;
    font-size: 16px; display: flex; align-items: center; justify-content: center;
    border-radius: 50%; transition: opacity .2s, background .2s;
}
.va-popup-close:hover { opacity: 1; background: rgba(255,255,255,.12); }

/* ── Branding ────────────────────────────────────────────── */
.va-popup-branding {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
    font-size: 9px;
    opacity: .35;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* ── HTML notification ───────────────────────────────────── */
.va-popup-html-content {
    font-size: 13px;
    line-height: 1.5;
    margin-top: 4px;
}
.va-popup-html-content * { max-width: 100%; }
.va-popup-html-content img { border-radius: 6px; }

/* ── Progress bar ────────────────────────────────────────── */
.va-popup-progress {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 3px;
    background: rgba(255,255,255,.1);
    border-radius: 0 0 var(--va-radius,14px) var(--va-radius,14px);
    overflow: hidden;
}
.va-popup-progress-bar {
    height: 100%;
    width: 100%;
    background: var(--va-accent, #7c3aed);
    transform-origin: left center;
    /* transition applied by JS */
    will-change: transform;
}

/* ═══ ANIMATIONS ═══════════════════════════════════════════ */

/* slide-up in */
@keyframes va-slide-up-in {
    from { opacity: 0; transform: translateY(24px) scale(.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
/* slide-left in */
@keyframes va-slide-left-in {
    from { opacity: 0; transform: translateX(-24px) scale(.96); }
    to   { opacity: 1; transform: translateX(0) scale(1); }
}
/* slide-right in */
@keyframes va-slide-right-in {
    from { opacity: 0; transform: translateX(24px) scale(.96); }
    to   { opacity: 1; transform: translateX(0) scale(1); }
}
/* fade-in */
@keyframes va-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
/* bounce */
@keyframes va-bounce-in {
    0%   { opacity: 0; transform: scale(.7); }
    60%  { opacity: 1; transform: scale(1.05); }
    80%  { transform: scale(.97); }
    100% { transform: scale(1); }
}
/* zoom-in */
@keyframes va-zoom-in {
    from { opacity: 0; transform: scale(.8); }
    to   { opacity: 1; transform: scale(1); }
}

.va-anim-slide-up   { animation: va-slide-up-in   .38s cubic-bezier(.22,.68,0,1.2) both; }
.va-anim-slide-left { animation: va-slide-left-in  .38s cubic-bezier(.22,.68,0,1.2) both; }
.va-anim-slide-right{ animation: va-slide-right-in .38s cubic-bezier(.22,.68,0,1.2) both; }
.va-anim-fade-in    { animation: va-fade-in         .3s ease both; }
.va-anim-bounce     { animation: va-bounce-in       .5s cubic-bezier(.22,.68,0,1.2) both; }
.va-anim-zoom-in    { animation: va-zoom-in         .3s cubic-bezier(.22,.68,0,1.2) both; }

/* exit */
@keyframes va-fade-out  { to { opacity: 0; transform: scale(.94); } }
@keyframes va-slide-down{ to { opacity: 0; transform: translateY(20px); } }
@keyframes va-zoom-out  { to { opacity: 0; transform: scale(.8); } }

.va-exit-fade-out   { animation: va-fade-out   .28s ease forwards; }
.va-exit-slide-down { animation: va-slide-down .28s ease forwards; }
.va-exit-zoom-out   { animation: va-zoom-out   .28s ease forwards; }

/* ── Custom notification content ─────────────────────────── */
.va-popup-title {
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 4px;
    line-height: 1.3;
}
.va-popup-content-text {
    font-size: 12px;
    opacity: .8;
    line-height: 1.5;
}

/* ── Mobile ──────────────────────────────────────────────── */
@media (max-width: 640px) {
    .va-popup { width: calc(100vw - 32px) !important; max-width: 100%; }
    .va-popup-container.va-pos-bottom-left,
    .va-popup-container.va-pos-bottom-right { left: 16px !important; right: 16px !important; width: auto; }
    .va-popup-container.va-pos-bottom-center { left: 16px; right: 16px; transform: none; }
}

/* ═══════════════════════════════════════════════════════════
   v8.9.7 — Per-popup independent containers
   ═══════════════════════════════════════════════════════════ */

/* Multiple containers can exist simultaneously, one per position */
.va-popup-container + .va-popup-container { /* siblings OK */ }

/* Neon theme glow on number */
.va-theme-neon .va-popup-number {
    color: #a78bfa;
    text-shadow: 0 0 12px rgba(167,139,250,.6);
}

/* Light theme number colour */
.va-theme-light .va-popup-number { color: var(--va-accent, #7c3aed); }

/* Popup stagger: each subsequent popup offset slightly */
.va-popup-container .va-popup:nth-child(2) { opacity:.95; transform:scale(.99); }
.va-popup-container .va-popup:nth-child(3) { opacity:.9;  transform:scale(.98); }

/* Per-popup accent override via inline style variable */
.va-popup { --va-popup-accent: var(--va-accent); }

/* Wide popup support */
.va-popup[style*="width"] { max-width: calc(100vw - 32px); }

/* Coupon/promo style */
.va-popup-type-coupon .va-popup-number {
    font-family: 'Courier New', monospace;
    font-size: 18px;
    letter-spacing: .1em;
    background: rgba(255,255,255,.1);
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px dashed currentColor;
}

/* Review stars */
.va-popup-stars { color: #f59e0b; font-size: 14px; margin-bottom: 4px; letter-spacing: 2px; }

/* Purchase / signup badge */
.va-popup-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    padding: 2px 7px;
    border-radius: 20px;
    background: rgba(34,197,94,.15);
    color: #16a34a;
    margin-bottom: 6px;
}

/* Audio player compact */
.va-popup-audio { height: 32px; border-radius: 20px; }

/* CTA hover state */
.va-popup-cta { cursor: pointer; }
.va-popup-cta:hover { filter: brightness(1.1); transform: translateY(-1px); }