/* ================================================================
ZIMLINK — notif-widget.css (v2)
Cross-cutting Notification Bell + Dropdown Panel widget
----------------------------------------------------------------
PAIRS WITH notif-widget.js v2, which now OVERRIDES any existing
bell/panel markup on every page load (index.html, arrivals.html,
category.html, seller-view.html, profile.html included) rather
than leaving hand-authored copies in place, so every page renders
from this single canonical class/ID set:
.nav-bell-wrap, .nav-bell-icon, #navBellCount, .notif-panel,
.notif-row, etc.
PURPOSE: Add this file's chrome so flex-centering above
isn't fought by the UA stylesheet's own font/padding/line-height. */
padding: 0;
margin: 0;
font: inherit;
line-height: normal;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.nav-bell-icon svg {
display: block;
pointer-events: none;
}
.nav-bell-icon:hover { background: var(--green, rgb(37, 189, 37)); color: white; }
.nav-bell-icon:focus-visible { box-shadow: 0 0 0 2px var(--green, rgb(37, 189, 37)); }
.nav-bell-icon.ringing { animation: notif-bell-ring 0.7s ease-in-out; }
@keyframes notif-bell-ring {
0%, 100% { transform: rotate(0deg); }
15% { transform: rotate(18deg); }
30% { transform: rotate(-16deg); }
45% { transform: rotate(12deg); }
60% { transform: rotate(-8deg); }
75% { transform: rotate(4deg); }
}
.nav-bell-count {
position: absolute;
top: -4px; right: -4px;
background: #ef4444;
color: white;
font-size: 10px;
font-weight: 700;
min-width: 17px;
height: 17px;
border-radius: 9px;
display: flex;
align-items: center;
justify-content: center;
padding: 0 3px;
border: 2px solid white;
}
/* ---------------------------------------------------------------
2. Floating fallback bell — used only when notif-widget.js can't
find any nav/header mount point on the page at all. Fixed to the
viewport so it works identically on fully custom-layout pages.
--------------------------------------------------------------- */
.zl-notif-fab-wrap {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 998;
}
.zl-notif-fab {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
border-radius: 50%;
background: var(--green, rgb(37, 189, 37));
color: white;
border: none;
outline: none;
cursor: pointer;
box-shadow: 0 6px 20px rgba(0,0,0,0.25);
transition: transform 0.15s, background 0.2s;
padding: 0;
margin: 0;
-webkit-appearance: none;
appearance: none;
}
.zl-notif-fab:hover { transform: scale(1.06); background: var(--green-dark, rgb(3, 192, 3)); }
.zl-notif-fab:focus-visible { box-shadow: 0 0 0 3px rgba(255,255,255,0.6), 0 6px 20px rgba(0,0,0,0.25); }
.zl-notif-fab.ringing { animation: notif-bell-ring 0.7s ease-in-out; }
.zl-notif-fab svg { display: block; pointer-events: none; }
.zl-notif-fab .nav-bell-count {
top: -2px; right: -2px;
border-color: white;
}
/* When the FAB variant is used, the panel opens above/left of the
button instead of dropping down from a header. */
.zl-notif-fab-wrap .notif-panel {
top: auto;
bottom: 64px;
right: 0;
}
/* ---------------------------------------------------------------
3. Notification dropdown panel (shared by both variants above)
--------------------------------------------------------------- */
.notif-panel {
position: absolute;
top: 52px;
right: 0;
width: 360px;
max-height: 480px;
background: white;
border-radius: 12px;
box-shadow: 0 12px 40px rgba(0,0,0,0.18);
border: 1px solid #eee;
z-index: 999;
display: flex;
flex-direction: column;
overflow: hidden;
/* Smooth open/close instead of an abrupt display:none toggle. */
opacity: 0;
transform: translateY(-6px) scale(0.98);
pointer-events: none;
visibility: hidden;
transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
transform-origin: top right;
}
.notif-panel.open {
opacity: 1;
transform: translateY(0) scale(1);
pointer-events: auto;
visibility: visible;
}
.notif-panel-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 16px;
border-bottom: 1px solid #f0f0f0;
}
.notif-panel-brand {
display: flex;
align-items: center;
gap: 8px;
}
.notif-panel-logo {
width: 22px;
height: 22px;
border-radius: 6px;
object-fit: cover;
flex-shrink: 0;
}
.notif-panel-title {
font-weight: 700;
font-size: 14px;
color: var(--dark, rgb(6, 6, 24));
}
.notif-panel-mark-read {
font-size: 12px;
color: var(--green, rgb(37, 189, 37));
font-weight: 600;
cursor: pointer;
background: none;
border: none;
}
.notif-panel-mark-read:hover { text-decoration: underline; }
.notif-panel-list {
overflow-y: auto;
flex: 1;
}
.notif-empty {
padding: 32px 16px;
text-align: center;
color: #94a3b8;
font-size: 13px;
}
.notif-row {
display: flex;
gap: 10px;
padding: 12px 16px;
border-bottom: 1px solid #f6f6f6;
cursor: pointer;
transition: background 0.15s;
position: relative;
}
.notif-row:hover { background: #fafafa; }
.notif-row.unread { background: #f3fdf3; }
.notif-row-icon {
width: 34px;
height: 34px;
border-radius: 50%;
background: var(--green-soft, #e8f9e8);
color: var(--green, rgb(37, 189, 37));
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: 13px;
}
/* Per-type accent colors — helps users scan the dropdown at a glance
instead of every row looking identical. */
.notif-row-icon[data-type="new_order"] { background: #e8f9e8; color: rgb(37,189,37); }
.notif-row-icon[data-type="order_status"] { background: #e6f2ff; color: #2563eb; }
.notif-row-icon[data-type="new_message"] { background: #eef2ff; color: #6366f1; }
.notif-row-icon[data-type="verification"] { background: #e6fbf6; color: #0d9488; }
.notif-row-icon[data-type="review"] { background: #fff8e1; color: #d97706; }
.notif-row-icon[data-type="trending"] { background: #fff1ee; color: #ea580c; }
.notif-row-icon[data-type="driver_application"] { background: #f1f0ff; color: #7c3aed; }
.notif-row-icon[data-type="payout"] { background: #e8f9e8; color: #16a34a; }
.notif-row-icon[data-type="follow"] { background: #fce7f3; color: #db2777; }
.notif-row-icon[data-type="low_stock"] { background: #fef2f2; color: #dc2626; }
.notif-row-icon[data-type="system"] { background: #f1f5f9; color: #475569; }
.notif-row-thumb {
padding: 0;
overflow: hidden;
}
.notif-row-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.notif-row-body { flex: 1; min-width: 0; }
.notif-row-title {
font-size: 13px;
font-weight: 700;
color: var(--dark, rgb(6, 6, 24));
margin-bottom: 2px;
}
.notif-row-text {
font-size: 12.5px;
color: #64748b;
line-height: 1.4;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.notif-row-time {
font-size: 11px;
color: #aab1bb;
margin-top: 3px;
}
.notif-row-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--green, rgb(37, 189, 37));
position: absolute;
top: 16px;
right: 14px;
flex-shrink: 0;
animation: notif-dot-pulse 1.8s ease-in-out infinite;
}
@keyframes notif-dot-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(37, 189, 37, 0.45); }
50% { box-shadow: 0 0 0 4px rgba(37, 189, 37, 0); }
}
.notif-panel-list::-webkit-scrollbar { width: 6px; }
.notif-panel-list::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 3px; }
.notif-panel-list::-webkit-scrollbar-track { background: transparent; }
/* ---------------------------------------------------------------
4. "Trending" badge injected onto product cards (index.html,
arrivals.html, category.html, profile.html) by widget.js's
trending-badge injector. Positioned top-right so it doesn't
collide with product.js's own NEW/SOLD/OUT OF STOCK badges,
which sit top-left.
--------------------------------------------------------------- */
.prd-badge-trending {
position: absolute;
top: 8px;
right: 8px;
z-index: 5;
display: inline-flex;
align-items: center;
gap: 4px;
background: linear-gradient(135deg, #ff6b35, #f7931e);
color: white;
font-size: 10px;
font-weight: 800;
letter-spacing: 0.3px;
padding: 4px 9px;
border-radius: 20px;
box-shadow: 0 2px 8px rgba(234, 88, 12, 0.35);
pointer-events: none;
}
@media (max-width: 768px) {
/* The base desktop rule positions the panel with position:absolute,
anchored to .nav-bell-wrap — a tiny inline wrapper sized to just the
bell icon, sitting inside the site's nav bar. On mobile that nav bar
is narrow and often clips overflow, so the panel could render
clipped, squeezed, or pushed off-screen depending on where the bell
happens to sit in that particular page's markup. Anchoring to the
viewport with position:fixed instead makes it render identically
everywhere, regardless of the surrounding nav's layout. */
.notif-panel {
position: fixed;
top: 64px;
left: 12px;
right: 12px;
width: auto;
max-height: calc(100vh - 110px);
z-index: 99999;
transform: translateY(-10px);
transform-origin: top center;
}
.notif-panel.open {
transform: translateY(0);
}
.zl-notif-fab-wrap .notif-panel {
top: auto;
bottom: 78px;
}
/* Bigger touch targets for rows/header — the bell (44px) and fab
(52px) are already sized correctly at the base rule, no override
needed there. */
.notif-row {
padding: 14px 16px;
gap: 12px;
}
.notif-panel-header {
padding: 16px;
}
}