/* explain_register.css — شرح/Onboarding (منفصل) */
.explain-mask{
  position:fixed; inset:0;
  background:rgba(0,0,0,.55);
  z-index:9998;
}
.explain-pop{
  position:fixed;
  z-index:9999;
  max-width:420px;
  background:#fff;
  border:1px solid #e2e8f0;
  border-radius:14px;
  padding:14px;
  box-shadow:0 12px 30px rgba(0,0,0,.22);
  font-family:'Tajawal',Tahoma,Arial,sans-serif;
}
.explain-pop h4{
  margin:0 0 6px;
  font-size:16px;
  font-weight:800;
  color:#0f172a;
}
.explain-pop p{
  margin:0 0 10px;
  color:#475569;
  line-height:1.7;
  font-size:13px;
  font-weight:500;
}
.explain-actions{
  display:flex;
  gap:8px;
  justify-content:flex-end;
  align-items:center;
}
.explain-btn{
  border:0;
  border-radius:12px;
  padding:8px 12px;
  font-weight:800;
  cursor:pointer;
  font-family:'Tajawal',Tahoma,Arial,sans-serif;
}
.explain-btn-ghost{background:#fff;border:1px solid #cbd5e1}
.explain-btn-primary{background:#0f9d90;color:#fff}
.explain-btn-primary:hover{background:#0b7f74}

/* Highlight ring */
.explain-focus{
  position:fixed;
  z-index:9999;
  border-radius:14px;
  box-shadow:0 0 0 4px rgba(255,255,255,.9), 0 0 0 10px rgba(15,157,144,.35);
  pointer-events:none;
}
.help-btn{
  position: absolute;
  top: 12px;
  left: 12px; /* RTL */
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: #0ea5e9; /* نفس ألوان النظام */
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  z-index: 5;
}

.help-btn:hover{
  background: #0284c7;
}