/* Sormatch Header Gradient + Mobile Notification Badge Fix v4 */

:root{
  --sm-pink:#ff47d8;
  --sm-purple:#a855f7;
  --sm-blue:#59b7ff;
  --sm-dark:#050914;
}

/* Header layout: left spacer + centered logo + right actions */
.sm-pro-topbar{
  position:sticky!important;
  top:0!important;
  z-index:99980!important;
  height:76px!important;
  padding:0 18px!important;
  display:grid!important;
  grid-template-columns:1fr auto 1fr!important;
  align-items:center!important;
  border-bottom:1px solid rgba(255,255,255,.08)!important;
  background:rgba(5,9,20,.72)!important;
  backdrop-filter:blur(26px)!important;
}

.sm-pro-left-spacer{
  min-width:1px!important;
}

/* EXACT requested: pink/purple gradient moving right-to-left inside Sormatch text */
.sm-pro-logo,
.sm-logo-animated{
  position:relative!important;
  left:auto!important;
  transform:none!important;
  justify-self:center!important;
  display:inline-block!important;
  font-size:30px!important;
  line-height:1!important;
  font-weight:1000!important;
  letter-spacing:-1.4px!important;
  text-decoration:none!important;
  white-space:nowrap!important;
  color:transparent!important;
  -webkit-text-fill-color:transparent!important;
  background:
    linear-gradient(90deg,
      #ffffff 0%,
      #ffffff 32%,
      var(--sm-pink) 44%,
      var(--sm-purple) 54%,
      var(--sm-pink) 64%,
      #ffffff 76%,
      #ffffff 100%)!important;
  background-size:260% 100%!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  animation:smLogoSweepRTL 2.2s linear infinite!important;
  text-shadow:0 0 24px rgba(255,71,216,.20)!important;
}

@keyframes smLogoSweepRTL{
  0%{background-position:160% 0}
  100%{background-position:-160% 0}
}

.sm-pro-top-actions{
  justify-self:end!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:10px!important;
  min-width:0!important;
  overflow:visible!important;
}

.sm-top-circle{
  position:relative!important;
  width:48px!important;
  height:48px!important;
  min-width:48px!important;
  border-radius:999px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  color:#fff!important;
  text-decoration:none!important;
  background:rgba(255,255,255,.12)!important;
  border:1px solid rgba(255,255,255,.16)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 10px 28px rgba(0,0,0,.18)!important;
  backdrop-filter:blur(18px)!important;
  opacity:1!important;
  visibility:visible!important;
}

.sm-top-circle svg{
  width:23px!important;
  height:23px!important;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:2.15!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}

.sm-count-wrap{
  overflow:visible!important;
}

.sm-live-badge{
  position:absolute!important;
  top:-6px!important;
  right:-6px!important;
  min-width:20px!important;
  height:20px!important;
  padding:0 6px!important;
  border-radius:999px!important;
  background:linear-gradient(135deg,#ff2f6d,#ff47d8)!important;
  color:#fff!important;
  font-size:11px!important;
  font-weight:1000!important;
  display:none;
  align-items:center!important;
  justify-content:center!important;
  border:2px solid #050914!important;
  box-shadow:0 0 18px rgba(255,71,216,.55)!important;
  z-index:999999!important;
}

/* Mobile: keep all 3 buttons visible */
@media(max-width:640px){
  .sm-pro-topbar{
    height:68px!important;
    padding:0 10px!important;
    grid-template-columns:44px 1fr auto!important;
  }

  .sm-pro-logo,
  .sm-logo-animated{
    font-size:25px!important;
    justify-self:center!important;
    max-width:160px!important;
  }

  .sm-pro-top-actions{
    gap:7px!important;
  }

  .sm-top-circle{
    width:40px!important;
    height:40px!important;
    min-width:40px!important;
  }

  .sm-top-circle svg{
    width:20px!important;
    height:20px!important;
  }

  .sm-live-badge{
    top:-7px!important;
    right:-7px!important;
    min-width:19px!important;
    height:19px!important;
    font-size:10px!important;
  }
}

@media(max-width:390px){
  .sm-pro-topbar{
    padding:0 8px!important;
    grid-template-columns:26px 1fr auto!important;
  }

  .sm-pro-logo,
  .sm-logo-animated{
    font-size:23px!important;
  }

  .sm-pro-top-actions{
    gap:5px!important;
  }

  .sm-top-circle{
    width:37px!important;
    height:37px!important;
    min-width:37px!important;
  }
}

/* In case previous CSS hides notification buttons */
.sm-pro-top-actions a,
.sm-pro-top-actions button,
#top-notif-badge,
#messages-unread-badge{
  visibility:visible!important;
}

/* Footer must not cover notification header */
.sm-pro-footer{
  z-index:99970!important;
}