@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,500;0,600;0,700;1,500&display=swap');

:root {
    --announcement-height: 0px;
}

.pe-announcement-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2147483647;
    overflow: hidden;
    background: linear-gradient(
        120deg,
        #0c1222 0%,
        #1e3a8a 22%,
        #2563eb 45%,
        #4f46e5 68%,
        #7c3aed 88%,
        #a855f7 100%
    );
    color: #fff;
    text-align: center;
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.5;
    padding: 11px 18px;
    box-shadow:
        0 4px 18px rgba(37, 99, 235, 0.28),
        0 1px 0 rgba(255, 255, 255, 0.12) inset;
}

.pe-announcement-bar::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.14) 0%,
        rgba(255, 255, 255, 0) 42%,
        rgba(0, 0, 0, 0.08) 100%
    );
    pointer-events: none;
}

.pe-announcement-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: -120%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.18),
        transparent
    );
    animation: pe-announcement-shine 7s ease-in-out infinite;
    pointer-events: none;
}

@keyframes pe-announcement-shine {
    0%, 100% { left: -120%; }
    45%, 55% { left: 140%; }
}

.pe-announcement-bar-inner {
    position: relative;
    z-index: 1;
    max-width: 960px;
    margin: 0 auto;
    text-shadow: 0 1px 2px rgba(15, 23, 42, 0.22);
}

html.has-announcement {
    --preview-height: var(--announcement-height);
}

html.has-announcement .navbar,
html.has-announcement .header {
    top: var(--announcement-height);
}

html.has-announcement body.pe-order-layout #site-content {
    padding-top: var(--announcement-height);
}

html.has-announcement body.pe-order-layout #site-content > .navbar {
    position: sticky;
    top: var(--announcement-height);
    z-index: 1000;
}

html.has-announcement body.pe-order-layout.pe-chat-active #site-content > .navbar,
html.has-announcement body.pe-order-layout.pe-chat-active .navbar {
    position: sticky;
    top: var(--announcement-height) !important;
    z-index: 1000;
}

html.has-announcement body.pe-nav-fixed {
    padding-top: calc(var(--nav-height) + var(--announcement-height));
}

html.has-announcement body.site-ready.pe-nav-fixed {
    padding-top: calc(var(--nav-height) + var(--announcement-height));
}

/* Splash screen stays edge-to-edge; bar appears after reveal */
html.pe-booting #pe-announcement-bar {
    display: none !important;
}

html.pe-booting #loading-overlay:not(.is-exiting),
html.pe-booting .pe-loading-overlay:not(.is-exiting) {
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: auto !important;
}

@media (prefers-reduced-motion: reduce) {
    .pe-announcement-bar::after {
        animation: none;
    }
}