/* ==========================================================================
   Notifications — rich product toast + header bell notification center
   Brand: teal #00b2a6, Poppins (loaded globally in the layout)
   ========================================================================== */

:root{
    --notif-teal:#00b2a6;
    --notif-teal-dark:#0e7c73;
    --notif-teal-soft:#e6fbf8;
    --notif-ink:#0f172a;
    --notif-sub:#64748b;
    --notif-line:#e6e8eb;
}

/* ---------------------------------------------------------------- TOASTS -- */
#dz-toast-container{
    position:fixed;
    top:18px;
    right:18px;
    z-index:100000;
    width:380px;
    max-width:calc(100vw - 32px);
    display:flex;
    flex-direction:column;
    gap:12px;
    pointer-events:none;
}
.dz-toast{
    pointer-events:auto;
    position:relative;
    background:#fff;
    border:1px solid var(--notif-line);
    border-left:4px solid var(--notif-teal);
    border-radius:14px;
    box-shadow:0 12px 32px -10px rgba(2,6,23,.28);
    overflow:hidden;
    transform:translateX(120%);
    opacity:0;
    transition:transform .35s cubic-bezier(.22,.61,.36,1), opacity .35s ease;
}
.dz-toast.show{ transform:translateX(0); opacity:1; }
.dz-toast.hide{ transform:translateX(120%); opacity:0; }
.dz-toast .dz-toast-inner{ display:flex; gap:12px; padding:14px; cursor:pointer; }
.dz-toast .dz-thumb{
    width:54px; height:54px; flex:0 0 auto;
    border-radius:10px; background:var(--notif-teal-soft);
    object-fit:cover; border:1px solid var(--notif-line);
}
.dz-toast .dz-main{ flex:1; min-width:0; }
.dz-toast .dz-top{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.dz-toast .dz-pill{
    display:inline-flex; align-items:center; gap:5px;
    font-size:11px; font-weight:600; color:var(--notif-teal-dark);
    background:var(--notif-teal-soft); padding:2px 8px; border-radius:20px;
    white-space:nowrap;
}
.dz-toast .dz-pill.is-info{ color:#475569; background:#f1f5f9; }
.dz-toast .dz-pill .dz-dot{ width:6px; height:6px; border-radius:50%; background:#16a34a; display:inline-block; }
.dz-toast .dz-pill.is-info .dz-dot{ background:#94a3b8; }
.dz-toast .dz-time{ font-size:11px; color:#94a3b8; white-space:nowrap; }
.dz-toast .dz-name{
    font-size:14px; font-weight:600; color:var(--notif-ink);
    margin:6px 0 2px; line-height:1.25;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.dz-toast .dz-meta{ font-size:12px; color:var(--notif-sub); }
.dz-toast .dz-body{ font-size:12.5px; color:#475569; margin:6px 0 10px; }
.dz-toast .dz-btns{ display:flex; gap:8px; }
.dz-toast .dz-btn{
    font-size:12.5px; font-weight:600; border-radius:9px; padding:8px 14px;
    cursor:pointer; border:1px solid transparent; line-height:1;
}
.dz-toast .dz-btn-primary{ background:var(--notif-teal); color:#fff; }
.dz-toast .dz-btn-primary:hover{ background:var(--notif-teal-dark); }
.dz-toast .dz-btn-ghost{ background:#fff; color:#475569; border-color:var(--notif-line); }
.dz-toast .dz-btn-ghost:hover{ background:#f8fafc; }
.dz-toast .dz-close{
    position:absolute; top:8px; right:8px;
    background:none; border:none; padding:4px; line-height:0; cursor:pointer; color:#94a3b8;
}
.dz-toast .dz-close:hover{ color:#475569; }
.dz-toast .dz-progress{ position:absolute; left:0; bottom:0; height:3px; background:var(--notif-teal); width:100%; }

/* ------------------------------------------------------------- BELL / PANEL */
.notif-bell-wrap{ position:relative; display:inline-flex; }
.notif-bell-btn{
    position:relative; width:42px; height:42px; border-radius:50%;
    background:#f4f6f8; border:1px solid var(--notif-line); color:#334155;
    display:flex; align-items:center; justify-content:center; cursor:pointer;
    font-size:18px; transition:background .15s ease, color .15s ease;
}
.notif-bell-btn:hover{ background:var(--notif-teal-soft); color:var(--notif-teal-dark); }
.notif-bell-btn .notif-badge{
    position:absolute; top:-4px; right:-4px;
    min-width:18px; height:18px; padding:0 4px;
    border-radius:9px; background:#ef4444; color:#fff;
    font-size:10px; font-weight:700; line-height:18px; text-align:center;
    border:2px solid #fff;
}
.notif-panel{
    position:absolute; top:54px; right:0;
    width:380px; max-width:calc(100vw - 32px);
    background:#fff; border:1px solid var(--notif-line); border-radius:14px;
    box-shadow:0 16px 40px -12px rgba(2,6,23,.28);
    overflow:hidden; z-index:9000;
    opacity:0; visibility:hidden; transform:translateY(-6px);
    transition:opacity .18s ease, transform .18s ease, visibility .18s ease;
}
.notif-panel.open{ opacity:1; visibility:visible; transform:translateY(0); }
.notif-panel-head{
    display:flex; align-items:center; justify-content:space-between;
    padding:13px 16px; border-bottom:1px solid var(--notif-line);
}
.notif-panel-title{ font-size:14px; font-weight:600; color:var(--notif-ink); }
.notif-markall{ font-size:12px; font-weight:600; color:var(--notif-teal); text-decoration:none; }
.notif-markall:hover{ color:var(--notif-teal-dark); }
.notif-panel-list{ max-height:60vh; overflow-y:auto; }
.notif-item{
    display:flex; gap:11px; padding:12px 16px; position:relative;
    border-bottom:1px solid #f1f5f9; cursor:pointer; text-decoration:none;
}
.notif-item:hover{ background:#f8fafc; }
.notif-item.unread{ background:#f4fffe; }
.notif-item.unread:hover{ background:#e9fbf9; }
.notif-item .notif-unread-dot{
    position:absolute; left:6px; top:18px; width:7px; height:7px;
    border-radius:50%; background:var(--notif-teal);
}
.notif-item .notif-thumb{
    width:38px; height:38px; flex:0 0 auto; margin-left:6px;
    border-radius:9px; background:var(--notif-teal-soft);
    object-fit:cover; border:1px solid var(--notif-line);
}
.notif-item .notif-it-main{ min-width:0; }
.notif-item .notif-it-title{ font-size:13px; font-weight:600; color:var(--notif-ink); line-height:1.25; }
.notif-item .notif-it-body{
    font-size:12px; color:var(--notif-sub); margin-top:1px;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.notif-item .notif-it-time{ font-size:11px; color:#94a3b8; margin-top:3px; }
.notif-empty{ padding:28px 16px; text-align:center; font-size:13px; color:#94a3b8; }

@media (max-width:480px){
    #dz-toast-container{ left:12px; right:12px; width:auto; }
    .notif-panel{ position:fixed; top:64px; right:12px; left:12px; width:auto; }
}