.poweren-notif-bar {
    box-sizing: border-box;
    position: relative;
    width: 100%;
    min-height: var(--pnb-height, 80px);
    overflow: clip;
    color: var(--pnb-text-color, #fff);
    background: var(--pnb-background, #3157d5);
    background-color: var(--pnb-bg-color, #15234a);
    background-repeat: var(--pnb-bg-repeat, no-repeat);
    background-position: var(--pnb-bg-position, center);
    background-size: var(--pnb-bg-size, cover);
    font-family: inherit;
    line-height: 1.5;
    transition: opacity .22s ease, transform .22s ease, max-height .22s ease;
}

.poweren-notif-bar *,
.poweren-notif-bar *::before,
.poweren-notif-bar *::after {
    box-sizing: border-box;
}

.poweren-notif-bar--fallback {
    position: fixed;
    inset-block-end: 0;
    inset-inline: 0;
    z-index: 99990;
}

.poweren-notif-bar__inner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    gap: clamp(10px, 2vw, 28px);
    align-items: center;
    width: min(calc(100% - 32px), var(--pnb-max-width, 1200px));
    min-height: var(--pnb-height, 80px);
    margin-inline: auto;
    padding-block: 12px;
}

.poweren-notif-bar__message {
    min-width: 0;
    color: inherit;
    font-size: var(--pnb-title-size, 16px);
    overflow-wrap: anywhere;
}

.poweren-notif-bar__timer {
    color: inherit;
    font-size: var(--pnb-timer-size, 15px);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.poweren-notif-bar__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 9px 20px;
    border-radius: 10px;
    color: var(--pnb-button-color, #15234a) !important;
    background: var(--pnb-button-bg, #fff);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .12);
    font-size: var(--pnb-button-size, 14px);
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none !important;
    white-space: nowrap;
    transition: transform .16s ease, box-shadow .16s ease;
}

.poweren-notif-bar__button:hover,
.poweren-notif-bar__button:focus-visible {
    color: var(--pnb-button-color, #15234a) !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .2);
    transform: translateY(-1px);
}

.poweren-notif-bar__close {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .28);
    border-color: color-mix(in srgb, var(--pnb-close-color, #fff) 28%, transparent);
    border-radius: 9px;
    color: var(--pnb-close-color, #fff);
    background: rgba(255, 255, 255, .18);
    background: color-mix(in srgb, var(--pnb-close-bg, #fff) 18%, transparent);
    font: inherit;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    transition: background-color .16s ease, transform .16s ease;
}

.poweren-notif-bar__close:hover,
.poweren-notif-bar__close:focus-visible {
    background: rgba(255, 255, 255, .3);
    background: color-mix(in srgb, var(--pnb-close-bg, #fff) 30%, transparent);
    transform: scale(1.04);
}

.poweren-notif-bar.is-dismissing {
    max-height: 0;
    min-height: 0;
    opacity: 0;
    transform: translateY(-10px);
}

@media (max-width: 720px) {
    .poweren-notif-bar__inner {
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: 10px 14px;
        width: min(calc(100% - 24px), var(--pnb-max-width, 1200px));
        padding-block: 12px;
    }

    .poweren-notif-bar__message {
        grid-column: 2 / -1;
    }

    .poweren-notif-bar__timer {
        grid-column: 2;
        white-space: normal;
    }

    .poweren-notif-bar__action {
        grid-column: 3;
    }

    .poweren-notif-bar__button {
        min-height: 38px;
        padding: 8px 14px;
    }
}

@media (max-width: 440px) {
    .poweren-notif-bar__inner {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .poweren-notif-bar__message,
    .poweren-notif-bar__timer,
    .poweren-notif-bar__action {
        grid-column: 2;
    }
}

@media (prefers-reduced-motion: reduce) {
    .poweren-notif-bar,
    .poweren-notif-bar__button,
    .poweren-notif-bar__close {
        transition: none;
    }
}