<div class="radikalwp-cb-roles"><label class="radikalwp-cb-role"><input type="radio" name="radikalwp-role" checked><span class="radikalwp-cb-role-card"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"/><line x1="3" y1="6" x2="21" y2="6"/><path d="M16 10a4 4 0 0 1-8 0"/><//svg><strong>خریدار<//strong><span>دسترسی به دانلودها<//span><//span><//label><label class="radikalwp-cb-role"><input type="radio" name="radikalwp-role"><span class="radikalwp-cb-role-card"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="2" y="6" width="20" height="14" rx="2"/><path d="M2 10h20"/><circle cx="17" cy="15" r="1" fill="currentColor" stroke="none"/><//svg><strong>فروشنده<//strong><span>ارسال و فروش محصول<//span><//span><//label><//div>

.radikalwp-cb-roles { display: inline-flex; gap: 10px; font-family: inherit; }
.radikalwp-cb-role input { display: none; }
.radikalwp-cb-role-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 130px;
  padding: 16px 12px;
  text-align: center;
  background: #fff;
  border: 2px solid #e2e8f0;
  border-radius: 14px;
  cursor: pointer;
  transition: all .25s ease;
}
.radikalwp-cb-role-card svg { width: 26px; height: 26px; color: #94a3b8; transition: color .25s ease; }
.radikalwp-cb-role-card strong { font-size: 13.5px; color: #1e293b; }
.radikalwp-cb-role-card > span { font-size: 10.5px; color: #94a3b8; }
.radikalwp-cb-role input:checked + .radikalwp-cb-role-card { border-color: #0ea5e9; background: #f0f9ff; }
.radikalwp-cb-role input:checked + .radikalwp-cb-role-card svg { color: #0ea5e9; }
.radikalwp-cb-role input:checked + .radikalwp-cb-role-card strong { color: #0284c7; }