/* =========================================================
   Popup Builder Pro v2.0.0 — Frontend CSS
   ========================================================= */

/* ── Body lock ─────────────────────────────────────────── */
body.pbp-body-locked { overflow: hidden !important; }

/* ── Popup base ────────────────────────────────────────── */
.pbp-popup {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 999999;
    align-items: center;
    justify-content: center;
}

.pbp-popup.pbp-open { display: flex; }

/* ── Overlay ───────────────────────────────────────────── */
.pbp-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.6);
    cursor: pointer;
}

/* ── Container ─────────────────────────────────────────── */
.pbp-popup__container {
    position: relative;
    background: #fff;
    border-radius: 8px;
    max-width: 90vw;
    max-height: 90vh;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 1;
    box-sizing: border-box;
    transition: transform .3s ease, opacity .3s ease;
}

/* ── Close button ──────────────────────────────────────── */
.pbp-close {
    position: absolute;
    top: 10px;
    right: 12px;
    background: none;
    border: none;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    color: #666;
    z-index: 2;
    padding: 4px 6px;
    border-radius: 3px;
    transition: opacity .15s;
}
.pbp-close:hover { opacity: .7; }

/* ── Popup content ─────────────────────────────────────── */
.pbp-popup__content { padding: 0; }

/* ── Animations ────────────────────────────────────────── */
.pbp-popup .pbp-popup__container { opacity: 0; transform: scale(.96); }
.pbp-popup.pbp-visible .pbp-popup__container { opacity: 1; transform: scale(1); }

/* Slide variants */
.pbp-anim--slideUp   .pbp-popup__container { transform: translateY(30px); }
.pbp-anim--slideDown .pbp-popup__container { transform: translateY(-30px); }
.pbp-anim--slideLeft .pbp-popup__container { transform: translateX(30px); }
.pbp-anim--slideRight .pbp-popup__container { transform: translateX(-30px); }
.pbp-popup.pbp-visible.pbp-anim--slideUp   .pbp-popup__container,
.pbp-popup.pbp-visible.pbp-anim--slideDown .pbp-popup__container,
.pbp-popup.pbp-visible.pbp-anim--slideLeft .pbp-popup__container,
.pbp-popup.pbp-visible.pbp-anim--slideRight .pbp-popup__container { transform: translate(0,0); opacity: 1; }

/* Zoom */
.pbp-anim--zoomIn .pbp-popup__container { transform: scale(.75); }
.pbp-popup.pbp-visible.pbp-anim--zoomIn .pbp-popup__container { transform: scale(1); opacity: 1; }

/* Bounce */
.pbp-anim--bounceIn .pbp-popup__container { animation: pbp-bounceIn .5s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes pbp-bounceIn {
    0%  { transform: scale(.4); opacity: 0; }
    60% { transform: scale(1.08); opacity: 1; }
    80% { transform: scale(.95); }
    100%{ transform: scale(1); }
}

/* Flip */
.pbp-anim--flipIn .pbp-popup__container {
    animation: pbp-flipIn .4s ease both;
    backface-visibility: hidden;
}
@keyframes pbp-flipIn {
    0%   { transform: perspective(400px) rotateX(-90deg); opacity: 0; }
    100% { transform: perspective(400px) rotateX(0); opacity: 1; }
}

/* Fade (default) */
.pbp-popup.pbp-visible.pbp-anim--fadeIn .pbp-popup__container,
.pbp-popup.pbp-visible.pbp-anim--none .pbp-popup__container { transform: none; opacity: 1; }
.pbp-anim--none .pbp-popup__container { transition: none !important; opacity: 1 !important; transform: none !important; }

/* ── Position variants ─────────────────────────────────── */

/* Top bar / Info bar */
.pbp-popup--top {
    align-items: flex-start;
    justify-content: stretch;
}
.pbp-popup--top .pbp-popup__container {
    width: 100%;
    max-width: 100%;
    border-radius: 0;
    max-height: none;
    overflow: visible;
}

/* Bottom bar */
.pbp-popup--bottom {
    align-items: flex-end;
    justify-content: stretch;
}
.pbp-popup--bottom .pbp-popup__container {
    width: 100%;
    max-width: 100%;
    border-radius: 0;
    max-height: none;
}

/* Top corners */
.pbp-popup--top-left   { align-items: flex-start; justify-content: flex-start; }
.pbp-popup--top-right  { align-items: flex-start; justify-content: flex-end; }
.pbp-popup--top-left  .pbp-popup__container,
.pbp-popup--top-right .pbp-popup__container { border-top-left-radius: 0; border-top-right-radius: 0; }

/* Bottom corners */
.pbp-popup--bottom-left  { align-items: flex-end; justify-content: flex-start; }
.pbp-popup--bottom-right { align-items: flex-end; justify-content: flex-end; }

/* Sidebar */
.pbp-popup--sidebar-right { align-items: stretch; justify-content: flex-end; }
.pbp-popup--sidebar-left  { align-items: stretch; justify-content: flex-start; }
.pbp-popup--sidebar-right .pbp-popup__container,
.pbp-popup--sidebar-left  .pbp-popup__container {
    border-radius: 0;
    height: 100%;
    max-height: 100%;
    overflow-y: auto;
}

/* Fullscreen */
.pbp-popup--fullscreen .pbp-popup__container {
    width: 100vw;
    height: 100vh;
    max-width: 100%;
    max-height: 100%;
    border-radius: 0;
    overflow-y: auto;
}

/* ── Info bar specifics ─────────────────────────────────── */
.pbp-popup--top,
.pbp-popup--bottom {
    /* Don't cover whole screen — allow page interaction below/above */
    pointer-events: none;
}
.pbp-popup--top .pbp-overlay,
.pbp-popup--bottom .pbp-overlay { display: none; }
.pbp-popup--top .pbp-popup__container,
.pbp-popup--bottom .pbp-popup__container {
    pointer-events: all;
}
/* Sticky info bar */
.pbp-popup--top.pbp-open   { top: 0; bottom: auto; }
.pbp-popup--bottom.pbp-open { top: auto; bottom: 0; }

/* ── Info bar slide animations ──────────────────────────── */
.pbp-popup--top .pbp-popup__container    { transform: translateY(-100%); }
.pbp-popup--bottom .pbp-popup__container { transform: translateY(100%); }
.pbp-popup--top.pbp-visible .pbp-popup__container,
.pbp-popup--bottom.pbp-visible .pbp-popup__container { transform: translateY(0); opacity: 1; }

/* ── Lead form (rendered by block) ─────────────────────── */
.pbp-lead-form { margin: 0; }
.pbp-lead-form .pbp-field-wrap { margin-bottom: 12px; }
.pbp-lead-form label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.pbp-lead-form .pbp-field {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid #c3c4c7;
    border-radius: 3px;
    font-size: 14px;
    box-sizing: border-box;
    transition: border-color .15s;
}
.pbp-lead-form .pbp-field:focus { outline: none; border-color: #2271b1; box-shadow: 0 0 0 1px #2271b1; }
.pbp-lead-form .pbp-submit {
    width: 100%;
    padding: 11px 20px;
    border: none;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: filter .15s, opacity .15s;
}
.pbp-lead-form .pbp-submit:hover { filter: brightness(1.08); }
.pbp-lead-form .pbp-submit:disabled { opacity: .6; cursor: default; }
.pbp-lead-form .pbp-form-error { display: none; color: #d63638; font-size: 13px; padding: 6px 0; }
.pbp-lead-form .pbp-form-success { text-align: center; color: #00a32a; font-size: 15px; padding: 20px 0; font-weight: 600; }
.pbp-lead-form .pbp-gdpr-row { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; color: #646970; margin-bottom: 12px; }
.pbp-lead-form .pbp-gdpr-row input { margin-top: 2px; flex-shrink: 0; }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 479px) {
    .pbp-popup:not(.pbp-popup--top):not(.pbp-popup--bottom)
    .pbp-popup__container { max-width: 95vw !important; }
}

/* ── Countdown helper (template) ────────────────────────── */
.pbp-countdown { font-variant-numeric: tabular-nums; }

/* ── Close button position variants ────────────────────── */
.pbp-close--inside-top-right  { top: 10px;  right: 12px; left: auto;  bottom: auto; }
.pbp-close--inside-top-left   { top: 10px;  left: 12px;  right: auto; bottom: auto; }
.pbp-close--outside-top-right { top: -16px; right: -16px; left: auto;  bottom: auto; position: absolute; }
.pbp-close--outside-top-left  { top: -16px; left: -16px;  right: auto; bottom: auto; position: absolute; }

/* For outside positioning, the container needs overflow visible */
.pbp-popup:has(.pbp-close--outside-top-right) .pbp-popup__container,
.pbp-popup:has(.pbp-close--outside-top-left)  .pbp-popup__container { overflow: visible; }