/* =====================================================
   LX Notes — Announcement Bar
   ===================================================== */

/* Sticky wrapper — holds announcement bar + navbar */
#lx-site-header {
    position: sticky;
    top: 0;
    z-index: 1030;
}

#lx-ann-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    padding: .65rem 1.25rem;
    font-family: 'Bitter', Georgia, serif;
    font-size: .875rem;
    line-height: 1.4;
    position: relative;
    width: 100%;
    box-sizing: border-box;
    box-shadow: 0 3px 16px rgba(0,0,0,.22);
    border-bottom: 2px solid rgba(255,255,255,.18);
    animation: lxBarSlideDown .4s cubic-bezier(.16,1,.3,1) both;
}

#lx-ann-bar.lx-ann-bottom {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    top: auto;
    border-bottom: none;
    border-top: 2px solid rgba(255,255,255,.18);
    box-shadow: 0 -3px 16px rgba(0,0,0,.22);
    animation: lxBarSlideUp .4s cubic-bezier(.16,1,.3,1) both;
}

/* ── Preset Themes ─────────────────────────────────── */
#lx-ann-bar[data-theme="brand"] {
    background: linear-gradient(90deg, #2d1fc8 0%, #0a8fb0 50%, #2d1fc8 100%);
    background-size: 200% 100%;
    animation: lxBarSlideDown .4s cubic-bezier(.16,1,.3,1) both,
               lxBarShimmer 6s linear infinite;
    color: #fff;
}
#lx-ann-bar[data-theme="brand"] .lx-ann-btn.lx-btn-solid {
    background: #fff; color: #1a18b0;
    box-shadow: 0 2px 8px rgba(0,0,0,.18);
}
#lx-ann-bar[data-theme="success"] {
    background: linear-gradient(90deg, #14532d 0%, #16a34a 100%);
    color: #fff;
}
#lx-ann-bar[data-theme="success"] .lx-ann-btn.lx-btn-solid {
    background: #fff; color: #15803d;
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
#lx-ann-bar[data-theme="warning"] {
    background: linear-gradient(90deg, #92400e 0%, #f59e0b 100%);
    color: #fff;
}
#lx-ann-bar[data-theme="warning"] .lx-ann-btn.lx-btn-solid {
    background: #fff; color: #92400e;
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
#lx-ann-bar[data-theme="danger"] {
    background: linear-gradient(90deg, #7f1d1d 0%, #ef4444 100%);
    color: #fff;
}
#lx-ann-bar[data-theme="danger"] .lx-ann-btn.lx-btn-solid {
    background: #fff; color: #dc2626;
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
#lx-ann-bar[data-theme="dark"] {
    background: linear-gradient(90deg, #0f172a 0%, #1e293b 100%);
    color: #e2e8f0;
}
#lx-ann-bar[data-theme="dark"] .lx-ann-btn.lx-btn-solid {
    background: #0C9DBF; color: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,.3);
}

/* ── Animations ────────────────────────────────────── */
@keyframes lxBarSlideDown {
    from { transform: translateY(-100%); opacity: 0; }
    to   { transform: translateY(0);     opacity: 1; }
}
@keyframes lxBarSlideUp {
    from { transform: translateY(100%); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}
@keyframes lxBarShimmer {
    0%   { background-position: 0% 0%; }
    50%  { background-position: 100% 0%; }
    100% { background-position: 0% 0%; }
}
@keyframes lxPulse {
    0%, 100% { opacity: 1;   transform: scale(1);   }
    50%       { opacity: .5; transform: scale(.8);  }
}

/* ── Pulsing live dot ──────────────────────────────── */
#lx-ann-bar::before {
    content: '';
    display: block;
    flex-shrink: 0;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255,255,255,.85);
    animation: lxPulse 1.8s ease-in-out infinite;
}

/* ── Icon ──────────────────────────────────────────── */
.lx-ann-icon {
    flex-shrink: 0;
    width: 28px; height: 28px;
    border-radius: 6px;
    object-fit: cover;
    box-shadow: 0 1px 4px rgba(0,0,0,.2);
}

/* ── Message ───────────────────────────────────────── */
.lx-ann-message {
    flex: 1;
    min-width: 0;
    font-weight: 600;
    letter-spacing: .01em;
}
.lx-ann-message a    { color: inherit; text-decoration: underline; }
.lx-ann-message strong { font-weight: 800; }

/* ── Countdown ─────────────────────────────────────── */
.lx-ann-countdown {
    flex-shrink: 0;
    font-size: .78rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: .05em;
    background: rgba(0,0,0,.2);
    padding: .22rem .6rem;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.2);
}

/* ── CTA Button ────────────────────────────────────── */
.lx-ann-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .38rem 1rem;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: opacity .15s, transform .15s, box-shadow .15s;
    white-space: nowrap;
    border: 2px solid transparent;
    letter-spacing: .02em;
}
.lx-ann-btn:hover {
    opacity: .92;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,.2) !important;
}
.lx-ann-btn.lx-btn-outline {
    background: transparent !important;
    border-color: currentColor;
    box-shadow: none !important;
}
.lx-ann-btn.lx-btn-ghost {
    background: transparent !important;
    padding-left: .25rem; padding-right: .25rem;
    box-shadow: none !important;
}
.lx-ann-btn svg { transition: transform .15s; }
.lx-ann-btn:hover svg { transform: translateX(3px); }

/* ── Close ─────────────────────────────────────────── */
.lx-ann-close {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px; height: 26px;
    background: rgba(0,0,0,.12);
    border: 1px solid rgba(255,255,255,.15);
    cursor: pointer;
    border-radius: 50%;
    opacity: .75;
    transition: opacity .15s, background .15s, transform .2s;
    padding: 0;
    margin-left: .25rem;
    color: inherit;
}
.lx-ann-close:hover {
    opacity: 1;
    background: rgba(0,0,0,.28);
    transform: rotate(90deg);
}

/* ── Mobile ────────────────────────────────────────── */
@media (max-width: 640px) {
    #lx-ann-bar {
        flex-wrap: wrap;
        gap: .5rem;
        padding: .6rem .875rem;
    }
    #lx-ann-bar::before { display: none; }
    .lx-ann-icon        { display: none; }
    .lx-ann-message     { font-size: .8rem; }
    .lx-ann-btn         { font-size: .75rem; padding: .32rem .8rem; }
    .lx-ann-countdown   { font-size: .72rem; }
}
@media (max-width: 400px) {
    #lx-ann-bar         { text-align: center; }
    .lx-ann-message     { width: 100%; text-align: center; }
}

/* ── Bottom + brand theme: correct slide-up + shimmer ── */
#lx-ann-bar.lx-ann-bottom[data-theme=brand] {
    animation: lxBarSlideUp .4s cubic-bezier(.16,1,.3,1) both,
               lxBarShimmer 6s linear infinite;
}