.notification-button:hover{border-color:#ced4da;transform:translateY(-1px)}.notification-button .notification-icon{font-size:18px;transition:transform .2s ease-in-out}.notification-button:hover .notification-icon{transform:scale(1.05)}.notification-badge{position:absolute;top:16px;right:6px;background-color:#dc3545;color:#fff;border-radius:50%;min-width:18px;height:18px;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:600;border:1px solid #fff;box-shadow:0 1px 4px rgba(220,53,69,.2);animation:pulse 1.5s infinite}.notification-badge.hidden{display:none}.notification-dropdown{border:1px solid #e0e2e6;border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.1);background-color:#fff;overflow:hidden;min-width:320px;margin-top:6px}.notification-header{background-color:#f8f9fa;padding:12px 16px;border-bottom:1px solid #e9ecef;display:flex;justify-content:space-between;align-items:center}.notification-header h6{margin:0;color:#343a40;font-weight:600;font-size:15px}.mark-all-read-btn{color:#6c757d;text-decoration:none;font-weight:500;font-size:12px;padding:4px 10px;border-radius:16px;transition:all .2s ease-in-out;background-color:#e9ecef}.mark-all-read-btn:hover{background-color:#dee2e6;color:#495057;transform:translateY(-1px)}.notification-list-container{max-height:280px;padding:4px 0;overflow-y:auto}.no-notifications-message{text-align:center;padding:30px 16px;color:#888e96;font-size:13px;display:none}.no-notifications-icon{font-size:40px;color:#ced4da;margin-bottom:10px}.view-all-btn{background-color:#f8f9fa;color:#007bff;text-decoration:none;padding:12px 16px;display:flex;align-items:center;justify-content:center;font-weight:500;transition:all .2s ease-in-out;border-top:1px solid #e9ecef}.view-all-btn:hover{background-color:#e9ecef;color:#0056b3}.view-all-btn i{transition:transform .2s ease-in-out}.view-all-btn:hover i{transform:translateX(3px)}@keyframes bellFlash{0%,100%{transform:rotate(0)scale(1)}15%{transform:rotate(15deg)scale(1.5)}30%{transform:rotate(-15deg)scale(1.5)}45%{transform:rotate(10deg)scale(1.45)}60%{transform:rotate(-10deg)scale(1.45)}75%{transform:rotate(5deg)scale(1.42)}90%{transform:rotate(-5deg)scale(1.42)}}.notification-bell-flash{animation:bellFlash .8s ease-in-out;animation-iteration-count:3}@keyframes pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.1);opacity:.8}100%{transform:scale(1);opacity:1}}