.toph-wapop{
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: none;
  direction: rtl;
  font-family: system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}
.toph-wapop.is-open{ display:block; }
.toph-wapop__backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(2px);
}
.toph-wapop__card{
  position:absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  width: min(460px, calc(100% - 28px));
  background:#fff;
  border-radius: 18px;
  padding: 18px 18px 16px;
  box-shadow: 0 18px 55px rgba(0,0,0,.35);
  border: 1px solid rgba(0,0,0,.06);
  animation: tophWapopIn .22s ease-out forwards;
}
@keyframes tophWapopIn{
  from{ opacity:0; transform: translate(-50%,-50%) scale(.96); }
  to{ opacity:1; transform: translate(-50%,-50%) scale(1); }
}
.toph-wapop__close{
  position:absolute;
  top:10px;
  left:10px;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 12px;
  background: rgba(0,0,0,.06);
  cursor:pointer;
  font-size: 22px;
  line-height: 38px;
}
.toph-wapop__badge{
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(48,145,181,.12);
  margin-bottom: 10px;
  font-size: 22px;
}
.toph-wapop__title{
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 900;
  color:#0b4574;
}
.toph-wapop__text{
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.65;
  color:#222;
}
.toph-wapop__actions{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 10px;
}
.toph-wapop__btn{
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 12px 12px;
  border-radius: 14px;
  text-decoration:none !important;
  font-weight: 900;
  font-size: 15px;
  border: 1px solid rgba(0,0,0,.08);
}
.toph-wapop__btn--wa{ background: #06c170; color:#fff !important; }
.toph-wapop__btn--call{ background: #fff; color:#0b4574 !important; }
.toph-wapop__note{
  margin-top: 12px;
  font-size: 12px;
  color: rgba(0,0,0,.6);
  text-align:center;
}

.toph-wapop.is-ltr{ direction:ltr; }
.toph-wapop.is-ltr .toph-wapop__close{ left:auto; right:10px; }

@media (max-width: 420px){
  .toph-wapop__actions{ grid-template-columns: 1fr; }
  .toph-wapop__card{ padding: 16px 14px 14px; }
}