/* ==========================================================================
   Premium Notification Bar — public stylesheet  (v2.0.0)
   --------------------------------------------------------------------------
   1.  Tokens          5.  Entrance animations
   2.  Layout          6.  Sub components
   3.  Positioning     7.  The 15 demo skins
   4.  Decoration      8.  Responsive  •  9.  Accessibility

   Rules respected here
     - Every selector is namespaced with `pnbar-`.
     - Only the two opt-in helper classes added by JS touch anything else.
     - `!important` is limited to the dismissal state and the sticky-header
       shift, both documented inline.
     - No external fonts: the active theme font stack is inherited.
     - Animation uses transform/opacity/filter only.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
.pnbar {
    /* Palette. */
    --pnbar-fg: #ffffff;
    --pnbar-muted: rgba(255, 255, 255, .74);
    --pnbar-accent: #22d3ee;
    --pnbar-accent-2: #818cf8;
    --pnbar-on-accent: #04121f;
    --pnbar-surface: rgba(255, 255, 255, .10);
    --pnbar-surface-strong: rgba(255, 255, 255, .18);
    --pnbar-hairline: rgba(255, 255, 255, .18);
    --pnbar-hairline-strong: var(--pnbar-accent);
    --pnbar-shadow: 0 18px 45px -25px rgba(0, 0, 0, .9);

    /* Countdown. */
    --pnbar-cd-fg: var(--pnbar-fg);
    --pnbar-cd-bg: var(--pnbar-surface);
    --pnbar-cd-label: var(--pnbar-muted);

    /* Progress. */
    --pnbar-progress-track: rgba(0, 0, 0, .16);
    --pnbar-progress-fill: linear-gradient(90deg, var(--pnbar-accent), var(--pnbar-accent-2));

    /* Avatars. */
    --pnbar-avatar-size: 30px;
    --pnbar-avatar-overlap: -10px;
    --pnbar-avatar-border: #ffffff;
    --pnbar-avatar-radius: 999px;

    /* Geometry + motion. */
    --pnbar-min-height: 58px;
    --pnbar-radius: 0px;
    --pnbar-blur: 0px;
    --pnbar-gap: 16px;
    --pnbar-anim-duration: 600ms;
    --pnbar-anim-delay: 0ms;
    --pnbar-anim-ease: cubic-bezier(.22, 1, .36, 1);
    --pnbar-glow: 45%;

    position: relative;
    z-index: 9990;
    display: block;
    isolation: isolate;
    overflow: hidden;
    min-height: var(--pnbar-min-height);
    padding-block: 12px;
    padding-inline: clamp(16px, 3vw, 32px);
    color: var(--pnbar-fg);
    border-radius: var(--pnbar-radius);
    box-sizing: border-box;
    font-family: inherit;
    line-height: 1.65;
    /* Every colour the user can change is a CSS custom property. The skin
       only fills in the `--pnbar-skin-*` defaults, so any value coming from
       the settings panel always wins without a single !important. */
    background-color: var(--pnbar-bg-color, var(--pnbar-skin-color, #0b1020));
    background-image: var(--pnbar-bg-image, var(--pnbar-skin-image, none));
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    -webkit-backdrop-filter: blur(var(--pnbar-blur));
    backdrop-filter: blur(var(--pnbar-blur));
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

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

.pnbar--hidden { display: none !important; /* set by JS when dismissed */ }

/* --------------------------------------------------------------------------
   2. LAYOUT — a notification bar is always a single row on large screens
   -------------------------------------------------------------------------- */
.pnbar__inner {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--pnbar-gap);
    width: 100%;
    max-width: var(--pnbar-max-width, 1240px);
    margin-inline: auto;
    min-height: inherit;
}

.pnbar__inner--start   { justify-content: flex-start; }
.pnbar__inner--center  { justify-content: center; }
.pnbar__inner--end     { justify-content: flex-end; }
.pnbar__inner--between { justify-content: space-between; }

.pnbar__content {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
    min-width: 0;                 /* allows the message to shrink safely */
}

.pnbar__aside {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px 14px;
    flex: 0 0 auto;
    margin-inline-start: auto;
}

/* The message never breaks the row; it ellipsises instead. Add the
   `pnbar--wrap` modifier to opt out on purpose. */
.pnbar .pnbar__text {
    margin: 0;
    min-width: 0;
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: .1px;
    color: var(--pnbar-fg);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pnbar--wrap .pnbar__text { white-space: normal; overflow-wrap: anywhere; }

.pnbar__expired { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }

/* --------------------------------------------------------------------------
   3. POSITIONING
   --------------------------------------------------------------------------
   `sticky` is the default and the recommended mode: the bar keeps its own
   space in the document, so the theme header is PUSHED DOWN instead of being
   covered. No JavaScript, no z-index fight, no layout shift.

   `fixed` floats above the page and is therefore the mode that needs the
   body padding + header shift handled by the script.
   -------------------------------------------------------------------------- */

/* --- Sticky: takes real space, never covers the header ----------------- */
.pnbar--sticky {
    position: -webkit-sticky;
    position: sticky;
    z-index: 9990;
}

.pnbar--sticky.pnbar--top    { inset-block-start: 0; }
.pnbar--sticky.pnbar--bottom { position: fixed; inset-block-end: 0; inset-inline: 0; }

/* --- Fixed: overlays the viewport, script pushes the content ----------- */
.pnbar--fixed.pnbar--top    { position: fixed; inset-block-start: 0; inset-inline: 0; }
.pnbar--fixed.pnbar--bottom { position: fixed; inset-block-end: 0; inset-inline: 0; }

/* --- Inline: a premium floating banner inside the content -------------- */
.pnbar--inline {
    position: relative;
    margin-block: 6px;
    border-radius: 18px;
    box-shadow: var(--pnbar-shadow);
}

/* Space reserved for the sticky bar by the script (body padding). */
body.pnbar-pushed            { padding-block-start: var(--pnbar-push, 0px); }
body.pnbar-pushed.pnbar-pushed--bottom { padding-block-start: 0; padding-block-end: var(--pnbar-push, 0px); }

/* Anchor links must not land underneath the bar. */
html.pnbar-scroll-pad { scroll-padding-top: var(--pnbar-push, 0px); }

/* Sticky headers are shifted by the same amount. `!important` is required
   because most themes inline their header offset. */
.pnbar-header-shift { top: var(--pnbar-push, 0px) !important; }

/* WordPress admin bar compensation (hidden below 782px). */
@media (min-width: 783px) {
    body.admin-bar .pnbar--fixed.pnbar--top { inset-block-start: 32px; }
    body.admin-bar.pnbar-pushed { padding-block-start: calc(var(--pnbar-push, 0px) + 32px) !important; }
    body.admin-bar .pnbar--sticky.pnbar--top { inset-block-start: 32px; }
}

/* --------------------------------------------------------------------------
   4. DECORATION
   -------------------------------------------------------------------------- */
/* Aurora / glow field. */
.pnbar::before {
    content: "";
    position: absolute;
    inset: -60% -20%;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(38% 60% at 18% 50%, var(--pnbar-orb-a, transparent), transparent 70%),
        radial-gradient(34% 56% at 82% 50%, var(--pnbar-orb-b, transparent), transparent 70%);
    filter: blur(18px);
    opacity: var(--pnbar-glow);
    animation: pnbar-breathe 7s var(--pnbar-anim-ease) infinite;
}

/* Luminous hairline edge. */
.pnbar::after {
    content: "";
    position: absolute;
    inset-block-end: 0;
    inset-inline: 0;
    z-index: 1;
    height: 1px;
    pointer-events: none;
    background: linear-gradient(90deg,
        transparent,
        var(--pnbar-hairline) 16%,
        var(--pnbar-hairline-strong) 50%,
        var(--pnbar-hairline) 84%,
        transparent);
}

.pnbar--bottom::after { inset-block-end: auto; inset-block-start: 0; }

@keyframes pnbar-breathe {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: calc(var(--pnbar-glow) * .75); }
    50%      { transform: translate3d(0, -4%, 0) scale(1.07); opacity: var(--pnbar-glow); }
}

/* --------------------------------------------------------------------------
   5. ENTRANCE ANIMATIONS
   -------------------------------------------------------------------------- */
.pnbar[data-pnbar-anim="slide-down"]  { animation: pnbar-in-down   var(--pnbar-anim-duration) var(--pnbar-anim-ease) var(--pnbar-anim-delay) both; }
.pnbar[data-pnbar-anim="slide-up"]    { animation: pnbar-in-up     var(--pnbar-anim-duration) var(--pnbar-anim-ease) var(--pnbar-anim-delay) both; }
.pnbar[data-pnbar-anim="slide-right"] { animation: pnbar-in-right  var(--pnbar-anim-duration) var(--pnbar-anim-ease) var(--pnbar-anim-delay) both; }
.pnbar[data-pnbar-anim="slide-left"]  { animation: pnbar-in-left   var(--pnbar-anim-duration) var(--pnbar-anim-ease) var(--pnbar-anim-delay) both; }
.pnbar[data-pnbar-anim="fade"]        { animation: pnbar-in-fade   var(--pnbar-anim-duration) var(--pnbar-anim-ease) var(--pnbar-anim-delay) both; }
.pnbar[data-pnbar-anim="fade-scale"]  { animation: pnbar-in-scale  var(--pnbar-anim-duration) var(--pnbar-anim-ease) var(--pnbar-anim-delay) both; }
.pnbar[data-pnbar-anim="reveal"]      { animation: pnbar-in-reveal var(--pnbar-anim-duration) var(--pnbar-anim-ease) var(--pnbar-anim-delay) both; }
.pnbar[data-pnbar-anim="blur-in"]     { animation: pnbar-in-blur   var(--pnbar-anim-duration) var(--pnbar-anim-ease) var(--pnbar-anim-delay) both; }
.pnbar[data-pnbar-anim="bounce"]      { animation: pnbar-in-bounce var(--pnbar-anim-duration) cubic-bezier(.34, 1.56, .64, 1) var(--pnbar-anim-delay) both; }

@keyframes pnbar-in-down   { from { transform: translate3d(0, -100%, 0); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes pnbar-in-up     { from { transform: translate3d(0, 100%, 0); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes pnbar-in-right  { from { transform: translate3d(34px, 0, 0); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes pnbar-in-left   { from { transform: translate3d(-34px, 0, 0); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes pnbar-in-fade   { from { opacity: 0; } to { opacity: 1; } }
@keyframes pnbar-in-scale  { from { transform: scale(.96); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes pnbar-in-reveal { from { clip-path: inset(0 0 100% 0); opacity: .4; } to { clip-path: inset(0 0 0 0); opacity: 1; } }
@keyframes pnbar-in-blur   { from { filter: blur(12px); opacity: 0; transform: scale(1.02); } to { filter: blur(0); opacity: 1; transform: none; } }
@keyframes pnbar-in-bounce { 0% { transform: translate3d(0, -24px, 0); opacity: 0; } 60% { transform: none; opacity: 1; } 80% { transform: translate3d(0, -5px, 0); } 100% { transform: none; } }

@keyframes pnbar-blink   { 0%, 100% { opacity: 1; transform: translateY(0); } 50% { opacity: .55; transform: translateY(-1px); } }
@keyframes pnbar-pulse   { 0% { transform: scale(1); text-shadow: 0 0 0 transparent; } 45% { transform: scale(1.07); text-shadow: 0 0 14px var(--pnbar-accent); } 100% { transform: scale(1); text-shadow: 0 0 0 transparent; } }
@keyframes pnbar-float   { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-3px) rotate(4deg); } }
@keyframes pnbar-attend  { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-2px) scale(1.05); } }
@keyframes pnbar-live    { 0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .6); } 70% { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); } 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); } }
@keyframes pnbar-stripes { from { background-position: 0 0; } to { background-position: 28px 0; } }
@keyframes pnbar-sweep   { from { background-position: 180% 0; } to { background-position: -80% 0; } }

/* --------------------------------------------------------------------------
   6. SUB COMPONENTS
   -------------------------------------------------------------------------- */

/* --- Icon chip ---------------------------------------------------------- */
.pnbar .pnbar__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 10px;
    color: var(--pnbar-accent);
    background: linear-gradient(140deg,
        color-mix(in srgb, var(--pnbar-accent) 26%, transparent),
        color-mix(in srgb, var(--pnbar-accent-2) 16%, transparent));
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--pnbar-accent) 38%, transparent),
        0 8px 18px -12px color-mix(in srgb, var(--pnbar-accent) 85%, transparent);
    font-size: 1rem;
}

.pnbar .pnbar__icon i,
.pnbar .pnbar__icon svg { display: block; width: 1em; height: 1em; }

.pnbar--attention .pnbar__icon { animation: pnbar-attend 3.6s var(--pnbar-anim-ease) infinite; }

.pnbar__image img { display: block; height: auto; border-radius: 8px; box-shadow: 0 6px 16px -10px rgba(0, 0, 0, .8); }

/* --- Badge -------------------------------------------------------------- */
.pnbar .pnbar__badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    padding: 4px 12px;
    border-radius: 999px;
    background-color: var(--pnbar-badge-color, transparent);
    background-image: var(--pnbar-badge-image, var(--pnbar-badge-skin, linear-gradient(120deg, var(--pnbar-accent), var(--pnbar-accent-2))));
    color: var(--pnbar-badge-fg, var(--pnbar-on-accent));
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .3px;
    white-space: nowrap;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .35),
        0 10px 22px -14px color-mix(in srgb, var(--pnbar-accent) 95%, transparent);
}

.pnbar .pnbar__badge::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    opacity: .9;
}

.pnbar--badge-blink .pnbar__badge { animation: pnbar-blink 2.8s ease-in-out infinite; }

/* --- Message ------------------------------------------------------------ */
.pnbar .pnbar__text strong,
.pnbar .pnbar__text b { font-weight: 800; color: var(--pnbar-accent); padding-inline: 2px; }

/* --- Countdown ---------------------------------------------------------- */
.pnbar__countdown {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 6px;
    direction: ltr;                 /* digits stay readable in RTL layouts */
    font-variant-numeric: tabular-nums;
    padding: 4px;
    border-radius: 14px;
    background: var(--pnbar-surface);
    box-shadow: inset 0 0 0 1px var(--pnbar-hairline);
}

.pnbar__cd-box {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    min-width: 2.7em;
    padding: 4px 8px;
    border-radius: 10px;
    background: var(--pnbar-cd-bg);
    box-shadow: inset 0 0 0 1px var(--pnbar-hairline);
}

.pnbar__cd-value {
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.25;
    color: var(--pnbar-cd-fg);
    font-feature-settings: "tnum" 1;
}

.pnbar__cd-label { font-size: .58rem; font-weight: 600; letter-spacing: .4px; color: var(--pnbar-cd-label); }
.pnbar__cd-sep { opacity: .55; font-weight: 800; }

.pnbar--cd-pulse .pnbar__cd-seconds { background: color-mix(in srgb, var(--pnbar-accent) 22%, transparent); }
.pnbar--cd-pulse .pnbar__cd-seconds .pnbar__cd-value { animation: pnbar-pulse 1s ease-in-out infinite; }

/* --- Progress bar ------------------------------------------------------- */
.pnbar__progress-wrap {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1 1 190px;
    min-width: 150px;
    max-width: 340px;
}

.pnbar__progress-label { font-size: .78rem; font-weight: 600; color: var(--pnbar-muted); white-space: nowrap; }

.pnbar__progress {
    position: relative;
    display: block;
    width: 100%;
    height: 8px;
    border-radius: 999px;
    background: var(--pnbar-progress-track);
    overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .18);
}

.pnbar__progress-fill {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: var(--pnbar-progress, 0%);
    border-radius: inherit;
    background: var(--pnbar-progress-fill);
    box-shadow: 0 0 18px -4px color-mix(in srgb, var(--pnbar-accent) 85%, transparent);
    transition: width .9s var(--pnbar-anim-ease);
}

.pnbar__progress-fill::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(115deg,
        rgba(255, 255, 255, .34) 0 25%,
        transparent 25% 50%,
        rgba(255, 255, 255, .34) 50% 75%,
        transparent 75% 100%);
    background-size: 28px 100%;
    animation: pnbar-stripes 1.1s linear infinite;
    opacity: .7;
}

/* --- Social proof ------------------------------------------------------- */
.pnbar__avatars { display: inline-flex; align-items: center; flex: 0 0 auto; }

.pnbar__avatars img {
    width: var(--pnbar-avatar-size);
    height: var(--pnbar-avatar-size);
    border-radius: var(--pnbar-avatar-radius);
    border: 2px solid var(--pnbar-avatar-border);
    object-fit: cover;
    margin-inline-start: var(--pnbar-avatar-overlap);
    background: #fff;
    box-shadow: 0 4px 10px -6px rgba(0, 0, 0, .9);
}

.pnbar__avatars img:first-child { margin-inline-start: 0; }

.pnbar__live {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--pnbar-surface);
    box-shadow: inset 0 0 0 1px var(--pnbar-hairline);
    font-size: .78rem;
    font-weight: 700;
    color: var(--pnbar-fg);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.pnbar__live-dot { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; animation: pnbar-live 2.4s ease-out infinite; }

/* --- CTA ---------------------------------------------------------------- */
.pnbar .pnbar__cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    padding: 9px 22px;
    border-radius: var(--pnbar-cta-radius, 999px);
    background-color: var(--pnbar-cta-color, transparent);
    background-image: var(--pnbar-cta-image, var(--pnbar-cta-skin, linear-gradient(120deg, var(--pnbar-accent), var(--pnbar-accent-2))));
    color: var(--pnbar-cta-fg, var(--pnbar-on-accent));
    font-size: .84rem;
    font-weight: 800;
    letter-spacing: .2px;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .4),
        0 14px 30px -16px color-mix(in srgb, var(--pnbar-accent) 100%, transparent);
}

/*
 * Buttons stay geometrically static (no lift, no shine, no movement); the
 * hover is a *gentle* brightness/saturation lift only, so it works on flat
 * and gradient skins alike. The keyboard focus ring is an accessibility
 * requirement, not a decorative effect.
 */
.pnbar .pnbar__cta:focus-visible { outline: 2px solid var(--pnbar-accent); outline-offset: 3px; }

.pnbar .pnbar__cta:hover { filter: brightness(1.07) saturate(1.04); }

.pnbar .pnbar__cta-icon { display: inline-flex; align-items: center; }

/* Optional pointer tracking (magnetic) — base offset only, no hover step. */
.pnbar--magnetic .pnbar__cta { transform: translate3d(var(--pnbar-mx, 0px), var(--pnbar-my, 0px), 0); }

/* --- Close button ------------------------------------------------------- */
.pnbar .pnbar__close {
    appearance: none;
    -webkit-appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--pnbar-surface);
    color: var(--pnbar-fg);
    cursor: pointer;
    opacity: .72;
    box-shadow: inset 0 0 0 1px var(--pnbar-hairline);
    transition: opacity .2s linear;
}

.pnbar .pnbar__close i,
.pnbar .pnbar__close svg { display: block; width: 13px; height: 13px; font-size: 13px; }

.pnbar .pnbar__close:hover,
.pnbar .pnbar__close:focus-visible { opacity: 1; background: var(--pnbar-surface-strong); }
.pnbar .pnbar__close:focus-visible { opacity: 1; outline: 2px solid var(--pnbar-accent); outline-offset: 2px; }

/* --------------------------------------------------------------------------
   7. DEMO SKINS (18) — five distinct surface treatments
        • gradient  : colour flow (newsletter, event)
        • matte     : solid + micro-grain, no sheen (neon, luxury, social, bfcm, nooruz)
        • flat      : pure solid colour — dark (crypto) and LIGHT
                      (saas, shipping, app, editorial, sky, rose)
        • frosted   : translucent + backdrop blur (glass, aurora)
        • patterned : flat + stripes / grid (alert, countdown)
   -------------------------------------------------------------------------- */

/* 1 — Flash Sale Neon */
.pnbar--neon {
    /* MATTE base + neon orbs (the glow lives in ::before, not the surface). */
    --pnbar-skin-color: #0a0620;
    --pnbar-skin-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, .015) 0 2px, transparent 2px 4px);
    --pnbar-fg: #f4f2ff;
    --pnbar-muted: rgba(233, 231, 255, .74);
    --pnbar-accent: #22d3ee;
    --pnbar-accent-2: #a855f7;
    --pnbar-on-accent: #04121f;
    --pnbar-orb-a: rgba(34, 211, 238, .55);
    --pnbar-orb-b: rgba(236, 72, 153, .45);
    --pnbar-hairline: rgba(168, 85, 247, .34);
    --pnbar-hairline-strong: rgba(34, 211, 238, .65);
    --pnbar-surface: rgba(255, 255, 255, .08);
    --pnbar-cd-bg: rgba(34, 211, 238, .14);
}

/* 2 — Luxury Gold */
.pnbar--luxury {
    /* MATTE black with an almost invisible gold micro-grain. */
    --pnbar-skin-color: #0b0906;
    --pnbar-skin-image: repeating-linear-gradient(45deg, rgba(212, 175, 55, .03) 0 2px, transparent 2px 5px);
    --pnbar-fg: #f5ecd8;
    --pnbar-muted: rgba(245, 236, 216, .68);
    --pnbar-accent: #d4af37;
    --pnbar-accent-2: #f7e7a3;
    --pnbar-on-accent: #17110a;
    --pnbar-orb-a: rgba(212, 175, 55, .16);
    --pnbar-hairline: rgba(212, 175, 55, .32);
    --pnbar-hairline-strong: rgba(247, 231, 163, .8);
    --pnbar-surface: rgba(212, 175, 55, .1);
    --pnbar-cd-bg: rgba(212, 175, 55, .12);
    --pnbar-glow: 30%;
}

.pnbar--luxury .pnbar__text { letter-spacing: .35px; }
.pnbar--luxury .pnbar__badge { --pnbar-badge-skin: none; --pnbar-badge-color: transparent; box-shadow: inset 0 0 0 1px rgba(212, 175, 55, .68); --pnbar-badge-fg: #e9d391; letter-spacing: 1.1px; }
.pnbar--luxury .pnbar__cta { --pnbar-cta-skin: linear-gradient(135deg, #f9efc4, #d4af37 46%, #a9852c); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 16px 32px -18px rgba(212, 175, 55, 1); }

/* 3 — Glassmorphism */
.pnbar--glass {
    /* FROSTED: translucent plate, all depth comes from the backdrop blur. */
    --pnbar-skin-color: rgba(238, 242, 255, .45);
    --pnbar-skin-image: none;
    --pnbar-fg: #101427;
    --pnbar-muted: rgba(16, 20, 39, .68);
    --pnbar-accent: #4f46e5;
    --pnbar-accent-2: #0ea5e9;
    --pnbar-on-accent: #ffffff;
    --pnbar-orb-a: rgba(255, 255, 255, .55);
    --pnbar-orb-b: rgba(56, 189, 248, .3);
    --pnbar-hairline: rgba(255, 255, 255, .85);
    --pnbar-hairline-strong: rgba(79, 70, 229, .5);
    --pnbar-surface: rgba(255, 255, 255, .48);
    --pnbar-surface-strong: rgba(255, 255, 255, .72);
    --pnbar-cd-bg: rgba(255, 255, 255, .6);
    --pnbar-progress-track: rgba(16, 20, 39, .12);
    -webkit-backdrop-filter: blur(calc(var(--pnbar-blur) + 12px)) saturate(150%);
    backdrop-filter: blur(calc(var(--pnbar-blur) + 12px)) saturate(150%);
}

.pnbar--glass .pnbar__icon { animation: pnbar-float 4.8s ease-in-out infinite; }
.pnbar--glass .pnbar__progress-fill::after { opacity: .35; }

/* 4 — Urgency Countdown */
.pnbar--countdown {
    /* PATTERNED: flat ember base with a moving hazard stripe. */
    --pnbar-skin-color: #c2410c;
    --pnbar-skin-image:
        linear-gradient(115deg, rgba(0, 0, 0, .18) 0 25%, transparent 25% 50%, rgba(0, 0, 0, .18) 50% 75%, transparent 75% 100%);
    background-size: 28px 100%;
    --pnbar-fg: #fff7ed;
    --pnbar-muted: rgba(255, 247, 237, .8);
    --pnbar-accent: #fbbf24;
    --pnbar-accent-2: #f97316;
    --pnbar-on-accent: #431407;
    --pnbar-orb-a: rgba(251, 191, 36, .3);
    --pnbar-orb-b: rgba(239, 68, 68, .36);
    --pnbar-hairline: rgba(254, 215, 170, .36);
    --pnbar-hairline-strong: rgba(251, 191, 36, .9);
    --pnbar-surface: rgba(0, 0, 0, .18);
    --pnbar-cd-bg: rgba(255, 247, 237, .94);
    --pnbar-cd-fg: #7c2d12;
    --pnbar-cd-label: #9a3412;
    --pnbar-glow: 55%;
}

.pnbar--countdown .pnbar__cd-value { font-size: 1.18rem; }
.pnbar--countdown .pnbar__cta { --pnbar-cta-skin: linear-gradient(120deg, #fff7ed, #fed7aa); --pnbar-cta-fg: #7c2d12; }
.pnbar--countdown .pnbar__progress { height: 9px; }
.pnbar--countdown { --pnbar-progress-fill: linear-gradient(90deg, #fde68a, #f97316); }

/* 5 — Minimal SaaS */
.pnbar--saas {
    /* FLAT: a single solid colour, depth comes from the shadow only. */
    --pnbar-skin-color: #ffffff;
    --pnbar-skin-image: none;
    --pnbar-fg: #0f172a;
    --pnbar-muted: #5b6479;
    --pnbar-accent: #6366f1;
    --pnbar-accent-2: #8b5cf6;
    --pnbar-on-accent: #ffffff;
    --pnbar-orb-a: rgba(99, 102, 241, .2);
    --pnbar-orb-b: rgba(226, 232, 240, .65);
    --pnbar-hairline: rgba(15, 23, 42, .09);
    --pnbar-hairline-strong: rgba(99, 102, 241, .5);
    --pnbar-surface: rgba(15, 23, 42, .05);
    --pnbar-surface-strong: rgba(15, 23, 42, .1);
    --pnbar-cd-bg: rgba(15, 23, 42, .05);
    --pnbar-cd-fg: #0f172a;
    --pnbar-cd-label: #5b6479;
    --pnbar-progress-track: rgba(15, 23, 42, .1);
    --pnbar-shadow: 0 14px 32px -24px rgba(15, 23, 42, .6);
    --pnbar-glow: 30%;
}

.pnbar--saas .pnbar__badge { --pnbar-badge-skin: linear-gradient(120deg, #6366f1, #8b5cf6); --pnbar-badge-fg: #fff; }
.pnbar--saas .pnbar__cta { --pnbar-cta-skin: linear-gradient(120deg, #111827, #1f2937); --pnbar-cta-fg: #fff; }
.pnbar--saas .pnbar__close { box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .11); }

/* 6 — Social Proof Live */
.pnbar--social {
    /* MATTE navy with a whisper of grain. */
    --pnbar-skin-color: #0d1526;
    --pnbar-skin-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, .016) 0 2px, transparent 2px 4px);
    --pnbar-fg: #f1f5f9;
    --pnbar-muted: rgba(241, 245, 249, .72);
    --pnbar-accent: #22c55e;
    --pnbar-accent-2: #38bdf8;
    --pnbar-on-accent: #04140a;
    --pnbar-orb-a: rgba(34, 197, 94, .36);
    --pnbar-orb-b: rgba(56, 189, 248, .28);
    --pnbar-hairline: rgba(34, 197, 94, .3);
    --pnbar-hairline-strong: rgba(56, 189, 248, .55);
    --pnbar-surface: rgba(255, 255, 255, .07);
    --pnbar-cd-bg: rgba(34, 197, 94, .14);
}

.pnbar--social .pnbar__badge { --pnbar-badge-skin: none; --pnbar-badge-color: rgba(34, 197, 94, .16); --pnbar-badge-fg: #86efac; box-shadow: inset 0 0 0 1px rgba(34, 197, 94, .48); }
.pnbar--social .pnbar__cta { --pnbar-cta-skin: linear-gradient(120deg, #4ade80, #22c55e); --pnbar-cta-fg: #04140a; }
.pnbar--social .pnbar__live { color: #a7f3c9; }

/* 7 — Event / Webinar */
.pnbar--event {
    --pnbar-skin-color: #0d1226;
    /* GRADIENT (duotone indigo) — one of the two gradient skins left. */
    --pnbar-skin-image: linear-gradient(100deg, #131a34 0%, #1c2350 55%, #2a2058 100%);
    --pnbar-fg: #eef2ff;
    --pnbar-muted: rgba(238, 242, 255, .74);
    --pnbar-accent: #a78bfa;
    --pnbar-accent-2: #7c3aed;
    --pnbar-on-accent: #150a2e;
    --pnbar-orb-a: rgba(167, 139, 250, .32);
    --pnbar-orb-b: rgba(56, 189, 248, .2);
    --pnbar-hairline: rgba(167, 139, 250, .32);
    --pnbar-hairline-strong: rgba(196, 181, 253, .75);
    --pnbar-surface: rgba(255, 255, 255, .07);
    --pnbar-cd-bg: rgba(167, 139, 250, .16);
}

.pnbar--event .pnbar__cta { --pnbar-cta-skin: linear-gradient(120deg, #c4b5fd, #8b5cf6); --pnbar-cta-fg: #150a2e; }

/* 8 — Free Shipping Progress */
.pnbar--shipping {
    /* FLAT mint. */
    --pnbar-skin-color: #ecfdf5;
    --pnbar-skin-image: none;
    --pnbar-fg: #064e3b;
    --pnbar-muted: rgba(6, 78, 59, .74);
    --pnbar-accent: #059669;
    --pnbar-accent-2: #10b981;
    --pnbar-on-accent: #ffffff;
    --pnbar-orb-a: rgba(255, 255, 255, .6);
    --pnbar-orb-b: rgba(16, 185, 129, .24);
    --pnbar-hairline: rgba(5, 150, 105, .24);
    --pnbar-hairline-strong: rgba(5, 150, 105, .6);
    --pnbar-surface: rgba(5, 150, 105, .1);
    --pnbar-surface-strong: rgba(5, 150, 105, .18);
    --pnbar-cd-bg: rgba(255, 255, 255, .72);
    --pnbar-cd-fg: #065f46;
    --pnbar-progress-track: rgba(5, 150, 105, .18);
    --pnbar-glow: 32%;
}

.pnbar--shipping .pnbar__progress { height: 9px; }
.pnbar--shipping { --pnbar-progress-fill: linear-gradient(90deg, #34d399, #059669); }

/* 9 — Breaking Announcement */
.pnbar--alert {
    /* PATTERNED: flat amber with hazard stripes. */
    --pnbar-skin-color: #fdf0c4;
    --pnbar-skin-image:
        linear-gradient(115deg, rgba(180, 83, 9, .13) 0 25%, transparent 25% 50%, rgba(180, 83, 9, .13) 50% 75%, transparent 75% 100%);
    background-size: 28px 100%;
    --pnbar-fg: #4a2405;
    --pnbar-muted: rgba(74, 36, 5, .74);
    --pnbar-accent: #b45309;
    --pnbar-accent-2: #f59e0b;
    --pnbar-on-accent: #fffbeb;
    --pnbar-orb-a: rgba(255, 255, 255, .55);
    --pnbar-orb-b: rgba(245, 158, 11, .32);
    --pnbar-hairline: rgba(180, 83, 9, .28);
    --pnbar-hairline-strong: rgba(180, 83, 9, .65);
    --pnbar-surface: rgba(120, 53, 15, .1);
    --pnbar-surface-strong: rgba(120, 53, 15, .18);
    --pnbar-cd-bg: rgba(255, 251, 235, .82);
    --pnbar-cd-fg: #78350f;
    --pnbar-progress-track: rgba(120, 53, 15, .16);
    --pnbar-glow: 28%;
}

.pnbar--alert .pnbar__badge { --pnbar-badge-skin: linear-gradient(120deg, #b45309, #d97706); --pnbar-badge-fg: #fffbeb; }

/* 10 — Cyber Monday / Black Friday */
.pnbar--bfcm {
    /* MATTE black; the red light comes from the animated orbs. */
    --pnbar-skin-color: #0a0a0a;
    --pnbar-skin-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, .02) 0 1px, transparent 1px 6px);
    --pnbar-fg: #ffffff;
    --pnbar-muted: rgba(255, 255, 255, .76);
    --pnbar-accent: #ef4444;
    --pnbar-accent-2: #f97316;
    --pnbar-orb-a: rgba(239, 68, 68, .44);
    --pnbar-orb-b: rgba(249, 115, 22, .36);
    --pnbar-hairline: rgba(239, 68, 68, .38);
    --pnbar-hairline-strong: rgba(254, 202, 202, .9);
    --pnbar-surface: rgba(255, 255, 255, .07);
    --pnbar-cd-bg: rgba(255, 255, 255, .1);
    --pnbar-cd-fg: #fecaca;
    --pnbar-glow: 60%;
}

.pnbar--bfcm .pnbar__inner::before {
    content: "";
    position: absolute;
    inset-block: -60%;
    inset-inline: -30%;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(100deg, transparent 42%, rgba(255, 255, 255, .13) 50%, transparent 58%);
    background-size: 260% 100%;
    animation: pnbar-sweep 9s linear infinite;
}

.pnbar--bfcm .pnbar__badge { --pnbar-badge-skin: linear-gradient(120deg, #ef4444, #f97316); --pnbar-badge-fg: #fff; }
.pnbar--bfcm .pnbar__cd-value { font-size: 1.24rem; }
.pnbar--bfcm .pnbar__cta { --pnbar-cta-skin: linear-gradient(120deg, #f87171, #dc2626 55%, #b91c1c); --pnbar-cta-fg: #fff; }

/* 11 — Newsletter */
.pnbar--newsletter {
    /* GRADIENT (violet → magenta flow). */
    --pnbar-skin-color: #5b21b6;
    --pnbar-skin-image: linear-gradient(100deg, #4c1d95 0%, #7c3aed 52%, #a21caf 100%);
    --pnbar-fg: #faf5ff;
    --pnbar-muted: rgba(250, 245, 255, .78);
    --pnbar-accent: #f5d0fe;
    --pnbar-accent-2: #f0abfc;
    --pnbar-on-accent: #3b0764;
    --pnbar-orb-a: rgba(240, 171, 252, .34);
    --pnbar-orb-b: rgba(129, 140, 248, .34);
    --pnbar-hairline: rgba(240, 171, 252, .34);
    --pnbar-hairline-strong: rgba(250, 232, 255, .85);
    --pnbar-surface: rgba(255, 255, 255, .12);
    --pnbar-cd-bg: rgba(255, 255, 255, .16);
}

/* 12 — Midnight Aurora */
.pnbar--aurora {
    /* FROSTED dark glass — translucent plate over the page. */
    --pnbar-skin-color: rgba(8, 15, 30, .58);
    --pnbar-skin-image: none;
    -webkit-backdrop-filter: blur(calc(var(--pnbar-blur) + 10px)) saturate(140%);
    backdrop-filter: blur(calc(var(--pnbar-blur) + 10px)) saturate(140%);
    --pnbar-fg: #e8fbff;
    --pnbar-muted: rgba(232, 251, 255, .74);
    --pnbar-accent: #2dd4bf;
    --pnbar-accent-2: #60a5fa;
    --pnbar-on-accent: #032420;
    --pnbar-orb-a: rgba(45, 212, 191, .42);
    --pnbar-orb-b: rgba(96, 165, 250, .38);
    --pnbar-hairline: rgba(255, 255, 255, .22);
    --pnbar-blur: 8px;
    --pnbar-hairline-strong: rgba(153, 246, 228, .8);
    --pnbar-surface: rgba(255, 255, 255, .08);
    --pnbar-cd-bg: rgba(45, 212, 191, .14);
}

.pnbar--aurora .pnbar__cta { --pnbar-cta-skin: linear-gradient(120deg, #5eead4, #38bdf8); --pnbar-cta-fg: #032420; }

/* 13 — نوروز / occasions */
.pnbar--nooruz {
    /* MATTE emerald with a gold micro-grain. */
    --pnbar-skin-color: #06231b;
    --pnbar-skin-image: repeating-linear-gradient(45deg, rgba(240, 200, 106, .03) 0 2px, transparent 2px 5px);
    --pnbar-fg: #f2fbf6;
    --pnbar-muted: rgba(242, 251, 246, .74);
    --pnbar-accent: #f0c86a;
    --pnbar-accent-2: #34d399;
    --pnbar-on-accent: #1a1206;
    --pnbar-orb-a: rgba(52, 211, 153, .32);
    --pnbar-orb-b: rgba(240, 200, 106, .28);
    --pnbar-hairline: rgba(240, 200, 106, .3);
    --pnbar-hairline-strong: rgba(253, 230, 138, .85);
    --pnbar-surface: rgba(255, 255, 255, .08);
    --pnbar-cd-bg: rgba(240, 200, 106, .14);
}

.pnbar--nooruz .pnbar__badge { --pnbar-badge-skin: linear-gradient(120deg, #f0c86a, #d9a53a); --pnbar-badge-fg: #1a1206; }
.pnbar--nooruz .pnbar__cta { --pnbar-cta-skin: linear-gradient(120deg, #fde68a, #f0c86a); --pnbar-cta-fg: #1a1206; }

/* 14 — Crypto / Web3 grid */
.pnbar--crypto {
    /* PATTERNED: flat navy-black with a technical line grid. */
    --pnbar-skin-color: #05080f;
    --pnbar-skin-image:
        repeating-linear-gradient(90deg, rgba(34, 211, 238, .11) 0 1px, transparent 1px 46px),
        repeating-linear-gradient(0deg, rgba(34, 211, 238, .07) 0 1px, transparent 1px 46px);
    --pnbar-fg: #e6fdff;
    --pnbar-muted: rgba(230, 253, 255, .74);
    --pnbar-accent: #22d3ee;
    --pnbar-accent-2: #e879f9;
    --pnbar-on-accent: #04141a;
    --pnbar-orb-a: rgba(34, 211, 238, .3);
    --pnbar-orb-b: rgba(232, 121, 249, .26);
    --pnbar-hairline: rgba(34, 211, 238, .26);
    --pnbar-hairline-strong: rgba(232, 121, 249, .7);
    --pnbar-surface: rgba(255, 255, 255, .07);
    --pnbar-cd-bg: rgba(34, 211, 238, .12);
    --pnbar-glow: 48%;
}

.pnbar--crypto .pnbar__badge { --pnbar-badge-skin: linear-gradient(120deg, #22d3ee, #e879f9); --pnbar-badge-fg: #04141a; }

/* 15 — App download */
.pnbar--app {
    /* FLAT porcelain blue. */
    --pnbar-skin-color: #f6f9ff;
    --pnbar-skin-image: none;
    --pnbar-fg: #0b1b34;
    --pnbar-muted: #4a5c78;
    --pnbar-accent: #2563eb;
    --pnbar-accent-2: #7c3aed;
    --pnbar-on-accent: #ffffff;
    --pnbar-orb-a: rgba(255, 255, 255, .65);
    --pnbar-orb-b: rgba(37, 99, 235, .2);
    --pnbar-hairline: rgba(11, 27, 52, .1);
    --pnbar-hairline-strong: rgba(37, 99, 235, .5);
    --pnbar-surface: rgba(11, 27, 52, .06);
    --pnbar-surface-strong: rgba(11, 27, 52, .1);
    --pnbar-cd-bg: rgba(255, 255, 255, .78);
    --pnbar-cd-fg: #0b1b34;
    --pnbar-cd-label: #4a5c78;
    --pnbar-progress-track: rgba(11, 27, 52, .12);
    --pnbar-shadow: 0 14px 32px -24px rgba(11, 27, 52, .6);
    --pnbar-glow: 30%;
}

.pnbar--app .pnbar__cta { --pnbar-cta-skin: linear-gradient(120deg, #2563eb, #7c3aed); --pnbar-cta-fg: #fff; }
.pnbar--app .pnbar__close { box-shadow: inset 0 0 0 1px rgba(11, 27, 52, .12); }

/* 16 — Editorial Cream (flat • light) */
.pnbar--editorial {
    --pnbar-skin-color: #fbf7ef;
    --pnbar-skin-image: none;
    --pnbar-fg: #3f3123;
    --pnbar-muted: #6d5c46;
    --pnbar-accent: #b45309;
    --pnbar-accent-2: #d97706;
    --pnbar-on-accent: #fffbeb;
    --pnbar-orb-a: rgba(255, 255, 255, .75);
    --pnbar-orb-b: rgba(217, 119, 6, .16);
    --pnbar-hairline: rgba(63, 49, 35, .14);
    --pnbar-hairline-strong: rgba(180, 83, 9, .55);
    --pnbar-surface: rgba(63, 49, 35, .06);
    --pnbar-surface-strong: rgba(63, 49, 35, .11);
    --pnbar-cd-bg: rgba(255, 255, 255, .82);
    --pnbar-cd-fg: #7c2d12;
    --pnbar-cd-label: #8a6b4a;
    --pnbar-progress-track: rgba(63, 49, 35, .12);
    --pnbar-shadow: 0 14px 32px -24px rgba(63, 49, 35, .7);
    --pnbar-glow: 26%;
}

.pnbar--editorial .pnbar__text { letter-spacing: .3px; }
.pnbar--editorial .pnbar__badge { --pnbar-badge-skin: none; --pnbar-badge-color: #9a3412; --pnbar-badge-fg: #fff7ed; box-shadow: none; }
.pnbar--editorial .pnbar__cta { --pnbar-cta-skin: none; --pnbar-cta-color: #9a3412; --pnbar-cta-fg: #fff7ed; box-shadow: none; }

/* 17 — Cloud Sky (flat • light) */
.pnbar--sky {
    --pnbar-skin-color: #eef6ff;
    --pnbar-skin-image: none;
    --pnbar-fg: #0f2b46;
    --pnbar-muted: #47607a;
    --pnbar-accent: #0284c7;
    --pnbar-accent-2: #0ea5e9;
    --pnbar-on-accent: #ffffff;
    --pnbar-orb-a: rgba(255, 255, 255, .8);
    --pnbar-orb-b: rgba(2, 132, 199, .16);
    --pnbar-hairline: rgba(15, 43, 70, .12);
    --pnbar-hairline-strong: rgba(2, 132, 199, .55);
    --pnbar-surface: rgba(15, 43, 70, .06);
    --pnbar-surface-strong: rgba(15, 43, 70, .11);
    --pnbar-cd-bg: rgba(255, 255, 255, .85);
    --pnbar-cd-fg: #0c4a6e;
    --pnbar-cd-label: #47607a;
    --pnbar-progress-track: rgba(15, 43, 70, .12);
    --pnbar-shadow: 0 14px 32px -24px rgba(15, 43, 70, .6);
    --pnbar-glow: 26%;
}

.pnbar--sky .pnbar__cta { --pnbar-cta-skin: none; --pnbar-cta-color: #0369a1; --pnbar-cta-fg: #ffffff; box-shadow: none; }

/* 18 — Soft Rose (flat • light) */
.pnbar--rose {
    --pnbar-skin-color: #fff1f5;
    --pnbar-skin-image: none;
    --pnbar-fg: #4a0f24;
    --pnbar-muted: #7b3a52;
    --pnbar-accent: #db2777;
    --pnbar-accent-2: #f472b6;
    --pnbar-on-accent: #ffffff;
    --pnbar-orb-a: rgba(255, 255, 255, .8);
    --pnbar-orb-b: rgba(219, 39, 119, .14);
    --pnbar-hairline: rgba(74, 15, 36, .12);
    --pnbar-hairline-strong: rgba(219, 39, 119, .5);
    --pnbar-surface: rgba(74, 15, 36, .06);
    --pnbar-surface-strong: rgba(74, 15, 36, .11);
    --pnbar-cd-bg: rgba(255, 255, 255, .85);
    --pnbar-cd-fg: #831843;
    --pnbar-cd-label: #7b3a52;
    --pnbar-progress-track: rgba(74, 15, 36, .12);
    --pnbar-shadow: 0 14px 32px -24px rgba(74, 15, 36, .55);
    --pnbar-glow: 26%;
}

.pnbar--rose .pnbar__cta { --pnbar-cta-skin: none; --pnbar-cta-color: #be185d; --pnbar-cta-fg: #ffffff; box-shadow: none; }

/* Pattern layers must tile — the base `.pnbar` rule sets `no-repeat`
   (and `cover`) which is only correct for background *images*. */
.pnbar--neon,
.pnbar--luxury,
.pnbar--social,
.pnbar--nooruz { background-repeat: repeat; background-size: 4px 4px; }

.pnbar--bfcm { background-repeat: repeat; background-size: 6px 6px; }

.pnbar--countdown,
.pnbar--alert { background-repeat: repeat; }

.pnbar--crypto { background-repeat: repeat; background-size: 46px 46px; }

/* Theme overrides */
.pnbar--dark {
    --pnbar-fg: #f8fafc;
    --pnbar-muted: rgba(248, 250, 252, .74);
    --pnbar-cd-label: rgba(248, 250, 252, .74);
    --pnbar-cd-fg: #f8fafc;
    --pnbar-surface: rgba(255, 255, 255, .1);
    --pnbar-hairline: rgba(255, 255, 255, .16);
}

.pnbar--light {
    --pnbar-fg: #0f172a;
    --pnbar-muted: #4b5565;
    --pnbar-cd-label: #4b5565;
    --pnbar-cd-fg: #0f172a;
    --pnbar-surface: rgba(15, 23, 42, .06);
    --pnbar-surface-strong: rgba(15, 23, 42, .1);
    --pnbar-hairline: rgba(15, 23, 42, .1);
    --pnbar-progress-track: rgba(15, 23, 42, .12);
}

/* --------------------------------------------------------------------------
   8. RESPONSIVE
   --------------------------------------------------------------------------
   Desktop  : one single row, message ellipsises when it gets too long.
   Tablet   : the message is allowed to wrap, the aside may wrap too.
   Mobile   : a clean, readable stacked layout — nothing overlaps and the
              text is never cut off.
   -------------------------------------------------------------------------- */

/* --- Tablet ------------------------------------------------------------- */
@media (max-width: 1024px) {
    .pnbar { --pnbar-gap: 12px; }

    /* Never truncate the copy on tablets, let it wrap instead. */
    .pnbar .pnbar__text {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }

    .pnbar .pnbar__aside { flex-wrap: wrap; gap: 8px 10px; }
    .pnbar .pnbar__cta { padding: 8px 16px; }
    .pnbar .pnbar__cd-box { min-width: 2.4em; }
    .pnbar__progress-wrap { max-width: 240px; }
}

/* --- Large phones / small tablets --------------------------------------- */
@media (max-width: 820px) {
    .pnbar__inner {
        flex-wrap: wrap;
        row-gap: 10px;
    }

    .pnbar .pnbar__content {
        flex: 1 1 100%;
        flex-wrap: wrap;
    }

    .pnbar .pnbar__aside {
        flex: 1 1 100%;
        justify-content: center;
        margin-inline-start: 0;
    }
}

/* --- Mobile ------------------------------------------------------------- */
@media (max-width: 767px) {
    .pnbar {
        padding-block: 12px;
        padding-inline: 14px;
        --pnbar-min-height: auto;
    }

    /* Everything stacks, centered, with room reserved for the close button. */
    .pnbar__inner {
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;
        gap: 10px;
        min-height: 0;
        text-align: center;
    }

    .pnbar .pnbar__content {
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        min-width: 0;
        /* keep the message clear of the absolutely positioned close button */
        padding-inline-end: 32px;
        padding-inline-start: 32px;
    }

    .pnbar .pnbar__text {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        width: 100%;
        font-size: .86rem;
        line-height: 1.85;
        text-align: center;
        /* never cut off, always fully readable */
        -webkit-line-clamp: unset;
    }

    .pnbar .pnbar__aside {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 8px 10px;
        width: 100%;
        margin-inline-start: 0;
    }

    /* Component scaling */
    .pnbar .pnbar__icon { width: 26px; height: 26px; font-size: .88rem; }
    .pnbar .pnbar__badge { font-size: .65rem; padding: 3px 10px; }
    .pnbar .pnbar__cta {
        padding: 8px 16px;
        font-size: .78rem;
        white-space: nowrap;
    }
    .pnbar .pnbar__cta-icon { display: none; }

    .pnbar .pnbar__countdown {
        flex-wrap: wrap;
        justify-content: center;
        gap: 5px;
        padding: 3px;
    }
    .pnbar .pnbar__cd-box { min-width: 2.25em; padding: 3px 6px; }
    .pnbar .pnbar__cd-value { font-size: .92rem; }
    .pnbar .pnbar__cd-label { font-size: .53rem; }

    .pnbar .pnbar__progress-wrap {
        flex: 1 1 100%;
        min-width: 0;
        max-width: none;
    }
    .pnbar .pnbar__progress-label { font-size: .74rem; text-align: center; }

    .pnbar .pnbar__avatars img { width: 24px; height: 24px; }
    .pnbar .pnbar__live { font-size: .72rem; }

    /* Close button sits in its own reserved corner. */
    .pnbar .pnbar__close {
        position: absolute;
        inset-block-start: 8px;
        inset-inline-end: 8px;
        width: 28px;
        height: 28px;
        margin: 0;
    }
}

/* --- Very small phones -------------------------------------------------- */
@media (max-width: 360px) {
    .pnbar { padding-inline: 12px; }
    .pnbar .pnbar__text { font-size: .82rem; }
    .pnbar .pnbar__cta { padding: 7px 13px; font-size: .74rem; }
    .pnbar .pnbar__cd-box { min-width: 2.1em; padding: 3px 5px; }
    .pnbar .pnbar__cd-value { font-size: .86rem; }
}

/* --- Landscape phones: keep the bar slim -------------------------------- */
@media (max-width: 900px) and (orientation: landscape) {
    .pnbar { padding-block: 8px; }
    .pnbar__inner { gap: 8px; }
    .pnbar .pnbar__text { font-size: .82rem; }
}

/* --------------------------------------------------------------------------
   8b. DIRECTION & PERSIAN DIGITS
   The whole stylesheet uses logical properties (inline / block / start / end)
   so RTL needs no mirror rules. These classes only pin the direction for
   themes that force the opposite one, and opt into Persian numerals.
   -------------------------------------------------------------------------- */
.pnbar--rtl { direction: rtl; text-align: start; }
.pnbar--ltr { direction: ltr; text-align: start; }

/* The clock keeps an LTR order even inside an RTL bar (standard for timers). */
.pnbar--rtl .pnbar__countdown { direction: ltr; }

/* Persian numerals keep a fixed width so the timer does not jitter. */
.pnbar--fa,
.pnbar--fa .pnbar__cd-value,
.pnbar--fa .pnbar__live {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* Mixed Persian/Latin content inside the message stays correctly ordered. */
.pnbar--fa .pnbar__text { unicode-bidi: plaintext; }

/* --------------------------------------------------------------------------
   9. ACCESSIBILITY
   -------------------------------------------------------------------------- */
.pnbar :where(a, button):focus-visible { outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
    .pnbar,
    .pnbar *,
    .pnbar *::before,
    .pnbar *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }

    .pnbar::before,
    .pnbar--badge-blink .pnbar__badge,
    .pnbar--cd-pulse .pnbar__cd-seconds .pnbar__cd-value,
    .pnbar--attention .pnbar__icon,
    .pnbar--glass .pnbar__icon,
    .pnbar__live-dot,
    .pnbar__progress-fill::after,
    .pnbar--bfcm .pnbar__inner::before { animation: none !important; }

    .pnbar__progress-fill { transition: none; }
}