/* WarextMarket v0.615 - stable anchored notification panel */
/* WAREXT_V0615_NOTIFICATION_UI */

header.site-header .header-actions .notification-menu{
  position:relative!important;
}

header.site-header .header-actions .notification-menu > .notification-dropdown{
  position:absolute!important;
  top:calc(100% + 8px)!important;
  right:0!important;
  left:auto!important;
  bottom:auto!important;
  width:min(448px,calc(100vw - 24px))!important;
  max-width:min(448px,calc(100vw - 24px))!important;
  max-height:min(560px,calc(100dvh - 104px))!important;
  margin:0!important;
  padding:0!important;
  display:none!important;
  flex-direction:column!important;
  overflow:hidden!important;
  visibility:hidden!important;
  opacity:0!important;
  pointer-events:none!important;
  transform:none!important;
  transition:none!important;
  animation:none!important;
  contain:layout paint;
  border:1px solid rgba(103,117,190,.28)!important;
  border-radius:22px!important;
  background:
    radial-gradient(circle at 82% 0%,rgba(92,81,255,.08),transparent 34%),
    linear-gradient(180deg,rgba(14,18,39,.985),rgba(9,12,28,.99))!important;
  box-shadow:0 26px 70px rgba(0,0,0,.42)!important;
  z-index:2147483000!important;
}

header.site-header .header-actions .notification-menu.is-open > .notification-dropdown{
  display:flex!important;
  visibility:visible!important;
  opacity:1!important;
  pointer-events:auto!important;
  transform:none!important;
}

.notification-dropdown__header{
  flex:0 0 auto!important;
  min-height:58px!important;
  display:flex!important;
  align-items:center!important;
  padding:0 18px!important;
  border-bottom:1px solid rgba(104,117,184,.16)!important;
  color:#f5f6ff!important;
  font-size:14px!important;
  font-weight:900!important;
  letter-spacing:.08em!important;
}

.notification-dropdown__list{
  flex:1 1 auto!important;
  min-height:0!important;
  max-height:none!important;
  display:grid!important;
  align-content:start!important;
  gap:7px!important;
  padding:10px 10px 8px!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:rgba(116,128,184,.46) transparent;
}
.notification-dropdown__list::-webkit-scrollbar{width:5px}
.notification-dropdown__list::-webkit-scrollbar-track{background:transparent}
.notification-dropdown__list::-webkit-scrollbar-thumb{border-radius:999px;background:rgba(116,128,184,.46)}

.notification-dropdown .notification-item{
  --notification-accent:124,131,255;
  position:relative!important;
  display:grid!important;
  grid-template-columns:40px minmax(0,1fr)!important;
  align-items:start!important;
  gap:11px!important;
  min-height:0!important;
  padding:12px 13px!important;
  overflow:hidden!important;
  border:1px solid rgba(91,105,166,.15)!important;
  border-radius:16px!important;
  background:rgba(18,23,48,.58)!important;
  color:inherit!important;
  text-decoration:none!important;
  transform:none!important;
  animation:none!important;
  transition:border-color .16s ease,background .16s ease,box-shadow .16s ease,opacity .16s ease!important;
}
.notification-dropdown .notification-item::before{
  content:"";
  position:absolute;
  inset:8px auto 8px 0;
  width:3px;
  border-radius:0 999px 999px 0;
  background:rgba(var(--notification-accent),.88);
  opacity:0;
  transform:scaleY(.55);
  transition:opacity .16s ease,transform .16s ease;
}
.notification-dropdown .notification-item.is-unread{
  border-color:rgba(var(--notification-accent),.30)!important;
  background:linear-gradient(90deg,rgba(var(--notification-accent),.075),transparent 44%),rgba(19,25,52,.76)!important;
  box-shadow:inset 0 0 0 1px rgba(var(--notification-accent),.035)!important;
}
.notification-dropdown .notification-item.is-unread::before{opacity:1;transform:scaleY(1)}
.notification-dropdown .notification-item.is-unread::after{
  content:"";
  position:absolute;
  top:12px;
  right:12px;
  width:7px;
  height:7px;
  border-radius:50%;
  background:rgb(var(--notification-accent));
  box-shadow:0 0 0 4px rgba(var(--notification-accent),.10);
}
.notification-dropdown .notification-item.is-read{opacity:.82}
.notification-dropdown .notification-item:hover,
.notification-dropdown .notification-item:focus-visible{
  transform:none!important;
  border-color:rgba(var(--notification-accent),.42)!important;
  background:linear-gradient(90deg,rgba(var(--notification-accent),.09),transparent 54%),rgba(24,30,59,.86)!important;
  box-shadow:0 10px 24px rgba(0,0,0,.16)!important;
  outline:none;
}

.notification-item__type-icon{
  display:grid!important;
  width:40px!important;
  height:40px!important;
  place-items:center!important;
  align-self:start!important;
  flex:0 0 40px!important;
  border:1px solid rgba(var(--notification-accent),.30)!important;
  border-radius:12px!important;
  background:linear-gradient(145deg,rgba(var(--notification-accent),.18),rgba(var(--notification-accent),.07))!important;
  color:rgb(var(--notification-accent))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035)!important;
}
.notification-item__type-icon svg{
  width:20px!important;
  height:20px!important;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:1.8!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}

.notification-dropdown .notification-item__body{
  min-width:0!important;
  padding:1px 14px 0 0!important;
}
.notification-dropdown .notification-item__head{
  display:flex!important;
  align-items:baseline!important;
  justify-content:space-between!important;
  gap:10px!important;
  min-width:0!important;
}
.notification-dropdown .notification-item__head strong{
  display:block!important;
  flex:1 1 auto!important;
  min-width:0!important;
  margin:0!important;
  overflow:hidden!important;
  color:#f1f3ff!important;
  font-size:13.5px!important;
  font-weight:850!important;
  line-height:1.28!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
.notification-dropdown .notification-item__head .notification-item__time{
  flex:0 0 auto!important;
  margin:0!important;
  color:rgba(183,191,220,.60)!important;
  font-size:10.8px!important;
  font-weight:700!important;
  line-height:1.25!important;
  white-space:nowrap!important;
}
.notification-dropdown .notification-item__body > p{
  display:-webkit-box!important;
  margin:4px 0 0!important;
  overflow:hidden!important;
  color:rgba(211,217,239,.74)!important;
  font-size:12.5px!important;
  font-weight:550!important;
  line-height:1.38!important;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}
.notification-item--grouped .notification-item__body > p{-webkit-line-clamp:3}
.notification-item__meta{
  display:flex!important;
  align-items:center!important;
  flex-wrap:wrap!important;
  gap:5px 8px!important;
  margin-top:6px!important;
}
.notification-dropdown .notification-item__sender{
  margin:0!important;
  color:rgba(203,210,235,.66)!important;
  font-size:10.8px!important;
  font-weight:650!important;
  line-height:1.25!important;
}

.notification-item[data-notification-kind="medal"],
.notifications-page__item[data-notification-kind="medal"]{--notification-accent:242,180,68}
.notification-item[data-notification-kind="order"],
.notifications-page__item[data-notification-kind="order"]{--notification-accent:70,208,142}
.notification-item[data-notification-kind="support"],
.notifications-page__item[data-notification-kind="support"]{--notification-accent:67,184,235}
.notification-item[data-notification-kind="review"],
.notifications-page__item[data-notification-kind="review"]{--notification-accent:178,109,255}
.notification-item[data-notification-kind="wallet"],
.notifications-page__item[data-notification-kind="wallet"]{--notification-accent:255,160,72}
.notification-item[data-notification-kind="follow"],
.notifications-page__item[data-notification-kind="follow"]{--notification-accent:85,153,255}
.notification-item[data-notification-kind="security"],
.notifications-page__item[data-notification-kind="security"]{--notification-accent:246,100,120}
.notification-item[data-notification-kind="chat"],
.notifications-page__item[data-notification-kind="chat"]{--notification-accent:132,116,255}
.notification-item[data-notification-kind="default"],
.notifications-page__item[data-notification-kind="default"]{--notification-accent:124,131,255}

.notification-dropdown__footer{
  flex:0 0 auto!important;
  position:relative!important;
  z-index:3!important;
}
.notification-dropdown__footer--dual{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:8px!important;
  padding:10px!important;
  border-top:1px solid rgba(101,114,180,.14)!important;
  background:rgba(8,11,25,.58)!important;
}
.notification-dropdown .notification-footer-btn{
  min-height:38px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:8px 12px!important;
  border:1px solid rgba(106,121,192,.25)!important;
  border-radius:11px!important;
  background:rgba(19,25,52,.80)!important;
  color:#eef0fb!important;
  font-size:12.5px!important;
  font-weight:800!important;
  line-height:1!important;
  text-decoration:none!important;
}
.notification-dropdown .notification-footer-btn:hover{
  border-color:rgba(127,117,255,.45)!important;
  background:rgba(29,35,67,.92)!important;
}

.notification-empty-state{
  display:grid!important;
  place-items:center!important;
  gap:7px!important;
  min-height:180px!important;
  padding:26px!important;
  text-align:center!important;
  color:rgba(211,217,239,.74)!important;
}
.notification-empty-state__icon{font-size:28px!important}
.notification-empty-state strong{color:#f1f3ff!important}
.notification-empty-state p{margin:0!important;font-size:12.5px!important}

/* Full notifications page remains compatible with the same visual language. */
.notifications-page__list{display:grid!important;gap:10px!important}
.notifications-page__item{
  --notification-accent:124,131,255;
  position:relative!important;
  display:grid!important;
  grid-template-columns:46px minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:14px!important;
  padding:15px 16px!important;
  overflow:hidden!important;
  border:1px solid rgba(91,105,166,.16)!important;
  border-radius:17px!important;
  background:rgba(16,21,45,.60)!important;
}
.notifications-page__item::before{
  content:"";
  position:absolute;
  inset:9px auto 9px 0;
  width:3px;
  border-radius:0 999px 999px 0;
  background:rgba(var(--notification-accent),.9);
  opacity:0;
}
.notifications-page__item.is-unread{
  border-color:rgba(var(--notification-accent),.30)!important;
  background:linear-gradient(90deg,rgba(var(--notification-accent),.065),transparent 48%),rgba(18,24,51,.74)!important;
}
.notifications-page__item.is-unread::before{opacity:1}
.notifications-page__item.is-read{opacity:.86}
.notifications-page__item > .notification-item__type-icon{width:46px!important;height:46px!important;border-radius:13px!important}
.notifications-page__item-main{min-width:0!important}
.notifications-page__item-head{display:flex!important;align-items:baseline!important;justify-content:space-between!important;gap:16px!important}
.notifications-page__item-head strong{color:#f4f5ff!important;font-size:14px!important;font-weight:850!important}
.notifications-page__item-head small,
.notifications-page__sender{color:rgba(183,191,220,.60)!important;font-size:11px!important;font-weight:650!important}
.notifications-page__item-main > p{margin:5px 0 0!important;color:rgba(211,217,239,.76)!important;font-size:13px!important;line-height:1.45!important}
.notifications-page__item-side{display:flex!important;align-items:center!important;gap:8px!important}

@media(max-width:640px){
  header.site-header .header-actions .notification-menu > .notification-dropdown{
    width:min(420px,calc(100vw - 12px))!important;
    max-width:min(420px,calc(100vw - 12px))!important;
    right:-6px!important;
    border-radius:18px!important;
  }
  .notification-dropdown__header{min-height:52px!important;padding:0 14px!important}
  .notification-dropdown__list{gap:6px!important;padding:8px!important}
  .notification-dropdown .notification-item{grid-template-columns:36px minmax(0,1fr)!important;gap:9px!important;padding:10px 11px!important;border-radius:14px!important}
  .notification-item__type-icon{width:36px!important;height:36px!important;border-radius:11px!important}
  .notification-item__type-icon svg{width:18px!important;height:18px!important}
  .notification-dropdown .notification-item__head{gap:7px!important}
  .notification-dropdown .notification-item__head strong{font-size:12.8px!important}
  .notification-dropdown .notification-item__head .notification-item__time{font-size:10px!important}
  .notification-dropdown .notification-item__body > p{font-size:11.8px!important}
  .notification-dropdown__footer--dual{gap:6px!important;padding:8px!important}
  .notification-dropdown .notification-footer-btn{min-height:36px!important;font-size:12px!important}
  .notifications-page__item{grid-template-columns:40px minmax(0,1fr)!important;align-items:start!important;gap:10px!important;padding:12px!important}
  .notifications-page__item > .notification-item__type-icon{width:40px!important;height:40px!important}
  .notifications-page__item-side{grid-column:2;flex-wrap:wrap}
  .notifications-page__item-head{align-items:flex-start!important;flex-direction:column!important;gap:3px!important}
}

@media(prefers-reduced-motion:reduce){
  .notification-dropdown *,
  .notifications-page__item{transition:none!important;animation:none!important}
}

/* WarextMarket v0.616 - notification stacking / clipping fix */
/* WAREXT_V0616_NOTIFICATION_STACKING */
header.site-header{
  overflow:visible!important;
  z-index:12000!important;
}
header.site-header .header-actions{
  position:relative!important;
  overflow:visible!important;
  z-index:12010!important;
}
header.site-header .notification-menu,
header.site-header .notification-menu.is-open{
  position:relative!important;
  overflow:visible!important;
  z-index:12020!important;
}

/* WAREXT_V0689_NOTIFICATION_READABILITY */
header.site-header .header-actions .notification-menu > .notification-dropdown{
  width:min(520px,calc(100vw - 24px))!important;
  max-width:min(520px,calc(100vw - 24px))!important;
  max-height:min(680px,calc(100dvh - 104px))!important;
}
.notification-dropdown__list{
  gap:10px!important;
  padding:12px!important;
}
.notification-dropdown .notification-item{
  grid-template-columns:46px minmax(0,1fr)!important;
  gap:13px!important;
  width:100%!important;
  height:auto!important;
  min-height:88px!important;
  max-height:none!important;
  padding:14px 15px!important;
  align-items:start!important;
}
.notification-dropdown .notification-item__type-icon{
  width:46px!important;
  height:46px!important;
  flex-basis:46px!important;
  border-radius:13px!important;
}
.notification-dropdown .notification-item__type-icon svg{
  width:22px!important;
  height:22px!important;
}
.notification-dropdown .notification-item__body{
  display:grid!important;
  gap:6px!important;
  min-width:0!important;
  padding:0 18px 0 0!important;
  overflow:visible!important;
}
.notification-dropdown .notification-item__head{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:start!important;
  gap:10px 12px!important;
  min-width:0!important;
}
.notification-dropdown .notification-item__head strong{
  display:block!important;
  min-width:0!important;
  margin:0!important;
  overflow:visible!important;
  color:#f5f6ff!important;
  font-size:14px!important;
  font-weight:850!important;
  line-height:1.35!important;
  text-overflow:clip!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
}
.notification-dropdown .notification-item__head .notification-item__time{
  align-self:start!important;
  margin:1px 0 0!important;
  color:rgba(198,205,232,.68)!important;
  font-size:11px!important;
  line-height:1.3!important;
}
.notification-dropdown .notification-item__body > p{
  display:-webkit-box!important;
  margin:0!important;
  overflow:hidden!important;
  color:rgba(225,229,245,.80)!important;
  font-size:12.8px!important;
  font-weight:550!important;
  line-height:1.48!important;
  -webkit-box-orient:vertical!important;
  -webkit-line-clamp:2!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
}
.notification-dropdown .notification-item--grouped .notification-item__body > p{
  -webkit-line-clamp:3!important;
}
.notification-dropdown .notification-item__meta{
  margin-top:0!important;
}
.notification-dropdown .notification-item.is-unread::after{
  top:14px!important;
  right:14px!important;
}
.notification-dropdown__footer--dual{
  padding:11px 12px 12px!important;
  gap:10px!important;
}
.notification-dropdown .notification-footer-btn{
  min-height:42px!important;
  border-radius:12px!important;
  font-size:12.8px!important;
}
@media(max-width:640px){
  header.site-header .header-actions .notification-menu > .notification-dropdown{
    width:min(440px,calc(100vw - 12px))!important;
    max-width:min(440px,calc(100vw - 12px))!important;
  }
  .notification-dropdown .notification-item{
    grid-template-columns:40px minmax(0,1fr)!important;
    gap:10px!important;
    min-height:82px!important;
    padding:12px!important;
  }
  .notification-dropdown .notification-item__type-icon{
    width:40px!important;
    height:40px!important;
    flex-basis:40px!important;
  }
  .notification-dropdown .notification-item__head{
    grid-template-columns:1fr!important;
    gap:2px!important;
  }
  .notification-dropdown .notification-item__head .notification-item__time{
    white-space:normal!important;
  }
  .notification-dropdown .notification-item__body{
    padding-right:14px!important;
  }
}