/* Compact notification dropdown: unread items only, without increasing page height. */
.account-notifications {
  position: relative;
  z-index: 20;
  margin: 18px 0 26px;
}
.account-notifications-dropdown { position: relative; display: inline-block; max-width: 100%; }
.account-notifications-trigger {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 9px 15px;
  border: 1px solid #dce5db;
  border-radius: 14px;
  background: #fffefa;
  color: #173f32;
  box-shadow: 0 5px 16px rgba(23, 63, 50, .05);
  cursor: pointer;
  list-style: none;
  font-weight: 750;
  user-select: none;
}
.account-notifications-trigger::-webkit-details-marker { display: none; }
.account-notifications-trigger::marker { content: ""; }
.account-notifications-trigger:hover { border-color: #aac5ae; background: #fff; }
.account-notifications-bell { width: 19px; height: 19px; flex: 0 0 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.account-notification-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: #dcecdf;
  color: #173f32;
  font-size: 12px;
  line-height: 1;
  font-weight: 800;
}
.account-notifications-chevron { margin-left: 1px; color: #6c7d71; transition: transform .16s ease; }
.account-notifications-dropdown[open] .account-notifications-chevron { transform: rotate(180deg); }
.account-notifications-panel {
  position: absolute;
  z-index: 100;
  top: calc(100% + 8px);
  left: 0;
  width: min(620px, calc(100vw - 48px));
  max-height: min(450px, calc(100vh - 120px));
  overflow: auto;
  overscroll-behavior: contain;
  padding: 14px;
  border: 1px solid #dfe7dc;
  border-radius: 16px;
  background: #fffefa;
  box-shadow: 0 18px 42px rgba(23, 47, 35, .18);
}
.account-notifications-panel-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin: 0 0 12px;
  padding: 2px 2px 11px;
  border-bottom: 1px solid #e9eee6;
}
.account-notifications-panel-heading > div { display: grid; gap: 3px; }
.account-notifications-panel-heading strong { color: #173f32; font-size: 16px; }
.account-notifications-panel-heading span { color: #728075; font-size: 12px; }
.account-notifications-mark-all {
  border: 0;
  padding: 4px 0;
  background: transparent;
  color: #245843;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  text-align: right;
}
.account-notifications-mark-all:hover { text-decoration: underline; }
.account-notification-list { display: grid; gap: 8px; }
.account-notification {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
  padding: 11px;
  border: 1px solid #e0e9de;
  border-radius: 12px;
  background: #f8faf6;
}
.account-notification-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 29px;
  height: 29px;
  border-radius: 50%;
  background: #e5eee4;
  color: #245843;
  font-weight: 800;
}
.account-notification-content { min-width: 0; }
.account-notification-title { display: inline-block; color: #173f32; font-weight: 750; text-decoration: none; }
.account-notification-title:hover { text-decoration: underline; }
.account-notification-content p { margin: 4px 0 5px; color: #536158; font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }
.account-notification-content time { color: #7e8980; font-size: 11px; }
.account-notification-action { align-self: center; }
.account-notification-action .link-button { color: #245843; font-size: 12px; white-space: nowrap; }
.account-notifications-more { margin: 10px 2px 0; color: #728075; font-size: 12px; line-height: 1.45; }
.account-notifications-empty { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 10px; background: #f5f7f2; color: #667268; }
.account-notifications-empty > span { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 27px; width: 27px; height: 27px; border-radius: 50%; background: #e5eee4; color: #245843; font-weight: 800; }
.account-notifications-empty p { margin: 0; font-size: 13px; line-height: 1.45; }
@media (max-width: 640px) {
  .account-notifications { margin: 14px 0 22px; }
  .account-notifications-panel { width: min(620px, calc(100vw - 40px)); max-height: min(430px, calc(100vh - 100px)); padding: 10px; }
  .account-notifications-panel-heading { align-items: flex-start; }
  .account-notification { grid-template-columns: 28px minmax(0, 1fr); padding: 10px; gap: 8px; }
  .account-notification-mark { width: 27px; height: 27px; }
  .account-notification-action { grid-column: 2; justify-self: start; }
  .account-notifications-more { font-size: 11px; }
}


/* Site-wide header bell: compact trigger with a floating, scrollable panel. */
.header-notifications {
  position: relative;
  z-index: 30;
  margin: 0;
  flex: 0 0 auto;
}
.header-notifications-dropdown { display: block; width: auto; }
.header-notifications-trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 8px;
  gap: 0;
  border-radius: 12px;
  box-shadow: none;
  background: transparent;
}
.header-notifications-trigger:hover { background: #f1f4ef; }
.header-notifications-trigger .account-notifications-bell { width: 21px; height: 21px; }
.header-notification-count {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding-inline: 4px;
  border: 2px solid #fffefa;
  font-size: 10px;
}
.header-notifications-panel {
  left: auto;
  right: 0;
  width: min(440px, calc(100vw - 32px));
  max-height: min(460px, calc(100vh - 100px));
}
.header-notifications-panel .account-notification { grid-template-columns: 30px minmax(0, 1fr) auto; }
.header-notifications-panel .account-notification-action { grid-column: auto; }
@media (max-width: 720px) {
  .header-notifications-panel {
    right: -40px;
    width: min(420px, calc(100vw - 32px));
    max-height: min(430px, calc(100vh - 100px));
  }
}
@media (max-width: 420px) {
  .header-notifications-panel .account-notification { grid-template-columns: 27px minmax(0, 1fr); }
  .header-notifications-panel .account-notification-action { grid-column: 2; justify-self: start; }
}

/* Compact inbox link next to the notification bell. */
.header-messages-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 42px;
  min-width: 42px;
  min-height: 42px;
  padding: 8px;
  border: 1px solid #dce5db;
  border-radius: 13px;
  background: #fffefa;
  color: #173f32;
  text-decoration: none;
  font-size: 13px;
  line-height: 1.1;
  font-weight: 750;
  white-space: nowrap;
}
.header-messages-link:hover { background: #fff; border-color: #aac5ae; }
.header-messages-label { display: none; }
.header-messages-link svg { width: 19px; height: 19px; flex: 0 0 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.header-messages-count {
  position: absolute;
  top: -6px;
  right: -6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: #b64132;
  color: white;
  font-size: 11px;
  font-weight: 800;
}
@media (max-width: 1120px) {
  .header-messages-label { display: none; }
  .header-messages-link { width: 42px; min-width: 42px; padding: 8px; }
  .header-messages-count { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 4px; }
}