/* CP Cookie Banner — structural styles. Colour tokens come from the
   per-theme file (theme-default.css etc.) loaded immediately after. */

.cppb-banner {
    position: fixed;
    z-index: 9000;
    background: var(--cppb-bg, #fff);
    color: var(--cppb-text-dark, #131413);
    box-sizing: border-box;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.55;
    padding: 16px 20px;
    display: none;
}

.cppb-banner.is-visible {
    display: block;
}

.cppb-banner *,
.cppb-banner *::before,
.cppb-banner *::after {
    box-sizing: border-box;
}

/* ---------- Position: bottom-bar (full-width edge-to-edge) ------------- */
.cppb-banner--bottom-bar {
    left: 0;
    right: 0;
    bottom: var(--cppb-footer-offset, 0px);
    border-top: 1px solid var(--cppb-border, rgba(0, 0, 0, 0.08));
    box-shadow: 0 -6px 24px rgba(15, 30, 15, 0.08), 0 -2px 6px rgba(15, 30, 15, 0.04);
}

/* ---------- Position: top-bar (Phase 7) -------------------------------- */
.cppb-banner--top-bar {
    left: 0;
    right: 0;
    top: 0;
    border-bottom: 1px solid var(--cppb-border, rgba(0, 0, 0, 0.08));
    box-shadow: 0 6px 24px rgba(15, 30, 15, 0.08), 0 2px 6px rgba(15, 30, 15, 0.04);
}

/* ---------- Position: card-style (float / corners) --------------------- */
.cppb-banner--bottom-float,
.cppb-banner--bottom-left,
.cppb-banner--bottom-right {
    bottom: calc(24px + var(--cppb-footer-offset, 0px));
    width: calc(100% - 32px);
    max-width: var(--cppb-max-width, 720px);
    border: 1px solid var(--cppb-border, rgba(0, 0, 0, 0.08));
    border-radius: 14px;
    box-shadow: 0 18px 48px rgba(15, 30, 15, 0.16), 0 4px 12px rgba(15, 30, 15, 0.08);
}

.cppb-banner--bottom-float {
    left: 50%;
    transform: translateX(-50%);
}

.cppb-banner--bottom-left {
    left: 24px;
}

.cppb-banner--bottom-right {
    right: 24px;
}

/* ---------- Position: center-modal (backdrop + card) ------------------- */
.cppb-banner--center-modal {
    inset: 0;
    padding: 20px;
    background: rgba(8, 16, 8, 0.62);
    z-index: 9050;
    display: none;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.cppb-banner--center-modal.is-visible {
    display: flex;
}

.cppb-banner--center-modal .cppb-banner__card {
    position: relative;
    background: var(--cppb-bg, #fff);
    color: var(--cppb-text-dark, #131413);
    width: min(var(--cppb-max-width, 620px), 100%);
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    border-radius: 16px;
    box-shadow: 0 28px 64px rgba(0, 0, 0, 0.32);
    padding: 32px 28px 24px;
}

.cppb-banner--center-modal .cppb-banner__card * {
    box-sizing: border-box;
}

.cppb-banner--center-modal .cppb-banner__logo {
    text-align: center;
    margin-bottom: 14px;
}

.cppb-banner--center-modal .cppb-banner__logo img {
    height: 40px;
    margin: 0 auto;
}

.cppb-banner--center-modal .cppb-banner__content {
    text-align: center;
    margin-bottom: 22px;
}

.cppb-banner--center-modal .cppb-banner__title {
    font-size: 22px;
    margin-bottom: 8px;
}

.cppb-banner--center-modal .cppb-banner__body {
    font-size: 14px;
    color: var(--cppb-text-muted, #5C605C);
}

.cppb-banner--center-modal .cppb-banner__actions {
    justify-content: center;
    gap: 14px;
}

/* When the close icon is rendered, reserve room on the right of the content
   so the X never sits on top of the title/body text. Card layouts use full-
   width content rows so the gap matters most there. Center-modal has its own
   card padding and doesn't need this. */
.cppb-banner--has-close:not(.cppb-banner--center-modal) .cppb-banner__content {
    padding-right: 38px;
}

.cppb-banner__close.cppb-banner__close {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 26px;
    height: 26px;
    z-index: 2;
    border-radius: 50%;
    background: var(--cppb-bg-soft, #F8F9F8);
    color: var(--cppb-text-dark, #131413);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border: 1px solid var(--cppb-border, rgba(0, 0, 0, 0.08));
    transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.cppb-banner__close.cppb-banner__close:hover {
    background: var(--cppb-text-dark, #131413);
    color: var(--cppb-bg, #fff);
    transform: scale(1.05);
}

.cppb-banner__close.cppb-banner__close:focus-visible {
    outline: 2px solid var(--cppb-focus, #30B230);
    outline-offset: 2px;
}

.cppb-banner__close.cppb-banner__close svg {
    width: 12px;
    height: 12px;
    pointer-events: none;
}

/* ---------- Inner layout ----------------------------------------------- */
.cppb-banner__inner {
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.cppb-banner--bottom-bar .cppb-banner__inner,
.cppb-banner--top-bar .cppb-banner__inner {
    max-width: 1200px;
}

/* Card layouts: content fills row 1; logo + actions share row 2.
   Logo is on the left, actions pushed to the right via margin-left:auto.
   Works whether the logo is present or absent. */
.cppb-banner--bottom-float .cppb-banner__inner,
.cppb-banner--bottom-left .cppb-banner__inner,
.cppb-banner--bottom-right .cppb-banner__inner {
    row-gap: 14px;
    column-gap: 16px;
}

.cppb-banner--bottom-float .cppb-banner__content,
.cppb-banner--bottom-left .cppb-banner__content,
.cppb-banner--bottom-right .cppb-banner__content {
    flex: 1 1 100%;
    order: 1;
}

.cppb-banner--bottom-float .cppb-banner__logo,
.cppb-banner--bottom-left .cppb-banner__logo,
.cppb-banner--bottom-right .cppb-banner__logo {
    order: 2;
}

.cppb-banner--bottom-float .cppb-banner__actions,
.cppb-banner--bottom-left .cppb-banner__actions,
.cppb-banner--bottom-right .cppb-banner__actions {
    order: 3;
    margin-left: auto;
}

.cppb-banner__logo {
    flex-shrink: 0;
}

.cppb-banner__logo img {
    height: 32px;
    width: auto;
    display: block;
}

.cppb-banner__content {
    flex: 1 1 280px;
    min-width: 0;
}

.cppb-banner__title {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 700;
    color: var(--cppb-text-dark, #131413);
}

.cppb-banner__body {
    margin: 0;
    font-size: 13.5px;
    color: var(--cppb-text-muted, #5C605C);
}

.cppb-banner__link {
    color: var(--cppb-focus, #30B230);
    text-decoration: underline;
    text-underline-offset: 2px;
    margin-left: 4px;
}

.cppb-banner__link:hover {
    filter: brightness(0.92);
}

/* ---------- Actions ---------------------------------------------------- */
.cppb-banner__actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

/* ---------- Button base (anchor styled as a button) -------------------- */
.cppb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font: inherit;
    font-weight: 600;
    font-size: 13.5px;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, filter 0.15s ease;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    border: 1px solid transparent;
    box-shadow: none;
}

.cppb-btn:focus-visible {
    outline: 2px solid var(--cppb-focus, #30B230);
    outline-offset: 2px;
}

/* Accept = primary pill */
.cppb-btn--accept.cppb-btn--accept {
    background: var(--cppb-focus, #30B230);
    color: #fff;
    padding: 11px 22px;
    border-radius: 999px;
}

.cppb-btn--accept.cppb-btn--accept,
.cppb-btn--accept.cppb-btn--accept:hover,
.cppb-btn--accept.cppb-btn--accept:focus,
.cppb-btn--accept.cppb-btn--accept:active,
.cppb-btn--accept.cppb-btn--accept:visited {
    color: #fff;
    text-decoration: none;
}

.cppb-btn--accept.cppb-btn--accept:hover {
    filter: brightness(0.94);
}

/* Reject / Customize / Save = text link */
.cppb-btn--text.cppb-btn--text {
    color: var(--cppb-text-muted, #5C605C);
    text-decoration: underline;
    text-underline-offset: 3px;
    padding: 8px 4px;
    border-radius: 0;
}

.cppb-btn--text.cppb-btn--text,
.cppb-btn--text.cppb-btn--text:hover,
.cppb-btn--text.cppb-btn--text:focus,
.cppb-btn--text.cppb-btn--text:active,
.cppb-btn--text.cppb-btn--text:visited {
    background: transparent;
    border-color: transparent;
}

.cppb-btn--text.cppb-btn--text:hover {
    color: var(--cppb-text-dark, #131413);
}

/* ---------- Mobile ----------------------------------------------------- */
@media (max-width: 720px) {
    .cppb-banner {
        padding: 14px 16px;
    }

    .cppb-banner--bottom-float,
    .cppb-banner--bottom-left,
    .cppb-banner--bottom-right {
        bottom: calc(12px + var(--cppb-footer-offset, 0px));
        width: calc(100% - 16px);
        left: 50%;
        right: auto;
        transform: translateX(-50%);
    }

    .cppb-banner--center-modal {
        padding: 12px;
    }

    .cppb-banner--center-modal .cppb-banner__card {
        padding: 28px 20px 20px;
    }

    .cppb-banner__logo {
        display: none;
    }

    .cppb-banner__inner {
        gap: 12px;
    }

    .cppb-banner__actions {
        width: 100%;
        justify-content: flex-end;
        gap: 12px;
    }
}

/* =========================================================================
   THEME / PAGE-BUILDER NEUTRALISER

   Measured on locoaddon.com, 7 Oct 2026. Elementor's global kit emits two
   rules that beat everything this file declares:

       .elementor-kit-10 a   (0,1,1)  color: var(--e-global-color-text)
       .elementor-kit-10 p   (0,1,1)  margin-block-end: 20px

   Every selector in this stylesheet is a single class — (0,1,0) — so both
   lose the cascade. The visible result was the Accept button rendering its
   label in the theme's accent green on top of its own accent-green pill:
   white-on-green became green-on-green, i.e. an invisible primary button.

   Specificity cannot be won reliably by counting classes, because the next
   builder uses `.kit .widget a` (0,2,1) or `body .kit a` (0,2,1) and we are
   back to losing. So this block declares the properties a theme is most
   likely to touch with `!important`, scoped to our three roots.

   TWO RULES WHEN EDITING THIS BLOCK
   ---------------------------------
   1. A property whose value DIFFERS between states must be declared once per
      state, never once across a selector list that includes `:hover`.
      `.x, .x:hover { font-size: 16px !important }` is (0,2,0) on the hover
      branch and silently beats a (0,1,0) base rule that wanted 15px. That
      exact mistake shipped in cp-pricing-table's dropdown and produced a
      one-pixel jump on hover that took a user report to find.
   2. Blanket element resets are scoped to text elements only, and every named
      element that needs a non-zero margin restates it below. Do not blanket
      `margin` onto `div`, or the modal's own layout spacing goes with it.
   ========================================================================= */

/* ---- Inherited typography ------------------------------------------------
   Deliberately NOT font-family: these components are meant to read as part of
   the host site, so they inherit its face. What they must not inherit is a
   theme's heading transform, tracking or text-shadow leaking in. */
.cppb-banner,
.cppb-modal,
.cppb-fab {
    letter-spacing: normal !important;
    text-transform: none !important;
    text-shadow: none !important;
    text-indent: 0 !important;
    font-style: normal !important;
}

/* The root class is REPEATED THREE TIMES on purpose — it raises specificity to
   (0,3,0) without changing what the selector matches.
   `!important` only wins against another `!important` if it also wins on
   specificity, and the rules we are up against carry both:

       .elementor-kit-10 p { text-indent: 30px !important }   (0,1,1)
       body .elementor-kit-10 p { ... !important }            (0,2,1)

   A single `.cppb-banner *` is (0,1,0) and loses to the first of those even
   with `!important` on our side — measured, not theorised: the hostile-CSS
   test showed a 30px text-indent and a 3.0 line-height surviving until this
   was raised. (0,3,0) clears both shapes. */
.cppb-banner.cppb-banner.cppb-banner *,
.cppb-modal.cppb-modal.cppb-modal *,
.cppb-fab.cppb-fab.cppb-fab * {
    letter-spacing: normal !important;
    text-transform: none !important;
    text-shadow: none !important;
    float: none !important;
    text-indent: 0 !important;
}

/* ---- Text elements: zero, then restate ---------------------------------- */
.cppb-banner.cppb-banner.cppb-banner :is(p, h1, h2, h3, h4, h5, h6, ul, ol, li, figure, blockquote),
.cppb-modal.cppb-modal.cppb-modal   :is(p, h1, h2, h3, h4, h5, h6, ul, ol, li, figure, blockquote) {
    margin: 0 !important;
    padding: 0 !important;
}

/* The six that genuinely need spacing, each with its line-height restated.
   line-height is NOT in the blanket reset above because it differs per
   element — but leaving it unguarded let `.elementor-kit-10 p{line-height:3}`
   through, which grew the banner from 127px to 167px. Declaring it per named
   element is the way to guard it without flattening the type scale.
   These mirror the values declared earlier in this file and in modal.css —
   keep them in step. */
.cppb-banner.cppb-banner.cppb-banner .cppb-banner__title       { margin: 0 0 4px !important; line-height: 1.3 !important; }
.cppb-banner--center-modal.cppb-banner.cppb-banner .cppb-banner__title { margin: 0 0 8px !important; }
.cppb-banner.cppb-banner.cppb-banner .cppb-banner__body        { margin: 0 !important; line-height: 1.55 !important; }
.cppb-modal.cppb-modal.cppb-modal .cppb-modal__title           { margin: 0 0 8px !important; line-height: 1.3 !important; }
.cppb-modal.cppb-modal.cppb-modal .cppb-modal__intro           { margin: 0 0 20px !important; line-height: 1.55 !important; }
.cppb-modal.cppb-modal.cppb-modal .cppb-modal__group-desc      { margin: 6px 0 0 !important; line-height: 1.5 !important; }
.cppb-modal.cppb-modal.cppb-modal .cppb-modal__group-name      { line-height: 1.4 !important; }

/* ---- Buttons: chrome -----------------------------------------------------
   These values are identical in every state, so one list covering all states
   is correct here (see rule 1 above for when it would not be). */
/* Doubled for the same reason as the blanket resets above. An <a> picks up
   (0,2,0) from the `:link` branch anyway, but a <button> only matches the bare
   class at (0,1,0) and would lose to `.elementor-kit-10 button` (0,1,1). The
   banner renders <a> today and the modal renders <button>, so both shapes
   have to hold. */
.cppb-btn.cppb-btn,
.cppb-btn.cppb-btn:link,
.cppb-btn.cppb-btn:visited,
.cppb-btn.cppb-btn:hover,
.cppb-btn.cppb-btn:focus,
.cppb-btn.cppb-btn:active {
    font-family: inherit !important;
    font-weight: 600 !important;
    font-size: 13.5px !important;
    line-height: 1 !important;
    background-image: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    transform: none !important;
    filter: none !important;
    opacity: 1 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    border-style: solid !important;
    border-width: 1px !important;
    outline-offset: 2px;
    text-align: center !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
}

/* ---- Accept: white on the accent pill, in every state ------------------- */
.cppb-btn--accept.cppb-btn--accept,
.cppb-btn--accept.cppb-btn--accept:link,
.cppb-btn--accept.cppb-btn--accept:visited,
.cppb-btn--accept.cppb-btn--accept:hover,
.cppb-btn--accept.cppb-btn--accept:focus,
.cppb-btn--accept.cppb-btn--accept:active {
    background-color: var(--cppb-focus, #30B230) !important;
    border-color: transparent !important;
    border-radius: 999px !important;
    color: #fff !important;
    text-decoration: none !important;
    padding: 11px 22px !important;
}
/* Hover is a brightness shift, not a colour change, so it is the one place
   the blanket `filter: none` above has to be undone. */
.cppb-btn--accept.cppb-btn--accept:hover {
    filter: brightness(0.94) !important;
}

/* ---- Text buttons: muted, darkening on hover --------------------------- */
.cppb-btn--text.cppb-btn--text,
.cppb-btn--text.cppb-btn--text:link,
.cppb-btn--text.cppb-btn--text:visited,
.cppb-btn--text.cppb-btn--text:active {
    color: var(--cppb-text-muted, #5C605C) !important;
}
.cppb-btn--text.cppb-btn--text:hover,
.cppb-btn--text.cppb-btn--text:focus {
    color: var(--cppb-text-dark, #131413) !important;
}
.cppb-btn--text.cppb-btn--text,
.cppb-btn--text.cppb-btn--text:link,
.cppb-btn--text.cppb-btn--text:visited,
.cppb-btn--text.cppb-btn--text:hover,
.cppb-btn--text.cppb-btn--text:focus,
.cppb-btn--text.cppb-btn--text:active {
    background-color: transparent !important;
    border-color: transparent !important;
    border-radius: 0 !important;
    padding: 8px 4px !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
}

/* ---- Close ------------------------------------------------------------- */
.cppb-banner__close.cppb-banner__close,
.cppb-banner__close.cppb-banner__close:link,
.cppb-banner__close.cppb-banner__close:visited,
.cppb-banner__close.cppb-banner__close:active {
    background-color: var(--cppb-bg-soft, #F8F9F8) !important;
    color: var(--cppb-text-dark, #131413) !important;
}
.cppb-banner__close.cppb-banner__close:hover,
.cppb-banner__close.cppb-banner__close:focus {
    background-color: var(--cppb-text-dark, #131413) !important;
    color: var(--cppb-bg, #fff) !important;
}
.cppb-banner__close.cppb-banner__close,
.cppb-banner__close.cppb-banner__close:link,
.cppb-banner__close.cppb-banner__close:visited,
.cppb-banner__close.cppb-banner__close:hover,
.cppb-banner__close.cppb-banner__close:focus,
.cppb-banner__close.cppb-banner__close:active {
    width: 26px !important;
    height: 26px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    border-radius: 50% !important;
    text-decoration: none !important;
    box-shadow: none !important;
    background-image: none !important;
    font-size: 14px !important;
    line-height: 1 !important;
}
.cppb-banner__close.cppb-banner__close:hover {
    transform: scale(1.05) !important;
}

/* ---- Form controls in the preferences modal ----------------------------- */
/* Builders restyle checkboxes and switches aggressively; the group toggles
   must stay the size the layout reserves for them. */
.cppb-modal input[type="checkbox"] {
    box-shadow: none !important;
    text-shadow: none !important;
    transform: none !important;
    filter: none !important;
    max-width: none !important;
}

/* ---- Mobile: restated so the media query still wins --------------------- */
/* A media query adds no specificity. These override `!important` declarations
   above, so they must themselves be `!important` AND sit later in the file. */
@media (max-width: 720px) {
    .cppb-btn--accept.cppb-btn--accept,
    .cppb-btn--accept.cppb-btn--accept:link,
    .cppb-btn--accept.cppb-btn--accept:visited,
    .cppb-btn--accept.cppb-btn--accept:hover,
    .cppb-btn--accept.cppb-btn--accept:focus,
    .cppb-btn--accept.cppb-btn--accept:active {
        padding: 11px 18px !important;
    }
}

/* =========================================================================
   NOTICE VARIANT — deliberately louder

   In a notice territory the cookies are already on by the time this appears,
   so the bar is the only thing telling the visitor that, and the only route to
   Customize. A bar that blends into the page gets ignored, which is the one
   outcome that serves nobody: no acknowledgement, no awareness, no chance to
   change anything.

   Raising it costs nothing in fairness here. There is no choice being steered
   — a single acknowledgement and a link to the full controls — so none of the
   usual "make accept louder than reject" objection applies. The opt-in banner
   is untouched, and must stay that way: there, loudness around one option IS
   a nudge.

   !important because the whole point is to survive a theme. Elementor and most
   builders set box-shadow on anything that looks like a panel, and a shadow
   this rule is overriding is a shadow the visitor does not see.
   ========================================================================= */

.cppb-banner.cppb-banner--notice {
    /* Three layers doing different jobs: a wide soft pool for lift off the
       page, a tight dark one for the edge, and a hairline ring so the bar still
       reads as a defined object against a busy or dark background. */
    box-shadow:
        0 24px 64px rgba(15, 30, 15, 0.30),
        0 8px 22px rgba(15, 30, 15, 0.18),
        0 0 0 1px rgba(15, 30, 15, 0.10) !important;
}

/* An accent-tinted outer glow, tied to the site's own banner colour so it
   reads as deliberate rather than as a generic drop shadow. Separate rule so
   a browser without color-mix keeps the solid shadow above and simply skips
   this one, rather than dropping the whole declaration. */
@supports (box-shadow: 0 0 0 1px color-mix(in srgb, red 10%, transparent)) {
    .cppb-banner.cppb-banner--notice {
        box-shadow:
            0 24px 64px rgba(15, 30, 15, 0.30),
            0 8px 22px rgba(15, 30, 15, 0.18),
            0 0 0 1px color-mix(in srgb, var(--cppb-focus, #30B230) 26%, transparent),
            0 0 0 6px color-mix(in srgb, var(--cppb-focus, #30B230) 9%, transparent) !important;
    }
}

/* Edge-to-edge layouts have no corners to lift, so the glow would just smear
   along a full-width strip. They get depth instead. */
.cppb-banner.cppb-banner--notice.cppb-banner--bottom-bar {
    box-shadow: 0 -10px 34px rgba(15, 30, 15, 0.22), 0 -2px 8px rgba(15, 30, 15, 0.12) !important;
}
.cppb-banner.cppb-banner--notice.cppb-banner--top-bar {
    box-shadow: 0 10px 34px rgba(15, 30, 15, 0.22), 0 2px 8px rgba(15, 30, 15, 0.12) !important;
}

/* One gentle attention pulse on arrival, then still. Repeating it would nag,
   and a bar that keeps moving is harder to read, not easier to notice. */
@keyframes cppb-notice-in {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}
.cppb-banner.cppb-banner--notice.is-visible {
    animation: cppb-notice-in 0.32s cubic-bezier(0.16, 0.84, 0.44, 1) both;
}
/* bottom-float is horizontally centred with a transform, so animating
   translateY would fight it and slide the bar out of centre. */
.cppb-banner.cppb-banner--notice.cppb-banner--bottom-float.is-visible {
    animation: none;
}

@media (prefers-reduced-motion: reduce) {
    .cppb-banner.cppb-banner--notice.is-visible { animation: none; }
}

/* LOAD-BEARING. `[hidden]` is only `display:none` in the UA stylesheet, which is
   the weakest origin there is — and `.cppb-btn` sets `display:inline-flex` at
   (0,1,0), so it wins. Without this, hiding a button from JS sets the attribute
   and changes nothing on screen: notice mode showed Reject, Customize, Accept
   AND OK all at once, while every test that asked `el.hidden` happily passed.
   Test rendering, not attributes. */
.cppb-banner [hidden],
.cppb-modal [hidden],
.cppb-banner .cppb-btn[hidden],
.cppb-modal .cppb-btn[hidden] {
    display: none !important;
}

/* Centre-modal puts the visible panel in .cppb-banner__card — .cppb-banner is
   the full-screen backdrop, so a shadow there falls off the viewport edges and
   is seen by nobody. Lift the card instead. */
.cppb-banner.cppb-banner--notice.cppb-banner--center-modal {
    box-shadow: none !important;
}
.cppb-banner.cppb-banner--notice.cppb-banner--center-modal .cppb-banner__card {
    box-shadow:
        0 34px 80px rgba(0, 0, 0, 0.42),
        0 10px 28px rgba(0, 0, 0, 0.26) !important;
}
@supports (box-shadow: 0 0 0 1px color-mix(in srgb, red 10%, transparent)) {
    .cppb-banner.cppb-banner--notice.cppb-banner--center-modal .cppb-banner__card {
        box-shadow:
            0 34px 80px rgba(0, 0, 0, 0.42),
            0 10px 28px rgba(0, 0, 0, 0.26),
            0 0 0 1px color-mix(in srgb, var(--cppb-focus, #30B230) 30%, transparent),
            0 0 0 7px color-mix(in srgb, var(--cppb-focus, #30B230) 10%, transparent) !important;
    }
}