/* ============================================================
   Jobscout Notification Bell — header dropdown widget.
   Uses the same blue palette / border-radius language as the
   notice ticker (css/notice-ticker.css) for visual consistency.

   Reviewed for optimization: no undefined variables, no dead or
   duplicate rules found — this file was already clean, left as-is.
   ============================================================ */

.jnb-bell-wrap {
    --jnb-500: #4277E0;
    --jnb-600: #2159E5;
    --jnb-50: #f4f7ff;
    --jnb-red: #ef4444;

    position: relative;
    display: inline-flex;
    align-items: center;
    font-family: 'Hind Siliguri', sans-serif;
}
.jnb-bell-wrap * {
    box-sizing: border-box;
}

/* ---------- Bell button ---------- */
.jnb-bell-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: #ffffff29;
    color: #fff !important;
    cursor: pointer;
    padding: 0;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.jnb-bell-btn:hover {
    background: #ececec;
    color: #000 !important;
}
.jnb-bell-btn:focus-visible {
    outline: 2px solid var(--jnb-600);
    outline-offset: 2px;
}
.jnb-bell-icon {
    width: 20px;
    height: 20px;
    display: block;
}

/* Red "new notification" dot */
.jnb-dot {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--jnb-red);
    border: 2px solid #fff;
}

/* ---------- Dropdown panel ---------- */
.jnb-panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 320px;
    max-width: 90vw;
    max-height: 420px;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid rgba(66, 119, 224, 0.18);
    border-radius: 14px;
    box-shadow: 0 16px 40px -12px rgba(20, 40, 90, 0.28);
    z-index: 9999;
    overflow: hidden;
}

.jnb-panel-head {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 14px;
    border-bottom: 1px solid rgba(66, 119, 224, 0.12);
    background: linear-gradient(180deg, var(--jnb-50), #ffffff);
}
.jnb-panel-title {
    font-size: 13.5px;
    font-weight: 700;
    color: #10192e;
}
.jnb-mark-all-btn {
    border: none;
    background: transparent;
    color: var(--jnb-600);
    font-size: 11.5px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 6px;
    transition: background 0.15s ease;
}
.jnb-mark-all-btn:hover {
    background: var(--jnb-50);
}

.jnb-list {
    list-style: none;
    margin: 0;
    padding: 6px 0;
    overflow-y: auto;
}

.jnb-empty {
    padding: 22px 14px;
    text-align: center;
    color: #7c8aa8;
    font-size: 12.5px;
}

.jnb-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    transition: background 0.15s ease;
}
.jnb-item:hover {
    background: var(--jnb-50);
}

.jnb-item-status {
    flex-shrink: 0;
    width: 7px;
    height: 7px;
    margin-top: 6px;
    border-radius: 50%;
    background: transparent;
}
.jnb-item.jnb-unread .jnb-item-status {
    background: var(--jnb-red);
}

.jnb-item-body {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.jnb-item-title {
    color: #10192e;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.5;
    text-decoration: none;
    word-break: break-word;
}
a.jnb-item-title:hover {
    color: var(--jnb-600);
    text-decoration: underline;
}
.jnb-item:not(.jnb-unread) .jnb-item-title {
    font-weight: 500;
    color: #4b5768;
}

/* Full notice text — never clamped/truncated, matches the ticker's policy. */
.jnb-item-desc {
    margin: 2px 0 0;
    color: #3d4a63;
    font-size: 11.5px;
    line-height: 1.6;
    white-space: normal;
    word-break: break-word;
}

.jnb-item-more {
    display: inline-block;
    margin-top: 4px;
    color: var(--jnb-600);
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
}
.jnb-item-more:hover {
    text-decoration: underline;
}

.jnb-item-time {
    font-size: 10.5px;
    color: #7c8aa8;
}

/* ============================================================
   RESPONSIVE PLACEMENT (auto-injected bell)
   The bell is a single DOM node moved by JS (notification-bell.js)
   into whichever header block is actually live for the current
   viewport — the theme's desktop menu row or its separate mobile
   `.responsive-nav` block. No theme file edits, no duplicate markup.

   Desktop : normal flex flow inside .menu-wrap, after "Post Jobs".
   Mobile / tablet (.jnb-mobile-slot) : pinned with `position:absolute`
   inside `.nav-top`, at a left-offset measured live from the mobile
   menu-toggle button's own width — see placeMobileBell() in JS —
   so it visually mirrors the toggle's distance from the logo.
   ============================================================ */

.jnb-auto-injected.jnb-mobile-slot {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 2147483000;
}

.jnb-bell-wrap.jnb-align-left .jnb-panel {
    right: auto;
    left: 0;
}

@media (max-width: 767px) {
    .jnb-panel {
        width: 300px;
    }
    .jnb-mobile-slot .jnb-bell-btn {
        width: 36px;
        height: 36px;
    }
    .jnb-mobile-slot .jnb-bell-icon {
        width: 18px;
        height: 18px;
    }
}

/* ---------- Native-hamburger look (placed inline next to .ixnav-trigger) ----------
   No pill background/border — matches the theme's own borderless icon-button
   styling instead of standing out as a separate floating widget. */
.jnb-bell-wrap.jnb-mobile-slot[data-jnb-mode="ixnav-trigger"] .jnb-bell-btn,
.ixnav-trigger + .jnb-bell-wrap .jnb-bell-btn,
.jnb-bell-wrap:has(+ .ixnav-trigger) .jnb-bell-btn {
    width: 40px;
    height: 40px;
    background: transparent;
    color: inherit;
}
.ixnav-trigger + .jnb-bell-wrap .jnb-bell-btn:hover,
.jnb-bell-wrap:has(+ .ixnav-trigger) .jnb-bell-btn:hover {
    background: rgba(0, 0, 0, 0.05);
    color: inherit;
}
.ixnav-trigger + .jnb-bell-wrap .jnb-bell-icon,
.jnb-bell-wrap:has(+ .ixnav-trigger) .jnb-bell-icon {
    width: 22px;
    height: 22px;
}