/* ──────────────────────────────────────────────────────────────
   INFLUHKS Popup Engine — storefront styles
   Self-contained, scoped under .ppx-* so it never clashes with the
   theme. Fully responsive (desktop + mobile layouts).
   ────────────────────────────────────────────────────────────── */

.ppx-overlay {
    position: fixed;
    inset: 0;
    z-index: 99990;
    display: flex;
    padding: 20px;
    background: rgba(15, 23, 42, 0);
    transition: background .25s ease;
    pointer-events: none;
}
.ppx-overlay.ppx-has-dim { background: rgba(15, 23, 42, .55); pointer-events: auto; }
.ppx-overlay.ppx-pos-center { align-items: center; justify-content: center; }
.ppx-overlay.ppx-pos-top    { align-items: flex-start; justify-content: center; }
.ppx-overlay.ppx-pos-bottom { align-items: flex-end; justify-content: center; }
.ppx-overlay.ppx-pos-bottom-right { align-items: flex-end; justify-content: flex-end; }
.ppx-overlay.ppx-pos-bottom-left  { align-items: flex-end; justify-content: flex-start; }

.ppx-card {
    position: relative;
    width: 100%;
    max-width: 460px;
    background: #fff;
    color: #0f172a;
    border-radius: 16px;
    box-shadow: 0 24px 70px rgba(15, 23, 42, .28);
    overflow: hidden;
    pointer-events: auto;
    opacity: 0;
    transform: translateY(12px) scale(.98);
    transition: opacity .28s ease, transform .28s ease;
}
.ppx-overlay.ppx-in .ppx-card { opacity: 1; transform: none; }

/* Animations */
.ppx-anim-slide .ppx-card { transform: translateY(40px); }
.ppx-anim-zoom  .ppx-card { transform: scale(.85); }

/* Banner (full-width bar) */
.ppx-type-banner .ppx-card { max-width: 100%; border-radius: 0; display: flex; align-items: center; gap: 16px; }
.ppx-type-banner.ppx-pos-top    { align-items: flex-start; }
.ppx-type-banner.ppx-pos-bottom { align-items: flex-end; }

/* Slide-in (corner card) */
.ppx-type-slide_in .ppx-card { max-width: 380px; }

/* Fullscreen */
.ppx-type-fullscreen .ppx-card { max-width: 760px; }

.ppx-close {
    position: absolute;
    top: 10px; right: 12px;
    width: 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; border-radius: 50%;
    background: rgba(15, 23, 42, .06);
    color: inherit; cursor: pointer; font-size: 18px; line-height: 1;
    z-index: 2;
}
.ppx-close:hover { background: rgba(15, 23, 42, .14); }

.ppx-media { width: 100%; display: block; }
.ppx-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ppx-layout-top .ppx-media { max-height: 220px; overflow: hidden; }
.ppx-layout-left, .ppx-layout-right { display: flex; }
.ppx-layout-left .ppx-media, .ppx-layout-right .ppx-media { width: 42%; flex-shrink: 0; }
.ppx-layout-right { flex-direction: row-reverse; }
.ppx-layout-background { background-size: cover; background-position: center; }
.ppx-layout-background .ppx-body { background: rgba(255,255,255,.86); }

.ppx-body { padding: 26px 26px 28px; flex: 1; }
.ppx-type-banner .ppx-body { padding: 16px 20px; }

.ppx-heading { font-size: 1.35rem; font-weight: 800; margin: 0 0 6px; line-height: 1.2; }
.ppx-sub { font-size: .95rem; font-weight: 600; opacity: .85; margin: 0 0 8px; }
.ppx-text { font-size: .92rem; line-height: 1.55; opacity: .9; margin: 0 0 16px; }
.ppx-code {
    display: inline-block; font-weight: 800; letter-spacing: 1px;
    padding: 8px 14px; border: 2px dashed currentColor; border-radius: 10px;
    margin: 0 0 16px; font-size: 1rem;
}
.ppx-form { display: flex; flex-direction: column; gap: 10px; }
.ppx-input {
    width: 100%; padding: 12px 14px; font-size: .95rem;
    border: 1px solid rgba(15,23,42,.2); border-radius: 10px; outline: none;
    background: #fff; color: #0f172a;
}
.ppx-input:focus { border-color: #0f172a; }
.ppx-consent { display: flex; align-items: flex-start; gap: 8px; font-size: .78rem; opacity: .85; }
.ppx-consent input { margin-top: 3px; }
.ppx-btn {
    display: inline-block; width: 100%; text-align: center; cursor: pointer;
    padding: 13px 18px; font-size: .95rem; font-weight: 700;
    border: 0; border-radius: 10px; background: #0f172a; color: #fff;
    text-decoration: none; transition: filter .15s ease;
}
.ppx-btn:hover { filter: brightness(1.1); }
.ppx-dismiss {
    display: inline-block; margin-top: 10px; background: none; border: 0;
    color: inherit; opacity: .6; font-size: .82rem; cursor: pointer; text-decoration: underline;
}
.ppx-msg { margin: 10px 0 0; font-size: .88rem; font-weight: 600; }
.ppx-msg.ppx-ok { color: #047857; }
.ppx-msg.ppx-err { color: #b91c1c; }
.ppx-custom { margin-bottom: 14px; }

@media (max-width: 768px) {
    .ppx-overlay { padding: 12px; }
    .ppx-card, .ppx-type-slide_in .ppx-card, .ppx-type-fullscreen .ppx-card { max-width: 100%; }
    .ppx-layout-left, .ppx-layout-right { flex-direction: column; }
    .ppx-layout-left .ppx-media, .ppx-layout-right .ppx-media { width: 100%; max-height: 180px; }
    .ppx-heading { font-size: 1.2rem; }
    /* On small screens, bottom-anchored popups slide up from the bottom edge */
    .ppx-overlay.ppx-pos-bottom-right, .ppx-overlay.ppx-pos-bottom-left { align-items: flex-end; justify-content: center; }
}