/**
 * KLCCC Popup & Announcements — front-end styles
 *
 * ---------------------------------------------------------------------------
 * WHY THIS FILE IS FULL OF !important
 * ---------------------------------------------------------------------------
 * The popup has to look identical on whatever theme the site happens to run.
 * Many WordPress themes — JNews/Jeg among them — style bare elements with
 * !important:
 *
 *     button { border-radius: 50px !important; padding: 10px 30px !important; }
 *     h2     { color: #fff !important; font-size: 42px !important; }
 *
 * An !important declaration beats any normal one no matter how specific, and
 * no matter which stylesheet loads last. Left unguarded, the close button
 * turns into one of the theme's pill buttons and the heading renders white on
 * a white panel — present, but invisible.
 *
 * The only reliable counter is !important of our own, carried on a selector
 * more specific than the theme's. Every rule here is therefore scoped under
 * .kpp-root, and the properties themes reach for are marked !important.
 * Purely internal properties (animation, transition, our own layout) are left
 * alone, since nothing competes for them.
 *
 * Colours still come from the custom properties below, so theming and the
 * admin's accent picker keep working normally.
 * ---------------------------------------------------------------------------
 */

.kpp-root {
    --kpp-accent: #0f9b9b;
    --kpp-radius: 12px;
    --kpp-overlay: 0.55;

    --kpp-surface: #ffffff;
    --kpp-surface-2: #f6f7f8;
    --kpp-text: #16191d;
    --kpp-text-soft: #565d66;
    --kpp-border: #e4e7ea;
    --kpp-shadow: 0 24px 64px -12px rgba(16, 24, 40, 0.35), 0 6px 16px -6px rgba(16, 24, 40, 0.16);
    --kpp-btn-fg: #ffffff;

    position: fixed !important;
    inset: 0 !important;
    z-index: 999999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 24px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    font-family: inherit;
}

.kpp-root[hidden] {
    display: none !important;
}

.kpp-root *,
.kpp-root *::before,
.kpp-root *::after {
    box-sizing: border-box !important;
}

/* ------------------------------------------------------------------ */
/* Themes                                                             */
/* ------------------------------------------------------------------ */

.kpp-root[data-theme="dark"] {
    --kpp-surface: #1c2025;
    --kpp-surface-2: #262b32;
    --kpp-text: #f2f4f6;
    --kpp-text-soft: #a8b0ba;
    --kpp-border: #343a42;
    --kpp-shadow: 0 24px 64px -12px rgba(0, 0, 0, 0.6), 0 6px 16px -6px rgba(0, 0, 0, 0.4);
}

.kpp-root[data-theme="brand"] {
    --kpp-surface: #ffffff;
    --kpp-surface-2: #f0fafa;
    --kpp-text: #10262b;
    --kpp-text-soft: #4d666c;
    --kpp-border: #d5ebeb;
}

/* ------------------------------------------------------------------ */
/* Backdrop                                                           */
/* ------------------------------------------------------------------ */

.kpp-root .kpp-backdrop {
    position: absolute !important;
    inset: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: rgba(9, 12, 16, var(--kpp-overlay)) !important;
    animation: kpp-backdrop-in 0.28s ease both;
}

.kpp-root[data-position="bottom-right"] .kpp-backdrop,
.kpp-root[data-position="bottom-left"] .kpp-backdrop,
.kpp-root[data-position="top-bar"] .kpp-backdrop {
    display: none !important;
}

@keyframes kpp-backdrop-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ------------------------------------------------------------------ */
/* Panel                                                              */
/* ------------------------------------------------------------------ */

.kpp-root .kpp-panel {
    position: relative !important;
    width: 100% !important;
    max-height: calc(100vh - 48px) !important;
    overflow-y: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: var(--kpp-surface) !important;
    color: var(--kpp-text) !important;
    border-radius: var(--kpp-radius) !important;
    box-shadow: var(--kpp-shadow) !important;
    -webkit-overflow-scrolling: touch;
}

.kpp-root[data-size="sm"] .kpp-panel { max-width: 440px !important; }
.kpp-root[data-size="md"] .kpp-panel { max-width: 600px !important; }
.kpp-root[data-size="lg"] .kpp-panel { max-width: 820px !important; }

/* ------------------------------------------------------------------ */
/* Positions                                                          */
/* ------------------------------------------------------------------ */

.kpp-root[data-position="center"] {
    align-items: center !important;
    justify-content: center !important;
}

.kpp-root[data-position="bottom-right"],
.kpp-root[data-position="bottom-left"] {
    align-items: flex-end !important;
    pointer-events: none !important;
    padding: 20px !important;
}

.kpp-root[data-position="bottom-right"] { justify-content: flex-end !important; }
.kpp-root[data-position="bottom-left"]  { justify-content: flex-start !important; }

.kpp-root[data-position="bottom-right"] .kpp-panel,
.kpp-root[data-position="bottom-left"] .kpp-panel {
    pointer-events: auto !important;
    max-width: 380px !important;
    max-height: calc(100vh - 40px) !important;
}

.kpp-root[data-position="top-bar"] {
    align-items: flex-start !important;
    justify-content: center !important;
    pointer-events: none !important;
    padding: 0 !important;
}

.kpp-root[data-position="top-bar"] .kpp-panel {
    pointer-events: auto !important;
    max-width: none !important;
    border-radius: 0 !important;
    border-bottom: 1px solid var(--kpp-border) !important;
    box-shadow: 0 4px 20px -4px rgba(16, 24, 40, 0.18) !important;
}

.kpp-root[data-position="top-bar"] .kpp-text {
    padding: 16px 56px 16px 24px !important;
}

.kpp-root[data-position="top-bar"] .kpp-title {
    font-size: 17px !important;
    margin-bottom: 2px !important;
}

.kpp-root[data-position="top-bar"] .kpp-media {
    display: none !important;
}

/* ------------------------------------------------------------------ */
/* Entrance animations                                                */
/* ------------------------------------------------------------------ */

.kpp-root[data-animation="fade"] .kpp-panel {
    animation: kpp-fade 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.kpp-root[data-animation="slide"] .kpp-panel {
    animation: kpp-slide 0.38s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.kpp-root[data-animation="zoom"] .kpp-panel {
    animation: kpp-zoom 0.32s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes kpp-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes kpp-slide {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes kpp-zoom {
    from { opacity: 0; transform: scale(0.94); }
    to   { opacity: 1; transform: scale(1); }
}

.kpp-root[data-position="top-bar"][data-animation="slide"] .kpp-panel {
    animation-name: kpp-slide-down;
}

@keyframes kpp-slide-down {
    from { opacity: 0; transform: translateY(-100%); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ------------------------------------------------------------------ */
/* Close button                                                       */
/*                                                                    */
/* The single most vulnerable element: themes style every <button> on */
/* the page. Without these guards it becomes a theme pill.            */
/* ------------------------------------------------------------------ */

.kpp-root .kpp-close {
    position: absolute !important;
    top: 14px !important;
    right: 14px !important;
    left: auto !important;
    bottom: auto !important;
    z-index: 3 !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid var(--kpp-border) !important;
    border-radius: 50% !important;
    background: var(--kpp-surface) !important;
    color: var(--kpp-text) !important;
    font-size: 0 !important;
    line-height: 1 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 8px rgba(9, 12, 16, 0.22) !important;
    text-shadow: none !important;
    transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.kpp-root .kpp-close svg {
    width: 16px !important;
    height: 16px !important;
    display: block !important;
    fill: none !important;
}

.kpp-root .kpp-close:hover {
    background: var(--kpp-accent) !important;
    border-color: var(--kpp-accent) !important;
    color: #fff !important;
    transform: rotate(90deg);
}

.kpp-root .kpp-close:focus-visible,
.kpp-root .kpp-btn:focus-visible,
.kpp-root .kpp-nav-btn:focus-visible,
.kpp-root .kpp-dot:focus-visible {
    outline: 2px solid var(--kpp-accent) !important;
    outline-offset: 2px !important;
}

/* ------------------------------------------------------------------ */
/* Body layouts                                                       */
/* ------------------------------------------------------------------ */

.kpp-root .kpp-body {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.kpp-root .kpp-body[data-layout="left"],
.kpp-root .kpp-body[data-layout="right"] {
    flex-direction: row !important;
    align-items: stretch !important;
}

.kpp-root .kpp-body[data-layout="right"] {
    flex-direction: row-reverse !important;
}

.kpp-root .kpp-media {
    flex: 0 0 44% !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    background: var(--kpp-surface-2) !important;
}

.kpp-root .kpp-media img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    object-fit: cover !important;
    box-shadow: none !important;
}

/* --- Image above the text ------------------------------------------ */

/* The image sits inside an even frame rather than bleeding to the panel edge.
   Edge to edge looks sharp only when the photo's shape happens to match the
   band exactly; the moment it doesn't, object-fit centres it and leaves a gap
   down the sides while the top stays flush — which reads as a mistake. With a
   matching inset on every side, any leftover becomes part of the frame and the
   result looks deliberate whatever shape gets uploaded. The media background is
   transparent so that leftover is the panel itself, not a grey block. */
.kpp-root .kpp-body[data-layout="top"] .kpp-media {
    flex: none !important;
    padding: 24px 24px 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
}

.kpp-root .kpp-body[data-layout="top"] .kpp-text {
    padding: 20px 24px 24px !important;
}

/* The band takes the upload's own proportions (handed over from PHP, which can
   read the file's real dimensions), so the photo fits it exactly: nothing
   cropped, no empty bars, and the popup height follows the image.

   max-height is the standardising cap. An unusually tall upload would otherwise
   produce a popup taller than the screen; when it bites, object-fit keeps the
   whole image visible against the panel rather than cropping it. 55vh is
   chosen so a 4:3 photo still fits exactly on a normal screen while a portrait
   one is reined in — band plus text stays inside the viewport at every common
   height, so the popup never has to scroll.

   height:auto is the fallback for browsers without aspect-ratio: the image
   simply sizes naturally, which lands in the same place. */
.kpp-root .kpp-body[data-layout="top"] .kpp-media img {
    height: auto !important;
    aspect-ratio: var(--kpp-img-ratio, 16 / 9);
    max-height: 55vh !important;
    object-fit: contain !important;
    object-position: center !important;
    border-radius: 8px !important;
}

/* --- Image beside the text ------------------------------------------ */

/* Same reasoning as the top layout: an even inset so any leftover from fitting
   the photo reads as a frame rather than a gap on one side only. */
.kpp-root .kpp-body[data-layout="left"] .kpp-media,
.kpp-root .kpp-body[data-layout="right"] .kpp-media {
    padding: 24px !important;
    background: transparent !important;
    border-radius: 0 !important;
}

.kpp-root .kpp-body[data-layout="left"] .kpp-text {
    padding-left: 0 !important;
}

.kpp-root .kpp-body[data-layout="right"] .kpp-text {
    padding-right: 0 !important;
}

/* Side by side, the column's shape is fixed by the text height, so the photo is
   fitted inside it. */
.kpp-root .kpp-body[data-layout="left"] .kpp-media img,
.kpp-root .kpp-body[data-layout="right"] .kpp-media img {
    object-fit: contain !important;
    border-radius: 8px !important;
}

.kpp-root .kpp-text {
    flex: 1 1 auto !important;
    padding: 30px 32px 32px !important;
    margin: 0 !important;
    min-width: 0 !important;
}

.kpp-root .kpp-body[data-layout="none"] .kpp-text {
    padding-right: 56px !important;
}

/* ------------------------------------------------------------------ */
/* Typography                                                         */
/*                                                                    */
/* Sizes are set on each element directly, never inherited: a bare     */
/* `p { font-size: 13px }` in a theme matches the element itself and   */
/* so beats any value inherited from a parent, however specific.       */
/* ------------------------------------------------------------------ */

.kpp-root .kpp-eyebrow {
    display: inline-block !important;
    margin: 0 0 10px !important;
    padding: 4px 10px !important;
    border: 0 !important;
    border-radius: 100px !important;
    background: color-mix(in srgb, var(--kpp-accent) 12%, transparent) !important;
    color: var(--kpp-accent) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.09em !important;
    text-transform: uppercase !important;
    line-height: 1.4 !important;
    text-shadow: none !important;
}

@supports not (background: color-mix(in srgb, red 10%, transparent)) {
    .kpp-root .kpp-eyebrow {
        background: var(--kpp-surface-2) !important;
    }
}

.kpp-root .kpp-title {
    margin: 0 0 10px !important;
    padding: 0 !important;
    border: 0 !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    line-height: 1.28 !important;
    letter-spacing: -0.015em !important;
    text-transform: none !important;
    text-align: left !important;
    color: var(--kpp-text) !important;
    text-shadow: none !important;
    font-family: inherit !important;
}

.kpp-root .kpp-content {
    color: var(--kpp-text-soft) !important;
    font-size: 15px !important;
    line-height: 1.62 !important;
    text-align: left !important;
}

.kpp-root .kpp-content > *:first-child { margin-top: 0 !important; }
.kpp-root .kpp-content > *:last-child  { margin-bottom: 0 !important; }

.kpp-root .kpp-content p {
    margin: 0 0 10px !important;
    padding: 0 !important;
    font-size: 15px !important;
    line-height: 1.62 !important;
    color: var(--kpp-text-soft) !important;
    text-transform: none !important;
    text-align: left !important;
    font-family: inherit !important;
}

.kpp-root .kpp-content a {
    color: var(--kpp-accent) !important;
    text-decoration: underline !important;
    text-underline-offset: 2px;
    background: none !important;
}

.kpp-root .kpp-content ul,
.kpp-root .kpp-content ol {
    margin: 0 0 10px !important;
    padding-left: 20px !important;
    font-size: 15px !important;
    line-height: 1.62 !important;
    color: var(--kpp-text-soft) !important;
    list-style-position: outside !important;
}

.kpp-root .kpp-content ul { list-style-type: disc !important; }
.kpp-root .kpp-content ol { list-style-type: decimal !important; }

.kpp-root .kpp-content li {
    margin: 0 0 4px !important;
    padding: 0 !important;
    font-size: 15px !important;
    line-height: 1.62 !important;
    color: var(--kpp-text-soft) !important;
}

.kpp-root .kpp-content h1,
.kpp-root .kpp-content h2,
.kpp-root .kpp-content h3,
.kpp-root .kpp-content h4 {
    margin: 16px 0 8px !important;
    padding: 0 !important;
    color: var(--kpp-text) !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

.kpp-root .kpp-content h1 { font-size: 19px !important; }
.kpp-root .kpp-content h2 { font-size: 18px !important; }
.kpp-root .kpp-content h3 { font-size: 16px !important; }
.kpp-root .kpp-content h4 { font-size: 15px !important; }

.kpp-root .kpp-content strong { font-weight: 700 !important; }

.kpp-root .kpp-content img {
    max-width: 100% !important;
    height: auto !important;
    border-radius: 6px !important;
}

/* --- Images inserted through the editor's Add Media button ----------- */

.kpp-root .kpp-content .alignnone,
.kpp-root .kpp-content .aligncenter {
    display: block !important;
    float: none !important;
    margin: 12px auto !important;
}

.kpp-root .kpp-content .alignleft {
    float: left !important;
    margin: 4px 16px 10px 0 !important;
    max-width: 50% !important;
}

.kpp-root .kpp-content .alignright {
    float: right !important;
    margin: 4px 0 10px 16px !important;
    max-width: 50% !important;
}

.kpp-root .kpp-content .wp-caption {
    max-width: 100% !important;
    margin-bottom: 12px !important;
}

.kpp-root .kpp-content .wp-caption img {
    display: block !important;
    margin: 0 auto !important;
}

.kpp-root .kpp-content .wp-caption-text {
    margin: 6px 0 0 !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
    color: var(--kpp-text-soft) !important;
    text-align: center !important;
}

.kpp-root .kpp-content::after {
    content: "" !important;
    display: table !important;
    clear: both !important;
}

/* ------------------------------------------------------------------ */
/* Buttons                                                            */
/* ------------------------------------------------------------------ */

.kpp-root .kpp-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 22px 0 0 !important;
    padding: 0 !important;
}

.kpp-root .kpp-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 11px 20px !important;
    border: 0 !important;
    border-radius: calc(var(--kpp-radius) * 0.6) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    text-decoration: none !important;
    text-shadow: none !important;
    cursor: pointer !important;
    font-family: inherit !important;
    transition: transform 0.12s ease, filter 0.15s ease, background 0.15s ease;
}

.kpp-root .kpp-btn--primary,
.kpp-root .kpp-btn--primary:visited {
    background: var(--kpp-accent) !important;
    color: var(--kpp-btn-fg) !important;
    box-shadow: 0 2px 8px -2px color-mix(in srgb, var(--kpp-accent) 60%, transparent);
}

.kpp-root .kpp-btn--primary:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
    color: var(--kpp-btn-fg) !important;
    background: var(--kpp-accent) !important;
}

.kpp-root .kpp-btn--ghost,
.kpp-root .kpp-btn--ghost:visited {
    background: transparent !important;
    color: var(--kpp-text-soft) !important;
    border: 1px solid var(--kpp-border) !important;
}

.kpp-root .kpp-btn--ghost:hover {
    background: var(--kpp-surface-2) !important;
    color: var(--kpp-text) !important;
}

/* ------------------------------------------------------------------ */
/* Carousel                                                           */
/* ------------------------------------------------------------------ */

.kpp-root .kpp-slides {
    overflow: hidden !important;
    touch-action: pan-y;
}

.kpp-root .kpp-track {
    display: flex !important;
    align-items: stretch !important;
    margin: 0 !important;
    padding: 0 !important;
    transition: transform 0.38s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
    cursor: grab;
}

/* While a finger or the mouse is down the track must track the pointer
   exactly, so the easing has to be out of the way. */
.kpp-root .kpp-track.is-dragging {
    transition: none !important;
    cursor: grabbing;
}

.kpp-root .kpp-slide {
    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Text selection turns a drag into a highlight, which feels broken. */
.kpp-root .kpp-track.is-dragging .kpp-slide {
    user-select: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .kpp-root .kpp-track {
        transition: none !important;
    }
}

.kpp-root .kpp-nav {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 12px 18px !important;
    border-top: 1px solid var(--kpp-border) !important;
    background: var(--kpp-surface-2) !important;
    border-radius: 0 0 var(--kpp-radius) var(--kpp-radius) !important;
}

.kpp-root .kpp-nav-btn {
    width: 32px !important;
    height: 32px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    flex: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid var(--kpp-border) !important;
    border-radius: 50% !important;
    background: var(--kpp-surface) !important;
    color: var(--kpp-text-soft) !important;
    font-size: 0 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: none !important;
    text-shadow: none !important;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.kpp-root .kpp-nav-btn svg {
    width: 15px !important;
    height: 15px !important;
    display: block !important;
}

.kpp-root .kpp-nav-btn:hover:not(:disabled) {
    border-color: var(--kpp-accent) !important;
    color: var(--kpp-accent) !important;
    background: var(--kpp-surface) !important;
}

.kpp-root .kpp-nav-btn:disabled {
    opacity: 0.35 !important;
    cursor: default !important;
}

.kpp-root .kpp-dots {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    flex: 1 1 auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

.kpp-root .kpp-dot {
    width: 7px !important;
    height: 7px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: var(--kpp-border) !important;
    font-size: 0 !important;
    cursor: pointer !important;
    box-shadow: none !important;
    transition: background 0.18s ease, width 0.18s ease;
}

.kpp-root .kpp-dot.is-active {
    width: 20px !important;
    border-radius: 100px !important;
    background: var(--kpp-accent) !important;
}

/* ------------------------------------------------------------------ */
/* Responsive                                                         */
/* ------------------------------------------------------------------ */

@media (max-width: 700px) {
    .kpp-root .kpp-body[data-layout="left"],
    .kpp-root .kpp-body[data-layout="right"] {
        flex-direction: column !important;
    }

    .kpp-root .kpp-media {
        flex: none !important;
        border-radius: 0 !important;
    }

    /* Stacked: the side layouts adopt the top layout's frame. */
    .kpp-root .kpp-body[data-layout="left"] .kpp-media,
    .kpp-root .kpp-body[data-layout="right"] .kpp-media {
        padding: 24px 24px 0 !important;
    }

    .kpp-root .kpp-body[data-layout="left"] .kpp-text,
    .kpp-root .kpp-body[data-layout="right"] .kpp-text {
        padding: 20px 24px 24px !important;
    }

    /* Stacked on mobile, a side image behaves like a top image: it takes the
       upload's own proportions so it still fits exactly. */
    .kpp-root .kpp-body[data-layout="left"] .kpp-media img,
    .kpp-root .kpp-body[data-layout="right"] .kpp-media img {
        height: auto !important;
        aspect-ratio: var(--kpp-img-ratio, 16 / 9);
        max-height: 42vh !important;
    }

    .kpp-root .kpp-body[data-layout="top"] .kpp-media img {
        max-height: 42vh !important;
    }
}

@media (max-width: 480px) {
    .kpp-root {
        padding: 14px !important;
    }

    .kpp-root[data-position="bottom-right"],
    .kpp-root[data-position="bottom-left"] {
        justify-content: center !important;
        padding: 12px !important;
    }

    .kpp-root[data-position="bottom-right"] .kpp-panel,
    .kpp-root[data-position="bottom-left"] .kpp-panel {
        max-width: none !important;
    }

    .kpp-root .kpp-media {
        padding: 16px 16px 0 !important;
    }

    .kpp-root .kpp-body[data-layout="top"] .kpp-media,
    .kpp-root .kpp-body[data-layout="left"] .kpp-media,
    .kpp-root .kpp-body[data-layout="right"] .kpp-media {
        padding: 16px 16px 0 !important;
    }

    .kpp-root .kpp-text,
    .kpp-root .kpp-body[data-layout="top"] .kpp-text,
    .kpp-root .kpp-body[data-layout="left"] .kpp-text,
    .kpp-root .kpp-body[data-layout="right"] .kpp-text {
        padding: 16px 16px 20px !important;
    }

    .kpp-root .kpp-body[data-layout="none"] .kpp-text {
        padding: 24px 48px 24px 20px !important;
    }

    .kpp-root .kpp-title {
        font-size: 19px !important;
    }

    .kpp-root .kpp-content,
    .kpp-root .kpp-content p,
    .kpp-root .kpp-content li {
        font-size: 14.5px !important;
    }

    .kpp-root .kpp-actions {
        margin-top: 18px !important;
    }

    .kpp-root .kpp-btn {
        flex: 1 1 auto !important;
    }

    /* Floated images become unreadable in a narrow column. */
    .kpp-root .kpp-content .alignleft,
    .kpp-root .kpp-content .alignright {
        float: none !important;
        display: block !important;
        margin: 12px auto !important;
        max-width: 100% !important;
    }
}

/* ------------------------------------------------------------------ */
/* Inline rendering (the Elementor widget)                            */
/*                                                                    */
/* The same announcement, placed in a page instead of thrown over it. */
/* Rather than duplicate the whole component — typography, buttons,   */
/* media fitting, theme variables — the popup's own markup is reused  */
/* and only the overlay behaviour is undone here. Two-class selectors */
/* so these beat the single-class rules above regardless of order.    */
/* ------------------------------------------------------------------ */

.kpp-inline {
    display: grid;
    gap: 20px;
    margin: 0;
    padding: 0;
}

.kpp-inline[data-columns="2"] { grid-template-columns: repeat(2, 1fr); }
.kpp-inline[data-columns="3"] { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 880px) {
    .kpp-inline[data-columns="2"],
    .kpp-inline[data-columns="3"] { grid-template-columns: 1fr; }
}

.kpp-root.kpp-root--inline {
    position: static !important;
    inset: auto !important;
    z-index: auto !important;
    display: block !important;
    padding: 0 !important;
    pointer-events: auto !important;
}

.kpp-root.kpp-root--inline .kpp-backdrop {
    display: none !important;
}

.kpp-root.kpp-root--inline .kpp-panel {
    max-width: none !important;
    max-height: none !important;
    overflow: visible !important;
    height: 100% !important;
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.08), 0 8px 24px -12px rgba(16, 24, 40, 0.14) !important;
    border: 1px solid var(--kpp-border) !important;
}

/* The popup caps the image against the viewport so it always fits a screen.
   In a page that cap is not only unnecessary but harmful: a wide one-column
   block would clamp the band's height while its width stayed full, and
   object-fit would letterbox the photo into the middle of a large dark card —
   the very gap this was all meant to avoid. Here the block is sized by the
   layout around it, so the image simply takes its own proportions and the
   column width decides how big that is. */
.kpp-root.kpp-root--inline .kpp-body[data-layout="top"] .kpp-media img {
    max-height: none !important;
}

.kpp-root.kpp-root--inline .kpp-body[data-layout="left"] .kpp-media img,
.kpp-root.kpp-root--inline .kpp-body[data-layout="right"] .kpp-media img {
    max-height: none !important;
}

.kpp-inline-empty {
    padding: 16px 18px;
    border: 1px dashed var(--kpp-border, #dcdcde);
    border-radius: 8px;
    color: #646970;
    font-size: 14px;
}

@media (prefers-reduced-motion: reduce) {
    .kpp-root .kpp-panel,
    .kpp-root .kpp-backdrop {
        animation: none !important;
    }

    .kpp-root .kpp-close:hover,
    .kpp-root .kpp-btn--primary:hover {
        transform: none !important;
    }
}

/* ------------------------------------------------------------------ */
/* Accessibility                                                      */
/* ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
    .kpp-root .kpp-panel,
    .kpp-root .kpp-backdrop {
        animation: none !important;
    }

    .kpp-root .kpp-close:hover,
    .kpp-root .kpp-btn--primary:hover {
        transform: none !important;
    }
}

/* ------------------------------------------------------------------ */
/* Heading that belongs to the inline block                           */
/*                                                                    */
/* Deliberately not armoured with !important like the popup: this sits*/
/* in the page's own flow, and Elementor's typography controls emit a */
/* more specific selector that must be able to win.                   */
/* ------------------------------------------------------------------ */

.kpp-inline-heading {
    margin: 0 0 18px;
    padding: 0;
    line-height: 1.25;
}