/* The member bell and the Notifications page (Notifications plugin). The bell follows the header's own colours (currentColor);
   the panel is a neutral card. Set --notif-accent to colour the unread dot and buttons (it falls back to the theme's primary). */
.notif-bell { --notif-accent: var(--primary, #444); position: relative; display: flex; align-items: center; margin-left: auto; }
.notif-bell-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 10px; background: transparent; border: 0; color: inherit; font-size: 18px; cursor: pointer; border-radius: 6px; }
.notif-bell-btn:hover { background: rgba(127, 127, 127, 0.15); }
.notif-bell-btn:focus-visible, .notif-item:focus-visible, .notif-link:focus-visible, .notif-close:focus-visible, .notif-prompt-on:focus-visible { outline: 2px solid var(--notif-accent); outline-offset: 2px; }
.notif-bell-btn.is-static { cursor: default; }
.notif-bell-btn.is-static:hover { background: transparent; }
.notif-badge { position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #d93025; color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; box-sizing: border-box; }

/* On a phone the bell sits beside the menu button; on a wide screen it is pinned to the right of the header. */
.header .header-container { position: relative; }
.header .header-main { align-items: center; }
@media only screen and (min-width: 992px) {
    .header .notif-bell { position: absolute; right: 0; top: 0; bottom: 0; margin-left: 0; }
    .header:has(.notif-bell) .header-menu-account { margin-right: 52px; }
}

.notif-backdrop { display: none; }
.notif-panel { position: absolute; top: calc(100% + 6px); right: 0; z-index: 1050; display: flex; flex-direction: column; width: 380px; max-width: calc(100vw - 16px); max-height: min(70vh, 560px); background: #fff; color: #222; border: 1px solid rgba(0, 0, 0, 0.12); border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22); text-align: left; font-size: 14px; line-height: 1.35; }
.notif-panel-head { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid #e6e6e6; }
.notif-panel-title { flex: 1; margin: 0; font-size: 16px; font-weight: 700; color: #222; }
.notif-panel-title:focus { outline: none; }
.notif-close { display: none; min-width: 44px; min-height: 44px; margin: -8px -10px -8px 0; background: transparent; border: 0; color: #444; cursor: pointer; }
.notif-link { padding: 4px 2px; background: none; border: 0; color: var(--notif-accent); font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; }
.notif-link:disabled { opacity: 0.5; cursor: default; }
.notif-list { flex: 1; min-height: 0; overflow-y: auto; }
.notif-list ul { margin: 0; padding: 0; list-style: none; }
.notif-list li { border-bottom: 1px solid #f0f0f0; }
.notif-empty { margin: 0; padding: 24px 16px; color: #666; text-align: center; }
.notif-item { display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 12px 14px; background: transparent; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.notif-item:hover { background: #f6f6f6; }
.notif-item.is-unread { background: rgba(0, 0, 0, 0.035); }
.notif-item-icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: #eee; color: #555; }
.notif-item-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.notif-item-title { font-weight: 700; }
.notif-item-body { color: #444; overflow-wrap: anywhere; }
.notif-item-time { color: #777; font-size: 12px; }
.notif-dot { flex: 0 0 auto; width: 9px; height: 9px; margin-top: 6px; border-radius: 50%; background: var(--notif-accent); }
.notif-panel-foot { padding: 10px 14px; border-top: 1px solid #e6e6e6; text-align: center; }
.notif-prompt { margin: 10px 14px 0; padding: 10px 12px; background: #f3f6fb; border: 1px solid #d9e2f1; border-radius: 8px; }
.notif-prompt-text { margin: 0 0 8px; }
.notif-prompt-actions { display: flex; align-items: center; gap: 12px; }
.notif-prompt-on { padding: 6px 14px; background: var(--notif-accent); border: 0; border-radius: 6px; color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.notif-prompt-on:disabled { opacity: 0.6; cursor: default; }
.notif-note { margin: 10px 14px 0; padding: 8px 12px; background: #eef7ee; border-radius: 8px; color: #245c2a; }

/* Phones: a full-width sheet from the top, with the rest of the page dimmed. */
@media only screen and (max-width: 575.98px) {
    .notif-bell { position: static; }
    .notif-backdrop { display: block; position: fixed; inset: 0; z-index: 1049; background: rgba(0, 0, 0, 0.4); }
    .notif-panel { position: fixed; top: 0; left: 0; right: 0; width: auto; max-width: none; max-height: 85vh; border-radius: 0 0 14px 14px; border-width: 0 0 1px 0; }
    .notif-close { display: inline-flex; align-items: center; justify-content: center; }
    .notif-item, .notif-link { min-height: 44px; }
}

/* The Notifications page. */
.notif-page { max-width: 760px; margin: 0 auto; padding: 8px 0 32px; }
.notif-page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 12px; }
.notif-page-head h2 { margin: 0; font-size: 1.25rem; }
.notif-page .notif-list { overflow: visible; background: #fff; border: 1px solid #e6e6e6; border-radius: 10px; color: #222; }
.notif-page .notif-link { color: var(--primary, #444); }
.notif-pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
.notif-prefs { margin-top: 32px; }
.notif-prefs h2 { font-size: 1.25rem; }
.notif-prefs-table { width: 100%; border-collapse: collapse; background: #fff; color: #222; border: 1px solid #e6e6e6; border-radius: 10px; }
.notif-prefs-table th, .notif-prefs-table td { padding: 10px 12px; border-bottom: 1px solid #f0f0f0; text-align: left; }
.notif-prefs-table th.col-toggle, .notif-prefs-table td.col-toggle { width: 96px; text-align: center; }
.notif-prefs-table input[type=checkbox] { width: 20px; height: 20px; }
.notif-prefs-off { color: #777; font-size: 12px; display: block; }
.notif-push-box { margin: 12px 0 16px; padding: 14px 16px; background: #fff; color: #222; border: 1px solid #e6e6e6; border-radius: 10px; }
.notif-push-box p { margin: 0 0 10px; }
.notif-push-box p:last-child { margin-bottom: 0; }