/* =========================================================
   Inovaticus Popup Builder v2.3.1 — 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;
    z-index: 0;       /* below the container */
}

/* ── 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: 2;       /* above the overlay */
    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: #ffffff;
    z-index: 10;      /* always on top within container */
    padding: 4px 6px;
    border-radius: 3px;
    transition: opacity .15s;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
}
.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; }

/* ── Close (exit) animations — mirrors each entry ──────────────────────── */
.pbp-closing .pbp-popup__container           { opacity: 0; transform: scale(.96); }
.pbp-anim--slideUp.pbp-closing   .pbp-popup__container { transform: translateY(30px); }
.pbp-anim--slideDown.pbp-closing .pbp-popup__container { transform: translateY(-30px); }
.pbp-anim--slideLeft.pbp-closing .pbp-popup__container { transform: translateX(30px); }
.pbp-anim--slideRight.pbp-closing .pbp-popup__container { transform: translateX(-30px); }
.pbp-anim--zoomIn.pbp-closing    .pbp-popup__container { transform: scale(.75); }
.pbp-anim--bounceIn.pbp-closing  .pbp-popup__container { transform: scale(.75); }
.pbp-anim--flipIn.pbp-closing    .pbp-popup__container {
    transform: perspective(400px) rotateX(-90deg); opacity: 0;
    animation: none;
}
.pbp-anim--none.pbp-closing      .pbp-popup__container { transition: none !important; opacity: 0 !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 {
    align-items: stretch !important;
    justify-content: stretch !important;
}
.pbp-popup--fullscreen .pbp-popup__container {
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
    overflow-y: auto;
    box-shadow: none !important;
}

/* ── 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; }
/* Field wrap spacing is controlled inline via data-gap attribute */
.pbp-lead-form .pbp-field-wrap { }
/* Label: margin-bottom controlled inline per-form; reset browser defaults */
.pbp-lead-form label { display: block; margin: 0; }
/* Input reset — actual padding/font set inline */
.pbp-lead-form input:not([type=checkbox]):not([type=radio]),
.pbp-lead-form textarea,
.pbp-lead-form select {
    display: block;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #c3c4c7;
    background: #fff;
    margin: 0;
    appearance: none;
    -webkit-appearance: none;
}
.pbp-lead-form select { appearance: auto; -webkit-appearance: auto; }
/* Focus styles are injected inline per-form by PHP render_lead_form_block()
 * so they can be customised per form. The <style> block is scoped to the
 * form's unique ID to avoid cross-form interference. */
/* Submit button — reset ALL browser/theme button defaults */
.pbp-lead-form .pbp-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border: none !important;
    cursor: pointer;
    margin: 0 !important;
    padding: 0 !important; /* padding applied via inline style from PHP renderer */
    background: none;
    font: inherit;
    transition: all 0.2s ease;
}
.pbp-lead-form .pbp-submit:hover { filter: brightness(0.88); }
.pbp-lead-form .pbp-submit:disabled { opacity: .6; cursor: default; filter: none; }
/* Error div — base reset only; all visual styling applied via inline style from PHP */
.pbp-lead-form .pbp-form-error { display: none; }
/* Success message — base reset only; color/size/padding/alignment set inline per-form by PHP */
.pbp-lead-form .pbp-form-success { display: block; }
.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; }

/* ── Radio & Checkbox ───────────────────────────────────────────── */
/* Gap between options is controlled via inline style on .pbp-radio-group.
 * We must zero out any margin/padding that themes inject on label, p, li
 * elements — these are the main cause of huge spacing between options.     */
.pbp-lead-form .pbp-radio-group {
    display: flex;
    flex-direction: column;
    /* gap is set inline from block attribute */
}
.pbp-lead-form .pbp-radio-label,
.pbp-lead-form .pbp-checkbox-label {
    display: flex !important;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    /* Kill every source of unwanted spacing */
    margin: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-block-start: 0 !important;
    margin-block-end: 0 !important;
    padding: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
.pbp-lead-form .pbp-radio-label input[type=radio],
.pbp-lead-form .pbp-checkbox-label input[type=checkbox] {
    flex-shrink: 0;
    margin: 0 !important;
    padding: 0 !important;
}
.pbp-lead-form .pbp-checkbox-label {
    align-items: flex-start;
}
.pbp-lead-form .pbp-checkbox-label input[type=checkbox] {
    margin-top: 3px !important;
}

/* ── 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; }

/* ── WordPress block margin/padding reset inside popup ──────────────────── */
/*
 * WordPress global styles and block themes inject `margin-block-start`,
 * `margin-bottom`, and sometimes `padding` on every .wp-block element.
 * This compounds with the Group block's own padding and the button's
 * margin-top to produce the large visual gap above the submit button.
 * We reset all block-level margins inside the popup container.
 */
.pbp-popup__content .wp-block,
.pbp-popup__content .wp-block-group,
.pbp-popup__content .wp-block-group__inner-container {
    margin-block-start: 0 !important;
    margin-block-end: 0 !important;
}

/* Reset the form block wrapper margin that WP block editor injects */
.pbp-popup__content .pbp-form-block-wrap,
.pbp-popup__content .wp-block-pbp-lead-form {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/*
 * Defeat any theme global button rules (e.g. Twenty-Twenty-Four, Astra,
 * GeneratePress, OceanWP, etc.) that set padding on button elements inside
 * the popup. The inline style from PHP sets the correct padding — we just
 * need to ensure nothing underneath it is adding extra space.
 */
.pbp-popup .pbp-submit,
.pbp-popup button.pbp-submit {
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-color: transparent;
    /* Inline style (from PHP) has higher specificity than this and will win
       for actual background/color/padding values — this just zeros the base */
}

/* ── Kill block gap / global styles margin injection inside the popup ────── */
/*
 * Block themes apply --wp--style--block-gap as margin-block-start on children
 * of .wp-block-group via rules like ".wp-block-group > * + *" or
 * ".wp-block-group > * { margin-block-start: var(--wp--style--block-gap) }".
 * Inside a popup this is unwanted — it creates a large gap that looks like
 * extra top-padding on the form / button. Zero it out on every direct child
 * of any group inside the popup.
 */
.pbp-popup .wp-block-group > *,
.pbp-popup .wp-block-group > * + *,
.pbp-popup .wp-block-group__inner-container > *,
.pbp-popup .wp-block-group__inner-container > * + * {
    margin-block-start: 0 !important;
    margin-top: 0 !important;
}

/* Also reset the form div's own top margin in case a theme targets it */
.pbp-popup .pbp-lead-form {
    margin-block-start: 0 !important;
    margin-top: 0 !important;
}

/* Twenty Twenty-Four / FSE themes override button padding via:
 * .wp-block-button__link, button, input[type=submit] { padding: ... !important }
 * Belt-and-braces reset scoped tightly to our submit button only. */
.pbp-popup .pbp-lead-form button.pbp-submit,
.pbp-popup .pbp-lead-form .pbp-submit {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* ── Trust line (below button) ──────────────────────────────────────────── */
.pbp-trust-line {
    font-size: 12px;
    color: #888;
    text-align: center;
    margin-top: 8px;
    opacity: 0.9;
    line-height: 1.4;
}

/* ── Two-step popup ─────────────────────────────────────────────────────── */
.pbp-two-step-teaser {
    text-align: center;
    padding: 8px 0;
}
.pbp-two-step-hl {
    font-size: 18px;
    font-weight: 700;
    color: inherit;
    margin: 0 0 8px;
    line-height: 1.3;
}
.pbp-two-step-sub {
    font-size: 14px;
    color: inherit;
    opacity: 0.75;
    margin: 0 0 20px;
    line-height: 1.5;
}
.pbp-two-step-form {
    display: none;
}
.pbp-two-step-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: none;
    transition: all 0.2s ease;
    box-sizing: border-box;
    text-align: center;
}
.pbp-two-step-trigger:hover {
    filter: brightness(0.88);
}
.pbp-two-step-decline {
    display: block;
    width: 100%;
    text-align: center;
    margin-top: 12px;
    font-size: 12px;
    color: inherit;
    opacity: 0.55;
    cursor: pointer;
    text-decoration: underline;
    background: none;
    border: none;
    padding: 0;
    transition: opacity 0.2s;
}
.pbp-two-step-decline:hover { opacity: 0.8; }