/* Web Push UI — follow bell, the #NT notifications page, and the transient toast.
   Dark surfaces + brand green accent, tuned for finesse. */

:root {
  --push-green: #00e701;
  --push-green-lt: #38ef7d;
  --push-blue: #5ac8fa;              /* iOS system blue for the Share glyph */
  --push-surface: rgba(255, 255, 255, 0.045);
  --push-surface-2: rgba(255, 255, 255, 0.075);
  --push-border: rgba(255, 255, 255, 0.10);
  --push-muted: rgba(255, 255, 255, 0.58);
  --push-title: rgba(255, 255, 255, 0.95);
}

/* ---------------------------------------------------------------- follow bell */
.push-bell {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--push-muted);
  cursor: pointer;
  flex: 0 0 auto;
  transition: color .15s ease, background-color .15s ease, transform .1s ease;
  -webkit-tap-highlight-color: transparent;
  
}

.live-match-top .push-bell
{
top:-45px;
}

.push-bell:hover { background: var(--push-surface-2); color: #fff; }
.push-bell:active { transform: scale(0.88); }
.push-bell svg { display: block; }
.push-bell .bell-body { fill: currentColor; }
.push-bell.is-following { color: var(--push-green); }
.push-bell.is-following .bell-body { fill: var(--push-green); }
.push-bell:focus-visible { outline: 2px solid var(--push-green); outline-offset: 2px; }
.live-match-meta .push-bell { width: 26px; height: 26px; }
.live-md-bell { display: inline-flex; margin-left: auto; }

/* ---------------------------------------------------------------- #NT page */
.notif-page { max-width: 640px; }
.notif-shell { display: flex; flex-direction: column; gap: 14px; }

.notif-shell > * { animation: notif-rise .42s cubic-bezier(.2, .7, .3, 1) both; }
.notif-shell > *:nth-child(2) { animation-delay: .05s; }
.notif-shell > *:nth-child(3) { animation-delay: .10s; }
.notif-shell > *:nth-child(4) { animation-delay: .15s; }
.notif-shell > *:nth-child(5) { animation-delay: .20s; }
@keyframes notif-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .notif-shell > * { animation: none; } .notif-hero-ping, .ic-share::after { animation: none; } }

.notif-note { color: var(--push-muted); line-height: 1.5; }

/* hero */
.notif-hero { display: flex; align-items: center; gap: 14px; padding: 2px 2px 4px; }
.notif-hero-badge {
  position: relative; flex: 0 0 auto;
  width: 54px; height: 54px; border-radius: 17px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(150deg, var(--push-green-lt), var(--push-green));
  box-shadow: 0 10px 24px rgba(0, 231, 1, .28), inset 0 1px 0 rgba(255, 255, 255, .4);
}
.notif-hero-badge .bell-body { fill: #04220f; }
.notif-hero-ping {
  position: absolute; inset: -5px; border-radius: 22px;
  border: 2px solid rgba(0, 231, 1, .5);
  animation: notif-ping 2.6s ease-out infinite;
}
@keyframes notif-ping { 0% { opacity: .55; transform: scale(.92); } 70%, 100% { opacity: 0; transform: scale(1.28); } }
.notif-hero-title { font-size: 21px; font-weight: 700; color: var(--push-title); letter-spacing: .2px; }
.notif-hero-sub { margin-top: 2px; font-size: 13.5px; color: var(--push-muted); }

/* generic card */
.notif-card {
  position: relative; display: flex; align-items: center; gap: 14px;
  padding: 15px 16px; border: 1px solid var(--push-border); border-radius: 16px;
  background: var(--push-surface); cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, transform .06s ease;
}
.notif-card:hover { background: var(--push-surface-2); }
.notif-card:active { transform: scale(.995); }
.notif-card-static { cursor: default; }
.notif-card.is-disabled { opacity: .6; cursor: not-allowed; }
.notif-card-text { min-width: 0; flex: 1; }
.notif-card-title { font-weight: 600; font-size: 15px; color: var(--push-title); }
.notif-card-sub { margin-top: 3px; font-size: 12.5px; color: var(--push-muted); line-height: 1.45; }

.notif-chip {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  color: var(--push-green); background: rgba(0, 231, 1, .12); border: 1px solid rgba(0, 231, 1, .22);
}
.notif-chip svg { display: block; }

.notif-count {
  flex: 0 0 auto; min-width: 26px; height: 26px; padding: 0 8px; border-radius: 13px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: #04220f; background: var(--push-green);
}

/* switch */
.notif-switch { position: relative; flex: 0 0 auto; width: 48px; height: 28px; }
.notif-switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.notif-slider { position: absolute; inset: 0; border-radius: 999px; background: rgba(255, 255, 255, .16); transition: background-color .2s ease; pointer-events: none; }
.notif-slider::before {
  content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%;
  background: #fff; box-shadow: 0 2px 5px rgba(0, 0, 0, .3);
  transition: transform .22s cubic-bezier(.3, 1.4, .5, 1);
}
.notif-switch input:checked + .notif-slider { background: linear-gradient(90deg, var(--push-green-lt), var(--push-green)); }
.notif-switch input:checked + .notif-slider::before { transform: translateX(20px); }
.notif-switch input:disabled + .notif-slider { opacity: .5; }
.notif-switch input:focus-visible + .notif-slider { outline: 2px solid var(--push-green); outline-offset: 2px; }

/* actions */
.notif-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 2px; }
.notif-btn {
  padding: 10px 18px; border: 1px solid var(--push-border); border-radius: 11px;
  background: var(--push-surface); color: #fff; font: inherit; font-weight: 600; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.notif-btn:hover { background: var(--push-surface-2); border-color: rgba(0, 231, 1, .4); }
.notif-btn:disabled { opacity: .5; cursor: default; }
.notif-msg { font-size: 13px; color: var(--push-muted); }
.notif-msg.is-error { color: #ff6b6b; }

/* ---------------------------------------------------------------- iOS install guide */
.notif-install {
  position: relative; overflow: hidden;
  border: 1px solid rgba(0, 231, 1, .25); border-radius: 18px; padding: 18px;
  background: linear-gradient(180deg, rgba(0, 231, 1, .09), rgba(255, 255, 255, .03) 42%);
}
.notif-install-glow {
  position: absolute; top: -70px; right: -50px; width: 200px; height: 200px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 231, 1, .22), transparent); pointer-events: none;
}
.notif-install-head { position: relative; display: flex; align-items: flex-start; gap: 12px; }
.notif-install-badge {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center; color: #04220f;
  background: linear-gradient(150deg, var(--push-green-lt), var(--push-green));
  box-shadow: 0 6px 16px rgba(0, 231, 1, .3);
}
.notif-install-title { font-weight: 700; font-size: 16px; color: var(--push-title); }
.notif-install-lead { margin-top: 3px; font-size: 13px; color: var(--push-muted); line-height: 1.5; }

/* 3-step visual flow */
.notif-flow { position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; margin: 20px 0 6px; }
.notif-flow-tile { display: flex; flex-direction: column; align-items: center; gap: 9px; flex: 1 1 0; min-width: 0; padding-top: 6px; }
.notif-flow-ic {
  position: relative; width: 60px; height: 60px; border-radius: 18px;
  display: flex; align-items: center; justify-content: center;
  background: var(--push-surface-2); border: 1px solid var(--push-border); color: #fff;
}
.notif-flow-ic.ic-share { color: var(--push-blue); background: rgba(90, 200, 250, .12); border-color: rgba(90, 200, 250, .3); }
.notif-flow-ic.ic-share::after {
  content: ""; position: absolute; inset: -5px; border-radius: 23px;
  border: 2px solid rgba(90, 200, 250, .5); animation: notif-ping 2.6s ease-out infinite;
}
.notif-flow-ic.ic-add { color: var(--push-green); background: rgba(0, 231, 1, .12); border-color: rgba(0, 231, 1, .3); }
.notif-flow-ic.ic-app { background: transparent; border: none; }
.notif-flow-ic.ic-app img { width: 56px; height: 56px; border-radius: 16px; display: block; box-shadow: 0 6px 16px rgba(0, 0, 0, .4); }
.notif-flow-lbl { font-size: 11.5px; line-height: 1.25; color: var(--push-muted); text-align: center; max-width: 92px; }
.notif-flow-arrow { flex: 0 0 auto; color: rgba(255, 255, 255, .32); margin-top: 27px; }

/* numbered steps */
.notif-steps { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.notif-steps li { display: flex; align-items: center; gap: 11px; font-size: 13.5px; line-height: 1.4; color: rgba(255, 255, 255, .82); }
.notif-step-n {
  flex: 0 0 auto; width: 23px; height: 23px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12.5px; font-weight: 700; color: #04220f; background: var(--push-green);
}

/* ---------------------------------------------------------------- event icons */
.notif-ev-ico { vertical-align: middle; display: inline-block; }
.notif-ev-emoji { font-size: 15px; line-height: 1; vertical-align: middle; }
.notif-legend {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--push-border);
}
/* icon + label pill, e.g. (corner icon) Corners */
.notif-tag {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px;
  border-radius: 999px; border: 1px solid var(--push-border); background: var(--push-surface);
  font-size: 12px; color: rgba(255, 255, 255, .85); white-space: nowrap;
}
.notif-tag .notif-ev-ico { width: 13px; height: 13px; }
.notif-tag .notif-ev-emoji { font-size: 12px; }
.pt-dot { color: rgba(255, 255, 255, .35); padding: 0 2px; }

/* ---------------------------------------------------------------- event picker modal */
.notif-modal-backdrop {
  position: fixed; inset: 0; z-index: 4100;
  background: rgba(0, 0, 0, .55);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  display: flex; align-items: flex-end; justify-content: center;
  opacity: 0; transition: opacity .2s ease;
}
.notif-modal-backdrop.open { opacity: 1; }
.notif-modal {
  width: 100%; max-width: 430px;
  background: #182835;
  border: 1px solid rgba(255, 255, 255, .12); border-bottom: none;
  border-radius: 20px 20px 0 0;
  padding: 18px 18px calc(18px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -14px 44px rgba(0, 0, 0, .5);
  transform: translateY(26px);
  transition: transform .24s cubic-bezier(.3, 1, .4, 1);
}
.notif-modal-backdrop.open .notif-modal { transform: translateY(0); }
@media (min-width: 700px) {
  .notif-modal-backdrop { align-items: center; }
  .notif-modal {
    max-width: 380px; border-radius: 18px;
    border-bottom: 1px solid rgba(255, 255, 255, .12); padding-bottom: 18px;
  }
}

.nm-title {
  font-weight: 700; font-size: 16px; color: var(--push-title);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nm-sub { margin-top: 3px; font-size: 12.5px; color: var(--push-muted); }

.nm-events { display: flex; flex-direction: column; gap: 8px; margin: 16px 0; }
.nm-ev {
  position: relative; display: flex; align-items: center; gap: 11px;
  padding: 11px 12px; border: 1px solid var(--push-border); border-radius: 12px;
  background: var(--push-surface); cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.nm-ev:has(input:checked) { border-color: rgba(0, 231, 1, .35); background: rgba(0, 231, 1, .07); }
.nm-ev-ic { flex: 0 0 auto; width: 20px; display: flex; justify-content: center; }
.nm-ev-ic .notif-ev-ico { width: 16px; height: 16px; }
.nm-ev-lbl { flex: 1; min-width: 0; font-size: 14px; color: var(--push-title); }
.nm-ev input { position: absolute; opacity: 0; pointer-events: none; }
.nm-check {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, .3); color: #04220f;
  display: flex; align-items: center; justify-content: center;
  transition: background-color .15s ease, border-color .15s ease;
}
.nm-check svg { opacity: 0; transition: opacity .12s ease; }
.nm-ev input:checked ~ .nm-check { background: var(--push-green); border-color: var(--push-green); }
.nm-ev input:checked ~ .nm-check svg { opacity: 1; }

.nm-actions { display: flex; gap: 10px; }
.nm-btn {
  flex: 1; padding: 12px 14px; border-radius: 12px;
  font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
  border: 1px solid var(--push-border); background: var(--push-surface); color: #fff;
}
.nm-btn:disabled { opacity: .45; cursor: default; }
.nm-btn-primary {
  border: none; color: #04220f;
  background: linear-gradient(150deg, var(--push-green-lt), var(--push-green));
}
.nm-btn-danger {
  flex: 0 0 auto; color: #ff6b6b;
  border-color: rgba(255, 107, 107, .35); background: rgba(255, 107, 107, .08);
}

/* ---------------------------------------------------------------- toast
   Sonner-style: compact fit-content card, surface clearly LIGHTER than the
   page (that's what makes it float), hairline border + layered shadow, small
   inline icon, quick slide+fade. Tap to dismiss. */
.push-toast {
  position: fixed; left: 50%; bottom: calc(86px + env(safe-area-inset-bottom, 0px));
  transform: translate(-50%, 12px);
  display: flex; align-items: flex-start; gap: 9px;
  width: max-content; max-width: min(calc(100vw - 32px), 380px);
  padding: 11px 15px 12px 13px; border-radius: 13px;
  background: #24384a;
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .30), 0 14px 36px rgba(0, 0, 0, .42);
  opacity: 0; pointer-events: none; cursor: pointer; z-index: 4000;
  transition: opacity .18s ease, transform .2s ease;
}
.push-toast.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }

.pt-chip { flex: 0 0 auto; display: flex; align-items: center; margin-top: 1px; }
.pt-chip svg { width: 17px; height: 17px; }
.pt-chip .bell-body { fill: var(--push-green); }
.pt-body { min-width: 0; }
.pt-title {
  font-weight: 600; font-size: 13.5px; color: var(--push-title); line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pt-sub {
  margin-top: 2px; font-size: 12px; color: rgba(255, 255, 255, .68); line-height: 1.4;
  display: flex; align-items: center; flex-wrap: wrap; gap: 2px 5px;
}
.pt-sub .notif-ev-ico { display: inline-block; width: 13px; height: 13px; }
.pt-sub .notif-ev-emoji { font-size: 12px; }

.push-toast.is-error { border-color: rgba(255, 107, 107, .38); }
.push-toast.is-error .pt-chip .bell-body { fill: #ff6b6b; }

/* ---------------------------------------------------------------- install animation */
.notif-anim { display: flex; justify-content: center; margin: 18px 0 2px; }
.na-phone {
  position: relative; width: 172px; height: 280px; border-radius: 26px;
  border: 2px solid rgba(255, 255, 255, .14); background: #0c1720;
  overflow: hidden; box-shadow: 0 14px 34px rgba(0, 0, 0, .45);
}
.na-screen { position: absolute; inset: 0; padding: 14px 12px; }

/* stage 1 — Safari page */
.na-page { animation: na-page 7.5s ease-in-out infinite; }
.na-url {
  height: 22px; border-radius: 8px; background: rgba(255, 255, 255, .08);
  font-size: 10px; color: var(--push-muted);
  display: flex; align-items: center; justify-content: center;
}
.na-line { height: 9px; border-radius: 5px; background: rgba(255, 255, 255, .10); margin-top: 10px; }
.na-line.na-short { width: 65%; }
.na-chip-row { display: flex; gap: 8px; margin-top: 12px; }
.na-chip-row span { flex: 1; height: 44px; border-radius: 9px; background: rgba(255, 255, 255, .06); }
.na-toolbar {
  position: absolute; left: 0; right: 0; bottom: 0; height: 40px;
  background: rgba(255, 255, 255, .05); border-top: 1px solid rgba(255, 255, 255, .08);
  display: flex; align-items: center; justify-content: center; color: var(--push-blue);
}

/* stage 2 — share sheet */
.na-sheet {
  position: absolute; left: 5px; right: 5px; bottom: 5px;
  border-radius: 14px; background: #1b2a36; border: 1px solid rgba(255, 255, 255, .10);
  padding: 8px 8px 10px; transform: translateY(115%);
  animation: na-sheet 7.5s cubic-bezier(.3, .9, .3, 1) infinite;
}
.na-handle { display: block; width: 34px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .25); margin: 0 auto 8px; }
.na-row { position: relative; display: flex; align-items: center; gap: 8px; height: 34px; border-radius: 9px; padding: 0 9px; font-size: 10.5px; }
.na-row svg { flex: 0 0 auto; }
.na-row.na-dim { background: rgba(255, 255, 255, .05); margin: 6px 0; }
.na-row.na-add { color: var(--push-green); border: 1px solid rgba(0, 231, 1, .3); animation: na-row 7.5s ease infinite; }
.na-row.na-add span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* stage 3 — home screen with the Bast icon popping in */
.na-home { display: flex; align-items: center; opacity: 0; animation: na-home 7.5s ease infinite; }
.na-dots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px 10px; width: 100%; padding: 4px; }
.na-dots > span { width: 26px; height: 26px; border-radius: 8px; background: rgba(255, 255, 255, .10); justify-self: center; }
.na-app { display: flex; flex-direction: column; align-items: center; gap: 3px; justify-self: center; animation: na-app 7.5s cubic-bezier(.3, 1.4, .5, 1) infinite; }
.na-app img { width: 26px; height: 26px; border-radius: 8px; box-shadow: 0 0 0 2px rgba(0, 231, 1, .4), 0 4px 10px rgba(0, 0, 0, .4); }
.na-app i { font-style: normal; font-size: 7.5px; color: rgba(255, 255, 255, .75); }

/* tap ripples */
.na-tap {
  position: absolute; width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255, 255, 255, .38); opacity: 0; pointer-events: none;
}
.na-tap1 { left: 50%; top: 50%; margin: -17px 0 0 -17px; animation: na-tap1 7.5s ease-out infinite; }
.na-tap2 { right: 12px; top: 50%; margin-top: -17px; animation: na-tap2 7.5s ease-out infinite; }

/* one shared 7.5s timeline */
@keyframes na-page  { 0%, 52% { opacity: 1; } 58%, 92% { opacity: 0; } 98%, 100% { opacity: 1; } }
@keyframes na-sheet { 0%, 18% { transform: translateY(115%); } 26%, 46% { transform: translateY(0); } 54%, 100% { transform: translateY(115%); } }
@keyframes na-home  { 0%, 54% { opacity: 0; } 60%, 92% { opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes na-app   { 0%, 58% { opacity: 0; transform: scale(.2); } 64% { opacity: 1; transform: scale(1.2); } 68%, 92% { opacity: 1; transform: scale(1); } 97%, 100% { opacity: 0; transform: scale(.2); } }
@keyframes na-row   { 0%, 32% { background: transparent; } 38%, 46% { background: rgba(0, 231, 1, .16); } 52%, 100% { background: transparent; } }
@keyframes na-tap1  { 0%, 10% { opacity: 0; transform: scale(.4); } 13% { opacity: .9; transform: scale(.65); } 19% { opacity: 0; transform: scale(1.6); } 100% { opacity: 0; } }
@keyframes na-tap2  { 0%, 35% { opacity: 0; transform: scale(.4); } 39% { opacity: .9; transform: scale(.65); } 45% { opacity: 0; transform: scale(1.6); } 100% { opacity: 0; } }

/* the numbered steps light up in sync with the animation */
@media (prefers-reduced-motion: no-preference) {
  .notif-steps li:nth-child(1) .notif-step-n { animation: na-s1 7.5s ease infinite; }
  .notif-steps li:nth-child(2) .notif-step-n { animation: na-s2 7.5s ease infinite; }
  .notif-steps li:nth-child(3) .notif-step-n { animation: na-s3 7.5s ease infinite; }
}
@keyframes na-s1 { 0%, 2% { transform: scale(1); } 6%, 18% { transform: scale(1.22); box-shadow: 0 0 0 4px rgba(0, 231, 1, .22); } 24%, 100% { transform: scale(1); } }
@keyframes na-s2 { 0%, 30% { transform: scale(1); } 36%, 48% { transform: scale(1.22); box-shadow: 0 0 0 4px rgba(0, 231, 1, .22); } 54%, 100% { transform: scale(1); } }
@keyframes na-s3 { 0%, 56% { transform: scale(1); } 62%, 88% { transform: scale(1.22); box-shadow: 0 0 0 4px rgba(0, 231, 1, .22); } 94%, 100% { transform: scale(1); } }

/* reduced motion: static tile flow instead of the animation */
@media (prefers-reduced-motion: reduce) { .notif-anim { display: none; } }
@media (prefers-reduced-motion: no-preference) { .notif-flow { display: none; } }