#notification .notification-number:empty {
  display: none;
}

#notification {
  display: block;
  position: relative;
  margin-right: 1rem;
}
@media (max-width: 798px) {
  #notification {
    margin-right: 0;
  }
}

#notification[data-notifications]:not([data-notifications=""]) .fa-bell {
  color: #f6811b;
}

#notification .fa-bell {
  position: relative;
  font-size: 1.7rem;
}

#notification .notification-number {
  position: absolute;
  z-index: 1;
  bottom: 1.1rem;
  right: 1.2rem;
}

#notification .badge-warning {
  color: #ffffff;
  background-color: #b500c9;
  text-transform: uppercase;
  font-weight: 700;
  padding: 3px 4px;
  font-size: 14px !important;
  border-radius: 10px;
}

/* Notification center: soft cards, readable text and a floating sheet. */
#offcanvasWithBothOptionsNoticacao {
  top: 8px;
  right: 8px;
  bottom: max(8px, env(safe-area-inset-bottom));
  width: 440px;
  max-width: calc(100% - 16px);
  height: auto;
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 28px;
  background: linear-gradient(160deg, #f4f0fc, #f4f5fa 55%, #edeaf5);
  box-shadow: 0 16px 60px rgba(41,24,64,.2);
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #252331;
}
#offcanvasWithBothOptionsNoticacao .offcanvas-header {
  flex-shrink: 0;
  padding: 22px 18px 18px;
  gap: 12px;
}
#offcanvasWithBothOptionsNoticacao .offcanvas-title {
  margin: 0;
  font: 700 24px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: -.6px;
  text-transform: lowercase;
  color: #252331;
  background: none;
  -webkit-text-fill-color: currentColor;
}
#offcanvasWithBothOptionsNoticacao .offcanvas-title::first-letter { text-transform: uppercase; }
#offcanvasWithBothOptionsNoticacao .btn-close {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border-radius: 50%;
  background-color: rgba(116,105,135,.09);
  background-size: 12px;
  opacity: .8;
}
#offcanvasWithBothOptionsNoticacao .btn-close:focus-visible { outline: 2px solid #9926f0; outline-offset: 2px; box-shadow: none; }
#offcanvasWithBothOptionsNoticacao .offcanvas-body { padding: 0 12px 20px; overscroll-behavior: contain; }
#offcanvasWithBothOptionsNoticacao .results-list { display: flex; flex-direction: column; gap: 10px; }
#offcanvasWithBothOptionsNoticacao .results .entry {
  position: relative;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.95);
  border-radius: 22px;
  background: rgba(255,255,255,.85);
  box-shadow: 0 2px 8px rgba(46,28,75,.035);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: inherit;
  text-decoration: none;
  transition: background .18s, box-shadow .18s;
}
#offcanvasWithBothOptionsNoticacao .entry.is-unread { background: #fff; border-color: #e1d1f8; }
#offcanvasWithBothOptionsNoticacao a.entry:hover { background: #fff; box-shadow: 0 5px 18px rgba(80,37,120,.09); }
#offcanvasWithBothOptionsNoticacao a.entry:focus-visible { outline: 2px solid #9926f0; outline-offset: -2px; }
#offcanvasWithBothOptionsNoticacao .entry .icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: #f0e7fc;
  color: #8523d5;
  font-size: 17px;
}
#offcanvasWithBothOptionsNoticacao .entry.is-unread .icon { background: linear-gradient(145deg,#9926f0,#b52bea); color: #fff; }
#offcanvasWithBothOptionsNoticacao .entry .desc { min-width: 0; display: flex; flex-direction: column; gap: 5px; padding-top: 20px; }
#offcanvasWithBothOptionsNoticacao .entry .desc::before {
  content: 'SAUCEE';
  position: absolute;
  left: 62px;
  top: 14px;
  color: #74707f;
  font-size: 10px;
  font-weight: 600;
  line-height: 14px;
  letter-spacing: .8px;
}
#offcanvasWithBothOptionsNoticacao .entry .desc label { margin: 0; color: #252331; font-size: 15px; line-height: 1.3; font-weight: 600; overflow-wrap: anywhere; cursor: inherit; }
#offcanvasWithBothOptionsNoticacao .entry .desc span {
  color: #65616e;
  font-size: 14px;
  line-height: 1.45;
  font-weight: 400;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
#offcanvasWithBothOptionsNoticacao .entry .when { position: absolute; top: 14px; right: 14px; color: #817b8c; font-size: 10px; line-height: 14px; white-space: nowrap; }
#offcanvasWithBothOptionsNoticacao div.entry .desc span { display: block; -webkit-line-clamp: unset; overflow: visible; }
#offcanvasWithBothOptionsNoticacao .entry .badge { position: absolute; top: 18px; left: 118px; width: 6px; height: 6px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: #9926f0; }
#offcanvasWithBothOptionsNoticacao .entry .badge i { display: none; }
#offcanvasWithBothOptionsNoticacao .notnotifications { margin: 0; padding: 36px 20px !important; min-height: 230px; gap: 16px; border-radius: 22px; background: rgba(255,255,255,.7); text-align: center; }
#offcanvasWithBothOptionsNoticacao .notnotifications[hidden] { display: none !important; }
#offcanvasWithBothOptionsNoticacao .notnotifications h3 { margin: 0; color: #a46bcf; }
#offcanvasWithBothOptionsNoticacao .notnotifications p { margin: 0; color: #767080; font-size: 15px; line-height: 1.5; font-weight: 400; }
@media (prefers-reduced-motion: reduce) {
  #offcanvasWithBothOptionsNoticacao, #offcanvasWithBothOptionsNoticacao .entry { transition: none; }
}

/* Notification actions sit beside the card link, never inside it. */
#offcanvasWithBothOptionsNoticacao .notification-toolbar { display: flex; justify-content: flex-end; padding: 0 16px 10px; flex-shrink: 0; }
#offcanvasWithBothOptionsNoticacao #notification-delete-all { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px; border: 1px solid #e5d9f3; border-radius: 16px; background: rgba(255,255,255,.8); color: #7927bd; font: 600 13px/1.4 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
#offcanvasWithBothOptionsNoticacao .notification-card { position: relative; min-width: 0; }
#offcanvasWithBothOptionsNoticacao .notification-card .entry { padding-bottom: 52px; }
#offcanvasWithBothOptionsNoticacao .notification-delete { position: absolute; right: 8px; bottom: 6px; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: #f4edf9; color: #8125c7; font-size: 16px; }
#offcanvasWithBothOptionsNoticacao :is(.notification-delete, #notification-delete-all):hover { background: #eee1f9; }
#offcanvasWithBothOptionsNoticacao :is(.notification-delete, #notification-delete-all):focus-visible { outline: 2px solid #9926f0; outline-offset: 2px; }
#offcanvasWithBothOptionsNoticacao :is(.notification-delete, #notification-delete-all):disabled { opacity: .45; cursor: default; }
#offcanvasWithBothOptionsNoticacao #notification-error { margin: 0 12px 12px; padding: 12px; border-radius: 14px; background: #fff4cc; color: #6d4e00; font-size: 14px; }