/* ═══════════════════════════════════════════
   Banner Popup Pro — Frontend CSS v2
   ═══════════════════════════════════════════ */

/* ── POPUP ───────────────────────────────── */
.bpp-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 999999;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
}

.bpp-overlay.bpp-visible {
    display: flex;
    animation: bppFadeIn .25s ease;
}

@keyframes bppFadeIn  { from { opacity:0 } to { opacity:1 } }
@keyframes bppSlideUp {
    from { opacity:0; transform: translateY(28px) scale(.97); }
    to   { opacity:1; transform: translateY(0)    scale(1);   }
}

.bpp-popup {
    position: relative;
    width: 100%;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 24px 64px rgba(0,0,0,.45), 0 4px 16px rgba(0,0,0,.2);
    animation: bppSlideUp .35s cubic-bezier(.34,1.56,.64,1);
}

.bpp-popup-img-wrap { line-height: 0; }
.bpp-popup-img-wrap img,
.bpp-popup-img-wrap a { display:block; width:100%; height:auto; line-height:0; }

/* Close button */
.bpp-close {
    position: absolute;
    top: 10px; right: 10px;
    z-index: 10;
    width: 36px; height: 36px;
    border: none; border-radius: 50%;
    background: rgba(0,0,0,.6);
    color: #fff;
    font-size: 16px; font-weight: 700; line-height: 1;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .2s, transform .15s;
    backdrop-filter: blur(4px);
}
.bpp-close:hover  { background: rgba(0,0,0,.85); transform: scale(1.1); }
.bpp-close:focus  { outline: 2px solid #fff; outline-offset: 2px; }

/* Mobile */
@media (max-width: 600px) {
    .bpp-overlay { padding: 0; align-items: flex-end; }
    .bpp-popup   { border-radius: 14px 14px 0 0 !important; max-width: 100% !important; }
    .bpp-close   { top:8px; right:8px; width:32px; height:32px; font-size:14px; }
}

/* ── INLINE BANNER (shortcode) ───────────── */
.bpp-inline-wrap {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 8px;
}

.bpp-inline-slides { position: relative; width: 100%; line-height: 0; }

.bpp-inline-slide { display: none; width: 100%; }
.bpp-inline-slide.bpp-inline-active { display: block; animation: bppIn .3s ease; }
@keyframes bppIn { from { opacity:0; transform:translateX(16px); } to { opacity:1; transform:translateX(0); } }

.bpp-inline-slide img,
.bpp-inline-slide a { display:block; width:100%; height:auto; }

/* Inline nav */
.bpp-inline-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: rgba(0,0,0,.04);
    border-top: 1px solid rgba(0,0,0,.08);
}

.bpp-inline-prev,
.bpp-inline-next {
    width: 32px; height: 32px;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: 50%;
    background: #fff;
    color: #333;
    font-size: 20px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .2s;
}
.bpp-inline-prev:hover,
.bpp-inline-next:hover { background: #f0f0f0; }

.bpp-inline-dots { display: flex; gap: 6px; }
.bpp-idot {
    width: 8px; height: 8px;
    border-radius: 50%; border: none;
    background: rgba(0,0,0,.2);
    cursor: pointer; padding: 0;
    transition: background .2s, transform .15s;
}
.bpp-idot.bpp-idot-active { background: #333; transform: scale(1.3); }