/* ==========================================================================
   Welcome popup — shown once, on a new account's first sign-in.
   Tells a merchant / customer to add the platform to their phone's home screen.
   Palette follows app.css: violet #780090, magma orange #FC6000, lavender canvas.
   Arabic block first, English underneath.
   ========================================================================== */

html.wx-lock,
html.wx-lock body{overflow:hidden}

.wx{
  position:fixed;inset:0;z-index:12000;
  display:grid;place-items:center;
  padding:18px;
  /* the second animation is a no-JS safety net: if welcome.js never runs,
     the popup fades out on its own after 3 minutes and stops blocking taps */
  animation:wxFade .26s ease-out both, wxAutoHide .5s ease-in 180s forwards;
}
.wx.wx-js{animation:wxFade .26s ease-out both}
.wx.wx-out{animation:wxFadeOut .22s ease-in both}

.wx-backdrop{
  position:absolute;inset:0;
  background:radial-gradient(120% 90% at 50% 0%,rgba(120,0,144,.30) 0%,rgba(27,11,42,.58) 55%,rgba(27,11,42,.68) 100%);
  -webkit-backdrop-filter:blur(4px) saturate(108%);
  backdrop-filter:blur(4px) saturate(108%);
}

.wx-card{
  position:relative;
  width:100%;max-width:430px;
  max-height:92vh;overflow:auto;
  -webkit-overflow-scrolling:touch;
  background:var(--card,#fff);
  border:1px solid rgba(120,0,144,.10);
  border-radius:22px;
  padding:22px 20px 18px;
  box-shadow:0 34px 74px -32px rgba(27,11,42,.62),0 2px 0 rgba(255,255,255,.6) inset;
  animation:wxIn .46s cubic-bezier(.16,.84,.28,1) both;
}
.wx.wx-out .wx-card{animation:wxOut .2s ease-in both}

@keyframes wxFade{from{opacity:0}to{opacity:1}}
@keyframes wxFadeOut{from{opacity:1}to{opacity:0}}
@keyframes wxAutoHide{to{opacity:0;visibility:hidden;pointer-events:none}}
@keyframes wxIn{
  from{opacity:0;transform:translateY(12px) scale(.94)}
  60%{opacity:1}
  to{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes wxOut{
  from{opacity:1;transform:translateY(0) scale(1)}
  to{opacity:0;transform:translateY(6px) scale(.97)}
}

.wx-x{
  position:absolute;top:9px;inset-inline-end:9px;
  width:30px;height:30px;display:grid;place-items:center;
  border:0;border-radius:999px;cursor:pointer;
  background:rgba(120,0,144,.06);color:var(--muted,#6E6480);
  font:inherit;font-size:19px;line-height:1;
  transition:background .16s ease,color .16s ease;
}
.wx-x:hover{background:rgba(120,0,144,.13);color:var(--violet,#780090)}
.wx-x:focus-visible{outline:none;box-shadow:var(--ring,0 0 0 4px rgba(120,0,144,.12))}

.wx-ico{
  display:grid;place-items:center;
  width:52px;height:52px;border-radius:17px;margin-bottom:12px;
  color:var(--violet,#780090);
  background:var(--grad-soft,linear-gradient(120deg,#F6ECFB 0%,#FFF1E8 100%));
  border:1px solid rgba(120,0,144,.13);
}

.wx-title{margin:0 0 7px;font-size:18.5px;line-height:1.35;letter-spacing:-.25px;color:var(--ink,#1B0B2A)}
.wx-lead{margin:0 0 12px;font-size:14.4px;line-height:1.65;color:var(--muted,#6E6480)}

.wx-steps{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:8px}
.wx-steps li{display:flex;align-items:flex-start;gap:9px;font-size:13.6px;line-height:1.55;color:var(--ink,#1B0B2A)}
.wx-steps li b{font-weight:750}
.wx-n{
  flex:none;width:22px;height:22px;border-radius:8px;
  display:grid;place-items:center;
  font-size:11.5px;font-weight:800;color:var(--violet,#780090);
  background:var(--violet-soft,#F6ECFB);
  border:1px solid rgba(120,0,144,.12);
  margin-top:1px;
}

.wx-contact{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin:0 0 4px;padding:9px 12px;
  border-radius:12px;
  background:var(--magma-soft,#FFEDE2);
  border:1px solid #FFDDC9;
  font-size:13.3px;line-height:1.5;color:var(--ink,#1B0B2A);
}
.wx-contact svg{flex:none;color:#C24A00}
.wx-num{
  font-weight:800;letter-spacing:.3px;
  direction:ltr;unicode-bidi:embed;
  color:#8E3800;text-decoration:none;
}
.wx-num:hover{text-decoration:underline}

.wx-note{margin:10px 0 0;font-size:11.8px;line-height:1.5;color:var(--muted,#6E6480);opacity:.9}

.wx-btn{
  display:block;width:100%;margin-top:14px;padding:12px 16px;
  border:0;border-radius:13px;cursor:pointer;
  font:inherit;font-size:14.5px;font-weight:750;color:#fff;
  background:var(--grad,linear-gradient(120deg,#780090 0%,#A21BC0 58%,#FC6000 125%));
  box-shadow:0 14px 26px -16px rgba(120,0,144,.7);
  transition:transform .15s ease,box-shadow .18s ease,filter .18s ease;
}
.wx-btn:hover{transform:translateY(-1px);filter:saturate(110%);box-shadow:0 18px 30px -16px rgba(120,0,144,.75)}
.wx-btn:active{transform:translateY(0) scale(.995)}
.wx-btn:focus-visible{outline:none;box-shadow:var(--ring,0 0 0 4px rgba(120,0,144,.12))}

/* the English half */
.wx-en{
  margin-top:14px;padding-top:13px;
  border-top:1px dashed var(--line,#EEE3F6);
}
.wx-en .wx-title{font-size:15.4px;letter-spacing:-.1px;margin-bottom:6px}
.wx-en .wx-lead{font-size:12.9px;line-height:1.6;margin-bottom:10px}
.wx-en .wx-steps li{font-size:12.4px;color:var(--muted,#6E6480)}
.wx-en .wx-steps li b{color:var(--ink,#1B0B2A)}
.wx-en .wx-contact{font-size:12.4px;padding:8px 11px}
.wx-en .wx-note{margin-top:8px}

@media (max-width:480px){
  .wx{padding:12px}
  .wx-card{padding:19px 15px 15px;border-radius:19px;max-height:94vh}
  .wx-title{font-size:17.2px}
  .wx-lead{font-size:13.8px}
  .wx-steps li{font-size:13px}
  .wx-ico{width:46px;height:46px;border-radius:15px}
}

@media (prefers-reduced-motion:reduce){
  .wx,.wx.wx-out,.wx-card,.wx.wx-out .wx-card{animation:none}
}