/* FARAZ Web Push UI — nav bell, toast, states. RTL-safe, safe-area aware. */

.fpush-bell{
  position:relative;
  width:38px;height:38px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:11px;
  background:rgba(59,130,246,.10);
  border:1px solid rgba(59,130,246,.28);
  color:var(--muted,#8b98ad);
  cursor:pointer;
  transition:background .18s,color .18s,border-color .18s,transform .12s;
  flex:none;
}
.fpush-bell .ic{width:18px;height:18px}
.fpush-bell:hover{background:rgba(59,130,246,.18);color:var(--accent,#3b82f6)}
.fpush-bell:active{transform:scale(.94)}
.fpush-bell:focus-visible{outline:2px solid var(--accent,#3b82f6);outline-offset:2px}

/* state: on — green dot with pulse */
.fpush-bell[data-state="on"]{
  background:rgba(34,197,94,.14);
  border-color:rgba(34,197,94,.4);
  color:var(--green,#22c55e);
}
.fpush-bell[data-state="on"] .fpush-dot{
  position:absolute;top:5px;inset-inline-end:5px;
  width:8px;height:8px;border-radius:50%;
  background:var(--green,#22c55e);
  box-shadow:0 0 0 0 rgba(34,197,94,.55);
  animation:fpush-ping 2.4s ease-out infinite;
}
@keyframes fpush-ping{
  0%{box-shadow:0 0 0 0 rgba(34,197,94,.5)}
  70%{box-shadow:0 0 0 7px rgba(34,197,94,0)}
  100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}
}

/* state: denied / unsupported — muted, slashed look via opacity */
.fpush-bell[data-state="denied"],
.fpush-bell[data-state="unsupported"]{
  opacity:.55;
  border-color:rgba(148,163,184,.25);
  background:rgba(148,163,184,.08);
}

/* standalone toast (used when common.js toast() is unavailable) */
.fpush-toast{
  position:fixed;
  bottom:calc(18px + env(safe-area-inset-bottom,0px));
  inset-inline-start:50%;
  transform:translateX(-50%) translateY(16px);
  background:#0f2237;
  border:1px solid #335174;
  color:#e9eff8;
  padding:11px 16px;
  border-radius:12px;
  font-size:13px;
  font-weight:600;
  z-index:95;
  opacity:0;
  pointer-events:none;
  transition:opacity .25s,transform .25s;
  box-shadow:0 14px 40px rgba(0,0,0,.45);
  max-width:min(420px,88vw);
  text-align:center;
}
html[dir="rtl"] .fpush-toast{transform:translateX(50%) translateY(16px)}
.fpush-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
html[dir="rtl"] .fpush-toast.show{transform:translateX(50%) translateY(0)}
.fpush-toast.bad{border-color:#7f1d1d;background:#2a1113}

/* mobile menu row label weight */
#mmPushRow{font-weight:600}

@media (max-width:760px){
  .fpush-bell{width:40px;height:40px}
}

@media (prefers-reduced-motion:reduce){
  .fpush-bell[data-state="on"] .fpush-dot{animation:none}
  .fpush-toast{transition:opacity .2s}
}