/* Topup — styles for the phone-notification button, card and toast.
   Same theme as assets/app.css: violet brand, magma accent, lavender canvas. */

.push-btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:6px;padding:6px 10px;border-radius:999px;cursor:pointer;
  border:1px solid rgba(120,0,144,.18);
  background:linear-gradient(120deg,#F6ECFB 0%,#FFEDE2 100%);
  color:var(--violet,#780090);font:inherit;font-size:13px;font-weight:600;
  line-height:1;
}
.push-btn:hover{background:var(--violet-soft,#F6ECFB);}
.push-btn svg{width:15px;height:15px;flex:0 0 auto}
.push-btn[hidden]{display:none!important}

.push-card{display:flex;flex-direction:column;gap:10px}
.push-card h3{margin:0;font-size:1rem}
.push-card[data-state="on"]{
  border:1px solid rgba(14,159,110,.28);
  background:linear-gradient(120deg,#F2FBF6 0%,#FFFFFF 70%);
}
.push-card .push-actions{display:flex;flex-wrap:wrap;gap:8px}
.push-card .push-actions [hidden]{display:none!important}
.push-card .push-status{margin:0;color:var(--muted,#6E6480)}
.push-card[data-state="on"] .push-status{color:var(--ok,#0E9F6E);font-weight:600}
.push-card[data-state="blocked"] .push-status,
.push-card[data-state="error"] .push-status{color:var(--bad,#D92D20)}
.push-card .push-hint{
  margin:0;padding:9px 11px;border-radius:12px;
  background:var(--violet-soft,#F6ECFB);color:var(--muted,#6E6480);font-size:.85rem
}

.push-toast{
  position:fixed;inset-inline:0;bottom:18px;margin:auto;z-index:9999;
  width:max-content;max-width:min(92vw,420px);
  padding:11px 16px;border-radius:14px;
  background:#1B0B2A;color:#fff;font-size:.9rem;font-weight:600;
  box-shadow:0 18px 40px -18px rgba(27,11,42,.7);
}

@media (max-width:520px){
  .push-btn span{display:none}
  .push-btn{padding:7px 9px}
}