/* ──────────────────────────────────────────────────────────────
   notifications.css — Market sale notifications bell + dropdown
   Glass surface tokens match design system (rgba 15,22,33 + blur).
   ────────────────────────────────────────────────────────────── */

/* Bell button */
.notif-bell-wrapper { position: relative; }

.notif-bell-btn {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.85);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    transition: background 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.notif-bell-btn:hover,
.notif-bell-btn[aria-expanded="true"] {
    background: rgba(13, 202, 240, 0.12);
    color: #0dcaf0;
    border-color: rgba(13, 202, 240, 0.4) !important;
}

.notif-bell-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: rgb(255, 19, 19);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 18px;
    text-align: center;
    box-shadow: 0 0 0 2px rgba(15, 22, 33, 0.95);
}

/* Dropdown panel
   Note: keep `display:flex` scoped to `.show` so Bootstrap's
   default `.dropdown-menu { display:none }` keeps the panel hidden
   until the user opens it. Otherwise it would always be visible
   and only flip between Popper-positioned and static flow position. */
.notif-dropdown {
    width: min(380px, 92vw);
    max-height: 70vh;
    padding: 0;
    background: rgba(15, 22, 33, 0.92);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(13, 202, 240, 0.18);
    border-radius: 14px;
    overflow: hidden;
}

.notif-dropdown.show {
    display: flex;
    flex-direction: column;
}

.notif-dropdown-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(13, 202, 240, 0.04);
    color: #fff;
}

.notif-dropdown-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 2rem 1rem;
    color: rgba(255, 255, 255, 0.5);
    text-align: center;
}

.notif-dropdown-empty i { font-size: 1.5rem; color: rgba(255, 255, 255, 0.25); }

.notif-dropdown-body {
    overflow-y: auto;
    /* ~6 cards visible (card ≈ 60px incl. padding/border + 0.35rem gap).
       Anything beyond scrolls. */
    max-height: calc(6 * 60px + 5 * 0.35rem);
    padding: 0.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

/* Card (horizontal, simplified item card variant) */
.market-notif-card {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.55rem;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    transition: background 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.market-notif-card:hover {
    background: rgba(13, 202, 240, 0.06);
    border-color: rgba(13, 202, 240, 0.25);
}

.market-notif-card.is-unseen {
    background: rgba(13, 202, 240, 0.08);
    border-color: rgba(13, 202, 240, 0.35);
}

.market-notif-thumb {
    width: 64px;
    height: 42px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

.market-notif-thumb::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--rarity-color, transparent) 0%, transparent 60%);
    opacity: 0.35;
    pointer-events: none;
}

.market-notif-thumb img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    position: relative;
    z-index: 1;
}

.market-notif-meta {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.market-notif-name-row {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
}

.market-notif-gun {
    color: #fff;
    font-weight: 500;
}

.market-notif-paint {
    color: rgba(255, 255, 255, 0.55);
}

.market-notif-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-top: 0.1rem;
}

.market-notif-tag { font-weight: 500; }

.market-notif-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.15rem;
    white-space: nowrap;
}

.market-notif-price {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: #fff;
    font-weight: 600;
}

.market-notif-time {
    color: rgba(255, 255, 255, 0.45);
}

@media (max-width: 575.98px) {
    .market-notif-card {
        grid-template-columns: 52px minmax(0, 1fr) auto;
        gap: 0.4rem;
        padding: 0.35rem 0.45rem;
    }

    .market-notif-thumb { width: 52px; height: 36px; }

    /* On phones the bell sits in the navbar's right side and an ancestor
       (transform/backdrop-filter) creates a containing block that traps
       `position: fixed`. Workaround: stretch the dropdown across the full
       width of whatever its containing block is, then center the visible
       panel inside it via auto margins so it ALWAYS lands at the screen's
       horizontal center regardless of the bell's position. */
    .notif-bell-wrapper { position: static !important; }

    .notif-dropdown.show {
        position: fixed !important;
        top: 90px !important;
        left: 0 !important;
        right: 0 !important;
        bottom: auto !important;
        transform: none !important;
        inset: 90px 0 auto 0 !important;
        margin: 0 auto !important;
        width: min(380px, 92vw) !important;
        max-width: 92vw;
        max-height: calc(100vh - 110px);
        z-index: 1055;
    }
}