/* ── Browser Push Notification UI ─────────────────────────── */

/* Banner */
#push-banner {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 9999;
    transform: translateY(100%);
    transition: transform .35s cubic-bezier(.4,0,.2,1);
    pointer-events: none;
}
#push-banner.show { transform: translateY(0); pointer-events: auto; }

.push-banner-inner {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--primary-navy, #0d1b2e);
    color: #fff;
    padding: 14px 20px;
    border-top: 2px solid var(--primary-gold, #d4af37);
    flex-wrap: wrap;
}

.push-banner-icon { color: var(--primary-gold, #d4af37); font-size: 1.1rem; flex-shrink: 0; }

.push-banner-text { flex: 1; font-size: 0.85rem; min-width: 180px; }

.push-banner-allow {
    background: var(--primary-gold, #d4af37);
    color: var(--primary-navy, #0d1b2e);
    border: none;
    border-radius: 6px;
    padding: 7px 18px;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    flex-shrink: 0;
    transition: opacity .18s;
}
.push-banner-allow:hover { opacity: .88; }

.push-banner-dismiss {
    background: none;
    border: none;
    color: rgba(255,255,255,.45);
    font-size: 1rem;
    cursor: pointer;
    padding: 4px;
    line-height: 1;
    flex-shrink: 0;
    transition: color .15s;
}
.push-banner-dismiss:hover { color: #fff; }

/* Toast */
.push-toast {
    position: fixed;
    bottom: 24px; right: 24px;
    z-index: 10000;
    background: var(--primary-navy, #0d1b2e);
    color: #fff;
    padding: 10px 18px;
    border-radius: 8px;
    font-size: 0.83rem;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,.25);
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .3s, transform .3s;
    pointer-events: none;
}
.push-toast.show { opacity: 1; transform: translateY(0); }
.push-toast-success i { color: #5ecc88; }
.push-toast-info    i { color: var(--primary-gold, #d4af37); }

/* Toggle button */
#pushToggleBtn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.15);
    color: rgba(255,255,255,.55);
    border-radius: 8px;
    padding: 7px 13px;
    font-size: 0.78rem;
    cursor: pointer;
    transition: all .2s;
}
#pushToggleBtn:hover { background: rgba(255,255,255,.14); color: #fff; }
#pushToggleBtn.active { border-color: var(--primary-gold, #d4af37); color: var(--primary-gold, #d4af37); background: rgba(212,175,55,.1); }
#pushToggleBtn i { font-size: 0.85rem; }