.notification-bell-wrapper{position:relative}.notification-bell-wrapper .notification-bell-icon{align-items:center;cursor:pointer;display:flex;justify-content:center;position:relative}.notification-bell-wrapper .notification-indicator{transition:opacity .3s ease}.notification-bell-wrapper .notification-indicator.hidden{opacity:0}.notification-bell-wrapper .notification-badge{background-color:#ffa000;border-radius:10px;box-shadow:0 2px 4px rgba(0,0,0,.2);color:#fff;font-size:11px;font-weight:600;line-height:1.2;min-width:18px;padding:2px 6px;position:absolute;right:-8px;text-align:center;top:-5px;transition:opacity .3s ease}.notification-bell-wrapper .notification-badge.hidden{display:none}.notification-dropdown{background-color:#fff;border:1px solid #eee;border-radius:8px;box-shadow:0 5px 15px rgba(0,0,0,.1);display:none;margin-top:10px;overflow:hidden;position:absolute;right:0;top:100%;width:420px;z-index:1001}.notification-dropdown.active{display:block}.notification-dropdown .notification-header{align-items:center;border-bottom:1px solid #eee;display:flex;justify-content:space-between;padding:0 15px}.notification-dropdown .notification-header h4{color:#333;font-size:16px;font-weight:600;margin:0}.notification-dropdown .notification-header h4 .notification-count{color:#666;font-weight:400}.notification-dropdown .notification-header .mark-all-read{color:#ed1c24;font-size:14px;text-decoration:none}.notification-dropdown .notification-header .mark-all-read:hover{text-decoration:underline}.notification-dropdown .notification-list{max-height:580px;overflow-y:auto}.notification-dropdown .notification-list .notification-item{align-items:center;display:flex;gap:12px;padding:12px;position:relative;text-decoration:none;transition:background-color .2s ease}.notification-dropdown .notification-list .notification-item:hover{background-color:#f9f9f9}.notification-dropdown .notification-list .notification-item.unread{background-color:#fafafa}.notification-dropdown .notification-list .notification-item.unread .notification-content .notification-date{padding-right:18px;position:relative}.notification-dropdown .notification-list .notification-item.unread .notification-content .notification-date:after{background-color:#ff9500;border-radius:50%;content:"";height:8px;position:absolute;right:0;top:50%;transform:translateY(-50%);width:8px}.notification-dropdown .notification-list .notification-item:not(.unread) .notification-content{filter:blur(.4px);opacity:.6}.notification-dropdown .notification-list .notification-item:not(.unread) .notification-content .notification-date{color:#bbb}.notification-dropdown .notification-list .notification-item:not(.unread) .notification-content .notification-title{color:#999;font-weight:400}.notification-dropdown .notification-list .notification-item:not(.unread) .notification-content .notification-description{color:#bbb}.notification-dropdown .notification-list .notification-item:last-child{border-bottom:none}.notification-dropdown .notification-list .notification-item .notification-image{border-radius:8px;flex-shrink:0;height:80px;overflow:hidden;width:120px}.notification-dropdown .notification-list .notification-item .notification-image img{border-radius:8px;height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.notification-dropdown .notification-list .notification-item .notification-content{flex:1;min-width:0;padding:0}.notification-dropdown .notification-list .notification-item .notification-content .notification-date{color:#999;font-size:11px;margin-bottom:4px}.notification-dropdown .notification-list .notification-item .notification-content .notification-title{-webkit-line-clamp:2;-webkit-box-orient:vertical;color:#333;display:-webkit-box;font-size:14px;font-weight:500;line-height:1.4;margin:0 0 4px;overflow:hidden;text-overflow:ellipsis}.notification-dropdown .notification-list .notification-item .notification-content .notification-description{-webkit-line-clamp:1;-webkit-box-orient:vertical;color:#666;display:-webkit-box;font-size:12px;line-height:1.4;margin:0;overflow:hidden;text-overflow:ellipsis}.notification-dropdown .notification-list .notification-item-selected{border-left:3px solid #ed1c24}.notification-dropdown-overlay{background-color:rgba(56,56,56,.8);display:none;height:100%;left:0;position:fixed;top:0;width:100%;z-index:5}.notification-dropdown-overlay.active{display:block}.notification-container{align-items:center;background-color:rgba(0,0,0,.5);display:flex;height:100%;justify-content:center;left:0;overflow:auto;position:fixed;top:0;width:100%;z-index:9999}.notification-dialog{animation:notificationFadeIn .3s;background-color:#fff;border-radius:8px;box-shadow:0 5px 15px rgba(0,0,0,.3);display:flex;flex-direction:column;margin:0 auto;max-width:90%;padding:0;position:relative;width:800px}@keyframes notificationFadeIn{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}.notification-content{display:flex;flex-direction:column;height:100%;padding:20px;position:relative}.btn-close{align-items:center;background-color:#fff;border:0;border-radius:50%;box-shadow:0 2px 8px rgba(0,0,0,.15);color:#ed1c24;cursor:pointer;display:flex;font-size:20px;height:40px;justify-content:center;padding:0;position:absolute;right:-15px;top:-15px;transition:all .2s ease;width:40px;z-index:10}.btn-close:hover{background-color:#f5f5f5;box-shadow:0 2px 12px rgba(0,0,0,.2);color:#ed1c24}.btn-close .icon{margin:0}.notification-image{max-height:480px;overflow:hidden;width:100%}.notification-image img{border-radius:8px;height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.notification-text-content{display:flex;flex-direction:column}.notification-title{color:#333;font-size:20px;font-weight:600;line-height:1.2;margin:15px 0 10px}.notification-description{color:#666;font-size:14px;line-height:1.5;margin-bottom:20px}.notification-actions{margin-top:15px}.notification-btn{background-color:#ed1c24!important;border:none!important;border-radius:4px;color:#fff!important;display:inline-block;font-size:14px;font-weight:500;padding:8px 20px;text-decoration:none;text-transform:none}.notification-btn:hover{background-color:#de1219!important;color:#fff!important}.notification-footer{border-top:1px solid #e9ecef;margin-top:auto;padding:10px 20px}.notification-navigation{align-items:center;display:flex;justify-content:center}.notification-nav-btn{background:transparent;border:0;color:#ed1c24;cursor:pointer;font-size:14px;padding:5px 10px}.notification-nav-btn:disabled{color:#6c757d;cursor:not-allowed}.notification-counter{color:#6c757d;font-size:14px;margin:0 15px}@media(max-width:767px){.notification-bell-wrapper{margin-right:0}.notification-bell-wrapper .notification-badge{font-size:10px;min-width:16px;padding:1px 4px;right:-6px;top:-3px}.notification-dropdown{display:none;flex-direction:column;left:15px;margin-top:0;max-height:70vh;max-width:90vw;position:fixed;top:80px;transform:none;width:calc(100vw - 30px);z-index:100}.notification-dropdown.active{display:flex}.notification-dropdown .notification-header{padding:12px}.notification-dropdown .notification-header h4{font-size:14px}.notification-dropdown .notification-header .mark-all-read{font-size:12px}.notification-dropdown .notification-list{flex:1;max-height:calc(70vh - 60px);overflow-y:auto}.notification-dropdown .notification-list .notification-item{align-items:center;display:flex;gap:12px;padding:12px;position:relative;transition:background-color .2s ease}.notification-dropdown .notification-list .notification-item:hover{background-color:#f9f9f9}.notification-dropdown .notification-list .notification-item .notification-image{border-radius:8px;flex-shrink:0;height:80px;overflow:hidden;width:120px}.notification-dropdown .notification-list .notification-item .notification-image img{border-radius:8px;height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.notification-dropdown .notification-list .notification-item .notification-content{flex:1;min-width:0;padding:0}.notification-dropdown .notification-list .notification-item .notification-content .notification-date{color:#999;font-size:11px;margin-bottom:4px}.notification-dropdown .notification-list .notification-item .notification-content .notification-title{-webkit-line-clamp:2;-webkit-box-orient:vertical;color:#333;display:-webkit-box;font-size:14px;font-weight:500;line-height:1.4;overflow:hidden;text-overflow:ellipsis}.notification-dropdown .notification-list .notification-item .notification-content .notification-description{-webkit-line-clamp:1;-webkit-box-orient:vertical;color:#666;display:-webkit-box;font-size:12px;margin-top:4px;overflow:hidden;text-overflow:ellipsis}.notification-dropdown .notification-list .notification-item.unread{background-color:#fafafa}.notification-dropdown .notification-list .notification-item.unread .notification-content .notification-date{padding-right:18px;position:relative}.notification-dropdown .notification-list .notification-item.unread .notification-content .notification-date:after{background-color:#ff9500;border-radius:50%;content:"";height:8px;position:absolute;right:0;top:50%;transform:translateY(-50%);width:8px}.notification-dropdown .notification-list .notification-item:not(.unread) .notification-content{filter:blur(.4px);opacity:.6}.notification-dropdown .notification-list .notification-item:not(.unread) .notification-content .notification-date{color:#bbb}.notification-dropdown .notification-list .notification-item:not(.unread) .notification-content .notification-title{color:#999;font-weight:400}.notification-dropdown .notification-list .notification-item:not(.unread) .notification-content .notification-description{color:#bbb}.notification-dialog{max-width:95%;width:95%}.notification-text-content{padding:15px}.notification-title{font-size:18px}.notification-description{font-size:13px}.notification-btn{font-size:13px;padding:6px 16px}}@media(min-width:768px)and (max-width:1024px){.notification-bell-wrapper .notification-badge{font-size:10px;min-width:17px;padding:2px 5px;right:-7px;top:-4px}.notification-dropdown{display:none;flex-direction:column;margin-top:0;max-height:70vh;max-width:60vw;position:fixed;right:40px;top:80px;transform:none;width:calc(100vw - 30px);z-index:100}.notification-dropdown.active{display:flex}.notification-dropdown .notification-header{padding:13px}.notification-dropdown .notification-header h4{font-size:15px}.notification-dropdown .notification-header .mark-all-read{font-size:13px}.notification-dropdown .notification-list{flex:1;max-height:calc(70vh - 60px);overflow-y:auto}.notification-dropdown .notification-list .notification-item{align-items:center;display:flex;gap:12px;padding:12px;position:relative;transition:background-color .2s ease}.notification-dropdown .notification-list .notification-item:hover{background-color:#f9f9f9}.notification-dropdown .notification-list .notification-item .notification-image{border-radius:8px;flex-shrink:0;height:80px;overflow:hidden;width:120px}.notification-dropdown .notification-list .notification-item .notification-image img{border-radius:8px;height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.notification-dropdown .notification-list .notification-item .notification-content{flex:1;min-width:0;padding:0}.notification-dropdown .notification-list .notification-item .notification-content .notification-date{color:#999;font-size:11px;margin-bottom:4px}.notification-dropdown .notification-list .notification-item .notification-content .notification-title{-webkit-line-clamp:2;-webkit-box-orient:vertical;color:#333;display:-webkit-box;font-size:14px;font-weight:500;line-height:1.4;overflow:hidden;text-overflow:ellipsis}.notification-dropdown .notification-list .notification-item .notification-content .notification-description{-webkit-line-clamp:1;-webkit-box-orient:vertical;color:#666;display:-webkit-box;font-size:12px;margin-top:4px;overflow:hidden;text-overflow:ellipsis}.notification-dropdown .notification-list .notification-item.unread{background-color:#fafafa}.notification-dropdown .notification-list .notification-item.unread .notification-content .notification-date{padding-right:18px;position:relative}.notification-dropdown .notification-list .notification-item.unread .notification-content .notification-date:after{background-color:#ff9500;border-radius:50%;content:"";height:8px;position:absolute;right:0;top:50%;transform:translateY(-50%);width:8px}.notification-dropdown .notification-list .notification-item:not(.unread) .notification-content{filter:blur(.4px);opacity:.6}.notification-dropdown .notification-list .notification-item:not(.unread) .notification-content .notification-date{color:#bbb}.notification-dropdown .notification-list .notification-item:not(.unread) .notification-content .notification-title{color:#999;font-weight:400}.notification-dropdown .notification-list .notification-item:not(.unread) .notification-content .notification-description{color:#bbb}.notification-dialog{max-width:700px;width:90%}.notification-text-content{padding:18px 25px}.notification-title{font-size:19px}.notification-description{font-size:13px}}@media(min-width:1025px){.notification-dropdown .notification-list::-webkit-scrollbar{width:6px}.notification-dropdown .notification-list::-webkit-scrollbar-track{background:#f1f1f1;border-radius:10px}.notification-dropdown .notification-list::-webkit-scrollbar-thumb{background:#ccc;border-radius:10px}.notification-dropdown .notification-list::-webkit-scrollbar-thumb:hover{background:#999}}@media(min-width:1440px){.notification-dropdown{width:460px}.notification-dropdown .notification-list{max-height:620px}.notification-dialog{width:900px}}