/* css/08-notifications.css — top-bar bell + notifications panel */

/* top-bar icon button (bell) */
.icon-btn{position:relative;width:36px;height:36px;border-radius:9px;flex:none;
  display:flex;align-items:center;justify-content:center;color:#fff;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.13);cursor:pointer;
  transition:background .15s,border-color .15s,transform .15s}
.icon-btn:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.24);transform:translateY(-1px)}
.icon-btn:active{transform:translateY(0)}
.notif-badge{position:absolute;top:-5px;right:-5px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;
  background:linear-gradient(180deg,#ff7373,var(--live));color:#fff;font-size:10px;font-weight:800;line-height:1;
  display:flex;align-items:center;justify-content:center;border:2px solid var(--topbar);
  box-shadow:0 2px 6px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.3)}

/* panel — flat surface + standard border to match the rest of the site's
   dropdowns (profile, cart). The neon top-stripe and green-tinted glass were the
   only things making this panel stand out from every other surface. */
.notif-dd{width:344px;padding:0;overflow:hidden;background:var(--panel-2);border-color:var(--line)}
.notif-head{display:flex;align-items:center;justify-content:space-between;padding:15px 16px 11px}
.notif-head b{font-size:15px;font-weight:800;letter-spacing:.1px;display:flex;align-items:center;gap:7px}
.notif-head b .ic-svg{color:var(--green-2)}
.notif-markall{font-size:11px;color:var(--green-2);font-weight:700;padding:5px 11px;border-radius:20px;
  background:var(--panel-3);transition:.12s}
.notif-markall:hover{background:var(--odds-hover)}
.notif-tabs{display:flex;gap:4px;padding:0 12px 10px;border-bottom:1px solid var(--line)}
.notif-tab{padding:6px 10px;border-radius:7px;font-size:11.5px;font-weight:700;color:var(--txt-2);transition:.13s}
.notif-tab:hover{color:var(--txt);background:var(--panel-3)}
.notif-tab.on{background:var(--green);color:#fff}
.notif-list{max-height:376px;overflow-y:auto}
.notif-item{display:flex;gap:11px;align-items:flex-start;padding:12px 16px;border-bottom:1px solid var(--line);
  border-left:2px solid transparent;cursor:pointer;position:relative;transition:background .15s,border-color .15s}
.notif-item:last-child{border-bottom:none}
.notif-item:hover{background:var(--panel-3)}
.notif-item.unread{background:rgba(34,160,109,.07);border-left-color:var(--green-2)}
.notif-ic{width:34px;height:34px;border-radius:10px;flex:none;display:flex;align-items:center;justify-content:center}
.notif-ic.update{background:rgba(34,160,109,.16);color:var(--green-2)}
.notif-ic.account{background:rgba(253,214,46,.16);color:var(--gold-2)}
.notif-ic.promo{background:rgba(124,124,255,.18);color:#8b8bff}
.notif-main{flex:1;min-width:0}
.notif-title{font-size:13px;font-weight:700;margin-bottom:2px}
.notif-text{font-size:12px;color:var(--txt-3);line-height:1.45}
.notif-time{font-size:10.5px;color:var(--txt-3);margin-top:4px}
.notif-dot{width:8px;height:8px;border-radius:50%;background:var(--green-2);flex:none;margin-top:6px}
.notif-empty{padding:36px 16px;text-align:center;color:var(--txt-3);font-size:12.5px}
.notif-foot{padding:12px 16px;border-top:1px solid var(--line)}
.notif-foot button{width:100%;font-size:12px;color:var(--green-2);font-weight:700;padding:8px 14px;border-radius:8px;
  background:var(--panel-3);border:1px solid var(--line);transition:.12s}
.notif-foot button:hover{border-color:var(--green-2)}