/* ===== «الإشعارات» — the bell (2026-10-10) ===== */
.nb { position: relative; margin-inline-start: auto; margin-inline-end: .6rem; }
.nb ~ .tm-btn, .tm-btn ~ .nb { margin-inline-start: 0; }
.nb__b { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--line);
  background: #fff; color: var(--ink); transition: background .18s, border-color .18s; }
.nb__b svg { width: 20px; height: 20px; }
.nb__b:hover, .nb__b[aria-expanded="true"] { background: #fff7ed; border-color: #fdba74; }
.nb__b:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.nb__n { position: absolute; top: -6px; inset-inline-end: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px;
  background: var(--red); color: #fff; font-size: .7rem; font-weight: 800; line-height: 20px; text-align: center; border: 2px solid #fff; direction: ltr; }

.nb-p { position: absolute; top: calc(100% + 8px); inset-inline-end: 0; width: 400px; max-height: min(72vh, 620px); overflow: auto; z-index: 60;
  background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 18px 44px rgba(24, 32, 54, .18); }
.nb-p__h { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 16px;
  background: #fff; border-bottom: 1px solid var(--line); }
.nb-p__h b { font-size: 1rem; }
.nb-p__all, .nb-p__more { border: 0; background: none; color: var(--blue-d); font-weight: 700; font-size: .8rem; padding: 4px 6px; border-radius: 8px; }
.nb-p__all:hover, .nb-p__more:hover { background: #eff6ff; }
.nb-p__more { display: block; width: 100%; padding: 10px; border-top: 1px solid var(--line); border-radius: 0; }
.nb-p__l { list-style: none; }
.nb-i { display: flex; gap: 12px; padding: 12px 16px; border-bottom: 1px solid #f1f3f6; cursor: pointer; transition: background .15s; }
.nb-i:hover, .nb-i:focus-visible { background: #f8fafc; outline: none; }
.nb-i.is-new { background: #fffaf0; }
.nb-i.is-new:hover { background: #fff3dc; }
.nb-i__ic { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: #eff6ff; color: var(--blue-d); }
.nb-i__ic svg { width: 18px; height: 18px; }
.nb-i--money .nb-i__ic { background: #ecfdf5; color: var(--green); }
.nb-i--warn .nb-i__ic { background: #fef2f2; color: var(--red); }
.nb-i__t { min-width: 0; display: flex; flex-direction: column; gap: 2px; line-height: 1.55; }
.nb-i__t b { font-size: .88rem; overflow-wrap: anywhere; }
.nb-i.is-new .nb-i__t b::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); margin-inline-end: 6px; vertical-align: middle; }
.nb-i__t span { font-size: .8rem; color: #4b5563; overflow-wrap: anywhere; }
.nb-i__t small { font-size: .72rem; color: var(--muted); }
.nb-p__e { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 34px 24px; text-align: center; color: var(--muted); font-size: .85rem; line-height: 1.7; }
.nb-p__e svg { width: 34px; height: 34px; opacity: .5; }

@media (max-width: 760px) {
  .nb { margin-inline-end: .3rem; }
  .nb-p { position: fixed; top: 64px; inset-inline: 8px; width: auto; max-height: calc(100vh - 80px); }
}