/* Inspira Popups — public styles.
 *
 * Structural sections inside every popup dialog:
 *   .inspira-popup-header   ← icon + headline + subtitle
 *   .inspira-popup-body     ← rich content
 *   .inspira-popup-footer   ← primary CTA + optional secondary action
 *
 * Header and footer are optional and only render when their fields are
 * populated. Body is the only "always-present" section.
 *
 * Design tokens flow in via inline custom properties set by render():
 *   --ipo-bg, --ipo-text, --ipo-accent, --ipo-radius
 *   --ipo-bg-image, --ipo-overlay (only with image bg)
 */

body.inspira-popup-locked { overflow: hidden; }
#inspira-popups-root { /* mount point */ }

/* ═══ SHARED — every popup ═════════════════════════════════════════ */
.inspira-popup {
    /* SAFETY NET: every popup is positioned. Type-specific classes
       (ip-type-modal, ip-type-bar, etc) override with their own
       positioning, but if any type class is missing for any reason,
       this prevents the popup from sitting in document flow. */
    position: fixed;
    inset: 0;
    display: block;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    color: var(--ipo-text, #14130F);
    z-index: 99998;
    box-sizing: border-box;
}
.inspira-popup *,
.inspira-popup *::before,
.inspira-popup *::after { box-sizing: border-box; }

.inspira-popup.is-open { opacity: 1; pointer-events: auto; }

.inspira-popup-dialog {
    position: relative;
    background: var(--ipo-bg, #fff);
    color: var(--ipo-text, #14130F);
    border-radius: var(--ipo-radius, 12px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18), 0 4px 12px rgba(0, 0, 0, 0.08);
    overflow: hidden; /* clip image bg + overlay to radius AND contain content overflow */
    transform: scale(0.96);
    opacity: 0;
    /* Duration driven by --ipo-anim-duration (ms), set inline by JS
       from design.animation_duration. CSS fallback 500ms is comfortable;
       0 disables transitions entirely (covered by .ip-anim-none rule). */
    transition: transform var(--ipo-anim-duration, 500ms) cubic-bezier(0.16, 1, 0.3, 1),
                opacity    var(--ipo-anim-duration, 500ms) ease;
    /* min-width:0 lets the dialog shrink inside flex parents (modal/alert)
       so it never blows out the viewport. */
    min-width: 0;
    /* Font family — resolved from --ipo-font-family which JS sets from
       the popup's design.font_family field. Falls back to the system
       sans stack if no Inspira Font selected (or Inspira Fonts inactive). */
    font-family: var(--ipo-font-family,
        -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif);
}

/* CRITICAL: theme styles for h1-h6, p, button, etc. are MORE specific
   than inherited font-family from the dialog. We must explicitly apply
   the font-family with !important on every text element inside the popup,
   or the theme's heading/body font wins and the admin's font choice is
   silently ignored. Without these rules, .inspira-popup-headline (which
   is an <h3>) would pick up the theme's h3 font, not ours. */
.inspira-popup .inspira-popup-headline,
.inspira-popup .inspira-popup-subtitle,
.inspira-popup .inspira-popup-body,
.inspira-popup .inspira-popup-body p,
.inspira-popup .inspira-popup-body h1,
.inspira-popup .inspira-popup-body h2,
.inspira-popup .inspira-popup-body h3,
.inspira-popup .inspira-popup-body h4,
.inspira-popup .inspira-popup-body h5,
.inspira-popup .inspira-popup-body h6,
.inspira-popup .inspira-popup-body li,
.inspira-popup .inspira-popup-body a,
.inspira-popup .inspira-popup-body span,
.inspira-popup .inspira-popup-body strong,
.inspira-popup .inspira-popup-body em,
.inspira-popup .inspira-popup-cta,
.inspira-popup .inspira-popup-cta-secondary {
    font-family: var(--ipo-font-family,
        -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif) !important;
}
.inspira-popup.is-open .inspira-popup-dialog {
    transform: scale(1);
    opacity: 1;
}
.inspira-popup-inner {
    position: relative;
    z-index: 2;
    /* Same min-width trick — content children can wrap/shrink instead of
       forcing the parent dialog wider than its max-width. */
    min-width: 0;
    max-width: 100%;
}

/* Image background — overlay sits between image and content.
   Use !important on background-image so it always wins over the
   solid `background` shorthand on .inspira-popup-dialog. */
.inspira-popup.ip-has-bg-image .inspira-popup-dialog {
    background-image: var(--ipo-bg-image, none) !important;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.inspira-popup-overlay {
    position: absolute;
    inset: 0;
    /* Lighter default overlay (was 0.35 — image was getting heavily
       muddied). Admin can set heavier in the Design panel if needed. */
    background: var(--ipo-overlay, rgba(0,0,0,0.15));
    z-index: 1;
    pointer-events: none;
}
/* With image bg, lift text contrast slightly. */
.inspira-popup.ip-has-bg-image .inspira-popup-headline,
.inspira-popup.ip-has-bg-image .inspira-popup-subtitle,
.inspira-popup.ip-has-bg-image .inspira-popup-body {
    text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

.inspira-popup-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    background: rgba(255,255,255,0.85);
    color: rgba(0, 0, 0, 0.55);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.12s ease, color 0.12s ease, transform 0.12s ease;
    z-index: 3;
}
.inspira-popup-close:hover {
    background: rgba(255,255,255,1);
    color: rgba(0, 0, 0, 0.85);
    transform: scale(1.05);
}

/* ═══ STRUCTURAL SECTIONS (Header / Body / Footer) ═════════════════ */

.inspira-popup-header {
    padding: 24px 28px 16px;
    text-align: left;
    overflow-wrap: break-word;
    word-wrap: break-word;
    min-width: 0;
    max-width: 100%;
}
/* Alignment override classes — set on the root popup element by JS
   from the design.text_align field. Trickles to all sections + flex
   justification on the footer (which doesn't honor text-align alone). */
.inspira-popup.ip-align-center .inspira-popup-header,
.inspira-popup.ip-align-center .inspira-popup-body,
.inspira-popup.ip-align-center .inspira-popup-footer { text-align: center; }
.inspira-popup.ip-align-right .inspira-popup-header,
.inspira-popup.ip-align-right .inspira-popup-body,
.inspira-popup.ip-align-right .inspira-popup-footer { text-align: right; }

.inspira-popup.ip-align-center .inspira-popup-footer { justify-content: center; }
.inspira-popup.ip-align-right .inspira-popup-footer  { justify-content: flex-end; }
.inspira-popup.ip-align-left .inspira-popup-footer   { justify-content: flex-start; }

/* Center alignment also centers the icon badge inside the header. */
.inspira-popup.ip-align-center .inspira-popup-icon { margin-left: auto; margin-right: auto; }
.inspira-popup.ip-align-right  .inspira-popup-icon { margin-left: auto; }
.inspira-popup-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin: 0 0 12px;
    border-radius: 50%;
    flex-shrink: 0;
}
/* Icon variants — colored badge background per semantic kind. */
.inspira-popup-icon-info    { background: rgba(13, 110, 220, 0.12); color: #0d6edc; }
.inspira-popup-icon-success { background: rgba(46, 125, 91, 0.12);  color: #2e7d5b; }
.inspira-popup-icon-warning { background: rgba(200, 138, 0, 0.14);  color: #c88a00; }
.inspira-popup-icon-alert   { background: rgba(176, 48, 31, 0.12);  color: #b0301f; }

.inspira-popup-headline {
    margin: 0 0 4px;
    font-size: var(--ipo-headline-size, 20px);
    font-weight: 600;
    line-height: 1.3;
    color: var(--ipo-text, #14130F);
    /* padding-right removed: the close button is absolute-positioned in
       the corner so text doesn't need to leave clearance. The 32px
       offset was breaking center/right alignment. */
    overflow-wrap: break-word;
    word-wrap: break-word;
}
.inspira-popup-subtitle {
    margin: 0;
    font-size: var(--ipo-subtitle-size, 14px);
    line-height: 1.45;
    color: var(--ipo-text, #14130F);
    opacity: 0.7;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.inspira-popup-body {
    /* Generous, consistent padding so content breathes and images fit
       neatly within. 28px horizontal matches the header padding. */
    padding: 16px 28px 20px;
    font-size: var(--ipo-body-size, 14.5px);
    line-height: 1.6;
    color: var(--ipo-text, #14130F);
    /* Hard guards against content overflowing the dialog: long URLs,
       unbroken words, wide inline elements all wrap or clip. */
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
    min-width: 0;
    max-width: 100%;
}
.inspira-popup-body * { max-width: 100%; }
.inspira-popup-body pre,
.inspira-popup-body code {
    white-space: pre-wrap;
    overflow-wrap: break-word;
}
.inspira-popup-body table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}
.inspira-popup-body p { margin: 0 0 12px; }
.inspira-popup-body p:last-child { margin-bottom: 0; }
.inspira-popup-body a {
    color: var(--ipo-accent, #C8472B);
    text-decoration: underline;
}
.inspira-popup-body img {
    /* Images fit the body width edge-to-edge and never overflow. Block
       display + auto margins handle <img> dropped in directly without
       wrapping <p> tags. */
    display: block;
    max-width: 100%;
    height: auto;
    margin: 8px auto;
    border-radius: 6px;
}
.inspira-popup-body h1, .inspira-popup-body h2, .inspira-popup-body h3,
.inspira-popup-body h4 { margin: 0 0 10px; line-height: 1.3; color: inherit; }
.inspira-popup-body ul, .inspira-popup-body ol { margin: 0 0 12px; padding-left: 22px; }
.inspira-popup-body li { margin-bottom: 4px; }
/* Body sits flush with header when no header is present. */
.inspira-popup-inner > .inspira-popup-body:first-child {
    padding-top: 28px;
}

.inspira-popup-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 12px 28px 20px;
    flex-wrap: wrap;
}
/* Footer sits flush when no body — collapse top padding. */
.inspira-popup-inner > .inspira-popup-footer:first-child,
.inspira-popup-header + .inspira-popup-footer {
    padding-top: 16px;
}

/* ═══ CTA buttons (footer) ═════════════════════════════════════════
   Base visual properties are armored INLINE by the JS runtime (every
   prop carries !important so themes can't strip them). The CSS rules
   below only handle hover/active states, which inline styles can't do.
   This keeps the inspector clean — no redundant duplicates. */
.inspira-popup-cta:hover { filter: brightness(0.92); }
.inspira-popup-cta:active { transform: scale(0.98); }
.inspira-popup-cta-secondary:hover {
    opacity: 1 !important;
    background: rgba(0,0,0,0.06) !important;
}

/* ═══ Celebration effects ═══════════════════════════════════════════
   The wrapper now mounts to <body>, not inside the popup dialog, so
   the effect covers the entire viewport — popup, backdrop, page —
   instead of being clipped to the dialog. Confetti is rendered to a
   <canvas> by the InspiraPopupsConfetti class (assets/js/confetti.js,
   ported from Inspira Bookings). Fireworks is pure CSS keyframes on
   the markup below. */

.inspira-popup-celebration {
    position: fixed;
    inset: 0;
    pointer-events: none;
    /* Max int32 keeps it above the popup (99998) and any other UI. */
    z-index: 2147483646;
    overflow: hidden;
    /* Fade is handled JS-side at end-of-life so duration can be
       anything from 1 to 15s; a hardcoded CSS delay would be wrong
       for non-3s durations. */
    transition: opacity 0.4s ease;
}
.inspira-popup-celebration.is-fading { opacity: 0; }


@media (prefers-reduced-motion: reduce) {
    .inspira-popup-celebration { display: none !important; }
}
.inspira-popup.ip-type-modal {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    z-index: 99999;
}
/* Modal position variants — change the flex alignment so the dialog
   sits at the chosen edge/corner instead of always centered. The
   padding on the flex container keeps the dialog away from viewport
   edges (24px default). */
.inspira-popup.ip-type-modal.ip-pos-top          { align-items: flex-start; justify-content: center; }
.inspira-popup.ip-type-modal.ip-pos-bottom       { align-items: flex-end;   justify-content: center; }
.inspira-popup.ip-type-modal.ip-pos-top_left     { align-items: flex-start; justify-content: flex-start; }
.inspira-popup.ip-type-modal.ip-pos-top_right    { align-items: flex-start; justify-content: flex-end; }
.inspira-popup.ip-type-modal.ip-pos-bottom_left  { align-items: flex-end;   justify-content: flex-start; }
.inspira-popup.ip-type-modal.ip-pos-bottom_right { align-items: flex-end;   justify-content: flex-end; }
.inspira-popup.ip-type-modal .inspira-popup-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(20, 19, 15, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    cursor: pointer;
}
.inspira-popup.ip-type-modal .inspira-popup-dialog {
    position: relative;
    width: 100%;
    max-width: 560px;       /* roomier — images at 100% width hit ~520px */
    min-height: 200px;      /* visual weight even without much content */
    max-height: 90vh;
    overflow-y: auto;
    /* Image background with no body padding looks broken — guarantee
       padding via the dialog itself so backgrounds extend full-bleed
       while content stays inset. */
}

/* ═══ TYPE: ALERT — smaller, centered, accent stripe ═══════════════ */
.inspira-popup.ip-type-alert {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    z-index: 99999;
}
.inspira-popup.ip-type-alert.ip-pos-top          { align-items: flex-start; justify-content: center; }
.inspira-popup.ip-type-alert.ip-pos-bottom       { align-items: flex-end;   justify-content: center; }
.inspira-popup.ip-type-alert.ip-pos-top_left     { align-items: flex-start; justify-content: flex-start; }
.inspira-popup.ip-type-alert.ip-pos-top_right    { align-items: flex-start; justify-content: flex-end; }
.inspira-popup.ip-type-alert.ip-pos-bottom_left  { align-items: flex-end;   justify-content: flex-start; }
.inspira-popup.ip-type-alert.ip-pos-bottom_right { align-items: flex-end;   justify-content: flex-end; }
.inspira-popup.ip-type-alert .inspira-popup-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(20, 19, 15, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    cursor: pointer;
}
.inspira-popup.ip-type-alert .inspira-popup-dialog {
    position: relative;
    max-width: 400px;
    width: 100%;
    border-top: 4px solid var(--ipo-accent, #C8472B);
}
.inspira-popup.ip-type-alert .inspira-popup-header {
    text-align: center;
    padding-top: 28px;
}
.inspira-popup.ip-type-alert .inspira-popup-icon {
    margin-left: auto;
    margin-right: auto;
}
.inspira-popup.ip-type-alert .inspira-popup-headline { padding-right: 0; }
.inspira-popup.ip-type-alert .inspira-popup-subtitle { padding-right: 0; }
.inspira-popup.ip-type-alert .inspira-popup-body { text-align: center; }
.inspira-popup.ip-type-alert .inspira-popup-footer { justify-content: center; }

/* ═══ TYPE: SLIDE-IN ════════════════════════════════════════════════ */
/* Slide-in base: reset the shared `.inspira-popup { inset: 0 }` so
   position rules below can set ONLY the edges they care about. Without
   this reset, top/left from the base would stick around and the popup
   would render at top-left regardless of position class. */
.inspira-popup.ip-type-slide_in {
    position: fixed;
    inset: auto;
    width: 380px;
    max-width: calc(100vw - 32px);
    z-index: 99997;
}
.inspira-popup.ip-type-slide_in.ip-pos-top_left     { top: 16px; left: 16px; }
.inspira-popup.ip-type-slide_in.ip-pos-top_right    { top: 16px; right: 16px; }
.inspira-popup.ip-type-slide_in.ip-pos-bottom_left  { bottom: 16px; left: 16px; }
.inspira-popup.ip-type-slide_in.ip-pos-bottom_right { bottom: 16px; right: 16px; }
/* Edge-center positions — pinned to one edge, horizontally or vertically
   centered on the perpendicular axis via translate. */
.inspira-popup.ip-type-slide_in.ip-pos-top        { top: 16px; left: 50%; transform: translateX(-50%); }
.inspira-popup.ip-type-slide_in.ip-pos-bottom     { bottom: 16px; left: 50%; transform: translateX(-50%); }
.inspira-popup.ip-type-slide_in.ip-pos-center     { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.inspira-popup.ip-type-slide_in:not([class*="ip-pos-"]) { bottom: 16px; right: 16px; }
.inspira-popup.ip-type-slide_in .inspira-popup-header { padding: 20px 22px 12px; }
.inspira-popup.ip-type-slide_in .inspira-popup-body { padding: 12px 22px 16px; }
.inspira-popup.ip-type-slide_in .inspira-popup-footer { padding: 8px 22px 16px; }

/* ═══ TYPE: BAR ═════════════════════════════════════════════════════ */
.inspira-popup.ip-type-bar {
    position: fixed;
    /* Reset base inset:0 so .ip-pos-bottom doesn't end up with both
       top:0 AND bottom:0 from inheritance (which kept it pinned to the
       top regardless of position class — same bug as slide-in had). */
    inset: auto;
    left: 0;
    right: 0;
    z-index: 99996;
}
.inspira-popup.ip-type-bar.ip-pos-top    { top: 0; }
.inspira-popup.ip-type-bar.ip-pos-bottom { bottom: 0; }
.inspira-popup.ip-type-bar:not([class*="ip-pos-"]) { top: 0; }
.inspira-popup.ip-type-bar .inspira-popup-dialog {
    border-radius: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.inspira-popup.ip-type-bar .inspira-popup-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 12px 60px 12px 24px;
    flex-wrap: wrap;
}
.inspira-popup.ip-type-bar .inspira-popup-header,
.inspira-popup.ip-type-bar .inspira-popup-body,
.inspira-popup.ip-type-bar .inspira-popup-footer {
    padding: 0;
}
.inspira-popup.ip-type-bar .inspira-popup-icon { display: none; }
.inspira-popup.ip-type-bar .inspira-popup-headline {
    margin: 0;
    font-size: 15px;
    padding-right: 0;
}
.inspira-popup.ip-type-bar .inspira-popup-subtitle { display: none; }
.inspira-popup.ip-type-bar .inspira-popup-body { font-size: 13.5px; }
.inspira-popup.ip-type-bar .inspira-popup-body p { margin: 0; }
.inspira-popup.ip-type-bar .inspira-popup-cta { padding: 7px 16px; font-size: 13px; }
.inspira-popup.ip-type-bar .inspira-popup-close {
    top: 50%;
    transform: translateY(-50%);
    right: 12px;
}
.inspira-popup.ip-type-bar .inspira-popup-close:hover { transform: translateY(-50%) scale(1.05); }

/* ═══ TYPE: FULLSCREEN ══════════════════════════════════════════════ */
.inspira-popup.ip-type-fullscreen {
    position: fixed;
    inset: 0;
    z-index: 99999;
}
.inspira-popup.ip-type-fullscreen .inspira-popup-dialog {
    width: 100%;
    height: 100%;
    border-radius: 0;
    max-width: none;
    max-height: none;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
}
.inspira-popup.ip-type-fullscreen .inspira-popup-inner {
    max-width: 640px;
    padding: 24px;
    text-align: center;
}
.inspira-popup.ip-type-fullscreen .inspira-popup-header {
    padding: 0 0 16px;
    text-align: center;
}
.inspira-popup.ip-type-fullscreen .inspira-popup-icon { margin-left: auto; margin-right: auto; }
.inspira-popup.ip-type-fullscreen .inspira-popup-headline {
    font-size: 36px;
    padding-right: 0;
}
.inspira-popup.ip-type-fullscreen .inspira-popup-subtitle {
    font-size: 17px;
    padding-right: 0;
}
.inspira-popup.ip-type-fullscreen .inspira-popup-body {
    padding: 16px 0;
    font-size: 17px;
}
.inspira-popup.ip-type-fullscreen .inspira-popup-footer {
    padding: 16px 0 0;
    justify-content: center;
}
.inspira-popup.ip-type-fullscreen .inspira-popup-cta { padding: 14px 32px; font-size: 15px; }

/* ═══ TYPE: TOAST ═══════════════════════════════════════════════════ */
.inspira-popup.ip-type-toast {
    position: fixed;
    inset: auto;
    width: 340px;
    max-width: calc(100vw - 32px);
    z-index: 99995;
}
.inspira-popup.ip-type-toast.ip-pos-top_left     { top: 16px; left: 16px; }
.inspira-popup.ip-type-toast.ip-pos-top_right    { top: 16px; right: 16px; }
.inspira-popup.ip-type-toast.ip-pos-bottom_left  { bottom: 16px; left: 16px; }
.inspira-popup.ip-type-toast.ip-pos-bottom_right { bottom: 16px; right: 16px; }
.inspira-popup.ip-type-toast.ip-pos-top         { top: 16px; left: 50%; transform: translateX(-50%); }
.inspira-popup.ip-type-toast.ip-pos-bottom      { bottom: 16px; left: 50%; transform: translateX(-50%); }
.inspira-popup.ip-type-toast.ip-pos-center      { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.inspira-popup.ip-type-toast:not([class*="ip-pos-"]) { bottom: 16px; right: 16px; }
.inspira-popup.ip-type-toast .inspira-popup-header { padding: 14px 18px 6px; }
.inspira-popup.ip-type-toast .inspira-popup-icon { width: 36px; height: 36px; margin-bottom: 8px; }
.inspira-popup.ip-type-toast .inspira-popup-headline { font-size: 14px; }
.inspira-popup.ip-type-toast .inspira-popup-subtitle { font-size: 12.5px; }
.inspira-popup.ip-type-toast .inspira-popup-body { padding: 6px 18px 12px; font-size: 13px; }
.inspira-popup.ip-type-toast .inspira-popup-footer { padding: 4px 18px 12px; }
.inspira-popup.ip-type-toast .inspira-popup-cta { padding: 6px 14px; font-size: 12.5px; }

/* ═══ ANIMATIONS ════════════════════════════════════════════════════ */
.inspira-popup.ip-anim-slide .inspira-popup-dialog { transform: translateY(20px); }
.inspira-popup.ip-anim-slide.is-open .inspira-popup-dialog { transform: translateY(0); }
.inspira-popup.ip-anim-scale .inspira-popup-dialog { transform: scale(0.85); }
.inspira-popup.ip-anim-scale.is-open .inspira-popup-dialog { transform: scale(1); }
.inspira-popup.ip-anim-none .inspira-popup-dialog { transform: none; transition: none; }

@media (prefers-reduced-motion: reduce) {
    .inspira-popup,
    .inspira-popup .inspira-popup-dialog {
        transition: opacity 0.15s linear !important;
        transform: none !important;
    }
}

/* Mobile responsiveness. */
@media (max-width: 520px) {
    .inspira-popup.ip-type-modal .inspira-popup-dialog,
    .inspira-popup.ip-type-alert .inspira-popup-dialog,
    .inspira-popup.ip-type-slide_in,
    .inspira-popup.ip-type-toast {
        width: calc(100vw - 24px);
    }
    .inspira-popup.ip-type-modal .inspira-popup-header,
    .inspira-popup.ip-type-alert .inspira-popup-header { padding: 20px 22px 12px; }
    .inspira-popup.ip-type-modal .inspira-popup-body,
    .inspira-popup.ip-type-alert .inspira-popup-body { padding: 12px 22px 16px; }
    .inspira-popup.ip-type-modal .inspira-popup-footer,
    .inspira-popup.ip-type-alert .inspira-popup-footer { padding: 8px 22px 16px; }
    .inspira-popup.ip-type-bar .inspira-popup-inner { padding: 10px 50px 10px 16px; }
    .inspira-popup.ip-type-fullscreen .inspira-popup-headline { font-size: 28px; }
}